@tmagic/editor 1.2.0-beta.13 → 1.2.0-beta.14

package/dist/style.css

@@ -694,6 +694,9 @@
 .m-fields-code-select {
   width: 100%;
 }
+.el-dialog.is-fullscreen.code-editor-dialog {
+  overflow: hidden;
+}
 .code-editor-dialog .el-dialog__body {
   height: 90%;
   padding-top: 10px;
@@ -758,7 +761,7 @@
   position: absolute;
   top: 0;
   left: 4px;
-  width: 100%;
+  width: calc(100% - 9px);
   height: 100%;
   z-index: 10;
   background: #fff;
@@ -769,8 +772,16 @@
 .code-editor-dialog .m-editor-wrapper {
   height: 100%;
 }
+.code-editor-dialog .m-editor-wrapper.fullScreen {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+}
 .code-editor-dialog .m-editor-wrapper .m-editor-container {
-  height: calc(100% - 65px);
+  height: calc(100% - 45px);
 }
 .code-editor-dialog .m-editor-wrapper .m-editor-content-bottom {
   height: 45px;
@@ -784,7 +795,7 @@
 }
 .code-editor-dialog .m-editor-wrapper .m-editor-content-bottom > button {
   height: 30px;
-  margin-top: 15px;
+  margin-top: 5px;
 }
 .m-editor-layout {
   width: 100%;

package/dist/tmagic-editor.mjs

@@ -2,7 +2,7 @@ import { defineComponent, computed, resolveComponent, openBlock, createBlock, no
 import serialize from 'serialize-javascript';
 import { isEmpty, map, throttle, pick, omit, keys, cloneDeep, forIn, mergeWith, uniq, isObject } from 'lodash-es';
 import { HookType, NodeType } from '@tmagic/schema';
-import { Delete, Close, Edit, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, View, Link, Search, Files, DocumentCopy, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
+import { Delete, Close, Edit, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, View, Link, Search, Files, CopyDocument, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
 import { TMagicButton, TMagicTooltip, TMagicIcon, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, tMagicMessageBox, TMagicCard, TMagicInput, TMagicDialog, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicTabs, TMagicPopover } from '@tmagic/design';
 import * as monaco from 'monaco-editor';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType } from '@tmagic/stage';
@@ -513,8 +513,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   props: {
     left: null,
     right: null,
-    minLeft: { default: 1 },
+    minLeft: { default: 46 },
     minRight: { default: 1 },
+    minCenter: { default: 1 },
     leftClass: null,
     rightClass: null,
     centerClass: null
@@ -523,15 +524,42 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const el = ref();
+    const hasLeft = computed(() => typeof props.left !== "undefined");
+    const hasRight = computed(() => typeof props.left !== "undefined");
+    const getCenterWidth = (clientWidth2, left, right) => {
+      let center2 = clientWidth2 - left - right;
+      if (center2 < props.minCenter) {
+        center2 = props.minCenter;
+        if (left < right) {
+          right = clientWidth2 - left - props.minCenter;
+        } else {
+          left = clientWidth2 - right - props.minCenter;
+        }
+      }
+      return {
+        center: center2,
+        left,
+        right
+      };
+    };
     let clientWidth = 0;
     const resizerObserver = new ResizeObserver((entries) => {
       for (const { contentRect } of entries) {
         clientWidth = contentRect.width;
-        center.value = clientWidth - (props.left || 0) - (props.right || 0);
+        let left = props.left || 0;
+        let right = props.right || 0;
+        if (left > clientWidth) {
+          left = clientWidth / 3;
+        }
+        if (right > clientWidth) {
+          right = clientWidth / 3;
+        }
+        const columnWidth = getCenterWidth(clientWidth, left, right);
+        center.value = columnWidth.center;
         emit("change", {
-          left: props.left,
+          left: columnWidth.left,
           center: center.value,
-          right: props.right
+          right: columnWidth.right
         });
       }
     });
@@ -552,11 +580,12 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       if (clientWidth - left - (props.right || 0) <= 0) {
         left = props.left;
       }
-      center.value = clientWidth - left - (props.right || 0);
+      const columnWidth = getCenterWidth(clientWidth, left, props.right || 0);
+      center.value = columnWidth.center;
       emit("change", {
-        left,
+        left: columnWidth.left,
         center: center.value,
-        right: props.right
+        right: columnWidth.right
       });
     };
     const changeRight = (deltaX) => {
@@ -567,11 +596,12 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       if (clientWidth - (props.left || 0) - right <= 0) {
         right = props.right;
       }
-      center.value = clientWidth - (props.left || 0) - right;
+      const columnWidth = getCenterWidth(clientWidth, props.left || 0, right);
+      center.value = columnWidth.center;
       emit("change", {
-        left: props.left,
+        left: columnWidth.left,
         center: center.value,
-        right
+        right: columnWidth.right
       });
     };
     return (_ctx, _cache) => {
@@ -580,7 +610,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         ref: el,
         class: "m-editor-layout"
       }, [
-        typeof props.left !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        unref(hasLeft) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-left", __props.leftClass]),
             style: normalizeStyle(`width: ${__props.left}px`)
@@ -595,7 +625,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, "center")
         ], 6),
-        typeof props.right !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+        unref(hasRight) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           createVNode(_sfc_main$p, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
@@ -3127,18 +3157,17 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = { class: "m-editor-wrapper" };
-const _hoisted_2$5 = {
+const _hoisted_1$9 = {
   key: 0,
   class: "m-editor-content-bottom"
 };
-const _hoisted_3$3 = /* @__PURE__ */ createTextVNode("\u4FDD\u5B58");
-const _hoisted_4$2 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
-const _hoisted_5$1 = {
+const _hoisted_2$5 = /* @__PURE__ */ createTextVNode("\u4FDD\u5B58");
+const _hoisted_3$3 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
+const _hoisted_4$2 = {
   key: 1,
   class: "m-editor-content-bottom"
 };
-const _hoisted_6$1 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
+const _hoisted_5$1 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
 const __default__$g = defineComponent({
   name: "MEditorCodeDraftEditor"
 });
@@ -3160,6 +3189,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const editorContent = ref("");
     const codeEditor = ref();
     const originCodeContent = ref("");
+    const isFullScreen = ref(false);
     const codeOptions = computed(() => ({
       ...props.codeOptions,
       readOnly: !props.editable
@@ -3213,8 +3243,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         emit("close");
       }
     };
+    const toggleFullScreen = () => {
+      isFullScreen.value = !isFullScreen.value;
+      if (codeEditor.value) {
+        codeEditor.value.focus();
+      }
+    };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
+      }, [
         createVNode(_sfc_main$q, {
           ref_key: "codeEditor",
           ref: codeEditor,
@@ -3224,14 +3262,24 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           language: __props.language,
           options: unref(codeOptions)
         }, null, 8, ["init-values", "language", "options"]),
-        __props.editable ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
+        __props.editable ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+          createVNode(unref(TMagicButton), {
+            type: "primary",
+            class: "button",
+            onClick: toggleFullScreen
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(isFullScreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"), 1)
+            ]),
+            _: 1
+          }),
           createVNode(unref(TMagicButton), {
             type: "primary",
             class: "button",
             onClick: saveCode
           }, {
             default: withCtx(() => [
-              _hoisted_3$3
+              _hoisted_2$5
             ]),
             _: 1
           }),
@@ -3241,23 +3289,33 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             onClick: close
           }, {
             default: withCtx(() => [
-              _hoisted_4$2
+              _hoisted_3$3
             ]),
             _: 1
           })
-        ])) : (openBlock(), createElementBlock("div", _hoisted_5$1, [
+        ])) : (openBlock(), createElementBlock("div", _hoisted_4$2, [
+          createVNode(unref(TMagicButton), {
+            type: "primary",
+            class: "button",
+            onClick: toggleFullScreen
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(isFullScreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"), 1)
+            ]),
+            _: 1
+          }),
           createVNode(unref(TMagicButton), {
             type: "primary",
             class: "button",
             onClick: close
           }, {
             default: withCtx(() => [
-              _hoisted_6$1
+              _hoisted_5$1
             ]),
             _: 1
           })
         ]))
-      ]);
+      ], 2);
     };
   }
 });
@@ -3286,6 +3344,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       border: true,
       enableFullscreen: false,
       name: "params",
+      maxHeight: "150px",
       items: [
         {
           type: "text",
@@ -4104,7 +4163,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "\u590D\u5236",
-        icon: markRaw(DocumentCopy),
+        icon: markRaw(CopyDocument),
         display: () => !isRoot.value,
         handler: () => {
           node.value && services?.editorService.copy(node.value);
@@ -5234,7 +5293,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "\u590D\u5236",
-        icon: markRaw(DocumentCopy),
+        icon: markRaw(CopyDocument),
         handler: () => {
           nodes.value && editorService?.copy(nodes.value);
           canPaste.value = true;
@@ -5243,6 +5302,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "\u7C98\u8D34",
+        icon: markRaw(DocumentCopy),
         display: () => canPaste.value,
         handler: () => {
           const rect = menu.value?.$el.getBoundingClientRect();