icon fixes

2 files changed, 49 insertions, 31 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 8af8a1184..f78bf9ff8 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -10,7 +10,7 @@
     left:0;
     display: grid;
     grid-template-rows: 20px 8px 1fr 8px;
-    grid-template-columns: 8px 8px 1fr 8px 8px;
+    grid-template-columns: 8px 16px 1fr 8px 8px;
     pointer-events: none;
 
     #documentDecorations-centerCont {
@@ -88,6 +88,11 @@
     pointer-events: all;
     text-align: center;
     cursor: pointer;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: $MINIMIZED_ICON_SIZE;
+    height: $MINIMIZED_ICON_SIZE;
 }
 .documentDecorations-background {
     background: lightblue;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 6da1ea52e..cfb9befd5 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -15,6 +15,7 @@ import { MINIMIZED_ICON_SIZE } from "../views/globalCssVariables.scss";
 import { DocumentView } from "./nodes/DocumentView";
 import { LinkMenu } from "./nodes/LinkMenu";
 import React = require("react");
+import { CompileScript } from "../util/Scripting";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -37,7 +38,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
     @observable private _hidden = false;
     @observable private _opacity = 1;
     @observable private _dragging = false;
-    @observable private _iconifying: number[] = [];
+    @observable private _iconifying = false;
 
 
     constructor(props: Readonly<{}>) {
@@ -177,18 +178,13 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             document.removeEventListener("pointerup", this.onCloseUp);
         }
     }
-    _minimizeDownX = 0;
-    _minimizeDownY = 0;
-    _minimizeDownOffX = 0;
-    _minimizeDownOffY = 0;
+    _downX = 0;
+    _downY = 0;
     onMinimizeDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
         if (e.button === 0) {
-            this._minimizeDownX = e.clientX;
-            this._minimizeDownY = e.clientY;
-            let xf = SelectionManager.SelectedDocuments()[0].props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-            this._minimizeDownOffX = xf[0] - e.clientX;
-            this._minimizeDownOffY = xf[1] - e.clientY;
+            this._downX = e.pageX;
+            this._downY = e.pageY;
             document.removeEventListener("pointermove", this.onMinimizeMove);
             document.addEventListener("pointermove", this.onMinimizeMove);
             document.removeEventListener("pointerup", this.onMinimizeUp);
@@ -198,25 +194,36 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
     @action
     onMinimizeMove = (e: PointerEvent): void => {
         e.stopPropagation();
-        let dx = e.clientX - this._minimizeDownX;
-        let dy = e.clientY - this._minimizeDownY;
-        if (Math.abs(dx) > 4 || Math.abs(dy) > 4)
-            this._iconifying = [e.pageX - Number(MINIMIZED_ICON_SIZE) / 2 + 7, e.pageY - Number(MINIMIZED_ICON_SIZE) / 2 + 4];
+        let dx = e.pageX - this._downX;
+        let dy = e.pageY - this._downY;
+        if (Math.abs(dx) > 4 || Math.abs(dy) > 4) {
+            this._iconifying = true;
+            let xf = SelectionManager.SelectedDocuments()[0].props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+            let dx = e.pageX - xf[0];
+            let dy = e.pageY - xf[1];
+            if (Math.abs(dx) < 20 && Math.abs(dy) < 20)
+                dx = dy = 0;
+            SelectionManager.SelectedDocuments().map(dv => {
+                let where = (dv.props.ScreenToLocalTransform()).scale(dv.props.ContentScaling()).transformDirection(dx, dy);
+                dv.props.Document.SetNumber(KeyStore.MinimizedX, where[0]);
+                dv.props.Document.SetNumber(KeyStore.MinimizedY, where[1]);
+            });
+        }
     }
     @action
     onMinimizeUp = (e: PointerEvent): void => {
         e.stopPropagation();
         if (e.button === 0) {
-            let dx = e.clientX - this._minimizeDownX - this._minimizeDownOffX;
-            let dy = e.clientY - this._minimizeDownY - this._minimizeDownOffY;
-            if (Math.abs(dx + this._minimizeDownOffX) < 4 && Math.abs(dy + this._minimizeDownOffY) < 4 && this._iconifying.length == 0)
-                dx = dy = 0;
-            SelectionManager.SelectedDocuments().map(dv => dv.minimize((dv.props.ScreenToLocalTransform()).scale(dv.props.ContentScaling()).transformDirection(dx, dy)));
+            let dx = e.clientX - this._downX;
+            let dy = e.clientY - this._downY;
+            if (Math.abs(dx) < 4 && Math.abs(dy) < 4 && !this._iconifying) {
+                SelectionManager.SelectedDocuments().map(dv => dv.minimize());
+                SelectionManager.DeselectAll();
+            }
             document.removeEventListener("pointermove", this.onMinimizeMove);
             document.removeEventListener("pointerup", this.onMinimizeUp);
-            SelectionManager.DeselectAll();
         }
-        this._iconifying = [];
+        this._iconifying = false;
     }
 
     onPointerDown = (e: React.PointerEvent): void => {
@@ -393,18 +400,25 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
     // }
     render() {
         var bounds = this.Bounds;
-        if (bounds.x === Number.MAX_VALUE) {
+        let seldoc = SelectionManager.SelectedDocuments().length ? SelectionManager.SelectedDocuments()[0] : undefined;
+        if (bounds.x === Number.MAX_VALUE || !seldoc) {
             return (null);
         }
-        let xf = this._iconifying.length ? `translate(${this._iconifying[0]}px, ${this._iconifying[1]}px)` : "translate(0,0)";
+        let minvec = [seldoc.props.Document.GetNumber(KeyStore.MinimizedX, 0), seldoc.props.Document.GetNumber(KeyStore.MinimizedY, 0)];
+        minvec = seldoc.props.ScreenToLocalTransform().scale(seldoc.props.ContentScaling()).inverse().transformDirection(minvec[0], minvec[1]);
+        let selpos = minvec[0] !== 0 || minvec[1] !== 0 ?
+            [minvec[0] - 12 + (!this._iconifying ? 8 : 0), minvec[1] - 12 + (!this._iconifying ? 28 : 0)] :
+            [0, this._iconifying ? -18 : 0];
         let minimizeIcon = (
-            <div className="documentDecorations-minimizeButton" onPointerDown={this.onMinimizeDown} style={{ transform: xf }}>
-                <div style={{ position: "absolute", left: "-7px", top: "-4px", width: `${MINIMIZED_ICON_SIZE}`, height: `${MINIMIZED_ICON_SIZE}` }}>
-                    {SelectionManager.SelectedDocuments().length == 1 ? SelectionManager.SelectedDocuments()[0].minimizedIcon : "..."}
-                </div>
+            <div className="documentDecorations-minimizeButton" onPointerDown={this.onMinimizeDown}
+                style={{ transform: `translate(${selpos[0]}px,${selpos[1]}px)`, }}>
+                {SelectionManager.SelectedDocuments().length == 1 ? SelectionManager.SelectedDocuments()[0].minimizedIcon : "..."}
+            </div>);
+        if (this._iconifying) {
+            let xfpt = seldoc.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+            return (<div className="documentDecorations-container" style={{ transform: `translate(${xfpt[0]}px,${xfpt[1]}px` }}>
+                {minimizeIcon}
             </div>);
-        if (this._iconifying.length) {
-            return <div className="documentDecorations-container">{minimizeIcon}</div>;
         }
         // console.log(this._documents.length)
         // let test = this._documents[0].props.Document.Title;
@@ -416,7 +430,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             return (null);
         }
 
-
         let linkButton = null;
         if (SelectionManager.SelectedDocuments().length > 0) {
             let selFirst = SelectionManager.SelectedDocuments()[0];