@tmagic/editor 1.3.0-beta.2 → 1.3.0-beta.4

package/src/initService.ts

@@ -1,4 +1,3 @@
-import type { ExtractPropTypes } from 'vue';
 import { onUnmounted, toRaw, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
@@ -6,6 +5,7 @@ import type { EventOption } from '@tmagic/core';
 import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from '@tmagic/schema';
 import { getNodes } from '@tmagic/utils';
 
+import PropsPanel from './layouts/PropsPanel.vue';
 import type { Target } from './services/dep';
 import {
   createCodeBlockTarget,
@@ -13,7 +13,7 @@ import {
   createDataSourceMethodTarget,
   createDataSourceTarget,
 } from './utils/dep';
-import editorProps from './editorProps';
+import { EditorProps } from './editorProps';
 import { DepTargetType, Services } from './type';
 
 export declare type LooseRequired<T> = {
@@ -21,7 +21,7 @@ export declare type LooseRequired<T> = {
 };
 
 export const initServiceState = (
-  props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>,
+  props: EditorProps,
   {
     editorService,
     historyService,
@@ -38,7 +38,7 @@ export const initServiceState = (
   watch(
     () => props.modelValue,
     (modelValue) => {
-      editorService.set('root', modelValue);
+      editorService.set('root', modelValue || null);
     },
     {
       immediate: true,
@@ -47,7 +47,7 @@ export const initServiceState = (
 
   watch(
     () => props.componentGroupList,
-    (componentGroupList) => componentListService.setList(componentGroupList),
+    (componentGroupList) => componentGroupList && componentListService.setList(componentGroupList),
     {
       immediate: true,
     },
@@ -55,7 +55,7 @@ export const initServiceState = (
 
   watch(
     () => props.datasourceList,
-    (datasourceList) => dataSourceService.set('datasourceTypeList', datasourceList),
+    (datasourceList) => datasourceList && dataSourceService.set('datasourceTypeList', datasourceList),
     {
       immediate: true,
     },
@@ -63,7 +63,7 @@ export const initServiceState = (
 
   watch(
     () => props.propsConfigs,
-    (configs) => propsService.setPropsConfigs(configs),
+    (configs) => configs && propsService.setPropsConfigs(configs),
     {
       immediate: true,
     },
@@ -71,7 +71,7 @@ export const initServiceState = (
 
   watch(
     () => props.propsValues,
-    (values) => propsService.setPropsValues(values),
+    (values) => values && propsService.setPropsValues(values),
     {
       immediate: true,
     },
@@ -83,10 +83,11 @@ export const initServiceState = (
       const eventsList: Record<string, EventOption[]> = {};
       const methodsList: Record<string, EventOption[]> = {};
 
-      Object.keys(eventMethodList).forEach((type: string) => {
-        eventsList[type] = eventMethodList[type].events;
-        methodsList[type] = eventMethodList[type].methods;
-      });
+      eventMethodList &&
+        Object.keys(eventMethodList).forEach((type: string) => {
+          eventsList[type] = eventMethodList[type].events;
+          methodsList[type] = eventMethodList[type].methods;
+        });
 
       eventsService.setEvents(eventsList);
       eventsService.setMethods(methodsList);
@@ -99,9 +100,10 @@ export const initServiceState = (
   watch(
     () => props.datasourceConfigs,
     (configs) => {
-      Object.entries(configs).forEach(([key, value]) => {
-        dataSourceService.setFormConfig(key, value);
-      });
+      configs &&
+        Object.entries(configs).forEach(([key, value]) => {
+          dataSourceService.setFormConfig(key, value);
+        });
     },
     {
       immediate: true,
@@ -111,8 +113,33 @@ export const initServiceState = (
   watch(
     () => props.datasourceValues,
     (values) => {
-      Object.entries(values).forEach(([key, value]) => {
-        dataSourceService.setFormValue(key, value);
+      values &&
+        Object.entries(values).forEach(([key, value]) => {
+          dataSourceService.setFormValue(key, value);
+        });
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.datasourceEventMethodList,
+    (eventMethodList) => {
+      const eventsList: Record<string, EventOption[]> = {};
+      const methodsList: Record<string, EventOption[]> = {};
+
+      eventMethodList &&
+        Object.keys(eventMethodList).forEach((type: string) => {
+          eventsList[type] = eventMethodList[type].events;
+          methodsList[type] = eventMethodList[type].methods;
+        });
+
+      Object.entries(eventsList).forEach(([key, value]) => {
+        dataSourceService.setFormEvent(key, value);
+      });
+      Object.entries(methodsList).forEach(([key, value]) => {
+        dataSourceService.setFormMethod(key, value);
       });
     },
     {
@@ -148,8 +175,9 @@ export const initServiceState = (
 };
 
 export const initServiceEvents = (
-  props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>,
-  emit: (event: 'props-panel-mounted' | 'update:modelValue', ...args: any[]) => void,
+  props: EditorProps,
+  emit: ((event: 'props-panel-mounted', instance: InstanceType<typeof PropsPanel>) => void) &
+    ((event: 'update:modelValue', value: MApp | null) => void),
   { editorService, codeBlockService, dataSourceService, depService }: Services,
 ) => {
   const getApp = () => {
@@ -247,7 +275,7 @@ export const initServiceEvents = (
     depService.addTarget(createDataSourceCondTarget(ds.id));
   };
 
-  const rootChangeHandler = async (value: MApp, preValue?: MApp | null) => {
+  const rootChangeHandler = async (value: MApp | null, preValue?: MApp | null) => {
     const nodeId = editorService.get('node')?.id || props.defaultSelected;
     let node;
     if (nodeId) {
@@ -268,6 +296,8 @@ export const initServiceEvents = (
       emit('update:modelValue', value);
     }
 
+    if (!value) return;
+
     value.codeBlocks = value.codeBlocks || {};
     value.dataSources = value.dataSources || [];
 

package/src/layouts/CodeEditor.vue

@@ -27,6 +27,8 @@ import serialize from 'serialize-javascript';
 
 import { TMagicButton } from '@tmagic/design';
 
+import { getConfig } from '@editor/utils/config';
+
 defineOptions({
   name: 'MEditorCodeEditor',
 });
@@ -42,6 +44,7 @@ const props = withDefaults(
     };
     height?: string;
     autoSave?: boolean;
+    parse?: boolean;
   }>(),
   {
     autoSave: true,
@@ -49,6 +52,7 @@ const props = withDefaults(
     options: () => ({
       tabSize: 2,
     }),
+    parse: false,
   },
 );
 
@@ -57,7 +61,7 @@ const emit = defineEmits(['initd', 'save']);
 const toString = (v: string | any, language: string): string => {
   let value = '';
   if (typeof v !== 'string') {
-    if (props.language.toLocaleLowerCase() === 'json') {
+    if (language === 'json') {
       value = JSON.stringify(v, null, 2);
     } else {
       value = serialize(v, {
@@ -74,6 +78,18 @@ const toString = (v: string | any, language: string): string => {
   return value;
 };
 
+const parse = (v: string | any, language: string): any => {
+  if (typeof v !== 'string') {
+    return v;
+  }
+
+  if (language === 'json') {
+    return JSON.parse(v);
+  }
+
+  return getConfig('parseDSL')(v);
+};
+
 let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
 let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
 
@@ -89,7 +105,7 @@ const resizeObserver = new globalThis.ResizeObserver(
 );
 
 const setEditorValue = (v: string | any, m: string | any) => {
-  values.value = toString(v, props.language);
+  values.value = toString(v, props.language.toLocaleLowerCase());
 
   if (props.type === 'diff') {
     const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
@@ -135,7 +151,7 @@ const init = async () => {
       e.stopPropagation();
       const newValue = getEditorValue();
       values.value = newValue;
-      emit('save', newValue);
+      emit('save', props.parse ? parse(newValue, props.language) : newValue);
     }
   });
 
@@ -144,7 +160,7 @@ const init = async () => {
       const newValue = getEditorValue();
       if (values.value !== newValue) {
         values.value = newValue;
-        emit('save', newValue);
+        emit('save', props.parse ? parse(newValue, props.language) : newValue);
       }
     });
   }

package/src/layouts/Framework.vue

@@ -51,12 +51,14 @@ import { computed, inject, ref, watch } from 'vue';
 import { TMagicScrollbar } from '@tmagic/design';
 
 import SplitView from '@editor/components/SplitView.vue';
-import type { GetColumnWidth, Services } from '@editor/type';
+import type { FrameworkSlots, GetColumnWidth, Services } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
 
 import AddPageBox from './AddPageBox.vue';
 import CodeEditor from './CodeEditor.vue';
 
+defineSlots<FrameworkSlots>();
+
 defineOptions({
   name: 'MEditorFramework',
 });

package/src/layouts/PropsPanel.vue

@@ -21,7 +21,9 @@ import { tMagicMessage } from '@tmagic/design';
 import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
 
-import type { Services } from '@editor/type';
+import type { PropsPanelSlots, Services } from '@editor/type';
+
+defineSlots<PropsPanelSlots>();
 
 defineOptions({
   name: 'MEditorPropsPanel',

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -39,7 +39,16 @@ 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';
+import {
+  type ComponentGroup,
+  type ComponentItem,
+  ComponentListPanelSlots,
+  DragType,
+  type Services,
+  type StageOptions,
+} from '@editor/type';
+
+defineSlots<ComponentListPanelSlots>();
 
 defineOptions({
   name: 'MEditorComponentListPanel',
@@ -80,16 +89,17 @@ const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
 };
 
 const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {
-  if (e.dataTransfer) {
-    e.dataTransfer.setData(
-      'text/json',
-      serialize({
+  e.dataTransfer?.setData(
+    'text/json',
+    serialize({
+      dragType: DragType.COMPONENT_LIST,
+      data: {
         name: text,
         type,
         ...data,
-      }),
-    );
-  }
+      },
+    }),
+  );
 };
 
 const dragendHandler = () => {

package/src/layouts/sidebar/Sidebar.vue

@@ -58,16 +58,11 @@
         </template>
 
         <template
-          #layer-node-content="{ data: nodeData, node }"
+          #layer-node-content="{ data: nodeData }"
           v-if="config.$key === 'layer' || config.slots?.layerNodeContent"
         >
-          <slot v-if="config.$key === 'layer'" name="layer-node-content" :data="nodeData" :node="node"></slot>
-          <component
-            v-else-if="config.slots?.layerNodeContent"
-            :is="config.slots.layerNodeContent"
-            :data="nodeData"
-            :node="node"
-          />
+          <slot v-if="config.$key === 'layer'" name="layer-node-content" :data="nodeData"></slot>
+          <component v-else-if="config.slots?.layerNodeContent" :is="config.slots.layerNodeContent" :data="nodeData" />
         </template>
       </component>
     </div>
@@ -79,13 +74,15 @@ import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
 import MIcon from '@editor/components/Icon.vue';
-import type { MenuButton, MenuComponent, SideComponent, SideItem } from '@editor/type';
+import type { MenuButton, MenuComponent, SidebarSlots, SideComponent, SideItem } from '@editor/type';
 import { SideBarData } from '@editor/type';
 
 import CodeBlockListPanel from './code-block/CodeBlockListPanel.vue';
 import DataSourceListPanel from './data-source/DataSourceListPanel.vue';
+import LayerPanel from './layer/LayerPanel.vue';
 import ComponentListPanel from './ComponentListPanel.vue';
-import LayerPanel from './LayerPanel.vue';
+
+defineSlots<SidebarSlots>();
 
 defineOptions({
   name: 'MEditorSidebar',

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -50,7 +50,9 @@ import type { Id } from '@tmagic/schema';
 import Icon from '@editor/components/Icon.vue';
 import AppManageIcon from '@editor/icons/AppManageIcon.vue';
 import CodeIcon from '@editor/icons/CodeIcon.vue';
-import { CodeDeleteErrorType, CodeDslItem, DepTargetType, Services } from '@editor/type';
+import { CodeBlockListSlots, CodeDeleteErrorType, CodeDslItem, DepTargetType, Services } from '@editor/type';
+
+defineSlots<CodeBlockListSlots>();
 
 defineOptions({
   name: 'MEditorCodeBlockList',

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -37,10 +37,12 @@ import type { Id } from '@tmagic/schema';
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
-import type { CodeDeleteErrorType, Services } from '@editor/type';
+import type { CodeBlockListPanelSlots, CodeDeleteErrorType, Services } from '@editor/type';
 
 import CodeBlockList from './CodeBlockList.vue';
 
+defineSlots<CodeBlockListPanelSlots>();
+
 defineOptions({
   name: 'MEditorCodeBlockListPanel',
 });

package/src/layouts/sidebar/layer/LayerNode.vue

@@ -0,0 +1,206 @@
+<template>
+  <div
+    v-show="visible"
+    class="magic-editor-layer-node"
+    ref="nodeEl"
+    :draggable="!isPage(data)"
+    :data-node-id="data.id"
+    :data-is-container="Array.isArray(data.items)"
+    @dragstart="handleDragStart"
+    @dragleave="handleDragLeave"
+    @dragend="handleDragEnd($event, data)"
+  >
+    <div
+      class="layer-node"
+      :class="{ selected, expanded }"
+      :style="`padding-left: ${indent}px`"
+      @contextmenu="contextmenuHandler"
+      @mouseenter="highlightHandler()"
+    >
+      <MIcon
+        class="expand-icon"
+        :style="hasChilren ? '' : 'color: transparent; cursor: default'"
+        :icon="expanded ? ArrowDown : ArrowRight"
+        @click="expandHandler"
+      ></MIcon>
+
+      <div class="layer-node-content" @click="nodeClickHandler">
+        <slot name="layer-node-content" :data="data">
+          <div class="layer-node-label">{{ `${data.name} (${data.id})` }}</div>
+          <div class="layer-node-tool">
+            <LayerNodeTool :data="data"></LayerNodeTool>
+          </div>
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="hasChilren && expanded" class="magic-editor-layer-node-children">
+      <LayerNode
+        v-for="item in data.items"
+        :data="item"
+        :parent="(data as MContainer)"
+        :key="item.id"
+        :indent="indent + 11"
+        :filter-text="filterText"
+        :is-ctrl-key-down="isCtrlKeyDown"
+        @node-contextmenu="nodeContentmenuHandler"
+      >
+        <template #layer-node-content="{ data: nodeData }">
+          <slot name="layer-node-content" :data="nodeData"> </slot>
+        </template>
+      </LayerNode>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, type ComputedRef, inject, nextTick, ref } from 'vue';
+import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
+import { throttle } from 'lodash-es';
+
+import type { Id, MContainer, MNode } from '@tmagic/schema';
+import { isPage } from '@tmagic/utils';
+
+import MIcon from '@editor/components/Icon.vue';
+import type { LayerNodeSlots, LayerNodeStatus, Services } from '@editor/type';
+
+import LayerNodeTool from './LayerNodeTool.vue';
+import { useDrag } from './use-drag';
+import { updateStatus } from './use-filter';
+
+defineSlots<LayerNodeSlots>();
+
+defineOptions({
+  name: 'MEditorLayerNode',
+});
+
+const props = withDefaults(
+  defineProps<{
+    data: MNode;
+    parent?: MContainer;
+    indent?: number;
+    filterText?: string;
+    isCtrlKeyDown?: boolean;
+  }>(),
+  {
+    indent: 0,
+    filterText: '',
+    isCtrlKeyDown: false,
+  },
+);
+
+const emit = defineEmits<{
+  'node-contextmenu': [event: MouseEvent, node: MNode];
+}>();
+
+const services = inject<Services>('services');
+const nodeStatusMap = inject<ComputedRef<Map<Id, LayerNodeStatus>>>('nodeStatusMap');
+const editorService = services?.editorService;
+const uiService = services?.uiService;
+
+const nodeStatus = computed(
+  () =>
+    nodeStatusMap?.value?.get(props.data.id) || {
+      selected: false,
+      expand: false,
+      visible: false,
+    },
+);
+
+const expanded = computed(() => nodeStatus.value.expand);
+const selected = computed(() => nodeStatus.value.selected);
+const visible = computed(() => nodeStatus.value.visible);
+
+const hasChilren = computed(() => props.data.items?.length > 0);
+
+const nodeEl = ref<HTMLDivElement>();
+const { handleDragStart, handleDragEnd, handleDragLeave } = useDrag(services);
+
+const expandHandler = () => {
+  if (!nodeStatusMap?.value) return;
+
+  updateStatus(nodeStatusMap.value, props.data.id, {
+    expand: !expanded.value,
+  });
+};
+
+const nodeClickHandler = () => {
+  if (!nodeStatusMap?.value) return;
+
+  if (uiService?.get('uiSelectMode')) {
+    document.dispatchEvent(new CustomEvent('ui-select', { detail: props.data }));
+    return;
+  }
+
+  if (hasChilren.value && !props.isCtrlKeyDown) {
+    updateStatus(nodeStatusMap.value, props.data.id, {
+      expand: true,
+    });
+  }
+
+  nextTick(() => {
+    select(props.data);
+  });
+};
+
+const contextmenuHandler = (event: MouseEvent) => {
+  event.preventDefault();
+
+  nodeClickHandler();
+
+  emit('node-contextmenu', event, props.data);
+};
+
+const nodeContentmenuHandler = (event: MouseEvent, node: MNode) => {
+  emit('node-contextmenu', event, node);
+};
+
+// 触发画布单选
+const select = async (data: MNode) => {
+  if (!data.id) {
+    throw new Error('没有id');
+  }
+
+  if (props.isCtrlKeyDown) {
+    multiSelect(data);
+  } else {
+    await editorService?.select(data);
+    editorService?.get('stage')?.select(data.id);
+  }
+};
+
+const multiSelect = async (data: MNode) => {
+  const nodes = editorService?.get('nodes') || [];
+
+  const newNodes: Id[] = [];
+  let isCancel = false;
+  nodes.forEach((node) => {
+    if (node.id === data.id) {
+      isCancel = true;
+      return;
+    }
+
+    newNodes.push(node.id);
+  });
+
+  // 只剩一个不能取消选中
+  if (!isCancel || newNodes.length === 0) {
+    newNodes.push(data.id);
+  }
+
+  await editorService?.multiSelect(newNodes);
+  editorService?.get('stage')?.multiSelect(newNodes);
+};
+
+const throttleTime = 300;
+// 鼠标在组件树移动触发高亮
+const highlightHandler = throttle(() => {
+  highlight();
+}, throttleTime);
+
+// 触发画布高亮
+const highlight = () => {
+  editorService?.highlight(props.data);
+  editorService?.get('stage')?.highlight(props.data.id);
+};
+</script>

package/src/layouts/sidebar/layer/LayerNodeTool.vue

@@ -0,0 +1,32 @@
+<template>
+  <template v-if="data.type !== 'page'">
+    <MIcon v-if="data.visible === false" :icon="Hide" @click.stop="setNodeVisible(true)" title="点击显示"></MIcon>
+    <MIcon v-else :icon="View" @click.stop="setNodeVisible(false)" class="node-lock" title="点击隐藏"></MIcon>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { Hide, View } from '@element-plus/icons-vue';
+
+import type { MNode } from '@tmagic/schema';
+
+import MIcon from '@editor/components/Icon.vue';
+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>