From 100d23b580614d54cbda37aed898680985b79786 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 19 Apr 2019 00:17:31 -0400 Subject: icon fixes --- src/client/views/DocumentDecorations.scss | 7 ++- src/client/views/DocumentDecorations.tsx | 73 ++++++++++++++++++------------- 2 files changed, 49 insertions(+), 31 deletions(-) (limited to 'src') 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 = ( -
-
- {SelectionManager.SelectedDocuments().length == 1 ? SelectionManager.SelectedDocuments()[0].minimizedIcon : "..."} -
+
+ {SelectionManager.SelectedDocuments().length == 1 ? SelectionManager.SelectedDocuments()[0].minimizedIcon : "..."} +
); + if (this._iconifying) { + let xfpt = seldoc.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + return (
+ {minimizeIcon}
); - if (this._iconifying.length) { - return
{minimizeIcon}
; } // 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]; -- cgit v1.2.3-70-g09d2