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 committed by Triston Armstrong
parent c364996229
commit 3d61f28aa0
Signed by: tristonarmstrong
GPG Key ID: A23B48AE45EB6EFE
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

@ -10,6 +10,7 @@ import { Logo } from "./Logo"
import { useThemeDetector } from "../utils/useThemeDetector"
import { isTheme } from "../utils/isTheme"
import { TextItem } from "./TextItem"
import texts from "../signals/texts"
export default function InfiniteCanvas() {
const containerRef = useRef<HTMLDivElement>(null)
@ -38,6 +39,7 @@ export default function InfiniteCanvas() {
window.addEventListener("scrollend", _updatePosition)
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 >
)