js-draw 0.18.1 → 0.18.2

package/src/Editor.loadFrom.test.ts

@@ -0,0 +1,24 @@
+import Color4 from './Color4';
+import { imageBackgroundCSSClassName } from './components/ImageBackground';
+import { RestyleableComponent } from './lib';
+import SVGLoader from './SVGLoader';
+import createEditor from './testing/createEditor';
+
+describe('Editor.loadFrom', () => {
+	it('should remove existing BackgroundComponents when loading new BackgroundComponents', async () => {
+		const editor = createEditor();
+		await editor.dispatch(editor.setBackgroundColor(Color4.red));
+
+		let backgroundComponents = editor.image.getBackgroundComponents();
+		expect(backgroundComponents).toHaveLength(1);
+		expect((backgroundComponents[0] as RestyleableComponent).getStyle().color).objEq(Color4.red);
+
+		await editor.loadFrom(SVGLoader.fromString(`<svg viewBox='0 0 100 100'>
+			<path class='${imageBackgroundCSSClassName}' d='m0,0 L100,0 L100,100 L0,100 z' fill='#000'/>
+		</svg>`, true));
+
+		backgroundComponents = editor.image.getBackgroundComponents();
+		expect(backgroundComponents).toHaveLength(1);
+		expect((backgroundComponents[0] as RestyleableComponent).getStyle().color).objEq(Color4.black);
+	});
+});

package/src/Editor.toSVG.test.ts

@@ -0,0 +1,111 @@
+import { Color4, Mat33, Rect2, TextComponent, EditorImage, Vec2 } from './lib';
+import TextStyle from './rendering/TextRenderingStyle';
+import SVGLoader from './SVGLoader';
+import createEditor from './testing/createEditor';
+
+describe('Editor.toSVG', () => {
+	it('should correctly nest text objects', async () => {
+		const editor = createEditor();
+		const textStyle: TextStyle = {
+			fontFamily: 'sans', size: 12, renderingStyle: { fill: Color4.black }
+		};
+		const text = new TextComponent([
+			'Testing...',
+			new TextComponent([ 'Test 2' ], Mat33.translation(Vec2.of(0, 100)), textStyle),
+		], Mat33.identity, textStyle);
+		editor.dispatch(EditorImage.addElement(text));
+
+		const matches = editor.image.getElementsIntersectingRegion(new Rect2(4, -100, 100, 100));
+		expect(matches).toHaveLength(1);
+		expect(text).not.toBeNull();
+
+		const asSVG = editor.toSVG();
+		const allTSpans = [ ...asSVG.querySelectorAll('tspan') ];
+		expect(allTSpans).toHaveLength(1);
+		expect(allTSpans[0].getAttribute('x')).toBe('0');
+		expect(allTSpans[0].getAttribute('y')).toBe('100');
+		expect(allTSpans[0].style.transform).toBe('');
+	});
+
+	it('should preserve empty tspans', async () => {
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
+				<style id="js-draw-style-sheet">
+					path {
+						stroke-linecap:round;
+						stroke-linejoin:round;
+					}
+				</style>
+				<text style="transform: matrix(1, 0, 0, 1, 12, 35); font-family: sans-serif; font-size: 32px; fill: rgb(128, 51, 128);">Testing...<tspan x="3" y="40" style="font-family: sans-serif; font-size: 33px; fill: rgb(128, 51, 128);"></tspan><tspan x="3" y="70">Test 2. ☺</tspan></text>
+			</svg>
+		`, true));
+
+		const textNodesInImage = editor.image.getAllElements().filter(elem => elem instanceof TextComponent);
+		expect(
+			textNodesInImage
+		).toHaveLength(1);
+
+		const asSVG = editor.toSVG();
+		const textObject = asSVG.querySelector('text');
+
+		if (!textObject) {
+			throw new Error('No text object found');
+		}
+
+		const childTextNodes = textObject.querySelectorAll('tspan');
+		expect(childTextNodes).toHaveLength(2);
+	});
+
+	it('should preserve text child size/placement while not saving additional properties', async () => {
+		const secondLineText = 'This is a test of a thing that has been known to break. Will this test catch the issue?';
+		const thirdLineText = 'This is a test of saving/loading multi-line text...';
+
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
+				<style id="js-draw-style-sheet">
+					path {
+						stroke-linecap:round;
+						stroke-linejoin:round;
+					}
+				</style>
+				<text style="transform: matrix(1, 0, 0, 1, 12, 35); font-family: sans-serif; font-size: 32px; fill: rgb(128, 51, 128);">Testing...<tspan x="3" y="40" style="font-family: sans-serif; font-size: 33px; fill: rgb(128, 51, 128);">${secondLineText}</tspan><tspan x="0" y="72" style="font-family: sans-serif; font-size: 32px; fill: rgb(128, 51, 128);">${thirdLineText}</tspan><tspan x="0" y="112" style="font-family: sans-serif; font-size: 32px; fill: rgb(128, 51, 128);">Will it pass or fail?</tspan></text>
+			</svg>
+		`, true));
+
+		expect(
+			editor.image.getAllElements().filter(elem => elem instanceof TextComponent)
+		).toHaveLength(1);
+
+		const asSVG = editor.toSVG();
+		const textObject = asSVG.querySelector('text');
+
+		if (!textObject) {
+			throw new Error('No text object found');
+		}
+
+		expect(textObject.style.transform.replace(/\s+/g, '')).toBe('matrix(1,0,0,1,12,35)');
+		expect(textObject.style.fontFamily).toBe('sans-serif');
+		expect(textObject.style.fontSize).toBe('32px');
+
+		const childTextNodes = textObject.querySelectorAll('tspan');
+		expect(childTextNodes).toHaveLength(3);
+		const firstChild = childTextNodes[0];
+
+		expect(firstChild.textContent).toBe(secondLineText);
+		expect(firstChild.style.transform).toBe('');
+		expect(firstChild.style.fontSize).toBe('33px');
+		expect(firstChild.getAttribute('x')).toBe('3');
+		expect(firstChild.getAttribute('y')).toBe('40');
+
+		// Should not save a fontSize when not necessary (same fill as parent text node)
+		const secondChild = childTextNodes[1];
+		expect(secondChild.style.fontSize ?? '').toBe('');
+
+		// Should not save additional "style" attributes when not necessary
+		// TODO: Uncomment before some future major version release. Currently a "fill" is set for every
+		//  tspan to work around a loading bug.
+		//expect(secondChild.outerHTML).toBe(`<tspan x="0" y="72">${thirdLineText}</tspan>`);
+	});
+});