@tmagic/editor 1.3.0-alpha.2 → 1.3.0-alpha.21

package/src/initService.ts

@@ -7,9 +7,14 @@ import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from
 import { getNodes } from '@tmagic/utils';
 
 import type { Target } from './services/dep';
-import { createCodeBlockTarget, createDataSourceTarget } from './utils/dep';
+import {
+  createCodeBlockTarget,
+  createDataSourceCondTarget,
+  createDataSourceMethodTarget,
+  createDataSourceTarget,
+} from './utils/dep';
 import editorProps from './editorProps';
-import type { Services } from './type';
+import { DepTargetType, Services } from './type';
 
 export declare type LooseRequired<T> = {
   [P in string & keyof T]: T[P];
@@ -25,6 +30,8 @@ export const initServiceState = (
     eventsService,
     uiService,
     codeBlockService,
+    keybindingService,
+    dataSourceService,
   }: Services,
 ) => {
   // 初始值变化，重新设置节点信息
@@ -46,6 +53,14 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.datasourceList,
+    (datasourceList) => dataSourceService.set('datasourceTypeList', datasourceList),
+    {
+      immediate: true,
+    },
+  );
+
   watch(
     () => props.propsConfigs,
     (configs) => propsService.setPropsConfigs(configs),
@@ -81,6 +96,30 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.datasourceConfigs,
+    (configs) => {
+      Object.entries(configs).forEach(([key, value]) => {
+        dataSourceService.setFormConfig(key, value);
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.datasourceValues,
+    (values) => {
+      Object.entries(values).forEach(([key, value]) => {
+        dataSourceService.setFormValue(key, value);
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
   watch(
     () => props.defaultSelected,
     (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
@@ -104,6 +143,7 @@ export const initServiceState = (
     uiService.resetState();
     componentListService.resetState();
     codeBlockService.resetState();
+    keybindingService.reset();
   });
 };
 
@@ -137,6 +177,7 @@ export const initServiceEvents = (
 
     if (app.dsl) {
       app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
       app.dsl.dataSources = root.dataSources;
     }
 
@@ -157,23 +198,34 @@ export const initServiceEvents = (
   };
 
   const targetAddHandler = (target: Target) => {
-    if (target.type !== 'data-source') return;
-
     const root = editorService.get('root');
     if (!root) return;
 
-    if (!root.dataSourceDeps) {
-      root.dataSourceDeps = {};
+    if (target.type === DepTargetType.DATA_SOURCE) {
+      if (!root.dataSourceDeps) {
+        root.dataSourceDeps = {};
+      }
+      root.dataSourceDeps[target.id] = target.deps;
     }
 
-    root.dataSourceDeps[target.id] = target.deps;
+    if (target.type === DepTargetType.DATA_SOURCE_COND) {
+      if (!root.dataSourceCondDeps) {
+        root.dataSourceCondDeps = {};
+      }
+      root.dataSourceCondDeps[target.id] = target.deps;
+    }
   };
 
   const targetRemoveHandler = (id: string | number) => {
     const root = editorService.get('root');
-    if (!root?.dataSourceDeps) return;
 
-    delete root.dataSourceDeps[id];
+    if (root?.dataSourceDeps) {
+      delete root.dataSourceDeps[id];
+    }
+
+    if (root?.dataSourceCondDeps) {
+      delete root.dataSourceCondDeps[id];
+    }
   };
 
   const depUpdateHandler = (node: MNode) => {
@@ -189,6 +241,12 @@ export const initServiceEvents = (
   depService.on('dep-update', depUpdateHandler);
   depService.on('collected', collectedHandler);
 
+  const initDataSourceDepTarget = (ds: DataSourceSchema) => {
+    depService.addTarget(createDataSourceTarget(ds.id));
+    depService.addTarget(createDataSourceMethodTarget(ds.id));
+    depService.addTarget(createDataSourceCondTarget(ds.id));
+  };
+
   const rootChangeHandler = async (value: MApp, preValue?: MApp | null) => {
     const nodeId = editorService.get('node')?.id || props.defaultSelected;
     let node;
@@ -216,14 +274,14 @@ export const initServiceEvents = (
     codeBlockService.setCodeDsl(value.codeBlocks);
     dataSourceService.set('dataSources', value.dataSources);
 
-    depService.removeTargets('code-block');
+    depService.removeTargets(DepTargetType.CODE_BLOCK);
 
     Object.entries(value.codeBlocks).forEach(([id, code]) => {
       depService.addTarget(createCodeBlockTarget(id, code));
     });
 
     value.dataSources.forEach((ds) => {
-      depService.addTarget(createDataSourceTarget(ds.id, ds));
+      initDataSourceDepTarget(ds);
     });
 
     if (value && Array.isArray(value.items)) {
@@ -234,18 +292,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);
   };
@@ -273,17 +335,14 @@ export const initServiceEvents = (
   codeBlockService.on('remove', codeBlockRemoveHandler);
 
   const dataSourceAddHandler = (config: DataSourceSchema) => {
-    depService.addTarget(createDataSourceTarget(config.id, config));
+    initDataSourceDepTarget(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 targets = depService.getTargets(DepTargetType.DATA_SOURCE);
 
     const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
 

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

@@ -1,22 +1,46 @@
 <template>
-  <div ref="codeEditor" class="magic-code-editor"></div>
+  <div :class="`magic-code-editor`">
+    <Teleport to="body" :disabled="!fullScreen">
+      <div
+        :class="`magic-code-editor-wrapper${fullScreen ? ' full-screen' : ''}`"
+        :style="!fullScreen && height ? `height: ${height}` : '100%'"
+      >
+        <TMagicButton
+          class="magic-code-editor-full-screen-icon"
+          circle
+          size="small"
+          :icon="FullScreen"
+          @click="fullScreenHandler"
+        ></TMagicButton>
+        <div ref="codeEditor" class="magic-code-editor-content"></div>
+      </div>
+    </Teleport>
+  </div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeEditor">
+<script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
+import { TMagicButton } from '@tmagic/design';
+
+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?: {
       [key: string]: any;
     };
+    height?: string;
     autoSave?: boolean;
   }>(),
   {
@@ -33,10 +57,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 +105,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 +133,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);
+      }
     });
   }
 
@@ -141,11 +175,32 @@ onUnmounted(() => {
   resizeObserver.disconnect();
 });
 
+const fullScreen = ref(false);
+const fullScreenHandler = () => {
+  fullScreen.value = !fullScreen.value;
+  setTimeout(() => {
+    vsEditor?.focus();
+    vsEditor?.layout();
+    vsDiffEditor?.focus();
+    vsDiffEditor?.layout();
+  });
+};
+
 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>
+  <div class="m-editor" ref="content">
+    <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,43 @@
         </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 content = ref<HTMLDivElement>();
+
 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'));
@@ -91,13 +93,15 @@ watch(
 
     columnWidth.value.left = left;
 
+    const container = content.value || document.body;
+
     if (length <= 0) {
       columnWidth.value.right = undefined;
-      columnWidth.value.center = globalThis.document.body.clientWidth - left;
+      columnWidth.value.center = container.clientWidth - left;
     } else {
       const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
       columnWidth.value.right = right;
-      columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
+      columnWidth.value.center = container.clientWidth - left - right;
     }
 
     uiService?.set('columnWidth', columnWidth.value as GetColumnWidth);
@@ -131,8 +135,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

@@ -18,11 +18,9 @@
             @drag="dragHandler"
           >
             <slot name="component-list-item" :component="item">
-              <MIcon :icon="item.icon"></MIcon>
+              <MIcon :title="item.text" :icon="item.icon"></MIcon>
 
-              <TMagicTooltip effect="dark" placement="bottom" :content="item.text">
-                <span>{{ item.text }}</span>
-              </TMagicTooltip>
+              <span :title="item.text">{{ item.text }}</span>
             </slot>
           </div>
         </TMagicCollapseItem>
@@ -31,18 +29,22 @@
   </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';
 
-import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
+import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar } from '@tmagic/design';
 import { removeClassNameByClassName } from '@tmagic/utils';
 
 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 +81,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/json',
       serialize({
         name: text,
         type,
         ...data,
-      }).replace(/"(\w+)":\s/g, '$1: '),
+      }),
     );
   }
 };
@@ -117,6 +118,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,
 ]);