@tmagic/editor 1.1.0-beta.3 → 1.1.0-beta.6

package/src/fields/UISelect.vue

@@ -12,89 +12,69 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, markRaw, ref } from 'vue';
-import { Close, Delete, Pointer } from '@element-plus/icons-vue';
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+import { Close, Delete } from '@element-plus/icons-vue';
 
 import { FormState } from '@tmagic/form';
 
-import { Services } from '@editor/type';
+import { Services } from '../type';
 
-export default defineComponent({
-  name: 'm-fields-ui-select',
+const props = defineProps<{
+  labelWidth: string;
+  config: any;
+  model: any;
+  prop: string;
+  name: string;
+}>();
 
-  props: {
-    labelWidth: String,
-    config: Object,
-    model: Object,
-    prop: {
-      type: String,
-      default() {
-        return '';
-      },
-    },
-    name: String,
-  },
+const emit = defineEmits(['change']);
 
-  emits: ['change'],
+const services = inject<Services>('services');
+const mForm = inject<FormState>('mForm');
+const val = computed(() => props.model[props.name]);
+const uiSelectMode = ref(false);
 
-  setup(props: any, { emit }) {
-    const services = inject<Services>('services');
-    const mForm = inject<FormState>('mForm');
-    const val = computed(() => props.model[props.name]);
-    const uiSelectMode = ref(false);
+const cancelHandler = () => {
+  if (!services?.uiService) return;
+  services.uiService.set<boolean>('uiSelectMode', false);
+  uiSelectMode.value = false;
+  globalThis.document.removeEventListener('ui-select', clickHandler as EventListener);
+};
 
-    const cancelHandler = () => {
-      if (!services?.uiService) return;
-      services.uiService.set<boolean>('uiSelectMode', false);
-      uiSelectMode.value = false;
-      globalThis.document.removeEventListener('ui-select', clickHandler as EventListener);
-    };
-
-    const clickHandler = ({ detail }: Event & { detail: any }) => {
-      if (detail.id) {
-        props.model[props.name] = detail.id;
-        emit('change', detail.id);
-        mForm?.$emit('field-change', props.prop, detail.id);
-      }
-
-      if (cancelHandler) {
-        cancelHandler();
-      }
-    };
-
-    return {
-      Delete: markRaw(Delete),
-      Pointer: markRaw(Pointer),
-      Close: markRaw(Close),
+const clickHandler = ({ detail }: Event & { detail: any }) => {
+  if (detail.id) {
+    props.model[props.name] = detail.id;
+    emit('change', detail.id);
+    mForm?.$emit('field-change', props.prop, detail.id);
+  }
 
-      val,
-      uiSelectMode,
-      toName: computed(() => {
-        const config = services?.editorService.getNodeById(val.value);
-        return config?.name || '';
-      }),
+  if (cancelHandler) {
+    cancelHandler();
+  }
+};
 
-      startSelect() {
-        if (!services?.uiService) return;
-        services.uiService.set<boolean>('uiSelectMode', true);
-        uiSelectMode.value = true;
-        globalThis.document.addEventListener('ui-select', clickHandler as EventListener);
-      },
+const toName = computed(() => {
+  const config = services?.editorService.getNodeById(val.value);
+  return config?.name || '';
+});
 
-      cancelHandler,
+const startSelect = () => {
+  if (!services?.uiService) return;
+  services.uiService.set<boolean>('uiSelectMode', true);
+  uiSelectMode.value = true;
+  globalThis.document.addEventListener('ui-select', clickHandler as EventListener);
+};
 
-      deleteHandler() {
-        if (props.model) {
-          props.model[props.name] = '';
-          emit('change', '');
-          mForm?.$emit('field-change', props.prop, '');
-        }
-      },
-    };
-  },
-});
+const deleteHandler = () => {
+  if (props.model) {
+    props.model[props.name] = '';
+    emit('change', '');
+    mForm?.$emit('field-change', props.prop, '');
+  }
+};
 </script>
+
 <style lang="scss">
 .m-fields-ui-select {
   cursor: pointer;

package/src/index.ts

@@ -37,6 +37,7 @@ export { default as TMagicCodeEditor } from './layouts/CodeEditor.vue';
 export { default as editorService } from './services/editor';
 export { default as propsService } from './services/props';
 export { default as historyService } from './services/history';
+export { default as storageService } from './services/storage';
 export { default as eventsService } from './services/events';
 export { default as uiService } from './services/ui';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';

package/src/layouts/AddPageBox.vue

@@ -17,8 +17,8 @@ import { Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
-import type { Services } from '@editor/type';
-import { generatePageNameByApp } from '@editor/utils';
+import type { Services } from '../type';
+import { generatePageNameByApp } from '../utils';
 
 export default defineComponent({
   components: { Plus },

package/src/layouts/Framework.vue

@@ -43,7 +43,7 @@ import { computed, defineComponent, inject } from 'vue';
 
 import type { MApp } from '@tmagic/schema';
 
-import { GetColumnWidth, Services } from '@editor/type';
+import { GetColumnWidth, Services } from '../type';
 
 import AddPageBox from './AddPageBox.vue';
 import Resizer from './Resizer.vue';

package/src/layouts/NavMenu.vue

@@ -9,8 +9,8 @@
 <script lang="ts">
 import { computed, defineComponent, inject, PropType } from 'vue';
 
-import ToolButton from '@editor/components/ToolButton.vue';
-import { GetColumnWidth, MenuBarData, Services } from '@editor/type';
+import ToolButton from '../components/ToolButton.vue';
+import { GetColumnWidth, MenuBarData, Services } from '../type';
 
 export default defineComponent({
   name: 'nav-menu',

package/src/layouts/PropsPanel.vue

@@ -20,7 +20,7 @@ import { ElMessage } from 'element-plus';
 import type { FormValue, MForm } from '@tmagic/form';
 import type { MNode } from '@tmagic/schema';
 
-import type { Services } from '@editor/type';
+import type { Services } from '../type';
 
 export default defineComponent({
   name: 'm-editor-props-panel',

package/src/layouts/Resizer.vue

@@ -8,7 +8,7 @@
 import { defineComponent, inject, onMounted, onUnmounted, ref, toRaw } from 'vue';
 import Gesto from 'gesto';
 
-import { Services } from '@editor/type';
+import { Services } from '../type';
 
 export default defineComponent({
   name: 'm-editor-resize',

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -43,8 +43,8 @@ import serialize from 'serialize-javascript';
 import type StageCore from '@tmagic/stage';
 import { removeClassNameByClassName } from '@tmagic/utils';
 
-import MIcon from '@editor/components/Icon.vue';
-import type { ComponentGroup, ComponentItem, Services, StageOptions } from '@editor/type';
+import MIcon from '../../components/Icon.vue';
+import type { ComponentGroup, ComponentItem, Services, StageOptions } from '../../type';
 
 export default defineComponent({
   name: 'ui-component-panel',

package/src/layouts/sidebar/LayerMenu.vue

@@ -8,8 +8,8 @@ import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
-import ContentMenu from '@editor/components/ContentMenu.vue';
-import type { ComponentGroup, MenuButton, MenuItem, Services } from '@editor/type';
+import ContentMenu from '../../components/ContentMenu.vue';
+import type { ComponentGroup, MenuButton, MenuItem, Services } from '../../type';
 
 export default defineComponent({
   components: { ContentMenu },

package/src/layouts/sidebar/LayerPanel.vue

@@ -61,11 +61,12 @@ import type { ElTree } from 'element-plus';
 import { throttle } from 'lodash-es';
 
 import type { MNode, MPage } from '@tmagic/schema';
-import { NodeType } from '@tmagic/schema';
+import { MContainer, NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 
-import type { EditorService } from '@editor/services/editor';
-import type { Services } from '@editor/type';
+import type { EditorService } from '../../services/editor';
+import type { Services } from '../../type';
+import { Layout } from '../../type';
 
 import LayerMenu from './LayerMenu.vue';
 
@@ -104,8 +105,16 @@ const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorServi
     return false;
   },
 
-  handleDragEnd() {
+  async handleDragEnd(e: any) {
     if (!tree.value) return;
+    const { data: node } = e;
+    const parent = editorService?.getParentById(node.id, false) as MContainer;
+    const layout = await editorService?.getLayout(parent);
+    node.style.position = layout;
+    if (layout === Layout.RELATIVE) {
+      node.style.top = 0;
+      node.style.left = 0;
+    }
     const { data } = tree.value;
     const [page] = data as [MPage];
     editorService?.update(page);

package/src/layouts/sidebar/Sidebar.vue

@@ -21,7 +21,7 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, watch } from 'vue';
 
-import { SideBarData } from '@editor/type';
+import { SideBarData } from '../../type';
 
 import TabPane from './TabPane.vue';
 

package/src/layouts/sidebar/TabPane.vue

@@ -29,8 +29,8 @@
 import { computed, defineComponent, PropType } from 'vue';
 import { Coin, Files } from '@element-plus/icons-vue';
 
-import MIcon from '@editor/components/Icon.vue';
-import { SideComponent, SideItem } from '@editor/type';
+import MIcon from '../../components/Icon.vue';
+import { SideComponent, SideItem } from '../../type';
 
 import ComponentListPanel from './ComponentListPanel.vue';
 import LayerPanel from './LayerPanel.vue';

package/src/layouts/workspace/PageBar.vue

@@ -3,10 +3,19 @@
     <div id="m-editor-page-bar-add-icon" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="addPage">
       <el-icon><plus></plus></el-icon>
     </div>
-    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
+    <div
+      v-if="scrollState.canScroll"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon"
+      @click="scrollState.scroll('left')"
+    >
       <el-icon><arrow-left-bold></arrow-left-bold></el-icon>
     </div>
-    <div v-if="root" class="m-editor-page-bar-items" ref="itemsContainer" :style="`width: ${itemsContainerWidth}px`">
+    <div
+      v-if="root"
+      class="m-editor-page-bar-items"
+      ref="itemsContainer"
+      :style="`width: ${scrollState.itemsContainerWidth}px`"
+    >
       <div
         v-for="item in root.items"
         :key="item.key"
@@ -51,33 +60,26 @@
         </el-popover>
       </div>
     </div>
-    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('right')">
+    <div
+      v-if="scrollState.canScroll"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon"
+      @click="scrollState.scroll('right')"
+    >
       <el-icon><arrow-right-bold></arrow-right-bold></el-icon>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import {
-  computed,
-  ComputedRef,
-  defineComponent,
-  inject,
-  markRaw,
-  onMounted,
-  onUnmounted,
-  ref,
-  toRaw,
-  watch,
-} from 'vue';
+<script lang="ts" setup>
+import { computed, ComputedRef, inject, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, CaretBottom, Delete, DocumentCopy, Plus } from '@element-plus/icons-vue';
 
 import type { MApp, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 
-import ToolButton from '@editor/components/ToolButton.vue';
-import type { Services } from '@editor/type';
-import { generatePageNameByApp } from '@editor/utils/editor';
+import ToolButton from '../../components/ToolButton.vue';
+import type { Services } from '../../type';
+import { generatePageNameByApp } from '../../utils/editor';
 
 const useScroll = (root: ComputedRef<MApp | undefined>) => {
   const pageBar = ref<HTMLDivElement>();
@@ -163,49 +165,36 @@ const useScroll = (root: ComputedRef<MApp | undefined>) => {
   };
 };
 
-export default defineComponent({
-  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus, ToolButton },
-
-  setup() {
-    const services = inject<Services>('services');
-    const editorService = services?.editorService;
-
-    const root = computed(() => editorService?.get<MApp>('root'));
-
-    return {
-      Delete: markRaw(Delete),
-      DocumentCopy: markRaw(DocumentCopy),
-
-      ...useScroll(root),
-
-      root,
-      page: computed(() => editorService?.get('page')),
-
-      switchPage(page: MPage) {
-        editorService?.select(page);
-      },
-
-      addPage() {
-        if (!editorService) return;
-        const pageConfig = {
-          type: NodeType.PAGE,
-          name: generatePageNameByApp(toRaw(editorService.get('root'))),
-        };
-        editorService.add(pageConfig);
-      },
-
-      copy(node: MPage) {
-        node && editorService?.copy(node);
-        editorService?.paste({
-          left: 0,
-          top: 0,
-        });
-      },
-
-      remove(node: MPage) {
-        editorService?.remove(node);
-      },
-    };
-  },
-});
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const root = computed(() => editorService?.get<MApp>('root'));
+
+const scrollState = useScroll(root);
+const page = computed(() => editorService?.get('page'));
+
+const switchPage = (page: MPage) => {
+  editorService?.select(page);
+};
+
+const addPage = () => {
+  if (!editorService) return;
+  const pageConfig = {
+    type: NodeType.PAGE,
+    name: generatePageNameByApp(toRaw(editorService.get('root'))),
+  };
+  editorService.add(pageConfig);
+};
+
+const copy = (node: MPage) => {
+  node && editorService?.copy(node);
+  editorService?.paste({
+    left: 0,
+    top: 0,
+  });
+};
+
+const remove = (node: MPage) => {
+  editorService?.remove(node);
+};
 </script>