diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/DocumentDecorations.tsx | 95 | ||||
-rw-r--r-- | src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 35 | ||||
-rw-r--r-- | src/client/views/nodes/IconBox.tsx | 6 |
3 files changed, 64 insertions, 72 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 9771c6580..2299f4c32 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -25,6 +25,10 @@ import { faLink } from '@fortawesome/free-solid-svg-icons'; import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { MINIMIZED_ICON_SIZE } from "../views/globalCssVariables.scss"; +import { CollectionFreeFormView } from "./collections/collectionFreeForm/CollectionFreeFormView"; +import { CollectionView } from "./collections/CollectionView"; +import { createCipher } from "crypto"; +import { FieldView } from "./nodes/FieldView"; library.add(faLink); @@ -41,6 +45,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> private _linkerButton = React.createRef<HTMLDivElement>(); private _downX = 0; private _downY = 0; + private _iconDoc?: Doc = undefined; @observable private _minimizedX = 0; @observable private _minimizedY = 0; @observable private _title: string = ""; @@ -194,6 +199,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> @action onMinimizeDown = (e: React.PointerEvent): void => { e.stopPropagation(); + this._iconDoc = undefined; if (e.button === 0) { this._downX = e.pageX; this._downY = e.pageY; @@ -220,26 +226,46 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> this._minimizedX = snapped ? selDocPos[0] + 4 : e.clientX; this._minimizedY = snapped ? selDocPos[1] - 18 : e.clientY; let selectedDocs = SelectionManager.SelectedDocuments().map(sd => sd); - Promise.all(selectedDocs.map(selDoc => this.getIconDoc(selDoc))).then(minDocSet => - this.moveIconDocs(SelectionManager.SelectedDocuments()) - ); + + if (selectedDocs.length > 1) { + this._iconDoc = this._iconDoc ? this._iconDoc : this.createIcon(SelectionManager.SelectedDocuments(), CollectionView.LayoutString()); + this.moveIconDoc(this._iconDoc); + } else { + this.getIconDoc(selectedDocs[0]).then(icon => icon && this.moveIconDoc(this._iconDoc = icon)); + } this._removeIcon = snapped; } } + @action + onMinimizeUp = (e: PointerEvent): void => { + e.stopPropagation(); + if (e.button === 0) { + document.removeEventListener("pointermove", this.onMinimizeMove); + document.removeEventListener("pointerup", this.onMinimizeUp); + let selectedDocs = SelectionManager.SelectedDocuments().map(sd => sd); + if (this._iconDoc && selectedDocs.length === 1 && this._removeIcon) { + selectedDocs[0].props.removeDocument && selectedDocs[0].props.removeDocument(this._iconDoc); + } + !this._removeIcon && selectedDocs.length === 1 && this.getIconDoc(selectedDocs[0]).then(icon => selectedDocs[0].props.toggleMinimized()); + this._removeIcon = false; + } + runInAction(() => this._minimizedX = this._minimizedY = 0); + } - @action createIcon = (docView: DocumentView, layoutString: string): Doc => { - let doc = docView.props.Document; + @action createIcon = (selected: DocumentView[], layoutString: string): Doc => { + let doc = selected[0].props.Document; let iconDoc = Docs.IconDocument(layoutString); - iconDoc.title = "ICON" + StrCast(doc.title); + iconDoc.title = selected.length > 1 ? "ICONset" : "ICON" + StrCast(doc.title); iconDoc.labelField = this._fieldKey; + iconDoc[this._fieldKey] = selected.length > 1 ? "collection" : undefined; iconDoc.isMinimized = false; iconDoc.width = Number(MINIMIZED_ICON_SIZE); iconDoc.height = Number(MINIMIZED_ICON_SIZE); iconDoc.x = NumCast(doc.x); iconDoc.y = NumCast(doc.y) - 24; - iconDoc.maximizedDoc = doc; + iconDoc.maximizedDocs = new List<Doc>(selected.map(s => s.props.Document)); doc.minimizedDoc = iconDoc; - docView.props.addDocument && docView.props.addDocument(iconDoc, false); + selected[0].props.addDocument && selected[0].props.addDocument(iconDoc, false); return iconDoc; } @action @@ -247,56 +273,21 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> let doc = docView.props.Document; let iconDoc: Doc | undefined = await Cast(doc.minimizedDoc, Doc); if (!iconDoc) { - const background = StrCast(doc.backgroundLayout, undefined); - if (background) { - iconDoc = this.createIcon(docView, background); - } else { - const layout = StrCast(doc.layout, undefined); - if (layout) { - iconDoc = this.createIcon(docView, layout); - } - } + const layout = StrCast(doc.backgroundLayout, StrCast(doc.layout, FieldView.LayoutString(DocumentView))); + iconDoc = this.createIcon([docView], layout); } if (SelectionManager.SelectedDocuments()[0].props.addDocument !== undefined) { SelectionManager.SelectedDocuments()[0].props.addDocument!(iconDoc!); } return iconDoc; } - @action - onMinimizeUp = (e: PointerEvent): void => { - e.stopPropagation(); - if (e.button === 0) { - document.removeEventListener("pointermove", this.onMinimizeMove); - document.removeEventListener("pointerup", this.onMinimizeUp); - let selectedDocs = SelectionManager.SelectedDocuments().map(sd => sd); - Promise.all(selectedDocs.map(selDoc => this.getIconDoc(selDoc))).then(minDocSet => { - let minDocs = minDocSet.filter(minDoc => minDoc instanceof Doc).map(minDoc => minDoc as Doc); - minDocs.map(minDoc => { - minDoc.x = NumCast(minDocs[0].x); - minDoc.y = NumCast(minDocs[0].y); - minDoc.linkedIconTags = new List(minDocs.filter(d => d !== minDoc)); - if (this._removeIcon && selectedDocs[0].props.removeDocument) { - selectedDocs[0].props.removeDocument(minDoc); - (minDoc.maximizedDoc as Doc).minimizedDoc = undefined; - } - }); - runInAction(() => this._minimizedX = this._minimizedY = 0); - selectedDocs[0].props.toggleMinimized(); - this._removeIcon = false; - }); - } - } - moveIconDocs(selViews: DocumentView[], minDocSet?: FieldResult[]) { - selViews.map(selDoc => { - let minDoc = selDoc.props.Document.minimizedDoc; - if (minDoc instanceof Doc) { - let zoom = NumCast(selDoc.props.Document.zoomBasis, 1); - let where = (selDoc.props.ScreenToLocalTransform()).scale(selDoc.props.ContentScaling()).scale(1 / zoom). - transformPoint(this._minimizedX - 12, this._minimizedY - 12); - minDoc.x = where[0] + NumCast(selDoc.props.Document.x); - minDoc.y = where[1] + NumCast(selDoc.props.Document.y); - } - }); + moveIconDoc(iconDoc: Doc) { + let selView = SelectionManager.SelectedDocuments()[0]; + let zoom = NumCast(selView.props.Document.zoomBasis, 1); + let where = (selView.props.ScreenToLocalTransform()).scale(selView.props.ContentScaling()).scale(1 / zoom). + transformPoint(this._minimizedX - 12, this._minimizedY - 12); + iconDoc.x = where[0] + NumCast(selView.props.Document.x); + iconDoc.y = where[1] + NumCast(selView.props.Document.y); } @action diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 53298fbdd..6bb00dd5c 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -11,6 +11,7 @@ import { OmitKeys, Utils } from "../../../Utils"; import { SelectionManager } from "../../util/SelectionManager"; import { matchedData } from "express-validator/filter"; import { Doc } from "../../../new_fields/Doc"; +import { List } from "../../../new_fields/List"; export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { } @@ -112,23 +113,23 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF public toggleIcon = async (): Promise<void> => { SelectionManager.DeselectAll(); let isMinimized: boolean | undefined; - let minimizedDocSet = Cast(this.props.Document.linkedIconTags, listSpec(Doc), []); - let docs = minimizedDocSet.map(d => d); - let minimDoc = Cast(this.props.Document.minimizedDoc, Doc); - if (minimDoc instanceof Doc) docs.push(minimDoc); - else docs.push(this.props.Document); - docs.map(async minimizedDoc => { - this.props.addDocument && this.props.addDocument(minimizedDoc, false); - let maximizedDoc = await Cast(minimizedDoc.maximizedDoc, Doc); - if (maximizedDoc && !maximizedDoc.isIconAnimating) { + let maximizedDocs = await Cast(this.props.Document.maximizedDocs, listSpec(Doc)); + let minimizedDoc: Doc | undefined = this.props.Document; + if (!maximizedDocs) { + minimizedDoc = await Cast(this.props.Document.minimizedDoc, Doc); + if (minimizedDoc) maximizedDocs = await Cast(minimizedDoc.maximizedDocs, listSpec(Doc)); + } + if (minimizedDoc && maximizedDocs && maximizedDocs instanceof List && !maximizedDocs.some(md => BoolCast(md.isIconAnimating))) { + let minimizedTarget = minimizedDoc; + maximizedDocs.map(maximizedDoc => { maximizedDoc.isIconAnimating = true; if (isMinimized === undefined) { let maximizedDocMinimizedState = Cast(maximizedDoc.isMinimized, "boolean"); isMinimized = (maximizedDocMinimizedState) ? true : false; } if (isMinimized) this.props.bringToFront(maximizedDoc); - let minx = NumCast(minimizedDoc.x, undefined); - let miny = NumCast(minimizedDoc.y, undefined); + let minx = NumCast(minimizedTarget.x, undefined); + let miny = NumCast(minimizedTarget.y, undefined); let maxx = NumCast(maximizedDoc.x, undefined); let maxy = NumCast(maximizedDoc.y, undefined); let maxw = NumCast(maximizedDoc.width, undefined); @@ -137,8 +138,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF maxw !== undefined && maxh !== undefined) { this.animateBetweenIcon(true, [minx, miny], [maxx, maxy], maxw, maxh, Date.now(), maximizedDoc, isMinimized); } - } - }) + }); + } } onPointerDown = (e: React.PointerEvent): void => { this._downX = e.clientX; @@ -149,9 +150,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF e.stopPropagation(); if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) { - const maxDoc = await Cast(this.props.Document.maximizedDoc, Doc); - if (maxDoc) { // bcz: need a better way to associate behaviors with click events on widget-documents - this.props.addDocument && this.props.addDocument(maxDoc, false); + let maximizedDocs = await Cast(this.props.Document.maximizedDocs, listSpec(Doc)); + if (maximizedDocs) { // bcz: need a better way to associate behaviors with click events on widget-documents + this.props.addDocument && maximizedDocs.filter(d => d instanceof Doc).map(maxDoc => this.props.addDocument!(maxDoc, false)); this.toggleIcon(); } } @@ -169,7 +170,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF } render() { - let maximizedDoc = FieldValue(Cast(this.props.Document.maximizedDoc, Doc)); + let maximizedDoc = FieldValue(Cast(this.props.Document.maximizedDocs, listSpec(Doc))); let zoomFade = 1; //var zoom = doc.GetNumber(KeyStore.ZoomBasis, 1); let transform = this.getTransform().scale(this.contentScaling()).inverse(); diff --git a/src/client/views/nodes/IconBox.tsx b/src/client/views/nodes/IconBox.tsx index 08301ae0d..3fab10df4 100644 --- a/src/client/views/nodes/IconBox.tsx +++ b/src/client/views/nodes/IconBox.tsx @@ -13,6 +13,7 @@ import { IconField } from "../../../new_fields/IconField"; import { ContextMenu } from "../ContextMenu"; import Measure from "react-measure"; import { MINIMIZED_ICON_SIZE } from "../../views/globalCssVariables.scss"; +import { listSpec } from "../../../new_fields/Schema"; library.add(faCaretUp); @@ -25,7 +26,6 @@ library.add(faFilm); export class IconBox extends React.Component<FieldViewProps> { public static LayoutString() { return FieldView.LayoutString(IconBox); } - @computed get maximized() { return Cast(this.props.Document.maximizedDoc, Doc); } @computed get layout(): string { const field = Cast(this.props.Document[this.props.fieldKey], IconField); return field ? field.icon : "<p>Error loading icon data</p>"; } @computed get minimizedIcon() { return IconBox.DocumentIcon(this.layout); } @@ -54,8 +54,8 @@ export class IconBox extends React.Component<FieldViewProps> { render() { let labelField = StrCast(this.props.Document.labelField); let hideLabel = BoolCast(this.props.Document.hideLabel); - let maxDoc = Cast(this.props.Document.maximizedDoc, Doc) as Doc; - let label = !hideLabel && maxDoc && labelField ? maxDoc[labelField] : ""; + let maxDoc = Cast(this.props.Document.maximizedDocs, listSpec(Doc), []); + let label = !hideLabel && maxDoc && labelField ? (maxDoc.length === 1 ? maxDoc[0][labelField] : this.props.Document[labelField]) : ""; return ( <div className="iconBox-container" onContextMenu={this.specificContextMenu}> {this.minimizedIcon} |