ibsp-fg-page 4.0.2

package/src/components/nextui/SketchRule/hooks/useRuler.ts

@@ -0,0 +1,229 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue';
+
+import type { SketchRuleProps } from '../props'
+
+class SketchRuler {
+
+  horizontalCanvasRef!: Ref<HTMLCanvasElement>;
+  verticalCanvasRef!: Ref<HTMLCanvasElement>;
+  mainRef!: Ref<HTMLDivElement>
+  option = {
+    width: 0,
+    height: 0,
+    scale: 1,
+    ratio: window.devicePixelRatio || 1,
+    startX: 0,
+    startY: 0,
+    isShowReferLine: true,
+    thick: 20
+  };
+
+  horizontalCtx!: CanvasRenderingContext2D;
+  verticalCtx!: CanvasRenderingContext2D;
+
+  step = 50;
+  mainRect!: DOMRect;
+
+  get width() {
+    let _width = this.mainRef.value.getBoundingClientRect().width;
+    return _width;
+  }
+
+  get height() {
+    let _height = this.mainRef.value.getBoundingClientRect().height;
+    return _height;
+  }
+
+  private get _startX() {
+    return this.option.startX;
+  }
+
+  private get _endX() {
+    return this.option.startX + (this.width - this.option.thick) / this.option.scale;
+  }
+
+  private get _startY() {
+    return this.option.startY;
+  }
+
+  private get _endY() {
+    return this.option.startY + (this.height - this.option.thick) / this.option.scale;
+  }
+
+  startX = ref(0);
+  endX = ref(0);
+
+  startY = ref(0);
+  endY = ref(0);
+
+  private longLineColor = 'red';
+  private fontColor = '#fff';
+  private observer!: MutationObserver;
+
+
+  constructor(option: SketchRuleProps, horizontalCanvasRef: Ref<HTMLCanvasElement>, verticalCanvasRef: Ref<HTMLCanvasElement>, mainRef: Ref<HTMLDivElement>) {
+    this.horizontalCanvasRef = horizontalCanvasRef;
+    this.verticalCanvasRef = verticalCanvasRef;
+    this.mainRef = mainRef;
+    this.option = Object.assign(this.option, option);
+
+    this.init();
+  }
+
+  private init() {
+    this.mutationObserver();
+    this.onMounted();
+    this.onUnmounted();
+
+  }
+
+  private mutationObserver() {
+    this.observer = new MutationObserver(() => {
+      const styles = getComputedStyle(document.documentElement);
+      let longLineColor = styles.getPropertyValue('--theme-gl-bg');
+      let fontColor = styles.getPropertyValue('--theme-font-color');
+      if (longLineColor !== this.longLineColor || fontColor !== this.fontColor) {
+        this.longLineColor = longLineColor;
+        this.fontColor = fontColor;
+        this.drawRuler();
+      }
+    });
+    this.observer.observe(document.body, { attributes: true, childList: true, subtree: true })
+  }
+
+  private onMounted() {
+    onMounted(() => {
+
+      this.initSceen();
+
+      window.addEventListener('resize', this.resize.bind(this))
+
+    })
+  }
+
+  private resize() {
+    this.initSceen();
+  }
+
+  private initSceen() {
+    this.mainRect = this.mainRef.value.getBoundingClientRect();
+
+    this.horizontalCanvasRef.value.width = (this.width - this.option.thick) * this.option.ratio;
+    this.horizontalCanvasRef.value.height = this.option.thick * this.option.ratio;
+    this.horizontalCtx = this.horizontalCanvasRef.value.getContext('2d') as CanvasRenderingContext2D;
+
+    this.verticalCanvasRef.value.height = (this.height - this.option.thick) * this.option.ratio;
+    this.verticalCanvasRef.value.width = this.option.thick * this.option.ratio;
+    this.verticalCtx = this.verticalCanvasRef.value.getContext('2d') as CanvasRenderingContext2D;
+
+    this.drawRuler()
+  }
+
+  private onUnmounted() {
+    onUnmounted(() => {
+      this.observer.disconnect();
+    })
+  }
+
+  private getStepByScale() {
+    const steps = [1, 2, 5, 10, 25, 50, 100, 250, 500, 1000, 2500, 5000];
+    const step = 50 / this.option.scale;
+    for (let i = 0, len = steps.length; i < len; i++) {
+      if (steps[i] >= step) return steps[i];
+    }
+    return steps[0];
+  }
+
+  private getClosestVal(value: number, segment: number, type: 'floor' | 'ceil') {
+    const n = Math[type](value / segment);
+    const left = segment * n;
+    const right = segment * (n + 1);
+    return value - left <= right - value ? left : right;
+  }
+
+  private drawRuler() {
+    this.step = this.getStepByScale();
+
+    this.startX.value = this._startX;
+    this.endX.value = this._endX;
+
+    this.startY.value = this._startY;
+    this.endY.value = this._endY;
+
+    let startX = this.getClosestVal(this.startX.value, this.step, 'floor');
+    let endX = this.getClosestVal(this.endX.value, this.step, 'ceil');
+
+    let startY = this.getClosestVal(this.startY.value, this.step, 'floor');
+    let endY = this.getClosestVal(this.endY.value, this.step, 'ceil');
+
+    this.drawlRuler(startX, endX);
+    this.drawlRuler(startY, endY, false);
+
+  }
+
+
+  private drawlRuler(start: number, end: number, h: boolean = true) {
+    const ctx: CanvasRenderingContext2D = h ? this.horizontalCtx : this.verticalCtx;
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    ctx.textAlign = 'center'; // 文字水平居中对齐
+    let space = this.step / 10;
+    ctx.strokeStyle = 'red';
+    ctx.fillStyle = 'blue';
+    while (start <= end) {
+      // 转回视口坐标
+      const moveNum = (start - (h ? this.option.startX : this.option.startY)) * this.option.scale;
+      // 绘制长刻度线
+      ctx.beginPath();
+      ctx.save()
+      ctx.scale(this.option.ratio, this.option.ratio);
+      ctx.moveTo(h ? moveNum : 0, h ? 0 : moveNum);
+      ctx.lineTo(h ? moveNum : 10, h ? 10 : moveNum);
+      ctx.strokeStyle = this.longLineColor;
+      ctx.stroke();
+      ctx.restore();
+      ctx.closePath();
+      // 绘制短刻度线
+      for (let i = 1; i < 10; i++) {
+        let moveNum1 = moveNum - (i * space) * this.option.scale;
+        ctx.beginPath();
+        ctx.save()
+        ctx.scale(this.option.ratio, this.option.ratio);
+        ctx.moveTo(h ? moveNum1 : 0, h ? 0 : moveNum1);
+        ctx.lineTo(h ? moveNum1 : 5, h ? 5 : moveNum1);
+        ctx.stroke();
+        ctx.restore();
+        ctx.closePath();
+      }
+      // 绘制刻度值
+      ctx.save();
+      ctx.scale(this.option.ratio, this.option.ratio);
+      const textWidth = ctx.measureText(String(start)).width, num4 = this.option.thick - 2, num5 = moveNum + (textWidth / 2);
+      ctx.font = '10px Arial';
+      if (!h) {
+        ctx.translate(num4, num5);
+        ctx.rotate(-Math.PI / 2);
+        ctx.fillText(String(start), 0, 0);
+      } else {
+        ctx.fillText(String(start), num5, num4);
+      }
+      ctx.restore();
+      // +step，指针移动
+      start += this.step;
+
+    }
+  }
+
+
+  draw(option: SketchRuleProps) {
+    this.option = Object.assign(this.option, option);
+    this.drawRuler();
+  }
+
+}
+
+const useRuler = (props: SketchRuleProps, horizontalCanvasRef: Ref<HTMLCanvasElement>, verticalCanvasRef: Ref<HTMLCanvasElement>, mainRef: Ref<HTMLDivElement>) => {
+  return new SketchRuler(props, horizontalCanvasRef, verticalCanvasRef, mainRef)
+}
+
+export default useRuler;

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

@@ -0,0 +1,10 @@
+import sketchRule from './SketchRule.vue';
+import { withInstall } from '../_utils'
+
+
+const _SketchRule = withInstall(sketchRule, 'nextui-sketchRule')
+
+
+export const SketchRule = _SketchRule
+
+export default SketchRule;

package/src/components/nextui/SketchRule/props.ts

@@ -0,0 +1,62 @@
+
+export type SketchRuleLines = {
+  h?: number[]
+  v?: number[]
+}
+
+export type SketchRuleProps = {
+  width?: number;
+  height?: number;
+  thick?: number;
+  scale?: number;
+  ratio?: number;
+  lines?: SketchRuleLines;
+  isShowReferLine?: boolean;
+  startX?: number;
+  startY?: number;
+  rect?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null;
+  autoUpdateCssVar?: boolean;
+  longLineColor?: string;
+  shortLineColor?: string;
+  fontColor?: string;
+  lineColor?: string;
+  bgColor?: string;
+  borderColor?: string;
+  cornerActiveColor?: string;
+  blockColor?: string;
+  step?: number;
+  [key: string]: any
+}
+
+
+export const SketchRulePropsDefaultValeue = {
+  width: 0,
+  height: 0,
+  scale: 1,
+  ratio: window.devicePixelRatio || 1,
+  startX: 0,
+  startY: 0,
+  isShowReferLine: true,
+  thick: 20,
+  lines() {
+    return {
+      v: [],
+      h: []
+    }
+  },
+  rect: null,
+  autoUpdateCssVar: true,
+  longLineColor: '--theme-gl-bg',
+  fontColor: '--theme-font-color',
+  bgColor: '--theme-btn-bg',
+  borderColor: '--theme-bg',
+  blockColor: '',
+  cornerActiveColor: '',
+  shortLineColor: '',
+  lineColor: ''
+}

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

@@ -0,0 +1,2 @@
+export * from './vue/install'
+export * from './tools'

package/src/components/nextui/_utils/tools.ts

@@ -0,0 +1,12 @@
+
+/**
+ * @param url {String }  需要验证的url
+ * @param urlReg {RegExp}  验证url的正则表达式
+ * @returns {Boolean}   返回true或false
+ */
+export const isUrl = (
+  url: string,
+  urlReg:RegExp = /^(https?:\/\/)?((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3}))(:\d+)?(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_.~+=-]*)?(#[-a-z\d_]*)?$/i
+): boolean => {
+  return urlReg.test(url)
+}

package/src/components/nextui/_utils/vue/install.ts

@@ -0,0 +1,11 @@
+import type { App } from 'vue'
+export const withInstall = <T>(
+  main:T,
+  name?:string
+):T => {
+  if (!main) return main;
+  (main as any).install = (app: App) => {
+    app.component(name ?? (main as any).name, main as any)
+  }
+  return main
+}

package/src/components/nextui/button/Button.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { computed } from 'vue';
+
+import SvgIcon from '../../globals/SvgIcon.vue';
+const props = defineProps({
+  icon: {
+    type: Object,
+    default: () => (null)
+  },
+  type: {
+    type: String,
+    default: 'default' // default, primary, danger, text， icon
+  },
+  color: {
+    type: String,
+    default: 'var(--theme-font-color)'
+  }
+})
+const typeMap = {
+  primary: {
+    background: '#0070f0',
+    color: '#fff'
+  },
+  danger: {
+    background: '#ff4d4f',
+    color: '#fff'
+  },
+  text: {
+    background: 'none',
+    border: '1px solid var(--theme-border-color)'
+  },
+  icon: {
+    border: '1px solid var(--theme-border-color)',
+    width: '40px',
+    height: '40px',
+  }
+}
+
+const style = computed(() => {
+  return {
+    '--color': props.color,
+    ...(typeMap[props?.type] || [])
+  }
+})
+
+
+</script>
+
+<template>
+  <div class="ibsp-next-ui-button"
+       :style="style">
+    <SvgIcon :style="{
+               marginRight: $slots.default ? '3px' : '0'
+             }"
+             v-if="icon"
+             :icon="icon"></SvgIcon>
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.ibsp-next-ui-button{
+    height: 40px;
+    padding: 0 16px;
+    border-radius: 12px;
+    background: var(--theme-bg);
+    border: 1px solid var(--theme-border-color);
+    color:rgb(from var(--color) r g b / 100%);
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    justify-content: center;
+    &:hover{
+        filter: brightness(0.95);
+    }
+}
+
+</style>

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

@@ -0,0 +1,8 @@
+import { withInstall } from '../_utils'
+import _Button from './Button.vue'
+
+const button = withInstall(_Button, 'nextui-button')
+
+export default button
+
+export const Button = button

package/src/components/nextui/drag-grid/index.ts

@@ -0,0 +1 @@
+export {default as DragGrid } from './src/index.vue'

package/src/components/nextui/drag-grid/src/hooks/useDragGrid.ts

@@ -0,0 +1,219 @@
+import { nextTick, onMounted, reactive, type ExtractPropTypes, type Ref } from 'vue'
+import { Props } from '../props'
+import {v4} from 'uuid'
+type ShallowTarget = {
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    show?: boolean,
+    fixed?:boolean
+    id:string,
+}
+type SizeDirection = 'tl' | 'tc' | 'tr' | 'bl' | 'br' | 'bc' | 'cl' | 'cr'
+
+const pageTargets = new Map<string, ShallowTarget>()
+
+
+export default (
+  props: ExtractPropTypes<typeof Props>,
+  dragRef:Ref<HTMLElement | null>
+) =>{
+  const classNames = reactive({
+
+  })
+
+
+  const maxGridNum = 10
+
+
+  const gridSize = {
+    w: 0,
+    h: 20
+  }
+
+  const dargTarget = reactive({
+    w: 200,
+    h: 200,
+    x: 0,
+    y: 0
+  })
+
+  const shallowTarget = reactive({
+    id: v4(),
+    w: 0,
+    h: 0,
+    x: 0,
+    y: 0,
+    show: false
+  })
+
+  pageTargets.set(shallowTarget.id, shallowTarget)
+
+  // const updateGridSize = ()=>{
+
+  // }
+
+
+  const dragHandle = ()=>{
+
+    const targetDom = dragRef.value!
+
+    const {
+      left: parent_left,
+      top: parent_top,
+      right: parent_right,
+      bottom: parent_bottom,
+      width: parent_width,
+      height: parent_height
+    } = targetDom.parentElement!.getBoundingClientRect()
+
+    gridSize.w = Math.floor(parent_width / maxGridNum)
+
+
+    const shallowRange = {
+      minX: parent_left,
+      maxX: parent_right,
+      minY: parent_top,
+      maxY: parent_bottom
+    }
+
+
+    const handleSize = (e:MouseEvent, target_direction:SizeDirection)=>{
+
+      shallowTarget.show = true
+
+      const _handleDirection = {
+        br() {
+
+        }
+      }
+
+      const mousemove = (e:MouseEvent)=>{
+
+      }
+
+      const mouseup = ()=>{
+
+      }
+
+      document.addEventListener('mousemove', mousemove)
+      document.addEventListener('mouseup', mouseup)
+
+    }
+
+    const handleDrag = (e:MouseEvent)=>{
+
+      let prevX = e.clientX
+      let prevY = e.clientY
+      let prev_shallow_x = dargTarget.x
+      const prev_shallow_y = dargTarget.y
+      // shallowTarget.x = Math.floor(dargTarget / gridSize.w)
+      // shallowTarget.y = Math.floor(dargTarget.h / gridSize.h)
+      shallowTarget.show = true
+
+      const moveDragTarget = (e:MouseEvent)=>{
+        const deltaX = e.pageX - prevX
+        dargTarget.x += deltaX
+        prevX = e.pageX
+        const deltaY = e.pageY - prevY
+        dargTarget.y += deltaY
+        prevY = e.pageY
+      }
+
+      const mousemove = (e:MouseEvent)=>{
+
+        moveDragTarget(e)
+
+        const move_shallow_x = dargTarget.x - prev_shallow_x
+        if (Math.abs(move_shallow_x) >= (gridSize.w / 2)) {
+          if (move_shallow_x > 0) {
+            shallowTarget.x = shallowTarget.x + 1
+          } else {
+            shallowTarget.x = shallowTarget.x - 1
+          }
+          prev_shallow_x = shallowTarget.x * gridSize.w
+        }
+
+
+        // const move_shallow_y = dargTarget.y - prev_shallow_y
+        // if (move_shallow_y > (gr))
+
+
+        // const move_shallow_x = target.x - shallowTarget.x
+
+        // if (Math.abs(move_shallow_x) >= (gridSize / 2)) {
+        //   if (move_shallow_x > 0) {
+        //     const _x = target.x + gridSize - move_shallow_x
+        //     const shallow_x = Math.min(Math.max(_x, shallowRange.minX), shallowRange.maxX - target.w)// - target.w : 检出右边界
+        //     shallowTarget.x = shallow_x
+
+        //   }
+        //   if (move_shallow_x < 0) {
+        //     const _x = target.x + move_shallow_x
+        //     const shallow_x = Math.min(Math.max(_x, shallowRange.minX), shallowRange.maxX - target.w)// - target.w : 检出右边界
+        //     shallowTarget.x = shallow_x
+        //   }
+        //   shallowTarget.x_cell = getCell(shallowTarget.x)
+        // }
+
+        // const move_shallow_y = target.y - shallowTarget.y
+        // if (Math.abs(move_shallow_y) >= (gridSize / 2)) {
+        //   if (move_shallow_y > 0) {
+        //     const _y = target.y + gridSize - move_shallow_y
+        //     const shallow_y = Math.min(Math.max(_y, shallowRange.minY), shallowRange.maxY - target.h) // - target.h : 检出下边界
+        //     shallowTarget.y = shallow_y
+        //   }
+        //   if (move_shallow_y < 0) {
+        //     const _y = target.y + move_shallow_y
+        //     const shallow_y = Math.min(Math.max(_y, shallowRange.minY), shallowRange.maxY - target.h) // - target.h : 检出下边界
+        //     shallowTarget.y = shallow_y
+        //   }
+        //   shallowTarget.y_cell = getCell(shallowTarget.y)
+        // }
+
+      }
+
+      const mouseup = ()=>{
+        document.removeEventListener('mousemove', mousemove)
+        document.removeEventListener('mouseup', mouseup)
+        dargTarget.x = shallowTarget.x * gridSize.w
+        dargTarget.y = shallowTarget.y * gridSize.h
+        shallowTarget.show = false
+      }
+
+
+      document.addEventListener('mousemove', mousemove)
+      document.addEventListener('mouseup', mouseup)
+
+    }
+
+
+    const mousedown = (e:MouseEvent)=>{
+      e.preventDefault()
+      const handleId = (e.target as any).dataset.handleId
+      console.log(handleId);
+
+      if (handleId) {
+        handleSize(e, handleId)
+        return
+      }
+      handleDrag(e)
+    }
+    targetDom.addEventListener('mousedown', mousedown)
+  }
+
+  onMounted(()=>{
+    nextTick(()=>{
+      dragHandle()
+    })
+  })
+
+
+  return {
+    gridSize,
+    classNames,
+    dargTarget,
+    shallowTarget
+  }
+}

package/src/components/nextui/drag-grid/src/hooks/useGridSize.ts

@@ -0,0 +1,3 @@
+export default ()=>{
+    
+}