Support for multiple zoompinch components on same page #12
Description
I wanted to use this awesome library for zooming my product webpages. Does this support adding multiple zoompinch components to the same page?
eg:
<body>
<zoompinch
ref="zoompinchRef"
v-model:transform="transform"
:width="1536"
:height="2048"
:offset="{ top: 10, right: 10, bottom: 10, left: 10 }"
:min-scale="0.1"
:max-scale="10"
:rotation="true"
:bounds="false"
mouse
touch
wheel
gesture
>
<template #canvas>
<img src="https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/489df5b2-38ce-46e7-32e0-d50170e8d800/public" style="width: 1536px; height: 2048px;" />
</template>
<template #matrix="{ composePoint }">
<svg xmlns="http://www.w3.org/2000/svg" @click="handleClickOnLayer">
<!-- This circle will stick to the center of the canvas -->
<circle :cx="composePoint(0.5, 0.5)[0]" :cx="composePoint(0.5, 0.5)[1]" r="5" style="fill: #f00;" />
</svg>
</template>
</zoompinch>
<zoompinch
ref="zoompinchRef"
v-model:transform="transform"
:width="1536"
:height="2048"
:offset="{ top: 10, right: 10, bottom: 10, left: 10 }"
:min-scale="0.1"
:max-scale="10"
:rotation="true"
:bounds="false"
mouse
touch
wheel
gesture
>
<template #canvas>
<img src="https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/489df5b2-38ce-46e7-32e0-d50170e8d800/public" style="width: 1536px; height: 2048px;" />
</template>
<template #matrix="{ composePoint }">
<svg xmlns="http://www.w3.org/2000/svg" @click="handleClickOnLayer">
<!-- This circle will stick to the center of the canvas -->
<circle :cx="composePoint(0.5, 0.5)[0]" :cx="composePoint(0.5, 0.5)[1]" r="5" style="fill: #f00;" />
</svg>
</template>
</zoompinch>
</body>
is this supported? As you are using variables for the style attribute its not retaining different width,height,..etc css variables.