@vived/app 2.24.0 → 2.25.0

package/lib/Controllers/ToolHotkeys.d.ts

@@ -0,0 +1,6 @@
+import { KeyboardController, KeyboardInput, ToolRepository } from "../Entities";
+export declare class ToolHotkeys<ToolTypes> implements KeyboardController {
+    private toolRepo;
+    onKeyDown: (e: KeyboardEvent) => void;
+    constructor(toolRepo: ToolRepository<ToolTypes>, keyboardInput: KeyboardInput);
+}

package/lib/Controllers/ToolHotkeys.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolHotkeys = void 0;
+class ToolHotkeys {
+    constructor(toolRepo, keyboardInput) {
+        this.toolRepo = toolRepo;
+        this.onKeyDown = (e) => {
+            if (e.repeat)
+                return;
+            const currentKey = {
+                keyCode: e.code,
+                alt: e.altKey,
+                control: e.ctrlKey,
+                meta: e.metaKey,
+                shift: e.shiftKey,
+            };
+            const tool = this.toolRepo.getToolForHotkey(currentKey);
+            if (!tool)
+                return;
+            this.toolRepo.triggerTool(tool.type);
+        };
+        keyboardInput.registerController(this);
+    }
+}
+exports.ToolHotkeys = ToolHotkeys;

package/lib/Controllers/index.d.ts

@@ -0,0 +1 @@
+export * from "./ToolHotkeys";

package/lib/Controllers/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ToolHotkeys"), exports);

package/lib/Entities/Tool.d.ts

@@ -1,41 +1,52 @@
 import { ObservableEntity } from "./ObservableEntity";
 export declare enum ToolState {
-    HIDDEN = 0,
-    DISABLED = 1,
-    ENABLED = 2,
-    ACTIVE = 3
+    HIDDEN = "HIDDEN",
+    DISABLED = "DISABLED",
+    ENABLED = "ENABLED",
+    ACTIVE = "ACTIVE"
 }
-export interface ToolData {
-    id: string;
+export interface ToolData<ToolTypes> {
+    type: ToolTypes;
     isDefault: boolean;
     label: string;
     shortcutLabel: string;
+    hotkeys: HotKey[];
+}
+export interface HotKey {
     keyCode: string;
+    control?: boolean;
+    shift?: boolean;
+    meta?: boolean;
+    alt?: boolean;
 }
-export declare abstract class Tool extends ObservableEntity {
+export declare abstract class Tool<ToolTypes> extends ObservableEntity {
     /**
-     * The tool's unique identifier
+     * The tool's type
      */
-    abstract readonly id: string;
+    abstract readonly type: ToolTypes;
     /**
-     * The shortcut key code for this tool.
-     * Example: 'KeyZ'
+     * Gets label for this tool. This will be human readable
      */
-    abstract readonly keyCode: string;
+    abstract get label(): string;
     /**
-     * The label for this tool. This should be human readable
+     * Sets label for this tool. This should be human readable. A change will notify
      */
-    abstract readonly label: string;
+    abstract set label(toolLabel: string);
     /**
      * Is this the default tool? The default tool is what is initiall set Active and
      * is what will be set active if the currently active tool is hidden or disabled.
      */
     abstract readonly isDefault: boolean;
     /**
-     * The keyboard shorcut label. This will be displayed to the user via the tool tip
+     * Gets the keyboard shorcut label. This will be displayed to the user via the tool tip
      * Example 'z'
      */
-    abstract readonly shortcutLabel: string;
+    abstract get shortcutLabel(): string;
+    /**
+     * Sets the keyboard shorcut label. This will be displayed to the user via the tool tip
+     * Example 'z'. This will notify when changed
+     */
+    abstract set shortcutLabel(shorcut: string);
     /**
      * Get the current tool state
      */
@@ -44,5 +55,27 @@ export declare abstract class Tool extends ObservableEntity {
      * Sets the current tool state. This will notify on change
      */
     abstract set state(val: ToolState);
+    /**
+     * The keyboard shortcuts for this tool
+     */
+    abstract readonly hotkeys: HotKey[];
+    /**
+     * Is this tool an action tool. In other words do you just click it and something should happen
+     */
+    abstract get isAction(): boolean;
+    /**
+     * If this is an action tool calling this will trigger any actions that have been registered
+     */
+    abstract triggerActions(): void;
+    /**
+     * Registers an action with this tool. This action will be called when this tool is triggered
+     * @param action The action to call when this tool is triggered
+     */
+    abstract registerAction(action: () => void): void;
+    /**
+     * Returns a true if the passed hotkey is in my hotkey list
+     * @param hotkey The Hotkey to chekc
+     */
+    abstract isMyHotkey(hotkey: HotKey): boolean;
 }
-export declare function makeTool(data: ToolData): Tool;
+export declare function makeTool<ToolTypes>(data: ToolData<ToolTypes>): Tool<ToolTypes>;

package/lib/Entities/Tool.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeTool = exports.Tool = exports.ToolState = void 0;
-const MemoizedNumber_1 = require("./MemoizedNumber");
+const MemoizedString_1 = require("./MemoizedString");
 const ObservableEntity_1 = require("./ObservableEntity");
 var ToolState;
 (function (ToolState) {
-    ToolState[ToolState["HIDDEN"] = 0] = "HIDDEN";
-    ToolState[ToolState["DISABLED"] = 1] = "DISABLED";
-    ToolState[ToolState["ENABLED"] = 2] = "ENABLED";
-    ToolState[ToolState["ACTIVE"] = 3] = "ACTIVE";
+    ToolState["HIDDEN"] = "HIDDEN";
+    ToolState["DISABLED"] = "DISABLED";
+    ToolState["ENABLED"] = "ENABLED";
+    ToolState["ACTIVE"] = "ACTIVE";
 })(ToolState = exports.ToolState || (exports.ToolState = {}));
 class Tool extends ObservableEntity_1.ObservableEntity {
 }
@@ -20,12 +20,44 @@ exports.makeTool = makeTool;
 class ToolImp extends Tool {
     constructor(data) {
         super();
-        this.memoizedState = new MemoizedNumber_1.MemoizedNumber(ToolState.ENABLED, this.notify);
-        this.id = data.id;
-        this.keyCode = data.keyCode;
-        this.label = data.label;
+        this.memoizedState = new MemoizedString_1.MemoizedString(ToolState.ENABLED, this.notify);
+        this.actions = [];
+        this._isAction = false;
+        this.registerAction = (action) => {
+            this.actions.push(action);
+            this._isAction = true;
+        };
+        this.triggerActions = () => {
+            this.actions.forEach((action) => {
+                action();
+            });
+        };
+        this.isMyHotkey = (hotkey) => {
+            let isMine = false;
+            this.hotkeys.forEach((myHotkey) => {
+                if (this.hotkeysMatch(myHotkey, hotkey)) {
+                    isMine = true;
+                }
+            });
+            return isMine;
+        };
+        this.type = data.type;
+        this.memoizedLabel = new MemoizedString_1.MemoizedString(data.label, this.notify);
         this.isDefault = data.isDefault;
-        this.shortcutLabel = data.shortcutLabel;
+        this.memoizedShortcut = new MemoizedString_1.MemoizedString(data.shortcutLabel, this.notify);
+        this.hotkeys = data.hotkeys;
+    }
+    get label() {
+        return this.memoizedLabel.val;
+    }
+    set label(toolLabel) {
+        this.memoizedLabel.val = toolLabel;
+    }
+    get shortcutLabel() {
+        return this.memoizedShortcut.val;
+    }
+    set shortcutLabel(shorcut) {
+        this.memoizedShortcut.val = shorcut;
     }
     get state() {
         return this.memoizedState.val;
@@ -33,4 +65,30 @@ class ToolImp extends Tool {
     set state(val) {
         this.memoizedState.val = val;
     }
+    get isAction() {
+        return this._isAction;
+    }
+    hotkeysMatch(a, b) {
+        if (a.keyCode !== b.keyCode)
+            return false;
+        const aComplete = this.fillInMissingModifiers(a);
+        const bComplete = this.fillInMissingModifiers(b);
+        if (aComplete.alt !== bComplete.alt)
+            return false;
+        if (aComplete.control !== bComplete.control)
+            return false;
+        if (aComplete.meta !== bComplete.meta)
+            return false;
+        if (aComplete.shift !== bComplete.shift)
+            return false;
+        return true;
+    }
+    fillInMissingModifiers(hotkey) {
+        const rVal = Object.assign({}, hotkey);
+        rVal.alt = hotkey.alt === undefined ? false : hotkey.alt;
+        rVal.control = hotkey.control === undefined ? false : hotkey.control;
+        rVal.meta = hotkey.meta === undefined ? false : hotkey.meta;
+        rVal.shift = hotkey.shift === undefined ? false : hotkey.shift;
+        return rVal;
+    }
 }

package/lib/Entities/ToolRepository.d.ts

@@ -1,46 +1,46 @@
 import { ObservableEntity } from "./ObservableEntity";
-import { Tool, ToolData } from "./Tool";
-export declare abstract class ToolRepository extends ObservableEntity {
+import { HotKey, Tool, ToolData } from "./Tool";
+export declare abstract class ToolRepository<ToolTypes> extends ObservableEntity {
     /**
      * Retuns the active tool. If no tool is active it will return undefined.
      */
-    abstract get activeTool(): Tool | undefined;
+    abstract get activeTool(): Tool<ToolTypes> | undefined;
     /**
      * Returns all the tools.
      */
-    abstract get allTools(): Tool[];
+    abstract get allTools(): Tool<ToolTypes>[];
     /**
      * Set up the tools from a JSON data file. This should be called during construction.
      * It is assumed this is only called once.
      * @param toolData
      */
-    abstract setupToolsFromData(toolData: ToolData[]): void;
+    abstract setupToolsFromData(toolData: ToolData<ToolTypes>[]): void;
     /**
-     * Get's a tool by it's ID. Retruns undefined if no tool could be found
-     * @param id The tool ID
+     * Get's a tool by it's type. Retruns undefined if no tool could be found
+     * @param toolType The tool type
      */
-    abstract getTool(id: string): Tool | undefined;
+    abstract getTool(toolType: ToolTypes): Tool<ToolTypes> | undefined;
     /**
      * Returns the tool that has been assinged to a particular key code.
      * Will return undefined of no tool is found
-     * @param keyCode Key Code
+     * @param hotkey Key Code
      */
-    abstract getToolForKey(keyCode: string): Tool | undefined;
+    abstract getToolForHotkey(hotkey: HotKey): Tool<ToolTypes> | undefined;
     /**
      * Call this to set the default tool as active
      */
     abstract setDefaultToolActive(): void;
     /**
-     * Sets a tool active by ID.
-     * @param id Tool ID
+     * Triggers a tool of type
+     * @param toolType Tool's type
      */
-    abstract setToolActive(id: string): void;
+    abstract triggerTool(toolType: ToolTypes): void;
     /**
      * Toggls a tool between Hidden and shown.
      * If the tool is tool is currently Active, the default tool will be set active
      * The Default Tool cannot be toggled
-     * @param id Tool ID
+     * @param toolType Tool's type
      */
-    abstract toggleToolVisibility(id: string): void;
+    abstract toggleToolVisibility(toolType: ToolTypes): void;
 }
-export declare function makeToolRepo(): ToolRepository;
+export declare function makeToolRepo<ToolTypes>(): ToolRepository<ToolTypes>;

package/lib/Entities/ToolRepository.js

@@ -14,15 +14,13 @@ class ToolRepositoryImp extends ToolRepository {
     constructor() {
         super(...arguments);
         this.toolLookup = new Map();
-        this._defaultToolID = "";
-        this._activeToolID = "";
     }
     get allTools() {
         return Array.from(this.toolLookup.values());
     }
     setDefaultToolActive() {
-        if (this._defaultToolID) {
-            this.setToolActive(this._defaultToolID);
+        if (this._defaultToolType !== undefined) {
+            this.triggerTool(this._defaultToolType);
         }
         else {
             console.warn(`[ToolRepository] No default tools has been specified`);
@@ -30,58 +28,65 @@ class ToolRepositoryImp extends ToolRepository {
     }
     setupToolsFromData(toolDatas) {
         toolDatas.forEach((toolData) => {
-            if (this.toolLookup.has(toolData.id)) {
-                console.warn(`[ToolRepository] A tool with the ID ${toolData.id} already exists. Replacing`);
+            const type = toolData.type;
+            if (this.toolLookup.has(type)) {
+                console.warn(`[ToolRepository] A tool with the ID ${toolData.type} already exists. Replacing`);
             }
             const tool = Tool_1.makeTool(toolData);
-            this.toolLookup.set(tool.id, tool);
+            this.toolLookup.set(type, tool);
             if (toolData.isDefault) {
-                if (this._defaultToolID) {
+                if (this._defaultToolType) {
                     console.warn(`[ToolRepository] More than one tools is marked as default. Replacing`);
                 }
-                this._defaultToolID = tool.id;
+                this._defaultToolType = type;
             }
         });
-        if (!this._defaultToolID) {
+        if (!this._defaultToolType) {
             console.warn(`[ToolRepository] No default tools was specified. Defaulting to the first tool in the list`);
-            this._defaultToolID = Array.from(this.toolLookup.values())[0].id;
+            this._defaultToolType = Array.from(this.toolLookup.keys())[0];
+        }
+        if (this._defaultToolType) {
+            this.triggerTool(this._defaultToolType);
         }
-        this.setToolActive(this._defaultToolID);
     }
-    getTool(id) {
-        return this.toolLookup.get(id);
+    getTool(type) {
+        return this.toolLookup.get(type);
     }
-    getToolForKey(keyCode) {
+    getToolForHotkey(hotkey) {
         let tool;
         this.allTools.forEach((t) => {
-            if (t.keyCode === keyCode) {
+            if (t.isMyHotkey(hotkey)) {
                 tool = t;
             }
         });
         return tool;
     }
     get activeTool() {
-        return this.getTool(this._activeToolID);
+        if (!this._activeToolType)
+            return undefined;
+        return this.getTool(this._activeToolType);
     }
-    setToolActive(id) {
-        if (this._activeToolID === id)
+    triggerTool(type) {
+        if (this._activeToolType === type)
             return;
-        const newActiveTool = this.toolLookup.get(id);
+        const newActiveTool = this.toolLookup.get(type);
         if (!newActiveTool) {
-            console.warn(`[ToolRepository] Unable to find tool ${id}`);
+            console.warn(`[ToolRepository] Unable to find tool ${type}`);
+            return;
+        }
+        if (newActiveTool.isAction) {
+            newActiveTool.triggerActions();
             return;
         }
         if (newActiveTool.state === Tool_1.ToolState.DISABLED) {
-            console.warn(`[ToolRepository] ${newActiveTool.label} cannot be set active because it is disabled`);
             return;
         }
         if (newActiveTool.state === Tool_1.ToolState.HIDDEN) {
-            console.warn(`[ToolRepository] ${newActiveTool.label} cannot be set active because it is hidden`);
             return;
         }
         this.toolLookup.forEach((tool) => {
-            if (tool.id === id) {
-                this._activeToolID = id;
+            if (tool.type === type) {
+                this._activeToolType = type;
                 tool.state = Tool_1.ToolState.ACTIVE;
             }
             else if (tool.state === Tool_1.ToolState.ACTIVE) {
@@ -90,13 +95,13 @@ class ToolRepositoryImp extends ToolRepository {
         });
         this.notify();
     }
-    toggleToolVisibility(id) {
-        const tool = this.getTool(id);
+    toggleToolVisibility(type) {
+        const tool = this.getTool(type);
         if (!tool) {
-            console.warn(`[ToolRepository] Unable to find tool to toggle: ${id}`);
+            console.warn(`[ToolRepository] Unable to find tool to toggle: ${type}`);
             return;
         }
-        if (tool.id === this._defaultToolID) {
+        if (tool.type === this._defaultToolType) {
             console.warn(`[ToolRepository] The default tool's visibility cannot be toggled`);
             return;
         }

package/lib/PresentationManagers/ToolPM.d.ts

@@ -1,7 +1,7 @@
 import { Tool } from "../Entities";
 import { PresentionManager } from "./PresentationManager";
-export interface ToolVM {
-    toolID: string;
+export interface ToolVM<ToolType> {
+    type: ToolType;
     label: string;
     enabled: boolean;
     selected: boolean;
@@ -9,10 +9,9 @@ export interface ToolVM {
     shortcutLabel: string;
     tooltipLabel: string;
 }
-export declare class ToolPM extends PresentionManager {
+export declare class ToolPM<ToolType> extends PresentionManager {
     private tool;
     private updateView;
     doUpdateView: () => void;
-    constructor(tool: Tool, updateView: (tools: ToolVM) => void);
+    constructor(tool: Tool<ToolType>, updateView: (tools: ToolVM<ToolType>) => void);
 }
-export declare const defaultToolVM: ToolVM;

package/lib/PresentationManagers/ToolPM.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultToolVM = exports.ToolPM = void 0;
+exports.ToolPM = void 0;
 const Entities_1 = require("../Entities");
 const PresentationManager_1 = require("./PresentationManager");
 class ToolPM extends PresentationManager_1.PresentionManager {
@@ -9,21 +9,22 @@ class ToolPM extends PresentationManager_1.PresentionManager {
         this.tool = tool;
         this.updateView = updateView;
         this.doUpdateView = () => {
+            const { type, state, label, shortcutLabel } = this.tool;
             let enabled = false;
-            if (this.tool.state === Entities_1.ToolState.ACTIVE ||
-                this.tool.state === Entities_1.ToolState.ENABLED) {
+            if (state === Entities_1.ToolState.ACTIVE ||
+                state === Entities_1.ToolState.ENABLED) {
                 enabled = true;
             }
-            const selected = this.tool.state === Entities_1.ToolState.ACTIVE ? true : false;
-            const show = this.tool.state === Entities_1.ToolState.HIDDEN ? false : true;
-            const tooltipLabel = `${this.tool.label} [${this.tool.shortcutLabel}]`;
+            const selected = state === Entities_1.ToolState.ACTIVE ? true : false;
+            const show = state === Entities_1.ToolState.HIDDEN ? false : true;
+            const tooltipLabel = `${label} [${shortcutLabel}]`;
             const vm = {
-                toolID: this.tool.id,
+                type,
                 enabled,
-                label: this.tool.label,
+                label,
                 selected,
                 show,
-                shortcutLabel: this.tool.shortcutLabel,
+                shortcutLabel,
                 tooltipLabel,
             };
             this.updateView(vm);
@@ -32,12 +33,3 @@ class ToolPM extends PresentationManager_1.PresentionManager {
     }
 }
 exports.ToolPM = ToolPM;
-exports.defaultToolVM = {
-    toolID: "",
-    enabled: false,
-    label: "",
-    selected: false,
-    shortcutLabel: "",
-    show: false,
-    tooltipLabel: "",
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vived/app",
-  "version": "2.24.0",
+  "version": "2.25.0",
   "description": "Public package for the VIVED Learning App system",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",