Merge branch 'master' into release

Author: emilefokkema

README.md

@@ -23,7 +23,7 @@ var context = infiniteCanvas.getContext("2d");
 Include `InfiniteCanvas` in your web page:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/infinite-canvas.umd.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].4/dist/infinite-canvas.umd.cjs"></script>
 ```
 
 or install it using npm:

docs/.vitepress/config.ts

@@ -4,6 +4,8 @@ import { addExamples } from '../../examples/backend/vite-plugin'
 import addApi from './api-docs/serve-plugin'
 import replaceVersion from './replace-version'
 
+const exampleInfiniteCanvasPath = fileURLToPath(new URL('./theme/infinite-canvas-example/example-infinite-canvas', import.meta.url))
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "InfiniteCanvas",
@@ -49,7 +51,12 @@ export default defineConfig({
       }
     },
     plugins: [
-      addExamples({external: {publicPath: '/examples'}}),
+      addExamples({
+        external: {
+          publicPath: '/examples'
+        },
+        infiniteCanvasPath: exampleInfiniteCanvasPath
+      }),
       addApi(),
       replaceVersion()
     ]

docs/.vitepress/theme/constants.ts

@@ -1,6 +1,6 @@
 import type { InjectionKey } from "vue";
 import type { ExampleProject } from '../../../examples/shared/examples';
-import type { ExampleRegistry } from "./example-registry";
+import { ExampleInfiniteCanvasRegistry } from "./infinite-canvas-example/example-infinite-canvas-registry";
 
 export const exampleDataInjectionKey: InjectionKey<ExampleProject[]> = Symbol();
-export const exampleRegistryInjectionKey: InjectionKey<ExampleRegistry> = Symbol();
+export const exampleInfiniteCanvasRegistryInjectionKey: InjectionKey<ExampleInfiniteCanvasRegistry> = Symbol();

docs/.vitepress/theme/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

docs/.vitepress/theme/example-registry.ts

@@ -1,4 +1,4 @@
-<template>
+exampleInfiniteCanvasRegistryInjectionKeyExampleInfiniteCanvasRegistry<template>
     <div class="example-container language-infinite-canvas">
         <div class="iframe-container">
             <div 
@@ -15,10 +15,10 @@
 </template>
 
 <script setup lang="ts">
-import { inject, onMounted, ref, onBeforeUnmount } from 'vue'
+import { onMounted, ref, inject } from 'vue'
 import StackblitzButton from './StackblitzButton.vue'
-import { exampleRegistryInjectionKey } from './constants';
-import type { ExampleRegistry, ExamplePageInfiniteCanvasProxy } from './example-registry'
+import { exampleInfiniteCanvasRegistryInjectionKey } from './constants';
+import type { ExampleInfiniteCanvasRegistry } from './infinite-canvas-example/parent-example-infinite-canvas-registry';
 
 const props = defineProps({
     exampleId: {
@@ -36,22 +36,12 @@ const props = defineProps({
         default: 250
     }
 })
-const registry = inject(exampleRegistryInjectionKey) as ExampleRegistry
+const registry = inject(exampleInfiniteCanvasRegistryInjectionKey) as ExampleInfiniteCanvasRegistry
 const iFrame = ref<HTMLIFrameElement | null>(null)
 const overlayActive = ref<boolean>(false);
 const overlayDisappearing = ref<boolean>(false)
 const overlayMessage = ref<string | null>(null)
 
-function onExampleInfiniteCanvasInitialized(source: MessageEventSource, proxy: ExamplePageInfiniteCanvasProxy): void{
-    const iFrameValue = iFrame.value;
-    if(!iFrameValue || source !== iFrameValue.contentWindow){
-        return;
-    }
-    proxy.disableGreedyGestureHandling();
-    proxy.addWheelIgnoredListener(onWheelIgnored)
-    proxy.addTouchIgnoredListener(onTouchIgnored)
-}
-
 async function displayOverlay(message: string): Promise<void>{
     if(overlayActive.value){
         return;
@@ -65,25 +55,17 @@ async function displayOverlay(message: string): Promise<void>{
     overlayDisappearing.value = false;
 }
 
-function onWheelIgnored(): void{
-    displayOverlay('Use Ctrl + scroll to zoom');
-}
-
-function onTouchIgnored(): void{
-    displayOverlay('Use two fingers to move')
-}
 onMounted(() => {
     const iFrameValue = iFrame.value;
     if(!iFrameValue){
         return;
     }
     const url = new URL(`/examples/${props.exampleId}/`, location.href).toString();
-    registry.addInitializedListener(onExampleInfiniteCanvasInitialized);
+    const subscription = registry.subscribeToExampleInfiniteCanvases(iFrameValue);
+    subscription.wheelIgnored.subscribe(() => displayOverlay('Use Ctrl + scroll to zoom'))
+    subscription.touchIgnored.subscribe(() => displayOverlay('Use two fingers to move'))
     iFrameValue.src = url;
 })
-onBeforeUnmount(() => {
-    registry.removeInitializedListener(onExampleInfiniteCanvasInitialized, iFrame.value ? iFrame.value.contentWindow || undefined : undefined);
-})
 </script>
 
 <style scoped lang="css">

docs/.vitepress/theme/example.vue

@@ -2,11 +2,11 @@
 import Theme from 'vitepress/theme'
 import MyLayout from './my-layout.vue';
 import type { EnhanceAppContext } from 'vitepress'
-import Example from './example.vue';
+import Example from './example.vue'
 import { data } from '../shared/examples.data';
-import { exampleDataInjectionKey, exampleRegistryInjectionKey } from './constants';
-import { createExampleRegistry } from './example-registry'
+import { exampleDataInjectionKey, exampleInfiniteCanvasRegistryInjectionKey } from './constants';
 import './style.css'
+import { ExampleInfiniteCanvasRegistry } from './infinite-canvas-example/example-infinite-canvas-registry';
 
 export default {
   extends: Theme,
@@ -15,6 +15,6 @@ export default {
     // ...
     app.component('inf-example', Example);
     app.provide(exampleDataInjectionKey, data);
-    app.provide(exampleRegistryInjectionKey, createExampleRegistry())
+    app.provide(exampleInfiniteCanvasRegistryInjectionKey, ExampleInfiniteCanvasRegistry.create())
   }
 }

docs/.vitepress/theme/index.ts

@@ -0,0 +1,4 @@
+export const EXAMPLE_INFINITE_CANVAS_INITIALIZED = 'EXAMPLE_INFINITE_CANVAS_INITIALIZED'
+export const EXAMPLE_INFINITE_CANVAS_REGISTERED = 'EXAMPLE_INFINITE_CANVAS_REGISTERED'
+export const WHEEL_IGNORED = 'WHEEL_IGNORED'
+export const TOUCH_IGNORED = 'TOUCH_IGNORED'

docs/.vitepress/theme/infinite-canvas-example/constants.ts

@@ -0,0 +1,57 @@
+import { fromEvent, filter, map, mergeMap, type Observable } from 'rxjs'
+import { EXAMPLE_INFINITE_CANVAS_INITIALIZED, EXAMPLE_INFINITE_CANVAS_REGISTERED, WHEEL_IGNORED, TOUCH_IGNORED } from './constants'
+
+class ExampleInfiniteCanvasConnection{
+    public readonly wheelIgnored: Observable<void>
+    public readonly touchIgnored: Observable<void>
+    constructor(portMessages: Observable<MessageEvent>){
+        this.wheelIgnored = portMessages.pipe(
+            filter(({data}) => data.type === WHEEL_IGNORED),
+            map(() => {})
+        )
+        this.touchIgnored = portMessages.pipe(
+            filter(({data}) => data.type === TOUCH_IGNORED),
+            map(() => {})
+        )
+    }
+    public static create(port: MessagePort): ExampleInfiniteCanvasConnection{
+        const portMessages = fromEvent<MessageEvent>(port, 'message')
+        port.start();
+        port.postMessage({type: EXAMPLE_INFINITE_CANVAS_REGISTERED})
+        return new ExampleInfiniteCanvasConnection(portMessages);
+    }
+}
+
+export class ExampleInfiniteCanvasesSubscription{
+    public readonly wheelIgnored: Observable<void>
+    public readonly touchIgnored: Observable<void>
+    constructor(connections: Observable<ExampleInfiniteCanvasConnection>){
+        this.wheelIgnored = connections.pipe(mergeMap(c => c.wheelIgnored))
+        this.touchIgnored = connections.pipe(mergeMap(c => c.touchIgnored))
+    }
+
+    public static create(windowMessages: Observable<MessageEvent>, iFrame: HTMLIFrameElement): ExampleInfiniteCanvasesSubscription{
+        const iFrameWindow = iFrame.contentWindow
+        const connectionsFromIFrame = windowMessages.pipe(
+            filter(e => e.source === iFrameWindow && e.data && e.data.type === EXAMPLE_INFINITE_CANVAS_INITIALIZED),
+            map(e => ExampleInfiniteCanvasConnection.create(e.ports[0])))
+
+        return new ExampleInfiniteCanvasesSubscription(connectionsFromIFrame);
+    }
+}
+
+export class ExampleInfiniteCanvasRegistry{
+    constructor(private readonly windowMessages: Observable<MessageEvent>){
+
+    }
+
+    public subscribeToExampleInfiniteCanvases(iFrame: HTMLIFrameElement): ExampleInfiniteCanvasesSubscription{
+        return ExampleInfiniteCanvasesSubscription.create(this.windowMessages, iFrame);
+    }
+    public static create(): ExampleInfiniteCanvasRegistry | undefined{
+        if(typeof window === 'undefined' || !window){
+            return undefined;
+        }
+        return new ExampleInfiniteCanvasRegistry(fromEvent<MessageEvent>(window, 'message'));
+    }
+}

docs/.vitepress/theme/infinite-canvas-example/example-infinite-canvas-registry.ts

@@ -0,0 +1,59 @@
+import { fromEvent, filter, firstValueFrom } from 'rxjs'
+import InfiniteCanvas, { Units } from 'infinite-canvas'
+import { 
+    EXAMPLE_INFINITE_CANVAS_INITIALIZED,
+    EXAMPLE_INFINITE_CANVAS_REGISTERED,
+    TOUCH_IGNORED,
+    WHEEL_IGNORED
+} from './constants';
+
+class ParentConnection{
+    constructor(private readonly port: MessagePort){}
+
+    public notifyWheelIgnored(): void{
+        this.port.postMessage({type: WHEEL_IGNORED})
+    }
+    public notifyTouchIgnored(): void{
+        this.port.postMessage({type: TOUCH_IGNORED})
+    }
+}
+
+function connectToParent(): Promise<ParentConnection | undefined>{
+    return new Promise((res) => {
+        const parent = window.parent;
+        if(!parent){
+            res(undefined)
+        }
+        const channel = new MessageChannel();
+        const port = channel.port2;
+        const portMessages = fromEvent<MessageEvent>(port, 'message')
+        firstValueFrom(portMessages.pipe(
+            filter(({data}) => data.type === EXAMPLE_INFINITE_CANVAS_REGISTERED),
+        )).then(() => res(new ParentConnection(port)))
+        port.start()
+        parent.postMessage({type: EXAMPLE_INFINITE_CANVAS_INITIALIZED}, location.origin, [channel.port1]);
+    })
+}
+
+export default class ExampleInfiniteCanvas extends InfiniteCanvas{
+    constructor(canvasEl: HTMLCanvasElement){
+        super(canvasEl, {units: Units.CSS})
+        const { width, height } = canvasEl.getBoundingClientRect();
+        canvasEl.width = width * devicePixelRatio;
+        canvasEl.height = height * devicePixelRatio;
+        connectToParent().then((connection) => {
+            if(!connection){
+                return;
+            }
+            const wheelIgnoredSubscription = fromEvent(this, 'wheelignored').subscribe((e) => {
+                e.preventDefault();
+                connection.notifyWheelIgnored();
+            })
+            const touchIgnoredSubscription = fromEvent(this, 'touchignored').subscribe((e) => {
+                e.preventDefault();
+                connection.notifyTouchIgnored();
+            })
+        });
+    }
+}
+export { Units }

docs/.vitepress/theme/infinite-canvas-example/example-infinite-canvas.ts

@@ -28,15 +28,14 @@ export async function addExample(request: CreateExampleRequest): Promise<string>
     const title = request.title.trim();
     const id = createExampleId(title, dirs);
     const indexHtml = `<canvas id='canvas'></canvas>`;
-    const indexJs = `import InfiniteCanvas from './example-infinite-canvas.js';\nimport './index.css';\n\nconst infCanvas = new InfiniteCanvas(document.getElementById('canvas'))`;
+    const indexJs = `import InfiniteCanvas from 'ef-infinite-canvas';\nimport './index.css';\n\nconst infCanvas = new InfiniteCanvas(document.getElementById('canvas'))`;
     const indexCss = `#canvas{border: 1px solid #000}`;
     const exampleJson: ExampleJson = {
         title,
         files: {
             'index.html': 'index.html',
             'index.js': 'index.js',
-            'index.css': 'index.css',
-            'example-infinite-canvas.js': '../example-infinite-canvas.js'
+            'index.css': 'index.css'
         }
     }
     const exampleDirName = path.resolve(catalogPath, id);