@tmagic/editor 1.3.0-alpha.1 → 1.3.0-alpha.11

package/src/initService.ts

@@ -1,8 +1,10 @@
 import type { ExtractPropTypes } from 'vue';
 import { onUnmounted, toRaw, watch } from 'vue';
+import { cloneDeep } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
 import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from '@tmagic/schema';
+import { getNodes } from '@tmagic/utils';
 
 import type { Target } from './services/dep';
 import { createCodeBlockTarget, createDataSourceTarget } from './utils/dep';
@@ -23,6 +25,7 @@ export const initServiceState = (
     eventsService,
     uiService,
     codeBlockService,
+    keybindingService,
   }: Services,
 ) => {
   // 初始值变化，重新设置节点信息
@@ -102,6 +105,7 @@ export const initServiceState = (
     uiService.resetState();
     componentListService.resetState();
     codeBlockService.resetState();
+    keybindingService.reset();
   });
 };
 
@@ -110,6 +114,50 @@ export const initServiceEvents = (
   emit: (event: 'props-panel-mounted' | 'update:modelValue', ...args: any[]) => void,
   { editorService, codeBlockService, dataSourceService, depService }: Services,
 ) => {
+  const getApp = () => {
+    const stage = editorService.get('stage');
+    return stage?.renderer.runtime?.getApp?.();
+  };
+
+  const updateDataSoucreSchema = () => {
+    const root = editorService.get('root');
+
+    if (root?.dataSources) {
+      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+    }
+  };
+
+  const upateNodeWhenDataSourceChange = (nodes: MNode[]) => {
+    const root = editorService.get('root');
+    const stage = editorService.get('stage');
+
+    if (!root || !stage) return;
+
+    const app = getApp();
+
+    if (!app) return;
+
+    if (app.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSources = root.dataSources;
+    }
+
+    updateDataSoucreSchema();
+
+    nodes.forEach((node) => {
+      const deps = Object.values(root.dataSourceDeps || {});
+      deps.forEach((dep) => {
+        if (dep[node.id]) {
+          stage.update({
+            config: cloneDeep(node),
+            parentId: editorService.getParentById(node.id)?.id,
+            root: cloneDeep(root),
+          });
+        }
+      });
+    });
+  };
+
   const targetAddHandler = (target: Target) => {
     if (target.type !== 'data-source') return;
 
@@ -130,8 +178,18 @@ export const initServiceEvents = (
     delete root.dataSourceDeps[id];
   };
 
+  const depUpdateHandler = (node: MNode) => {
+    upateNodeWhenDataSourceChange([node]);
+  };
+
+  const collectedHandler = (nodes: MNode[]) => {
+    upateNodeWhenDataSourceChange(nodes);
+  };
+
   depService.on('add-target', targetAddHandler);
   depService.on('remove-target', targetRemoveHandler);
+  depService.on('dep-update', depUpdateHandler);
+  depService.on('collected', collectedHandler);
 
   const rootChangeHandler = async (value: MApp, preValue?: MApp | null) => {
     const nodeId = editorService.get('node')?.id || props.defaultSelected;
@@ -178,18 +236,22 @@ export const initServiceEvents = (
     }
   };
 
+  // 新增节点，收集依赖
   const nodeAddHandler = (nodes: MNode[]) => {
     depService.collect(nodes);
   };
 
+  // 节点更新，收集依赖
   const nodeUpdateHandler = (nodes: MNode[]) => {
     depService.collect(nodes);
   };
 
+  // 节点删除，清除对齐的依赖收集
   const nodeRemoveHandler = (nodes: MNode[]) => {
     depService.clear(nodes);
   };
 
+  // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage) => {
     depService.collect([page], true);
   };
@@ -218,16 +280,25 @@ export const initServiceEvents = (
 
   const dataSourceAddHandler = (config: DataSourceSchema) => {
     depService.addTarget(createDataSourceTarget(config.id, config));
+    getApp()?.dataSourceManager?.addDataSource(config);
   };
 
   const dataSourceUpdateHandler = (config: DataSourceSchema) => {
     if (config.title) {
       depService.getTarget(config.id)!.name = config.title;
     }
+    const root = editorService.get('root');
+
+    const targets = depService.getTargets('data-source');
+
+    const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
+
+    upateNodeWhenDataSourceChange(nodes);
   };
 
   const dataSourceRemoveHandler = (id: string) => {
     depService.removeTarget(id);
+    getApp()?.dataSourceManager?.removeDataSource(id);
   };
 
   dataSourceService.on('add', dataSourceAddHandler);
@@ -237,6 +308,8 @@ export const initServiceEvents = (
   onUnmounted(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);
+    depService.off('dep-update', depUpdateHandler);
+    depService.off('collected', collectedHandler);
 
     editorService.off('history-change', historyChangeHandler);
     editorService.off('root-change', rootChangeHandler);

package/src/layouts/AddPageBox.vue

@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorAddPageBox">
+<script lang="ts" setup>
 import { inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
@@ -21,6 +21,10 @@ import MIcon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils';
 
+defineOptions({
+  name: 'MEditorAddPageBox',
+});
+
 const services = inject<Services>('services');
 
 const clickHandler = () => {

package/src/layouts/CodeEditor.vue

@@ -2,16 +2,20 @@
   <div ref="codeEditor" class="magic-code-editor"></div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeEditor">
+<script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
+defineOptions({
+  name: 'MEditorCodeEditor',
+});
+
 const props = withDefaults(
   defineProps<{
-    initValues?: string | Object;
-    modifiedValues?: string | Object;
+    initValues?: string | Record<string | number, any> | null;
+    modifiedValues?: string | Record<string | number, any> | null;
     type?: 'diff';
     language?: string;
     options?: {
@@ -33,10 +37,14 @@ const emit = defineEmits(['initd', 'save']);
 const toString = (v: string | any, language: string): string => {
   let value = '';
   if (typeof v !== 'string') {
-    value = serialize(v, {
-      space: 2,
-      unsafe: true,
-    }).replace(/"(\w+)":\s/g, '$1: ');
+    if (props.language.toLocaleLowerCase() === 'json') {
+      value = JSON.stringify(v, null, 2);
+    } else {
+      value = serialize(v, {
+        space: 2,
+        unsafe: true,
+      }).replace(/"(\w+)":\s/g, '$1: ');
+    }
   } else {
     value = v;
   }
@@ -77,7 +85,7 @@ const setEditorValue = (v: string | any, m: string | any) => {
 };
 
 const getEditorValue = () =>
-  props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
+  (props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || '';
 
 const init = async () => {
   if (!codeEditor.value) return;
@@ -105,13 +113,19 @@ const init = async () => {
     if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
       e.preventDefault();
       e.stopPropagation();
-      emit('save', getEditorValue());
+      const newValue = getEditorValue();
+      values.value = newValue;
+      emit('save', newValue);
     }
   });
 
   if (props.type !== 'diff' && props.autoSave) {
     vsEditor?.onDidBlurEditorWidget(() => {
-      emit('save', getEditorValue());
+      const newValue = getEditorValue();
+      if (values.value !== newValue) {
+        values.value = newValue;
+        emit('save', newValue);
+      }
     });
   }
 
@@ -142,10 +156,20 @@ onUnmounted(() => {
 });
 
 defineExpose({
+  values,
+
   getEditor() {
     return vsEditor || vsDiffEditor;
   },
 
+  getVsEditor() {
+    return vsEditor;
+  },
+
+  getVsDiffEditor() {
+    return vsDiffEditor;
+  },
+
   setEditorValue,
 
   focus() {

package/src/layouts/Framework.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="m-editor">
-    <slot name="nav" class="m-editor-nav-menu"></slot>
+    <slot name="header"></slot>
 
-    <magic-code-editor
-      v-if="showSrc"
-      class="m-editor-content"
-      :init-values="root"
-      :options="codeOptions"
-      @save="saveCode"
-    ></magic-code-editor>
+    <slot name="nav"></slot>
+
+    <slot name="content-before"></slot>
+
+    <slot name="src-code" v-if="showSrc">
+      <CodeEditor class="m-editor-content" :init-values="root" :options="codeOptions" @save="saveCode"></CodeEditor>
+    </slot>
 
-    <Layout
+    <SplitView
       v-else
       class="m-editor-content"
       left-class="m-editor-framework-left"
@@ -33,41 +33,41 @@
         </slot>
       </template>
 
-      <template v-if="pageLength > 0 && nodes.length === 1" #right>
+      <template v-if="pageLength > 0" #right>
         <TMagicScrollbar>
           <slot name="props-panel"></slot>
         </TMagicScrollbar>
       </template>
-    </Layout>
+    </SplitView>
+
+    <slot name="content-after"></slot>
+    <slot name="footer"></slot>
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorFramework">
+<script lang="ts" setup>
 import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
 
-import Layout from '@editor/components/Layout.vue';
+import SplitView from '@editor/components/SplitView.vue';
 import type { GetColumnWidth, Services } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
 
 import AddPageBox from './AddPageBox.vue';
+import CodeEditor from './CodeEditor.vue';
+
+defineOptions({
+  name: 'MEditorFramework',
+});
 
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 
-withDefaults(
-  defineProps<{
-    codeOptions?: Record<string, any>;
-  }>(),
-  {
-    codeOptions: () => ({}),
-  },
-);
-
+const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
 const root = computed(() => editorService?.get('root'));
-const nodes = computed(() => editorService?.get('nodes') || []);
 
 const pageLength = computed(() => editorService?.get('pageLength') || 0);
 const showSrc = computed(() => uiService?.get('showSrc'));
@@ -131,8 +131,8 @@ const columnWidthChange = (columnW: GetColumnWidth) => {
 
 const saveCode = (value: string) => {
   try {
-    // eslint-disable-next-line no-eval
-    editorService?.set('root', eval(value));
+    const parseDSL = getConfig('parseDSL');
+    editorService?.set('root', parseDSL(value));
   } catch (e: any) {
     console.error(e);
   }

package/src/layouts/NavMenu.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorNavMenu">
+<script lang="ts" setup>
 import { computed, inject, markRaw } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
@@ -15,6 +15,10 @@ import { NodeType } from '@tmagic/schema';
 import ToolButton from '@editor/components/ToolButton.vue';
 import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorNavMenu',
+});
+
 const props = withDefaults(
   defineProps<{
     data?: MenuBarData;

package/src/layouts/PropsPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-props-panel">
+  <div class="m-editor-props-panel" v-show="nodes.length === 1">
     <slot name="props-panel-header"></slot>
     <MForm
       ref="configForm"
@@ -8,20 +8,29 @@
       :size="propsPanelSize"
       :init-values="values"
       :config="curFormConfig"
+      :extend-state="extendState"
       @change="submit"
     ></MForm>
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorPropsPanel">
+<script lang="ts" setup>
 import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
-import type { FormValue } from '@tmagic/form';
+import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorPropsPanel',
+});
+
+defineProps<{
+  extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+}>();
+
 const emit = defineEmits(['mounted']);
 
 const internalInstance = getCurrentInstance();
@@ -31,6 +40,7 @@ const configForm = ref<InstanceType<typeof MForm>>();
 const curFormConfig = ref<any>([]);
 const services = inject<Services>('services');
 const node = computed(() => services?.editorService.get('node'));
+const nodes = computed(() => services?.editorService.get('nodes') || []);
 const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
 const stage = computed(() => services?.editorService.get('stage'));
 
@@ -73,5 +83,5 @@ const submit = async () => {
   }
 };
 
-defineExpose({ submit });
+defineExpose({ configForm, submit });
 </script>

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -31,7 +31,7 @@
   </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup name="MEditorComponentListPanel">
+<script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
@@ -43,6 +43,10 @@ import MIcon from '@editor/components/Icon.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import type { ComponentGroup, ComponentItem, Services, StageOptions } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorComponentListPanel',
+});
+
 const searchText = ref('');
 
 const filterTextChangeHandler = (v: string) => {
@@ -79,14 +83,13 @@ const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
 
 const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {
   if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData(
-      'data',
+      'text/html',
       serialize({
         name: text,
         type,
         ...data,
-      }).replace(/"(\w+)":\s/g, '$1: '),
+      }),
     );
   }
 };
@@ -117,6 +120,6 @@ const dragHandler = (e: DragEvent) => {
 
   if (timeout || !stage.value) return;
 
-  timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+  timeout = stage.value.delayedMarkContainer(e);
 };
 </script>

package/src/layouts/sidebar/LayerMenu.vue

@@ -2,14 +2,17 @@
   <ContentMenu :menu-data="menuData" ref="menu" style="overflow: initial"></ContentMenu>
 </template>
 
-<script lang="ts" setup name="MEditorLayerMenu">
+<script lang="ts" setup>
 import { computed, inject, markRaw, ref } from 'vue';
-import { CopyDocument, Delete, Files, Plus } from '@element-plus/icons-vue';
-
-import { NodeType } from '@tmagic/schema';
+import { Files, Plus } from '@element-plus/icons-vue';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { ComponentGroup, MenuButton, MenuComponent, Services } from '@editor/type';
+import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
+
+defineOptions({
+  name: 'MEditorLayerMenu',
+});
 
 const props = defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
@@ -18,8 +21,7 @@ const props = defineProps<{
 const services = inject<Services>('services');
 const menu = ref<InstanceType<typeof ContentMenu>>();
 const node = computed(() => services?.editorService.get('node'));
-const isRoot = computed(() => node.value?.type === NodeType.ROOT);
-const isPage = computed(() => node.value?.type === NodeType.PAGE);
+const nodes = computed(() => services?.editorService.get('nodes'));
 const componentList = computed(() => services?.componentListService.getList() || []);
 
 const createMenuItems = (group: ComponentGroup): MenuButton[] =>
@@ -78,27 +80,13 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
     type: 'button',
     text: '新增',
     icon: markRaw(Plus),
-    display: () => node.value?.items,
+    display: () => node.value?.items && nodes.value?.length === 1,
     items: getSubMenuData.value,
   },
-  {
-    type: 'button',
-    text: '复制',
-    icon: markRaw(CopyDocument),
-    display: () => !isRoot.value,
-    handler: () => {
-      node.value && services?.editorService.copy(node.value);
-    },
-  },
-  {
-    type: 'button',
-    text: '删除',
-    icon: markRaw(Delete),
-    display: () => !isRoot.value && !isPage.value,
-    handler: () => {
-      node.value && services?.editorService.remove(node.value);
-    },
-  },
+  useCopyMenu(),
+  usePasteMenu(),
+  useDeleteMenu(),
+  useMoveToMenu(services),
   ...props.layerContentMenu,
 ]);
 

package/src/layouts/sidebar/LayerNode.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    {{ `${data.name} (${data.id})` }}
+  </div>
+  <div class="layer-node-tool">
+    <template v-if="data.type !== 'page'">
+      <el-icon v-if="data.visible === false" @click.stop="setNodeVisible(true)" title="点击显示">
+        <Hide />
+      </el-icon>
+      <el-icon v-else @click.stop="setNodeVisible(false)" class="node-lock" title="点击隐藏">
+        <View />
+      </el-icon>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue';
+import { Hide, View } from '@element-plus/icons-vue';
+
+import { MNode } from '@tmagic/schema';
+
+import { Services } from '@editor/type';
+
+const props = defineProps<{
+  data: MNode;
+}>();
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const setNodeVisible = (visible: boolean) => {
+  if (!editorService) return;
+
+  editorService.update({
+    id: props.data.id,
+    visible,
+  });
+};
+</script>