ershisan99/canvas-label
1
0
Fork 0
mirror of https://github.com/r2r90/canvas-label.git synced 2025-12-18 12:35:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: editable text working

Browse Source
This commit is contained in:
andres
2023-11-29 14:39:05 +01:00
parent 3c94fa37be
commit 35b7eaad23
3 changed files with 38 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/canvas.tsx
View File

@@ -5,14 +5,12 @@ import { useAppDispatch, useAppSelector } from "@/hooks";
import { import {
appSlice, appSlice,
deselectItem, deselectItem,
setStageScale,
StageItemType, StageItemType,
updateImage, updateImage,
updateText, updateText,
} from "@/store/app.slice"; } from "@/store/app.slice";
import { useEffect, useState, type MouseEvent } from "react"; import { useEffect, useState } from "react";
import { Toolbar } from "@/components/toolbar"; import { Toolbar } from "@/components/toolbar";
import type Konva from "konva";
import TransformableText from "@/components/transformable-text"; import TransformableText from "@/components/transformable-text";
const Canvas = () => { const Canvas = () => {
@@ -56,41 +54,41 @@ const Canvas = () => {
setSelected(!isEditing); setSelected(!isEditing);
} }
function toggleTransforming() { // function toggleTransforming() {
setIsTransforming(!isTransforming); // setIsTransforming(!isTransforming);
setSelected(!isTransforming); // setSelected(!isTransforming);
} // }
//
const handleWheel = (e: Konva.KonvaEventObject<WheelEvent>) => { // const handleWheel = (e: Konva.KonvaEventObject<WheelEvent>) => {
e.evt.preventDefault(); // e.evt.preventDefault();
//
const scaleBy = 1.02; // const scaleBy = 1.02;
const targetStage = e.target.getStage()!; // const targetStage = e.target.getStage()!;
const oldScale = targetStage.scaleX(); // const oldScale = targetStage.scaleX();
//
const mousePointTo = { // const mousePointTo = {
x: // x:
targetStage.getPointerPosition().x / oldScale - // targetStage.getPointerPosition().x / oldScale -
targetStage.x() / oldScale, // targetStage.x() / oldScale,
y: // y:
targetStage.getPointerPosition().y / oldScale - // targetStage.getPointerPosition().y / oldScale -
targetStage.y() / oldScale, // targetStage.y() / oldScale,
}; // };
//
const newScale = e.evt.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy; // const newScale = e.evt.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy;
//
dispatch( // dispatch(
setStageScale({ // setStageScale({
scale: newScale, // scale: newScale,
x: // x:
(targetStage.getPointerPosition().x / newScale - mousePointTo.x) * // (targetStage.getPointerPosition().x / newScale - mousePointTo.x) *
newScale, // newScale,
y: // y:
(targetStage.getPointerPosition().y / newScale - mousePointTo.y) * // (targetStage.getPointerPosition().y / newScale - mousePointTo.y) *
newScale, // newScale,
}), // }),
); // );
}; // };
return ( return (
<div className="relative flex h-full w-full flex-col items-center"> <div className="relative flex h-full w-full flex-col items-center">

2
src/components/editable-text-input.tsx
View File

@@ -37,7 +37,7 @@ export function EditableTextInput({
textAreaRef.current.scrollHeight + 3 + "px"; textAreaRef.current.scrollHeight + 3 + "px";
textAreaRef.current.focus(); textAreaRef.current.focus();
} }
}, []); }, [height]);
const style: CSSProperties = { const style: CSSProperties = {
textAlign: align, textAlign: align,
width: `${width}px`, width: `${width}px`,

2
src/components/transformable-image.tsx
View File

@@ -55,7 +55,7 @@ export const TransformableImage = ({
y: e.target.y(), y: e.target.y(),
}); });
}} }}
onTransformEnd={(e) => { onTransformEnd={() => {
const node = imageRef.current; const node = imageRef.current;
if (!node) return; if (!node) return;