diff --git a/.babelrc b/.babelrc index 3ac1a6e..85038ce 100644 --- a/.babelrc +++ b/.babelrc @@ -1,9 +1,10 @@ { "presets": [ "backpack", + "react", "stage-0" ], "plugins": [ - "transform-flow-strip-types" + ] } diff --git a/.flowconfig b/.flowconfig new file mode 100644 index 0000000..5fbccec --- /dev/null +++ b/.flowconfig @@ -0,0 +1,9 @@ +[ignore] +node_modules + +[include] +src + +[libs] + +[options] diff --git a/__test__/__snapshots__/index.test.js.snap b/__test__/__snapshots__/index.test.js.snap new file mode 100644 index 0000000..30f115e --- /dev/null +++ b/__test__/__snapshots__/index.test.js.snap @@ -0,0 +1,801 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders Arc correctly 1`] = `null`; + +exports[`renders Circle correctly 1`] = ` +ShallowWrapper { + "complexSelector": ComplexSelector { + "buildPredicate": [Function], + "childrenOfNode": [Function], + "findWhereUnwrapped": [Function], + }, + "length": 1, + "node": null, + "nodes": Array [ + null, + ], + "options": Object {}, + "renderer": ReactShallowRenderer { + "_instance": ShallowComponentWrapper { + "_calledComponentWillUnmount": false, + "_compositeType": 0, + "_context": Object {}, + "_currentElement": , + "_debugID": 3, + "_hostContainerInfo": null, + "_hostParent": null, + "_instance": Circle { + "_reactInternalInstance": [Circular], + "context": Object {}, + "name": "circle", + "props": Object { + "height": 120, + "options": Object { + "data": Array [ + 200, + 100, + 200, + 180, + -2.0943951023931957, + -1.5707963267948966, + true, + ], + "fill": "#3ef6ad", + }, + "width": 120, + }, + "refs": Object {}, + "state": null, + "updater": Object { + "enqueueCallback": [Function], + "enqueueCallbackInternal": [Function], + "enqueueElementInternal": [Function], + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + "validateCallback": [Function], + }, + }, + "_mountOrder": 2, + "_pendingCallbacks": null, + "_pendingElement": null, + "_pendingForceUpdate": false, + "_pendingReplaceState": false, + "_pendingStateQueue": null, + "_renderedComponent": NoopInternalComponent { + "_currentElement": null, + "_debugID": 4, + "_renderedOutput": null, + }, + "_renderedNodeType": 2, + "_rootNodeID": 0, + "_topLevelWrapper": null, + "_updateBatchNumber": null, + "_warnedAboutRefsInRender": false, + }, + "getRenderOutput": [Function], + "render": [Function], + }, + "root": [Circular], + "unrendered": , +} +`; + +exports[`renders Curve correctly 1`] = ` +ShallowWrapper { + "complexSelector": ComplexSelector { + "buildPredicate": [Function], + "childrenOfNode": [Function], + "findWhereUnwrapped": [Function], + }, + "length": 1, + "node": null, + "nodes": Array [ + null, + ], + "options": Object {}, + "renderer": ReactShallowRenderer { + "_instance": ShallowComponentWrapper { + "_calledComponentWillUnmount": false, + "_compositeType": 0, + "_context": Object {}, + "_currentElement": , + "_debugID": 5, + "_hostContainerInfo": null, + "_hostParent": null, + "_instance": Curve { + "_reactInternalInstance": [Circular], + "context": Object {}, + "name": "curve", + "props": Object { + "height": 120, + "options": Object { + "data": Array [ + 200, + 100, + 200, + 180, + -2.0943951023931957, + -1.5707963267948966, + true, + ], + "fill": "#3ef6ad", + }, + "width": 120, + }, + "refs": Object {}, + "state": null, + "updater": Object { + "enqueueCallback": [Function], + "enqueueCallbackInternal": [Function], + "enqueueElementInternal": [Function], + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + "validateCallback": [Function], + }, + }, + "_mountOrder": 3, + "_pendingCallbacks": null, + "_pendingElement": null, + "_pendingForceUpdate": false, + "_pendingReplaceState": false, + "_pendingStateQueue": null, + "_renderedComponent": NoopInternalComponent { + "_currentElement": null, + "_debugID": 6, + "_renderedOutput": null, + }, + "_renderedNodeType": 2, + "_rootNodeID": 0, + "_topLevelWrapper": null, + "_updateBatchNumber": null, + "_warnedAboutRefsInRender": false, + }, + "getRenderOutput": [Function], + "render": [Function], + }, + "root": [Circular], + "unrendered": , +} +`; + +exports[`renders Ellipse correctly 1`] = ` +ShallowWrapper { + "complexSelector": ComplexSelector { + "buildPredicate": [Function], + "childrenOfNode": [Function], + "findWhereUnwrapped": [Function], + }, + "length": 1, + "node": null, + "nodes": Array [ + null, + ], + "options": Object {}, + "renderer": ReactShallowRenderer { + "_instance": ShallowComponentWrapper { + "_calledComponentWillUnmount": false, + "_compositeType": 0, + "_context": Object {}, + "_currentElement": , + "_debugID": 7, + "_hostContainerInfo": null, + "_hostParent": null, + "_instance": Ellipse { + "_reactInternalInstance": [Circular], + "context": Object {}, + "name": "ellipse", + "props": Object { + "height": 120, + "options": Object { + "data": Array [ + 200, + 100, + 200, + 180, + -2.0943951023931957, + -1.5707963267948966, + true, + ], + "fill": "#3ef6ad", + }, + "width": 120, + }, + "refs": Object {}, + "state": null, + "updater": Object { + "enqueueCallback": [Function], + "enqueueCallbackInternal": [Function], + "enqueueElementInternal": [Function], + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + "validateCallback": [Function], + }, + }, + "_mountOrder": 4, + "_pendingCallbacks": null, + "_pendingElement": null, + "_pendingForceUpdate": false, + "_pendingReplaceState": false, + "_pendingStateQueue": null, + "_renderedComponent": NoopInternalComponent { + "_currentElement": null, + "_debugID": 8, + "_renderedOutput": null, + }, + "_renderedNodeType": 2, + "_rootNodeID": 0, + "_topLevelWrapper": null, + "_updateBatchNumber": null, + "_warnedAboutRefsInRender": false, + }, + "getRenderOutput": [Function], + "render": [Function], + }, + "root": [Circular], + "unrendered": , +} +`; + +exports[`renders Line correctly 1`] = ` +ShallowWrapper { + "complexSelector": ComplexSelector { + "buildPredicate": [Function], + "childrenOfNode": [Function], + "findWhereUnwrapped": [Function], + }, + "length": 1, + "node": null, + "nodes": Array [ + null, + ], + "options": Object {}, + "renderer": ReactShallowRenderer { + "_instance": ShallowComponentWrapper { + "_calledComponentWillUnmount": false, + "_compositeType": 0, + "_context": Object {}, + "_currentElement": , + "_debugID": 9, + "_hostContainerInfo": null, + "_hostParent": null, + "_instance": Line { + "_reactInternalInstance": [Circular], + "context": Object {}, + "name": "line", + "props": Object { + "height": 120, + "options": Object { + "data": Array [ + 200, + 100, + 200, + 180, + -2.0943951023931957, + -1.5707963267948966, + true, + ], + "fill": "#3ef6ad", + }, + "width": 120, + }, + "refs": Object {}, + "state": null, + "updater": Object { + "enqueueCallback": [Function], + "enqueueCallbackInternal": [Function], + "enqueueElementInternal": [Function], + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + "validateCallback": [Function], + }, + }, + "_mountOrder": 5, + "_pendingCallbacks": null, + "_pendingElement": null, + "_pendingForceUpdate": false, + "_pendingReplaceState": false, + "_pendingStateQueue": null, + "_renderedComponent": NoopInternalComponent { + "_currentElement": null, + "_debugID": 10, + "_renderedOutput": null, + }, + "_renderedNodeType": 2, + "_rootNodeID": 0, + "_topLevelWrapper": null, + "_updateBatchNumber": null, + "_warnedAboutRefsInRender": false, + }, + "getRenderOutput": [Function], + "render": [Function], + }, + "root": [Circular], + "unrendered": , +} +`; + +exports[`renders Path correctly 1`] = ` +ShallowWrapper { + "complexSelector": ComplexSelector { + "buildPredicate": [Function], + "childrenOfNode": [Function], + "findWhereUnwrapped": [Function], + }, + "length": 1, + "node": null, + "nodes": Array [ + null, + ], + "options": Object {}, + "renderer": ReactShallowRenderer { + "_instance": ShallowComponentWrapper { + "_calledComponentWillUnmount": false, + "_compositeType": 0, + "_context": Object {}, + "_currentElement": , + "_debugID": 11, + "_hostContainerInfo": null, + "_hostParent": null, + "_instance": Path { + "_reactInternalInstance": [Circular], + "context": Object {}, + "name": "path", + "props": Object { + "height": 120, + "options": Object { + "data": Array [ + 200, + 100, + 200, + 180, + -2.0943951023931957, + -1.5707963267948966, + true, + ], + "fill": "#3ef6ad", + }, + "width": 120, + }, + "refs": Object {}, + "state": null, + "updater": Object { + "enqueueCallback": [Function], + "enqueueCallbackInternal": [Function], + "enqueueElementInternal": [Function], + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + "validateCallback": [Function], + }, + }, + "_mountOrder": 6, + "_pendingCallbacks": null, + "_pendingElement": null, + "_pendingForceUpdate": false, + "_pendingReplaceState": false, + "_pendingStateQueue": null, + "_renderedComponent": NoopInternalComponent { + "_currentElement": null, + "_debugID": 12, + "_renderedOutput": null, + }, + "_renderedNodeType": 2, + "_rootNodeID": 0, + "_topLevelWrapper": null, + "_updateBatchNumber": null, + "_warnedAboutRefsInRender": false, + }, + "getRenderOutput": [Function], + "render": [Function], + }, + "root": [Circular], + "unrendered": , +} +`; + +exports[`renders Polygon correctly 1`] = ` +ShallowWrapper { + "complexSelector": ComplexSelector { + "buildPredicate": [Function], + "childrenOfNode": [Function], + "findWhereUnwrapped": [Function], + }, + "length": 1, + "node": null, + "nodes": Array [ + null, + ], + "options": Object {}, + "renderer": ReactShallowRenderer { + "_instance": ShallowComponentWrapper { + "_calledComponentWillUnmount": false, + "_compositeType": 0, + "_context": Object {}, + "_currentElement": , + "_debugID": 13, + "_hostContainerInfo": null, + "_hostParent": null, + "_instance": Polygon { + "_reactInternalInstance": [Circular], + "context": Object {}, + "name": "polygon", + "props": Object { + "height": 120, + "options": Object { + "data": Array [ + 200, + 100, + 200, + 180, + -2.0943951023931957, + -1.5707963267948966, + true, + ], + "fill": "#3ef6ad", + }, + "width": 120, + }, + "refs": Object {}, + "state": null, + "updater": Object { + "enqueueCallback": [Function], + "enqueueCallbackInternal": [Function], + "enqueueElementInternal": [Function], + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + "validateCallback": [Function], + }, + }, + "_mountOrder": 7, + "_pendingCallbacks": null, + "_pendingElement": null, + "_pendingForceUpdate": false, + "_pendingReplaceState": false, + "_pendingStateQueue": null, + "_renderedComponent": NoopInternalComponent { + "_currentElement": null, + "_debugID": 14, + "_renderedOutput": null, + }, + "_renderedNodeType": 2, + "_rootNodeID": 0, + "_topLevelWrapper": null, + "_updateBatchNumber": null, + "_warnedAboutRefsInRender": false, + }, + "getRenderOutput": [Function], + "render": [Function], + }, + "root": [Circular], + "unrendered": , +} +`; + +exports[`renders Rectangle correctly 1`] = ` +ShallowWrapper { + "complexSelector": ComplexSelector { + "buildPredicate": [Function], + "childrenOfNode": [Function], + "findWhereUnwrapped": [Function], + }, + "length": 1, + "node": null, + "nodes": Array [ + null, + ], + "options": Object {}, + "renderer": ReactShallowRenderer { + "_instance": ShallowComponentWrapper { + "_calledComponentWillUnmount": false, + "_compositeType": 0, + "_context": Object {}, + "_currentElement": , + "_debugID": 15, + "_hostContainerInfo": null, + "_hostParent": null, + "_instance": Rectangle { + "_reactInternalInstance": [Circular], + "context": Object {}, + "name": "rectangle", + "props": Object { + "height": 120, + "options": Object { + "data": Array [ + 200, + 100, + 200, + 180, + -2.0943951023931957, + -1.5707963267948966, + true, + ], + "fill": "#3ef6ad", + }, + "width": 120, + }, + "refs": Object {}, + "state": null, + "updater": Object { + "enqueueCallback": [Function], + "enqueueCallbackInternal": [Function], + "enqueueElementInternal": [Function], + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + "validateCallback": [Function], + }, + }, + "_mountOrder": 8, + "_pendingCallbacks": null, + "_pendingElement": null, + "_pendingForceUpdate": false, + "_pendingReplaceState": false, + "_pendingStateQueue": null, + "_renderedComponent": NoopInternalComponent { + "_currentElement": null, + "_debugID": 16, + "_renderedOutput": null, + }, + "_renderedNodeType": 2, + "_rootNodeID": 0, + "_topLevelWrapper": null, + "_updateBatchNumber": null, + "_warnedAboutRefsInRender": false, + }, + "getRenderOutput": [Function], + "render": [Function], + }, + "root": [Circular], + "unrendered": , +} +`; diff --git a/__test__/index.test.js b/__test__/index.test.js new file mode 100644 index 0000000..aff68b0 --- /dev/null +++ b/__test__/index.test.js @@ -0,0 +1,84 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import toJSON from 'enzyme-to-json'; + +import { + Arc, + Circle, + Curve, + Ellipse, + Line, + Path, + Polygon, + Rectangle +} from '../src'; + +/* Global => expect */ +const options = { + fill: '#3ef6ad', + data: [200, 100, 200, 180, -Math.PI + (Math.PI / 3), -Math.PI / 2, true] +}; + +it ('renders Arc correctly', () => { + const wrapper = shallow( + + ); + console.log(toJSON(wrapper)); + expect(toJSON(wrapper)).toMatchSnapshot(); +}); + +it ('renders Circle correctly', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); +}); + +it ('renders Curve correctly', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); +}); + +it ('renders Ellipse correctly', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); +}); + +it ('renders Line correctly', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); +}); + +it ('renders Path correctly', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); +}); + +it ('renders Polygon correctly', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); +}); + +it ('renders Rectangle correctly', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); +}); diff --git a/coverage/clover.xml b/coverage/clover.xml new file mode 100644 index 0000000..586906d --- /dev/null +++ b/coverage/clover.xml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/coverage/coverage-final.json b/coverage/coverage-final.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/coverage/coverage-final.json @@ -0,0 +1 @@ +{} diff --git a/coverage/lcov-report/base.css b/coverage/lcov-report/base.css new file mode 100644 index 0000000..417c7ad --- /dev/null +++ b/coverage/lcov-report/base.css @@ -0,0 +1,212 @@ +body, html { + margin:0; padding: 0; + height: 100%; +} +body { + font-family: Helvetica Neue, Helvetica, Arial; + font-size: 14px; + color:#333; +} +.small { font-size: 12px; } +*, *:after, *:before { + -webkit-box-sizing:border-box; + -moz-box-sizing:border-box; + box-sizing:border-box; + } +h1 { font-size: 20px; margin: 0;} +h2 { font-size: 14px; } +pre { + font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace; + margin: 0; + padding: 0; + -moz-tab-size: 2; + -o-tab-size: 2; + tab-size: 2; +} +a { color:#0074D9; text-decoration:none; } +a:hover { text-decoration:underline; } +.strong { font-weight: bold; } +.space-top1 { padding: 10px 0 0 0; } +.pad2y { padding: 20px 0; } +.pad1y { padding: 10px 0; } +.pad2x { padding: 0 20px; } +.pad2 { padding: 20px; } +.pad1 { padding: 10px; } +.space-left2 { padding-left:55px; } +.space-right2 { padding-right:20px; } +.center { text-align:center; } +.clearfix { display:block; } +.clearfix:after { + content:''; + display:block; + height:0; + clear:both; + visibility:hidden; + } +.fl { float: left; } +@media only screen and (max-width:640px) { + .col3 { width:100%; max-width:100%; } + .hide-mobile { display:none!important; } +} + +.quiet { + color: #7f7f7f; + color: rgba(0,0,0,0.5); +} +.quiet a { opacity: 0.7; } + +.fraction { + font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; + font-size: 10px; + color: #555; + background: #E8E8E8; + padding: 4px 5px; + border-radius: 3px; + vertical-align: middle; +} + +div.path a:link, div.path a:visited { color: #333; } +table.coverage { + border-collapse: collapse; + margin: 10px 0 0 0; + padding: 0; +} + +table.coverage td { + margin: 0; + padding: 0; + vertical-align: top; +} +table.coverage td.line-count { + text-align: right; + padding: 0 5px 0 20px; +} +table.coverage td.line-coverage { + text-align: right; + padding-right: 10px; + min-width:20px; +} + +table.coverage td span.cline-any { + display: inline-block; + padding: 0 5px; + width: 100%; +} +.missing-if-branch { + display: inline-block; + margin-right: 5px; + border-radius: 3px; + position: relative; + padding: 0 4px; + background: #333; + color: yellow; +} + +.skip-if-branch { + display: none; + margin-right: 10px; + position: relative; + padding: 0 4px; + background: #ccc; + color: white; +} +.missing-if-branch .typ, .skip-if-branch .typ { + color: inherit !important; +} +.coverage-summary { + border-collapse: collapse; + width: 100%; +} +.coverage-summary tr { border-bottom: 1px solid #bbb; } +.keyline-all { border: 1px solid #ddd; } +.coverage-summary td, .coverage-summary th { padding: 10px; } +.coverage-summary tbody { border: 1px solid #bbb; } +.coverage-summary td { border-right: 1px solid #bbb; } +.coverage-summary td:last-child { border-right: none; } +.coverage-summary th { + text-align: left; + font-weight: normal; + white-space: nowrap; +} +.coverage-summary th.file { border-right: none !important; } +.coverage-summary th.pct { } +.coverage-summary th.pic, +.coverage-summary th.abs, +.coverage-summary td.pct, +.coverage-summary td.abs { text-align: right; } +.coverage-summary td.file { white-space: nowrap; } +.coverage-summary td.pic { min-width: 120px !important; } +.coverage-summary tfoot td { } + +.coverage-summary .sorter { + height: 10px; + width: 7px; + display: inline-block; + margin-left: 0.5em; + background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent; +} +.coverage-summary .sorted .sorter { + background-position: 0 -20px; +} +.coverage-summary .sorted-desc .sorter { + background-position: 0 -10px; +} +.status-line { height: 10px; } +/* dark red */ +.red.solid, .status-line.low, .low .cover-fill { background:#C21F39 } +.low .chart { border:1px solid #C21F39 } +/* medium red */ +.cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE } +/* light red */ +.low, .cline-no { background:#FCE1E5 } +/* light green */ +.high, .cline-yes { background:rgb(230,245,208) } +/* medium green */ +.cstat-yes { background:rgb(161,215,106) } +/* dark green */ +.status-line.high, .high .cover-fill { background:rgb(77,146,33) } +.high .chart { border:1px solid rgb(77,146,33) } + + +.medium .chart { border:1px solid #666; } +.medium .cover-fill { background: #666; } + +.cbranch-no { background: yellow !important; color: #111; } + +.cstat-skip { background: #ddd; color: #111; } +.fstat-skip { background: #ddd; color: #111 !important; } +.cbranch-skip { background: #ddd !important; color: #111; } + +span.cline-neutral { background: #eaeaea; } +.medium { background: #eaeaea; } + +.cover-fill, .cover-empty { + display:inline-block; + height: 12px; +} +.chart { + line-height: 0; +} +.cover-empty { + background: white; +} +.cover-full { + border-right: none !important; +} +pre.prettyprint { + border: none !important; + padding: 0 !important; + margin: 0 !important; +} +.com { color: #999 !important; } +.ignore-none { color: #999; font-weight: normal; } + +.wrapper { + min-height: 100%; + height: auto !important; + height: 100%; + margin: 0 auto -48px; +} +.footer, .push { + height: 48px; +} diff --git a/coverage/lcov-report/index.html b/coverage/lcov-report/index.html new file mode 100644 index 0000000..9c82e31 --- /dev/null +++ b/coverage/lcov-report/index.html @@ -0,0 +1,80 @@ + + + + Code coverage report for All files + + + + + + + +
+
+

+ All files +

+
+
+ Unknown% + Statements + 0/0 +
+
+ Unknown% + Branches + 0/0 +
+
+ Unknown% + Functions + 0/0 +
+
+ Unknown% + Lines + 0/0 +
+
+
+
+
+ + + + + + + + + + + + + + + + +
FileStatementsBranchesFunctionsLines
+
+
+
+ Code coverage + generated by istanbul at Fri Mar 24 2017 13:06:19 GMT+0100 (WAT) +
+ + + + + + diff --git a/coverage/lcov-report/prettify.css b/coverage/lcov-report/prettify.css new file mode 100644 index 0000000..b317a7c --- /dev/null +++ b/coverage/lcov-report/prettify.css @@ -0,0 +1 @@ +.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} diff --git a/coverage/lcov-report/prettify.js b/coverage/lcov-report/prettify.js new file mode 100644 index 0000000..ef51e03 --- /dev/null +++ b/coverage/lcov-report/prettify.js @@ -0,0 +1 @@ +window.PR_SHOULD_USE_CONTINUATION=true;(function(){var h=["break,continue,do,else,for,if,return,while"];var u=[h,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];var p=[u,"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"];var l=[p,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"];var x=[p,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"];var R=[x,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];var r="all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes";var w=[p,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"];var s="caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END";var I=[h,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"];var f=[h,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"];var H=[h,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"];var A=[l,R,w,s+I,f,H];var e=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;var C="str";var z="kwd";var j="com";var O="typ";var G="lit";var L="pun";var F="pln";var m="tag";var E="dec";var J="src";var P="atn";var n="atv";var N="nocode";var M="(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*";function k(Z){var ad=0;var S=false;var ac=false;for(var V=0,U=Z.length;V122)){if(!(al<65||ag>90)){af.push([Math.max(65,ag)|32,Math.min(al,90)|32])}if(!(al<97||ag>122)){af.push([Math.max(97,ag)&~32,Math.min(al,122)&~32])}}}}af.sort(function(av,au){return(av[0]-au[0])||(au[1]-av[1])});var ai=[];var ap=[NaN,NaN];for(var ar=0;arat[0]){if(at[1]+1>at[0]){an.push("-")}an.push(T(at[1]))}}an.push("]");return an.join("")}function W(al){var aj=al.source.match(new RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g"));var ah=aj.length;var an=[];for(var ak=0,am=0;ak=2&&ai==="["){aj[ak]=X(ag)}else{if(ai!=="\\"){aj[ak]=ag.replace(/[a-zA-Z]/g,function(ao){var ap=ao.charCodeAt(0);return"["+String.fromCharCode(ap&~32,ap|32)+"]"})}}}}return aj.join("")}var aa=[];for(var V=0,U=Z.length;V=0;){S[ac.charAt(ae)]=Y}}var af=Y[1];var aa=""+af;if(!ag.hasOwnProperty(aa)){ah.push(af);ag[aa]=null}}ah.push(/[\0-\uffff]/);V=k(ah)})();var X=T.length;var W=function(ah){var Z=ah.sourceCode,Y=ah.basePos;var ad=[Y,F];var af=0;var an=Z.match(V)||[];var aj={};for(var ae=0,aq=an.length;ae=5&&"lang-"===ap.substring(0,5);if(am&&!(ai&&typeof ai[1]==="string")){am=false;ap=J}if(!am){aj[ag]=ap}}var ab=af;af+=ag.length;if(!am){ad.push(Y+ab,ap)}else{var al=ai[1];var ak=ag.indexOf(al);var ac=ak+al.length;if(ai[2]){ac=ag.length-ai[2].length;ak=ac-al.length}var ar=ap.substring(5);B(Y+ab,ag.substring(0,ak),W,ad);B(Y+ab+ak,al,q(ar,al),ad);B(Y+ab+ac,ag.substring(ac),W,ad)}}ah.decorations=ad};return W}function i(T){var W=[],S=[];if(T.tripleQuotedStrings){W.push([C,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,null,"'\""])}else{if(T.multiLineStrings){W.push([C,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"])}else{W.push([C,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"])}}if(T.verbatimStrings){S.push([C,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null])}var Y=T.hashComments;if(Y){if(T.cStyleComments){if(Y>1){W.push([j,/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"])}else{W.push([j,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"])}S.push([C,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,null])}else{W.push([j,/^#[^\r\n]*/,null,"#"])}}if(T.cStyleComments){S.push([j,/^\/\/[^\r\n]*/,null]);S.push([j,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}if(T.regexLiterals){var X=("/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/");S.push(["lang-regex",new RegExp("^"+M+"("+X+")")])}var V=T.types;if(V){S.push([O,V])}var U=(""+T.keywords).replace(/^ | $/g,"");if(U.length){S.push([z,new RegExp("^(?:"+U.replace(/[\s,]+/g,"|")+")\\b"),null])}W.push([F,/^\s+/,null," \r\n\t\xA0"]);S.push([G,/^@[a-z_$][a-z_$@0-9]*/i,null],[O,/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],[F,/^[a-z_$][a-z_$@0-9]*/i,null],[G,new RegExp("^(?:0x[a-f0-9]+|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)(?:e[+\\-]?\\d+)?)[a-z]*","i"),null,"0123456789"],[F,/^\\[\s\S]?/,null],[L,/^.[^\s\w\.$@\'\"\`\/\#\\]*/,null]);return g(W,S)}var K=i({keywords:A,hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true});function Q(V,ag){var U=/(?:^|\s)nocode(?:\s|$)/;var ab=/\r\n?|\n/;var ac=V.ownerDocument;var S;if(V.currentStyle){S=V.currentStyle.whiteSpace}else{if(window.getComputedStyle){S=ac.defaultView.getComputedStyle(V,null).getPropertyValue("white-space")}}var Z=S&&"pre"===S.substring(0,3);var af=ac.createElement("LI");while(V.firstChild){af.appendChild(V.firstChild)}var W=[af];function ae(al){switch(al.nodeType){case 1:if(U.test(al.className)){break}if("BR"===al.nodeName){ad(al);if(al.parentNode){al.parentNode.removeChild(al)}}else{for(var an=al.firstChild;an;an=an.nextSibling){ae(an)}}break;case 3:case 4:if(Z){var am=al.nodeValue;var aj=am.match(ab);if(aj){var ai=am.substring(0,aj.index);al.nodeValue=ai;var ah=am.substring(aj.index+aj[0].length);if(ah){var ak=al.parentNode;ak.insertBefore(ac.createTextNode(ah),al.nextSibling)}ad(al);if(!ai){al.parentNode.removeChild(al)}}}break}}function ad(ak){while(!ak.nextSibling){ak=ak.parentNode;if(!ak){return}}function ai(al,ar){var aq=ar?al.cloneNode(false):al;var ao=al.parentNode;if(ao){var ap=ai(ao,1);var an=al.nextSibling;ap.appendChild(aq);for(var am=an;am;am=an){an=am.nextSibling;ap.appendChild(am)}}return aq}var ah=ai(ak.nextSibling,0);for(var aj;(aj=ah.parentNode)&&aj.nodeType===1;){ah=aj}W.push(ah)}for(var Y=0;Y=S){ah+=2}if(V>=ap){Z+=2}}}var t={};function c(U,V){for(var S=V.length;--S>=0;){var T=V[S];if(!t.hasOwnProperty(T)){t[T]=U}else{if(window.console){console.warn("cannot override language handler %s",T)}}}}function q(T,S){if(!(T&&t.hasOwnProperty(T))){T=/^\s*]*(?:>|$)/],[j,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[L,/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]);c(g([[F,/^[\s]+/,null," \t\r\n"],[n,/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[[m,/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],[P,/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[L,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);c(g([],[[n,/^[\s\S]+/]]),["uq.val"]);c(i({keywords:l,hashComments:true,cStyleComments:true,types:e}),["c","cc","cpp","cxx","cyc","m"]);c(i({keywords:"null,true,false"}),["json"]);c(i({keywords:R,hashComments:true,cStyleComments:true,verbatimStrings:true,types:e}),["cs"]);c(i({keywords:x,cStyleComments:true}),["java"]);c(i({keywords:H,hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);c(i({keywords:I,hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);c(i({keywords:s,hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);c(i({keywords:f,hashComments:true,multiLineStrings:true,regexLiterals:true}),["rb"]);c(i({keywords:w,cStyleComments:true,regexLiterals:true}),["js"]);c(i({keywords:r,hashComments:3,cStyleComments:true,multilineStrings:true,tripleQuotedStrings:true,regexLiterals:true}),["coffee"]);c(g([],[[C,/^[\s\S]+/]]),["regex"]);function d(V){var U=V.langExtension;try{var S=a(V.sourceNode);var T=S.sourceCode;V.sourceCode=T;V.spans=S.spans;V.basePos=0;q(U,T)(V);D(V)}catch(W){if("console" in window){console.log(W&&W.stack?W.stack:W)}}}function y(W,V,U){var S=document.createElement("PRE");S.innerHTML=W;if(U){Q(S,U)}var T={langExtension:V,numberLines:U,sourceNode:S};d(T);return S.innerHTML}function b(ad){function Y(af){return document.getElementsByTagName(af)}var ac=[Y("pre"),Y("code"),Y("xmp")];var T=[];for(var aa=0;aa=0){var ah=ai.match(ab);var am;if(!ah&&(am=o(aj))&&"CODE"===am.tagName){ah=am.className.match(ab)}if(ah){ah=ah[1]}var al=false;for(var ak=aj.parentNode;ak;ak=ak.parentNode){if((ak.tagName==="pre"||ak.tagName==="code"||ak.tagName==="xmp")&&ak.className&&ak.className.indexOf("prettyprint")>=0){al=true;break}}if(!al){var af=aj.className.match(/\blinenums\b(?::(\d+))?/);af=af?af[1]&&af[1].length?+af[1]:true:false;if(af){Q(aj,af)}S={langExtension:ah,sourceNode:aj,numberLines:af};d(S)}}}if(X]*(?:>|$)/],[PR.PR_COMMENT,/^<\!--[\s\S]*?(?:-\->|$)/],[PR.PR_PUNCTUATION,/^(?:<[%?]|[%?]>)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["lang-",/^]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-handlebars",/^]*type\s*=\s*['"]?text\/x-handlebars-template['"]?\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-js",/^]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i],[PR.PR_DECLARATION,/^{{[#^>/]?\s*[\w.][^}]*}}/],[PR.PR_DECLARATION,/^{{&?\s*[\w.][^}]*}}/],[PR.PR_DECLARATION,/^{{{>?\s*[\w.][^}]*}}}/],[PR.PR_COMMENT,/^{{![^}]*}}/]]),["handlebars","hbs"]);PR.registerLangHandler(PR.createSimpleLexer([[PR.PR_PLAIN,/^[ \t\r\n\f]+/,null," \t\r\n\f"]],[[PR.PR_STRING,/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],[PR.PR_STRING,/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],[PR.PR_KEYWORD,/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],[PR.PR_COMMENT,/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],[PR.PR_COMMENT,/^(?:)/],[PR.PR_LITERAL,/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],[PR.PR_LITERAL,/^#(?:[0-9a-f]{3}){1,2}/i],[PR.PR_PLAIN,/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],[PR.PR_PUNCTUATION,/^[^\s\w\'\"]+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[[PR.PR_KEYWORD,/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[[PR.PR_STRING,/^[^\)\"\']+/]]),["css-str"]); diff --git a/coverage/lcov-report/sort-arrow-sprite.png b/coverage/lcov-report/sort-arrow-sprite.png new file mode 100644 index 0000000..03f704a Binary files /dev/null and b/coverage/lcov-report/sort-arrow-sprite.png differ diff --git a/coverage/lcov-report/sorter.js b/coverage/lcov-report/sorter.js new file mode 100644 index 0000000..6c5034e --- /dev/null +++ b/coverage/lcov-report/sorter.js @@ -0,0 +1,158 @@ +var addSorting = (function () { + "use strict"; + var cols, + currentSort = { + index: 0, + desc: false + }; + + // returns the summary table element + function getTable() { return document.querySelector('.coverage-summary'); } + // returns the thead element of the summary table + function getTableHeader() { return getTable().querySelector('thead tr'); } + // returns the tbody element of the summary table + function getTableBody() { return getTable().querySelector('tbody'); } + // returns the th element for nth column + function getNthColumn(n) { return getTableHeader().querySelectorAll('th')[n]; } + + // loads all columns + function loadColumns() { + var colNodes = getTableHeader().querySelectorAll('th'), + colNode, + cols = [], + col, + i; + + for (i = 0; i < colNodes.length; i += 1) { + colNode = colNodes[i]; + col = { + key: colNode.getAttribute('data-col'), + sortable: !colNode.getAttribute('data-nosort'), + type: colNode.getAttribute('data-type') || 'string' + }; + cols.push(col); + if (col.sortable) { + col.defaultDescSort = col.type === 'number'; + colNode.innerHTML = colNode.innerHTML + ''; + } + } + return cols; + } + // attaches a data attribute to every tr element with an object + // of data values keyed by column name + function loadRowData(tableRow) { + var tableCols = tableRow.querySelectorAll('td'), + colNode, + col, + data = {}, + i, + val; + for (i = 0; i < tableCols.length; i += 1) { + colNode = tableCols[i]; + col = cols[i]; + val = colNode.getAttribute('data-value'); + if (col.type === 'number') { + val = Number(val); + } + data[col.key] = val; + } + return data; + } + // loads all row data + function loadData() { + var rows = getTableBody().querySelectorAll('tr'), + i; + + for (i = 0; i < rows.length; i += 1) { + rows[i].data = loadRowData(rows[i]); + } + } + // sorts the table using the data for the ith column + function sortByIndex(index, desc) { + var key = cols[index].key, + sorter = function (a, b) { + a = a.data[key]; + b = b.data[key]; + return a < b ? -1 : a > b ? 1 : 0; + }, + finalSorter = sorter, + tableBody = document.querySelector('.coverage-summary tbody'), + rowNodes = tableBody.querySelectorAll('tr'), + rows = [], + i; + + if (desc) { + finalSorter = function (a, b) { + return -1 * sorter(a, b); + }; + } + + for (i = 0; i < rowNodes.length; i += 1) { + rows.push(rowNodes[i]); + tableBody.removeChild(rowNodes[i]); + } + + rows.sort(finalSorter); + + for (i = 0; i < rows.length; i += 1) { + tableBody.appendChild(rows[i]); + } + } + // removes sort indicators for current column being sorted + function removeSortIndicators() { + var col = getNthColumn(currentSort.index), + cls = col.className; + + cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, ''); + col.className = cls; + } + // adds sort indicators for current column being sorted + function addSortIndicators() { + getNthColumn(currentSort.index).className += currentSort.desc ? ' sorted-desc' : ' sorted'; + } + // adds event listeners for all sorter widgets + function enableUI() { + var i, + el, + ithSorter = function ithSorter(i) { + var col = cols[i]; + + return function () { + var desc = col.defaultDescSort; + + if (currentSort.index === i) { + desc = !currentSort.desc; + } + sortByIndex(i, desc); + removeSortIndicators(); + currentSort.index = i; + currentSort.desc = desc; + addSortIndicators(); + }; + }; + for (i =0 ; i < cols.length; i += 1) { + if (cols[i].sortable) { + // add the click event handler on the th so users + // dont have to click on those tiny arrows + el = getNthColumn(i).querySelector('.sorter').parentElement; + if (el.addEventListener) { + el.addEventListener('click', ithSorter(i)); + } else { + el.attachEvent('onclick', ithSorter(i)); + } + } + } + } + // adds sorting functionality to the UI + return function () { + if (!getTable()) { + return; + } + cols = loadColumns(); + loadData(cols); + addSortIndicators(); + enableUI(); + }; +})(); + +window.addEventListener('load', addSorting); diff --git a/coverage/lcov.info b/coverage/lcov.info new file mode 100644 index 0000000..e69de29 diff --git a/package.json b/package.json index 0b9ee3b..45a5166 100644 --- a/package.json +++ b/package.json @@ -47,12 +47,15 @@ "babel-preset-react": "^6.23.0", "babel-preset-stage-0": "^6.22.0", "babel-register": "^6.18.0", + "enzyme": "^2.7.1", + "enzyme-to-json": "^1.5.0", "eslint": "^3.12.2", "flow-bin": "^0.42.0", "gzip-size-cli": "^2.0.0", "jest": "^19.0.2", "npm-run-all": "^4.0.2", "react": "^15.4.2", + "react-addons-test-utils": "^15.4.2", "react-dom": "^15.4.2", "rollup": "^0.41.4", "rollup-plugin-babel": "^2.7.1", diff --git a/src/index.js b/src/index.js index 9fe4dfd..696a4c6 100644 --- a/src/index.js +++ b/src/index.js @@ -16,64 +16,85 @@ type Props = { name: string, width: number, height: number, + 'data-rough-id': string, onRender: () => void, options: { - data: Array> | string + id: string, + data: string | Array | Array> } } -class ReactRough extends React.Component { +class RoughComponent extends React.Component { props: Props; name: string; canvas: HTMLCanvasElement; - _createCanvas() { - this.canvas = document.createElement('canvas'); - document.body.appendChild(this.canvas); + _prepareRough() { + let canvas, rough; + + // Transverse through child components + if (this.props.children) { + // Is Canvas Created? + // Yea, fetch the canvas (0_0) + canvas = [ + ...document.querySelectorAll('[data-rough-id]') + ].find(rough => rough.dataset.roughId === this.props['data-rough-id']); + + if (canvas === undefined) { + // Create one ;) + canvas = document.createElement('canvas'); + canvas.dataset.roughId = this.props['data-rough-id']; + document.body.appendChild(canvas); + + // Create RoughCanvas + rough = new RoughCanvas(canvas, this.props.width, this.props.height); + } else { return; } + + React.Children.toArray(this.props.children).forEach(child => { + // Create instance of children + let cc = new child.type(); + this._updateCanvas({ name: cc.name, rough, ...child.props }) + }); + + } else { + // No Child, Create a canvas without an id :p + canvas = document.createElement('canvas'); + document.body.appendChild(canvas); + + rough = new RoughCanvas(canvas, this.props.width, this.props.height); + + this._updateCanvas({ name: this.name, rough, ...this.props }); } +} + +_updateCanvas({ name, rough, onRender, options: { data, ...rest }}) { + let shape; + + // Apply our supplied data to rough + // path => String, curve and polygon => Array + if (name.match(/curve|path|polygon/)) { + shape = rough[name](data); + } else { + shape = rough[name](...data); + } + + // Iterate over props and apply each prop to our element + Object.keys(rest).forEach(prop => shape[prop] = rest[prop]); - _updateCanvas() { - const { - width, - height, - onRender, - options: { data, ...rest } - } = this.props; - - let rough = new RoughCanvas(this.canvas, width, height); - - // Iterate over props and apply each prop to our element - Object.keys(rest).forEach(prop => rough[prop] = rest[prop]); - - let shape; - - // Apply our supplied data to rough - // path => String, curve and polygon => Array - if (this.name.match(/curve|path|polygon/)) { - shape = rough[this.name](data); - } else { - shape = rough[this.name](...data); - } - - // Apply our Hook - if (typeof onRender !== 'undefined') { - onRender(shape); - } + // Apply our Hook + if (typeof onRender !== 'undefined') { + onRender(shape); } +} _deleteCanvas() { document.body.removeChild(this.canvas); } componentDidMount() { - this._createCanvas(); - this._updateCanvas(); - } - - componentDidUpdate() { - this._updateCanvas(); + this._prepareRough(); } componentWillUnmount() { @@ -85,35 +106,39 @@ class ReactRough extends React.Component { } } -class Arc extends ReactRough { +class ReactRough extends RoughComponent { + name = 'react-rough'; +} + +class Arc extends RoughComponent { name = 'arc'; } -class Circle extends ReactRough { +class Circle extends RoughComponent { name = 'circle'; } -class Curve extends ReactRough { +class Curve extends RoughComponent { name = 'curve'; } -class Ellipse extends ReactRough { +class Ellipse extends RoughComponent { name = 'ellipse'; } -class Line extends ReactRough { +class Line extends RoughComponent { name = 'line'; } -class Path extends ReactRough { +class Path extends RoughComponent { name = 'path'; } -class Polygon extends ReactRough { +class Polygon extends RoughComponent { name = 'polygon'; } -class Rectangle extends ReactRough { +class Rectangle extends RoughComponent { name = 'rectangle'; } diff --git a/yarn.lock b/yarn.lock index cadb5dc..25414c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -925,6 +925,10 @@ bcrypt-pbkdf@^1.0.0: dependencies: tweetnacl "^0.14.3" +boolbase@~1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" + boom@2.x.x: version "2.10.1" resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f" @@ -1037,6 +1041,27 @@ chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3: strip-ansi "^3.0.0" supports-color "^2.0.0" +cheerio@^0.22.0: + version "0.22.0" + resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.22.0.tgz#a9baa860a3f9b595a6b81b1a86873121ed3a269e" + dependencies: + css-select "~1.2.0" + dom-serializer "~0.1.0" + entities "~1.1.1" + htmlparser2 "^3.9.1" + lodash.assignin "^4.0.9" + lodash.bind "^4.1.4" + lodash.defaults "^4.0.1" + lodash.filter "^4.4.0" + lodash.flatten "^4.2.0" + lodash.foreach "^4.3.0" + lodash.map "^4.4.0" + lodash.merge "^4.4.0" + lodash.pick "^4.2.1" + lodash.reduce "^4.4.0" + lodash.reject "^4.4.0" + lodash.some "^4.4.0" + ci-info@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.0.0.tgz#dc5285f2b4e251821683681c381c3388f46ec534" @@ -1141,6 +1166,19 @@ cryptiles@2.x.x: dependencies: boom "2.x.x" +css-select@~1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858" + dependencies: + boolbase "~1.0.0" + css-what "2.1" + domutils "1.5.1" + nth-check "~1.0.1" + +css-what@2.1: + version "2.1.0" + resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd" + cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0": version "0.3.2" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b" @@ -1229,6 +1267,34 @@ doctrine@^1.2.2: esutils "^2.0.2" isarray "^1.0.0" +dom-serializer@0, dom-serializer@~0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82" + dependencies: + domelementtype "~1.1.1" + entities "~1.1.1" + +domelementtype@1, domelementtype@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2" + +domelementtype@~1.1.1: + version "1.1.3" + resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b" + +domhandler@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.3.0.tgz#2de59a0822d5027fabff6f032c2b25a2a8abe738" + dependencies: + domelementtype "1" + +domutils@1.5.1, domutils@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf" + dependencies: + dom-serializer "0" + domelementtype "1" + duplexer@^0.1.1, duplexer@~0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1" @@ -1249,6 +1315,36 @@ encoding@^0.1.11: dependencies: iconv-lite "~0.4.13" +entities@^1.1.1, entities@~1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0" + +enzyme-to-json@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-1.5.0.tgz#bb94f21346866d68378adc9b26856dd6e2bfa60b" + dependencies: + lodash.filter "^4.6.0" + lodash.isnil "^4.0.0" + lodash.isplainobject "^4.0.6" + lodash.omitby "^4.5.0" + lodash.range "^3.2.0" + object-values "^1.0.0" + object.entries "^1.0.3" + +enzyme@^2.7.1: + version "2.7.1" + resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-2.7.1.tgz#76370e1d99e91f73091bb8c4314b7c128cc2d621" + dependencies: + cheerio "^0.22.0" + function.prototype.name "^1.0.0" + is-subset "^0.1.1" + lodash "^4.17.2" + object-is "^1.0.1" + object.assign "^4.0.4" + object.entries "^1.0.3" + object.values "^1.0.3" + uuid "^2.0.3" + "errno@>=0.1.1 <0.2.0-0": version "0.1.4" resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d" @@ -1261,7 +1357,7 @@ error-ex@^1.2.0: dependencies: is-arrayish "^0.2.1" -es-abstract@^1.4.3: +es-abstract@^1.4.3, es-abstract@^1.6.1: version "1.7.0" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.7.0.tgz#dfade774e01bfcd97f96180298c449c8623fb94c" dependencies: @@ -1617,6 +1713,14 @@ function-bind@^1.0.2, function-bind@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771" +function.prototype.name@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.0.0.tgz#5f523ca64e491a5f95aba80cc1e391080a14482e" + dependencies: + define-properties "^1.1.2" + function-bind "^1.1.0" + is-callable "^1.1.2" + generate-function@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74" @@ -1773,6 +1877,17 @@ html-encoding-sniffer@^1.0.1: dependencies: whatwg-encoding "^1.0.1" +htmlparser2@^3.9.1: + version "3.9.2" + resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338" + dependencies: + domelementtype "^1.3.0" + domhandler "^2.3.0" + domutils "^1.5.1" + entities "^1.1.1" + inherits "^2.0.1" + readable-stream "^2.0.2" + http-signature@~1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf" @@ -1806,7 +1921,7 @@ inflight@^1.0.4: once "^1.3.0" wrappy "1" -inherits@2, inherits@^2.0.3, inherits@~2.0.1: +inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1: version "2.0.3" resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" @@ -1856,7 +1971,7 @@ is-builtin-module@^1.0.0: dependencies: builtin-modules "^1.0.0" -is-callable@^1.1.1, is-callable@^1.1.3: +is-callable@^1.1.1, is-callable@^1.1.2, is-callable@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2" @@ -1969,6 +2084,10 @@ is-stream@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" +is-subset@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6" + is-symbol@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572" @@ -2413,11 +2532,75 @@ locate-path@^2.0.0: p-locate "^2.0.0" path-exists "^3.0.0" +lodash.assignin@^4.0.9: + version "4.2.0" + resolved "https://registry.yarnpkg.com/lodash.assignin/-/lodash.assignin-4.2.0.tgz#ba8df5fb841eb0a3e8044232b0e263a8dc6a28a2" + +lodash.bind@^4.1.4: + version "4.2.1" + resolved "https://registry.yarnpkg.com/lodash.bind/-/lodash.bind-4.2.1.tgz#7ae3017e939622ac31b7d7d7dcb1b34db1690d35" + +lodash.defaults@^4.0.1: + version "4.2.0" + resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c" + +lodash.filter@^4.4.0, lodash.filter@^4.6.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.filter/-/lodash.filter-4.6.0.tgz#668b1d4981603ae1cc5a6fa760143e480b4c4ace" + +lodash.flatten@^4.2.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f" + +lodash.foreach@^4.3.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53" + +lodash.isnil@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/lodash.isnil/-/lodash.isnil-4.0.0.tgz#49e28cd559013458c814c5479d3c663a21bfaa6c" + +lodash.isplainobject@^4.0.6: + version "4.0.6" + resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb" + +lodash.map@^4.4.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3" + +lodash.merge@^4.4.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5" + +lodash.omitby@^4.5.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.omitby/-/lodash.omitby-4.6.0.tgz#5c15ff4754ad555016b53c041311e8f079204791" + +lodash.pick@^4.2.1: + version "4.4.0" + resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3" + lodash.pickby@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff" -lodash@^4.0.0, lodash@^4.14.0, lodash@^4.2.0, lodash@^4.3.0: +lodash.range@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/lodash.range/-/lodash.range-3.2.0.tgz#f461e588f66683f7eadeade513e38a69a565a15d" + +lodash.reduce@^4.4.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.reduce/-/lodash.reduce-4.6.0.tgz#f1ab6b839299ad48f784abbf476596f03b914d3b" + +lodash.reject@^4.4.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.reject/-/lodash.reject-4.6.0.tgz#80d6492dc1470864bbf583533b651f42a9f52415" + +lodash.some@^4.4.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d" + +lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.3.0: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -2583,6 +2766,12 @@ npm-run-all@^4.0.2: shell-quote "^1.6.1" string.prototype.padend "^3.0.0" +nth-check@~1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4" + dependencies: + boolbase "~1.0.0" + number-is-nan@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d" @@ -2599,10 +2788,35 @@ object-assign@^4.0.1, object-assign@^4.1.0: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" -object-keys@^1.0.8: +object-is@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6" + +object-keys@^1.0.10, object-keys@^1.0.8: version "1.0.11" resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d" +object-values@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/object-values/-/object-values-1.0.0.tgz#72af839630119e5b98c3b02bb8c27e3237158105" + +object.assign@^4.0.4: + version "4.0.4" + resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.0.4.tgz#b1c9cc044ef1b9fe63606fc141abbb32e14730cc" + dependencies: + define-properties "^1.1.2" + function-bind "^1.1.0" + object-keys "^1.0.10" + +object.entries@^1.0.3: + version "1.0.4" + resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.0.4.tgz#1bf9a4dd2288f5b33f3a993d257661f05d161a5f" + dependencies: + define-properties "^1.1.2" + es-abstract "^1.6.1" + function-bind "^1.1.0" + has "^1.0.1" + object.omit@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa" @@ -2610,6 +2824,15 @@ object.omit@^2.0.0: for-own "^0.1.4" is-extendable "^0.1.1" +object.values@^1.0.3: + version "1.0.4" + resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.0.4.tgz#e524da09b4f66ff05df457546ec72ac99f13069a" + dependencies: + define-properties "^1.1.2" + es-abstract "^1.6.1" + function-bind "^1.1.0" + has "^1.0.1" + once@^1.3.0, once@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" @@ -2810,6 +3033,13 @@ randomatic@^1.1.3: is-number "^2.0.2" kind-of "^3.0.2" +react-addons-test-utils@^15.4.2: + version "15.4.2" + resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.2.tgz#93bcaa718fcae7360d42e8fb1c09756cc36302a2" + dependencies: + fbjs "^0.8.4" + object-assign "^4.1.0" + react-dom@^15.4.2: version "15.4.2" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.2.tgz#015363f05b0a1fd52ae9efdd3a0060d90695208f" @@ -2849,7 +3079,7 @@ read-pkg@^2.0.0: normalize-package-data "^2.3.2" path-type "^2.0.0" -readable-stream@^2.2.2: +readable-stream@^2.0.2, readable-stream@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.2.tgz#a9e6fec3c7dda85f8bb1b3ba7028604556fc825e" dependencies: @@ -3385,6 +3615,10 @@ util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" +uuid@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a" + uuid@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"