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
opentiny · May 11, 2024 · 30cfeb1 · 30cfeb1
1 parent c271054
commit 30cfeb1
Show file tree

Hide file tree

Showing 39 changed files with 227 additions and 217 deletions.
diff --git 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
@@ -20,14 +20,16 @@ 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',
   LEFT: 'left',
   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()
 

diff --git 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
@@ -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
@@ -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({

diff --git 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
@@ -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
@@ -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 }' : ''}) {} `