From 9b031548ed3ed3510e34fa2dea798fde45b6c253 Mon Sep 17 00:00:00 2001 From: tarik-djurdjevic Date: Fri, 6 Dec 2019 15:21:22 +0100 Subject: [PATCH] add option to pass tool as null value --- src/SketchField.jsx | 103 ++++++++++++++++++++++++++++++++++---------- src/rectangle.js | 1 - 2 files changed, 80 insertions(+), 24 deletions(-) diff --git a/src/SketchField.jsx b/src/SketchField.jsx index 5e8b6f7c..26128371 100644 --- a/src/SketchField.jsx +++ b/src/SketchField.jsx @@ -54,6 +54,26 @@ class SketchField extends PureComponent { width: PropTypes.number, // Sketch height height: PropTypes.number, + // event object added + onObjectAdded: PropTypes.func, + // event object modified + onObjectModified: PropTypes.func, + // event object removed + onObjectRemoved: PropTypes.func, + // event mouse down + onMouseDown: PropTypes.func, + // event mouse move + onMouseMove: PropTypes.func, + // event mouse up + onMouseUp: PropTypes.func, + // event mouse out + onMouseOut: PropTypes.func, + // event object move + onObjectMoving: PropTypes.func, + // event object scale + onObjectScaling: PropTypes.func, + // event object rotating + onObjectRotating: PropTypes.func, // Class name to pass to container div of canvas className: PropTypes.string, // Style options to pass to container div of canvas @@ -67,10 +87,20 @@ class SketchField extends PureComponent { backgroundColor: 'transparent', opacity: 1.0, undoSteps: 25, - tool: Tool.Pencil, + tool: null, widthCorrection: 2, heightCorrection: 0, - forceValue: false + forceValue: false, + onObjectAdded:()=>null, + onObjectModified:()=>null, + onObjectRemoved:()=>null, + onMouseDown:()=>null, + onMouseMove:()=>null, + onMouseUp:()=>null, + onMouseOut:()=>null, + onObjectMoving:()=>null, + onObjectScaling:()=>null, + onObjectRotating:()=>null, }; state = { @@ -85,7 +115,7 @@ class SketchField extends PureComponent { this._tools[Tool.Arrow] = new Arrow(fabricCanvas); this._tools[Tool.Rectangle] = new Rectangle(fabricCanvas); this._tools[Tool.Circle] = new Circle(fabricCanvas); - this._tools[Tool.Pan] = new Pan(fabricCanvas) + this._tools[Tool.Pan] = new Pan(fabricCanvas); }; /** @@ -141,6 +171,7 @@ class SketchField extends PureComponent { * Action when an object is added to the canvas */ _onObjectAdded = (e) => { + const {onObjectAdded} = this.props; if (!this.state.action) { this.setState({ action: true }); return @@ -153,30 +184,35 @@ class SketchField extends PureComponent { let state = JSON.stringify(objState); // object, previous state, current state this._history.keep([obj, state, state]) + onObjectAdded(e); }; /** * Action when an object is moving around inside the canvas */ _onObjectMoving = (e) => { - + const {onObjectMoving} = this.props; + onObjectMoving(e); }; /** * Action when an object is scaling inside the canvas */ _onObjectScaling = (e) => { - + const {onObjectScaling} = this.props; + onObjectScaling(e); }; /** * Action when an object is rotating inside the canvas */ _onObjectRotating = (e) => { - + const {onObjectRotating} = this.props; + onObjectRotating(e); }; _onObjectModified = (e) => { + const {onObjectModified} = this.props; let obj = e.target; obj.__version += 1; let prevState = JSON.stringify(obj.__originalState); @@ -185,38 +221,46 @@ class SketchField extends PureComponent { obj.__originalState = objState; let currState = JSON.stringify(objState); this._history.keep([obj, prevState, currState]); + onObjectModified(e); }; /** * Action when an object is removed from the canvas */ _onObjectRemoved = (e) => { + const {onObjectRemoved} = this.props; let obj = e.target; if (obj.__removed) { obj.__version += 1; return } obj.__version = 0; + onObjectRemoved(e); }; /** * Action when the mouse button is pressed down */ _onMouseDown = (e) => { + const{onMouseDown} = this.props; this._selectedTool.doMouseDown(e); + onMouseDown(e); }; /** * Action when the mouse cursor is moving around within the canvas */ _onMouseMove = (e) => { + const {onMouseMove} = this.props; this._selectedTool.doMouseMove(e); + onMouseMove(e); }; /** * Action when the mouse cursor is moving out from the canvas */ _onMouseOut = (e) => { + const {onMouseOut} = this.props; this._selectedTool.doMouseOut(e); if (this.props.onChange) { let onChange = this.props.onChange; @@ -224,9 +268,11 @@ class SketchField extends PureComponent { onChange(e.e) }, 10) } + onMouseOut(e); }; _onMouseUp = (e) => { + const {onMouseUp} = this.props; this._selectedTool.doMouseUp(e); // Update the final state to new-generated object // Ignore Path object since it would be created after mouseUp @@ -245,6 +291,7 @@ class SketchField extends PureComponent { onChange(e.e) }, 10) } + onMouseUp(e); }; /** @@ -565,6 +612,11 @@ class SketchField extends PureComponent { canvas.add(iText); }; + callEvent = (e, eventFunction) => { + if(this._selectedTool) + eventFunction(e); + } + componentDidMount = () => { let { tool, @@ -586,7 +638,8 @@ class SketchField extends PureComponent { this._backgroundColor(backgroundColor) let selectedTool = this._tools[tool]; - selectedTool.configureCanvas(this.props); + if(selectedTool) + selectedTool.configureCanvas(this.props); this._selectedTool = selectedTool; // Control resize @@ -596,16 +649,16 @@ class SketchField extends PureComponent { this._history = new History(undoSteps); // Events binding - canvas.on('object:added', this._onObjectAdded); - canvas.on('object:modified', this._onObjectModified); - canvas.on('object:removed', this._onObjectRemoved); - canvas.on('mouse:down', this._onMouseDown); - canvas.on('mouse:move', this._onMouseMove); - canvas.on('mouse:up', this._onMouseUp); - canvas.on('mouse:out', this._onMouseOut); - canvas.on('object:moving', this._onObjectMoving); - canvas.on('object:scaling', this._onObjectScaling); - canvas.on('object:rotating', this._onObjectRotating); + canvas.on('object:added', e => this.callEvent(e, this._onObjectAdded)); + canvas.on('object:modified', e => this.callEvent(e, this._onObjectModified)); + canvas.on('object:removed', e => this.callEvent(e, this._onObjectRemoved)); + canvas.on('mouse:down', e => this.callEvent(e, this._onMouseDown)); + canvas.on('mouse:move', e => this.callEvent(e, this._onMouseMove)); + canvas.on('mouse:up', e => this.callEvent(e, this._onMouseUp)); + canvas.on('mouse:out', e => this.callEvent(e, this._onMouseOut)); + canvas.on('object:moving', e => this.callEvent(e, this._onObjectMoving)); + canvas.on('object:scaling', e => this.callEvent(e, this._onObjectScaling)); + canvas.on('object:rotating', e => this.callEvent(e, this._onObjectRotating)); // IText Events fired on Adding Text // canvas.on("text:event:changed", console.log) // canvas.on("text:selection:changed", console.log) @@ -632,13 +685,18 @@ class SketchField extends PureComponent { } if (this.props.tool !== prevProps.tool) { - this._selectedTool = this._tools[this.props.tool] || this._tools[Tool.Pencil] + this._selectedTool = this._tools[this.props.tool]; + if(this._selectedTool){ + this._selectedTool.configureCanvas(this.props); + } + else{ + this._fc.isDrawingMode = false; + this._fc.selection = false; + } + //Bring the cursor back to default if it is changed by a tool + this._fc.defaultCursor = 'default'; } - //Bring the cursor back to default if it is changed by a tool - this._fc.defaultCursor = 'default'; - this._selectedTool.configureCanvas(this.props); - if (this.props.backgroundColor !== prevProps.backgroundColor) { this._backgroundColor(this.props.backgroundColor) } @@ -659,7 +717,6 @@ class SketchField extends PureComponent { let canvasDivStyle = Object.assign({}, style ? style : {}, width ? { width: width } : {}, height ? { height: height } : { height: 512 }); - return (