@tmagic/editor 1.3.0-alpha.8 → 1.3.0-alpha.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.8",
+  "version": "1.3.0-alpha.9",
   "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.8",
-    "@tmagic/design": "1.3.0-alpha.8",
-    "@tmagic/form": "1.3.0-alpha.8",
-    "@tmagic/schema": "1.3.0-alpha.8",
-    "@tmagic/stage": "1.3.0-alpha.8",
-    "@tmagic/table": "1.3.0-alpha.8",
-    "@tmagic/utils": "1.3.0-alpha.8",
+    "@tmagic/core": "1.3.0-alpha.9",
+    "@tmagic/design": "1.3.0-alpha.9",
+    "@tmagic/form": "1.3.0-alpha.9",
+    "@tmagic/schema": "1.3.0-alpha.9",
+    "@tmagic/stage": "1.3.0-alpha.9",
+    "@tmagic/table": "1.3.0-alpha.9",
+    "@tmagic/utils": "1.3.0-alpha.9",
     "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.8",
-    "@tmagic/form": "1.3.0-alpha.8",
+    "@tmagic/design": "1.3.0-alpha.9",
+    "@tmagic/form": "1.3.0-alpha.9",
     "monaco-editor": "^0.39.0",
     "vue": "^3.3.4"
   },

package/src/components/FunctionEditor.vue

@@ -49,7 +49,7 @@ defineOptions({
   name: 'MEditorFunctionEditor',
 });
 
-provide('mForm', {});
+provide('mForm', null);
 
 const defaultParamColConfig: ColumnConfig = {
   type: 'row',

package/src/fields/DataSourceSelect.vue

@@ -0,0 +1,75 @@
+<template>
+  <MSelect
+    :model="model"
+    :name="name"
+    :size="size"
+    :prop="prop"
+    :disabled="disabled"
+    :config="selectConfig"
+    :last-values="lastValues"
+    @change="changeHandler"
+  ></MSelect>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { FieldSize } from '@tmagic/design';
+import { MSelect, SelectConfig } from '@tmagic/form';
+
+import { Services } from '../type';
+
+defineOptions({
+  name: 'MEditorDataSourceSelect',
+});
+
+const emit = defineEmits(['change']);
+
+const props = withDefaults(
+  defineProps<{
+    config: {
+      type: 'data-source-select';
+      name: string;
+      text: string;
+      placeholder: string;
+      dataSourceType?: string;
+    };
+    model: Record<string, any>;
+    name: string;
+    prop: string;
+    disabled: boolean;
+    lastValues?: Record<string, any>;
+    size?: FieldSize;
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const { dataSourceService } = inject<Services>('services') || {};
+
+const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+
+const selectConfig = computed<SelectConfig>(() => {
+  const { type, dataSourceType, ...config } = props.config;
+  return {
+    ...config,
+    type: 'select',
+    valueKey: 'dataSourceId',
+    options: dataSources.value
+      .filter((ds) => !dataSourceType || ds.type === dataSourceType)
+      .map((ds) => ({
+        value: {
+          isBindDataSource: true,
+          dataSourceType: ds.type,
+          dataSourceId: ds.id,
+        },
+        text: ds.title || ds.id,
+      })),
+  };
+});
+
+const changeHandler = (value: any) => {
+  emit('change', value);
+};
+</script>

package/src/index.ts

@@ -23,6 +23,7 @@ import CodeSelect from './fields/CodeSelect.vue';
 import CodeSelectCol from './fields/CodeSelectCol.vue';
 import DataSourceFields from './fields/DataSourceFields.vue';
 import DataSourceInput from './fields/DataSourceInput.vue';
+import DataSourceSelect from './fields/DataSourceSelect.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
 import uiSelect from './fields/UISelect.vue';
@@ -53,6 +54,7 @@ export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
 export { default as DataSourceFields } from './fields/DataSourceFields.vue';
 export { default as DataSourceInput } from './fields/DataSourceInput.vue';
+export { default as DataSourceSelect } from './fields/DataSourceSelect.vue';
 export { default as EventSelect } from './fields/EventSelect.vue';
 export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
@@ -87,5 +89,6 @@ export default {
     app.component('m-fields-data-source-fields', DataSourceFields);
     app.component('m-fields-key-value', KeyValue);
     app.component('m-fields-data-source-input', DataSourceInput);
+    app.component('m-fields-data-source-select', DataSourceSelect);
   },
 };

package/src/initService.ts

@@ -236,18 +236,22 @@ export const initServiceEvents = (
     }
   };
 
+  // 新增节点，收集依赖
   const nodeAddHandler = (nodes: MNode[]) => {
     depService.collect(nodes);
   };
 
+  // 节点更新，收集依赖
   const nodeUpdateHandler = (nodes: MNode[]) => {
     depService.collect(nodes);
   };
 
+  // 节点删除，清除对齐的依赖收集
   const nodeRemoveHandler = (nodes: MNode[]) => {
     depService.clear(nodes);
   };
 
+  // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage) => {
     depService.collect([page], true);
   };

package/src/layouts/CodeEditor.vue

@@ -37,10 +37,14 @@ const emit = defineEmits(['initd', 'save']);
 const toString = (v: string | any, language: string): string => {
   let value = '';
   if (typeof v !== 'string') {
-    value = serialize(v, {
-      space: 2,
-      unsafe: true,
-    }).replace(/"(\w+)":\s/g, '$1: ');
+    if (props.language.toLocaleLowerCase() === 'json') {
+      value = JSON.stringify(v, null, 2);
+    } else {
+      value = serialize(v, {
+        space: 2,
+        unsafe: true,
+      }).replace(/"(\w+)":\s/g, '$1: ');
+    }
   } else {
     value = v;
   }
@@ -81,7 +85,7 @@ const setEditorValue = (v: string | any, m: string | any) => {
 };
 
 const getEditorValue = () =>
-  props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
+  (props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || '';
 
 const init = async () => {
   if (!codeEditor.value) return;
@@ -109,13 +113,19 @@ const init = async () => {
     if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
       e.preventDefault();
       e.stopPropagation();
-      emit('save', getEditorValue());
+      const newValue = getEditorValue();
+      values.value = newValue;
+      emit('save', newValue);
     }
   });
 
   if (props.type !== 'diff' && props.autoSave) {
     vsEditor?.onDidBlurEditorWidget(() => {
-      emit('save', getEditorValue());
+      const newValue = getEditorValue();
+      if (values.value !== newValue) {
+        values.value = newValue;
+        emit('save', newValue);
+      }
     });
   }
 
@@ -146,10 +156,20 @@ onUnmounted(() => {
 });
 
 defineExpose({
+  values,
+
   getEditor() {
     return vsEditor || vsDiffEditor;
   },
 
+  getVsEditor() {
+    return vsEditor;
+  },
+
+  getVsDiffEditor() {
+    return vsDiffEditor;
+  },
+
   setEditorValue,
 
   focus() {

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -83,14 +83,13 @@ const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
 
 const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {
   if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData(
-      'data',
+      'text/html',
       serialize({
         name: text,
         type,
         ...data,
-      }).replace(/"(\w+)":\s/g, '$1: '),
+      }),
     );
   }
 };
@@ -121,6 +120,6 @@ const dragHandler = (e: DragEvent) => {
 
   if (timeout || !stage.value) return;
 
-  timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+  timeout = stage.value.delayedMarkContainer(e);
 };
 </script>

package/src/layouts/sidebar/LayerNode.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    {{ `${data.name} (${data.id})` }}
+  </div>
+  <div class="layer-node-tool">
+    <template v-if="data.type !== 'page'">
+      <el-icon v-if="data.visible === false" @click.stop="setNodeVisible(true)" title="点击显示">
+        <Hide />
+      </el-icon>
+      <el-icon v-else @click.stop="setNodeVisible(false)" class="node-lock" title="点击隐藏">
+        <View />
+      </el-icon>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue';
+import { Hide, View } from '@element-plus/icons-vue';
+
+import { MNode } from '@tmagic/schema';
+
+import { Services } from '@editor/type';
+
+const props = defineProps<{
+  data: MNode;
+}>();
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const setNodeVisible = (visible: boolean) => {
+  if (!editorService) return;
+
+  editorService.update({
+    id: props.data.id,
+    visible,
+  });
+};
+</script>

package/src/layouts/sidebar/LayerPanel.vue

@@ -35,9 +35,7 @@
       <template #default="{ node, data }">
         <div class="cus-tree-node" :id="data.id" @mouseenter="highlightHandler(data)">
           <slot name="layer-node-content" :node="node" :data="data">
-            <span>
-              {{ `${data.name} (${data.id})` }}
-            </span>
+            <LayerNode :data="data"></LayerNode>
           </slot>
         </div>
       </template>
@@ -63,6 +61,7 @@ import type { MenuButton, MenuComponent, Services } from '@editor/type';
 import { Layout } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
+import LayerNode from './LayerNode.vue';
 
 defineOptions({
   name: 'MEditorLayerPanel',

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -15,6 +15,7 @@
       :expand-on-click-node="false"
       :data="list"
       :highlight-current="true"
+      @node-click="clickHandler"
     >
       <template #default="{ data }">
         <div :id="data.id" class="list-container">
@@ -53,7 +54,7 @@ import { computed, inject, ref } from 'vue';
 import { Aim, Close, Coin, Edit } from '@element-plus/icons-vue';
 
 import { TMagicButton, tMagicMessageBox, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
-import { DataSourceSchema } from '@tmagic/schema';
+import { DataSourceSchema, Id } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
@@ -66,7 +67,7 @@ defineOptions({
 });
 
 const services = inject<Partial<Services>>('services', {});
-const { dataSourceService, depService } = inject<Services>('services') || {};
+const { dataSourceService, depService, editorService } = inject<Services>('services') || {};
 
 const list = computed(() =>
   Object.values(depService?.targets['data-source'] || {}).map((target) => ({
@@ -131,4 +132,19 @@ const tree = ref<InstanceType<typeof TMagicTree>>();
 const filterTextChangeHandler = (val: string) => {
   tree.value?.filter(val);
 };
+
+// 选中组件
+const selectComp = (compId: Id) => {
+  const stage = editorService?.get('stage');
+  editorService?.select(compId);
+  stage?.select(compId);
+};
+
+const clickHandler = (data: any, node: any) => {
+  if (data.type === 'node') {
+    selectComp(data.id);
+  } else if (data.type === 'key') {
+    selectComp(node.parent.data.id);
+  }
+};
 </script>

package/src/layouts/workspace/Stage.vue

@@ -146,9 +146,8 @@ const contextmenuHandler = (e: MouseEvent) => {
 
 const dragoverHandler = (e: DragEvent) => {
   e.preventDefault();
-  if (e.dataTransfer) {
-    e.dataTransfer.dropEffect = 'move';
-  }
+  if (!e.dataTransfer) return;
+  e.dataTransfer.dropEffect = 'move';
 };
 
 const dropHandler = async (e: DragEvent) => {
@@ -164,7 +163,15 @@ const dropHandler = async (e: DragEvent) => {
 
   if (e.dataTransfer && parent && stageContainer.value && stage) {
     const parseDSL = getConfig('parseDSL');
-    const config = parseDSL(`(${e.dataTransfer.getData('data')})`);
+
+    const data = e.dataTransfer.getData('text/html');
+
+    if (!data) return;
+
+    const config = parseDSL(`(${data})`);
+
+    if (!config) return;
+
     const layout = await services?.editorService.getLayout(parent);
 
     const containerRect = stageContainer.value.getBoundingClientRect();

package/src/services/dep.ts

@@ -262,6 +262,7 @@ export class Watcher extends EventEmitter {
     Object.values(this.targets).forEach((targets) => {
       Object.values(targets).forEach((target) => {
         nodes.forEach((node) => {
+          // 先删除原有依赖，重新收集
           target.removeDep(node);
           this.collectItem(node, target, deep);
         });

package/src/theme/layer-panel.scss

@@ -44,6 +44,12 @@
 .magic-editor-layer-panel .cus-tree-node {
   width: 100%;
   overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+
+  .layer-node-tool {
+    margin-right: 15px;
+  }
 }
 
 .magic-editor-layer-panel .cus-tree-node-hover {

package/src/utils/dep.ts

@@ -11,6 +11,10 @@ export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
     id,
     name: codeBlock.name,
     isTarget: (key: string | number, value: any) => {
+      if (id === value) {
+        return true;
+      }
+
       if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
         const index = value.hookData.findIndex((item: HookData) => item.codeId === id);
         return Boolean(index > -1);
@@ -25,5 +29,7 @@ export const createDataSourceTarget = (id: Id, ds: DataSourceSchema) =>
     type: 'data-source',
     id,
     name: ds.title || `${id}`,
-    isTarget: (key: string | number, value: any) => typeof value === 'string' && value.includes(`${id}`),
+    isTarget: (key: string | number, value: any) =>
+      // 关联数据源对象或者在模板在使用数据源
+      (value.isBindDataSource && value.dataSourceId) || (typeof value === 'string' && value.includes(`${id}`)),
   });

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

@@ -116,6 +116,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
             onClose?: ((...args: any[]) => any) | undefined;
             onSaveAndClose?: ((...args: any[]) => any) | undefined;
         }, {
+            /** 代码块id */
             saveAndClose: () => void;
             close: () => Promise<void>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "saveAndClose")[], string, {
@@ -168,6 +169,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         onClose?: ((...args: any[]) => any) | undefined;
         onSaveAndClose?: ((...args: any[]) => any) | undefined;
     } & import("vue").ShallowUnwrapRef<{
+        /** 代码块id */
         saveAndClose: () => void;
         close: () => Promise<void>;
     }> & {} & import("vue").ComponentCustomProperties & {}) | undefined>;

package/types/fields/DataSourceSelect.vue.d.ts

@@ -0,0 +1,56 @@
+import { FieldSize } from '@tmagic/design';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config: {
+        type: "data-source-select";
+        name: string;
+        text: string;
+        placeholder: string;
+        dataSourceType?: string | undefined;
+    };
+    model: Record<string, any>;
+    name: string;
+    prop: string;
+    disabled: boolean;
+    lastValues?: Record<string, any> | undefined;
+    size?: FieldSize | undefined;
+}>, {
+    disabled: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config: {
+        type: "data-source-select";
+        name: string;
+        text: string;
+        placeholder: string;
+        dataSourceType?: string | undefined;
+    };
+    model: Record<string, any>;
+    name: string;
+    prop: string;
+    disabled: boolean;
+    lastValues?: Record<string, any> | undefined;
+    size?: FieldSize | undefined;
+}>, {
+    disabled: boolean;
+}>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/index.d.ts

@@ -21,6 +21,7 @@ export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
 export { default as DataSourceFields } from './fields/DataSourceFields.vue';
 export { default as DataSourceInput } from './fields/DataSourceInput.vue';
+export { default as DataSourceSelect } from './fields/DataSourceSelect.vue';
 export { default as EventSelect } from './fields/EventSelect.vue';
 export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';

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

@@ -15,7 +15,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         tabSize: number;
     };
 }>, {
+    values: import("vue").Ref<string>;
     getEditor(): monaco.editor.IStandaloneCodeEditor | monaco.editor.IStandaloneDiffEditor | null;
+    getVsEditor(): monaco.editor.IStandaloneCodeEditor | null;
+    getVsDiffEditor(): monaco.editor.IStandaloneDiffEditor | null;
     setEditorValue: (v: any, m: any) => void | undefined;
     focus(): void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("initd" | "save")[], "initd" | "save", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{

package/types/layouts/sidebar/LayerNode.vue.d.ts

@@ -0,0 +1,16 @@
+import { MNode } from '@tmagic/schema';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    data: MNode;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    data: MNode;
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};