From ad659bc4de37e2b32c81471922d20b76b968ad92 Mon Sep 17 00:00:00 2001
From: Oscar Lorentzon <oscar.lorentzon@gmail.com>
Date: Sat, 12 Mar 2016 08:25:26 +0100
Subject: [PATCH] Render adaptable div according to offset.

Render adaptable div within domRenderer element.
Hide overflow to avoid showing things outside of viewer
in fill mode.
Use offset to set position of adaptable element.
Clear adaptable render when clearing.
---
 src/render/DOMRenderer.ts     | 46 ++++++++++++++++++++++++++++++++++-
 styles/DirectionComponent.css |  1 +
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/render/DOMRenderer.ts b/src/render/DOMRenderer.ts
index 65665d4b..26a111ab 100644
--- a/src/render/DOMRenderer.ts
+++ b/src/render/DOMRenderer.ts
@@ -50,6 +50,7 @@ export class DOMRenderer {
     private _vPatch$: rx.Observable<vd.VPatch[]>;
     private _vNode$: rx.Observable<vd.VNode>;
     private _render$: rx.Subject<any> = new rx.Subject<any>();
+    private _resizableRender$: rx.Subject<IVNodeHash> = new rx.Subject<IVNodeHash>();
 
     constructor (element: HTMLElement, renderService: RenderService, currentFrame$: rx.Observable<IFrame>) {
         this._renderService = renderService;
@@ -149,6 +150,44 @@ export class DOMRenderer {
                 })
             .subscribe(this._resizableOperation$);
 
+        this._resizableRender$
+            .scan<IVNodeHashes>(
+                (vNodeHashes: IVNodeHashes, vNodeHash: IVNodeHash): IVNodeHashes => {
+                    if (vNodeHash.vnode == null) {
+                        delete vNodeHashes[vNodeHash.name];
+                    } else {
+                        vNodeHashes[vNodeHash.name] = vNodeHash.vnode;
+                    }
+                    return vNodeHashes;
+                },
+                {})
+            .combineLatest(
+                this._offset$,
+                (vNodeHashes: IVNodeHashes, offset: IOffset): [IVNodeHashes, IOffset] => {
+                    return [vNodeHashes, offset];
+                })
+            .map<IVNodeHash>(
+                (vo: [IVNodeHashes, IOffset]): IVNodeHash => {
+                    let vNodes: vd.VNode[] = _.values(vo[0]);
+                    let offset: IOffset = vo[1];
+
+                    let properties: vd.createProperties = {
+                        style: {
+                            bottom: offset.bottom + "px",
+                            left: offset.left + "px",
+                            position: "absolute",
+                            right: offset.right + "px",
+                            top: offset.top + "px",
+                        },
+                    };
+
+                    return {
+                        name: "resizableDomRenderer",
+                        vnode: vd.h("div.resizableDomRenderer", properties, vNodes),
+                    };
+                })
+            .subscribe(this._render$);
+
         this._vNode$ = this._render$
             .scan<IVNodeHashes>(
             (vNodeHashes: IVNodeHashes, vNodeHash: IVNodeHash): IVNodeHashes => {
@@ -194,8 +233,13 @@ export class DOMRenderer {
         return this._render$;
     }
 
+    public get renderResizable$(): rx.Subject<any> {
+        return this._resizableRender$;
+    }
+
     public clear(name: string): void {
-        return this._render$.onNext({name: name, vnode: null});
+        this._resizableRender$.onNext({name: name, vnode: null});
+        this._render$.onNext({name: name, vnode: null});
     }
 }
 
diff --git a/styles/DirectionComponent.css b/styles/DirectionComponent.css
index 6c5684b8..0a08c078 100644
--- a/styles/DirectionComponent.css
+++ b/styles/DirectionComponent.css
@@ -3,6 +3,7 @@
     height: 100%;
     position: absolute;
     z-index: 10;
+    overflow: hidden;
 }
 
 .Directions {