Skip to content

Commit

Permalink
add option to pass tool as null value
Browse files Browse the repository at this point in the history
  • Loading branch information
@tarik-djurdjevic
tarik-djurdjevic committed Dec 6, 2019
1 parent aeb079d commit 9b03154
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 24 deletions.
103 changes: 80 additions & 23 deletions src/SketchField.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 = {
Expand All @@ -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);
};

/**
Expand Down Expand Up @@ -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
Expand All @@ -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);
Expand All @@ -185,48 +221,58 @@ 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;
setTimeout(() => {
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
Expand All @@ -245,6 +291,7 @@ class SketchField extends PureComponent {
onChange(e.e)
}, 10)
}
onMouseUp(e);
};

/**
Expand Down Expand Up @@ -565,6 +612,11 @@ class SketchField extends PureComponent {
canvas.add(iText);
};

callEvent = (e, eventFunction) => {
if(this._selectedTool)
eventFunction(e);
}

componentDidMount = () => {
let {
tool,
Expand All @@ -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
Expand All @@ -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)
Expand All @@ -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)
}
Expand All @@ -659,7 +717,6 @@ class SketchField extends PureComponent {
let canvasDivStyle = Object.assign({}, style ? style : {},
width ? { width: width } : {},
height ? { height: height } : { height: 512 });

return (
<div
className={className}
Expand Down
1 change: 0 additions & 1 deletion src/rectangle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ class Rectangle extends FabricCanvasTool {
stroke: this._color,
strokeWidth: this._width,
fill: this._fill,
//fill: 'rgba(255,0,0,0.5)',
transparentCorners: false,
selectable: false,
evented: false,
Expand Down

0 comments on commit 9b03154

Please sign in to comment.