30 ? coords.top - 12 : coords.top + 16,
63 | left: coords.left - 10,
64 | zIndex: 10,
65 | width: 120
66 | }}
67 | >
68 | {
71 | const out = scale(value, 0, 1, min, max);
72 | setDraftValue(out);
73 | onChange(`${out}`);
74 | }}
75 | />
76 |
77 | );
78 | };
79 |
80 | const ColorPicker = ({ value, coords, onChange }) => {
81 | const [draftValue, setDraftValue] = useState(value.replace(/"/g, ""));
82 |
83 | const format = getColorFormat(value);
84 |
85 | return (
86 | 300 ? coords.top - 250 : coords.top + 20,
90 | left: coords.left - 40,
91 | zIndex: 10
92 | }}
93 | >
94 | {
97 | setDraftValue(e[format]);
98 | onChange(stringifyColorFormat(e, format));
99 | }}
100 | />
101 |
102 | );
103 | };
104 |
105 | const Picker = ({ type, coords, value, onChange }) => {
106 | if (type === "number") {
107 | return {
16 | if (onClose) {
17 | onClose();
18 | }
19 | }}
20 | />
21 |
22 |
32 | {children}
33 |
34 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/src/panel.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState, useEffect } from "react";
2 | import useComponentSize from "@rehooks/component-size";
3 |
4 | export const DIRECTION = {
5 | HORIZONTAL: "HORIZONTAL",
6 | VERTICAL: "VERTICAL"
7 | };
8 |
9 | export const Panel = ({
10 | children,
11 | direction = DIRECTION.HORIZONTAL,
12 | defaultDivide = 0.5
13 | }) => {
14 | const ref = useRef(null);
15 | const size = useComponentSize(ref);
16 | const [isDragging, setIsDragging] = useState(false);
17 | const [divider, setDivider] = useState(defaultDivide);
18 |
19 | useEffect(() => {
20 | if (!ref) {
21 | return;
22 | }
23 |
24 | const bbox = ref.current.getBoundingClientRect();
25 |
26 | const onMouseMove = e => {
27 | e.preventDefault();
28 |
29 | if (direction === DIRECTION.HORIZONTAL) {
30 | if (e.clientX === 0) {
31 | return;
32 | }
33 |
34 | setDivider((e.clientX - bbox.left) / size.width);
35 | } else {
36 | if (e.clientY === 0) {
37 | return;
38 | }
39 |
40 | setDivider((e.clientY - bbox.top) / size.height);
41 | }
42 | };
43 |
44 | const onMouseUp = () => {
45 | window.removeEventListener("mousemove", onMouseMove);
46 | window.removeEventListener("mouseup", onMouseUp);
47 |
48 | setIsDragging(false);
49 | };
50 |
51 | if (isDragging !== false) {
52 | window.addEventListener("mousemove", onMouseMove);
53 | window.addEventListener("mouseup", onMouseUp);
54 | }
55 |
56 | return () => {
57 | window.removeEventListener("mousemove", onMouseMove);
58 | window.removeEventListener("mouseup", onMouseUp);
59 | };
60 | }, [isDragging, direction, ref]);
61 |
62 | const dividerSize = 10;
63 | const handleSize = 1;
64 |
65 | const styles =
66 | direction === DIRECTION.HORIZONTAL
67 | ? [
68 | { width: Math.round(size.width * divider - dividerSize / 2) },
69 | { width: Math.round(size.width * (1 - divider) - dividerSize / 2) }
70 | ]
71 | : [
72 | { height: Math.round(size.height * divider - dividerSize / 2) },
73 | { height: Math.round(size.height * (1 - divider) - dividerSize / 2) }
74 | ];
75 |
76 | const handleWrapperStyle =
77 | direction === DIRECTION.HORIZONTAL
78 | ? { width: dividerSize, cursor: "ew-resize" }
79 | : { height: dividerSize, cursor: "ns-resize" };
80 |
81 | const handleStyle =
82 | direction === DIRECTION.HORIZONTAL
83 | ? { width: handleSize, marginLeft: (dividerSize - handleSize) / 2 }
84 | : { height: handleSize, marginTop: (dividerSize - handleSize) / 2 };
85 |
86 | const wrapperClassName =
87 | direction === DIRECTION.HORIZONTAL ? "flex" : "flex flex-column";
88 |
89 | return (
90 |
91 |
92 | {children[0]}
93 |
94 |
95 |
{
98 | e.preventDefault();
99 | setIsDragging(true);
100 | }}
101 | style={handleWrapperStyle}
102 | >
103 |
104 |
105 |
106 |
107 | {children[1]}
108 |
109 |
110 | );
111 | };
112 |
--------------------------------------------------------------------------------
/src/sketch-container.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import immer from "immer";
3 | import { cloneDeep, xor, debounce } from "lodash";
4 |
5 | import { COMMANDS } from "./commands";
6 | import { makeInspector } from "./inspector";
7 |
8 | const MAX_HISTORY_LEN = 1000;
9 |
10 | export class SketchContainer extends React.Component {
11 | setupCanvas = props => {
12 | this.ref.width = (props || this.props).width;
13 | this.ref.height = (props || this.props).height;
14 |
15 | this.events = [];
16 |
17 | const makeOnMouse = type => e => {
18 | const bbox = this.ref.getBoundingClientRect();
19 |
20 | this.events.push({
21 | source: type,
22 | pos: [e.clientX - bbox.left, e.clientY - bbox.top]
23 | });
24 | };
25 |
26 | this.onMouseMove = makeOnMouse("mousemove");
27 | this.onMouseDown = makeOnMouse("mousedown");
28 | this.onMouseUp = makeOnMouse("mouseup");
29 | this.onMouseClick = makeOnMouse("mouseclick");
30 |
31 | this.onKeyDown = e => {
32 | this.events.push({
33 | source: "keydown",
34 | key: e.key,
35 | code: e.code,
36 | ctrlKey: e.ctrlKey,
37 | shiftKey: e.shiftKey,
38 | altKey: e.altKey,
39 | metaKey: e.metaKey
40 | });
41 | };
42 |
43 | this.onKeyUp = e => {
44 | this.events.push({
45 | source: "keydown",
46 | key: e.key,
47 | code: e.code,
48 | ctrlKey: e.ctrlKey,
49 | shiftKey: e.shiftKey,
50 | altKey: e.altKey,
51 | metaKey: e.metaKey
52 | });
53 | };
54 |
55 | this.ref.addEventListener("mousemove", this.onMouseMove);
56 | this.ref.addEventListener("mousedown", this.onMouseDown);
57 | this.ref.addEventListener("mouseup", this.onMouseUp);
58 | this.ref.addEventListener("click", this.onMouseClick);
59 | this.ref.addEventListener("keydown", this.onKeyDown);
60 | this.ref.addEventListener("keyup", this.onKeyUp);
61 | };
62 |
63 | removeCanvasEvents = () => {
64 | this.ref.removeEventListener("mousemove", this.onMouseMove);
65 | this.ref.removeEventListener("mousedown", this.onMouseDown);
66 | this.ref.removeEventListener("mouseup", this.onMouseUp);
67 | this.ref.removeEventListener("click", this.onMouseClick);
68 | this.ref.removeEventListener("keydown", this.onKeyDown);
69 | this.ref.removeEventListener("keyup", this.onKeyUp);
70 | };
71 |
72 | resetCanvas = () => {
73 | this.removeCanvasEvents();
74 | this.setupCanvas();
75 | };
76 |
77 | resetState = props => {
78 | this.currentState = cloneDeep((props || this.props).sketch.initialState);
79 |
80 | this.props.setHistory(draft => {
81 | draft.stateHistory = [this.currentState];
82 | draft.eventsHistory = [[]];
83 |
84 | draft.idx = 0;
85 | });
86 | };
87 |
88 | setupInspector = props => {
89 | if (this.props.isPlaying) {
90 | return;
91 | }
92 |
93 | this.inspector = makeInspector(props || this.props);
94 |
95 | this.onMouseDownInspector = e => {
96 | if (this.props.isPlaying) {
97 | console.warning("onMouseDownInspector while playing!");
98 | }
99 |
100 | const bbox = this.ref.getBoundingClientRect();
101 |
102 | const [mx, my] = [
103 | Math.floor(e.clientX - bbox.left),
104 | Math.floor(e.clientY - bbox.top)
105 | ];
106 |
107 | const id = this.inspector.onHover(mx, my);
108 | const [command, args] = this.inspector.getMetaForId(id);
109 | const delta = args.pos ? [mx - args.pos[0], my - args.pos[1]] : [0, 0];
110 |
111 | const optimiseArgs = {
112 | id,
113 | command,
114 | args,
115 | delta,
116 | target: [mx, my]
117 | };
118 |
119 | this.props.setOptimiser(optimiseArgs);
120 | };
121 |
122 | this.onMouseUpInspector = () => {
123 | if (this.props.isPlaying) {
124 | console.warning("onMouseUpInspector while playing!");
125 | }
126 |
127 | this.props.setOptimiser(false);
128 | };
129 |
130 | this.onMouseMoveInspector = e => {
131 | if (this.props.isPlaying) {
132 | console.warning("onMouseMoveInspector while playing!");
133 | }
134 |
135 | const bbox = this.ref.getBoundingClientRect();
136 |
137 | const [mx, my] = [
138 | Math.floor(e.clientX - bbox.left),
139 | Math.floor(e.clientY - bbox.top)
140 | ];
141 |
142 | if (this.props.optimiser) {
143 | this.props.setOptimiser({ ...this.props.optimiser, target: [mx, my] });
144 | } else {
145 | const id = this.inspector.onHover(mx, my);
146 | const metaForId = this.inspector.getMetaForId(id);
147 |
148 | if (!metaForId || metaForId.length <= 1) {
149 | return;
150 | }
151 |
152 | const args = metaForId[1];
153 | const meta = args.__meta;
154 |
155 | this.props.setHighlight(
156 | meta ? { start: meta.lineStart - 2, end: meta.lineEnd - 1 } : null
157 | );
158 | }
159 | };
160 |
161 | this.onMouseOutInspector = () => this.props.setHighlight(null);
162 |
163 | this.ref.addEventListener("mousemove", this.onMouseMoveInspector);
164 | this.ref.addEventListener("mousedown", this.onMouseDownInspector);
165 | this.ref.addEventListener("mouseout", this.onMouseOutInspector);
166 |
167 | window.addEventListener("mouseup", this.onMouseUpInspector);
168 | };
169 |
170 | removeInspector = () => {
171 | this.ref.removeEventListener("mousemove", this.onMouseMoveInspector);
172 | this.ref.removeEventListener("mousedown", this.onMouseDownInspector);
173 | this.ref.removeEventListener("mouseout", this.onMouseOutInspector);
174 |
175 | window.removeEventListener("mouseup", this.onMouseUpInspector);
176 |
177 | this.inspector = undefined;
178 | };
179 |
180 | resetInspector = () => {
181 | this.removeInspector();
182 | this.setupInspector();
183 | };
184 |
185 | runExecute = () => {
186 | if (this.toExecute.size === 0) {
187 | return;
188 | }
189 |
190 | if (this.toExecute.size > 0) {
191 | this.toExecute.forEach(key => this[key]());
192 | this.toExecute = new Set();
193 | }
194 | };
195 |
196 | tick = () => {
197 | if (this.toExecute.size > 0) {
198 | this.frame = requestAnimationFrame(this.tick.bind(this));
199 | return;
200 | }
201 |
202 | const { sketch, constants, globals, setHistory, isPlaying } = this.props;
203 |
204 | const ctx = this.ref.getContext("2d");
205 |
206 | if (isPlaying) {
207 | this.currentState = immer(this.currentState, draft =>
208 | sketch.update(draft, this.events)
209 | );
210 |
211 | setHistory(draft => {
212 | draft.stateHistory.push(this.currentState);
213 | draft.eventsHistory.push(this.events);
214 |
215 | while (draft.stateHistory.length > MAX_HISTORY_LEN + 1) {
216 | draft.stateHistory.shift();
217 | draft.eventsHistory.shift();
218 | }
219 |
220 | draft.idx = Math.min(MAX_HISTORY_LEN, draft.idx + 1);
221 | });
222 | }
223 |
224 | if (this.inspector) {
225 | this.inspector.draw(this.currentState, constants);
226 | }
227 |
228 | for (const operation of sketch.draw(this.currentState, constants)) {
229 | const [command, args] = operation;
230 |
231 | if (COMMANDS[command]) {
232 | COMMANDS[command](ctx, args, globals);
233 | }
234 | }
235 |
236 | this.events = [];
237 |
238 | this.frame = requestAnimationFrame(this.tick.bind(this));
239 | };
240 |
241 | componentDidMount() {
242 | this.toExecute = new Set();
243 | this.runExecute = debounce(this.runExecute, 16);
244 |
245 | this.setupCanvas(this.props);
246 | this.resetState(this.props);
247 |
248 | this.frame = requestAnimationFrame(this.tick);
249 | }
250 |
251 | componentWillUmount() {
252 | if (this.frame) {
253 | cancelAnimationFrame(this.frame);
254 | }
255 |
256 | this.removeCanvasEvents();
257 | this.removeInspector();
258 | }
259 |
260 | UNSAFE_componentWillReceiveProps(nextProps) {
261 | if (
262 | xor(
263 | Object.keys(nextProps.sketch.initialState),
264 | Object.keys(this.currentState)
265 | ).length > 0
266 | ) {
267 | this.toExecute.add("resetState");
268 | this.toExecute.add("resetInspector");
269 | }
270 |
271 | if (
272 | nextProps.width !== this.props.width ||
273 | nextProps.height !== this.props.height
274 | ) {
275 | this.toExecute.add("resetCanvas");
276 | this.toExecute.add("resetInspector");
277 | }
278 |
279 | if (
280 | nextProps.historyIdx !== this.props.historyIdx &&
281 | !nextProps.isPlaying
282 | ) {
283 | this.currentState = nextProps.stateHistory[nextProps.historyIdx];
284 | this.currentEvents = nextProps.eventsHistory[nextProps.historyIdx];
285 | }
286 |
287 | if (nextProps.isPlaying && !this.props.isPlaying) {
288 | this.toExecute.add("removeInspector");
289 | }
290 |
291 | if (!nextProps.isPlaying && this.props.isPlaying) {
292 | this.toExecute.add("resetInspector");
293 | }
294 |
295 | this.runExecute();
296 | }
297 |
298 | shouldComponentUpdate() {
299 | return false;
300 | }
301 |
302 | render() {
303 | return
(this.ref = ref)} />;
304 | }
305 | }
306 |
--------------------------------------------------------------------------------
/src/sketch.js:
--------------------------------------------------------------------------------
1 | import JSON from "react-json-view";
2 | import React, { useEffect, useState } from "react";
3 | import { get } from "lodash";
4 |
5 | import { Panel, DIRECTION } from "./panel";
6 | import { SketchContainer } from "./sketch-container";
7 | import { Slider } from "./slider";
8 | import { clamp } from "./math";
9 | import { optimise } from "./optimise";
10 | import { useImmer } from "./hooks";
11 |
12 | const DEFAULT_IS_PLAYING = true;
13 |
14 | const RoundButton = ({ onClick, children }) => (
15 |
16 |
21 |
22 | {children}
23 |
24 |
25 |
37 |
{
39 | if (!isPlaying) {
40 | setHistory(draft => {
41 | draft.stateHistory = draft.stateHistory.slice(0, draft.idx + 1);
42 | });
43 | }
44 |
45 | setIsPlaying(!isPlaying);
46 | }}
47 | >
48 | {isPlaying ? "❚❚" : "▶︎"}
49 |
50 |
51 |
52 | ◼
53 |
54 |
55 |
56 | 1
60 | ? Math.max(0, historyIdx / (stateHistory.length - 1))
61 | : 0
62 | }
63 | onChange={v =>
64 | setHistory(draft => {
65 | draft.idx = clamp(
66 | Math.floor(v * stateHistory.length),
67 | 0,
68 | stateHistory.length - 1
69 | );
70 | })
71 | }
72 | />
73 |
74 |
121 |
122 |
123 |
124 | {
131 | setHistory(draft => {
132 | draft.stateHistory = [sketch.initialState || {}];
133 | draft.eventsHistory = [[]];
134 | draft.idx = 0;
135 | });
136 |
137 | setIsPlaying(false);
138 | }}
139 | />
140 |
141 |
142 |
143 |
160 |
163 |
174 |
175 |
{
69 | const value = (e.clientX - bbox.current.left) / size.width;
70 | onChange(clamp(value, 0, 1));
71 | }}
72 | >
73 |
{
83 | e.preventDefault();
84 | setIsDragging(true);
85 | }}
86 | />
87 |
88 | );
89 | };
90 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | .CodeMirror {
2 | height: 100% !important;
3 | font-family: Consolas, monaco, monospace !important;
4 | font-size: 0.75rem;
5 | }
6 |
7 | .react-json-view {
8 | font-family: Consolas, monaco, monospace !important;
9 | font-size: 0.75rem !important;
10 | }
11 |
12 | .inspector-highlight {
13 | background: #252525;
14 | }
15 |
16 | .bg-custom-dark {
17 | background: #101010;
18 | }
19 |
20 | .custom-dark {
21 | color: #101010;
22 | }
23 |
--------------------------------------------------------------------------------
/src/topbar.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from "react";
2 | import { saveAs } from "file-saver";
3 |
4 | import { Help } from "./help";
5 | import { EXAMPLES } from "./examples";
6 |
7 | export const Topbar = ({ setCode, code }) => {
8 | const [isHelpVisible, setHelpVisible] = useState(false);
9 | const [isExamplesMenuVisible, setExamplesMenuVisible] = useState(false);
10 |
11 | const fileRef = useRef(null);
12 |
13 | return (
14 | <>
15 |
16 |
dacein
17 |
18 |
19 |
{
22 | if (!fileRef.current) {
23 | return;
24 | }
25 |
26 | fileRef.current.click();
27 | }}
28 | >
29 | open
30 |
31 |
{
34 | saveAs(
35 | new Blob([code], {
36 | type: "text/plain;charset=utf-8"
37 | }),
38 | "sketch.js"
39 | );
40 | }}
41 | >
42 | save
43 |
44 |
45 |
46 |
setExamplesMenuVisible(!isExamplesMenuVisible)}
49 | >
50 | examples
51 |
52 |
53 | {isExamplesMenuVisible && (
54 |
58 |
59 | {Object.entries(EXAMPLES).map(([key, exampleCode]) => (
60 | {
64 | setCode(exampleCode);
65 | setExamplesMenuVisible(false);
66 | }}
67 | >
68 | {key}
69 |
70 | ))}
71 |
72 |
73 | )}
74 |
75 |
76 |
setHelpVisible(!isHelpVisible)}
79 | >
80 | help
81 |
82 |
83 |
84 |
{
89 | const [file] = e.target.files;
90 |
91 | if (!file) {
92 | return;
93 | }
94 |
95 | const reader = new FileReader();
96 |
97 | reader.onload = e => {
98 | const content = e.target.result;
99 | setCode(content);
100 | };
101 |
102 | reader.readAsText(file);
103 | }}
104 | />
105 |
106 |
107 | {isHelpVisible &&
setHelpVisible(false)} />}
108 |
109 | );
110 | };
111 |
--------------------------------------------------------------------------------
