js-draw 0.16.0 → 0.16.1

package/dist/src/SVGLoader.js

@@ -215,6 +215,12 @@ export default class SVGLoader {
         // In some environments, computedStyles.fontSize can be increased by the system.
         // Thus, to prevent text from growing on load/save, prefer .style.fontSize.
         let fontSizeMatch = fontSizeExp.exec(elem.style.fontSize);
+        if (!fontSizeMatch && elem.tagName.toLowerCase() === 'tspan' && elem.parentElement) {
+            // Try to inherit the font size of the parent text element.
+            fontSizeMatch = fontSizeExp.exec(elem.parentElement.style.fontSize);
+        }
+        // If we still couldn't find a font size, try to use computedStyles (which can be
+        // wrong).
         if (!fontSizeMatch) {
             fontSizeMatch = fontSizeExp.exec(computedStyles.fontSize);
         }

package/dist/src/toolbar/HTMLToolbar.d.ts

@@ -14,6 +14,7 @@ export default class HTMLToolbar {
     private container;
     private resizeObserver;
     private listeners;
+    private widgetOrderCounter;
     private widgetsById;
     private widgetList;
     private overflowWidget;

package/dist/src/toolbar/HTMLToolbar.js

@@ -23,6 +23,8 @@ export default class HTMLToolbar {
         this.editor = editor;
         this.localizationTable = localizationTable;
         this.listeners = [];
+        // Flex-order of the next widget to be added.
+        this.widgetOrderCounter = 0;
         this.widgetsById = {};
         this.widgetList = [];
         // Widget to toggle overflow menu.
@@ -197,7 +199,7 @@ export default class HTMLToolbar {
         this.setupColorPickers();
         // Ensure that the widget gets displayed in the correct
         // place in the toolbar, even if it's removed and re-added.
-        container.style.order = `${this.widgetList.length}`;
+        container.style.order = `${this.widgetOrderCounter++}`;
         this.queueReLayout();
     }
     /**
@@ -233,6 +235,7 @@ export default class HTMLToolbar {
         if (options.maxSize) {
             spacer.style.maxWidth = options.maxSize;
         }
+        spacer.style.order = `${this.widgetOrderCounter++}`;
         this.container.appendChild(spacer);
     }
     serializeState() {

package/dist/src/tools/SelectionTool/SelectionTool.js

@@ -284,7 +284,7 @@ export default class SelectionTool extends BaseTool {
                 });
                 return true;
             }
-            if (evt.key === 'a') {
+            if (evt.key === 'a' || evt.key === 'r') {
                 // Selected all in onKeyDown. Don't finalizeTransform.
                 return true;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.16.0",
+	"version": "0.16.1",
 	"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/Editor.css

@@ -51,6 +51,10 @@
 	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
+
+	/* Allow the canvas to shrink (needed in Chrome) */
+	min-height: 0px;
+	max-height: inherit;
 }
 
 .imageEditorContainer .loadingMessage {

package/src/SVGLoader.test.ts

@@ -54,4 +54,61 @@ describe('SVGLoader', () => {
 		expect(elem.getBBox().topLeft.x).toBe(0);
 		expect(elem.getBBox().h).toBeGreaterThan(200);
 	});
+
+	it('tspans without specified font-sizes should inherit their font size from their parent element', async () => {
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg>
+				<text style='font-size: 22px;'>
+					Testing...
+					<tspan>Test 2...</tspan>
+					<tspan>Test 3...</tspan>
+					<tspan style='font-size: 3px;'>Test 4...</tspan>
+				</text>
+			</svg>
+		`, true));
+		const elem = editor.image
+			.getAllElements()
+			.filter(elem => elem instanceof TextComponent)[0] as TextComponent;
+		expect(elem).not.toBeNull();
+
+		// Ensure each child object has the correct size
+		expect(elem.serialize().data).toMatchObject({
+			'textObjects': [
+				{ },
+				{
+					'json':
+					{
+						'textObjects': [{ 'text': 'Test 2...' }],
+						'style': {
+							'size': 22,
+						}
+					}
+				},
+				{ },
+				{
+					'json': {
+						'textObjects': [{ 'text': 'Test 3...' }],
+						'style': {
+							'size': 22
+						}
+					}
+				},
+				{ },
+				{
+					'json': {
+						'textObjects': [{ 'text': 'Test 4...' }],
+						'style': {
+							'size': 3,
+						}
+					}
+				},
+				{ }
+			],
+
+			'style': {
+				'size': 22,
+			}
+		});
+	});
 });

package/src/SVGLoader.ts

@@ -257,6 +257,13 @@ export default class SVGLoader implements ImageLoader {
 		// In some environments, computedStyles.fontSize can be increased by the system.
 		// Thus, to prevent text from growing on load/save, prefer .style.fontSize.
 		let fontSizeMatch = fontSizeExp.exec(elem.style.fontSize);
+		if (!fontSizeMatch && elem.tagName.toLowerCase() === 'tspan' && elem.parentElement) {
+			// Try to inherit the font size of the parent text element.
+			fontSizeMatch = fontSizeExp.exec(elem.parentElement.style.fontSize);
+		}
+
+		// If we still couldn't find a font size, try to use computedStyles (which can be
+		// wrong).
 		if (!fontSizeMatch) {
 			fontSizeMatch = fontSizeExp.exec(computedStyles.fontSize);
 		}

package/src/toolbar/HTMLToolbar.ts

@@ -43,6 +43,9 @@ export default class HTMLToolbar {
 	private resizeObserver: ResizeObserver;
 	private listeners: DispatcherEventListener[] = [];
 
+	// Flex-order of the next widget to be added.
+	private widgetOrderCounter: number = 0;
+
 	private widgetsById: Record<string, BaseWidget> = {};
 	private widgetList: Array<BaseWidget> = [];
 
@@ -240,6 +243,7 @@ export default class HTMLToolbar {
 		}
 	}
 
+
 	/**
 	 * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
 	 * (i.e. its `addTo` method should not have been called).
@@ -265,7 +269,7 @@ export default class HTMLToolbar {
 
 		// Ensure that the widget gets displayed in the correct
 		// place in the toolbar, even if it's removed and re-added.
-		container.style.order = `${this.widgetList.length}`;
+		container.style.order = `${this.widgetOrderCounter++}`;
 
 		this.queueReLayout();
 	}
@@ -307,6 +311,7 @@ export default class HTMLToolbar {
 			spacer.style.maxWidth = options.maxSize;
 		}
 
+		spacer.style.order = `${this.widgetOrderCounter++}`;
 		this.container.appendChild(spacer);
 	}
 

package/src/tools/SelectionTool/SelectionTool.ts

@@ -353,7 +353,7 @@ export default class SelectionTool extends BaseTool {
 				return true;
 			}
 
-			if (evt.key === 'a') {
+			if (evt.key === 'a' || evt.key === 'r') {
 				// Selected all in onKeyDown. Don't finalizeTransform.
 				return true;
 			}