(feat): make text appear on screen and minimap

Merge pull request 'add support for dark/light modes' (#1 ) from feat/dark-light-modes into main
Reviewed-on: https://git.tristonarmstrong.com/Klectr/KSlab/pulls/1
2024-10-06 23:36:11 -04:00 · 2024-10-07 03:31:27 +00:00 · 2024-10-06 23:30:20 -04:00
14 changed files with 249 additions and 38 deletions
--- a/index.html
+++ b/index.html
@ -3,6 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
    <title>KlectrTemplate</title>
  </head>

--- a/src/components/ImageCard.tsx
+++ b/src/components/ImageCard.tsx
@ -4,6 +4,7 @@ import { useDebounce } from "../utils/useDebounce"
 import { LayerEnum } from "../utils/enums"
 import images, { ImageCardType } from "../signals/images"
 import { updateLocalStorage } from "../utils/localStorage"
+import { isTheme } from "../utils/isTheme"

 namespace ImageCard {
  export interface ImageCardProps {
@ -90,7 +91,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
  return (
    <div
      onmousedown={_handleMouseDown}
-      className="select-none transition flex flex-col justify-stretch shadow-lg rounded border border-[#3c3c3c] absolute"
+      className="select-none transition flex flex-col justify-stretch shadow-md rounded border border-[#1c1c1c] absolute"
      style={{
        zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`,
        top: `${item.position.y}px`,
@ -104,7 +105,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
        backgroundPosition: 'center'
      }}
    >
-      <button className="flex justify-center items-center hover:bg-blue-500 w-5 h-5 text-white text-md absolute right-0 top-0" onclick={(_e: Event) => {
+      <button className="flex justify-center items-center hover:bg-blue-500 rounded w-5 h-5 dark:text-[#777] dark:hover:text-white text-white text-md absolute right-0 top-0" onclick={(_e: Event) => {
        ImagesSignal.default.removeImage(item.id)
        ImagesSignal.default.images.notify()
        debounceLSUpdate()
@ -128,7 +129,7 @@ function ExpandIcon({ cb }: {
      height="24"
      viewBox="0 0 24 24"
      fill="none"
-      stroke="#333"
+      stroke={isTheme('dark') ? "#777" : "#999"}
      stroke-width="1"
      stroke-linecap="round"
      stroke-linejoin="round"
--- a/src/components/InfinateCanvas.tsx
+++ b/src/components/InfinateCanvas.tsx
@ -1,11 +1,13 @@
 import { useRef, useEffect } from "kaioken"
-import { ImagesSignal, NotesSigal, canvasDimentsion } from "../signals"
+import { ImagesSignal, NotesSigal, TextSignal, 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"
+import { isTheme } from "../utils/isTheme"
+import { TextItem } from "./TextItem"

 export default function InfiniteCanvas() {
  const containerRef = useRef<HTMLDivElement>(null)
@ -42,13 +44,13 @@ export default function InfiniteCanvas() {
        className="h-screen w-full absolute top-0 left-0"
      >
        <div
-          className="absolute top-0 left-0"
+          className="dark:bg-black absolute top-0 left-0"
          ref={containerRef}
          style={{
            width: `${canvasDimentsion.value.width}px`,
            height: `${canvasDimentsion.value.width}px`,
            backgroundSize: "30px 30px",
-            backgroundImage: "radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px)",
+            backgroundImage: `radial-gradient(circle, rgba(${isTheme('dark') ? '255, 255, 255, 0.2' : '0, 0, 0, 0.2'}) 1px, transparent 1px)`,
          }}>
          {Object.keys(NotesSigal.default.notes.value).map((itemKey: string) => {
            const item = NotesSigal.default.notes.value[itemKey]
@ -63,6 +65,14 @@ export default function InfiniteCanvas() {
              <ImageCard key={itemKey} data={item} />
            )
          })}
+
+          {Object.keys(TextSignal.default.texts.value).map((itemKey: string) => {
+            const item = TextSignal.default.texts.value[itemKey]
+            return (
+              <TextItem key={itemKey} data={item} />
+            )
+          })}
+
        </div>
      </div>
    </>
--- a/src/components/MiniMap.tsx
+++ b/src/components/MiniMap.tsx
@ -3,6 +3,7 @@ import notes, { NoteCardType } from "../signals/notes"
 import { canvasDimentsion } from "../signals"
 import { LayerEnum } from "../utils/enums"
 import images, { ImageCardType } from "../signals/images"
+import texts from "../signals/texts"

 const _MAP_OFFSET = 20
 const _MAP_SCALE_FACTOR = 10
@ -34,15 +35,14 @@ export function MiniMap() {


  return (
-    <div ref={el} style={{
-      position: 'fixed',
-      backgroundColor: '#ffffff11',
-      width: `${width}px`,
-      height: `${height}px`,
-      translate: `${xPos}px ${yPos}px`,
-      zIndex: `${LayerEnum.MINIMAP}`,
-      borderRadius: '4px'
-    }}>
+    <div
+      className="dark:bg-[#ffffff11] bg-[#0001] fixed rounded"
+      ref={el} style={{
+        width: `${width}px`,
+        height: `${height}px`,
+        translate: `${xPos}px ${yPos}px`,
+        zIndex: `${LayerEnum.MINIMAP}`,
+      }}>

      {Object.keys(images.images.value).map((imageKey: ImageCardType['id']) => {
        const image = images.images.value[imageKey]
@ -57,16 +57,13 @@ export function MiniMap() {
        }

        return (
-          <div ref={el} className={"bg-green-500 hover:bg-blue-500 cursor-pointer"}
+          <div ref={el} className={"absolute dark:bg-green-500 bg-green-300 dark:hover:bg-blue-500 hover:bg-blue-300 cursor-pointer border dark:border-[#222] border-green-500 rounded"}
            onclick={_handleItemClick}
            style={{
-              position: 'absolute',
              width: `${image.dimensions.w / _MAP_SCALE_FACTOR}px`,
              height: `${image.dimensions.h / _MAP_SCALE_FACTOR}px`,
              top: `${(image.position.y / _MAP_SCALE_FACTOR)}px`,
              left: `${(image.position.x / _MAP_SCALE_FACTOR)}px`,
-              border: '1px solid #222',
-              borderRadius: '2px',
              zIndex: `${LayerEnum.MINIMAP + 1}`
            }}
          ></div>
@ -86,14 +83,40 @@ export function MiniMap() {
        }

        return (
-          <div className={"bg-gray-500 hover:bg-blue-500 cursor-pointer"}
+          <div className={"absolute dark:bg-gray-500 bg-gray-300 hover:bg-blue-500 cursor-pointer border dark:border-[#222] border-gray-500 rounded"}
            onclick={_handleItemClick}
            style={{
-              position: 'absolute',
              width: `${note.dimensions.w / _MAP_SCALE_FACTOR}px`,
              height: `${note.dimensions.h / _MAP_SCALE_FACTOR}px`,
              top: `${(note.position.y / _MAP_SCALE_FACTOR)}px`,
              left: `${(note.position.x / _MAP_SCALE_FACTOR)}px`,
+              zIndex: `${LayerEnum.MINIMAP + 1}`
+            }}
+          ></div>
+        )
+      })}
+
+      {Object.keys(texts.texts.value).map((textKey: textCardType['id']) => {
+        const text = texts.texts.value[textKey]
+        const el = useRef(null)
+
+        function _handleItemClick(_e: MouseEvent) {
+          window.scrollTo({
+            left: text.position.x - ((viewportWidth / 2) - (text.dimensions.w / 2)),
+            top: text.position.y - ((viewportHeight / 2) - (text.dimensions.h / 2)),
+            behavior: 'smooth'
+          })
+        }
+
+        return (
+          <div ref={el} className={"bg-indigo-500 hover:bg-blue-500 cursor-pointer"}
+            onclick={_handleItemClick}
+            style={{
+              position: 'absolute',
+              width: `${text.dimensions.w / _MAP_SCALE_FACTOR}px`,
+              height: `${text.dimensions.h / _MAP_SCALE_FACTOR}px`,
+              top: `${(text.position.y / _MAP_SCALE_FACTOR)}px`,
+              left: `${(text.position.x / _MAP_SCALE_FACTOR)}px`,
              border: '1px solid #222',
              borderRadius: '2px',
              zIndex: `${LayerEnum.MINIMAP + 1}`
@ -103,16 +126,13 @@ export function MiniMap() {
      })}

      <div
-        className={'bg-blue-200 bg-opacity-10'}
+        className={'absolute bg-blue-200 bg-opacity-10 border dark:border-blue-800 border-blue-500 bg-blue-500 rounded'}
        style={{
-          position: 'absolute',
          width: `${viewportWidth / _MAP_SCALE_FACTOR}px`,
          height: `${viewportHeight / _MAP_SCALE_FACTOR}px`,
          top: `${scrollY.value / _MAP_SCALE_FACTOR}px`,
          left: `${scrollX.value / _MAP_SCALE_FACTOR}px`,
-          border: '1px solid #777',
-          zIndex: `${LayerEnum.MINIMAP}`,
-          borderRadius: '2px'
+          zIndex: `${LayerEnum.MINIMAP * 1000}`,
        }}></div>
    </div >
  )
--- a/src/components/NoteCard.tsx
+++ b/src/components/NoteCard.tsx
@ -3,6 +3,7 @@ import { NotesSigal, focusedItem } from "../signals"
 import { useDebounce } from "../utils/useDebounce"
 import notes, { NoteCardType } from "../signals/notes"
 import { LayerEnum } from "../utils/enums"
+import { isTheme } from "../utils/isTheme"

 namespace NoteCard {
  export interface NoteCardProps {
@ -88,31 +89,30 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
  return (
    <div
      onmousedown={() => focusedItem.value = itemKey}
-      className="select-none transition flex flex-col justify-stretch shadow-lg rounded border border-[#3c3c3c] absolute"
+      className="text-[#333] dark:bg-[#111] dark:border-[#1c1c1c] bg-[#eee] select-none transition flex flex-col justify-stretch shadow-md rounded border border-[#ddd] absolute"
      style={{
        zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`,
        width: `${item.dimensions.w}px`,
        height: `${item.dimensions.h}px`,
        top: `${item.position.y}px`,
        left: `${item.position.x}px`,
-        backgroundColor: '#181818',
      }}
    >
      <div className="flex-1 flex flex-col gap-1">
        <div className="px-2 flex justify-between items-center cursor-move" onmousedown={_handleMouseDown}>
          <div style={{
            opacity: saved.value ? '0' : '100'
-          }} className={`rounded-full w-1 h-1 bg-white`}></div>
-          <button className="text-md" onclick={(_e: Event) => {
+          }} className={`rounded-full w-1 h-1 dark:bg-white bg-green-500`}></div>
+          <button className="text-md dark:text-[#777] text-black" onclick={(_e: Event) => {
            NotesSigal.default.removeNote(item.id)
            NotesSigal.default.notes.notify()
            updateLocalStorage()
          }}>x</button>
        </div>
-        <hr className="border border-[#3c3c3c]" />
+        <hr className="border dark:border-[#1c1c1c] border-[#ddd]" />
        <textarea
          placeholder={"Todo: put some note here"}
-          className="flex resize-none px-2 w-full h-full bg-transparent resize-none focus:outline-none text-gray-300"
+          className="flex resize-none px-2 w-full h-full bg-transparent resize-none focus:outline-none dark:text-gray-300"
          value={item.contents}
          onkeypress={() => { saved.value = false }}
          onchange={(e) => {
@ -142,7 +142,7 @@ function ExpandIcon({ cb }: {
      height="24"
      viewBox="0 0 24 24"
      fill="none"
-      stroke="#333"
+      stroke={isTheme('dark') ? "#777" : "#999"}
      stroke-width="1"
      stroke-linecap="round"
      stroke-linejoin="round"
--- a/src/components/TextItem.tsx
+++ b/src/components/TextItem.tsx
@ -0,0 +1,108 @@
+import { signal, useRef } from "kaioken"
+import { TextSignal, focusedItem } from "../signals"
+import { useDebounce } from "../utils/useDebounce"
+import texts, { TextCardType } from "../signals/texts"
+import { LayerEnum } from "../utils/enums"
+
+namespace TextItem {
+  export interface TextCardProps {
+    key: TextCardType['id']
+    data: TextCardType
+  }
+}
+
+export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
+  const saved = signal(true)
+  const pressed = signal(false)
+  const newX = useRef(0)
+  const newY = useRef(0)
+  const offsetX = useRef(0)
+  const offsetY = useRef(0)
+  const initialResizeX = useRef(0)
+  const initialResizeY = useRef(0)
+
+  const { debounce } = useDebounce()
+
+  function updateLocalStorage(time?: number) {
+    debounce(() => {
+      localStorage.setItem("texts", JSON.stringify(texts.texts.value))
+    }, time)
+  }
+
+  function _handleMouseMove(e: MouseEvent) {
+    e.preventDefault()
+    if (!pressed.value) return
+
+    newX.current = e.pageX - offsetX.current
+    newY.current = e.pageY - offsetY.current
+    const newPos = { x: newX.current, y: newY.current }
+
+    TextSignal.default.updateTextProperty(itemKey, 'position', newPos)
+    updateLocalStorage()
+  }
+
+  function _handleMouseUp(e: MouseEvent) {
+    e.preventDefault()
+    pressed.value = false
+    window.removeEventListener('mousemove', _handleMouseMove)
+    window.removeEventListener('mouseup', _handleMouseUp)
+  }
+
+  function _handleMouseDown(e: MouseEvent) {
+    e.preventDefault()
+    offsetX.current = e.offsetX
+    offsetY.current = e.offsetY
+    pressed.value = true
+    window.addEventListener('mousemove', _handleMouseMove)
+    window.addEventListener('mouseup', _handleMouseUp)
+  }
+
+  function _handleResizeMove(e: MouseEvent) {
+    const { pageX, pageY } = e
+    const [newX, newY] = [initialResizeX.current - pageX, initialResizeY.current - pageY]
+
+    const newW = -newX + item.dimensions.w
+    const newH = -newY + item.dimensions.h
+    const newDim = { w: newW, h: newH }
+
+    TextSignal.default.updateTextProperty(itemKey, 'dimensions', newDim)
+    TextSignal.default.texts.notify()
+  }
+
+
+  function _handleResizeMouseDown(e: MouseEvent) {
+    initialResizeX.current = e.pageX
+    initialResizeY.current = e.pageY
+    pressed.value = true
+    window.addEventListener('mousemove', _handleResizeMove)
+    window.addEventListener('mouseup', _handleResizeMouseUp)
+  }
+
+  function _handleResizeMouseUp() {
+    pressed.value = false
+    updateLocalStorage()
+    window.removeEventListener('mousemove', _handleResizeMove)
+    window.removeEventListener('mouseup', _handleResizeMouseUp)
+  }
+
+  return (
+    <div
+      onmousedown={() => focusedItem.value = itemKey}
+      className="select-none transition flex flex-col justify-stretch shadow-lg rounded border border-[#3c3c3c] absolute border-dashed"
+      style={{
+        zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`,
+        width: `${item.dimensions.w}px`,
+        height: `${item.dimensions.h}px`,
+        top: `${item.position.y}px`,
+        left: `${item.position.x}px`,
+      }}
+    >
+      <svg viewBox="0 0 56 18">
+        <text x="0" y="15" fill={'white'}>{item.contents}</text>
+      </svg>
+
+    </div >
+
+  )
+}
+
--- a/src/components/cardSelector/CardSelector.tsx
+++ b/src/components/cardSelector/CardSelector.tsx
@ -10,7 +10,7 @@ export function CardSelector() {
  return (
    <div
      ref={containerRef}
-      className="z-50 flex gap-1 border border-[#9c9c9c] rounded-full fixed px-4 bg-[#181818] top-2 py-1 shadow-xl"
+      className="z-50 flex gap-1 border dark:border-[#3c3c3c] border-[#ddd] rounded-full fixed px-4 dark:bg-[#222] bg-[#eee] top-2 py-1 shadow-md"
      style={{
        left: `${window.innerWidth / 2 - (containerRef.current?.getBoundingClientRect().width ?? 1) / 2}px`
      }}>
--- a/src/components/cardSelector/TextButton.tsx
+++ b/src/components/cardSelector/TextButton.tsx
@ -1,9 +1,30 @@
+import { TextSignal } from "../../signals";
+import texts from "../../signals/texts";
+import { updateLocalStorage } from "../../utils/localStorage";
 import { defaultClassName } from "./utils";

 export function TextButton() {

+  function _handleClick(e: MouseEvent) {
+    TextSignal.default.addText({
+      type: "text",
+      title: "New Note",
+      contents: "todo: fill me",
+      position: {
+        x: e.pageX - 100,
+        y: e.pageY + (window.innerHeight / 2) - 100
+      },
+      dimensions: {
+        w: 200,
+        h: 100
+      }
+    })
+    updateLocalStorage("text", texts.texts.value)
+  }
+
  return (
    <svg
+      onclick={_handleClick}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
--- a/src/signals/index.ts
+++ b/src/signals/index.ts
@ -6,3 +6,4 @@ export const canvasDimentsion = signal({ width: 3000, height: 3000 })

 export * as NotesSigal from "./notes"
 export * as ImagesSignal from "./images"
+export * as TextSignal from "./texts"
--- a/src/signals/texts.ts
+++ b/src/signals/texts.ts
@ -0,0 +1,46 @@
+import { signal } from "kaioken"
+import { Card } from "../types"
+import { focusedItem } from "."
+
+export type TextCardType = Card<"text">
+
+const texts = signal<Record<TextCardType["id"], TextCardType>>({})
+
+function loadLocalStorage() {
+  texts.value = JSON.parse(localStorage.getItem("texts") ?? "{}")
+}
+
+function addText(data: Omit<TextCardType, "id">) {
+  const newCard = {
+    ...data,
+    id: crypto.randomUUID(),
+  }
+  texts.value[newCard.id] = newCard
+  texts.notify()
+  focusedItem.value = newCard.id
+}
+
+function removeText(id: TextCardType["id"]) {
+  delete texts.value[id]
+  texts.notify()
+}
+function updateTextProperty<K extends keyof TextCardType>(
+  id: TextCardType["id"],
+  property: K,
+  data: TextCardType[K]
+) {
+  const newData = {
+    ...texts.value[id],
+    [property]: data,
+  }
+  texts.value[id] = newData
+  texts.notify()
+}
+
+export default {
+  texts,
+  addText,
+  removeText,
+  updateTextProperty,
+  loadLocalStorage,
+}
--- a/src/styles.css
+++ b/src/styles.css
@ -23,11 +23,9 @@ html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
-  color: white;
 }

 body {
  margin: 0;
  padding: 0;
-  background-color: #111;
 }
--- a/src/types/Card.ts
+++ b/src/types/Card.ts
@ -1,4 +1,4 @@
-export type CardTypes = "note" | "image"
+export type CardTypes = "note" | "image" | "text"
 export type positionCoords = { x: number; y: number }
 export type dimensionCoords = { w: number; h: number }

--- a/src/utils/isTheme.ts
+++ b/src/utils/isTheme.ts
@ -0,0 +1,3 @@
+export function isTheme(value: "light" | "dark") {
+  return window.matchMedia(`(prefers-color-scheme: ${value})`).matches
+}
--- a/src/utils/localStorage.ts
+++ b/src/utils/localStorage.ts
@ -1,5 +1,7 @@
+import { CardTypes } from "../types"
+
 export function updateLocalStorage(
-  location: "notes" | "images",
+  location: CardTypes,
  collection: unknown[] | Record<string, unknown>
 ) {
  localStorage.setItem(location, JSON.stringify(collection))
Author	SHA1	Message	Date
Triston Armstrong	95924ba49f	(feat): make text appear on screen and minimap	2024-10-06 23:36:11 -04:00
Triston Armstrong	0866f0b470	Merge pull request 'add support for dark/light modes' (#1 ) from feat/dark-light-modes into main Reviewed-on: https://git.tristonarmstrong.com/Klectr/KSlab/pulls/1	2024-10-07 03:31:27 +00:00
Triston Armstrong	39b13b6dcb	add support for dark/light modes	2024-10-06 23:30:20 -04:00