Inital commit

2026-06-29 09:40:34 +02:00
commit 3ee804a543
68 changed files with 10924 additions and 0 deletions
@@ -0,0 +1,84 @@
+import styled from "styled-components";
+import type { CanvasHandleImageEditorProps } from "../handler/interfaces";
+import { FaEye, FaLock } from "react-icons/fa";
+import { NamePlate } from "./layer-name";
+import type { ImageEditor } from "../handler/image-editor";
+
+const Item = styled.div<{ $selected: boolean }>`
+    width: 240px;
+    height: 30px;
+    border: 1px solid var(--secondary-color);
+    display: flex;
+    flex-direction: row;
+
+    ${({ $selected }) =>
+        $selected &&
+        `
+        background-color: var(--secondary-color);
+    `}
+`;
+
+const Img = styled.img`
+    margin: 5px;
+    max-width: 25px;
+    max-height: 25px;
+`;
+const Icon = styled.span`
+    padding: 7px 5px;
+    cursor: pointer;
+`;
+
+export function LayerItem({ image, handler }: CanvasHandleImageEditorProps) {
+    const selectLayer = (image: ImageEditor, ctrl: boolean) => {
+        if (!ctrl) {
+            const selected = handler.selected.filter(e => e !== image.id);
+            for (const sel of selected) {
+                handler.setSelect(sel, false);
+            }
+        }
+        image.toggleSelected();
+    };
+    return (
+        <Item
+            $selected={image.selected}
+            onClick={ev => {
+                ev.stopPropagation();
+                ev.preventDefault();
+                selectLayer(image, ev.ctrlKey);
+            }}
+        >
+            <Icon
+                style={{ opacity: image.visible ? 1 : 0.1 }}
+                onClick={ev => {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    image.setVisible(!image.visible);
+                }}
+            >
+                <FaEye />
+            </Icon>
+
+            <Img
+                draggable="false"
+                onClick={ev => {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    selectLayer(image, ev.ctrlKey);
+                }}
+                src={image.url}
+                alt={image.id}
+            />
+            <NamePlate image={image} />
+            <Icon
+                style={{ opacity: image.locked ? 1 : 0.1 }}
+                onClick={ev => {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    image.setLock(!image.locked);
+                }}
+            >
+                <FaLock />
+            </Icon>
+        </Item>
+    );
+}