diff --git a/src/components/MiniMap.tsx b/src/components/MiniMap.tsx index fe618ac..c9c60bc 100644 --- a/src/components/MiniMap.tsx +++ b/src/components/MiniMap.tsx @@ -129,8 +129,8 @@ export function MiniMap() { onclick={_handleItemClick} style={{ position: 'absolute', - width: `${300 / _MAP_SCALE_FACTOR}px`, - height: `${100 / _MAP_SCALE_FACTOR}px`, + width: `${text.dimensions.w / _MAP_SCALE_FACTOR}px`, + height: `${text.dimensions.h / _MAP_SCALE_FACTOR}px`, top: `${(text.position.y / _MAP_SCALE_FACTOR)}px`, left: `${(text.position.x / _MAP_SCALE_FACTOR)}px`, border: '1px solid #222', diff --git a/src/components/TextItem.tsx b/src/components/TextItem.tsx index a12bc49..ef5afac 100644 --- a/src/components/TextItem.tsx +++ b/src/components/TextItem.tsx @@ -1,8 +1,9 @@ -import { signal, useRef } from "kaioken" +import { signal, useEffect, useRef } from "kaioken" import { TextSignal, focusedItem } from "../signals" import { useDebounce } from "../utils/useDebounce" import texts, { TextCardType } from "../signals/texts" import { LayerEnum } from "../utils/enums" +import { Card } from "../types" namespace TextItem { export interface TextCardProps { @@ -18,6 +19,7 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) { const offsetX = useRef(0) const offsetY = useRef(0) const initialResizeX = useRef(0) + const elRef = useRef(null) const { debounce } = useDebounce() @@ -60,14 +62,20 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) { function _handleResizeMove(e: MouseEvent) { const { pageX } = e const newX = initialResizeX.current - pageX + const newFontSize = Math.floor(-newX + item.fontSize) - const newW = -newX + item.dimensions.w - const newDim = { w: newW, h: 0 } - - TextSignal.default.updateTextProperty(itemKey, 'dimensions', newDim) + TextSignal.default.updateTextProperty(itemKey, 'fontSize', newFontSize) TextSignal.default.texts.notify() } + 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() @@ -86,11 +94,12 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) { return (
+export type TextCardType = Card<"texts"> & { + fontSize: number +} const texts = signal>({})