ershisan99/canvas-label
1
0
Fork 0
mirror of https://github.com/r2r90/canvas-label.git synced 2025-12-16 21:19:38 +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 {
appSlice,
deselectItem,
setStageScale,
StageItemType,
updateImage,
updateText,
} from "@/store/app.slice";
import { useEffect, useState, type MouseEvent } from "react";
import { useEffect, useState } from "react";
import { Toolbar } from "@/components/toolbar";
import type Konva from "konva";
import TransformableText from "@/components/transformable-text";
const Canvas = () => {
@@ -56,41 +54,41 @@ const Canvas = () => {
setSelected(!isEditing);
}
function toggleTransforming() {
setIsTransforming(!isTransforming);
setSelected(!isTransforming);
}
const handleWheel = (e: Konva.KonvaEventObject<WheelEvent>) => {
e.evt.preventDefault();
const scaleBy = 1.02;
const targetStage = e.target.getStage()!;
const oldScale = targetStage.scaleX();
const mousePointTo = {
x:
targetStage.getPointerPosition().x / oldScale -
targetStage.x() / oldScale,
y:
targetStage.getPointerPosition().y / oldScale -
targetStage.y() / oldScale,
};
const newScale = e.evt.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy;
dispatch(
setStageScale({
scale: newScale,
x:
(targetStage.getPointerPosition().x / newScale - mousePointTo.x) *
newScale,
y:
(targetStage.getPointerPosition().y / newScale - mousePointTo.y) *
newScale,
}),
);
};
// function toggleTransforming() {
// setIsTransforming(!isTransforming);
// setSelected(!isTransforming);
// }
//
// const handleWheel = (e: Konva.KonvaEventObject<WheelEvent>) => {
// e.evt.preventDefault();
//
// const scaleBy = 1.02;
// const targetStage = e.target.getStage()!;
// const oldScale = targetStage.scaleX();
//
// const mousePointTo = {
// x:
// targetStage.getPointerPosition().x / oldScale -
// targetStage.x() / oldScale,
// y:
// targetStage.getPointerPosition().y / oldScale -
// targetStage.y() / oldScale,
// };
//
// const newScale = e.evt.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy;
//
// dispatch(
// setStageScale({
// scale: newScale,
// x:
// (targetStage.getPointerPosition().x / newScale - mousePointTo.x) *
// newScale,
// y:
// (targetStage.getPointerPosition().y / newScale - mousePointTo.y) *
// newScale,
// }),
// );
// };
return (
<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.focus();
}
}, []);
}, [height]);
const style: CSSProperties = {
textAlign: align,
width: `${width}px`,

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

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