[Bug] 图片尺寸没有正确地被代理

[Xdy1579883916]

环境: Windows 11, Chrome/134.0.0.0, Vue 3.5.13, leafer-ui 1.0.8 和 1.4.1 以及 1.4.2

问题: 在vue中,使用了 proxyData, 添加图片的时候,没有指定 高度, 然后后续对图片进行修改高度操作, 代理值和实际画布渲染的值不一样

可能的原因:

checkSizeAndCreateData 执行地比 创建代理要早

如果 Cloud Studio 打不开,可以直接使用下面的代码

import { App, Image, defineKey, UI } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import { shallowReactive, watch } from 'vue/dist/vue.esm-browser.js'

// console.log({ shallowReactive, watch })
// 定义proxyData

defineKey(UI.prototype, 'proxyData', {
    get() {
        return this.__proxyData
            ? this.__proxyData
            : (this.__proxyData = this.createProxyData())
    },
})

// 设置元素属性时，内部同步设置代理数据

UI.prototype.setProxyAttr = function (name: string, newValue: unknown): void {
    const data = this.__proxyData as any
    if (data[name] !== newValue) data[name] = newValue
}

// 获取元素属性时，内部优先返回代理数据

UI.prototype.getProxyAttr = function (name: string): any {
    const value = (this.__proxyData as any)[name]
    return value === undefined ? this.__.__get(name) : value
}

// 创建响应式数据

UI.prototype.createProxyData = function () {
    // 1.获取所有样式数据(含默认值)
    const data = this.__.__getData()

    // 2. 生成响应式数据
    const proxyData = shallowReactive(data)

    // 3.观察响应式数据变化，同步更新元素数据
    for (const name in data) {
        watch(
            () => proxyData[name], // source
            (newValue: any) => {
                if (this.__.__get(name) !== newValue) (this as any)[name] = newValue
            } // callback
        )
    }

    return proxyData
}


const app = new App({
    view: window,
    editor: {}
})

const img = Image.one({
    url: 'https://gd-filems.dancf.com/saas/xi19e5/0/cf33c647-f3d8-488c-8a46-11a7d9605259682465.jpg',
    width: 200,
    x: 100,
    y: 100,
    editable: true,
})
app.tree.add(img)

app.editor.target = img



setTimeout(() => {
    console.log('before', img.height)
    console.log('before-proxy', img.proxyData.height)

    // 1: 使用 resizeWidth 修改宽度
    img.resizeWidth(100)

    // 2. 直接修改也同样有问题
    // img.width = 100

    console.log('after', img.height)
    console.log('after', img.__.height)
    console.log('after-proxy', img.proxyData.height)
}, 500)

[Xdy1579883916]

题外话: cloudstudio leafer模板版本有点旧了 leafer-ui 1.0.8 官网 Playground : 1.4.1

官网 Playground 不支持使用 vue, 提供 proxyData 的最小复现还挺麻烦的, 但是我仍然喜欢在 Playground 调试, 不知后续可否提供 vue 框架的支持

[leaferjs]

题外话: cloudstudio leafer模板版本有点旧了 leafer-ui 1.0.8 官网 Playground : 1.4.1

官网 Playground 不支持使用 vue, 提供 proxyData 的最小复现还挺麻烦的, 但是我仍然喜欢在 Playground 调试, 不知后续可否提供 vue 框架的支持

收到，后续可以考虑支持一下，cloudstudio会自动安装最新版的，有^符号