ibsp-fg-page 4.0.2

package/src/views/designer/modules/canvas/src/hooks/useAligin.ts

@@ -0,0 +1,239 @@
+import { computed, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+
+import useComponentStore from '@/stores/useComponentStore';
+import useCommand from '@/models/command';
+import { setDisabledState } from '@/models/disabledState';
+import { historyStackModel } from '@/models/useHistoryStackModel';
+
+const getRect = (node: IBSP.IComponent.DesignComponent) => {
+  const rect = (node?.ref?.dom as unknown as HTMLElement)?.getBoundingClientRect();
+  return rect && node && node.position ? {
+    width: rect?.width,
+    height: rect?.height,
+    x: node?.position?.x,
+    y: node?.position?.y,
+  } : null
+}
+
+interface SectionsBox{
+  width: number
+  height: number
+  left: number
+  top: number
+
+}
+
+const nodeAliginMethods = {
+  /**
+   * @description 左对齐
+   * @param nodes {IBSP.IComponent.DesignComponent[]} 选中节点列表
+   */
+  left(nodes: IBSP.IComponent.DesignComponent[], box:any) {
+    nodes.forEach((item, index) => {
+      item.position.x = box.left
+    })
+  },
+  /**
+   * @description 右对齐
+   * @param nodes {IBSP.IComponent.DesignComponent[]} 选中节点列表
+   */
+  right(nodes: IBSP.IComponent.DesignComponent[], box:any) {
+    const right = box.width + box.left
+    nodes.forEach((item, index) => {
+      item.position.x = right - item.position.w;
+    })
+
+
+  },
+  /**
+   * @description 顶对齐
+   * @param nodes {IBSP.IComponent.DesignComponent[]} 选中节点列表
+   */
+  top(nodes: IBSP.IComponent.DesignComponent[], box:any) {
+    const top = box.top
+    nodes.forEach((item, index) => {
+      item.position.y = top
+    })
+  },
+  /**
+   * @description 底对齐
+   * @param nodes {IBSP.IComponent.DesignComponent[]} 选中节点列表
+   */
+  bottom(nodes: IBSP.IComponent.DesignComponent[], box:any) {
+    const bottom = box.height + box.top
+    nodes.forEach((item, index) => {
+      item.position.y = bottom - item.position.h;
+    })
+  },
+  /**
+   * @description 垂直居中对齐
+   * @param nodes {IBSP.IComponent.DesignComponent[]} 选中节点列表
+   */
+  middle(nodes: IBSP.IComponent.DesignComponent[], box:any) {
+    const middle = box.width / 2 + box.left
+    nodes.forEach((item, index) => {
+      item.position.x = middle - item.position.w / 2
+    })
+  },
+  /**
+   * @description 水平居中对齐
+   * @param nodes {IBSP.IComponent.DesignComponent[]} 选中节点列表
+   */
+  center(nodes: IBSP.IComponent.DesignComponent[], box:any) {
+    const center = box.height / 2 + box.top
+    nodes.forEach((item, index) => {
+      item.position.y = center - item.position.h / 2
+    })
+  }
+
+}
+
+
+const layoutMethods = {
+  getCompareNode(nodes: IBSP.IComponent.DesignComponent[], key: 'x' | 'y', type: 'max' | 'min') {
+    let arr: number[] = nodes.map(item => item.position[key]);
+    let val: number = Math[type].apply(Math, arr);
+    return nodes[arr.findIndex(item => item === val)];
+  },
+  handle(nodes: IBSP.IComponent.DesignComponent[], key: 'x' | 'y', box:any) {
+    let minNode = nodes[0]
+    let maxNode = nodes[1]
+
+    if (key === 'x') {
+      nodes.forEach((item) => {
+        if (item.position.x < minNode.position.x) {
+          minNode = item
+        }
+        if (item.position.x + item.position.w > maxNode.position.x + maxNode.position.w) {
+          maxNode = item
+        }
+      })
+      const middleNodes = nodes.filter(item=>item.id !== minNode.id && item.id !== maxNode.id)
+      const middleLen = middleNodes.reduce((prev, next) => prev + next.position.w, 0)
+      const len = box.width - (maxNode.position.w + minNode.position.w)
+      const offset = (len - middleLen) / (nodes.length - 1)
+      // 按照x进行排序升序
+      const res = middleNodes.sort((prev, next) => prev.position.x - next.position.x)
+      let prevX = minNode.position.x + minNode.position.w
+      res.forEach((item, index) => {
+        item.position.x = prevX + offset
+        prevX = item.position.x + item.position.w
+      })
+    } else if (key === 'y') {
+      nodes.forEach((item) => {
+        if (item.position.y < minNode.position.y) {
+          minNode = item
+        }
+        if (item.position.y + item.position.h > maxNode.position.y + maxNode.position.h) {
+          maxNode = item
+        }
+      })
+      const middleNodes = nodes.filter(item=>item.id !== minNode.id && item.id !== maxNode.id)
+      const middleLen = middleNodes.reduce((prev, next) => prev + next.position.h, 0)
+      const len = box.height - (maxNode.position.h + minNode.position.h)
+      const offset = (len - middleLen) / (nodes.length - 1)
+      // 按照y进行排序升序
+      const res = middleNodes.sort((prev, next) => prev.position.y - next.position.y)
+      let prevY = minNode.position.y + minNode.position.h
+      res.forEach((item, index) => {
+        item.position.y = prevY + offset
+        prevY = item.position.y + item.position.h
+      })
+    }
+  },
+  /**
+   * @description 水平分布
+   * @param nodes {IBSP.IComponent.DesignComponent[]} 选中节点列表
+   */
+  horizontal(nodes: IBSP.IComponent.DesignComponent[], box:any) {
+    this.handle(nodes, 'x', box);
+  },
+  /**
+   * @description 垂直分布
+   * @param nodes {IBSP.IComponent.DesignComponent[]} 选中节点列表
+   */
+  vertical(nodes: IBSP.IComponent.DesignComponent[], box:any) {
+    this.handle(nodes, 'y', box);
+  }
+}
+
+function useAligin() {
+
+  const componentStore = storeToRefs(useComponentStore());
+
+  const selections = componentStore.selections;
+  const aliginDisabled = computed(() => selections.value.length < 2 ? true : false);
+  const layoutDisabled = computed(() => selections.value.length < 3 ? true : false)
+  const left = () => nodeAliginMethods.left(selections.value, componentStore.selectionBox.value);
+  const right = () => nodeAliginMethods.right(selections.value, componentStore.selectionBox.value);
+  const center = () => nodeAliginMethods.center(selections.value, componentStore.selectionBox.value);
+  const top = () => nodeAliginMethods.top(selections.value, componentStore.selectionBox.value);
+  const middle = () => nodeAliginMethods.middle(selections.value, componentStore.selectionBox.value);
+  const bottom = () => nodeAliginMethods.bottom(selections.value, componentStore.selectionBox.value);
+  const vertical = () => layoutMethods.vertical(selections.value, componentStore.selectionBox.value);
+  const horizontal = () => layoutMethods.horizontal(selections.value, componentStore.selectionBox.value);
+
+  setDisabledState('aligin.aliginDisabled', aliginDisabled)('aligin.layoutDisabled', layoutDisabled);
+
+
+  const call = (btn:{
+    key:keyof typeof nodeAliginMethods | keyof typeof layoutMethods
+  })=>{
+    const oldValues = selections.value.map((item: IBSP.IComponent.DesignComponent) => ({ ...item.position }))
+    if (btn.key in layoutMethods) {
+      console.log(btn.key);
+
+      // @ts-ignore
+      layoutMethods[btn.key](selections.value, componentStore.selectionBox.value)
+      historyStackModel.push({
+        actionType: historyStackModel.actionType.LayoutComponent,
+        label: '调整组件布局方式',
+        changes: selections.value.map((item: IBSP.IComponent.DesignComponent, index:number) => {
+          return {
+            id: item.id,
+            oldValue: oldValues[index],
+            value: { ...item.position },
+            prop: 'position'
+          }
+        }),
+      })
+
+    } else {
+
+
+      // @ts-ignore
+      nodeAliginMethods[btn.key](selections.value, componentStore.selectionBox.value)
+      historyStackModel.push({
+        actionType: historyStackModel.actionType.AliginComponent,
+        label: '调整组件对齐方式',
+        changes: selections.value.map((item: IBSP.IComponent.DesignComponent, index:number) => {
+          return {
+            id: item.id,
+            oldValue: oldValues[index],
+            value: { ...item.position },
+            prop: 'position'
+          }
+        }),
+      })
+    }
+  }
+
+  return <{
+    [key: string]: any
+  }>{
+    selections,
+    layoutDisabled,
+    aliginDisabled,
+    left,
+    right,
+    center,
+    top,
+    middle,
+    bottom,
+    vertical,
+    horizontal,
+    call
+  }
+}
+export default useAligin;

package/src/views/designer/modules/canvas/src/hooks/useCanvas copy.ts

@@ -0,0 +1,117 @@
+import { computed, onBeforeUnmount, onMounted } from 'vue';
+
+import useKeyboard from '@/views/designer/hooks/useKeyboard';
+import { inject } from '@/models/service';
+
+export default (
+  page: IBSP.IPage.Page
+) => {
+
+  const canvasService = inject('canvas')
+  const isCtrl = canvasService.isCtrl
+  const isShift = canvasService.isShift
+  const zoomProportion = canvasService.zoom
+
+
+  const canvasPageStyle = computed<Partial<CSSStyleDeclaration>>(() => {
+    const canvasPage = page.pageConfigValue?.canvasPage
+    if (!canvasPage) {
+      return {}
+    }
+    const pageWidth = canvasPage.pageWidth as number | string
+    const pageHeight = canvasPage.pageHeight as number | string
+    let style: Partial<CSSStyleDeclaration> = {
+      width: typeof pageWidth === 'number' ? (pageWidth + 'px') : pageWidth,
+      height: typeof pageHeight === 'number' ? (pageHeight + 'px') : pageHeight,
+      overflow: 'visible',
+    }
+    if (canvasPage.pageBackgroundType === 'color') {
+      style.backgroundColor = canvasPage.pageBackgroundColor
+      // @ts-ignore
+      style.opacity = canvasPage.pageBackgroundOpacity
+    } else if (canvasPage.pageBackgroundType === 'image') {
+      // @ts-ignore
+      (style as any)['--background-image'] = `url(${canvasPage.pageBackgroundImage?.value})`;
+      (style as any)['--opacity'] = canvasPage.pageBackgroundOpacity
+    }
+    return style
+  })
+
+
+  const canvasMainStyle = computed<Partial<CSSStyleDeclaration>>(() => {
+    const canvasWidth = page.pageConfigValue.designerPage.canvasWidth || '100vw' as string | number
+    let canvasHeight = page.pageConfigValue.designerPage.canvasHeight || '100vh' as string | number
+    return {
+      // @ts-ignore
+      'width': typeof canvasWidth === 'string' && isNaN(canvasWidth) ? canvasWidth : (canvasWidth + 'px'),
+      // @ts-ignore
+      'height': typeof canvasHeight === 'string' && isNaN(canvasHeight) ? canvasHeight : (canvasHeight + 'px'),
+      overflow: 'visible',
+    }
+  })
+
+  const openZoomEvent = () => {
+    let ctrl = false
+
+    // 键盘➕➖控制缩放
+    document.addEventListener('keydown', (e) => {
+      isCtrl.value = e.ctrlKey
+      isShift.value = e.shiftKey
+      // -
+      if (ctrl && e.keyCode === 109 || e.keyCode === 189) {
+        zoomProportion.value = zoomProportion.value - 0.1
+      }
+      // +
+      if (ctrl && e.keyCode === 107 || e.keyCode === 187) {
+        zoomProportion.value = zoomProportion.value + 0.1
+      }
+    })
+
+    // ctrl + 滚轮缩放
+    document.body.addEventListener('wheel', (e) => {
+      if (e.ctrlKey) {
+        e.preventDefault();
+        zoomProportion.value = zoomProportion.value + (e.deltaY > 0 ? -0.05 : 0.05)
+      }
+    }, { passive: false });
+
+  }
+
+
+  const resizeObserver = new ResizeObserver(() => {
+    zoomProportion.value = canvasService.getOriginalZoom(page.pageConfigValue)
+  })
+
+  let resizeTimer: any = null
+  const windowResize = () => {
+    if (resizeTimer) {
+      clearTimeout(resizeTimer)
+    }
+    resizeTimer = setTimeout(() => {
+      zoomProportion.value = canvasService.getOriginalZoom(page.pageConfigValue)
+    }, 200)
+  }
+
+  onMounted(()=>{
+    openZoomEvent()
+
+    setTimeout(() => {
+      zoomProportion.value = canvasService.getOriginalZoom(page.pageConfigValue)
+      resizeObserver.observe(document.getElementById('appWrapperContainer')!)
+      window.addEventListener('resize', windowResize)
+    }, 1000);
+
+
+  })
+
+  onBeforeUnmount(() => {
+    resizeObserver.disconnect()
+    window.removeEventListener('resize', windowResize)
+  })
+
+
+  return {
+    canvasPageStyle,
+    canvasMainStyle
+  }
+}

package/src/views/designer/modules/canvas/src/hooks/useCanvas.ts

@@ -0,0 +1,39 @@
+import { computed } from 'vue';
+
+export default (
+  page: IBSP.IPage.Page
+) => {
+
+  const canvasPageStyle = computed<Partial<CSSStyleDeclaration>>(() => {
+    const canvasPage = page.pageConfigValue?.canvasPage
+    if (!canvasPage) {
+      return {}
+    }
+    const pageWidth = canvasPage.pageWidth as number | string
+    const pageHeight = canvasPage.pageHeight as number | string
+    let style: Partial<CSSStyleDeclaration> = {
+      // @ts-ignore
+      width: (!isNaN(pageWidth)) ? (pageWidth + 'px') : pageWidth,
+      // @ts-ignore
+      height: (!isNaN(pageHeight)) ? (pageHeight + 'px') : pageHeight,
+      overflow: 'visible',
+    }
+    if (canvasPage.pageBackgroundType === 'color') {
+      style.backgroundColor = canvasPage.pageBackgroundColor
+      // @ts-ignore
+      style.opacity = canvasPage.pageBackgroundOpacity
+    } else if (canvasPage.pageBackgroundType === 'image') {
+      console.log(canvasPage.pageBackgroundImage);
+
+      // @ts-ignore
+      (style as any)['--background-image'] = `url(${canvasPage.pageBackgroundImage?.value})`;
+      (style as any)['--opacity'] = canvasPage.pageBackgroundOpacity
+    }
+    return style
+  })
+
+
+  return {
+    canvasPageStyle,
+  }
+}

package/src/views/designer/modules/canvas/src/hooks/useGroup.ts

@@ -0,0 +1,121 @@
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia';
+
+import useComponentStore from '@/stores/useComponentStore';
+import { DesignComponent } from '@/models/useComponentModel';
+import useCommand from '@/models/command';
+import { setDisabledState } from '@/models/disabledState';
+import { historyStackModel, type UpdateChangeModel, type HistoryComponent } from '@/models/useHistoryStackModel';
+
+
+function useGroup() {
+
+  const componentStore = storeToRefs(useComponentStore());
+  const command = useCommand();
+
+  const selections = componentStore.selections;
+
+  const createGroupDisabled = computed(() => {
+    return selections.value.length > 1 ? false : true;
+  })
+
+  const removeGroupDisabled = computed(() => {
+    if (componentStore.activeComponent.value) {
+      const activeComponent = componentStore.activeComponent.value as IBSP.IComponent.DesignComponent;
+      return activeComponent.type === 'layout-group' ? false : true;
+    }
+    return true;
+  });
+
+  const createGroup = () => {
+    command.execute('group.create')
+  }
+
+  /**
+   * @description 取消组合
+   * @param parentId 父组合ID
+   * @param targetParentId 取消组合后的父容器ID
+   * @param parentComponent 父组合组件
+   * @param recursion 是否递归取消组合
+   */
+  const RemoveGroup = (parentId: string, targetParentId: string, parentComponent: IBSP.IComponent.DesignComponent, recursion: boolean = false, data: {
+    groups: HistoryComponent[],
+    children: {
+      id: string,
+      updateValue: UpdateChangeModel[]
+    }[]
+  }) => {
+    const children = componentStore.componentData.value.filter((item: IBSP.IComponent.DesignComponent) => item.parentId === parentId);
+    children.forEach(
+      (item: IBSP.IComponent.DesignComponent) => {
+        if (item.type === 'layout-group' && recursion) {
+          RemoveGroup(parentId, targetParentId, item, recursion, data);
+        } else {
+          data.children.push({
+            id: item.id,
+            updateValue: [
+              {
+                prop: 'parentId',
+                value: targetParentId,
+                oldValue: item.parentId
+              }
+            ]
+          })
+          item.parentId = targetParentId;
+        }
+      }
+    );
+    data.groups.push({
+      id: parentComponent.id,
+      index: componentStore.componentData.value.findIndex((cItem: IBSP.IComponent.DesignComponent) => cItem.id === parentComponent.id),
+      component: JSON.parse(JSON.stringify(parentComponent.generatePreviewData()))
+    })
+    parentComponent.destroy();
+  }
+
+  const removeGroup = () => {
+    if (componentStore.activeComponent.value) {
+      const activeComponent = componentStore.activeComponent.value as IBSP.IComponent.DesignComponent;
+      if (activeComponent.type === 'layout-group') {
+        const parentId = activeComponent.parentId;
+        const data: {
+          groups: HistoryComponent[],
+          children: {
+            id: string,
+            updateValue: UpdateChangeModel[]
+          }[]
+        } = {
+          groups: [],
+          children: []
+        };
+        RemoveGroup(activeComponent.id, parentId, activeComponent, false, data);
+        historyStackModel.push({
+          actionType: historyStackModel.actionType.UnMergeGroup,
+          label: '解除组合',
+          changes: {
+            components: data.groups,
+            children: data.children
+          }
+        })
+        command.execute('group.remove.drag', activeComponent.id)
+      }
+    }
+  }
+
+  command.register('group.remove', removeGroup);
+
+  setDisabledState('group.createGroupDisabled', createGroupDisabled)('group.removeGroupDisabled', removeGroupDisabled);
+
+  return {
+    state: {
+      createGroupDisabled,
+      removeGroupDisabled,
+    },
+    methods: {
+      createGroup,
+      removeGroup
+    }
+  }
+}
+
+export default useGroup

package/src/views/designer/modules/canvas/src/hooks/useHistory.ts

@@ -0,0 +1,37 @@
+import { computed } from 'vue';
+
+import { historyStackModel } from '@/models/useHistoryStackModel';
+
+
+function useHistory(page: IBSP.IPage.Page) {
+
+  const undoHistoryDisabled = computed(() => {
+    // console.log(historyStackModel.stack.index.value)
+    return historyStackModel.stack.list.length - 1 <= historyStackModel.stack.index.value;
+  })
+
+  const redoHistoryDisabled = computed(() => {
+    return historyStackModel.stack.index.value === 0;
+  })
+
+  const undo = () => {
+    historyStackModel.undo(page);
+  }
+
+  const redo = () => {
+    historyStackModel.redo(page);
+  }
+
+  return {
+    state: {
+      undoHistoryDisabled,
+      redoHistoryDisabled
+    },
+    methods: {
+      undo,
+      redo
+    }
+  }
+}
+
+export default useHistory;