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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0-beta.13",
+  "version": "1.2.0-beta.15",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,12 +45,12 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.0-beta.13",
-    "@tmagic/design": "1.2.0-beta.13",
-    "@tmagic/form": "1.2.0-beta.13",
-    "@tmagic/schema": "1.2.0-beta.13",
-    "@tmagic/stage": "1.2.0-beta.13",
-    "@tmagic/utils": "1.2.0-beta.13",
+    "@tmagic/core": "1.2.0-beta.15",
+    "@tmagic/design": "1.2.0-beta.15",
+    "@tmagic/form": "1.2.0-beta.15",
+    "@tmagic/schema": "1.2.0-beta.15",
+    "@tmagic/stage": "1.2.0-beta.15",
+    "@tmagic/utils": "1.2.0-beta.15",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -62,8 +62,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.2.0-beta.13",
-    "@tmagic/form": "1.2.0-beta.13",
+    "@tmagic/design": "1.2.0-beta.15",
+    "@tmagic/form": "1.2.0-beta.15",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },

package/src/components/CodeDraftEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-wrapper">
+  <div class="m-editor-wrapper" :class="isFullScreen ? 'fullScreen' : 'normal'">
     <magic-code-editor
       ref="codeEditor"
       class="m-editor-container"
@@ -9,10 +9,16 @@
       :options="codeOptions"
     ></magic-code-editor>
     <div class="m-editor-content-bottom" v-if="editable">
+      <TMagicButton type="primary" class="button" @click="toggleFullScreen">
+        {{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
+      >
       <TMagicButton type="primary" class="button" @click="saveCode">保存</TMagicButton>
       <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
     </div>
     <div class="m-editor-content-bottom" v-else>
+      <TMagicButton type="primary" class="button" @click="toggleFullScreen">
+        {{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
+      >
       <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
     </div>
   </div>
@@ -57,6 +63,7 @@ const editorContent = ref<string>('');
 const codeEditor = ref<InstanceType<typeof MagicCodeEditor>>();
 // 原始代码内容
 const originCodeContent = ref<string>('');
+const isFullScreen = ref<boolean>(false);
 
 const codeOptions = computed(() => ({
   ...props.codeOptions,
@@ -105,7 +112,7 @@ const saveAndClose = (): void => {
 };
 
 // 关闭弹窗
-const close = async () => {
+const close = async (): Promise<void> => {
   const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
   if (codeDraft) {
     tMagicMessageBox
@@ -127,4 +134,12 @@ const close = async () => {
     emit('close');
   }
 };
+
+// 切换全屏
+const toggleFullScreen = (): void => {
+  isFullScreen.value = !isFullScreen.value;
+  if (codeEditor.value) {
+    codeEditor.value.focus();
+  }
+};
 </script>

package/src/components/FunctionEditor.vue

@@ -46,6 +46,7 @@ const tableConfig = {
   border: true,
   enableFullscreen: false,
   name: 'params',
+  maxHeight: '150px',
   items: [
     {
       type: 'text',
@@ -89,7 +90,7 @@ watchEffect(() => {
   codeContent.value = props.content;
 });
 
-const initTableModel = () => {
+const initTableModel = (): void => {
   const codeDsl = services?.codeBlockService.getCodeDslSync();
   if (!codeDsl) return;
   tableModel.value = {
@@ -130,7 +131,7 @@ const saveCode = async (codeValue: string): Promise<void> => {
 };
 
 // 保存并关闭
-const saveAndClose = async (codeValue: string) => {
+const saveAndClose = async (codeValue: string): Promise<void> => {
   await saveCode(codeValue);
   if (evalRes.value) {
     close();
@@ -138,7 +139,7 @@ const saveAndClose = async (codeValue: string) => {
 };
 
 // 关闭弹窗
-const close = () => {
+const close = (): void => {
   services?.codeBlockService.setCodeEditorShowStatus(false);
 };
 </script>

package/src/components/Layout.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="el" class="m-editor-layout">
-    <template v-if="typeof props.left !== 'undefined'">
+    <template v-if="hasLeft">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>
       </div>
@@ -11,7 +11,7 @@
       <slot name="center"></slot>
     </div>
 
-    <template v-if="typeof props.right !== 'undefined'">
+    <template v-if="hasRight">
       <Resizer @change="changeRight"></Resizer>
       <div class="m-editor-layout-right" :class="rightClass" :style="`width: ${right}px`">
         <slot name="right"></slot>
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup name="MEditorLayout">
-import { onMounted, onUnmounted, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 import Resizer from '../layouts/Resizer.vue';
 
@@ -33,29 +33,64 @@ const props = withDefaults(
     right?: number;
     minLeft?: number;
     minRight?: number;
+    minCenter?: number;
     leftClass?: string;
     rightClass?: string;
     centerClass?: string;
   }>(),
   {
-    minLeft: 1,
+    minLeft: 46,
     minRight: 1,
+    minCenter: 1,
   },
 );
 
 const el = ref<HTMLElement>();
 
+const hasLeft = computed(() => typeof props.left !== 'undefined');
+const hasRight = computed(() => typeof props.left !== 'undefined');
+
+const getCenterWidth = (clientWidth: number, left: number, right: number) => {
+  let center = clientWidth - left - right;
+  if (center < props.minCenter) {
+    center = props.minCenter;
+    if (left < right) {
+      right = clientWidth - left - props.minCenter;
+    } else {
+      left = clientWidth - right - props.minCenter;
+    }
+  }
+  return {
+    center,
+    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,
     });
   }
 });
@@ -81,12 +116,14 @@ const changeLeft = (deltaX: number) => {
     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,
   });
 };
 
@@ -99,12 +136,14 @@ const changeRight = (deltaX: number) => {
     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,
   });
 };
 </script>

package/src/layouts/sidebar/LayerMenu.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup name="MEditorLayerMenu">
 import { computed, inject, markRaw, ref } from 'vue';
-import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons-vue';
+import { CopyDocument, Delete, Files, Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
@@ -84,7 +84,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '复制',
-    icon: markRaw(DocumentCopy),
+    icon: markRaw(CopyDocument),
     display: () => !isRoot.value,
     handler: () => {
       node.value && services?.editorService.copy(node.value);

package/src/layouts/sidebar/LayerPanel.vue

@@ -23,6 +23,7 @@
         :default-expanded-keys="defaultExpandedKeys"
         :load="loadItems"
         :data="values"
+        :default-expand-all="true"
         :expand-on-click-node="false"
         :highlight-current="true"
         :props="{

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

@@ -164,7 +164,7 @@ const createCodeBlock = async () => {
   }
   const codeConfig: CodeBlockContent = {
     name: '代码块',
-    content: `() => {\n  // place your code here\n}`,
+    content: `({app, params}) => {\n  // place your code here\n}`,
     params: [],
   };
   await codeBlockService.setMode(CodeEditorMode.EDITOR);

package/src/layouts/workspace/ViewerMenu.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup name="MEditorViewerMenu">
 import { computed, inject, markRaw, ref, watch } from 'vue';
-import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
+import { Bottom, CopyDocument, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
 import { MNode, NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
@@ -44,7 +44,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '复制',
-    icon: markRaw(DocumentCopy),
+    icon: markRaw(CopyDocument),
     handler: () => {
       nodes.value && editorService?.copy(nodes.value);
       canPaste.value = true;
@@ -53,6 +53,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '粘贴',
+    icon: markRaw(DocumentCopy),
     display: () => canPaste.value,
     handler: () => {
       const rect = menu.value?.$el.getBoundingClientRect();

package/src/services/BaseService.ts

@@ -77,7 +77,7 @@ const doAction = async (
  *
  *   editorService.usePlugin({
  *     beforeAdd(value) { return [value] },
- *     afterAdd(value, result) {},
+ *     afterAdd(result, value) { return result },
  *   });
  *
  *   editorService.add(); 最终会变成  () => {

package/src/services/codeBlock.ts

@@ -106,13 +106,17 @@ class CodeBlock extends BaseService {
    */
   public async setCodeDslById(id: Id, codeConfig: CodeBlockContent): Promise<void> {
     let codeDsl = await this.getCodeDsl();
+    const codeConfigProcessed = codeConfig;
+    if (codeConfig.content) {
+      // 在保存的时候转换代码内容
+      // eslint-disable-next-line no-eval
+      codeConfigProcessed.content = eval(codeConfig.content);
+    }
     if (!codeDsl) {
       // dsl中无代码块字段
       codeDsl = {
         [id]: {
-          ...codeConfig,
-          // eslint-disable-next-line no-eval
-          content: eval(codeConfig.content),
+          ...codeConfigProcessed,
         },
       };
     } else {
@@ -121,9 +125,7 @@ class CodeBlock extends BaseService {
         ...codeDsl,
         [id]: {
           ...existContent,
-          ...codeConfig,
-          // eslint-disable-next-line no-eval
-          content: eval(codeConfig.content),
+          ...codeConfigProcessed,
         },
       };
     }
@@ -173,7 +175,7 @@ class CodeBlock extends BaseService {
    * 获取当前选中的代码块内容
    * @returns {CodeBlockContent | null}
    */
-  public async getCurrentDsl() {
+  public async getCurrentDsl(): Promise<CodeBlockContent | null> {
     return await this.getCodeContentById(this.state.id);
   }
 
@@ -199,7 +201,7 @@ class CodeBlock extends BaseService {
    * @param {Id} id 代码块id
    * @returns {void}
    */
-  public setId(id: Id) {
+  public setId(id: Id): void {
     if (!id) return;
     this.state.id = id;
   }
@@ -248,7 +250,7 @@ class CodeBlock extends BaseService {
 
   /**
    * 刷新绑定关系
-   * @returns {void}
+   * @returns {CodeRelation | null}
    */
   public refreshCombineInfo(): CodeRelation | null {
     const root = editorService.get<MApp | null>('root');
@@ -335,14 +337,14 @@ class CodeBlock extends BaseService {
    * @param {MNode} compId 组件节点
    * @returns void
    */
-  public async deleteCompsInRelation(node: MNode) {
+  public async deleteCompsInRelation(node: MNode): Promise<void> {
     const codeDsl = cloneDeep(await this.getCodeDsl());
     if (!codeDsl) return;
     this.refreshRelationDeep(node, codeDsl);
     this.setCodeDsl(codeDsl);
   }
 
-  public destroy() {
+  public destroy(): void {
     this.state.isShowCodeEditor = false;
     this.state.codeDsl = null;
     this.state.id = '';
@@ -358,7 +360,7 @@ class CodeBlock extends BaseService {
    * @param {CodeBlockDSL} codeDsl 代码块
    * @returns void
    */
-  private refreshRelationDeep(node: MNode, codeDsl: CodeBlockDSL) {
+  private refreshRelationDeep(node: MNode, codeDsl: CodeBlockDSL): void {
     if (!node.id) return;
     forIn(codeDsl, (codeBlockContent) => {
       const compsContent = codeBlockContent.comps || {};
@@ -376,7 +378,7 @@ class CodeBlock extends BaseService {
    * @param {MContainer} node 节点信息
    * @returns void
    */
-  private recurseMNode(node: MNode, relations: CodeRelation) {
+  private recurseMNode(node: MNode, relations: CodeRelation): void {
     forIn(node, (value, key) => {
       if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
         value.hookData.forEach((relationItem: HookData) => {

package/src/theme/code-block.scss

@@ -35,9 +35,7 @@
       display: flex;
       align-items: center;
       .right-tool {
-        position: absolute;
-        right: 15px;
-        padding-left: 5px;
+        width: fit-content !important;
         display: flex;
         align-items: center;
         .edit-icon {
@@ -50,7 +48,8 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         padding: 10px 15px;
-        margin-right: 60px;
+        width: 0 !important;
+        flex: 1;
       }
     }
     .code-comp-map-wrapper {
@@ -78,6 +77,11 @@
 .m-fields-code-select {
   width: 100%;
 }
+
+.el-dialog.is-fullscreen.code-editor-dialog {
+  overflow: hidden;
+}
+
 .code-editor-dialog {
   .el-dialog__body {
     height: 90%;
@@ -149,7 +153,7 @@
     position: absolute;
     top: 0;
     left: 4px;
-    width: 100%;
+    width: calc(100% - 9px);
     height: 100%;
     z-index: 10;
     background: #fff;
@@ -160,8 +164,16 @@
 
   .m-editor-wrapper {
     height: 100%;
+    &.fullScreen {
+      height: 100%;
+      width: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 100;
+    }
     .m-editor-container {
-      height: calc(100% - 65px);
+      height: calc(100% - 45px);
     }
     .m-editor-content-bottom {
       height: 45px;
@@ -174,7 +186,7 @@
       bottom: 0;
       > button {
         height: 30px;
-        margin-top: 15px;
+        margin-top: 5px;
       }
     }
   }

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

@@ -5,22 +5,25 @@ declare const _default: {
         $props: Partial<{
             minLeft: number;
             minRight: number;
+            minCenter: number;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
             left?: number | undefined;
             right?: number | undefined;
             minLeft?: number | undefined;
             minRight?: number | undefined;
+            minCenter?: number | undefined;
             leftClass?: string | undefined;
             rightClass?: string | undefined;
             centerClass?: string | undefined;
         }>, {
             minLeft: number;
             minRight: number;
+            minCenter: number;
         }>>> & {
             onChange?: ((...args: any[]) => any) | undefined;
             "onUpdate:left"?: ((...args: any[]) => any) | undefined;
             "onUpdate:right"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "minLeft" | "minRight">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "minLeft" | "minRight" | "minCenter">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -39,12 +42,14 @@ declare const _default: {
             right?: number | undefined;
             minLeft?: number | undefined;
             minRight?: number | undefined;
+            minCenter?: number | undefined;
             leftClass?: string | undefined;
             rightClass?: string | undefined;
             centerClass?: string | undefined;
         }>, {
             minLeft: number;
             minRight: number;
+            minCenter: number;
         }>>> & {
             onChange?: ((...args: any[]) => any) | undefined;
             "onUpdate:left"?: ((...args: any[]) => any) | undefined;
@@ -52,6 +57,7 @@ declare const _default: {
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:left" | "update:right")[], string, {
             minLeft: number;
             minRight: number;
+            minCenter: number;
         }> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -77,12 +83,14 @@ declare const _default: {
         right?: number | undefined;
         minLeft?: number | undefined;
         minRight?: number | undefined;
+        minCenter?: number | undefined;
         leftClass?: string | undefined;
         rightClass?: string | undefined;
         centerClass?: string | undefined;
     }>, {
         minLeft: number;
         minRight: number;
+        minCenter: number;
     }>>> & {
         onChange?: ((...args: any[]) => any) | undefined;
         "onUpdate:left"?: ((...args: any[]) => any) | undefined;
@@ -96,12 +104,14 @@ declare const _default: {
     right?: number | undefined;
     minLeft?: number | undefined;
     minRight?: number | undefined;
+    minCenter?: number | undefined;
     leftClass?: string | undefined;
     rightClass?: string | undefined;
     centerClass?: string | undefined;
 }>, {
     minLeft: number;
     minRight: number;
+    minCenter: number;
 }>>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:left"?: ((...args: any[]) => any) | undefined;
@@ -109,6 +119,7 @@ declare const _default: {
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:left" | "update:right")[], "change" | "update:left" | "update:right", {
     minLeft: number;
     minRight: number;
+    minCenter: number;
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         left: (_: {}) => any;

package/types/services/BaseService.d.ts

@@ -18,7 +18,7 @@ import { EventEmitter } from 'events';
  *
  *   editorService.usePlugin({
  *     beforeAdd(value) { return [value] },
- *     afterAdd(value, result) {},
+ *     afterAdd(result, value) { return result },
  *   });
  *
  *   editorService.add(); 最终会变成  () => {

package/types/services/codeBlock.d.ts

@@ -107,7 +107,7 @@ declare class CodeBlock extends BaseService {
     getCombineIds(): string[];
     /**
      * 刷新绑定关系
-     * @returns {void}
+     * @returns {CodeRelation | null}
      */
     refreshCombineInfo(): CodeRelation | null;
     /**