From 4ce6ce2539ea869e4aa6390cf0253705f4872e81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Sat, 27 Jan 2024 14:02:01 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20chore(app):=20update=20icon=20li?= =?UTF-8?q?brary?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 19 ++++--- package.json | 2 +- src/components/Artwork.tsx | 107 +++++++++++++++++++++++++++++-------- src/components/Layout.tsx | 28 +++++----- src/components/Select.tsx | 9 ++-- src/index.css | 2 +- 6 files changed, 117 insertions(+), 50 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8ca0fb6..42bae99 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "glamorouseurope", "version": "0.0.0", "dependencies": { + "@heroicons/react": "^2.1.1", "@iiif/parser": "^2.0.1", "@samvera/clover-iiif": "^2.3.2", "axios": "^1.6.7", @@ -44,7 +45,6 @@ "postcss": "^8.4.33", "prettier": "^3.2.4", "prettier-plugin-sort-json": "^3.1.0", - "react-icons": "^5.0.1", "tailwindcss": "^3.4.1", "typescript": "^5.3.3", "vite": "^5.0.12", @@ -2307,6 +2307,14 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" }, + "node_modules/@heroicons/react": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.1.tgz", + "integrity": "sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==", + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", @@ -8215,15 +8223,6 @@ } } }, - "node_modules/react-icons": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz", - "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==", - "dev": true, - "peerDependencies": { - "react": "*" - } - }, "node_modules/react-konva": { "version": "18.2.10", "resolved": "https://registry.npmjs.org/react-konva/-/react-konva-18.2.10.tgz", diff --git a/package.json b/package.json index 9d8e1db..e2a8ed1 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "preview": "vite preview" }, "dependencies": { + "@heroicons/react": "^2.1.1", "@iiif/parser": "^2.0.1", "@samvera/clover-iiif": "^2.3.2", "axios": "^1.6.7", @@ -49,7 +50,6 @@ "postcss": "^8.4.33", "prettier": "^3.2.4", "prettier-plugin-sort-json": "^3.1.0", - "react-icons": "^5.0.1", "tailwindcss": "^3.4.1", "typescript": "^5.3.3", "vite": "^5.0.12", diff --git a/src/components/Artwork.tsx b/src/components/Artwork.tsx index a0b7595..3186895 100644 --- a/src/components/Artwork.tsx +++ b/src/components/Artwork.tsx @@ -1,3 +1,4 @@ +import { ArrowDownTrayIcon, ShareIcon } from "@heroicons/react/24/outline"; import { saveAs } from "file-saver"; // @ts-expect-error konsta typing import { Block, Button, Icon } from "konsta/react"; @@ -5,7 +6,6 @@ import Konva from "konva"; import { KonvaEventObject } from "konva/lib/Node"; import { MutableRefObject, useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; -import { MdDownloadForOffline, MdShare } from "react-icons/md"; import { Image, Layer, Stage, Transformer } from "react-konva"; import { Link } from "react-router-dom"; import useImage from "use-image"; @@ -129,7 +129,7 @@ const Canvas = () => { useEffect(() => { const fitStageIntoParentContainer = () => { - const containerWidth = window.innerWidth || 0; + const containerWidth = window.innerWidth * 0.9 || 0; const scale = containerWidth / sceneWidth; if (stageRef.current) { @@ -272,24 +272,25 @@ const Canvas = () => { /> )} - - + +
+ + +
); }; @@ -298,11 +299,75 @@ function Artwork() { const { t } = useTranslation(); const { canvasList } = useStore(); + const [selectedId] = useState(""); + + /* useEffect(() => { + const container = stageRef.current?.container(); + if (container) { + container.addEventListener("dragover", (e) => { + e.preventDefault(); + }); + + container.addEventListener("drop", (e) => { + e.preventDefault(); + const data = e.dataTransfer.getData("text"); + const droppedImage = canvasList.find((img) => img.id === data); + if (droppedImage) { + const scale = stageRef.current?.scaleX() || 1; + const position = stageRef.current?.getPointerPosition(); + const x = (position?.x || 0) / scale; + const y = (position?.y || 0) / scale; + + updateCanvasList({ ...droppedImage, x, y }); + } + }); + } + + return () => { + if (container) { + container.removeEventListener("dragover", (e) => e.preventDefault()); + container.removeEventListener("drop", (e) => e.preventDefault()); + } + }; + }, [canvasList, updateCanvasList]); + + const checkDeselect = ( + e: Konva.KonvaEventObject | Konva.KonvaEventObject, + ) => { + const clickedOnEmpty = e.target === e.target.getStage(); + if (clickedOnEmpty) { + setSelectedId(""); + } + }; */ + return ( - +

{t("artworkTitle")}

+
+ {canvasList.map((canvasImage) => ( + {canvasImage.id} { + e.dataTransfer.setData("text", canvasImage.id); + }} + role="presentation" + style={{ + width: "100px", + height: "100px", + cursor: "move", + border: + selectedId === canvasImage.id ? "2px solid #4CAF50" : "none", + borderRadius: "5px", + margin: "4px", + }} + /> + ))} +
{canvasList.length === 0 ? (