ibsp-fg-page 4.0.2

package/src/components/ibsp/IbspTree.vue

@@ -0,0 +1,265 @@
+<script setup>
+import { Tree } from 'ant-design-vue';
+import {
+  reactive,
+  onActivated,
+  nextTick,
+  ref,
+  useSlots,
+  computed,
+  watch
+} from 'vue';
+import { v4 } from 'uuid';
+import { filter, toArray } from 'tree-lodash';
+
+import IbspSearchInput from './IbspSearchInput.vue';
+const props = defineProps({
+  id: {
+    type: String,
+    default: () => 'ibspTree-' + v4()
+  },
+  data: {
+    type: Array,
+    default: () => []
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '请输入搜索内容'
+  },
+  isSelectScrollIntoView: {
+    type: Boolean,
+    default: true
+  },
+  isOpenSearch: {
+    type: Boolean,
+    default: false
+  },
+  fieldProps: {
+    type: Object,
+    default: () => ({
+      title: 'label',
+      key: 'id'
+    })
+  }
+});
+const emit = defineEmits(['select']);
+const treeRef = ref(null);
+const searchRef = ref(null);
+
+const selectedKeys = defineModel('selectedKeys', {
+  type: Array,
+  default: () => []
+});
+
+const state = defineModel({
+  default: () =>
+    reactive({
+      selectedKeys: [],
+      checkedKeys: [],
+      expandedKeys: [],
+      searchValue: ''
+    })
+});
+
+const searchData = ref(null);
+
+const resData = computed(() => {
+  if (searchData.value) {
+    return searchData.value;
+  }
+  return props.data;
+});
+
+const onScrollIntoView = (id = selectedKeys.value?.[0]) => {
+
+  const dom = document.getElementById(`tree-${id}`);
+  dom?.scrollIntoView?.({
+    behavior: 'smooth',
+    block: 'center',
+    inline: 'center'
+  });
+};
+
+const onSelectPage = (_, { node } = {}) => {
+  if (props.isSelectScrollIntoView) {
+    onScrollIntoView(node);
+  }
+  emit('select', node);
+};
+
+defineExpose({
+  onScrollIntoView,
+  getTreeRef: () => treeRef.value,
+  getSearchRef: () => searchRef.value
+});
+
+if (props.isSelectScrollIntoView) {
+  onActivated(() => {
+    nextTick(() => {
+      onScrollIntoView();
+    });
+  });
+}
+
+const slots = computed(() => {
+  const slotMap = useSlots();
+  return Object.keys(slotMap).reduce((pre, key) => {
+    if (key === 'title') return pre;
+    pre[key] = slotMap[key];
+    return pre;
+  }, {});
+});
+
+const onChangeSearch = (value) => {
+  if (!value) {
+    searchData.value = null;
+    return;
+  }
+  searchData.value = toArray(props.data).filter((item) => {
+    return item.label.includes(value);
+  });
+};
+
+const stopWatch = watch(
+  () => resData.value,
+  (val) => {
+    if (val?.length) {
+      nextTick(() => {
+        setTimeout(() => {
+          onScrollIntoView();
+        }, 50);
+      });
+      setTimeout(() => {
+        stopWatch();
+      }, 10);
+    }
+  },
+  {
+    immediate: true
+  }
+);
+</script>
+
+<template>
+  <div class="ibsp-tree" :id="id">
+    <header v-if="isOpenSearch">
+      <IbspSearchInput
+        @change="onChangeSearch"
+        v-model="state.searchValue"
+        ref="searchRef"
+        :placeholder="searchPlaceholder"
+      />
+      <slot name="header-right"></slot>
+    </header>
+
+    <main>
+      <Tree
+        v-if="resData.length"
+        :fieldNames="props.fieldProps"
+        ref="treeRef"
+        :show-icon="$slots.icon ? true : false"
+        :blockNode="true"
+        v-model:selectedKeys="selectedKeys"
+        v-model:checkedKeys="state.checkedKeys"
+        :tree-data="resData"
+        @select="onSelectPage"
+        v-bind="$attrs"
+      >
+        <template #title="obj" v-if="!$slots.title">
+          <span :id="`tree-${obj[props.fieldProps.key]}`">{{
+            obj[props.fieldProps.title]
+          }}</span>
+        </template>
+        <template #title="titleValues" v-else>
+          <div :id="`tree-${titleValues?.[props.fieldProps.key]}`">
+            <slot name="title" v-bind="titleValues"></slot>
+          </div>
+        </template>
+        <template #[key]="values" v-for="(_, key) in slots">
+          <slot :name="key" v-bind="values"></slot>
+        </template>
+      </Tree>
+      <el-empty v-else description="暂无数据" />
+    </main>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.ibsp-tree {
+    width: 100%;
+    height: 100%;
+
+    header {
+        height: 35px;
+        display: flex;
+        align-items: center;
+        :deep(.ant-input-affix-wrapper) {
+            background-color: var(--theme-block-bg);
+            color: var(--theme-font-color);
+            border: 1px solid var(--theme-border-color);
+            border-radius: 2px;
+            box-shadow: none;
+            input {
+                background-color: var(--theme-block-bg);
+                color: var(--theme-font-color);
+                &::placeholder {
+                    color: var(--theme-font-color);
+                    opacity: 0.5;
+                }
+            }
+        }
+    }
+    main {
+        height: calc(100% - 40px);
+        overflow: auto;
+        :deep(.ant-tree) {
+            background-color: var(--theme-bg);
+            .ant-tree-iconEle {
+                display: flex;
+                align-items: center;
+                > i {
+                    margin-top: -2px;
+                }
+            }
+            .ant-tree-list {
+                margin-top: 5px;
+            }
+        }
+        :deep(.ant-tree-title) {
+            width: 100%;
+        }
+
+        &::-webkit-scrollbar {
+            width: 5px;
+            height: 5px;
+        }
+        &::-webkit-scrollbar-thumb {
+            border-radius: 10px;
+            background-color: #99999962;
+        }
+        :deep(.ant-tree-node-content-wrapper) {
+            display: flex;
+        }
+
+        :deep(.ant-tree-treenode) {
+            padding: 3px 0;
+            color: var(--theme-font-color);
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.04);
+            }
+            .ant-tree-node-content-wrapper {
+                background-color: transparent;
+                color: var(--theme-font-color);
+            }
+        }
+        :deep(.ant-tree-treenode-selected) {
+            background-color: var(--theme-gl-bg) !important;
+
+            .ant-tree-node-selected {
+                background-color: transparent !important;
+                color: var(--theme-gl-color) !important;
+            }
+        }
+    }
+}
+</style>

package/src/components/ibsp/IbspTree2.vue

@@ -0,0 +1,118 @@
+<script setup>
+//
+import { reactive, ref, watch } from 'vue'
+
+const props = defineProps({
+  notSelectParent: {
+    type: Boolean,
+    default: false
+  },
+  defaultProps: {
+    type: Object,
+    default: () => ({})
+  },
+  stickyParent: {
+    type: Boolean,
+    default: false
+  },
+  nodeHeight: {
+    type: Number,
+    default: 28
+  }
+})
+
+
+const emit = defineEmits(['currentChange'])
+
+const treeRef = ref(null)
+
+const defaultProps = reactive({
+  ...props.defaultProps,
+  children: 'children',
+  label: 'label',
+  class: (node)=>{
+    const classes = []
+    if ((props.notSelectParent && node?.children?.length) || node.notSelect) {
+      classes.push('not-select-parent')
+    }
+    if (props.stickyParent && node?.children?.length) {
+      classes.push('sticky-parent')
+    }
+    return classes.join(' ')
+  },
+
+})
+
+const onChangeCurrentNode = (node, ...args) => {
+  if ((props.notSelectParent && node?.children?.length) || node.notSelect) {
+    return
+  }
+  emit('currentChange', node, ...args)
+}
+
+
+</script>
+
+<template>
+  <div class="ibsp-tree-2">
+    <el-tree
+      node-key="id"
+      highlight-current
+      ref="treeRef"
+      v-bind="$attrs"
+      :props="defaultProps"
+      @current-change="onChangeCurrentNode"
+      :style="{
+        '--el-tree-node-content-height': props.nodeHeight + 'px'
+      }"
+    >
+      <template #default="values">
+        <slot  v-bind="values"></slot>
+      </template>
+    </el-tree>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ibsp-tree-2 {
+  width: 100%;
+  height: 100%;
+    :deep(.el-tree) {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        // 滚动条
+        &::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--theme-block-bg);
+            border-radius: 6px;
+        }
+        .el-tree-node__content{
+            color: var(--theme-font-color);
+        }
+        &.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
+            background-color: var(--theme-gl-bg);
+            color: var(--theme-gl-color);
+        }
+         .sticky-parent{
+            >.el-tree-node__content{
+                position: sticky;
+                top: 0;
+                z-index: 1;
+                background-color: var(--theme-bg) !important;
+            }
+         }
+        .not-select-parent{
+            &.el-tree-node.is-current > .el-tree-node__content{
+                background-color: transparent ;
+                color: var(--theme-font-color);
+            }
+        }
+    }
+}
+
+</style>

package/src/components/nextui/BoxSelection/hooks/useBoxSelection.ts

@@ -0,0 +1,165 @@
+
+import { onBeforeMount, onMounted, reactive, type Ref } from 'vue'
+
+import {
+  isExitElement,
+  isSelectElement
+} from '../utils'
+import type { Emit, Props, Position } from '../types'
+export default (
+  props:Props,
+  emit:Emit,
+  boxSectionRef:Ref<HTMLElement | null>
+)=>{
+
+  const styles = reactive<Partial<CSSStyleDeclaration>>({})
+
+  const position:Position = { width: 0, height: 0, left: 0, top: 0, }
+  let startX = 0, startY = 0
+  let zoom = props.zoom
+  let parentElement:HTMLElement | null = null
+  let parentRect:DOMRect = { x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0, toJSON: ()=>'' }
+  let selected = false
+  let selecting = false
+  let excludeTriggerElements = props.excludeTriggerElements
+  let includeTriggerElements = props.includeTriggerElements
+  let selectionTargets:HTMLElement[] = []
+  let selectingTargetClassName = props.selectingTargetClassName
+
+
+  const handleMouseMove = (e:MouseEvent)=>{
+    e.stopPropagation()
+    e.stopImmediatePropagation()
+
+    const _clientX = e.clientX
+    const _clientY = e.clientY
+    const clientX = e.x - parentRect.left;
+    const clientY = e.y - parentRect.top;
+    let _width = clientX - startX
+    let _height = clientY - startY;
+    const _position = {
+      width: _width,
+      height: _height,
+      left: _clientX,
+      top: _clientY
+    }
+    if (Math.abs(_width) < 10 || Math.abs(_height) < 10) return
+
+    position.left = Math.abs(_width < 0 ? startX + _width : startX) / zoom;
+    position.top = Math.abs(_height < 0 ? startY + _height : startY) / zoom;
+    position.height = Math.abs(_height / zoom);
+    position.width = Math.abs(_width / zoom);
+
+    styles.width = `${position.width}px`
+    styles.height = `${position.height}px`
+    styles.left = `${position.left}px`
+    styles.top = `${position.top}px`
+
+    selecting = true
+
+
+    for (const element of selectionTargets) {
+      const rect = element.getBoundingClientRect()
+
+
+      if (isSelectElement(position, rect)) {
+        element.classList.add(selectingTargetClassName)
+      } else {
+        element.classList.remove(selectingTargetClassName)
+      }
+    }
+
+    emit('selecting', position)
+
+  }
+
+  const handleMouseUp = (e:MouseEvent)=>{
+    e.stopPropagation()
+    e.stopImmediatePropagation()
+    document.removeEventListener('pointermove', handleMouseMove)
+    document.removeEventListener('mouseup', handleMouseUp)
+    selected = true
+  }
+
+  const handleMouseDown = (e:MouseEvent)=>{
+    // ...
+    e.stopPropagation()
+    e.stopImmediatePropagation()
+
+    const target = e.target as HTMLElement
+
+    if (!isExitElement(target, includeTriggerElements, excludeTriggerElements)) {
+      return
+    }
+
+    selectionTargets = document.querySelectorAll(props.selectionTarget) as unknown as HTMLElement[]
+
+    console.log('selectionTargets', selectionTargets);
+
+
+    zoom = props.zoom
+    parentRect = parentElement!.getBoundingClientRect()
+    startX = e.clientX - parentRect.left
+    startY = e.clientY - parentRect.top
+    if (selected) {
+      clearBoxSelection()
+      selected = false
+    }
+
+
+    document.addEventListener('pointermove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+  }
+
+  const clearBoxSelection = ()=>{
+    styles.width = '0px'
+    styles.height = '0px'
+    styles.left = '0px'
+    styles.top = '0px'
+  }
+
+  const init = ()=>{
+
+    if (typeof props.parent === 'string') {
+      parentElement = document.querySelector(props.parent)
+    } else if (props.parent === true) {
+      parentElement = boxSectionRef.value?.parentElement!
+    } else {
+      parentElement = document.body
+    }
+    if (parentElement) {
+      parentElement.addEventListener('pointerdown', handleMouseDown)
+    }
+
+    const close = ()=>{
+      if (selected) {
+        clearBoxSelection()
+      }
+    }
+
+    document.addEventListener('mousedown', close)
+
+    boxSectionRef.value!.addEventListener('click', ()=>{
+      if (selected) {
+        clearBoxSelection()
+      }
+    })
+
+    return ()=>{
+      document.removeEventListener('pointerdown', handleMouseDown)
+      document.removeEventListener('mousedown', close)
+    }
+  }
+
+  onMounted(()=>{
+    const destroy = init()
+    onBeforeMount(()=>{
+      destroy()
+    })
+  })
+
+  return {
+    styles
+  }
+
+}

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

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

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { props as BoxSelectionProps, type Emit } from './types'
+import useBoxSelection from './hooks/useBoxSelection'
+
+const props = defineProps(BoxSelectionProps)
+const emit = defineEmits<Emit>();
+const boxSelectionRef = ref<HTMLElement | null>(null)
+
+const { styles } = useBoxSelection(props, emit, boxSelectionRef)
+
+
+</script>
+
+<template>
+  <Teleport to="#app-designer-container">
+    <i class="ibsp-nextui-box-selection"
+       ref="boxSelectionRef"
+       :style="(styles as any)">
+    </i>
+  </Teleport>
+
+</template>
+
+<style lang="less" scoped >
+.ibsp-nextui-box-selection{
+    display: block;
+    position: absolute;
+    z-index: 5000;
+    border: 1px dashed var(--theme-gl-bg);
+    background: rgba(0 , 102,255, 0.3 );
+}
+</style>
+
+<style>
+.select-target{
+    border: 2px dashed var(--theme-gl-bg);;
+}
+</style>

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

@@ -0,0 +1,50 @@
+
+import { type ExtractPropTypes } from 'vue';
+
+export interface Position {
+  width: number
+  height: number
+  left: number
+  top: number
+}
+
+export const props = {
+  zoom: {
+    type: Number,
+    default: 1
+  },
+  triggerTimer: {
+    type: Number,
+    default: 100
+  },
+  selectionTarget: {
+    type: String,
+    required: true,
+    default: ''
+  },
+  parent: {
+    type: [String, Boolean],
+    default: '#app-designer-container'
+  },
+  excludeTriggerElements: {
+    type: Object,
+    default: () => (null)
+  },
+  includeTriggerElements: {
+    type: Object,
+    default: () => (null)
+  },
+  selectingTargetClassName: {
+    type: String,
+    default: 'select-target'
+  }
+}
+
+export type Emit = {
+  (e:'selecting', position:Position):void
+
+}
+
+
+export type Props = ExtractPropTypes<typeof props>
+

package/src/components/nextui/BoxSelection/utils.ts

@@ -0,0 +1,35 @@
+import type { Position } from './types'
+
+export const isExitElement = (el: HTMLElement, include:any, exclude:any) => {
+  if (!include && !exclude) {
+    return true
+  }
+  const targetClassNames = el.classList
+  const className = include?.class || []
+  const excludeClassName = exclude?.class || []
+
+  // 判断是否在exclude中className中是否有一个在targetClassNames中
+  if ((excludeClassName.some((className: string) => targetClassNames.contains(className)))) {
+    return false
+  }
+
+  // 判断是否在include中className中是否有一个在targetClassNames中
+  if (className.length && className.some((className: string) => targetClassNames.contains(className))) {
+    return true
+  }
+
+
+}
+
+
+/** 判断是否框选 */
+export const isSelectElement = (position:Position, targetPosition:Position) => {
+  return !(
+    position.top >
+        targetPosition.height + targetPosition.top ||
+        position.left >
+        targetPosition.left + targetPosition.width ||
+        targetPosition.top > position.top + position.height ||
+        targetPosition.left > position.left + position.width
+  );
+};