KJDraw Editor APIKJDraw 编辑器 API

Quickstart快速接入#

Give the host element a height, create the editor, then wait for ready before using the current drawing.先给容器设置高度，创建编辑器，再等待 ready 完成后操作当前图档。

Copy<div id="cad"></div>
<style>
  #cad { width: 100%; height: 720px; }
</style>

Copyimport { createKJDrawEditor } from '@kanjieteam/kjdraw'

const editor = createKJDrawEditor('#cad', {
  document: 'sample',
  locale: 'en',
  theme: 'dark',
  layout: 'classic',
  onChange: ({ revision, entityCount }) => {
    console.log({ revision, entityCount })
  },
})

await editor.ready
await editor.execute('CREATE', {
  type: 'CIRCLE',
  payload: { center: [40, 30, 0], radius: 12 },
})
editor.setLayout('compact').fit()

const kjd = await editor.save({ format: 'KJD', download: false })
// Call editor.dispose() when the owning screen unmounts.

Options#

Pass these values as the second argument to createKJDrawEditor().将这些选项作为 createKJDrawEditor() 的第二个参数传入。

Properties#

Read current editor state and reach lower-level integration points when needed.读取当前编辑器状态，并在需要时进入更底层的集成入口。

Methods#

File operations and edits that return promises can be awaited in application workflows.文件操作与返回 Promise 的编辑方法可直接纳入应用异步流程。

Events#

Use constructor callbacks for common events or editor.on() for every event.常用事件可通过初始化回调处理，全部事件都可用 editor.on() 订阅。

Copyconst off = editor.on('selectionchange', ({ ids }) => {
  console.log(ids)
})

// Later
off()

React / Vue#

Copyimport { useRef, useState } from 'react'
import { KJDraw, type KJDrawEditor, type KJWorkbenchLayout } from '@kanjieteam/kjdraw/react'

export function DrawingEditor() {
  const editor = useRef<KJDrawEditor | null>(null)
  const [layout, setLayout] = useState<KJWorkbenchLayout>('classic')

  async function moveSelection() {
    const instance = editor.current
    const ids = instance?.getSelection() ?? []
    if (!instance || !ids.length) return
    await instance.execute('MOVE', { ids, dx: 10, dy: 0 })
  }

  return (
    <>
      <button onClick={() => setLayout('focus')}>Focus drawing</button>
      <button onClick={() => void moveSelection()}>Move selected</button>
      <KJDraw ref={editor} document="sample" layout={layout} style={{ height: 720 }} />
    </>
  )
}

Copy<script setup lang="ts">
import { ref } from 'vue'
import { KJDraw, type KJDrawExposed, type KJWorkbenchLayout } from '@kanjieteam/kjdraw/vue'

const editor = ref<KJDrawExposed | null>(null)
const layout = ref<KJWorkbenchLayout>('classic')

async function moveSelection() {
  const instance = editor.value
  const ids = instance?.getSelection() ?? []
  if (!instance || !ids.length) return
  await instance.execute('MOVE', { ids, dx: 10, dy: 0 })
}
</script>

<template>
  <button @click="layout = 'focus'">Focus drawing</button>
  <button @click="moveSelection">Move selected</button>
  <KJDraw ref="editor" document="sample" :layout="layout" style="height: 720px" />
</template>

Advanced access高级入口#