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

package/src/layouts/sidebar/LayerPanel.vue

@@ -10,6 +10,7 @@
       ref="tree"
       node-key="id"
       empty-text="页面空荡荡的"
+      tabindex="-1"
       draggable
       :default-expanded-keys="expandedKeys"
       :default-checked-keys="checkedKeys"
@@ -34,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>
@@ -48,9 +47,8 @@
   </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup name="MEditorLayerPanel">
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue';
-import KeyController from 'keycon';
+<script lang="ts" setup>
+import { computed, inject, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
 import { difference, throttle, union } from 'lodash-es';
 
 import { TMagicScrollbar, TMagicTree } from '@tmagic/design';
@@ -63,6 +61,11 @@ 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',
+});
 
 defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
@@ -71,6 +74,7 @@ defineProps<{
 const throttleTime = 150;
 const services = inject<Services>('services');
 const editorService = services?.editorService;
+const keybindingService = services?.keybindingService;
 
 const tree = ref<InstanceType<typeof TMagicTree>>();
 const menu = ref<InstanceType<typeof LayerMenu>>();
@@ -242,34 +246,69 @@ const windowBlurHandler = () => {
   isCtrlKeyDown.value = false;
 };
 
-let keycon: KeyController;
+keybindingService?.registeCommand('layer-panel-not-ctrl-keydown', (e) => {
+  if (e.key !== keybindingService.ctrlKey) {
+    isCtrlKeyDown.value = false;
+  }
+});
+
+keybindingService?.registeCommand('layer-panel-ctrl-keydown', () => {
+  isCtrlKeyDown.value = true;
+});
+
+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) {
+    keybindingService?.registeEl('layer-panel', tree.value.$el);
+
+    tree.value.$el.addEventListener('blur', windowBlurHandler);
+  } else {
+    keybindingService?.unregisteEl('layer-panel');
+  }
+});
 
 onMounted(() => {
   editorService?.on('remove', editorServiceRemoveHandler);
 
-  keycon = new KeyController();
-  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;
-    });
-
   globalThis.addEventListener('blur', windowBlurHandler);
 });
 
-onUnmounted(() => {
-  keycon.destroy();
+onBeforeUnmount(() => {
+  tree.value?.$el.removeEventListener('blur', windowBlurHandler);
+});
 
+onUnmounted(() => {
   editorService?.off('remove', editorServiceRemoveHandler);
   globalThis.removeEventListener('blur', windowBlurHandler);
 });
@@ -310,7 +349,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/sidebar/Sidebar.vue

@@ -3,13 +3,13 @@
     v-if="data.type === 'tabs' && data.items.length"
     v-model="activeTabName"
     class="m-editor-sidebar tmagic-design-tabs"
-    v-bind="tabsComponent.props({ type: 'card', tabPosition: 'left' })"
-    :is="tabsComponent.component"
+    v-bind="tabsComponent?.props({ type: 'card', tabPosition: 'left' }) || {}"
+    :is="tabsComponent?.component || 'el-tabs'"
   >
     <component
       v-for="(config, index) in sideBarItems"
-      v-bind="tabPaneComponent.props({ name: config.text })"
-      :is="tabPaneComponent.component"
+      v-bind="tabPaneComponent?.props({ name: config.text, lazy: config.lazy }) || {}"
+      :is="tabPaneComponent?.component || 'el-tab-pane'"
       :key="config.$key || index"
     >
       <template #label>
@@ -83,7 +83,7 @@
   </component>
 </template>
 
-<script lang="ts" setup name="MEditorSidebar">
+<script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
@@ -98,6 +98,10 @@ import DataSourceListPanel from './data-source/DataSourceListPanel.vue';
 import ComponentListPanel from './ComponentListPanel.vue';
 import LayerPanel from './LayerPanel.vue';
 
+defineOptions({
+  name: 'MEditorSidebar',
+});
+
 const props = withDefaults(
   defineProps<{
     data: SideBarData;
@@ -108,8 +112,8 @@ const props = withDefaults(
   },
 );
 
-const tabPaneComponent = getConfig('components').tabPane;
-const tabsComponent = getConfig('components').tabs;
+const tabPaneComponent = getConfig('components')?.tabPane;
+const tabsComponent = getConfig('components')?.tabs;
 
 const activeTabName = ref(props.data?.status);
 

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

@@ -10,7 +10,7 @@
     :size="size"
     :before-close="handleClose"
   >
-    <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
+    <SplitView v-model:left="left" :min-left="45" class="code-editor-layout">
       <!-- 右侧区域 -->
       <template #center>
         <div v-if="!isEmpty(codeConfig)" class="m-editor-code-block-editor-panel">
@@ -28,11 +28,11 @@
           ></FunctionEditor>
         </div>
       </template>
-    </Layout>
+    </SplitView>
   </TMagicDrawer>
 </template>
 
-<script lang="ts" setup name="MEditorCodeBlockEditor">
+<script lang="ts" setup>
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
 import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
@@ -41,10 +41,14 @@ import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent } from '@tmagic/schema';
 
 import FunctionEditor from '@editor/components/FunctionEditor.vue';
-import Layout from '@editor/components/Layout.vue';
+import SplitView from '@editor/components/SplitView.vue';
 import type { ListState, Services } from '@editor/type';
 import { serializeConfig } from '@editor/utils/editor';
 
+defineOptions({
+  name: 'MEditorCodeBlockEditor',
+});
+
 const services = inject<Services>('services');
 const codeOptions = inject('codeOptions', {});
 

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

@@ -55,7 +55,7 @@
   </TMagicScrollbar>
 </template>
 
-<script setup lang="ts" name="MEditorCodeBlockList">
+<script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
@@ -71,6 +71,10 @@ import { CodeDeleteErrorType, CodeDslItem, Services } from '@editor/type';
 
 import CodeBlockEditor from './CodeBlockEditor.vue';
 
+defineOptions({
+  name: 'MEditorCodeBlockList',
+});
+
 const props = defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
   paramsColConfig?: ColumnConfig;

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

@@ -27,6 +27,10 @@ import { MForm } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorDataSourceConfigPanel',
+});
+
 const props = defineProps<{
   title?: string;
   values: any;

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';
@@ -61,8 +62,12 @@ import type { Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 
+defineOptions({
+  name: 'MEditorDataSourceListPanel',
+});
+
 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) => ({
@@ -127,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/Breadcrumb.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MEditorBreadcrumb">
+<script setup lang="ts">
 import { computed, inject } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
@@ -16,6 +16,10 @@ import { getNodePath } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorBreadcrumb',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 

package/src/layouts/workspace/PageBar.vue

@@ -46,7 +46,7 @@
   </PageBarScrollContainer>
 </template>
 
-<script lang="ts" setup name="MEditorPageBar">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
@@ -58,6 +58,10 @@ import type { Services } from '@editor/type';
 
 import PageBarScrollContainer from './PageBarScrollContainer.vue';
 
+defineOptions({
+  name: 'MEditorPageBar',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 

package/src/layouts/workspace/PageBarScrollContainer.vue

@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MEditorPageBarScrollContainer">
+<script setup lang="ts">
 import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
 
@@ -36,6 +36,10 @@ import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils/editor';
 
+defineOptions({
+  name: 'MEditorPageBarScrollContainer',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 const uiService = services?.uiService;

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"
@@ -11,6 +12,7 @@
       width: 60,
       height: 50,
     }"
+    @click="stageWrap?.container?.focus()"
   >
     <div
       class="m-editor-stage-container"
@@ -26,7 +28,7 @@
   </ScrollViewer>
 </template>
 
-<script lang="ts" setup name="MEditorStage">
+<script lang="ts" setup>
 import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
@@ -35,10 +37,15 @@ 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';
 
+defineOptions({
+  name: 'MEditorStage',
+});
+
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
 }>();
@@ -70,6 +77,10 @@ watchEffect(() => {
 
   stage = useStage(stageOptions);
 
+  stage.on('select', () => {
+    stageWrap.value?.container?.focus();
+  });
+
   services?.editorService.set('stage', markRaw(stage));
 
   stage?.mount(stageContainer.value);
@@ -116,13 +127,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) => {
@@ -132,9 +147,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) => {
@@ -149,8 +163,16 @@ 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 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/layouts/workspace/ViewerMenu.vue

@@ -2,18 +2,24 @@
   <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
-<script lang="ts" setup name="MEditorViewerMenu">
+<script lang="ts" setup>
 import { computed, inject, markRaw, ref, watch } from 'vue';
-import { Bottom, CopyDocument, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
+import { Bottom, Top } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 import { isPage } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
+import CenterIcon from '@editor/icons/CenterIcon.vue';
 import storageService from '@editor/services/storage';
 import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
+import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
 import { COPY_STORAGE_KEY } from '@editor/utils/editor';
 
+defineOptions({
+  name: 'MEditorViewerMenu',
+});
+
 const props = withDefaults(
   defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(),
   { isMultiSelect: false },
@@ -28,42 +34,20 @@ const canCenter = ref(false);
 const node = computed(() => editorService?.get('node'));
 const nodes = computed(() => editorService?.get('nodes'));
 const parent = computed(() => editorService?.get('parent'));
-const stage = computed(() => editorService?.get('stage'));
 
 const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '水平居中',
+    icon: markRaw(CenterIcon),
     display: () => canCenter.value,
     handler: () => {
       if (!nodes.value) return;
       editorService?.alignCenter(nodes.value);
     },
   },
-  {
-    type: 'button',
-    text: '复制',
-    icon: markRaw(CopyDocument),
-    handler: () => {
-      nodes.value && editorService?.copy(nodes.value);
-      canPaste.value = true;
-    },
-  },
-  {
-    type: 'button',
-    text: '粘贴',
-    icon: markRaw(DocumentCopy),
-    display: () => canPaste.value,
-    handler: () => {
-      const rect = menu.value?.$el.getBoundingClientRect();
-      const parentRect = stage.value?.container?.getBoundingClientRect();
-      const initialLeft = (rect?.left || 0) - (parentRect?.left || 0);
-      const initialTop = (rect?.top || 0) - (parentRect?.top || 0);
-
-      if (!nodes.value || nodes.value.length === 0) return;
-      editorService?.paste({ left: initialLeft, top: initialTop });
-    },
-  },
+  useCopyMenu(),
+  usePasteMenu(menu),
   {
     type: 'divider',
     direction: 'horizontal',
@@ -93,6 +77,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '置顶',
+    icon: markRaw(Top),
     display: () => !isPage(node.value) && !props.isMultiSelect,
     handler: () => {
       editorService?.moveLayer(LayerOffset.TOP);
@@ -101,25 +86,19 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '置底',
+    icon: markRaw(Bottom),
     display: () => !isPage(node.value) && !props.isMultiSelect,
     handler: () => {
       editorService?.moveLayer(LayerOffset.BOTTOM);
     },
   },
+  useMoveToMenu(services),
   {
     type: 'divider',
     direction: 'horizontal',
     display: () => !isPage(node.value) && !props.isMultiSelect,
   },
-  {
-    type: 'button',
-    text: '删除',
-    icon: Delete,
-    display: () => !isPage(node.value),
-    handler: () => {
-      nodes.value && editorService?.remove(nodes.value);
-    },
-  },
+  useDeleteMenu(),
   {
     type: 'divider',
     direction: 'horizontal',