diff --git a/src/components/ImageHolder.tsx b/src/components/ImageHolder.tsx
index e252a54..8929e37 100644
--- a/src/components/ImageHolder.tsx
+++ b/src/components/ImageHolder.tsx
@@ -1,106 +1,110 @@
-import React, { useState, useEffect } from 'react';
-import { ReactSortable } from 'react-sortablejs';
+import { useState, useEffect } from "react";
+import { ReactSortable } from "react-sortablejs";
interface ImageItem {
- id: number;
- url: string;
+ id: number;
+ url: string;
}
const ImageHolder = () => {
- const [images, setImages] = useState
([]);
+ const [images, setImages] = useState([]);
- const handleDrop = (event: DragEvent) => {
- event.preventDefault();
- if (event.dataTransfer == null) return;
- if (
- event.dataTransfer.getData('application/x-tier') !== "true"
- ) {
- if (event.dataTransfer.files.length > 0){
- const files = Array.from(event.dataTransfer.files)
- files.forEach(file => {
- if (!file.type.startsWith('image/')) return
- const reader = new FileReader();
- reader.onload = function(event) {
- if(event.target == null) return
- const imageData = event.target.result;
- setImages(prevImages => [
- ...prevImages,
- { id: new Date().getTime() + Math.floor(Math.random() * 1000), url: imageData as string},
- ]);
- }
- reader.readAsDataURL(file);
- });
- }
- }
- };
+ const handleDrop = (event: DragEvent) => {
+ event.preventDefault();
+ if (event.dataTransfer == null) return;
+ if (event.dataTransfer.getData("application/x-tier") !== "true") {
+ if (event.dataTransfer.files.length > 0) {
+ const files = Array.from(event.dataTransfer.files);
+ files.forEach((file) => {
+ if (!file.type.startsWith("image/")) return;
+ const reader = new FileReader();
+ reader.onload = function (event) {
+ if (event.target == null) return;
+ const imageData = event.target.result;
+ setImages((prevImages) => [
+ ...prevImages,
+ {
+ id: new Date().getTime() + Math.floor(Math.random() * 1000),
+ url: imageData as string
+ }
+ ]);
+ };
+ reader.readAsDataURL(file);
+ });
+ }
+ }
+ };
- const dragStart = (event: DragEvent) =>{
- if(event.dataTransfer == null) return
- event.dataTransfer.setData('application/x-tier', 'true');
- }
+ const dragStart = (event: DragEvent) => {
+ if (event.dataTransfer == null) return;
+ event.dataTransfer.setData("application/x-tier", "true");
+ };
- useEffect(() => {
- const handlePaste = (event: ClipboardEvent) => {
- const items = event.clipboardData?.items;
- if (items) {
- for (let i = 0; i < items.length; i++) {
- const item = items[i];
- if (item.type.indexOf('image') !== -1) {
- const blob = item.getAsFile();
- if (blob) {
- const imageUrl = URL.createObjectURL(blob);
- setImages(prevImages => [
- ...prevImages,
- { id: new Date().getTime(), url: imageUrl },
- ]);
- }
- }
- }
- }
- };
+ useEffect(() => {
+ const handlePaste = (event: ClipboardEvent) => {
+ const items = event.clipboardData?.items;
+ if (items) {
+ for (let i = 0; i < items.length; i++) {
+ const item = items[i];
+ if (item.type.indexOf("image") !== -1) {
+ const blob = item.getAsFile();
+ if (blob) {
+ const imageUrl = URL.createObjectURL(blob);
+ setImages((prevImages) => [
+ ...prevImages,
+ { id: new Date().getTime(), url: imageUrl }
+ ]);
+ }
+ }
+ }
+ }
+ };
- // Attach paste event listener
- document.addEventListener('paste', handlePaste);
+ document.addEventListener("paste", handlePaste);
- const dragOver = (event: DragEvent) => {
- event.preventDefault();
- };
+ const dragOver = (event: DragEvent) => {
+ event.preventDefault();
+ };
- const drop = (event: DragEvent) => {
- event.preventDefault();
- handleDrop(event);
- };
+ const drop = (event: DragEvent) => {
+ event.preventDefault();
+ handleDrop(event);
+ };
- // Attach global dragover and drop event listeners
- document.addEventListener('dragstart', dragStart);
- document.addEventListener('dragover', dragOver);
- document.addEventListener('drop', drop);
+ document.addEventListener("dragstart", dragStart);
+ document.addEventListener("dragover", dragOver);
+ document.addEventListener("drop", drop);
+
+ return () => {
+ document.removeEventListener("paste", handlePaste);
+ document.removeEventListener("dragover", dragOver);
+ document.removeEventListener("drop", drop);
+ };
+ }, []);
- // Clean up the event listeners on unmount
- return () => {
- document.removeEventListener('paste', handlePaste);
- document.removeEventListener('dragover', dragOver);
- document.removeEventListener('drop', drop);
- };
- }, []);
-
- return (
-
- {images.length === 0 ? (
- Drag & Drop or Copy and Paste images in here!
- ) :
- images.map((image) => (
-
- );
+ return (
+
+ {images.length === 0 ? (
+
+ Drag & Drop or Copy and Paste images in here!
+
+ ) : (
+ images.map((image) => (
+
+ );
};
export default ImageHolder;
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 9da123e..e8352a1 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,89 +1,106 @@
-import React, { useState, ChangeEvent, FormEvent } from 'react';
-import { SketchPicker } from 'react-color';
+import React, { useState, ChangeEvent, FormEvent } from "react";
+import { SketchPicker } from "react-color";
interface ModalProps {
- isOpen: boolean;
- onClose: () => void;
- onAddTier: (color: string, name: string) => void;
+ isOpen: boolean;
+ onClose: () => void;
+ onAddTier: (color: string, name: string) => void;
}
const Modal: React.FC = ({ isOpen, onClose, onAddTier }) => {
- const [name, setName] = useState('');
- const [color, setColor] = useState('');
+ const [name, setName] = useState("");
+ const [color, setColor] = useState("");
- const handleNameChange = (event: ChangeEvent) => {
- setName(event.target.value);
- };
+ const handleNameChange = (event: ChangeEvent) => {
+ setName(event.target.value);
+ };
- const handleColorChange = (newColor: any) => {
- setColor(newColor.hex);
- };
+ const handleColorChange = (newColor: any) => {
+ setColor(newColor.hex);
+ };
- const handleSubmit = (event: FormEvent) => {
- event.preventDefault();
- // Call the onAddTier function with the new tier's data
- onAddTier(color, name);
- onClose();
- };
+ const handleSubmit = (event: FormEvent) => {
+ event.preventDefault();
+ // Call the onAddTier function with the new tier's data
+ onAddTier(color, name);
+ onClose();
+ };
- const handleClick = (event: React.MouseEvent) => {
- const target = event.target as HTMLElement
- if(target.id == "modal-bg") onClose();
- }
+ const handleClick = (event: React.MouseEvent) => {
+ const target = event.target as HTMLElement;
+ if (target.id === "modal-bg") onClose();
+ };
- if (!isOpen) {
- return null;
- }
+ if (!isOpen) {
+ return null;
+ }
- return (
-
- );
+ return (
+
+ );
};
export default Modal;
diff --git a/src/components/Tier.tsx b/src/components/Tier.tsx
index 1f74764..28aa41f 100644
--- a/src/components/Tier.tsx
+++ b/src/components/Tier.tsx
@@ -1,144 +1,154 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { ReactSortable } from 'react-sortablejs';
-import { SketchPicker } from 'react-color';
+import React, { useState, useEffect, useRef } from "react";
+import { ReactSortable } from "react-sortablejs";
+import { SketchPicker } from "react-color";
interface ImageItem {
- id: number;
- url: string;
+ id: number;
+ url: string;
}
interface TierProps {
- color: string;
- name: string;
- onDelete: () => void;
+ color: string;
+ name: string;
+ onDelete: () => void;
}
const Tier: React.FC = ({ color, name, onDelete }) => {
- const [images, setImages] = useState([]);
- const [editedColor, setEditedColor] = useState(color);
- const [editedName, setEditedName] = useState(name);
- const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
- const [contextMenuPosition, setContextMenuPosition] = useState({ left: 0, top: 0 });
-
- const contextMenuRef = useRef(null);
-
- useEffect(() => {
- setEditedColor(color);
- }, [color]);
-
- useEffect(() => {
- setEditedName(name);
- }, [name]);
-
- useEffect(() => {
- const handleOutsideClick = (e: MouseEvent) => {
- if (
- isContextMenuOpen &&
- contextMenuRef.current &&
- !contextMenuRef.current.contains(e.target as Node)
- ) {
- handleCloseContextMenu();
- }
- };
-
- window.addEventListener('click', handleOutsideClick);
-
- return () => {
- window.removeEventListener('click', handleOutsideClick);
- };
- }, [isContextMenuOpen]);
-
- const handleColorChange = (newColor: any) => {
- setEditedColor(newColor.hex);
- };
-
- const handleNameChange = (event: React.ChangeEvent) => {
- setEditedName(event.target.value);
- };
-
- const handleContextMenu = (e: React.MouseEvent) => {
- e.preventDefault();
- setIsContextMenuOpen(true);
- setContextMenuPosition({ left: e.clientX, top: e.clientY });
- };
-
- const handleCloseContextMenu = () => {
- setIsContextMenuOpen(false);
- };
-
- const handleDeleteTier = () => {
- onDelete();
- handleCloseContextMenu();
- };
-
- return (
-
-
-
- {images.map((image) => (
-
-
- {isContextMenuOpen && (
-
- )}
-
([]);
+ const [editedColor, setEditedColor] = useState(color);
+ const [editedName, setEditedName] = useState(name);
+ const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
+ const [contextMenuPosition, setContextMenuPosition] = useState({
+ left: 0,
+ top: 0
+ });
+
+ const contextMenuRef = useRef(null);
+
+ useEffect(() => {
+ setEditedColor(color);
+ }, [color]);
+
+ useEffect(() => {
+ setEditedName(name);
+ }, [name]);
+
+ useEffect(() => {
+ const handleOutsideClick = (e: MouseEvent) => {
+ if (
+ isContextMenuOpen &&
+ contextMenuRef.current &&
+ !contextMenuRef.current.contains(e.target as Node)
+ ) {
+ handleCloseContextMenu();
+ }
+ };
+
+ window.addEventListener("click", handleOutsideClick);
+
+ return () => {
+ window.removeEventListener("click", handleOutsideClick);
+ };
+ }, [isContextMenuOpen]);
+
+ const handleColorChange = (newColor: any) => {
+ setEditedColor(newColor.hex);
+ };
+
+ const handleNameChange = (event: React.ChangeEvent) => {
+ setEditedName(event.target.value);
+ };
+
+ const handleContextMenu = (e: React.MouseEvent) => {
+ e.preventDefault();
+ setIsContextMenuOpen(true);
+ setContextMenuPosition({ left: e.clientX, top: e.clientY });
+ };
+
+ const handleCloseContextMenu = () => {
+ setIsContextMenuOpen(false);
+ };
+
+ const handleDeleteTier = () => {
+ onDelete();
+ handleCloseContextMenu();
+ };
+
+ return (
+
+
+
+ {images.map((image) => (
+
+
+ {isContextMenuOpen && (
+
+ )}
+
- {tiers.map((tier, index) => (
- deleteTier(index)}
- />
- ))}
-
- +
-
+ {tiers.map((tier, index) => (
+ deleteTier(index)}
+ />
+ ))}
+
+
+ +
+
+ 
- ))}
-