js-draw 1.0.1 → 1.1.0

package/src/Editor.test.ts

@@ -1,107 +0,0 @@
-import { BaseTool, InputEvtType } from './lib';
-import createEditor from './testing/createEditor';
-
-describe('Editor', () => {
-	it('should fire keyup events when the editor loses focus', () => {
-		const editor = createEditor();
-		const rootElem = editor.getRootElement();
-
-		const inputArea = rootElem.querySelector('textarea')! as HTMLTextAreaElement;
-
-		// Set the only tool to a tool that reports which keys are pressed.
-		const keyPressMock = jest.fn(() => true);
-		const keyReleaseMock = jest.fn();
-		editor.toolController.setTools([
-			new (class extends BaseTool {
-				public constructor() {
-					super(editor.notifier, 'test');
-				}
-
-				public override onKeyPress = keyPressMock;
-				public override onKeyUp = keyReleaseMock;
-			})()
-		]);
-
-		inputArea.focus();
-
-		// Sends a keyboard event to the editor
-		const dispatchKeyEvent = (kind: 'keydown'|'keyup', code: string, key: string) => {
-			const event = new KeyboardEvent(kind, {
-				bubbles: true,
-				key,
-				code,
-				shiftKey: false,
-				ctrlKey: false,
-				metaKey: false,
-			});
-			inputArea.dispatchEvent(event);
-		};
-
-		// Press the A key
-		dispatchKeyEvent('keydown', 'KeyA', 'a');
-
-		const keyAEvent = {
-			kind: InputEvtType.KeyPressEvent,
-			key: 'a',
-			code: 'KeyA',
-			ctrlKey: false,
-			altKey: false,
-			shiftKey: false,
-		};
-		expect(keyPressMock).toHaveBeenLastCalledWith(keyAEvent);
-		expect(keyPressMock).toHaveBeenCalledTimes(1);
-
-		// Press it again
-		dispatchKeyEvent('keydown', 'KeyA', 'a');
-
-		expect(keyPressMock).toHaveBeenLastCalledWith(keyAEvent);
-		expect(keyPressMock).toHaveBeenCalledTimes(2);
-
-		// Pressing a different key should send a different keydownb event to the toolbar
-		dispatchKeyEvent('keydown', 'KeyB', 'b');
-
-		expect(keyPressMock).not.toHaveBeenLastCalledWith(keyAEvent);
-		expect(keyPressMock).toHaveBeenCalledTimes(3);
-
-		// Press yet another key (and multiple times) -- if this key is still down when the
-		// editor is blured, a keyup event should only be fired once.
-		dispatchKeyEvent('keydown', 'KeyF', 'f');
-		expect(keyPressMock).toHaveBeenCalledTimes(4);
-
-		dispatchKeyEvent('keydown', 'KeyF', 'f');
-		expect(keyPressMock).toHaveBeenCalledTimes(5);
-
-		dispatchKeyEvent('keyup', 'KeyA', 'a');
-		expect(keyPressMock).toHaveBeenCalledTimes(5);
-		expect(keyReleaseMock).toHaveBeenCalledTimes(1);
-		expect(keyReleaseMock).toHaveBeenLastCalledWith({
-			...keyAEvent,
-			kind: InputEvtType.KeyUpEvent
-		});
-
-		// Defocus the input --- this should fire a key up event for the keys still down
-		inputArea.blur();
-		inputArea.dispatchEvent(new Event('blur', { bubbles: true }));
-
-		const focusable = document.createElement('button');
-		document.body.appendChild(focusable);
-		focusable.focus();
-
-		expect(keyReleaseMock).toHaveBeenCalledTimes(3);
-
-		// Events for both keys that were still down should have been fired:
-		const secondToLastCall = keyReleaseMock.mock.calls[keyReleaseMock.mock.calls.length - 2];
-		const lastCall = keyReleaseMock.mock.lastCall;
-
-		expect(secondToLastCall).toMatchObject([{
-			kind: InputEvtType.KeyUpEvent,
-			key: 'b',
-			code: 'KeyB',
-		}]);
-		expect(lastCall).toMatchObject([{
-			kind: InputEvtType.KeyUpEvent,
-			key: 'f',
-			code: 'KeyF',
-		}]);
-	});
-});

package/src/Editor.toSVG.test.ts

@@ -1,294 +0,0 @@
-import { Color4, Mat33, Rect2, TextComponent, EditorImage, Vec2, StrokeComponent, SelectionTool, sendPenEvent, InputEvtType } from './lib';
-import TextRenderingStyle 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: TextRenderingStyle = {
-			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>`);
-	});
-
-	it('should preserve group elements', 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>
-				<g id='main-group'>
-					<g id='sub-group-1'>
-						<path d='M0,0 L10,10 0,10' fill='#f00'/>
-						<path d='M20,0 L10,10 0,10'/>
-					</g>
-					<g id='empty-group-2'></g>
-				</g>
-				<g id='empty-group-3'></g>
-
-				<!-- Groups without IDs should also be preserved -->
-				<g><g><g id='marker-1'></g></g></g>
-				<g class='test'><g id='marker-2'/></g>
-
-				<!-- Groups with duplicate IDs should preserved (though IDs)
-					may be changed -->
-				<g id='empty-group-2'/>
-				<g id='empty-group-2'><g id='empty-group-2'/></g>
-			</svg>
-		`));
-
-		// Both paths should exist.
-		expect(
-			editor.image
-				.getElementsIntersectingRegion(new Rect2(-10, -10, 100, 100))
-				.filter(elem => elem instanceof StrokeComponent)
-		).toHaveLength(2);
-
-		const outputSVG = editor.toSVG();
-
-		// Should still have the expected number of groups
-		expect(outputSVG.querySelectorAll('g')).toHaveLength(12);
-
-		// Should preserve the empty group.
-		expect(outputSVG.querySelectorAll('g#empty-group-2')).toHaveLength(1);
-
-		// The empty group should still have the correct parent
-		expect(outputSVG.querySelectorAll('g#main-group > g#empty-group-2')).toHaveLength(1);
-
-		// Paths should still be children of sub-group-1
-		expect(outputSVG.querySelectorAll('g#sub-group-1 > path')).toHaveLength(2);
-
-		// sub-group-1 should have the correct parent
-		expect(outputSVG.querySelectorAll('g#main-group > g#sub-group-1')).toHaveLength(1);
-
-		// And these should be the only paths.
-		expect(outputSVG.querySelectorAll('path')).toHaveLength(2);
-
-		// Should also preserve groups without IDs
-		// Selector ref: https://stackoverflow.com/a/18607777
-		expect(outputSVG.querySelectorAll('svg > g > g > g#marker-1')).toHaveLength(1);
-		expect(outputSVG.querySelectorAll('svg > g > g#marker-2')).toHaveLength(1);
-
-		// Should preserve class names on `g` objects:
-		expect(outputSVG.querySelectorAll('svg > g.test > g#marker-2')).toHaveLength(1);
-
-		// Should preserve groups that had duplicate IDs
-		expect(outputSVG.querySelectorAll('svg > g#empty-group-2--1')).toHaveLength(1);
-		expect(outputSVG.querySelectorAll('svg > g#empty-group-2--2')).toHaveLength(1);
-		expect(outputSVG.querySelectorAll('svg > g#empty-group-2--2 > g#empty-group-2--3')).toHaveLength(1);
-	});
-
-	describe('should not preserve group elements when doing so would change the z order', () => {
-		it('in an image with few items', 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">
-					<g id='main-group-1'>
-						<path d='M0,0 L-10,10 0,10' fill='#f00'/>
-						<path d='M20,0 L10,10 0,10'/>
-					</g>
-					<path d='M40,40 l10,10 0,10'/>
-				</svg>
-			`));
-
-			// All paths should exist.
-			expect(
-				editor.image
-					.getElementsIntersectingRegion(new Rect2(-10, -10, 100, 100))
-					.filter(elem => elem instanceof StrokeComponent)
-			).toHaveLength(3);
-
-			// Before modifying, both paths should be within the main-group-1 group
-			expect(editor.toSVG().querySelectorAll('svg > g#main-group-1 > path')).toHaveLength(2);
-
-			const selectionTool = editor.toolController.getMatchingTools(SelectionTool)[0];
-			selectionTool.setEnabled(true);
-
-			// Select the bottommost stroke
-			sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(-11, 9));
-			sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(-9, 10));
-			sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(-9, 10));
-
-			// The stroke should be selected
-			expect(selectionTool.getSelectedObjects()).toHaveLength(1);
-			expect(selectionTool.getSelectedObjects()[0].getBBox())
-				.objEq(new Rect2(-10, 0, 10, 10));
-
-			// Drag the selection (moves the selected item to the top)
-			sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(-11, 9));
-			sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(0, 0));
-			sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(0, 0));
-
-			expect(selectionTool.getSelectedObjects()[0].getBBox())
-				.not.objEq(new Rect2(-10, 0, 10, 10));
-			selectionTool.setEnabled(false);
-
-			// One of the items should have been moved out of the main group
-			const outputSVG = editor.toSVG();
-			expect(outputSVG.querySelectorAll('svg > path')).toHaveLength(2);
-			expect(outputSVG.querySelectorAll('svg > g#main-group-1 > path')).toHaveLength(1);
-		});
-
-		it('in an image with many items in nested groups', 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">
-					<path d='M-100,-100 l 2,2 0,2'/>
-					<g id='group-1'>
-						<path d='M0,0 L-10,10 0,10' fill='#f00'/>
-						<path d='M20,0 L10,10 0,10'/>
-
-						<g id='group-2'>
-							<path d='M100,100 l 2,2 0,2'/>
-						</g>
-					</g>
-					<path d='M40,40 l10,10 0,10'/>
-				</svg>
-			`));
-
-			// .expects that all paths have their original parent groups.
-			const expectGroupParentsToBeOriginal = () => {
-				expect(
-					editor.image
-						.getAllElements()
-						.filter(elem => elem instanceof StrokeComponent)
-				).toHaveLength(5);
-
-				const output = editor.toSVG();
-				expect(
-					output.querySelectorAll('svg > g#group-1 path')
-				).toHaveLength(3);
-				expect(
-					output.querySelectorAll('svg > g#group-1 > g > path')
-				).toHaveLength(1);
-			};
-
-			expectGroupParentsToBeOriginal();
-
-			const nudgePathNear = async (pos: Vec2) => {
-				const targetElems = editor.image.getElementsIntersectingRegion(Rect2.bboxOf([ pos ], 5));
-
-				expect(targetElems).toHaveLength(1);
-
-				// Move the path to the top
-				const target = targetElems[0];
-				await editor.dispatch(target.transformBy(Mat33.scaling2D(1.01)));
-			};
-
-			// Moving a path that's below all groups should not change group parentings.
-			nudgePathNear(Vec2.of(-100, -100));
-			expectGroupParentsToBeOriginal();
-
-			// Moving a path that's within nested groups should move the path out of that group.
-			nudgePathNear(Vec2.of(100, 100));
-
-			const outputSVG = editor.toSVG();
-			expect(outputSVG.querySelectorAll('svg > path')).toHaveLength(3);
-			expect(outputSVG.querySelectorAll('svg > g#group-1 > path')).toHaveLength(2);
-			expect(outputSVG.querySelectorAll('svg > g#group-1 > g')).toHaveLength(1);
-			expect(outputSVG.querySelectorAll('svg > g#group-1 > g > *')).toHaveLength(0);
-		});
-	});
-});