lucid-extension-sdk 0.0.0

package/out/editorclient.d.ts

@@ -0,0 +1,43 @@
+import { CommandArgs, CommandName, UnionToIntersection } from './commandtypes';
+import { JsonSerializable } from './core/jsonserializable';
+import { BlockProxy } from './document/blockproxy';
+import { ElementProxy } from './document/elementproxy';
+import { LineProxy } from './document/lineproxy';
+export interface XHRRequest {
+    url: string;
+    method?: string;
+    data?: string;
+    headers?: {
+        [key: string]: string | string[];
+    };
+    timeoutMs?: number;
+}
+export interface XHRResponse {
+    url: string;
+    responseText: string;
+    status: number;
+    headers: {
+        [key: string]: string;
+    };
+    timeout?: boolean;
+}
+export declare class EditorClient {
+    private nextId;
+    private readonly oneTimeCallbacks;
+    private readonly callbacks;
+    killExtension(): void;
+    reloadExtension(): void;
+    download(filename: string, data: string, mime: string, base64: boolean): void;
+    xhr(request: XHRRequest): Promise<XHRResponse>;
+    registerOneTimeAction(cb: (value: any) => JsonSerializable | void): number;
+    registerAction(name: string, cb: (value: any) => JsonSerializable | void): void;
+    deleteAction(name: string): void;
+    actionExists(name: string): boolean;
+    sendCommand<C extends CommandName>(name: C, params: UnionToIntersection<CommandArgs[C]['query']>): CommandArgs[C]['result'];
+    getBlockProxy(id: string): BlockProxy;
+    loadBlockClasses(classNames: string[]): Promise<undefined>;
+    getLineProxy(id: string): LineProxy;
+    getElementProxy(id: string): ElementProxy;
+    protected listenToEditor(): void;
+    constructor();
+}

package/out/editorclient.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorClient = void 0;
+const blockproxyregistry_1 = require("./document/blockclasses/blockproxyregistry");
+const blockproxy_1 = require("./document/blockproxy");
+const documentproxy_1 = require("./document/documentproxy");
+const elementproxy_1 = require("./document/elementproxy");
+const groupproxy_1 = require("./document/groupproxy");
+const lineproxy_1 = require("./document/lineproxy");
+const pageproxy_1 = require("./document/pageproxy");
+class EditorClient {
+    constructor() {
+        this.nextId = 0;
+        this.oneTimeCallbacks = new Map();
+        this.callbacks = new Map();
+        this.listenToEditor();
+    }
+    killExtension() {
+        this.sendCommand("k" /* KillExtension */, undefined);
+    }
+    reloadExtension() {
+        this.sendCommand("r" /* ReloadExtension */, undefined);
+    }
+    download(filename, data, mime, base64) {
+        this.sendCommand("d" /* Download */, {
+            'f': filename,
+            'd': data,
+            'm': mime,
+            'b64': base64,
+        });
+    }
+    xhr(request) {
+        return this.sendCommand("xhr" /* SendXHR */, {
+            'url': request.url,
+            'm': request.method,
+            'd': request.data,
+            'h': request.headers,
+            'ms': request.timeoutMs,
+        })
+            .then((raw) => {
+            return {
+                url: raw['url'],
+                responseText: raw['t'],
+                status: raw['s'],
+                headers: raw['h'],
+                timeout: raw['to'],
+            };
+        })
+            .catch((raw) => {
+            throw {
+                url: raw['url'],
+                responseText: raw['t'],
+                status: raw['s'],
+                headers: raw['h'],
+                timeout: raw['to'],
+            };
+        });
+    }
+    registerOneTimeAction(cb) {
+        const id = this.nextId++;
+        this.oneTimeCallbacks.set(id, cb);
+        return id;
+    }
+    registerAction(name, cb) {
+        this.callbacks.set(name, cb);
+    }
+    deleteAction(name) {
+        this.callbacks.delete(name);
+    }
+    actionExists(name) {
+        return this.callbacks.has(name);
+    }
+    //Note: UnionToIntersection here fixes the type of params required if you're passing in something that's not a single
+    //specific command name, to require the type of all possible command names you could pass in, intersected. So if you
+    //call this with a CommandName.ListBlocks|CommandName.ListLines it will work as expected but if you just pass in a
+    //CommandName, there won't be any possible params you could pass that would meet all the requirements (string & undefined & ...)
+    sendCommand(name, params) {
+        return lucid.executeCommand(name, params);
+    }
+    getBlockProxy(id) {
+        const className = this.sendCommand("gp" /* GetProperty */, { 'id': id, 'p': 'ClassName' });
+        const proxy = (0, blockproxyregistry_1.findProxyClass)(className);
+        if (proxy) {
+            return new proxy(id, this);
+        }
+        else {
+            return new blockproxy_1.BlockProxy(id, this);
+        }
+    }
+    loadBlockClasses(classNames) {
+        return this.sendCommand("lbc" /* LoadBlockClasses */, classNames);
+    }
+    getLineProxy(id) {
+        return new lineproxy_1.LineProxy(id, this);
+    }
+    getElementProxy(id) {
+        const type = this.sendCommand("get" /* GetElementType */, { 'id': id });
+        switch (type) {
+            case 'block':
+                return this.getBlockProxy(id);
+            case 'line':
+                return this.getLineProxy(id);
+            case 'page':
+                return new pageproxy_1.PageProxy(id, this);
+            case 'document':
+                return new documentproxy_1.DocumentProxy(this);
+            case 'group':
+                return new groupproxy_1.GroupProxy(id, this);
+            default:
+                return new elementproxy_1.ElementProxy(id, this);
+        }
+    }
+    listenToEditor() {
+        lucid.listen((msg) => {
+            var _a;
+            const resolver = this.oneTimeCallbacks.get(msg['id']);
+            if (resolver) {
+                const result = resolver(msg['r']);
+                this.oneTimeCallbacks.delete(msg['id']);
+                return result;
+            }
+            else {
+                return (_a = this.callbacks.get(msg['id'])) === null || _a === void 0 ? void 0 : _a(msg);
+            }
+        });
+    }
+}
+exports.EditorClient = EditorClient;

package/out/index.d.ts

@@ -0,0 +1,7 @@
+export { DataProxy } from './data/dataproxy';
+export { DocumentProxy } from './document/documentproxy';
+export { EditorClient } from './editorclient';
+export { AlertModal } from './ui/alertmodal';
+export { CustomMenuItem, Menu, MenuLocation, MenuType } from './ui/menu';
+export { Modal } from './ui/modal';
+export { Viewport } from './ui/viewport';

package/out/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Viewport = exports.Modal = exports.MenuType = exports.MenuLocation = exports.Menu = exports.AlertModal = exports.EditorClient = exports.DocumentProxy = exports.DataProxy = void 0;
+var dataproxy_1 = require("./data/dataproxy");
+Object.defineProperty(exports, "DataProxy", { enumerable: true, get: function () { return dataproxy_1.DataProxy; } });
+var documentproxy_1 = require("./document/documentproxy");
+Object.defineProperty(exports, "DocumentProxy", { enumerable: true, get: function () { return documentproxy_1.DocumentProxy; } });
+var editorclient_1 = require("./editorclient");
+Object.defineProperty(exports, "EditorClient", { enumerable: true, get: function () { return editorclient_1.EditorClient; } });
+var alertmodal_1 = require("./ui/alertmodal");
+Object.defineProperty(exports, "AlertModal", { enumerable: true, get: function () { return alertmodal_1.AlertModal; } });
+var menu_1 = require("./ui/menu");
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return menu_1.Menu; } });
+Object.defineProperty(exports, "MenuLocation", { enumerable: true, get: function () { return menu_1.MenuLocation; } });
+Object.defineProperty(exports, "MenuType", { enumerable: true, get: function () { return menu_1.MenuType; } });
+var modal_1 = require("./ui/modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return modal_1.Modal; } });
+var viewport_1 = require("./ui/viewport");
+Object.defineProperty(exports, "Viewport", { enumerable: true, get: function () { return viewport_1.Viewport; } });

package/out/math.d.ts

@@ -0,0 +1,12 @@
+export declare type Point = {
+    x: number;
+    y: number;
+};
+export declare type Box = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+export declare function combinedBoundingBox(boxes: Box[]): Box | undefined;
+export declare function padBox(box: Box, padding: number): Box;

package/out/math.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.padBox = exports.combinedBoundingBox = void 0;
+function combinedBoundingBox(boxes) {
+    if (boxes.length == 0) {
+        return undefined;
+    }
+    let minX = Number.MAX_VALUE;
+    let minY = Number.MAX_VALUE;
+    let maxX = -Number.MAX_VALUE;
+    let maxY = -Number.MAX_VALUE;
+    for (const box of boxes) {
+        minX = Math.min(minX, box.x);
+        maxX = Math.max(maxX, box.x + box.w);
+        minY = Math.min(minY, box.y);
+        maxY = Math.max(maxY, box.y + box.h);
+    }
+    return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+exports.combinedBoundingBox = combinedBoundingBox;
+function padBox(box, padding) {
+    return { x: box.x - padding, y: box.y - padding, w: box.w + padding * 2, h: box.h + padding * 2 };
+}
+exports.padBox = padBox;

package/out/ui/alertmodal.d.ts

@@ -0,0 +1,8 @@
+import { EditorClient } from '../editorclient';
+import { Modal } from './modal';
+export declare class AlertModal extends Modal {
+    protected readonly client: EditorClient;
+    constructor(client: EditorClient, title: string, message: string);
+    protected messageFromFrame(message: any): void;
+    protected frameLoaded(): void;
+}

package/out/ui/alertmodal.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertModal = void 0;
+const modal_1 = require("./modal");
+class AlertModal extends modal_1.Modal {
+    constructor(client, title, message) {
+        super(client, {
+            width: 300,
+            height: 200,
+            title: title,
+            content: `
+<html>
+<head>
+<style type="text/css">
+p {
+    font-family: 'Graphik LC Web', sans-serif;
+    font-size:14px;
+    text-align:center;
+}
+</style>
+</head>
+<body>
+<p id="message"></p>
+<script type="text/javascript">
+    var p = document.getElementById('message');
+    p.innerText = ${JSON.stringify(message)};
+</script>
+</body>
+</html>
+            `,
+        });
+        this.client = client;
+    }
+    messageFromFrame(message) { }
+    frameLoaded() { }
+}
+exports.AlertModal = AlertModal;

package/out/ui/menu.d.ts

@@ -0,0 +1,26 @@
+import { EditorClient } from '../editorclient';
+export declare enum MenuType {
+    Main = 1,
+    Context = 2
+}
+export declare enum MenuLocation {
+    Extension = 1,
+    Edit = 2,
+    View = 3,
+    Share = 4,
+    Export = 5,
+    Import = 6
+}
+export interface CustomMenuItem {
+    label: string;
+    action: string;
+    visibleAction?: string;
+    disabledAction?: string;
+    menuType: MenuType;
+    location?: MenuLocation;
+}
+export declare class Menu {
+    private readonly client;
+    constructor(client: EditorClient);
+    addMenuItem(item: CustomMenuItem): void;
+}

package/out/ui/menu.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = exports.MenuLocation = exports.MenuType = void 0;
+var MenuType;
+(function (MenuType) {
+    MenuType[MenuType["Main"] = 1] = "Main";
+    MenuType[MenuType["Context"] = 2] = "Context";
+})(MenuType = exports.MenuType || (exports.MenuType = {}));
+var MenuLocation;
+(function (MenuLocation) {
+    MenuLocation[MenuLocation["Extension"] = 1] = "Extension";
+    MenuLocation[MenuLocation["Edit"] = 2] = "Edit";
+    MenuLocation[MenuLocation["View"] = 3] = "View";
+    MenuLocation[MenuLocation["Share"] = 4] = "Share";
+    MenuLocation[MenuLocation["Export"] = 5] = "Export";
+    MenuLocation[MenuLocation["Import"] = 6] = "Import";
+})(MenuLocation = exports.MenuLocation || (exports.MenuLocation = {}));
+class Menu {
+    constructor(client) {
+        this.client = client;
+    }
+    addMenuItem(item) {
+        if (!this.client.actionExists(item.action)) {
+            throw new Error('Unregistered action: ' + item.action);
+        }
+        if (item.visibleAction && !this.client.actionExists(item.visibleAction)) {
+            throw new Error('Unregistered action: ' + item.visibleAction);
+        }
+        if (item.disabledAction && !this.client.actionExists(item.disabledAction)) {
+            throw new Error('Unregistered action: ' + item.disabledAction);
+        }
+        this.client.sendCommand("ami" /* AddMenuItem */, {
+            'l': item.label,
+            'a': item.action,
+            'v': item.visibleAction,
+            'd': item.disabledAction,
+            't': item.menuType,
+            'loc': item.location,
+        });
+    }
+}
+exports.Menu = Menu;

package/out/ui/modal.d.ts

@@ -0,0 +1,36 @@
+import { JsonSerializable } from '../core/jsonserializable';
+import { EditorClient } from '../editorclient';
+export interface ModalConfig {
+    title: string;
+    width: number;
+    height: number;
+    content: string;
+}
+export declare enum ModalIncomingMessageType {
+    ModalClosed = 1,
+    PostMessageFromFrame = 2,
+    FrameLoaded = 3
+}
+export interface ModalIncomingMessage {
+    'id': string;
+    't': ModalIncomingMessageType;
+    'data'?: any;
+}
+export declare abstract class Modal {
+    protected readonly client: EditorClient;
+    private readonly config;
+    private static nextId;
+    private id;
+    private static modalMessageActionNamePrefix;
+    private messageActionName;
+    private visible;
+    constructor(client: EditorClient, config: ModalConfig);
+    static isMessageActionName(name: string): boolean;
+    private hookMessages;
+    private unhookMessages;
+    sendMessage(data: JsonSerializable): void;
+    protected abstract messageFromFrame(message: any): void;
+    protected abstract frameLoaded(): void;
+    show(): void;
+    hide(): void;
+}

package/out/ui/modal.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = exports.ModalIncomingMessageType = void 0;
+var ModalIncomingMessageType;
+(function (ModalIncomingMessageType) {
+    ModalIncomingMessageType[ModalIncomingMessageType["ModalClosed"] = 1] = "ModalClosed";
+    ModalIncomingMessageType[ModalIncomingMessageType["PostMessageFromFrame"] = 2] = "PostMessageFromFrame";
+    ModalIncomingMessageType[ModalIncomingMessageType["FrameLoaded"] = 3] = "FrameLoaded";
+})(ModalIncomingMessageType = exports.ModalIncomingMessageType || (exports.ModalIncomingMessageType = {}));
+class Modal {
+    constructor(client, config) {
+        this.client = client;
+        this.config = config;
+        this.id = ++Modal.nextId;
+        this.messageActionName = Modal.modalMessageActionNamePrefix + this.id;
+        this.visible = false;
+    }
+    static isMessageActionName(name) {
+        return name.startsWith(Modal.modalMessageActionNamePrefix);
+    }
+    hookMessages() {
+        this.client.registerAction(this.messageActionName, (message) => {
+            switch (message['t']) {
+                case ModalIncomingMessageType.ModalClosed:
+                    this.unhookMessages();
+                    this.visible = false;
+                    break;
+                case ModalIncomingMessageType.PostMessageFromFrame:
+                    this.messageFromFrame(message['data']);
+                    break;
+                case ModalIncomingMessageType.FrameLoaded:
+                    this.frameLoaded();
+                    break;
+            }
+        });
+    }
+    unhookMessages() {
+        this.client.deleteAction(this.messageActionName);
+    }
+    sendMessage(data) {
+        if (this.visible) {
+            this.client.sendCommand("suim" /* SendUIMessage */, {
+                'n': this.messageActionName,
+                'd': data,
+            });
+        }
+    }
+    show() {
+        if (!this.visible) {
+            this.hookMessages();
+            this.client.sendCommand("sm" /* ShowModal */, {
+                'n': this.messageActionName,
+                't': this.config.title,
+                'w': this.config.width,
+                'h': this.config.height,
+                'c': this.config.content,
+            });
+            this.visible = true;
+        }
+    }
+    hide() {
+        if (this.visible) {
+            this.client.sendCommand("hm" /* HideModal */, { 'n': this.messageActionName });
+        }
+    }
+}
+exports.Modal = Modal;
+Modal.nextId = 0;
+Modal.modalMessageActionNamePrefix = '__modal_message__';

package/out/ui/viewport.d.ts

@@ -0,0 +1,11 @@
+import { ItemProxy } from '../document/itemproxy';
+import { PageProxy } from '../document/pageproxy';
+import { EditorClient } from '../editorclient';
+export declare class Viewport {
+    private readonly client;
+    constructor(client: EditorClient);
+    getSelectedItems(deep?: boolean): ItemProxy[];
+    getCurrentPage(): PageProxy | undefined;
+    setCurrentPage(page: PageProxy): void;
+    focusCameraOnItems(items: ItemProxy[]): void;
+}

package/out/ui/viewport.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Viewport = void 0;
+const itemproxy_1 = require("../document/itemproxy");
+const pageproxy_1 = require("../document/pageproxy");
+const math_1 = require("../math");
+class Viewport {
+    constructor(client) {
+        this.client = client;
+    }
+    getSelectedItems(deep) {
+        const ids = this.client.sendCommand("gs" /* GetSelection */, { 'd': deep });
+        return ids
+            .map((id) => this.client.getElementProxy(id))
+            .filter((proxy) => proxy instanceof itemproxy_1.ItemProxy);
+    }
+    getCurrentPage() {
+        const id = this.client.sendCommand("gcp" /* GetCurrentPage */, undefined);
+        return id == null ? id : new pageproxy_1.PageProxy(id, this.client);
+    }
+    setCurrentPage(page) {
+        this.client.sendCommand("scp" /* SetCurrentPage */, page.id);
+    }
+    focusCameraOnItems(items) {
+        const bb = (0, math_1.combinedBoundingBox)(items.map((e) => e.getBoundingBox()));
+        if (bb) {
+            //TODO: A reasonable max zoom level (e.g. 200%)
+            this.client.sendCommand("av" /* AnimateViewport */, {
+                'bb': (0, math_1.padBox)(bb, 80),
+                'p': items[0].getPageId(),
+            });
+        }
+    }
+}
+exports.Viewport = Viewport;

package/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "lucid-extension-sdk",
+    "version": "0.0.0",
+    "description": "Utility classes for writing Lucid Software editor extensions",
+    "main": "out/index.js",
+    "types": "out/index.d.ts",
+    "author": "Lucid Software",
+    "license": "Apache-2.0",
+    "declaration": true,
+    "devDependencies": {
+        "@types/node": "^16.11.11",
+        "@bazel/typescript": "2.0.1",
+        "typescript": "4.3.5"
+    }
+}