@tmagic/editor 1.0.0-beta.4 → 1.0.0-beta.7

package/dist/types/src/layouts/NavMenu.vue.d.ts

@@ -1,5 +1,5 @@
 import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
-import { MenuBarData } from '../type';
+import { GetColumnWidth, MenuBarData } from '../type';
 declare const _default: DefineComponent<{
     data: {
         type: PropType<MenuBarData>;
@@ -10,6 +10,7 @@ declare const _default: DefineComponent<{
     };
 }, {
     keys: ComputedRef<(keyof MenuBarData)[]>;
+    columnWidth: ComputedRef<GetColumnWidth | undefined>;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     data: {
         type: PropType<MenuBarData>;

package/dist/types/src/utils/editor.d.ts

@@ -42,4 +42,3 @@ export declare const initPosition: (node: MNode, layout: Layout) => MNode;
 export declare const setLayout: (node: MNode, layout: Layout) => MNode;
 export declare const change2Fixed: (node: MNode, root: MApp) => MNode;
 export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (node: MNode) => Promise<Layout>) => Promise<MNode>;
-export declare const defaults: (object: any, source: any) => any;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.7",
   "name": "@tmagic/editor",
   "sideEffects": false,
   "main": "dist/tmagic-editor.umd.js",
@@ -28,11 +28,11 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-beta.4",
-    "@tmagic/form": "^1.0.0-beta.4",
-    "@tmagic/schema": "^1.0.0-beta.4",
-    "@tmagic/stage": "^1.0.0-beta.4",
-    "@tmagic/utils": "^1.0.0-beta.4",
+    "@tmagic/core": "^1.0.0-beta.6",
+    "@tmagic/form": "^1.0.0-beta.6",
+    "@tmagic/schema": "^1.0.0-beta.6",
+    "@tmagic/stage": "^1.0.0-beta.7",
+    "@tmagic/utils": "^1.0.0-beta.6",
     "color": "^3.1.3",
     "element-plus": "^2.0.2",
     "events": "^3.3.0",

package/src/components/ScrollViewer.vue

@@ -57,6 +57,7 @@ export default defineComponent({
         width: ${props.width}px;
         height: ${props.height}px;
         position: absolute;
+        margin-top: 30px;
       `,
       ),
     };

package/src/layouts/NavMenu.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
-    <div v-for="key in keys" :class="`menu-${key}`" :key="key">
+    <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
       <tool-button :data="item" v-for="(item, index) in data[key]" :key="index"></tool-button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { computed, defineComponent, inject, PropType } from 'vue';
 
 import ToolButton from '@editor/components/ToolButton.vue';
-import { MenuBarData } from '@editor/type';
+import { GetColumnWidth, MenuBarData, Services } from '@editor/type';
 
 export default defineComponent({
   name: 'nav-menu',
@@ -29,8 +29,12 @@ export default defineComponent({
   },
 
   setup(props) {
+    const services = inject<Services>('services');
+
     return {
       keys: computed(() => Object.keys(props.data) as Array<keyof MenuBarData>),
+
+      columnWidth: computed(() => services?.uiService.get<GetColumnWidth>('columnWidth')),
     };
   },
 });

package/src/layouts/PropsPanel.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
+import { computed, defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
 import { ElMessage } from 'element-plus';
 
 import type { FormValue, MForm } from '@tmagic/form';
@@ -30,21 +30,16 @@ export default defineComponent({
     // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
     const curFormConfig = ref<any>([]);
     const services = inject<Services>('services');
+    const node = computed(() => services?.editorService.get<MNode | null>('node'));
 
     const init = async () => {
-      const node = services?.editorService.get<MNode | null>('node');
-
-      if (!node) {
+      if (!node.value) {
         curFormConfig.value = [];
         return;
       }
 
-      if (node.devconfig && node.style && !isNaN(+node.style.height) && !isNaN(+node.style.width)) {
-        node.devconfig.ratio = node.style.height / node.style.width || 1;
-      }
-
-      values.value = node;
-      const type = node.type || (node.items ? 'container' : 'text');
+      values.value = node.value;
+      const type = node.value.type || (node.value.items ? 'container' : 'text');
       curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
     };
 

package/src/services/editor.ts

@@ -17,7 +17,7 @@
  */
 
 import { reactive, toRaw } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, mergeWith } from 'lodash-es';
 import serialize from 'serialize-javascript';
 
 import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
@@ -31,7 +31,6 @@ import { LayerOffset, Layout } from '@editor/type';
 import {
   change2Fixed,
   COPY_STORAGE_KEY,
-  defaults,
   Fixed2Other,
   getNodeIndex,
   initPosition,
@@ -185,6 +184,10 @@ class Editor extends BaseService {
     const { node, parent, page } = this.getNodeInfo(id);
     if (!node) throw new Error('获取不到组件信息');
 
+    if (node.id === this.state.root?.id) {
+      throw new Error('不能选根节点');
+    }
+
     this.set('node', node);
     this.set('page', page || null);
     this.set('parent', parent || null);
@@ -292,7 +295,11 @@ class Editor extends BaseService {
 
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get<MApp>('root'));
 
-    defaults(newConfig, node);
+    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue) => {
+      if (Array.isArray(srcValue)) {
+        return srcValue;
+      }
+    });
 
     if (!newConfig.type) throw new Error('配置缺少type值');
 

package/src/theme/nav-menu.scss

@@ -21,12 +21,12 @@
     align-items: center;
   }
 
-  .menu-left {
-    padding-left: 16px;
+  .menu-center {
+    justify-content: center;
   }
 
   .menu-right {
-    padding-right: 16px;
+    justify-content: flex-end;
   }
 
   .menu-item {

package/src/theme/stage.scss

@@ -15,6 +15,7 @@
   position: relative;
   border: 1px solid $--border-color;
   transition: transform 0.3s;
+  box-sizing: content-box;
 
   &::-webkit-scrollbar {
     width: 0 !important;

package/src/utils/editor.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cloneDeep, random } from 'lodash-es';
+import { random } from 'lodash-es';
 
 import { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import { getNodePath, isPop } from '@tmagic/utils';
@@ -223,22 +223,3 @@ export const Fixed2Other = async (node: MNode, root: MApp, getLayout: (node: MNo
 
   return toRelative(node);
 };
-
-export const defaults = (object: any, source: any) => {
-  let o = source;
-  if (Array.isArray(object)) {
-    o = object;
-  }
-
-  Object.entries(o).forEach(([key, value]: [string, any]) => {
-    if (typeof object[key] === 'undefined') {
-      object[key] = value;
-      return;
-    }
-
-    if (value && typeof value !== 'string' && Object.keys(value).length) {
-      object[key] = defaults(cloneDeep(object[key]), value);
-    }
-  });
-  return object;
-};

package/src/utils/scroll-viewer.ts

@@ -25,7 +25,8 @@ export class ScrollViewer {
       const { width, height } = contentRect;
       const targetRect = this.target.getBoundingClientRect();
       const targetWidth = targetRect.width * this.zoom;
-      const targetHeight = targetRect.height * this.zoom;
+      const targetMarginTop = Number(this.target.style.marginTop) || 0;
+      const targetHeight = (targetRect.height + targetMarginTop) * this.zoom;
 
       if (targetWidth < width) {
         (this.target as any)._left = 0;
@@ -154,11 +155,13 @@ export class ScrollViewer {
       event.preventDefault();
       event.stopImmediatePropagation();
       event.stopPropagation();
-    } else if (this.keydown) return;
+    }
 
-    this.keydown = true;
+    if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
+      return;
+    }
 
-    event.preventDefault();
+    this.keydown = true;
 
     this.target.style.cursor = 'grab';
     this.container.addEventListener('mousedown', this.mousedownHandler);