@tmagic/editor 1.0.0-beta.1 → 1.0.0-beta.12

package/src/utils/editor.ts

@@ -16,10 +16,12 @@
  * 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';
+import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import { NodeType } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
+import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
 import { Layout } from '@editor/type';
 
@@ -34,7 +36,7 @@ export const generateId = (type: string | number): string => `${type}_${random(1
  */
 export const getPageList = (app: MApp): MPage[] => {
   if (app.items && Array.isArray(app.items)) {
-    return app.items.filter((item: MPage) => item.type === 'page');
+    return app.items.filter((item: MPage) => item.type === NodeType.PAGE);
   }
   return [];
 };
@@ -104,11 +106,11 @@ const updatePopId = (oldId: Id, popId: Id, pageConfig: MPage) => {
 export const setNewItemId = (config: MNode, parent?: MPage) => {
   const oldId = config.id;
 
-  config.id = generateId(config.type);
+  config.id = generateId(config.type || 'component');
   config.name = `${config.name?.replace(/_(\d+)$/, '')}_${config.id}`;
 
   // 只有弹窗在页面下的一级子元素才有效
-  if (isPop(config) && parent?.type === 'page') {
+  if (isPop(config) && parent?.type === NodeType.PAGE) {
     updatePopId(oldId, config.id, parent);
   }
 
@@ -138,11 +140,29 @@ export const toRelative = (node: MNode) => {
   return node;
 };
 
-export const initPosition = (node: MNode, layout: Layout) => {
+const setTop2Middle = (node: MNode, parentNode: MNode, stage: StageCore) => {
+  const style = node.style || {};
+  const height = style.height || 0;
+
+  if (!stage || style.top || !parentNode.style || !isNumber(height)) return style;
+
+  const { height: parentHeight } = parentNode.style;
+
+  if (isPage(parentNode)) {
+    const { scrollTop = 0, wrapperHeight } = stage.mask;
+    style.top = (wrapperHeight - height) / 2 + scrollTop;
+  } else {
+    style.top = (parentHeight - height) / 2;
+  }
+
+  return style;
+};
+
+export const initPosition = (node: MNode, layout: Layout, parentNode: MNode, stage: StageCore) => {
   if (layout === Layout.ABSOLUTE) {
     node.style = {
       position: 'absolute',
-      ...(node.style || {}),
+      ...setTop2Middle(node, parentNode, stage),
     };
     return node;
   }
@@ -199,6 +219,8 @@ export const Fixed2Other = async (node: MNode, root: MApp, getLayout: (node: MNo
   const offset = {
     left: cur?.style?.left || 0,
     top: cur?.style?.top || 0,
+    right: '',
+    bottom: '',
   };
 
   path.forEach((value) => {
@@ -223,22 +245,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/props.ts

@@ -174,7 +174,7 @@ export const fillConfig = (config: FormConfig = []) => [
                 type: 'select',
                 options: (mForm: FormState, { model }: any) => {
                   const node = editorService.getNodeById(model.to);
-                  if (!node) return [];
+                  if (!node?.type) return [];
 
                   return eventsService.getMethod(node.type).map((option) => ({
                     text: option.label,

package/src/utils/scroll-viewer.ts

@@ -0,0 +1,216 @@
+import { Keys } from '@editor/type';
+
+interface ScrollViewerOptions {
+  container: HTMLDivElement;
+  target: HTMLDivElement;
+  zoom: number;
+}
+
+export class ScrollViewer {
+  private enter = false;
+  private targetEnter = false;
+  private keydown = false;
+  private container: HTMLDivElement;
+  private target: HTMLDivElement;
+  private zoom = 1;
+
+  private scrollLeft = 0;
+  private scrollTop = 0;
+
+  private x = 0;
+  private y = 0;
+
+  private resizeObserver = new ResizeObserver((entries) => {
+    for (const { contentRect } of entries) {
+      const { width, height } = contentRect;
+      const targetRect = this.target.getBoundingClientRect();
+      const targetWidth = targetRect.width * 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;
+      }
+      if (targetHeight < height) {
+        (this.target as any)._top = 0;
+      }
+
+      this.scroll();
+    }
+  });
+
+  constructor(options: ScrollViewerOptions) {
+    this.container = options.container;
+    this.target = options.target;
+    this.zoom = options.zoom;
+
+    globalThis.addEventListener('keydown', this.keydownHandler);
+    globalThis.addEventListener('keyup', this.keyupHandler);
+
+    this.container.addEventListener('mouseenter', this.mouseEnterHandler);
+    this.container.addEventListener('mouseleave', this.mouseLeaveHandler);
+    this.target.addEventListener('mouseenter', this.targetMouseEnterHandler);
+    this.target.addEventListener('mouseleave', this.targetMouseLeaveHandler);
+
+    this.container.addEventListener('wheel', this.wheelHandler);
+
+    this.resizeObserver.observe(this.container);
+  }
+
+  public destroy() {
+    this.resizeObserver.disconnect();
+
+    this.container.removeEventListener('mouseenter', this.mouseEnterHandler);
+    this.container.removeEventListener('mouseleave', this.mouseLeaveHandler);
+    this.target.removeEventListener('mouseenter', this.targetMouseEnterHandler);
+    this.target.removeEventListener('mouseleave', this.targetMouseLeaveHandler);
+    globalThis.removeEventListener('keydown', this.keydownHandler);
+    globalThis.removeEventListener('keyup', this.keyupHandler);
+  }
+
+  public setZoom(zoom: number) {
+    this.zoom = zoom;
+  }
+
+  private scroll() {
+    const scrollLeft = (this.target as any)._left;
+    const scrollTop = (this.target as any)._top;
+
+    this.target.style.transform = `translate(${scrollLeft}px, ${scrollTop}px)`;
+  }
+
+  private removeHandler() {
+    this.target.style.cursor = '';
+    this.target.removeEventListener('mousedown', this.mousedownHandler);
+    document.removeEventListener('mousemove', this.mousemoveHandler);
+    document.removeEventListener('mouseup', this.mouseupHandler);
+  }
+
+  private wheelHandler = (event: WheelEvent) => {
+    if (this.targetEnter) return;
+
+    const { deltaX, deltaY, currentTarget } = event;
+
+    if (currentTarget !== this.container) return;
+
+    this.setScrollOffset(deltaX, deltaY);
+    this.scroll();
+    this.scrollLeft = (this.target as any)._left;
+    this.scrollTop = (this.target as any)._top;
+  };
+
+  private mouseEnterHandler = () => {
+    this.enter = true;
+  };
+
+  private mouseLeaveHandler = () => {
+    this.enter = false;
+  };
+
+  private targetMouseEnterHandler = () => {
+    this.targetEnter = true;
+  };
+
+  private targetMouseLeaveHandler = () => {
+    this.targetEnter = false;
+  };
+
+  private mousedownHandler = (event: MouseEvent) => {
+    if (!this.keydown) return;
+
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+
+    this.target.style.cursor = 'grabbing';
+
+    this.x = event.clientX;
+    this.y = event.clientY;
+
+    document.addEventListener('mousemove', this.mousemoveHandler);
+    document.addEventListener('mouseup', this.mouseupHandler);
+  };
+
+  private mouseupHandler = () => {
+    this.x = 0;
+    this.y = 0;
+
+    this.scrollLeft = (this.target as any)._left;
+    this.scrollTop = (this.target as any)._top;
+    this.removeHandler();
+  };
+
+  private mousemoveHandler = (event: MouseEvent) => {
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+
+    const deltaX = event.clientX - this.x;
+    const deltaY = event.clientY - this.y;
+
+    this.setScrollOffset(deltaX, deltaY);
+    this.scroll();
+  };
+
+  private keydownHandler = (event: KeyboardEvent) => {
+    if (event.code === Keys.ESCAPE && this.enter) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+    }
+
+    if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
+      return;
+    }
+
+    this.keydown = true;
+
+    this.target.style.cursor = 'grab';
+    this.container.addEventListener('mousedown', this.mousedownHandler);
+  };
+
+  private keyupHandler = (event: KeyboardEvent) => {
+    if (event.code !== Keys.ESCAPE || !this.keydown) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+
+    this.keydown = false;
+
+    event.preventDefault();
+
+    this.removeHandler();
+  };
+
+  private setScrollOffset(deltaX: number, deltaY: number) {
+    const { width, height } = this.container.getBoundingClientRect();
+    const targetRect = this.target.getBoundingClientRect();
+
+    const targetWidth = targetRect.width * this.zoom;
+    const targetHeight = targetRect.height * this.zoom;
+
+    let y = 0;
+
+    if (targetHeight > height) {
+      if (deltaY > 0) {
+        y = this.scrollTop + Math.min(targetHeight - height - this.scrollTop, deltaY);
+      } else {
+        y = this.scrollTop + Math.max(-(targetHeight - height + this.scrollTop), deltaY);
+      }
+    }
+
+    let x = 0;
+
+    if (targetWidth > width) {
+      if (deltaX > 0) {
+        x = this.scrollLeft + Math.min(targetWidth - width - this.scrollLeft, deltaX);
+      } else {
+        x = this.scrollLeft + Math.max(-(targetWidth - width + this.scrollLeft), deltaX);
+      }
+    }
+
+    (this.target as any)._left = x;
+    (this.target as any)._top = y;
+  }
+}

package/dist/types/src/layouts/sidebar/LayerMenu.vue.d.ts

@@ -1,31 +0,0 @@
-import type { MNode } from '@tmagic/schema';
-import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
-import type { ComponentGroup } from '../../type';
-declare const _default: DefineComponent<{
-    componentGroupList: {
-        type: PropType<ComponentGroup[]>;
-        default: () => never[];
-    };
-}, {
-    subVisible: Ref<boolean>;
-    node: ComputedRef<MNode | undefined>;
-    menu: ComputedRef<{
-        app: {
-            type: string;
-            text: string;
-        }[];
-        component: ComponentGroup[];
-    }>;
-    append(config: any): void;
-    remove(): void;
-    copy(node: any): void;
-    setSubVisiable(v: any): void;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
-    componentGroupList: {
-        type: PropType<ComponentGroup[]>;
-        default: () => never[];
-    };
-}>>, {
-    componentGroupList: ComponentGroup[];
-}>;
-export default _default;