From 80c7baeaa82697428730a24382f660d82ca209b6 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 18 Apr 2019 15:57:25 -0400 Subject: icons --- src/client/views/DocumentDecorations.scss | 4 +-- src/client/views/DocumentDecorations.tsx | 41 ++++++++++++++++++++-- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 +-- src/client/views/nodes/DocumentView.scss | 4 +-- src/client/views/nodes/DocumentView.tsx | 35 ++++++++++-------- 5 files changed, 65 insertions(+), 23 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index c1a949639..8af8a1184 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -3,12 +3,12 @@ .documentDecorations { position: absolute; } -#documentDecorations-container { +.documentDecorations-container { + z-index: $docDecorations-zindex; position: absolute; top: 0; left:0; display: grid; - z-index: $docDecorations-zindex; grid-template-rows: 20px 8px 1fr 8px; grid-template-columns: 8px 8px 1fr 8px 8px; pointer-events: none; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 16fac0694..6da1ea52e 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -11,6 +11,7 @@ import { SelectionManager } from "../util/SelectionManager"; import { undoBatch } from "../util/UndoManager"; import './DocumentDecorations.scss'; import { MainOverlayTextBox } from "./MainOverlayTextBox"; +import { MINIMIZED_ICON_SIZE } from "../views/globalCssVariables.scss"; import { DocumentView } from "./nodes/DocumentView"; import { LinkMenu } from "./nodes/LinkMenu"; import React = require("react"); @@ -36,6 +37,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[] = []; constructor(props: Readonly<{}>) { @@ -175,25 +177,46 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> document.removeEventListener("pointerup", this.onCloseUp); } } + _minimizeDownX = 0; + _minimizeDownY = 0; + _minimizeDownOffX = 0; + _minimizeDownOffY = 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; document.removeEventListener("pointermove", this.onMinimizeMove); document.addEventListener("pointermove", this.onMinimizeMove); document.removeEventListener("pointerup", this.onMinimizeUp); document.addEventListener("pointerup", this.onMinimizeUp); } } + @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]; } + @action onMinimizeUp = (e: PointerEvent): void => { e.stopPropagation(); if (e.button === 0) { - SelectionManager.SelectedDocuments().map(dv => dv.minimize()); + 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))); document.removeEventListener("pointermove", this.onMinimizeMove); document.removeEventListener("pointerup", this.onMinimizeUp); + SelectionManager.DeselectAll(); } + this._iconifying = []; } onPointerDown = (e: React.PointerEvent): void => { @@ -373,6 +396,16 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (bounds.x === Number.MAX_VALUE) { return (null); } + let xf = this._iconifying.length ? `translate(${this._iconifying[0]}px, ${this._iconifying[1]}px)` : "translate(0,0)"; + let minimizeIcon = ( +
+
+ {SelectionManager.SelectedDocuments().length == 1 ? SelectionManager.SelectedDocuments()[0].minimizedIcon : "..."} +
+
); + if (this._iconifying.length) { + return
{minimizeIcon}
; + } // console.log(this._documents.length) // let test = this._documents[0].props.Document.Title; if (this.Hidden) { @@ -383,6 +416,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> return (null); } + let linkButton = null; if (SelectionManager.SelectedDocuments().length > 0) { let selFirst = SelectionManager.SelectedDocuments()[0]; @@ -406,14 +440,15 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> zIndex: SelectionManager.SelectedDocuments().length > 1 ? 1000 : 0, }} onPointerDown={this.onBackgroundDown} onContextMenu={(e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); }} > -
-
...
+ {minimizeIcon} +
X
e.preventDefault()}>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index af6819cd4..c50597655 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -79,8 +79,8 @@ export class CollectionFreeFormView extends CollectionSubView { let dropY = dragDoc.GetNumber(KeyStore.Y, 0); de.data.droppedDocuments.map(d => { let minimized = d.GetBoolean(KeyStore.Minimized, false); - d.SetNumber(KeyStore.X, x + (d.GetNumber(KeyStore.X, 0) - dropX)); - d.SetNumber(KeyStore.Y, y + (d.GetNumber(KeyStore.Y, 0) - dropY)); + d.SetNumber(KeyStore.X, x + (d.GetNumber(KeyStore.X, 0) - (minimized ? d.GetNumber(KeyStore.MinimizedX, 0) : 0)) - dropX); + d.SetNumber(KeyStore.Y, y + (d.GetNumber(KeyStore.Y, 0) - (minimized ? d.GetNumber(KeyStore.MinimizedY, 0) : 0)) - dropY); if (!minimized) { if (!d.GetNumber(KeyStore.Width, 0)) { d.SetNumber(KeyStore.Width, 300); diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 85c305b5a..a0e829d26 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -37,11 +37,11 @@ top:0; width:$MINIMIZED_ICON_SIZE; height:$MINIMIZED_ICON_SIZE; - transform-origin: left top; + transform:translate(-50%, -50%); } .minimized-box:hover { background: $main-accent; - transform: scale(1.15); + transform:translate(-50%, -50%) scale(1.15);; cursor: pointer; } \ No newline at end of file diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index af52e44e1..3ada3252c 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -222,11 +222,12 @@ export class DocumentView extends React.Component { } @action - public minimize = (): void => { + public minimize = (where: number[]): void => { this.props.Document.SetBoolean(KeyStore.Minimized, true); - this.props.Document.SetNumber(KeyStore.MinimizedX, 0); - this.props.Document.SetNumber(KeyStore.MinimizedY, 0); - SelectionManager.DeselectAll(); + if (where[0] !== 0 || where[1] !== 0) + this.props.Document.SetNumber(KeyStore.MinimizedX, where[0]); + if (where[1] !== 0 || where[0] !== 0) + this.props.Document.SetNumber(KeyStore.MinimizedY, where[1]); } @undoBatch @@ -294,7 +295,7 @@ export class DocumentView extends React.Component { } e.preventDefault(); - !this.isMinimized() && ContextMenu.Instance.addItem({ description: "Minimize", event: this.minimize }); + !this.isMinimized() && ContextMenu.Instance.addItem({ description: "Minimize", event: () => this.minimize([0, 0]) }); ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }); ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked }); ContextMenu.Instance.addItem({ description: "Center", event: () => this.props.focus(this.props.Document) }); @@ -309,7 +310,7 @@ export class DocumentView extends React.Component { } @action - expand = () => this.props.Document.SetBoolean(KeyStore.Minimized, false) + expand = (e: React.MouseEvent) => { this.props.Document.SetBoolean(KeyStore.Minimized, false); SelectionManager.SelectDoc(this, e.ctrlKey); } isMinimized = () => this.props.Document.GetBoolean(KeyStore.Minimized, false); isSelected = () => SelectionManager.IsSelected(this); select = (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed); @@ -318,20 +319,26 @@ export class DocumentView extends React.Component { @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); } @computed get contents() { return (); } + @computed get minimizedIcon() { + let button = this.layout.indexOf("PDFBox") !== -1 ? faFilePdf : + this.layout.indexOf("ImageBox") !== -1 ? faImage : + this.layout.indexOf("Formatted") !== -1 ? faStickyNote : + this.layout.indexOf("Video") !== -1 ? faFilm : + this.layout.indexOf("Collection") !== -1 ? faObjectGroup : + faCaretUp; + return + } + render() { var scaling = this.props.ContentScaling(); var nativeHeight = this.nativeHeight > 0 ? this.nativeHeight.toString() + "px" : "100%"; var nativeWidth = this.nativeWidth > 0 ? this.nativeWidth.toString() + "px" : "100%"; if (this.isMinimized()) { - let button = this.layout.indexOf("PDFBox") !== -1 ? faFilePdf : - this.layout.indexOf("ImageBox") !== -1 ? faImage : - this.layout.indexOf("Formatted") !== -1 ? faStickyNote : - this.layout.indexOf("Collection") !== -1 ? faObjectGroup : - faCaretUp; - return
- -
+ return ( +
+ {this.minimizedIcon} +
); } return (