feat(canvasApi): use canvasApi to access canvas methods (#425)

* feat(canvasApi): use canvasApi to access canvas methods * fix(canvas): optimize import order * fix(canvasApi): change by review comment tips
2024-05-11 02:36:43 -07:00 · 2024-05-11 02:36:43 -07:00 · 30cfeb19df
parent c271054870
commit 30cfeb19df
39 changed files with 227 additions and 217 deletions
--- a/packages/canvas/src/components/container/CanvasContainer.vue
+++ b/packages/canvas/src/components/container/CanvasContainer.vue
@ -55,7 +55,8 @@ import {
  initCanvas,
  clearLineState,
  querySelectById,
-  getCurrent
+  getCurrent,
+  canvasApi
 } from './container'

 export default {
@ -105,6 +106,8 @@ export default {
      }
    }

+    useCanvas().initCanvasApi(canvasApi)
+
    const beforeCanvasReady = () => {
      if (iframe.value) {
        const win = iframe.value.contentWindow
@ -119,7 +122,6 @@ export default {
        iframeMonitoring()

        initCanvas({ emit, renderer: detail, iframe: iframe.value, controller: props.controller })
-        useCanvas().renderer.value = { ...detail, ...window.canvasApi }

        const doc = iframe.value.contentDocument
        const win = iframe.value.contentWindow
--- a/packages/canvas/src/components/container/container.js
+++ b/packages/canvas/src/components/container/container.js
@ -20,6 +20,9 @@ import {
  NODE_LOOP
 } from '../common'
 import { useCanvas, useLayout, useResource, useTranslate } from '@opentiny/tiny-engine-controller'
+import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
+import Builtin from '../builtin/builtin.json'
+
 export const POSITION = Object.freeze({
  TOP: 'top',
  BOTTOM: 'bottom',
@ -27,7 +30,6 @@ export const POSITION = Object.freeze({
  RIGHT: 'right',
  IN: 'in'
 })
-import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'

 const initialDragState = {
  keydown: false,
@ -853,6 +855,49 @@ export const canvasDispatch = (name, data, doc = getDocument()) => {
  doc.dispatchEvent(new CustomEvent(name, data))
 }

+export const canvasApi = {
+  dragStart,
+  updateRect,
+  getContext,
+  getNodePath,
+  dragMove,
+  setLocales,
+  setState,
+  deleteState,
+  getRenderer,
+  clearSelect,
+  selectNode,
+  hoverNode,
+  insertNode,
+  removeNode,
+  addComponent,
+  setPageCss,
+  addScript,
+  addStyle,
+  getNode,
+  getCurrent,
+  setSchema,
+  setUtils,
+  updateUtils,
+  deleteUtils,
+  getSchema,
+  setI18n,
+  getCanvasType,
+  setCanvasType,
+  setProps,
+  setGlobalState,
+  getGlobalState,
+  getDocument,
+  canvasDispatch,
+  Builtin,
+  setDataSourceMap: (...args) => {
+    return canvasState.renderer.setDataSourceMap(...args)
+  },
+  getDataSourceMap: (...args) => {
+    return canvasState.renderer.getDataSourceMap(...args)
+  }
+}
+
 export const initCanvas = ({ renderer, iframe, emit, controller }) => {
  const currentSchema = getSchema()

--- a/packages/canvas/src/components/render/RenderMain.js
+++ b/packages/canvas/src/components/render/RenderMain.js
@ -18,8 +18,6 @@ import { generateFunction } from '@opentiny/tiny-engine-controller/utils'
 import renderer, { parseData, setConfigure, setController, globalNotify, isStateAccessor } from './render'
 import { getNode as getNodeById, clearNodes, getRoot, setContext, getContext, setCondition, context } from './context'
 import CanvasEmpty from './CanvasEmpty.vue'
-import { getCurrent, setLocales, updateRect, addStyle, addScript, canvasDispatch } from '../container/container'
-import Builtin from '../builtin/builtin.json'

 const { BROADCAST_CHANNEL } = constants

@ -426,17 +424,3 @@ export const api = {
  setDataSourceMap,
  setGlobalState
 }
-
-const canvasApi = {
-  getCurrent,
-  setLocales,
-  getNodeById: getNode,
-  updateRect,
-  addStyle,
-  addScript,
-  canvasDispatch
-}
-
-window.api = api
-window.canvasApi = canvasApi
-window.Builtin = Builtin
--- a/packages/canvas/src/index.js
+++ b/packages/canvas/src/index.js
@ -10,93 +10,7 @@
 *
 */

-import CanvasContainer from './components/container/CanvasContainer.vue'
-import CanvasAction from './components/container/CanvasAction.vue'
-import CanvasDragItem from './components/container/CanvasDragItem.vue'
-import CanvasFooter from './components/container/CanvasFooter.vue'
-import CanvasResize from './components/container/CanvasResize.vue'
-import Builtin from './components/builtin/builtin.json'
-import RenderMain, { api as renderApi } from './components/render/RenderMain'
-import { createRender } from './components/render/runner'
-import {
-  dragStart,
-  updateRect,
-  getContext,
-  getNodePath,
-  dragMove,
-  setLocales,
-  setState,
-  deleteState,
-  getRenderer,
-  clearSelect,
-  selectNode,
-  hoverNode,
-  insertNode,
-  removeNode,
-  addComponent,
-  setPageCss,
-  addScript,
-  addStyle,
-  getNode,
-  getCurrent,
-  setSchema,
-  setUtils,
-  updateUtils,
-  deleteUtils,
-  getSchema,
-  setI18n,
-  getCanvasType,
-  setCanvasType,
-  setProps,
-  setGlobalState,
-  getGlobalState,
-  getDocument,
-  canvasDispatch
-} from './components/container/container'
-
-export {
-  CanvasContainer,
-  CanvasAction,
-  CanvasFooter,
-  CanvasDragItem,
-  CanvasResize,
-  RenderMain,
-  renderApi,
-  Builtin,
-  dragStart,
-  dragMove,
-  updateRect,
-  getContext,
-  getNodePath,
-  getNode,
-  getCurrent,
-  setSchema,
-  setUtils,
-  updateUtils,
-  deleteUtils,
-  getSchema,
-  setLocales,
-  setState,
-  deleteState,
-  setI18n,
-  getRenderer,
-  clearSelect,
-  selectNode,
-  insertNode,
-  removeNode,
-  hoverNode,
-  addComponent,
-  setPageCss,
-  addScript,
-  addStyle,
-  getCanvasType,
-  setCanvasType,
-  setProps,
-  setGlobalState,
-  getGlobalState,
-  getDocument,
-  canvasDispatch,
-  createRender
-}
-
-export default CanvasContainer
+export { default as CanvasContainer } from './components/container/CanvasContainer.vue'
+export { default as CanvasDragItem } from './components/container/CanvasDragItem.vue'
+export { default as CanvasFooter } from './components/container/CanvasFooter.vue'
+export { createRender } from './components/render/runner'
--- a/packages/common/component/BlockDeployDialog.vue
+++ b/packages/common/component/BlockDeployDialog.vue
@ -82,8 +82,7 @@ import {
  FormItem as TinyFormItem
 } from '@opentiny/vue'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
-import { useLayout, useNotify } from '@opentiny/tiny-engine-controller'
-import { getSchema, setSchema } from '@opentiny/tiny-engine-canvas'
+import { useLayout, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
 import { constants } from '@opentiny/tiny-engine-utils'
 import VueMonaco from './VueMonaco.vue'

@ -188,9 +187,10 @@ export default {
        const remote = await api.getBlockById(block?.id)
        const originalObj = remote?.content || {}
        state.originalCode = JSON.stringify(originalObj, null, 2)
+        const getSchema = useCanvas().canvasApi.value.getSchema

        // 转为普通对象，和线上代码顺序保持一致
-        const pageSchema = getSchema() || {}
+        const pageSchema = getSchema?.() || {}
        if (pageSchema.componentName === 'Block') {
          state.code = JSON.stringify(pageSchema, null, 2)
        } else {
@ -220,7 +220,8 @@ export default {
      }
      try {
        const pageSchema = JSON.parse(state.newCode)
-        setSchema({ ...pageSchema, componentName: COMPONENT_NAME.Block })
+        const setSchema = useCanvas().canvasApi.value.setSchema
+        setSchema?.({ ...pageSchema, componentName: COMPONENT_NAME.Block })
        close()
      } catch (err) {
        useNotify({
--- a/packages/common/component/BlockLinkEvent.vue
+++ b/packages/common/component/BlockLinkEvent.vue
@ -21,7 +21,6 @@ import { capitalize } from '@vue/shared'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import { Input as TinyInput, Form as TinyForm, FormItem as TinyFormItem, Popover as TinyPopover } from '@opentiny/vue'
 import { useLayout, useModal, useCanvas, useBlock } from '@opentiny/tiny-engine-controller'
-import { getSchema, getCurrent } from '@opentiny/tiny-engine-canvas'

 export default {
  components: {
@ -38,7 +37,8 @@ export default {
    const { pageState } = useCanvas()
    const { addBlockEvent, removeEventLink, getCurrentBlock, appendEventEmit } = useBlock()
    const { PLUGIN_NAME, activePlugin } = useLayout()
-    const { schema } = getSchema()
+
+    const { schema } = useCanvas().canvasApi.value?.getSchema?.() || {}
    const events = schema?.events || []
    const eventsList = Object.entries(events).map(([key, value]) => {
      return {
@ -88,7 +88,7 @@ export default {

          const {
            schema: { id, componentName }
-          } = getCurrent()
+          } = useCanvas().canvasApi.value?.getCurrent?.() || {}

          const newEvent = extend(true, {}, data.metaEvent, {
            linked: {
@ -117,7 +117,7 @@ export default {
    const editEvent = (item, data) => {
      const {
        schema: { id, componentName }
-      } = getCurrent()
+      } = useCanvas().canvasApi.value?.getCurrent?.() || {}

      const oldEventName = data.linkedEventName

--- a/packages/common/component/BlockLinkField.vue
+++ b/packages/common/component/BlockLinkField.vue
@ -22,7 +22,6 @@ import { reactive, computed } from 'vue'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import { Input as TinyInput, Popover as TinyPopover } from '@opentiny/vue'
 import { useLayout, useModal, useCanvas, useBlock, useHistory } from '@opentiny/tiny-engine-controller'
-import { getSchema, getCurrent } from '@opentiny/tiny-engine-canvas'

 export default {
  components: {
@ -36,10 +35,10 @@ export default {
  },
  setup(props) {
    const { confirm } = useModal()
-    const { pageState } = useCanvas()
+    const { pageState, canvasApi } = useCanvas()
    const { addBlockProperty, removePropertyLink, getCurrentBlock, editBlockProperty } = useBlock()
    const { PLUGIN_NAME, activePlugin } = useLayout()
-    const { schema } = getSchema()
+    const { schema } = canvasApi.value.getSchema?.() || {}

    const state = reactive({
      newPropertyName: ''
@ -68,7 +67,7 @@ export default {
        exec() {
          const {
            schema: { id, componentName }
-          } = getCurrent()
+          } = canvasApi.value?.getCurrent?.() || {}
          const newProperty = extend(true, {}, property, {
            property: state.newPropertyName || `${property.property}${id}`,
            linked: {
@ -87,7 +86,7 @@ export default {
    const editProperty = (property) => {
      const {
        schema: { id, componentName }
-      } = getCurrent()
+      } = canvasApi.value?.getCurrent?.() || {}

      // 如果之前有关联关系，则需要去除关联
      if (props.data?.linked) {
--- a/packages/common/component/LifeCycles.vue
+++ b/packages/common/component/LifeCycles.vue
@ -78,9 +78,8 @@
 <script lang="jsx">
 import { reactive, ref, watchEffect, onBeforeUnmount } from 'vue'
 import { Button, DialogBox, Popover, Search, Alert } from '@opentiny/vue'
-import { getGlobalConfig, useModal, usePage, useNotify } from '@opentiny/tiny-engine-controller'
+import { getGlobalConfig, useModal, usePage, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
-import { getSchema } from '@opentiny/tiny-engine-canvas'
 import MetaListItems from './MetaListItems.vue'
 import { iconYes } from '@opentiny/vue-icon'
 import VueMonaco from './VueMonaco.vue'
@ -130,7 +129,7 @@ export default {
    })

    watchEffect(() => {
-      state.bindLifeCycles = props.bindLifeCycles || getSchema()?.lifeCycles || {}
+      state.bindLifeCycles = props.bindLifeCycles || useCanvas().canvasApi.value?.getSchema()?.lifeCycles || {}
    })

    const searchLifeCyclesList = (value) => {
@ -142,7 +141,7 @@ export default {
    }

    const syncLifeCycle = () => {
-      const currentSchema = getSchema()
+      const currentSchema = useCanvas().canvasApi.value?.getSchema?.()
      const pageContent = getPageContent()
      const { id, fileName } = pageContent
      if (id === currentSchema.id || fileName === currentSchema.fileName) {
@ -165,7 +164,8 @@ export default {

    const openLifeCyclesPanel = (item) => {
      state.title = item
-      const bindLifeCycleSource = props.bindLifeCycles?.[item] || getSchema().lifeCycles?.[item]
+      const bindLifeCycleSource =
+        props.bindLifeCycles?.[item] || useCanvas().canvasApi.value?.getSchema?.()?.lifeCycles?.[item]
      state.editorValue =
        bindLifeCycleSource?.value ||
        `function ${item} (${item === 'setup' ? '{ props, state, watch, onMounted }' : ''}) {} `
--- a/packages/common/component/MetaBindVariable.vue
+++ b/packages/common/component/MetaBindVariable.vue
@ -124,7 +124,6 @@ import { reactive, ref, computed, nextTick, watch } from 'vue'
 import { camelize, capitalize } from '@vue/shared'
 import { Button, DialogBox, Search, Switch, Input, Tooltip, Alert } from '@opentiny/vue'
 import { useHttp } from '@opentiny/tiny-engine-http'
-import { getSchema, getGlobalState, setState, getNode, getCurrent } from '@opentiny/tiny-engine-canvas'
 import { useCanvas, useResource, useLayout, useApp, useProperties, useData } from '@opentiny/tiny-engine-controller'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
 import { constants } from '@opentiny/tiny-engine-utils'
@ -150,6 +149,12 @@ const CONSTANTS = {
 }

 const getJsSlot = () => {
+  const { getNode, getCurrent } = useCanvas().canvasApi.value || {}
+
+  if (!getNode || !getCurrent) {
+    return [false, {}]
+  }
+
  const jsSlot = getNode(getCurrent()?.parent?.id, true)?.parent

  return [jsSlot?.type === 'JSSlot', jsSlot]
@ -398,10 +403,9 @@ export default {
    const confirm = () => {
      let variableContent = state.isEditorEditMode ? editor.value?.getEditor().getValue() : state.variable

+      const { setSaved, canvasApi } = useCanvas()
      // 如果新旧值不一样就显示未保存状态
      if (oldValue !== variableContent) {
-        const { setSaved } = useCanvas()
-
        setSaved(false)
        variableContent = formatString(variableContent, 'javascript')
      }
@ -411,14 +415,14 @@ export default {

      if (variableContent) {
        if (state.bindPrefix === CONSTANTS.DATASOUCEPREFIX) {
-          const pageSchema = getSchema()
+          const pageSchema = canvasApi.value.getSchema()
          const stateName = state.variable.replace(`${CONSTANTS.STATE}`, '')
          const staticData = state.variableContent.map(({ _id, ...other }) => other)

          pageSchema.state[stateName] = staticData

          // 设置画布上下文环境，让画布触发更新渲染
-          setState({ [stateName]: staticData })
+          canvasApi.value.setState({ [stateName]: staticData })

          // 这里在setup生命周期函数内部处理用户真实环境中的数据源请求
          genRemoteMethodToLifeSetup(stateName, state.dataSouce, pageSchema)
@ -453,7 +457,7 @@ export default {
      state.isVisible = true
      state.variableName = bindKey.value
      state.variable = getInitVariable()
-      state.variables = getSchema()?.state || {}
+      state.variables = useCanvas().canvasApi.value.getSchema()?.state || {}
      state.bindPrefix = CONSTANTS.STATE
      state.variableContent = state.variables[bindKey.value]
      nextTick(() => window.dispatchEvent(new Event('resize')))
@ -461,6 +465,8 @@ export default {

    const selectItem = (item) => {
      state.active = item.id
+      const { canvasApi } = useCanvas()
+
      if (item.id === 'function') {
        state.bindPrefix = CONSTANTS.THIS
        const { PLUGIN_NAME, getPluginApi } = useLayout()
@ -476,7 +482,7 @@ export default {
        state.variables = bridge
      } else if (item.id === 'props') {
        state.bindPrefix = CONSTANTS.PROPS
-        const properties = getSchema()?.schema?.properties
+        const properties = canvasApi.value.getSchema()?.schema?.properties
        const bindProperties = {}
        properties?.forEach(({ content }) => {
          content.forEach(({ property }) => {
@ -502,7 +508,7 @@ export default {
        state.bindPrefix = CONSTANTS.STORE
        state.variables = {}

-        const stores = getGlobalState()
+        const stores = canvasApi.value.getGlobalState()
        stores.forEach(({ id, state: storeState = {}, getters = {} }) => {
          const loadProp = (prop) => {
            const propBinding = `${id}.${prop}`
@ -523,7 +529,7 @@ export default {
        state.variables = params.reduce((variables, param) => ({ ...variables, [param]: param }), {})
      } else {
        state.bindPrefix = CONSTANTS.STATE
-        state.variables = getSchema()?.[item.id]
+        state.variables = canvasApi.value.getSchema()?.[item.id]
      }
    }

--- a/packages/common/component/MetaRelatedEditor.vue
+++ b/packages/common/component/MetaRelatedEditor.vue
@ -22,7 +22,6 @@
 <script>
 import { onMounted, ref, watchEffect } from 'vue'
 import { useMessage, useCanvas } from '@opentiny/tiny-engine-controller'
-import { getSchema } from '@opentiny/tiny-engine-canvas'
 import MetaCodeEditor from './MetaCodeEditor.vue'
 import MetaBindVariable from './MetaBindVariable.vue'

@ -91,7 +90,7 @@ export default {
      let newValue = value

      if (value?.type === CONSTANT.JSEXPRESSION) {
-        const pageSchema = getSchema()
+        const pageSchema = useCanvas().canvasApi.value.getSchema()
        const stateName = value?.value?.replace(CONSTANT.STATE, '')
        newValue = pageSchema?.state?.[stateName]
      }
--- a/packages/common/component/MetaSlot.vue
+++ b/packages/common/component/MetaSlot.vue
@ -25,8 +25,7 @@
 <script>
 import { ref, watchEffect, nextTick } from 'vue'
 import { Popover } from '@opentiny/vue'
-import { useProperties, useResource, useModal } from '@opentiny/tiny-engine-controller'
-import { updateRect } from '@opentiny/tiny-engine-canvas'
+import { useProperties, useResource, useModal, useCanvas } from '@opentiny/tiny-engine-controller'
 import { iconHelpCircle } from '@opentiny/vue-icon'

 export default {
@ -121,7 +120,7 @@ export default {
        })
      }

-      updateRect()
+      useCanvas().canvasApi.value.updateRect()
    }

    return {
--- a/packages/common/component/MetaTableColumns.vue
+++ b/packages/common/component/MetaTableColumns.vue
@ -4,8 +4,7 @@

 <script setup>
 import { nextTick } from 'vue'
-import { updateRect } from '@opentiny/tiny-engine-canvas'
-import { useProperties, useResource } from '@opentiny/tiny-engine-controller'
+import { useProperties, useResource, useCanvas } from '@opentiny/tiny-engine-controller'
 import MetaArrayItem from './MetaArrayItem.vue'

 const { children: schemaChildren, componentName, props } = useProperties().getSchema()
@ -26,7 +25,7 @@ const updateColumns = (columns) => {
  })

  useProperties().getSchema().children = children
-  nextTick(updateRect)
+  nextTick(useCanvas().canvasApi.value.updateRect)
 }

 updateColumns(props?.columns)
--- a/packages/controller/src/useBlock.js
+++ b/packages/controller/src/useBlock.js
@ -278,7 +278,7 @@ const initBlock = async (block = {}, _langs = {}, isEdit) => {
  // 把区块的schema传递给画布
  await resetBlockCanvasState({ pageSchema: getBlockPageSchema(block) })
  // 这一步操作很重要，让区块管理面板和画布共同维护同一份区块schema
-  block.content = useCanvas().renderer.value?.getSchema()
+  block.content = useCanvas().canvasApi.value?.getSchema()

  setCurrentBlock(block)
  setBreadcrumbBlock([block[nameCn] || block.label], block.histories)
@ -361,7 +361,7 @@ const createEmptyBlock = ({ name_cn, label, path, categories }) => {
 }

 const setComponentLinkedValue = ({ propertyName, value }) => {
-  const { schema } = useCanvas().renderer.value?.getCurrent() || {}
+  const { schema } = useCanvas().canvasApi.value?.getCurrent() || {}

  if (!propertyName || !schema) {
    return
--- a/packages/controller/src/useCanvas.js
+++ b/packages/controller/src/useCanvas.js
@ -51,14 +51,20 @@ const defaultSchema = {
  outputs: []
 }

-const renderer = ref(null)
+const canvasApi = ref({})
+const isCanvasApiReady = ref(false)
+
+const initCanvasApi = (newCanvasApi) => {
+  canvasApi.value = newCanvasApi
+  isCanvasApiReady.value = true
+}

 const pageState = reactive({ ...defaultPageState, loading: true })
 // 重置画布数据
 const resetCanvasState = async (state = {}) => {
  Object.assign(pageState, defaultPageState, state)

-  await renderer.value?.setSchema(pageState.pageSchema)
+  await canvasApi.value?.setSchema(pageState.pageSchema)
 }

 // 页面重置画布数据
@ -142,7 +148,6 @@ const getCurrentPage = () => pageState.currentPage
 export default function () {
  return {
    pageState,
-    renderer,
    isBlock,
    isSaved,
    isLoading,
@ -153,10 +158,11 @@ export default function () {
    resetPageCanvasState,
    resetBlockCanvasState,
    clearCurrentState,
-    getDataSourceMap: renderer.value?.getDataSourceMap,
-    setDataSourceMap: renderer.value?.setDataSourceMap,
    getCurrentSchema,
    setCurrentSchema,
-    getCurrentPage
+    getCurrentPage,
+    initCanvasApi,
+    canvasApi,
+    isCanvasApiReady
  }
 }
--- a/packages/controller/src/useHistory.js
+++ b/packages/controller/src/useHistory.js
@ -61,7 +61,7 @@ const push = (schema) => {

 const go = (addend, valid) => {
  historyState.index = historyState.index + addend
-  useCanvas().renderer.value?.setSchema(string2Schema(list[historyState.index]))
+  useCanvas().canvasApi.value?.setSchema(string2Schema(list[historyState.index]))

  // 不是锁定状态，撤销操作后，传递第二个标识位，将 list 的长度减一，置灰 undoredo 操作按钮
  if (typeof valid === 'boolean') {
@ -95,7 +95,7 @@ const clear = () => {
 const addHistory = (schema) => {
  if (!schema) {
    useCanvas().setSaved(false)
-    push(useCanvas().renderer.value?.getSchema())
+    push(useCanvas().canvasApi.value?.getSchema())
  } else {
    clear()
    // 初始 schema 需要设置为第一条历史记录
--- a/packages/controller/src/useProperties.js
+++ b/packages/controller/src/useProperties.js
@ -191,7 +191,7 @@ const setProp = (name, value, type) => {
  }

  // 没有父级，或者不在节点上面，要更新内容。就用setState
-  const { getNode, setState, updateRect } = useCanvas().renderer.value || {}
+  const { getNode, setState, updateRect } = useCanvas().canvasApi.value || {}
  getNode(properties.schema.id, true)?.parent || setState(useCanvas().getPageSchema().state)
  propsUpdateKey.value++

--- a/packages/controller/src/useResource.js
+++ b/packages/controller/src/useResource.js
@ -137,7 +137,7 @@ const registerBlock = async (data, notFetchResouce) => {
    return block
  } else {
    if (!blockResource.get(label)) {
-      const { addScript, addStyle } = useCanvas().renderer.value
+      const { addScript, addStyle } = useCanvas().canvasApi.value
      const promises = scripts
        .filter((item) => item.includes('umd.js'))
        .map(addScript)
@ -372,7 +372,7 @@ const fetchResource = async ({ isInit = true } = {}) => {
  const { id, type } = useEditorInfo().useInfo()
  useApp().appInfoState.selectedId = id

-  const Builtin = window.Builtin
+  const { Builtin } = useCanvas().canvasApi.value
  Builtin.data.materials.components[0].children.map(registerComponent)
  BuiltinComponentMaterials.components[0].children.map(registerComponent)

@ -452,7 +452,7 @@ const updateCanvasDependencies = (blocks) => {
    getBlockDeps(block.content.dependencies)
  })

-  useCanvas().renderer.value?.canvasDispatch('updateDependencies', { detail: resState.thirdPartyDeps })
+  useCanvas().canvasApi.value?.canvasDispatch('updateDependencies', { detail: resState.thirdPartyDeps })
 }

 export default function () {
--- a/packages/controller/src/useTranslate.js
+++ b/packages/controller/src/useTranslate.js
@ -101,7 +101,7 @@ const ensureI18n = (obj, send) => {
      }
    })

-    useCanvas().renderer.value?.setLocales(messages, true)
+    useCanvas().canvasApi.value?.setLocales(messages, true)
  } catch (e) {
    // 不需要处理，有报错的词条会在画布初始化的时候统一调setLocales这个方法
  }
@ -171,7 +171,7 @@ const initAppI18n = async (appId) => {
      host: appId,
      hostType: HOST_TYPE.App
    })
-    useCanvas().renderer.value?.setLocales(i18nResource.messages)
+    useCanvas().canvasApi.value?.setLocales(i18nResource.messages)
  }
 }

@ -181,7 +181,7 @@ const initBlockI18n = async (blockId) => {
      host: blockId,
      hostType: HOST_TYPE.Block
    })
-    useCanvas().renderer.value?.setLocales(i18nResource.messages)
+    useCanvas().canvasApi.value?.setLocales(i18nResource.messages)
  }
 }

@ -192,7 +192,7 @@ const initBlockLocalI18n = async (langs = {}) => {
    hostType: HOST_TYPE.Block,
    local: true
  })
-  useCanvas().renderer.value?.setLocales(i18nResource.messages)
+  useCanvas().canvasApi.value?.setLocales(i18nResource.messages)
 }

 const format = (str = '', params = {}) => str.replace(/\$\{(.+?)\}/g, (substr, key) => params[key] || '')
--- a/packages/design-core/src/App.vue
+++ b/packages/design-core/src/App.vue
@ -21,7 +21,15 @@
 import { reactive, ref, watch, onUnmounted } from 'vue'
 import { ConfigProvider as TinyConfigProvider } from '@opentiny/vue'
 import designSmbConfig from '@opentiny/vue-design-smb'
-import { useResource, useLayout, useEditorInfo, useModal, useApp, useNotify } from '@opentiny/tiny-engine-controller'
+import {
+  useResource,
+  useLayout,
+  useEditorInfo,
+  useModal,
+  useApp,
+  useNotify,
+  useCanvas
+} from '@opentiny/tiny-engine-controller'
 import AppManage from '@opentiny/tiny-engine-plugin-page'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
 import DesignToolbars from './DesignToolbars.vue'
@ -90,7 +98,18 @@ export default {
    }

    useEditorInfo().getUserInfo()
-    useResource().fetchResource()
+
+    watch(
+      useCanvas().isCanvasApiReady,
+      (ready) => {
+        if (ready) {
+          useResource().fetchResource()
+        }
+      },
+      {
+        immediate: true
+      }
+    )

    const handlePopStateEvent = () => {
      useResource().handlePopStateEvent()
--- a/packages/design-core/src/DesignCanvas.vue
+++ b/packages/design-core/src/DesignCanvas.vue
@ -14,15 +14,8 @@
 </template>

 <script>
-import { ref, onMounted, watch } from 'vue'
-import {
-  CanvasContainer,
-  CanvasFooter,
-  selectNode,
-  getNodePath,
-  updateRect,
-  getSchema
-} from '@opentiny/tiny-engine-canvas'
+import { ref, watch, onUnmounted } from 'vue'
+import { CanvasContainer, CanvasFooter } from '@opentiny/tiny-engine-canvas'
 import {
  useProperties,
  useCanvas,
@ -62,7 +55,7 @@ export default {

    const removeNode = (node) => {
      const { pageState } = useCanvas()
-      footData.value = getNodePath(node?.id)
+      footData.value = useCanvas().canvasApi.value.getNodePath(node?.id)
      pageState.currentSchema = {}
      pageState.properties = null
    }
@ -133,6 +126,8 @@ export default {
        useLayout().closePlugin()
      }

+      const { getSchema, getNodePath } = useCanvas().canvasApi.value
+
      const schema = getSchema()
      // 如果选中的节点是画布，就设置成默认选中最外层schema
      useProperties().getProps(node || schema, parent)
@ -142,12 +137,31 @@ export default {
    }

    const selectFooterNode = ({ node }) => {
+      const { selectNode } = useCanvas().canvasApi.value
+
      selectNode(node)
    }

-    onMounted(() => {
-      document.addEventListener('canvasResize', updateRect)
-      new ResizeObserver(updateRect).observe(canvasRef.value)
+    let canvasResizeObserver = null
+    watch(
+      () => [useCanvas().isCanvasApiReady.value, canvasRef.value],
+      ([ready]) => {
+        if (!ready || !canvasRef.value) {
+          return
+        }
+
+        // 先取消监听，再增加监听事件，避免重复监听
+        document.removeEventListener('canvasResize', useCanvas().canvasApi.value.updateRect)
+        canvasResizeObserver?.disconnect?.()
+
+        document.addEventListener('canvasResize', useCanvas().canvasApi.value.updateRect)
+        canvasResizeObserver = new ResizeObserver(useCanvas().canvasApi.value.updateRect).observe(canvasRef.value)
+      }
+    )
+
+    onUnmounted(() => {
+      document.removeEventListener('canvasResize', useCanvas().canvasApi.value.updateRect)
+      canvasResizeObserver?.disconnect?.()
    })

    return {
--- a/packages/plugins/bridge/src/js/resource.js
+++ b/packages/plugins/bridge/src/js/resource.js
@ -11,9 +11,8 @@
 */

 import { reactive } from 'vue'
-import { useApp, useResource, useNotify } from '@opentiny/tiny-engine-controller'
+import { useApp, useResource, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
-import { updateUtils, deleteUtils } from '@opentiny/tiny-engine-canvas'
 import {
  fetchResourceList,
  requestDeleteReSource,
@ -175,6 +174,8 @@ const generateBridgeUtil = (...args) => {
 }

 export const saveResource = (data, callback, emit) => {
+  const { updateUtils } = useCanvas().canvasApi.value
+
  if (getActionType() === ACTION_TYPE.Edit) {
    data.id = state.resource.id
    requestUpdateReSource(data).then((result) => {
@ -218,6 +219,8 @@ export const saveResource = (data, callback, emit) => {

 export const deleteData = (name, callback, emit) => {
  const params = `app=${useApp().appInfoState.selectedId}&id=${state.resource?.id}`
+  const { deleteUtils } = useCanvas().canvasApi.value
+
  requestDeleteReSource(params).then((data) => {
    if (data) {
      const index = useResource().resState[state.type].findIndex((item) => item.name === data.name)
--- a/packages/plugins/data/src/Main.vue
+++ b/packages/plugins/data/src/Main.vue
@ -80,7 +80,6 @@ import {
  useLayout,
  useHelp
 } from '@opentiny/tiny-engine-controller'
-import { setState, getSchema, deleteState, setGlobalState, getGlobalState } from '@opentiny/tiny-engine-canvas'
 import { iconSearch } from '@opentiny/vue-icon'
 import { CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
 import DataSourceList from './DataSourceList.vue'
@ -162,6 +161,8 @@ export default {
    }

    const add = (name, variable) => {
+      const { getSchema } = useCanvas().canvasApi.value
+
      if (getSchema()) {
        if (updateKey.value !== name && flag.value === OPTION_TYPE.UPDATE) {
          delete state.dataSource[updateKey.value]
@ -188,6 +189,7 @@ export default {

    const confirm = () => {
      const { name } = state.createData
+      const { setState, setGlobalState } = useCanvas().canvasApi.value

      if (!name || errorMessage.value) {
        notifySaveError('变量名未填写或名称不符合规范，请按照提示修改后重试。')
@ -257,6 +259,8 @@ export default {
    }

    const remove = (key) => {
+      const { deleteState, getSchema } = useCanvas().canvasApi.value
+
      delete state.dataSource[key]
      // 删除变量也需要同步触发画布渲染
      deleteState(key)
@ -285,6 +289,7 @@ export default {
    }

    const setGlobalStateToDataSource = () => {
+      const { getGlobalState } = useCanvas().canvasApi.value
      const globalState = getGlobalState()

      if (!globalState) {
@ -299,6 +304,7 @@ export default {
    const removeStore = (key) => {
      const storeListt = [...useResource().resState.globalState] || []
      const index = storeListt.findIndex((store) => store.id === key)
+      const { setGlobalState } = useCanvas().canvasApi.value

      if (index !== -1) {
        const { id } = useEditorInfo().useInfo()
@ -321,6 +327,8 @@ export default {
    }

    const initDataSource = (tabsName = activeName.value) => {
+      const { getSchema } = useCanvas().canvasApi.value
+
      if (tabsName === STATE.GLOBAL_STATE) {
        setGlobalStateToDataSource()
      } else {
--- a/packages/plugins/datasource/src/DataSourceList.vue
+++ b/packages/plugins/datasource/src/DataSourceList.vue
@ -51,7 +51,7 @@ export const refresh = () => {
  const selectedId = appInfoState.selectedId || url.get('id')
  fetchDataSourceList(selectedId).then((data) => {
    dataSourceList.value = data
-    useCanvas().setDataSourceMap(data)
+    useCanvas().canvasApi.value.setDataSourceMap(data)
  })
 }

--- a/packages/plugins/datasource/src/DataSourceRecordList.vue
+++ b/packages/plugins/datasource/src/DataSourceRecordList.vue
@ -99,8 +99,7 @@ import { Grid, Pager, Input, Numeric, DatePicker, Switch, Slider, Link } from '@
 import { IconPlusCircle, IconImport } from '@opentiny/vue-icon'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
 import { utils } from '@opentiny/tiny-engine-utils'
-import { useModal, useLayout, useNotify } from '@opentiny/tiny-engine-controller'
-import { getSchema } from '@opentiny/tiny-engine-canvas'
+import { useModal, useLayout, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
 import useClipboard from 'vue-clipboard3'
 import { fetchDataSourceDetail, requestUpdateDataSource } from './js/http'
 import { downloadFn, handleImportedData, overrideOrMergeData, getDataAfterPage } from './js/datasource'
@ -437,7 +436,7 @@ export default {
        }

        const key = `datasource${capitalize(camelize(name))}`
-        const pageSchema = getSchema()
+        const pageSchema = useCanvas().canvasApi.value.getSchema()

        if (pageSchema.state[key]) {
          pageSchema.state[key] = data.map(({ _id, ...other }) => other)
--- a/packages/plugins/materials/src/block/BlockList.vue
+++ b/packages/plugins/materials/src/block/BlockList.vue
@ -17,9 +17,8 @@

 <script lang="jsx">
 import { computed, inject, reactive, ref } from 'vue'
-import { useBlock, useResource, useModal, useApp } from '@opentiny/tiny-engine-controller'
+import { useBlock, useResource, useModal, useApp, useCanvas } from '@opentiny/tiny-engine-controller'
 import { PluginBlockList } from '@opentiny/tiny-engine-common'
-import { dragStart, addComponent } from '@opentiny/tiny-engine-canvas'
 import { requestUpdateGroup, fetchGroupBlocksById } from './http'
 import { setBlockPanelVisible, setBlockVersionPanelVisible } from './js/usePanel'

@ -93,6 +92,7 @@ export default {
      registerBlock(block).then(() => {
        const blockName = block.component || block.blockName
        const node = generateNode({ type: 'block', component: blockName })
+        const { addComponent, dragStart } = useCanvas().canvasApi.value
        if (isShortcutPanel) {
          emitEvent('close')
          addComponent(node, isShortcutPanel)
--- a/packages/plugins/materials/src/component/Main.vue
+++ b/packages/plugins/materials/src/component/Main.vue
@ -34,8 +34,8 @@ import { inject, onMounted, reactive, ref } from 'vue'
 import { Collapse, CollapseItem, Search } from '@opentiny/vue'
 import { SearchEmpty } from '@opentiny/tiny-engine-common'
 import { iconSearch } from '@opentiny/vue-icon'
-import { useResource } from '@opentiny/tiny-engine-controller'
-import { CanvasDragItem, addComponent } from '@opentiny/tiny-engine-canvas'
+import { useResource, useCanvas } from '@opentiny/tiny-engine-controller'
+import { CanvasDragItem } from '@opentiny/tiny-engine-canvas'

 export default {
  components: {
@ -94,6 +94,8 @@ export default {

    const componentClick = (data) => {
      const { isShortcutPanel, emitEvent } = panelState
+      const { addComponent } = useCanvas().canvasApi.value
+
      if (isShortcutPanel) {
        addComponent(data, isShortcutPanel)
        emitEvent('close')
--- a/packages/plugins/schema/src/Main.vue
+++ b/packages/plugins/schema/src/Main.vue
@ -44,7 +44,6 @@ import { Popover } from '@opentiny/vue'
 import { VueMonaco, CloseIcon } from '@opentiny/tiny-engine-common'
 import { useCanvas, useModal, useHistory, useNotify } from '@opentiny/tiny-engine-controller'
 import { obj2String, string2Obj, theme } from '@opentiny/tiny-engine-controller/adapter'
-import { getSchema } from '@opentiny/tiny-engine-canvas'
 import { iconSave, iconDownloadLink } from '@opentiny/vue-icon'

 export default {
@ -114,7 +113,7 @@ export default {
    }

    onActivated(() => {
-      pageState.pageSchema = getSchema()
+      pageState.pageSchema = useCanvas().canvasApi.value?.getSchema?.() || {}
      state.pageData = obj2String(pageState.pageSchema)
      nextTick(() => {
        window.dispatchEvent(new Event('resize'))
--- a/packages/plugins/script/src/js/method.js
+++ b/packages/plugins/script/src/js/method.js
@ -14,7 +14,6 @@ import { ref, reactive, watchEffect, onActivated, nextTick } from 'vue'
 import { useCanvas, useModal, useNotify } from '@opentiny/tiny-engine-controller'
 import { string2Ast, ast2String, insertName, formatString } from '@opentiny/tiny-engine-controller/js/ast'
 import { constants } from '@opentiny/tiny-engine-utils'
-import { getSchema } from '@opentiny/tiny-engine-canvas'
 import { lint } from '@opentiny/tiny-engine-controller/js/linter'
 import { isFunction } from '@opentiny/vue-renderless/grid/static'

@ -35,7 +34,7 @@ const monaco = ref(null)
 let scriptAst = null

 export const getMethods = () => {
-  const pageSchema = getSchema?.() || {}
+  const pageSchema = useCanvas().canvasApi.value.getSchema?.() || {}

  pageSchema.methods = pageSchema?.methods || {}
  return pageSchema.methods
@ -97,7 +96,7 @@ const saveMethods = () => {

  const editorContent = monaco.value.getEditor().getValue()
  const ast = string2Ast(editorContent)
-  getSchema().methods = {}
+  useCanvas().canvasApi.value.getSchema().methods = {}

  ast.program.body.forEach((declaration, index) => {
    const name = declaration?.id?.name
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@ -80,8 +80,6 @@ import { IconChevronDown, iconEyeopen, iconEyeclose } from '@opentiny/vue-icon'
 import { useCanvas, useResource, useLayout } from '@opentiny/tiny-engine-controller'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import { typeOf } from '@opentiny/vue-renderless/common/type'
-import { getRenderer, clearSelect, selectNode, hoverNode } from '@opentiny/tiny-engine-canvas'
-import { getSchema } from '@opentiny/tiny-engine-canvas'

 const { PAGE_STATUS } = constants
 export default {
@ -141,12 +139,14 @@ export default {
    })

    onActivated(() => {
+      const { getSchema } = useCanvas().canvasApi.value
      state.pageSchema = filterSchema(getSchema())
    })

    watch(
      () => pageState.currentSchema,
      () => {
+        const { getSchema } = useCanvas().canvasApi.value
        state.pageSchema = filterSchema(getSchema())
      }
    )
@ -158,6 +158,9 @@ export default {
    const showNode = (data) => {
      data.show = !data.show
      pageState.nodesStatus[data.id] = data.show
+
+      const { getRenderer, clearSelect } = useCanvas().canvasApi.value
+
      getRenderer().setCondition(data.id, data.show)
      clearSelect()
    }
@ -173,6 +176,8 @@ export default {
        return
      }

+      const { hoverNode } = useCanvas().canvasApi.value
+
      hoverNode(data.id)
      const handleEl = event.target.querySelector('.tree-handle')
      handleEl && (handleEl.style.display = 'block')
@ -189,6 +194,8 @@ export default {
      if (state.isLock) {
        return
      }
+
+      const { selectNode } = useCanvas().canvasApi.value
      selectNode(row?.id, 'clickTree')
    }

--- a/packages/settings/events/src/components/AdvanceConfig.vue
+++ b/packages/settings/events/src/components/AdvanceConfig.vue
@ -68,7 +68,6 @@ import { MetaSwitch, MetaBindVariable, MetaInput, MetaCodeEditor } from '@openti
 import { useProperties, useCanvas } from '@opentiny/tiny-engine-controller'
 import { PROP_DATA_TYPE } from '@opentiny/tiny-engine-controller/utils'
 import { string2Obj } from '@opentiny/tiny-engine-controller/adapter'
-import { updateRect } from '@opentiny/tiny-engine-canvas'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { Tooltip } from '@opentiny/vue'

@ -167,7 +166,8 @@ export default {
      } else {
        delete useProperties().getSchema().condition
      }
-      updateRect()
+
+      useCanvas().canvasApi.value.updateRect()
      condition.value = value
    }

--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@ -68,7 +68,6 @@
 import { ref, watch } from 'vue'
 import { Collapse, CollapseItem, Input } from '@opentiny/vue'
 import { useHistory, useCanvas, useProperties } from '@opentiny/tiny-engine-controller'
-import { getSchema as getCanvasPageSchema, updateRect } from '@opentiny/tiny-engine-canvas'
 import { MetaCodeEditor, MetaBindVariable } from '@opentiny/tiny-engine-common'
 import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 import {
@ -126,6 +125,7 @@ export default {

    // 保存编辑器内容，并回写到 schema
    const save = ({ content }) => {
+      const { getSchema: getCanvasPageSchema, updateRect } = useCanvas().canvasApi.value
      const pageSchema = getCanvasPageSchema()
      const schema = getSchema() || pageSchema
      const styleString = formatString(styleStrRemoveRoot(content), 'css')
@ -148,9 +148,11 @@ export default {
    }

    const setConfig = (value) => {
+      const { getSchema: getCanvasPageSchema, updateRect } = useCanvas().canvasApi.value
      const pageSchema = getCanvasPageSchema()
      const currentSchema = getCurrentSchema() || pageSchema
      const schema = getSchema() || pageSchema
+
      if (value !== '') {
        schema.props.style = value
        currentSchema.props.style = value
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@ -104,7 +104,6 @@
 <script setup>
 import { computed, reactive, ref, nextTick, watch, watchEffect } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
-import { setPageCss, getSchema as getCanvasPageSchema, updateRect } from '@opentiny/tiny-engine-canvas'
 import { useProperties, useCanvas, useHistory, useHelp } from '@opentiny/tiny-engine-controller'
 import { MetaCodeEditor, LinkButton } from '@opentiny/tiny-engine-common'
 import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
@ -171,6 +170,7 @@ watch(
 )

 const setSelectorProps = (type, value) => {
+  const { getSchema: getCanvasPageSchema } = useCanvas().canvasApi.value
  const schema = getSchema() || getCanvasPageSchema()

  if (!schema.props) {
@ -183,6 +183,7 @@ const setSelectorProps = (type, value) => {

 // 编辑 className 新增、删除、或修改
 const editClassName = (curClassName, optionType = OPTION_TYPE.ADD, oldSelector = '') => {
+  const { getSchema: getCanvasPageSchema } = useCanvas().canvasApi.value
  const schema = getSchema() || getCanvasPageSchema()
  let type = ''

@ -441,6 +442,7 @@ const save = ({ content }) => {
  const cssString = formatString(content.replace(/"/g, "'"), 'css')
  const { getPageSchema } = useCanvas()
  const { addHistory } = useHistory()
+  const { updateRect, setPageCss, getSchema: getCanvasPageSchema } = useCanvas().canvasApi.value
  getPageSchema().css = cssString
  getCanvasPageSchema().css = cssString
  setPageCss(cssString)
--- a/packages/settings/styles/src/js/useEditor.js
+++ b/packages/settings/styles/src/js/useEditor.js
@ -11,8 +11,7 @@
 */

 import { reactive, watch } from 'vue'
-import { useHistory } from '@opentiny/tiny-engine-controller'
-import { setPageCss } from '@opentiny/tiny-engine-canvas'
+import { useHistory, useCanvas } from '@opentiny/tiny-engine-controller'
 import { obj2StyleStr, styleStrRemoveRoot } from './cssConvert'
 import { CSS_TYPE } from './cssType'

@ -57,6 +56,8 @@ export default ({ style, pageState }) => {
      }
    } else if (editor.type === CSS_TYPE.Css) {
      pageState.pageSchema.css = content
+      const { setPageCss } = useCanvas().canvasApi.value
+
      setPageCss(content)
      addHistory()
    }
--- a/packages/settings/styles/src/js/useStyle.js
+++ b/packages/settings/styles/src/js/useStyle.js
@ -12,7 +12,6 @@

 import { computed, reactive, watch } from 'vue'
 import { useBroadcastChannel } from '@vueuse/core'
-import { getSchema as getCanvasPageSchema, updateRect, setPageCss } from '@opentiny/tiny-engine-canvas'
 import { useCanvas, useHistory, useProperties as useProps } from '@opentiny/tiny-engine-controller'
 import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 import { constants, utils } from '@opentiny/tiny-engine-utils'
@ -134,17 +133,17 @@ const getClassNameAndIdList = (schema) => {
  }
 }

-const { getPageSchema, getCurrentSchema } = useCanvas()
+const { getPageSchema, getCurrentSchema, canvasApi } = useCanvas()
 const { getSchema, propsUpdateKey } = useProps()
 const { addHistory } = useHistory()

 watch(
-  () => [getCurrentSchema(), state.schemaUpdateKey, propsUpdateKey.value, getCanvasPageSchema(), schemaLength],
+  () => [getCurrentSchema(), state.schemaUpdateKey, propsUpdateKey.value, canvasApi.value?.getSchema?.(), schemaLength],
  ([curSchema], [oldCurSchema] = []) => {
    let schema = getCurrentSchema()

    if (!schema || Object.keys(schema).length === 0) {
-      schema = getCanvasPageSchema()
+      schema = canvasApi.value?.getSchema?.()
    }

    if (!schema) {
@ -260,9 +259,10 @@ watch(

 export const updateGlobalStyleStr = (styleStr) => {
  const pageSchema = getPageSchema()
+  const { getSchema, setPageCss } = canvasApi.value

  pageSchema.css = styleStr
-  getCanvasPageSchema().css = styleStr
+  getSchema().css = styleStr
  setPageCss(styleStr)
  state.schemaUpdateKey++
 }
@ -296,6 +296,7 @@ const updateGlobalStyle = (newSelector) => {

 // 更新 style 对象到 schema
 const updateStyle = (properties) => {
+  const { getSchema: getCanvasPageSchema, updateRect } = canvasApi.value
  const schema = getSchema() || getCanvasPageSchema()
  schema.props = schema.props || {}

--- a/packages/toolbars/generate-vue/src/Main.vue
+++ b/packages/toolbars/generate-vue/src/Main.vue
@ -25,7 +25,6 @@ import { reactive } from 'vue'
 import { Popover } from '@opentiny/vue'
 import { getGlobalConfig, useBlock, useCanvas, useNotify, useLayout } from '@opentiny/tiny-engine-controller'
 import { fs } from '@opentiny/tiny-engine-utils'
-import { getSchema } from '@opentiny/tiny-engine-canvas'
 import { generateVuePage, generateVueBlock } from './generateCode'
 import { fetchCode, fetchMetaData, fetchPageList } from './http'
 import FileSelector from './FileSelector.vue'
@ -53,6 +52,7 @@ export default {
    })

    const getParams = () => {
+      const { getSchema } = useCanvas().canvasApi.value
      const params = {
        framework: getGlobalConfig()?.dslMode,
        platform: getGlobalConfig()?.platformId,
--- a/packages/toolbars/media/src/Main.vue
+++ b/packages/toolbars/media/src/Main.vue
@ -87,8 +87,7 @@
 import { ref, reactive, computed, toRaw, watchEffect, onMounted, onUnmounted, watch } from 'vue'
 import { Popover, Input, Switch } from '@opentiny/vue'
 import { IconWebPlus } from '@opentiny/vue-icon'
-import { useLayout } from '@opentiny/tiny-engine-controller'
-import { getCanvasType, setCanvasType } from '@opentiny/tiny-engine-canvas'
+import { useLayout, useCanvas } from '@opentiny/tiny-engine-controller'

 export default {
  components: {
@ -114,7 +113,8 @@ export default {
    const visible = ref(false)
    const active = ref(false)
    const flag = ref(false)
-    const isAbsolute = ref(getCanvasType() === 'absolute')
+    const { getCanvasType } = useCanvas().canvasApi.value
+    const isAbsolute = ref(getCanvasType?.() === 'absolute')

    const dimension = computed(() => useLayout().getDimension())
    const scale = computed(() => dimension.value.scale * 100)
@ -350,6 +350,7 @@ export default {
    }

    const changeCanvasType = (value) => {
+      const { setCanvasType } = useCanvas().canvasApi.value
      setCanvasType(value ? 'absolute' : 'normal')
    }

--- a/packages/toolbars/preview/src/Main.vue
+++ b/packages/toolbars/preview/src/Main.vue
@ -18,7 +18,6 @@
 import { Popover } from '@opentiny/vue'
 import { previewPage, previewBlock } from '@opentiny/tiny-engine-controller/js/preview'
 import { getGlobalConfig, useBlock, useCanvas, useLayout, useNotify } from '@opentiny/tiny-engine-controller'
-import { getSchema } from '@opentiny/tiny-engine-canvas'

 export default {
  components: {
@ -31,7 +30,7 @@ export default {
    }
  },
  setup() {
-    const { isBlock, getCurrentPage } = useCanvas()
+    const { isBlock, getCurrentPage, canvasApi } = useCanvas()
    const { getCurrentBlock } = useBlock()

    const preview = () => {
@ -48,7 +47,7 @@ export default {
        framework: getGlobalConfig()?.dslMode,
        platform: getGlobalConfig()?.platformId,
        pageInfo: {
-          schema: getSchema()
+          schema: canvasApi.value?.getSchema?.()
        }
      }

--- a/packages/toolbars/refresh/src/Main.vue
+++ b/packages/toolbars/refresh/src/Main.vue
@ -17,7 +17,6 @@
 <script>
 import { Popover } from '@opentiny/vue'
 import { useResource, useCanvas, useModal, useLayout, useBlock } from '@opentiny/tiny-engine-controller'
-import { getDocument } from '@opentiny/tiny-engine-canvas'

 export default {
  components: {
@ -39,7 +38,7 @@ export default {
      // 清空区块缓存(不能清空组件缓存)，保证画布刷新后可以重新注册最新的区块资源
      useResource().clearBlockResources()
      // 因为webcomponents无法重复注册，所以需要刷新内部iframe
-      getDocument().location.reload()
+      useCanvas().canvasApi.value.getDocument().location.reload()
    }

    const refreshBlock = async () => {
--- a/packages/toolbars/save/src/js/index.js
+++ b/packages/toolbars/save/src/js/index.js
@ -12,11 +12,10 @@

 import { reactive, ref } from 'vue'
 import { useBlock, useCanvas, useLayout, useNotify, usePage } from '@opentiny/tiny-engine-controller'
-import { getSchema, setSchema, selectNode } from '@opentiny/tiny-engine-canvas'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { handlePageUpdate } from '@opentiny/tiny-engine-controller/js/http'

-const { pageState, isSaved, isBlock } = useCanvas()
+const { pageState, isSaved, isBlock, canvasApi } = useCanvas()
 const { PLUGIN_NAME, getPluginApi } = useLayout()
 const { getCurrentBlock } = useBlock()
 const { PAGE_STATUS } = constants
@ -58,6 +57,7 @@ const savePage = async (pageSchema) => {

 export const saveCommon = (value) => {
  const pageSchema = JSON.parse(value)
+  const { setSchema, selectNode } = canvasApi.value

  pageState.pageSchema = pageSchema
  // setSchema 是异步，保存直接传递当前 schema
@ -90,6 +90,7 @@ export const openCommon = async () => {
  const pageStatus = useLayout().layoutState?.pageStatus
  const curPageState = pageStatus?.state
  const pageInfo = pageStatus?.data
+  const { getSchema } = canvasApi.value
  const ERR_MSG = {
    [PAGE_STATUS.Release]: '当前页面未锁定，请先锁定再保存',
    [PAGE_STATUS.Empty]: '当前应用无页面，请先新建页面再保存',