how to set guidePos offset

[liu-xinhui]

Environments

• Framework name: vue3
• Framework version: vue3
• Component name: guides
• Component version: 0.18.2
• Testable Address(optional):

Description

vGuides = new Guides(document.getElementById("designer-ruler-vertical"), {
    type: "vertical",
    zoom: 0.342,
    longLineSize: 7,
    shortLineSize: 4,
    textOffset: [8, 0],
    displayDragPos: true,
    displayGuidePos: true,
    rulerStyle: { top: "40px", height: "calc(100% - 40px)", width: "100%" }
  });

when I set zoom the guild pos not correct,how I set the pos offset?

[liu-xinhui]

<template>
  <div id="designer-ruler-horizontal"></div>
  <div id="designer-ruler-vertical"></div>
  <n-icon
    size="18"
    :depth="2"
    style="padding: 3px;cursor: pointer"
    @click="show">
    <eye v-if="showLines"/>
    <eye-off v-else/>
  </n-icon>
</template>

<script setup lang="ts">
import Guides from "@scena/guides";
import { useEditorStore } from "@/store/editorStore";
import { Eye, EyeOff } from "@vicons/ionicons5";

let hGuides;
let vGuides;

const editorStore = useEditorStore();
const showLines = ref(true);
const lintOffset = computed(() => {
  return Math.round(20 / editorStore.boardConfig.scale);
});

watch(() => editorStore.boardConfig.scale, calcZoom);

onMounted(() => {
  hGuides = new Guides(document.getElementById("designer-ruler-horizontal"), {
    type: "horizontal",
    longLineSize: 7,
    shortLineSize: 4,
    textOffset: [0, 8],
    displayDragPos: true,
    displayGuidePos: true,
    rulerStyle: { left: "40px", width: "calc(100% - 40px)", height: "100%" },
    dragPosFormat: (value) => {
      return value - lintOffset.value;
    },
    guidePosFormat: (value) => {
      return value - lintOffset.value;
    },
    guidePosStyle: {
      height: "15px",
      backgroundColor: "#18a058",
      color: "white",
      fontWeight: "500",
      padding: "0px 3px",
      left: 0,
      top: "1px",
      transform: "translate(0)",
      lineHeight: "15px",
    },
  });
  vGuides = new Guides(document.getElementById("designer-ruler-vertical"), {
    type: "vertical",
    longLineSize: 7,
    shortLineSize: 4,
    textOffset: [8, 0],
    displayDragPos: true,
    displayGuidePos: true,
    rulerStyle: { top: "40px", height: "calc(100% - 40px)", width: "100%" },
    dragPosFormat: (value) => {
      return value - lintOffset.value;
    },
    guidePosFormat: (value) => {
      return value - lintOffset.value;
    },
    guidePosStyle: {
      left: "1px",
      top: "30px",
      height: "15px",
      backgroundColor: "#18a058",
      color: "white",
      fontWeight: "500",
      padding: "0px 3px",
      lineHeight: "15px"
    },
  });
  calcZoom(editorStore.boardConfig.scale);
});

function calcZoom(scale) {
  let unit;
  if (scale > 0.7) {
    unit = 50;
  } else if (scale > 0.5) {
    unit = 100;
  } else if (scale > 0.3) {
    unit = 200;
  } else if (scale > 0.1) {
    unit = 400;
  } else {
    unit = 1000;
  }
  hGuides.setState({
    zoom: scale,
    unit,
  });
  vGuides.setState({
    zoom: scale,
    unit,
  });
}

function resize() {
  hGuides?.resize();
  vGuides?.resize();
}

function show() {
  showLines.value = !showLines.value;
  hGuides.setState({ showGuides: showLines.value });
  vGuides.setState({ showGuides: showLines.value });
}

defineExpose({ resize });
</script>

<style lang="scss">
#designer-ruler-horizontal {
  height: 20px;
  width: 100%;
  position: absolute;
  background-color: #333;
}

#designer-ruler-vertical {
  height: 100%;
  width: 20px;
  position: absolute;
  background-color: #333;
}
</style>

Its all code,I use

guidePosFormat: (value) => {
      return value - Math.round(20 / editorStore.boardConfig.scale);
    },

its work ,but I think its too complex, Is there a simple way？

[daybrush]

@liu-xinhui

I will add that feature in the next release.

[daybrush]

@liu-xinhui

guides' new version is released. guidesOffset prop is added. Thank you :)