@scrawl-board/board 0.1.0-beta.5 → 0.1.0-beta.6

package/dist/browser.js

@@ -36336,13 +36336,26 @@ var INK_Z = .02;
 var HIGHLIGHT_Z = .016;
 /** Ghosts sit under everything so live strokes always read on top. */
 var GHOST_Z = .012;
+/**
+* A miter join at each centerline point — averaging the incoming and
+* outgoing segment directions into one width offset — under-covers the
+* outside of a sharp turn: the two segments' edges diverge there, leaving a
+* real geometric gap (the board shows through, not just a shader artifact).
+* Barely visible on opaque ink, but glaring on the highlighter's lower,
+* multiply-blended opacity, which is why this reads as "goes transparent
+* at corners" specifically there even though the underlying strip geometry
+* is shared with ink. Below this turn angle a miter join is a fine
+* approximation and not worth the extra geometry.
+*/
+var JOIN_ANGLE_THRESHOLD = .35;
+var JOIN_SEGMENTS = 10;
 function buildRibbonGeometry(points, baseWidth, z = INK_Z, handDrawn = true) {
 	const edges = ribbonEdges(points, baseWidth, handDrawn);
 	const n = edges.length;
-	const positions = new Float32Array(n * 2 * 3);
-	const uvs = new Float32Array(n * 2 * 2);
-	const alphas = new Float32Array(n * 2);
-	const indices = new Uint32Array((n - 1) * 6);
+	const positions = new Array(n * 2 * 3);
+	const uvs = new Array(n * 2 * 2);
+	const alphas = new Array(n * 2);
+	const indices = new Array((n - 1) * 6);
 	for (let i = 0; i < n; i++) {
 		const e = edges[i];
 		const vi = i * 6;
@@ -36371,11 +36384,45 @@ function buildRibbonGeometry(points, baseWidth, z = INK_Z, handDrawn = true) {
 			indices[ii + 5] = a + 2;
 		}
 	}
+	for (let i = 1; i < n - 1; i++) {
+		const prev = points[Math.max(0, i - 1)];
+		const point = points[i];
+		const next = points[Math.min(n - 1, i + 1)];
+		const inX = point.x - prev.x, inY = point.y - prev.y;
+		const outX = next.x - point.x, outY = next.y - point.y;
+		const inLen = Math.hypot(inX, inY) || 1;
+		const outLen = Math.hypot(outX, outY) || 1;
+		const inDx = inX / inLen, inDy = inY / inLen;
+		const outDx = outX / outLen, outDy = outY / outLen;
+		const cos = inDx * outDx + inDy * outDy;
+		if (Math.acos(Math.min(1, Math.max(-1, cos))) < JOIN_ANGLE_THRESHOLD) continue;
+		const radius = (handDrawn ? baseWidth * (MIN_WIDTH_FACTOR + (1 - MIN_WIDTH_FACTOR) * point.pressure) : baseWidth) / 2;
+		const t = i / (n - 1);
+		const alpha = edges[i].alpha;
+		const side = inDx * outDy - inDy * outDx > 0 ? -1 : 1;
+		const inEdgeX = point.x + side * -inDy * radius, inEdgeY = point.y + side * inDx * radius;
+		const outEdgeX = point.x + side * -outDy * radius, outEdgeY = point.y + side * outDx * radius;
+		const angle1 = Math.atan2(inEdgeY - point.y, inEdgeX - point.x);
+		let sweep = Math.atan2(outEdgeY - point.y, outEdgeX - point.x) - angle1;
+		while (sweep > Math.PI) sweep -= Math.PI * 2;
+		while (sweep < -Math.PI) sweep += Math.PI * 2;
+		const center = positions.length / 3;
+		positions.push(point.x, point.y, z);
+		uvs.push(t, .5);
+		alphas.push(alpha);
+		for (let s = 0; s <= JOIN_SEGMENTS; s++) {
+			const theta = angle1 + sweep * (s / JOIN_SEGMENTS);
+			positions.push(point.x + Math.cos(theta) * radius, point.y + Math.sin(theta) * radius, z);
+			uvs.push(t, .5);
+			alphas.push(alpha);
+			if (s > 0) indices.push(center, center + s, center + s + 1);
+		}
+	}
 	const geometry = new BufferGeometry();
-	geometry.setAttribute("position", new BufferAttribute(positions, 3));
-	geometry.setAttribute("uv", new BufferAttribute(uvs, 2));
-	geometry.setAttribute("aAlpha", new BufferAttribute(alphas, 1));
-	geometry.setIndex(new BufferAttribute(indices, 1));
+	geometry.setAttribute("position", new BufferAttribute(new Float32Array(positions), 3));
+	geometry.setAttribute("uv", new BufferAttribute(new Float32Array(uvs), 2));
+	geometry.setAttribute("aAlpha", new BufferAttribute(new Float32Array(alphas), 1));
+	geometry.setIndex(indices);
 	geometry.computeBoundingSphere();
 	return geometry;
 }
@@ -36517,9 +36564,9 @@ function syncMatrix(mesh, stroke) {
 }
 //#endregion
 //#region src/renderer/shapes/markerProp.ts
-var BODY_LENGTH = 11;
-var BODY_RADIUS = .85;
-var TIP_LENGTH = 1.6;
+var BODY_LENGTH = 7;
+var BODY_RADIUS = .55;
+var TIP_LENGTH = 1.05;
 var BASE_TILT = .42;
 var VELOCITY_TILT = .22;
 var MAX_EXTRA_TILT = .35;
@@ -36550,12 +36597,12 @@ var MarkerProp = class {
 		const tip = new Mesh(new ConeGeometry(BODY_RADIUS * .55, TIP_LENGTH, 14), tipMaterial);
 		tip.rotation.x = Math.PI;
 		tip.position.y = TIP_LENGTH / 2;
-		this.body.position.y = 7.1;
+		this.body.position.y = 4.55;
 		const pen = new Group();
 		pen.add(this.body, tip);
 		pen.rotation.x = Math.PI / 2;
 		this.group.add(pen);
-		this.shadow = new Mesh(new CircleGeometry(1.4, 24), new MeshBasicMaterial({
+		this.shadow = new Mesh(new CircleGeometry(.9, 24), new MeshBasicMaterial({
 			color: 0,
 			transparent: true,
 			opacity: .13,

package/dist/index.js

@@ -36416,13 +36416,26 @@ var INK_Z = .02;
 var HIGHLIGHT_Z = .016;
 /** Ghosts sit under everything so live strokes always read on top. */
 var GHOST_Z = .012;
+/**
+* A miter join at each centerline point — averaging the incoming and
+* outgoing segment directions into one width offset — under-covers the
+* outside of a sharp turn: the two segments' edges diverge there, leaving a
+* real geometric gap (the board shows through, not just a shader artifact).
+* Barely visible on opaque ink, but glaring on the highlighter's lower,
+* multiply-blended opacity, which is why this reads as "goes transparent
+* at corners" specifically there even though the underlying strip geometry
+* is shared with ink. Below this turn angle a miter join is a fine
+* approximation and not worth the extra geometry.
+*/
+var JOIN_ANGLE_THRESHOLD = .35;
+var JOIN_SEGMENTS = 10;
 function buildRibbonGeometry(points, baseWidth, z = INK_Z, handDrawn = true) {
 	const edges = ribbonEdges(points, baseWidth, handDrawn);
 	const n = edges.length;
-	const positions = new Float32Array(n * 2 * 3);
-	const uvs = new Float32Array(n * 2 * 2);
-	const alphas = new Float32Array(n * 2);
-	const indices = new Uint32Array((n - 1) * 6);
+	const positions = new Array(n * 2 * 3);
+	const uvs = new Array(n * 2 * 2);
+	const alphas = new Array(n * 2);
+	const indices = new Array((n - 1) * 6);
 	for (let i = 0; i < n; i++) {
 		const e = edges[i];
 		const vi = i * 6;
@@ -36451,11 +36464,45 @@ function buildRibbonGeometry(points, baseWidth, z = INK_Z, handDrawn = true) {
 			indices[ii + 5] = a + 2;
 		}
 	}
+	for (let i = 1; i < n - 1; i++) {
+		const prev = points[Math.max(0, i - 1)];
+		const point = points[i];
+		const next = points[Math.min(n - 1, i + 1)];
+		const inX = point.x - prev.x, inY = point.y - prev.y;
+		const outX = next.x - point.x, outY = next.y - point.y;
+		const inLen = Math.hypot(inX, inY) || 1;
+		const outLen = Math.hypot(outX, outY) || 1;
+		const inDx = inX / inLen, inDy = inY / inLen;
+		const outDx = outX / outLen, outDy = outY / outLen;
+		const cos = inDx * outDx + inDy * outDy;
+		if (Math.acos(Math.min(1, Math.max(-1, cos))) < JOIN_ANGLE_THRESHOLD) continue;
+		const radius = (handDrawn ? baseWidth * (MIN_WIDTH_FACTOR + (1 - MIN_WIDTH_FACTOR) * point.pressure) : baseWidth) / 2;
+		const t = i / (n - 1);
+		const alpha = edges[i].alpha;
+		const side = inDx * outDy - inDy * outDx > 0 ? -1 : 1;
+		const inEdgeX = point.x + side * -inDy * radius, inEdgeY = point.y + side * inDx * radius;
+		const outEdgeX = point.x + side * -outDy * radius, outEdgeY = point.y + side * outDx * radius;
+		const angle1 = Math.atan2(inEdgeY - point.y, inEdgeX - point.x);
+		let sweep = Math.atan2(outEdgeY - point.y, outEdgeX - point.x) - angle1;
+		while (sweep > Math.PI) sweep -= Math.PI * 2;
+		while (sweep < -Math.PI) sweep += Math.PI * 2;
+		const center = positions.length / 3;
+		positions.push(point.x, point.y, z);
+		uvs.push(t, .5);
+		alphas.push(alpha);
+		for (let s = 0; s <= JOIN_SEGMENTS; s++) {
+			const theta = angle1 + sweep * (s / JOIN_SEGMENTS);
+			positions.push(point.x + Math.cos(theta) * radius, point.y + Math.sin(theta) * radius, z);
+			uvs.push(t, .5);
+			alphas.push(alpha);
+			if (s > 0) indices.push(center, center + s, center + s + 1);
+		}
+	}
 	const geometry = new BufferGeometry();
-	geometry.setAttribute("position", new BufferAttribute(positions, 3));
-	geometry.setAttribute("uv", new BufferAttribute(uvs, 2));
-	geometry.setAttribute("aAlpha", new BufferAttribute(alphas, 1));
-	geometry.setIndex(new BufferAttribute(indices, 1));
+	geometry.setAttribute("position", new BufferAttribute(new Float32Array(positions), 3));
+	geometry.setAttribute("uv", new BufferAttribute(new Float32Array(uvs), 2));
+	geometry.setAttribute("aAlpha", new BufferAttribute(new Float32Array(alphas), 1));
+	geometry.setIndex(indices);
 	geometry.computeBoundingSphere();
 	return geometry;
 }
@@ -36597,9 +36644,9 @@ function syncMatrix(mesh, stroke) {
 }
 //#endregion
 //#region src/renderer/shapes/markerProp.ts
-var BODY_LENGTH = 11;
-var BODY_RADIUS = .85;
-var TIP_LENGTH = 1.6;
+var BODY_LENGTH = 7;
+var BODY_RADIUS = .55;
+var TIP_LENGTH = 1.05;
 var BASE_TILT = .42;
 var VELOCITY_TILT = .22;
 var MAX_EXTRA_TILT = .35;
@@ -36630,12 +36677,12 @@ var MarkerProp = class {
 		const tip = new Mesh(new ConeGeometry(BODY_RADIUS * .55, TIP_LENGTH, 14), tipMaterial);
 		tip.rotation.x = Math.PI;
 		tip.position.y = TIP_LENGTH / 2;
-		this.body.position.y = 7.1;
+		this.body.position.y = 4.55;
 		const pen = new Group();
 		pen.add(this.body, tip);
 		pen.rotation.x = Math.PI / 2;
 		this.group.add(pen);
-		this.shadow = new Mesh(new CircleGeometry(1.4, 24), new MeshBasicMaterial({
+		this.shadow = new Mesh(new CircleGeometry(.9, 24), new MeshBasicMaterial({
 			color: 0,
 			transparent: true,
 			opacity: .13,
@@ -49896,6 +49943,24 @@ function InlineEditors({ controller, renderPortal }) {
 	};
 	useEffect(() => controller.on("edit-request", (event) => {
 		const offset = rootOffset();
+		if (event.kind === "text" && event.id === null) {
+			const newId = controller.content.add({
+				type: "text",
+				x: event.boardX,
+				y: event.boardY,
+				text: "",
+				color: event.color,
+				fontSize: TEXT_DEFAULT_SIZE
+			});
+			controller.content.select([newId]);
+			setEditor({
+				...event,
+				id: newId,
+				left: event.screenRect.left - offset.left,
+				top: event.screenRect.top - offset.top
+			});
+			return;
+		}
 		setEditor({
 			...event,
 			left: event.screenRect.left - offset.left,
@@ -49907,22 +49972,11 @@ function InlineEditors({ controller, renderPortal }) {
 		setEditor(null);
 	};
 	const commitText = () => {
-		if (editor?.kind === "text") {
+		if (editor?.kind === "text" && editor.id !== null) {
 			const text = editor.text;
-			if (editor.id === null) {
-				if (text.trim()) {
-					const newId = controller.content.add({
-						type: "text",
-						x: editor.boardX,
-						y: editor.boardY,
-						text,
-						color: editor.color,
-						fontSize: TEXT_DEFAULT_SIZE
-					});
-					controller.content.select([newId]);
-				}
-			} else if (!text.trim()) controller.content.remove([editor.id]);
-			else controller.content.update(editor.id, { text });
+			const existing = controller.query.get(editor.id);
+			if (!text.trim()) controller.content.remove([editor.id]);
+			else if (existing?.type !== "text" || existing.text !== text) controller.content.update(editor.id, { text });
 		}
 		setEditor(null);
 	};

package/dist/react.js

@@ -36378,13 +36378,26 @@ var INK_Z = .02;
 var HIGHLIGHT_Z = .016;
 /** Ghosts sit under everything so live strokes always read on top. */
 var GHOST_Z = .012;
+/**
+* A miter join at each centerline point — averaging the incoming and
+* outgoing segment directions into one width offset — under-covers the
+* outside of a sharp turn: the two segments' edges diverge there, leaving a
+* real geometric gap (the board shows through, not just a shader artifact).
+* Barely visible on opaque ink, but glaring on the highlighter's lower,
+* multiply-blended opacity, which is why this reads as "goes transparent
+* at corners" specifically there even though the underlying strip geometry
+* is shared with ink. Below this turn angle a miter join is a fine
+* approximation and not worth the extra geometry.
+*/
+var JOIN_ANGLE_THRESHOLD = .35;
+var JOIN_SEGMENTS = 10;
 function buildRibbonGeometry(points, baseWidth, z = INK_Z, handDrawn = true) {
 	const edges = ribbonEdges(points, baseWidth, handDrawn);
 	const n = edges.length;
-	const positions = new Float32Array(n * 2 * 3);
-	const uvs = new Float32Array(n * 2 * 2);
-	const alphas = new Float32Array(n * 2);
-	const indices = new Uint32Array((n - 1) * 6);
+	const positions = new Array(n * 2 * 3);
+	const uvs = new Array(n * 2 * 2);
+	const alphas = new Array(n * 2);
+	const indices = new Array((n - 1) * 6);
 	for (let i = 0; i < n; i++) {
 		const e = edges[i];
 		const vi = i * 6;
@@ -36413,11 +36426,45 @@ function buildRibbonGeometry(points, baseWidth, z = INK_Z, handDrawn = true) {
 			indices[ii + 5] = a + 2;
 		}
 	}
+	for (let i = 1; i < n - 1; i++) {
+		const prev = points[Math.max(0, i - 1)];
+		const point = points[i];
+		const next = points[Math.min(n - 1, i + 1)];
+		const inX = point.x - prev.x, inY = point.y - prev.y;
+		const outX = next.x - point.x, outY = next.y - point.y;
+		const inLen = Math.hypot(inX, inY) || 1;
+		const outLen = Math.hypot(outX, outY) || 1;
+		const inDx = inX / inLen, inDy = inY / inLen;
+		const outDx = outX / outLen, outDy = outY / outLen;
+		const cos = inDx * outDx + inDy * outDy;
+		if (Math.acos(Math.min(1, Math.max(-1, cos))) < JOIN_ANGLE_THRESHOLD) continue;
+		const radius = (handDrawn ? baseWidth * (MIN_WIDTH_FACTOR + (1 - MIN_WIDTH_FACTOR) * point.pressure) : baseWidth) / 2;
+		const t = i / (n - 1);
+		const alpha = edges[i].alpha;
+		const side = inDx * outDy - inDy * outDx > 0 ? -1 : 1;
+		const inEdgeX = point.x + side * -inDy * radius, inEdgeY = point.y + side * inDx * radius;
+		const outEdgeX = point.x + side * -outDy * radius, outEdgeY = point.y + side * outDx * radius;
+		const angle1 = Math.atan2(inEdgeY - point.y, inEdgeX - point.x);
+		let sweep = Math.atan2(outEdgeY - point.y, outEdgeX - point.x) - angle1;
+		while (sweep > Math.PI) sweep -= Math.PI * 2;
+		while (sweep < -Math.PI) sweep += Math.PI * 2;
+		const center = positions.length / 3;
+		positions.push(point.x, point.y, z);
+		uvs.push(t, .5);
+		alphas.push(alpha);
+		for (let s = 0; s <= JOIN_SEGMENTS; s++) {
+			const theta = angle1 + sweep * (s / JOIN_SEGMENTS);
+			positions.push(point.x + Math.cos(theta) * radius, point.y + Math.sin(theta) * radius, z);
+			uvs.push(t, .5);
+			alphas.push(alpha);
+			if (s > 0) indices.push(center, center + s, center + s + 1);
+		}
+	}
 	const geometry = new BufferGeometry();
-	geometry.setAttribute("position", new BufferAttribute(positions, 3));
-	geometry.setAttribute("uv", new BufferAttribute(uvs, 2));
-	geometry.setAttribute("aAlpha", new BufferAttribute(alphas, 1));
-	geometry.setIndex(new BufferAttribute(indices, 1));
+	geometry.setAttribute("position", new BufferAttribute(new Float32Array(positions), 3));
+	geometry.setAttribute("uv", new BufferAttribute(new Float32Array(uvs), 2));
+	geometry.setAttribute("aAlpha", new BufferAttribute(new Float32Array(alphas), 1));
+	geometry.setIndex(indices);
 	geometry.computeBoundingSphere();
 	return geometry;
 }
@@ -36559,9 +36606,9 @@ function syncMatrix(mesh, stroke) {
 }
 //#endregion
 //#region src/renderer/shapes/markerProp.ts
-var BODY_LENGTH = 11;
-var BODY_RADIUS = .85;
-var TIP_LENGTH = 1.6;
+var BODY_LENGTH = 7;
+var BODY_RADIUS = .55;
+var TIP_LENGTH = 1.05;
 var BASE_TILT = .42;
 var VELOCITY_TILT = .22;
 var MAX_EXTRA_TILT = .35;
@@ -36592,12 +36639,12 @@ var MarkerProp = class {
 		const tip = new Mesh(new ConeGeometry(BODY_RADIUS * .55, TIP_LENGTH, 14), tipMaterial);
 		tip.rotation.x = Math.PI;
 		tip.position.y = TIP_LENGTH / 2;
-		this.body.position.y = 7.1;
+		this.body.position.y = 4.55;
 		const pen = new Group();
 		pen.add(this.body, tip);
 		pen.rotation.x = Math.PI / 2;
 		this.group.add(pen);
-		this.shadow = new Mesh(new CircleGeometry(1.4, 24), new MeshBasicMaterial({
+		this.shadow = new Mesh(new CircleGeometry(.9, 24), new MeshBasicMaterial({
 			color: 0,
 			transparent: true,
 			opacity: .13,
@@ -49858,6 +49905,24 @@ function InlineEditors({ controller, renderPortal }) {
 	};
 	useEffect(() => controller.on("edit-request", (event) => {
 		const offset = rootOffset();
+		if (event.kind === "text" && event.id === null) {
+			const newId = controller.content.add({
+				type: "text",
+				x: event.boardX,
+				y: event.boardY,
+				text: "",
+				color: event.color,
+				fontSize: TEXT_DEFAULT_SIZE
+			});
+			controller.content.select([newId]);
+			setEditor({
+				...event,
+				id: newId,
+				left: event.screenRect.left - offset.left,
+				top: event.screenRect.top - offset.top
+			});
+			return;
+		}
 		setEditor({
 			...event,
 			left: event.screenRect.left - offset.left,
@@ -49869,22 +49934,11 @@ function InlineEditors({ controller, renderPortal }) {
 		setEditor(null);
 	};
 	const commitText = () => {
-		if (editor?.kind === "text") {
+		if (editor?.kind === "text" && editor.id !== null) {
 			const text = editor.text;
-			if (editor.id === null) {
-				if (text.trim()) {
-					const newId = controller.content.add({
-						type: "text",
-						x: editor.boardX,
-						y: editor.boardY,
-						text,
-						color: editor.color,
-						fontSize: TEXT_DEFAULT_SIZE
-					});
-					controller.content.select([newId]);
-				}
-			} else if (!text.trim()) controller.content.remove([editor.id]);
-			else controller.content.update(editor.id, { text });
+			const existing = controller.query.get(editor.id);
+			if (!text.trim()) controller.content.remove([editor.id]);
+			else if (existing?.type !== "text" || existing.text !== text) controller.content.update(editor.id, { text });
 		}
 		setEditor(null);
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrawl-board/board",
-  "version": "0.1.0-beta.5",
+  "version": "0.1.0-beta.6",
   "description": "The Scrawl Board SDK: an embeddable, collaborative infinite-canvas whiteboard for React and vanilla JS/TS apps.",
   "license": "Apache-2.0",
   "repository": {