leafer-ui icon indicating copy to clipboard operation
leafer-ui copied to clipboard

双击文本进入编辑模式时,文本就飘出编辑边框

Open 826327700 opened this issue 1 year ago • 2 comments

image

如图所示,蓝色框是编辑框,文本飘到编辑框下方了

const box = new Text({
	text: "Welcome to LeaferJS",
	resizeFontSize:true,
	editable: true
})
app.tree.add(box)

826327700 avatar Dec 06 '24 14:12 826327700

补充,经过反复测试已找到触发条件: 当leafer App挂载元素发生位置变化后,双击文本编辑,用于编辑的div会创建在位置变化之前的坐标。 测试代码如下:

<template>
    <div style="height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;">
        <div id="leaferEl" style="width: 400px;height: 400px;border: 1px solid red;"></div>
        <!--准备用来顶leaferEl使其向上移动-->
        <div id="block" style="height: 100px;width: 800px;background: red;display: none;"></div>
    </div>
</template>

<script setup lang="ts">
import {App,Text} from "leafer-editor"
import { onMounted } from "vue";
onMounted(() => {
    let app=new App({
        view:"leaferEl",
        width:400,
        height:400,
        tree:{},
        editor:{}
    })
    const box = new Text({
        text: "Welcome to LeaferJS",
        resizeFontSize:true,
        editable: true,
        x:100,
        y:100
    })
    app.tree.add(box)
    setTimeout(() => {//这里100ms后 将block设置为可见,它会将leaferEl向上顶100px,那么后续的文本编辑框将会向下偏移100px
        document.getElementById("block")!.style.display="block"
    }, 100);
})
</script>
<style scoped lang="scss">

</style>

826327700 avatar Dec 06 '24 15:12 826327700

强制更新一下应用的client包围盒:app.updateClientBounds()

https://www.leaferjs.com/ui/reference/display/Leafer.html#updateclientbounds

leaferjs avatar Dec 07 '24 01:12 leaferjs