passing plugin config to initializers

src/core/editor.ts

@@ -3,6 +3,7 @@ import { Actions } from 'core/actions';
 import { EditorData } from 'data/editor-data';
 import { InspectorData } from 'data/inspector-data';
 import { PhaserMeta } from 'data/phaser-meta';
+import { PluginConfig } from 'plugin';
 import { ActionHandler } from './action-handler';
 import { History } from './history';
 import { Preferences } from './preferences';
@@ -16,16 +17,14 @@ class EditorClass {
 	public history: History;
 	public prefs: Preferences;
 
-	// public referenceImage?: ReferenceImage;
-
-	public init(clearPrefs: boolean) {
+	public init(config: PluginConfig) {
 		this.data = new EditorData();
 		this.inspectorData = this.createInspectorData();
 		this.meta = new PhaserMeta();
 
 		this.actions = this.createActions();
 		this.history = new History(this.data);
-		this.prefs = new Preferences(clearPrefs);
+		this.prefs = new Preferences(config.clearPrefs);
 	}
 
 	private createInspectorData() {
@@ -236,7 +235,6 @@ class EditorClass {
 
 	public disable() {
 		this.actions.enable();
-		// if (this.referenceImage) this.prefs.referenceImage = false;
 	}
 }
 

src/editor-view/actions/actions-toolbar.ts

@@ -1,12 +1,15 @@
+import { ComponentTags } from 'component-tags';
 import { Actions } from 'core/actions';
 import { Editor } from 'core/editor';
 import { Widget } from 'editor-view/widget/widget';
-import { ComponentTags } from 'component-tags';
+import { PluginConfig } from 'plugin';
+import { ReferenceImage } from 'scene-view/reference-image';
 import './actions-toolbar.scss';
 import { ActionButton } from './button/action-button';
+import { ReferenceImagePanel } from './reference-image/reference-image-panel';
 
 export class ActionsToolbar extends Widget {
-	public init() {
+	public init(config: PluginConfig) {
 		this.createButton(Actions.TOGGLE_ENABLED);
 		this.createSeparator();
 		this.createButton(Actions.TOGGLE_SNAP);
@@ -18,13 +21,6 @@ export class ActionsToolbar extends Widget {
 		this.createButton(Actions.UNDO);
 		this.createSeparator();
 		this.createSpacer();
-
-		// if (!Editor.referenceImage) return;
-		// this.createSeparator();
-
-		// const refImage = document.createElement(ComponentTags.ReferenceImagePanel) as ReferenceImagePanel;
-		// this.appendChild(refImage);
-		// refImage.init();
 	}
 
 	public enable() { }
@@ -38,6 +34,12 @@ export class ActionsToolbar extends Widget {
 		this.appendChild(btn);
 	}
 
+	public createRefImagePanel(image: ReferenceImage) {
+		const refImage = document.createElement(ComponentTags.ReferenceImagePanel) as ReferenceImagePanel;
+		this.appendChild(refImage);
+		refImage.init(image);
+	}
+
 	private createSeparator() {
 		this.appendChild(document.createElement('div'))
 			.classList.add('separator');

src/editor-view/actions/reference-image/reference-image-panel.ts

@@ -2,13 +2,14 @@ import { ComponentTags } from 'component-tags';
 import { Actions } from 'core/actions';
 import { Editor } from 'core/editor';
 import { PreferenceKey } from 'core/preferences';
+import { ReferenceImage } from 'scene-view/reference-image';
 import { ActionButton } from '../button/action-button';
 import './reference-image-panel.scss';
 
 export class ReferenceImagePanel extends HTMLElement {
 	private slider: HTMLInputElement;
 
-	public init() {
+	public init(image: ReferenceImage) {
 		const btn = document.createElement(ComponentTags.ActionButton) as ActionButton;
 		btn.setAction(Editor.actions.getAction(Actions.TOGGLE_REF_IMAGE));
 		this.appendChild(btn);
@@ -18,12 +19,12 @@ export class ReferenceImagePanel extends HTMLElement {
 		slider.min = '0';
 		slider.max = '1';
 		slider.step = '0.05';
-		// slider.oninput = () => Editor.referenceImage.alpha = parseFloat(slider.value);
+		slider.oninput = () => image.alpha = parseFloat(slider.value);
+		slider.value = image.alpha.toString();
 		this.appendChild(slider);
 
 		Editor.prefs.onPreferenceChanged.add(this.onPreferenceChanged, this);
 		this.onPreferenceChanged('refImage', Editor.prefs.refImage);
-		// slider.value = Editor.referenceImage.alpha.toString();
 	}
 
 	private onPreferenceChanged(pref: PreferenceKey, value: any) {

src/editor-view/editor-view.ts

@@ -2,6 +2,7 @@ import { ComponentTags } from 'component-tags';
 import { ActionHandler } from 'core/action-handler';
 import { Editor } from 'core/editor';
 import { DataOrigin } from 'data/editor-data';
+import { PluginConfig } from 'plugin';
 import { ActionsToolbar } from './actions/actions-toolbar';
 import './editor-view.scss';
 import { ObjectTreeInspector } from './object-tree/inspector/object-tree-inspector';
@@ -10,32 +11,27 @@ import { PropertiesInspector } from './properties/inspector/properties-inspector
 import { Widget } from './widget/widget';
 
 export class EditorView extends Widget {
-	private actions: ActionsToolbar;
+	private game: Phaser.Game;
+	private gameParentElement: HTMLElement;
 	private gameContainer: HTMLElement;
+	private actions: ActionsToolbar;
 	private panels: Panel[] = [];
 
 	private _initialized = false;
 	private _enabled = false;
 
-	private game: Phaser.Game;
-	private gameParentElement: HTMLElement;
-
-	private init(game: Phaser.Game, root: Container) {
+	private init(game: Phaser.Game, config: PluginConfig) {
 		this.game = game;
 		this._initialized = true;
 		Editor.data.onSelectedObjectChanged.add(this.selectObject, this);
-
-		this.createElements();
-
 		Editor.actions.addContainer(ComponentTags.EditorView, this);
-
-		// initialize panels
-		this.panels.forEach(panel => panel.init(game, root));
+		this.createElements(config);
+		this.panels.forEach(panel => panel.init(game, config));
 	}
 
-	public setupActions(actions: ActionHandler) { }
+	public setupActions(_actions: ActionHandler) { }
 
-	private createElements() {
+	private createElements(config: PluginConfig) {
 		const leftPanel = this.appendChild(document.createElement(ComponentTags.Panel) as Panel);
 		leftPanel.setSide('left');
 		leftPanel.classList.add('small');
@@ -46,7 +42,7 @@ export class EditorView extends Widget {
 
 		this.actions = document.createElement(ComponentTags.ActionsToolbar) as ActionsToolbar;
 		content.appendChild(this.actions);
-		this.actions.init();
+		this.actions.init(config);
 
 		this.gameContainer = document.createElement('div');
 		this.gameContainer.id = 'phred-game-container';
@@ -67,10 +63,10 @@ export class EditorView extends Widget {
 		rightPanel.addInspector(props);
 	}
 
-	public enable(game: Phaser.Game, root: Container) {
+	public enable(game: Phaser.Game, config: PluginConfig) {
 		if (this._enabled) return;
 		this._enabled = true;
-		if (!this._initialized) this.init(game, root);
+		if (!this._initialized) this.init(game, config);
 
 		this.panels.forEach(panel => panel.enable());
 		this.addGameToContainer(game);

src/editor-view/inspector/inspector.ts

@@ -1,5 +1,6 @@
 import { DataOrigin } from 'data/editor-data';
 import { Widget } from 'editor-view/widget/widget';
+import { PluginConfig } from 'plugin';
 import './inspector.scss';
 
 export abstract class Inspector extends Widget {
@@ -12,7 +13,7 @@ export abstract class Inspector extends Widget {
 	protected contentElement: HTMLElement;
 	protected selectedObject: PIXI.DisplayObject;
 
-	public init(_game: Phaser.Game, _root: Container) {
+	public init(_game: Phaser.Game, _config: PluginConfig) {
 		this.classList.add('phred-inspector');
 
 		this.headerElement = this.appendChild(document.createElement('h1'));

src/editor-view/object-tree/inspector/object-tree-inspector.ts

@@ -1,7 +1,8 @@
+import { ComponentTags } from 'component-tags';
 import { Editor } from 'core/editor';
 import { DataOrigin } from 'data/editor-data';
 import { Inspector } from 'editor-view/inspector/inspector';
-import { ComponentTags } from 'component-tags';
+import { PluginConfig } from 'plugin';
 import { ObjectTreeModel, ObjectTreeNodeModel } from '../model/object-tree-model';
 import { SearchField } from '../search-field/search-field';
 import { ObjectTreeNode } from '../tree-node/object-tree-node';
@@ -10,15 +11,15 @@ import './object-tree-inspector.scss';
 export class ObjectTreeInspector extends Inspector {
 	private readonly model: ObjectTreeModel = new ObjectTreeModel();
 
-	public init(game: Phaser.Game, root: Container) {
-		super.init(game, root);
+	public init(game: Phaser.Game, config: PluginConfig) {
+		super.init(game, config);
 		this.title = 'Objects';
 
 		const el = this.headerElement.appendChild(document.createElement(ComponentTags.SearchField)) as SearchField;
 		el.onValueChanged = this.filterContent.bind(this);
 
 		Editor.data.onPropertyChanged.add(this.onPropertyChanged, this);
-		this.setRoot(root);
+		this.setRoot(config.root);
 	}
 
 	private setRoot(root: PIXI.DisplayObjectContainer | Phaser.Stage) {

src/editor-view/panel/panel.ts

@@ -6,6 +6,7 @@ import { ComponentTags } from 'component-tags';
 import { PanelSide } from 'types';
 import './panel.scss';
 import { ResizeHandle } from './resize-handle/resize-handle';
+import { PluginConfig } from 'plugin';
 
 export class Panel extends Widget {
 	private readonly inspectors: Inspector[] = [];
@@ -25,11 +26,11 @@ export class Panel extends Widget {
 		this.inspectors.forEach(p => p.selectObject(obj, from));
 	}
 
-	public init(game: Phaser.Game, root: Container) {
+	public init(game: Phaser.Game, config: PluginConfig) {
 		const handle = document.createElement(ComponentTags.ResizeHandle) as ResizeHandle;
 		handle.init(this, this.side);
 		this.appendChild(handle);
-		this.inspectors.forEach(inspector => inspector.init(game, root));
+		this.inspectors.forEach(inspector => inspector.init(game, config));
 		this.style.width = Editor.prefs.getPanelSize(this.side);
 	}
 

src/editor-view/properties/inspector/properties-inspector.ts

@@ -3,13 +3,14 @@ import { Editor } from 'core/editor';
 import { DataOrigin } from 'data/editor-data';
 import { InspectorPropertyModel } from 'data/inspector-data';
 import { Inspector } from 'editor-view/inspector/inspector';
+import { PluginConfig } from 'plugin';
 import { PropertyEditor } from '../editors/property-editor';
 
 export class PropertiesInspector extends Inspector {
 	private editors: Record<string, PropertyEditor<any>> = {};
 
-	public init(game: Phaser.Game, root: Container) {
-		super.init(game, root);
+	public init(game: Phaser.Game, config: PluginConfig) {
+		super.init(game, config);
 		this.title = 'Properties';
 		Editor.data.onPropertyChanged.add(this.onPropertyChanged, this);
 	}

src/editor.state-handler.ts

@@ -4,6 +4,7 @@ import { Editor } from 'core/editor';
 import { DisabledUI } from 'disabled/disabled-ui';
 import { EditorView } from 'editor-view/editor-view';
 import { PluginConfig } from 'plugin';
+import { ReferenceImage } from 'scene-view/reference-image';
 import { SceneView } from 'scene-view/scene-view';
 
 export class EditorStateHandler {
@@ -13,6 +14,7 @@ export class EditorStateHandler {
 
 	private sceneView: SceneView;
 	private editorView: EditorView;
+	private refImage: ReferenceImage;
 
 	private readonly game: Phaser.Game;
 	private readonly config: PluginConfig;
@@ -32,13 +34,12 @@ export class EditorStateHandler {
 
 	private init() {
 		this._initialized = true;
-		Editor.init(this.config.clearPrefs);
+		Editor.init(this.config);
 
 		this.sceneView = new SceneView(this.game);
 		this.editorView = document.createElement(ComponentTags.EditorView) as EditorView;
 
-		// if (this.refImage) this.setupRefImage(this.refImage, this.root);
-
+		this.refImage = new ReferenceImage(this.game, this.config.root);
 		this.setupInitialActions();
 	}
 
@@ -62,8 +63,10 @@ export class EditorStateHandler {
 		this.disabledUI.disable();
 		if (!this._initialized) this.init();
 
+		this.refImage.image = this.config.refImage;
 		this.sceneView.enable(this.config.root, this.game.stage);
-		this.editorView.enable(this.game, this.config.root);
+		this.editorView.enable(this.game, this.config);
+
 		Editor.enable();
 		if (this.onshow) this.onshow();
 	}

src/scene-view/reference-image.ts

@@ -4,17 +4,28 @@ import { PreferenceKey } from 'core/preferences';
 export class ReferenceImage extends Phaser.Group {
 	private _parent: PIXI.DisplayObjectContainer;
 
-	constructor(game: Phaser.Game, image: PIXI.Sprite, root: Container) {
+	public set image(value: PIXI.Sprite) {
+		if (!value) {
+			this.visible = false;
+			return;
+		}
+
+		value.__skip = true;
+		if (value.parent !== this) this.addChild(value);
+		this.visible = true;
+	}
+
+	public get hasImage() { return this.visible; }
+
+	constructor(game: Phaser.Game, root: Container) {
 		super(game, null, '__ref_image');
 		this.__skip = true;
-		image.__skip = true;
-		this.addChild(image);
 		this.alpha = 0.3;
 
 		this._parent = root;
-
 		Editor.prefs.onPreferenceChanged.add(this.onPreferenceChanged, this);
 		this.onPreferenceChanged('refImage', Editor.prefs.refImage);
+		this.visible = false;
 	}
 
 	private onPreferenceChanged(pref: PreferenceKey, value: any) {