@tmagic/editor 1.4.0-beta.1 → 1.4.0

package/src/layouts/sidebar/Sidebar.vue

@@ -111,6 +111,8 @@
         :key="config.$key ?? index"
         v-if="floatBoxStates[config.$key]?.status"
         v-model:visible="floatBoxStates[config.$key].status"
+        v-model:height="columnLeftHeight"
+        :width="columnLeftWidth"
         :title="config.text"
         :position="{
           left: floatBoxStates[config.$key].left,
@@ -121,8 +123,8 @@
           <div class="m-editor-slide-list-box">
             <component
               v-if="config && floatBoxStates[config.$key].status"
-              :is="config.boxComponentConfig?.component || config.component"
-              v-bind="config.boxComponentConfig?.props || config.props || {}"
+              :is="config.component"
+              v-bind="config.props || {}"
               v-on="config?.listeners || {}"
             />
           </div>
@@ -138,15 +140,17 @@ import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import MIcon from '@editor/components/Icon.vue';
+import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
 import { useFloatBox } from '@editor/hooks/use-float-box';
-import type {
-  MenuButton,
-  MenuComponent,
-  Services,
-  SideBarData,
-  SidebarSlots,
-  SideComponent,
-  SideItem,
+import {
+  ColumnLayout,
+  type MenuButton,
+  type MenuComponent,
+  type Services,
+  type SideBarData,
+  type SidebarSlots,
+  type SideComponent,
+  type SideItem,
 } from '@editor/type';
 
 import CodeBlockListPanel from './code-block/CodeBlockListPanel.vue';
@@ -173,6 +177,9 @@ const props = withDefaults(
 
 const services = inject<Services>('services');
 
+const columnLeftWidth = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
+const { height: columnLeftHeight } = useEditorContentHeight();
+
 const activeTabName = ref(props.data?.status);
 
 const getItemConfig = (data: SideItem): SideComponent => {
@@ -204,11 +211,6 @@ const getItemConfig = (data: SideItem): SideComponent => {
       text: '代码编辑',
       component: CodeBlockListPanel,
       slots: {},
-      boxComponentConfig: {
-        props: {
-          slideType: 'box',
-        },
-      },
     },
     'data-source': {
       $key: 'data-source',

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -23,7 +23,6 @@
     ref="codeBlockEditor"
     :disabled="!editable"
     :content="codeConfig"
-    :slideType="slideType"
     @submit="submitCodeBlockHandler"
   ></CodeBlockEditor>
 </template>
@@ -37,7 +36,7 @@ import type { Id } from '@tmagic/schema';
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
-import type { CodeBlockListPanelSlots, CodeDeleteErrorType, Services, SlideType } from '@editor/type';
+import type { CodeBlockListPanelSlots, CodeDeleteErrorType, Services } from '@editor/type';
 
 import CodeBlockList from './CodeBlockList.vue';
 
@@ -49,7 +48,6 @@ defineOptions({
 
 defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
-  slideType?: SlideType;
 }>();
 
 const { codeBlockService } = inject<Services>('services') || {};

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -1,27 +1,37 @@
 <template>
-  <component
-    :is="slideType === 'box' ? MFormBox : MFormDrawer"
-    ref="fomDrawer"
-    label-width="80px"
-    :close-on-press-escape="false"
+  <FloatingBox
+    v-model:visible="boxVisible"
+    v-model:width="width"
+    v-model:height="editorHeight"
     :title="title"
-    :width="size"
-    :config="dataSourceConfig"
-    :values="initValues"
-    :disabled="disabled"
-    @submit="submitHandler"
-    @error="errorHandler"
-  ></component>
+    :position="boxPosition"
+  >
+    <template #body>
+      <MFormBox
+        label-width="80px"
+        :title="title"
+        :config="dataSourceConfig"
+        :values="initValues"
+        :disabled="disabled"
+        style="height: 100%"
+        @submit="submitHandler"
+        @error="errorHandler"
+      ></MFormBox>
+    </template>
+  </FloatingBox>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watchEffect } from 'vue';
+import { inject, Ref, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
-import { FormConfig, MFormBox, MFormDrawer } from '@tmagic/form';
+import { FormConfig, MFormBox } from '@tmagic/form';
 import { DataSourceSchema } from '@tmagic/schema';
 
-import type { Services, SlideType } from '@editor/type';
+import FloatingBox from '@editor/components/FloatingBox.vue';
+import { useEditorContentHeight } from '@editor/hooks';
+import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
+import type { Services } from '@editor/type';
 
 defineOptions({
   name: 'MEditorDataSourceConfigPanel',
@@ -31,20 +41,23 @@ const props = defineProps<{
   title?: string;
   values: any;
   disabled: boolean;
-  slideType?: SlideType;
 }>();
 
+const boxVisible = defineModel<boolean>('visible', { default: false });
+const width = defineModel<number>('width', { default: 670 });
+
 const emit = defineEmits(['submit']);
 
 const services = inject<Services>('services');
 
-const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
-
-const fomDrawer = ref<InstanceType<typeof MFormDrawer>>();
-
 const initValues = ref<Partial<DataSourceSchema>>({});
 const dataSourceConfig = ref<FormConfig>([]);
 
+const { height: editorHeight } = useEditorContentHeight();
+
+const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
+const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+
 watchEffect(() => {
   initValues.value = props.values;
   dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
@@ -60,11 +73,12 @@ const errorHandler = (error: any) => {
 
 defineExpose({
   show() {
-    fomDrawer.value?.show();
+    calcBoxPosition();
+    boxVisible.value = true;
   },
 
   hide() {
-    fomDrawer.value?.hide();
+    boxVisible.value = false;
   },
 });
 </script>

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -33,7 +33,6 @@
     :disabled="!editable"
     :values="dataSourceValues"
     :title="dialogTitle"
-    :slideType="slideType"
     @submit="submitDataSourceHandler"
   ></DataSourceConfigPanel>
 </template>
@@ -47,7 +46,7 @@ import type { DataSourceSchema } from '@tmagic/schema';
 
 import SearchInput from '@editor/components/SearchInput.vue';
 import ToolButton from '@editor/components/ToolButton.vue';
-import type { DataSourceListSlots, Services, SlideType } from '@editor/type';
+import type { DataSourceListSlots, Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 import DataSourceList from './DataSourceList.vue';
@@ -58,10 +57,6 @@ defineOptions({
   name: 'MEditorDataSourceListPanel',
 });
 
-defineProps<{
-  slideType?: SlideType;
-}>();
-
 const { dataSourceService } = inject<Services>('services') || {};
 
 const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();

package/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -2,6 +2,7 @@
   <TMagicTooltip v-if="page && buttonVisible" content="点击查看当前位置下的组件">
     <div ref="button" class="m-editor-stage-float-button" @click="visible = true">可选组件</div>
   </TMagicTooltip>
+
   <FloatingBox
     v-if="page && nodeStatusMap && buttonVisible"
     ref="box"

package/src/layouts/workspace/viewer/StageOverlay.vue

@@ -1,6 +1,8 @@
 <template>
   <div v-if="stageOverlayVisible" class="m-editor-stage-overlay" @click="closeOverlayHandler">
-    <TMagicIcon class="m-editor-stage-overlay-close" :size="20" @click="closeOverlayHandler"><CloseBold /></TMagicIcon>
+    <TMagicIcon class="m-editor-stage-overlay-close" :size="'20'" @click="closeOverlayHandler"
+      ><CloseBold
+    /></TMagicIcon>
     <div ref="stageOverlay" class="m-editor-stage-overlay-container" :style="style" @click.stop></div>
   </div>
 </template>

package/src/services/stageOverlay.ts

@@ -41,7 +41,7 @@ class StageOverlay extends BaseService {
     this.state[name] = value;
   }
 
-  public openOverlay(el: HTMLElement | undefined | null) {
+  public openOverlay(el: HTMLElement | null) {
     const stageOptions = this.get('stageOptions');
     if (!el || !stageOptions) return;
 
@@ -168,7 +168,7 @@ class StageOverlay extends BaseService {
     });
 
     if (await stageOptions?.canSelect?.(contentEl)) {
-      subStage?.select(contentEl);
+      subStage?.select(contentEl.id);
     }
   }
 

package/src/services/ui.ts

@@ -54,6 +54,12 @@ const state = reactive<UiState>({
     width: 0,
     height: 0,
   },
+  frameworkRect: {
+    width: 0,
+    height: 0,
+    left: 0,
+    top: 0,
+  },
 });
 
 const canUsePluginMethods = {

package/src/theme/code-block.scss

@@ -1,25 +1,6 @@
-.m-editor-code-block-list {
-  height: 100%;
-}
-
 .m-fields-code-select {
   width: 100%;
   .el-card__header {
     display: none;
   }
 }
-
-.m-editor-code-block-editor {
-  .tmagic-design-table {
-    height: 180px;
-  }
-
-  .el-drawer__body {
-    padding: 10px 20px;
-  }
-
-  &.m-form-box {
-    width: 100%;
-    min-width: 872px;
-  }
-}

package/src/theme/component-list-panel.scss

@@ -1,6 +1,5 @@
 .ui-component-panel {
   &.tmagic-design-collapse {
-    height: 100%;
     border-top: 0 !important;
     margin-top: 48px;
     background-color: $--sidebar-content-background-color;

package/src/theme/floating-box.scss

@@ -21,9 +21,9 @@
   }
 
   .m-editor-float-box-body {
-    padding: 5px;
-    flex: 1;
     overflow: auto;
+    flex: 1;
+    padding: 0 16px;
   }
 }
 

package/src/theme/icon.scss

@@ -1,4 +1,10 @@
-.magic-editor-icon {
+.tmagic-design-icon {
+  --color: inherit;
+  height: 1em;
+  width: 1em;
+  position: relative;
+  fill: currentColor;
+
   img {
     max-width: 100%;
     max-height: 100%;

package/src/theme/layer-panel.scss

@@ -1,6 +1,5 @@
 .m-editor-layer-panel {
   background: $--sidebar-content-background-color;
-  position: relative;
 
   .m-editor-tree {
     padding-top: 48px;

package/src/theme/props-panel.scss

@@ -1,6 +1,20 @@
 .m-editor-props-panel {
   padding: 0 10px;
 
+  .m-editor-props-panel-src-icon {
+    position: absolute;
+    right: 15px;
+    bottom: 15px;
+    z-index: 30;
+  }
+
+  .magic-code-editor {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 10;
+  }
+
   &.small {
     .el-form-item__label {
       font-size: 12px;

package/src/theme/sidebar.scss

@@ -50,10 +50,6 @@
     overflow: auto;
   }
 
-  .tmagic-design-scrollbar {
-    height: 100%;
-  }
-
   .fold-icon {
     position: absolute;
     bottom: 8px;
@@ -72,9 +68,6 @@
 }
 
 .m-editor-slide-list-box {
-  display: flex;
-  min-width: 240px;
-  min-height: 500px;
   > div {
     &:first-child {
       min-width: 240px;

package/src/type.ts

@@ -246,6 +246,12 @@ export interface UiState {
     width: number;
     height: number;
   };
+  frameworkRect: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  };
 }
 
 export interface EditorNodeInfo {
@@ -395,12 +401,6 @@ export interface SideBarData {
   items: SideItem[];
 }
 
-/**
- * drawer 抽屉
- * box 悬浮窗
- */
-export type SlideType = 'drawer' | 'box';
-
 export interface ComponentItem {
   /** 显示文案 */
   text: string;

package/types/components/CodeBlockEditor.vue.d.ts

@@ -1,32 +1,46 @@
 import type { CodeBlockContent } from '@tmagic/schema';
-import type { SlideType } from '../type';
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
-    content: CodeBlockContent;
-    disabled?: boolean | undefined;
-    isDataSource?: boolean | undefined;
-    dataSourceType?: string | undefined;
-    slideType?: SlideType | undefined;
-}>, {
+declare const _default: import("vue").DefineComponent<{
+    width: import("vue").PropType<number>;
+    visible: import("vue").PropType<boolean>;
+    content: {
+        type: import("vue").PropType<CodeBlockContent>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    };
+    isDataSource: {
+        type: import("vue").PropType<boolean>;
+    };
+    dataSourceType: {
+        type: import("vue").PropType<string>;
+    };
+}, {
     show(): Promise<void>;
-    hide(): void;
+    hide(): Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:width": (width: number) => void;
+    "update:visible": (visible: boolean) => void;
     submit: (values: CodeBlockContent) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
-    content: CodeBlockContent;
-    disabled?: boolean | undefined;
-    isDataSource?: boolean | undefined;
-    dataSourceType?: string | undefined;
-    slideType?: SlideType | undefined;
-}>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    width: import("vue").PropType<number>;
+    visible: import("vue").PropType<boolean>;
+    content: {
+        type: import("vue").PropType<CodeBlockContent>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    };
+    isDataSource: {
+        type: import("vue").PropType<boolean>;
+    };
+    dataSourceType: {
+        type: import("vue").PropType<string>;
+    };
+}>> & {
     onSubmit?: ((values: CodeBlockContent) => any) | undefined;
+    "onUpdate:width"?: ((width: number) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
 }, {}, {}>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

package/types/components/FloatingBox.vue.d.ts

@@ -2,79 +2,64 @@ interface Position {
     left: number;
     top: number;
 }
-interface Rect {
-    width: number | string;
-    height: number | string;
-}
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    visible: boolean;
-    position?: Position | undefined;
-    rect?: Rect | undefined;
-    title?: string | undefined;
-    beforeClose?: ((done: (cancel?: boolean | undefined) => void) => void) | undefined;
-}>, {
-    visible: boolean;
-    title: string;
-    position: () => {
-        left: number;
-        top: number;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    width: import("vue").PropType<number>;
+    height: import("vue").PropType<number>;
+    visible: import("vue").PropType<boolean>;
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    position: {
+        type: import("vue").PropType<Position>;
+        default: () => {
+            left: number;
+            top: number;
+        };
     };
-    rect: () => {
-        width: string;
-        height: string;
+    beforeClose: {
+        type: import("vue").PropType<(done: (cancel?: boolean | undefined) => void) => void>;
     };
-}>, {
+}, {
+    bodyHeight: import("vue").ComputedRef<number | "auto">;
     target: import("vue").Ref<HTMLDivElement | undefined>;
+    titleEl: import("vue").Ref<HTMLDivElement | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:visible": (args_0: boolean) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    visible: boolean;
-    position?: Position | undefined;
-    rect?: Rect | undefined;
-    title?: string | undefined;
-    beforeClose?: ((done: (cancel?: boolean | undefined) => void) => void) | undefined;
-}>, {
-    visible: boolean;
-    title: string;
-    position: () => {
-        left: number;
-        top: number;
+    "update:width": (width: number) => void;
+    "update:visible": (visible: boolean) => void;
+    "update:height": (height: number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    width: import("vue").PropType<number>;
+    height: import("vue").PropType<number>;
+    visible: import("vue").PropType<boolean>;
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
     };
-    rect: () => {
-        width: string;
-        height: string;
+    position: {
+        type: import("vue").PropType<Position>;
+        default: () => {
+            left: number;
+            top: number;
+        };
     };
-}>>> & {
-    "onUpdate:visible"?: ((args_0: boolean) => any) | undefined;
+    beforeClose: {
+        type: import("vue").PropType<(done: (cancel?: boolean | undefined) => void) => void>;
+    };
+}>> & {
+    "onUpdate:width"?: ((width: number) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    "onUpdate:height"?: ((height: number) => any) | undefined;
 }, {
     title: string;
     position: Position;
-    visible: boolean;
-    rect: Rect;
 }, {}>, {
     title?(_: {}): any;
     body?(_: {}): any;
 }>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

package/types/components/SplitView.vue.d.ts

@@ -1,4 +1,5 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    width?: number | undefined;
     left?: number | undefined;
     right?: number | undefined;
     minLeft?: number | undefined;
@@ -18,6 +19,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "update:left": (...args: any[]) => void;
     "update:right": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    width?: number | undefined;
     left?: number | undefined;
     right?: number | undefined;
     minLeft?: number | undefined;