@finsemble/finsemble-ui 1.0.0-beta-1

package/react/components/system/System.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { MenuItem } from "../menu/MenuItem";
+import { openQuitConfirmationDialog } from "../shared/openQuitConfirmationDialog";
+/**
+ * A menu item that opens the user preferences menu when clicked.
+ */
+export const Preferences = () => (React.createElement(MenuItem, { onClick: () => {
+        FSBL.Clients.LauncherClient.showWindow({
+            componentType: "UserPreferences",
+        }, {
+            monitor: "mine",
+            left: "center",
+            top: "center",
+        });
+    } }, "Preferences"));
+/**
+ * A menu item that opens the system log window when clicked.
+ */
+export const SystemLog = () => (React.createElement(MenuItem, { onClick: FSBL.SystemManagerClient.showSystemLog }, "System Log"));
+/**
+ * A menu item that opens the Central Logger when clicked.
+ */
+export const CentralLogger = () => (React.createElement(MenuItem, { onClick: () => {
+        FSBL.Clients.RouterClient.transmit("CentralConsole-Show", true);
+    } }, "Central Logger"));
+/**
+ * A menu item that opens Finsemble documentation in a browser when clicked.
+ */
+export const Documentation = () => (React.createElement(MenuItem, { onClick: () => {
+        FSBL.Clients.DialogManager.spawnDialog({
+            name: "Documentation",
+            width: 750,
+            url: "https://documentation.finsemble.com/tutorial-finsemble-user-guide.html",
+        }, {}, () => { });
+    } }, "Documentation"));
+/**
+ * A menu item that restarts the Finsemble application when clicked.
+ */
+export const Restart = () => (React.createElement(MenuItem, { onClick: () => openQuitConfirmationDialog("Restart") }, "Restart"));
+/**
+ * A menu item that resets the Finsemble application.
+ * The reset clears out all the user data of the application when clicked.
+ */
+export const Reset = () => (React.createElement(MenuItem, { onClick: () => {
+        FSBL.Clients.StorageClient.clearCache(() => {
+            FSBL.restartApplication({ forceRestart: true });
+        });
+    } }, "Reset"));
+/**
+ * A menu item that quits the Finsemble application when clicked.
+ */
+export const Quit = () => React.createElement(MenuItem, { onClick: openQuitConfirmationDialog }, "Quit");
+//# sourceMappingURL=System.js.map

package/react/components/system/System.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"System.js","sourceRoot":"","sources":["../../../src/components/system/System.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAA4B,GAAG,EAAE,CAAC,CACzD,oBAAC,QAAQ,IACR,OAAO,EAAE,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,UAAU,CACrC;YACC,aAAa,EAAE,iBAAiB;SAChC,EACD;YACC,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,QAAQ;YACd,GAAG,EAAE,QAAQ;SACb,CACD,CAAC;IACH,CAAC,kBAGS,CACX,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAA4B,GAAG,EAAE,CAAC,CACvD,oBAAC,QAAQ,IAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,aAAa,iBAAuB,CAChF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAA4B,GAAG,EAAE,CAAC,CAC3D,oBAAC,QAAQ,IACR,OAAO,EAAE,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;IACjE,CAAC,qBAGS,CACX,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAA4B,GAAG,EAAE,CAAC,CAC3D,oBAAC,QAAQ,IACR,OAAO,EAAE,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,WAAW,CACrC;YACC,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,GAAG;YACV,GAAG,EAAE,wEAAwE;SAC7E,EACD,EAAE,EACF,GAAG,EAAE,GAAE,CAAC,CACR,CAAC;IACH,CAAC,oBAGS,CACX,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAA4B,GAAG,EAAE,CAAC,CACrD,oBAAC,QAAQ,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,0BAA0B,CAAC,SAAS,CAAC,cAAoB,CAClF,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAA4B,GAAG,EAAE,CAAC,CACnD,oBAAC,QAAQ,IACR,OAAO,EAAE,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,GAAG,EAAE;YAC1C,IAAI,CAAC,kBAAkB,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;QACjD,CAAC,CAAC,CAAC;IACJ,CAAC,YAGS,CACX,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAA4B,GAAG,EAAE,CAAC,oBAAC,QAAQ,IAAC,OAAO,EAAE,0BAA0B,WAAiB,CAAC","sourcesContent":["import * as React from \"react\";\n\nimport { MenuItem } from \"../menu/MenuItem\";\nimport { openQuitConfirmationDialog } from \"../shared/openQuitConfirmationDialog\";\n\n/**\n * A menu item that opens the user preferences menu when clicked.\n */\nexport const Preferences: React.FunctionComponent = () => (\n\t<MenuItem\n\t\tonClick={() => {\n\t\t\tFSBL.Clients.LauncherClient.showWindow(\n\t\t\t\t{\n\t\t\t\t\tcomponentType: \"UserPreferences\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tmonitor: \"mine\",\n\t\t\t\t\tleft: \"center\",\n\t\t\t\t\ttop: \"center\",\n\t\t\t\t}\n\t\t\t);\n\t\t}}\n\t>\n\t\tPreferences\n\t</MenuItem>\n);\n\n/**\n * A menu item that opens the system log window when clicked.\n */\nexport const SystemLog: React.FunctionComponent = () => (\n\t<MenuItem onClick={FSBL.SystemManagerClient.showSystemLog}>System Log</MenuItem>\n);\n\n/**\n * A menu item that opens the Central Logger when clicked.\n */\nexport const CentralLogger: React.FunctionComponent = () => (\n\t<MenuItem\n\t\tonClick={() => {\n\t\t\tFSBL.Clients.RouterClient.transmit(\"CentralConsole-Show\", true);\n\t\t}}\n\t>\n\t\tCentral Logger\n\t</MenuItem>\n);\n\n/**\n * A menu item that opens Finsemble documentation in a browser when clicked.\n */\nexport const Documentation: React.FunctionComponent = () => (\n\t<MenuItem\n\t\tonClick={() => {\n\t\t\tFSBL.Clients.DialogManager.spawnDialog(\n\t\t\t\t{\n\t\t\t\t\tname: \"Documentation\",\n\t\t\t\t\twidth: 750,\n\t\t\t\t\turl: \"https://documentation.finsemble.com/tutorial-finsemble-user-guide.html\",\n\t\t\t\t},\n\t\t\t\t{},\n\t\t\t\t() => {}\n\t\t\t);\n\t\t}}\n\t>\n\t\tDocumentation\n\t</MenuItem>\n);\n\n/**\n * A menu item that restarts the Finsemble application when clicked.\n */\nexport const Restart: React.FunctionComponent = () => (\n\t<MenuItem onClick={() => openQuitConfirmationDialog(\"Restart\")}>Restart</MenuItem>\n);\n\n/**\n * A menu item that resets the Finsemble application.\n * The reset clears out all the user data of the application when clicked.\n */\nexport const Reset: React.FunctionComponent = () => (\n\t<MenuItem\n\t\tonClick={() => {\n\t\t\tFSBL.Clients.StorageClient.clearCache(() => {\n\t\t\t\tFSBL.restartApplication({ forceRestart: true });\n\t\t\t});\n\t\t}}\n\t>\n\t\tReset\n\t</MenuItem>\n);\n\n/**\n * A menu item that quits the Finsemble application when clicked.\n */\nexport const Quit: React.FunctionComponent = () => <MenuItem onClick={openQuitConfirmationDialog}>Quit</MenuItem>;\n"]}

package/react/components/system/System.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/react/components/system/System.spec.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import { Basic } from "./System.stories";
+describe("System Tray menu", () => {
+    it("should display menu items text as expected", () => {
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        const menuItems = wrapper.find(".menu-item").map((elem) => elem.text());
+        expect(menuItems, "Mocked up System file menu contains the expected items in the expected order").to.deep.equal([
+            "Preferences",
+            "System Log",
+            "Central Logger",
+            "Documentation",
+            "Restart",
+            "Reset",
+            "Quit",
+        ]);
+    });
+});
+//# sourceMappingURL=System.spec.js.map

package/react/components/system/System.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"System.spec.js","sourceRoot":"","sources":["../../../src/components/system/System.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,4CAA4C,EAAE,GAAG,EAAE;QACrD,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAK,KAAK,CAAC,IAAI,EAAI,CAAC,CAAC;QACjD,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACxE,MAAM,CAAC,SAAS,EAAE,8EAA8E,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;YAC/G,aAAa;YACb,YAAY;YACZ,gBAAgB;YAChB,eAAe;YACf,SAAS;YACT,OAAO;YACP,MAAM;SACN,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it } from \"mocha\";\nimport { expect } from \"chai\";\nimport { Basic } from \"./System.stories\";\n\ndescribe(\"System Tray menu\", () => {\n\tit(\"should display menu items text as expected\", () => {\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\tconst menuItems = wrapper.find(\".menu-item\").map((elem) => elem.text());\n\t\texpect(menuItems, \"Mocked up System file menu contains the expected items in the expected order\").to.deep.equal([\n\t\t\t\"Preferences\",\n\t\t\t\"System Log\",\n\t\t\t\"Central Logger\",\n\t\t\t\"Documentation\",\n\t\t\t\"Restart\",\n\t\t\t\"Reset\",\n\t\t\t\"Quit\",\n\t\t]);\n\t});\n});\n"]}

package/react/components/system/System.stories.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { Story } from "@storybook/react/types-6-0";
+import "../../assets/css/favorites.css";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<{}>;
+};
+export default _default;
+export declare const Basic: Story<any>;

package/react/components/system/System.stories.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { Preferences, SystemLog, CentralLogger, Documentation, Restart, Reset, Quit } from "./System";
+import { SystemTrayComponentShell } from "./SystemTrayComponentShell";
+import { initFSBL } from "../common/helpers";
+import { FinsembleProvider } from "../FinsembleProvider";
+import { action } from "@storybook/addon-actions";
+import "../../assets/css/favorites.css";
+export default {
+    title: "Toolbar/Preferences",
+    component: Preferences,
+};
+const Template = (args) => {
+    initFSBL(window);
+    // Overwrite FSBL functions for the sake of testing
+    FSBL.Clients.LauncherClient.showWindow = args.preferencesAction;
+    FSBL.SystemManagerClient.showSystemLog = args.systemLogAction;
+    FSBL.Clients.RouterClient.transmit = args.centralLoggerAction;
+    FSBL.Clients.DialogManager.spawnDialog = args.documentationAction;
+    FSBL.restartApplication = args.restartAction;
+    FSBL.Clients.StorageClient.clearCache = args.resetAction;
+    FSBL.Clients.DialogManager.open = args.quitAction;
+    return (React.createElement(FinsembleProvider, null,
+        React.createElement(SystemTrayComponentShell, null,
+            React.createElement(Preferences, null),
+            React.createElement(SystemLog, null),
+            React.createElement(CentralLogger, null),
+            React.createElement(Documentation, null),
+            React.createElement(Restart, null),
+            React.createElement(Reset, null),
+            React.createElement(Quit, null))));
+};
+export const Basic = Template.bind({});
+Basic.args = {
+    preferencesAction: action("Open window"),
+    systemLogAction: action("System log"),
+    centralLoggerAction: action("Central logger"),
+    documentationAction: action("Open documentation"),
+    restartAction: action("Restart"),
+    resetAction: action("Reset"),
+    quitAction: action("Quit"),
+};
+//# sourceMappingURL=System.stories.js.map

package/react/components/system/System.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"System.stories.js","sourceRoot":"","sources":["../../../src/components/system/System.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AACtG,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,gCAAgC,CAAC;AAExC,eAAe;IACd,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,WAAW;CACtB,CAAC;AAEF,MAAM,QAAQ,GAAe,CAAC,IAAS,EAAE,EAAE;IAC1C,QAAQ,CAAC,MAAM,CAAC,CAAC;IAEjB,mDAAmD;IACnD,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC;IAChE,IAAI,CAAC,mBAAmB,CAAC,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC;IAC9D,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC;IAC9D,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,WAAW,GAAG,IAAI,CAAC,mBAAmB,CAAC;IAClE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;IACzD,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC;IAElD,OAAO,CACN,oBAAC,iBAAiB;QACjB,oBAAC,wBAAwB;YACxB,oBAAC,WAAW,OAAG;YACf,oBAAC,SAAS,OAAG;YACb,oBAAC,aAAa,OAAG;YACjB,oBAAC,aAAa,OAAG;YACjB,oBAAC,OAAO,OAAG;YACX,oBAAC,KAAK,OAAG;YACT,oBAAC,IAAI,OAAG,CACkB,CACR,CACpB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,iBAAiB,EAAE,MAAM,CAAC,aAAa,CAAC;IACxC,eAAe,EAAE,MAAM,CAAC,YAAY,CAAC;IACrC,mBAAmB,EAAE,MAAM,CAAC,gBAAgB,CAAC;IAC7C,mBAAmB,EAAE,MAAM,CAAC,oBAAoB,CAAC;IACjD,aAAa,EAAE,MAAM,CAAC,SAAS,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC,MAAM,CAAC;CAC1B,CAAC","sourcesContent":["import React from \"react\";\nimport { Preferences, SystemLog, CentralLogger, Documentation, Restart, Reset, Quit } from \"./System\";\nimport { SystemTrayComponentShell } from \"./SystemTrayComponentShell\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { initFSBL } from \"../common/helpers\";\nimport { FinsembleProvider } from \"../FinsembleProvider\";\nimport { action } from \"@storybook/addon-actions\";\nimport \"../../assets/css/favorites.css\";\n\nexport default {\n\ttitle: \"Toolbar/Preferences\",\n\tcomponent: Preferences,\n};\n\nconst Template: Story<any> = (args: any) => {\n\tinitFSBL(window);\n\n\t// Overwrite FSBL functions for the sake of testing\n\tFSBL.Clients.LauncherClient.showWindow = args.preferencesAction;\n\tFSBL.SystemManagerClient.showSystemLog = args.systemLogAction;\n\tFSBL.Clients.RouterClient.transmit = args.centralLoggerAction;\n\tFSBL.Clients.DialogManager.spawnDialog = args.documentationAction;\n\tFSBL.restartApplication = args.restartAction;\n\tFSBL.Clients.StorageClient.clearCache = args.resetAction;\n\tFSBL.Clients.DialogManager.open = args.quitAction;\n\n\treturn (\n\t\t<FinsembleProvider>\n\t\t\t<SystemTrayComponentShell>\n\t\t\t\t<Preferences />\n\t\t\t\t<SystemLog />\n\t\t\t\t<CentralLogger />\n\t\t\t\t<Documentation />\n\t\t\t\t<Restart />\n\t\t\t\t<Reset />\n\t\t\t\t<Quit />\n\t\t\t</SystemTrayComponentShell>\n\t\t</FinsembleProvider>\n\t);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n\tpreferencesAction: action(\"Open window\"),\n\tsystemLogAction: action(\"System log\"),\n\tcentralLoggerAction: action(\"Central logger\"),\n\tdocumentationAction: action(\"Open documentation\"),\n\trestartAction: action(\"Restart\"),\n\tresetAction: action(\"Reset\"),\n\tquitAction: action(\"Quit\"),\n};\n"]}

package/react/components/system/SystemTrayComponentShell.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare type SystemTrayComponentShellProps = {};
+/**
+ * This React component will automatically resize to the height of its DOM content and will hide itself when it loses focus.
+ *
+ * Note: Set FSBL.debug=true in order to override the window hide on blur effect, so that you can debug the window's contents.
+ * @param {object} props
+ */
+export declare const SystemTrayComponentShell: React.FunctionComponent<SystemTrayComponentShellProps>;
+export {};

package/react/components/system/SystemTrayComponentShell.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+const { useEffect } = React;
+/**
+ * This React component will automatically resize to the height of its DOM content and will hide itself when it loses focus.
+ *
+ * Note: Set FSBL.debug=true in order to override the window hide on blur effect, so that you can debug the window's contents.
+ * @param {object} props
+ */
+export const SystemTrayComponentShell = (props) => {
+    // Resize window to fit the DOM height whenever the React children (window contents) change
+    useEffect(() => {
+        FSBL.Clients.WindowClient.fitToDOM();
+    }, [props]);
+    // Hide window on blur.
+    useEffect(() => {
+        const hide = () => {
+            // If FSBL.debug is set to true then bypass hide on blur effect
+            if (FSBL === null || FSBL === void 0 ? void 0 : FSBL.debug)
+                return;
+            finsembleWindow.hide();
+        };
+        finsembleWindow.addEventListener("blurred", hide);
+        return () => {
+            finsembleWindow.removeEventListener("blurred", hide);
+        };
+    }, []);
+    return React.createElement(React.Fragment, null, props.children);
+};
+//# sourceMappingURL=SystemTrayComponentShell.js.map

package/react/components/system/SystemTrayComponentShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemTrayComponentShell.js","sourceRoot":"","sources":["../../../src/components/system/SystemTrayComponentShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;AAG5B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAA2D,CAAC,KAAK,EAAE,EAAE;IACzG,2FAA2F;IAC3F,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;IACtC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,uBAAuB;IACvB,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,IAAI,GAAG,GAAG,EAAE;YACjB,+DAA+D;YAC/D,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK;gBAAE,OAAO;YACxB,eAAe,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC;QAEF,eAAe,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QAClD,OAAO,GAAG,EAAE;YACX,eAAe,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QACtD,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,0CAAG,KAAK,CAAC,QAAQ,CAAI,CAAC;AAC9B,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\n\nconst { useEffect } = React;\ntype SystemTrayComponentShellProps = {};\n\n/**\n * This React component will automatically resize to the height of its DOM content and will hide itself when it loses focus.\n *\n * Note: Set FSBL.debug=true in order to override the window hide on blur effect, so that you can debug the window's contents.\n * @param {object} props\n */\nexport const SystemTrayComponentShell: React.FunctionComponent<SystemTrayComponentShellProps> = (props) => {\n\t// Resize window to fit the DOM height whenever the React children (window contents) change\n\tuseEffect(() => {\n\t\tFSBL.Clients.WindowClient.fitToDOM();\n\t}, [props]);\n\n\t// Hide window on blur.\n\tuseEffect(() => {\n\t\tconst hide = () => {\n\t\t\t// If FSBL.debug is set to true then bypass hide on blur effect\n\t\t\tif (FSBL?.debug) return;\n\t\t\tfinsembleWindow.hide();\n\t\t};\n\n\t\tfinsembleWindow.addEventListener(\"blurred\", hide);\n\t\treturn () => {\n\t\t\tfinsembleWindow.removeEventListener(\"blurred\", hide);\n\t\t};\n\t}, []);\n\n\treturn <>{props.children}</>;\n};\n"]}

package/react/components/system/index.d.ts

@@ -0,0 +1,2 @@
+export { SystemTrayComponentShell } from "./SystemTrayComponentShell";
+export { CentralLogger, Documentation, Reset, Restart, Preferences, Quit, SystemLog } from "./System";

package/react/components/system/index.js

@@ -0,0 +1,3 @@
+export { SystemTrayComponentShell } from "./SystemTrayComponentShell";
+export { CentralLogger, Documentation, Reset, Restart, Preferences, Quit, SystemLog } from "./System";
+//# sourceMappingURL=index.js.map

package/react/components/system/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/system/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { SystemTrayComponentShell } from \"./SystemTrayComponentShell\";\n\nexport { CentralLogger, Documentation, Reset, Restart, Preferences, Quit, SystemLog } from \"./System\";\n"]}

package/react/components/toolbar/AutoArrange.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * Makes use of Finsemble's "autoArrange" functionality to organize windows into a grid-like pattern.
+ * This button acts as a toggle, arranging and unarranging with subsequent clicks.
+ * @param {string} [className] - An optional CSS className to append.
+ */
+export declare const AutoArrange: React.FunctionComponent<{
+    className?: string;
+}>;

package/react/components/toolbar/AutoArrange.js

@@ -0,0 +1,36 @@
+// disable eslint below because the svg in the icon definition will error if React is not imported
+import React, { useEffect, useState } from "react"; // eslint-disable-line
+import { useToolbar } from "../../hooks/useToolbar";
+// The default icon for AutoArrange.
+const AutoArrangeIcon = () => (React.createElement("svg", { width: "16px", height: "16px", viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("g", { id: "Symbols", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
+        React.createElement("g", { id: "atoms/icons/auto-arrange", transform: "translate(-9.000000, -9.000000)", fill: "#FFFFFF" },
+            React.createElement("g", { id: "Arranged", transform: "translate(9.000000, 9.000000)" },
+                React.createElement("path", { d: "M1,0 L6,0 C6.55228475,-1.01453063e-16 7,0.44771525 7,1 L7,6 C7,6.55228475 6.55228475,7 6,7 L1,7 C0.44771525,7 6.76353751e-17,6.55228475 0,6 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z M1,1 L1,6 L6,6 L6,1 L1,1 Z", id: "Combined-Shape" }),
+                React.createElement("path", { d: "M10,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 L10,7 C9.44771525,7 9,6.55228475 9,6 L9,1 C9,0.44771525 9.44771525,1.01453063e-16 10,0 Z M10,1 L10,6 L15,6 L15,1 L10,1 Z", id: "Combined-Shape" }),
+                React.createElement("path", { d: "M10,9 L15,9 C15.5522847,9 16,9.44771525 16,10 L16,15 C16,15.5522847 15.5522847,16 15,16 L10,16 C9.44771525,16 9,15.5522847 9,15 L9,10 C9,9.44771525 9.44771525,9 10,9 Z M10,10 L10,15 L15,15 L15,10 L10,10 Z", id: "Combined-Shape" }),
+                React.createElement("path", { d: "M1,9 L6,9 C6.55228475,9 7,9.44771525 7,10 L7,15 C7,15.5522847 6.55228475,16 6,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,10 C-6.76353751e-17,9.44771525 0.44771525,9 1,9 Z M1,10 L1,15 L6,15 L6,10 L1,10 Z", id: "Combined-Shape" }))))));
+/**
+ * Makes use of Finsemble's "autoArrange" functionality to organize windows into a grid-like pattern.
+ * This button acts as a toggle, arranging and unarranging with subsequent clicks.
+ * @param {string} [className] - An optional CSS className to append.
+ */
+export const AutoArrange = ({ className, children }) => {
+    const [isAutoArranged, setIsAutoArranged] = useState(false);
+    const [title, setTitle] = useState("Auto Arrange");
+    const [wrapperClasses, setWrapperClasses] = useState("finsemble-toolbar-button icon-only");
+    const { toggleAutoArrange } = useToolbar();
+    FSBL.Clients.RouterClient.subscribe("DockingService.AutoArrangeStatus", (err, res) => {
+        setIsAutoArranged(!Object.keys(res.data.isAutoArranged).every((key) => !res.data.isAutoArranged[key]));
+    });
+    useEffect(() => {
+        setTitle(isAutoArranged ? "Restore" : "Auto Arrange");
+        setWrapperClasses(`finsemble-toolbar-button icon-only ${className || ""} ${isAutoArranged ? "selected" : ""}`.trim());
+    }, [isAutoArranged]);
+    return (React.createElement("div", { className: wrapperClasses, title: title, onClick: toggleAutoArrange, tabIndex: 0, role: "button", onKeyDown: (e) => {
+            if (["Enter", "Space"].includes(e.key)) {
+                toggleAutoArrange();
+            }
+        } }, children || React.createElement(AutoArrangeIcon, null)));
+};
+//# sourceMappingURL=AutoArrange.js.map

package/react/components/toolbar/AutoArrange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoArrange.js","sourceRoot":"","sources":["../../../src/components/toolbar/AutoArrange.tsx"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC,CAAC,sBAAsB;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,oCAAoC;AACpC,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CAC7B,6BAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAC,KAAK,EAAC,KAAK,EAAC,4BAA4B;IACnG,2BAAG,EAAE,EAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAC,WAAW,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS;QAC3E,2BAAG,EAAE,EAAC,0BAA0B,EAAC,SAAS,EAAC,iCAAiC,EAAC,IAAI,EAAC,SAAS;YAC1F,2BAAG,EAAE,EAAC,UAAU,EAAC,SAAS,EAAC,+BAA+B;gBACzD,8BACC,CAAC,EAAC,yOAAyO,EAC3O,EAAE,EAAC,gBAAgB,GACZ;gBACR,8BACC,CAAC,EAAC,4NAA4N,EAC9N,EAAE,EAAC,gBAAgB,GACZ;gBACR,8BACC,CAAC,EAAC,8MAA8M,EAChN,EAAE,EAAC,gBAAgB,GACZ;gBACR,8BACC,CAAC,EAAC,2NAA2N,EAC7N,EAAE,EAAC,gBAAgB,GACZ,CACL,CACD,CACD,CACC,CACN,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAoD,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IACvG,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IACnD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,oCAAoC,CAAC,CAAC;IAE3F,MAAM,EAAE,iBAAiB,EAAE,GAAG,UAAU,EAAE,CAAC;IAE3C,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,kCAAkC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;QACpF,iBAAiB,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACxG,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;QACtD,iBAAiB,CAChB,sCAAsC,SAAS,IAAI,EAAE,IAAI,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CAClG,CAAC;IACH,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,OAAO,CACN,6BACC,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAsC,EAAE,EAAE;YACrD,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;gBACvC,iBAAiB,EAAE,CAAC;aACpB;QACF,CAAC,IAEA,QAAQ,IAAI,oBAAC,eAAe,OAAG,CAC3B,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["// disable eslint below because the svg in the icon definition will error if React is not imported\nimport React, { useEffect, useState } from \"react\"; // eslint-disable-line\nimport { useToolbar } from \"../../hooks/useToolbar\";\n\n// The default icon for AutoArrange.\nconst AutoArrangeIcon = () => (\n\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<g id=\"Symbols\" stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n\t\t\t<g id=\"atoms/icons/auto-arrange\" transform=\"translate(-9.000000, -9.000000)\" fill=\"#FFFFFF\">\n\t\t\t\t<g id=\"Arranged\" transform=\"translate(9.000000, 9.000000)\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M1,0 L6,0 C6.55228475,-1.01453063e-16 7,0.44771525 7,1 L7,6 C7,6.55228475 6.55228475,7 6,7 L1,7 C0.44771525,7 6.76353751e-17,6.55228475 0,6 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z M1,1 L1,6 L6,6 L6,1 L1,1 Z\"\n\t\t\t\t\t\tid=\"Combined-Shape\"\n\t\t\t\t\t></path>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M10,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 L10,7 C9.44771525,7 9,6.55228475 9,6 L9,1 C9,0.44771525 9.44771525,1.01453063e-16 10,0 Z M10,1 L10,6 L15,6 L15,1 L10,1 Z\"\n\t\t\t\t\t\tid=\"Combined-Shape\"\n\t\t\t\t\t></path>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M10,9 L15,9 C15.5522847,9 16,9.44771525 16,10 L16,15 C16,15.5522847 15.5522847,16 15,16 L10,16 C9.44771525,16 9,15.5522847 9,15 L9,10 C9,9.44771525 9.44771525,9 10,9 Z M10,10 L10,15 L15,15 L15,10 L10,10 Z\"\n\t\t\t\t\t\tid=\"Combined-Shape\"\n\t\t\t\t\t></path>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M1,9 L6,9 C6.55228475,9 7,9.44771525 7,10 L7,15 C7,15.5522847 6.55228475,16 6,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,10 C-6.76353751e-17,9.44771525 0.44771525,9 1,9 Z M1,10 L1,15 L6,15 L6,10 L1,10 Z\"\n\t\t\t\t\t\tid=\"Combined-Shape\"\n\t\t\t\t\t></path>\n\t\t\t\t</g>\n\t\t\t</g>\n\t\t</g>\n\t</svg>\n);\n\n/**\n * Makes use of Finsemble's \"autoArrange\" functionality to organize windows into a grid-like pattern.\n * This button acts as a toggle, arranging and unarranging with subsequent clicks.\n * @param {string} [className] - An optional CSS className to append.\n */\nexport const AutoArrange: React.FunctionComponent<{ className?: string }> = ({ className, children }) => {\n\tconst [isAutoArranged, setIsAutoArranged] = useState(false);\n\tconst [title, setTitle] = useState(\"Auto Arrange\");\n\tconst [wrapperClasses, setWrapperClasses] = useState(\"finsemble-toolbar-button icon-only\");\n\n\tconst { toggleAutoArrange } = useToolbar();\n\n\tFSBL.Clients.RouterClient.subscribe(\"DockingService.AutoArrangeStatus\", (err, res) => {\n\t\tsetIsAutoArranged(!Object.keys(res.data.isAutoArranged).every((key) => !res.data.isAutoArranged[key]));\n\t});\n\n\tuseEffect(() => {\n\t\tsetTitle(isAutoArranged ? \"Restore\" : \"Auto Arrange\");\n\t\tsetWrapperClasses(\n\t\t\t`finsemble-toolbar-button icon-only ${className || \"\"} ${isAutoArranged ? \"selected\" : \"\"}`.trim()\n\t\t);\n\t}, [isAutoArranged]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={wrapperClasses}\n\t\t\ttitle={title}\n\t\t\tonClick={toggleAutoArrange}\n\t\t\ttabIndex={0}\n\t\t\trole=\"button\"\n\t\t\tonKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\t\tif ([\"Enter\", \"Space\"].includes(e.key)) {\n\t\t\t\t\ttoggleAutoArrange();\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t{children || <AutoArrangeIcon />}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/toolbar/AutoArrange.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/react/components/toolbar/AutoArrange.spec.js

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import sinon from "sinon";
+import { Basic } from "./AutoArrange.stories";
+// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)
+import addons, { mockChannel } from "@storybook/addons";
+import { waitTick } from "../sdd/sdd_helpers";
+addons.setChannel(mockChannel());
+describe("<AutoArrange/>", () => {
+    afterEach(() => {
+        sinon.restore();
+    });
+    it("should display icon", () => {
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        expect(wrapper.find("svg").exists()).to.be.true;
+    });
+    it("should call auto-arrange action when clicked", async () => {
+        const buttonSpy = sinon.spy(Basic.args, "action");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(".finsemble-toolbar-button").first().simulate("click");
+        await waitTick();
+        expect(buttonSpy.calledOnce).to.be.true;
+    });
+    it("should call auto-arrange action when user presses Enter", async () => {
+        const buttonSpy = sinon.spy(Basic.args, "action");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(".finsemble-toolbar-button").first().simulate("keydown", {
+            key: "Enter",
+        });
+        await waitTick();
+        expect(buttonSpy.calledOnce).to.be.true;
+    });
+    it("should call auto-arrange action when user presses Space", async () => {
+        const buttonSpy = sinon.spy(Basic.args, "action");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(".finsemble-toolbar-button").first().simulate("keydown", {
+            key: "Space",
+        });
+        await waitTick();
+        expect(buttonSpy.calledOnce).to.be.true;
+    });
+    it("should not call auto-arrange action when user presses a character other than Enter or Space", async () => {
+        const buttonSpy = sinon.spy(Basic.args, "action");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(".finsemble-toolbar-button").first().simulate("keydown", {
+            key: "a",
+        });
+        await waitTick();
+        expect(buttonSpy.calledOnce).to.be.false;
+    });
+});
+//# sourceMappingURL=AutoArrange.spec.js.map

package/react/components/toolbar/AutoArrange.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoArrange.spec.js","sourceRoot":"","sources":["../../../src/components/toolbar/AutoArrange.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE9C,2GAA2G;AAC3G,OAAO,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;AAEjC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC/B,SAAS,CAAC,GAAG,EAAE;QACd,KAAK,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,qBAAqB,EAAE,GAAG,EAAE;QAC9B,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAK,KAAK,CAAC,IAAI,EAAI,CAAC,CAAC;QACjD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACjD,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAW,EAAE,QAAQ,CAAC,CAAC;QACzD,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAK,KAAK,CAAC,IAAI,EAAI,CAAC,CAAC;QACjD,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACpE,MAAM,QAAQ,EAAE,CAAC;QACjB,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACzC,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,yDAAyD,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAW,EAAE,QAAQ,CAAC,CAAC;QACzD,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAK,KAAK,CAAC,IAAI,EAAI,CAAC,CAAC;QACjD,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,SAAS,EAAE;YACrE,GAAG,EAAE,OAAO;SACZ,CAAC,CAAC;QACH,MAAM,QAAQ,EAAE,CAAC;QACjB,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACzC,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,yDAAyD,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAW,EAAE,QAAQ,CAAC,CAAC;QACzD,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAK,KAAK,CAAC,IAAI,EAAI,CAAC,CAAC;QACjD,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,SAAS,EAAE;YACrE,GAAG,EAAE,OAAO;SACZ,CAAC,CAAC;QACH,MAAM,QAAQ,EAAE,CAAC;QACjB,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACzC,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,6FAA6F,EAAE,KAAK,IAAI,EAAE;QAC5G,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAW,EAAE,QAAQ,CAAC,CAAC;QACzD,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAK,KAAK,CAAC,IAAI,EAAI,CAAC,CAAC;QACjD,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,SAAS,EAAE;YACrE,GAAG,EAAE,GAAG;SACR,CAAC,CAAC;QACH,MAAM,QAAQ,EAAE,CAAC;QACjB,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAC1C,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it } from \"mocha\";\nimport { expect } from \"chai\";\nimport sinon from \"sinon\";\nimport { Basic } from \"./AutoArrange.stories\";\n\n// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)\nimport addons, { mockChannel } from \"@storybook/addons\";\nimport { waitTick } from \"../sdd/sdd_helpers\";\naddons.setChannel(mockChannel());\n\ndescribe(\"<AutoArrange/>\", () => {\n\tafterEach(() => {\n\t\tsinon.restore();\n\t});\n\tit(\"should display icon\", () => {\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\texpect(wrapper.find(\"svg\").exists()).to.be.true;\n\t});\n\tit(\"should call auto-arrange action when clicked\", async () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"action\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(\".finsemble-toolbar-button\").first().simulate(\"click\");\n\t\tawait waitTick();\n\t\texpect(buttonSpy.calledOnce).to.be.true;\n\t});\n\tit(\"should call auto-arrange action when user presses Enter\", async () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"action\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(\".finsemble-toolbar-button\").first().simulate(\"keydown\", {\n\t\t\tkey: \"Enter\",\n\t\t});\n\t\tawait waitTick();\n\t\texpect(buttonSpy.calledOnce).to.be.true;\n\t});\n\tit(\"should call auto-arrange action when user presses Space\", async () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"action\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(\".finsemble-toolbar-button\").first().simulate(\"keydown\", {\n\t\t\tkey: \"Space\",\n\t\t});\n\t\tawait waitTick();\n\t\texpect(buttonSpy.calledOnce).to.be.true;\n\t});\n\tit(\"should not call auto-arrange action when user presses a character other than Enter or Space\", async () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"action\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(\".finsemble-toolbar-button\").first().simulate(\"keydown\", {\n\t\t\tkey: \"a\",\n\t\t});\n\t\tawait waitTick();\n\t\texpect(buttonSpy.calledOnce).to.be.false;\n\t});\n});\n"]}

package/react/components/toolbar/AutoArrange.stories.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Story } from "@storybook/react/types-6-0";
+import "../../assets/css/toolbar.css";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<{
+        className?: string | undefined;
+    }>;
+};
+export default _default;
+export declare const Basic: Story<any>;

package/react/components/toolbar/AutoArrange.stories.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { AutoArrange } from "./AutoArrange";
+import { initFSBL } from "../common/helpers";
+import { FinsembleProvider } from "../FinsembleProvider";
+import { action } from "@storybook/addon-actions";
+import "../../assets/css/toolbar.css";
+export default {
+    title: "Toolbar/AutoArrange",
+    component: AutoArrange,
+};
+const Template = (args) => {
+    initFSBL(window);
+    // Overwrite mockup for testing purposes
+    FSBL.Clients.WorkspaceClient.autoArrange = args.action;
+    return (React.createElement(FinsembleProvider, null,
+        React.createElement(AutoArrange, null)));
+};
+export const Basic = Template.bind({});
+Basic.args = {
+    action: action("auto arrange"),
+};
+//# sourceMappingURL=AutoArrange.stories.js.map

package/react/components/toolbar/AutoArrange.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoArrange.stories.js","sourceRoot":"","sources":["../../../src/components/toolbar/AutoArrange.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,8BAA8B,CAAC;AAEtC,eAAe;IACd,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,WAAW;CACtB,CAAC;AAEF,MAAM,QAAQ,GAAe,CAAC,IAAS,EAAE,EAAE;IAC1C,QAAQ,CAAC,MAAM,CAAC,CAAC;IAEjB,wCAAwC;IACxC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;IAEvD,OAAO,CACN,oBAAC,iBAAiB;QACjB,oBAAC,WAAW,OAAG,CACI,CACpB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC;CAC9B,CAAC","sourcesContent":["import React from \"react\";\nimport { AutoArrange } from \"./AutoArrange\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { initFSBL } from \"../common/helpers\";\nimport { FinsembleProvider } from \"../FinsembleProvider\";\nimport { action } from \"@storybook/addon-actions\";\nimport \"../../assets/css/toolbar.css\";\n\nexport default {\n\ttitle: \"Toolbar/AutoArrange\",\n\tcomponent: AutoArrange,\n};\n\nconst Template: Story<any> = (args: any) => {\n\tinitFSBL(window);\n\n\t// Overwrite mockup for testing purposes\n\tFSBL.Clients.WorkspaceClient.autoArrange = args.action;\n\n\treturn (\n\t\t<FinsembleProvider>\n\t\t\t<AutoArrange />\n\t\t</FinsembleProvider>\n\t);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n\taction: action(\"auto arrange\"),\n};\n"]}

package/react/components/toolbar/DragHandle.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+declare type DragHandleProps = {
+    className?: string;
+    children?: React.ReactNode;
+};
+/**
+ * The DOM element that the mouse can grab to move the toolbar around the screen.
+ * @param {string} [className] - An optional CSS className to append.
+ */
+export declare const DragHandle: React.FunctionComponent<DragHandleProps>;
+export {};

package/react/components/toolbar/DragHandle.js

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from "react";
+const DragHandleIcon = () => (React.createElement("svg", { width: "5px", height: "15px", viewBox: "0 0 5 11", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", opacity: "0.40", preserveAspectRatio: "xMinYMin meet" },
+        React.createElement("path", { d: "M3,0 L2,0 L2,1 L3,1 L3,0 Z M1,2 L0,2 L0,3 L1,3 L1,2 Z M2,2 L3,2 L3,3 L2,3 L2,2 Z M5,2 L4,2 L4,3 L5,3 L5,2 Z M0,4 L1,4 L1,5 L0,5 L0,4 Z M3,4 L2,4 L2,5 L3,5 L3,4 Z M4,4 L5,4 L5,5 L4,5 L4,4 Z M3,6 L2,6 L2,7 L3,7 L3,6 Z M0,6 L1,6 L1,7 L0,7 L0,6 Z M5,6 L4,6 L4,7 L5,7 L5,6 Z M4,8 L5,8 L5,9 L4,9 L4,8 Z M3,8 L2,8 L2,9 L3,9 L3,8 Z M0,8 L1,8 L1,9 L0,9 L0,8 Z M3,10 L2,10 L2,11 L3,11 L3,10 Z", id: "Shape", fill: "#FFFFFF", fillRule: "nonzero" }))));
+/**
+ * The DOM element that the mouse can grab to move the toolbar around the screen.
+ * @param {string} [className] - An optional CSS className to append.
+ */
+export const DragHandle = ({ className, children }) => {
+    const [useDOMBasedMovement, setDOMBasedMovement] = useState(true);
+    const baseCssClass = "cq-drag finsemble-toolbar-drag-handle";
+    const wrapperClasses = useDOMBasedMovement
+        ? `${baseCssClass} ${className || ""}`.trim()
+        : `${baseCssClass}-native-movement ${className || ""}`.trim();
+    /**
+     * Reports to Finsemble window management that the user has started to drag.
+     * @param event
+     */
+    const handleMouseDown = (event) => {
+        if (!useDOMBasedMovement)
+            return;
+        FSBL.Clients.WindowClient.startMovingWindow(event.nativeEvent);
+    };
+    /**
+     * Reports to Finsemble window management that the user has ended their drag.
+     */
+    const handleMouseUp = () => {
+        if (!useDOMBasedMovement)
+            return;
+        FSBL.Clients.WindowClient.stopMovingWindow();
+    };
+    useEffect(() => {
+        async function fetchManifest() {
+            const response = await FSBL.Clients.ConfigClient.getValue("finsemble-electron-adapter.useDOMBasedMovement");
+            const { data: manifestValue } = response;
+            if (manifestValue !== null)
+                setDOMBasedMovement(manifestValue);
+        }
+        fetchManifest();
+    }, []);
+    return (React.createElement("span", { className: wrapperClasses, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp }, children || React.createElement(DragHandleIcon, null)));
+};
+//# sourceMappingURL=DragHandle.js.map

package/react/components/toolbar/DragHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.js","sourceRoot":"","sources":["../../../src/components/toolbar/DragHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,CAC5B,6BAAK,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAC,KAAK,EAAC,KAAK,EAAC,4BAA4B;IACjG,2BACC,EAAE,EAAC,QAAQ,EACX,MAAM,EAAC,MAAM,EACb,WAAW,EAAC,GAAG,EACf,IAAI,EAAC,MAAM,EACX,QAAQ,EAAC,SAAS,EAClB,OAAO,EAAC,MAAM,EACd,mBAAmB,EAAC,eAAe;QAEnC,8BACC,CAAC,EAAC,gYAAgY,EAClY,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,SAAS,EACd,QAAQ,EAAC,SAAS,GACX,CACL,CACC,CACN,CAAC;AAOF;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAA6C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/F,MAAM,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAElE,MAAM,YAAY,GAAG,uCAAuC,CAAC;IAC7D,MAAM,cAAc,GAAG,mBAAmB;QACzC,CAAC,CAAC,GAAG,YAAY,IAAI,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE;QAC7C,CAAC,CAAC,GAAG,YAAY,oBAAoB,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;IAC/D;;;OAGG;IACH,MAAM,eAAe,GAAG,CAAC,KAAuB,EAAE,EAAE;QACnD,IAAI,CAAC,mBAAmB;YAAE,OAAO;QACjC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF;;OAEG;IACH,MAAM,aAAa,GAAG,GAAG,EAAE;QAC1B,IAAI,CAAC,mBAAmB;YAAE,OAAO;QACjC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;IAC9C,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,KAAK,UAAU,aAAa;YAC3B,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,gDAAgD,CAAC,CAAC;YAC5G,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,QAAQ,CAAC;YACzC,IAAI,aAAa,KAAK,IAAI;gBAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;QAChE,CAAC;QAED,aAAa,EAAE,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACN,8BAAM,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,IACrF,QAAQ,IAAI,oBAAC,cAAc,OAAG,CACzB,CACP,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nconst DragHandleIcon = () => (\n\t<svg width=\"5px\" height=\"15px\" viewBox=\"0 0 5 11\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<g\n\t\t\tid=\"Page-1\"\n\t\t\tstroke=\"none\"\n\t\t\tstrokeWidth=\"1\"\n\t\t\tfill=\"none\"\n\t\t\tfillRule=\"evenodd\"\n\t\t\topacity=\"0.40\"\n\t\t\tpreserveAspectRatio=\"xMinYMin meet\"\n\t\t>\n\t\t\t<path\n\t\t\t\td=\"M3,0 L2,0 L2,1 L3,1 L3,0 Z M1,2 L0,2 L0,3 L1,3 L1,2 Z M2,2 L3,2 L3,3 L2,3 L2,2 Z M5,2 L4,2 L4,3 L5,3 L5,2 Z M0,4 L1,4 L1,5 L0,5 L0,4 Z M3,4 L2,4 L2,5 L3,5 L3,4 Z M4,4 L5,4 L5,5 L4,5 L4,4 Z M3,6 L2,6 L2,7 L3,7 L3,6 Z M0,6 L1,6 L1,7 L0,7 L0,6 Z M5,6 L4,6 L4,7 L5,7 L5,6 Z M4,8 L5,8 L5,9 L4,9 L4,8 Z M3,8 L2,8 L2,9 L3,9 L3,8 Z M0,8 L1,8 L1,9 L0,9 L0,8 Z M3,10 L2,10 L2,11 L3,11 L3,10 Z\"\n\t\t\t\tid=\"Shape\"\n\t\t\t\tfill=\"#FFFFFF\"\n\t\t\t\tfillRule=\"nonzero\"\n\t\t\t></path>\n\t\t</g>\n\t</svg>\n);\n\ntype DragHandleProps = {\n\tclassName?: string;\n\tchildren?: React.ReactNode;\n};\n\n/**\n * The DOM element that the mouse can grab to move the toolbar around the screen.\n * @param {string} [className] - An optional CSS className to append.\n */\nexport const DragHandle: React.FunctionComponent<DragHandleProps> = ({ className, children }) => {\n\tconst [useDOMBasedMovement, setDOMBasedMovement] = useState(true);\n\n\tconst baseCssClass = \"cq-drag finsemble-toolbar-drag-handle\";\n\tconst wrapperClasses = useDOMBasedMovement\n\t\t? `${baseCssClass} ${className || \"\"}`.trim()\n\t\t: `${baseCssClass}-native-movement ${className || \"\"}`.trim();\n\t/**\n\t * Reports to Finsemble window management that the user has started to drag.\n\t * @param event\n\t */\n\tconst handleMouseDown = (event: React.MouseEvent) => {\n\t\tif (!useDOMBasedMovement) return;\n\t\tFSBL.Clients.WindowClient.startMovingWindow(event.nativeEvent);\n\t};\n\n\t/**\n\t * Reports to Finsemble window management that the user has ended their drag.\n\t */\n\tconst handleMouseUp = () => {\n\t\tif (!useDOMBasedMovement) return;\n\t\tFSBL.Clients.WindowClient.stopMovingWindow();\n\t};\n\n\tuseEffect(() => {\n\t\tasync function fetchManifest() {\n\t\t\tconst response = await FSBL.Clients.ConfigClient.getValue(\"finsemble-electron-adapter.useDOMBasedMovement\");\n\t\t\tconst { data: manifestValue } = response;\n\t\t\tif (manifestValue !== null) setDOMBasedMovement(manifestValue);\n\t\t}\n\n\t\tfetchManifest();\n\t}, []);\n\n\treturn (\n\t\t<span className={wrapperClasses} onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}>\n\t\t\t{children || <DragHandleIcon />}\n\t\t</span>\n\t);\n};\n"]}

package/react/components/toolbar/DragHandle.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/react/components/toolbar/DragHandle.spec.js

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import sinon from "sinon";
+import { Basic } from "./DragHandle.stories";
+// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)
+import addons, { mockChannel } from "@storybook/addons";
+addons.setChannel(mockChannel());
+const coreElement = ".cq-drag";
+describe("<DragHandle/>", () => {
+    afterEach(() => {
+        sinon.restore();
+    });
+    it("should display icon", () => {
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        expect(wrapper.find("svg").exists()).to.be.true;
+    });
+    it("should call start moving action on mousedown", () => {
+        const buttonSpy = sinon.spy(Basic.args, "actionStart");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(coreElement).simulate("mousedown");
+        expect(buttonSpy.calledOnce).to.be.true;
+    });
+    it("should call stop moving action on mouseup", () => {
+        const buttonSpy = sinon.spy(Basic.args, "actionEnd");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(coreElement).simulate("mouseup");
+        expect(buttonSpy.calledOnce).to.be.true;
+    });
+});
+//# sourceMappingURL=DragHandle.spec.js.map

package/react/components/toolbar/DragHandle.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.spec.js","sourceRoot":"","sources":["../../../src/components/toolbar/DragHandle.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,2GAA2G;AAC3G,OAAO,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACxD,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;AAEjC,MAAM,WAAW,GAAG,UAAU,CAAC;AAE/B,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC9B,SAAS,CAAC,GAAG,EAAE;QACd,KAAK,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,qBAAqB,EAAE,GAAG,EAAE;QAC9B,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAK,KAAK,CAAC,IAAI,EAAI,CAAC,CAAC;QACjD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACjD,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACvD,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAW,EAAE,aAAa,CAAC,CAAC;QAC9D,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAK,KAAK,CAAC,IAAI,EAAI,CAAC,CAAC;QACjD,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAChD,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACzC,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACpD,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAW,EAAE,WAAW,CAAC,CAAC;QAC5D,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAK,KAAK,CAAC,IAAI,EAAI,CAAC,CAAC;QACjD,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;QAC9C,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACzC,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it } from \"mocha\";\nimport { expect } from \"chai\";\nimport sinon from \"sinon\";\nimport { Basic } from \"./DragHandle.stories\";\n\n// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)\nimport addons, { mockChannel } from \"@storybook/addons\";\naddons.setChannel(mockChannel());\n\nconst coreElement = \".cq-drag\";\n\ndescribe(\"<DragHandle/>\", () => {\n\tafterEach(() => {\n\t\tsinon.restore();\n\t});\n\tit(\"should display icon\", () => {\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\texpect(wrapper.find(\"svg\").exists()).to.be.true;\n\t});\n\tit(\"should call start moving action on mousedown\", () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"actionStart\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(coreElement).simulate(\"mousedown\");\n\t\texpect(buttonSpy.calledOnce).to.be.true;\n\t});\n\tit(\"should call stop moving action on mouseup\", () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"actionEnd\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(coreElement).simulate(\"mouseup\");\n\t\texpect(buttonSpy.calledOnce).to.be.true;\n\t});\n});\n"]}

package/react/components/toolbar/DragHandle.stories.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Story } from "@storybook/react/types-6-0";
+import "../../assets/css/toolbar.css";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<{
+        className?: string | undefined;
+        children?: React.ReactNode;
+    }>;
+};
+export default _default;
+export declare const Basic: Story<any>;
+export declare const NativeMovement: Story<any>;

package/react/components/toolbar/DragHandle.stories.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { DragHandle } from "./DragHandle";
+import { initFSBL } from "../common/helpers";
+import { FinsembleProvider } from "../FinsembleProvider";
+import { action } from "@storybook/addon-actions";
+import "../../assets/css/toolbar.css";
+export default {
+    title: "Toolbar/DragHandle",
+    component: DragHandle,
+};
+const Template = (args) => {
+    initFSBL(window);
+    // Overwrite mockup for testing purposes
+    FSBL.Clients.WindowClient.startMovingWindow = args.actionStart;
+    FSBL.Clients.WindowClient.stopMovingWindow = args.actionEnd;
+    FSBL.Clients.ConfigClient.getValue = async (str) => {
+        if (str === "finsemble-electron-adapter.useDOMBasedMovement") {
+            return {
+                err: null,
+                data: args.useDOMBasedMovement,
+            };
+        }
+        return { err: null, data: null };
+    };
+    return (React.createElement(FinsembleProvider, null,
+        React.createElement(DragHandle, null)));
+};
+export const Basic = Template.bind({});
+Basic.args = {
+    actionStart: action("start dragging"),
+    actionEnd: action("end dragging"),
+    useDOMBasedMovement: true,
+};
+export const NativeMovement = Template.bind({});
+NativeMovement.args = {
+    actionStart: action("start dragging"),
+    actionEnd: action("end dragging"),
+    useDOMBasedMovement: false,
+};
+//# sourceMappingURL=DragHandle.stories.js.map

package/react/components/toolbar/DragHandle.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.stories.js","sourceRoot":"","sources":["../../../src/components/toolbar/DragHandle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,8BAA8B,CAAC;AAEtC,eAAe;IACd,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,UAAU;CACrB,CAAC;AAEF,MAAM,QAAQ,GAAe,CAAC,IAAS,EAAE,EAAE;IAC1C,QAAQ,CAAC,MAAM,CAAC,CAAC;IAEjB,wCAAwC;IACxC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC;IAC/D,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC;IAE3D,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAgB,GAAG,KAAK,EAAE,GAAW,EAAE,EAAE;QACnE,IAAI,GAAG,KAAK,gDAAgD,EAAE;YAC7D,OAAO;gBACN,GAAG,EAAE,IAAI;gBACT,IAAI,EAAE,IAAI,CAAC,mBAAmB;aAC9B,CAAC;SACF;QACD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,CACN,oBAAC,iBAAiB;QACjB,oBAAC,UAAU,OAAG,CACK,CACpB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,WAAW,EAAE,MAAM,CAAC,gBAAgB,CAAC;IACrC,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;IACjC,mBAAmB,EAAE,IAAI;CACzB,CAAC;AACF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,MAAM,CAAC,gBAAgB,CAAC;IACrC,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;IACjC,mBAAmB,EAAE,KAAK;CAC1B,CAAC","sourcesContent":["import React from \"react\";\nimport { DragHandle } from \"./DragHandle\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { initFSBL } from \"../common/helpers\";\nimport { FinsembleProvider } from \"../FinsembleProvider\";\nimport { action } from \"@storybook/addon-actions\";\nimport \"../../assets/css/toolbar.css\";\n\nexport default {\n\ttitle: \"Toolbar/DragHandle\",\n\tcomponent: DragHandle,\n};\n\nconst Template: Story<any> = (args: any) => {\n\tinitFSBL(window);\n\n\t// Overwrite mockup for testing purposes\n\tFSBL.Clients.WindowClient.startMovingWindow = args.actionStart;\n\tFSBL.Clients.WindowClient.stopMovingWindow = args.actionEnd;\n\n\t(FSBL.Clients.ConfigClient.getValue as any) = async (str: string) => {\n\t\tif (str === \"finsemble-electron-adapter.useDOMBasedMovement\") {\n\t\t\treturn {\n\t\t\t\terr: null,\n\t\t\t\tdata: args.useDOMBasedMovement,\n\t\t\t};\n\t\t}\n\t\treturn { err: null, data: null };\n\t};\n\n\treturn (\n\t\t<FinsembleProvider>\n\t\t\t<DragHandle />\n\t\t</FinsembleProvider>\n\t);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n\tactionStart: action(\"start dragging\"),\n\tactionEnd: action(\"end dragging\"),\n\tuseDOMBasedMovement: true,\n};\nexport const NativeMovement = Template.bind({});\nNativeMovement.args = {\n\tactionStart: action(\"start dragging\"),\n\tactionEnd: action(\"end dragging\"),\n\tuseDOMBasedMovement: false,\n};\n"]}

package/react/components/toolbar/MinimizeAll.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+/**
+ * A button that minimizes all windows on the the user's screen.
+ * @param {string} [className] - An optional CSS className to append.
+ */
+export declare const MinimizeAll: React.FunctionComponent<{
+    className?: string;
+}>;