Skip to content

Commit 6daaaf0

Browse files
author
Kevin Busch
committed
Added a core utils object with bindAll in order to bind to all object functions
1 parent 8c6c85a commit 6daaaf0

12 files changed

Lines changed: 169 additions & 48 deletions

‎src/atoms/forms/canvas-sketch/canvas-sketch.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -297,9 +297,6 @@ class CanvasSketch {
297297

298298
if (this._config.currentObjectIndex != null && lastObjectIndex !== this._config.currentObjectIndex) {
299299
// caller wants the index to be something different... overwrite with caller's demand
300-
this._config.currentObjectIndex = this._config.currentObjectIndex;
301-
}
302-
else {
303300
this._config.currentObjectIndex = lastObjectIndex;
304301
}
305302

‎src/atoms/forms/canvas-sketch/enums/canvas-tool-type.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export enum CanvasToolType {
2-
image = "ImageDrawTool",
3-
line = "LineCanvasDrawTool",
4-
pan = "PanCanvasObject",
5-
pencil = "PencilCanvasDrawTool",
2+
image = "Image-Draw-Tool",
3+
line = "Line-Canvas-Draw-Tool",
4+
pan = "Pan-Canvas-Object",
5+
pencil = "Pencil-Canvas-Draw-Tool",
66
};

‎src/atoms/forms/canvas-sketch/react-canvas-sketch.stories.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { boolean, text, number } from "@storybook/addon-knobs";
2+
import { text, number, select } from "@storybook/addon-knobs";
33
import { ReactCanvasSketch } from "./react-canvas-sketch";
44
import { CanvasDrawToolSettings } from "./tools/base-canvas-draw-tool";
55
import { CanvasToolType } from "./enums/canvas-tool-type";
@@ -9,6 +9,12 @@ export default {
99
title: "Atoms | Forms / Canvas Sketch",
1010
};
1111

12+
const canvasToolTypes = [
13+
CanvasToolType.line,
14+
CanvasToolType.pan,
15+
CanvasToolType.pencil,
16+
];
17+
1218
export const reactCanvasSketch = () => (
1319
<ReactCanvasSketch
1420
backgroundImageUrl={text("Background Image URL", "https://images-na.ssl-images-amazon.com/images/I/51zLZbEVSTL._AC_SL1200_.jpg")}
@@ -19,9 +25,9 @@ export const reactCanvasSketch = () => (
1925
containerWidth={number("Container Width", 600)}
2026
onAddedStroke={(strokeSettings: CanvasDrawToolSettings) => { console.log(`onAddedStroke: ${JSON.stringify(strokeSettings)}`) }}
2127
redrawIncrement={number("Redraw Trigger Increment", 1)}
22-
canvasToolType={CanvasToolType.pan} // how to define a list of available canvas tool types?
28+
canvasToolType={select("Tool Type", canvasToolTypes, CanvasToolType.pencil)}
2329
toolWidth={number("Tool Width", 1)}
2430
toolColor={text("Tool Color", "FFFFFF")}
25-
value={{ currentObjectIndex: 0, objects: [] }}
31+
value={{ currentObjectIndex: -1, objects: [] }}
2632
/>
2733
);

‎src/atoms/forms/canvas-sketch/react-canvas-sketch.tsx‎

Lines changed: 58 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
import * as React from "react";
66
import { CanvasToolType } from "./enums/canvas-tool-type";
77
import { CanvasDrawToolSettings } from "./tools/base-canvas-draw-tool";
8-
import { useEffect } from "@storybook/addons";
8+
import { useEffect } from "react";
99

1010
// -------------------------------------------------------------------------------------------------
1111
// #region Interfaces
@@ -38,8 +38,8 @@ export interface ReactCanvasSketchProps {
3838
// #region Component
3939
// -------------------------------------------------------------------------------------------------
4040

41-
const ReactCanvasSketch: React.FC<ReactCanvasSketchProps> = (
42-
props: ReactCanvasSketchProps
41+
const ReactCanvasSketch: React.FunctionComponent<ReactCanvasSketchProps> = (
42+
props: React.PropsWithChildren<ReactCanvasSketchProps>
4343
) => {
4444

4545
// track the ref of the canvas elements
@@ -60,6 +60,7 @@ const ReactCanvasSketch: React.FC<ReactCanvasSketchProps> = (
6060

6161
// set up effects
6262
useEffect(() => {
63+
console.log('start effect');
6364
if (!isInitialized) {
6465
// set up the default options for the background image
6566
const canvasSketchConfig: CanvasSketchConfig = {
@@ -88,63 +89,103 @@ const ReactCanvasSketch: React.FC<ReactCanvasSketchProps> = (
8889
}
8990
return () => {
9091
// clean up
91-
canvasSketch.dispose();
92+
console.log('cleanup effect');
93+
if (canvasSketch != null) {
94+
canvasSketch.dispose();
95+
}
9296
}
93-
});
97+
}, [
98+
canvasSketch,
99+
htmlCanvasBackgroundImage,
100+
htmlCanvasSketch,
101+
isInitialized,
102+
props.backgroundImageUrl,
103+
props.canvasToolType,
104+
props.onAddedStroke,
105+
props.toolColor,
106+
props.toolWidth,
107+
props.value.currentObjectIndex,
108+
props.value.objects,
109+
]);
94110

95111
useEffect(() => {
112+
if (canvasSketch == null) {
113+
return;
114+
}
96115
if (prevValueObjects === props.value.objects) {
97116
canvasSketch.redrawSketchAt(props.value.objects, props.value.currentObjectIndex);
98117
}
99-
}, [props.value.currentObjectIndex, props.value.objects]); // https://stackoverflow.com/questions/55724642/react-useeffect-hook-when-only-one-of-the-effects-deps-changes-but-not-the-oth
118+
}, [props.value.currentObjectIndex, props.value.objects, canvasSketch, prevValueObjects]); // https://stackoverflow.com/questions/55724642/react-useeffect-hook-when-only-one-of-the-effects-deps-changes-but-not-the-oth
100119

101120
useEffect(() => {
121+
if (canvasSketch == null) {
122+
return;
123+
}
102124
canvasSketch.redrawSketchAt(props.value.objects, props.value.currentObjectIndex);
103-
}, [props.redrawIncrement]);
125+
}, [props.redrawIncrement, canvasSketch, props.value.objects, props.value.currentObjectIndex]);
104126

105127
useEffect(() => {
128+
if (canvasSketch == null) {
129+
return;
130+
}
106131
canvasSketch.redrawBackgroundImageUsing(props.backgroundImageUrl);
107-
}, [props.backgroundImageUrl]);
132+
}, [props.backgroundImageUrl, canvasSketch]);
108133

109134
useEffect(() => {
135+
if (canvasSketch == null) {
136+
return;
137+
}
110138
canvasSketch.setToolColor(props.toolColor);
111-
}, [props.toolColor]);
139+
}, [props.toolColor, canvasSketch]);
112140

113141
useEffect(() => {
142+
if (canvasSketch == null) {
143+
return;
144+
}
114145
canvasSketch.setToolWidth(props.toolWidth);
115-
}, [props.toolWidth]);
146+
}, [props.toolWidth, canvasSketch]);
116147

117148
useEffect(() => {
149+
console.log(`useEffect: start`);
150+
if (canvasSketch == null) {
151+
return;
152+
}
118153
canvasSketch.setSelectedTool(props.canvasToolType);
119-
}, [props.canvasToolType]);
154+
console.log(`useEffect: ${props.canvasToolType}`);
155+
console.log(`useEffect: finish`);
156+
}, [props.canvasToolType, canvasSketch]);
120157

121158

122159
// configure styles for elemtns
123-
const canvasStyles = {
160+
const canvasContainerStyles: React.CSSProperties = {
124161
height: props.canvasHeight,
162+
position: "relative",
125163
width: props.canvasWidth,
126164
};
127-
const containerStyles = {
165+
const sketchStyles: React.CSSProperties = {
128166
height: props.containerHeight,
129167
width: props.containerWidth,
130168
};
169+
const canvasStyles: React.CSSProperties = {
170+
position: "absolute",
171+
};
131172

132173
return (
133174
<div
134175
className={`c-react-canvas-sketch ${props.className}`}
135-
style={containerStyles}>
136-
<div className="c-react-canvas-sketch__canvas-container" style={canvasStyles}>
176+
style={sketchStyles}>
177+
<div className="c-react-canvas-sketch__canvas-container" style={canvasContainerStyles}>
137178
<canvas
138179
className="c-react-canvas-sketch__background-image"
139180
height={props.canvasHeight}
140181
ref={htmlCanvasBackgroundImage}
141-
style={{ zIndex: 0 }}
182+
style={{ ...canvasStyles, zIndex: 0 }}
142183
width={props.canvasWidth} />
143184
<canvas
144185
className="c-react-canvas-sketch__field"
145186
height={props.canvasHeight}
146187
ref={htmlCanvasSketch}
147-
style={{ zIndex: 1 }}
188+
style={{ ...canvasStyles, zIndex: 1 }}
148189
width={props.canvasWidth}>
149190
Sorry, Canvas HTML5 element is not supported by your browser :(
150191
</canvas>

‎src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CanvasToolSettings, ToolConfig } from "./base-canvas-tool";
22
import { CanvasToolType } from "../enums/canvas-tool-type";
33
import { PointerPosition } from "../interfaces/pointer-position";
4-
import { CoreUtils } from "andculturecode-javascript-core";
4+
import { CoreUtils } from "../../../../utilities/core-utils";
55

66
// -------------------------------------------------------------------------------------------------
77
// #region Interfaces

‎src/atoms/forms/canvas-sketch/tools/base-canvas-tool.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CanvasToolType } from "../enums/canvas-tool-type";
22
import { CanvasObjectType } from "../enums/canvas-object-type";
3-
import { CoreUtils } from "andculturecode-javascript-core";
3+
import { CoreUtils } from "../../../../utilities/core-utils";
44

55
// -------------------------------------------------------------------------------------------------
66
// #region Interfaces

‎src/atoms/forms/canvas-sketch/tools/image-canvas-tool.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { CanvasToolType } from "../enums/canvas-tool-type";
2-
import { CoreUtils } from "andculturecode-javascript-core";
2+
import { CoreUtils } from "../../../../utilities/core-utils";
33

44
// -------------------------------------------------------------------------------------------------
55
// #region Interfaces

‎src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CanvasDrawToolSettings, CanvasDrawTool, DrawToolConfig, BaseCanvasDrawTool } from "./base-canvas-draw-tool";
22
import { CanvasToolType } from "../enums/canvas-tool-type";
3-
import { CoreUtils } from "andculturecode-javascript-core";
3+
import { CoreUtils } from "../../../../utilities/core-utils";
44
import { PointerPosition } from "../interfaces/pointer-position";
55
import { CanvasObjectType } from "../enums/canvas-object-type";
66
import { PositionUtils } from "../utils/position-utils";
@@ -209,11 +209,17 @@ class LineCanvasDrawTool extends BaseCanvasDrawTool implements CanvasDrawTool {
209209
// ---------------------------------------------------------------------------------------------
210210

211211
private _onMouseDownCanvas(e: MouseEvent): void {
212-
this._startStroke(PositionUtils.getMousePosition(e));
212+
const mousePosition = PositionUtils.getMousePosition(e);
213+
if (mousePosition != null) {
214+
this._startStroke(mousePosition);
215+
}
213216
}
214217

215218
private _onMouseMoveCanvas(e: MouseEvent): void {
216-
this._move(PositionUtils.getMousePosition(e));
219+
const mousePosition = PositionUtils.getMousePosition(e);
220+
if (mousePosition != null) {
221+
this._move(mousePosition);
222+
}
217223
}
218224

219225
private _onMouseUpWindow(): void {
@@ -228,14 +234,20 @@ class LineCanvasDrawTool extends BaseCanvasDrawTool implements CanvasDrawTool {
228234
}
229235

230236
private _onTouchMoveCanvas(e: TouchEvent): void {
231-
this._move(PositionUtils.getTouchPosition(e, this._config.canvas));
237+
const touchPosition = PositionUtils.getTouchPosition(e, this._config.canvas);
238+
if (touchPosition != null) {
239+
this._move(touchPosition);
240+
}
232241

233242
// Don't allow touch events to be called
234243
e.preventDefault();
235244
}
236245

237246
private _onTouchStartCanvas(e: TouchEvent): void {
238-
this._startStroke(PositionUtils.getTouchPosition(e, this._config.canvas));
247+
const touchPosition = PositionUtils.getTouchPosition(e, this._config.canvas);
248+
if (touchPosition != null) {
249+
this._startStroke(touchPosition);
250+
}
239251

240252
// Don't allow touch events to be called
241253
e.preventDefault();

‎src/atoms/forms/canvas-sketch/tools/pan-canvas-tool.ts‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { PointerPosition } from "../interfaces/pointer-position";
2-
import { CoreUtils } from "andculturecode-javascript-core";
2+
import { CoreUtils } from "../../../../utilities/core-utils";
33
import { CanvasToolType } from "../enums/canvas-tool-type";
44
import { PositionUtils } from "../utils/position-utils";
55

@@ -128,11 +128,17 @@ class PanCanvasTool {
128128
// ---------------------------------------------------------------------------------------------
129129

130130
private _onMouseDownCanvas(e: MouseEvent): void {
131-
this._startPan(PositionUtils.getMousePosition(e));
131+
const mousePosition = PositionUtils.getMousePosition(e);
132+
if (mousePosition != null) {
133+
this._startPan(mousePosition);
134+
}
132135
}
133136

134137
private _onMouseMoveCanvas(e: MouseEvent): void {
135-
this._pan(PositionUtils.getMousePosition(e));
138+
const mousePosition = PositionUtils.getMousePosition(e);
139+
if (mousePosition != null) {
140+
this._pan(mousePosition);
141+
}
136142
}
137143

138144
private _onMouseUpWindow(): void {
@@ -147,14 +153,20 @@ class PanCanvasTool {
147153
}
148154

149155
private _onTouchMoveCanvas(e: TouchEvent): void {
150-
this._pan(PositionUtils.getTouchPosition(e, this._config.canvas));
156+
const touchPosition = PositionUtils.getTouchPosition(e, this._config.canvas);
157+
if (touchPosition != null) {
158+
this._pan(touchPosition);
159+
}
151160

152161
// Don't allow touch events to be called
153162
e.preventDefault();
154163
}
155164

156165
private _onTouchStartCanvas(e: TouchEvent): void {
157-
this._startPan(PositionUtils.getTouchPosition(e, this._config.canvas));
166+
const touchPosition = PositionUtils.getTouchPosition(e, this._config.canvas);
167+
if (touchPosition != null) {
168+
this._startPan(touchPosition);
169+
}
158170

159171
// Don't allow touch events to be called
160172
e.preventDefault();

‎src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CanvasDrawToolSettings, BaseCanvasDrawTool, CanvasDrawTool, DrawToolConfig } from "./base-canvas-draw-tool";
22
import { CanvasToolType } from "../enums/canvas-tool-type";
33
import { PointerPosition } from "../interfaces/pointer-position";
4-
import { CoreUtils } from "andculturecode-javascript-core";
4+
import { CoreUtils } from "../../../../utilities/core-utils";
55
import { PositionUtils } from "../utils/position-utils";
66
import { CanvasObjectType } from "../enums/canvas-object-type";
77

@@ -256,15 +256,27 @@ class PencilCanvasDrawTool extends BaseCanvasDrawTool implements CanvasDrawTool
256256
// ---------------------------------------------------------------------------------------------
257257

258258
private _onMouseDownCanvas(e: MouseEvent): void {
259-
this._startStroke(PositionUtils.getMousePosition(e));
259+
console.log(`_onMouseDownCanvas: start`);
260+
const mousePosition = PositionUtils.getMousePosition(e);
261+
if (mousePosition != null) {
262+
this._startStroke(mousePosition);
263+
}
264+
console.log(`_onMouseDownCanvas: finish`);
260265
}
261266

262267
private _onMouseMoveCanvas(e: MouseEvent): void {
263-
this._move(PositionUtils.getMousePosition(e));
268+
console.log(`_onMouseMoveCanvas: start`);
269+
const mousePosition = PositionUtils.getMousePosition(e);
270+
if (mousePosition != null) {
271+
this._move(mousePosition);
272+
}
273+
console.log(`_onMouseMoveCanvas: finish`);
264274
}
265275

266276
private _onMouseUpWindow(): void {
277+
console.log(`_onMouseUpWindow: start`);
267278
this._finishStroke();
279+
console.log(`_onMouseUpWindow: finish`);
268280
}
269281

270282
private _onTouchEndWindow(e: TouchEvent): void {
@@ -275,14 +287,20 @@ class PencilCanvasDrawTool extends BaseCanvasDrawTool implements CanvasDrawTool
275287
}
276288

277289
private _onTouchMoveCanvas(e: TouchEvent): void {
278-
this._move(PositionUtils.getTouchPosition(e, this._config.canvas));
290+
const touchPosition = PositionUtils.getTouchPosition(e, this._config.canvas);
291+
if (touchPosition != null) {
292+
this._move(touchPosition);
293+
}
279294

280295
// Don't allow touch events to be called
281296
e.preventDefault();
282297
}
283298

284299
private _onTouchStartCanvas(e: TouchEvent): void {
285-
this._startStroke(PositionUtils.getTouchPosition(e, this._config.canvas));
300+
const touchPosition = PositionUtils.getTouchPosition(e, this._config.canvas);
301+
if (touchPosition != null) {
302+
this._startStroke(touchPosition);
303+
}
286304

287305
// Don't allow touch events to be called
288306
e.preventDefault();

0 commit comments

Comments
 (0)