Merge branch 'refactor/develop' of github.com:opentiny/tiny-engine in…

…to refactor/events-meta-app

packages/canvas/DesignCanvas/index.js

@@ -1,7 +1,12 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
 import DesignCanvas from './src/DesignCanvas.vue'
 import metaData from './meta'
-
+import api from './src/api'
 export default {
   ...metaData,
-  entry: DesignCanvas
+  entry: DesignCanvas,
+  apis: api(),
+  composable: {
+    name: HOOK_NAME.useCanvas
+  }
 }

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="canvas-wrap" ref="canvasRef">
-    <div ref="siteCanvas" class="site-canvas" :style="siteCanvasStyle">
+  <component :is="CanvasLayout">
+    <template #container>
       <component
         :is="CanvasContainer.entry"
         :controller="controller"
@@ -9,13 +9,15 @@
         @remove="removeNode"
         @selected="nodeSelected"
       ></component>
-    </div>
-    <component :is="CanvasBreadcrumb.entry" :data="footData" @click="selectFooterNode"></component>
-  </div>
+    </template>
+    <template #footer>
+      <component :is="CanvasBreadcrumb" :data="footData" @click="selectFooterNode"></component>
+    </template>
+  </component>
 </template>
 
 <script>
-import { ref, watch, computed, onUnmounted } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
 import {
   useProperties,
   useCanvas,
@@ -45,9 +47,10 @@ const componentType = {
 
 export default {
   setup() {
-    // 暂时这么处理
-    const CanvasContainer = getMergeRegistry('canvas').metas[0]
-    const CanvasBreadcrumb = getMergeRegistry('canvas').metas[1]
+    const registry = getMergeRegistry('canvas')
+    const { CanvasBreadcrumb } = registry.components
+    const CanvasLayout = registry.layout.entry
+    const [CanvasContainer] = registry.metas
     const footData = ref([])
     const showMask = ref(true)
     const canvasRef = ref(null)
@@ -60,14 +63,6 @@ export default {
       pageState.properties = null
     }
 
-    const siteCanvasStyle = computed(() => {
-      const { scale } = useLayout().getDimension()
-      return {
-        height: `calc((100% - var(--base-bottom-panel-height, 30px) - 36px) / ${scale})`,
-        transform: `scale(${scale})`
-      }
-    })
-
     watch(
       [() => useCanvas().isSaved(), () => useLayout().layoutState.pageStatus, () => useCanvas().getPageSchema()],
       ([isSaved, pageStatus, pageSchema], [oldIsSaved, _oldPageStatus, oldPageSchema]) => {
@@ -144,12 +139,6 @@ export default {
       toolbars.visiblePopover = false
     }
 
-    const selectFooterNode = ({ node }) => {
-      const { selectNode } = useCanvas().canvasApi.value
-
-      selectNode(node)
-    }
-
     let canvasResizeObserver = null
     watch(
       () => [useCanvas().isCanvasApiReady.value, canvasRef.value],
@@ -176,7 +165,6 @@ export default {
       removeNode,
       canvasUrl,
       nodeSelected,
-      selectFooterNode,
       footData,
       materialsPanel: materials.entry,
       showMask,
@@ -188,7 +176,7 @@ export default {
         request: useHttp(),
         ast
       },
-      siteCanvasStyle,
+      CanvasLayout,
       canvasRef,
       CanvasContainer,
       CanvasBreadcrumb

packages/canvas/breadcrumb/index.js

@@ -1,5 +1,5 @@
 import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
-import CanvasBreadcrumb from './src/CanvasFooter.vue'
+import CanvasBreadcrumb from './src/CanvasBreadcrumb.vue'
 import metaData from './meta'
 import useBreadcrumb from './src/useBreadcrumb'
 

packages/canvas/breadcrumb/src/CanvasFooter.vue → packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue

@@ -1,27 +1,36 @@
 <template>
   <div id="tiny-bottom-panel">
     <div class="content">
-      <tiny-steps v-show="data.length > 0" :data="data" @click="(index, node) => $emit('click', node)"></tiny-steps>
+      <tiny-steps v-show="data.length > 0" :data="data" @click="(_index, node) => selectFooterNode(node)"></tiny-steps>
       <div v-show="data.length <= 0" class="tip">没有选中的节点</div>
     </div>
   </div>
 </template>
 
 <script>
+import { getPluginApi } from '@opentiny/tiny-engine-entry'
 import { Steps } from '@opentiny/vue'
 
 export default {
   components: {
     TinySteps: Steps
   },
   props: {
-    // TODO: 待整改为自己去api获取信息， 元应用只应该支持配置项不应该支持获取动态数据
     data: {
       type: Array,
       default: () => []
     }
   },
-  emits: ['click']
+  emits: ['click'],
+  setup() {
+    const { selectNode } = getPluginApi('engine.canvas').canvasApi.value
+    const selectFooterNode = ({ node }) => {
+      selectNode(node)
+    }
+    return {
+      selectFooterNode
+    }
+  }
 }
 </script>
 

packages/canvas/container/index.js

@@ -1,13 +1,7 @@
-import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
 import CanvasContainer from './src/CanvasContainer.vue'
 import metaData from './meta'
-import api from './src/api'
 
 export default {
   ...metaData,
-  entry: CanvasContainer,
-  apis: api(),
-  composable: {
-    name: HOOK_NAME.useCanvas
-  }
+  entry: CanvasContainer
 }

packages/canvas/drag-drop/src/CanvasDragItem.vue

@@ -16,7 +16,7 @@ export default {
   },
   emits: ['click'],
   setup(props, { emit }) {
-    const canvasApi = getPluginApi('engine.canvas.container').canvasApi
+    const canvasApi = getPluginApi('engine.canvas').canvasApi
     const dragstart = (e) => {
       if (props.data && canvasApi.value?.dragStart) {
         const data = deepClone(props.data)

packages/canvas/index.js

@@ -9,15 +9,22 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
+import CanvasBreadcrumb from './breadcrumb'
 export { createRender } from './render'
 export { CanvasDragItem } from './drag-drop'
 
 // meta app
-import CanvasBreadcrumb from './breadcrumb'
 import CanvasContainer from './container'
+import CanvasLayout from './layout'
 import DesignCanvas from './DesignCanvas'
 
+export { CanvasContainer, CanvasLayout, DesignCanvas }
+
 export default {
   ...DesignCanvas,
+  components: {
+    CanvasBreadcrumb: CanvasBreadcrumb.entry
+  },
+  layout: CanvasLayout,
   metas: [CanvasContainer, CanvasBreadcrumb]
 }

packages/canvas/layout/index.js

@@ -0,0 +1,7 @@
+import CanvasLayout from './src/CanvasLayout.vue'
+import metaData from './meta'
+
+export default {
+  ...metaData,
+  entry: CanvasLayout
+}

packages/canvas/layout/meta.js

@@ -0,0 +1,3 @@
+export default {
+  id: 'engine.canvas.layout'
+}

packages/canvas/layout/src/CanvasLayout.vue

@@ -0,0 +1,20 @@
+<template>
+  <div id="canvas-wrap" ref="canvasRef">
+    <div ref="siteCanvas" class="site-canvas" :style="siteCanvasStyle">
+      <slot name="container"></slot>
+    </div>
+    <slot name="footer"></slot>
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue'
+import { useLayout } from '@opentiny/tiny-engine-controller'
+
+const siteCanvasStyle = computed(() => {
+  const { scale } = useLayout().getDimension()
+  return {
+    height: `calc((100% - var(--base-bottom-panel-height, 30px) - 36px) / ${scale})`,
+    transform: `scale(${scale})`
+  }
+})
+</script>

packages/common/component/BlockDeployDialog.vue

@@ -81,7 +81,6 @@ import {
   Popover as TinyPopover,
   FormItem as TinyFormItem
 } from '@opentiny/vue'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { useLayout, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
 import { constants } from '@opentiny/tiny-engine-utils'
 import VueMonaco from './VueMonaco.vue'
@@ -133,14 +132,8 @@ export default {
 
     const editor = ref(null)
     const editorOptions = {
-      theme: theme(),
-      tabSize: 2,
       language: 'javascript',
-      autoIndent: true,
       lineNumbers: true,
-      formatOnPaste: true,
-      automaticLayout: true,
-      roundedSelection: true,
       minimap: {
         enabled: false
       }

packages/common/component/LifeCycles.vue

@@ -51,13 +51,7 @@
           ref="editorRef"
           class="life-cycle-editor"
           :options="{
-            roundedSelection: true,
-            automaticLayout: true,
-            autoIndent: true,
-            language: 'javascript',
-            formatOnPaste: true,
-            tabSize: 2,
-            theme: theme()
+            language: 'javascript'
           }"
           :value="state.editorValue"
           @change="handleEditorChange"
@@ -80,7 +74,6 @@ import { reactive, ref, watchEffect, onBeforeUnmount } from 'vue'
 import { Button, DialogBox, Popover, Search, Alert } from '@opentiny/vue'
 import { useModal, usePage, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
 import { getMergeMeta } from '@opentiny/tiny-engine-entry'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import MetaListItems from './MetaListItems.vue'
 import { iconYes } from '@opentiny/vue-icon'
 import VueMonaco from './VueMonaco.vue'
@@ -243,7 +236,6 @@ export default {
       openLifeCyclesPanel,
       deleteLifeCycle,
       editorConfirm,
-      theme,
       editorDidMount,
       handleEditorChange
     }

packages/common/component/MonacoEditor.vue

@@ -32,7 +32,6 @@
 
 <script>
 import { computed, ref, onActivated, onDeactivated } from 'vue'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { Tooltip } from '@opentiny/vue'
 import PublicIcon from './PublicIcon.vue'
 import VueMonaco from './VueMonaco.vue'
@@ -63,13 +62,7 @@ export default {
     const fullscreen = ref(false)
     const editorOptions = computed(() => {
       return {
-        theme: theme(),
-        tabSize: 2,
         language: 'javascript',
-        autoIndent: true,
-        formatOnPaste: true,
-        automaticLayout: true,
-        roundedSelection: true,
         lineNumbers: false,
         minimap: {
           enabled: false

packages/common/component/VueMonaco.vue

@@ -6,6 +6,16 @@ import * as monacoEditor from 'monaco-editor'
 import { watch, onMounted, nextTick, onBeforeUnmount, ref } from 'vue'
 import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 
+const defaultMonacoEditorTheme = 'vs'
+const globalMonacoEditorTheme = ref(defaultMonacoEditorTheme)
+
+/**
+ * @param {'vs' | 'vs-dark' | undefined} theme
+ */
+export const setGlobalMonacoEditorTheme = (theme) => {
+  globalMonacoEditorTheme.value = theme || defaultMonacoEditorTheme
+}
+
 export default {
   name: 'MonacoEditor',
   model: {
@@ -19,10 +29,6 @@ export default {
       type: String,
       required: true
     },
-    theme: {
-      type: String,
-      default: 'vs'
-    },
     language: {
       type: String
     },
@@ -45,6 +51,14 @@ export default {
     }
     const monacoRef = ref(null)
 
+    const defaultOptions = {
+      autoIndent: true,
+      automaticLayout: true,
+      formatOnPaste: true,
+      roundedSelection: true,
+      tabSize: 2
+    }
+
     const focus = () => vueMonaco.editor && vueMonaco.editor.focus()
 
     const getMonaco = () => vueMonaco.monaco
@@ -60,7 +74,7 @@ export default {
     const initMonaco = (monaco) => {
       emit('editorWillMount', vueMonaco.monaco)
 
-      const options = { value: props.value, theme: props.theme, language: props.language, ...props.options }
+      const options = { ...defaultOptions, ...props, theme: globalMonacoEditorTheme.value }
 
       if (props.diffEditor) {
         vueMonaco.editor = monaco.editor.createDiffEditor(monacoRef.value, options)
@@ -172,14 +186,11 @@ export default {
       }
     )
 
-    watch(
-      () => props.theme,
-      (newVal) => {
-        if (vueMonaco.editor) {
-          vueMonaco.monaco.editor.setTheme(newVal)
-        }
+    watch(globalMonacoEditorTheme, (newVal) => {
+      if (vueMonaco.editor) {
+        vueMonaco.monaco.editor.setTheme(newVal)
       }
-    )
+    })
 
     return {
       getMonaco,

packages/common/index.js

@@ -71,7 +71,7 @@ import CloseIcon from './component/CloseIcon.vue'
 import LifeCycles from './component/LifeCycles.vue'
 import EmptyTip from './component/EmptyTip.vue'
 import MaskModal from './component/MaskModal.vue'
-import VueMonaco from './component/VueMonaco.vue'
+import VueMonaco, { setGlobalMonacoEditorTheme } from './component/VueMonaco.vue'
 import PublicIcon from './component/PublicIcon.vue'
 import SaveNewBlock from './component/SaveNewBlock.vue'
 import BindI18n from './component/BindI18n.vue'
@@ -205,6 +205,7 @@ export {
   MaskModal,
   HtmlAttributesConfigurator as MetaHtmlAttributes,
   VueMonaco,
+  setGlobalMonacoEditorTheme,
   PublicIcon,
   SaveNewBlock,
   BindI18n,