From 5c5740bc73b149ea976270c23a1c7423b039abba Mon Sep 17 00:00:00 2001 From: Triston Armstrong Date: Sun, 6 Oct 2024 11:23:07 -0400 Subject: [PATCH] abstract card selector components and add export functionality --- src/components/InfinateCanvas.tsx | 2 +- src/components/cardSelector/CardSelector.tsx | 39 ++++++++++ src/components/cardSelector/ExportButton.tsx | 46 ++++++++++++ .../ImageCardButton.tsx} | 71 ++----------------- .../cardSelector/StickyNoteButton.tsx | 44 ++++++++++++ 5 files changed, 135 insertions(+), 67 deletions(-) create mode 100644 src/components/cardSelector/CardSelector.tsx create mode 100644 src/components/cardSelector/ExportButton.tsx rename src/components/{CardSelector.tsx => cardSelector/ImageCardButton.tsx} (53%) create mode 100644 src/components/cardSelector/StickyNoteButton.tsx diff --git a/src/components/InfinateCanvas.tsx b/src/components/InfinateCanvas.tsx index 5133c53..1bf5aa8 100644 --- a/src/components/InfinateCanvas.tsx +++ b/src/components/InfinateCanvas.tsx @@ -1,11 +1,11 @@ import { useRef, useEffect } from "kaioken" -import { CardSelector } from "./CardSelector" import { ImagesSignal, NotesSigal, canvasDimentsion } from "../signals" import { NoteCard } from "./NoteCard" import notes from "../signals/notes" import { MiniMap } from "./MiniMap" import { ImageCard } from "./ImageCard" import images from "../signals/images" +import { CardSelector } from "./cardSelector/CardSelector" export default function InfiniteCanvas() { const containerRef = useRef(null) diff --git a/src/components/cardSelector/CardSelector.tsx b/src/components/cardSelector/CardSelector.tsx new file mode 100644 index 0000000..f486059 --- /dev/null +++ b/src/components/cardSelector/CardSelector.tsx @@ -0,0 +1,39 @@ +import { useRef } from "kaioken" +import { StickyNoteButton } from "./StickyNoteButton" +import { ImageCardButton } from "./ImageCardButton" +import { ExportButton } from "./ExportButton" + +export function CardSelector() { + const containerRef = useRef(null) + + return ( +
+ + + + +
+ ) +} + +function Divider() { + return ( +
+ ) +} + + + + + + diff --git a/src/components/cardSelector/ExportButton.tsx b/src/components/cardSelector/ExportButton.tsx new file mode 100644 index 0000000..5793506 --- /dev/null +++ b/src/components/cardSelector/ExportButton.tsx @@ -0,0 +1,46 @@ +import { ImagesSignal, NotesSigal } from "../../signals" + +export function ExportButton() { + + function _handleExport() { + const { notes } = NotesSigal.default + const { images } = ImagesSignal.default + + const mergeState = { + ...notes.value, + ...images.value + } + const date = new Date().toDateString().split(' ').join('_') + const name = `Kslab_export_${date}.json` + const jsonData = JSON.stringify(mergeState) + const file = new File([jsonData], name, { + type: 'text/json' + }) + const url = URL.createObjectURL(file) + const a = document.createElement('a') + a.download = name + a.href = url + a.click() + } + + return ( + + + + + + ) +} diff --git a/src/components/CardSelector.tsx b/src/components/cardSelector/ImageCardButton.tsx similarity index 53% rename from src/components/CardSelector.tsx rename to src/components/cardSelector/ImageCardButton.tsx index e9ceea1..8e8e035 100644 --- a/src/components/CardSelector.tsx +++ b/src/components/cardSelector/ImageCardButton.tsx @@ -1,67 +1,8 @@ -import { useRef } from "kaioken" -import { ImagesSignal, NotesSigal } from "../signals" -import { updateLocalStorage } from "../utils/localStorage" -import notes from "../signals/notes" -import images from "../signals/images" +import { ImagesSignal } from "../../signals" +import images from "../../signals/images" +import { updateLocalStorage } from "../../utils/localStorage" -export function CardSelector() { - const containerRef = useRef(null) - - return ( -
- - -
- ) -} - -function StickyNote() { - function _handleClick(e: MouseEvent) { - NotesSigal.default.addNote({ - type: "note", - title: "New Note", - contents: "", - position: { - x: e.pageX - 100, - y: e.pageY + (window.innerHeight / 2) - 100 - }, - dimensions: { - w: 200, - h: 200 - } - }) - updateLocalStorage("notes", notes.notes.value) - } - - return ( - - ) - -} - -function Image() { +export function ImageCardButton() { function _handleClick(mouseEvent: MouseEvent) { const input = document.createElement('input') input.type = 'file' @@ -117,7 +58,7 @@ function Image() { stroke-width="2" stroke-linecap="round" stroke-linejoin="round" - className="w-5 h-5 text-[#9c9c9c] hover:text-[#ccc] transition-color duration-300"> + className="w-5 h-5 text-[#9c9c9c] hover:text-blue-500 transition-color duration-300"> ) } - - diff --git a/src/components/cardSelector/StickyNoteButton.tsx b/src/components/cardSelector/StickyNoteButton.tsx new file mode 100644 index 0000000..f342c30 --- /dev/null +++ b/src/components/cardSelector/StickyNoteButton.tsx @@ -0,0 +1,44 @@ +import { NotesSigal } from "../../signals" +import notes from "../../signals/notes" +import { updateLocalStorage } from "../../utils/localStorage" + +export function StickyNoteButton() { + function _handleClick(e: MouseEvent) { + NotesSigal.default.addNote({ + type: "note", + title: "New Note", + contents: "", + position: { + x: e.pageX - 100, + y: e.pageY + (window.innerHeight / 2) - 100 + }, + dimensions: { + w: 200, + h: 200 + } + }) + updateLocalStorage("notes", notes.notes.value) + } + + return ( + + ) + +}