Please need to know how to add initial guides as default value

[musta-sd]

Environments

• Framework name:
• Framework version:
• Component name:
• Component version:
• Testable Address(optional):

Description

I need to save the guides then with one click use them

[daybrush]

@musta-sd
use defaultGuides prop.

[musta-sd]

Can you please show me how to use it

[daybrush]

@musta-sd

Based on react, it is as follows.

defaultGuides={useMemo(() => [0, 100, 200], [])}

When the defaultGuides change, the guides are updated.

[musta-sd]

What about vue ?

[daybrush]

@musta-sd

Is it Vue3? Is it Vue2?

<template>
<Guides :defaultGuides="guides" />
</template>
<script>
setup() {
const guides = [0, 100, 200];

return {
   guides,
};
}

// or
data() {
   return { guides: [0, 100, 200] };
}
</script>

[musta-sd]

Vue3 With composition API , I used this example and it is showing me an error Uncaught TypeError: guides.map is not a function
at __proto.renderGuides

[daybrush]

@musta-sd

Can you show the code you used Guides on?

[musta-sd]

    <div class="container">         
      <img
        ref="imageTarget"
        style="border: 1px solid #cccccc"
        :src="sourceCurrent ?? sourceOriginal"
        :alt="imageAlt"
        @dragstart.prevent=""
        @load="isImageReady = true"
      />       
    </div>
  </div>

<script setup lang="ts"> import Gesto from "gesto"; import Guides from "vue3-guides"; const scrollX = ref(0) const scrollY = ref(0) const guides1 = ref(null); const guides2 = ref(null); const guidesPage = ref (null) new Gesto(document.body).on("drag", (e) => { if(scrollX.value - e.deltaX >= 0){ scrollX.value -= e.deltaX; } if( scrollY.value - e.deltaY >= 0){ scrollY.value -= e.deltaY; } guides1.value.scroll(scrollX.value); guides1.value.scrollGuides(scrollY.value); guides2.value.scroll(scrollY.value); guides2.value.scrollGuides(scrollX.value); return true }); window.addEventListener("resize", onResize); function onResize() { console.log('onResize'); guides1.value.resize(); guides2.value.resize(); return true } function onChange(e: any) { console.log('onChange'); console.log(e); return true } function clickRuler(e: any) { if(scrollX.value - e.deltaX >= 0){ scrollX.value -= e.deltaX; } if( scrollY.value - e.deltaY >= 0){ scrollY.value -= e.deltaY; } guides1.value.scroll(scrollX.value); guides1.value.scrollGuides(scrollY.value); guides2.value.scroll(scrollY.value); guides2.value.scrollGuides(scrollX.value); return true } function onRestore() { guides1.value.$_guides.innerGuides.guides.$_state.guides = []; guides2.value.$_guides.innerGuides.guides.$_state.guides = []; guides1.value = null; guides2.value = null; return true; } </script >

[daybrush]

@musta-sd

guides1 and guides2 are used in ref.

ref="guides1", ref="guides2"

Try below code:

:defaultGuides="defaultGuides1"
:defaultGuides="defaultGuides2"

const defaultGuides1 = ref([0, 100, 200]);
const defaultGuides2 = ref([0, 100, 200]);

[musta-sd]

It is working Thank you so much.
last question: I need to customize the lines color based on picker , i tried with css but it is not working

[daybrush]

@musta-sd

https://daybrush.com/guides/release/latest/doc/Guides.html#.GuideOptions

[daybrush]

@musta-sd
What you're looking for is like lineColor. lineColor="#f55"

[musta-sd]

lineColor is for the ruler not the lines , i am using this for ruler

[musta-sd]

        v-if="mediaStore.isReviewImageLineGuiding"
        ref="guides2"
        type="vertical"
        displayDragPos="true"
        :defaultGuides="defaultGuides1"
        backgroundColor="#ca3639"
        lineColor="#ffffff"
        v-bind:rulerStyle="{
          top: '30px',
          height: 'calc(100% - 30px)',
          width: '30px',
        }"
        v-on:changeGuides="onChange"
        v-on:clickRuler="clickRuler"

[daybrush]

@musta-sd

Are you talking about the color of the guidelines?

https://codesandbox.io/s/intelligent-heisenberg-9xn421?file=/src/App.vue

I updated the new version (0.3.4) of vue3-guides.
Try updating the version and adding the following properties:

:guideStyle="{ backgroundColor: '#333' }"

[musta-sd]

Thank you brother