editable

元素编辑属性。

注意事项

需安装 图形编辑器插件 才能使用， 或直接安装 leafer-editor（已集成了图形编辑器相关插件）。

关键属性

editable: boolean

是否允许编辑，默认为 false。

包含了 draggable 功能，不用重复设置。

locked: boolean

是否锁定元素，默认为 false。

锁定后不能移动、编辑，框选不了。

widthRange: IRangeSize

限制元素的宽度范围（目前只有编辑器单选元素时可以控制）。

interface IRangeSize {
  min?: number
  max?: number
}

heightRange: IRangeSize

限制元素的高度范围（目前只有编辑器单选元素时可以控制）。

interface IRangeSize {
  min?: number
  max?: number
}

lockRatio: boolean

是否锁定元素的宽高比例，默认为 false。

另可以通过编辑器进行 全局设置。

resize

resize 元素 / 容器

只读属性

editConfig： IEditorConfig

元素的独立编辑配置，可通过以下方式设置：

import { Text, defineKey } from 'leafer-ui'

// 1. 设置类，所有 Text 元素生效（推荐）
Text.setEditConfig({
    editSize: 'scale' // 使用对象
})

Text.setEditConfig(function (text: Text) {
    return {  // 使用函数返回对象，可增加业务逻辑分流
        editSize: text.get('width') ? 'size' : 'scale'
    }
})


// 2. 设置实例，单个元素生效 （不推荐）
const text = new Text({ text: 'hello', editable: true })
defineKey(text, 'editConfig', {
    get() { return { moveable: false } }
})

editOuter: string

元素的外形编辑工具，一般用于调整尺寸、形状， 默认为 'EditTool'。

Line 默认为 'LineEditTool'，可自定义 编辑工具，通过以下方式设置：

import { Text, defineKey } from 'leafer-ui'

// 1. 设置类，所有 Text 元素生效（推荐）
Text.setEditOuter('TextEditTool')

Text.setEditOuter(function (text: Text) {
    // 使用函数返回名称，可增加业务逻辑分流
    return text.get('width') ? 'EditTool' : 'TextEditTool'
})


// 2. 设置实例，单个元素生效 （不推荐）
const text = new Text({ text: 'hello', editable: true })
defineKey(text, 'editOuter', {
    get() { return 'TextEditTool' }
})

editInner: string

元素的内部细节编辑器，一般用于编辑路径、文本， 默认为 'PathEditor'。

Text 默认为: 'TextEditor'，可自定义 内部编辑器，通过以下方式设置：

import { Text, defineKey } from 'leafer-ui'

// 1. 设置类，所有 Text 元素生效（推荐）
Text.setEditInner('TextEditor')

Text.setEditInner(function (text: Text) {
    // 使用函数返回名称，可增加业务逻辑分流
    return text.get('width') ? 'PathEditor' : 'TextEditor'
})


// 2. 设置实例，单个元素生效 （不推荐）
const text = new Text({ text: 'hello', editable: true })
defineKey(text, 'editInner', {
    get() { return 'TextEditor' }
})

归属

UI

示例

editable 元素才能被选中

import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'

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

const rect1 = Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100) 
const rect2 = Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100)

app.tree.add(rect1)
app.tree.add(rect2)