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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.6",
+  "version": "1.3.0-alpha.8",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,27 +46,27 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-alpha.6",
-    "@tmagic/design": "1.3.0-alpha.6",
-    "@tmagic/form": "1.3.0-alpha.6",
-    "@tmagic/schema": "1.3.0-alpha.6",
-    "@tmagic/stage": "1.3.0-alpha.6",
-    "@tmagic/table": "1.3.0-alpha.6",
-    "@tmagic/utils": "1.3.0-alpha.6",
+    "@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",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
     "gesto": "^1.7.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.34.0",
+    "monaco-editor": "^0.39.0",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.6",
-    "@tmagic/form": "1.3.0-alpha.6",
-    "monaco-editor": "^0.34.0",
+    "@tmagic/design": "1.3.0-alpha.8",
+    "@tmagic/form": "1.3.0-alpha.8",
+    "monaco-editor": "^0.39.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {

package/src/Editor.vue

@@ -100,6 +100,7 @@ import keybindingService from './services/keybinding';
 import propsService from './services/props';
 import storageService from './services/storage';
 import uiService from './services/ui';
+import keybindingConfig from './utils/keybinding-config';
 import editorProps from './editorProps';
 import { initServiceEvents, initServiceState } from './initService';
 import type { Services } from './type';
@@ -136,6 +137,8 @@ export default defineComponent({
 
     initServiceEvents(props, emit, services);
     initServiceState(props, services);
+    keybindingService.registe(keybindingConfig);
+    keybindingService.registeEl('global');
 
     provide('services', services);
 

package/src/components/ContentMenu.vue

@@ -12,6 +12,7 @@
     </div>
     <teleport to="body">
       <content-menu
+        v-if="subMenuData.length"
         class="sub-menu"
         ref="subMenu"
         :menu-data="subMenuData"
@@ -55,6 +56,8 @@ const menuStyle = ref({
   top: '0',
 });
 
+const contains = (el: HTMLElement) => menu.value?.contains(el) || subMenu.value?.contains(el);
+
 const hide = () => {
   if (!visible.value) return;
 
@@ -69,7 +72,7 @@ const hideHandler = (e: MouseEvent) => {
   if (!visible.value || !target) {
     return;
   }
-  if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+  if (contains(target)) {
     return;
   }
   hide();
@@ -104,13 +107,15 @@ const showSubMenu = (item: MenuButton | MenuComponent) => {
     return;
   }
 
-  subMenuData.value = menuItem.items;
-  if (menu.value) {
-    subMenu.value.show({
-      clientX: menu.value.offsetLeft + menu.value.clientWidth,
-      clientY: menu.value.offsetTop,
-    });
-  }
+  subMenuData.value = menuItem.items || [];
+  setTimeout(() => {
+    if (menu.value) {
+      subMenu.value?.show({
+        clientX: menu.value.offsetLeft + menu.value.clientWidth,
+        clientY: menu.value.offsetTop,
+      });
+    }
+  }, 0);
 };
 
 onMounted(() => {
@@ -126,7 +131,9 @@ onUnmounted(() => {
 });
 
 defineExpose({
+  menu,
   hide,
   show,
+  contains,
 });
 </script>

package/src/components/FunctionEditor.vue

@@ -33,7 +33,7 @@
   </TMagicCard>
 </template>
 <script lang="ts" setup>
-import { inject, ref, watchEffect } from 'vue';
+import { inject, provide, ref, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import { TMagicCard, TMagicInput, tMagicMessage } from '@tmagic/design';
@@ -41,6 +41,7 @@ import { ColumnConfig, TableConfig } from '@tmagic/form';
 import { CodeParam, Id } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
 
 import CodeDraftEditor from './CodeDraftEditor.vue';
 
@@ -48,6 +49,8 @@ defineOptions({
   name: 'MEditorFunctionEditor',
 });
 
+provide('mForm', {});
+
 const defaultParamColConfig: ColumnConfig = {
   type: 'row',
   label: '参数类型',
@@ -147,9 +150,8 @@ initTableModel();
 // 保存前钩子
 const beforeSave = (codeValue: string): boolean => {
   try {
-    // eval检测js代码是否存在语法错误
-    // eslint-disable-next-line no-eval
-    eval(codeValue);
+    // 检测js代码是否存在语法错误
+    getConfig('parseDSL')(codeValue);
     return true;
   } catch (e: any) {
     tMagicMessage.error(e.stack);

package/src/components/SplitView.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="el" class="m-editor-layout">
-    <template v-if="hasLeft">
+    <template v-if="hasLeft && $slots.left">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>
       </div>
@@ -11,7 +11,7 @@
       <slot name="center"></slot>
     </div>
 
-    <template v-if="hasRight">
+    <template v-if="hasRight && $slots.right">
       <Resizer @change="changeRight"></Resizer>
       <div class="m-editor-layout-right" :class="rightClass" :style="`width: ${right}px`">
         <slot name="right"></slot>

package/src/fields/CodeLink.vue

@@ -6,6 +6,8 @@
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
+import { getConfig } from '@editor/utils/config';
+
 defineOptions({
   name: 'MEditorCodeLink',
 });
@@ -69,8 +71,8 @@ const changeHandler = (v: Record<string, any>) => {
   if (!props.name || !props.model) return;
 
   try {
-    // eslint-disable-next-line no-eval
-    props.model[props.name] = eval(`(${v[props.name]})`);
+    const parseDSL = getConfig('parseDSL');
+    props.model[props.name] = parseDSL(`(${v[props.name]})`);
     emit('change', props.model[props.name]);
   } catch (e) {
     console.error(e);

package/src/fields/DataSourceInput.vue

@@ -30,13 +30,15 @@
       </div>
     </template>
   </component>
-  <div :class="`el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
-    <div :class="`el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
+  <div :class="`tmagic-data-source-input-text el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
+    <div :class="`tmagic-data-source-input-text-wrapper 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>
+
+        <Icon class="tmagic-data-source-input-icon" :icon="Coin" />
       </div>
     </div>
   </div>
@@ -90,7 +92,7 @@ const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
 const setDisplayState = () => {
   displayState.value = [];
 
-  const matches = state.value.matchAll(/\{\{([\s\S]+?)\}\}/g);
+  const matches = state.value.matchAll(/\$\{([\s\S]+?)\}/g);
   let index = 0;
   for (const match of matches) {
     if (typeof match.index === 'undefined') break;
@@ -195,7 +197,7 @@ const getSelectionStart = () => {
  * @param leftCurlyBracketIndex {字符索引
  */
 const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex: number) =>
-  leftCurlyBracketIndex > -1 && leftCurlyBracketIndex === getSelectionStart() - 1;
+  leftCurlyBracketIndex > 0 && leftCurlyBracketIndex === getSelectionStart() - 1;
 
 /**
  * 当前输入的是.
@@ -213,7 +215,7 @@ const dsQuerySearch = (queryString: string, leftCurlyBracketIndex: number, cb: (
   if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
     // 当前输入的是{
     result = dataSources.value;
-  } else if (leftCurlyBracketIndex > -1) {
+  } else if (leftCurlyBracketIndex > 0) {
     // 当前输入的是{xx
     const queryName = queryString.substring(leftCurlyBracketIndex + 1).toLowerCase();
     result = dataSources.value.filter((ds) => ds.title?.toLowerCase().includes(queryName) || ds.id.includes(queryName));
@@ -299,7 +301,7 @@ const querySearch = (queryString: string, cb: (data: { value: string }[]) => voi
   const curQueryString = queryString.substring(0, selectionStart);
 
   const fieldKeyStringLastIndex = curQueryString.lastIndexOf('.');
-  const dsKeyStringLastIndex = curQueryString.lastIndexOf('{');
+  const dsKeyStringLastIndex = curQueryString.lastIndexOf('${') + 1;
 
   const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
 
@@ -321,7 +323,7 @@ const selectHandler = async ({ value, type }: { value: string; type: 'dataSource
   let startText = inputText.substring(0, selectionStart);
 
   const dotIndex = startText.lastIndexOf('.');
-  const leftCurlyBracketIndex = startText.lastIndexOf('{');
+  const leftCurlyBracketIndex = startText.lastIndexOf('${') + 1;
 
   const endText = inputText.substring(selectionStart);
 
@@ -336,7 +338,6 @@ const selectHandler = async ({ value, type }: { value: string; type: 'dataSource
     if (!isRightCurlyBracket(selectionStart + 1)) {
       suggestText = `${suggestText}}`;
     }
-    suggestText = `{${suggestText}}`;
   } else if (!curCharIsDot(dotIndex)) {
     startText = startText.substring(0, dotIndex + 1);
   }
@@ -345,10 +346,10 @@ const selectHandler = async ({ value, type }: { value: string; type: 'dataSource
 
   await nextTick();
 
-  // 由于选择数据源时会在后面补全}}, 所以光标要前移2位
+  // 由于选择数据源时会在后面补全}, 所以光标要前移2位
   let newSelectionStart = 0;
   if (isDataSource) {
-    newSelectionStart = leftCurlyBracketIndex + suggestText.length - 1;
+    newSelectionStart = leftCurlyBracketIndex + suggestText.length;
   } else {
     newSelectionStart = dotIndex + suggestText.length + 1;
   }

package/src/index.ts

@@ -62,13 +62,15 @@ export { default as ContentMenu } from './components/ContentMenu.vue';
 export { default as Icon } from './components/Icon.vue';
 export { default as LayoutContainer } from './components/SplitView.vue';
 export { default as SplitView } from './components/SplitView.vue';
+export { default as Resizer } from './components/Resizer.vue';
 
 const defaultInstallOpt: InstallOptions = {
-  // @todo, 自定义图片上传方法等编辑器依赖的外部选项
+  // eslint-disable-next-line no-eval
+  parseDSL: (dsl: string) => eval(dsl),
 };
 
 export default {
-  install: (app: App, opt?: InstallOptions): void => {
+  install: (app: App, opt?: Partial<InstallOptions>): void => {
     const option = Object.assign(defaultInstallOpt, opt || {});
 
     // eslint-disable-next-line no-param-reassign

package/src/initService.ts

@@ -25,6 +25,7 @@ export const initServiceState = (
     eventsService,
     uiService,
     codeBlockService,
+    keybindingService,
   }: Services,
 ) => {
   // 初始值变化，重新设置节点信息
@@ -104,6 +105,7 @@ export const initServiceState = (
     uiService.resetState();
     componentListService.resetState();
     codeBlockService.resetState();
+    keybindingService.reset();
   });
 };
 

package/src/layouts/Framework.vue

@@ -33,7 +33,7 @@
         </slot>
       </template>
 
-      <template v-if="pageLength > 0 && nodes.length === 1" #right>
+      <template v-if="pageLength > 0" #right>
         <TMagicScrollbar>
           <slot name="props-panel"></slot>
         </TMagicScrollbar>
@@ -52,6 +52,7 @@ import { TMagicScrollbar } from '@tmagic/design';
 
 import SplitView from '@editor/components/SplitView.vue';
 import type { GetColumnWidth, Services } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
 
 import AddPageBox from './AddPageBox.vue';
 import CodeEditor from './CodeEditor.vue';
@@ -67,7 +68,6 @@ const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
 const root = computed(() => editorService?.get('root'));
-const nodes = computed(() => editorService?.get('nodes') || []);
 
 const pageLength = computed(() => editorService?.get('pageLength') || 0);
 const showSrc = computed(() => uiService?.get('showSrc'));
@@ -131,8 +131,8 @@ const columnWidthChange = (columnW: GetColumnWidth) => {
 
 const saveCode = (value: string) => {
   try {
-    // eslint-disable-next-line no-eval
-    editorService?.set('root', eval(value));
+    const parseDSL = getConfig('parseDSL');
+    editorService?.set('root', parseDSL(value));
   } catch (e: any) {
     console.error(e);
   }

package/src/layouts/PropsPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-props-panel">
+  <div class="m-editor-props-panel" v-if="nodes.length === 1">
     <slot name="props-panel-header"></slot>
     <MForm
       ref="configForm"
@@ -35,6 +35,7 @@ const configForm = ref<InstanceType<typeof MForm>>();
 const curFormConfig = ref<any>([]);
 const services = inject<Services>('services');
 const node = computed(() => services?.editorService.get('node'));
+const nodes = computed(() => services?.editorService.get('nodes') || []);
 const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
 const stage = computed(() => services?.editorService.get('stage'));
 

package/src/layouts/sidebar/LayerMenu.vue

@@ -22,6 +22,7 @@ const props = defineProps<{
 const services = inject<Services>('services');
 const menu = ref<InstanceType<typeof ContentMenu>>();
 const node = computed(() => services?.editorService.get('node'));
+const nodes = computed(() => services?.editorService.get('nodes'));
 const isRoot = computed(() => node.value?.type === NodeType.ROOT);
 const isPage = computed(() => node.value?.type === NodeType.PAGE);
 const componentList = computed(() => services?.componentListService.getList() || []);
@@ -82,7 +83,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
     type: 'button',
     text: '新增',
     icon: markRaw(Plus),
-    display: () => node.value?.items,
+    display: () => node.value?.items && nodes.value?.length === 1,
     items: getSubMenuData.value,
   },
   {
@@ -91,7 +92,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
     icon: markRaw(CopyDocument),
     display: () => !isRoot.value,
     handler: () => {
-      node.value && services?.editorService.copy(node.value);
+      node.value && services?.editorService.copy(nodes.value || []);
     },
   },
   {
@@ -100,7 +101,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
     icon: markRaw(Delete),
     display: () => !isRoot.value && !isPage.value,
     handler: () => {
-      node.value && services?.editorService.remove(node.value);
+      node.value && services?.editorService.remove(nodes.value || []);
     },
   },
   ...props.layerContentMenu,

package/src/layouts/sidebar/LayerPanel.vue

@@ -50,8 +50,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue';
-import KeyController from 'keycon';
+import { computed, inject, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
 import { difference, throttle, union } from 'lodash-es';
 
 import { TMagicScrollbar, TMagicTree } from '@tmagic/design';
@@ -248,51 +247,71 @@ const windowBlurHandler = () => {
   isCtrlKeyDown.value = false;
 };
 
-const globalKeyupHandler = () => {
-  if (document.activeElement !== tree.value?.$el) {
+keybindingService?.registeCommand('layer-panel-not-ctrl-keydown', (e) => {
+  if (e.key !== keybindingService.ctrlKey) {
     isCtrlKeyDown.value = false;
   }
-};
+});
 
-let keycon: KeyController;
+keybindingService?.registeCommand('layer-panel-ctrl-keydown', () => {
+  isCtrlKeyDown.value = true;
+});
 
-onMounted(() => {
-  editorService?.on('remove', editorServiceRemoveHandler);
+keybindingService?.registeCommand('layer-panel-ctrl-keyup', () => {
+  isCtrlKeyDown.value = false;
+});
 
+keybindingService?.registeCommand('layer-panel-global-keydwon', () => {
+  if (!tree.value?.$el.contains(document.activeElement)) {
+    isCtrlKeyDown.value = false;
+  }
+});
+
+keybindingService?.registe([
+  {
+    command: 'layer-panel-not-ctrl-keydown',
+    when: [['layer-panel', 'keydown']],
+  },
+  {
+    command: 'layer-panel-ctrl-keydown',
+    keybinding: 'ctrl',
+    when: [['layer-panel', 'keydown']],
+  },
+  {
+    command: 'layer-panel-ctrl-keyup',
+    keybinding: 'ctrl',
+    when: [['layer-panel', 'keyup']],
+  },
+  {
+    command: 'layer-panel-global-keydwon',
+    keybinding: 'ctrl',
+    when: [['global', 'keydown']],
+  },
+]);
+
+watch(tree, () => {
   if (tree.value?.$el) {
-    // 如果是在树上按下ctrl，那么在树外松开ctrl时，也要触发松开事件
-    keybindingService?.on('keyup', globalKeyupHandler);
-
-    keycon = new KeyController(tree.value.$el);
-    const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-    const ctrl = isMac ? 'meta' : 'ctrl';
-
-    keycon
-      .keydown((e) => {
-        if (e.key !== ctrl) {
-          isCtrlKeyDown.value = false;
-        }
-      })
-      .keydown(ctrl, () => {
-        isCtrlKeyDown.value = true;
-      })
-      .keyup(ctrl, () => {
-        isCtrlKeyDown.value = false;
-      });
+    keybindingService?.registeEl('layer-panel', tree.value.$el);
 
     tree.value.$el.addEventListener('blur', windowBlurHandler);
+  } else {
+    keybindingService?.unregisteEl('layer-panel');
   }
+});
+
+onMounted(() => {
+  editorService?.on('remove', editorServiceRemoveHandler);
 
   globalThis.addEventListener('blur', windowBlurHandler);
 });
 
-onUnmounted(() => {
-  keycon.destroy();
+onBeforeUnmount(() => {
+  tree.value?.$el.removeEventListener('blur', windowBlurHandler);
+});
 
+onUnmounted(() => {
   editorService?.off('remove', editorServiceRemoveHandler);
-  keybindingService?.off('keyup', globalKeyupHandler);
   globalThis.removeEventListener('blur', windowBlurHandler);
-  tree.value?.$el.removeEventListener('blur', windowBlurHandler);
 });
 
 // 鼠标在组件树移动触发高亮
@@ -331,7 +350,11 @@ const clickHandler = (data: MNode): void => {
 // 右键菜单
 const contextmenu = async (event: MouseEvent, data: MNode): Promise<void> => {
   event.preventDefault();
-  await select(data);
+
+  if (nodes.value.length < 2) {
+    await select(data);
+  }
+
   menu.value?.show(event);
 };
 </script>

package/src/layouts/workspace/Stage.vue

@@ -2,6 +2,7 @@
   <ScrollViewer
     class="m-editor-stage"
     ref="stageWrap"
+    tabindex="-1"
     :width="stageRect?.width"
     :height="stageRect?.height"
     :wrap-width="stageContainerRect?.width"
@@ -35,6 +36,7 @@ import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stag
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
 import { useStage } from '@editor/utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
@@ -74,6 +76,10 @@ watchEffect(() => {
 
   stage = useStage(stageOptions);
 
+  stage.on('select', () => {
+    stageWrap.value?.container?.focus();
+  });
+
   services?.editorService.set('stage', markRaw(stage));
 
   stage?.mount(stageContainer.value);
@@ -120,13 +126,17 @@ const resizeObserver = new ResizeObserver((entries) => {
 });
 
 onMounted(() => {
-  stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+  if (stageWrap.value?.container) {
+    resizeObserver.observe(stageWrap.value.container);
+    services?.keybindingService.registeEl('stage', stageWrap.value.container);
+  }
 });
 
 onUnmounted(() => {
   stage?.destroy();
   resizeObserver.disconnect();
   services?.editorService.set('stage', null);
+  services?.keybindingService.unregisteEl('stage');
 });
 
 const contextmenuHandler = (e: MouseEvent) => {
@@ -153,8 +163,8 @@ const dropHandler = async (e: DragEvent) => {
   }
 
   if (e.dataTransfer && parent && stageContainer.value && stage) {
-    // eslint-disable-next-line no-eval
-    const config = eval(`(${e.dataTransfer.getData('data')})`);
+    const parseDSL = getConfig('parseDSL');
+    const config = parseDSL(`(${e.dataTransfer.getData('data')})`);
     const layout = await services?.editorService.getLayout(parent);
 
     const containerRect = stageContainer.value.getBoundingClientRect();

package/src/layouts/workspace/Workspace.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-workspace" tabindex="-1">
+  <div class="m-editor-workspace">
     <Breadcrumb></Breadcrumb>
 
     <slot name="stage">
@@ -18,7 +18,7 @@
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
 
-import type { MenuButton, MenuComponent, Services } from '@editor/type';
+import { MenuButton, MenuComponent, Services } from '@editor/type';
 
 import Breadcrumb from './Breadcrumb.vue';
 import PageBar from './PageBar.vue';

package/src/services/codeBlock.ts

@@ -23,6 +23,7 @@ import { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
 
 import type { CodeState } from '@editor/type';
 import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
 
 import BaseService from './BaseService';
 
@@ -95,8 +96,8 @@ class CodeBlock extends BaseService {
     const codeConfigProcessed = codeConfig;
     if (codeConfig.content) {
       // 在保存的时候转换代码内容
-      // eslint-disable-next-line no-eval
-      codeConfigProcessed.content = eval(codeConfig.content);
+      const parseDSL = getConfig('parseDSL');
+      codeConfigProcessed.content = parseDSL(codeConfig.content);
     }
 
     const existContent = codeDsl[id] || {};