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]

[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