misp-ui-library-test 0.0.1

package/src/packages/auto-grid-layout/src/components/GridLayout.vue

@@ -0,0 +1,367 @@
+<template>
+  <div ref="item" class="vue-grid-layout" :style="mergedStyle">
+    <slot></slot>
+    <grid-item class="vue-grid-placeholder" v-show="isDragging" :x="placeholder.x" :y="placeholder.y" :w="placeholder.w" :h="placeholder.h" :i="placeholder.i"></grid-item>
+  </div>
+</template>
+
+<script>
+import GridItem from './GridItem.vue'
+
+import Vue from 'vue'
+import { bottom, compact, getLayoutItem, moveElement, validateLayout, cloneLayout, getAllCollisions } from '../utils/utils.js'
+import { getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout } from '../utils/responsiveUtils.js'
+import { addWindowEventListener, removeWindowEventListener } from '../utils/DOM.js'
+
+export default {
+  name: 'GridLayout',
+  provide() {
+    return {
+      eventBus: null,
+      layout: this,
+    }
+  },
+  components: { GridItem },
+  props: {
+    autoSize: {
+      type: Boolean,
+      default: true,
+    },
+    colNum: {
+      type: Number,
+      default: 12,
+    },
+    rowHeight: {
+      type: Number,
+      default: 150,
+    },
+    maxRows: {
+      type: Number,
+      default: Infinity,
+    },
+    margin: {
+      type: Array,
+      default: function () {
+        return [10, 10]
+      },
+    },
+    isDraggable: {
+      type: Boolean,
+      default: true,
+    },
+    isResizable: {
+      type: Boolean,
+      default: true,
+    },
+    isMirrored: {
+      type: Boolean,
+      default: false,
+    },
+    useCssTransforms: {
+      type: Boolean,
+      default: true,
+    },
+    verticalCompact: {
+      type: Boolean,
+      default: true,
+    },
+    layout: {
+      type: Array,
+      required: true,
+    },
+    responsive: {
+      type: Boolean,
+      default: false,
+    },
+    responsiveLayouts: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    breakpoints: {
+      type: Object,
+      default: function () {
+        return { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
+      },
+    },
+    cols: {
+      type: Object,
+      default: function () {
+        return { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }
+      },
+    },
+    preventCollision: {
+      type: Boolean,
+      default: false,
+    },
+    useStyleCursor: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data: function () {
+    return {
+      width: null,
+      mergedStyle: {},
+      lastLayoutLength: 0,
+      isDragging: false,
+      placeholder: {
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+        i: -1,
+      },
+      layouts: {},
+      lastBreakpoint: null,
+      originalLayout: null,
+      layoutsCache: this.responsiveLayouts,
+    }
+  },
+  created() {
+    const self = this
+    self.resizeEventHandler = function (eventType, i, x, y, h, w) {
+      self.resizeEvent(eventType, i, x, y, h, w)
+    }
+
+    self.dragEventHandler = function (eventType, i, x, y, h, w) {
+      self.dragEvent(eventType, i, x, y, h, w)
+    }
+
+    self._provided.eventBus = new Vue()
+    self.eventBus = self._provided.eventBus
+    self.eventBus.$on('resizeEvent', self.resizeEventHandler)
+    self.eventBus.$on('dragEvent', self.dragEventHandler)
+    self.$emit('layout-created', self.layout)
+  },
+  beforeDestroy: function () {
+    this.eventBus.$off('resizeEvent', this.resizeEventHandler)
+    this.eventBus.$off('dragEvent', this.dragEventHandler)
+    this.eventBus.$destroy()
+    removeWindowEventListener('resize', this.onWindowResize)
+    if (this.erd) {
+      this.erd.uninstall(this.$refs.item)
+    }
+  },
+  beforeMount: function () {
+    this.$emit('layout-before-mount', this.layout)
+  },
+  mounted: function () {
+    this.$emit('layout-mounted', this.layout)
+    this.$nextTick(function () {
+      validateLayout(this.layout)
+
+      this.originalLayout = this.layout
+      const self = this
+      this.$nextTick(function () {
+        self.onWindowResize()
+        self.initResponsiveFeatures()
+        addWindowEventListener('resize', self.onWindowResize)
+        compact(self.layout, self.verticalCompact)
+        self.$emit('layout-updated', self.layout)
+        self.updateHeight()
+        const resizeObserver = new ResizeObserver(() => {
+          self.onWindowResize()
+        })
+        resizeObserver.observe(self.$refs.item)
+      })
+    })
+  },
+  watch: {
+    width: function (newval, oldval) {
+      const self = this
+      this.$nextTick(function () {
+        this.eventBus.$emit('updateWidth', this.width)
+        if (oldval === null) {
+          this.$nextTick(() => {
+            this.$emit('layout-ready', self.layout)
+          })
+        }
+        this.updateHeight()
+      })
+    },
+    layout: function () {
+      this.layoutUpdate()
+    },
+    colNum: function (val) {
+      this.eventBus.$emit('setColNum', val)
+    },
+    rowHeight: function () {
+      this.eventBus.$emit('setRowHeight', this.rowHeight)
+    },
+    isDraggable: function () {
+      this.eventBus.$emit('setDraggable', this.isDraggable)
+    },
+    isResizable: function () {
+      this.eventBus.$emit('setResizable', this.isResizable)
+    },
+    responsive() {
+      if (!this.responsive) {
+        this.$emit('update:layout', this.originalLayout)
+        this.eventBus.$emit('setColNum', this.colNum)
+      }
+      this.onWindowResize()
+    },
+    maxRows: function () {
+      this.eventBus.$emit('setMaxRows', this.maxRows)
+    },
+    margin() {
+      this.updateHeight()
+    },
+  },
+  methods: {
+    layoutUpdate() {
+      if (this.layout !== undefined && this.originalLayout !== null) {
+        if (this.layout.length !== this.originalLayout.length) {
+          let diff = this.findDifference(this.layout, this.originalLayout)
+          if (diff.length > 0) {
+            if (this.layout.length > this.originalLayout.length) {
+              this.originalLayout = this.originalLayout.concat(diff)
+            } else {
+              this.originalLayout = this.originalLayout.filter((obj) => {
+                return !diff.some((obj2) => {
+                  return obj.i === obj2.i
+                })
+              })
+            }
+          }
+          this.lastLayoutLength = this.layout.length
+          this.layoutsCache = {
+            [this.lastBreakpoint]: this.layout,
+          }
+          this.initResponsiveFeatures()
+        }
+        compact(this.layout, this.verticalCompact)
+        this.eventBus.$emit('updateWidth', this.width)
+        this.updateHeight()
+        this.$emit('layout-updated', this.layout)
+      }
+    },
+    updateHeight: function () {
+      this.mergedStyle = {
+        height: this.containerHeight(),
+      }
+    },
+    onWindowResize: function () {
+      if (this.$refs !== null && this.$refs.item !== null && this.$refs.item !== undefined) {
+        this.width = this.$refs.item.offsetWidth
+      }
+      this.eventBus.$emit('resizeEvent')
+    },
+    containerHeight: function () {
+      if (!this.autoSize) return
+      const containerHeight = bottom(this.layout) * (this.rowHeight + this.margin[1]) + this.margin[1] + 'px'
+      return containerHeight
+    },
+    dragEvent: function (eventName, id, x, y, h, w) {
+      let l = getLayoutItem(this.layout, id)
+      if (l === undefined || l === null) {
+        l = { x: 0, y: 0 }
+      }
+      if (eventName === 'dragmove' || eventName === 'dragstart') {
+        this.placeholder.i = id
+        this.placeholder.x = l.x
+        this.placeholder.y = l.y
+        this.placeholder.w = w
+        this.placeholder.h = h
+        this.$nextTick(function () {
+          this.isDragging = true
+        })
+        this.eventBus.$emit('updateWidth', this.width)
+      } else {
+        this.$nextTick(function () {
+          this.isDragging = false
+        })
+      }
+      const newLayout = moveElement(this.layout, l, x, y, true, this.preventCollision)
+      this.$emit('update:layout', newLayout)
+      compact(newLayout, this.verticalCompact)
+      this.eventBus.$emit('compact')
+      this.updateHeight()
+      if (eventName === 'dragend') this.$emit('layout-updated', newLayout)
+    },
+    resizeEvent: function (eventName, id, x, y, h, w) {
+      let l = getLayoutItem(this.layout, id)
+      if (l === undefined || l === null) {
+        l = { h: 0, w: 0 }
+      }
+      let hasCollisions
+      if (this.preventCollision) {
+        const collisions = getAllCollisions(this.layout, { ...l, w, h }).filter((layoutItem) => layoutItem.i !== l.i)
+        hasCollisions = collisions.length > 0
+        if (hasCollisions) {
+          let leastX = Infinity,
+            leastY = Infinity
+          collisions.forEach((layoutItem) => {
+            if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x)
+            if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y)
+          })
+          if (Number.isFinite(leastX)) l.w = leastX - l.x
+          if (Number.isFinite(leastY)) l.h = leastY - l.y
+        }
+      }
+      if (!hasCollisions) {
+        l.w = w
+        l.h = h
+      }
+      if (eventName === 'resizestart' || eventName === 'resizemove') {
+        this.placeholder.i = id
+        this.placeholder.x = x
+        this.placeholder.y = y
+        this.placeholder.w = l.w
+        this.placeholder.h = l.h
+        this.$nextTick(function () {
+          this.isDragging = true
+        })
+        this.eventBus.$emit('updateWidth', this.width)
+      } else {
+        this.$nextTick(function () {
+          this.isDragging = false
+        })
+      }
+      if (this.responsive) this.responsiveGridLayout()
+      compact(this.layout, this.verticalCompact)
+      this.eventBus.$emit('compact')
+      this.updateHeight()
+      if (eventName === 'resizeend') this.$emit('layout-updated', this.layout)
+    },
+    responsiveGridLayout() {
+      let newBreakpoint = getBreakpointFromWidth(this.breakpoints, this.width)
+      let newCols = getColsFromBreakpoint(newBreakpoint, this.cols)
+      if (this.lastBreakpoint != null && !this.layouts[this.lastBreakpoint]) this.layouts[this.lastBreakpoint] = cloneLayout(this.layout)
+      let layout = findOrGenerateResponsiveLayout(this.originalLayout, this.layouts, this.breakpoints, newBreakpoint, this.lastBreakpoint, newCols, this.verticalCompact)
+      this.layouts[newBreakpoint] = layout
+      if (this.lastBreakpoint !== newBreakpoint) {
+        this.$emit('breakpoint-changed', newBreakpoint, layout)
+      }
+      this.$emit('update:layout', layout)
+      this.lastBreakpoint = newBreakpoint
+      this.eventBus.$emit('setColNum', getColsFromBreakpoint(newBreakpoint, this.cols))
+    },
+    initResponsiveFeatures() {
+      this.layouts = Object.assign({}, this.layoutsCache)
+    },
+    findDifference(layout, originalLayout) {
+      let uniqueResultOne = layout.filter(function (obj) {
+        return !originalLayout.some(function (obj2) {
+          return obj.i === obj2.i
+        })
+      })
+      let uniqueResultTwo = originalLayout.filter(function (obj) {
+        return !layout.some(function (obj2) {
+          return obj.i === obj2.i
+        })
+      })
+      return uniqueResultOne.concat(uniqueResultTwo)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.vue-grid-layout {
+  position: relative;
+  transition: height .2s ease;
+}
+</style>

package/src/packages/auto-grid-layout/src/main.vue

@@ -0,0 +1,287 @@
+<template>
+  <div :class="['misp-auto-grid', ...extraClassName]" :style="styleProp" @click="clickHandler">
+    <div v-if="staticContainer" class="w-full h-full container-mask" />
+    <grid-layout
+      :style="containerStyleProp"
+      ref="gridlayout"
+      :layout.sync="instance.children"
+      v-bind="layoutConfig"
+      @layout-created="layoutCreatedEvent"
+    >
+      <grid-item
+        v-for="item in instance.children"
+        :key="item.i"
+        v-bind="item"
+        @move="moveEventHandler"
+        @moved="movedEventHandler"
+        @resize="resizeEventHandler"
+        @resized="resizedEventHandler"
+      >
+        <div class="w-full h-full grid-item-wrapper" style="user-select: none" @mouseenter="itemExnterHandler">
+          <component
+            :key="`component-${item.i}`"
+            :is="getClassName(item.instance)"
+            :instance="item.instance"
+            :is-dragging="isDragging"
+            :is-resizing="isResizing"
+            v-bind="$attrs"
+            v-on="$listeners"
+          />
+          <div class="delete-wrapper">
+            123
+          </div>
+        </div>
+      </grid-item>
+    </grid-layout>
+  </div>
+</template>
+
+<script>
+import GridItem from './components/GridItem.vue'
+import GridLayout from './components/GridLayout.vue'
+
+import { AutoGridLayout, AutoGridLayoutProp } from '../prop.js'
+import elementMixins from '../../../playground/mixins/element.js'
+import init from '../../../directives/init/index.js'
+import resize from '../../../directives/resize/index.js'
+
+export default {
+  name: 'UiAutoGridLayout',
+  components: { GridLayout, GridItem },
+  mixins: [elementMixins],
+  props: {
+    // instance: {},
+    isDragging: { type: Boolean, default: true },
+    isResizing: { type: Boolean, default: true },
+  },
+  data: () => ({
+    containerHeight: 0, // 容器实际高度
+    rowHeight: 0,// 单行高度
+    /**
+     * 布局中已满列索引缓存
+     * @type {Array<number>}
+     */
+    fullCols: [],
+    beforeLayoutChildren: [], // 上一次布局缓存
+
+    /** @type {AutoGridLayoutProp} */
+    instance: new AutoGridLayout({ colNum: 4, rowNum: 3, margin: [0, 0] })
+  }),
+  filters: {},
+  computed: {
+    layoutConfig() {
+      return {
+        colNum: this.instance.colNum,
+        maxRows: this.instance.rowNum,
+        rowHeight: this.rowHeight,
+        margin: this.instance.margin,
+        isDraggable: this.instance.isDraggable,
+        isResizable: this.instance.isResizable,
+        verticalCompact: this.instance.verticalCompact,
+        useCssTransforms: this.instance.useCssTransforms,
+      }
+    },
+    children() {
+      return this.instance.children
+    },
+    containerStyleProp() {
+      return {
+        ...this.styleProp,
+        width: '100%',
+        height: '100% !important',
+        overflow: 'hidden'
+      }
+    },
+    // 是否为静态容器 (不支持拖拽插入元素)
+    staticContainer() {
+      return !!(this.instance.extraCustom && this.instance.extraCustom.onlyContainer)
+    },
+    isCard() {
+      return this.instance && this.instance.extraCustom && this.instance.extraCustom.isCard
+    },
+  },
+  directives: { init, resize },
+  watch: {
+    'layoutConfig.maxRows'() {
+      this.containerHeightRefresh()
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      // 通过闭包捕获必要参数，避免直接引用 this
+      const gridRef = this.$refs.gridlayout
+      this.instance.assignProperty('extraCustom', {
+        // 方法改为接收显式参数
+        colFullCheck: () => this.colFullCheck(),
+        dragEvent: (...args) => gridRef ? gridRef.dragEvent(...args) : undefined,
+        gridChildrenHandler: (index, handler) => {
+          handler(gridRef ? gridRef.$children[index] : undefined)
+        },
+      })
+    })
+  },
+  mounted() {},
+  activated() {},
+  beforeDestroy() {},
+  methods: {
+    // 空方法, 刷新容器布局
+    containerHeightRefresh() {
+      const element = (this.instance && this.instance.extraCustom && this.instance.extraCustom.getElement) ? this.instance.extraCustom.getElement() : null
+      if (!element) return;
+      this.$nextTick(() => {
+        // 获取容器高度, 计算除间距外每行高度
+        const containerHeight = element.offsetHeight
+        const totalRowGap = (this.layoutConfig.maxRows + 1) * (this.layoutConfig.margin[1] || 0)
+        const rowHeight = Math.floor((containerHeight - totalRowGap) / this.layoutConfig.maxRows)
+        this.containerHeight = containerHeight
+        this.rowHeight = rowHeight
+      })
+    },
+    /**
+     * 检查布局中已满列
+     * @returns {Array<number>} 各列元素占比
+     */
+    colFullCheck() {
+      // 按列统计各列中元素占据宽度
+      const colItemSizeMap = this.children.reduce(
+        (map, item) => map.map((h, i) => (i >= item.x && i < item.x + item.w) ? h + item.h : h),
+        Array(this.layoutConfig.colNum).fill(0)
+      )
+      // 提取已满列编号
+      const fullCols = colItemSizeMap.map((v, i) => [i, v]).filter(([x, count]) => count >= this.layoutConfig.maxRows).map(([x]) => x)
+      this.fullCols = fullCols
+      return colItemSizeMap
+    },
+    // 拖拽缩放元素时触发, 提交元素缩放加锁
+    resizeEventHandler() {
+      this.$emit('resize-lock')
+    },
+    /**
+     * 拖拽缩放元素结束触发
+     * @param {string} i 元素 key
+     */
+    resizedEventHandler(i, newH, newW) {
+      // 获取指向元素
+      const item = this.children.find(p => p.i === i)
+      // 计算当前布局下的溢出参数
+      const colItemSizeMap = this.colFullCheck()
+      // 提取当前元素所跨列的列占宽度
+      const sizesInRange = colItemSizeMap.filter((s, i) => i >= item.x && i < item.x + item.w)
+      const hasOverCol = sizesInRange.some(s => s > this.layoutConfig.maxRows)
+      this.$nextTick(() => {
+        if (hasOverCol) {
+          // 如果存在溢出列, 计算所有元素不溢出时, 最小元素高度削减量
+          const splitHeight = Math.max(...sizesInRange.map(s => Math.max(0, s - this.layoutConfig.maxRows)))
+          if ((item.h - splitHeight) <= 0) {
+            // 如果元素削减后高度为 0, 即横向拉伸时跨过了已满列
+            // 还原回上一次合法布局
+            this.backPrepLayout()
+          } else {
+            // 元素高度削减
+            item.h -= splitHeight
+            // 被顶出容器的元素归位
+            this.$refs.gridlayout.layoutUpdate()
+          }
+        }
+        // 元素缩放解锁
+        this.$emit('resize-unlock')
+        // 刷新布局缓存
+        this.itemExnterHandler()
+      })
+    },
+    // 拖拽元素排序时触发, 提交元素拖拽加缩
+    moveEventHandler() {
+      this.$emit('move-lock')
+    },
+    /**
+     * 拖拽元素排序完毕触发
+     * @param {string} i 元素 key
+     */
+    movedEventHandler(i) {
+      const colItemSizeMap = this.colFullCheck()
+      // 元素移动至非满列, 或元素在原有列间排序
+      const hasOverCol = colItemSizeMap.some(s => s > this.layoutConfig.maxRows)
+      this.$nextTick(() => {
+        if (hasOverCol) {
+          // 移动后出现列溢出, 恢复至上一布局
+          this.backPrepLayout()
+        }
+        // 元素拖拽解锁
+        this.$emit('move-unlock')
+        // 刷新布局缓存
+        this.itemExnterHandler()
+      })
+    },
+    layoutCreatedEvent() {
+      // this.beforeLayoutChildren = _.cloneDeep(this.children)
+    },
+    /**
+     * 鼠标进入元素时触发, 防抖 100ms 限制
+     */
+     itemExnterHandler() {},
+    // itemExnterHandler: _.debounce(function () {
+    //   if (this.isDragging || this.isResizing) return;
+    //   this.colFullCheck()
+    //   this.beforeLayoutChildren = _.cloneDeep(this.children)
+    // }, 100),
+    /**
+     * 回到上一次合法布局, old: this.beforeLayoutChildren, recovered: this.instance.children
+     */
+    backPrepLayout() {
+      this.instance.children.forEach(item => {
+        const origin = this.beforeLayoutChildren.find(p => p.i === item.i)
+        item.x = origin.x
+        item.y = origin.y
+        item.w = origin.w
+        item.h = origin.h
+      })
+    },
+  },
+}
+
+</script>
+
+<style lang="scss" scoped>
+.misp-card {
+  border-radius: 8px;
+  background-color: var(--base-bg);
+  &.box-shadow {
+    box-shadow: var(--box-shadow-3);
+  }
+  &.hover-up {
+    transition: transform 0.2s ease-out;
+    &:hover {
+      transform: translateY(-4px);
+    }
+  }
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.misp-auto-grid {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .container-mask {
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  ::v-deep .vue-grid-item {
+    transition: transform .15s ease;
+  }
+  .grid-item-wrapper {
+    position: relative;
+    > .delete-wrapper {
+      display: none;
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+    &:hover > .delete-wrapper {
+      display: flex;
+    }
+  }
+}
+</style>

package/src/packages/auto-grid-layout/src/utils/DOM.js

@@ -0,0 +1,46 @@
+/**
+ * DOM 工具函数
+ */
+
+let currentDir = 'auto'
+
+function hasDocument() {
+  return typeof document !== 'undefined'
+}
+
+function hasWindow() {
+  return typeof window !== 'undefined'
+}
+
+export function getDocumentDir() {
+  if (!hasDocument()) {
+    return currentDir
+  }
+  const direction = typeof document.dir !== 'undefined' ? document.dir : document.getElementsByTagName('html')[0].getAttribute('dir')
+  return direction
+}
+
+export function setDocumentDir(dir) {
+  if (!hasDocument()) {
+    currentDir = dir
+    return
+  }
+
+  const html = document.getElementsByTagName('html')[0]
+  html.setAttribute('dir', dir)
+}
+
+export function addWindowEventListener(event, callback) {
+  if (!hasWindow()) {
+    callback()
+    return
+  }
+  window.addEventListener(event, callback)
+}
+
+export function removeWindowEventListener(event, callback) {
+  if (!hasWindow()) {
+    return
+  }
+  window.removeEventListener(event, callback)
+}