Skip to content
This repository was archived by the owner on Feb 10, 2025. It is now read-only.

implemented some responsiveness #39

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

implemented some responsiveness #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions dash_canvas/DashCanvas.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ class DashCanvas(Component):
- image_content (string; default ''): Image data string, formatted as png or jpg data string. Can be
generated by utils.io_utils.array_to_data_string.
- zoom (number; default 1): Zoom factor
- width (number; default 500): Width of the canvas
- height (number; default 500): Height of the canvas
- scale (number; default 1): Scaling ratio between canvas width and image width
- width (number; default 0): Width of the canvas. The width of the parent element is used if width is
not passed.
- height (number; default 0): Height of the canvas. If height is not given and a background image
is passed, the height adapts to keep the aspect ratio of the
background image.
- tool (string; default "pencil"): Selection of drawing tool, among ["pencil", "pan", "circle",
"rectangle", "select", "line"].
- lineWidth (number; default 10): Width of drawing line (in pencil mode)
Expand All @@ -32,12 +34,12 @@ class DashCanvas(Component):
- hide_buttons (list of strings; optional): Names of buttons to hide. Names are "zoom", "pan", "line", "pencil",
"rectangle", "undo", "select"."""
@_explicitize_args
def __init__(self, id=Component.UNDEFINED, image_content=Component.UNDEFINED, zoom=Component.UNDEFINED, width=Component.UNDEFINED, height=Component.UNDEFINED, scale=Component.UNDEFINED, tool=Component.UNDEFINED, lineWidth=Component.UNDEFINED, lineColor=Component.UNDEFINED, goButtonTitle=Component.UNDEFINED, filename=Component.UNDEFINED, trigger=Component.UNDEFINED, json_data=Component.UNDEFINED, hide_buttons=Component.UNDEFINED, **kwargs):
self._prop_names = ['id', 'image_content', 'zoom', 'width', 'height', 'scale', 'tool', 'lineWidth', 'lineColor', 'goButtonTitle', 'filename', 'trigger', 'json_data', 'hide_buttons']
def __init__(self, id=Component.UNDEFINED, image_content=Component.UNDEFINED, zoom=Component.UNDEFINED, width=Component.UNDEFINED, height=Component.UNDEFINED, tool=Component.UNDEFINED, lineWidth=Component.UNDEFINED, lineColor=Component.UNDEFINED, goButtonTitle=Component.UNDEFINED, filename=Component.UNDEFINED, trigger=Component.UNDEFINED, json_data=Component.UNDEFINED, hide_buttons=Component.UNDEFINED, **kwargs):
self._prop_names = ['id', 'image_content', 'zoom', 'width', 'height', 'tool', 'lineWidth', 'lineColor', 'goButtonTitle', 'filename', 'trigger', 'json_data', 'hide_buttons']
self._type = 'DashCanvas'
self._namespace = 'dash_canvas'
self._valid_wildcard_attributes = []
self.available_properties = ['id', 'image_content', 'zoom', 'width', 'height', 'scale', 'tool', 'lineWidth', 'lineColor', 'goButtonTitle', 'filename', 'trigger', 'json_data', 'hide_buttons']
self.available_properties = ['id', 'image_content', 'zoom', 'width', 'height', 'tool', 'lineWidth', 'lineColor', 'goButtonTitle', 'filename', 'trigger', 'json_data', 'hide_buttons']
self.available_wildcard_properties = []

_explicit_args = kwargs.pop('_explicit_args')
Expand Down
2 changes: 1 addition & 1 deletion dash_canvas/async~canvas.dev.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dash_canvas/async~canvas.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dash_canvas/dash_canvas.dev.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dash_canvas/dash_canvas.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 4 additions & 15 deletions dash_canvas/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@
"name": "number"
},
"required": false,
"description": "Width of the canvas",
"description": "Width of the canvas. The width of the parent element is used if width is\nnot passed.",
"defaultValue": {
"value": "500",
"value": "0",
"computed": false
}
},
Expand All @@ -49,20 +49,9 @@
"name": "number"
},
"required": false,
"description": "Height of the canvas",
"description": "Height of the canvas. If height is not given and a background image\nis passed, the height adapts to keep the aspect ratio of the \nbackground image.",
"defaultValue": {
"value": "500",
"computed": false
}
},
"scale": {
"type": {
"name": "number"
},
"required": false,
"description": "Scaling ratio between canvas width and image width",
"defaultValue": {
"value": "1",
"value": "0",
"computed": false
}
},
Expand Down
14 changes: 6 additions & 8 deletions src/lib/components/DashCanvas.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default class DashCanvas extends Component {
DashCanvas.defaultProps = {
filename: '',
json_data: '', image_content: '', trigger: 0,
width: 500, height: 500, scale: 1, lineWidth: 10,
width: 0, height: 0, lineWidth: 10,
lineColor: 'red', tool: "pencil", zoom: 1,
goButtonTitle: 'Save', hide_buttons: []
};
Expand All @@ -45,20 +45,18 @@ DashCanvas.propTypes = {


/**
* Width of the canvas
* Width of the canvas. The width of the parent element is used if width is
* not passed.
*/
width: PropTypes.number,

/**
* Height of the canvas
* Height of the canvas. If height is not given and a background image
* is passed, the height adapts to keep the aspect ratio of the
* background image.
*/
height: PropTypes.number,

/**
* Scaling ratio between canvas width and image width
*/
scale: PropTypes.number,

/**
* Selection of drawing tool, among ["pencil", "pan", "circle",
* "rectangle", "select", "line"].
Expand Down
30 changes: 23 additions & 7 deletions src/lib/fragments/DashCanvas.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ export default class DashCanvas extends Component {
constructor(props) {
super(props);
this.state = {
height: 200
height: 200,
width: 200
};
this._save = this._save.bind(this);
this._undo = this._undo.bind(this);
Expand All @@ -44,11 +45,21 @@ export default class DashCanvas extends Component {
this._penciltool = this._penciltool.bind(this);
this._linetool = this._linetool.bind(this);
this._selecttool = this._selecttool.bind(this);
this.canvasRef = React.createRef();
}


componentDidMount() {
let sketch = this._sketch;
if (this.props.width == 0) {
this.setState({width: this.canvasRef.current.clientWidth});
} else{
this.setState({width: this.props.width});
}

// Control resize - does not work at the moment
window.addEventListener('resize', this._resize, false);

if (this.props.filename.length > 0 ||
this.props.image_content.length > 0) {
var content = (this.props.filename.length > 0) ? this.props.filename :
Expand All @@ -59,7 +70,7 @@ export default class DashCanvas extends Component {
var new_scale = 1;
var height = img.height;
var width = img.width;
new_height = Math.round(height * sketch.props.width / width);
new_height = Math.round(height * this.state.width / width);
new_scale = new_height / height;
this.setState({ height: new_height });
sketch.clear();
Expand Down Expand Up @@ -88,7 +99,7 @@ export default class DashCanvas extends Component {
img.onload = () => {
var height = img.height;
var width = img.width;
new_height = Math.round(height * sketch.props.width / width);
new_height = Math.round(height * sketch.state.width / width);
new_scale = new_height / height;
this.setState({ height: new_height });
sketch.clear();
Expand Down Expand Up @@ -118,6 +129,10 @@ export default class DashCanvas extends Component {
}
};

_resize() {
// not used yet
this.setState({width: this.canvasRef.current.clientWidth});
};

_undo() {
this._sketch.undo();
Expand All @@ -128,7 +143,6 @@ export default class DashCanvas extends Component {
};
_redo() {
this._sketch.redo();
console.log(this._sketch);
this.setState({
canUndo: this._sketch.canUndo(),
canRedo: this._sketch.canRedo()
Expand Down Expand Up @@ -201,15 +215,17 @@ export default class DashCanvas extends Component {
const show_select = !(hide_buttons.includes("select"));
const show_rectangle = !(hide_buttons.includes("rectangle"));
var width_defined = this.props.width > 0;
var width = width_defined ? this.props.width : null;
var width = width_defined ? this.props.width : this.state.width;
var height_defined = this.props.height > 0;
var height = height_defined ? this.props.height : this.state.height;
return (
<div className={this.props.className}>
<div className={this.props.className} ref={this.canvasRef}>
<SketchField name='sketch'
ref={(c) => this._sketch = c}
tool={toolsArray[this.props.tool.toLowerCase()]}
lineColor={this.props.lineColor}
width={width}
height={this.state.height}
height={height}
forceValue={true}
backgroundColor='#ccddff'
lineWidth={this.props.lineWidth} />
Expand Down