cleaning.

Author: b4rtaz

designer/src/api/control-bar-api.ts

@@ -2,16 +2,14 @@ import { race, SimpleEvent } from '../core';
 import { StateModifier } from '../modifier/state-modifier';
 import { DesignerState } from '../designer-state';
 import { HistoryController } from '../history-controller';
-import { ViewportApi } from './viewport-api';
 
 export class ControlBarApi {
 	public static create(
 		state: DesignerState,
 		historyController: HistoryController | undefined,
-		stateModifier: StateModifier,
-		viewportApi: ViewportApi
+		stateModifier: StateModifier
 	): ControlBarApi {
-		const api = new ControlBarApi(state, historyController, stateModifier, viewportApi);
+		const api = new ControlBarApi(state, historyController, stateModifier);
 
 		race(
 			0,
@@ -26,24 +24,11 @@ export class ControlBarApi {
 	private constructor(
 		private readonly state: DesignerState,
 		private readonly historyController: HistoryController | undefined,
-		private readonly stateModifier: StateModifier,
-		private readonly viewportApi: ViewportApi
+		private readonly stateModifier: StateModifier
 	) {}
 
 	public readonly onStateChanged = new SimpleEvent<unknown>();
 
-	public resetViewport() {
-		this.viewportApi.resetViewport();
-	}
-
-	public zoomIn() {
-		this.viewportApi.zoom(true);
-	}
-
-	public zoomOut() {
-		this.viewportApi.zoom(false);
-	}
-
 	public isDragDisabled(): boolean {
 		return this.state.isDragDisabled;
 	}

designer/src/api/designer-api.ts

@@ -13,7 +13,6 @@ export class DesignerApi {
 	public static create(context: DesignerContext): DesignerApi {
 		const workspace = new WorkspaceApi(context.state, context.workspaceController);
 		const viewportController = context.services.viewportController.create(workspace);
-		const viewport = new ViewportApi(context.workspaceController, viewportController, workspace);
 		const toolboxDataProvider = new ToolboxDataProvider(
 			context.componentContext.iconProvider,
 			context.i18n,
@@ -22,11 +21,11 @@ export class DesignerApi {
 
 		return new DesignerApi(
 			context.configuration.shadowRoot,
-			ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport),
+			ControlBarApi.create(context.state, context.historyController, context.stateModifier),
 			new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator),
 			new EditorApi(context.state, context.definitionWalker, context.stateModifier),
 			workspace,
-			viewport,
+			new ViewportApi(context.state, context.workspaceController, viewportController),
 			new PathBarApi(context.state, context.definitionWalker),
 			context.definitionWalker,
 			context.i18n

designer/src/api/viewport-api.ts

@@ -1,17 +1,17 @@
 import { Vector } from '../core';
 import { ViewportController } from '../designer-extension';
+import { DesignerState } from '../designer-state';
 import { ViewportAnimator } from '../workspace/viewport/viewport-animator';
 import { ZoomByWheelCalculator } from '../workspace/viewport/zoom-by-wheel-calculator';
 import { WorkspaceControllerWrapper } from '../workspace/workspace-controller';
-import { WorkspaceApi } from './workspace-api';
 
 export class ViewportApi {
-	private readonly animator = new ViewportAnimator(this.api);
+	private readonly animator = new ViewportAnimator(this.state);
 
 	public constructor(
+		private readonly state: DesignerState,
 		private readonly workspaceController: WorkspaceControllerWrapper,
-		private readonly viewportController: ViewportController,
-		private readonly api: WorkspaceApi
+		private readonly viewportController: ViewportController
 	) {}
 
 	public limitScale(scale: number): number {
@@ -20,13 +20,13 @@ export class ViewportApi {
 
 	public resetViewport() {
 		const defaultViewport = this.viewportController.getDefault();
-		this.api.setViewport(defaultViewport);
+		this.state.setViewport(defaultViewport);
 	}
 
 	public zoom(direction: boolean) {
 		const viewport = this.viewportController.getZoomed(direction);
 		if (viewport) {
-			this.api.setViewport(viewport);
+			this.state.setViewport(viewport);
 		}
 	}
 
@@ -43,12 +43,11 @@ export class ViewportApi {
 	}
 
 	public handleWheelEvent(e: WheelEvent) {
-		const viewport = this.api.getViewport();
-		const canvasPosition = this.api.getCanvasPosition();
+		const canvasPosition = this.workspaceController.getCanvasPosition();
 
-		const newViewport = ZoomByWheelCalculator.calculate(this.viewportController, viewport, canvasPosition, e);
+		const newViewport = ZoomByWheelCalculator.calculate(this.viewportController, this.state.viewport, canvasPosition, e);
 		if (newViewport) {
-			this.api.setViewport(newViewport);
+			this.state.setViewport(newViewport);
 		}
 	}
 }

designer/src/api/workspace-api.ts

@@ -9,6 +9,14 @@ export class WorkspaceApi {
 		private readonly workspaceController: WorkspaceControllerWrapper
 	) {}
 
+	public getViewport(): Viewport {
+		return this.state.viewport;
+	}
+
+	public setViewport(viewport: Viewport) {
+		this.state.setViewport(viewport);
+	}
+
 	public getCanvasPosition(): Vector {
 		return this.workspaceController.getCanvasPosition();
 	}
@@ -21,14 +29,6 @@ export class WorkspaceApi {
 		return this.workspaceController.getRootComponentSize();
 	}
 
-	public getViewport(): Viewport {
-		return this.state.viewport;
-	}
-
-	public setViewport(viewport: Viewport) {
-		this.state.setViewport(viewport);
-	}
-
 	public updateRootComponent() {
 		this.workspaceController.updateRootComponent();
 	}

designer/src/control-bar/control-bar.ts

@@ -2,12 +2,13 @@ import { ControlBarView } from './control-bar-view';
 import { UiComponent } from '../designer-extension';
 import { ControlBarApi } from '../api/control-bar-api';
 import { DesignerApi } from '../api/designer-api';
+import { ViewportApi } from '../api';
 
 export class ControlBar implements UiComponent {
 	public static create(parent: HTMLElement, api: DesignerApi): UiComponent {
 		const isUndoRedoSupported = api.controlBar.isUndoRedoSupported();
 		const view = ControlBarView.create(parent, isUndoRedoSupported, api.i18n);
-		const bar = new ControlBar(view, api.controlBar, isUndoRedoSupported);
+		const bar = new ControlBar(view, api.controlBar, api.viewport, isUndoRedoSupported);
 
 		view.bindResetButtonClick(() => bar.onResetButtonClicked());
 		view.bindZoomInButtonClick(() => bar.onZoomInButtonClicked());
@@ -28,6 +29,7 @@ export class ControlBar implements UiComponent {
 	private constructor(
 		private readonly view: ControlBarView,
 		private readonly controlBarApi: ControlBarApi,
+		private readonly viewportApi: ViewportApi,
 		private readonly isUndoRedoSupported: boolean
 	) {}
 
@@ -40,15 +42,15 @@ export class ControlBar implements UiComponent {
 	}
 
 	private onResetButtonClicked() {
-		this.controlBarApi.resetViewport();
+		this.viewportApi.resetViewport();
 	}
 
 	private onZoomInButtonClicked() {
-		this.controlBarApi.zoomIn();
+		this.viewportApi.zoom(true);
 	}
 
 	private onZoomOutButtonClicked() {
-		this.controlBarApi.zoomOut();
+		this.viewportApi.zoom(false);
 	}
 
 	private onMoveButtonClicked() {

designer/src/designer-extension.ts

@@ -83,6 +83,8 @@ export interface SequenceContext {
 	isPreview: boolean;
 }
 
+// StepComponentViewWrapperExtension
+
 export interface StepComponentViewWrapperExtension {
 	wrap(view: StepComponentView, stepContext: StepContext): StepComponentView;
 }

designer/src/workspace/viewport/viewport-animator.ts

@@ -1,26 +1,25 @@
-import { WorkspaceApi } from '../../api';
 import { animate, Animation } from '../../core/animation';
 import { Viewport } from '../../designer-extension';
+import { DesignerState } from '../../designer-state';
 
 export class ViewportAnimator {
 	private animation?: Animation;
 
-	public constructor(private readonly api: WorkspaceApi) {}
+	public constructor(private readonly state: DesignerState) {}
 
 	public execute(target: Viewport) {
 		if (this.animation && this.animation.isAlive) {
 			this.animation.stop();
 		}
 
-		const viewport = this.api.getViewport();
-		const startPosition = viewport.position;
-		const startScale = viewport.scale;
+		const startPosition = this.state.viewport.position;
+		const startScale = this.state.viewport.scale;
 		const deltaPosition = startPosition.subtract(target.position);
 		const deltaScale = startScale - target.scale;
 
 		this.animation = animate(150, progress => {
 			const newScale = startScale - deltaScale * progress;
-			this.api.setViewport({
+			this.state.setViewport({
 				position: startPosition.subtract(deltaPosition.multiplyByScalar(progress)),
 				scale: newScale
 			});