Fix zoom performance issues
This commit is contained in:
parent
fef7c8f57c
commit
403a65158a
|
|
@ -115,6 +115,17 @@ const canvas = computed(() => overview.value && overview.value.content ? overvie
|
||||||
const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
|
const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
|
||||||
const canvasRef = useTemplateRef('canvasRef'), transformRef = useTemplateRef('transformRef');
|
const canvasRef = useTemplateRef('canvasRef'), transformRef = useTemplateRef('transformRef');
|
||||||
|
|
||||||
|
const updateScaleVar = useDebounceFn(() => {
|
||||||
|
if(transformRef.value)
|
||||||
|
{
|
||||||
|
transformRef.value.style.setProperty('--tw-scale', zoom.value.toString());
|
||||||
|
}
|
||||||
|
if(canvasRef.value)
|
||||||
|
{
|
||||||
|
canvasRef.value.style.setProperty('--zoom-multiplier', (1 / Math.pow(zoom.value, 0.7)).toFixed(3));
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
|
||||||
const reset = (_: MouseEvent) => {
|
const reset = (_: MouseEvent) => {
|
||||||
zoom.value = minZoom.value;
|
zoom.value = minZoom.value;
|
||||||
|
|
||||||
|
|
@ -233,8 +244,8 @@ function updateTransform()
|
||||||
if(transformRef.value)
|
if(transformRef.value)
|
||||||
{
|
{
|
||||||
transformRef.value.style.transform = `scale3d(${zoom.value}, ${zoom.value}, 1) translate3d(${dispX.value}px, ${dispY.value}px, 0)`;
|
transformRef.value.style.transform = `scale3d(${zoom.value}, ${zoom.value}, 1) translate3d(${dispX.value}px, ${dispY.value}px, 0)`;
|
||||||
transformRef.value.style.setProperty('--tw-scale', zoom.value.toString());
|
|
||||||
}
|
}
|
||||||
|
updateScaleVar();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue