chore(web): started work on the web-implementation

Author: IjzerenHein

web/RNSharedElementContent.ts

@@ -0,0 +1,9 @@
+import { Rect } from "./Rect";
+
+export class RNSharedElementContent {
+    public readonly size: Rect;
+
+    constructor(size: Rect) {
+        this.size = size;
+    }
+}

web/RNSharedElementNode.ts

@@ -0,0 +1,80 @@
+import { RNSharedElementStyle } from "./RNSharedElementStyle";
+import { RNSharedElementContent } from "./RNSharedElementContent";
+
+export type RNSharedElementNodeStyleCallback = (style: RNSharedElementStyle, node: RNSharedElementNode) => void;
+export type RNSharedElementNodeContentCallback = (content: RNSharedElementContent, node: RNSharedElementNode) => void;
+
+export class RNSharedElementNode {
+    public readonly domNode: Element;
+    public readonly ancestorDomNode: Element;
+    public readonly isParent: boolean;
+    private hideRefCount: number = 0;
+    private refCount: number = 1;
+    private styleCache: RNSharedElementStyle | null = null;
+    private styleCallbacks: RNSharedElementNodeStyleCallback[] | null = null;
+    private contentCache: RNSharedElementContent | null = null;
+    private contentCallbacks: RNSharedElementNodeContentCallback[] | null = null;
+    
+    constructor(domNode: Element, isParent: boolean, ancestorDomNode: Element) {
+        this.domNode = domNode;
+        this.isParent = isParent;
+        this.ancestorDomNode = ancestorDomNode;
+    }
+
+    addRef() {
+        return ++this.refCount;
+    }
+
+    releaseRef() {
+        return --this.refCount;
+    }
+
+    addHideRef() {
+        this.hideRefCount++;
+        if (this.hideRefCount === 1) {
+            //mHideAlpha = mView.getAlpha();
+            //mView.setAlpha(0);
+        }
+    }
+
+    releaseHideRef() {
+        this.hideRefCount--;
+        if (this.hideRefCount == 0) {
+            //mView.setAlpha(mHideAlpha);
+        }
+    }
+
+    requestStyle(callback: RNSharedElementNodeStyleCallback) {
+        if (this.styleCache) {
+            callback(this.styleCache, this);
+            return;
+        }
+        this.styleCallbacks = this.styleCallbacks || [];
+        this.styleCallbacks.push(callback);
+        if (!this.fetchInitialStyle()) {
+            //startRetryLoop();
+        }
+    }
+
+    private fetchInitialStyle(): boolean {
+         // TODO
+         return false;
+    }
+
+    requestContent(callback: RNSharedElementNodeContentCallback) {
+        if (this.contentCache) {
+            callback(this.contentCache, this);
+            return;
+        }
+        this.contentCallbacks = this.contentCallbacks || [];
+        this.contentCallbacks.push(callback);
+        if (!this.fetchInitialContent()) {
+            //startRetryLoop();
+        }
+    }
+
+    private fetchInitialContent(): boolean {
+         // TODO
+         return false;
+    }
+}

web/RNSharedElementNodeManager.ts

@@ -0,0 +1,24 @@
+import { RNSharedElementNode } from "./RNSharedElementNode";
+
+export class RNSharedElementNodeManager {
+    private nodes = new Map<Element, RNSharedElementNode>();
+
+    acquire(domNode: Element, isParent: boolean, ancestorDomNode: Element): RNSharedElementNode {
+        let node = this.nodes.get(domNode);
+        if (node) {
+            node.addRef();
+            return node;
+        }
+        node = new RNSharedElementNode(domNode, isParent, ancestorDomNode);
+        this.nodes.set(domNode, node);
+        return node;
+    }
+
+    release(node: RNSharedElementNode) {
+        const refCount = node.releaseRef();
+        if (!refCount) {
+            this.nodes.delete(node.domNode);
+        }
+        return refCount;
+    }
+}

web/RNSharedElementStyle.ts

@@ -0,0 +1,16 @@
+
+
+export class RNSharedElementStyle {
+    
+    constructor() {
+    }
+
+    addHideRef() {
+        // ToDO
+    }
+
+    releaseHideRef() {
+        // ToDO
+    }
+
+}

web/RNSharedElementTransition.ts

@@ -0,0 +1,21 @@
+import { RNSharedElementTransitionItemType } from './types';
+import { RNSharedElementTransitionItem } from './RNSharedElementTransitionItem';
+import { RNSharedElementNode } from './RNSharedElementNode';
+import { RNSharedElementNodeManager } from './RNSharedElementNodeManager';
+
+export class RNSharedElementTransition {
+    private items: RNSharedElementTransitionItem[];
+    
+    constructor(nodeManager: RNSharedElementNodeManager) {
+        this.items = [
+            new RNSharedElementTransitionItem(nodeManager, 'start'),
+            new RNSharedElementTransitionItem(nodeManager, 'end'),
+        ]
+    }
+
+    setItemNode(itemType: RNSharedElementTransitionItemType, node: RNSharedElementNode) {
+        this.items[itemType].node = node;
+    }
+
+
+}

web/RNSharedElementTransitionItem.ts

@@ -0,0 +1,55 @@
+import { RNSharedElementNodeManager } from './RNSharedElementNodeManager';
+import { RNSharedElementNode } from './RNSharedElementNode';
+import { RNSharedElementContent } from './RNSharedElementContent';
+import { RNSharedElementStyle } from './RNSharedElementStyle';
+
+export class RNSharedElementTransitionItem {
+    private _hidden: boolean = false;
+    public readonly name: string;
+    private _node: RNSharedElementNode | null = null;
+    private _nodeManager: RNSharedElementNodeManager;
+    public needsStyle: boolean = false;
+    public style: RNSharedElementStyle | null = null;
+    public needsContent: boolean = false;
+    public content: RNSharedElementContent | null = null;
+
+    constructor(nodeManager: RNSharedElementNodeManager, name: string) {
+        this._nodeManager = nodeManager;
+        this.name = name;
+    }
+
+    get node(): RNSharedElementNode | null {
+        return this._node;
+    }
+    set node(node: RNSharedElementNode | null) {
+        if (this._node === node) {
+            if (node != null) this._nodeManager.release(node);
+            return;
+        }
+        if (this._node != null) {
+            if (this._hidden) this._node.releaseHideRef();
+            this._nodeManager.release(this._node);
+        }
+        this._node = node;
+        this._hidden = false;
+        this.needsStyle = node != null;
+        this.style = null;
+        this.needsContent = (node != null);
+        this.content = null;
+    }
+
+    get hidden(): boolean {
+        return this._hidden;
+    }
+    set hidden(hidden: boolean) {
+        if (this._hidden == hidden) return;
+        this._hidden = hidden;
+        if (!this._node) return;
+        if (hidden) {
+            this._node.addHideRef();
+        } else {
+            this._node.releaseHideRef();
+        }
+    }
+
+}

web/RNSharedElementView.ts

@@ -0,0 +1,6 @@
+export class Rect {
+    public x: number = 0;
+    public y: number = 0;
+    public width: number = 0;
+    public height: number = 0;
+}

web/Rect.ts

@@ -0,0 +1 @@
+Nothing working here yet, come back later

web/WORK_IN_PROGRESS.md

@@ -0,0 +1,31 @@
+export enum RNSharedElementTransitionItemType {
+    Start = 0,
+    End = 1
+};
+
+export enum RNSharedElementAnimation {
+    Move = 0,
+    Fade = 1,
+    FadeIn = 2,
+    FadeOut = 3
+}
+
+export enum RNSharedElementResize {
+    Auto = 0,
+    Stretch = 1,
+    Clip = 2,
+    None = 3
+}
+
+export enum RNSharedElementAlign {
+    Auto = 0,
+    LEFT_TOP = 1,
+    LEFT_CENTER = 2,
+    LEFT_BOTTOM = 3 ,
+    RIGHT_TOP = 4,
+    RIGHT_CENTER = 5,
+    RIGHT_BOTTOM = 6,
+    CENTER_TOP = 7,
+    CENTER_CENTER = 8,
+    CENTER_BOTTOM = 9
+}