ibsp-fg-page 4.0.2

package/src/components/nextui/DragNode/hooks/useResize.ts

@@ -0,0 +1,182 @@
+import { nextTick, reactive, ref, watch, type ExtractPropTypes, type Ref } from 'vue';
+
+import { type DragBoxRect, getParentSize } from '../util';
+import type { ResizeHandleType } from '../types'
+import { DragProps } from '../types';
+
+export default (handlesRef: Ref<HTMLDivElement>, targetRef: Ref<HTMLDivElement>, props: ExtractPropTypes<typeof DragProps>, emit: Function) => {
+
+
+  let handlesEl: HTMLDivElement | null = null;
+  let targetEl: HTMLDivElement | null = null;
+  let direction: ResizeHandleType;
+  const handles = props.resizeList
+  let hasBoundary = false
+
+  const sizeData = reactive<DragBoxRect>({
+    width: props.w,
+    height: props.h,
+    left: props.x,
+    top: props.y,
+    zoom: props.zoom,
+    startX: 0,
+    startY: 0,
+    mouseX: 0,
+    mouseY: 0,
+    offsetX: 0,
+    offsetY: 0,
+    diffX: 0,
+    diffY: 0
+  })
+
+  let minX = 0, minY = 0, maxX = 0, maxY = 0;
+  let minW = props.minW, maxW = props.maxW, minH = props.minH, maxH = props.maxH;
+  let startW: number = 0, startH: number = 0, startLeft: number = 0, startTop: number = 0
+
+  /**
+   * 获取边界
+   */
+  const getBoundary = (nodeOffsetX: number, nodeOffsetY: number) => {
+    const parentRect = getParentSize(targetRef.value as HTMLElement, props.parent, props.zoom) as DOMRect;
+    const minX = 0 - nodeOffsetX, minY = 0 - nodeOffsetY;
+    const maxX = (parentRect.width - nodeOffsetX), maxY = (parentRect.height - nodeOffsetY);
+    return [minX, maxX, minY, maxY, parentRect.width, parentRect.height];
+  }
+
+
+  const mousemove = (e: MouseEvent) => {
+    e.stopPropagation()
+
+    const clientX = e.clientX
+    const clientY = e.clientY
+    const moveX = Math.round((clientX - sizeData.startX) / props.zoom)
+    const moveY = Math.round((clientY - sizeData.startY) / props.zoom)
+
+    sizeData.offsetX = moveX
+    sizeData.offsetY = moveY
+
+    let newW = 0
+    let newH = 0
+
+    let curLeft = startLeft + moveX
+    let curTop = startTop + moveY
+    let curRight = curLeft + startW
+    let curBottom = curTop + startH
+
+    switch (direction) {
+    case 'rightCenter':
+      newW = hasBoundary ? (curRight >= maxX ? maxX - startLeft : startW + moveX) : startW + moveX
+      sizeData.width = newW >= maxW ? maxW : newW <= minW ? minW : newW
+      break
+    case 'bottomCenter':
+      newH = hasBoundary ? (curBottom >= maxY ? maxY - startTop : startH + moveY) : startH + moveY
+      sizeData.height = newH >= maxH ? maxH : newH <= minH ? minH : newH
+      break
+    case 'bottomRight':
+      newW = hasBoundary ? (curRight >= maxX ? maxX - startLeft : startW + moveX) : startW + moveX
+      sizeData.width = newW >= maxW ? maxW : newW <= minW ? minW : newW
+      newH = hasBoundary ? (curBottom >= maxY ? maxY - startTop : startH + moveY) : startH + moveY
+      sizeData.height = newH >= maxH ? maxH : newH <= minH ? minH : newH
+      break
+    case 'topCenter':
+      newH = hasBoundary ? (curTop <= minY ? sizeData.height : startH - moveY) : startH - moveY
+      sizeData.height = newH >= maxH ? maxH : newH <= minH ? minH : newH
+      sizeData.top = sizeData.height > 0 ? (curTop <= minY ? minY : startTop + moveY) : sizeData.top
+      break;
+    case 'leftCenter':
+      newW = hasBoundary ? (curLeft <= minX ? sizeData.width : startW - moveX) : startW - moveX
+      sizeData.width = newW >= maxW ? maxW : newW <= minW ? minW : newW
+      sizeData.left = sizeData.width > 0 ? (curLeft <= minX ? minX : startLeft + moveX) : sizeData.left
+      break
+    case 'topLeft':
+      newW = hasBoundary ? (curLeft <= minX ? sizeData.width : startW - moveX) : startW - moveX
+      sizeData.width = newW >= maxW ? maxW : newW <= minW ? minW : newW
+      newH = hasBoundary ? (curTop <= minY ? sizeData.height : startH - moveY) : startH - moveY
+      sizeData.height = newH >= maxH ? maxH : newH <= minH ? minH : newH
+      sizeData.left = sizeData.width > 0 ? (curLeft <= minX ? minX : startLeft + moveX) : sizeData.left
+      sizeData.top = sizeData.height > 0 ? (curTop <= minY ? minY : startTop + moveY) : sizeData.top
+      break
+    case 'topRight':
+      newW = hasBoundary ? (curRight >= maxX ? sizeData.width : startW + moveX) : startW + moveX
+      sizeData.width = newW >= maxW ? maxW : newW <= minW ? minW : newW
+      newH = hasBoundary ? (curTop <= minY ? sizeData.height : startH - moveY) : startH - moveY
+      sizeData.height = newH >= maxH ? maxH : newH <= minH ? minH : newH
+      sizeData.top = sizeData.height > 0 ? (curTop <= minY ? minY : startTop + moveY) : sizeData.top
+      break
+    case 'bottomLeft':
+      newW = hasBoundary ? (curLeft <= minX ? sizeData.width : startW - moveX) : startW - moveX
+      sizeData.width = newW >= maxW ? maxW : newW <= minW ? minW : newW
+      newH = hasBoundary ? (curBottom >= maxY ? maxY - startTop : startH + moveY) : startH + moveY
+      sizeData.height = newH >= maxH ? maxH : newH <= minH ? minH : newH
+      sizeData.left = sizeData.width > 0 ? (curLeft <= minX ? minX : startLeft + moveX) : sizeData.left
+      break
+    default:
+      break
+    }
+
+    sizeData.height = Math.round(sizeData.height)
+    sizeData.width = Math.round(sizeData.width)
+
+    emit('resize', sizeData)
+  }
+
+  const mouseup = (e: MouseEvent) => {
+    document.removeEventListener('mousemove', mousemove)
+    document.removeEventListener('mouseup', mouseup)
+    emit('resize-end', sizeData)
+  }
+
+  const mousedown = (e: MouseEvent) => {
+    e.stopPropagation()
+    direction = ((e.target as HTMLDivElement).dataset.direction) as ResizeHandleType
+    if (!direction || !handles.includes(direction)) return
+
+    const targetRect = targetEl!.getBoundingClientRect()
+    sizeData.startX = e.clientX
+    sizeData.startY = e.clientY
+    sizeData.left = props.x
+    sizeData.top = props.y
+    sizeData.zoom = props.zoom
+    sizeData.mouseX = targetRect.x
+    sizeData.mouseY = targetRect.y
+
+    startW = props.w
+    startH = props.h
+    startLeft = props.x
+    startTop = props.y
+    minW = props.minW
+    maxW = props.maxW
+    minH = props.minH
+    maxH = props.maxH
+
+    hasBoundary = !!(props.parent === true || (props.parent && typeof props.parent === 'string'))
+    if (hasBoundary) {
+      [minX, maxX, minY, maxY] = getBoundary(0, 0);
+    }
+
+    emit('resize-start', sizeData)
+
+    document.addEventListener('mousemove', mousemove)
+    document.addEventListener('mouseup', mouseup)
+
+  }
+
+  watch(() => props.useResize, (val) => {
+    if (val) {
+      nextTick(() => {
+        handlesEl = handlesRef.value
+        targetEl = targetRef.value
+        handlesEl!.addEventListener('mousedown', mousedown)
+      })
+    } else {
+      if (handlesEl) {
+        handlesEl!.removeEventListener('mousedown', mousedown)
+        handlesEl = null
+      }
+    }
+  }, {
+    immediate: true
+  })
+
+
+}

package/src/components/nextui/DragNode/hooks/useStyle.ts

@@ -0,0 +1,31 @@
+import { computed, type CSSProperties, type ExtractPropTypes, type Ref } from 'vue';
+
+import { DragProps } from '../types';
+
+function useStyle(
+  props: ExtractPropTypes<typeof DragProps>,
+  isMoving: Ref<boolean>
+) {
+
+  const wrapStyle = computed<CSSProperties>(() => {
+    let transform: CSSProperties | null = {
+      transform: `translate(${props.x - props.offsetX}px , ${props.y - props.offsetY}px)`,
+    }
+    if (props.useShadowDragDom === false && isMoving.value === true) {
+      transform = null;
+    }
+    return {
+      width: `${props.w}px`,
+      height: `${props.h}px`,
+      position: 'absolute',
+      ...transform,
+    }
+  })
+
+  return {
+    wrapStyle
+  }
+
+}
+
+export default useStyle;

package/src/components/nextui/DragNode/index.ts

@@ -0,0 +1,11 @@
+import type { App } from 'vue';
+
+import _DragNode from './index.vue';
+
+_DragNode.install = (app: App) => {
+  app.component('DragNode', _DragNode)
+}
+
+export const DragNode = _DragNode;
+
+export default DragNode;

package/src/components/nextui/DragNode/index.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { ref, onMounted, type Ref, computed } from 'vue';
+
+import useStyle from './hooks/useStyle';
+import { DragProps } from './types';
+import useDrag from './hooks/useDrag';
+import useResize from './hooks/useResize';
+const Props = defineProps(DragProps);
+const targetRef = ref<HTMLElement>()
+const handlesRef = ref<HTMLDivElement>()
+
+/**
+ * TODO：
+ * 此处还需要概率如下事件的支持
+ * resize-start: 缩放开始
+ */
+
+const emits = defineEmits(['drag-start', 'drag', 'drag-end', 'ref-line-change', 'resize', 'resize-end', 'resize-start'])
+const { isMousedown, lines, isMoving } = useDrag(targetRef as Ref<HTMLElement>, Props, emits);
+const styles = useStyle(Props, isMoving);
+
+
+onMounted(()=>{
+  useResize(handlesRef as any, targetRef as any, Props, emits)
+})
+
+const zoom = computed(()=>{
+  return Props.zoom > 1 ? 1 : Props.zoom
+})
+
+defineExpose({
+  targetRef,
+  handlesRef
+})
+
+</script>
+<template>
+
+  <component
+    :drap-parent="parent"
+    :is="tag"
+    ref="targetRef"
+    :class="['is-next-ui-drag-node' , Props.isGroup ? 'next-ui-drag-group' : 'next-ui-drag-node']"
+    :style="styles.wrapStyle.value"
+  >
+    <slot></slot>
+    <div
+      class="handles"
+      ref="handlesRef"
+      v-show="Props.useResize"
+      :style="{
+        width: 6 / zoom + 'px',
+        height: 6 / zoom + 'px'
+      }"
+    >
+      <i
+        v-for="(handle) in Props.resizeList"
+        :key="handle"
+        :data-direction="handle"
+        :class="['resize-handle', 'handle-' + handle]"
+      >
+      </i>
+    </div>
+  </component>
+</template>
+<style lang="less">
+.next-ui-drag-box{
+  position: absolute;
+  z-index: 5000;
+  border: 1px dashed var(--theme-gl-bg);
+  background: rgba(0 , 102 , 255, 0.3 );
+  top: 0;
+  left: 0;
+}
+</style>
+<style lang="less" scoped>
+.ref-line{
+  position: absolute;
+  background: var(--theme-gl-bg);
+  .ref-line-x{
+    width: 1px;
+  }
+}
+.resize-handle{
+  width: inherit;
+  height: inherit;
+  background: var(--theme-font-color);
+  border: 1px solid var(--theme-gl-bg);
+  position: absolute;
+  z-index: 3;
+  &.handle-topLeft{
+    top: 0;
+    left: 0;
+    transform: translate(-50% , -50%);
+    cursor: nw-resize;
+  }
+  &.handle-topCenter{
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    cursor: n-resize;
+  }
+  &.handle-topRight{
+    top: 0;
+    right: 0;
+    transform: translate(50% , -50%);
+    cursor: ne-resize;
+  }
+  &.handle-bottomLeft{
+    bottom: 0;
+    left: 0;
+    transform: translate(-50% , 50%);
+    cursor: sw-resize;
+  }
+  &.handle-bottomCenter{
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%) translateY(50%);
+    cursor: s-resize;
+  }
+  &.handle-bottomRight{
+    bottom: 0;
+    right: 0;
+    transform: translate(50% , 50%);
+    cursor: se-resize;
+  }
+  &.handle-rightCenter{
+    right: 0;
+    top: 50%;
+    transform: translateX(50%) translateY(-50%);
+    cursor: e-resize;
+  }
+  &.handle-leftCenter{
+    left: 0;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    cursor: w-resize;
+  }
+}
+</style>

package/src/components/nextui/DragNode/types.ts

@@ -0,0 +1,158 @@
+import type { Component, PropType, ExtractDefaultPropTypes } from 'vue';
+
+import type { DragBoxRect } from './util';
+
+export type ResizeHandleType = 'topLeft' | 'topCenter' | 'topRight' | 'rightCenter' | 'bottomRight' | 'bottomCenter' | 'bottomLeft' | 'leftCenter';
+
+export const DragProps = {
+  // 当前元素的x轴坐标
+  x: {
+    type: Number,
+    default: 0,
+  },
+  // 当前元素的y轴坐标
+  y: {
+    type: Number,
+    default: 0,
+  },
+  // 当前元素的父级X轴偏移量
+  offsetX: {
+    type: Number,
+    default: 0
+  },
+  // 当前元素的父级Y轴偏移量
+  offsetY: {
+    type: Number,
+    default: 0
+  },
+  // 当前元素的高度
+  h: {
+    type: Number,
+    default: 0,
+  },
+  // 当前元素的宽度
+  w: {
+    type: Number,
+    default: 0,
+  },
+  // 当前缩放值
+  zoom: {
+    type: Number,
+    default: 1
+  },
+  // 指定容器HTML标签
+  tag: {
+    type: [String, Object] as PropType<string | Component>,
+    default: 'div'
+  },
+  // 是否禁用，禁用后改元素将不能被拖拽
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 指定是拖拽元素本身还是创建一个影子元素执行拖拽动作，为了性能，建议为true
+  useShadowDragDom: {
+    type: Boolean,
+    default: true
+  },
+  // 指定元素是否被选中
+  selected: {
+    type: Boolean,
+    default: false
+  },
+  // 指定parent，如果为true，则取当前元素的父元素，如果为string，则当成选择器使用
+  parent: {
+    type: [Boolean, String],
+    default: false
+  },
+  // 拖拽时控制是否能拖拽，如该函数返回false，则会中断拖拽逻辑(不中断拖拽动作)，在拖拽时实时计算
+  canDrag: {
+    type: Function as PropType<(dragData: DragBoxRect) => boolean>
+  },
+  // 标记是否分组
+  isGroup: {
+    type: Boolean,
+    default: false,
+  },
+  // 吸附触发阈值
+  snapTolerance: {
+    type: Number,
+    default: 20
+  },
+  // 启用吸附
+  useSnap: {
+    type: Boolean,
+    default: true
+  },
+  // 启用辅助线
+  useRefLine: {
+    type: Boolean,
+    default: true
+  },
+  // 网格大小
+  gridW: {
+    type: Number,
+    default: 10
+  },
+  // 网格大小
+  gridH: {
+    type: Number,
+    default: 10
+  },
+  // 启用网格
+  useGrid: {
+    type: Boolean,
+    default: true
+  },
+  // 启用拖拽改变元素大小
+  useResize: {
+    type: Boolean,
+    default: true
+  },
+  // TODO 启用宽高等比缩放
+  equalProportion: {
+    type: Boolean,
+    default: false
+  },
+  // 启动距离计算。启用后会分别计算出横向纵向距离最近的元素距离
+  useDistance: {
+    type: Boolean,
+    default: true
+  },
+  // TODO 启用碰撞检测
+  useCheckCollision: {
+    type: Boolean,
+    default: false
+  },
+  // 显示的缩放handle列表
+  resizeList: {
+    type: Array as PropType<ResizeHandleType[]>,
+    default() {
+      return ['topLeft', 'topCenter', 'topRight', 'rightCenter', 'bottomRight', 'bottomCenter', 'bottomLeft', 'leftCenter']
+    }
+  },
+  minW: {
+    type: Number,
+    default: 0
+  },
+  minH: {
+    type: Number,
+    default: 0
+  },
+  maxW: {
+    type: Number,
+    default: Infinity
+  },
+  maxH: {
+    type: Number,
+    default: Infinity
+  },
+  lineParent: {
+    type: String,
+    default: '`'
+  },
+  hasBoundary: {
+    type: Boolean,
+    default: false
+  },
+}

package/src/components/nextui/DragNode/util.ts

@@ -0,0 +1,135 @@
+
+export type DragBoxRect = {
+  left: number,
+  top: number,
+  height: number,
+  width: number,
+  zoom: number,
+  startX: number,
+  startY: number,
+  mouseX: number,
+  mouseY: number,
+  offsetX: number,
+  offsetY: number,
+  diffX: number,
+  diffY: number
+}
+
+/**
+ * 创建拖动元素
+ * @returns {HTMLElement}
+ */
+export const createDragBox = (useShadowDragDom: boolean, { left: x, top: y, width, height }: DragBoxRect, targetEl: HTMLElement) : [HTMLElement, Function, Function] => {
+  let div: HTMLElement;
+  let parentEl: HTMLElement = targetEl.parentElement as HTMLElement;
+  if (useShadowDragDom) {
+    div = document.createElement('div');
+    div.className = 'next-ui-drag-box'
+    div.style.width = `${width}px`;
+    div.style.height = `${height}px`;
+    div.style.transform = `translate(${x}px , ${y}px)`
+    div.style.position = 'absolute';
+    div.style.display = 'none';
+    parentEl.appendChild(div);
+  } else {
+    div = targetEl;
+  }
+
+  const removeNode = () => {
+    if (useShadowDragDom) {
+      div.parentNode?.removeChild(div);
+    }
+  }
+
+  const tranlate = (x: number, y: number) => {
+    div.style.display = 'block';
+    div.style.transform = `translate(${x}px , ${y}px)`
+  }
+
+  return [div, removeNode, tranlate];
+}
+
+/**
+ * 获取缩放后得Rect
+ */
+export const getBoundingClientRectByScale = (el : HTMLElement | Element, zoom : number)=>{
+  var rect = el.getBoundingClientRect()
+  return {
+    ...rect,
+    left: Math.round(rect.left / zoom),
+    top: Math.round(rect.top / zoom),
+    right: Math.round(rect.right / zoom),
+    bottom: Math.round(rect.bottom / zoom),
+    width: Math.round(rect.width / zoom),
+    height: Math.round(rect.height / zoom)
+  } as DOMRect
+}
+
+/**
+ * 计算新的坐标
+ */
+export const computeNewPosition = (option: DragBoxRect) => {
+  const { startX, startY, zoom, left, top, mouseX, mouseY } = option;
+  const offsetX = mouseX - startX, offsetY = mouseY - startY;
+  const newX = left + (offsetX / zoom), newY = top + (offsetY / zoom);
+  return [newX, newY]
+}
+
+/**
+ * 获取父元素的大小及位置
+ * @param {HTMLElement} targetEl 当前元素
+ * @param {boolean | string} parent 父元素类型，为string时则查询父元素，为boolean时则在当前元素获取
+ * @param {number} zoom 缩放值
+ * @returns {DOMRect}
+ */
+export const getParentSize = (targetEl: HTMLElement, parent: string | boolean, zoom: number) :DOMRect | null => {
+  let parentDom: HTMLElement = targetEl.parentNode as HTMLElement;
+  if (typeof parent === 'string') {
+    parentDom = (document.querySelector(parent) as HTMLElement);
+  }
+  return getBoundingClientRectByScale(parentDom, zoom);
+}
+/**
+ * 获取元素相对父元素的rect信息
+ * @param targetEl
+ * @param zoom
+ * @returns
+ */
+export const getRelativeRectBySacle = (targetEl: HTMLElement, zoom: number, parent: string | boolean): DOMRect => {
+  let parentNode: HTMLElement = targetEl.parentNode as HTMLElement;
+  if (typeof parent === 'string') {
+    parentNode = (document.querySelector(parent) as HTMLElement);
+  }
+  let parentRect = parentNode.getBoundingClientRect();
+  let rect = targetEl.getBoundingClientRect();
+  return {
+    ...rect,
+    left: Math.round((rect.left - parentRect.left) / zoom),
+    top: Math.round((rect.top - parentRect.top) / zoom),
+    right: Math.round((rect.right - parentRect.left) / zoom),
+    bottom: Math.round((rect.bottom - parentRect.top) / zoom),
+    width: Math.round(rect.width / zoom),
+    height: Math.round(rect.height / zoom)
+  }
+}
+
+/**
+ * 获取所有拖拽节点
+ * @param targetEl
+ * @param parent
+ * @param querySelector
+ * @returns
+ */
+export const getAllDragNode = (targetEl: HTMLElement, parent: string | boolean, querySelector: string) => {
+  let parentDom: HTMLElement = targetEl.parentNode as HTMLElement;
+  if (!document.contains(parentDom)) {
+    return
+  }
+  if (typeof parent === 'string') {
+    parentDom = (document.querySelector(parent) as HTMLElement);
+  }
+  const allChildren = [...parentDom.querySelectorAll(querySelector)];
+  const currentChildren = [...targetEl.querySelectorAll(querySelector)];
+
+  return allChildren.filter(item => !currentChildren.find(el => el === item)) as HTMLElement[];
+}