@tmagic/editor 1.2.0-beta.15 → 1.2.0-beta.17

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0-beta.15",
+  "version": "1.2.0-beta.17",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,12 +45,12 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.0-beta.15",
-    "@tmagic/design": "1.2.0-beta.15",
-    "@tmagic/form": "1.2.0-beta.15",
-    "@tmagic/schema": "1.2.0-beta.15",
-    "@tmagic/stage": "1.2.0-beta.15",
-    "@tmagic/utils": "1.2.0-beta.15",
+    "@tmagic/core": "1.2.0-beta.17",
+    "@tmagic/design": "1.2.0-beta.17",
+    "@tmagic/form": "1.2.0-beta.17",
+    "@tmagic/schema": "1.2.0-beta.17",
+    "@tmagic/stage": "1.2.0-beta.17",
+    "@tmagic/utils": "1.2.0-beta.17",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -62,8 +62,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.2.0-beta.15",
-    "@tmagic/form": "1.2.0-beta.15",
+    "@tmagic/design": "1.2.0-beta.17",
+    "@tmagic/form": "1.2.0-beta.17",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },

package/src/layouts/PropsPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="m-editor-props-panel">
     <slot name="props-panel-header"></slot>
-    <m-form
+    <MForm
       ref="configForm"
       :class="`m-editor-props-panel ${propsPanelSize}`"
       :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
@@ -9,7 +9,7 @@
       :init-values="values"
       :config="curFormConfig"
       @change="submit"
-    ></m-form>
+    ></MForm>
   </div>
 </template>
 
@@ -17,7 +17,8 @@
 import { computed, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
-import type { FormValue, MForm } from '@tmagic/form';
+import type { FormValue } from '@tmagic/form';
+import { MForm } from '@tmagic/form';
 import type { MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 
@@ -32,7 +33,9 @@ const configForm = ref<InstanceType<typeof MForm>>();
 const curFormConfig = ref<any>([]);
 const services = inject<Services>('services');
 const node = computed(() => services?.editorService.get<MNode | null>('node'));
-const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
+const propsPanelSize = computed(
+  () => services?.uiService.get<'large' | 'default' | 'small'>('propsPanelSize') || 'small',
+);
 const stage = computed(() => services?.editorService.get<StageCore>('stage'));
 
 const init = async () => {

package/src/layouts/sidebar/LayerPanel.vue

@@ -1,67 +1,68 @@
 <template>
-  <div ref="layerPanel">
-    <TMagicScrollbar class="magic-editor-layer-panel">
-      <slot name="layer-panel-header"></slot>
-
-      <TMagicInput
-        v-model="filterText"
-        class="search-input"
-        size="small"
-        placeholder="输入关键字进行过滤"
-        clearable
-        :prefix-icon="Search"
-        @change="filterTextChangeHandler"
-      ></TMagicInput>
-
-      <TMagicTree
-        v-if="values.length"
-        class="magic-editor-layer-tree"
-        ref="tree"
-        node-key="id"
-        empty-text="页面空荡荡的"
-        draggable
-        :default-expanded-keys="defaultExpandedKeys"
-        :load="loadItems"
-        :data="values"
-        :default-expand-all="true"
-        :expand-on-click-node="false"
-        :highlight-current="true"
-        :props="{
-          children: 'items',
-        }"
-        :filter-node-method="filterNode"
-        :allow-drop="allowDrop"
-        :show-checkbox="isMultiSelectStatus || selectedIds.length > 1"
-        @node-click="clickHandler"
-        @node-contextmenu="contextmenu"
-        @node-drag-end="handleDragEnd"
-        @node-collapse="handleCollapse"
-        @node-expand="handleExpand"
-        @check="multiClickHandler"
-        @mousedown="toggleClickFlag"
-        @mouseup="toggleClickFlag"
-      >
-        <template #default="{ node, data }">
-          <div
-            :id="data.id"
-            class="cus-tree-node"
-            @mouseenter="highlightHandler(data)"
-            :class="{ 'cus-tree-node-hover': canHighlight(data) }"
-          >
-            <slot name="layer-node-content" :node="node" :data="data">
-              <span>
-                {{ `${data.name} (${data.id})` }}
-              </span>
-            </slot>
-          </div>
-        </template>
-      </TMagicTree>
-
-      <Teleport to="body">
-        <LayerMenu ref="menu" :layer-content-menu="layerContentMenu"></LayerMenu>
-      </Teleport>
-    </TMagicScrollbar>
-  </div>
+  <TMagicScrollbar class="magic-editor-layer-panel">
+    <slot name="layer-panel-header"></slot>
+
+    <TMagicInput
+      v-model="filterText"
+      class="search-input"
+      size="small"
+      placeholder="输入关键字进行过滤"
+      clearable
+      :prefix-icon="Search"
+      @change="filterTextChangeHandler"
+    ></TMagicInput>
+
+    <TMagicTree
+      v-if="values.length"
+      tabindex="-1"
+      class="magic-editor-layer-tree"
+      ref="tree"
+      node-key="id"
+      empty-text="页面空荡荡的"
+      draggable
+      :default-expanded-keys="defaultExpandedKeys"
+      :load="loadItems"
+      :data="values"
+      :default-expand-all="true"
+      :expand-on-click-node="false"
+      :highlight-current="true"
+      :props="{
+        children: 'items',
+      }"
+      :filter-node-method="filterNode"
+      :allow-drop="allowDrop"
+      :show-checkbox="isMultiSelectStatus || selectedIds.length > 1"
+      @node-click="clickHandler"
+      @node-contextmenu="contextmenu"
+      @node-drag-end="handleDragEnd"
+      @node-collapse="handleCollapse"
+      @node-expand="handleExpand"
+      @check="multiClickHandler"
+      @mousedown="toggleClickFlag"
+      @mouseup="toggleClickFlag"
+      @mouseenter="mouseenterHandler"
+      @mouseleave="mouseleaveHandler"
+    >
+      <template #default="{ node, data }">
+        <div
+          :id="data.id"
+          class="cus-tree-node"
+          @mouseenter="highlightHandler(data)"
+          :class="{ 'cus-tree-node-hover': canHighlight(data) }"
+        >
+          <slot name="layer-node-content" :node="node" :data="data">
+            <span>
+              {{ `${data.name} (${data.id})` }}
+            </span>
+          </slot>
+        </div>
+      </template>
+    </TMagicTree>
+
+    <Teleport to="body">
+      <LayerMenu ref="menu" :layer-content-menu="layerContentMenu"></LayerMenu>
+    </Teleport>
+  </TMagicScrollbar>
 </template>
 
 <script lang="ts" setup name="MEditorLayerPanel">
@@ -263,24 +264,19 @@ watch([selectedIds, tree], async () => {
   setTreeKeyStatus();
 });
 
-const layerPanel = ref<HTMLDivElement>();
 const mouseenterHandler = () => {
-  layerPanel.value?.focus();
+  tree.value?.$el.focus();
 };
 
 const mouseleaveHandler = () => {
-  layerPanel.value?.blur();
-  // 如果鼠标移出监听范围，且当前只选中了一个，置为单选模式(修复按住ctrl不放但鼠标移出的情况)
-  if (selectedIds.value.length === 1) isMultiSelectStatus.value = false;
+  tree.value?.$el.blur();
+  isMultiSelectStatus.value = false;
 };
 
 let keycon: KeyController;
 
 onMounted(() => {
-  layerPanel.value?.addEventListener('mouseenter', mouseenterHandler);
-  layerPanel.value?.addEventListener('mouseleave', mouseleaveHandler);
-
-  keycon = new KeyController(layerPanel.value);
+  keycon = new KeyController(tree.value?.$el);
   const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
   const ctrl = isMac ? 'meta' : 'ctrl';
 
@@ -289,9 +285,6 @@ onMounted(() => {
       e.inputEvent.preventDefault();
       isMultiSelectStatus.value = true;
     })
-    .on('blur', () => {
-      isMultiSelectStatus.value = false;
-    })
     .keyup(ctrl, (e) => {
       e.inputEvent.preventDefault();
       isMultiSelectStatus.value = false;
@@ -299,8 +292,6 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  layerPanel.value?.removeEventListener('mouseenter', mouseenterHandler);
-  layerPanel.value?.removeEventListener('mouseleave', mouseleaveHandler);
   keycon.destroy();
 });