From 665e82ca439ef7130dcd9e0e8fc7372034e05edc Mon Sep 17 00:00:00 2001 From: Triston Armstrong Date: Sat, 5 Oct 2024 10:14:00 -0400 Subject: [PATCH] Add minimap so user can tell where they are on page --- bun.lockb | Bin 65734 -> 65734 bytes src/components/InfinateCanvas.tsx | 24 ++++----- src/components/MiniMap.tsx | 78 ++++++++++++++++++++++++++++++ src/components/NoteCard.tsx | 6 +-- src/signals/index.ts | 1 + src/styles.css | 4 ++ src/utils/enums.ts | 6 +++ 7 files changed, 103 insertions(+), 16 deletions(-) create mode 100644 src/components/MiniMap.tsx create mode 100644 src/utils/enums.ts diff --git a/bun.lockb b/bun.lockb index 89f8efa393fa9e7dd5a8b99ae3c44baf8f15e838..7d1fc9456bc82da15ce3589e257b0f6a2f25a6cc 100755 GIT binary patch delta 23 fcmX@s$a1WaWy9Nz9E@=WdWOb&2AjWbyyyo2bw>&0 delta 23 acmX@s$a1WaWy9Nz983%lu=(r8i+%uST?l6Y diff --git a/src/components/InfinateCanvas.tsx b/src/components/InfinateCanvas.tsx index d1b29c3..f3dbecd 100644 --- a/src/components/InfinateCanvas.tsx +++ b/src/components/InfinateCanvas.tsx @@ -1,32 +1,31 @@ -import { useState, useRef, useEffect } from "kaioken" +import { useRef, useEffect } from "kaioken" import { CardSelector } from "./CardSelector" -import { NotesSigal } from "../signals" +import { NotesSigal, canvasDimentsion } from "../signals" import { NoteCard } from "./NoteCard" import notes from "../signals/notes" +import { MiniMap } from "./MiniMap" export default function InfiniteCanvas() { - const [dimensions, setDimensions] = useState({ width: 3000, height: 3000 }) const containerRef = useRef(null) useEffect(() => { window.scrollTo({ - left: (dimensions.width / 2) - (window.innerWidth / 2), - top: (dimensions.height / 2) - (window.innerHeight / 2) + left: (canvasDimentsion.value.width / 2) - (window.innerWidth / 2), + top: (canvasDimentsion.value.height / 2) - (window.innerHeight / 2) }) const updateDimensions = () => { - setDimensions((prevDimensions) => ({ - width: Math.max(prevDimensions.width, window.innerWidth), - height: Math.max(prevDimensions.height, window.innerHeight), - })) + canvasDimentsion.value = { + width: Math.max(canvasDimentsion.value.width, window.innerWidth), + height: Math.max(canvasDimentsion.value.height, window.innerHeight), + } } updateDimensions() window.addEventListener("resize", updateDimensions) notes.loadLocalStorage() - return () => { window.removeEventListener("resize", updateDimensions) } @@ -35,6 +34,7 @@ export default function InfiniteCanvas() { return ( <> +
diff --git a/src/components/MiniMap.tsx b/src/components/MiniMap.tsx new file mode 100644 index 0000000..32adc85 --- /dev/null +++ b/src/components/MiniMap.tsx @@ -0,0 +1,78 @@ +import { signal, useEffect, useRef } from "kaioken" +import notes from "../signals/notes" +import { Card } from "../types/Card" +import { canvasDimentsion } from "../signals" +import { LayerEnum } from "../utils/enums" + +const _MAP_OFFSET = 20 +const _MAP_SCALE_FACTOR = 10 +const _defaults = { width: 0, height: 0 } + +export function MiniMap() { + const el = useRef(null) + const scrollX = signal(0) + const scrollY = signal(0) + + const elMeta = el.current?.getBoundingClientRect() ?? _defaults + const viewportWidth = window.innerWidth + const viewportHeight = window.innerHeight + const xPos = viewportWidth - elMeta?.width - _MAP_OFFSET + const yPos = viewportHeight - elMeta.height - _MAP_OFFSET + const width = canvasDimentsion.value.width / _MAP_SCALE_FACTOR + const height = canvasDimentsion.value.height / _MAP_SCALE_FACTOR + + useEffect(() => { + function _handleScroll(_e: Event) { + scrollX.value = window.scrollX + scrollY.value = window.scrollY + } + window.addEventListener('scroll', _handleScroll) + + return () => window.removeEventListener('scroll', _handleScroll) + }, []) + + return ( +
+ + + {Object.keys(notes.notes.value).map((noteKey: Card['id']) => { + const note = notes.notes.value[noteKey] + return ( +
+ ) + })} + +
+
+ ) +} + diff --git a/src/components/NoteCard.tsx b/src/components/NoteCard.tsx index 4878f70..e5ec7c4 100644 --- a/src/components/NoteCard.tsx +++ b/src/components/NoteCard.tsx @@ -3,7 +3,7 @@ import { NotesSigal, focusedItem } from "../signals" import { Card } from "../types" import { useDebounce } from "../utils/useDebounce" import notes from "../signals/notes" -import { save } from "@tauri-apps/api/dialog" +import { LayerEnum } from "../utils/enums" namespace NoteCard { export interface NoteCardProps { @@ -56,14 +56,12 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) { window.addEventListener('mouseup', _handleMouseUp) } - - return (
focusedItem.value = itemKey} className="select-none transition flex flex-col justify-stretch shadow-lg rounded border border-[#3c3c3c] absolute" style={{ - zIndex: focusedItem.value == itemKey ? '999' : '0', + zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`, width: `${item.dimensions.w}px`, height: `${item.dimensions.h}px`, top: `${item.position.y}px`, diff --git a/src/signals/index.ts b/src/signals/index.ts index dcf35ee..294444c 100644 --- a/src/signals/index.ts +++ b/src/signals/index.ts @@ -2,5 +2,6 @@ import { signal } from "kaioken" /** this should be an ID of some card/item */ export const focusedItem = signal(null) +export const canvasDimentsion = signal({ width: 3000, height: 3000 }) export * as NotesSigal from "./notes" diff --git a/src/styles.css b/src/styles.css index 10e9858..a20d023 100644 --- a/src/styles.css +++ b/src/styles.css @@ -8,6 +8,10 @@ box-sizing: border-box; } +*::-webkit-scrollbar { + display: none; +} + html { overflow: scroll; } diff --git a/src/utils/enums.ts b/src/utils/enums.ts new file mode 100644 index 0000000..3133c18 --- /dev/null +++ b/src/utils/enums.ts @@ -0,0 +1,6 @@ +export enum LayerEnum { + BACKGROUND, + CARD, + CARD_ELEVATED, + MINIMAP, +}