@tmagic/editor 1.3.0-alpha.12 → 1.3.0-alpha.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.12",
+  "version": "1.3.0-alpha.13",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,13 +46,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-alpha.12",
-    "@tmagic/design": "1.3.0-alpha.12",
-    "@tmagic/form": "1.3.0-alpha.12",
-    "@tmagic/schema": "1.3.0-alpha.12",
-    "@tmagic/stage": "1.3.0-alpha.12",
-    "@tmagic/table": "1.3.0-alpha.12",
-    "@tmagic/utils": "1.3.0-alpha.12",
+    "@tmagic/core": "1.3.0-alpha.13",
+    "@tmagic/design": "1.3.0-alpha.13",
+    "@tmagic/form": "1.3.0-alpha.13",
+    "@tmagic/schema": "1.3.0-alpha.13",
+    "@tmagic/stage": "1.3.0-alpha.13",
+    "@tmagic/table": "1.3.0-alpha.13",
+    "@tmagic/utils": "1.3.0-alpha.13",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -64,8 +64,8 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.12",
-    "@tmagic/form": "1.3.0-alpha.12",
+    "@tmagic/design": "1.3.0-alpha.13",
+    "@tmagic/form": "1.3.0-alpha.13",
     "monaco-editor": "^0.39.0",
     "vue": "^3.3.4"
   },

package/src/fields/UISelect.vue

@@ -2,12 +2,26 @@
   <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
     <TMagicButton type="danger" :icon="Delete" text style="padding: 0">取消</TMagicButton>
   </div>
-  <div class="m-fields-ui-select" v-else @click="startSelect" style="display: flex">
-    <TMagicTooltip v-if="val" content="清除">
-      <TMagicButton style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></TMagicButton>
-    </TMagicTooltip>
-    <TMagicTooltip :content="val ? toName + '_' + val : '点击此处选择'">
-      <TMagicButton text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</TMagicButton>
+  <div class="m-fields-ui-select" v-else style="display: flex">
+    <template v-if="val">
+      <TMagicTooltip content="清除" placement="top">
+        <TMagicButton style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></TMagicButton>
+      </TMagicTooltip>
+
+      <TMagicTooltip content="点击选中组件" placement="top">
+        <TMagicButton
+          text
+          style="padding: 0; margin: 0"
+          @click="selectNode(val)"
+          @mouseenter="highlight(val)"
+          @mouseleave="unhightlight"
+          >{{ `${toName}_${val}` }}</TMagicButton
+        >
+      </TMagicTooltip>
+    </template>
+
+    <TMagicTooltip v-else content="点击此处选择" placement="top">
+      <TMagicButton text style="padding: 0; margin: 0" @click="startSelect">点击此处选择</TMagicButton>
     </TMagicTooltip>
   </div>
 </template>
@@ -15,9 +29,11 @@
 <script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
+import { throttle } from 'lodash-es';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import { FormState } from '@tmagic/form';
+import type { Id } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 
@@ -77,6 +93,21 @@ const deleteHandler = () => {
     mForm?.$emit('field-change', props.prop, '');
   }
 };
+
+const selectNode = async (id: Id) => {
+  await services?.editorService.select(id);
+  services?.editorService.get('stage')?.select(id);
+};
+
+const highlight = throttle((id: Id) => {
+  services?.editorService.highlight(id);
+  services?.editorService.get('stage')?.highlight(id);
+}, 150);
+
+const unhightlight = () => {
+  services?.editorService.set('highlightNode', null);
+  services?.editorService.get('stage')?.clearHighlight();
+};
 </script>
 
 <style lang="scss">

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

@@ -59,7 +59,14 @@
 import { computed, inject, ref } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
-import { TMagicButton, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
+import {
+  TMagicButton,
+  tMagicMessage,
+  tMagicMessageBox,
+  TMagicScrollbar,
+  TMagicTooltip,
+  TMagicTree,
+} from '@tmagic/design';
 import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent, Id } from '@tmagic/schema';
 
@@ -141,11 +148,17 @@ const editCode = async (key: Id) => {
 };
 
 // 删除代码块
-const deleteCode = (key: Id) => {
+const deleteCode = async (key: Id) => {
   const currentCode = codeList.value.find((codeItem) => codeItem.id === key);
   const existBinds = Boolean(currentCode?.children.length);
   const undeleteableList = codeBlockService?.getUndeletableList() || [];
   if (!existBinds && !undeleteableList.includes(key)) {
+    await tMagicMessageBox.confirm('确定删除该代码块吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+
     // 无绑定关系，且不在不可删除列表中
     codeBlockService?.deleteCodeDslByIds([key]);
   } else {

package/src/services/codeBlock.ts

@@ -86,7 +86,7 @@ class CodeBlock extends BaseService {
    * @param {CodeBlockContent} codeConfig 代码块内容配置信息
    * @returns {void}
    */
-  public async setCodeDslById(id: Id, codeConfig: CodeBlockContent): Promise<void> {
+  public async setCodeDslById(id: Id, codeConfig: Partial<CodeBlockContent>): Promise<void> {
     const codeDsl = this.getCodeDsl();
 
     if (!codeDsl) {

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

@@ -70,9 +70,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
             class?: unknown;
             style?: unknown;
             readonly id: Id;
+            readonly content: string;
             readonly language?: string | undefined;
             readonly codeOptions?: Object | undefined;
-            readonly content: string;
             onClose?: ((...args: any[]) => any) | undefined;
             onSaveAndClose?: ((...args: any[]) => any) | undefined;
         };
@@ -98,16 +98,16 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            content: {
+                type: import("vue").PropType<string>;
+                required: true;
+            };
             language: {
                 type: import("vue").PropType<string>;
             };
             codeOptions: {
                 type: import("vue").PropType<Object>;
             };
-            content: {
-                type: import("vue").PropType<string>;
-                required: true;
-            };
             autoSaveDraft: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -151,16 +151,16 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        content: {
+            type: import("vue").PropType<string>;
+            required: true;
+        };
         language: {
             type: import("vue").PropType<string>;
         };
         codeOptions: {
             type: import("vue").PropType<Object>;
         };
-        content: {
-            type: import("vue").PropType<string>;
-            required: true;
-        };
         autoSaveDraft: {
             type: import("vue").PropType<boolean>;
             default: boolean;

package/types/services/codeBlock.d.ts

@@ -28,7 +28,7 @@ declare class CodeBlock extends BaseService {
      * @param {CodeBlockContent} codeConfig 代码块内容配置信息
      * @returns {void}
      */
-    setCodeDslById(id: Id, codeConfig: CodeBlockContent): Promise<void>;
+    setCodeDslById(id: Id, codeConfig: Partial<CodeBlockContent>): Promise<void>;
     /**
      * 根据代码块id数组获取代码dsl
      * @param {string[]} ids 代码块id数组