Skip to content

Commit 9d8bdde

Browse files
adiman9adiman9
committed
Add base for Reconciler by providing a core HostConfig. Build custom
node tree and draw commit logic to draw tree to canvas.
1 parent dc9093b commit 9d8bdde

13 files changed

+5570
-18
lines changed

‎.eslintrc

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@
1111
"mocha": true,
1212
"jest": true,
1313
},
14-
"plugins": [
15-
"react-hooks"
16-
],
14+
"plugins": [],
1715
"settings": {
1816
"react": {
1917
"pragma": "React",
@@ -30,7 +28,6 @@
3028
],
3129
"no-plusplus": "off",
3230
"no-underscore-dangle": "off",
33-
"react-hooks/rules-of-hooks": "error",
34-
"react-hooks/exhaustive-deps": "warn"
31+
"no-param-reassign": "off",
3532
}
3633
}

‎examples/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="index.js"></script>
10+
</body>
11+
</html>

‎examples/index.js

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,48 @@
1-
console.log('hello world');
1+
import React, {useState, useEffect} from 'react';
2+
import ReactDom from 'react-dom';
3+
import {Canvas, useDraw, useP5} from '../src';
4+
5+
function Stuff() {
6+
const [state, setState] = useState([300, 300, 20]);
7+
8+
useEffect(() => {
9+
setTimeout(() => {
10+
setState([500, 500, 50]);
11+
}, 2000);
12+
}, []);
13+
14+
// TODO more hooks to use p5 lifecycle functions like mouseMove etc Mon 11 Mar 2019 01:04:49 GMT
15+
16+
useDraw(() => {});
17+
18+
const {width, height, mouseX} = useP5();
19+
console.log(width, height, mouseX);
20+
21+
return (
22+
<>
23+
<noFill>
24+
<circle args={state} />
25+
<rect args={[30, 20, 55, 55, 20, 15, 10, 5]} />
26+
<rect args={[400, 200, 100, 100]} />
27+
</noFill>
28+
<rect args={[700, 400, 100, 100]} />
29+
</>
30+
);
31+
}
32+
33+
function App() {
34+
return (
35+
<Canvas
36+
size={[800, 800]}
37+
background={100}
38+
fill={'#f539de'}
39+
onClick={() => {
40+
console.log('clicked canvas');
41+
}}
42+
>
43+
<Stuff />
44+
</Canvas>
45+
);
46+
}
47+
48+
ReactDom.render(<App />, document.getElementById('app'));

‎examples/package.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "examples",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"private": true,
6+
"license": "MIT",
7+
"scripts": {
8+
"start": "parcel index.html"
9+
},
10+
"dependencies": {
11+
"react": "^16.8.4",
12+
"react-dom": "^16.8.4"
13+
},
14+
"devDependencies": {
15+
"@babel/core": "^7.3.4",
16+
"parcel-bundler": "^1.12.0"
17+
}
18+
}

0 commit comments

Comments
 (0)