diff options
-rw-r--r-- | src/client/views/GlobalKeyHandler.ts | 11 | ||||
-rw-r--r-- | src/client/views/TemplateMenu.tsx | 2 | ||||
-rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 23 | ||||
-rw-r--r-- | src/client/views/nodes/PDFBox.scss | 5 | ||||
-rw-r--r-- | src/client/views/pdf/Annotation.tsx | 11 | ||||
-rw-r--r-- | src/client/views/pdf/PDFMenu.tsx | 7 | ||||
-rw-r--r-- | src/client/views/pdf/PDFViewer.tsx | 2 | ||||
-rw-r--r-- | src/client/views/pdf/Page.tsx | 92 | ||||
-rw-r--r-- | src/client/views/presentationview/PresentationView.tsx | 1 |
9 files changed, 99 insertions, 55 deletions
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index e467d7c61..9ef9e8950 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -1,4 +1,4 @@ -import { UndoManager } from "../util/UndoManager"; +import { UndoManager, undoBatch } from "../util/UndoManager"; import { SelectionManager } from "../util/SelectionManager"; import { CollectionDockingView } from "./collections/CollectionDockingView"; import { MainView } from "./MainView"; @@ -100,7 +100,7 @@ export default class KeyManager { MainView.Instance.mainFreeform && CollectionDockingView.Instance.AddRightSplit(MainView.Instance.mainFreeform, undefined); break; case "arrowleft": - MainView.Instance.mainFreeform && CollectionDockingView.Instance.CloseRightSplit(MainView.Instance.mainFreeform); + MainView.Instance.mainFreeform && CollectionDockingView.Instance.CloseRightSplit(MainView.Instance.mainFreeform) break; case "f": MainView.Instance.isSearchVisible = !MainView.Instance.isSearchVisible; @@ -118,6 +118,13 @@ export default class KeyManager { case "z": UndoManager.Undo(); break; + case "a": + case "c": + case "v": + case "x": + stopPropagation = false; + preventDefault = false; + break; } return { diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index a9bc4d3d2..a53c8749a 100644 --- a/src/client/views/TemplateMenu.tsx +++ b/src/client/views/TemplateMenu.tsx @@ -6,6 +6,7 @@ import './DocumentDecorations.scss'; import { DocumentView } from "./nodes/DocumentView"; import { Template } from "./Templates"; import React = require("react"); +import { undoBatch } from "../util/UndoManager"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -39,6 +40,7 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { super(props); } + @undoBatch @action toggleTemplate = (event: React.ChangeEvent<HTMLInputElement>, template: Template): void => { if (event.target.checked) { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 9edde896f..d5b329899 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -280,7 +280,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu if (this._doubleTap && this.props.renderDepth) { let fullScreenAlias = Doc.MakeAlias(this.props.Document); fullScreenAlias.templates = new List<string>(); - this.props.addDocTab(fullScreenAlias, this.dataDoc, "inTab"); + this.props.addDocTab(fullScreenAlias, this.props.Document === this.dataDoc ? undefined : this.dataDoc, "inTab"); SelectionManager.DeselectAll(); this.props.Document.libraryBrush = false; } @@ -393,8 +393,13 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu this._lastTap = Date.now(); } - deleteClicked = (): void => { this.props.removeDocument && this.props.removeDocument(this.props.Document); }; - fieldsClicked = (): void => { let kvp = Docs.KVPDocument(this.props.Document, { width: 300, height: 300 }); this.props.addDocTab(kvp, this.dataDoc, "onRight"); }; + @undoBatch + deleteClicked = (): void => { SelectionManager.DeselectAll(); this.props.removeDocument && this.props.removeDocument(this.props.Document); } + + @undoBatch + fieldsClicked = (): void => { let kvp = Docs.KVPDocument(this.props.Document, { width: 300, height: 300 }); this.props.addDocTab(kvp, this.dataDoc, "onRight"); } + + @undoBatch makeBtnClicked = (): void => { let doc = Doc.GetProto(this.props.Document); doc.isButton = !BoolCast(doc.isButton, false); @@ -407,6 +412,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu doc.nativeWidth = doc.nativeHeight = undefined; } } + + @undoBatch public fullScreenClicked = (): void => { CollectionDockingView.Instance && CollectionDockingView.Instance.OpenFullScreen(this); SelectionManager.DeselectAll(); @@ -467,6 +474,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu this.templates = this.templates; } + @undoBatch + @action freezeNativeDimensions = (): void => { let proto = Doc.GetProto(this.props.Document); if (proto.ignoreAspect === undefined && !proto.nativeWidth) { @@ -477,6 +486,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu proto.ignoreAspect = !BoolCast(proto.ignoreAspect, false); } + @undoBatch + @action + toggleLockPosition = (): void => { + this.props.Document.lockedPosition = BoolCast(this.props.Document.lockedPosition) ? undefined : true; + } + @action onContextMenu = async (e: React.MouseEvent): Promise<void> => { e.persist(); @@ -499,7 +514,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu cm.addItem({ description: "Open...", subitems: subitems, icon: "external-link-alt" }); cm.addItem({ description: BoolCast(this.props.Document.ignoreAspect, false) || !this.props.Document.nativeWidth || !this.props.Document.nativeHeight ? "Freeze" : "Unfreeze", event: this.freezeNativeDimensions, icon: "edit" }); cm.addItem({ description: "Pin to Pres", event: () => PresentationView.Instance.PinDoc(this.props.Document), icon: "map-pin" }); - cm.addItem({ description: BoolCast(this.props.Document.lockedPosition) ? "Unlock Pos" : "Lock Pos", event: () => this.props.Document.lockedPosition = BoolCast(this.props.Document.lockedPosition) ? undefined : true, icon: BoolCast(this.props.Document.lockedPosition) ? "unlock" : "lock" }); + cm.addItem({ description: BoolCast(this.props.Document.lockedPosition) ? "Unlock Pos" : "Lock Pos", event: this.toggleLockPosition, icon: BoolCast(this.props.Document.lockedPosition) ? "unlock" : "lock" }); cm.addItem({ description: this.props.Document.isButton ? "Remove Button" : "Make Button", event: this.makeBtnClicked, icon: "concierge-bell" }); cm.addItem({ description: "Find aliases", event: async () => { diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 9a38d6241..e7655d598 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -32,15 +32,18 @@ height: 100px; } -.pdfBox-cont, .pdfBox-cont-interactive { +.pdfBox-cont, +.pdfBox-cont-interactive { display: flex; flex-direction: row; height: 100%; overflow-y: scroll; overflow-x: hidden; } + .pdfBox-cont { pointer-events: none; + .textlayer { pointer-events: none; diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx index 73fca229b..e88839edd 100644 --- a/src/client/views/pdf/Annotation.tsx +++ b/src/client/views/pdf/Annotation.tsx @@ -8,6 +8,7 @@ import { Id } from "../../../new_fields/FieldSymbols"; import { List } from "../../../new_fields/List"; import PDFMenu from "./PDFMenu"; import { DocumentManager } from "../../util/DocumentManager"; +import { PresentationView } from "../presentationview/PresentationView"; interface IAnnotationProps { anno: Doc; @@ -101,6 +102,13 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> { PDFMenu.Instance.fadeOut(true); } + pinToPres = () => { + let group = FieldValue(Cast(this.props.document.group, Doc)); + if (group) { + PresentationView.Instance.PinDoc(group); + } + } + @action onPointerDown = (e: React.PointerEvent) => { if (e.button === 0) { @@ -114,6 +122,7 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> { PDFMenu.Instance.Delete = this.deleteAnnotation.bind(this); PDFMenu.Instance.Pinned = false; PDFMenu.Instance.AddTag = this.addTag.bind(this); + PDFMenu.Instance.PinToPres = this.pinToPres; PDFMenu.Instance.jumpTo(e.clientX, e.clientY, true); } } @@ -137,7 +146,7 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> { width: this.props.width * scale, height: this.props.height * scale, pointerEvents: "all", - backgroundColor: this.props.parent.Index === this.props.index ? "goldenrod" : StrCast(this.props.document.color) + backgroundColor: this.props.parent.Index === this.props.index ? "green" : StrCast(this.props.document.color) }}></div> ); } diff --git a/src/client/views/pdf/PDFMenu.tsx b/src/client/views/pdf/PDFMenu.tsx index aeed5213c..f93b2e59f 100644 --- a/src/client/views/pdf/PDFMenu.tsx +++ b/src/client/views/pdf/PDFMenu.tsx @@ -7,6 +7,7 @@ import { emptyFunction, returnZero, returnTrue, returnFalse } from "../../../Uti import { Doc } from "../../../new_fields/Doc"; import { DragManager } from "../../util/DragManager"; import { DocUtils } from "../../documents/Documents"; +import { PresentationView } from "../presentationview/PresentationView"; @observer export default class PDFMenu extends React.Component { @@ -24,6 +25,7 @@ export default class PDFMenu extends React.Component { Delete: () => void = emptyFunction; Snippet: (marquee: { left: number, top: number, width: number, height: number }) => void = emptyFunction; AddTag: (key: string, value: string) => boolean = returnFalse; + PinToPres: () => void = emptyFunction; @observable public Highlighting: boolean = false; @observable public Status: "pdf" | "annotation" | "snippet" | "" = ""; @@ -252,11 +254,12 @@ export default class PDFMenu extends React.Component { </button> ] : [ <button className="pdfMenu-button" title="Delete Anchor" onPointerDown={this.deleteClicked}><FontAwesomeIcon icon="trash-alt" size="lg" key="1" /></button>, - <div className="pdfMenu-addTag" key="2"> + <button className="pdfMenu-button" title="Pin to Presentation" onPointerDown={this.PinToPres}><FontAwesomeIcon icon="map-pin" size="lg" key="2" /></button>, + <div className="pdfMenu-addTag" key="3"> <input onChange={this.keyChanged} placeholder="Key" style={{ gridColumn: 1 }} /> <input onChange={this.valueChanged} placeholder="Value" style={{ gridColumn: 3 }} /> </div>, - <button className="pdfMenu-button" title={`Add tag: ${this._keyValue} with value: ${this._valueValue}`} onPointerDown={this.addTag}><FontAwesomeIcon style={{ transition: "all .2s" }} color={this._added ? "#42f560" : "white"} icon="check" size="lg" key="3" /></button>, + <button className="pdfMenu-button" title={`Add tag: ${this._keyValue} with value: ${this._valueValue}`} onPointerDown={this.addTag}><FontAwesomeIcon style={{ transition: "all .2s" }} color={this._added ? "#42f560" : "white"} icon="check" size="lg" key="4" /></button>, ]; return ( diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index bb148e738..35bf1c4d7 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -580,7 +580,7 @@ export class Viewer extends React.Component<IViewerProps> { } } return true; - }).length) { + }).length - 1) { this.Index++; } } diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx index 57e36be43..92f5390ae 100644 --- a/src/client/views/pdf/Page.tsx +++ b/src/client/views/pdf/Page.tsx @@ -52,7 +52,7 @@ export default class Page extends React.Component<IPageProps> { private _textLayer: React.RefObject<HTMLDivElement>; private _annotationLayer: React.RefObject<HTMLDivElement>; private _marquee: React.RefObject<HTMLDivElement>; - private _curly: React.RefObject<HTMLImageElement>; + // private _curly: React.RefObject<HTMLImageElement>; private _marqueeing: boolean = false; private _reactionDisposer?: IReactionDisposer; @@ -62,7 +62,7 @@ export default class Page extends React.Component<IPageProps> { this._textLayer = React.createRef(); this._annotationLayer = React.createRef(); this._marquee = React.createRef(); - this._curly = React.createRef(); + // this._curly = React.createRef(); } componentDidMount = (): void => { @@ -183,8 +183,11 @@ export default class Page extends React.Component<IPageProps> { let doc = this.props.parent.Document; let view = Doc.MakeAlias(doc); let data = Doc.MakeDelegate(doc.proto!); + data.title = StrCast(data.title) + "_snippet"; view.proto = data; view.nativeHeight = marquee.height; + view.height = (doc[WidthSym]() / NumCast(doc.nativeWidth)) * marquee.height; + view.nativeWidth = doc.nativeWidth; view.startY = marquee.top + this.props.getScrollFromPage(this.props.page); view.width = doc[WidthSym](); let dragData = new DragManager.DocumentDragData([view], [undefined]); @@ -244,9 +247,9 @@ export default class Page extends React.Component<IPageProps> { this._marqueeWidth = (e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width) - this._marqueeX; this._marqueeHeight = (e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height) - this._marqueeY; let { background, opacity, transform: transform } = this.getCurlyTransform(); - if (this._marquee.current && this._curly.current) { + if (this._marquee.current /*&& this._curly.current*/) { this._marquee.current.style.background = background; - this._curly.current.style.opacity = opacity; + // this._curly.current.style.opacity = opacity; this._rotate = transform; } } @@ -259,33 +262,33 @@ export default class Page extends React.Component<IPageProps> { } getCurlyTransform = (): { background: string, opacity: string, transform: string } => { - let background = "", opacity = "", transform = ""; - if (this._marquee.current && this._curly.current) { - if (this._marqueeWidth > 100 && this._marqueeHeight > 100) { - background = "red"; - opacity = "0"; - } - else { - background = "transparent"; - opacity = "1"; - } - - // split up for simplicity, could be done in a nested ternary. please do not. -syip2 - let ratio = this._marqueeWidth / this._marqueeHeight; - if (ratio > 1.5) { - // vertical - transform = "rotate(90deg) scale(1, 5)"; - } - else if (ratio < 0.5) { - // horizontal - transform = "scale(2, 1)"; - } - else { - // diagonal - transform = "rotate(45deg) scale(1.5, 1.5)"; - } - } - return { background: background, opacity: opacity, transform: transform }; + // let background = "", opacity = "", transform = ""; + // if (this._marquee.current && this._curly.current) { + // if (this._marqueeWidth > 100 && this._marqueeHeight > 100) { + // background = "red"; + // opacity = "0"; + // } + // else { + // background = "transparent"; + // opacity = "1"; + // } + + // // split up for simplicity, could be done in a nested ternary. please do not. -syip2 + // let ratio = this._marqueeWidth / this._marqueeHeight; + // if (ratio > 1.5) { + // // vertical + // transform = "rotate(90deg) scale(1, 5)"; + // } + // else if (ratio < 0.5) { + // // horizontal + // transform = "scale(2, 1)"; + // } + // else { + // // diagonal + // transform = "rotate(45deg) scale(1.5, 1.5)"; + // } + // } + return { background: "red", opacity: "0.5", transform: "" }; } @action @@ -305,16 +308,17 @@ export default class Page extends React.Component<IPageProps> { let { background, opacity, transform } = this.getCurlyTransform(); copy.style.background = background; // if curly bracing, add a curly brace - if (opacity === "1" && this._curly.current) { - copy.style.opacity = opacity; - let img = this._curly.current.cloneNode(); - (img as any).style.opacity = opacity; - (img as any).style.transform = transform; - copy.appendChild(img); - } - else { - copy.style.opacity = style.opacity; - } + // if (opacity === "1" && this._curly.current) { + // copy.style.opacity = opacity; + // let img = this._curly.current.cloneNode(); + // (img as any).style.opacity = opacity; + // (img as any).style.transform = transform; + // copy.appendChild(img); + // } + // else { + copy.style.border = style.border; + copy.style.opacity = style.opacity; + // } copy.className = this._marquee.current.className; this.props.createAnnotation(copy, this.props.page); this._marquee.current.style.opacity = "0"; @@ -340,7 +344,7 @@ export default class Page extends React.Component<IPageProps> { if (PDFMenu.Instance.Highlighting) { - this.highlight(undefined, "#f4f442"); + this.highlight(undefined, "goldenrod"); } else { PDFMenu.Instance.StartDrag = this.startDrag; @@ -401,8 +405,8 @@ export default class Page extends React.Component<IPageProps> { </div> <div className="pdfInkingLayer-cont" ref={this._annotationLayer} style={{ width: "100%", height: "100%", position: "relative", top: "-100%" }}> <div className="pdfViewer-annotationBox" ref={this._marquee} - style={{ left: `${this._marqueeX}px`, top: `${this._marqueeY}px`, width: `${this._marqueeWidth}px`, height: `${this._marqueeHeight}px`, background: "transparent" }}> - <img ref={this._curly} src="https://static.thenounproject.com/png/331760-200.png" style={{ width: "100%", height: "100%", transform: `${this._rotate}` }} /> + style={{ left: `${this._marqueeX}px`, top: `${this._marqueeY}px`, width: `${this._marqueeWidth}px`, height: `${this._marqueeHeight}px`, background: "red", border: `${this._marqueeWidth === 0 ? "" : "10px dashed black"}` }}> + {/* <img ref={this._curly} src="https://static.thenounproject.com/png/331760-200.png" style={{ width: "100%", height: "100%", transform: `${this._rotate}` }} /> */} </div> </div> <div className="textlayer" ref={this._textLayer} style={{ "position": "relative", "top": `-${2 * this._height}px`, "height": `${this._height}px` }} /> diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 20d0e113a..a3fa553b7 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -494,6 +494,7 @@ export class PresentationView extends React.Component<PresViewProps> { /** * Adds a document to the presentation view **/ + @undoBatch @action public PinDoc(doc: Doc) { //add this new doc to props.Document |