|
|
@@ -0,0 +1,581 @@
|
|
|
1
|
+import React from "react";
|
|
|
2
|
+import ReactDOM from "react-dom";
|
|
|
3
|
+import rough from "roughjs/bin/wrappers/rough";
|
|
|
4
|
+import { RoughCanvas } from "roughjs/bin/canvas";
|
|
|
5
|
+
|
|
|
6
|
+import "./styles.css";
|
|
|
7
|
+
|
|
|
8
|
+type ExcaliburElement = ReturnType<typeof newElement>;
|
|
|
9
|
+type ExcaliburTextElement = ExcaliburElement & {
|
|
|
10
|
+ type: "text";
|
|
|
11
|
+ font: string;
|
|
|
12
|
+ text: string;
|
|
|
13
|
+ measure: TextMetrics;
|
|
|
14
|
+};
|
|
|
15
|
+
|
|
|
16
|
+var elements = Array.of<ExcaliburElement>();
|
|
|
17
|
+
|
|
|
18
|
+function isInsideAnElement(x: number, y: number) {
|
|
|
19
|
+ return (element: ExcaliburElement) => {
|
|
|
20
|
+ const x1 = getElementAbsoluteX1(element);
|
|
|
21
|
+ const x2 = getElementAbsoluteX2(element);
|
|
|
22
|
+ const y1 = getElementAbsoluteY1(element);
|
|
|
23
|
+ const y2 = getElementAbsoluteY2(element);
|
|
|
24
|
+
|
|
|
25
|
+ return x >= x1 && x <= x2 && y >= y1 && y <= y2;
|
|
|
26
|
+ };
|
|
|
27
|
+}
|
|
|
28
|
+
|
|
|
29
|
+function newElement(type: string, x: number, y: number, width = 0, height = 0) {
|
|
|
30
|
+ const element = {
|
|
|
31
|
+ type: type,
|
|
|
32
|
+ x: x,
|
|
|
33
|
+ y: y,
|
|
|
34
|
+ width: width,
|
|
|
35
|
+ height: height,
|
|
|
36
|
+ isSelected: false,
|
|
|
37
|
+ draw(rc: RoughCanvas, context: CanvasRenderingContext2D) {}
|
|
|
38
|
+ };
|
|
|
39
|
+ return element;
|
|
|
40
|
+}
|
|
|
41
|
+
|
|
|
42
|
+function exportAsPNG({
|
|
|
43
|
+ exportBackground,
|
|
|
44
|
+ exportVisibleOnly,
|
|
|
45
|
+ exportPadding = 10
|
|
|
46
|
+}: {
|
|
|
47
|
+ exportBackground: boolean;
|
|
|
48
|
+ exportVisibleOnly: boolean;
|
|
|
49
|
+ exportPadding?: number;
|
|
|
50
|
+}) {
|
|
|
51
|
+ if (!elements.length) return window.alert("Cannot export empty canvas.");
|
|
|
52
|
+
|
|
|
53
|
+ // deselect & rerender
|
|
|
54
|
+
|
|
|
55
|
+ clearSelection();
|
|
|
56
|
+ drawScene();
|
|
|
57
|
+
|
|
|
58
|
+ // calculate visible-area coords
|
|
|
59
|
+
|
|
|
60
|
+ let subCanvasX1 = Infinity;
|
|
|
61
|
+ let subCanvasX2 = 0;
|
|
|
62
|
+ let subCanvasY1 = Infinity;
|
|
|
63
|
+ let subCanvasY2 = 0;
|
|
|
64
|
+
|
|
|
65
|
+ elements.forEach(element => {
|
|
|
66
|
+ subCanvasX1 = Math.min(subCanvasX1, getElementAbsoluteX1(element));
|
|
|
67
|
+ subCanvasX2 = Math.max(subCanvasX2, getElementAbsoluteX2(element));
|
|
|
68
|
+ subCanvasY1 = Math.min(subCanvasY1, getElementAbsoluteY1(element));
|
|
|
69
|
+ subCanvasY2 = Math.max(subCanvasY2, getElementAbsoluteY2(element));
|
|
|
70
|
+ });
|
|
|
71
|
+
|
|
|
72
|
+ // create temporary canvas from which we'll export
|
|
|
73
|
+
|
|
|
74
|
+ const tempCanvas = document.createElement("canvas");
|
|
|
75
|
+ const tempCanvasCtx = tempCanvas.getContext("2d")!;
|
|
|
76
|
+ tempCanvas.style.display = "none";
|
|
|
77
|
+ document.body.appendChild(tempCanvas);
|
|
|
78
|
+ tempCanvas.width = exportVisibleOnly
|
|
|
79
|
+ ? subCanvasX2 - subCanvasX1 + exportPadding * 2
|
|
|
80
|
+ : canvas.width;
|
|
|
81
|
+ tempCanvas.height = exportVisibleOnly
|
|
|
82
|
+ ? subCanvasY2 - subCanvasY1 + exportPadding * 2
|
|
|
83
|
+ : canvas.height;
|
|
|
84
|
+
|
|
|
85
|
+ if (exportBackground) {
|
|
|
86
|
+ tempCanvasCtx.fillStyle = "#FFF";
|
|
|
87
|
+ tempCanvasCtx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
88
|
+ }
|
|
|
89
|
+
|
|
|
90
|
+ // copy our original canvas onto the temp canvas
|
|
|
91
|
+ tempCanvasCtx.drawImage(
|
|
|
92
|
+ canvas, // source
|
|
|
93
|
+ exportVisibleOnly // sx
|
|
|
94
|
+ ? subCanvasX1 - exportPadding
|
|
|
95
|
+ : 0,
|
|
|
96
|
+ exportVisibleOnly // sy
|
|
|
97
|
+ ? subCanvasY1 - exportPadding
|
|
|
98
|
+ : 0,
|
|
|
99
|
+ exportVisibleOnly // sWidth
|
|
|
100
|
+ ? subCanvasX2 - subCanvasX1 + exportPadding * 2
|
|
|
101
|
+ : canvas.width,
|
|
|
102
|
+ exportVisibleOnly // sHeight
|
|
|
103
|
+ ? subCanvasY2 - subCanvasY1 + exportPadding * 2
|
|
|
104
|
+ : canvas.height,
|
|
|
105
|
+ 0, // dx
|
|
|
106
|
+ 0, // dy
|
|
|
107
|
+ exportVisibleOnly ? tempCanvas.width : canvas.width, // dWidth
|
|
|
108
|
+ exportVisibleOnly ? tempCanvas.height : canvas.height // dHeight
|
|
|
109
|
+ );
|
|
|
110
|
+
|
|
|
111
|
+ // create a temporary <a> elem which we'll use to download the image
|
|
|
112
|
+ const link = document.createElement("a");
|
|
|
113
|
+ link.setAttribute("download", "excalibur.png");
|
|
|
114
|
+ link.setAttribute("href", tempCanvas.toDataURL("image/png"));
|
|
|
115
|
+ link.click();
|
|
|
116
|
+
|
|
|
117
|
+ // clean up the DOM
|
|
|
118
|
+ link.remove();
|
|
|
119
|
+ if (tempCanvas !== canvas) tempCanvas.remove();
|
|
|
120
|
+}
|
|
|
121
|
+
|
|
|
122
|
+function rotate(x1: number, y1: number, x2: number, y2: number, angle: number) {
|
|
|
123
|
+ // 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)cos𝜃−(𝑎𝑦−𝑐𝑦)sin𝜃+𝑐𝑥
|
|
|
124
|
+ // 𝑎′𝑦=(𝑎𝑥−𝑐𝑥)sin𝜃+(𝑎𝑦−𝑐𝑦)cos𝜃+𝑐𝑦.
|
|
|
125
|
+ // https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
|
|
|
126
|
+ return [
|
|
|
127
|
+ (x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle) + x2,
|
|
|
128
|
+ (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2
|
|
|
129
|
+ ];
|
|
|
130
|
+}
|
|
|
131
|
+
|
|
|
132
|
+// Casting second argument (DrawingSurface) to any,
|
|
|
133
|
+// because it is requred by TS definitions and not required at runtime
|
|
|
134
|
+var generator = rough.generator(null, null as any);
|
|
|
135
|
+
|
|
|
136
|
+function isTextElement(
|
|
|
137
|
+ element: ExcaliburElement
|
|
|
138
|
+): element is ExcaliburTextElement {
|
|
|
139
|
+ return element.type === "text";
|
|
|
140
|
+}
|
|
|
141
|
+
|
|
|
142
|
+function generateDraw(element: ExcaliburElement) {
|
|
|
143
|
+ if (element.type === "selection") {
|
|
|
144
|
+ element.draw = (rc, context) => {
|
|
|
145
|
+ const fillStyle = context.fillStyle;
|
|
|
146
|
+ context.fillStyle = "rgba(0, 0, 255, 0.10)";
|
|
|
147
|
+ context.fillRect(element.x, element.y, element.width, element.height);
|
|
|
148
|
+ context.fillStyle = fillStyle;
|
|
|
149
|
+ };
|
|
|
150
|
+ } else if (element.type === "rectangle") {
|
|
|
151
|
+ const shape = generator.rectangle(0, 0, element.width, element.height);
|
|
|
152
|
+ element.draw = (rc, context) => {
|
|
|
153
|
+ context.translate(element.x, element.y);
|
|
|
154
|
+ rc.draw(shape);
|
|
|
155
|
+ context.translate(-element.x, -element.y);
|
|
|
156
|
+ };
|
|
|
157
|
+ } else if (element.type === "ellipse") {
|
|
|
158
|
+ const shape = generator.ellipse(
|
|
|
159
|
+ element.width / 2,
|
|
|
160
|
+ element.height / 2,
|
|
|
161
|
+ element.width,
|
|
|
162
|
+ element.height
|
|
|
163
|
+ );
|
|
|
164
|
+ element.draw = (rc, context) => {
|
|
|
165
|
+ context.translate(element.x, element.y);
|
|
|
166
|
+ rc.draw(shape);
|
|
|
167
|
+ context.translate(-element.x, -element.y);
|
|
|
168
|
+ };
|
|
|
169
|
+ } else if (element.type === "arrow") {
|
|
|
170
|
+ const x1 = 0;
|
|
|
171
|
+ const y1 = 0;
|
|
|
172
|
+ const x2 = element.width;
|
|
|
173
|
+ const y2 = element.height;
|
|
|
174
|
+
|
|
|
175
|
+ const size = 30; // pixels
|
|
|
176
|
+ const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
|
|
|
177
|
+ // Scale down the arrow until we hit a certain size so that it doesn't look weird
|
|
|
178
|
+ const minSize = Math.min(size, distance / 2);
|
|
|
179
|
+ const xs = x2 - ((x2 - x1) / distance) * minSize;
|
|
|
180
|
+ const ys = y2 - ((y2 - y1) / distance) * minSize;
|
|
|
181
|
+
|
|
|
182
|
+ const angle = 20; // degrees
|
|
|
183
|
+ const [x3, y3] = rotate(xs, ys, x2, y2, (-angle * Math.PI) / 180);
|
|
|
184
|
+ const [x4, y4] = rotate(xs, ys, x2, y2, (angle * Math.PI) / 180);
|
|
|
185
|
+
|
|
|
186
|
+ const shapes = [
|
|
|
187
|
+ // \
|
|
|
188
|
+ generator.line(x3, y3, x2, y2),
|
|
|
189
|
+ // -----
|
|
|
190
|
+ generator.line(x1, y1, x2, y2),
|
|
|
191
|
+ // /
|
|
|
192
|
+ generator.line(x4, y4, x2, y2)
|
|
|
193
|
+ ];
|
|
|
194
|
+
|
|
|
195
|
+ element.draw = (rc, context) => {
|
|
|
196
|
+ context.translate(element.x, element.y);
|
|
|
197
|
+ shapes.forEach(shape => rc.draw(shape));
|
|
|
198
|
+ context.translate(-element.x, -element.y);
|
|
|
199
|
+ };
|
|
|
200
|
+ return;
|
|
|
201
|
+ } else if (isTextElement(element)) {
|
|
|
202
|
+ element.draw = (rc, context) => {
|
|
|
203
|
+ const font = context.font;
|
|
|
204
|
+ context.font = element.font;
|
|
|
205
|
+ context.fillText(
|
|
|
206
|
+ element.text,
|
|
|
207
|
+ element.x,
|
|
|
208
|
+ element.y + element.measure.actualBoundingBoxAscent
|
|
|
209
|
+ );
|
|
|
210
|
+ context.font = font;
|
|
|
211
|
+ };
|
|
|
212
|
+ } else {
|
|
|
213
|
+ throw new Error("Unimplemented type " + element.type);
|
|
|
214
|
+ }
|
|
|
215
|
+}
|
|
|
216
|
+
|
|
|
217
|
+// If the element is created from right to left, the width is going to be negative
|
|
|
218
|
+// This set of functions retrieves the absolute position of the 4 points.
|
|
|
219
|
+// We can't just always normalize it since we need to remember the fact that an arrow
|
|
|
220
|
+// is pointing left or right.
|
|
|
221
|
+function getElementAbsoluteX1(element: ExcaliburElement) {
|
|
|
222
|
+ return element.width >= 0 ? element.x : element.x + element.width;
|
|
|
223
|
+}
|
|
|
224
|
+function getElementAbsoluteX2(element: ExcaliburElement) {
|
|
|
225
|
+ return element.width >= 0 ? element.x + element.width : element.x;
|
|
|
226
|
+}
|
|
|
227
|
+function getElementAbsoluteY1(element: ExcaliburElement) {
|
|
|
228
|
+ return element.height >= 0 ? element.y : element.y + element.height;
|
|
|
229
|
+}
|
|
|
230
|
+function getElementAbsoluteY2(element: ExcaliburElement) {
|
|
|
231
|
+ return element.height >= 0 ? element.y + element.height : element.y;
|
|
|
232
|
+}
|
|
|
233
|
+
|
|
|
234
|
+function setSelection(selection: ExcaliburElement) {
|
|
|
235
|
+ const selectionX1 = getElementAbsoluteX1(selection);
|
|
|
236
|
+ const selectionX2 = getElementAbsoluteX2(selection);
|
|
|
237
|
+ const selectionY1 = getElementAbsoluteY1(selection);
|
|
|
238
|
+ const selectionY2 = getElementAbsoluteY2(selection);
|
|
|
239
|
+ elements.forEach(element => {
|
|
|
240
|
+ const elementX1 = getElementAbsoluteX1(element);
|
|
|
241
|
+ const elementX2 = getElementAbsoluteX2(element);
|
|
|
242
|
+ const elementY1 = getElementAbsoluteY1(element);
|
|
|
243
|
+ const elementY2 = getElementAbsoluteY2(element);
|
|
|
244
|
+ element.isSelected =
|
|
|
245
|
+ element.type !== "selection" &&
|
|
|
246
|
+ selectionX1 <= elementX1 &&
|
|
|
247
|
+ selectionY1 <= elementY1 &&
|
|
|
248
|
+ selectionX2 >= elementX2 &&
|
|
|
249
|
+ selectionY2 >= elementY2;
|
|
|
250
|
+ });
|
|
|
251
|
+}
|
|
|
252
|
+
|
|
|
253
|
+function clearSelection() {
|
|
|
254
|
+ elements.forEach(element => {
|
|
|
255
|
+ element.isSelected = false;
|
|
|
256
|
+ });
|
|
|
257
|
+}
|
|
|
258
|
+
|
|
|
259
|
+type AppState = {
|
|
|
260
|
+ draggingElement: ExcaliburElement | null;
|
|
|
261
|
+ elementType: string;
|
|
|
262
|
+ exportBackground: boolean;
|
|
|
263
|
+ exportVisibleOnly: boolean;
|
|
|
264
|
+ exportPadding: number;
|
|
|
265
|
+};
|
|
|
266
|
+
|
|
|
267
|
+class App extends React.Component<{}, AppState> {
|
|
|
268
|
+ public componentDidMount() {
|
|
|
269
|
+ document.addEventListener("keydown", this.onKeyDown, false);
|
|
|
270
|
+ }
|
|
|
271
|
+
|
|
|
272
|
+ public componentWillUnmount() {
|
|
|
273
|
+ document.removeEventListener("keydown", this.onKeyDown, false);
|
|
|
274
|
+ }
|
|
|
275
|
+
|
|
|
276
|
+ public state: AppState = {
|
|
|
277
|
+ draggingElement: null,
|
|
|
278
|
+ elementType: "selection",
|
|
|
279
|
+ exportBackground: false,
|
|
|
280
|
+ exportVisibleOnly: true,
|
|
|
281
|
+ exportPadding: 10
|
|
|
282
|
+ };
|
|
|
283
|
+
|
|
|
284
|
+ private onKeyDown = (event: KeyboardEvent) => {
|
|
|
285
|
+ if (
|
|
|
286
|
+ event.key === "Backspace" &&
|
|
|
287
|
+ (event.target as HTMLElement)?.nodeName !== "INPUT"
|
|
|
288
|
+ ) {
|
|
|
289
|
+ for (var i = elements.length - 1; i >= 0; --i) {
|
|
|
290
|
+ if (elements[i].isSelected) {
|
|
|
291
|
+ elements.splice(i, 1);
|
|
|
292
|
+ }
|
|
|
293
|
+ }
|
|
|
294
|
+ drawScene();
|
|
|
295
|
+ event.preventDefault();
|
|
|
296
|
+ } else if (
|
|
|
297
|
+ event.key === "ArrowLeft" ||
|
|
|
298
|
+ event.key === "ArrowRight" ||
|
|
|
299
|
+ event.key === "ArrowUp" ||
|
|
|
300
|
+ event.key === "ArrowDown"
|
|
|
301
|
+ ) {
|
|
|
302
|
+ const step = event.shiftKey ? 5 : 1;
|
|
|
303
|
+ elements.forEach(element => {
|
|
|
304
|
+ if (element.isSelected) {
|
|
|
305
|
+ if (event.key === "ArrowLeft") element.x -= step;
|
|
|
306
|
+ else if (event.key === "ArrowRight") element.x += step;
|
|
|
307
|
+ else if (event.key === "ArrowUp") element.y -= step;
|
|
|
308
|
+ else if (event.key === "ArrowDown") element.y += step;
|
|
|
309
|
+ }
|
|
|
310
|
+ });
|
|
|
311
|
+ drawScene();
|
|
|
312
|
+ event.preventDefault();
|
|
|
313
|
+ }
|
|
|
314
|
+ };
|
|
|
315
|
+
|
|
|
316
|
+ private renderOption({
|
|
|
317
|
+ type,
|
|
|
318
|
+ children
|
|
|
319
|
+ }: {
|
|
|
320
|
+ type: string;
|
|
|
321
|
+ children: React.ReactNode;
|
|
|
322
|
+ }) {
|
|
|
323
|
+ return (
|
|
|
324
|
+ <label>
|
|
|
325
|
+ <input
|
|
|
326
|
+ type="radio"
|
|
|
327
|
+ checked={this.state.elementType === type}
|
|
|
328
|
+ onChange={() => {
|
|
|
329
|
+ this.setState({ elementType: type });
|
|
|
330
|
+ clearSelection();
|
|
|
331
|
+ drawScene();
|
|
|
332
|
+ }}
|
|
|
333
|
+ />
|
|
|
334
|
+ {children}
|
|
|
335
|
+ </label>
|
|
|
336
|
+ );
|
|
|
337
|
+ }
|
|
|
338
|
+
|
|
|
339
|
+ public render() {
|
|
|
340
|
+ return (
|
|
|
341
|
+ <>
|
|
|
342
|
+ <div className="exportWrapper">
|
|
|
343
|
+ <button
|
|
|
344
|
+ onClick={() => {
|
|
|
345
|
+ exportAsPNG({
|
|
|
346
|
+ exportBackground: this.state.exportBackground,
|
|
|
347
|
+ exportVisibleOnly: this.state.exportVisibleOnly,
|
|
|
348
|
+ exportPadding: this.state.exportPadding
|
|
|
349
|
+ });
|
|
|
350
|
+ }}
|
|
|
351
|
+ >
|
|
|
352
|
+ Export to png
|
|
|
353
|
+ </button>
|
|
|
354
|
+ <label>
|
|
|
355
|
+ <input
|
|
|
356
|
+ type="checkbox"
|
|
|
357
|
+ checked={this.state.exportBackground}
|
|
|
358
|
+ onChange={e => {
|
|
|
359
|
+ this.setState({ exportBackground: e.target.checked });
|
|
|
360
|
+ }}
|
|
|
361
|
+ />{" "}
|
|
|
362
|
+ background
|
|
|
363
|
+ </label>
|
|
|
364
|
+ <label>
|
|
|
365
|
+ <input
|
|
|
366
|
+ type="checkbox"
|
|
|
367
|
+ checked={this.state.exportVisibleOnly}
|
|
|
368
|
+ onChange={e => {
|
|
|
369
|
+ this.setState({ exportVisibleOnly: e.target.checked });
|
|
|
370
|
+ }}
|
|
|
371
|
+ />
|
|
|
372
|
+ visible area only
|
|
|
373
|
+ </label>
|
|
|
374
|
+ (padding:
|
|
|
375
|
+ <input
|
|
|
376
|
+ type="number"
|
|
|
377
|
+ value={this.state.exportPadding}
|
|
|
378
|
+ onChange={e => {
|
|
|
379
|
+ this.setState({ exportPadding: Number(e.target.value) });
|
|
|
380
|
+ }}
|
|
|
381
|
+ disabled={!this.state.exportVisibleOnly}
|
|
|
382
|
+ />
|
|
|
383
|
+ px)
|
|
|
384
|
+ </div>
|
|
|
385
|
+ <div>
|
|
|
386
|
+ {this.renderOption({ type: "rectangle", children: "Rectangle" })}
|
|
|
387
|
+ {this.renderOption({ type: "ellipse", children: "Ellipse" })}
|
|
|
388
|
+ {this.renderOption({ type: "arrow", children: "Arrow" })}
|
|
|
389
|
+ {this.renderOption({ type: "text", children: "Text" })}
|
|
|
390
|
+ {this.renderOption({ type: "selection", children: "Selection" })}
|
|
|
391
|
+ <canvas
|
|
|
392
|
+ id="canvas"
|
|
|
393
|
+ width={window.innerWidth}
|
|
|
394
|
+ height={window.innerHeight}
|
|
|
395
|
+ onMouseDown={e => {
|
|
|
396
|
+ const x = e.clientX - (e.target as HTMLElement).offsetLeft;
|
|
|
397
|
+ const y = e.clientY - (e.target as HTMLElement).offsetTop;
|
|
|
398
|
+ const element = newElement(this.state.elementType, x, y);
|
|
|
399
|
+ let isDraggingElements = false;
|
|
|
400
|
+ const cursorStyle = document.documentElement.style.cursor;
|
|
|
401
|
+ if (this.state.elementType === "selection") {
|
|
|
402
|
+ const selectedElement = elements.find(element => {
|
|
|
403
|
+ const isSelected = isInsideAnElement(x, y)(element);
|
|
|
404
|
+ if (isSelected) {
|
|
|
405
|
+ element.isSelected = true;
|
|
|
406
|
+ }
|
|
|
407
|
+ return isSelected;
|
|
|
408
|
+ });
|
|
|
409
|
+
|
|
|
410
|
+ if (selectedElement) {
|
|
|
411
|
+ this.setState({ draggingElement: selectedElement });
|
|
|
412
|
+ } else {
|
|
|
413
|
+ clearSelection();
|
|
|
414
|
+ }
|
|
|
415
|
+
|
|
|
416
|
+ isDraggingElements = elements.some(
|
|
|
417
|
+ element => element.isSelected
|
|
|
418
|
+ );
|
|
|
419
|
+
|
|
|
420
|
+ if (isDraggingElements) {
|
|
|
421
|
+ document.documentElement.style.cursor = "move";
|
|
|
422
|
+ }
|
|
|
423
|
+ }
|
|
|
424
|
+
|
|
|
425
|
+ if (isTextElement(element)) {
|
|
|
426
|
+ const text = prompt("What text do you want?");
|
|
|
427
|
+ if (text === null) {
|
|
|
428
|
+ return;
|
|
|
429
|
+ }
|
|
|
430
|
+ element.text = text;
|
|
|
431
|
+ element.font = "20px Virgil";
|
|
|
432
|
+ const font = context.font;
|
|
|
433
|
+ context.font = element.font;
|
|
|
434
|
+ element.measure = context.measureText(element.text);
|
|
|
435
|
+ context.font = font;
|
|
|
436
|
+ const height =
|
|
|
437
|
+ element.measure.actualBoundingBoxAscent +
|
|
|
438
|
+ element.measure.actualBoundingBoxDescent;
|
|
|
439
|
+ // Center the text
|
|
|
440
|
+ element.x -= element.measure.width / 2;
|
|
|
441
|
+ element.y -= element.measure.actualBoundingBoxAscent;
|
|
|
442
|
+ element.width = element.measure.width;
|
|
|
443
|
+ element.height = height;
|
|
|
444
|
+ }
|
|
|
445
|
+
|
|
|
446
|
+ generateDraw(element);
|
|
|
447
|
+ elements.push(element);
|
|
|
448
|
+ if (this.state.elementType === "text") {
|
|
|
449
|
+ this.setState({
|
|
|
450
|
+ draggingElement: null,
|
|
|
451
|
+ elementType: "selection"
|
|
|
452
|
+ });
|
|
|
453
|
+ element.isSelected = true;
|
|
|
454
|
+ } else {
|
|
|
455
|
+ this.setState({ draggingElement: element });
|
|
|
456
|
+ }
|
|
|
457
|
+
|
|
|
458
|
+ let lastX = x;
|
|
|
459
|
+ let lastY = y;
|
|
|
460
|
+
|
|
|
461
|
+ const onMouseMove = (e: MouseEvent) => {
|
|
|
462
|
+ const target = e.target;
|
|
|
463
|
+ if (!(target instanceof HTMLElement)) {
|
|
|
464
|
+ return;
|
|
|
465
|
+ }
|
|
|
466
|
+
|
|
|
467
|
+ if (isDraggingElements) {
|
|
|
468
|
+ const selectedElements = elements.filter(el => el.isSelected);
|
|
|
469
|
+ if (selectedElements.length) {
|
|
|
470
|
+ const x = e.clientX - target.offsetLeft;
|
|
|
471
|
+ const y = e.clientY - target.offsetTop;
|
|
|
472
|
+ selectedElements.forEach(element => {
|
|
|
473
|
+ element.x += x - lastX;
|
|
|
474
|
+ element.y += y - lastY;
|
|
|
475
|
+ });
|
|
|
476
|
+ lastX = x;
|
|
|
477
|
+ lastY = y;
|
|
|
478
|
+ drawScene();
|
|
|
479
|
+ return;
|
|
|
480
|
+ }
|
|
|
481
|
+ }
|
|
|
482
|
+
|
|
|
483
|
+ // It is very important to read this.state within each move event,
|
|
|
484
|
+ // otherwise we would read a stale one!
|
|
|
485
|
+ const draggingElement = this.state.draggingElement;
|
|
|
486
|
+ if (!draggingElement) return;
|
|
|
487
|
+ let width = e.clientX - target.offsetLeft - draggingElement.x;
|
|
|
488
|
+ let height = e.clientY - target.offsetTop - draggingElement.y;
|
|
|
489
|
+ draggingElement.width = width;
|
|
|
490
|
+ // Make a perfect square or circle when shift is enabled
|
|
|
491
|
+ draggingElement.height = e.shiftKey ? width : height;
|
|
|
492
|
+
|
|
|
493
|
+ generateDraw(draggingElement);
|
|
|
494
|
+
|
|
|
495
|
+ if (this.state.elementType === "selection") {
|
|
|
496
|
+ setSelection(draggingElement);
|
|
|
497
|
+ }
|
|
|
498
|
+ drawScene();
|
|
|
499
|
+ };
|
|
|
500
|
+
|
|
|
501
|
+ const onMouseUp = (e: MouseEvent) => {
|
|
|
502
|
+ const { draggingElement, elementType } = this.state;
|
|
|
503
|
+
|
|
|
504
|
+ window.removeEventListener("mousemove", onMouseMove);
|
|
|
505
|
+ window.removeEventListener("mouseup", onMouseUp);
|
|
|
506
|
+
|
|
|
507
|
+ document.documentElement.style.cursor = cursorStyle;
|
|
|
508
|
+
|
|
|
509
|
+ // if no element is clicked, clear the selection and redraw
|
|
|
510
|
+ if (draggingElement === null) {
|
|
|
511
|
+ clearSelection();
|
|
|
512
|
+ drawScene();
|
|
|
513
|
+ return;
|
|
|
514
|
+ }
|
|
|
515
|
+
|
|
|
516
|
+ if (elementType === "selection") {
|
|
|
517
|
+ if (isDraggingElements) {
|
|
|
518
|
+ isDraggingElements = false;
|
|
|
519
|
+ }
|
|
|
520
|
+ elements.pop();
|
|
|
521
|
+ } else {
|
|
|
522
|
+ draggingElement.isSelected = true;
|
|
|
523
|
+ }
|
|
|
524
|
+
|
|
|
525
|
+ this.setState({
|
|
|
526
|
+ draggingElement: null,
|
|
|
527
|
+ elementType: "selection"
|
|
|
528
|
+ });
|
|
|
529
|
+ drawScene();
|
|
|
530
|
+ };
|
|
|
531
|
+
|
|
|
532
|
+ window.addEventListener("mousemove", onMouseMove);
|
|
|
533
|
+ window.addEventListener("mouseup", onMouseUp);
|
|
|
534
|
+
|
|
|
535
|
+ drawScene();
|
|
|
536
|
+ }}
|
|
|
537
|
+ />
|
|
|
538
|
+ </div>
|
|
|
539
|
+ </>
|
|
|
540
|
+ );
|
|
|
541
|
+ }
|
|
|
542
|
+}
|
|
|
543
|
+
|
|
|
544
|
+const rootElement = document.getElementById("root");
|
|
|
545
|
+ReactDOM.render(<App />, rootElement);
|
|
|
546
|
+const canvas = document.getElementById("canvas") as HTMLCanvasElement;
|
|
|
547
|
+const rc = rough.canvas(canvas);
|
|
|
548
|
+const context = canvas.getContext("2d")!;
|
|
|
549
|
+
|
|
|
550
|
+// Big hack to ensure that all the 1px lines are drawn at 1px instead of 2px
|
|
|
551
|
+// https://stackoverflow.com/questions/13879322/drawing-a-1px-thick-line-in-canvas-creates-a-2px-thick-line/13879402#comment90766599_13879402
|
|
|
552
|
+context.translate(0.5, 0.5);
|
|
|
553
|
+
|
|
|
554
|
+function drawScene() {
|
|
|
555
|
+ ReactDOM.render(<App />, rootElement);
|
|
|
556
|
+
|
|
|
557
|
+ context.clearRect(-0.5, -0.5, canvas.width, canvas.height);
|
|
|
558
|
+
|
|
|
559
|
+ elements.forEach(element => {
|
|
|
560
|
+ element.draw(rc, context);
|
|
|
561
|
+ if (element.isSelected) {
|
|
|
562
|
+ const margin = 4;
|
|
|
563
|
+
|
|
|
564
|
+ const elementX1 = getElementAbsoluteX1(element);
|
|
|
565
|
+ const elementX2 = getElementAbsoluteX2(element);
|
|
|
566
|
+ const elementY1 = getElementAbsoluteY1(element);
|
|
|
567
|
+ const elementY2 = getElementAbsoluteY2(element);
|
|
|
568
|
+ const lineDash = context.getLineDash();
|
|
|
569
|
+ context.setLineDash([8, 4]);
|
|
|
570
|
+ context.strokeRect(
|
|
|
571
|
+ elementX1 - margin,
|
|
|
572
|
+ elementY1 - margin,
|
|
|
573
|
+ elementX2 - elementX1 + margin * 2,
|
|
|
574
|
+ elementY2 - elementY1 + margin * 2
|
|
|
575
|
+ );
|
|
|
576
|
+ context.setLineDash(lineDash);
|
|
|
577
|
+ }
|
|
|
578
|
+ });
|
|
|
579
|
+}
|
|
|
580
|
+
|
|
|
581
|
+drawScene();
|
Timur Khazamov
il y a 5 ans