#8536 basic setup

Author: tobiu

apps/portal/canvas.mjs

@@ -0,0 +1,5 @@
+import CanvasHelper from './canvas/Helper.mjs';
+
+export const onStart = () => {
+    // Canvas Helper available inside the Canvas worker
+};

apps/portal/canvas/Helper.mjs

@@ -0,0 +1,40 @@
+import Base from '../../../src/core/Base.mjs';
+
+/**
+ * @class Portal.canvas.Helper
+ * @extends Neo.core.Base
+ * @singleton
+ */
+class Blackboard extends Base {
+    static config = {
+        /**
+         * @member {String} className='Portal.canvas.Helper'
+         * @protected
+         */
+        className: 'Portal.canvas.Helper',
+        /**
+         * Remote method access
+         * @member {Object} remote
+         * @protected
+         */
+        remote: {
+            app: [
+                'importTicketCanvas'
+            ]
+        },
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }
+
+    /**
+     *
+     */
+    importTicketCanvas() {
+        import('./TicketCanvas.mjs')
+    }
+}
+
+export default Neo.setupClass(Blackboard);

apps/portal/canvas/TicketCanvas.mjs

@@ -0,0 +1,40 @@
+import Base from '../../../src/core/Base.mjs';
+
+/**
+ * @class Portal.canvas.TicketCanvas
+ * @extends Neo.core.Base
+ * @singleton
+ */
+class TicketCanvas extends Base {
+    static config = {
+        /**
+         * @member {String} className='Portal.canvas.TicketCanvas'
+         * @protected
+         */
+        className: 'Portal.canvas.TicketCanvas',
+        /**
+         * Remote method access
+         * @member {Object} remote
+         * @protected
+         */
+        remote: {
+            app: []
+        },
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }
+
+    /**
+     * @member {String|null} canvasId=null
+     */
+    canvasId = null
+    /**
+     * @member {Object} canvasSize=null
+     */
+    canvasSize = null
+}
+
+export default Neo.setupClass(TicketCanvas);

apps/portal/neo-config.json

@@ -6,6 +6,7 @@
     "remotesApiUrl"   : "remotes-api.json",
     "themes"          : ["neo-theme-neo-light", "neo-theme-light", "neo-theme-dark"],
     "useAiClient"     : true,
+    "useCanvasWorker" : true,
     "useSharedWorkers": true,
     "useServiceWorker": "dist/production",
 

apps/portal/view/news/tickets/TimelineCanvas.mjs

@@ -0,0 +1,69 @@
+import Canvas from '../../../../../src/component/Canvas.mjs';
+
+/**
+ * @class AgentOS.view.TimelineCanvas
+ * @extends Neo.component.Canvas
+ */
+class TimelineCanvas extends Canvas {
+    static config = {
+        /**
+         * @member {String} className='AgentOS.view.TimelineCanvas'
+         * @protected
+         */
+        className: 'AgentOS.view.TimelineCanvas',
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {tag: 'div', cls: ['neo-ticket-timeline-wrapper'], style: {width: '100%', height: '100%'}, cn: [
+            {tag: 'canvas', style: {width: '100%', height: '100%'}}
+        ]}
+    }
+
+    /**
+     * Triggered after the offscreenRegistered config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    async afterSetOffscreenRegistered(value, oldValue) {
+        if (value) {
+            let me = this;
+
+            // Direct Remote Method Access call
+            // The namespace AgentOS.canvas.Blackboard is auto-generated in this worker
+            // by the RemoteMethodAccess mixin when the Canvas worker registers it.
+            await Portal.canvas.TicketCanvas.initGraph({canvasId: me.getCanvasId(), windowId: me.windowId});
+
+            await me.updateSize()
+        }
+    }
+
+    /**
+     * Override to return the inner canvas ID
+     */
+    getCanvasId() {
+        return this.vdom.cn[0].id;
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onDomResize(data) {
+        super.onDomResize(data);
+        this.updateSize(data.contentRect)
+    }
+
+    async updateSize(rect) {
+        let me = this;
+
+        if (!rect || rect.width === 0 || rect.height === 0) {
+            rect = await me.waitForDomRect({id: me.getCanvasId()})
+        }
+
+        // todo
+        await Portal.canvas.TicketCanvas.updateSize({width: rect.width, height: rect.height})
+    }
+}
+
+export default Neo.setupClass(TimelineCanvas);