ibsp-fg-page 4.0.2

package/src/components/nextui/SketchRule/SketchRule.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, reactive, ref, watch, watchEffect, type Ref } from 'vue';
+import { View, Hide } from '@element-plus/icons-vue'
+
+import { SketchRulePropsDefaultValeue } from './props';
+import type { SketchRuleProps } from './props';
+import RulerCanvas from './components/RulerCanvas.vue';
+
+
+const props = withDefaults(defineProps<SketchRuleProps>(), {
+  ...SketchRulePropsDefaultValeue
+})
+
+const mainRef = ref<HTMLDivElement>();
+const showReferLine = ref(props.isShowReferLine)
+
+let observer: MutationObserver;
+
+const autoUpdateCssVar = ref(props.autoUpdateCssVar || false);
+
+const colorDefine = reactive<{
+  [key: string]: string
+}>({
+  longLineColor: props.longLineColor,
+  shortLineColor: props.shortLineColor || props.fontColor,
+  bgColor: props.bgColor,
+  borderColor: props.borderColor,
+  fontColor: props.fontColor,
+  lineColor: props.lineColor || props.longLineColor,
+  cornerActiveColor: props.cornerActiveColor || props.longLineColor,
+  blockColor: props.blockColor || props.longLineColor
+})
+
+const colors = reactive<{
+  [key: string]: string
+}>({
+  longLineColor: props.longLineColor,
+  shortLineColor: props.shortLineColor || props.fontColor,
+  bgColor: props.bgColor,
+  borderColor: props.borderColor,
+  fontColor: props.fontColor,
+  lineColor: props.lineColor || props.longLineColor,
+  cornerActiveColor: props.cornerActiveColor || props.longLineColor,
+  blockColor: props.blockColor || props.longLineColor
+})
+
+const excludeUpdateColorVars = ['longLineColor', 'shortLineColor'];
+
+const updateCssVar = () => {
+  Object.keys(colors).forEach(
+    item => {
+      let varName = '--ruler-' + item.replaceAll(/([A-Z])/g, ($1) => {
+        return `-${$1.toLocaleLowerCase()}`
+      });
+      mainRef.value?.style.setProperty(varName, colors[item]);
+    }
+  )
+}
+
+const createMutationObserver = () => {
+  if (!observer) {
+    observer = new MutationObserver(() => {
+      const styles = getComputedStyle(document.documentElement);
+      let isChange = false;
+      Object.keys(colors).forEach(
+        (item) => {
+          if (item && (colorDefine[item] as string).substring(0, 2) === '--') {
+            let itemColor = styles.getPropertyValue(colorDefine[item] as string);
+            if (itemColor !== colors[item]) {
+              colors[item] = itemColor;
+              if (excludeUpdateColorVars.includes(item) === false) {
+                isChange = true;
+              }
+            }
+          }
+        }
+      );
+      if (isChange) {
+        updateCssVar();
+      }
+    });
+  }
+}
+
+const getCssVarValue = () => {
+  createMutationObserver();
+  observer?.observe(document.body, { attributes: true, childList: true, subtree: true })
+}
+
+watchEffect(() => {
+  if (autoUpdateCssVar.value === true) {
+    getCssVarValue();
+  }
+})
+
+onUnmounted(() => {
+  observer?.disconnect();
+})
+
+const updateColorVar = (callback?: Function) => {
+  getCssVarValue()
+  if (callback && typeof callback === 'function') {
+    callback();
+  }
+}
+
+defineExpose({
+  updateColorVar
+})
+
+</script>
+<template>
+  <!--  -->
+  <div ref="mainRef" class="ibsp-nextui-ruler">
+    <!-- 横向标尺 -->
+    <RulerCanvas
+      v-bind="props"
+      key="h"
+      :h="true"
+      :isShowReferLine="showReferLine"
+      :longLineColor="colors.longLineColor"
+      :shortLineColor="colors.shortLineColor"
+      :fontColor="colors.fontColor"
+    />
+    <!-- 纵向标尺 -->
+    <RulerCanvas
+      v-bind="props"
+      key="v"
+      :isShowReferLine="showReferLine"
+      :h="false"
+      :longLineColor="colors.longLineColor"
+      :shortLineColor="colors.shortLineColor"
+      :fontColor="colors.fontColor"
+    />
+    <div class="ruler-icon"
+         :style="{width: `${thick}px` , height: `${thick}px`}"
+         @click="showReferLine = !showReferLine">
+      <el-icon>
+        <View v-if="showReferLine"  />
+        <Hide v-else  />
+      </el-icon>
+    </div>
+  </div>
+</template>
+<style lang="less" scoped>
+.ibsp-nextui-ruler{
+  --ruler-bg-color:  transparent;
+  --ruler-border-color: rgba(0,0,0,.85);
+  --ruler-line-color: red;
+  --ruler-font-color: #fff;
+  --ruler-corner-active-color: red;
+  --ruler-block-color: red;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  pointer-events: none;
+  .ruler-icon{
+    position: absolute;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+    pointer-events: all;
+    border: 1px solid var(--ruler-bg-color);
+    border-width: 0 1px 1px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    background: var(--ruler-bg-color);
+    &:hover{
+      color: var(--ruler-corner-active-color);
+    }
+  }
+}
+</style>

package/src/components/nextui/SketchRule/components/RulerCanvas.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed, watch, ref, reactive, type Ref } from 'vue';
+
+import { SketchRulePropsDefaultValeue } from '../props';
+import type { SketchRuleProps } from '../props';
+import RulerLine from './RulerLine.vue';
+import useCanvas from '../hooks/useCanvas';
+
+const props = withDefaults(defineProps<SketchRuleProps & {
+  h: boolean
+}>(), {
+  ...SketchRulePropsDefaultValeue,
+  h: true
+})
+
+const type = props.h ? 'h' : 'v';
+
+const showHoverLine = ref(false);
+
+const offset = ref(0);
+
+const mainRef = ref<HTMLDivElement>()
+const canvasRef = ref<HTMLCanvasElement>();
+
+const id = `ruler-${Math.round(Math.random() * Date.now())}`
+
+const ruler = useCanvas(props, id, props.h)
+
+const getOffsetValue = (num: number) => {
+  return num * props.scale;
+}
+
+const onMousemove = (evt: MouseEvent) => {
+  if (props.h) {
+    offset.value = evt.offsetX;
+  } else {
+    offset.value = evt.offsetY;
+  }
+}
+
+const rulerStyle = computed(() => {
+  return {
+    [props.h ? 'height' : 'width']: `${ props.thick }px`,
+    [props.h ? 'paddingLeft' : 'paddingTop']: `${ props.thick }px`
+  }
+})
+
+const rulerBlockStyle = computed(() => {
+  let size = props.h ? props.rect?.width : props.rect?.height;
+  let point = props.h ? props.rect?.x : props.rect?.y;
+  return props.rect ? {
+    [props.h ? 'width' : 'height']: `${size}px`,
+    [props.h ? 'left' : 'top']: `${point}px`
+  } : null
+})
+
+const hoverVal = computed(() => {
+  return Math.ceil(offset.value / props.scale + ruler.start.value);
+})
+
+const lines = reactive<{
+  v: number[],
+  h: number[]
+}>({
+  v: [...(props.lines.v || [])],
+  h: [...(props.lines.h || [])]
+})
+
+const addLine = () => {
+  lines[type].push(offset.value / props.scale + ruler.start.value);
+}
+
+const showLines = computed(() => {
+  return props.h ? lines.h : lines.v;
+})
+
+const delLine = (index: number) => {
+  lines[type].splice(index, 1);
+}
+
+watch(props, () => {
+  ruler.draw(props)
+})
+
+</script>
+<template>
+  <div
+    class="ruler"
+    :class="[h ? 'ruler-h' : 'ruler-v']"
+    :style="rulerStyle"
+    :id="id"
+    ref="mainRef"
+  >
+    <div
+      class="ruler-block"
+      :class="[h ? 'ruler-block-h' : 'ruler-block-v']"
+      v-if="rect"
+      :style="rulerBlockStyle"
+    ></div>
+    <canvas
+      ref="canvasRef"
+      @mouseenter="showHoverLine = true"
+      @mousemove="(e: MouseEvent) => onMousemove(e)"
+      @mouseleave="showHoverLine = false"
+      @click="(e: MouseEvent) => addLine()"
+    ></canvas>
+  </div>
+  <RulerLine
+    v-show="showHoverLine"
+    :start="0"
+    :offset="offset + thick"
+    :h="h"
+    :value="hoverVal"
+    :isHover="true"
+    :thick="thick"
+  ></RulerLine>
+  <RulerLine
+    v-show="isShowReferLine"
+    v-for="(item , index) of showLines"
+    :key="index"
+    :start="getOffsetValue(0 - ruler.start.value) + thick"
+    :offset="getOffsetValue(item)"
+    :h="h"
+    :value="item"
+    :thick="thick"
+    @del="delLine(index)"
+  ></RulerLine>
+</template>
+<style lang="less" scoped>
+.ruler{
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: all;
+  cursor: default;
+  background: var(--ruler-bg-color);
+
+  .ruler-block{
+    background: var(--ruler-block-color);
+    opacity: 0.3;
+    position: absolute;
+    z-index: 0;
+  }
+  .ruler-block-v{
+    width: 100%;
+  }
+  .ruler-block-h{
+    height: 100%;
+  }
+}
+.ruler-v{
+  height: 100%;
+  border-right: 1px solid var(--ruler-border-color);
+  overflow: hidden;
+}
+.ruler-h{
+  width: 100%;
+  border-bottom: 1px solid var(--ruler-border-color);
+}
+canvas{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+  pointer-events: auto;
+}
+</style>

package/src/components/nextui/SketchRule/components/RulerLine.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { CircleClose } from '@element-plus/icons-vue';
+
+const props = withDefaults(defineProps<{
+  start: number,
+  offset: number,
+  h?: boolean,
+  value: number,
+  isHover?: boolean,
+  thick: number
+}>(), {
+  start: 0,
+  offset: 0,
+  h: true,
+  value: 0,
+  isHover: false,
+  thick: 0,
+})
+
+const emit = defineEmits(['del'])
+
+const delLine = () => {
+  emit('del')
+}
+
+const styles = computed(() => {
+  return {
+    [props.h ? 'left' : 'top']: `${ props.start }px`,
+    transform: `${props.h ? 'translateX(' : 'translateY('}${props.offset}px)`
+  }
+})
+
+
+</script>
+<template>
+
+  <div
+    class="ruler-line"
+    :class="[h ? 'ruler-line-h' : 'ruler-line-v' , {'ruler-line-hover': isHover}]"
+    :style="styles"
+  >
+    <span v-if="isHover">{{ Math.ceil(value) }}</span>
+    <div v-else :style="{[h ? 'top' : 'left']: `${thick}px`}">
+      <i @click="delLine">
+        <el-icon><CircleClose /></el-icon>
+      </i>
+      <span>{{ Math.ceil(value) }}</span>
+    </div>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ruler-line{
+  position: absolute;
+  z-index: 1;
+  pointer-events: auto;
+  >div{
+    display: none;
+    position: absolute;
+    font-size: 12px;
+    i{
+      pointer-events: auto;
+      opacity: .5;
+      position: absolute;
+      cursor: pointer;
+      &:hover{
+        opacity: 1;
+      }
+    }
+    span{
+      position: absolute;
+    }
+  }
+  &:hover{
+    >div{
+      display: block;
+    }
+  }
+  >span{
+    display: block;
+    position: absolute;
+    font-size: 12px;
+    border: 1px solid var(--ruler-border-color);
+    background: var(--ruler-bg-color);
+    color: var(--ruler-font-color);
+    padding: 3px 5px;
+  }
+}
+.ruler-line-h{
+  width: 11px;
+  height: 100%;
+  background: transparent;
+  margin-left: -5px;
+  &::before{
+    content: '';
+    display: block;
+    width: 1px;
+    height: 100%;
+    position: absolute;
+    left: 5px;
+    top: 0;
+    background: var(--ruler-line-color);
+  }
+  >div{
+    i{
+      left: -5px;
+    }
+    span{
+      left: 8px;
+    }
+  }
+  >span{
+    left: 15px;
+  }
+}
+.ruler-line-v{
+  height: 11px;
+  width: 100%;
+  background: transparent;
+  margin-top: -5px;
+  &::before{
+    content: '';
+    display: block;
+    height: 1px;
+    width: 100%;
+    position: absolute;
+    top: 5px;
+    left: 0;
+    background: var(--ruler-line-color);
+  }
+  >div{
+    i{
+      top: -5px;
+    }
+    span{
+      top: 8px;
+    }
+  }
+  >span{
+    transform: rotate(-90deg);
+    transform-origin: 0 0;
+    top: -5px;
+  }
+}
+.ruler-line-hover{
+  pointer-events: none;
+}
+</style>

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

@@ -0,0 +1,232 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue';
+
+import { SketchRulePropsDefaultValeue } from '../props';
+import type { SketchRuleProps } from '../props'
+
+class CanvasRuler {
+
+  private get canvasRef(): HTMLCanvasElement {
+    return this.mainRef.querySelector('canvas') as HTMLCanvasElement;
+  }
+
+  private get mainRef(): HTMLDivElement {
+    return document.getElementById(this.domId) as HTMLDivElement;
+  }
+
+  private option = {
+    width: 0,
+    height: 0,
+    scale: 1,
+    ratio: window.devicePixelRatio || 1,
+    startX: 0,
+    startY: 0,
+    thick: 20,
+    step: 50,
+    longLineColor: 'red',
+    shortLineColor: '#fff',
+    fontColor: '#fff'
+  }
+
+  private domId: string = '';
+  private h: boolean = true;
+
+  private mainRect!: DOMRect;
+  private canvasCtx!: CanvasRenderingContext2D;
+
+  private longLineColor: string = 'red';
+  private shortLineColor: string = '#fff';
+  private fontColor: string = '#fff';
+
+  get width() {
+    return this.mainRect.width
+  }
+
+  get height() {
+    return this.mainRect.height
+  }
+
+  private step = 50;
+
+  private get _start() {
+    return this.h ? this.option.startX : this.option.startY;
+  }
+
+  private get _endX() {
+    return this.option.startX + (this.width - this.option.thick) / this.option.scale;
+  }
+
+  private get _endY() {
+    return this.option.startY + (this.height - this.option.thick) / this.option.scale;
+  }
+
+  private get _end() {
+    return this.h ? this._endX : this._endY;
+  }
+
+  start = ref(0);
+  end = ref(0);
+
+
+  constructor(option: SketchRuleProps, id: string, h: boolean = true) {
+    this.h = h;
+    this.domId = id;
+    this.option = Object.assign(this.option, option);
+    this.otherInit();
+    this.init();
+  }
+
+  private otherInit() {
+
+    this.step = this.option.step || this.step;
+    this.longLineColor = this.option?.longLineColor || 'red';
+    this.shortLineColor = this.option?.shortLineColor || '#fff';
+    this.fontColor = this.option?.fontColor || '#fff';
+
+  }
+
+  private init() {
+    this.onMounted();
+    this.onUnmounted();
+  }
+
+  private onMounted() {
+    onMounted(() => {
+
+      this.initSceen();
+
+      window.addEventListener('resize', this.resize.bind(this))
+
+    })
+  }
+
+  private resize() {
+    this.initSceen();
+  }
+
+  private initSceen() {
+
+    this.mainRect = this.mainRef.getBoundingClientRect();
+
+    const width = ((this.h ? this.width : this.height) - this.option.thick) * this.option.ratio, height = this.option.thick * this.option.ratio;
+
+    this.canvasRef.width = this.h ? width : height;
+    this.canvasRef.height = this.h ? height : width;
+
+    this.canvasCtx = this.canvasRef.getContext('2d') as CanvasRenderingContext2D;
+
+    this.drawRuler()
+  }
+
+  private onUnmounted() {
+    onUnmounted(() => {
+
+    })
+  }
+
+  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.start.value = this._start;
+    this.end.value = this._end;
+
+    let start = this.getClosestVal(this.start.value, this.step, 'floor');
+    let end = this.getClosestVal(this.end.value, this.step, 'ceil');
+
+    this.drawlRuler(start, end, this.h);
+
+  }
+
+
+  private drawlRuler(start: number, end: number, h: boolean) {
+    const ctx: CanvasRenderingContext2D = this.canvasCtx;
+
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    ctx.textAlign = 'center'; // 文字水平居中对齐
+
+    let space = this.step / 10;
+
+    if (space < 3) {
+      space = this.step / 3;
+      space = this.step / space;
+    }
+
+    ctx.strokeStyle = this.shortLineColor;
+    ctx.fillStyle = this.fontColor;
+
+    while (start <= end) {
+      // 转回视口坐标
+      const moveNum = (start - this._start) * this.option.scale;
+      // 绘制长刻度线
+      ctx.beginPath();
+      ctx.save()
+      ctx.strokeStyle = this.longLineColor;
+      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.stroke();
+      ctx.restore();
+      ctx.closePath();
+      // 绘制短刻度线
+      for (let i = 1; i < 10; i++) {
+        let moveNum1 = moveNum - (i * space) * this.option.scale;
+        let moveNum2 = i === 5 ? 8 : 5;
+        ctx.beginPath();
+        ctx.save()
+        ctx.scale(this.option.ratio, this.option.ratio);
+        ctx.moveTo(h ? moveNum1 : 0, h ? 0 : moveNum1);
+        ctx.lineTo(h ? moveNum1 : moveNum2, h ? moveNum2 : 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.otherInit();
+    this.drawRuler();
+  }
+
+
+}
+
+const useCanvas = (option: SketchRuleProps, id: string, h?: boolean) => {
+  return new CanvasRuler(option, id, h)
+}
+
+export default useCanvas;