fragment-tools 0.2.6 → 0.2.8

package/README.md

@@ -87,7 +87,7 @@ export let update = ({ context, width, height }) => {
 };
 ```
 
-Learn how to write your own sketch by following the [Getting started](./docs//guide/getting-started.md) guide, reading the [API docs](./docs/api/sketch.md) or the [examples](./examples/).
+Learn how to write your own sketch by following the [Getting started](./docs/introduction/getting-started.md) guide, reading the [API docs](./docs/api/sketch.md) or the [examples](./examples/).
 
 ## Contributing
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {

package/src/client/app/renderers/P5GLRenderer.js

@@ -36,10 +36,11 @@ let previews = [];
  * @param {number} params.pixelRatio
  * @returns {MountParamsP5GLRenderer}
  */
-export let onMountPreview = ({ id, width, height }) => {
+export let onMountPreview = ({ id, container, width, height }) => {
 	const p = new p5((sketch) => {
 		sketch.setup = () => {
-			sketch.createCanvas(width, height, 'webgl');
+			const canvas = sketch.createCanvas(width, height, 'webgl');
+			canvas.parent(container);
 		};
 	});
 

package/src/client/app/renderers/P5Renderer.js

@@ -2,10 +2,11 @@ import p5 from 'p5';
 
 let previews = [];
 
-export let onMountPreview = ({ id, width, height }) => {
+export let onMountPreview = ({ id, container, width, height }) => {
 	const p = new p5((sketch) => {
 		sketch.setup = () => {
-			sketch.createCanvas(width, height);
+			const canvas = sketch.createCanvas(width, height);
+			canvas.parent(container);
 		};
 	});
 

package/src/client/app/state/Sketch.svelte.js

@@ -48,10 +48,7 @@ class Sketch {
 
 	reset() {
 		Object.keys(this.props).forEach((key) => {
-			this.updateProp(
-				key,
-				$state.snapshot(this.props[key].__initialValue),
-			);
+			this.updateProp(key, this.props[key].__initialValue);
 		});
 
 		this.propsFolders.forEach((fieldgroup) => {
@@ -543,10 +540,6 @@ class Sketch {
 			),
 		};
 	}
-
-	get backgroundColor() {
-		return this.instance.backgroundColor;
-	}
 }
 
 export default Sketch;

package/src/client/app/ui/fields/ProgressInput.svelte

@@ -12,6 +12,8 @@
 
 	// handlers
 	function handleMouseDown(event) {
+		if (disabled) return;
+
 		document.body.classList.add('fragment-dragging');
 		document.addEventListener('mousemove', handleMouseMove);
 		document.addEventListener('mouseup', handleMouseUp);
@@ -104,17 +106,22 @@
 		box-shadow: inset 0 0 0 1px var(--color-border-input);
 
 		background: var(--color-background-input);
-		cursor: ew-resize;
+
 		container-type: size;
 		outline: 0;
 	}
 
-	:global(body:not(.fragment-dragging)) .progress:hover {
+	.progress:not(.disabled) {
+		cursor: ew-resize;
+	}
+
+	:global(body:not(.fragment-dragging)) .progress:not(.disabled):hover {
 		box-shadow: inset 0 0 0 1px var(--color-active);
 	}
 
 	.progress.dragging,
-	:global(body:not(.fragment-dragging)) .progress:focus-visible {
+	:global(body:not(.fragment-dragging))
+		.progress:not(.disabled):focus-visible {
 		box-shadow: 0 0 0 2px var(--color-active);
 	}