js-draw 0.7.0 → 0.7.2

package/dist/src/SVGLoader.js

@@ -177,6 +177,7 @@ export default class SVGLoader {
             else if (child.nodeType === Node.ELEMENT_NODE) {
                 const subElem = child;
                 if (subElem.tagName.toLowerCase() === 'tspan') {
+                    // FIXME: tspan's (x, y) components are absolute, not relative to the parent.
                     contentList.push(this.makeText(subElem));
                 }
                 else {

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -83,11 +83,14 @@ export default class SVGRenderer extends AbstractRenderer {
         }
         this.lastPathString.push(path.toString());
     }
-    // Apply [elemTransform] to [elem].
-    transformFrom(elemTransform, elem, inCanvasSpace = false) {
+    // Apply [elemTransform] to [elem]. Uses both a `matrix` and `.x`, `.y` properties if `setXY` is true.
+    // Otherwise, just uses a `matrix`.
+    transformFrom(elemTransform, elem, inCanvasSpace = false, setXY = true) {
         let transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
         const translation = transform.transformVec2(Vec2.zero);
-        transform = transform.rightMul(Mat33.translation(translation.times(-1)));
+        if (setXY) {
+            transform = transform.rightMul(Mat33.translation(translation.times(-1)));
+        }
         if (!transform.eq(Mat33.identity)) {
             elem.style.transform = `matrix(
 				${transform.a1}, ${transform.b1},
@@ -98,8 +101,10 @@ export default class SVGRenderer extends AbstractRenderer {
         else {
             elem.style.transform = '';
         }
-        elem.setAttribute('x', `${toRoundedString(translation.x)}`);
-        elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+        if (setXY) {
+            elem.setAttribute('x', `${toRoundedString(translation.x)}`);
+            elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+        }
     }
     drawText(text, transform, style) {
         var _a;
@@ -120,7 +125,10 @@ export default class SVGRenderer extends AbstractRenderer {
         if (!this.textContainer) {
             const container = document.createElementNS(svgNameSpace, 'text');
             container.appendChild(document.createTextNode(text));
-            this.transformFrom(transform, container, true);
+            // Don't set .x/.y properties (just use .style.transform).
+            // Child nodes aren't translated by .x/.y properties, but are by .style.transform.
+            const setXY = false;
+            this.transformFrom(transform, container, true, setXY);
             applyTextStyles(container, style);
             this.elem.appendChild(container);
             (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(container);
@@ -133,8 +141,12 @@ export default class SVGRenderer extends AbstractRenderer {
             const elem = document.createElementNS(svgNameSpace, 'tspan');
             elem.appendChild(document.createTextNode(text));
             this.textContainer.appendChild(elem);
+            // Make .x/.y relative to the parent.
             transform = this.textContainerTransform.inverse().rightMul(transform);
-            this.transformFrom(transform, elem, true);
+            // .style.transform does nothing to tspan elements. As such, we need to set x/y:
+            const translation = transform.transformVec2(Vec2.zero);
+            elem.setAttribute('x', `${toRoundedString(translation.x)}`);
+            elem.setAttribute('y', `${toRoundedString(translation.y)}`);
             applyTextStyles(elem, style);
         }
     }

package/dist/src/tools/TextTool.js

@@ -39,6 +39,7 @@ export default class TextTool extends BaseTool {
 				background-color: rgba(0, 0, 0, 0);
 
 				white-space: pre;
+				overflow: hidden;
 
 				padding: 0;
 				margin: 0;
@@ -118,10 +119,12 @@ export default class TextTool extends BaseTool {
         this.textInputElem = document.createElement('textarea');
         this.textInputElem.value = initialText;
         this.textInputElem.style.display = 'inline-block';
-        this.textTargetPosition = textCanvasPos;
+        this.textTargetPosition = this.editor.viewport.roundPoint(textCanvasPos);
         this.textRotation = -this.editor.viewport.getRotationAngle();
         this.textScale = Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
         this.updateTextInput();
+        // Update the input size/position/etc. after the placeHolder has had time to appear.
+        setTimeout(() => this.updateTextInput(), 0);
         this.textInputElem.oninput = () => {
             if (this.textInputElem) {
                 this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
@@ -169,6 +172,8 @@ export default class TextTool extends BaseTool {
             const testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
             const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
             const targetTextNodes = targetNodes.filter(node => node instanceof TextComponent);
+            // End any TextNodes we're currently editing.
+            this.flushInput();
             if (targetTextNodes.length > 0) {
                 const targetNode = targetTextNodes[targetTextNodes.length - 1];
                 this.setTextStyle(targetNode.getTextStyle());
@@ -224,7 +229,7 @@ export default class TextTool extends BaseTool {
     }
     setTextStyle(style) {
         // Copy the style — we may change parts of it.
-        this.textStyle = Object.assign({}, style);
+        this.textStyle = Object.assign(Object.assign({}, style), { renderingStyle: Object.assign({}, style.renderingStyle) });
         this.dispatchUpdateEvent();
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.7.0",
+	"version": "0.7.2",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/SVGLoader.ts

@@ -218,6 +218,7 @@ export default class SVGLoader implements ImageLoader {
 			} else if (child.nodeType === Node.ELEMENT_NODE) {
 				const subElem = child as SVGElement;
 				if (subElem.tagName.toLowerCase() === 'tspan') {
+					// FIXME: tspan's (x, y) components are absolute, not relative to the parent.
 					contentList.push(this.makeText(subElem as SVGTSpanElement));
 				} else {
 					throw new Error(`Unrecognized text child element: ${subElem}`);

package/src/rendering/renderers/SVGRenderer.ts

@@ -99,11 +99,15 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.lastPathString.push(path.toString());
 	}
 
-	// Apply [elemTransform] to [elem].
-	private transformFrom(elemTransform: Mat33, elem: SVGElement, inCanvasSpace: boolean = false) {
+	// Apply [elemTransform] to [elem]. Uses both a `matrix` and `.x`, `.y` properties if `setXY` is true.
+	// Otherwise, just uses a `matrix`.
+	private transformFrom(elemTransform: Mat33, elem: SVGElement, inCanvasSpace: boolean = false, setXY: boolean = true) {
 		let transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
 		const translation = transform.transformVec2(Vec2.zero);
-		transform = transform.rightMul(Mat33.translation(translation.times(-1)));
+
+		if (setXY) {
+			transform = transform.rightMul(Mat33.translation(translation.times(-1)));
+		}
 
 		if (!transform.eq(Mat33.identity)) {
 			elem.style.transform = `matrix(
@@ -115,8 +119,10 @@ export default class SVGRenderer extends AbstractRenderer {
 			elem.style.transform = '';
 		}
 
-		elem.setAttribute('x', `${toRoundedString(translation.x)}`);
-		elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+		if (setXY) {
+			elem.setAttribute('x', `${toRoundedString(translation.x)}`);
+			elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+		}
 	}
 
 	private textContainer: SVGTextElement|null = null;
@@ -140,7 +146,11 @@ export default class SVGRenderer extends AbstractRenderer {
 		if (!this.textContainer) {
 			const container = document.createElementNS(svgNameSpace, 'text');
 			container.appendChild(document.createTextNode(text));
-			this.transformFrom(transform, container, true);
+
+			// Don't set .x/.y properties (just use .style.transform).
+			// Child nodes aren't translated by .x/.y properties, but are by .style.transform.
+			const setXY = false;
+			this.transformFrom(transform, container, true, setXY);
 			applyTextStyles(container, style);
 
 			this.elem.appendChild(container);
@@ -154,8 +164,14 @@ export default class SVGRenderer extends AbstractRenderer {
 			elem.appendChild(document.createTextNode(text));
 			this.textContainer.appendChild(elem);
 
+			// Make .x/.y relative to the parent.
 			transform = this.textContainerTransform!.inverse().rightMul(transform);
-			this.transformFrom(transform, elem, true);
+
+			// .style.transform does nothing to tspan elements. As such, we need to set x/y:
+			const translation = transform.transformVec2(Vec2.zero);
+			elem.setAttribute('x', `${toRoundedString(translation.x)}`);
+			elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+
 			applyTextStyles(elem, style);
 		}
 	}

package/src/tools/TextTool.ts

@@ -47,6 +47,7 @@ export default class TextTool extends BaseTool {
 				background-color: rgba(0, 0, 0, 0);
 
 				white-space: pre;
+				overflow: hidden;
 
 				padding: 0;
 				margin: 0;
@@ -147,11 +148,14 @@ export default class TextTool extends BaseTool {
 		this.textInputElem = document.createElement('textarea');
 		this.textInputElem.value = initialText;
 		this.textInputElem.style.display = 'inline-block';
-		this.textTargetPosition = textCanvasPos;
+		this.textTargetPosition = this.editor.viewport.roundPoint(textCanvasPos);
 		this.textRotation = -this.editor.viewport.getRotationAngle();
 		this.textScale = Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
 		this.updateTextInput();
 
+		// Update the input size/position/etc. after the placeHolder has had time to appear.
+		setTimeout(() => this.updateTextInput(), 0);
+
 		this.textInputElem.oninput = () => {
 			if (this.textInputElem) {
 				this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
@@ -206,6 +210,9 @@ export default class TextTool extends BaseTool {
 			const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
 			const targetTextNodes = targetNodes.filter(node => node instanceof TextComponent) as TextComponent[];
 
+			// End any TextNodes we're currently editing.
+			this.flushInput();
+
 			if (targetTextNodes.length > 0) {
 				const targetNode = targetTextNodes[targetTextNodes.length - 1];
 				this.setTextStyle(targetNode.getTextStyle());
@@ -286,7 +293,7 @@ export default class TextTool extends BaseTool {
 
 	private setTextStyle(style: TextStyle) {
 		// Copy the style — we may change parts of it.
-		this.textStyle = {...style};
+		this.textStyle = { ...style, renderingStyle: { ...style.renderingStyle } };
 		this.dispatchUpdateEvent();
 	}
 }