Klectr/KSlab
1
0
Fork 0
generated from Klectr/KTemplate
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on some text logic playing with ideas

Browse Source
This commit is contained in:
Triston Armstrong 2024-10-07 00:28:54 -04:00
parent 95924ba49f
commit 5b0b8c2224
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/InfinateCanvas.tsx
View File

@ -8,6 +8,7 @@ import images from "../signals/images"
import { CardSelector } from "./cardSelector/CardSelector"
import { isTheme } from "../utils/isTheme"
import { TextItem } from "./TextItem"
import texts from "../signals/texts"
export default function InfiniteCanvas() {
const containerRef = useRef<HTMLDivElement>(null)
@ -29,6 +30,7 @@ export default function InfiniteCanvas() {
window.addEventListener("resize", updateDimensions)
notes.loadLocalStorage()
images.loadLocalStorage()
texts.loadLocalStorage()
return () => {
window.removeEventListener("resize", updateDimensions)

14
src/components/TextItem.tsx
View File

@ -3,6 +3,7 @@ import { TextSignal, focusedItem } from "../signals"
import { useDebounce } from "../utils/useDebounce"
import texts, { TextCardType } from "../signals/texts"
import { LayerEnum } from "../utils/enums"
import { isTheme } from "../utils/isTheme"
namespace TextItem {
export interface TextCardProps {
@ -87,20 +88,19 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
return (
<div
onmousedown={() => focusedItem.value = itemKey}
className="select-none transition flex flex-col justify-stretch shadow-lg rounded border border-[#3c3c3c] absolute border-dashed"
onmousedown={_handleMouseDown}
className="select-none transition flex flex-col justify-stretch 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`,
height: `${item.dimensions.h + 100}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 className={'relative w-full h-full'}>
<p className={'w-full h-full'}>{item.contents}</p>
</div>
</div >
)