@tmagic/editor 1.3.0-beta.7 → 1.3.0

package/dist/tmagic-editor.js

@@ -4981,19 +4981,22 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     centerClass: {}
   },
   emits: ["update:left", "change", "update:right"],
-  setup(__props, { emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const el = ref();
     const hasLeft = computed(() => typeof props.left !== "undefined");
     const hasRight = computed(() => typeof props.right !== "undefined");
-    const getCenterWidth = (clientWidth2, left, right) => {
+    const getCenterWidth = (clientWidth2, l = 0, r = 0) => {
+      let right = r > 0 ? r : 0;
+      let left = l > 0 ? l : 0;
       let center2 = clientWidth2 - left - right;
       if (center2 < props.minCenter) {
         center2 = props.minCenter;
-        if (left < right) {
-          right = clientWidth2 - left - props.minCenter;
+        if (right > center2 + props.minRight) {
+          right = clientWidth2 - left - center2;
         } else {
-          left = clientWidth2 - right - props.minCenter;
+          right = props.minRight;
+          left = clientWidth2 - right - center2;
         }
       }
       return {
@@ -5056,7 +5059,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
       if (clientWidth - (props.left || 0) - right <= 0) {
         right = props.right;
       }
-      const columnWidth = getCenterWidth(clientWidth, props.left || 0, right);
+      const columnWidth = getCenterWidth(clientWidth, props.left, right);
       center.value = columnWidth.center;
       emit("change", {
         left: columnWidth.left,
@@ -5064,11 +5067,22 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
         right: columnWidth.right
       });
     };
+    __expose({
+      updateWidth() {
+        const columnWidth = getCenterWidth(el.value?.clientWidth || clientWidth, props.left, props.right);
+        emit("change", {
+          left: columnWidth.left,
+          center: center.value,
+          right: columnWidth.right
+        });
+      }
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "el",
         ref: el,
-        class: "m-editor-layout"
+        class: "m-editor-layout",
+        style: normalizeStyle(`min-width: ${props.minCenter + props.minLeft + props.minRight}px`)
       }, [
         hasLeft.value && _ctx.$slots.left ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createElementVNode("div", {
@@ -5094,7 +5108,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "right")
           ], 6)
         ], 64)) : createCommentVNode("", true)
-      ], 512);
+      ], 4);
     };
   }
 });
@@ -5152,31 +5166,21 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     const codeOptions = inject("codeOptions", {});
     const { editorService, uiService } = inject("services") || {};
     const content = ref();
+    const splitView = ref();
     const root = computed(() => editorService?.get("root"));
     const pageLength = computed(() => editorService?.get("pageLength") || 0);
     const showSrc = computed(() => uiService?.get("showSrc"));
-    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({
       left: leftColumnWidthCacheData,
       center: 0,
       right: RightColumnWidthCacheData
     });
     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 = void 0;
-          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);
+      [pageLength, splitView],
+      () => {
+        splitView.value?.updateWidth();
       },
       {
         immediate: true
@@ -5214,7 +5218,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: "m-editor",
         ref_key: "content",
-        ref: content
+        ref: content,
+        style: { "min-width": "180px" }
       }, [
         renderSlot(_ctx.$slots, "header"),
         renderSlot(_ctx.$slots, "nav"),
@@ -5228,6 +5233,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           }, null, 8, ["init-values", "options"])
         ]) : (openBlock(), createBlock(_sfc_main$A, {
           key: 1,
+          ref_key: "splitView",
+          ref: splitView,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
           "center-class": "m-editor-framework-center",
@@ -5238,6 +5245,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           "onUpdate:right": _cache[1] || (_cache[1] = ($event) => columnWidth.value.right = $event),
           "min-left": 65,
           "min-right": 20,
+          "min-center": 100,
           onChange: columnWidthChange
         }, createSlots({
           left: withCtx(() => [
@@ -6082,25 +6090,25 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       id,
       children: getKeyTreeConfig(dep, type)
     });
+    const mergeChildren = (children, deps, type) => {
+      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));
+        }
+      });
+    };
     const list = computed(
       () => dataSources.value.map((ds) => {
         const dsDeps = dsDep.value[ds.id].deps;
         const dsMethodDeps = dsMethodDep.value[ds.id].deps;
         const dsCondDeps = dsCondDep.value[ds.id].deps;
         const children = [];
-        const mergeChildren = (deps, type) => {
-          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");
+        mergeChildren(children, dsDeps);
+        mergeChildren(children, dsMethodDeps, "method");
+        mergeChildren(children, dsCondDeps, "cond");
         return {
           id: ds.id,
           name: ds.title,
@@ -6574,11 +6582,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const show = (e) => {
       setTimeout(() => {
         visible.value = true;
-        if (!e) {
-          return;
-        }
         nextTick(() => {
-          setPosition(e);
+          e && setPosition(e);
           emit("show");
         });
       }, 300);
@@ -8439,6 +8444,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const PINNED_STATUE_CACHE_KEY = "tmagic-pinned-node-list-pinned-status";
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "NodeListMenu",
   props: {
@@ -8448,7 +8454,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const menu = ref();
     const nodeList = ref([]);
-    const pinned = ref(false);
+    const pinned = ref(Boolean(globalThis.localStorage.getItem(PINNED_STATUE_CACHE_KEY)));
+    const firstShow = ref(true);
     const services = inject("services");
     const editorService = services?.editorService;
     const componentListService = services?.componentListService;
@@ -8497,7 +8504,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             }
             nodeList.value = nodes;
             if (nodeList.value.length > 1) {
-              menu.value?.show(pinned.value ? void 0 : event);
+              menu.value?.show(pinned.value && !firstShow.value ? void 0 : event);
+              firstShow.value = false;
             }
           }, 1500);
         });
@@ -8555,6 +8563,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const closeHandler = () => {
       menu.value?.hide();
     };
+    watch(pinned, () => {
+      globalThis.localStorage.setItem(PINNED_STATUE_CACHE_KEY, pinned.value.toString());
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$k, {
         ref_key: "menu",
@@ -8804,11 +8815,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         return;
       stage.setZoom(zoom2);
     });
-    watch(root, (root2) => {
-      if (runtime && root2) {
-        runtime.updateRootConfig?.(cloneDeep(toRaw(root2)));
-      }
-    });
     watch(page, (page2) => {
       if (runtime && page2) {
         runtime.updatePageId?.(page2.id);
@@ -8817,6 +8823,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         });
       }
     });
+    const rootChangeHandler = (root2) => {
+      if (runtime && root2) {
+        runtime.updateRootConfig?.(cloneDeep(toRaw(root2)));
+      }
+    };
+    services?.editorService.on("root-change", rootChangeHandler);
     const resizeObserver = new ResizeObserver((entries) => {
       for (const { contentRect } of entries) {
         services?.uiService.set("stageContainerRect", {
@@ -8836,6 +8848,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       resizeObserver.disconnect();
       services?.editorService.set("stage", null);
       services?.keybindingService.unregisteEl("stage");
+      services?.editorService.off("root-change", rootChangeHandler);
     });
     const parseDSL = getConfig("parseDSL");
     const contextmenuHandler = (e) => {
@@ -9668,7 +9681,7 @@ class Watcher extends EventEmitter {
       const doCollect = (key, value) => {
         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)) {
@@ -9956,7 +9969,12 @@ const createDataSourceTarget = (id) => new Target({
 const createDataSourceCondTarget = (id) => new Target({
   type: DepTargetType.DATA_SOURCE_COND,
   id,
-  isTarget: (key, value) => Array.isArray(value) && value[0] === id && Boolean(dataSourceService.getDataSourceById(id))
+  isTarget: (key, value) => {
+    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]));
+  }
 });
 const createDataSourceMethodTarget = (id) => new Target({
   type: DepTargetType.DATA_SOURCE_METHOD,
@@ -10179,23 +10197,6 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     depService.addTarget(createDataSourceCondTarget(ds.id));
   };
   const rootChangeHandler = async (value, preValue) => {
-    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 || {};
@@ -10209,12 +10210,29 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     value.dataSources.forEach((ds) => {
       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);
+    }
   };
   const nodeAddHandler = (nodes) => {
     depService.collect(nodes);