From caca840b8606bf7681591415911a73073dbd50f4 Mon Sep 17 00:00:00 2001
From: nahkd123 <nahkd123@gmail.com>
Date: Thu, 10 Oct 2024 22:24:48 +0700
Subject: [PATCH] Expose selections and playback to addons

---
 nahara-motion-ui/src/App.svelte               |  84 +-------
 nahara-motion-ui/src/App.ts                   | 189 ++++++++++++++++++
 nahara-motion-ui/src/appglobal.ts             |  80 --------
 nahara-motion-ui/src/ui/bar/MediaBar.svelte   |  26 +--
 nahara-motion-ui/src/ui/bar/TopBar.svelte     |   2 +-
 .../src/ui/graph/AnimationGraphPane.svelte    |  23 +--
 .../src/ui/outliner/Outliner.svelte           |   3 +-
 .../src/ui/outliner/OutlinerPane.svelte       |  30 +--
 .../src/ui/project/ProjectPane.svelte         |   2 +-
 .../src/ui/project/SceneCreatePopup.svelte    |   2 +-
 .../src/ui/properties/PropertiesPane.svelte   |  23 +--
 .../src/ui/render/RenderPane.svelte           |   1 -
 .../src/ui/timeline/TimelinePane.svelte       |  30 +--
 .../src/ui/viewport/ViewportPane.svelte       |  88 ++++----
 .../src/ui/viewport/Welcome.svelte            |   2 +-
 nahara-motion/src/addon/registries.ts         |   5 +-
 nahara-motion/src/editor/command.ts           |  63 ++++++
 nahara-motion/src/editor/editor.ts            |   4 +
 nahara-motion/src/editor/playback.ts          |  37 ++++
 nahara-motion/src/editor/selection.ts         |  31 +++
 nahara-motion/src/index.ts                    |   3 +
 nahara-motion/src/system/commands.ts          |  13 ++
 nahara-motion/src/system/nahara.ts            |   5 +
 23 files changed, 470 insertions(+), 276 deletions(-)
 create mode 100644 nahara-motion-ui/src/App.ts
 create mode 100644 nahara-motion/src/editor/command.ts
 create mode 100644 nahara-motion/src/editor/playback.ts
 create mode 100644 nahara-motion/src/editor/selection.ts
 create mode 100644 nahara-motion/src/system/commands.ts

diff --git a/nahara-motion-ui/src/App.svelte b/nahara-motion-ui/src/App.svelte
index 5f000d9..1f207d4 100644
--- a/nahara-motion-ui/src/App.svelte
+++ b/nahara-motion-ui/src/App.svelte
@@ -1,95 +1,17 @@
-<script lang="ts" context="module">
-    export class EditorImpl implements motion.IEditor {
-        openedProject?: motion.IProject | undefined;
-        openedScene?: motion.IScene | undefined;
-
-        readonly projectStore: Writable<motion.IProject | undefined> = writable();
-        readonly sceneStore: Writable<motion.IScene | undefined> = writable();
-
-        constructor(
-            public readonly layout: LayoutManagerImpl
-        ) {}
-
-        openProject(project: motion.IProject): void {
-            if (project == this.openedProject) return;
-            if (this.openedProject) this.closeProject();
-            this.openedProject = project;
-            this.projectStore.set(project);
-        }
-
-        closeProject(): void {
-            if (this.openedScene) this.closeScene();
-            this.openedProject = undefined;
-            this.projectStore.set(undefined);
-        }
-
-        openScene(scene: motion.IScene): void {
-            if (scene == this.openedScene) return;
-            if (this.openedScene) this.closeScene();
-            this.openedScene = scene;
-            this.sceneStore.set(scene);
-        }
-
-        closeScene(): void {
-            this.openedScene = undefined;
-            this.sceneStore.set(undefined);
-        }
-    }
-
-    interface EditorLayout extends motion.IEditorLayout {
-        states: Record<string, TabState>;
-        layout: PaneLayout;
-    }
-
-    export class LayoutManagerImpl implements motion.IEditorLayoutManager {
-        readonly currentStore: Writable<EditorLayout> = writable();
-        readonly allLayoutsStore: Writable<motion.EditorLayoutEntry[]> = writable([]);
-
-        constructor(
-            private _current: EditorLayout,
-            public readonly allLayouts: motion.EditorLayoutEntry[]
-        ) {
-            this.currentStore.set(_current);
-            this.allLayoutsStore.set(allLayouts);
-        }
-
-        get current() { return this._current; }
-        set current(layout: motion.IEditorLayout) {
-            this._current = layout as EditorLayout;
-            this.currentStore.set(layout as EditorLayout);
-        }
-
-        add(name: string, layout: motion.IEditorLayout): motion.EditorLayoutEntry {
-            const entry: motion.EditorLayoutEntry = { name, layout: structuredClone(layout) };
-            this.allLayouts.push(entry);
-            this.allLayoutsStore.set(this.allLayouts);
-            return entry;
-        }
-
-        remove(entry: motion.EditorLayoutEntry): void {
-            const idx = this.allLayouts.indexOf(entry);
-            if (idx == -1) return;
-            this.allLayouts.splice(idx, 1);
-            this.allLayoutsStore.set(this.allLayouts);
-        }
-    }
-</script>
-
 <script lang="ts">
-    import * as motion from "@nahara/motion";
     import MediaBar from "./ui/bar/MediaBar.svelte";
     import TopBar from "./ui/bar/TopBar.svelte";
     import MenuHost from "./ui/menu/MenuHost.svelte";
     import OutlinerPane from "./ui/outliner/OutlinerPane.svelte";
-    import PaneHost, { SplitDirection, type PaneLayout, type TabState } from "./ui/pane/PaneHost.svelte";
+    import PaneHost, { SplitDirection } from "./ui/pane/PaneHost.svelte";
     import PropertiesPane from "./ui/properties/PropertiesPane.svelte";
     import TimelinePane from "./ui/timeline/TimelinePane.svelte";
     import ViewportPane from "./ui/viewport/ViewportPane.svelte";
-    import PopupHost, { openPopupAt } from "./ui/popup/PopupHost.svelte";
+    import PopupHost from "./ui/popup/PopupHost.svelte";
     import AnimationGraphPane from "./ui/graph/AnimationGraphPane.svelte";
     import EmptyPane from "./ui/pane/EmptyPane.svelte";
-    import { writable, type Readable, type Writable } from "svelte/store";
     import ProjectPane from "./ui/project/ProjectPane.svelte";
+    import { EditorImpl, LayoutManagerImpl } from "./App";
 
     let layoutManager = new LayoutManagerImpl({
         layout: {
diff --git a/nahara-motion-ui/src/App.ts b/nahara-motion-ui/src/App.ts
new file mode 100644
index 0000000..e548884
--- /dev/null
+++ b/nahara-motion-ui/src/App.ts
@@ -0,0 +1,189 @@
+import * as motion from "@nahara/motion";
+import { writable, type Writable } from "svelte/store";
+import type { PaneLayout, TabState } from "./ui/pane/PaneHost.svelte";
+
+export class EditorImpl implements motion.IEditor {
+    openedProject?: motion.IProject | undefined;
+    openedScene?: motion.IScene | undefined;
+
+    readonly projectStore: Writable<motion.IProject | undefined> = writable();
+    readonly sceneStore: Writable<motion.IScene | undefined> = writable();
+
+    constructor(
+        public readonly layout: LayoutManagerImpl
+    ) {}
+    selections = new SelectionsManagerImpl();
+    playback = new PlaybackManagerImpl();
+
+    openProject(project: motion.IProject): void {
+        if (project == this.openedProject) return;
+        if (this.openedProject) this.closeProject();
+        this.openedProject = project;
+        this.projectStore.set(project);
+    }
+
+    closeProject(): void {
+        if (this.openedScene) this.closeScene();
+        this.openedProject = undefined;
+        this.projectStore.set(undefined);
+    }
+
+    openScene(scene: motion.IScene): void {
+        if (scene == this.openedScene) return;
+        if (this.openedScene) this.closeScene();
+        this.openedScene = scene;
+        this.sceneStore.set(scene);
+    }
+
+    closeScene(): void {
+        this.selections.clear();
+        this.playback.changeState("paused");
+        this.playback.seekTo(0);
+        this.openedScene = undefined;
+        this.sceneStore.set(undefined);
+    }
+}
+
+interface EditorLayout extends motion.IEditorLayout {
+    states: Record<string, TabState>;
+    layout: PaneLayout;
+}
+
+export class LayoutManagerImpl implements motion.IEditorLayoutManager {
+    readonly currentStore: Writable<EditorLayout> = writable();
+    readonly allLayoutsStore: Writable<motion.EditorLayoutEntry[]> = writable([]);
+
+    constructor(
+        private _current: EditorLayout,
+        public readonly allLayouts: motion.EditorLayoutEntry[]
+    ) {
+        this.currentStore.set(_current);
+        this.allLayoutsStore.set(allLayouts);
+    }
+
+    get current() { return this._current; }
+    set current(layout: motion.IEditorLayout) {
+        this._current = layout as EditorLayout;
+        this.currentStore.set(layout as EditorLayout);
+    }
+
+    add(name: string, layout: motion.IEditorLayout): motion.EditorLayoutEntry {
+        const entry: motion.EditorLayoutEntry = { name, layout: structuredClone(layout) };
+        this.allLayouts.push(entry);
+        this.allLayoutsStore.set(this.allLayouts);
+        return entry;
+    }
+
+    remove(entry: motion.EditorLayoutEntry): void {
+        const idx = this.allLayouts.indexOf(entry);
+        if (idx == -1) return;
+        this.allLayouts.splice(idx, 1);
+        this.allLayoutsStore.set(this.allLayouts);
+    }
+}
+
+export class SelectionsManagerImpl implements motion.ISelectionsManager {
+    readonly objects = new ObjectSelectionImpl<motion.SceneObjectInfo>();
+    readonly keyframes = new ObjectSelectionImpl<motion.Keyframe<any>>();
+    readonly timeline = new TimelineSelectionImpl();
+
+    clear() {
+        this.objects.clear();
+        this.keyframes.clear();
+        this.timeline.select(0, 0);
+    }
+}
+
+export class ObjectSelectionImpl<T> implements motion.IObjectSelection<T> {
+    multiple: T[] = [];
+    primary?: T | undefined = undefined;
+
+    readonly selectionStore: Writable<ObjectSelectionImpl<T>> = writable();
+    readonly multipleStore: Writable<T[]> = writable();
+    readonly primaryStore: Writable<T | undefined> = writable();
+
+    constructor() {
+        this.selectionStore.set(this);
+        this.multipleStore.set(this.multiple);
+        this.primaryStore.set(this.primary);
+    }
+
+    addToSelection(target: T): void {
+        if (!this.multiple.includes(target)) this.multiple.push(target);
+        this.primary = target;
+        this.sendUpdate();
+    }
+
+    removeFromSelection(target: T): void {
+        const idx = this.multiple.indexOf(target);
+        if (idx != -1) this.multiple.splice(idx, 1);
+        if (this.primary == target) this.primary = this.multiple.length > 0
+            ? this.multiple[this.multiple.length - 1]
+            : undefined;
+        this.sendUpdate();
+    }
+
+    clear(): void {
+        this.multiple = [];
+        this.primary = undefined;
+        this.sendUpdate();
+    }
+
+    sendUpdate() {
+        this.multipleStore.set(this.multiple);
+        this.primaryStore.set(this.primary);
+        this.selectionStore.update(a => a);
+    }
+}
+
+export class TimelineSelectionImpl implements motion.ITimelineSelection {
+    startTime: number = 0;
+    endTime: number = 0;
+
+    readonly startTimeStore: Writable<number> = writable(0);
+    readonly endTimeStore: Writable<number> = writable(0);
+
+    select(from: number, to: number): void {
+        this.startTime = from; this.startTimeStore.set(from);
+        this.endTime = to; this.endTimeStore.set(to);
+    }
+}
+
+export class PlaybackManagerImpl implements motion.IPlaybackManager {
+    currentTime: number = 0;
+    deltaTime: number = 0;
+    state: motion.PlaybackState = "paused";
+    rate: number = 1;
+    fps: motion.PlaybackFPS = "vsync";
+
+    readonly currentTimeStore: Writable<number> = writable(0);
+    readonly stateStore: Writable<motion.PlaybackState> = writable("paused");
+
+    seekTo(time: number): void {
+        this.currentTime = time;
+        this.currentTimeStore.set(time);
+    }
+
+    changeState(state: motion.PlaybackState): void {
+        if (this.state == state) return;
+
+        if (state != "paused" && this.state == "paused") {
+            const self = this;
+            let lastTimestamp = -1;
+
+            function renderLoop(timestamp: number) {
+                let deltaTime = lastTimestamp == -1 ? 0 : (timestamp - lastTimestamp);
+                deltaTime *= self.state == "playing-backward" ? -self.rate : self.rate;
+                self.deltaTime = deltaTime;
+                self.seekTo(self.currentTime + deltaTime * self.rate); // TODO Match fps here
+                lastTimestamp = timestamp;
+                if (self.state != "paused") window.requestAnimationFrame(renderLoop);
+            }
+
+            window.requestAnimationFrame(renderLoop);
+        }
+
+        this.state = state;
+        this.stateStore.set(state);
+    }
+}
\ No newline at end of file
diff --git a/nahara-motion-ui/src/appglobal.ts b/nahara-motion-ui/src/appglobal.ts
index 0a5f7ec..f193cba 100644
--- a/nahara-motion-ui/src/appglobal.ts
+++ b/nahara-motion-ui/src/appglobal.ts
@@ -1,5 +1,4 @@
 import * as motion from "@nahara/motion";
-import { writable } from "svelte/store";
 import type { DropdownEntry, TreeDropdownEntry } from "./ui/menu/FancyMenu";
 
 export interface ObjectsSelection {
@@ -29,85 +28,6 @@ export namespace app {
     let logger = new motion.utils.Logger("app");
     logger.info("Initializing Nahara's Motion UI...");
 
-    let currentSelection: ObjectsSelection | undefined = undefined;
-    let currentSeekhead: Seekhead = {
-        position: 0
-    };
-    let playbackState: "forward" | "backward" | "paused" = "paused";
-
-    // Component stores
-    export const currentSelectionStore = writable<ObjectsSelection | undefined>();
-    export const currentSeekheadStore = writable(currentSeekhead);
-    export const playbackStateStore = writable<"forward" | "backward" | "paused">(playbackState);
-
-    export function getCurrentSelection() { return currentSelection; }
-    export function deselectAll() {
-        currentSelection = undefined;
-        currentSelectionStore.set(undefined);
-    }
-    export function selectSingle(object: motion.SceneObjectInfo) {
-        currentSelection = { primary: object, multiple: [object] };
-        currentSelectionStore.set(currentSelection);
-    }
-    export function selectMulti(object: motion.SceneObjectInfo, allowDeselecting = true) {
-        if (!currentSelection) {
-            selectSingle(object);
-            return;
-        }
-
-        if (currentSelection.multiple.includes(object)) {
-            if (!allowDeselecting) {
-                currentSelection.primary = object;
-                currentSelectionStore.set(currentSelection);
-                return;
-            }
-
-            const idx = currentSelection.multiple.indexOf(object);
-            const [deselected] = currentSelection.multiple.splice(idx, 1);
-            if (deselected == currentSelection.primary) currentSelection.primary = currentSelection.multiple[idx];
-
-            if (!currentSelection.primary) {
-                if (currentSelection.multiple.length == 0) {
-                    deselectAll();
-                    return;
-                }
-
-                currentSelection.primary = currentSelection.multiple[0];
-            }
-
-            currentSelectionStore.set(currentSelection);
-            return;
-        }
-
-        currentSelection.multiple.push(object);
-        currentSelection.primary = object;
-        currentSelectionStore.set(currentSelection);
-    }
-
-    export function getSeekhead() { return structuredClone(currentSeekhead); }
-    export function updateSeekhead(seekhead: Seekhead) {
-        currentSeekhead = seekhead;
-        currentSeekheadStore.set(seekhead);
-    }
-    export function getPlaybackState() { return playbackState; }
-    export function setPlaybackState(state: typeof playbackState) {
-        playbackState = state;
-        playbackStateStore.set(state);
-
-        if (state != "paused") {
-            let prevTimestamp = -1;
-
-            function renderCallback(timestamp: number) {
-                const delta = timestamp - prevTimestamp;
-                if (prevTimestamp != -1) updateSeekhead({ position: currentSeekhead.position + delta });
-                if (playbackState != "paused") requestAnimationFrame(renderCallback);
-                prevTimestamp = timestamp;
-            }
-
-            requestAnimationFrame(renderCallback);
-        }
-    }
-
     /**
      * Create menu entries for adding object
      */
diff --git a/nahara-motion-ui/src/ui/bar/MediaBar.svelte b/nahara-motion-ui/src/ui/bar/MediaBar.svelte
index 81755ad..0ed6d28 100644
--- a/nahara-motion-ui/src/ui/bar/MediaBar.svelte
+++ b/nahara-motion-ui/src/ui/bar/MediaBar.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import type { IObjectContainer, ISceneContainerObject } from "@nahara/motion";
-    import { app } from "../../appglobal";
+    import type { IObjectContainer, ISceneContainerObject, PlaybackState } from "@nahara/motion";
     import { snapping } from "../../snapping";
     import Button from "../input/Button.svelte";
     import Dropdown from "../input/Dropdown.svelte";
@@ -8,13 +7,13 @@
     import { getSnappingModeType } from "../popup/SnappingPopup";
     import SnappingPopup from "../popup/SnappingPopup.svelte";
     import TimeDisplay from "./TimeDisplay.svelte";
-    import type { EditorImpl } from "../../App.svelte";
+    import type { EditorImpl } from "../../App";
 
     export let editor: EditorImpl;
     const timelineSnapping = snapping.timelineStore;
-    const seekhead = app.currentSeekheadStore;
+    const seekhead = editor.playback.currentTimeStore;
+    const playbackState = editor.playback.stateStore;
     const scene = editor.sceneStore;
-    const playbackState = app.playbackStateStore;
 
     let quickSeekMs: number;
     let displayQuickSeekValue: string;
@@ -28,12 +27,14 @@
         displayQuickSeekValue = `${Math.round(quickSeekMs / 10) / 100}s`;
     }
 
-    function playbackToggle(type: ReturnType<typeof app.getPlaybackState>) {
-        app.setPlaybackState(app.getPlaybackState() != type ? type : "paused");
+    function playbackToggle(type: PlaybackState) {
+        // app.setPlaybackState(app.getPlaybackState() != type ? type : "paused");
+        editor.playback.changeState(editor.playback.state != type ? type : "paused");
     }
 
     function seekBy(amount: number) {
-        app.updateSeekhead({ ...$seekhead, position: Math.max($seekhead.position + amount, 0) });
+        // app.updateSeekhead({ ...$seekhead, position: Math.max($seekhead.position + amount, 0) });
+        editor.playback.seekTo($seekhead + amount);
     }
 
     function seekToEnd() {
@@ -49,7 +50,8 @@
             }
 
             findMaxEndTime($scene);
-            app.updateSeekhead({ ...$seekhead, position: maxEndTime });
+            // app.updateSeekhead({ ...$seekhead, position: maxEndTime });
+            editor.playback.seekTo(maxEndTime);
         }
     }
 </script>
@@ -62,14 +64,14 @@
         />
     </div>
     <div class="middle">
-        <Button label="Start <-" keys={["Home"]} on:click={() => app.updateSeekhead({ ...$seekhead, position: 0 })} />
+        <Button label="Start <-" keys={["Home"]} on:click={() => editor.playback.seekTo(0)} />
         <Button label="{displayQuickSeekValue} <-" keys={["<-"]} on:click={() => seekBy(-quickSeekMs)} />
-        <Button label={$playbackState == "paused" ? "Play" : "Pause"} keys={["Space"]} on:click={() => playbackToggle("forward")} />
+        <Button label={$playbackState == "paused" ? "Play" : "Pause"} keys={["Space"]} on:click={() => playbackToggle("playing-normal")} />
         <Button label="-> {displayQuickSeekValue}" keys={["->"]} on:click={() => seekBy(quickSeekMs)} />
         <Button label="-> End" keys={["End"]} on:click={seekToEnd} />
     </div>
     <div class="right">
-        <TimeDisplay time={$seekhead.position} />
+        <TimeDisplay time={$seekhead} />
     </div>
 </div>
 
diff --git a/nahara-motion-ui/src/ui/bar/TopBar.svelte b/nahara-motion-ui/src/ui/bar/TopBar.svelte
index 2202fb6..97e367d 100644
--- a/nahara-motion-ui/src/ui/bar/TopBar.svelte
+++ b/nahara-motion-ui/src/ui/bar/TopBar.svelte
@@ -3,7 +3,7 @@
     import { openMenuAt } from "../menu/MenuHost.svelte";
     import { openPopupAt } from "../popup/PopupHost.svelte";
     import RenderPane from "../render/RenderPane.svelte";
-    import type { EditorImpl } from "../../App.svelte";
+    import type { EditorImpl } from "../../App";
     import type { DropdownEntry } from "../menu/FancyMenu";
 
     export let editor: EditorImpl;
diff --git a/nahara-motion-ui/src/ui/graph/AnimationGraphPane.svelte b/nahara-motion-ui/src/ui/graph/AnimationGraphPane.svelte
index 43248d7..37c4087 100644
--- a/nahara-motion-ui/src/ui/graph/AnimationGraphPane.svelte
+++ b/nahara-motion-ui/src/ui/graph/AnimationGraphPane.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import { app } from "../../appglobal";
     import { AnimatableObjectProperty, type Easing } from "@nahara/motion";
     import { graph } from "./graph";
     import { snapping } from "../../snapping";
     import type { DropdownEntry } from "../menu/FancyMenu";
     import { openMenuAt } from "../menu/MenuHost.svelte";
     import { clipboard } from "../../clipboard";
-    import type { EditorImpl } from "../../App.svelte";
+    import type { EditorImpl } from "../../App";
 
     export let state: any;
     export let editor: EditorImpl;
@@ -18,14 +17,14 @@
     let horizontalScroll = 0;
 
     const currentScene = editor.sceneStore;
-    const currentSelection = app.currentSelectionStore;
-    const seekhead = app.currentSeekheadStore;
+    const currentSelection = editor.selections.objects.selectionStore;
+    const seekhead = editor.playback.currentTimeStore;
 
     let canvas: HTMLCanvasElement;
     let properties: AnimatableObjectProperty<any>[] = [];
     let selectedProperty: AnimatableObjectProperty<any> | undefined = undefined;
     $: {
-        properties = $currentSelection?.primary.object.properties.filter(v => v instanceof AnimatableObjectProperty) ?? [];
+        properties = $currentSelection.primary?.object.properties.filter(v => v instanceof AnimatableObjectProperty) ?? [];
         if (selectedProperty && !properties.includes(selectedProperty)) selectedProperty = undefined;
         if (!selectedProperty) selectedProperty = properties[0];
     }
@@ -65,7 +64,7 @@
 
         ctx.lineWidth = 2;
         ctx.strokeStyle = "#ff5f5f";
-        const seekX = ($seekhead.position - horizontalScroll) * horizontalZoom / 1000;
+        const seekX = ($seekhead - horizontalScroll) * horizontalZoom / 1000;
         ctx.beginPath();
         ctx.moveTo(seekX, 0);
         ctx.lineTo(seekX, canvas.offsetHeight);
@@ -108,13 +107,13 @@
         draggingSeekhead = true;
         eventEx = e.clientX;
         eventEy = e.clientY;
-        initialSeekPosition = $seekhead.position;
+        initialSeekPosition = $seekhead;
     }
 
     function handleSeekheadMouseMove(e: MouseEvent) {
         if (!draggingSeekhead) return;
         const time = Math.max(initialSeekPosition + (e.clientX - eventEx) * 1000 / horizontalZoom, 0);
-        app.updateSeekhead({ ...$seekhead, position: snapping.snapTimeline(time) });
+        editor.playback.seekTo(snapping.snapTimeline(time));
     }
 
     function handleSeekheadMouseUp(e: MouseEvent) {
@@ -181,7 +180,7 @@
             menu.push({
                 type: "simple",
                 name: "Seek to this",
-                click: () => app.updateSeekhead({ ...$seekhead, position: contextMenuData.keyframe!.time })
+                click: () => editor.playback.seekTo(contextMenuData.keyframe!.time)
             }, {
                 type: "simple",
                 name: "Delete keyframe",
@@ -197,8 +196,8 @@
                 type: "simple",
                 name: "New keyframe at seekhead",
                 click() {
-                    const val = contextMenuData.property!.get($seekhead.position);
-                    contextMenuData.property!.set($seekhead.position, val);
+                    const val = contextMenuData.property!.get($seekhead);
+                    contextMenuData.property!.set($seekhead, val);
                     currentScene.update(a => a);
                 },
             }, {
@@ -244,7 +243,7 @@
             <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div
                 class="seekhead"
-                style:left="{($seekhead.position - horizontalScroll) * horizontalZoom / 1000}px"
+                style:left="{($seekhead - horizontalScroll) * horizontalZoom / 1000}px"
                 on:mousedown={handleSeekheadMouseDown}
                 ></div>
             </div>
diff --git a/nahara-motion-ui/src/ui/outliner/Outliner.svelte b/nahara-motion-ui/src/ui/outliner/Outliner.svelte
index 96e8696..b4f59ac 100644
--- a/nahara-motion-ui/src/ui/outliner/Outliner.svelte
+++ b/nahara-motion-ui/src/ui/outliner/Outliner.svelte
@@ -2,9 +2,10 @@
     import type { ISceneContainerObject, SceneObjectInfo } from "@nahara/motion";
     import { createEventDispatcher } from "svelte";
     import type { ObjectsSelection } from "../../appglobal";
+    import type { ObjectSelectionImpl } from "../../App";
 
     export let object: SceneObjectInfo;
-    export let selection: ObjectsSelection | undefined;
+    export let selection: ObjectSelectionImpl<SceneObjectInfo>;
     let container: ISceneContainerObject | undefined;
     let selected: boolean;
     let primarySelected: boolean;
diff --git a/nahara-motion-ui/src/ui/outliner/OutlinerPane.svelte b/nahara-motion-ui/src/ui/outliner/OutlinerPane.svelte
index 3d88747..5d3aa5e 100644
--- a/nahara-motion-ui/src/ui/outliner/OutlinerPane.svelte
+++ b/nahara-motion-ui/src/ui/outliner/OutlinerPane.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-    import { app } from "../../appglobal";
     import Button from "../input/Button.svelte";
     import MenuHost, { openMenuAt } from "../menu/MenuHost.svelte";
     import * as motion from "@nahara/motion";
     import Outliner from "./Outliner.svelte";
-    import type { EditorImpl } from "../../App.svelte";
+    import type { EditorImpl } from "../../App";
+    import { app } from "../../appglobal";
 
     export let state: any;
     export let editor: EditorImpl;
     const currentScene = editor.sceneStore;
-    const selection = app.currentSelectionStore;
+    const selection = editor.selections.objects.selectionStore;
 
     function findContainer(object?: motion.SceneObjectInfo): motion.IObjectContainer {
         if (!object) return $currentScene!;
@@ -81,7 +81,8 @@
             const obj = motion.objects.createNew(type, 0, 1000);
             findContainer($selection?.primary).add(obj);
             currentScene.update(a => a);
-            app.selectSingle(obj);
+            $selection.clear();
+            $selection.addToSelection(obj);
         }));
     }
 
@@ -89,15 +90,14 @@
         if (!$selection || !$currentScene) return;
         removeEntirelyFromContainer($selection.multiple, $currentScene);
         currentScene.update(a => a);
-        app.deselectAll();
+        $selection.clear();
     }
 
     function handleSelect(e: CustomEvent, selectStart: boolean) {
         const object: motion.SceneObjectInfo = e.detail.object;
         const multiselect: boolean = e.detail.multiselect || (selectStart && $selection?.multiple.includes(object));
-
-        if (multiselect) app.selectMulti(object, false);
-        else app.selectSingle(object);
+        if (!multiselect) $selection.clear();
+        if (object) $selection.addToSelection(object);
     }
 
     let draggingOulinerHandle = false;
@@ -114,13 +114,13 @@
         const toContainer = findParentOf(target) ?? $currentScene;
         const objects = [...$selection.multiple].filter(o => !isRecursive(o, toContainer) && o != target);
         removeEntirelyFromContainer(objects, $currentScene);
-        app.deselectAll();
+        $selection.clear();
         const insertIdx = toContainer.indexOf(target);
         if (insertIdx == -1) return; // ???
 
         for (const obj of objects) {
             toContainer.add(insertIdx + 1, obj);
-            app.selectMulti(obj);
+            $selection.addToSelection(obj);
         }
 
         currentScene.update(a => a);
@@ -136,11 +136,11 @@
         if (!$selection || !$currentScene) return;
         const objects = [...$selection.multiple].filter(o => !isRecursive(o, container));
         removeEntirelyFromContainer(objects, $currentScene);    
-        app.deselectAll();
+        $selection.clear();
 
         for (const obj of objects) {
             container.add(0, obj);
-            app.selectMulti(obj);
+            $selection.addToSelection(obj);
         }
 
         currentScene.update(a => a);
@@ -153,11 +153,11 @@
         if (!$selection || !$currentScene) return;
         const objects = [...$selection.multiple];
         removeEntirelyFromContainer(objects, $currentScene);
-        app.deselectAll();
+        $selection.clear();
 
         for (const obj of objects) {
             $currentScene.add(0, obj);
-            app.selectMulti(obj);
+            $selection.addToSelection(obj);
         }
 
         currentScene.update(a => a);
@@ -186,7 +186,7 @@
         <Button label="Delete" keys={["Del"]} disabled={!$selection} on:click={handleDeleteButton} />
     </div>
     <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div class="objects" on:mouseup|self={() => { if (!draggingOulinerHandle) app.deselectAll(); }}>
+    <div class="objects" on:mouseup|self={() => { if (!draggingOulinerHandle) $selection.clear(); }}>
         {#each [...$currentScene].reverse() as object}
             <Outliner
                 {object}
diff --git a/nahara-motion-ui/src/ui/project/ProjectPane.svelte b/nahara-motion-ui/src/ui/project/ProjectPane.svelte
index 973971e..363d608 100644
--- a/nahara-motion-ui/src/ui/project/ProjectPane.svelte
+++ b/nahara-motion-ui/src/ui/project/ProjectPane.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { SceneMetadata } from "@nahara/motion";
-    import type { EditorImpl } from "../../App.svelte";
+    import type { EditorImpl } from "../../App";
     import Button from "../input/Button.svelte";
     import { openPopupAt } from "../popup/PopupHost.svelte";
     import SceneCreatePopup from "./SceneCreatePopup.svelte";
diff --git a/nahara-motion-ui/src/ui/project/SceneCreatePopup.svelte b/nahara-motion-ui/src/ui/project/SceneCreatePopup.svelte
index 2654d58..4092f8f 100644
--- a/nahara-motion-ui/src/ui/project/SceneCreatePopup.svelte
+++ b/nahara-motion-ui/src/ui/project/SceneCreatePopup.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { IProject, Vec2 } from "@nahara/motion";
-    import type { EditorImpl } from "../../App.svelte";
+    import type { EditorImpl } from "../../App";
     import Property from "../properties/Property.svelte";
     import Button from "../input/Button.svelte";
     import { closePopup } from "../popup/PopupHost.svelte";
diff --git a/nahara-motion-ui/src/ui/properties/PropertiesPane.svelte b/nahara-motion-ui/src/ui/properties/PropertiesPane.svelte
index f145d5d..814564a 100644
--- a/nahara-motion-ui/src/ui/properties/PropertiesPane.svelte
+++ b/nahara-motion-ui/src/ui/properties/PropertiesPane.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
     import * as motion from "@nahara/motion";
-    import { app } from "../../appglobal";
     import Property from "./Property.svelte";
     import Dropdown from "../input/Dropdown.svelte";
     import { openMenuAt } from "../menu/MenuHost.svelte";
-    import type { EditorImpl } from "../../App.svelte";
+    import type { EditorImpl } from "../../App";
 
     export let state: any;
     export let editor: EditorImpl;
     const currentScene = editor.sceneStore;
-    const currentSelection = app.currentSelectionStore;
-    const seekhead = app.currentSeekheadStore;
+    const currentSelection = editor.selections.objects.selectionStore;
+    const seekhead = editor.playback.currentTimeStore;
     let primarySelection: motion.SceneObjectInfo | undefined;
     let properties: motion.IObjectProperty<any>[];
 
@@ -23,9 +22,9 @@
     function cast<T>(input: T | undefined): T { return input as T; }
 
     function handleKeyframeButton(prop: motion.IAnimatable<any>) {
-        const now = prop.getKeyframe($seekhead.position);
+        const now = prop.getKeyframe($seekhead);
         if (now) prop.delete(now);
-        else prop.set($seekhead.position, prop.get($seekhead.position));
+        else prop.set($seekhead, prop.get($seekhead));
         currentScene.update(a => a);
     }
 </script>
@@ -56,10 +55,10 @@
             {#if property instanceof motion.AnimatableObjectProperty}
                 <Property
                     name={property.translationKey}
-                    value={property.get($seekhead.position)}
+                    value={property.get($seekhead)}
                     animatable
-                    animating={!!property.animatable.getKeyframe($seekhead.position)}
-                    on:update={e => { cast(property).set($seekhead.position, e.detail); currentScene.update(a => a); }}
+                    animating={!!property.animatable.getKeyframe($seekhead)}
+                    on:update={e => { cast(property).set($seekhead, e.detail); currentScene.update(a => a); }}
                     on:keyframebutton={() => handleKeyframeButton(property.animatable)}
                 />
             {:else if property instanceof motion.EnumObjectProperty}
@@ -70,7 +69,7 @@
                             type: "simple",
                             name: property.valueTranslator(v),
                             click: () => {
-                                property.set($seekhead.position, v);
+                                property.set($seekhead, v);
                                 currentScene.update(a => a);
                             }
                         })))
@@ -79,8 +78,8 @@
             {:else}
                 <Property
                     name={property.translationKey}
-                    value={property.get($seekhead.position)}
-                    on:update={e => { cast(property).set($seekhead.position, e.detail); currentScene.update(a => a); }}
+                    value={property.get($seekhead)}
+                    on:update={e => { cast(property).set($seekhead, e.detail); currentScene.update(a => a); }}
                 />
             {/if}
         {/each}
diff --git a/nahara-motion-ui/src/ui/render/RenderPane.svelte b/nahara-motion-ui/src/ui/render/RenderPane.svelte
index 65614c3..36197cb 100644
--- a/nahara-motion-ui/src/ui/render/RenderPane.svelte
+++ b/nahara-motion-ui/src/ui/render/RenderPane.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { concat, EncoderPipeline, MuxerPipeline, SceneRenderPipeline, type IPipeline } from "@nahara/motion-video";
-    import { app } from "../../appglobal";
     import Button from "../input/Button.svelte";
     import Dropdown from "../input/Dropdown.svelte";
     import { openMenuAt } from "../menu/MenuHost.svelte";
diff --git a/nahara-motion-ui/src/ui/timeline/TimelinePane.svelte b/nahara-motion-ui/src/ui/timeline/TimelinePane.svelte
index 0ee6a77..fab4693 100644
--- a/nahara-motion-ui/src/ui/timeline/TimelinePane.svelte
+++ b/nahara-motion-ui/src/ui/timeline/TimelinePane.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
     import { createEventDispatcher, onMount } from "svelte";
     import TimelineTrack from "./TimelineTrack.svelte";
-    import { app } from "../../appglobal";
     import { snapping } from "../../snapping";
     import Button from "../input/Button.svelte";
     import Dropdown from "../input/Dropdown.svelte";
     import { openPopupAt } from "../popup/PopupHost.svelte";
     import TimelineOptionsPopup from "./TimelineOptionsPopup.svelte";
-    import type { EditorImpl } from "../../App.svelte";
+    import type { EditorImpl } from "../../App";
+    import type { objects } from "@nahara/motion";
 
     interface TimelinePaneState {
         labelWidth?: number;
@@ -34,19 +34,19 @@
     }
 
     const currentScene = editor.sceneStore;
-    const currentSelection = app.currentSelectionStore;
-    const seekhead = app.currentSeekheadStore;
+    const currentSelection = editor.selections.objects.selectionStore;
+    const seekhead = editor.playback.currentTimeStore;
     const dispatcher = createEventDispatcher();
 
     $: {
         if (followSeekhead && seekbar) {
             const width = seekbar.getBoundingClientRect().width;
-            const headPosX = ($seekhead.position - scroll) * zoom / 1000;
+            const headPosX = ($seekhead - scroll) * zoom / 1000;
 
             if (headPosX > width * 3 / 4) {
-                scroll = $seekhead.position - (width * 3 / 4 * 1000 / zoom);
+                scroll = $seekhead - (width * 3 / 4 * 1000 / zoom);
             } else if (headPosX < 0) {
-                scroll = Math.max($seekhead.position, 0);
+                scroll = Math.max($seekhead, 0);
             }
         }
     }
@@ -60,13 +60,13 @@
     function handleSeekheadMouseDown(e: MouseEvent) {
         draggingSeekhead = true;
         mouseEx = e.clientX;
-        prevPosition = $seekhead.position;
+        prevPosition = $seekhead;
     }
 
     function handleSeekheadMouseMove(e: MouseEvent) {
         if (!draggingSeekhead) return;
         const nextPos = snapping.snapTimeline(Math.max(prevPosition + (e.clientX - mouseEx) * 1000 / zoom, 0));
-        app.updateSeekhead({ ...$seekhead, position: nextPos });
+        editor.playback.seekTo(nextPos);
     }
 
     function handleSeekheadMouseUp(e: MouseEvent) {
@@ -90,10 +90,10 @@
     }
 
     function handleSeekbarMouseDown(e: MouseEvent) {
-        app.updateSeekhead({ ...$seekhead, position: snapping.snapTimeline(scroll + e.offsetX * 1000 / zoom) });
+        editor.playback.seekTo(snapping.snapTimeline(scroll + e.offsetX * 1000 / zoom));
         draggingSeekhead = true;
         mouseEx = e.clientX;
-        prevPosition = $seekhead.position;
+        prevPosition = $seekhead;
     }
 
     function handleOptionsButtonClick(e: MouseEvent) {
@@ -131,7 +131,7 @@
                 class="seekhead"
                 role="button"
                 tabindex="0"
-                style:left="{($seekhead.position - scroll) * zoom / 1000}px"
+                style:left="{($seekhead - scroll) * zoom / 1000}px"
                 style:--tracks-height="{tracksContainerHeight}px"
                 on:mousedown={handleSeekheadMouseDown}
             ></div>
@@ -143,12 +143,12 @@
                 <TimelineTrack
                     {labelWidth} {zoom} {object} {scroll}
                     selectStateQuery={o =>
-                        o == $currentSelection?.primary ? "primary"
+                        o == $currentSelection.primary ? "primary"
                         : ($currentSelection?.multiple ?? []).includes(o) ? "secondary"
                         : "none"}
                     on:update={() => currentScene.update(a => a)}
-                    on:seekto={e => app.updateSeekhead({ ...$seekhead, position: e.detail })}
-                    on:select={e => app.selectSingle(e.detail)}
+                    on:seekto={e => editor.playback.seekTo(e.detail) }
+                    on:select={e => editor.selections.objects.addToSelection(e.detail)}
                 />
             {/each}
         {/if}
diff --git a/nahara-motion-ui/src/ui/viewport/ViewportPane.svelte b/nahara-motion-ui/src/ui/viewport/ViewportPane.svelte
index 9be51d7..446200c 100644
--- a/nahara-motion-ui/src/ui/viewport/ViewportPane.svelte
+++ b/nahara-motion-ui/src/ui/viewport/ViewportPane.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import { app } from "../../appglobal";
     import { objects, type IObjectContainer, type IScene, type ISceneContainerObject, type ISceneObjectWithPositionalData, type ISceneObjectWithViewportEditSupport, type SceneObjectInfo, type Vec2, type ViewportEditHandle } from "@nahara/motion";
     import { buildViewportSceneTree, type ViewportSceneTree } from "./sceneutils";
     import { openMenuAt } from "../menu/MenuHost.svelte";
     import type { DropdownEntry } from "../menu/FancyMenu";
     import { openPopupAt } from "../popup/PopupHost.svelte";
     import ColorPickerPopup from "../popup/ColorPickerPopup.svelte";
-    import type { EditorImpl } from "../../App.svelte";
+    import type { EditorImpl } from "../../App";
     import Welcome from "./Welcome.svelte";
+    import { app } from "../../appglobal";
 
     export let state: any;
     export let editor: EditorImpl;
@@ -21,8 +21,8 @@
 
     const currentProject = editor.projectStore;
     const currentScene = editor.sceneStore;
-    const currentSelection = app.currentSelectionStore;
-    const seekhead = app.currentSeekheadStore;
+    const currentSelection = editor.selections.objects.selectionStore;
+    const seekhead = editor.playback.currentTimeStore;
 
     let sceneTree: ViewportSceneTree | undefined = undefined;
     let lastTimestamp = 0;
@@ -70,7 +70,7 @@
             $currentScene?.renderFrame({
                 canvas: ctx,
                 containerSize: $currentScene.metadata.size,
-                time: $seekhead.position,
+                time: $seekhead,
                 timeDelta: 0
             });
 
@@ -98,7 +98,7 @@
             parentSize = size;
         }
 
-        const { clickableSize, parentToThis } = (object.object as ISceneObjectWithViewportEditSupport<any>).getViewportEditorInfo($seekhead.position, parentSize);
+        const { clickableSize, parentToThis } = (object.object as ISceneObjectWithViewportEditSupport<any>).getViewportEditorInfo($seekhead, parentSize);
         return {
             parentSize,
             parentMatrix,
@@ -117,7 +117,7 @@
         for (const object of scene) {
             if (!filter(object)) continue;
             if (!(object.object as ISceneObjectWithViewportEditSupport<any>).isViewportEditable) continue;
-            if ($seekhead.position < object.timeStart || $seekhead.position >= object.timeEnd) continue;
+            if ($seekhead < object.timeStart || $seekhead >= object.timeEnd) continue;
 
             const { matrix, size } = viewportSceneToObjectOf(object);
             const { x, y } = matrix.inverse().transformPoint({ x: sceneX, y: sceneY, z: 0, w: 1 });
@@ -135,7 +135,7 @@
     let adjustingObjectHandle: ViewportEditHandle | undefined = undefined;
 
     function renderSelectionBox(vpScale: number) {
-        if (!($currentSelection && $currentScene && sceneTree)) return;
+        if (!($currentSelection.primary && $currentScene && sceneTree)) return;
         let rendered: SceneObjectInfo[] = [];
 
         for (const selected of $currentSelection.multiple) {
@@ -148,7 +148,7 @@
                 data.renderBlueprint({
                     canvas: ctx,
                     containerSize: parentSize,
-                    time: $seekhead.position,
+                    time: $seekhead,
                     timeDelta: 0
                 }, selected.color, vpScale);
                 ctx.setTransform(parent);
@@ -159,7 +159,7 @@
 
         if (($currentSelection.primary.object as ISceneObjectWithViewportEditSupport<any>).isViewportEditable) {
             const data = $currentSelection.primary.object as ISceneObjectWithViewportEditSupport<any>;
-            const { clickableSize, handles } = data.getViewportEditorInfo($seekhead.position, $currentScene.metadata.size);
+            const { clickableSize, handles } = data.getViewportEditorInfo($seekhead, $currentScene.metadata.size);
 
             const parent = ctx.getTransform();
             const sceneToObject = viewportSceneToObjectOf($currentSelection.primary).matrix;
@@ -228,7 +228,7 @@
         if (!$currentScene || !sceneTree) return;
         const { sx, sy, vpScale } = mapMousePositionFromEvent(e, $currentScene);
 
-        if ($currentSelection) {
+        if ($currentSelection.primary) {
             if (($currentSelection.primary.object as ISceneObjectWithViewportEditSupport<any>).isViewportEditable) {
                 const primaryGeom = viewportSceneToObjectOf($currentSelection.primary);
                 const pointInObj = primaryGeom.matrix.inverse().transformPoint({ x: sx, y: sy });
@@ -240,8 +240,8 @@
                 if (!collided) {    
                     const objects = objectsUnderScenePos(sx, sy);
                     const toSelect = objects[objects.length - 1];
-                    if (toSelect) (e.shiftKey ? app.selectMulti : app.selectSingle)(toSelect);
-                    else if (!e.shiftKey) app.deselectAll();
+                    if (!e.shiftKey) $currentSelection.clear();
+                    if (toSelect) $currentSelection.addToSelection(toSelect);
                     clickingCanvas = false;
                     return;
                 }
@@ -253,7 +253,7 @@
                 adjustInitialSceneY = sy;
 
                 if (obj.viewportEditMouseDown) {
-                    const info = obj.getViewportEditorInfo($seekhead.position, $currentScene.metadata.size);
+                    const info = obj.getViewportEditorInfo($seekhead, $currentScene.metadata.size);
                     adjustingObjectMatrix = viewportSceneToObjectOf(adjustingObject).matrix;
                     const localObjectXY = adjustingObjectMatrix.inverse().transformPoint({ x: sx, y: sy, z: 0, w: 1 });
                     
@@ -272,7 +272,7 @@
                     }
 
                     adjustingObjectMouseData = obj.viewportEditMouseDown({
-                        time: $seekhead.position,
+                        time: $seekhead,
                         sceneX: sx,
                         sceneY: sy,
                         localObjectX: localObjectXY.x,
@@ -288,8 +288,8 @@
         } else {
             const objects = objectsUnderScenePos(sx, sy);
             const toSelect = objects[objects.length - 1];
-            if (toSelect) (e.shiftKey ? app.selectMulti : app.selectSingle)(toSelect);
-            else if (!e.shiftKey) app.deselectAll();
+            if (!e.shiftKey) $currentSelection.clear();
+            if (toSelect) $currentSelection.addToSelection(toSelect);
         }
     }
 
@@ -304,7 +304,7 @@
             if (adjustingObjectData.viewportEditMouseMove) {
                 const localObjectXY = adjustingObjectMatrix.inverse().transformPoint({ x: sx, y: sy, z: 0, w: 1 });
                 adjustingObjectData.viewportEditMouseMove({
-                    time: $seekhead.position,
+                    time: $seekhead,
                     sceneX: sx,
                     sceneY: sy,
                     localObjectX: localObjectXY.x,
@@ -329,7 +329,7 @@
             if (adjustingObjectData.viewportEditMouseUp) {
                 const localObjectXY = adjustingObjectMatrix.inverse().transformPoint({ x: sx, y: sy, z: 0, w: 1 });
                 adjustingObjectData.viewportEditMouseUp({
-                    time: $seekhead.position,
+                    time: $seekhead,
                     sceneX: sx,
                     sceneY: sy,
                     localObjectX: localObjectXY.x,
@@ -350,8 +350,8 @@
         if (!adjusted) {
             const objects = objectsUnderScenePos(sx, sy);
             const toSelect = objects[objects.length - 1];
-            if (toSelect) (e.shiftKey ? app.selectMulti : app.selectSingle)(toSelect);
-            else if (!e.shiftKey) app.deselectAll();
+            if (!e.shiftKey) $currentSelection.clear();
+            if (toSelect) $currentSelection.addToSelection(toSelect);
         }
     }
 
@@ -365,10 +365,10 @@
             root.push({
                 type: "tree",
                 name: "Add",
-                children: app.createAddObjectMenu(type => {
+                children: app.createAddObjectMenu(type => { // TODO switch to commands
                     if (!$currentScene) return;
-                    const obj = objects.createNew(type, $seekhead.position, $seekhead.position + 1000);
-                    const toContainer = $currentSelection &&
+                    const obj = objects.createNew(type, $seekhead, $seekhead + 1000);
+                    const toContainer = $currentSelection.primary &&
                         ($currentSelection.primary.object as ISceneContainerObject).isContainer
                         ? $currentSelection.primary.object as ISceneContainerObject
                         : $currentScene;
@@ -377,7 +377,7 @@
                     if (toContainer == $currentScene) {
                         posInContainer = { x: sx, y: sy };
                     } else {
-                        const { matrix } = viewportSceneToObjectOf($currentSelection!.primary);
+                        const { matrix } = viewportSceneToObjectOf($currentSelection.primary!);
                         posInContainer = matrix.inverse().transformPoint({ x: sx, y: sy, z: 0, w: 1 });
                     }
 
@@ -389,25 +389,29 @@
 
                     toContainer.add(obj);
                     currentScene.update(a => a);
-                    if (e.shiftKey || e.ctrlKey) app.selectMulti(obj, false);
-                    else app.selectSingle(obj);
+                    if (!(e.shiftKey || e.ctrlKey)) $currentSelection.clear();
+                    $currentSelection.addToSelection(obj);
                 })
             });
 
-            if ($currentSelection) root.push({
-                type: "simple",
-                name: "Change label color",
-                click() {
-                    const target = $currentSelection.primary;
-                    openPopupAt(e.clientX, e.clientY, "Label color", ColorPickerPopup, {
-                        initial: target.color,
-                        callback(c: string) {
-                            target.color = c;
-                            currentScene.update(a => a);
-                        }
-                    });
-                },
-            }, {
+            if ($currentSelection.primary) {
+                const target = $currentSelection.primary;
+
+                root.push({
+                    type: "simple",
+                    name: "Change label color",
+                    click() {
+                        openPopupAt(e.clientX, e.clientY, "Label color", ColorPickerPopup, {
+                            initial: target.color,
+                            callback(c: string) {
+                                target.color = c;
+                                currentScene.update(a => a);
+                            }
+                        });
+                    },
+                });
+            }
+            if ($currentSelection.multiple.length > 0) root.push({
                 type: "simple",
                 name: "Delete selection",
                 click() {
@@ -424,7 +428,7 @@
                     }
 
                     removeEntirelyFromContainer($currentSelection.multiple, $currentScene);
-                    app.deselectAll();
+                    $currentSelection.clear();
                     currentScene.update(a => a);
                 },
             });
diff --git a/nahara-motion-ui/src/ui/viewport/Welcome.svelte b/nahara-motion-ui/src/ui/viewport/Welcome.svelte
index c96920d..0a9e6d3 100644
--- a/nahara-motion-ui/src/ui/viewport/Welcome.svelte
+++ b/nahara-motion-ui/src/ui/viewport/Welcome.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { SimpleProject } from "@nahara/motion";
-    import type { EditorImpl } from "../../App.svelte";
+    import type { EditorImpl } from "../../App";
 
     export let editor: EditorImpl;
 
diff --git a/nahara-motion/src/addon/registries.ts b/nahara-motion/src/addon/registries.ts
index 412a243..237e8b0 100644
--- a/nahara-motion/src/addon/registries.ts
+++ b/nahara-motion/src/addon/registries.ts
@@ -1,10 +1,13 @@
+import { ICommand } from "../editor/command.js";
 import { ISceneObjectType } from "../scene/object.js";
 import { IRegistry, Registry } from "./registry.js";
 
 export namespace registries {
+    export const Commands: IRegistry<ICommand<any>> = new Registry("commands");
     export const Objects: IRegistry<ISceneObjectType> = new Registry("objects");
 
     export const AllRegistries: ArrayLike<IRegistry<any>> & Iterable<IRegistry<any>> = [
-        Objects
+        Commands,
+        Objects,
     ];
 }
\ No newline at end of file
diff --git a/nahara-motion/src/editor/command.ts b/nahara-motion/src/editor/command.ts
new file mode 100644
index 0000000..3648731
--- /dev/null
+++ b/nahara-motion/src/editor/command.ts
@@ -0,0 +1,63 @@
+import { ISceneObjectType } from "../scene/object.js";
+import { IScene } from "../scene/scene.js";
+import { IEditor } from "./editor.js";
+
+export interface ICommand<T = any> {
+    /**
+     * The command context that will only become available when that context is present. For example, to only activate
+     * the command if user is hovering in viewport and pressing the `Shift + A` keyboard shortcut, use
+     * `command.context.viewport`.
+     */
+    readonly context?: ICommandContextRef<T>;
+
+    /**
+     * A list of default keyboard shortcuts that can be used to activate the command.
+     */
+    readonly defaultKeyboardShortcuts?: IKeyChord[];
+
+    /**
+     * A list of child commands, which will be opened as menu at cursor position if activated using keyboard shortcut,
+     * or as submenu of parent command.
+     */
+    readonly children?: ICommand[];
+
+    /**
+     * Activate this command.
+     * @param editor The editor that activated this command.
+     * @param context The content of the current context. Each command can only handle a single context.
+     */
+    activate?(editor: IEditor, context: T): void;
+}
+
+export interface IKeyCombination {
+    readonly ctrl?: boolean;
+    readonly shift?: boolean;
+    readonly alt?: boolean;
+    readonly key: string;
+}
+
+/**
+ * A key chord, which is a sequence of key combinations to press in order in order to activate the command. For example,
+ * if the chord is `Ctrl + K, Ctrl + K`, user will have to hold `Ctrl` and press `K` twice to activate the command.
+ */
+export type IKeyChord = IKeyCombination[];
+
+export interface ICommandContext<T> {
+    readonly type: string;
+    getNow(editor: IEditor): T;
+}
+
+export type ICommandContextRef<T> = [ICommandContext<T> | undefined];
+
+export namespace command {
+    export namespace context {
+        export type viewport = {
+            readonly scene: IScene,
+            readonly sceneX: number,
+            readonly sceneY: number,
+            add(type: ISceneObjectType, sx: number, sy: number): void,
+        };
+
+        export const viewport: ICommandContextRef<viewport> = [undefined];
+    }
+}
\ No newline at end of file
diff --git a/nahara-motion/src/editor/editor.ts b/nahara-motion/src/editor/editor.ts
index 38b6bf8..6eef9cf 100644
--- a/nahara-motion/src/editor/editor.ts
+++ b/nahara-motion/src/editor/editor.ts
@@ -1,6 +1,8 @@
 import { IProject } from "../project/project.js";
 import { IScene } from "../scene/scene.js";
 import { IEditorLayoutManager } from "./layout.js";
+import { IPlaybackManager } from "./playback.js";
+import { ISelectionsManager } from "./selection.js";
 
 /**
  * Represent an instance of editor.
@@ -9,6 +11,8 @@ export interface IEditor {
     readonly layout: IEditorLayoutManager;
     readonly openedProject?: IProject;
     readonly openedScene?: IScene;
+    readonly selections: ISelectionsManager;
+    readonly playback: IPlaybackManager;
 
     openProject(project: IProject): void;
     closeProject(): void;
diff --git a/nahara-motion/src/editor/playback.ts b/nahara-motion/src/editor/playback.ts
new file mode 100644
index 0000000..bea14b8
--- /dev/null
+++ b/nahara-motion/src/editor/playback.ts
@@ -0,0 +1,37 @@
+export interface IPlaybackManager {
+    /**
+     * The current time of the main seekhead. The viewport will preview the scene with current time.
+     */
+    readonly currentTime: number;
+
+    /**
+     * The differences in time between previous frame and current frame. If the value is 0, the playback is paused. If
+     * the value is positive, the playback manager is playing the scene normally. If the value is negative, the playback
+     * manager is playing the scene backward.
+     */
+    readonly deltaTime: number;
+
+    /**
+     * The current playback state.
+     */
+    readonly state: PlaybackState;
+
+    /**
+     * The playback rate (also known as speed). The unit for this value is scene milliseconds per real world
+     * milliseconds. For example, if the `rate` is `2.0`, the playback manager will play the scene twice as fast as
+     * normal. Note that this have zero effect while rendering.
+     */
+    readonly rate: number;
+
+    /**
+     * The frame rate that this playback manager will play. If the value is `vsync`, the frame rate is bounds to the
+     * refresh rate of current monitor. The current monitor is determined by the browser.
+     */
+    readonly fps: PlaybackFPS;
+
+    seekTo(time: number): void;
+    changeState(state: PlaybackState): void;
+}
+
+export type PlaybackState = "paused" | "playing-normal" | "playing-backward";
+export type PlaybackFPS = number | "vsync";
\ No newline at end of file
diff --git a/nahara-motion/src/editor/selection.ts b/nahara-motion/src/editor/selection.ts
new file mode 100644
index 0000000..94fad17
--- /dev/null
+++ b/nahara-motion/src/editor/selection.ts
@@ -0,0 +1,31 @@
+import { Keyframe } from "../scene/animation.js";
+import { SceneObjectInfo } from "../scene/object.js";
+
+export interface IObjectSelection<T> {
+    readonly multiple: ArrayLike<T> | Iterable<T>;
+    readonly primary?: T;
+
+    addToSelection(target: T): void;
+    removeFromSelection(target: T): void;
+    clear(): void;
+}
+
+/**
+ * Represent a selection on timeline. This will be used for quickly adding new object with selected time range, or used
+ * as input for some commands.
+ *
+ * If both start time and end time are exactly the same, the selection will be a single point in timeline axis, which
+ * will be displayed as secondary seekbar instead of range.
+ */
+export interface ITimelineSelection {
+    readonly startTime: number;
+    readonly endTime: number;
+
+    select(from: number, to: number): void;
+}
+
+export interface ISelectionsManager {
+    readonly objects: IObjectSelection<SceneObjectInfo>;
+    readonly keyframes: IObjectSelection<Keyframe<any>>;
+    readonly timeline: ITimelineSelection;
+}
\ No newline at end of file
diff --git a/nahara-motion/src/index.ts b/nahara-motion/src/index.ts
index 3f14f20..812bbfe 100644
--- a/nahara-motion/src/index.ts
+++ b/nahara-motion/src/index.ts
@@ -7,8 +7,11 @@ export * from "./addon/registries.js";
 export * from "./addon/registry.js";
 export * from "./addon/service.js";
 
+export * from "./editor/command.js";
 export * from "./editor/editor.js";
 export * from "./editor/layout.js";
+export * from "./editor/playback.js";
+export * from "./editor/selection.js";
 
 export * from "./project/assets.js";
 export * from "./project/project.js";
diff --git a/nahara-motion/src/system/commands.ts b/nahara-motion/src/system/commands.ts
new file mode 100644
index 0000000..8a7bf1b
--- /dev/null
+++ b/nahara-motion/src/system/commands.ts
@@ -0,0 +1,13 @@
+import { command, ICommand } from "../editor/command.js";
+
+export namespace builtInCommands.viewport {
+    export const add: ICommand<command.context.viewport> = {
+        context: command.context.viewport,
+        defaultKeyboardShortcuts: [
+            [{ shift: true, key: "KeyA" }]
+        ],
+        activate(editor, context) {
+            console.log("TODO");
+        },
+    };
+}
\ No newline at end of file
diff --git a/nahara-motion/src/system/nahara.ts b/nahara-motion/src/system/nahara.ts
index c8112db..5c1b4fa 100644
--- a/nahara-motion/src/system/nahara.ts
+++ b/nahara-motion/src/system/nahara.ts
@@ -1,5 +1,6 @@
 import { IAddon, IAddonHost } from "../addon/addon.js";
 import { registries } from "../addon/registries.js";
+import { builtInCommands } from "./commands.js";
 import { Box2D } from "./scene/box2d.js";
 import { Container } from "./scene/container.js";
 import { Data1D, Data2D } from "./scene/data.js";
@@ -9,6 +10,10 @@ export class NaharaMotionSystemAddon implements IAddon {
     name = "Nahara's Motion (built-in)";
 
     init(host: IAddonHost): Promise<void> | void {
+        host.logger.info("Registering editor commands");
+        const commandsReg = host.getRegistry(registries.Commands);
+        commandsReg.register("viewport.add", builtInCommands.viewport.add);
+
         host.logger.info("Registering scene object types");
         const objectsReg = host.getRegistry(registries.Objects);
         objectsReg.register("box2d", Box2D.Type);