diff --git a/README.md b/README.md index 8ef11e3..b1f48e4 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,7 @@ class App extends React.Component{ - load `function` Adds event handler for load for the element. - rotate `object` Adds rotation by given angle around given point to the list of transformations of the element. - scale `object` Adds scale by given amount relative to given point to the list of transformations of the element. + - stop `boolen` Stops animation for given element. - toBack `boolean` Moves the element so it is the furthest from the viewer’s eyes, behind other elements. - toFront `boolean` Moves the element so it is the closest to the viewer’s eyes, on top of other elements. - touchcancel `function` Adds event handler for touchcancel for the element. diff --git a/lib/elements.js b/lib/elements.js index 1f20b51..2b4f81c 100644 --- a/lib/elements.js +++ b/lib/elements.js @@ -229,6 +229,18 @@ var Element = function (_React$Component3) { return Element; }(React.Component); +Element.propTypes = { + animate: PropTypes.oneOfType([PropTypes.shape({ + anim: PropTypes.shape({ + transform: PropTypes.string + }), + ms: PropTypes.number, + percents: PropTypes.array, + times: PropTypes.number + }), PropTypes.string]), + stop: PropTypes.bool +}; + var Circle = function (_React$Component4) { _inherits(Circle, _React$Component4); @@ -256,7 +268,7 @@ var Circle = function (_React$Component4) { Circle.propTypes = { x: PropTypes.number, y: PropTypes.number, - r: PropTypes.number + r: PropTypes.number, animate: PropTypes.oneOfType([PropTypes.shape({ anim: PropTypes.shape({ transform: PropTypes.string }), ms: PropTypes.number, percents: PropTypes.array, times: PropTypes.number }), PropTypes.string]), stop: PropTypes.bool }; Circle.defaultProps = { x: 0, y: 0, r: 10 }; @@ -284,7 +296,7 @@ var Ellipse = function (_React$Component5) { return Ellipse; }(React.Component); -Ellipse.propTypes = { x: PropTypes.number, y: PropTypes.number, rx: PropTypes.number, ry: PropTypes.number }; +Ellipse.propTypes = { x: PropTypes.number, y: PropTypes.number, rx: PropTypes.number, ry: PropTypes.number, animate: PropTypes.oneOfType([PropTypes.shape({ anim: PropTypes.shape({ transform: PropTypes.string }), ms: PropTypes.number, percents: PropTypes.array, times: PropTypes.number }), PropTypes.string]), stop: PropTypes.bool }; Ellipse.defaultProps = { x: 0, y: 0, rx: 10, ry: 20 }; var Image = function (_React$Component6) { @@ -311,7 +323,7 @@ var Image = function (_React$Component6) { return Image; }(React.Component); -Image.propTypes = { x: PropTypes.number, y: PropTypes.number, src: PropTypes.string, width: PropTypes.number, height: PropTypes.number }; +Image.propTypes = { x: PropTypes.number, y: PropTypes.number, src: PropTypes.string, width: PropTypes.number, height: PropTypes.number, animate: PropTypes.oneOfType([PropTypes.shape({ anim: PropTypes.shape({ transform: PropTypes.string }), ms: PropTypes.number, percents: PropTypes.array, times: PropTypes.number }), PropTypes.string]), stop: PropTypes.bool }; Image.defaultProps = { x: 0, y: 0, src: "", width: 0, height: 0 }; var Path = function (_React$Component7) { @@ -338,7 +350,7 @@ var Path = function (_React$Component7) { return Path; }(React.Component); -Path.propTypes = { d: PropTypes.oneOfType([PropTypes.string, PropTypes.array]) }; +Path.propTypes = { d: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), animate: PropTypes.oneOfType([PropTypes.shape({ anim: PropTypes.shape({ transform: PropTypes.string }), ms: PropTypes.number, percents: PropTypes.array, times: PropTypes.number }), PropTypes.string]), stop: PropTypes.bool }; Path.defaultProps = { d: "M0,0L0,0Z" }; var Rect = function (_React$Component8) { @@ -365,7 +377,7 @@ var Rect = function (_React$Component8) { return Rect; }(React.Component); -Rect.propTypes = { x: PropTypes.number, y: PropTypes.number, width: PropTypes.number, height: PropTypes.number, r: PropTypes.number }; +Rect.propTypes = { x: PropTypes.number, y: PropTypes.number, width: PropTypes.number, height: PropTypes.number, r: PropTypes.number, animate: PropTypes.oneOfType([PropTypes.shape({ anim: PropTypes.shape({ transform: PropTypes.string }), ms: PropTypes.number, percents: PropTypes.array, times: PropTypes.number }), PropTypes.string]), stop: PropTypes.bool }; Rect.defaultProps = { x: 0, y: 0, width: 0, height: 0, r: 0 }; var Print = function (_React$Component9) { @@ -392,7 +404,7 @@ var Print = function (_React$Component9) { return Print; }(React.Component); -Print.propTypes = { x: PropTypes.number, y: PropTypes.number, text: PropTypes.string, fontFamily: PropTypes.string }; +Print.propTypes = { x: PropTypes.number, y: PropTypes.number, text: PropTypes.string, fontFamily: PropTypes.string, animate: PropTypes.oneOfType([PropTypes.shape({ anim: PropTypes.shape({ transform: PropTypes.string }), ms: PropTypes.number, percents: PropTypes.array, times: PropTypes.number }), PropTypes.string]), stop: PropTypes.bool }; Print.defaultProps = { x: 0, y: 0, text: "", fontFamily: "Arial" }; var Text = function (_React$Component10) { @@ -419,7 +431,7 @@ var Text = function (_React$Component10) { return Text; }(React.Component); -Text.propTypes = { x: PropTypes.number, y: PropTypes.number, text: PropTypes.string }; +Text.propTypes = { x: PropTypes.number, y: PropTypes.number, text: PropTypes.string, animate: PropTypes.oneOfType([PropTypes.shape({ anim: PropTypes.shape({ transform: PropTypes.string }), ms: PropTypes.number, percents: PropTypes.array, times: PropTypes.number }), PropTypes.string]), stop: PropTypes.bool }; Text.defaultProps = { x: 0, y: 0, text: "" }; var Line = function (_React$Component11) { @@ -479,7 +491,7 @@ var Line = function (_React$Component11) { return Line; }(React.Component); -Line.propTypes = { x1: PropTypes.number, y1: PropTypes.number, x2: PropTypes.number, y2: PropTypes.number }; +Line.propTypes = { x1: PropTypes.number, y1: PropTypes.number, x2: PropTypes.number, y2: PropTypes.number, animate: PropTypes.oneOfType([PropTypes.shape({ anim: PropTypes.shape({ transform: PropTypes.string }), ms: PropTypes.number, percents: PropTypes.array, times: PropTypes.number }), PropTypes.string]), stop: PropTypes.bool }; Line.defaultProps = { x1: 0, y1: 0, x2: 0, y2: 0 }; module.exports = { diff --git a/lib/utils.js b/lib/utils.js index f93131d..e9e0c8e 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -297,6 +297,13 @@ var Utils = { } break; } + case "stop": + { + if (typeof props[key] === "boolean" && props.stop) { + element.stop(); + } + break; + } case "touchcancel": { if (typeof props[key] === "function") { diff --git a/package.json b/package.json index 47ad80b..a27488b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-raphael", - "version": "0.9.0-rc", + "version": "0.9.0", "description": "reactify raphael", "main": "./lib", "files": [ diff --git a/src/elements.js b/src/elements.js index 8aabe9d..1524db6 100644 --- a/src/elements.js +++ b/src/elements.js @@ -15,9 +15,11 @@ class Paper extends React.Component { const container = ReactDOM.findDOMNode(this.refs.container); const paper = Utils.createPaper(container,this.props); this.paper = paper; - this.setState({ - loaded: true, - id: paper.id + setTimeout(()=>{ + this.setState({ + loaded: true, + id: paper.id + }); }); } componentDidUpdate() { @@ -70,9 +72,11 @@ class Set extends React.Component{ const parentId = root.parentElement.getAttribute("data-id"); const set = Utils.createSet(parentId,this.props,this.handleLoad.bind(this)); this.set = set; - this.setState({ - loaded: true, - id: set.id + setTimeout(()=>{ + this.setState({ + loaded: true, + id: set.id + }); }); } getSet(){ @@ -107,8 +111,10 @@ class Element extends React.Component{ const parentId = root.parentElement.getAttribute("data-id"); const element = Utils.createElement(parentId,this.props.type,this.props,this.handleLoad.bind(this)); this.element = element; - this.setState({ - loaded: true + setTimeout(()=>{ + this.setState({ + loaded: true + }); }); } componentDidUpdate(){ @@ -136,6 +142,46 @@ class Element extends React.Component{ } } +Element.propTypes = { + attr: PropTypes.object, + animate: PropTypes.oneOfType([ + PropTypes.shape({ + anim: PropTypes.shape({ + transform: PropTypes.string + }), + ms: PropTypes.number, + percents: PropTypes.array, + times: PropTypes.number + }), + PropTypes.string + ]), + animateWith: PropTypes.object, + click: PropTypes.func, + data: PropTypes.object, + dblclick: PropTypes.func, + drag: PropTypes.object, + glow: PropTypes.func, + hover: PropTypes.object, + hide: PropTypes.bool, + mousedown: PropTypes.func, + mousemove: PropTypes.func, + mouseout: PropTypes.func, + mouseover: PropTypes.func, + mouseup: PropTypes.func, + load: PropTypes.func, + rotate: PropTypes.object, + scale: PropTypes.object, + stop: PropTypes.bool, + toBack: PropTypes.bool, + toFront: PropTypes.bool, + touchcancel: PropTypes.func, + touchend: PropTypes.func, + touchmove: PropTypes.func, + touchstart: PropTypes.func, + transform: PropTypes.string, + update: PropTypes.func, +}; + class Circle extends React.Component{ getElement() { return this.refs.element.getElement(); } render(){ return (); } @@ -143,7 +189,7 @@ class Circle extends React.Component{ Circle.propTypes = { x: PropTypes.number, y: PropTypes.number, - r: PropTypes.number + r: PropTypes.number, }; Circle.defaultProps = { x: 0, y: 0,r: 10 }; @@ -152,42 +198,70 @@ class Ellipse extends React.Component{ render(){ return (); } } -Ellipse.propTypes = { x: PropTypes.number, y: PropTypes.number, rx: PropTypes.number, ry: PropTypes.number }; +Ellipse.propTypes = { + x: PropTypes.number, + y: PropTypes.number, + rx: PropTypes.number, + ry: PropTypes.number, +}; Ellipse.defaultProps = { x: 0, y: 0,rx: 10,ry: 20 }; class Image extends React.Component{ getElement() { return this.refs.element.getElement(); } render(){ return (); } } -Image.propTypes = { x: PropTypes.number, y: PropTypes.number, src: PropTypes.string, width: PropTypes.number, height: PropTypes.number }; +Image.propTypes = { + x: PropTypes.number, + y: PropTypes.number, + src: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, +}; Image.defaultProps = { x: 0, y: 0, src: "", width: 0,height: 0 }; class Path extends React.Component{ getElement() { return this.refs.element.getElement(); } render(){ return (); } } -Path.propTypes = { d: PropTypes.oneOfType([PropTypes.string, PropTypes.array]) }; +Path.propTypes = { + d: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), +}; Path.defaultProps = { d: "M0,0L0,0Z" }; class Rect extends React.Component{ getElement() { return this.refs.element.getElement(); } render(){ return (); } } -Rect.propTypes = { x: PropTypes.number, y: PropTypes.number, width: PropTypes.number, height: PropTypes.number, r: PropTypes.number }; +Rect.propTypes = { + x: PropTypes.number, + y: PropTypes.number, + width: PropTypes.number, + height: PropTypes.number, + r: PropTypes.number, +}; Rect.defaultProps = { x: 0, y: 0, width: 0,height: 0, r: 0 }; class Print extends React.Component{ getElement() { return this.refs.element.getElement(); } render(){ return (); } } -Print.propTypes = { x: PropTypes.number, y: PropTypes.number, text: PropTypes.string, fontFamily: PropTypes.string }; +Print.propTypes = { + x: PropTypes.number, + y: PropTypes.number, + text: PropTypes.string, + fontFamily: PropTypes.string, +}; Print.defaultProps = { x: 0, y: 0, text: "", fontFamily: "Arial" }; class Text extends React.Component{ getElement() { return this.refs.element.getElement(); } render(){ return (); } } -Text.propTypes = { x: PropTypes.number, y: PropTypes.number, text: PropTypes.string }; +Text.propTypes = { + x: PropTypes.number, + y: PropTypes.number, + text: PropTypes.string, +}; Text.defaultProps = { x: 0, y: 0, text: "" }; class Line extends React.Component{ @@ -221,7 +295,12 @@ class Line extends React.Component{ return ; } } -Line.propTypes = { x1: PropTypes.number, y1: PropTypes.number, x2: PropTypes.number, y2: PropTypes.number }; +Line.propTypes = { + x1: PropTypes.number, + y1: PropTypes.number, + x2: PropTypes.number, + y2: PropTypes.number, +}; Line.defaultProps = { x1: 0, y1: 0, x2: 0,y2: 0 }; module.exports = { diff --git a/src/utils.js b/src/utils.js index 61ed159..43d7531 100644 --- a/src/utils.js +++ b/src/utils.js @@ -87,7 +87,7 @@ const Utils = { } default: break; } - + if(element){ if(findedParent.parent.type=="set"){ element.set = findedParent.parent; @@ -146,7 +146,7 @@ const Utils = { } case "data": { if(typeof props[key] ==="object") { - for(const key in props.data) + for(const key in props.data) element.data(key,props.data[key]); element.items = props.data; } @@ -194,11 +194,11 @@ const Utils = { if(typeof props[key] ==="function") {element.unmouseover();element.mouseover(props.mouseover);} break; } - case "mouseup":{ + case "mouseup":{ if(typeof props[key] ==="function") {element.unmouseup();element.mouseup(props.mouseup);} break; } - case "rotate":{ + case "rotate":{ if(typeof props[key] ==="object") { const {deg, cx, cy} = props.rotate; element.rotate(deg, cx, cy); } break; } @@ -206,19 +206,23 @@ const Utils = { if(typeof props[key] ==="object") { const {sx,sy,cx,cy} = props.scale; element.scale(sx,sy,cx,cy); } break; } - case "touchcancel":{ + case "stop":{ + if(typeof props[key] ==="boolean" && props.stop) { element.stop(); } + break; + } + case "touchcancel":{ if(typeof props[key] ==="function") {element.untouchcancel();element.touchcancel(props.touchcancel);} break; } - case "touchend":{ + case "touchend":{ if(typeof props[key] ==="function") {element.untouchend();element.touchend(props.touchend);} break; } - case "touchmove":{ + case "touchmove":{ if(typeof props[key] ==="function") {element.untouchmove();element.touchmove(props.touchmove);} break; } - case "touchstart":{ + case "touchstart":{ if(typeof props[key] ==="function") {element.untouchstart();element.touchstart(props.touchstart);} break; } @@ -284,7 +288,7 @@ const Utils = { element.attr({x, y, text}); break; } - + } Utils.updateElementProps(element,props); if(callback) callback(element); @@ -313,4 +317,4 @@ const Utils = { elements: [] }; -module.exports = Utils; \ No newline at end of file +module.exports = Utils;