ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/layout/sectionLayout/SectionGroup4_back.vue

@@ -0,0 +1,388 @@
+<script setup>
+import { computed, inject, onMounted, ref, watch, provide } from 'vue';
+import { Delete } from '@element-plus/icons-vue'
+
+import VueDrag from './components/vueDrag/index.vue'
+import {MiddlewareComponentDes as ComponentMiddleware} from '@ibsp-component-lib'
+import useComponentContext, { layoutGroupContext } from '../../../hooks/useComponentContext'
+import { getDragGroup } from './section';
+
+import { executeCommand } from '@/models/command';
+import { useContextmenu } from '@/components/nextui/Contextmenu';
+import { emitGlobalEvent } from '@/models/useGlobalEvents';
+import { DesignComponent } from '@/models/useComponentModel';
+import useComponentStore from '@/stores/useComponentStore';
+const props = defineProps({
+  component: {
+    type: Object,
+    default: () => ({})
+  },
+  page: {
+    type: Object,
+    default: () => ({})
+  },
+  parentPropsValues: {
+    type: Object,
+    default: () => ({})
+  },
+  parentDragFun: {
+    type: Function,
+    default: () => () => { }
+  },
+  sectionInstance: {
+    type: Object,
+    default: () => ({})
+  },
+  isCtrl: {
+    type: Boolean,
+    default: false
+  },
+  onDragDropBox: {
+    type: Function,
+    default: () => () => { }
+  }
+})
+const group = props.sectionInstance.addGroup(props.component)
+const parentSectionMousedown = inject('parentSectionMousedown')
+const componentStore = useComponentStore()
+const sectionMethods = inject('sectionMethods')
+let longPressTimer = null
+let logPressFlag = false
+
+// 获取当前组件的所有子组件
+const allChildrenComponents = computed(() => {
+  return componentStore.queryComponentDataTreePlat(props.component)
+})
+// 获取当前下面组件
+const componentChildren = computed(() => {
+  return componentStore.queryComponentChildrenData(props.component.id)
+})
+// 获取当前组件的所有组合
+const allChildrenGroups = computed(() => {
+  return componentStore.queryComponentDataTreePlat(props.component, {
+    filter: (item) => item.componentMetaId === 'section-layout-group'
+  })
+})
+const getTargetParentGroups = (component, res = [])=>{
+  const parent = componentStore.queryComponentParent(component)
+  if (!parent || parent.type !== 'layout-group') {
+    return res
+  }
+  res.push(parent)
+  return getTargetParentGroups(parent, res)
+}
+const childrenHasActive = (childComponent)=>{
+  const parent = componentStore.queryComponentParent(childComponent)
+  return componentStore.queryComponentChildrenData(parent.id).some(item=>item.active)
+}
+const currentChildrenHasActive = computed(()=>{
+  return componentChildren.value.some(item=>item.active)
+})
+const parentGroups = computed(()=>{
+  return props.sectionInstance.getTargetParentGroups(props.component)
+})
+parentSectionMousedown?.(() => {
+  if (props.component._activeGroup) {
+    props.component._activeGroup = false
+    props.component.active = false
+    // visabledMask.value = true
+  }
+})
+const activeParentGroup = (component)=>{
+  const parent = componentStore.queryComponentParent(component)
+  if (parent.componentMetaId !== 'section-layout-group') {
+    if (!parent.active) {
+      parent.click(parent)
+    } else if (component.componentMetaId === 'section-layout-group') {
+      component.click(component)
+    }
+    return
+  }
+  if (!parent.active) {
+    activeParentGroup(parent)
+  } else if (component.componentMetaId === 'section-layout-group') {
+    component.click(component)
+  }
+}
+
+const updateBoxPosition = () => {
+  const left = Math.min(...componentChildren.value.map(item => item.position.x))
+  const top = Math.min(...componentChildren.value.map(item => item.position.y))
+  const width = Math.max(...componentChildren.value.map(item => item.position.x + item.position.w)) - left
+  const height = Math.max(...componentChildren.value.map(item => item.position.y + item.position.h)) - top
+  props.component.position.x = left;
+  props.component.position.y = top;
+  props.component.position.w = width;
+  props.component.position.h = height;
+}
+group.updateBoxPosition = updateBoxPosition
+// 拖拽
+const onDragging = (item, x, y)=>{
+  // item.position.x = x
+  // item.position.y = y
+  if (parentGroups.value.length > 0) {
+    parentGroups.value.forEach(item => {
+      item.updateBoxPosition()
+      item.component.selectActive = true
+    })
+  }
+  props.component.selectActive = true
+  item.position.x = x;
+  item.position.y = y;
+  updateBoxPosition()
+  emitGlobalEvent('nodeChangePosition', item)
+}
+
+// 拖拽大小
+const onResizing = (item, x, y, w, h)=>{
+  item.position.x = x
+  item.position.y = y
+  item.position.w = w
+  item.position.h = h
+  updateBoxPosition()
+  emitGlobalEvent('nodeChangeSize', item)
+}
+// 拖拽开始
+const onDragStart = (item) => {
+  // if (!props.component.active) return false;
+  if (item.componentMetaId === 'section-layout-group') {
+    getDragGroup(item.id).start(item.position)
+  }
+  return true
+}
+// 拖拽结束
+const onDragStop = (item) => {
+  if (item.componentMetaId === 'section-layout-group') {
+    getDragGroup(item.id).drop(item.position)
+  }
+}
+// 右键
+const onContextmenu = (item) => {
+
+}
+// 点击
+const onClickComponent = (e, item, isDragContainer = false) => {
+  return
+  // if (logPressFlag) {
+  //   logPressFlag = false
+  //   clearTimeout(longPressTimer)
+  //   const targetId = e.target.getAttribute('data-id')
+  //   const targetComponent = componentStore.componentDataMap[targetId]
+  //   activeParentGroup(targetComponent)
+  //   return
+  // }
+  // clearTimeout(longPressTimer)
+  // if (isDragContainer) {
+  //   item.click(item)
+  //   return
+  // }
+  // const targetId = e.target.getAttribute('data-id')
+  // if (targetId) {
+  //   const targetComponent = componentStore.componentDataMap[targetId]
+  //   console.log('点击', targetComponent.name);
+  //   const hasActive = childrenHasActive(targetComponent)
+  //   if (hasActive) {
+  //     targetComponent.click(targetComponent)
+  //     return
+  //   }
+  //   if (targetComponent.active) return
+  //   const parent = componentStore.queryComponentParent(targetComponent)
+  //   if (parent.active) {
+  //     targetComponent.click(targetComponent)
+  //   } else {
+  //     activeParentGroup(targetComponent)
+  //   }
+
+  // }
+
+}
+const onDblclickComponent = (e, item) => {
+  const targetId = e.target.getAttribute('data-id')
+  if (targetId) {
+    const targetComponent = componentStore.componentDataMap[targetId]
+    console.log('双击', targetComponent.name);
+    const res = getTargetParentGroups(targetComponent)
+    res.forEach(item => {
+      item._activeGroup = true
+    })
+    targetComponent.click(targetComponent)
+  }
+}
+
+
+const onClickDelComponent = (item) => {
+  executeCommand('deleteComponent', item)
+}
+
+const parentDragging = ref(false)
+getDragGroup(props.component.id).start = (position) => {
+  if (!parentDragging.value) {
+    parentDragging.value = true
+    componentChildren.value.forEach(item => {
+      if (item.componentMetaId === 'section-layout-group') {
+        getDragGroup(item.id).start (item.position)
+      }
+      item.position.x = item.position.x - position.x
+      item.position.y = item.position.y - position.y
+
+    })
+  }
+}
+
+getDragGroup(props.component.id).drop = (position) => {
+  if (parentDragging.value) {
+    parentDragging.value = false
+    componentChildren.value.forEach(item => {
+      item.position.x = item.position.x + position.x
+      item.position.y = item.position.y + position.y
+      if (item.componentMetaId === 'section-layout-group') {
+        getDragGroup(item.id).drop (item.position)
+      }
+    })
+    updateBoxPosition()
+  }
+}
+
+const onClickComponentGroup = (e)=>{
+  if (e.target.dataset?.type === 'section-layout-group') {
+    sectionMethods.onMousedownSection(e)
+  }
+}
+
+const onMousedownComponent = (e, item)=>{
+  longPressTimer = setTimeout(()=>{
+    logPressFlag = true
+  }, 300)
+}
+
+
+</script>
+
+<template>
+  <div class="section-layout-group"
+       :id="component.id"
+       data-type="section-layout-group"
+       @dragover.prevent="() => { }"
+       @mousedown="onClickComponentGroup"
+       :style="{
+
+       }"
+       :class="{
+         'select-active':component.selectActive,
+         'active-group':currentChildrenHasActive
+       }">
+    <template v-for="(item) in componentChildren" :key="item.id">
+      <VueDrag :w="item.position.w"
+               :h="item.position.h"
+               :x="item.position.x"
+               :y="item.position.y"
+               :z="item.position.z"
+               :resizable="item.active && item.componentMetaId !== 'section-layout-group'"
+               :parent="`#${item.parentSectionId}`"
+               :data-id="item.id"
+               :class="{
+                 'section-layout-group-drag':true,
+                 'active-g': item.active,
+                 'select-active':item.selectActive,
+                 'active-group':item._activeGroup && !item.active,
+                 'group-drag-item':item.componentMetaId === 'section-layout-group',
+               }"
+               :draggable="item.componentMetaId === 'section-layout-group'?false:true"
+               :drag-handle="'.section-layout-group-drag'"
+               v-show="item.show"
+               @contextmenu.stop.prevent="(e)=>onContextmenu(item)"
+               @mousedown.stop="()=>{}"
+               :grid="[parentPropsValues.gridSize, parentPropsValues.gridSize]"
+               :snap="parentPropsValues.alignLine"
+               :isConflictCheck="parentPropsValues.preventOverlap"
+               :lock-aspect-ratio="parentPropsValues.lockAspectRatio"
+               :snapTolerance="parentPropsValues.snapTolerance"
+               @click.stop="(e)=>onClickComponent(e,item,true)"
+
+               :scaleRatio="page.canvasZoom"
+               :onDragStart="()=>onDragStart(item)"
+               @dragging="(x, y) => onDragging(item, x, y)"
+               @resizing="(x, y, w, h) => onResizing(item, x, y, w, h)"
+               @dragstop="onDragStop(item)"
+               :style="{
+                 left:parentDragging?0:-((component.position?.x || 0)) + 'px',
+                 top:parentDragging?0:-((component.position?.y || 0)) + 'px',
+
+               }"
+      >
+        <div class="component-tools" v-show="item.active">
+          <span class="name">{{ item.name }}</span>
+          <el-icon @click="onClickDelComponent(item)"><Delete/></el-icon>
+        </div>
+        <ComponentMiddleware
+          :component="item"
+          :page="page"
+          :style="{
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            top: 0,
+            left:0
+          }"
+          :onDragDropBox="onDragDropBox"
+          :isCtrl="isCtrl"
+          :parentPropsValues="parentPropsValues"
+          :sectionInstance="sectionInstance"
+        />
+        <i class="component-mark"
+           @click.stop="(e)=>onClickComponent(e,item,true)"
+           v-if="item.componentMetaId !== 'section-layout-group'"
+        />
+      </VueDrag>
+      <!-- 拖拽遮罩 -->
+      <!-- <i class="component-drag-mark"
+         @mousedown="(e)=>onMousedownComponent(e,item)"
+         @click.stop="(e)=>onClickComponent(e,item)"
+         @dblclick.stop="(e)=>onDblclickComponent(e,item)"
+         :data-id="item.id"
+         :data-type="item.type === 'layout-group'?'group-drag-mark':'component-drag-mark'"
+         v-if="component.active && !currentChildrenHasActive"
+         :style="{
+           left: parentDragging ? 0 : -((component.position?.x || 0)) + 'px',
+           top: parentDragging ? 0 : -((component.position?.y || 0)) + 'px',
+           transform:`translate(${item.position.x}px, ${item.position.y}px)`,
+           width: item.position.w + 'px',
+           height: item.position.h + 'px',
+           'z-index': item.position.z + 1
+         }">
+      </i> -->
+    </template>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.section-layout-group{
+  position: absolute;
+  // pointer-events: none;
+  .group-drag-item{
+    // pointer-events: none !important;
+  }
+  [data-type="group-drag-mark"]{
+    // pointer-events: none !important;
+  }
+  :not(.section-layout-group){
+    pointer-events: auto;
+  }
+  .section-layout-group{
+    // pointer-events: none;
+  }
+  .section-layout-group-drag{
+    position: absolute;
+  }
+  .component-drag-mark{
+    position: absolute;
+  }
+  &.active-g, &.select-active{
+    outline: 1px solid var(--theme-gl-bg);
+  }
+  .active-group {
+      outline: 1px solid var(--theme-gl-bg);
+  }
+}
+
+</style>