🚀 perf(app): optimize konva rendering

index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <link rel="mask-icon" href="/maskable-icon-512x512.png" color="#FFFFFF">
   <meta name="theme-color" content="#BC13FE">
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
   <meta name="description" content="Wir machen Kulturerbe digital erfahrbar.">
   <title>GLAMorous Europe</title>
   <link rel="icon" type="image/png" sizes="196x196" href="/favicon-196.png">

src/components/ArtworkCanvas.tsx

@@ -394,6 +394,7 @@ const ArtworkCanvas: React.FC = () => {
             border: "4px solid",
             borderColor: borderColor,
           }}
+          pixelRatio={1}
           width={sceneWidth}
           height={sceneHeight}
           ref={stageRef}

src/components/ArtworkImage.tsx

@@ -82,6 +82,7 @@ const ArtworkImage = ({
         onTap={onSelect}
         onTransformEnd={handleTransformEnd}
         opacity={canvasImage.opacity || 1}
+        perfectDrawEnabled={false}
         ref={imageRef}
         scaleX={0.5}
         scaleY={0.5}

src/components/ArtworkThumbnail.tsx

@@ -1,9 +1,9 @@
 import { CSSProperties } from "react";
-import { DragPreviewImage, useDrag } from "react-dnd";
+import { useDrag } from "react-dnd";
 import { Preview } from "react-dnd-multi-backend";
 
 function ArtworkThumbnail({ id, image }: { id: string; image: string }) {
-  const [{ opacity }, drag, preview] = useDrag(() => ({
+  const [{ opacity }, drag] = useDrag(() => ({
     type: "artwork",
     item: { id, image },
     collect: (monitor) => ({
@@ -35,15 +35,14 @@ function ArtworkThumbnail({ id, image }: { id: string; image: string }) {
 
   return (
     <>
-      <DragPreviewImage connect={preview} src={image} />
       <Preview>{generatePreview}</Preview>
       <img
         src={image}
         alt={id}
         role="presentation"
         style={{
           cursor: "move",
-          marginRight: "10px",
+          paddingRight: "10px",
           maxHeight: "100px",
           opacity: opacity,
           scrollSnapAlign: "start",

src/main.tsx

@@ -30,6 +30,7 @@ const HTML5toTouch = {
     {
       id: "html5",
       backend: HTML5Backend,
+      preview: true,
       transition: MouseTransition,
     },
     {