Open mastir opened 3 weeks ago
After some development i have something usable. Took some time to handle zoom correctly with transform and scroll. Also thinking about change coordinat grid to put [0,0] point in the center of canvas.
const engine = useMemo(() => {
const engine = new EngineModel();
engine.state.addStateHandler(new DefaultState());
engine.state.addStateHandler(new CreateLinkState());
engine.state.addStateHandler(new DragNodeState());
engine.state.actions.push(new ZoomHandler(engine));
window.engine = engine;
return engine;
}, []);
let node = {
x: 2000-85,
y: 2000-60,
ports: [
{name: 'First port!'},
{name: 'Second port'},
]
}
return <Diagram engine={engine} style={{minHeight:'100vh'}} size={[4000,4000]}>
<Node node={node}>
<h1>Hello world!</h1>
{node.ports.map( (port,i) => <div key={i}>
<Port
key={i}
port={port}
canConnect={()=>true}
onConnect={port2 => {console.log('connected', port, port2)}}
>
<div style={{background:'#00F',width:16,height:16,display:'inline-block'}}/>
</Port>
{port.name}
</div>)}
</Node>
</Diagram>;
Made a simple demo.
https://codesandbox.io/p/sandbox/react-diagram-sv4743
Same concept, but simple react implementation. There is minor zoom bug i found today and probably will find mach more later. But for starter looks just fine, probably i will do some rendering optimisations later.
Any ccollaboration is welcomed. https://github.com/mastir/react-diagram
Hey! Thanks for this lib, i have used it in my project and its pretty good, but after some time i started asking myself "why?". And after few days i can not find answer.
createContext
in react.useReducer
in react do absolutly the same and more.So we can have something like:
With absolutly same result, but simple
So is there any real reason not to do so?