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

feat/text-support #9

Merged
tristonarmstrong merged 13 commits from feat/text-support into main 2024-10-12 11:19:11 +00:00
Conversation 0 Commits 13 Files Changed 15 +45 -28
2 changed files with 45 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d6504ce0ce - Show all commits

14
src/components/ImageCard.tsx
View File

@ -88,6 +88,12 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
window.removeEventListener('mouseup', _handleResizeMouseUp) window.removeEventListener('mouseup', _handleResizeMouseUp)
} }
function _handleClose(_e: Event) {
ImagesSignal.default.removeImage(item.id)
ImagesSignal.default.images.notify()
debounceLSUpdate()
}
return ( return (
<div <div
onmousedown={_handleMouseDown} onmousedown={_handleMouseDown}
@ -105,11 +111,9 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
backgroundPosition: 'center' backgroundPosition: 'center'
}} }}
> >
<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) => { <button
ImagesSignal.default.removeImage(item.id) 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"
ImagesSignal.default.images.notify() onclick={_handleClose}>x</button>
debounceLSUpdate()
}}>x</button>
<ExpandIcon cb={_handleResizeMouseDown} /> <ExpandIcon cb={_handleResizeMouseDown} />
</div > </div >

59
src/components/TextItem.tsx
View File

@ -47,8 +47,9 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
} }
function _handleMouseDown(e: MouseEvent) { function _handleMouseDown(e: MouseEvent) {
e.preventDefault()
focusedItem.value = itemKey focusedItem.value = itemKey
e.preventDefault()
e.stopPropagation()
offsetX.current = e.offsetX offsetX.current = e.offsetX
offsetY.current = e.offsetY offsetY.current = e.offsetY
pressed.value = true pressed.value = true
@ -69,23 +70,24 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
function _handleResizeMouseDown(e: MouseEvent) { function _handleResizeMouseDown(e: MouseEvent) {
e.stopPropagation()
initialResizeX.current = e.pageX initialResizeX.current = e.pageX
pressed.value = true pressed.value = true
window.addEventListener('mousemove', _handleResizeMove) window.addEventListener('mousemove', _handleResizeMove)
window.addEventListener('mouseup', _handleResizeMouseUp) window.addEventListener('mouseup', _handleResizeMouseUp)
} }
function _handleResizeMouseUp() { function _handleResizeMouseUp(_e: MouseEvent) {
pressed.value = false pressed.value = false
updateLocalStorage()
window.removeEventListener('mousemove', _handleResizeMove) window.removeEventListener('mousemove', _handleResizeMove)
window.removeEventListener('mouseup', _handleResizeMouseUp) window.removeEventListener('mouseup', _handleResizeMouseUp)
updateLocalStorage()
} }
return ( return (
<div <div
onmousedown={_handleMouseDown} onmousedown={_handleMouseDown}
className="px-4 select-none transition flex flex-col justify-stretch rounded absolute" className="px-4 transition flex flex-col justify-stretch rounded absolute"
style={{ style={{
outline: `${focusedItem.value === item.id ? '1px solid' : ''}`, outline: `${focusedItem.value === item.id ? '1px solid' : ''}`,
fontSize: `${item.dimensions.w / 6}px`, fontSize: `${item.dimensions.w / 6}px`,
@ -94,30 +96,41 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
left: `${item.position.x}px`, left: `${item.position.x}px`,
}} }}
> >
<div className={'drop-shadow relative'}> <div className={'select-none drop-shadow relative'}>
{item.contents} {item.contents}
</div> </div>
<svg
onclick={_handleResizeMouseDown}
xmlns="http://www.w3.org/2000/svg" <ExpandIcon cb={_handleResizeMouseDown} item={item} />
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className="h-4 w-4 absolute right-[-4px] bottom-[-4px] cursor-se-resize"
style={{
display: focusedItem.value === item.id ? 'unset' : 'none'
}}
>
<rect width="18" height="18" x="3" y="3" rx="2" />
</svg>
</div > </div >
) )
} }
function ExpandIcon({ cb, item }: {
cb: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined,
item: TextSignal.TextCardType
}) {
return (
<svg
onmousedown={cb}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className="h-4 w-4 absolute right-[-6px] bottom-[-6px] cursor-se-resize"
style={{
display: focusedItem.value === item.id ? 'unset' : 'none'
}}
>
<rect width="18" height="18" x="3" y="3" rx="2" />
</svg>
)
}