refactor: add canvas renderer state

packages/canvas/src/components/container/CanvasContainer.vue

@@ -119,6 +119,7 @@ export default {
         iframeMonitoring()
 
         initCanvas({ emit, renderer: detail, iframe: iframe.value, controller: props.controller })
+        useCanvas().renderer = detail
 
         const doc = iframe.value.contentDocument
         const win = iframe.value.contentWindow

packages/canvas/src/components/render/RenderMain.js

@@ -18,6 +18,8 @@ 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
 
@@ -422,7 +424,15 @@ export const api = {
   getGlobalState,
   getDataSourceMap,
   setDataSourceMap,
-  setGlobalState
+  setGlobalState,
+  getCurrent, 
+  setLocales,
+  getNodeById: getNode,
+  updateRect,
+  addStyle, 
+  addScript, 
+  canvasDispatch
 }
 
 window.api = api
+window.Builtin = Builtin

packages/controller/package.json

@@ -35,7 +35,6 @@
     "@babel/parser": "7.18.13",
     "@babel/traverse": "7.18.13",
     "@opentiny/tiny-engine-builtin-component": "workspace:*",
-    "@opentiny/tiny-engine-canvas": "workspace:*",
     "@opentiny/tiny-engine-http": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
     "@opentiny/vue": "~3.10.0",

packages/controller/src/useBlock.js

@@ -25,7 +25,6 @@ import useEditorInfo from './useEditorInfo'
 import useBreadcrumb from './useBreadcrumb'
 import useLayout from './useLayout'
 import { getGlobalConfig } from './globalConfig'
-import { getSchema, getCurrent } from '@opentiny/tiny-engine-canvas'
 
 const { SORT_TYPE, SCHEMA_DATA_TYPE, BLOCK_OPENNESS } = constants
 
@@ -279,7 +278,7 @@ const initBlock = async (block = {}, _langs = {}, isEdit) => {
   // 把区块的schema传递给画布
   await resetBlockCanvasState({ pageSchema: getBlockPageSchema(block) })
   // 这一步操作很重要，让区块管理面板和画布共同维护同一份区块schema
-  block.content = getSchema()
+  block.content = useCanvas().renderer.value?.getSchema()
 
   setCurrentBlock(block)
   setBreadcrumbBlock([block[nameCn] || block.label], block.histories)
@@ -362,7 +361,7 @@ const createEmptyBlock = ({ name_cn, label, path, categories }) => {
 }
 
 const setComponentLinkedValue = ({ propertyName, value }) => {
-  const { schema } = getCurrent()
+  const { schema } = useCanvas().renderer.value?.getCurrent()
 
   if (!propertyName || !schema) {
     return

packages/controller/src/useCanvas.js

@@ -11,8 +11,7 @@
  */
 
 /* eslint-disable no-new-func */
-import { reactive } from 'vue'
-import { setSchema, renderApi } from '@opentiny/tiny-engine-canvas'
+import { reactive, ref } from 'vue'
 import { constants } from '@opentiny/tiny-engine-utils'
 import useHistory from './useHistory'
 
@@ -52,12 +51,14 @@ const defaultSchema = {
   outputs: []
 }
 
+const renderer = ref(null)
+
 const pageState = reactive({ ...defaultPageState, loading: true })
 // 重置画布数据
 const resetCanvasState = async (state = {}) => {
   Object.assign(pageState, defaultPageState, state)
 
-  await setSchema(pageState.pageSchema)
+  await renderer.value?.setSchema(pageState.pageSchema)
 }
 
 // 页面重置画布数据
@@ -141,6 +142,7 @@ const getCurrentPage = () => pageState.currentPage
 export default function () {
   return {
     pageState,
+    renderer,
     isBlock,
     isSaved,
     isLoading,
@@ -151,8 +153,8 @@ export default function () {
     resetPageCanvasState,
     resetBlockCanvasState,
     clearCurrentState,
-    getDataSourceMap: renderApi.getDataSourceMap,
-    setDataSourceMap: renderApi.setDataSourceMap,
+    getDataSourceMap: renderer.value?.getDataSourceMap,
+    setDataSourceMap: renderer.value?.setDataSourceMap,
     getCurrentSchema,
     setCurrentSchema,
     getCurrentPage

packages/controller/src/useHistory.js

@@ -12,7 +12,6 @@
 
 import { reactive, isProxy, toRaw, watch } from 'vue'
 import useCanvas from './useCanvas'
-import { setSchema, getSchema } from '@opentiny/tiny-engine-canvas'
 
 const schema2String = (schema) => {
   if (isProxy(schema)) {
@@ -62,7 +61,7 @@ const push = (schema) => {
 
 const go = (addend, valid) => {
   historyState.index = historyState.index + addend
-  setSchema(string2Schema(list[historyState.index]))
+  useCanvas().renderer.value?.setSchema(string2Schema(list[historyState.index]))
 
   // 不是锁定状态，撤销操作后，传递第二个标识位，将 list 的长度减一，置灰 undoredo 操作按钮
   if (typeof valid === 'boolean') {
@@ -87,7 +86,7 @@ const forward = () => {
 const addHistory = (schema) => {
   if (!schema) {
     useCanvas().setSaved(false)
-    push(getSchema())
+    push(useCanvas().renderer.value?.getSchema())
   } else {
     clear()
     // 初始 schema 需要设置为第一条历史记录

packages/controller/src/useProperties.js

@@ -11,7 +11,6 @@
  */
 
 import { toRaw, nextTick, shallowReactive, ref } from 'vue'
-import { getNode, setState, updateRect } from '@opentiny/tiny-engine-canvas'
 import { constants } from '@opentiny/tiny-engine-utils'
 import useCanvas from './useCanvas'
 import useResource from './useResource'
@@ -192,6 +191,7 @@ const setProp = (name, value, type) => {
   }
 
   // 没有父级，或者不在节点上面，要更新内容。就用setState
+  const { getNode, setState, updateRect } = useCanvas().renderer.value || {}
   getNode(properties.schema.id, true)?.parent || setState(useCanvas().getPageSchema().state)
   propsUpdateKey.value++
 

packages/controller/src/useResource.js

@@ -14,7 +14,6 @@ import { reactive } from 'vue'
 import { getGlobalConfig } from './globalConfig'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { utils, constants } from '@opentiny/tiny-engine-utils'
-import { Builtin, addScript, addStyle, canvasDispatch } from '@opentiny/tiny-engine-canvas'
 import { getCanvasStatus } from '@opentiny/tiny-engine-controller/js/index'
 import { meta as BuiltinComponentMaterials } from '@opentiny/tiny-engine-builtin-component'
 import useApp from './useApp'
@@ -138,6 +137,7 @@ const registerBlock = async (data, notFetchResouce) => {
     return block
   } else {
     if (!blockResource.get(label)) {
+      const { addScript, addStyle } = useCanvas().renderer.value
       const promises = scripts
         .filter((item) => item.includes('umd.js'))
         .map(addScript)
@@ -451,7 +451,7 @@ const updateCanvasDependencies = (blocks) => {
     getBlockDeps(block.content.dependencies)
   })
 
-  canvasDispatch('updateDependencies', { detail: resState.thirdPartyDeps })
+  useCanvas().renderer.value?.canvasDispatch('updateDependencies', { detail: resState.thirdPartyDeps })
 }
 
 export default function () {

packages/controller/src/useTranslate.js

@@ -13,7 +13,6 @@
 import { reactive, ref } from 'vue'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { utils } from '@opentiny/tiny-engine-utils'
-import { setLocales } from '@opentiny/tiny-engine-canvas'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { generateI18n } from '@opentiny/tiny-engine-controller/js/vscodeGenerateFile'
@@ -101,7 +100,7 @@ const ensureI18n = (obj, send) => {
       }
     })
 
-    setLocales(messages, true)
+    useCanvas().renderer.value?.setLocales(messages, true)
   } catch (e) {
     // 不需要处理，有报错的词条会在画布初始化的时候统一调setLocales这个方法
   }
@@ -171,7 +170,7 @@ const initAppI18n = async (appId) => {
       host: appId,
       hostType: HOST_TYPE.App
     })
-    setLocales(i18nResource.messages)
+    useCanvas().renderer.value?.setLocales(i18nResource.messages)
   }
 }
 
@@ -181,7 +180,7 @@ const initBlockI18n = async (blockId) => {
       host: blockId,
       hostType: HOST_TYPE.Block
     })
-    setLocales(i18nResource.messages)
+    useCanvas().renderer.value?.setLocales(i18nResource.messages)
   }
 }
 
@@ -192,7 +191,7 @@ const initBlockLocalI18n = async (langs = {}) => {
     hostType: HOST_TYPE.Block,
     local: true
   })
-  setLocales(i18nResource.messages)
+  useCanvas().renderer.value?.setLocales(i18nResource.messages)
 }
 
 const format = (str = '', params = {}) => str.replace(/\$\{(.+?)\}/g, (substr, key) => params[key] || '')

packages/settings/design/package.json

@@ -25,6 +25,7 @@
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
     "@opentiny/tiny-engine-common": "workspace:*",
+    "@opentiny/tiny-engine-controller": "workspace:*",
     "@opentiny/vue": "~3.10.0",
     "sortablejs": "^1.14.0"
   },