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

package/package.json

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

package/src/Editor.vue

@@ -1,9 +1,19 @@
 <template>
-  <Framework :code-options="codeOptions">
+  <Framework>
+    <template #header>
+      <slot name="header"></slot>
+    </template>
+
     <template #nav>
       <slot name="nav" :editorService="editorService"><TMagicNavMenu :data="menu"></TMagicNavMenu></slot>
     </template>
 
+    <template #content-before>
+      <slot name="content-before"></slot>
+    </template>
+
+    <template #src-code><slot name="src-code" :editorService="editorService"></slot></template>
+
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
         <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu">
@@ -60,6 +70,14 @@
     </template>
 
     <template #empty><slot name="empty" :editorService="editorService"></slot></template>
+
+    <template #content-after>
+      <slot name="content-after"></slot>
+    </template>
+
+    <template #footer>
+      <slot name="footer"></slot>
+    </template>
   </Framework>
 </template>
 
@@ -78,6 +96,7 @@ import depService from './services/dep';
 import editorService from './services/editor';
 import eventsService from './services/events';
 import historyService from './services/history';
+import keybindingService from './services/keybinding';
 import propsService from './services/props';
 import storageService from './services/storage';
 import uiService from './services/ui';
@@ -112,6 +131,7 @@ export default defineComponent({
       codeBlockService,
       depService,
       dataSourceService,
+      keybindingService,
     };
 
     initServiceEvents(props, emit, services);

package/src/{layouts → components}/Resizer.vue

@@ -1,5 +1,5 @@
 <template>
-  <span ref="target" class="m-editor-resizer">
+  <span ref="target" class="m-editor-resizer" :class="{ 'm-editor-resizer-draging': isDraging }">
     <slot></slot>
   </span>
 </template>
@@ -15,6 +15,7 @@ defineOptions({
 const emit = defineEmits(['change']);
 
 const target = ref<HTMLSpanElement>();
+const isDraging = ref(false);
 
 let getso: Gesto;
 
@@ -23,14 +24,22 @@ onMounted(() => {
   getso = new Gesto(target.value, {
     container: window,
     pinchOutside: true,
-  }).on('drag', (e) => {
-    if (!target.value) return;
-
-    emit('change', e.deltaX);
-  });
+  })
+    .on('drag', (e) => {
+      if (!target.value) return;
+
+      emit('change', e.deltaX);
+    })
+    .on('dragStart', () => {
+      isDraging.value = true;
+    })
+    .on('dragEnd', () => {
+      isDraging.value = false;
+    });
 });
 
 onUnmounted(() => {
   getso?.unset();
+  isDraging.value = false;
 });
 </script>

package/src/components/{Layout.vue → SplitView.vue}

@@ -23,7 +23,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 
-import Resizer from '@editor/layouts/Resizer.vue';
+import Resizer from './Resizer.vue';
 
 defineOptions({
   name: 'MEditorLayout',

package/src/index.ts

@@ -60,7 +60,8 @@ export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
 export { default as Icon } from './components/Icon.vue';
-export { default as LayoutContainer } from './components/Layout.vue';
+export { default as LayoutContainer } from './components/SplitView.vue';
+export { default as SplitView } from './components/SplitView.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // @todo, 自定义图片上传方法等编辑器依赖的外部选项

package/src/layouts/CodeEditor.vue

@@ -14,8 +14,8 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
-    initValues?: string | Object;
-    modifiedValues?: string | Object;
+    initValues?: string | Record<string | number, any> | null;
+    modifiedValues?: string | Record<string | number, any> | null;
     type?: 'diff';
     language?: string;
     options?: {

package/src/layouts/Framework.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="m-editor">
-    <slot name="nav" class="m-editor-nav-menu"></slot>
+    <slot name="header"></slot>
 
-    <magic-code-editor
-      v-if="showSrc"
-      class="m-editor-content"
-      :init-values="root"
-      :options="codeOptions"
-      @save="saveCode"
-    ></magic-code-editor>
+    <slot name="nav"></slot>
+
+    <slot name="content-before"></slot>
 
-    <Layout
+    <slot name="src-code" v-if="showSrc">
+      <CodeEditor class="m-editor-content" :init-values="root" :options="codeOptions" @save="saveCode"></CodeEditor>
+    </slot>
+
+    <SplitView
       v-else
       class="m-editor-content"
       left-class="m-editor-framework-left"
@@ -38,7 +38,10 @@
           <slot name="props-panel"></slot>
         </TMagicScrollbar>
       </template>
-    </Layout>
+    </SplitView>
+
+    <slot name="content-after"></slot>
+    <slot name="footer"></slot>
   </div>
 </template>
 
@@ -47,10 +50,11 @@ import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
 
-import Layout from '@editor/components/Layout.vue';
+import SplitView from '@editor/components/SplitView.vue';
 import type { GetColumnWidth, Services } from '@editor/type';
 
 import AddPageBox from './AddPageBox.vue';
+import CodeEditor from './CodeEditor.vue';
 
 defineOptions({
   name: 'MEditorFramework',
@@ -59,15 +63,7 @@ defineOptions({
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 
-withDefaults(
-  defineProps<{
-    codeOptions?: Record<string, any>;
-  }>(),
-  {
-    codeOptions: () => ({}),
-  },
-);
-
+const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
 const root = computed(() => editorService?.get('root'));

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"
@@ -75,6 +76,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>>();
@@ -246,27 +248,40 @@ const windowBlurHandler = () => {
   isCtrlKeyDown.value = false;
 };
 
+const globalKeyupHandler = () => {
+  if (document.activeElement !== tree.value?.$el) {
+    isCtrlKeyDown.value = false;
+  }
+};
+
 let keycon: KeyController;
 
 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) {
+  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;
-      }
-    })
-    .keydown(ctrl, () => {
-      isCtrlKeyDown.value = true;
-    })
-    .keyup(ctrl, () => {
-      isCtrlKeyDown.value = false;
-    });
+      });
+
+    tree.value.$el.addEventListener('blur', windowBlurHandler);
+  }
 
   globalThis.addEventListener('blur', windowBlurHandler);
 });
@@ -275,7 +290,9 @@ onUnmounted(() => {
   keycon.destroy();
 
   editorService?.off('remove', editorServiceRemoveHandler);
+  keybindingService?.off('keyup', globalKeyupHandler);
   globalThis.removeEventListener('blur', windowBlurHandler);
+  tree.value?.$el.removeEventListener('blur', windowBlurHandler);
 });
 
 // 鼠标在组件树移动触发高亮

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,7 +28,7 @@
           ></FunctionEditor>
         </div>
       </template>
-    </Layout>
+    </SplitView>
   </TMagicDrawer>
 </template>
 
@@ -41,7 +41,7 @@ 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';
 

package/src/layouts/workspace/Workspace.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-workspace" tabindex="-1" ref="workspace">
+  <div class="m-editor-workspace" tabindex="-1">
     <Breadcrumb></Breadcrumb>
 
     <slot name="stage">
@@ -16,10 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
-import KeyController from 'keycon';
-
-import { isPage } from '@tmagic/utils';
+import { computed, inject } from 'vue';
 
 import type { MenuButton, MenuComponent, Services } from '@editor/type';
 
@@ -36,132 +33,6 @@ defineProps<{
 }>();
 
 const services = inject<Services>('services');
-const workspace = ref<HTMLDivElement>();
-const nodes = computed(() => services?.editorService.get('nodes'));
-const page = computed(() => services?.editorService.get('page'));
-
-const mouseenterHandler = () => {
-  workspace.value?.focus();
-};
-
-const mouseleaveHandler = () => {
-  workspace.value?.blur();
-};
-
-let keycon: KeyController;
-
-onMounted(() => {
-  workspace.value?.addEventListener('mouseenter', mouseenterHandler);
-  workspace.value?.addEventListener('mouseleave', mouseleaveHandler);
-
-  keycon = new KeyController(workspace.value);
 
-  const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-
-  const ctrl = isMac ? 'meta' : 'ctrl';
-
-  keycon
-    .keyup('delete', (e) => {
-      e.inputEvent.preventDefault();
-      if (!nodes.value || isPage(nodes.value[0])) return;
-      services?.editorService.remove(nodes.value);
-    })
-    .keyup('backspace', (e) => {
-      e.inputEvent.preventDefault();
-      if (!nodes.value || isPage(nodes.value[0])) return;
-      services?.editorService.remove(nodes.value);
-    })
-    .keydown([ctrl, 'c'], (e) => {
-      e.inputEvent.preventDefault();
-      nodes.value && services?.editorService.copy(nodes.value);
-    })
-    .keydown([ctrl, 'v'], (e) => {
-      e.inputEvent.preventDefault();
-      nodes.value && services?.editorService.paste({ offsetX: 10, offsetY: 10 });
-    })
-    .keydown([ctrl, 'x'], (e) => {
-      e.inputEvent.preventDefault();
-      if (!nodes.value || isPage(nodes.value[0])) return;
-      services?.editorService.copy(nodes.value);
-      services?.editorService.remove(nodes.value);
-    })
-    .keydown([ctrl, 'z'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.undo();
-    })
-    .keydown([ctrl, 'shift', 'z'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.redo();
-    })
-    .keydown('up', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(0, -1);
-    })
-    .keydown('down', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(0, 1);
-    })
-    .keydown('left', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(-1, 0);
-    })
-    .keydown('right', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(1, 0);
-    })
-    .keydown([ctrl, 'up'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(0, -10);
-    })
-    .keydown([ctrl, 'down'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(0, 10);
-    })
-    .keydown([ctrl, 'left'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(-10, 0);
-    })
-    .keydown([ctrl, 'right'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(10, 0);
-    })
-    .keydown('tab', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.selectNextNode();
-    })
-    .keydown([ctrl, 'tab'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.selectNextPage();
-    })
-    .keydown([ctrl, '='], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.zoom(0.1);
-    })
-    .keydown([ctrl, 'numpadplus'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.zoom(0.1);
-    })
-    .keydown([ctrl, '-'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.zoom(-0.1);
-    })
-    .keydown([ctrl, 'numpad-'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.zoom(-0.1);
-    })
-    .keydown([ctrl, '0'], async (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.set('zoom', await services.uiService.calcZoom());
-    })
-    .keydown([ctrl, '1'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.set('zoom', 1);
-    });
-});
-
-onUnmounted(() => {
-  workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
-  workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
-  keycon.destroy();
-});
+const page = computed(() => services?.editorService.get('page'));
 </script>