editable

Element editing properties.

Note

You need to install the editor plugin to use this feature, or directly install leafer-editor (which already includes editor-related plugins).

Key Properties

editable: boolean

Whether the element is editable. Default is false.

This includes draggable behavior, so you do not need to set draggable again.

locked: boolean

Whether the element is locked. Default is false.

Locked elements cannot be moved, edited, or selected.

widthRange: IRangeSize

Limits the width range of the element (currently only effective when selecting a single element in the editor).

The editor also supports the beforeScale event hook to constrain width.

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

rect.widthRange = { min: 10, max: 200 }

heightRange: IRangeSize

Limits the height range of the element (currently only effective when selecting a single element in the editor).

The editor also supports the beforeScale event hook to constrain height.

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

rect.heightRange = { min: 10, max: 200 }

lockRatio: boolean

Whether to lock the aspect ratio of the element. Default is false.

You can also configure this globally in the editor via global settings.

Resize

resize element / group

Editor Configuration Properties

editConfig: IEditorConfig

Element-specific editor configuration.

// #图形编辑器 [editConfig]
import { Text } from 'leafer-ui'

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

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

// 2. 设置单个元素，不会导出json
const text = new Text({ text: 'hello', editable: true })
Object.defineProperty(text, 'editConfig', {
    get() { return { moveable: false } }
})

// 3. 设置单个元素，支持导出json，会增加内存开销
new Text({
    text: 'hello',
    editable: true,
    editConfig: { moveable: false }
})

editOuter: string

The outer shape editing tool, typically used for resizing and shape adjustment. Default is 'EditTool'.

For Line, the default is 'LineEditTool'. You can also customize edit tools.

// #图形编辑器 [editOuter]
import { Text } from 'leafer-ui'

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

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

// 2. 设置单个元素，不会导出json
const text = new Text({ text: 'hello', editable: true })
Object.defineProperty(text, 'editOuter', {
    get() { return 'TextEditTool' }
})

// 2. 设置单个元素，支持导出json，会增加内存开销
new Text({
    text: 'hello',
    editable: true,
    editOuter: 'TextEditTool'
})

editInner: string

The inner detail editor, typically used for editing paths and text. Default is 'PathEditor'.

For Text, the default is 'TextEditor'. You can customize inner editors.

// #图形编辑器 [editInner]
import { Text } from 'leafer-ui'

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

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

// 2. 设置单个元素，不会导出json
const text = new Text({ text: 'hello', editable: true })
Object.defineProperty(text, 'editInner', {
    get() { return 'TextEditor' }
})

// 3. 设置单个元素，支持导出json，会增加内存开销
new Text({
    text: 'hello',
    editable: true,
    editInner: 'TextEditor'
})

Belongs to

UI Elements

Examples

Only editable elements can be selected

// #图形编辑器 [editable]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

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)

Editable elements with custom hover styles

// #图形编辑器 [元素单独配置hover样式]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({
    view: window,
    editor: {}  //  配置 editor 会自动创建并添加 app.editor 实例、tree 层、sky 层
})

app.tree.add(Rect.one({
    editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20],
    editConfig: { hoverStyle: { stroke: 'red' } }, // 单独配置 hover 编辑样式
}, 100, 100))

app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100))