1.0.5 • Published 10 months ago

leafer-x-edit-toolbar v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

leafer-x-edit-toolbar

Leafer 编辑辅助工具栏插件,在线体验

demo

安装

npm install leafer-x-edit-toolbar

配置定义

export type IConfig = {
  /**
   * 自定义容器类名
   */
  className?: string
  /**
   * 自定义容器,建议与 leafer 渲染点在同一层级
   */
  container?: HTMLDivElement
  /**
   * 是否跟随缩放
   */
  followScale?: boolean
  /**
   * 是否显示 toolbar
   */
  shouldShow?: (node: ILeaf) => boolean
  /**
   * 渲染 toolbar 内容
   */
  onRender: (node: ILeaf, container: HTMLDivElement) => void
}

基础使用

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

import { EditToolbarPlugin } from 'leafer-x-edit-toolbar'

// 创建 app 实例
const app = new App({ view: window })

app.tree = app.addLeafer()
app.sky = app.addLeafer({ type: 'draw', usePartRender: false })

// 创建编辑器实例
app.editor = new Editor()

// 创建并添加插件实例
const pluginIns = new EditToolbarPlugin(app, {
  className: 'edit-toolbar',
  followScale: true,
  shouldShow: (node) => {
    console.log('node', node)
    return true
  },
  onRender(node, container) {
    container.innerHTML = `<ul style="list-style: none; margin: 10px 0; padding: 5px; background-color: #fff; border-radius: 5px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
      <li>节点类型:${node.tag}</li>
      <li>宽度:${node.width}</li>
      <li>高度:${node.height}</li>
    </ul>
    `
  },
})

// 添加编辑器到画布
app.sky.add(app.editor)

// 添加矩形
app.tree.add(
  Rect.one(
    { editable: true, fill: 'green', cornerRadius: [20, 20, 20, 20] },
    200,
    200
  )
)

API 文档

构造函数

constructor(app: App, config: IConfig)

参数

  • app: Leafer App 实例
  • config: 插件配置项

配置项

属性类型默认值说明
classNamestring自定义容器类
containerHTMLDivElement自定义容器,建议与 leafer 渲染点在同一层级
followScalebooleanfalse是否跟随缩放
disableDefaultStylebooleanfalse是否使用默认样式,如果为 true 可以通过 onRender 实现更特殊的效果。注意:true 时,followScale 属性失效
shouldShow(node: ILeaf) => boolean() => true是否显示 toolbar
onRender(node: ILeaf, container: HTMLDivElement) => void渲染 toolbar 内容

实例方法

destroy()

销毁 Edit Toolbar 和事件监听

pluginIns.destroy()
1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago