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

make text typing work and save

Browse Source
This commit is contained in:
Triston Armstrong 2024-10-11 07:49:42 -04:00
parent 937d3a3a15
commit 4869efa8f8
Signed by: tristonarmstrong
GPG Key ID: A23B48AE45EB6EFE
1 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/TextItem.tsx
View File

@ -1,4 +1,4 @@
import { signal, useEffect, useRef } from "kaioken"
import { signal, useEffect, useLayoutEffect, useRef } from "kaioken"
import { TextSignal, focusedItem } from "../signals"
import { useDebounce } from "../utils/useDebounce"
import texts, { TextCardType } from "../signals/texts"
@ -14,6 +14,7 @@ namespace TextItem {
}
export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
const { debounce } = useDebounce()
const pressed = signal(false)
const newX = useRef(0)
const newY = useRef(0)
@ -21,8 +22,18 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
const offsetY = useRef(0)
const initialResizeX = useRef(0)
const elRef = useRef<HTMLDivElement>(null)
const pRef = useRef<HTMLParagraphElement>(null)
useEffect(() => {
const elDems = elRef.current?.getBoundingClientRect()
const elW = elDems?.width ?? 100
const elH = elDems?.height ?? 100
const newDems: Card<'texts'>['dimensions'] = { w: elW, h: elH }
TextSignal.default.updateTextProperty(itemKey, 'dimensions', newDems)
TextSignal.default.texts.notify()
}, [elRef.current, item.fontSize])
const { debounce } = useDebounce()
function updateLocalStorage(time?: number) {
debounce(() => {
@ -51,8 +62,6 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
function _handleMouseDown(e: MouseEvent) {
focusedItem.value = itemKey
e.preventDefault()
e.stopPropagation()
offsetX.current = e.offsetX
offsetY.current = e.offsetY
pressed.value = true
@ -67,17 +76,9 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
TextSignal.default.updateTextProperty(itemKey, 'fontSize', newFontSize)
TextSignal.default.texts.notify()
updateLocalStorage()
}
useEffect(() => {
const elDems = elRef.current?.getBoundingClientRect()
const elW = elDems?.width ?? 100
const elH = elDems?.height ?? 100
const newDems: Card<'texts'>['dimensions'] = { w: elW, h: elH }
TextSignal.default.updateTextProperty(itemKey, 'dimensions', newDems)
TextSignal.default.texts.notify()
}, [elRef.current, item.fontSize])
function _handleResizeMouseDown(e: MouseEvent) {
e.stopPropagation()
initialResizeX.current = e.pageX
@ -99,11 +100,22 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
TextSignal.default.texts.notify()
}
function _handleContentInput(e: InputEvent) {
console.log("event: ", e)
texts.updateTextProperty(itemKey, 'contents', (e.target as any).textContent)
updateLocalStorage()
}
useLayoutEffect(() => {
if (!pRef.current) return
pRef.current.textContent = item.contents
}, [])
return (
<div
ref={elRef}
onmousedown={_handleMouseDown}
className="px-4 transition flex flex-col justify-stretch rounded absolute"
className="transition flex flex-col justify-stretch rounded absolute"
style={{
outline: `${focusedItem.value === item.id ? '1px solid' : ''}`,
fontSize: `${item.fontSize / 6}px`,
@ -112,12 +124,13 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
left: `${item.position.x}px`,
}}
>
<div className={'select-none drop-shadow relative'}>
{item.contents}
<div className={'px-2 w-full select-none drop-shadow relative'}>
<p
ref={pRef}
oninput={_handleContentInput} contentEditable className={'inline-block px-2 w-full select-none drop-shadow relative'}></p>
</div>
<CloseIcon cb={_handleClose} item={item} />
<ExpandIcon cb={_handleResizeMouseDown} item={item} />
</div >