fix(ui): Extending HTML elements is not supported by safari

Hypfer · Jun 13, 2024 · 4f72632 · 4f72632
1 parent a7b2cc4
commit 4f72632
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 75 deletions.
diff --git a/frontend/src/map/structures/client_structures/GoToTargetClientStructure.ts b/frontend/src/map/structures/client_structures/GoToTargetClientStructure.ts
@@ -1,10 +1,9 @@
 import ClientStructure from "./ClientStructure";
 import goToTargetIconSVG from "../icons/marker.svg";
 import {Canvas2DContextTrackingWrapper} from "../../utils/Canvas2DContextTrackingWrapper";
-import {ValetudoMapCanvasImageAsset} from "../../utils/ValetudoMapCanvasImageAsset";
 import {considerHiDPI} from "../../utils/helpers";
 
-const img = new ValetudoMapCanvasImageAsset();
+const img = new Image();
 img.src = goToTargetIconSVG;
 
 class GoToTargetClientStructure extends ClientStructure {
@@ -20,8 +19,8 @@ class GoToTargetClientStructure extends ClientStructure {
 
 
         const scaledSize = {
-            width: Math.max(img.hiDPIAwareWidth / (considerHiDPI(7) / scaleFactor), img.hiDPIAwareWidth),
-            height: Math.max(img.hiDPIAwareHeight / (considerHiDPI(7) / scaleFactor), img.hiDPIAwareHeight)
+            width: Math.max(considerHiDPI(img.width) / (considerHiDPI(7) / scaleFactor), considerHiDPI(img.width)),
+            height: Math.max(considerHiDPI(img.height) / (considerHiDPI(7) / scaleFactor), considerHiDPI(img.height))
         };
 
         ctx.drawImage(

diff --git a/frontend/src/map/structures/client_structures/LineClientStructure.ts b/frontend/src/map/structures/client_structures/LineClientStructure.ts
@@ -4,13 +4,12 @@ import moveButtonIconSVG from "../icons/move_zone.svg";
 import {StructureInterceptionHandlerResult} from "../Structure";
 import {Canvas2DContextTrackingWrapper} from "../../utils/Canvas2DContextTrackingWrapper";
 import {PointCoordinates} from "../../utils/types";
-import {calculateBoxAroundPoint, isInsideBox} from "../../utils/helpers";
-import {ValetudoMapCanvasImageAsset} from "../../utils/ValetudoMapCanvasImageAsset";
+import {calculateBoxAroundPoint, considerHiDPI, isInsideBox} from "../../utils/helpers";
 
-const img_delete_button = new ValetudoMapCanvasImageAsset();
+const img_delete_button = new Image();
 img_delete_button.src = deleteButtonIconSVG;
 
-const img_move_button = new ValetudoMapCanvasImageAsset();
+const img_move_button = new Image();
 img_move_button.src = moveButtonIconSVG;
 
 const buttonHitboxPadding = 22.5;
@@ -83,18 +82,18 @@ abstract class LineClientStructure extends ClientStructure {
         if (this.active) {
             ctx.drawImage(
                 img_delete_button,
-                p0.x - img_delete_button.hiDPIAwareWidth / 2,
-                p0.y - img_delete_button.hiDPIAwareHeight / 2,
-                img_delete_button.hiDPIAwareWidth,
-                img_delete_button.hiDPIAwareHeight
+                p0.x - considerHiDPI(img_delete_button.width) / 2,
+                p0.y - considerHiDPI(img_delete_button.height) / 2,
+                considerHiDPI(img_delete_button.width),
+                considerHiDPI(img_delete_button.height)
             );
 
             ctx.drawImage(
                 img_move_button,
-                p1.x - img_move_button.hiDPIAwareWidth / 2,
-                p1.y - img_move_button.hiDPIAwareHeight / 2,
-                img_move_button.hiDPIAwareWidth,
-                img_move_button.hiDPIAwareHeight
+                p1.x - considerHiDPI(img_move_button.width) / 2,
+                p1.y - considerHiDPI(img_move_button.height) / 2,
+                considerHiDPI(img_move_button.width),
+                considerHiDPI(img_move_button.height)
             );
         }
 

diff --git a/frontend/src/map/structures/client_structures/RestrictedZoneClientStructure.ts b/frontend/src/map/structures/client_structures/RestrictedZoneClientStructure.ts
@@ -5,12 +5,11 @@ import {StructureInterceptionHandlerResult} from "../Structure";
 import {Canvas2DContextTrackingWrapper} from "../../utils/Canvas2DContextTrackingWrapper";
 import {PointCoordinates} from "../../utils/types";
 import {calculateBoxAroundPoint, considerHiDPI, isInsideBox} from "../../utils/helpers";
-import {ValetudoMapCanvasImageAsset} from "../../utils/ValetudoMapCanvasImageAsset";
 
-const img_delete_button = new ValetudoMapCanvasImageAsset();
+const img_delete_button = new Image();
 img_delete_button.src = deleteButtonIconSVG;
 
-const img_scale_button = new ValetudoMapCanvasImageAsset();
+const img_scale_button = new Image();
 img_scale_button.src = scaleButtonIconSVG;
 
 const buttonHitboxPadding = 22.5;
@@ -100,18 +99,18 @@ abstract class RestrictedZoneClientStructure extends ClientStructure {
         if (this.active) {
             ctx.drawImage(
                 img_delete_button,
-                p1.x - img_delete_button.hiDPIAwareWidth / 2,
-                p1.y - img_delete_button.hiDPIAwareHeight / 2,
-                img_delete_button.hiDPIAwareWidth,
-                img_delete_button.hiDPIAwareHeight
+                p1.x - considerHiDPI(img_delete_button.width) / 2,
+                p1.y - considerHiDPI(img_delete_button.height) / 2,
+                considerHiDPI(img_delete_button.width),
+                considerHiDPI(img_delete_button.height)
             );
 
             ctx.drawImage(
                 img_scale_button,
-                p2.x - img_scale_button.hiDPIAwareWidth / 2,
-                p2.y - img_scale_button.hiDPIAwareHeight / 2,
-                img_scale_button.hiDPIAwareWidth,
-                img_scale_button.hiDPIAwareHeight
+                p2.x - considerHiDPI(img_scale_button.width) / 2,
+                p2.y - considerHiDPI(img_scale_button.height) / 2,
+                considerHiDPI(img_scale_button.width),
+                considerHiDPI(img_scale_button.height)
             );
         }
     }

diff --git a/frontend/src/map/structures/client_structures/ZoneClientStructure.ts b/frontend/src/map/structures/client_structures/ZoneClientStructure.ts
@@ -5,12 +5,11 @@ import {StructureInterceptionHandlerResult} from "../Structure";
 import {Canvas2DContextTrackingWrapper} from "../../utils/Canvas2DContextTrackingWrapper";
 import {PointCoordinates} from "../../utils/types";
 import {calculateBoxAroundPoint, considerHiDPI, isInsideBox} from "../../utils/helpers";
-import {ValetudoMapCanvasImageAsset} from "../../utils/ValetudoMapCanvasImageAsset";
 
-const img_delete_button = new ValetudoMapCanvasImageAsset();
+const img_delete_button = new Image();
 img_delete_button.src = deleteButtonIconSVG;
 
-const img_scale_button = new ValetudoMapCanvasImageAsset();
+const img_scale_button = new Image();
 img_scale_button.src = scaleButtonIconSVG;
 
 const buttonHitboxPadding = 22.5;
@@ -90,18 +89,18 @@ class ZoneClientStructure extends ClientStructure {
         if (this.active) {
             ctx.drawImage(
                 img_delete_button,
-                p1.x - img_delete_button.hiDPIAwareWidth / 2,
-                p0.y - img_delete_button.hiDPIAwareHeight / 2,
-                img_delete_button.hiDPIAwareWidth,
-                img_delete_button.hiDPIAwareHeight
+                p1.x - considerHiDPI(img_delete_button.width) / 2,
+                p0.y - considerHiDPI(img_delete_button.height) / 2,
+                considerHiDPI(img_delete_button.width),
+                considerHiDPI(img_delete_button.height)
             );
 
             ctx.drawImage(
                 img_scale_button,
-                p1.x - img_scale_button.hiDPIAwareWidth / 2,
-                p1.y - img_scale_button.hiDPIAwareHeight / 2,
-                img_scale_button.hiDPIAwareWidth,
-                img_scale_button.hiDPIAwareHeight
+                p1.x - considerHiDPI(img_scale_button.width) / 2,
+                p1.y - considerHiDPI(img_scale_button.height) / 2,
+                considerHiDPI(img_scale_button.width),
+                considerHiDPI(img_scale_button.height)
             );
         }
     }

diff --git a/frontend/src/map/structures/map_structures/ChargerLocationMapStructure.ts b/frontend/src/map/structures/map_structures/ChargerLocationMapStructure.ts
@@ -1,10 +1,9 @@
 import MapStructure from "./MapStructure";
 import chargerIconSVG from "../icons/charger.svg";
 import {Canvas2DContextTrackingWrapper} from "../../utils/Canvas2DContextTrackingWrapper";
-import {ValetudoMapCanvasImageAsset} from "../../utils/ValetudoMapCanvasImageAsset";
 import {considerHiDPI} from "../../utils/helpers";
 
-const img = new ValetudoMapCanvasImageAsset();
+const img = new Image();
 img.src = chargerIconSVG;
 
 class ChargerLocationMapStructure extends MapStructure {
@@ -19,8 +18,8 @@ class ChargerLocationMapStructure extends MapStructure {
         const p0 = new DOMPoint(this.x0, this.y0).matrixTransform(transformationMatrixToScreenSpace);
 
         const scaledSize = {
-            width: Math.max(img.hiDPIAwareWidth / (considerHiDPI(4.5) / scaleFactor), img.hiDPIAwareWidth),
-            height: Math.max(img.hiDPIAwareWidth / (considerHiDPI(4.5) / scaleFactor), img.hiDPIAwareHeight)
+            width: Math.max(considerHiDPI(img.width) / (considerHiDPI(4.5) / scaleFactor), considerHiDPI(img.width)),
+            height: Math.max(considerHiDPI(img.height) / (considerHiDPI(4.5) / scaleFactor), considerHiDPI(img.height))
         };
 
         ctx.drawImage(

diff --git a/frontend/src/map/structures/map_structures/GoToTargetMapStructure.ts b/frontend/src/map/structures/map_structures/GoToTargetMapStructure.ts
@@ -1,10 +1,9 @@
 import MapStructure from "./MapStructure";
 import goToTargetIconSVG from "../icons/marker_active.svg";
 import {Canvas2DContextTrackingWrapper} from "../../utils/Canvas2DContextTrackingWrapper";
-import {ValetudoMapCanvasImageAsset} from "../../utils/ValetudoMapCanvasImageAsset";
 import {considerHiDPI} from "../../utils/helpers";
 
-const img = new ValetudoMapCanvasImageAsset();
+const img = new Image();
 img.src = goToTargetIconSVG;
 
 class GoToTargetMapStructure extends MapStructure {
@@ -20,8 +19,8 @@ class GoToTargetMapStructure extends MapStructure {
 
 
         const scaledSize = {
-            width: Math.max(img.hiDPIAwareWidth / (considerHiDPI(7) / scaleFactor), img.hiDPIAwareWidth),
-            height: Math.max(img.hiDPIAwareHeight / (considerHiDPI(7) / scaleFactor), img.hiDPIAwareHeight)
+            width: Math.max(considerHiDPI(img.width) / (considerHiDPI(7) / scaleFactor), considerHiDPI(img.width)),
+            height: Math.max(considerHiDPI(img.height) / (considerHiDPI(7) / scaleFactor), considerHiDPI(img.height))
         };
 
         ctx.drawImage(

diff --git a/frontend/src/map/structures/map_structures/ObstacleMapStructure.ts b/frontend/src/map/structures/map_structures/ObstacleMapStructure.ts
@@ -1,10 +1,9 @@
 import MapStructure from "./MapStructure";
 import obstacleIconSVG from "../icons/obstacle.svg";
 import {Canvas2DContextTrackingWrapper} from "../../utils/Canvas2DContextTrackingWrapper";
-import {ValetudoMapCanvasImageAsset} from "../../utils/ValetudoMapCanvasImageAsset";
 import {considerHiDPI} from "../../utils/helpers";
 
-const img = new ValetudoMapCanvasImageAsset();
+const img = new Image();
 img.src = obstacleIconSVG;
 
 class ObstacleMapStructure extends MapStructure {
@@ -23,8 +22,8 @@ class ObstacleMapStructure extends MapStructure {
 
 
         const scaledSize = {
-            width: Math.max(img.hiDPIAwareWidth / (considerHiDPI(8) / scaleFactor), img.hiDPIAwareWidth * 0.3),
-            height: Math.max(img.hiDPIAwareHeight / (considerHiDPI(8) / scaleFactor), img.hiDPIAwareHeight * 0.3)
+            width: Math.max(considerHiDPI(img.width) / (considerHiDPI(8) / scaleFactor), considerHiDPI(img.width) * 0.3),
+            height: Math.max(considerHiDPI(img.height) / (considerHiDPI(8) / scaleFactor), considerHiDPI(img.height) * 0.3)
         };
 
         ctx.drawImage(

diff --git a/frontend/src/map/structures/map_structures/RobotPositionMapStructure.ts b/frontend/src/map/structures/map_structures/RobotPositionMapStructure.ts
@@ -1,10 +1,9 @@
 import MapStructure from "./MapStructure";
 import robotIconSVG from "../icons/robot.svg";
 import {Canvas2DContextTrackingWrapper} from "../../utils/Canvas2DContextTrackingWrapper";
-import {ValetudoMapCanvasImageAsset} from "../../utils/ValetudoMapCanvasImageAsset";
 import {considerHiDPI} from "../../utils/helpers";
 
-const img = new ValetudoMapCanvasImageAsset();
+const img = new Image();
 img.src = robotIconSVG;
 
 class RobotPositionMapStructure extends MapStructure {
@@ -41,8 +40,8 @@ class RobotPositionMapStructure extends MapStructure {
         };
 
         const scaledSize = {
-            width: Math.max(img.hiDPIAwareWidth / (considerHiDPI(4.5) / scaleFactor), img.hiDPIAwareWidth),
-            height: Math.max(img.hiDPIAwareHeight / (considerHiDPI(4.5) / scaleFactor), img.hiDPIAwareHeight)
+            width: Math.max(considerHiDPI(img.width) / (considerHiDPI(4.5) / scaleFactor), considerHiDPI(img.width)),
+            height: Math.max(considerHiDPI(img.height) / (considerHiDPI(4.5) / scaleFactor), considerHiDPI(img.height))
         };
 
         ctx.drawImage(

diff --git a/frontend/src/map/structures/map_structures/SegmentLabelMapStructure.ts b/frontend/src/map/structures/map_structures/SegmentLabelMapStructure.ts
@@ -2,13 +2,12 @@ import MapStructure from "./MapStructure";
 import segmentIconSVG from "../icons/segment.svg";
 import segmentSelectedIconSVG from "../icons/segment_selected.svg";
 import {Canvas2DContextTrackingWrapper} from "../../utils/Canvas2DContextTrackingWrapper";
-import {ValetudoMapCanvasImageAsset} from "../../utils/ValetudoMapCanvasImageAsset";
 import {considerHiDPI} from "../../utils/helpers";
 
-const img = new ValetudoMapCanvasImageAsset();
+const img = new Image();
 img.src = segmentIconSVG;
 
-const img_selected = new ValetudoMapCanvasImageAsset();
+const img_selected = new Image();
 img_selected.src = segmentSelectedIconSVG;
 
 
@@ -42,12 +41,12 @@ class SegmentLabelMapStructure extends MapStructure {
 
         this.scaledIconSize = {
             width: Math.max(
-                imageToUse.hiDPIAwareWidth * (scaleFactor / considerHiDPI(4)),
-                imageToUse.hiDPIAwareWidth * 0.8
+                considerHiDPI(imageToUse.width) * (scaleFactor / considerHiDPI(4)),
+                considerHiDPI(imageToUse.width) * 0.8
             ),
             height: Math.max(
-                imageToUse.hiDPIAwareHeight * (scaleFactor / considerHiDPI(4)),
-                imageToUse.hiDPIAwareHeight * 0.8
+                considerHiDPI(imageToUse.height) * (scaleFactor / considerHiDPI(4)),
+                considerHiDPI(imageToUse.height) * 0.8
             )
         };
 

diff --git a/frontend/src/map/utils/ValetudoMapCanvasImageAsset.ts b/frontend/src/map/utils/ValetudoMapCanvasImageAsset.ts