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

feat(text): fix bug trying to resize text moving element

Browse Source
This commit is contained in:
Triston Armstrong 2024-10-10 23:08:47 -04:00
parent 9e1cf46756
commit d6504ce0ce
Signed by: tristonarmstrong
GPG Key ID: A23B48AE45EB6EFE
2 changed files with 45 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ImageCard.tsx
View File

@ -88,6 +88,12 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
window.removeEventListener('mouseup', _handleResizeMouseUp)
}
function _handleClose(_e: Event) {
ImagesSignal.default.removeImage(item.id)
ImagesSignal.default.images.notify()
debounceLSUpdate()
}
return (
<div
onmousedown={_handleMouseDown}
@ -105,11 +111,9 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
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) => {
ImagesSignal.default.removeImage(item.id)
ImagesSignal.default.images.notify()
debounceLSUpdate()
}}>x</button>
<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={_handleClose}>x</button>
<ExpandIcon cb={_handleResizeMouseDown} />
</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) {
e.preventDefault()
focusedItem.value = itemKey
e.preventDefault()
e.stopPropagation()
offsetX.current = e.offsetX
offsetY.current = e.offsetY
pressed.value = true
@ -69,23 +70,24 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
function _handleResizeMouseDown(e: MouseEvent) {
e.stopPropagation()
initialResizeX.current = e.pageX
pressed.value = true
window.addEventListener('mousemove', _handleResizeMove)
window.addEventListener('mouseup', _handleResizeMouseUp)
}
function _handleResizeMouseUp() {
function _handleResizeMouseUp(_e: MouseEvent) {
pressed.value = false
updateLocalStorage()
window.removeEventListener('mousemove', _handleResizeMove)
window.removeEventListener('mouseup', _handleResizeMouseUp)
updateLocalStorage()
}
return (
<div
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={{
outline: `${focusedItem.value === item.id ? '1px solid' : ''}`,
fontSize: `${item.dimensions.w / 6}px`,
@ -94,30 +96,41 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
left: `${item.position.x}px`,
}}
>
<div className={'drop-shadow relative'}>
<div className={'select-none drop-shadow relative'}>
{item.contents}
</div>
<svg
onclick={_handleResizeMouseDown}
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-[-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>
<ExpandIcon cb={_handleResizeMouseDown} item={item} />
</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>
)
}