@woosh/meep-engine 3.14.6 → 3.16.0

package/editor/view/particles/effect/ParticleEffectEditorView.js

@@ -0,0 +1,223 @@
+import { ActionProcessor } from "../../../../src/core/process/undo/ActionProcessor.js";
+import LabelView from "../../../../src/view/common/LabelView.js";
+import EmptyView from "../../../../src/view/elements/EmptyView.js";
+import View from "../../../../src/view/View.js";
+import { ParticleCodeEditorView } from "./ParticleCodeEditorView.js";
+import { ParticleEmitterInspectorView } from "./ParticleEmitterInspectorView.js";
+import { ParticleGraphEditorView } from "./ParticleGraphEditorView.js";
+import { ParticlePreviewView } from "./ParticlePreviewView.js";
+
+/**
+ * The whole particle editor in one view: both authoring layers, the emitter inspector, and the
+ * effect running next to them.
+ *
+ * This is the *assembled* form, which is what a playground page wants — one thing to mount, and a
+ * layout already thought about. It is not the only form: each of the four panels takes nothing but
+ * the document and is a plain {@link View}, so an editor shell docks them as four panels an author
+ * can arrange, and this view is then simply not used.
+ *
+ * ```js
+ * const effect = make_starter_particle_effect();
+ *
+ * dock.addPanel(DockPanel.from({ id: 'particle-graph', title: 'Particle graph',
+ *     view: new ParticleGraphEditorView({ effect, actionProcessor: editor.actions }) }));
+ * dock.addPanel(DockPanel.from({ id: 'particle-code', title: 'Particle code',
+ *     view: new ParticleCodeEditorView({ effect }) }));
+ * ```
+ *
+ * The layers share one {@link ActionProcessor}, so passing a host editor's own gives particle
+ * authoring a place on the application's undo timeline without the host knowing what a particle is.
+ */
+
+/** Height of the toolbar strip, px. @type {number} */
+const TOOLBAR_HEIGHT = 34;
+
+/** Width of the right-hand column — preview over inspector — px. @type {number} */
+const SIDEBAR_WIDTH = 340;
+
+/** Share of the sidebar's height the preview takes. @type {number} */
+const PREVIEW_SHARE = 0.5;
+
+export class ParticleEffectEditorView extends View {
+    /**
+     * @type {EmptyView}
+     */
+    #toolbar;
+
+    /**
+     * @type {Array<{id: string, label: string, view: View, toggle: View}>}
+     */
+    #layers = [];
+
+    /**
+     * @type {string}
+     */
+    #active = "graph";
+
+    /**
+     * @param {object} options
+     * @param {import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectDocument} options.effect
+     * @param {ActionProcessor} [options.actionProcessor]
+     * @param {number} [options.previewCapacity]
+     */
+    constructor({ effect, actionProcessor = new ActionProcessor({}), previewCapacity }) {
+        super();
+
+        this.el = document.createElement('div');
+
+        this.addClass('ui-particle-effect-editor');
+
+        /**
+         * @type {import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectDocument}
+         */
+        this.effect = effect;
+
+        /**
+         * @type {ActionProcessor}
+         */
+        this.actionProcessor = actionProcessor;
+
+        /**
+         * @type {ParticleGraphEditorView}
+         */
+        this.graphEditor = new ParticleGraphEditorView({ effect, actionProcessor });
+
+        /**
+         * @type {ParticleCodeEditorView}
+         */
+        this.codeEditor = new ParticleCodeEditorView({ effect });
+
+        /**
+         * @type {ParticlePreviewView}
+         */
+        this.preview = new ParticlePreviewView({ effect, capacity: previewCapacity });
+
+        /**
+         * @type {ParticleEmitterInspectorView}
+         */
+        this.inspector = new ParticleEmitterInspectorView({ effect });
+
+        this.#toolbar = new EmptyView({ classList: ['toolbar'] });
+
+        this.#layers = [
+            { id: "graph", label: "Graph", view: this.graphEditor },
+            { id: "code", label: "Code", view: this.codeEditor },
+        ].map(layer => ({ ...layer, toggle: this.#buildLayerToggle(layer.id, layer.label) }));
+
+        this.addChild(this.#toolbar);
+
+        for (const layer of this.#layers) {
+            this.addChild(layer.view);
+        }
+
+        this.addChild(this.preview);
+        this.addChild(this.inspector);
+
+        this.#buildToolbar();
+
+        this.setLayer(this.#active);
+
+        this.bindSignal(this.size.onChanged, this.layout, this);
+        this.on.linked.add(this.layout, this);
+    }
+
+    /**
+     * @param {string} id
+     * @param {string} label
+     * @returns {View}
+     */
+    #buildLayerToggle(id, label) {
+        const toggle = new EmptyView({ classList: ['layer-toggle'] });
+
+        toggle.addChild(new LabelView(label, { classList: ['label'] }));
+        toggle.el.addEventListener('click', () => this.setLayer(id));
+
+        this.#toolbar.addChild(toggle);
+
+        return toggle;
+    }
+
+    #buildToolbar() {
+        this.#toolbar.addChild(new EmptyView({ classList: ['spacer'] }));
+
+        this.#toolbar.addChild(button("Undo", () => this.actionProcessor.undo()));
+        this.#toolbar.addChild(button("Redo", () => this.actionProcessor.redo()));
+
+        const pause = button("Pause", () => {
+            this.preview.running = !this.preview.running;
+
+            pause.children[0].el.textContent = this.preview.running ? "Pause" : "Play";
+        });
+
+        this.#toolbar.addChild(pause);
+        this.#toolbar.addChild(button("Restart", () => this.preview.restart()));
+    }
+
+    /**
+     * Show one authoring layer. Both stay built: the graph keeps its cameras and selections while
+     * the code pane is up, and the code pane keeps its scroll position while the graph is up.
+     *
+     * Which layer is *shown* is not which layer is *authoritative* — that is the document's, and the
+     * code pane's own header says which it is.
+     *
+     * @param {string} id `"graph"` or `"code"`
+     */
+    setLayer(id) {
+        this.#active = id;
+
+        for (const layer of this.#layers) {
+            const active = layer.id === id;
+
+            layer.view.visible = active;
+            layer.toggle.setClass('active', active);
+        }
+
+        this.layout();
+    }
+
+    /**
+     * @returns {string}
+     */
+    activeLayer() {
+        return this.#active;
+    }
+
+    layout() {
+        const width = this.size.x;
+        const height = this.size.y;
+
+        const body_height = Math.max(0, height - TOOLBAR_HEIGHT);
+        const sidebar_width = Math.min(SIDEBAR_WIDTH, Math.max(0, width - 320));
+        const main_width = Math.max(0, width - sidebar_width);
+
+        this.#toolbar.position.set(0, 0);
+        this.#toolbar.size.set(width, TOOLBAR_HEIGHT);
+
+        for (const layer of this.#layers) {
+            layer.view.position.set(0, TOOLBAR_HEIGHT);
+            layer.view.size.set(main_width, body_height);
+        }
+
+        const preview_height = Math.round(body_height * PREVIEW_SHARE);
+
+        this.preview.position.set(main_width, TOOLBAR_HEIGHT);
+        this.preview.size.set(sidebar_width, preview_height);
+
+        this.inspector.position.set(main_width, TOOLBAR_HEIGHT + preview_height);
+        this.inspector.size.set(sidebar_width, Math.max(0, body_height - preview_height));
+    }
+}
+
+/**
+ * @param {string} label
+ * @param {function()} action
+ * @returns {View}
+ */
+function button(label, action) {
+    const view = new EmptyView({ classList: ['toolbar-button'] });
+
+    view.addChild(new LabelView(label));
+    view.el.addEventListener('click', action);
+
+    return view;
+}

package/editor/view/particles/effect/ParticleEmitterInspectorView.d.ts

@@ -0,0 +1,25 @@
+export class ParticleEmitterInspectorView extends View {
+    /**
+     * @param {object} options
+     * @param {import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectDocument} options.effect
+     */
+    constructor({ effect }: {
+        effect: import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectDocument;
+    });
+    el: HTMLDivElement;
+    /**
+     * @type {import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectDocument}
+     */
+    effect: import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectDocument;
+    /**
+     * Re-read everything from the document.
+     *
+     * Values are pushed into every control; the option lists and the attribute rows are rebuilt only
+     * when the attributes themselves changed, because that is the only thing their shape follows and
+     * rebuilding them on every edit would sweep away whatever an author was in the middle of.
+     */
+    refresh(): void;
+    #private;
+}
+import View from "../../../../src/view/View.js";
+//# sourceMappingURL=ParticleEmitterInspectorView.d.ts.map

package/editor/view/particles/effect/ParticleEmitterInspectorView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticleEmitterInspectorView.d.ts","sourceRoot":"","sources":["../../../../../editor/view/particles/effect/ParticleEmitterInspectorView.js"],"names":[],"mappings":"AA+DA;IAkDI;;;OAGG;IACH;QAFyG,MAAM,EAApG,OAAO,qDAAqD,EAAE,sBAAsB;OAqC9F;IAhCG,mBAAuC;IAIvC;;OAEG;IACH,QAFU,OAAO,qDAAqD,EAAE,sBAAsB,CAE1E;IA2BxB;;;;;;OAMG;IACH,gBAiBC;;CAyXJ;iBAjiBgB,8BAA8B"}