refactor: change synchoronized method between canvas and host

packages/canvas/DesignCanvas/src/api/useCanvas.js

@@ -138,8 +138,6 @@ const resetCanvasState = async (state = {}) => {
     generateNodesMap(pageState.pageSchema.children, pageState.pageSchema)
   }
 
-  await canvasApi.value?.setSchema(pageState.pageSchema)
-
   const diffPatch = jsondiffpatchInstance.diff(previousSchema, pageState.pageSchema)
 
   publish({ topic: 'schemaImport', data: { current: pageState.pageSchema, previous: previousSchema, diffPatch } })

packages/canvas/container/src/CanvasContainer.vue

@@ -29,9 +29,9 @@
 </template>
 
 <script>
-import { onMounted, ref, computed, onUnmounted } from 'vue'
+import { onMounted, ref, computed, onUnmounted, watch, watchEffect } from 'vue'
 import { iframeMonitoring } from '@opentiny/tiny-engine-common/js/monitor'
-import { useTranslate, useCanvas, useMaterial, useMessage } from '@opentiny/tiny-engine-meta-register'
+import { useTranslate, useCanvas, useMaterial, useMessage, useResource } from '@opentiny/tiny-engine-meta-register'
 import { NODE_UID, NODE_LOOP } from '../../common'
 import { registerHostkeyEvent, removeHostkeyEvent } from './keyboard'
 import CanvasMenu, { closeMenu, openMenu } from './components/CanvasMenu.vue'
@@ -116,13 +116,18 @@ export default {
         win.thirdPartyDeps = useMaterial().materialState.thirdPartyDeps
 
         const { subscribe, unsubscribe } = useMessage()
-        const { getSchemaDiff, patchLatestSchema } = useCanvas()
+        const { getSchemaDiff, patchLatestSchema, getSchema } = useCanvas()
+        const { appSchemaState } = useResource()
 
         iframe.value.contentWindow.host = {
           unsubscribe,
           subscribe,
           getSchemaDiff,
-          patchLatestSchema
+          patchLatestSchema,
+          watch,
+          watchEffect,
+          getSchema,
+          appSchema: appSchemaState
         }
       }
     }

packages/canvas/container/src/container.js

@@ -19,7 +19,7 @@ import {
   NODE_TAG,
   NODE_LOOP
 } from '../../common'
-import { useCanvas, useLayout, useResource, useTranslate, useMaterial } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, useLayout, useTranslate, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import Builtin from '../../render/src/builtin/builtin.json' //TODO 画布内外应该分开
@@ -69,8 +69,6 @@ export const getCurrent = () => {
   }
 }
 
-export const getGlobalState = () => getRenderer().getGlobalState()
-
 export const getSchema = () => useCanvas().getPageSchema()
 
 // 记录拖拽状态
@@ -766,31 +764,6 @@ export const setLocales = (messages, merge) => {
   })
 }
 
-export const setUtils = (utils, clear, isForceRefresh) => {
-  getRenderer().setUtils(utils, clear, isForceRefresh)
-}
-
-export const updateUtils = (utils) => {
-  getRenderer().updateUtils(utils)
-}
-
-export const deleteUtils = (utils) => {
-  getRenderer().deleteUtils(utils)
-}
-
-export const setGlobalState = (state) => {
-  useResource().resState.globalState = state
-  getRenderer().setGlobalState(state)
-}
-
-export const setSchema = async (schema) => {
-  clearHover()
-  clearSelect()
-  canvasState.schema = await getRenderer()?.setSchema(schema)
-
-  return canvasState.schema
-}
-
 export const setConfigure = (configure) => {
   getRenderer().setConfigure(configure)
 }
@@ -836,33 +809,15 @@ export const canvasApi = {
   addScript,
   addStyle,
   getCurrent,
-  setSchema,
-  setUtils,
-  updateUtils,
-  deleteUtils,
   setI18n,
   getCanvasType,
   setCanvasType,
-  setGlobalState,
-  getGlobalState,
   getDocument,
   canvasDispatch,
-  Builtin,
-  setDataSourceMap: (...args) => {
-    return canvasState.renderer.setDataSourceMap(...args)
-  },
-  getDataSourceMap: (...args) => {
-    return canvasState.renderer.getDataSourceMap(...args)
-  }
+  Builtin
 }
 
 export const initCanvas = ({ renderer, iframe, emit, controller }) => {
-  const { getSchema, getPageSchema } = useCanvas()
-  const currentSchema = getSchema()
-
-  // 在点击刷新按钮的情况下继续保留最新的schema.json
-  const schema = currentSchema ? currentSchema : getPageSchema()
-
   canvasState.iframe = iframe
   canvasState.emit = emit
   // 存放画布外层传进来的插件api
@@ -877,11 +832,6 @@ export const initCanvas = ({ renderer, iframe, emit, controller }) => {
     senterMessage({ type: 'i18nReady', value: true }, '*')
   }
 
-  setGlobalState(useResource().resState.globalState)
-  renderer.setDataSourceMap(useResource().resState.dataSource)
-  // 设置画布全局的utils工具类上下文环境
-  setUtils(useResource().resState.utils)
-  setSchema(schema)
   setConfigure(useMaterial().getConfigureMap())
   canvasDispatch('updateDependencies', { detail: useMaterial().materialState.thirdPartyDeps })
   canvasState.loading = false

packages/canvas/render/src/RenderMain.js

@@ -54,12 +54,25 @@ watchEffect(() => {
   })
 })
 
+const getDeletedKeys = (objA, objB) => {
+  const keyA = Object.keys(objA)
+  const keyB = new Set(Object.keys(objB))
+
+  return keyA.filter((item) => !keyB.has(item))
+}
+
 const getUtils = () => utils
 
-const setUtils = (data, clear, isForceRefresh) => {
-  if (clear) {
-    reset(utils)
+const setUtils = (data) => {
+  // 筛选出来已经被删除的 key
+  const newKeys = new Set(data.map(({ name }) => name))
+  const currentKeys = Object.keys(utils)
+  const deletedUtilsKeys = currentKeys.filter((item) => !newKeys.has(item))
+
+  for (const key of deletedUtilsKeys) {
+    delete utils[key]
   }
+
   const utilsCollection = {}
   // 目前画布还不具备远程加载utils工具类的功能，目前只能加载TinyVue组件库中的组件工具
   data?.forEach((item) => {
@@ -83,33 +96,9 @@ const setUtils = (data, clear, isForceRefresh) => {
   Object.assign(utils, utilsCollection)
 
   // 因为工具类并不具有响应式行为，所以需要通过修改key来强制刷新画布
-  if (isForceRefresh) {
-    refreshKey.value++
-  }
-}
-
-const updateUtils = (data) => {
-  setUtils(data, false, true)
+  refreshKey.value++
 }
 
-const deleteUtils = (data) => {
-  data?.forEach((item) => {
-    if (utils[item.name]) {
-      delete utils[item.name]
-    }
-  })
-  setUtils([], false, true)
-}
-
-const setBridge = (data, clear) => {
-  clear && reset(bridge)
-  Object.assign(bridge, data)
-}
-
-const getBridge = () => bridge
-
-// const getMethods = () => methods
-
 const setMethods = (data = {}, clear) => {
   clear && reset(methods)
   // 这里有些方法在画布还是有执行的必要的，比如说表格的renderer和formatText方法，包括一些自定义渲染函数
@@ -124,10 +113,6 @@ const setMethods = (data = {}, clear) => {
   setContext(methods)
 }
 
-// const deleteState = (variable) => {
-//   delete state[variable]
-// }
-
 const generateAccessor = (type, accessor, property) => {
   const accessorFn = generateFunction(accessor[type].value, context)
 
@@ -164,13 +149,6 @@ const generateStateAccessors = (type, accessor, key) => {
   )
 }
 
-const getDeletedKeys = (objA, objB) => {
-  const keyA = Object.keys(objA)
-  const keyB = new Set(Object.keys(objB))
-
-  return keyA.filter((item) => !keyB.has(item))
-}
-
 const setState = (data) => {
   const deletedKeys = getDeletedKeys(state, data)
 
@@ -221,10 +199,6 @@ const setDataSourceMap = (list) => {
   }, {})
 }
 
-const getGlobalState = () => {
-  return globalState.value
-}
-
 const setGlobalState = (data = []) => {
   globalState.value = data
 }
@@ -390,14 +364,21 @@ export default {
 
     const { locale } = inject(I18nInjectionKey).global
     const { data } = useBroadcastChannel({ name: BROADCAST_CHANNEL.CanvasLang })
-    const { post } = useBroadcastChannel({ name: BROADCAST_CHANNEL.SchemaLength })
 
     window.host.subscribe({
       topic: 'schemaChange',
       subscriber: 'canvasRenderer',
       callback: throttleUpdateSchema
     })
 
+    window.host.subscribe({
+      topic: 'schemaImport',
+      subscriber: 'canvasRenderer',
+      callback: () => {
+        setSchema(window.host.getSchema())
+      }
+    })
+
     onUnmounted(() => {
       window.host.unsubscribe({
         topic: 'schemaChange',
@@ -409,13 +390,6 @@ export default {
       locale.value = data.value
     })
 
-    watch(
-      () => schema?.children?.length,
-      (length) => {
-        post(length)
-      }
-    )
-
     // 这里监听schema.methods，为了保证methods上下文环境始终为最新
     watch(
       () => schema.methods,
@@ -443,7 +417,38 @@ export default {
         deep: true
       }
     )
+
+    window.host.watch(
+      () => window.host.appSchema?.utils,
+      (data) => {
+        setUtils(data)
+      },
+      {
+        immediate: true
+      }
+    )
+
+    window.host.watch(
+      () => window.host.appSchema?.dataSource,
+      (data) => {
+        setDataSourceMap(data)
+      },
+      {
+        immediate: true
+      }
+    )
+
+    window.host.watch(
+      () => window.host.appSchema?.globalState,
+      (data) => {
+        setGlobalState(data)
+      },
+      {
+        immediate: true
+      }
+    )
   },
+
   render() {
     return getRenderer().call(this)
   }
@@ -452,23 +457,16 @@ export default {
 export const api = {
   // 用于 lowcode.js 获取 utils 工具类
   getUtils,
-  setUtils,
-  updateUtils,
-  deleteUtils,
-  getBridge,
-  setBridge,
   getDataSourceMap,
-  setDataSourceMap,
-  getGlobalState,
-  setGlobalState,
 
   // setState 需要把 collection 的引用解开
   setState,
 
+  // 用于调用区块获取、注册、以及 CanvasCollection 的相关逻辑调用
   setController,
   // 设置物料
   setConfigure,
-  setSchema,
+
   // 用于大纲树临时性隐藏
   setCondition,
   getRenderer,

packages/common/component/MetaListItems.vue

@@ -103,7 +103,7 @@ export default {
   },
   setup(props, { emit }) {
     const listItemOption = computed(() => props)
-    const { resState } = useResource()
+    const { appSchemaState } = useResource()
 
     const changeItem = (params) => {
       const optionsList = [...props.optionsList]
@@ -159,7 +159,7 @@ export default {
         if (item[props.textField]) {
           if (item[props.textField].i18nKey) {
             let i18nKey = item[props.textField].i18nKey
-            text = resState.langs[i18nKey][resState.currentLang]
+            text = appSchemaState.langs[i18nKey][appSchemaState.currentLang]
           } else {
             text = item[props.textField]
           }

packages/common/js/canvas.js

@@ -16,7 +16,7 @@ import { useResource, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-met
 export const getCanvasStatus = (data) => {
   const globalState = getMetaApi(META_SERVICE.GlobalService).getState()
   // 写死ID 待删除
-  let isDemo = useResource().resState.isDemo
+  let isDemo = useResource().appSchemaState.isDemo
   const { resetPasswordToken } = globalState.userInfo
 
   if (isDemo && [PAGE_STATUS.Developer, PAGE_STATUS.SuperAdmin].includes(resetPasswordToken)) {

packages/common/js/completion.js

@@ -71,7 +71,7 @@ const getSnippetsSuggestions = (monaco, range, wordContent) =>
     .filter(({ insertText }) => insertText.indexOf(wordContent) === 0)
 
 const getUserWords = () => {
-  const { bridge = [], dataSource = [], utils = [], globalState = [] } = useResource().resState
+  const { bridge = [], dataSource = [], utils = [], globalState = [] } = useResource().appSchemaState
 
   return {
     state: {

packages/configurator/src/variable-configurator/VariableConfigurator.vue

@@ -467,7 +467,7 @@ export default {
       } else if (item.id === 'bridge' || item.id === 'utils') {
         state.bindPrefix = `${CONSTANTS.THIS}${item.id}.`
         const bridge = {}
-        useResource().resState[item.id]?.forEach((res) => {
+        useResource().appSchemaState[item.id]?.forEach((res) => {
           bridge[res.name] = `${item.id}.${res.content.exportName}`
         })
 
@@ -502,7 +502,7 @@ export default {
         state.bindPrefix = CONSTANTS.STORE
         state.variables = {}
 
-        const stores = canvasApi.value.getGlobalState()
+        const stores = useResource().appSchemaState.globalState
         stores.forEach(({ id, state: storeState = {}, getters = {} }) => {
           const loadProp = (prop) => {
             const propBinding = `${id}.${prop}`