@tmagic/editor 1.3.0-beta.4 → 1.3.0-beta.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-beta.4",
+  "version": "1.3.0-beta.6",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -12,6 +12,7 @@
   "types": "types/index.d.ts",
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "import": "./dist/tmagic-editor.js",
       "require": "./dist/tmagic-editor.umd.cjs"
     },
@@ -46,13 +47,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-beta.4",
-    "@tmagic/design": "1.3.0-beta.4",
-    "@tmagic/form": "1.3.0-beta.4",
-    "@tmagic/schema": "1.3.0-beta.4",
-    "@tmagic/stage": "1.3.0-beta.4",
-    "@tmagic/table": "1.3.0-beta.4",
-    "@tmagic/utils": "1.3.0-beta.4",
+    "@tmagic/core": "1.3.0-beta.6",
+    "@tmagic/design": "1.3.0-beta.6",
+    "@tmagic/form": "1.3.0-beta.6",
+    "@tmagic/schema": "1.3.0-beta.6",
+    "@tmagic/stage": "1.3.0-beta.6",
+    "@tmagic/table": "1.3.0-beta.6",
+    "@tmagic/utils": "1.3.0-beta.6",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -64,8 +65,8 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-beta.4",
-    "@tmagic/form": "1.3.0-beta.4",
+    "@tmagic/design": "1.3.0-beta.6",
+    "@tmagic/form": "1.3.0-beta.6",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.4"
   },

package/src/components/Icon.vue

@@ -1,6 +1,8 @@
 <template>
   <TMagicIcon v-if="!icon" class="magic-editor-icon"><Edit></Edit></TMagicIcon>
-  <TMagicIcon v-else-if="typeof icon === 'string' && icon.startsWith('http')" class="magic-editor-icon"
+  <TMagicIcon
+    v-else-if="typeof icon === 'string' && (icon.startsWith('http') || isRelativePath(icon))"
+    class="magic-editor-icon"
     ><img :src="icon"
   /></TMagicIcon>
   <i v-else-if="typeof icon === 'string'" class="magic-editor-icon" :class="icon"></i>
@@ -20,4 +22,6 @@ defineOptions({
 defineProps<{
   icon?: any;
 }>();
+
+const isRelativePath = (str: string) => /^(\.|(\.\.)?\/)/.test(str);
 </script>

package/src/fields/CodeSelectCol.vue

@@ -6,6 +6,7 @@
         class="select"
         :config="selectConfig"
         :model="model"
+        :size="size"
         @change="onParamsChangeHandler"
       ></m-form-container>
       <!-- 查看/编辑按钮 -->
@@ -89,9 +90,7 @@ watch(
 
 const selectConfig = {
   type: 'select',
-  text: '代码块',
   name: props.name,
-  labelWidth: '80px',
   options: () => {
     if (codeDsl.value) {
       return map(codeDsl.value, (value, key) => ({

package/src/fields/DataSourceMethodSelect.vue

@@ -68,7 +68,6 @@ const getParamItemsConfig = ([dataSourceId, medthodName]: [Id, string] = ['', ''
   if (!paramStatements) return [];
 
   return paramStatements.map((paramState: CodeParamStatement) => ({
-    labelWidth: '100px',
     text: paramState.name,
     ...paramState,
   }));
@@ -106,9 +105,7 @@ const methodsOptions = computed(
 
 const cascaderConfig = computed(() => ({
   type: 'cascader',
-  text: '数据源方法',
   name: props.name,
-  labelWidth: '80px',
   options: methodsOptions.value,
   onChange: (formState: any, dataSourceMethod: [Id, string]) => {
     setParamsConfig(dataSourceMethod, formState);

package/src/fields/EventSelect.vue

@@ -22,6 +22,7 @@
         :size="size"
         :config="actionsConfig"
         :model="cardItem"
+        :label-width="config.labelWidth || '100px'"
         @change="onChangeHandler"
       >
         <template #header>
@@ -106,7 +107,6 @@ const actionTypeConfig = computed(() => {
   const defaultActionTypeConfig = {
     name: 'actionType',
     text: '联动类型',
-    labelWidth: '80px',
     type: 'select',
     defaultValue: ActionType.COMP,
     options: () => [
@@ -139,7 +139,6 @@ const targetCompConfig = computed(() => {
   const defaultTargetCompConfig = {
     name: 'to',
     text: '联动组件',
-    labelWidth: '80px',
     type: 'ui-select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
   };
@@ -151,7 +150,6 @@ const compActionConfig = computed(() => {
   const defaultCompActionConfig = {
     name: 'method',
     text: '动作',
-    labelWidth: '80px',
     type: 'select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
     options: (mForm: FormState, { model }: any) => {
@@ -171,7 +169,7 @@ const compActionConfig = computed(() => {
 const codeActionConfig = computed(() => {
   const defaultCodeActionConfig: CodeSelectColConfig = {
     type: 'code-select-col',
-    labelWidth: 0,
+    text: '代码块',
     name: 'codeId',
     disabled: () => !codeBlockService?.getEditStatus(),
     display: (mForm, { model }) => model.actionType === ActionType.CODE,
@@ -183,8 +181,8 @@ const codeActionConfig = computed(() => {
 const dataSourceActionConfig = computed(() => {
   const defaultDataSourceActionConfig: DataSourceMethodSelectConfig = {
     type: 'data-source-method-select',
+    text: '数据源方法',
     name: 'dataSourceMethod',
-    labelWidth: 0,
     display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
   };
   return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
@@ -235,6 +233,7 @@ const actionsConfig = computed(() => ({
       name: 'actions',
       expandAll: true,
       enableToggleMode: false,
+      titlePrefix: '动作',
       items: [
         actionTypeConfig.value,
         targetCompConfig.value,

package/src/fields/KeyValue.vue

@@ -91,5 +91,6 @@ const addHandler = () => {
 
 const deleteHandler = (index: number) => {
   records.value.splice(index, 1);
+  emit('change', getValue());
 };
 </script>

package/src/fields/UISelect.vue

@@ -49,7 +49,7 @@ import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import type { FieldProps, FormState } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
-import type { Services } from '@editor/type';
+import { Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
 
 defineOptions({
   name: 'MEditorUISelect',
@@ -68,7 +68,7 @@ const cancelHandler = () => {
   if (!services?.uiService) return;
   services.uiService.set('uiSelectMode', false);
   uiSelectMode.value = false;
-  globalThis.document.removeEventListener('ui-select', clickHandler as EventListener);
+  globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
 };
 
 const clickHandler = ({ detail }: Event & { detail: any }) => {
@@ -92,7 +92,7 @@ const startSelect = () => {
   if (!services?.uiService) return;
   services.uiService.set('uiSelectMode', true);
   uiSelectMode.value = true;
-  globalThis.document.addEventListener('ui-select', clickHandler as EventListener);
+  globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
 };
 
 const deleteHandler = () => {

package/src/hooks/use-stage.ts

@@ -5,7 +5,12 @@ import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData
 
 import editorService from '@editor/services/editor';
 import uiService from '@editor/services/ui';
-import { H_GUIDE_LINE_STORAGE_KEY, StageOptions, V_GUIDE_LINE_STORAGE_KEY } from '@editor/type';
+import {
+  H_GUIDE_LINE_STORAGE_KEY,
+  StageOptions,
+  UI_SELECT_MODE_EVENT_NAME,
+  V_GUIDE_LINE_STORAGE_KEY,
+} from '@editor/type';
 import { getGuideLineFromCache } from '@editor/utils/editor';
 
 const root = computed(() => editorService.get('root'));
@@ -30,7 +35,7 @@ export const useStage = (stageOptions: StageOptions) => {
       const elCanSelect = stageOptions.canSelect(el);
       // 在组件联动过程中不能再往下选择，返回并触发 ui-select
       if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') {
-        document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
+        document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: el }));
         return stop();
       }
 

package/src/layouts/CodeEditor.vue

@@ -47,6 +47,7 @@ const props = withDefaults(
     parse?: boolean;
   }>(),
   {
+    initValues: '',
     autoSave: true,
     language: 'javascript',
     options: () => ({

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -18,8 +18,9 @@
             @drag="dragHandler"
           >
             <slot name="component-list-item" :component="item">
-              <MIcon :title="item.text" :icon="item.icon"></MIcon>
-
+              <TMagicTooltip placement="right" :disabled="!Boolean(item.desc)" :content="item.desc">
+                <MIcon :icon="item.icon"></MIcon>
+              </TMagicTooltip>
               <span :title="item.text">{{ item.text }}</span>
             </slot>
           </div>
@@ -34,7 +35,7 @@ import { computed, inject, ref } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
 
-import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar } from '@tmagic/design';
+import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
 import { removeClassNameByClassName } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';

package/src/layouts/sidebar/layer/LayerNode.vue

@@ -62,7 +62,7 @@ import type { Id, MContainer, MNode } from '@tmagic/schema';
 import { isPage } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
-import type { LayerNodeSlots, LayerNodeStatus, Services } from '@editor/type';
+import { LayerNodeSlots, LayerNodeStatus, Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
 
 import LayerNodeTool from './LayerNodeTool.vue';
 import { useDrag } from './use-drag';
@@ -128,7 +128,7 @@ const nodeClickHandler = () => {
   if (!nodeStatusMap?.value) return;
 
   if (uiService?.get('uiSelectMode')) {
-    document.dispatchEvent(new CustomEvent('ui-select', { detail: props.data }));
+    document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: props.data }));
     return;
   }
 
@@ -145,8 +145,10 @@ const nodeClickHandler = () => {
 
 const contextmenuHandler = (event: MouseEvent) => {
   event.preventDefault();
-
-  nodeClickHandler();
+  const nodes = editorService?.get('nodes') || [];
+  if (nodes.length < 2 || !nodes.includes(props.data)) {
+    nodeClickHandler();
+  }
 
   emit('node-contextmenu', event, props.data);
 };
@@ -155,7 +157,7 @@ const nodeContentmenuHandler = (event: MouseEvent, node: MNode) => {
   emit('node-contextmenu', event, node);
 };
 
-// 触发画布单选
+// 触发画布选中
 const select = async (data: MNode) => {
   if (!data.id) {
     throw new Error('没有id');

package/src/layouts/sidebar/layer/LayerPanel.vue

@@ -4,7 +4,7 @@
 
     <SearchInput @search="filterTextChangeHandler"></SearchInput>
 
-    <div class="magic-editor-layer-tree" tabindex="-1" @dragover="handleDragOver">
+    <div class="magic-editor-layer-tree" ref="layerTreeContainer" tabindex="-1" @dragover="handleDragOver">
       <LayerNode
         v-if="page && root"
         :data="page"
@@ -52,11 +52,13 @@ defineProps<{
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
+const layerTreeContainer = ref<HTMLDivElement>();
+
 const page = computed(() => editorService?.get('page'));
 const root = computed(() => editorService?.get('root'));
 
 const { nodeStatusMap } = useNodeStatus(services, page);
-const { isCtrlKeyDown } = useKeybinding(services);
+const { isCtrlKeyDown } = useKeybinding(services, layerTreeContainer);
 
 provide('nodeStatusMap', nodeStatusMap);
 

package/src/layouts/sidebar/layer/use-keybinding.ts

@@ -1,8 +1,9 @@
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { type Ref, ref, watchEffect } from 'vue';
 
 import type { Services } from '@editor/type';
+import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
 
-export const useKeybinding = (services: Services | undefined) => {
+export const useKeybinding = (services: Services | undefined, contianer: Ref<HTMLDivElement | undefined>) => {
   const keybindingService = services?.keybindingService;
 
   // 是否多选
@@ -33,12 +34,14 @@ export const useKeybinding = (services: Services | undefined) => {
     },
   ]);
 
-  onMounted(() => {
-    globalThis.addEventListener('blur', windowBlurHandler);
-  });
-
-  onBeforeUnmount(() => {
-    globalThis.removeEventListener('blur', windowBlurHandler);
+  watchEffect(() => {
+    if (contianer.value) {
+      globalThis.addEventListener('blur', windowBlurHandler);
+      keybindingService?.registeEl(KeyBindingContainerKey.LAYER_PANEL, contianer.value);
+    } else {
+      globalThis.removeEventListener('blur', windowBlurHandler);
+      keybindingService?.unregisteEl(KeyBindingContainerKey.LAYER_PANEL);
+    }
   });
 
   return {

package/src/layouts/sidebar/layer/use-node-status.ts

@@ -82,17 +82,21 @@ export const useNodeStatus = (services: Services | undefined, page: ComputedRef<
 
   services?.editorService.on('add', (newNodes: MNode[]) => {
     newNodes.forEach((node) => {
-      nodeStatusMap.value?.set(node.id, {
-        visible: true,
-        expand: Array.isArray(node.items),
-        selected: true,
+      traverseNode(node, (node: MNode) => {
+        nodeStatusMap.value?.set(node.id, {
+          visible: true,
+          expand: Array.isArray(node.items),
+          selected: true,
+        });
       });
     });
   });
 
   services?.editorService.on('remove', (nodes: MNode[]) => {
     nodes.forEach((node) => {
-      nodeStatusMap.value?.delete(node.id);
+      traverseNode(node, (node: MNode) => {
+        nodeStatusMap.value?.delete(node.id);
+      });
     });
   });
 

package/src/layouts/workspace/viewer/Stage.vue

@@ -40,6 +40,7 @@ import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useStage } from '@editor/hooks/use-stage';
 import { DragType, Layout, type MenuButton, type MenuComponent, type Services, type StageOptions } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
+import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
 
 import NodeListMenu from './NodeListMenu.vue';
 import ViewerMenu from './ViewerMenu.vue';
@@ -131,7 +132,7 @@ const resizeObserver = new ResizeObserver((entries) => {
 onMounted(() => {
   if (stageWrap.value?.container) {
     resizeObserver.observe(stageWrap.value.container);
-    services?.keybindingService.registeEl('stage', stageWrap.value.container);
+    services?.keybindingService.registeEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
   }
 });
 

package/src/services/dataSource.ts

@@ -7,7 +7,7 @@ import type { DataSourceSchema } from '@tmagic/schema';
 import { guid } from '@tmagic/utils';
 
 import type { DatasourceTypeOption } from '@editor/type';
-import { getFormConfig } from '@editor/utils/data-source';
+import { getFormConfig, getFormValue } from '@editor/utils/data-source';
 
 import BaseService from './BaseService';
 
@@ -50,7 +50,7 @@ class DataSource extends BaseService {
   }
 
   public getFormValue(type = 'base') {
-    return this.get('values')[type];
+    return getFormValue(type, this.get('values')[type]);
   }
 
   public setFormValue(type: string, value: Partial<DataSourceSchema>) {

package/src/theme/event.scss

@@ -3,14 +3,12 @@
   .fullWidth {
     width: 100%;
   }
-  .m-form-panel .el-card__body {
-    padding: 10px 25px;
-  }
 
   .event-select-code {
     margin-left: 20px;
     width: auto;
   }
+
   .m-form-panel {
     margin: 10px 0px;
   }

package/src/theme/framework.scss

@@ -2,8 +2,6 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI,
-    Microsoft YaHei, sans-serif;
 
   &-content {
     height: calc(100% - #{$--nav-height});

package/src/theme/layer-panel.scss

@@ -11,6 +11,7 @@
 
     .magic-editor-layer-node {
       cursor: pointer;
+      white-space: nowrap;
 
       .layer-node {
         display: flex;
@@ -61,6 +62,9 @@
           .layer-node-label {
             line-height: $--node-height;
             flex: 1;
+            width: 100px;
+            overflow: hidden;
+            text-overflow: ellipsis;
           }
         }
 

package/src/type.ts

@@ -334,6 +334,8 @@ export interface SideBarData {
 export interface ComponentItem {
   /** 显示文案 */
   text: string;
+  /** 详情，用于tooltip */
+  desc?: string;
   /** 组件类型 */
   type: string;
   /** Vue组件或url */
@@ -467,6 +469,7 @@ export interface EventSelectConfig {
   name: string;
   type: 'event-select';
   src: 'datasource' | 'component';
+  labelWidth?: string;
   /** 事件名称表单配置 */
   eventNameConfig?: FormItem;
   /** 动作类型配置 */
@@ -539,6 +542,7 @@ export interface KeyBindingCacheItem {
 export interface CodeSelectColConfig {
   type: 'code-select-col';
   name: string;
+  text: string;
   labelWidth?: number | string;
   disabled?: boolean | FilterFunction;
   display?: boolean | FilterFunction;
@@ -547,6 +551,7 @@ export interface CodeSelectColConfig {
 export interface DataSourceMethodSelectConfig {
   type: 'data-source-method-select';
   name: string;
+  text: string;
   labelWidth?: number | string;
   disabled?: boolean | FilterFunction;
   display?: boolean | FilterFunction;
@@ -561,6 +566,7 @@ export interface DataSourceFieldSelectConfig {
   display?: boolean | FilterFunction;
 }
 
+/** 依赖收集的目标类型 */
 export enum DepTargetType {
   DEFAULT = 'default',
   /** 代码块 */
@@ -573,18 +579,31 @@ export enum DepTargetType {
   DATA_SOURCE_COND = 'data-source-cond',
 }
 
+/** 可新增的数据源类型选项 */
 export interface DatasourceTypeOption {
+  /** 数据源类型 */
   type: string;
+  /** 数据源名称 */
   text: string;
 }
 
+/** 组件树节点状态 */
 export interface LayerNodeStatus {
+  /** 显隐 */
   visible: boolean;
+  /** 展开子节点 */
   expand: boolean;
+  /** 选中 */
   selected: boolean;
 }
 
+/** 拖拽类型 */
 export enum DragType {
+  /** 从组件列表拖到画布 */
   COMPONENT_LIST = 'component-list',
+  /** 拖动组件树节点 */
   LAYER_TREE = 'layer-tree',
 }
+
+/** 当uiService.get('uiSelectMode')为true,点击组件（包括任何形式，组件树/画布）时触发的事件名 */
+export const UI_SELECT_MODE_EVENT_NAME = 'ui-select';