diff --git a/src/components/MiniMap.tsx b/src/components/MiniMap.tsx index 01b48bb..986b17d 100644 --- a/src/components/MiniMap.tsx +++ b/src/components/MiniMap.tsx @@ -3,7 +3,7 @@ import notes, { NoteCardType } from "../signals/notes" import { canvasDimentsion } from "../signals" import { LayerEnum } from "../utils/enums" import images, { ImageCardType } from "../signals/images" -import texts from "../signals/texts" +import texts, { TextCardType } from "../signals/texts" const _MAP_OFFSET = 20 const _MAP_SCALE_FACTOR = 10 @@ -112,7 +112,7 @@ export function MiniMap() { ) })} - {Object.keys(texts.texts.value).map((textKey: textCardType['id']) => { + {Object.keys(texts.texts.value).map((textKey: TextCardType['id']) => { const text = texts.texts.value[textKey] const el = useRef(null) @@ -129,12 +129,11 @@ export function MiniMap() { onclick={_handleItemClick} style={{ position: 'absolute', - width: `${text.dimensions.w / _MAP_SCALE_FACTOR}px`, - height: `${text.dimensions.h / _MAP_SCALE_FACTOR}px`, + width: `${300 / _MAP_SCALE_FACTOR}px`, + height: `${100 / _MAP_SCALE_FACTOR}px`, top: `${(text.position.y / _MAP_SCALE_FACTOR)}px`, left: `${(text.position.x / _MAP_SCALE_FACTOR)}px`, border: '1px solid #222', - borderRadius: '2px', zIndex: `${LayerEnum.MINIMAP + 1}` }} > diff --git a/src/components/TextItem.tsx b/src/components/TextItem.tsx index 1455343..1b198de 100644 --- a/src/components/TextItem.tsx +++ b/src/components/TextItem.tsx @@ -18,7 +18,6 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) { const offsetX = useRef(0) const offsetY = useRef(0) const initialResizeX = useRef(0) - const initialResizeY = useRef(0) const { debounce } = useDebounce() @@ -49,6 +48,7 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) { function _handleMouseDown(e: MouseEvent) { e.preventDefault() + focusedItem.value = itemKey offsetX.current = e.offsetX offsetY.current = e.offsetY pressed.value = true @@ -57,12 +57,11 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) { } function _handleResizeMove(e: MouseEvent) { - const { pageX, pageY } = e - const [newX, newY] = [initialResizeX.current - pageX, initialResizeY.current - pageY] + const { pageX } = e + const newX = initialResizeX.current - pageX const newW = -newX + item.dimensions.w - const newH = -newY + item.dimensions.h - const newDim = { w: newW, h: newH } + const newDim = { w: newW, h: 0 } TextSignal.default.updateTextProperty(itemKey, 'dimensions', newDim) TextSignal.default.texts.notify() @@ -71,7 +70,6 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) { function _handleResizeMouseDown(e: MouseEvent) { initialResizeX.current = e.pageX - initialResizeY.current = e.pageY pressed.value = true window.addEventListener('mousemove', _handleResizeMove) window.addEventListener('mouseup', _handleResizeMouseUp) @@ -87,18 +85,37 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) { return (
{item.contents}
+