Skip to content

Commit

Permalink
Merge pull request #8 from tbolis/issue#7-auto-sketch-resize
Browse files Browse the repository at this point in the history 
Issue#7 auto sketch resize
  • Loading branch information
@tbolis
tbolis authored Sep 29, 2016
2 parents 0141b7a + 635049b commit 2c2df3f
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 75 deletions.
3 changes: 2 additions & 1 deletion .babelrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"plugins": [
"transform-runtime",
"transform-object-assign",
"transform-react-display-name"
"transform-react-display-name",
"react-hot-loader/babel"
]
}
5 changes: 3 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,16 @@ class SketchFieldDemo extends React.Component {
```
Configuration Options

| Option | Type | Default | Description |
| Option | Type | Default | Description |
|--- |--- |--- |--- |
| tool | Enumeration (string) | pencil | The tool to use, can be select,pencil,circle, rectangle,circle |
| lineColor | String | black | The color of the line |
| lineWidth | Number | 1 | The width of the line |
| fillColor | String | transparent | The fill color of the shape when applicable (e.g. circle) |
| undoSteps | Number | 15 | number of undo/redo steps to maintain |
| imageFormat | String | png | image format when calling toDataURL, can be png or jpeg |
| scaleOnResize | boolean | false | Scale the drawing when we resize the canvas |
| width | Number | No Value(null)| Set/control the canvas width, if left empty the sketch will scale to parent element |
| height | Number | No Value(null)| Set/control the canvas height, if left empty the sketch will scale to parent element |
| defaultData | JSON or data URL | | Default initial data, can be json or URL data accroding to configuration option below, in the case of data URL the initial drawing will be improted as an image |
| defaultDataType | Enumeration (string) | json | The Type of initial data, can be either json or url |

Expand Down
67 changes: 43 additions & 24 deletions examples/main.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import 'flexboxgrid';
import './main.css';

import {
Card,CardText,CardTitle,
Card,CardText,CardTitle,CardHeader,
Drawer,
AppBar,GridList,GridTile,
Slider, Toggle, MenuItem,
Expand Down Expand Up @@ -89,7 +89,7 @@ class SketchFieldDemo extends React.Component {
this._selectTool = this._selectTool.bind(this);
this._onSketchChange = this._onSketchChange.bind(this);

this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
//this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);

}

Expand All @@ -103,7 +103,10 @@ class SketchFieldDemo extends React.Component {
fillWithColor: false,
drawings: [],
canUndo: false,
canRedo: false
canRedo: false,
controlledSize: false,
sketchWidth: 600,
sketchHeight: 600
};

componentDidMount() {
Expand Down Expand Up @@ -263,27 +266,25 @@ class SketchFieldDemo extends React.Component {
<div className='col-xs-7 col-sm-7 col-md-9 col-lg-9'>

{/* Sketch area */}
<div style={{padding:'3px'}}>
<SketchField
name='sketch'
className='canvas-area'
ref={(c) => this._sketch = c}
lineColor={this.state.lineColor}
lineWidth={this.state.lineWidth}
fillColor={this.state.fillWithColor ? this.state.fillColor : 'transparent'}
scaleOnResize={true}
height={760}
defaultData={dataJson}
defaultDataType="json"
onChange={this._onSketchChange}
tool={this.state.tool}
/>
</div>
<SketchField
name='sketch'
className='canvas-area'
ref={(c) => this._sketch = c}
lineColor={this.state.lineColor}
lineWidth={this.state.lineWidth}
fillColor={this.state.fillWithColor ? this.state.fillColor : 'transparent'}
width={this.state.controlledSize?this.state.sketchWidth:null}
height={this.state.controlledSize?this.state.sketchHeight:null}
defaultData={dataJson}
defaultDataType="json"
onChange={this._onSketchChange}
tool={this.state.tool}
/>
</div>
<div className='col-xs-5 col-sm-5 col-md-3 col-lg-3'>
<Card style={{margin:'10px 10px 5px 0'}}>
<CardTitle title='Tools'/>
<CardText>
<CardHeader title='Tools' actAsExpander={true} showExpandableButton={true}/>
<CardText expandable={true}>
<label htmlFor='tool'>Canvas Tool</label><br/>
<SelectField ref='tool' value={this.state.tool} onChange={this._selectTool}>
<MenuItem value={Tools.Select} primaryText="Select"/>
Expand Down Expand Up @@ -312,12 +313,30 @@ class SketchFieldDemo extends React.Component {
onTouchTap={(e) => this._sketch.zoom(0.8)}>
<ZoomOutIcon />
</IconButton>
<br/>
<br/>
<Toggle label="Control size"
defaultToggled={this.state.controlledSize}
onToggle={(e) => this.setState({controlledSize:!this.state.controlledSize})}/>
<br/>
<label htmlFor='xSize'>Change Canvas Width</label>
<Slider ref='xSize' step={1}
min={10} max={1000}
defaultValue={this.state.sketchWidth}
onChange={(e, v) => this.setState({sketchWidth:v})}/>
<br/>
<label htmlFor='ySize'>Change Canvas Height</label>
<Slider ref='ySize' step={1}
min={10} max={1000}
defaultValue={this.state.sketchHeight}
onChange={(e, v) => this.setState({sketchHeight:v})}/>
<br/>
</div>
</CardText>
</Card>
<Card style={{margin:'5px 10px 5px 0'}}>
<CardTitle title='Colors'/>
<CardText>
<Card initiallyExpanded={true} style={{margin:'5px 10px 5px 0'}}>
<CardHeader title='Colors' actAsExpander={true} showExpandableButton={true}/>
<CardText expandable={true}>
<label htmlFor='lineColor'>Line</label>
<CompactPicker
id='lineColor' color={this.state.lineColor}
Expand Down
54 changes: 27 additions & 27 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-sketch",
"version": "0.2.10",
"version": "0.2.11",
"description": "Sketch Element for React based applications, backed-up by fabricjs as its core",
"keywords": [
"react",
Expand Down Expand Up @@ -40,57 +40,57 @@
"node": ">=4.4.1 <7.0.0"
},
"devDependencies": {
"babel-cli": "^6.14.0",
"babel-core": "^6.14.0",
"babel-eslint": "^6.1.2",
"babel-cli": "^6.16.0",
"babel-core": "^6.16.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-object-assign": "^6.8.0",
"babel-plugin-transform-react-display-name": "^6.8.0",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-polyfill": "^6.13.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-es2015-loose": "^7.0.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-es2015-loose": "^8.0.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babel-runtime": "^6.11.6",
"canvas": "1.4.0",
"canvas": "1.5.0",
"chai": "^3.5.0",
"css-loader": "^0.24.0",
"eslint": "^3.4.0",
"css-loader": "^0.25.0",
"eslint": "^3.6.1",
"eslint-loader": "^1.5.0",
"eslint-plugin-react": "^6.2.0",
"fabric": "1.6.3",
"eslint-plugin-react": "^6.3.0",
"fabric": "1.6.4",
"flexboxgrid": "^6.3.1",
"html-webpack-plugin": "^2.22.0",
"karma": "^1.2.0",
"karma": "^1.3.0",
"karma-babel-preprocessor": "^6.0.1",
"karma-chai": "^0.1.0",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.1.1",
"karma-mocha-reporter": "^2.1.0",
"karma-phantomjs-launcher": "^1.0.1",
"karma-mocha": "^1.2.0",
"karma-mocha-reporter": "^2.2.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"material-ui": "^0.15.4",
"mocha": "^3.0.2",
"mocha": "^3.1.0",
"my-local-ip": "^1.0.0",
"open": "0.0.5",
"open-browser-webpack-plugin": "0.0.2",
"phantomjs-prebuilt": "^2.1.12",
"react-addons-test-utils": "15.3.1",
"react-color": "^2.2.6",
"react-hot-loader": "^1.3.0",
"react-addons-test-utils": "15.3.2",
"react-color": "^2.3.2",
"react-hot-loader": "^3.0.0-beta.5",
"react-tap-event-plugin": "^1.0.0",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.0",
"webpack-dev-server": "^1.16.1",
"weinre": "^2.0.0-pre-I0Z7U9OV"
},
"dependencies": {
"react": "15.3.1",
"react-addons-pure-render-mixin": "15.3.1",
"react-dom": "15.3.1"
"react": "15.3.2",
"react-addons-pure-render-mixin": "15.3.2",
"react-dom": "15.3.2"
}
}
41 changes: 21 additions & 20 deletions src/SketchField.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,6 @@ class SketchField extends Component {
tool: PropTypes.string,
// image format when calling toDataURL
imageFormat: PropTypes.string,
// Scale the drawing when we resize the canvas
scaleOnResize: PropTypes.bool,
// Default initial data
defaultData: PropTypes.object,
// Type of initial data
Expand All @@ -50,8 +48,7 @@ class SketchField extends Component {
lineWidth: 10,
fillColor: 'transparent',
opacity: 1.0,
undoSteps: 15,
scaleOnResize: true,
undoSteps: 25,
tool: Tool.Pencil,
defaultDataType: 'json'
};
Expand Down Expand Up @@ -86,16 +83,18 @@ class SketchField extends Component {
};

componentDidMount() {
this._domNode = ReactDOM.findDOMNode(this);

let {tool,
undoSteps,
defaultData,
defaultDataType} = this.props;

let canvas = this._fc = new fabric.Canvas(this._canvas.id/*, {
preserveObjectStacking: false,
renderOnAddRemove: false,
skipTargetFind: true
}*/);
preserveObjectStacking: false,
renderOnAddRemove: false,
skipTargetFind: true
}*/);

this._initTools(canvas);

Expand Down Expand Up @@ -148,8 +147,11 @@ class SketchField extends Component {
window.removeEventListener('resize', this._resize);
}

componentWillUpdate(nextProps, nextState) {
if (this.state.parentWidth !== nextState.parentWidth) {
componentDidUpdate(prevProps, prevState) {
if (this.state.parentWidth !== prevState.parentWidth
|| this.props.width !== prevProps.width
|| this.props.height !== prevProps.height) {

this._resize();
}
}
Expand Down Expand Up @@ -253,13 +255,9 @@ class SketchField extends Component {
* @private
*/
_resize(e) {
if (e) {
e.preventDefault()
}
// if disabled then do not perform the resize
if (!this.props.scaleOnResize) return;
if (e) e.preventDefault();
let canvas = this._fc;
let domNode = ReactDOM.findDOMNode(this);
let domNode = this._domNode;
let {offsetWidth,clientHeight} = domNode;
let prevWidth = canvas.getWidth();
let prevHeight = canvas.getHeight();
Expand Down Expand Up @@ -475,13 +473,16 @@ class SketchField extends Component {
height,
...other
} = this.props;

let canvasDivStyle = Object.assign({}, style ? style : {}, width ? {width: width} : {}, height ? {height: height} : {height: 512});

return (
<div className={className} style={style}>
<div
className={className}
style={canvasDivStyle}>
<canvas
id={uuid4()}
height={height || 512}
ref={(c) => this._canvas = c}
width={width || 512}>
ref={(c) => this._canvas = c}>
Sorry, Canvas HTML5 element is not supported by your browser :(
</canvas>
</div>
Expand Down
2 changes: 1 addition & 1 deletion webpack.server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const config = {
test: /\.(js|jsx)$/,
include: [srcPath, examplesPath],
exclude: /(node_modules|bower_components|lib)/,
loaders: ['react-hot', 'babel']
loaders: ['babel']
}
]
},
Expand Down

0 comments on commit 2c2df3f

Please sign in to comment.