From c220e9eed0c2e59423d394a2151ecf8110e9d4ff Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Mon, 15 Apr 2024 19:43:12 -0700
Subject: [PATCH 1/3] feat(canvasApi): use canvasApi to access canvas methods

---
 .../components/container/CanvasContainer.vue  |  6 +-
 .../src/components/container/container.js     | 44 +++++++++
 .../src/components/render/RenderMain.js       | 16 ----
 packages/canvas/src/index.js                  | 94 +------------------
 .../common/component/BlockDeployDialog.vue    |  9 +-
 packages/common/component/BlockLinkEvent.vue  |  8 +-
 packages/common/component/BlockLinkField.vue  |  9 +-
 packages/common/component/LifeCycles.vue      | 10 +-
 .../common/component/MetaBindVariable.vue     | 24 +++--
 .../common/component/MetaRelatedEditor.vue    |  3 +-
 packages/common/component/MetaSlot.vue        |  5 +-
 .../common/component/MetaTableColumns.vue     |  5 +-
 packages/controller/src/useBlock.js           |  4 +-
 packages/controller/src/useCanvas.js          | 18 ++--
 packages/controller/src/useHistory.js         |  4 +-
 packages/controller/src/useProperties.js      |  2 +-
 packages/controller/src/useResource.js        |  6 +-
 packages/controller/src/useTranslate.js       |  8 +-
 packages/design-core/src/App.vue              | 20 +++-
 packages/design-core/src/DesignCanvas.vue     | 40 +++++---
 packages/plugins/bridge/src/js/resource.js    |  7 +-
 packages/plugins/data/src/Main.vue            | 10 +-
 .../plugins/datasource/src/DataSourceList.vue |  2 +-
 .../datasource/src/DataSourceRecordList.vue   |  5 +-
 .../plugins/materials/src/block/BlockList.vue |  4 +-
 .../plugins/materials/src/component/Main.vue  |  6 +-
 packages/plugins/schema/src/Main.vue          |  3 +-
 packages/plugins/script/src/js/method.js      |  5 +-
 packages/plugins/tree/src/Main.vue            | 11 ++-
 .../events/src/components/AdvanceConfig.vue   |  4 +-
 packages/settings/styles/src/Main.vue         |  4 +-
 .../components/classNamesContainer/index.vue  |  4 +-
 packages/settings/styles/src/js/useEditor.js  |  5 +-
 packages/settings/styles/src/js/useStyle.js   | 11 ++-
 packages/toolbars/generate-vue/src/Main.vue   |  2 +-
 packages/toolbars/media/src/Main.vue          |  7 +-
 packages/toolbars/preview/src/Main.vue        |  5 +-
 packages/toolbars/refresh/src/Main.vue        |  3 +-
 packages/toolbars/save/src/js/index.js        |  5 +-
 39 files changed, 222 insertions(+), 216 deletions(-)

diff --git a/packages/canvas/src/components/container/CanvasContainer.vue b/packages/canvas/src/components/container/CanvasContainer.vue
index 21abc307f9..fc90e172b3 100644
--- 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
diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js
index 0d438fd5d2..4d267744ec 100644
--- a/packages/canvas/src/components/container/container.js
+++ b/packages/canvas/src/components/container/container.js
@@ -28,6 +28,7 @@ export const POSITION = Object.freeze({
   IN: 'in'
 })
 import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
+import Builtin from '../builtin/builtin.json'
 
 const initialDragState = {
   keydown: false,
@@ -853,6 +854,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()
 
diff --git a/packages/canvas/src/components/render/RenderMain.js b/packages/canvas/src/components/render/RenderMain.js
index 97040fc15c..6081d487ed 100644
--- 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
diff --git a/packages/canvas/src/index.js b/packages/canvas/src/index.js
index fcf1d07eeb..b61e634b94 100644
--- 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'
diff --git a/packages/common/component/BlockDeployDialog.vue b/packages/common/component/BlockDeployDialog.vue
index 5a6e194829..5e86bc1884 100644
--- 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.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.setSchema
+        setSchema?.({ ...pageSchema, componentName: COMPONENT_NAME.Block })
         close()
       } catch (err) {
         useNotify({
diff --git a/packages/common/component/BlockLinkEvent.vue b/packages/common/component/BlockLinkEvent.vue
index cfc162415b..5df20af684 100644
--- 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
 
diff --git a/packages/common/component/BlockLinkField.vue b/packages/common/component/BlockLinkField.vue
index 95d2a2bb11..a7a8384304 100644
--- 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) {
diff --git a/packages/common/component/LifeCycles.vue b/packages/common/component/LifeCycles.vue
index a608d0a81d..2bc954f9b6 100644
--- 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?.getSchema?.()?.lifeCycles?.[item]
       state.editorValue =
         bindLifeCycleSource?.value ||
         `function ${item} (${item === 'setup' ? '{ props, state, watch, onMounted }' : ''}) {} `
diff --git a/packages/common/component/MetaBindVariable.vue b/packages/common/component/MetaBindVariable.vue
index 970d4a4568..14e93bba4d 100644
--- 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]
       }
     }
 
diff --git a/packages/common/component/MetaRelatedEditor.vue b/packages/common/component/MetaRelatedEditor.vue
index 81d2941237..c6043c8665 100644
--- 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]
       }
diff --git a/packages/common/component/MetaSlot.vue b/packages/common/component/MetaSlot.vue
index e135796382..9d1301ce53 100644
--- 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 {
diff --git a/packages/common/component/MetaTableColumns.vue b/packages/common/component/MetaTableColumns.vue
index 502335e779..417e141651 100644
--- 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)
diff --git a/packages/controller/src/useBlock.js b/packages/controller/src/useBlock.js
index 0aaaf71bbf..e871b9c1c9 100644
--- 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
diff --git a/packages/controller/src/useCanvas.js b/packages/controller/src/useCanvas.js
index c97b65f29a..d7f424a33b 100644
--- 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
   }
 }
diff --git a/packages/controller/src/useHistory.js b/packages/controller/src/useHistory.js
index 943dd92c27..82f0a6af00 100644
--- 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 需要设置为第一条历史记录
diff --git a/packages/controller/src/useProperties.js b/packages/controller/src/useProperties.js
index 8c0a91caf9..8bc1298f3d 100644
--- 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++
 
diff --git a/packages/controller/src/useResource.js b/packages/controller/src/useResource.js
index e8e462ad9e..5df4dfa8da 100644
--- 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 () {
diff --git a/packages/controller/src/useTranslate.js b/packages/controller/src/useTranslate.js
index 3df0e94426..3de96b0427 100644
--- 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] || '')
diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue
index 79229c77fe..41ab7df657 100644
--- 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,15 @@ export default {
     }
 
     useEditorInfo().getUserInfo()
-    useResource().fetchResource()
+
+    watch(
+      () => useCanvas().isCanvasApiReady.value,
+      (ready) => {
+        if (ready) {
+          useResource().fetchResource()
+        }
+      }
+    )
 
     const handlePopStateEvent = () => {
       useResource().handlePopStateEvent()
diff --git a/packages/design-core/src/DesignCanvas.vue b/packages/design-core/src/DesignCanvas.vue
index dfad7bac2b..a2c81063f9 100644
--- 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 {
diff --git a/packages/plugins/bridge/src/js/resource.js b/packages/plugins/bridge/src/js/resource.js
index be89fd6937..7ef9a63cc2 100644
--- 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)
diff --git a/packages/plugins/data/src/Main.vue b/packages/plugins/data/src/Main.vue
index 0b1e1b7294..a01bbd97e6 100644
--- 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 {
diff --git a/packages/plugins/datasource/src/DataSourceList.vue b/packages/plugins/datasource/src/DataSourceList.vue
index 466d72252b..52f2757e96 100644
--- 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)
   })
 }
 
diff --git a/packages/plugins/datasource/src/DataSourceRecordList.vue b/packages/plugins/datasource/src/DataSourceRecordList.vue
index 55174cd7d8..90685d17d5 100644
--- 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)
diff --git a/packages/plugins/materials/src/block/BlockList.vue b/packages/plugins/materials/src/block/BlockList.vue
index 107ed07212..710f916453 100644
--- 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)
diff --git a/packages/plugins/materials/src/component/Main.vue b/packages/plugins/materials/src/component/Main.vue
index 0fd38da4bb..df2e5e5748 100644
--- 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')
diff --git a/packages/plugins/schema/src/Main.vue b/packages/plugins/schema/src/Main.vue
index 53c3b1a836..170393a709 100644
--- 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'))
diff --git a/packages/plugins/script/src/js/method.js b/packages/plugins/script/src/js/method.js
index 15d2acb26c..16598f0036 100644
--- 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
diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index 4efe994b31..ec3b8291fc 100644
--- 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')
     }
 
diff --git a/packages/settings/events/src/components/AdvanceConfig.vue b/packages/settings/events/src/components/AdvanceConfig.vue
index 91f674ed8f..b9d002ed61 100644
--- 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
     }
 
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 1442057b10..7fa8e8c57f 100644
--- 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
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index 0a3103bb96..7c3972b8f3 100644
--- 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)
diff --git a/packages/settings/styles/src/js/useEditor.js b/packages/settings/styles/src/js/useEditor.js
index 33f97f0e97..c725cb5f09 100644
--- 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()
     }
diff --git a/packages/settings/styles/src/js/useStyle.js b/packages/settings/styles/src/js/useStyle.js
index caaf328df2..be661607cf 100644
--- 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 || {}
 
diff --git a/packages/toolbars/generate-vue/src/Main.vue b/packages/toolbars/generate-vue/src/Main.vue
index 8644d85681..2884e909fd 100644
--- 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,
diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue
index a8480cea04..a1faf31542 100644
--- 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')
     }
 
diff --git a/packages/toolbars/preview/src/Main.vue b/packages/toolbars/preview/src/Main.vue
index 72b8e2db3f..9403f88c1a 100644
--- 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?.()
         }
       }
 
diff --git a/packages/toolbars/refresh/src/Main.vue b/packages/toolbars/refresh/src/Main.vue
index e2269ea098..bf03b73481 100644
--- 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 () => {
diff --git a/packages/toolbars/save/src/js/index.js b/packages/toolbars/save/src/js/index.js
index 4e6cabc37a..7346e0a387 100644
--- 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]: '当前应用无页面，请先新建页面再保存',

From 23fdfa4caec4c6b49007a82c8f51593c7483b49e Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Thu, 18 Apr 2024 00:35:43 -0700
Subject: [PATCH 2/3] fix(canvas): optimize import order

---
 packages/canvas/src/components/container/container.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js
index 4d267744ec..aac3f21e03 100644
--- 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,8 +30,6 @@ export const POSITION = Object.freeze({
   RIGHT: 'right',
   IN: 'in'
 })
-import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
-import Builtin from '../builtin/builtin.json'
 
 const initialDragState = {
   keydown: false,

From cd3df8ea3ed9495cdd5739c9511e9becef5bad3b Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Sun, 21 Apr 2024 19:10:08 -0700
Subject: [PATCH 3/3] fix(canvasApi): change by review comment tips

---
 packages/common/component/BlockDeployDialog.vue | 4 ++--
 packages/common/component/LifeCycles.vue        | 2 +-
 packages/design-core/src/App.vue                | 5 ++++-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/common/component/BlockDeployDialog.vue b/packages/common/component/BlockDeployDialog.vue
index 5e86bc1884..33aaf918e4 100644
--- a/packages/common/component/BlockDeployDialog.vue
+++ b/packages/common/component/BlockDeployDialog.vue
@@ -187,7 +187,7 @@ export default {
         const remote = await api.getBlockById(block?.id)
         const originalObj = remote?.content || {}
         state.originalCode = JSON.stringify(originalObj, null, 2)
-        const getSchema = useCanvas().canvasApi.getSchema
+        const getSchema = useCanvas().canvasApi.value.getSchema
 
         // 转为普通对象，和线上代码顺序保持一致
         const pageSchema = getSchema?.() || {}
@@ -220,7 +220,7 @@ export default {
       }
       try {
         const pageSchema = JSON.parse(state.newCode)
-        const setSchema = useCanvas().canvasApi.setSchema
+        const setSchema = useCanvas().canvasApi.value.setSchema
         setSchema?.({ ...pageSchema, componentName: COMPONENT_NAME.Block })
         close()
       } catch (err) {
diff --git a/packages/common/component/LifeCycles.vue b/packages/common/component/LifeCycles.vue
index 2bc954f9b6..c7abdcd283 100644
--- a/packages/common/component/LifeCycles.vue
+++ b/packages/common/component/LifeCycles.vue
@@ -165,7 +165,7 @@ export default {
     const openLifeCyclesPanel = (item) => {
       state.title = item
       const bindLifeCycleSource =
-        props.bindLifeCycles?.[item] || useCanvas().canvasApi?.getSchema?.()?.lifeCycles?.[item]
+        props.bindLifeCycles?.[item] || useCanvas().canvasApi.value?.getSchema?.()?.lifeCycles?.[item]
       state.editorValue =
         bindLifeCycleSource?.value ||
         `function ${item} (${item === 'setup' ? '{ props, state, watch, onMounted }' : ''}) {} `
diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue
index 41ab7df657..b029b70992 100644
--- a/packages/design-core/src/App.vue
+++ b/packages/design-core/src/App.vue
@@ -100,11 +100,14 @@ export default {
     useEditorInfo().getUserInfo()
 
     watch(
-      () => useCanvas().isCanvasApiReady.value,
+      useCanvas().isCanvasApiReady,
       (ready) => {
         if (ready) {
           useResource().fetchResource()
         }
+      },
+      {
+        immediate: true
       }
     )