@tmagic/editor 1.3.8 → 1.3.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.8",
+  "version": "1.3.9",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -42,16 +42,17 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.3.8",
-    "@tmagic/dep": "1.3.8",
-    "@tmagic/design": "1.3.8",
-    "@tmagic/form": "1.3.8",
-    "@tmagic/schema": "1.3.8",
-    "@tmagic/stage": "1.3.8",
-    "@tmagic/table": "1.3.8",
-    "@tmagic/utils": "1.3.8",
+    "@tmagic/core": "1.3.9",
+    "@tmagic/dep": "1.3.9",
+    "@tmagic/design": "1.3.9",
+    "@tmagic/form": "1.3.9",
+    "@tmagic/schema": "1.3.9",
+    "@tmagic/stage": "1.3.9",
+    "@tmagic/table": "1.3.9",
+    "@tmagic/utils": "1.3.9",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
+    "emmet-monaco-es": "^5.3.0",
     "events": "^3.3.0",
     "gesto": "^1.19.1",
     "keycon": "^1.4.0",
@@ -62,8 +63,8 @@
     "vue": "^3.3.8"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.8",
-    "@tmagic/form": "1.3.8",
+    "@tmagic/design": "1.3.9",
+    "@tmagic/form": "1.3.9",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.8"
   },

package/src/layouts/CodeEditor.vue

@@ -22,12 +22,12 @@
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
-import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
 import { TMagicButton } from '@tmagic/design';
 
 import { getConfig } from '@editor/utils/config';
+import monaco from '@editor/utils/monaco-editor';
 
 defineOptions({
   name: 'MEditorCodeEditor',

package/src/services/editor.ts

@@ -775,17 +775,23 @@ class Editor extends BaseService {
     const layout = await this.getLayout(parent, node);
     const isRelative = layout === Layout.RELATIVE;
 
-    brothers.splice(index, 1);
-
+    let offsetIndex: number;
     if (offset === LayerOffset.TOP) {
-      brothers.splice(isRelative ? 0 : brothers.length, 0, node);
+      offsetIndex = isRelative ? 0 : brothers.length;
     } else if (offset === LayerOffset.BOTTOM) {
-      brothers.splice(isRelative ? brothers.length : 0, 0, node);
+      offsetIndex = isRelative ? brothers.length : 0;
     } else {
-      brothers.splice(index + (isRelative ? -offset : offset), 0, node);
+      offsetIndex = index + (isRelative ? -offset : offset);
     }
 
+    if ((offsetIndex > 0 && offsetIndex > brothers.length) || offsetIndex < 0) {
+      return;
+    }
+    brothers.splice(index, 1);
+    brothers.splice(offsetIndex, 0, node);
+
     const grandparent = this.getParentById(parent.id);
+
     this.get('stage')?.update({
       config: cloneDeep(toRaw(parent)),
       parentId: grandparent?.id,
@@ -794,6 +800,8 @@ class Editor extends BaseService {
 
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
+
+    this.emit('move-layer', offset);
   }
 
   /**

package/src/services/props.ts

@@ -17,12 +17,12 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep, get, mergeWith, set } from 'lodash-es';
+import { cloneDeep, mergeWith } from 'lodash-es';
 
 import { DepTargetType } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MComponent, MNode } from '@tmagic/schema';
-import { guid, toLine } from '@tmagic/utils';
+import { getValueByKeyPath, guid, setValueByKeyPath, toLine } from '@tmagic/utils';
 
 import depService from '@editor/services/dep';
 import editorService from '@editor/services/editor';
@@ -194,17 +194,22 @@ class Props extends BaseService {
   public replaceRelateId(originConfigs: MNode[], targetConfigs: MNode[]) {
     const relateIdMap = this.getRelateIdMap();
     if (Object.keys(relateIdMap).length === 0) return;
+
     const target = depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY);
     if (!target) return;
+
     originConfigs.forEach((config: MNode) => {
       const newId = relateIdMap[config.id];
       const targetConfig = targetConfigs.find((targetConfig) => targetConfig.id === newId);
+
       if (!targetConfig) return;
+
       target.deps[config.id]?.keys?.forEach((fullKey) => {
-        const relateOriginId = get(config, fullKey);
+        const relateOriginId = getValueByKeyPath(fullKey, config);
         const relateTargetId = relateIdMap[relateOriginId];
         if (!relateTargetId) return;
-        set(targetConfig, fullKey, relateTargetId);
+
+        setValueByKeyPath(fullKey, relateTargetId, targetConfig);
       });
     });
   }

package/src/utils/monaco-editor.ts

@@ -0,0 +1,8 @@
+import { emmetCSS, emmetHTML } from 'emmet-monaco-es';
+import * as monaco from 'monaco-editor';
+
+// 注册emmet插件
+emmetHTML(monaco);
+emmetCSS(monaco, ['css', 'scss']);
+
+export default monaco;

package/types/layouts/CodeEditor.vue.d.ts

@@ -1,4 +1,4 @@
-import * as monaco from 'monaco-editor';
+import monaco from '../utils/monaco-editor';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     initValues?: any;
     modifiedValues?: any;

package/types/utils/monaco-editor.d.ts

@@ -0,0 +1,2 @@
+import * as monaco from 'monaco-editor';
+export default monaco;