feat: finished adding painting features, added eraser

src/ui/Widgets/Icon/IconView.tsx

@@ -1,15 +1,24 @@
+import { h, Rung, RungOptions } from "@djledda/ladder";
 import "./Icon.css";
+
 import List from "assets/svgs/list.svg";
 import ArrowClockwise from "assets/svgs/arrow-clockwise.svg";
 import Trash from "assets/svgs/trash.svg";
 import Snowflake from "assets/svgs/snowflake.svg";
-import { h, Rung, RungOptions } from "@djledda/ladder";
+import LeftHand from "assets/svgs/LH.png";
+import RightHand from "assets/svgs/RH.png";
+import LeftFoot from "assets/svgs/LF.png";
+import RightFoot from "assets/svgs/RF.png";
 
 const IconUrlMap = {
     arrowClockwise: ArrowClockwise,
     list: List,
     trash: Trash,
     snowflake: Snowflake,
+    lh: LeftHand,
+    rh: RightHand,
+    lf: LeftFoot,
+    rf: RightFoot,
 } as const;
 
 export type IconName = keyof typeof IconUrlMap;
@@ -19,7 +28,7 @@ export type IconViewOptions = RungOptions & {
     color?: string,
 };
 
-export default class IconView extends Rung {
+export default class IconView extends Rung<HTMLDivElement> {
     private iconUrl: string;
     private color: string | null;
 
@@ -29,10 +38,19 @@ export default class IconView extends Rung {
         this.iconUrl = IconUrlMap[options.iconName];
     }
 
-    build(): HTMLSpanElement {
-        const icon = <div className={"icon-view"} /> as HTMLDivElement;
+    setIcon(name: IconName) {
+        this.iconUrl = IconUrlMap[name];
+        this.render().style.cssText = this.cssText();
+    }
+
+    cssText() {
         const colorString = this.color ? `--icon-bg:${this.color}` : "";
-        icon.style.cssText = `-webkit-mask-image: url(${this.iconUrl}); mask-image: url(${this.iconUrl});${colorString}`;
+        return `-webkit-mask-image: url(${this.iconUrl}); mask-image: url(${this.iconUrl});${colorString ?? ''}`;
+    }
+
+    build() {
+        const icon = <div className={"icon-view"} /> as HTMLDivElement;
+        icon.style.cssText = this.cssText();
         return icon;
     }
-}
+}