initial changes for mobile mode.

Author: b4rtaz

package-lock.json

@@ -21,7 +21,8 @@
 		"test:single": "karma start --single-run",
 		"eslint": "eslint ./src --ext .ts",
 		"prettier": "prettier --check ./src",
-		"prettier:fix": "prettier --write ./src"
+		"prettier:fix": "prettier --write ./src",
+		"serve": "http-server ./"
 	},
 	"author": "b4rtaz",
 	"license": "MIT",
@@ -30,16 +31,17 @@
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
 		"@typescript-eslint/parser": "^5.27.0",
 		"eslint": "^8.17.0",
+		"http-server": "^14.1.1",
 		"karma": "^6.3.20",
 		"karma-chrome-launcher": "^3.1.1",
 		"karma-jasmine": "^5.0.1",
 		"karma-spec-reporter": "^0.0.34",
 		"karma-typescript": "^5.5.3",
+		"prettier": "^2.6.2",
 		"rollup": "^2.75.3",
 		"rollup-plugin-dts": "^4.2.2",
 		"rollup-plugin-typescript2": "^0.31.2",
-		"typescript": "^4.6.4",
-		"prettier": "^2.6.2"
+		"typescript": "^4.6.4"
 	},
 	"keywords": [
 		"workflow",

package.json

@@ -0,0 +1,15 @@
+import { Dom } from './core/dom';
+import { DesignerView } from './designer-view';
+import { createDesignerConfigurationStub, createDesignerContextStub } from './test-tools/stubs';
+
+describe('DesignerView', () => {
+	it('create() creates view', () => {
+		const parent = Dom.element('div');
+		const configuration = createDesignerConfigurationStub();
+		const context = createDesignerContextStub();
+
+		const view = DesignerView.create(parent, context, configuration);
+
+		expect(view).toBeDefined();
+	});
+});

src/designer-view.spec.ts

@@ -0,0 +1,51 @@
+import { ControlBar } from './control-bar/control-bar';
+import { Dom } from './core/dom';
+import { DesignerConfiguration } from './designer-configuration';
+import { DesignerContext } from './designer-context';
+import { SmartEditor } from './smart-editor/smart-editor';
+import { Toolbox } from './toolbox/toolbox';
+import { Workspace } from './workspace/workspace';
+
+export class DesignerView {
+	public static create(parent: HTMLElement, context: DesignerContext, configuration: DesignerConfiguration): DesignerView {
+		const theme = configuration.theme || 'light';
+
+		const root = Dom.element('div', {
+			class: `sqd-designer sqd-theme-${theme}`
+		});
+		parent.appendChild(root);
+
+		const workspace = Workspace.create(root, context);
+		if (!configuration.toolbox.isHidden) {
+			Toolbox.create(root, context);
+		}
+		ControlBar.create(root, context);
+		if (!configuration.editors.isHidden) {
+			SmartEditor.create(root, context);
+		}
+		const view = new DesignerView(root, workspace);
+		view.reloadMobileMode();
+		window.addEventListener('resize', view.onResizeHandler);
+		return view;
+	}
+
+	private onResizeHandler = () => this.onResize();
+
+	public constructor(private readonly root: HTMLElement, public readonly workspace: Workspace) {}
+
+	public destroy() {
+		this.workspace.destroy();
+
+		window.removeEventListener('resize', this.onResizeHandler);
+		this.root.parentElement?.removeChild(this.root);
+	}
+
+	private onResize() {
+		this.reloadMobileMode();
+	}
+
+	private reloadMobileMode() {
+		const isMobile = window.innerWidth < 500; // TODO
+		Dom.toggleClass(this.root, isMobile, 'sqd-mobile');
+	}
+}

src/designer-view.ts

@@ -1,48 +1,25 @@
 import { BehaviorController } from './behaviors/behavior-controller';
-import { ControlBar } from './control-bar/control-bar';
-import { Dom } from './core/dom';
 import { ObjectCloner } from './core/object-cloner';
 import { SimpleEvent } from './core/simple-event';
 import { Definition } from './definition';
 import { DesignerConfiguration } from './designer-configuration';
 import { DesignerContext } from './designer-context';
-import { SmartEditor } from './smart-editor/smart-editor';
-import { Toolbox } from './toolbox/toolbox';
-import { Workspace } from './workspace/workspace';
+import { DesignerView } from './designer-view';
 
 export default class Designer {
 	public static create(parent: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration): Designer {
-		const theme = configuration.theme || 'light';
 		const definition = ObjectCloner.deepClone(startDefinition);
 
-		const root = Dom.element('div', {
-			class: `sqd-designer sqd-theme-${theme}`
-		});
-
-		parent.appendChild(root);
-
 		const behaviorController = new BehaviorController();
 		const context = new DesignerContext(definition, behaviorController, configuration);
 
-		const workspace = Workspace.create(root, context);
-		if (!configuration.toolbox.isHidden) {
-			Toolbox.create(root, context);
-		}
-		ControlBar.create(root, context);
-		if (!configuration.editors.isHidden) {
-			SmartEditor.create(root, context);
-		}
-
-		const designer = new Designer(root, context, workspace);
+		const view = DesignerView.create(parent, context, configuration);
+		const designer = new Designer(view, context);
 		context.onDefinitionChanged.subscribe(() => designer.onDefinitionChanged.forward(context.definition));
 		return designer;
 	}
 
-	private constructor(
-		private readonly root: HTMLElement,
-		private readonly context: DesignerContext,
-		private readonly workspace: Workspace
-	) {}
+	private constructor(private readonly view: DesignerView, private readonly context: DesignerContext) {}
 
 	public readonly onDefinitionChanged = new SimpleEvent<Definition>();
 
@@ -51,11 +28,11 @@ export default class Designer {
 	}
 
 	public revalidate() {
-		this.workspace.revalidate();
+		this.view.workspace.revalidate();
 	}
 
 	public isValid(): boolean {
-		return this.workspace.isValid;
+		return this.view.workspace.isValid;
 	}
 
 	public isReadonly(): boolean {
@@ -87,6 +64,6 @@ export default class Designer {
 	}
 
 	public destroy() {
-		this.root.parentElement?.removeChild(this.root);
+		this.view.destroy();
 	}
 }

src/designer.ts

@@ -9,7 +9,9 @@ export class RegionView {
 			class: 'sqd-region',
 			width: totalWidth,
 			height,
-			fill: 'transparent'
+			fill: 'transparent',
+			rx: 5,
+			ry: 5
 		});
 		const regions: SVGElement[] = [mainRegion];
 		parent.insertBefore(mainRegion, parent.firstChild);

src/workspace/common-views/region-view.ts

@@ -43,9 +43,13 @@ export class WorkspaceView {
 		canvas.appendChild(foreground);
 		workspace.appendChild(canvas);
 		parent.appendChild(workspace);
-		return new WorkspaceView(workspace, canvas, gridPattern, gridPatternPath, foreground, configuration);
+
+		const view = new WorkspaceView(workspace, canvas, gridPattern, gridPatternPath, foreground, configuration);
+		window.addEventListener('resize', view.onResizeHandler);
+		return view;
 	}
 
+	private onResizeHandler = () => this.onResize();
 	public rootComponent?: StartStopComponent;
 
 	private constructor(
@@ -62,6 +66,7 @@ export class WorkspaceView {
 			this.rootComponent.view.destroy();
 		}
 		this.rootComponent = StartStopComponent.create(this.foreground, sequence, this.configuration);
+		this.refreshSize();
 	}
 
 	public setPositionAndScale(position: Vector, scale: number) {
@@ -80,13 +85,6 @@ export class WorkspaceView {
 		});
 	}
 
-	public refreshSize() {
-		Dom.attrs(this.canvas, {
-			width: this.workspace.offsetWidth,
-			height: this.workspace.offsetHeight
-		});
-	}
-
 	public getClientPosition(): Vector {
 		const rect = this.canvas.getBoundingClientRect();
 		return new Vector(rect.x, rect.y);
@@ -96,10 +94,6 @@ export class WorkspaceView {
 		return new Vector(this.canvas.clientWidth, this.canvas.clientHeight);
 	}
 
-	public bindResize(handler: () => void) {
-		window.addEventListener('resize', handler);
-	}
-
 	public bindMouseDown(handler: (e: MouseEvent) => void) {
 		this.canvas.addEventListener('mousedown', handler);
 	}
@@ -111,4 +105,19 @@ export class WorkspaceView {
 	public bindWheel(handler: (e: WheelEvent) => void) {
 		this.canvas.addEventListener('wheel', handler);
 	}
+
+	public destroy() {
+		window.removeEventListener('resize', this.onResizeHandler);
+	}
+
+	private refreshSize() {
+		Dom.attrs(this.canvas, {
+			width: this.workspace.offsetWidth,
+			height: this.workspace.offsetHeight
+		});
+	}
+
+	private onResize() {
+		this.refreshSize();
+	}
 }

src/workspace/workspace-view.ts

@@ -15,7 +15,6 @@ export class Workspace implements DesignerComponentProvider {
 		const workspace = new Workspace(view, context);
 		setTimeout(() => {
 			workspace.render();
-			workspace.view.refreshSize();
 			workspace.resetViewPort();
 		});
 
@@ -25,7 +24,6 @@ export class Workspace implements DesignerComponentProvider {
 		context.onSelectedStepChanged.subscribe(s => workspace.onSelectedStepChanged(s));
 		context.onIsDraggingChanged.subscribe(i => workspace.onIsDraggingChanged(i));
 
-		workspace.view.bindResize(() => workspace.view.refreshSize());
 		workspace.view.bindMouseDown(e => workspace.onMouseDown(e));
 		workspace.view.bindTouchStart(e => workspace.onTouchStart(e));
 		workspace.view.bindWheel(e => workspace.onWheel(e));
@@ -85,6 +83,10 @@ export class Workspace implements DesignerComponentProvider {
 		this.context.animateViewPort(realPos.add(clientSize.divideByScalar(2)).subtract(componentOffset), 1);
 	}
 
+	public destroy() {
+		this.view.destroy();
+	}
+
 	private onMouseDown(e: MouseEvent) {
 		e.preventDefault();
 		const isMiddleButton = e.button === 1;