@tmagic/editor 1.3.0-beta.7 → 1.3.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-beta.7",
+  "version": "1.3.0",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -47,13 +47,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-beta.7",
-    "@tmagic/design": "1.3.0-beta.7",
-    "@tmagic/form": "1.3.0-beta.7",
-    "@tmagic/schema": "1.3.0-beta.7",
-    "@tmagic/stage": "1.3.0-beta.7",
-    "@tmagic/table": "1.3.0-beta.7",
-    "@tmagic/utils": "1.3.0-beta.7",
+    "@tmagic/core": "1.3.0",
+    "@tmagic/design": "1.3.0",
+    "@tmagic/form": "1.3.0",
+    "@tmagic/schema": "1.3.0",
+    "@tmagic/stage": "1.3.0",
+    "@tmagic/table": "1.3.0",
+    "@tmagic/utils": "1.3.0",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -65,8 +65,8 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-beta.7",
-    "@tmagic/form": "1.3.0-beta.7",
+    "@tmagic/design": "1.3.0",
+    "@tmagic/form": "1.3.0",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.4"
   },

package/src/components/ContentMenu.vue

@@ -126,17 +126,13 @@ const setPosition = (e: { clientY: number; clientX: number }) => {
   };
 };
 
-const show = (e?: MouseEvent) => {
+const show = (e?: { clientY: number; clientX: number }) => {
   // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
   setTimeout(() => {
     visible.value = true;
 
-    if (!e) {
-      return;
-    }
-
     nextTick(() => {
-      setPosition(e);
+      e && setPosition(e);
 
       emit('show');
     });

package/src/components/SplitView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="el" class="m-editor-layout">
+  <div ref="el" class="m-editor-layout" :style="`min-width: ${props.minCenter + props.minLeft + props.minRight}px`">
     <template v-if="hasLeft && $slots.left">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>
@@ -55,14 +55,18 @@ const el = ref<HTMLElement>();
 const hasLeft = computed(() => typeof props.left !== 'undefined');
 const hasRight = computed(() => typeof props.right !== 'undefined');
 
-const getCenterWidth = (clientWidth: number, left: number, right: number) => {
+const getCenterWidth = (clientWidth: number, l = 0, r = 0) => {
+  let right = r > 0 ? r : 0;
+  let left = l > 0 ? l : 0;
   let center = clientWidth - left - right;
+
   if (center < props.minCenter) {
     center = props.minCenter;
-    if (left < right) {
-      right = clientWidth - left - props.minCenter;
+    if (right > center + props.minRight) {
+      right = clientWidth - left - center;
     } else {
-      left = clientWidth - right - props.minCenter;
+      right = props.minRight;
+      left = clientWidth - right - center;
     }
   }
   return {
@@ -141,7 +145,7 @@ const changeRight = ({ deltaX }: OnDrag) => {
     right = props.right;
   }
 
-  const columnWidth = getCenterWidth(clientWidth, props.left || 0, right);
+  const columnWidth = getCenterWidth(clientWidth, props.left, right);
 
   center.value = columnWidth.center;
 
@@ -151,4 +155,16 @@ const changeRight = ({ deltaX }: OnDrag) => {
     right: columnWidth.right,
   });
 };
+
+defineExpose({
+  updateWidth() {
+    const columnWidth = getCenterWidth(el.value?.clientWidth || clientWidth, props.left, props.right);
+
+    emit('change', {
+      left: columnWidth.left,
+      center: center.value,
+      right: columnWidth.right,
+    });
+  },
+});
 </script>

package/src/initService.ts

@@ -276,26 +276,6 @@ export const initServiceEvents = (
   };
 
   const rootChangeHandler = async (value: MApp | null, preValue?: MApp | null) => {
-    const nodeId = editorService.get('node')?.id || props.defaultSelected;
-    let node;
-    if (nodeId) {
-      node = editorService.getNodeById(nodeId);
-    }
-
-    if (node && node !== value) {
-      await editorService.select(node.id);
-    } else if (value?.items?.length) {
-      await editorService.select(value.items[0]);
-    } else if (value?.id) {
-      editorService.set('nodes', [value]);
-      editorService.set('parent', null);
-      editorService.set('page', null);
-    }
-
-    if (toRaw(value) !== toRaw(preValue)) {
-      emit('update:modelValue', value);
-    }
-
     if (!value) return;
 
     value.codeBlocks = value.codeBlocks || {};
@@ -314,12 +294,32 @@ export const initServiceEvents = (
       initDataSourceDepTarget(ds);
     });
 
-    if (value && Array.isArray(value.items)) {
+    if (Array.isArray(value.items)) {
       depService.collect(value.items, true);
     } else {
       depService.clear();
       delete value.dataSourceDeps;
     }
+
+    const nodeId = editorService.get('node')?.id || props.defaultSelected;
+    let node;
+    if (nodeId) {
+      node = editorService.getNodeById(nodeId);
+    }
+
+    if (node && node !== value) {
+      await editorService.select(node.id);
+    } else if (value.items?.length) {
+      await editorService.select(value.items[0]);
+    } else if (value.id) {
+      editorService.set('nodes', [value]);
+      editorService.set('parent', null);
+      editorService.set('page', null);
+    }
+
+    if (toRaw(value) !== toRaw(preValue)) {
+      emit('update:modelValue', value);
+    }
   };
 
   // 新增节点，收集依赖

package/src/layouts/Framework.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor" ref="content">
+  <div class="m-editor" ref="content" style="min-width: 180px">
     <slot name="header"></slot>
 
     <slot name="nav"></slot>
@@ -12,6 +12,7 @@
 
     <SplitView
       v-else
+      ref="splitView"
       class="m-editor-content"
       left-class="m-editor-framework-left"
       center-class="m-editor-framework-center"
@@ -20,6 +21,7 @@
       v-model:right="columnWidth.right"
       :min-left="65"
       :min-right="20"
+      :min-center="100"
       @change="columnWidthChange"
     >
       <template #left>
@@ -70,6 +72,7 @@ const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
 const content = ref<HTMLDivElement>();
+const splitView = ref<InstanceType<typeof SplitView>>();
 
 const root = computed(() => editorService?.get('root'));
 
@@ -79,8 +82,10 @@ const showSrc = computed(() => uiService?.get('showSrc'));
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
 const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
 
-const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
-const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
+const leftColumnWidthCacheData =
+  Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
+const RightColumnWidthCacheData =
+  Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
 
 const columnWidth = ref<Partial<GetColumnWidth>>({
   left: leftColumnWidthCacheData,
@@ -89,24 +94,9 @@ const columnWidth = ref<Partial<GetColumnWidth>>({
 });
 
 watch(
-  pageLength,
-  (length) => {
-    const left = columnWidth.value.left || DEFAULT_LEFT_COLUMN_WIDTH;
-
-    columnWidth.value.left = left;
-
-    const container = content.value || document.body;
-
-    if (length <= 0) {
-      columnWidth.value.right = undefined;
-      columnWidth.value.center = container.clientWidth - left;
-    } else {
-      const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
-      columnWidth.value.right = right;
-      columnWidth.value.center = container.clientWidth - left - right;
-    }
-
-    uiService?.set('columnWidth', columnWidth.value as GetColumnWidth);
+  [pageLength, splitView],
+  () => {
+    splitView.value?.updateWidth();
   },
   {
     immediate: true,

package/src/layouts/sidebar/data-source/DataSourceList.vue

@@ -75,6 +75,26 @@ const getNodeTreeConfig = (id: string, dep: Dep[string], type?: string) => ({
   children: getKeyTreeConfig(dep, type),
 });
 
+/**
+ * 生成tree中依赖节点的数据
+ * @param children 节点
+ * @param deps 依赖
+ * @param type 依赖类型
+ */
+const mergeChildren = (children: any[], deps: Dep, type?: string) => {
+  Object.entries(deps).forEach(([id, dep]) => {
+    // 已经生成过的节点
+    const nodeItem = children.find((item) => item.id === id);
+    // 节点存在，则追加依赖的key
+    if (nodeItem) {
+      nodeItem.children = nodeItem.children.concat(getKeyTreeConfig(dep, type));
+    } else {
+      // 节点不存在，则生成
+      children.push(getNodeTreeConfig(id, dep, type));
+    }
+  });
+};
+
 const list = computed(() =>
   dataSources.value.map((ds) => {
     const dsDeps = dsDep.value[ds.id].deps;
@@ -82,21 +102,10 @@ const list = computed(() =>
     const dsCondDeps = dsCondDep.value[ds.id].deps;
 
     const children: any[] = [];
-
-    const mergeChildren = (deps: Dep, type?: string) => {
-      Object.entries(deps).forEach(([id, dep]) => {
-        const nodeItem = children.find((item) => item.id === id);
-        if (nodeItem) {
-          nodeItem.children = nodeItem.children.concat(getKeyTreeConfig(dep, type));
-        } else {
-          children.push(getNodeTreeConfig(id, dep, type));
-        }
-      });
-    };
-
-    mergeChildren(dsDeps);
-    mergeChildren(dsMethodDeps, 'method');
-    mergeChildren(dsCondDeps, 'cond');
+    // 数据源依赖分为三种类型：key/node、method、cond，是分开存储，这里将其合并展示
+    mergeChildren(children, dsDeps);
+    mergeChildren(children, dsMethodDeps, 'method');
+    mergeChildren(children, dsCondDeps, 'cond');
 
     return {
       id: ds.id,

package/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -26,11 +26,15 @@ import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { ComponentItem, MenuButton, Services } from '@editor/type';
 
 import NodeListMenuTitle from './NodeListMenuTitle.vue';
+
+const PINNED_STATUE_CACHE_KEY = 'tmagic-pinned-node-list-pinned-status';
+
 const props = defineProps<{ isMultiSelect?: boolean }>();
 
 const menu = ref<InstanceType<typeof ContentMenu>>();
 const nodeList = ref<MNode[]>([]);
-const pinned = ref(false);
+const pinned = ref(Boolean(globalThis.localStorage.getItem(PINNED_STATUE_CACHE_KEY)));
+const firstShow = ref(true);
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
@@ -94,7 +98,8 @@ const unWatch = watch(
         nodeList.value = nodes;
 
         if (nodeList.value.length > 1) {
-          menu.value?.show(pinned.value ? undefined : event);
+          menu.value?.show(pinned.value && !firstShow.value ? undefined : event);
+          firstShow.value = false;
         }
       }, 1500);
     });
@@ -163,4 +168,8 @@ const dragMenuHandler = ({ deltaY, deltaX }: OnDrag) => {
 const closeHandler = () => {
   menu.value?.hide();
 };
+
+watch(pinned, () => {
+  globalThis.localStorage.setItem(PINNED_STATUE_CACHE_KEY, pinned.value.toString());
+});
 </script>

package/src/layouts/workspace/viewer/Stage.vue

@@ -33,7 +33,7 @@
 import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import type { MContainer } from '@tmagic/schema';
+import type { MApp, MContainer } from '@tmagic/schema';
 import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
@@ -105,12 +105,6 @@ watch(zoom, (zoom) => {
   stage.setZoom(zoom);
 });
 
-watch(root, (root) => {
-  if (runtime && root) {
-    runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
-  }
-});
-
 watch(page, (page) => {
   if (runtime && page) {
     runtime.updatePageId?.(page.id);
@@ -120,6 +114,14 @@ watch(page, (page) => {
   }
 });
 
+const rootChangeHandler = (root: MApp) => {
+  if (runtime && root) {
+    runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
+  }
+};
+
+services?.editorService.on('root-change', rootChangeHandler);
+
 const resizeObserver = new ResizeObserver((entries) => {
   for (const { contentRect } of entries) {
     services?.uiService.set('stageContainerRect', {
@@ -141,6 +143,7 @@ onUnmounted(() => {
   resizeObserver.disconnect();
   services?.editorService.set('stage', null);
   services?.keybindingService.unregisteEl('stage');
+  services?.editorService.off('root-change', rootChangeHandler);
 });
 
 const parseDSL = getConfig('parseDSL');

package/src/services/dep.ts

@@ -299,7 +299,7 @@ export class Watcher extends EventEmitter {
         const keyIsItems = key === 'items';
         const fullKey = prop ? `${prop}.${key}` : key;
 
-        if (target.isTarget(key, value)) {
+        if (target.isTarget(fullKey, value)) {
           target.updateDep(node, fullKey);
           this.emit('update-dep', node, fullKey);
         } else if (!keyIsItems && Array.isArray(value)) {

package/src/utils/dep.ts

@@ -58,8 +58,13 @@ export const createDataSourceCondTarget = (id: string) =>
   new Target({
     type: DepTargetType.DATA_SOURCE_COND,
     id,
-    isTarget: (key: string | number, value: any) =>
-      Array.isArray(value) && value[0] === id && Boolean(dataSourceService.getDataSourceById(id)),
+    isTarget: (key: string | number, value: any) => {
+      if (!Array.isArray(value) || value[0] !== id || !`${key}`.startsWith('displayConds')) return false;
+
+      const ds = dataSourceService.getDataSourceById(id);
+
+      return Boolean(ds?.fields?.find((field) => field.name === value[1]));
+    },
   });
 
 export const createDataSourceMethodTarget = (id: string) =>

package/types/components/ContentMenu.vue.d.ts

@@ -15,7 +15,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         top: number;
     }>;
     hide: () => void;
-    show: (e?: MouseEvent | undefined) => void;
+    show: (e?: {
+        clientY: number;
+        clientX: number;
+    } | undefined) => void;
     contains: (el: HTMLElement) => any;
     setPosition: (e: {
         clientY: number;

package/types/components/SplitView.vue.d.ts

@@ -11,7 +11,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minLeft: number;
     minRight: number;
     minCenter: number;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:left" | "update:right")[], "change" | "update:left" | "update:right", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {
+    updateWidth(): void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:left" | "update:right")[], "change" | "update:left" | "update:right", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     left?: number | undefined;
     right?: number | undefined;
     minLeft?: number | undefined;