-
Notifications
You must be signed in to change notification settings - Fork 3
/
rect.tsx
61 lines (56 loc) · 1.33 KB
/
rect.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React, { MouseEventHandler, useState } from "react";
import { Shape } from "../shared/shape";
import { Data } from "./data";
export function Rect({
data,
id,
highlight,
onMouseEnter,
onMouseLeave,
onMouseDown,
}: {
data: Data;
id: string;
highlight?: boolean;
onMouseEnter?: MouseEventHandler;
onMouseLeave?: MouseEventHandler;
onMouseDown?: MouseEventHandler;
}) {
const shape = data.useShapeByID(id);
if (!shape) {
return null;
}
console.log("Rendering rect", shape, highlight);
return (
<rect
{...{
style: getStyle(shape.blendMode, Boolean(highlight)),
transform: getTransformMatrix(shape),
x: shape.x,
y: shape.y,
width: shape.width,
height: shape.width,
fill: highlight ? "none" : shape.fill,
onMouseDown,
onMouseEnter,
onMouseLeave,
}}
/>
);
}
function getStyle(blendMode: string, highlight: boolean): any {
return {
mixBlendMode: blendMode,
outlineColor: "rgb(74,158,255)",
outlineStyle: highlight ? "solid" : "none",
outlineWidth: "2px",
};
}
function getTransformMatrix(shape: Shape): any {
if (!shape.rotate) {
return null;
}
let centerX = shape.width / 2 + shape.x;
let centerY = shape.height / 2 + shape.y;
return `rotate(${shape.rotate} ${centerX} ${centerY})`;
}