@tmagic/editor 1.1.4 → 1.1.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.4",
+  "version": "1.1.6",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,14 +45,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.1.4",
-    "@tmagic/form": "1.1.4",
-    "@tmagic/schema": "1.1.4",
-    "@tmagic/stage": "1.1.4",
-    "@tmagic/utils": "1.1.4",
+    "@tmagic/core": "1.1.6",
+    "@tmagic/form": "1.1.6",
+    "@tmagic/schema": "1.1.6",
+    "@tmagic/stage": "1.1.6",
+    "@tmagic/utils": "1.1.6",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
-    "element-plus": "^2.2.6",
+    "element-plus": "^2.2.17",
     "events": "^3.3.0",
     "gesto": "^1.7.0",
     "keycon": "^1.1.2",
@@ -62,8 +62,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.1.4",
-    "element-plus": "^2.2.6",
+    "@tmagic/form": "1.1.6",
+    "element-plus": "^2.2.17",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },
@@ -72,13 +72,13 @@
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
-    "@vitejs/plugin-vue": "^3.0.1",
+    "@vitejs/plugin-vue": "^3.1.0",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.0",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
-    "vite": "^3.0.4",
+    "vite": "^3.1.3",
     "vue-tsc": "^0.39.4"
   }
 }

package/src/Editor.vue

@@ -11,6 +11,10 @@
             <slot name="layer-panel-header"></slot>
           </template>
 
+          <template #layer-node-content="{ node, data }">
+            <slot name="layer-node-content" :data="data" :node="node"></slot>
+          </template>
+
           <template #component-list-panel-header>
             <slot name="component-list-panel-header"></slot>
           </template>
@@ -277,8 +281,6 @@ export default defineComponent({
       },
     );
 
-    uiService.initColumnWidth();
-
     onUnmounted(() => {
       editorService.destroy();
       historyService.destroy();

package/src/fields/Code.vue

@@ -7,29 +7,25 @@
   ></magic-code-editor>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
 
-export default defineComponent({
-  name: 'm-fields-vs-code',
+const emit = defineEmits(['change']);
 
-  props: ['model', 'name', 'config', 'prop'],
+const props = defineProps<{
+  model: any;
+  name: string;
+  config: {
+    language?: string;
+  };
+  prop: string;
+}>();
 
-  emits: ['change'],
+const language = computed(() => props.config.language || 'javascript');
+const height = computed(() => `${document.body.clientHeight - 168}px`);
 
-  setup(props, { emit }) {
-    const language = computed(() => props.config.language || 'javascript');
-    const height = computed(() => `${document.body.clientHeight - 168}px`);
-
-    return {
-      height,
-      language,
-
-      save(v: string) {
-        props.model[props.name] = v;
-        emit('change', v);
-      },
-    };
-  },
-});
+const save = (v: string) => {
+  props.model[props.name] = v;
+  emit('change', v);
+};
 </script>

package/src/fields/CodeLink.vue

@@ -2,80 +2,66 @@
   <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, ref, watchEffect } from 'vue';
+<script lang="ts" setup>
+import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
-interface CodeLinkConfig {
-  type: 'code-link';
+const props = defineProps<{
+  config: {
+    type: 'code-link';
+    name: string;
+    text?: string;
+    formTitle?: string;
+  };
+  model: any;
   name: string;
-  text?: string;
-  formTitle?: string;
-}
+  prop: string;
+}>();
 
-export default defineComponent({
-  name: 'm-fields-code-link',
+const emit = defineEmits(['change']);
 
-  props: {
-    config: {
-      type: Object as PropType<CodeLinkConfig>,
+const formConfig = computed(() => ({
+  ...props.config,
+  text: '',
+  type: 'link',
+  form: [
+    {
+      name: props.name,
+      type: 'vs-code',
     },
+  ],
+}));
 
-    model: {
-      type: Object,
-    },
-
-    name: {
-      type: String,
-    },
-
-    prop: {
-      type: String,
-    },
+const modelValue = reactive<{ form: Record<string, string> }>({
+  form: {
+    [props.name]: '',
   },
+});
 
-  emits: ['change'],
-
-  setup(props, { emit }) {
-    const modelValue = ref<{ form: Record<string, any> }>({
-      form: {},
-    });
-
-    watchEffect(() => {
-      if (!props.model || !props.name) return;
-      modelValue.value.form[props.name] = serialize(props.model[props.name], {
+watch(
+  () => props.model[props.name],
+  (value) => {
+    modelValue.form = {
+      [props.name]: serialize(value, {
         space: 2,
         unsafe: true,
-      }).replace(/"(\w+)":\s/g, '$1: ');
-    });
-
-    return {
-      modelValue,
-
-      formConfig: computed(() => ({
-        ...props.config,
-        text: '',
-        type: 'link',
-        form: [
-          {
-            name: props.name,
-            type: 'vs-code',
-          },
-        ],
-      })),
-
-      changeHandler(v: Record<string, any>) {
-        if (!props.name || !props.model) return;
-
-        try {
-          // eslint-disable-next-line no-eval
-          props.model[props.name] = eval(`${v[props.name]}`);
-          emit('change', props.model[props.name]);
-        } catch (e) {
-          console.error(e);
-        }
-      },
+      }).replace(/"(\w+)":\s/g, '$1: '),
     };
   },
-});
+  {
+    immediate: true,
+  },
+);
+
+const changeHandler = (v: Record<string, any>) => {
+  if (!props.name || !props.model) return;
+
+  try {
+    // eslint-disable-next-line no-eval
+    props.model[props.name] = eval(`(${v[props.name]})`);
+    emit('change', props.model[props.name]);
+  } catch (e) {
+    console.error(e);
+  }
+};
 </script>

package/src/index.ts

@@ -59,8 +59,8 @@ export default {
 
     app.component(Editor.name, Editor);
     app.component('m-fields-ui-select', uiSelect);
-    app.component(CodeLink.name, CodeLink);
-    app.component(Code.name, Code);
+    app.component('m-fields-code-link', CodeLink);
+    app.component('m-fields-vs-code', Code);
     app.component(CodeEditor.name, CodeEditor);
   },
 };

package/src/layouts/Framework.vue

@@ -10,77 +10,107 @@
       @save="saveCode"
     ></magic-code-editor>
 
-    <div class="m-editor-content" v-else>
-      <div class="m-editor-framework-left" :style="`width: ${columnWidth?.left}px`">
+    <layout
+      v-else
+      class="m-editor-content"
+      left-class="m-editor-framework-left"
+      center-class="m-editor-framework-center"
+      right-class="m-editor-framework-right"
+      v-model:left="columnWidth.left"
+      v-model:right="columnWidth.right"
+      :min-left="45"
+      :min-right="1"
+      @change="columnWidthChange"
+    >
+      <template #left>
         <slot name="sidebar"></slot>
-      </div>
-
-      <resizer type="left"></resizer>
-
-      <template v-if="pageLength > 0">
-        <div class="m-editor-framework-center" :style="`width: ${columnWidth?.center}px`">
-          <slot name="workspace"></slot>
-        </div>
-
-        <resizer type="right"></resizer>
+      </template>
 
-        <div class="m-editor-framework-right" :style="`width: ${columnWidth?.right}px`">
-          <el-scrollbar>
-            <slot name="props-panel"></slot>
-          </el-scrollbar>
-        </div>
+      <template #center>
+        <slot v-if="pageLength > 0" name="workspace"></slot>
+        <slot v-else name="empty">
+          <add-page-box></add-page-box>
+        </slot>
       </template>
 
-      <slot v-else name="empty">
-        <add-page-box></add-page-box>
-      </slot>
-    </div>
+      <template v-if="pageLength > 0" #right>
+        <el-scrollbar>
+          <slot name="props-panel"></slot>
+        </el-scrollbar>
+      </template>
+    </layout>
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, ref, watchEffect } from 'vue';
 
 import type { MApp } from '@tmagic/schema';
 
 import { GetColumnWidth, Services } from '../type';
 
 import AddPageBox from './AddPageBox.vue';
-import Resizer from './Resizer.vue';
+import Layout from './Layout.vue';
 
-export default defineComponent({
-  components: {
-    AddPageBox,
-    Resizer,
-  },
+const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 
-  props: {
-    codeOptions: {
-      type: Object,
-      default: () => ({}),
-    },
+withDefaults(
+  defineProps<{
+    codeOptions?: Record<string, any>;
+  }>(),
+  {
+    codeOptions: () => ({}),
   },
+);
 
-  setup() {
-    const { editorService, uiService } = inject<Services>('services') || {};
-
-    const root = computed(() => editorService?.get<MApp>('root'));
-
-    return {
-      root,
-      pageLength: computed(() => editorService?.get<number>('pageLength') || 0),
-      showSrc: computed(() => uiService?.get<boolean>('showSrc')),
-      columnWidth: computed(() => uiService?.get<GetColumnWidth>('columnWidth')),
-
-      saveCode(value: string) {
-        try {
-          // eslint-disable-next-line no-eval
-          editorService?.set('root', eval(value));
-        } catch (e: any) {
-          console.error(e);
-        }
-      },
-    };
-  },
+const { editorService, uiService } = inject<Services>('services') || {};
+
+const root = computed(() => editorService?.get<MApp>('root'));
+
+const pageLength = computed(() => editorService?.get<number>('pageLength') || 0);
+const showSrc = computed(() => uiService?.get<boolean>('showSrc'));
+const columnWidth = ref<Partial<GetColumnWidth>>({
+  left: DEFAULT_LEFT_COLUMN_WIDTH,
+  center: 0,
+  right: 0,
+});
+uiService?.set('columnWidth', columnWidth.value);
+
+watchEffect(() => {
+  if (pageLength.value <= 0) {
+    columnWidth.value.right = undefined;
+    columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH;
+  } else {
+    columnWidth.value.right = columnWidth.value.right || DEFAULT_RIGHT_COLUMN_WIDTH;
+    columnWidth.value.center =
+      globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH;
+  }
 });
+
+const saveCode = (value: string) => {
+  try {
+    // eslint-disable-next-line no-eval
+    editorService?.set('root', eval(value));
+  } catch (e: any) {
+    console.error(e);
+  }
+};
+
+const COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorColumnWidthData';
+
+const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
+if (columnWidthCacheData) {
+  try {
+    const columnWidthCache = JSON.parse(columnWidthCacheData);
+    columnWidth.value = columnWidthCache;
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+const columnWidthChange = (columnWidth: GetColumnWidth) => {
+  uiService?.set('columnWidth', columnWidth);
+  globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth));
+};
 </script>

package/src/layouts/Layout.vue

@@ -0,0 +1,100 @@
+<template>
+  <div ref="el">
+    <template v-if="typeof props.left !== 'undefined'">
+      <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
+        <slot name="left"></slot>
+      </div>
+      <Resizer @change="changeLeft"></Resizer>
+    </template>
+
+    <div class="m-editor-layout-center" :class="centerClass" :style="`width: ${center}px`">
+      <slot name="center"></slot>
+    </div>
+
+    <template v-if="typeof props.right !== 'undefined'">
+      <Resizer @change="changeRight"></Resizer>
+      <div class="m-editor-layout-right" :class="rightClass" :style="`width: ${right}px`">
+        <slot name="right"></slot>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+
+import Resizer from './Resizer.vue';
+
+const emit = defineEmits(['update:left', 'change', 'update:right']);
+
+const props = withDefaults(
+  defineProps<{
+    left?: number;
+    right?: number;
+    minLeft?: number;
+    minRight?: number;
+    leftClass?: string;
+    rightClass?: string;
+    centerClass?: string;
+  }>(),
+  {
+    minLeft: 1,
+    minRight: 1,
+  },
+);
+
+const el = ref<HTMLElement>();
+
+let clientWidth = 0;
+const resizerObserver = new ResizeObserver((entries) => {
+  for (const { contentRect } of entries) {
+    clientWidth = contentRect.width;
+
+    center.value = clientWidth - (props.left || 0) - (props.right || 0);
+
+    emit('change', {
+      left: props.left,
+      center: center.value,
+      right: props.right,
+    });
+  }
+});
+
+onMounted(() => {
+  if (el.value) {
+    resizerObserver.observe(el.value);
+  }
+});
+
+onUnmounted(() => {
+  resizerObserver.disconnect();
+});
+
+const center = ref(0);
+
+const changeLeft = (deltaX: number) => {
+  if (typeof props.left === 'undefined') return;
+  const left = Math.max(props.left + deltaX, props.minLeft) || 0;
+  emit('update:left', left);
+  center.value = clientWidth - left - (props.right || 0);
+
+  emit('change', {
+    left,
+    center: center.value,
+    right: props.right,
+  });
+};
+
+const changeRight = (deltaX: number) => {
+  if (typeof props.right === 'undefined') return;
+  const right = Math.max(props.right - deltaX, props.minRight) || 0;
+  emit('update:right', right);
+  center.value = clientWidth - (props.left || 0) - right;
+
+  emit('change', {
+    left: props.left,
+    center: center.value,
+    right,
+  });
+};
+</script>

package/src/layouts/Resizer.vue

@@ -4,58 +4,29 @@
   </span>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, onMounted, onUnmounted, ref, toRaw } from 'vue';
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 
-import { Services } from '../type';
+const emit = defineEmits(['change']);
 
-export default defineComponent({
-  name: 'm-editor-resize',
+const target = ref<HTMLSpanElement>();
 
-  props: {
-    type: {
-      type: String,
-    },
-  },
+let getso: Gesto;
 
-  setup(props) {
-    const services = inject<Services>('services');
+onMounted(() => {
+  if (!target.value) return;
+  getso = new Gesto(target.value, {
+    container: window,
+    pinchOutside: true,
+  }).on('drag', (e) => {
+    if (!target.value) return;
 
-    const target = ref<HTMLSpanElement>();
-
-    let getso: Gesto;
-
-    onMounted(() => {
-      if (!target.value) return;
-      getso = new Gesto(target.value, {
-        container: window,
-        pinchOutside: true,
-      }).on('drag', (e) => {
-        if (!target.value || !services) return;
-
-        let { left, right } = {
-          ...toRaw(services.uiService.get('columnWidth')),
-        };
-        if (props.type === 'left') {
-          left += e.deltaX;
-        } else if (props.type === 'right') {
-          right -= e.deltaX;
-        }
-        services.uiService.set('columnWidth', {
-          left,
-          right,
-        });
-      });
-    });
-
-    onUnmounted(() => {
-      getso?.unset();
-    });
+    emit('change', e.deltaX);
+  });
+});
 
-    return {
-      target,
-    };
-  },
+onUnmounted(() => {
+  getso?.unset();
 });
 </script>

package/src/layouts/sidebar/Sidebar.vue

@@ -11,6 +11,10 @@
         <slot name="layer-panel-header"></slot>
       </template>
 
+      <template #layer-node-content="{ node, data }" v-if="item === 'layer'">
+        <slot name="layer-node-content" :data="data" :node="node"></slot>
+      </template>
+
       <template #component-list-panel-header v-if="item === 'component-list'">
         <slot name="component-list-panel-header"></slot>
       </template>

package/src/layouts/sidebar/TabPane.vue

@@ -30,8 +30,17 @@
         <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
       </template>
 
-      <template #layer-node-content="{ data, node }" v-if="config.slots?.layerNodeContent">
-        <component :is="config.slots?.layerNodeContent" :data="data" :node="node" />
+      <template
+        #layer-node-content="{ data: nodeData, node }"
+        v-if="data === 'layer' || config.slots?.layerNodeContent"
+      >
+        <slot v-if="data === 'layer'" name="layer-node-content" :data="nodeData" :node="node"></slot>
+        <component
+          v-else-if="config.slots?.layerNodeContent"
+          :is="config.slots.layerNodeContent"
+          :data="nodeData"
+          :node="node"
+        />
       </template>
     </component>
   </el-tab-pane>

package/src/services/editor.ts

@@ -315,9 +315,12 @@ class Editor extends BaseService {
       root: cloneDeep(root),
     });
 
-    node.style = fixNodePosition(node, parent, stage);
+    const newStyle = fixNodePosition(node, parent, stage);
 
-    await stage?.update({ config: cloneDeep(node), parentId: parent.id, root: cloneDeep(root) });
+    if (newStyle && (newStyle.top !== node.style.top || newStyle.left !== node.style.left)) {
+      node.style = newStyle;
+      await stage?.update({ config: cloneDeep(node), parentId: parent.id, root: cloneDeep(root) });
+    }
 
     this.addModifiedNodeId(node.id);