@tmagic/editor 1.3.0-beta.7 → 1.3.0

package/dist/tmagic-editor.umd.cjs

@@ -4990,19 +4990,22 @@
       centerClass: {}
     },
     emits: ["update:left", "change", "update:right"],
-    setup(__props, { emit }) {
+    setup(__props, { expose: __expose, emit }) {
       const props = __props;
       const el = vue.ref();
       const hasLeft = vue.computed(() => typeof props.left !== "undefined");
       const hasRight = vue.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 {
@@ -5065,7 +5068,7 @@
         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,
@@ -5073,11 +5076,22 @@
           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 vue.openBlock(), vue.createElementBlock("div", {
           ref_key: "el",
           ref: el,
-          class: "m-editor-layout"
+          class: "m-editor-layout",
+          style: vue.normalizeStyle(`min-width: ${props.minCenter + props.minLeft + props.minRight}px`)
         }, [
           hasLeft.value && _ctx.$slots.left ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createElementVNode("div", {
@@ -5103,7 +5117,7 @@
               vue.renderSlot(_ctx.$slots, "right")
             ], 6)
           ], 64)) : vue.createCommentVNode("", true)
-        ], 512);
+        ], 4);
       };
     }
   });
@@ -5161,31 +5175,21 @@
       const codeOptions = vue.inject("codeOptions", {});
       const { editorService, uiService } = vue.inject("services") || {};
       const content = vue.ref();
+      const splitView = vue.ref();
       const root = vue.computed(() => editorService?.get("root"));
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
       const showSrc = vue.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 = vue.ref({
         left: leftColumnWidthCacheData,
         center: 0,
         right: RightColumnWidthCacheData
       });
       vue.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
@@ -5223,7 +5227,8 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor",
           ref_key: "content",
-          ref: content
+          ref: content,
+          style: { "min-width": "180px" }
         }, [
           vue.renderSlot(_ctx.$slots, "header"),
           vue.renderSlot(_ctx.$slots, "nav"),
@@ -5237,6 +5242,8 @@
             }, null, 8, ["init-values", "options"])
           ]) : (vue.openBlock(), vue.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",
@@ -5247,6 +5254,7 @@
             "onUpdate:right": _cache[1] || (_cache[1] = ($event) => columnWidth.value.right = $event),
             "min-left": 65,
             "min-right": 20,
+            "min-center": 100,
             onChange: columnWidthChange
           }, vue.createSlots({
             left: vue.withCtx(() => [
@@ -6091,25 +6099,25 @@
         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 = vue.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,
@@ -6583,11 +6591,8 @@
       const show = (e) => {
         setTimeout(() => {
           visible.value = true;
-          if (!e) {
-            return;
-          }
           vue.nextTick(() => {
-            setPosition(e);
+            e && setPosition(e);
             emit("show");
           });
         }, 300);
@@ -8448,6 +8453,7 @@
     }
   });
 
+  const PINNED_STATUE_CACHE_KEY = "tmagic-pinned-node-list-pinned-status";
   const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     __name: "NodeListMenu",
     props: {
@@ -8457,7 +8463,8 @@
       const props = __props;
       const menu = vue.ref();
       const nodeList = vue.ref([]);
-      const pinned = vue.ref(false);
+      const pinned = vue.ref(Boolean(globalThis.localStorage.getItem(PINNED_STATUE_CACHE_KEY)));
+      const firstShow = vue.ref(true);
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const componentListService = services?.componentListService;
@@ -8506,7 +8513,8 @@
               }
               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);
           });
@@ -8564,6 +8572,9 @@
       const closeHandler = () => {
         menu.value?.hide();
       };
+      vue.watch(pinned, () => {
+        globalThis.localStorage.setItem(PINNED_STATUE_CACHE_KEY, pinned.value.toString());
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(_sfc_main$k, {
           ref_key: "menu",
@@ -8813,11 +8824,6 @@
           return;
         stage.setZoom(zoom2);
       });
-      vue.watch(root, (root2) => {
-        if (runtime && root2) {
-          runtime.updateRootConfig?.(lodashEs.cloneDeep(vue.toRaw(root2)));
-        }
-      });
       vue.watch(page, (page2) => {
         if (runtime && page2) {
           runtime.updatePageId?.(page2.id);
@@ -8826,6 +8832,12 @@
           });
         }
       });
+      const rootChangeHandler = (root2) => {
+        if (runtime && root2) {
+          runtime.updateRootConfig?.(lodashEs.cloneDeep(vue.toRaw(root2)));
+        }
+      };
+      services?.editorService.on("root-change", rootChangeHandler);
       const resizeObserver = new ResizeObserver((entries) => {
         for (const { contentRect } of entries) {
           services?.uiService.set("stageContainerRect", {
@@ -8845,6 +8857,7 @@
         resizeObserver.disconnect();
         services?.editorService.set("stage", null);
         services?.keybindingService.unregisteEl("stage");
+        services?.editorService.off("root-change", rootChangeHandler);
       });
       const parseDSL = getConfig("parseDSL");
       const contextmenuHandler = (e) => {
@@ -9677,7 +9690,7 @@
         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)) {
@@ -9965,7 +9978,12 @@
   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,
@@ -10188,23 +10206,6 @@
       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 (vue.toRaw(value) !== vue.toRaw(preValue)) {
-        emit("update:modelValue", value);
-      }
       if (!value)
         return;
       value.codeBlocks = value.codeBlocks || {};
@@ -10218,12 +10219,29 @@
       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 (vue.toRaw(value) !== vue.toRaw(preValue)) {
+        emit("update:modelValue", value);
+      }
     };
     const nodeAddHandler = (nodes) => {
       depService.collect(nodes);