v1.0.0-beta.5

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "npmClient": "npm",
   "packages": [
     "packages/*",

packages/core/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "name": "@tmagic/core",
   "sideEffects": false,
   "main": "dist/tmagic-core.umd.js",
@@ -26,7 +26,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/schema": "^1.0.0-beta.3",
+    "@tmagic/schema": "^1.0.0-beta.5",
     "events": "^3.3.0"
   },
   "devDependencies": {

packages/editor/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tmagic/editor",
-	"version": "1.0.0-beta.3",
+	"version": "1.0.0-beta.5",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

packages/editor/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "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.3",
-    "@tmagic/form": "^1.0.0-beta.3",
-    "@tmagic/schema": "^1.0.0-beta.3",
-    "@tmagic/stage": "^1.0.0-beta.3",
-    "@tmagic/utils": "^1.0.0-beta.3",
+    "@tmagic/core": "^1.0.0-beta.5",
+    "@tmagic/form": "^1.0.0-beta.5",
+    "@tmagic/schema": "^1.0.0-beta.5",
+    "@tmagic/stage": "^1.0.0-beta.5",
+    "@tmagic/utils": "^1.0.0-beta.5",
     "color": "^3.1.3",
     "element-plus": "^2.0.2",
     "events": "^3.3.0",

packages/editor/src/components/ScrollViewer.vue

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

packages/editor/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')),
     };
   },
 });

packages/editor/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)) || [];
     };
 

packages/editor/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,
@@ -292,7 +291,11 @@ class Editor extends BaseService {
 
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get<MApp>('root'));
 
-    defaults(newConfig, node);
+    newConfig = mergeWith(node, newConfig, (objValue, srcValue) => {
+      if (Array.isArray(srcValue)) {
+        return srcValue;
+      }
+    });
 
     if (!newConfig.type) throw new Error('配置缺少type值');
 

packages/editor/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 {

packages/editor/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;

packages/editor/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;
-};

packages/editor/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;

packages/form/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tmagic/form",
-	"version": "1.0.0-beta.3",
+	"version": "1.0.0-beta.5",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

packages/form/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "name": "@tmagic/form",
   "sideEffects": false,
   "main": "dist/tmagic-form.umd.js",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/utils": "^1.0.0-beta.3",
+    "@tmagic/utils": "^1.0.0-beta.5",
     "element-plus": "^2.0.2",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.1",

packages/schema/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "name": "@tmagic/schema",
   "sideEffects": false,
   "main": "src/index.ts",

packages/stage/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "name": "@tmagic/stage",
   "sideEffects": false,
   "main": "dist/tmagic-stage.umd.js",
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/schema": "^1.0.0-beta.3",
-    "@tmagic/utils": "^1.0.0-beta.3",
+    "@tmagic/schema": "^1.0.0-beta.5",
+    "@tmagic/utils": "^1.0.0-beta.5",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
     "moveable": "^0.25.3"

packages/table/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tmagic/table",
-	"version": "1.0.0-beta.3",
+	"version": "1.0.0-beta.5",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

packages/table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "name": "@tmagic/table",
   "sideEffects": false,
   "main": "dist/tmagic-table.umd.js",
@@ -26,7 +26,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form": "^1.0.0-beta.3",
+    "@tmagic/form": "^1.0.0-beta.5",
     "element-plus": "^2.0.2",
     "lodash-es": "^4.17.21",
     "vue": "^3.2.0"

packages/ui-react/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tmagic/ui-react",
-	"version": "1.0.0-beta.3",
+	"version": "1.0.0-beta.5",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

packages/ui-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmagic/ui-react",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "main": "src/index.ts",
   "engines": {
     "node": ">=14"
@@ -13,7 +13,7 @@
     "react:build": "tsc && vite build"
   },
   "dependencies": {
-    "@tmagic/schema": "^1.0.0-beta.3",
+    "@tmagic/schema": "^1.0.0-beta.5",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

packages/ui-vue2/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tmagic/ui-vue2",
-	"version": "1.0.0-beta.3",
+	"version": "1.0.0-beta.5",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

packages/ui-vue2/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "name": "@tmagic/ui-vue2",
   "main": "src/index.ts",
   "scripts": {

packages/ui/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tmagic/ui",
-	"version": "1.0.0-beta.3",
+	"version": "1.0.0-beta.5",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

packages/ui/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "name": "@tmagic/ui",
   "main": "src/index.ts",
   "engines": {
@@ -10,7 +10,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/schema": "^1.0.0-beta.3",
+    "@tmagic/schema": "^1.0.0-beta.5",
     "delegate": "^3.2.0",
     "tiny-emitter": "^2.1.0",
     "vue": "^3.2.0"

packages/utils/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "name": "@tmagic/utils",
   "main": "dist/tmagic-utils.umd.js",
   "module": "dist/tmagic-utils.es.js",

playground/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "tmagic-playground",
-	"version": "1.0.0-beta.3",
+	"version": "1.0.0-beta.5",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tmagic-playground",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -9,11 +9,11 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/editor": "^1.0.0-beta.3",
-    "@tmagic/form": "^1.0.0-beta.3",
-    "@tmagic/schema": "^1.0.0-beta.3",
-    "@tmagic/stage": "^1.0.0-beta.3",
-    "@tmagic/utils": "^1.0.0-beta.3",
+    "@tmagic/editor": "^1.0.0-beta.5",
+    "@tmagic/form": "^1.0.0-beta.5",
+    "@tmagic/schema": "^1.0.0-beta.5",
+    "@tmagic/stage": "^1.0.0-beta.5",
+    "@tmagic/utils": "^1.0.0-beta.5",
     "element-plus": "^2.0.2",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.2.0",

runtime/react/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "runtime-react",
-	"version": "1.0.0-beta.3",
+	"version": "1.0.0-beta.5",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

runtime/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-react",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "private": true,
   "scripts": {
     "dev": "npm run build && npm run serve",

runtime/vue2/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "runtime-vue2",
-	"version": "1.0.0-beta.3",
+	"version": "1.0.0-beta.5",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

runtime/vue2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-vue2",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "private": true,
   "scripts": {
     "dev": "npm run build && npm run serve",

runtime/vue3/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "runtime-vue3",
-	"version": "1.0.0-beta.3",
+	"version": "1.0.0-beta.5",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

runtime/vue3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-vue3",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "private": true,
   "scripts": {
     "dev": "npm run build && npm run serve",