@tmagic/editor 1.3.0-alpha.1 → 1.3.0-alpha.3

package/src/fields/DataSourceInput.vue

@@ -0,0 +1,357 @@
+<template>
+  <component
+    v-if="disabled || isFocused"
+    :is="getConfig('components')?.autocomplete.component || 'el-autocomplete'"
+    class="tmagic-design-auto-complete"
+    ref="autocomplete"
+    v-model="state"
+    v-bind="
+      getConfig('components')?.autocomplete.props({
+        disabled,
+        size,
+        fetchSuggestions: querySearch,
+        triggerOnFocus: false,
+        clearable: true,
+      }) || {}
+    "
+    style="width: 100%"
+    @blur="blurHandler"
+    @change="changeHandler"
+    @input="inputHandler"
+    @select="selectHandler"
+  >
+    <template #suffix>
+      <Icon :icon="Coin" />
+    </template>
+    <template #default="{ item }">
+      <div style="display: flex; flex-direction: column; line-height: 1.2em">
+        <div>{{ item.text }}</div>
+        <span style="font-size: 10px; color: rgba(0, 0, 0, 0.6)">{{ item.value }}</span>
+      </div>
+    </template>
+  </component>
+  <div :class="`el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
+    <div :class="`el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
+      <div class="el-input__inner">
+        <template v-for="(item, index) in displayState">
+          <span :key="index" v-if="item.type === 'text'" style="margin-right: 2px">{{ item.value }}</span>
+          <TMagicTag :key="index" :size="size" v-if="item.type === 'var'">{{ item.value }}</TMagicTag>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, nextTick, ref, watch } from 'vue';
+import { Coin } from '@element-plus/icons-vue';
+
+import { FieldSize, getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorDataSourceInput',
+});
+
+const props = withDefaults(
+  defineProps<{
+    config: {
+      type: 'data-source-input';
+      name: string;
+      text: string;
+    };
+    model: Record<string, any>;
+    name: string;
+    prop: string;
+    disabled: boolean;
+    lastValues?: Record<string, any>;
+    size?: FieldSize;
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<(e: 'change', value: string) => void>();
+
+const { dataSourceService } = inject<Services>('services') || {};
+
+const autocomplete = ref<InstanceType<typeof TMagicAutocomplete>>();
+const isFocused = ref(false);
+const state = ref('');
+const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);
+
+const input = computed<HTMLInputElement>(() => autocomplete.value?.inputRef?.input);
+const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+
+const setDisplayState = () => {
+  displayState.value = [];
+
+  const matches = state.value.matchAll(/\{\{([\s\S]+?)\}\}/g);
+  let index = 0;
+  for (const match of matches) {
+    if (typeof match.index === 'undefined') break;
+
+    displayState.value.push({
+      type: 'text',
+      value: state.value.substring(index, match.index),
+    });
+
+    let dsText = '';
+    let ds: DataSourceSchema | undefined;
+    let fields: DataSchema[] | undefined;
+
+    match[1].split('.').forEach((item, index) => {
+      if (index === 0) {
+        ds = dataSources.value.find((ds) => ds.id === item);
+        dsText += ds?.title || item;
+        fields = ds?.fields;
+        return;
+      }
+
+      const field = fields?.find((field) => field.name === item);
+      fields = field?.fields;
+      dsText += `.${field?.title || item}`;
+    });
+
+    displayState.value.push({
+      type: 'var',
+      value: dsText,
+    });
+
+    index = match.index + match[0].length;
+  }
+
+  if (index < state.value.length) {
+    displayState.value.push({
+      type: 'text',
+      value: state.value.substring(index),
+    });
+  }
+};
+
+watch(
+  () => props.model[props.name],
+  (value = '') => {
+    state.value = value;
+
+    setDisplayState();
+  },
+  { immediate: true },
+);
+
+const mouseupHandler = async () => {
+  isFocused.value = true;
+  await nextTick();
+  autocomplete.value?.focus();
+};
+
+const blurHandler = () => {
+  isFocused.value = false;
+
+  setDisplayState();
+};
+
+const changeHandler = (v: string) => {
+  emit('change', v);
+};
+
+let inputText = '';
+
+const inputHandler = (v: string) => {
+  if (!v) {
+    inputText = v;
+  }
+};
+
+/**
+ * 光标位置是不是}
+ * @param selectionStart 光标位置
+ */
+const isRightCurlyBracket = (selectionStart = 0) => {
+  const lastChar = inputText.substring(selectionStart - 1, selectionStart);
+  return lastChar === '}';
+};
+
+/**
+ * 获取光标位置
+ */
+const getSelectionStart = () => {
+  let selectionStart = input.value?.selectionStart || 0;
+
+  // 输入法可能会自动补全}，如果当前光标前面一个字符是}，则光标前移一位
+  if (isRightCurlyBracket(selectionStart)) {
+    selectionStart -= 1;
+  }
+
+  return selectionStart;
+};
+
+/**
+ * 当前输入的是{
+ * @param leftCurlyBracketIndex {字符索引
+ */
+const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex: number) =>
+  leftCurlyBracketIndex > -1 && leftCurlyBracketIndex === getSelectionStart() - 1;
+
+/**
+ * 当前输入的是.
+ * @param leftCurlyBracketIndex .字符索引
+ */
+const curCharIsDot = (dotIndex: number) => dotIndex > -1 && dotIndex === getSelectionStart() - 1;
+
+/**
+ * @param leftCurlyBracketIndex 左大括号字符索引
+ * @param cb 建议的方法
+ */
+const dsQuerySearch = (queryString: string, leftCurlyBracketIndex: number, cb: (data: { value: string }[]) => void) => {
+  let result: DataSourceSchema[] = [];
+
+  if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
+    // 当前输入的是{
+    result = dataSources.value;
+  } else if (leftCurlyBracketIndex > -1) {
+    // 当前输入的是{xx
+    const queryName = queryString.substring(leftCurlyBracketIndex + 1).toLowerCase();
+    result = dataSources.value.filter((ds) => ds.title?.toLowerCase().includes(queryName) || ds.id.includes(queryName));
+  }
+
+  cb(
+    result.map((ds) => ({
+      value: ds.id,
+      text: ds.title,
+      type: 'dataSource',
+    })),
+  );
+};
+
+/**
+ * 字段提示
+ * @param queryString 当前输入框内的字符串
+ * @param leftAngleIndex {字符索引
+ * @param dotIndex .字符索引
+ * @param cb 建议回调
+ */
+const fieldQuerySearch = (
+  queryString: string,
+  leftAngleIndex: number,
+  dotIndex: number,
+  cb: (data: { value: string }[]) => void,
+) => {
+  let result: DataSchema[] = [];
+
+  const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
+  // 可能是xx.xx.xx，存在链式调用
+  const keys = dsKey.split('.');
+  // 最前的是数据源id
+  const ds = dataSources.value.find((ds) => ds.id === keys.shift());
+  if (!ds) {
+    return;
+  }
+
+  let fields = ds.fields || [];
+
+  // 后面这些事字段
+  let key = keys.shift();
+  while (key) {
+    for (const field of fields) {
+      if (field.name === key) {
+        fields = field.fields || [];
+        key = keys.shift();
+        break;
+      }
+    }
+  }
+
+  if (curCharIsDot(dotIndex)) {
+    // 当前输入的是.
+    result = fields || [];
+  } else if (dotIndex > -1) {
+    const queryName = queryString.substring(dotIndex + 1).toLowerCase();
+    result =
+      fields.filter(
+        (field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName),
+      ) || [];
+  }
+
+  cb(
+    result.map((field) => ({
+      value: field.name,
+      text: field.title,
+      type: 'field',
+    })),
+  );
+};
+
+/**
+ * 数据源提示
+ * @param queryString 当前输入框内的字符串
+ * @param cb 建议回调
+ */
+const querySearch = (queryString: string, cb: (data: { value: string }[]) => void) => {
+  inputText = queryString;
+
+  const selectionStart = getSelectionStart();
+
+  const curQueryString = queryString.substring(0, selectionStart);
+
+  const fieldKeyStringLastIndex = curQueryString.lastIndexOf('.');
+  const dsKeyStringLastIndex = curQueryString.lastIndexOf('{');
+
+  const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
+
+  if (isFieldTip) {
+    fieldQuerySearch(curQueryString, dsKeyStringLastIndex, fieldKeyStringLastIndex, cb);
+  } else {
+    dsQuerySearch(curQueryString, dsKeyStringLastIndex, cb);
+  }
+};
+
+/**
+ * 选择建议
+ * @param value 建议值
+ * @param type 建议类型，是数据源还是字段
+ */
+const selectHandler = async ({ value, type }: { value: string; type: 'dataSource' | 'field' }) => {
+  const isDataSource = type === 'dataSource';
+  const selectionStart = input.value?.selectionStart || 0;
+  let startText = inputText.substring(0, selectionStart);
+
+  const dotIndex = startText.lastIndexOf('.');
+  const leftCurlyBracketIndex = startText.lastIndexOf('{');
+
+  const endText = inputText.substring(selectionStart);
+
+  let suggestText = value;
+
+  if (isDataSource) {
+    if (!curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
+      startText = startText.substring(0, leftCurlyBracketIndex + 1);
+    }
+
+    // 当前光标后一位是否为}，不是的话需要补上
+    if (!isRightCurlyBracket(selectionStart + 1)) {
+      suggestText = `${suggestText}}`;
+    }
+    suggestText = `{${suggestText}}`;
+  } else if (!curCharIsDot(dotIndex)) {
+    startText = startText.substring(0, dotIndex + 1);
+  }
+
+  state.value = `${startText}${suggestText}${endText}`;
+
+  await nextTick();
+
+  // 由于选择数据源时会在后面补全}}, 所以光标要前移2位
+  let newSelectionStart = 0;
+  if (isDataSource) {
+    newSelectionStart = leftCurlyBracketIndex + suggestText.length - 1;
+  } else {
+    newSelectionStart = dotIndex + suggestText.length + 1;
+  }
+  input.value?.setSelectionRange(newSelectionStart, newSelectionStart);
+};
+</script>

package/src/fields/EventSelect.vue

@@ -33,8 +33,8 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorEventSelect">
-import { computed, defineProps, inject } from 'vue';
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
 import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
@@ -44,7 +44,9 @@ import { ActionType } from '@tmagic/schema';
 
 import type { EventSelectConfig, Services } from '@editor/type';
 
-const services = inject<Services>('services');
+defineOptions({
+  name: 'MEditorEventSelect',
+});
 
 const props = defineProps<{
   config: EventSelectConfig;
@@ -53,8 +55,11 @@ const props = defineProps<{
   name: string;
   size: 'small' | 'default' | 'large';
 }>();
+
 const emit = defineEmits(['change']);
 
+const services = inject<Services>('services');
+
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
   const defaultEventNameConfig = {

package/src/fields/KeyValue.vue

@@ -38,6 +38,10 @@ import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
 
+defineOptions({
+  name: 'MEditorKeyValue',
+});
+
 const props = withDefaults(
   defineProps<{
     config: {

package/src/fields/UISelect.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorUISelect">
+<script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
 
@@ -21,6 +21,10 @@ import { FormState } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorUISelect',
+});
+
 const props = defineProps<{
   config: any;
   model: any;

package/src/icons/AppManageIcon.vue

@@ -8,4 +8,8 @@
   </svg>
 </template>
 
-<script lang="ts" setup name="MEditorAppManageIcon"></script>
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorAppManageIcon',
+});
+</script>

package/src/icons/CodeIcon.vue

@@ -23,4 +23,8 @@
   </svg>
 </template>
 
-<script lang="ts" setup name="MEditorCodeIcon"></script>
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorCodeIcon',
+});
+</script>

package/src/index.ts

@@ -22,6 +22,7 @@ import CodeLink from './fields/CodeLink.vue';
 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 EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
 import uiSelect from './fields/UISelect.vue';
@@ -51,6 +52,7 @@ export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 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 EventSelect } from './fields/EventSelect.vue';
 export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
@@ -81,5 +83,6 @@ export default {
     app.component('m-fields-event-select', EventSelect);
     app.component('m-fields-data-source-fields', DataSourceFields);
     app.component('m-fields-key-value', KeyValue);
+    app.component('m-fields-data-source-input', DataSourceInput);
   },
 };

package/src/initService.ts

@@ -1,8 +1,10 @@
 import type { ExtractPropTypes } from 'vue';
 import { onUnmounted, toRaw, watch } from 'vue';
+import { cloneDeep } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
 import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from '@tmagic/schema';
+import { getNodes } from '@tmagic/utils';
 
 import type { Target } from './services/dep';
 import { createCodeBlockTarget, createDataSourceTarget } from './utils/dep';
@@ -110,6 +112,50 @@ export const initServiceEvents = (
   emit: (event: 'props-panel-mounted' | 'update:modelValue', ...args: any[]) => void,
   { editorService, codeBlockService, dataSourceService, depService }: Services,
 ) => {
+  const getApp = () => {
+    const stage = editorService.get('stage');
+    return stage?.renderer.runtime?.getApp?.();
+  };
+
+  const updateDataSoucreSchema = () => {
+    const root = editorService.get('root');
+
+    if (root?.dataSources) {
+      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+    }
+  };
+
+  const upateNodeWhenDataSourceChange = (nodes: MNode[]) => {
+    const root = editorService.get('root');
+    const stage = editorService.get('stage');
+
+    if (!root || !stage) return;
+
+    const app = getApp();
+
+    if (!app) return;
+
+    if (app.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSources = root.dataSources;
+    }
+
+    updateDataSoucreSchema();
+
+    nodes.forEach((node) => {
+      const deps = Object.values(root.dataSourceDeps || {});
+      deps.forEach((dep) => {
+        if (dep[node.id]) {
+          stage.update({
+            config: cloneDeep(node),
+            parentId: editorService.getParentById(node.id)?.id,
+            root: cloneDeep(root),
+          });
+        }
+      });
+    });
+  };
+
   const targetAddHandler = (target: Target) => {
     if (target.type !== 'data-source') return;
 
@@ -130,8 +176,18 @@ export const initServiceEvents = (
     delete root.dataSourceDeps[id];
   };
 
+  const depUpdateHandler = (node: MNode) => {
+    upateNodeWhenDataSourceChange([node]);
+  };
+
+  const collectedHandler = (nodes: MNode[]) => {
+    upateNodeWhenDataSourceChange(nodes);
+  };
+
   depService.on('add-target', targetAddHandler);
   depService.on('remove-target', targetRemoveHandler);
+  depService.on('dep-update', depUpdateHandler);
+  depService.on('collected', collectedHandler);
 
   const rootChangeHandler = async (value: MApp, preValue?: MApp | null) => {
     const nodeId = editorService.get('node')?.id || props.defaultSelected;
@@ -218,16 +274,25 @@ export const initServiceEvents = (
 
   const dataSourceAddHandler = (config: DataSourceSchema) => {
     depService.addTarget(createDataSourceTarget(config.id, config));
+    getApp()?.dataSourceManager?.addDataSource(config);
   };
 
   const dataSourceUpdateHandler = (config: DataSourceSchema) => {
     if (config.title) {
       depService.getTarget(config.id)!.name = config.title;
     }
+    const root = editorService.get('root');
+
+    const targets = depService.getTargets('data-source');
+
+    const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
+
+    upateNodeWhenDataSourceChange(nodes);
   };
 
   const dataSourceRemoveHandler = (id: string) => {
     depService.removeTarget(id);
+    getApp()?.dataSourceManager?.removeDataSource(id);
   };
 
   dataSourceService.on('add', dataSourceAddHandler);
@@ -237,6 +302,8 @@ export const initServiceEvents = (
   onUnmounted(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);
+    depService.off('dep-update', depUpdateHandler);
+    depService.off('collected', collectedHandler);
 
     editorService.off('history-change', historyChangeHandler);
     editorService.off('root-change', rootChangeHandler);

package/src/layouts/AddPageBox.vue

@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorAddPageBox">
+<script lang="ts" setup>
 import { inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
@@ -21,6 +21,10 @@ import MIcon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils';
 
+defineOptions({
+  name: 'MEditorAddPageBox',
+});
+
 const services = inject<Services>('services');
 
 const clickHandler = () => {

package/src/layouts/CodeEditor.vue

@@ -2,12 +2,16 @@
   <div ref="codeEditor" class="magic-code-editor"></div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeEditor">
+<script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
+defineOptions({
+  name: 'MEditorCodeEditor',
+});
+
 const props = withDefaults(
   defineProps<{
     initValues?: string | Object;

package/src/layouts/Framework.vue

@@ -42,7 +42,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorFramework">
+<script lang="ts" setup>
 import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
@@ -52,6 +52,10 @@ import type { GetColumnWidth, Services } from '@editor/type';
 
 import AddPageBox from './AddPageBox.vue';
 
+defineOptions({
+  name: 'MEditorFramework',
+});
+
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 

package/src/layouts/NavMenu.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorNavMenu">
+<script lang="ts" setup>
 import { computed, inject, markRaw } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
@@ -15,6 +15,10 @@ import { NodeType } from '@tmagic/schema';
 import ToolButton from '@editor/components/ToolButton.vue';
 import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorNavMenu',
+});
+
 const props = withDefaults(
   defineProps<{
     data?: MenuBarData;

package/src/layouts/PropsPanel.vue

@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorPropsPanel">
+<script lang="ts" setup>
 import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
@@ -22,6 +22,10 @@ import { MForm } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorPropsPanel',
+});
+
 const emit = defineEmits(['mounted']);
 
 const internalInstance = getCurrentInstance();

package/src/layouts/Resizer.vue

@@ -4,10 +4,14 @@
   </span>
 </template>
 
-<script lang="ts" setup name="MEditorResizer">
+<script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 
+defineOptions({
+  name: 'MEditorResizer',
+});
+
 const emit = defineEmits(['change']);
 
 const target = ref<HTMLSpanElement>();