reactjs / react-art Goto Github PK
View Code? Open in Web Editor NEWReact Bridge to the ART Drawing Library
License: Other
React Bridge to the ART Drawing Library
License: Other
0.9.0 isn't available on npm and the current npm latest (0.7.9) isn't compatible with react 0.9.x
/cc @sebmarkbage
After adding the React Art .xcodeproj
to my build phases, I get this issue every once in a while. I remove its fbjs
package from node_modules
and it fixes itself.
I'm wondering if there is another way that avoids this name collision.
Here's the exact issue I get:
Failed to build DependencyGraph: Naming collision detected: /Users/jamesgillmore/React/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/react-art/node_modules/fbjs/flow/include/TouchEventUtils.js collides with /Users/jamesgillmore/React/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/react-art/node_modules/fbjs/lib/TouchEventUtils.js
Error: Naming collision detected: /Users/jamesgillmore/React/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/react-art/node_modules/fbjs/flow/include/TouchEventUtils.js collides with /Users/jamesgillmore/React/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/react-art/node_modules/fbjs/lib/TouchEventUtils.js
at HasteMap._updateHasteMap (HasteMap.js:132:13)
at HasteMap.js:103:28
at tryCallOne (/Users/jamesgillmore/React/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/promise/lib/core.js:37:12)
at /Users/jamesgillmore/React/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/promise/lib/core.js:123:15
at flush (/Users/jamesgillmore/React/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/asap/raw.js:50:29)
at _combinedTickCallback (node.js:370:9)
at process._tickCallback (node.js:401:11)
Sometimes its other files in fbjs/flow
that collide.
I use svg clip-paths all the time to do cool things, are there any plans to bring clip-path to react-art? Can't seem to find anything about it in the codebase.
react-art
is reaching into the lib
folder of react
and using internal functionality which is not exposed when React is bundled on its own (eg the cdnjs version).
See here:
var ReactInstanceMap = require('react/lib/ReactInstanceMap');
var ReactMultiChild = require('react/lib/ReactMultiChild');
var ReactUpdates = require('react/lib/ReactUpdates');
var assign = require('react/lib/Object.assign');
I would expect to be able to use a tool such as browserify-shim
to indicate in my app that a global instance of React exists (eg; the cdn'd version on window.React
). However, due to the references to react/lib/X
, which are not exposed, it causes things to break.
When using browserify-shim
with the following in my package.json
:
"browserify-shim": {
"react": "global:React",
"react-dom": "global:ReactDOM",
"react-art": {
"depends": [
"react"
]
}
},
I get the error:
Error: Cannot find module 'react/lib/ReactInstanceMap' from '/Users/jtelford/dev/test/node_modules/react-art/lib'
How can we stop react-art
from reaching into react/lib/X
?
It doesn't seem to be possible to bind event handlers to the root Surface object. Given the following, the mouseDown
handler never gets called:
<Surface onMouseDown={@mouseDown}>...</Surface>
Hi,
I'm facing a problem rendering the Surface
component.
Here is my component:
export default class RangeBar extends React.Component {
render() {
return (
<div style={{ width: '300px', height: '100px' }}>
<Surface
width={300}
height={100}
style={{ cursor: 'pointer' }}>
<Group x={0} y={0}>
<Shape fill="#7BC7BA" d="M0 0 h 100 v 5 h -100 Z" />
</Group>
</Surface>
</div>
);
}
}
What happens is that I get this error:
Uncaught TypeError: element.getContext is not a function
Class.initialize @ surface.js:25
proto.constructor @ class.js:10
React.createClass.componentDidMount @ ReactART.js:190
Looking at https://github.com/reactjs/react-art/blob/master/src/ReactART.js#L190 the this.domNode
passed to Mode.Surface()
isn't a dom node, but a react element.
Is this a bug or am I missing something?
Thanks :)
Hi all,
I'm using webpack to create a react app along with react-art.
I keep getting the error Cannot read property 'getPooled' of null
when I'm creating a simple surface such as
<Surface height={100} width={100}> <Shape d={'M36.7,8.1c-3.2,0-3.2-5,0-5C39.9,3.1,39.9,8.1,36.7,8.1L36.7,8.1z'} fill={'#123123'} /> </Surface>
Has anybody ran into this issue with webpack, or is this a possible problem with react-art? Thanks!
(I'm mostly only familiar with React ART within iOS, so maybe it's different for webpack? no idea)
Hy!
I would like to use it but I find it difficult now.
At least add your example ( http://jsfiddle.net/JMZc5/1/ ) as it helped me more than the readme in the repo.
Also some philosophy and best practices would be a help. Thanks for this repo anyway (:
I've got the following error : Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
while creating a simple Rectangle :
render: function() {
return (
<Surface
width={700}
height={700}>
<Rectangle
width={50}
height={50}
stroke="green"
fill="blue"/>
</Surface>
);
},
Needs to be able to require React internals (react/lib/...) and ART. This repo is npm compatible.
Travis CI would be super great.
In modes/svg/base.js, I believe the change would be something like:
stroke: function(color, width, cap, join, dash){
var element = this.element;
element.setAttribute('stroke-width', (width != null) ? width : 1);
element.setAttribute('stroke-linecap', (cap != null) ? cap : 'round');
element.setAttribute('stroke-linejoin', (join != null) ? join : 'round');
if (dash) {
element.setAttribute('stroke-dasharray', dash.join(','));
}
this._setColor('stroke', color);
return this;
}
I cant get react-art to render on the server because it relies on:
require('art/modes/fast'); // Flip this to DOM mode for debugging
line 14 ReactART.js
is it possible to load library in a server mode? or some mode option?
Hi,
I'm converting a somewhat complex SVG component to work with ReactART. It's a huge thrill to see it rendering to canvas without rewriting the codebase, but the experience of learning the API has been a pretty painful groking of source. That's part lack of documentation but also that the prop names are sometimes consistent with SVG and other times not.
React has, except in cases of naming confict, maintained attribute similarity with HTML with an easy-enough camelCase translation. I think it would be a good approach for ReactART too. It would reduce cognitive load for developers by using an already familiar API, and it would make code reuse from SVG to ReactART all the easier.
I recognise that it could only ever be a subset of the ginormous SVG API, but a clearly defined subset could still be a lot easier to get up to speed with. At present, the API sometimes aligns with SVG, other times not, with no clear pattern for mental translation.
Examples that spring to mind...
opacity
= opacity
(same, i.e. not blend
as in ART)stroke-dasharray
(string) = strokeDash
(array)stroke-linecap
(string) = strokeCap
(string)text-anchor
(start/middle/end) = alignment
(left/center/right)d
for path property, mimicking SVG<rect>
= <Rectangle>
What do you think?
In a project I can't run [email protected] and [email protected] together. So, I had to uninstall [email protected] and make changes in the config.sys for react-art to use [email protected]. When I run the app, I get the following error:
Error loading http://localhost:5000/jspm_packages/npm/[email protected]/lib/emptyObject.js
The paths generated in illustrator look close enough to what's used in the examples. Illustrator seems to generate SVG paths with hyphens though:
M382.79,279.74l-29,18a1.48,1.48,0,0,1-2.27-.95V282.1l8.7,6h0a1.12,1.12,0,0,0,.75.29,1.14,1.14,0,0,0,1.14-1.14,1.12,1.12,0,0,0-.05-0.33h0a1.11,1.11,0,0,0-.12-0.27L358,277.78l11.74-9.61,13,8.08a2,2,0,0,1,0,3.49h0Z
Here's what is working from the examples:
var RED_DOT_PATH = "M12.5,17 C16.0898511,17 19,14.0898511 19,10.5 C19,6.91014895 16.0898511,4 12.5,4 C8.91014895,4 6,6.91014895 6,10.5 C6,14.0898511 8.91014895,17 12.5,17 Z M12.5,17";
How do I generate (or convert) to something like that using Illustrator and exporting SVGs?
FAIL __tests__/ReactART-test.js
● Runtime Error
Error: Cannot find module 'react/lib/Object.assign' from '/Users/raohai/works/react-art/src/ReactART.js'
https://github.com/reactjs/react-art/blob/master/src/ReactART.js#L27
Is it possible to apply a LinearGradient to a stroke on a Shape?
I hit a problem where subsequent render iterations on a Shape with a key in a collection didn't modify the property. The original bound mousedown event handler was still being used by the ART Shape. Checking the code, does Shape
process componentWillReceiveProps
? I can see the call to applyNodeProps
but it's not clear if new event handlers are re-applied.
I don't know if it's just me, but it seems like doing this is a bit harsh for performance. There's a lot going on behind the scenes right (like React doing some diffing algorithms every frame each time render is called based on the state changing every 20 ms)?
It seems to me (correct me if I'm wrong) that React is better suited for rendering tree-like data structures (for example, rendering the structure of a DOM tree or the structure of a Three.js scene graph) but not for animating things in that structure at 60fps (less than 60fps in the case of a 20ms tick that isn't using requestAnimationFrame).
It seems to me that animating things like rotation (things that don't modify the nested structure rendered with React) should better be left to some other mechanism outside of React, a method that doesn't incur the performance cost of React's inner workings every frame. For example, I think a better approach would be to use React to change a state variable that specifies the "state" of an animation and for a separate handler to handle how that animation happens, using the vanilla API of the ART library. It'd be similar to using CSS classes to specify different states of animation for DOM elements, with CSS transitions between those states.
A couple weeks ago you upgraded the dependencies for react 15.x, but didn't publish a new version to npm, which makes this module hard to install. Could you possibly bump the version number for this module to 0.15.0 and then publish a new version?
NPM for react-art is dependent on React 0.8.0, but this version does not contain:
DOMPropertyOperations.createMarkupForID function which is used in react-art. It means that current react-art npm does not work even for most simple things.
Hi there!
I'm converting a react library from svg to react-art, and I got hung up on using colors like "tomato", which cause an error, and result in nothing being rendered. I tracked the problem down to the art library, and opened a PR there. sebmarkbage/art#12. I'd love a version bump whenever that lands.
Thanks!
hello!
Thanks for this awesome library! As I was playing around with the demo page, I had to search through the source code to find which props to set in order to get certain functionality to work (for example, scaleX
and scaleY
for the Group
component).
Is adding more documentation for the API already on the project roadmap or would you accept a PR for this? Thanks!
Another question to do with a similar project to this. I would like to hook into React's event system to dispatch events (to begin with keydown
) through the tree, bubbling from my target which in this case is not a DOM node but a custom React component that is backed by a scene graph node in a WebGL library, constructed similarly to the ReactART components. Because of this the target of the native browser event is of course not the actual target React component I would like to propogate from.
To dispatch I see I can do something like this:
ReactEventListener.dispatchEvent(EventConstants.topLevelTypes.topKeyDown, browserEvent);
But that leads to the ReactMount module attempting to iterate through the ancestors using a mapping to DOM nodes. Is there a suggested way to change this behavior so it can receive my desired target ReactComponent and walk up the tree from that instead, to execute the event handling?
I have read the issue 17 and test source.
#17
https://github.com/reactjs/react-art/blob/master/src/__tests__/ReactART-test.js#L55-L59
And I think there is no way to change the render mode.
In ReactART.js, there is requiring the art/modes/fast, that decide the mode used in ReactART.
@sebmarkbage You said that is already configurable and already do this in the unit test.
Actually L56-L59 in ReactART-test.js do nothing about ReactART Object.
I think you can just delete the L14 in ReactART.js, and let us choose the mode freely.
The ASP.NET MVC6 application comes with bower only for the client side package management, so can't use react-art because there is no bower package for it.
Is there any plan to create a bower version of react-art?
This one threw me for a while: - but a null child produced from the following code causes an exception in react-art <Group>
<Group key={id} y={0} x={0}>
{
/// comment in code
}
<Rectangle .... etc/>
</Group>
Now as we have react
package on npm it would be nice to have react-art
to be CommonJS/npm compatible.
Hi,
I'd like to place a text inside a rectangle, and I would love to see some auto-wrapping of the text inside this shape. If it is possible, could you please give some advice how I can achieve this?!
Thanks in advance!
"react": "^0.14.0",
"react-art": "^0.14.0",
"react-dom": "^0.14.0",
Conditional elements in nested elements will throw traverseParentPath errors.
Do i need to downgrade react, or is react-art not intended to work with nested structures?
Steps:
Error:
ERROR in ./~/react-art/src/ReactART.js
Module not found: Error: Cannot resolve module 'react/lib/ReactLegacyDescriptor' in ~/react-art/examples/vector-widget/node_modules/react-art/src
@ ./~/react-art/src/ReactART.js 30:28-70
I expected setting strokeWidth={0}
to cause no stroke to be rendered (even when stroke
color is set).
However, the canvas draws it anyway because it doesn't accept a lineWidth
of 0 (see here).
Here _stroke
is only set when color
is set. Could we add an extra condition so that it also checks for width > 0
?
I have added an onClick handler to the group component but I am getting this warning in my console:
bind(): React component methods may only be bound to the component instance. See Component
Here is a shortened version of my component which exhibits the warning. (Plain JS, no JSX)
var Component = React.createClass({
displayName: 'Component',
handleClick: function (event) {
console.log('Clicked!');
},
render: function () {
return (
Surface({ width: 320, height: 480 },
Group({ onClick: this.handleClick })
)
);
}
});
I believe it has to do with the fact that Group is a React component and that it should only be binding its own methods to the event listener. Is there a way to put this together without getting this warning?
It would increase the visibility of react-art and art packages quite a lot if docs and demos were published in github pages and clickable right from this repo's description or readme.md.
Currently package.json in art mentions
http://sebmarkbage.github.io/art
https://github.com/sebmarkbage/art/issues
both of which give 404, and running the demos in
https://github.com/sebmarkbage/art/tree/master/demos
involved running git submodule update --init
first, and the url parameters such as
/demos/opacity/index.html?svg
/demos/opacity/index.html?canvas
/demos/opacity/index.html?vml
had to be inferred from
https://github.com/sebmarkbage/art/blob/master/demos/mode.js
There are docs in https://github.com/sebmarkbage/art/tree/master/docs and an example using react-art in https://github.com/facebook/react-page/blob/art/src/elements/VectorWidget/VectorWidget.js
For us window shoppers :-)
I am using a compiled react.js alongside om and wonder if it is possible to use react-art together with my setting? Afaik there is only an example which uses server-side rendering (react-page), which is not what I am looking for.
Any help and practical steps on how to accomplish this is greatly appreciated!
Thanks in advance!
Perhaps I'm doing something trivially wrong, but with the below code which draws 2000 random rectangles on the canvas, react-art runs at about 5fps on my machine. The comparable code that uses the canvas API directly runs at a smooth 60fps. In fact, it takes until about 100,000 rects to bring the implementation down to 5fps.
Most (~70%) of the time seems to be spent in the ReactMultiChild.Mixin._updateChildren
method:
Most of the self-time that isn't GC is in ReactElement:
Here's the code:
Test = React.createClass
render: ->
React.createElement 'div',
onMouseMove: => @forceUpdate()
onMouseDown: => @ivl = setInterval (=> @forceUpdate()), 16
onMouseUp: => clearInterval @ivl
React.createElement Surface,
width: 800, height: 800
React.createElement Group,
y: 10, x: 10
for [1..2000]
React.createElement Rectangle, x: Math.random() * 800, y: Math.random() * 800, width: Math.random() * 40, height: Math.random() * 40, fill: 'red'
TestCanvas = React.createClass
render: ->
React.createElement 'canvas',
width: 800 * devicePixelRatio, height: 800 * devicePixelRatio
style: {
width: 800
height: 800
}
onMouseMove: => @paint()
onMouseDown: => @ivl = setInterval @paint, 16
onMouseUp: => clearInterval @ivl
componentDidMount: ->
@paint()
paint: ->
ctx = @getDOMNode().getContext '2d'
ctx.save()
ctx.scale(devicePixelRatio, devicePixelRatio)
ctx.clearRect(0, 0, 800, 800)
ctx.fillStyle = 'red'
for [1..2000]
ctx.fillRect Math.random() * 800, Math.random() * 800, Math.random() * 40, Math.random() * 40
ctx.restore()
With 0.14 React release the core React library is split from the DOM renderer in order to encourage projects like this to create their own rendering system. Are there plans to make a new renderer or will react-art continue to use react-dom? Will there be tutorials on the React site in the future on how authors can create their own renderer (what integration methods are required etc)?
The top line is thinner than others. ("react-art": "^0.14.0")
import React from 'react';
import { Surface, Group, Shape, Path } from 'react-art';
function Line() {
const d = Path();
d.moveTo(10, 10).lineTo(10, 0).lineTo(300, 0).lineTo(300, 10);
return <Shape stroke="#000000" strokeWidth={1} d={d} />;
}
export default function App() {
return <Surface width={500} height={300}>
<Line />
<Group x={10} y={5}>
<Line />
</Group>
</Surface>;
}
Commit b27a7a0 updated the peerDependencies
so [email protected]
can be used, but as far as I can tell react-art
won't work with it.
Updating the devDependencies
to use [email protected]
causes the tests to fail. Below is an error from the tests that I also get when trying to use react-art
from my own app:
Error: /home/thom/dev/react-art/src/ReactART.js: Cannot find module 'react/lib/emptyObject' from '/home/thom/dev/react-art/src'
I assume react/lib/emptyObject
is no longer part of the react API?
The toIndex
parameter is not used and you instead have special internal logic on where to position it that ignores the toIndex
, why is that?
I see it is a duplicate of the createChild
method.
Is there a plan to add interactivity to shapes, more specifically, allowing users to move and transform shapes similar to what fabric.js does? If so, how would this be ideally implemented?
I'd be interested in contributing the functionality. Right now I am playing around with adding it through an InteractionMixin mixed in with RenderableMixin and enabling with a interactive property.
On a test project I'm working on, React state changes are causing flickering on the canvas. Assuming that the canvas was being completely redrawn on each change, I updated the render mode to "art/modes/dom" on line 21 of ReactART.js, and am seeing the flickering disappear.
In addition, with the VectorWidget example (no noticeable flickering at all, BTW), I'm seeing the consumed CPU time in Chrome OSX go down from around 20% to 15% after switching to DOM rendering.
I don't know all of the considerations involved, but adding the ability to choose the rendering mode would be useful.
Or would, perhaps, just using SVG directly make more sense for a project where DOM rendering makes more sense?
[vector-widget] [master] npm install
npm WARN package.json @ No repository field.
npm WARN deprecated [email protected]: Package not maintained. Recent browserify uses https://github.com/feross/buffer
-
> @ postinstall /Users/myusuf3/Github/react-art/examples/vector-widget
> npm install ../..
npm WARN package.json @ No repository field.
> [email protected] prepublish /Users/myusuf3/Github/react-art
> gulp
sh: gulp: command not found
npm ERR! addLocalDirectory Could not pack /Users/myusuf3/Github/react-art to /Users/myusuf3/.npm/react-art/0.13.0/package.tgz
npm ERR! addLocal Could not install /Users/myusuf3/Github/react-art
npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "../.."
npm ERR! node v0.12.1
npm ERR! npm v2.7.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] prepublish: `gulp`
npm ERR! Exit status 127
npm ERR!
npm ERR! Failed at the [email protected] prepublish script 'gulp'.
npm ERR! This is most likely a problem with the react-art package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp
npm ERR! You can get their info via:
npm ERR! npm owner ls react-art
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/myusuf3/Github/react-art/examples/vector-widget/npm-debug.log
npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.1
npm ERR! npm v2.7.3
npm ERR! code ELIFECYCLE
npm ERR! @ postinstall: `npm install ../..`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ postinstall script 'npm install ../..'.
npm ERR! This is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm install ../..
npm ERR! You can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/myusuf3/Github/react-art/examples/vector-widget/npm-debug.log
I'm currently porting a project over to ReactART, and I've noticed the lack of support for an Ellipse component, and other non-primitive shapes, which are include in the ART library, but remain unexposed.
Is there either:
— a way to do this performantly by directly rendering the ellipse.js module?
— (or) an expected update for ReactART to support them?
I tried writing it myself, but I'm coming across several issues.
Here's my code below for reference, just in case anyone can help....
var Ellipse = createComponent('Ellipse', {
mountComponent: function() {
this.node = Ellipse();
this.applyShapeProps(BLANK_PROPS, this.props);
return this.node;
},
receiveComponent: function(nextComponent, transaction) {
var props = nextComponent.props;
this.applyShapeProps(this.props, props);
this.props = props;
},
applyShapeProps: function(oldProps, props) {
this.applyRenderableProps(oldProps, props);
}
});
(This causes an error when instance.construct.apply(instance, arguments);
is called in the ConvinienceConstructor
)
Hi, can clipping mask be made with custom shape? If yes, how? Thanks.
According to this, gradients on strokes as well as fills are supported in SVG.
Is 'advanced stroke colors' a reference to gradients? Is there a reason they aren't supported?
I'm pretty noob at SVG, but I'm using strokes to draw lines (strokeJoin
is nice), and it would be really useful to be able to add gradients, rather than switching to using fill.
If this is something that could feasibly be done I'm happy to put some effort into it, but it would be easier with some help from someone who knows what they're doing 😄
(While I'm here, how come issues aren't enabled on art?)
Whenever I add Circle to my Electron project like import Circle from 'react-art/shapes/Circle'
, I get the following error: "Uncaught TypeError: Cannot read property 'hex' of undefined", source: webpack:///./~/react-art/~/art/core/color.js? (223)
I wonder if this is specific to Electron. I haven't tried it in a regular browser yet.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.