@zcomponent/core 1.5.0-beta → 1.6.0-beta

package/css/socialshare.css

@@ -0,0 +1,102 @@
+.zee-social-share-button {
+	width: 50px;
+	height: 50px;
+	overflow: hidden;
+	padding: 8px;
+	background: rgba(0, 0, 0, 0.4);
+	border-radius: 50%;
+	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+	backdrop-filter: blur(5px);
+	-webkit-backdrop-filter: blur(5px);
+	border: 1px solid rgba(0, 0, 0, 0.11);
+}
+
+.zee-social-share-button img {
+	height: 100%;
+	object-fit: scale-down;
+}
+
+#zee-social-share-button-wrapper {
+	display: flex;
+	gap: 12px;
+	position: absolute;
+	left: 12px;
+	bottom: 12px;
+}
+
+#zee-social-share-close-wrapper {
+	display: flex;
+	position: absolute;
+	top: 12px;
+	left: 12px;
+}
+
+.zee-social-share-button:active,
+.zee-social-share-button.touch {
+	background: rgba(0, 0, 0, 0.7);
+}
+
+.zee-photo-button {
+	width: 100px;
+	bottom: 5%;
+	height: 100px;
+	left: 50%;
+	margin-top: -50px;
+	margin-left: -50px;
+	position: absolute;
+	touch-action: none;
+}
+
+.zee-social-share-circle {
+	position: absolute;
+	top: 12%;
+	left: 12%;
+	bottom: 12%;
+	right: 12%;
+	border-radius: 100%;
+	background-color: #ffffff;
+	opacity: 0;
+}
+
+.zee-social-share-ring {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	border-radius: 100%;
+	border: 0.5em solid #ffffff;
+	opacity: 0.8;
+}
+
+.zee-photo-button .zee-social-share-circle .zee-photo-button .zee-social-share-ring {
+	transition: all 0.1s;
+}
+
+.zee-photo-button:hover .zee-social-share-circle {
+	opacity: 1;
+}
+
+.zee-photo-button:active .zee-social-share-ring {
+	opacity: 1;
+}
+
+.zee-photo-button:active .zee-social-share-circle {
+	opacity: 0.5;
+}
+
+.social-share-div {
+	width: 100%;
+	height: 100%;
+	max-height: 100%;
+	position: fixed;
+	overflow: auto;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.zee-social-share-img {
+	width: 100%;
+	object-fit: cover;
+}

package/lib/behaviors/DownloadSnapshot.d.ts

@@ -0,0 +1,21 @@
+import { ActionBehavior, ActionBehaviorConstructorProps } from '../actionbehavior';
+import { Component } from '../component';
+import { ContextManager } from '../context';
+import { Event } from '../event';
+export type DownloadSnapshotProps = ActionBehaviorConstructorProps;
+/**
+ * Downloads the captured canvas as an image.
+ *
+ * @zbehavior
+ * @zicon download
+ * @zgroup Actions
+ */
+export declare class DownloadSnapshot extends ActionBehavior<DownloadSnapshotProps> {
+    /** @zui */
+    onSave: Event<[]>;
+    constructor(contextManager: ContextManager, instance: Component, props: DownloadSnapshotProps);
+    perform(): void;
+    private download;
+    /** @zprop */
+    preview(): void;
+}

package/lib/behaviors/DownloadSnapshot.js

@@ -0,0 +1,42 @@
+import { ActionBehavior } from '../actionbehavior';
+import { registerBehaviorRunAtDesignTime } from '../behavior';
+import { SnapshotContext } from '../contexts/snapshotContext';
+import { Event } from '../event';
+/**
+ * Downloads the captured canvas as an image.
+ *
+ * @zbehavior
+ * @zicon download
+ * @zgroup Actions
+ */
+export class DownloadSnapshot extends ActionBehavior {
+    constructor(contextManager, instance, props) {
+        super(contextManager, instance, props);
+        /** @zui */
+        this.onSave = new Event();
+        this.download = () => {
+            const snapshotContext = this.contextManager.get(SnapshotContext);
+            const dataUrl = snapshotContext.canvasImage.value;
+            const link = document.createElement('a');
+            link.href = dataUrl;
+            const file = snapshotContext.canvasFile.value;
+            link.download = file.name;
+            link.target = '_blank';
+            const url = URL.createObjectURL(file);
+            link.href = url;
+            link.style.display = 'none';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            this.onSave.emit();
+        };
+    }
+    perform() {
+        this.download();
+    }
+    /** @zprop */
+    preview() {
+        this.perform();
+    }
+}
+registerBehaviorRunAtDesignTime(DownloadSnapshot);

package/lib/behaviors/ShareSnapshot.d.ts

@@ -0,0 +1,21 @@
+import { ActionBehaviorConstructorProps, ActionBehavior } from '../actionbehavior';
+import { Component } from '../component';
+import { ContextManager } from '../context';
+import { Event } from '../event';
+export type ShareCanvasProps = ActionBehaviorConstructorProps;
+/**
+ * Shares the captured canvas using the Web Share API.
+ *
+ * @zbehavior
+ * @zicon share
+ * @zgroup Actions
+ */
+export declare class ShareSnapshot extends ActionBehavior<ShareCanvasProps> {
+    /** @zui */
+    onShare: Event<[]>;
+    constructor(contextManager: ContextManager, instance: Component, props: ShareCanvasProps);
+    perform(): void;
+    private share;
+    /** @zprop */
+    preview(): void;
+}

package/lib/behaviors/ShareSnapshot.js

@@ -0,0 +1,43 @@
+import { ActionBehavior } from '../actionbehavior';
+import { SnapshotContext } from '../contexts/snapshotContext';
+import { Event } from '../event';
+/**
+ * Shares the captured canvas using the Web Share API.
+ *
+ * @zbehavior
+ * @zicon share
+ * @zgroup Actions
+ */
+export class ShareSnapshot extends ActionBehavior {
+    constructor(contextManager, instance, props) {
+        super(contextManager, instance, props);
+        /** @zui */
+        this.onShare = new Event();
+        this.share = async () => {
+            const sctx = this.contextManager.get(SnapshotContext);
+            const snapshotContext = this.contextManager.get(SnapshotContext);
+            if (sctx.shareAPISupported.value === false) {
+                console.error('Web Share API not supported');
+                return;
+            }
+            try {
+                await navigator.share({
+                    title: snapshotContext.title.value,
+                    text: snapshotContext.text.value,
+                    files: [snapshotContext.canvasFile.value],
+                });
+                this.onShare.emit();
+            }
+            catch (err) {
+                console.error('Error - Sharing', err);
+            }
+        };
+    }
+    perform() {
+        this.share();
+    }
+    /** @zprop */
+    preview() {
+        this.perform();
+    }
+}

package/lib/behaviors/TakeSnapshot.d.ts

@@ -0,0 +1,53 @@
+import { ActionBehavior, ActionBehaviorConstructorProps } from '../actionbehavior';
+import { Component } from '../component';
+import { ContextManager } from '../context';
+import { Observable } from '../observable';
+export declare enum ImageFormat {
+    PNG = "png",
+    JPEG = "jpeg"
+}
+/**
+ * Captures the canvas as an image.
+ * This image can then be shared or downloaded using other behaviors.
+ *
+ * @zbehavior
+ * @zicon photo_camera
+ * @zgroup Actions
+ */
+export declare class TakeSnapshot extends ActionBehavior<ActionBehaviorConstructorProps> {
+    constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
+    /**
+     * The format of the image to capture.
+     * @zprop
+     * @zdefault jpeg
+     */
+    format: Observable<ImageFormat, never>;
+    /**
+     * The quality of the image to capture.
+     * @zprop
+     * @zdefault 0.92
+     */
+    quality: Observable<number, never>;
+    /**
+     * The name of the file to download.
+     * @zprop
+     * @zdefault canvas
+     */
+    fileName: Observable<string, never>;
+    /**
+     * The text to share.
+     * @zprop
+     * @zdefault ''
+     */
+    text: Observable<string, never>;
+    /**
+     * The title to share.
+     * @zprop
+     * @zdefault ''
+     */
+    title: Observable<string, never>;
+    private dataUrl;
+    perform(): void;
+    private capture;
+    preview(): void;
+}

package/lib/behaviors/TakeSnapshot.js

@@ -0,0 +1,87 @@
+import { ActionBehavior } from '../actionbehavior';
+import { registerBehaviorRunAtDesignTime } from '../behavior';
+import { useCanvas, useOnAfterRender } from '../contexts/canvascontext';
+import { SnapshotContext } from '../contexts/snapshotContext';
+import { Observable } from '../observable';
+export var ImageFormat;
+(function (ImageFormat) {
+    ImageFormat["PNG"] = "png";
+    ImageFormat["JPEG"] = "jpeg";
+})(ImageFormat || (ImageFormat = {}));
+/**
+ * Captures the canvas as an image.
+ * This image can then be shared or downloaded using other behaviors.
+ *
+ * @zbehavior
+ * @zicon photo_camera
+ * @zgroup Actions
+ */
+export class TakeSnapshot extends ActionBehavior {
+    constructor(contextManager, instance, props) {
+        super(contextManager, instance, props);
+        /**
+         * The format of the image to capture.
+         * @zprop
+         * @zdefault jpeg
+         */
+        this.format = new Observable(ImageFormat.JPEG, format => {
+            const ssctx = this.contextManager.get(SnapshotContext);
+            ssctx.fileType.value = format === ImageFormat.PNG ? 'image/png' : 'image/jpeg';
+        });
+        /**
+         * The quality of the image to capture.
+         * @zprop
+         * @zdefault 0.92
+         */
+        this.quality = new Observable(0.92, quality => {
+            const ssctx = this.contextManager.get(SnapshotContext);
+            ssctx.quality.value = quality;
+        });
+        /**
+         * The name of the file to download.
+         * @zprop
+         * @zdefault canvas
+         */
+        this.fileName = new Observable('canvas', fileName => {
+            const ssctx = this.contextManager.get(SnapshotContext);
+            ssctx.fileName.value = fileName;
+        });
+        /**
+         * The text to share.
+         * @zprop
+         * @zdefault ''
+         */
+        this.text = new Observable('', text => {
+            const ssctx = this.contextManager.get(SnapshotContext);
+            ssctx.text.value = text;
+        });
+        /**
+         * The title to share.
+         * @zprop
+         * @zdefault ''
+         */
+        this.title = new Observable('', title => {
+            const ssctx = this.contextManager.get(SnapshotContext);
+            ssctx.title.value = title;
+        });
+        this.dataUrl = '';
+        this.capture = () => {
+            const canvas = useCanvas(this.contextManager);
+            if (!canvas) {
+                console.error('No canvas found in context');
+                return;
+            }
+            const snapshotContext = this.contextManager.get(SnapshotContext);
+            const mimeType = snapshotContext.fileType.value === ImageFormat.PNG ? 'image/png' : 'image/jpeg';
+            this.dataUrl = canvas.toDataURL(mimeType, this.quality.value);
+            snapshotContext.canvasImage.value = this.dataUrl;
+        };
+    }
+    perform() {
+        useOnAfterRender(this.contextManager).next.then(this.capture);
+    }
+    preview() {
+        this.perform();
+    }
+}
+registerBehaviorRunAtDesignTime(TakeSnapshot);

package/lib/components/SnapshotUI.d.ts

@@ -0,0 +1,52 @@
+import { Observable } from '..';
+import { ImageFormat } from '../behaviors/TakeSnapshot';
+import { Component, ConstructorProps } from '../component';
+import { ContextManager } from '../context';
+import { Event } from '../event';
+/**
+ * @zcomponent
+ * @zgroup Util
+ * @zicon photo_camera
+ */
+export declare class SnapshotUI extends Component {
+    private captureButton;
+    private socialShareBehaviours;
+    private style;
+    private shareDiv;
+    /** @zui */
+    onSave: Event<[]>;
+    /** @zui */
+    onShare: Event<[]>;
+    /**
+     * The format of the image to capture.
+     * @zprop
+     * @zdefault jpeg
+     */
+    format: Observable<ImageFormat, never>;
+    /**
+     * The quality of the image to capture.
+     * @zprop
+     * @zdefault 0.92
+     */
+    quality: Observable<number, never>;
+    /**
+     * The name of the file to download.
+     * @zprop
+     * @zdefault canvas
+     */
+    fileName: Observable<string, never>;
+    /**
+     * The text to share.
+     * @zprop
+     * @zdefault ''
+     */
+    text: Observable<string, never>;
+    /**
+     * The title to share.
+     * @zprop
+     * @zdefault ''
+     */
+    title: Observable<string, never>;
+    constructor(contextManager: ContextManager, props: ConstructorProps);
+    dispose(): never;
+}

package/lib/components/SnapshotUI.js

@@ -0,0 +1,310 @@
+import { CanvasContext, Observable, registerLoadable } from '..';
+import { TakeSnapshot, ImageFormat } from '../behaviors/TakeSnapshot';
+import { DownloadSnapshot } from '../behaviors/DownloadSnapshot';
+import { ShareSnapshot } from '../behaviors/ShareSnapshot';
+import { Component } from '../component';
+import { SnapshotContext } from '../contexts/snapshotContext';
+import { Event } from '../event';
+const style_src = new URL('../../css/socialshare.css', import.meta.url).href;
+const back_src = new URL('../../assets/back.png', import.meta.url).href;
+const download_src = new URL('../../assets/download.png', import.meta.url).href;
+const share_src = new URL('../../assets/share.png', import.meta.url).href;
+/**
+ * @zcomponent
+ * @zgroup Util
+ * @zicon photo_camera
+ */
+export class SnapshotUI extends Component {
+    constructor(contextManager, props) {
+        super(contextManager, props);
+        this.style = document.createElement('link');
+        /** @zui */
+        this.onSave = new Event();
+        /** @zui */
+        this.onShare = new Event();
+        /**
+         * The format of the image to capture.
+         * @zprop
+         * @zdefault jpeg
+         */
+        this.format = new Observable(ImageFormat.JPEG, format => {
+            const ssctx = this.contextManager.get(SnapshotContext);
+            ssctx.fileType.value = format === ImageFormat.PNG ? 'image/png' : 'image/jpeg';
+        });
+        /**
+         * The quality of the image to capture.
+         * @zprop
+         * @zdefault 0.92
+         */
+        this.quality = new Observable(0.92, quality => {
+            const ssctx = this.contextManager.get(SnapshotContext);
+            ssctx.quality.value = quality;
+        });
+        /**
+         * The name of the file to download.
+         * @zprop
+         * @zdefault canvas
+         */
+        this.fileName = new Observable('canvas', fileName => {
+            const ssctx = this.contextManager.get(SnapshotContext);
+            ssctx.fileName.value = fileName;
+        });
+        /**
+         * The text to share.
+         * @zprop
+         * @zdefault ''
+         */
+        this.text = new Observable('', text => {
+            const ssctx = this.contextManager.get(SnapshotContext);
+            ssctx.text.value = text;
+        });
+        /**
+         * The title to share.
+         * @zprop
+         * @zdefault ''
+         */
+        this.title = new Observable('', title => {
+            const ssctx = this.contextManager.get(SnapshotContext);
+            ssctx.title.value = title;
+        });
+        this.socialShareBehaviours = new SocialShareBehaviors(contextManager, this);
+        this.socialShareBehaviours.onSave.addListener(() => {
+            this.onSave.emit();
+        });
+        this.socialShareBehaviours.onShare.addListener(() => {
+            this.onShare.emit();
+        });
+        const showShare = this.contextManager.get(SnapshotContext).shareAPISupported.value;
+        this.shareDiv = new ShareDivElement(showShare, async () => {
+            try {
+                this.socialShareBehaviours.share();
+            }
+            catch (err) {
+                console.error('Error sharing:', err);
+            }
+        });
+        this.captureButton = new CaptureButtonElement(this.contextManager);
+        registerLoadable(this.contextManager, new Promise(resolve => (this.style.onload = resolve)));
+        this.style.rel = 'stylesheet';
+        this.style.type = 'text/css';
+        this.style.href = style_src;
+        document.head.appendChild(this.style);
+        this.captureButton.onClick.addListener(() => {
+            this.socialShareBehaviours.capture();
+            this.shareDiv.show();
+        });
+        this.shareDiv.onDownload.addListener(() => {
+            this.socialShareBehaviours.download();
+        });
+        this.shareDiv.onClose.addListener(() => {
+            this.captureButton.show();
+        });
+    }
+    dispose() {
+        if (this.style.parentNode)
+            this.style.parentNode.removeChild(this.style);
+        this.socialShareBehaviours.dispose();
+        return super.dispose();
+    }
+}
+class SocialShareBehaviors {
+    constructor(contextManager, parent) {
+        this.capture_b = new TakeSnapshot(contextManager, parent, { event: 'social-share', runAtEditTime: false });
+        this.download_b = new DownloadSnapshot(contextManager, parent, { event: 'social-share', runAtEditTime: false });
+        this.share_b = new ShareSnapshot(contextManager, parent, { event: 'social-share', runAtEditTime: false });
+        parent.addBehavior(this.capture_b);
+        parent.addBehavior(this.download_b);
+        parent.addBehavior(this.share_b);
+    }
+    get onSave() {
+        return this.download_b.onSave;
+    }
+    get onShare() {
+        return this.share_b.onShare;
+    }
+    capture() {
+        this.capture_b.perform();
+    }
+    download() {
+        this.download_b.perform();
+    }
+    share() {
+        this.share_b.perform();
+    }
+    dispose() {
+        this.capture_b.dispose();
+        this.download_b.dispose();
+        this.share_b.dispose();
+    }
+}
+class CaptureButtonElement {
+    constructor(contextManager) {
+        this.contextManager = contextManager;
+        this.clickEvent = new Event();
+        const template = `
+      <div id="zee-photo-button" class="zee-photo-button">
+          <div id="zee-social-share-circle" class="zee-social-share-circle"></div>
+          <div id="zee-social-share-ring" class="zee-social-share-ring"></div>
+      </div>
+    `;
+        const temporaryElement = document.createElement('div');
+        temporaryElement.innerHTML = template.trim();
+        this.button = temporaryElement.firstChild;
+        // document.body.appendChild(this.button);
+        const canvasContext = this.contextManager.get(CanvasContext);
+        canvasContext.overlay.value.appendChild(this.button);
+        const circle = document.getElementById('zee-social-share-circle');
+        const ring = document.getElementById('zee-social-share-ring');
+        // Flag to track if click was cancelled
+        let isCancelled = false;
+        const handleClick = () => {
+            if (!isCancelled) {
+                this.clickEvent.emit();
+                this.hide();
+            }
+        };
+        const handleTouchStart = () => {
+            isCancelled = false;
+            circle.style.opacity = '1';
+            ring.style.opacity = '1';
+            document.addEventListener('touchmove', handleTouchMove);
+            document.addEventListener('touchend', handleTouchEnd);
+        };
+        const handleTouchMove = event => {
+            const touch = event.touches[0];
+            const rect = this.button.getBoundingClientRect();
+            // Check if touch position is outside the button's boundaries
+            if (touch.clientX < rect.left || touch.clientX > rect.right || touch.clientY < rect.top || touch.clientY > rect.bottom) {
+                isCancelled = true; // Cancel the click
+                circle.style.opacity = '0';
+                ring.style.opacity = '0.8';
+            }
+        };
+        const handleTouchEnd = (event) => {
+            event.preventDefault();
+            document.removeEventListener('touchmove', handleTouchMove);
+            document.removeEventListener('touchend', handleTouchEnd);
+            circle.style.opacity = '0';
+            ring.style.opacity = '0.8';
+            handleClick();
+        };
+        this.button.addEventListener('click', handleClick);
+        this.button.addEventListener('touchstart', handleTouchStart);
+        this.button.addEventListener('touchstart', () => {
+            circle.style.opacity = '1';
+            ring.style.opacity = '1';
+        });
+        this.button.addEventListener('touchend', () => {
+            circle.style.opacity = '0';
+            ring.style.opacity = '0.8';
+        });
+        document.body.appendChild(this.button);
+    }
+    get onClick() {
+        return this.clickEvent;
+    }
+    hide() {
+        this.button.style.display = 'none';
+    }
+    show() {
+        this.button.style.display = 'block';
+    }
+}
+class ShareDivElement {
+    constructor(withShareButton, shareFunction) {
+        this.shareFunction = shareFunction;
+        this.onDownload = new Event();
+        // public onShare = new Event();
+        this.onClose = new Event();
+        const template = `
+     <div id="social-share-div" class="social-share-div">
+            <img id="zee-social-share-img" class="zee-social-share-img">
+            <div id="zee-social-share-button-wrapper">
+                <button id="zee-save-button" class="zee-social-share-button">
+                    <img src="${download_src}">
+                </button>
+                ${withShareButton ? `<zee-social-share-button id="zee-share-button" class="button"><img src="${share_src}"></zee-social-share-button>` : ''}
+            </div>
+            <div id="zee-social-share-close-wrapper">
+                <button id="zee-close-button" class="zee-social-share-button">
+                    <img src="${back_src}">
+                </button>
+            </div>
+        </div>
+    `;
+        const temporaryElement = document.createElement('div');
+        temporaryElement.innerHTML = template.trim();
+        document.body.appendChild(temporaryElement.firstElementChild);
+        const div = document.getElementById('social-share-div');
+        div.style.display = 'none';
+        const saveButton = document.getElementById('zee-save-button');
+        const shareButton = document.getElementById('zee-share-button');
+        const closeButton = document.getElementById('zee-close-button');
+        const addEvents = (button, event) => {
+            let isCancelled = false;
+            button.addEventListener('click', () => {
+                if (event instanceof Event)
+                    event.emit();
+                else
+                    event();
+            });
+            button.addEventListener('mouseenter', () => {
+                button.classList.add('hover');
+            });
+            button.addEventListener('mousedown', () => {
+                button.classList.add('active');
+            });
+            button.addEventListener('mouseup', () => {
+                button.classList.remove('active');
+            });
+            button.addEventListener('touchstart', () => {
+                isCancelled = false;
+                button.classList.add('active');
+                document.addEventListener('touchmove', handleTouchMove);
+                document.addEventListener('touchend', handleTouchEnd);
+            });
+            const handleTouchMove = event => {
+                const touch = event.touches[0];
+                const rect = button.getBoundingClientRect();
+                if (touch.clientX < rect.left || touch.clientX > rect.right || touch.clientY < rect.top || touch.clientY > rect.bottom) {
+                    isCancelled = true;
+                    button.classList.remove('active');
+                    button.classList.remove('hover');
+                }
+            };
+            const handleTouchEnd = () => {
+                document.removeEventListener('touchmove', handleTouchMove);
+                document.removeEventListener('touchend', handleTouchEnd);
+                if (!isCancelled) {
+                    button.classList.remove('active');
+                    button.classList.remove('hover');
+                    if (event instanceof Event)
+                        event.emit();
+                    else
+                        event();
+                }
+            };
+        };
+        addEvents(saveButton, this.onDownload);
+        if (withShareButton) {
+            shareButton.addEventListener('click', event => {
+                event.preventDefault();
+                this.shareFunction();
+            });
+        }
+        addEvents(closeButton, this.onClose);
+        closeButton.addEventListener('click', () => {
+            div.style.display = 'none';
+        });
+    }
+    hide() {
+        const div = document.querySelector('#social-share-div');
+        document.body.style.overflow = 'auto';
+        div.style.display = 'none';
+    }
+    show() {
+        const div = document.querySelector('#social-share-div');
+        document.body.style.overflow = 'hidden';
+        div.style.display = 'block';
+    }
+}

package/lib/contexts/snapshotContext.d.ts

@@ -0,0 +1,19 @@
+import { Context, ContextManager } from '../context';
+import { Observable } from '../observable';
+/** @zcontext */
+export declare class SnapshotContext extends Context {
+    /** @zui */
+    canvasImage: Observable<string, never>;
+    /**@zui */
+    shareAPISupported: Observable<boolean, never>;
+    /** @zui */
+    canShare: Observable<boolean, never>;
+    canvasFile: Observable<File | null, never>;
+    fileName: Observable<string, never>;
+    text: Observable<string, never>;
+    title: Observable<string, never>;
+    fileType: Observable<string, never>;
+    quality: Observable<number, never>;
+    constructor(contextManager: ContextManager);
+    updateFile: () => Promise<void>;
+}

package/lib/contexts/snapshotContext.js

@@ -0,0 +1,33 @@
+import { Context } from '../context';
+import { Observable } from '../observable';
+/** @zcontext */
+export class SnapshotContext extends Context {
+    constructor(contextManager) {
+        super(contextManager, {});
+        /** @zui */
+        this.canvasImage = new Observable('');
+        /**@zui */
+        this.shareAPISupported = new Observable('share' in navigator);
+        /** @zui */
+        this.canShare = new Observable(false);
+        this.canvasFile = new Observable(null);
+        this.fileName = new Observable('canvas', fileName => this.updateFile());
+        this.text = new Observable('Check this out!');
+        this.title = new Observable('Canvas');
+        this.fileType = new Observable('image/png', fileType => this.updateFile());
+        this.quality = new Observable(0.92);
+        this.updateFile = async () => {
+            const response = await fetch(this.canvasImage.value);
+            const blob = await response.blob();
+            const format = this.fileType.value === 'image/png' ? 'png' : 'jpeg';
+            const fileName = `${this.fileName.value}.${format}`;
+            const file = new File([blob], fileName, { type: blob.type });
+            this.canShare.value = navigator?.canShare?.({
+                title: this.title.value,
+                files: [file],
+            });
+            this.canvasFile.value = file;
+        };
+        this.canvasImage.addListener(this.updateFile);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "1.5.0-beta",
+  "version": "1.6.0-beta",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -21,7 +21,8 @@
   "scripts": {
     "build": "rm -rf lib && tsc",
     "build-animation-tests": "tsc -p ./tsconfig.test.animation.json",
-    "test": "env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha --es-module-specifier-resolution=node"
+    "test": "env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha --es-module-specifier-resolution=node",
+    "watch": "tsc -w"
   },
   "author": "Zappar Limited",
   "license": "Proprietary",