diff options
Diffstat (limited to 'src/client/views/collections')
5 files changed, 44 insertions, 35 deletions
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx index 1e3bf11de..cc7a9f5ac 100644 --- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx +++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx @@ -240,13 +240,15 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr toggle: this.toggleVisibility, color: this.color }; + const showChrome = (chromeStatus !== 'view-mode' && chromeStatus !== 'disabled'); + const stackPad = showChrome ? `0px ${this.props.parent.xMargin}px` : `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px 0px ${this.props.parent.xMargin}px `; return this.collapsed ? (null) : <div style={{ position: "relative" }}> - {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled') ? + {showChrome ? <div className="collectionStackingView-addDocumentButton" style={{ - width: style.columnWidth / style.numGroupColumns, - padding: NumCast(this.props.parent.layoutDoc._yPadding) + //width: style.columnWidth / style.numGroupColumns, + padding: `${NumCast(this.props.parent.layoutDoc._yPadding, this.props.parent.yMargin)}px 0px 0px 0px` }}> <EditableView {...newEditableViewProps} /> </div> : null @@ -254,7 +256,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr <div className={`collectionStackingView-masonryGrid`} ref={this._contRef} style={{ - padding: `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px`, + padding: stackPad, width: this.props.parent.NodeWidth, gridGap: this.props.parent.gridGap, gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ""), diff --git a/src/client/views/collections/CollectionPileView.scss b/src/client/views/collections/CollectionPileView.scss index ac874b663..48d07e42b 100644 --- a/src/client/views/collections/CollectionPileView.scss +++ b/src/client/views/collections/CollectionPileView.scss @@ -5,4 +5,7 @@ height: 100%; width: 100%; overflow: visible; + .collectionPileView-innards { + width:100%; + } } diff --git a/src/client/views/collections/CollectionPileView.tsx b/src/client/views/collections/CollectionPileView.tsx index e3bcf2a21..020a87b2e 100644 --- a/src/client/views/collections/CollectionPileView.tsx +++ b/src/client/views/collections/CollectionPileView.tsx @@ -1,18 +1,17 @@ import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { HeightSym, Opt, WidthSym } from "../../../fields/Doc"; +import { HeightSym, Opt, WidthSym, Doc } from "../../../fields/Doc"; import { ScriptField } from "../../../fields/ScriptField"; import { BoolCast, NumCast, StrCast } from "../../../fields/Types"; -import { ContextMenu } from "../ContextMenu"; -import { ContextMenuProps } from "../ContextMenuItem"; import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; import { CollectionSubView } from "./CollectionSubView"; import "./CollectionPileView.scss"; import React = require("react"); import { setupMoveUpEvents, emptyFunction, returnFalse } from "../../../Utils"; import { SelectionManager } from "../../util/SelectionManager"; -import { UndoManager } from "../../util/UndoManager"; +import { UndoManager, undoBatch } from "../../util/UndoManager"; import { SnappingManager } from "../../util/SnappingManager"; +import { DragManager } from "../../util/DragManager"; @observer export class CollectionPileView extends CollectionSubView(doc => doc) { @@ -20,10 +19,12 @@ export class CollectionPileView extends CollectionSubView(doc => doc) { _doubleTap: boolean | undefined = false; _originalChrome: string = ""; @observable _contentsActive = true; - @observable _layoutEngine = "pass"; @observable _collapsed: boolean = false; @observable _childClickedScript: Opt<ScriptField>; componentDidMount() { + if (this.layoutEngine() !== "pass" && this.layoutEngine() !== "starburst") { + this.Document._layoutEngine = "pass"; + } this._originalChrome = StrCast(this.layoutDoc._chromeStatus); this.layoutDoc._chromeStatus = "disabled"; this.layoutDoc.hideFilterView = true; @@ -33,49 +34,54 @@ export class CollectionPileView extends CollectionSubView(doc => doc) { this.layoutDoc._chromeStatus = this._originalChrome; } - layoutEngine = () => this._layoutEngine; + layoutEngine = () => StrCast(this.Document._layoutEngine); @computed get contents() { - return <div className="collectionPileView-innards" style={{ - width: "100%", - pointerEvents: this.layoutEngine() !== "pass" && (this.props.active() || this.layoutEngine() === "starburst") ? undefined : "none" - }} > + return <div className="collectionPileView-innards" style={{ pointerEvents: this.layoutEngine() === "starburst" ? undefined : "none" }} > <CollectionFreeFormView {...this.props} layoutEngine={this.layoutEngine} /> </div>; } - - specificMenu = (e: React.MouseEvent) => { - const layoutItems: ContextMenuProps[] = []; - const doc = this.props.Document; - - ContextMenu.Instance.addItem({ description: "Options...", subitems: layoutItems, icon: "eye" }); - } - toggleStarburst = action(() => { - if (this._layoutEngine === 'starburst') { + if (this.layoutEngine() === 'starburst') { const defaultSize = 110; this.layoutDoc._overflow = undefined; + this.childDocs.forEach(d => Doc.iconify(d)); this.rootDoc.x = NumCast(this.rootDoc.x) + this.layoutDoc[WidthSym]() / 2 - NumCast(this.layoutDoc._starburstPileWidth, defaultSize) / 2; this.rootDoc.y = NumCast(this.rootDoc.y) + this.layoutDoc[HeightSym]() / 2 - NumCast(this.layoutDoc._starburstPileHeight, defaultSize) / 2; this.layoutDoc._width = NumCast(this.layoutDoc._starburstPileWidth, defaultSize); this.layoutDoc._height = NumCast(this.layoutDoc._starburstPileHeight, defaultSize); - this._layoutEngine = 'pass'; + Doc.pileup(this.childDocs); + this.layoutDoc._panX = 0; + this.layoutDoc._panY = -10; + this.props.Document._layoutEngine = 'pass'; } else { const defaultSize = 25; this.layoutDoc._overflow = 'visible'; !this.layoutDoc._starburstRadius && (this.layoutDoc._starburstRadius = 500); !this.layoutDoc._starburstDocScale && (this.layoutDoc._starburstDocScale = 2.5); - if (this._layoutEngine === 'pass') { + if (this.layoutEngine() === 'pass') { this.rootDoc.x = NumCast(this.rootDoc.x) + this.layoutDoc[WidthSym]() / 2 - defaultSize / 2; this.rootDoc.y = NumCast(this.rootDoc.y) + this.layoutDoc[HeightSym]() / 2 - defaultSize / 2; this.layoutDoc._starburstPileWidth = this.layoutDoc[WidthSym](); this.layoutDoc._starburstPileHeight = this.layoutDoc[HeightSym](); } + this.layoutDoc._panX = this.layoutDoc._panY = 0; this.layoutDoc._width = this.layoutDoc._height = defaultSize; - this._layoutEngine = 'starburst'; + this.props.Document._layoutEngine = 'starburst'; } }); + @undoBatch + @action + onInternalDrop = (e: Event, de: DragManager.DropEvent) => { + if (super.onInternalDrop(e, de)) { + if (de.complete.docDragData) { + Doc.pileup(this.childDocs); + } + } + return true; + } + _undoBatch: UndoManager.Batch | undefined; pointerDown = (e: React.PointerEvent) => { let dist = 0; @@ -107,20 +113,17 @@ export class CollectionPileView extends CollectionSubView(doc => doc) { } onClick = (e: React.MouseEvent) => { - if (e.button === 0 && (this._doubleTap || this.layoutEngine() === "starburst")) { + if (e.button === 0 && this._doubleTap) { SelectionManager.DeselectAll(); this.toggleStarburst(); e.stopPropagation(); } - // else if (this.layoutEngine() === "pass") { - // runInAction(() => this._contentsActive = false); - // setTimeout(action(() => this._contentsActive = true), 300); - // } } render() { - return <div className={"collectionPileView"} onContextMenu={this.specificMenu} onClick={this.onClick} onPointerDown={this.pointerDown} + return <div className={"collectionPileView"} onClick={this.onClick} onPointerDown={this.pointerDown} + ref={this.createDashEventsTarget} style={{ width: this.props.PanelWidth(), height: `calc(100% - ${this.props.Document._chromeStatus === "enabled" ? 51 : 0}px)` }}> {this.contents} </div>; diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 53acc15c3..a6b0d03b8 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -451,7 +451,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?: if (generatedDocuments.length) { const set = generatedDocuments.length > 1 && generatedDocuments.map(d => Doc.iconify(d)); if (set) { - addDocument(Doc.pileup(generatedDocuments, options.x!, options.y!)); + addDocument(Doc.pileup(generatedDocuments, options.x!, options.y!)!); } else { generatedDocuments.forEach(addDocument); } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 972c09484..1611b6935 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -207,7 +207,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P const d = droppedDocs[i]; const layoutDoc = Doc.Layout(d); if (this.Document.currentTimecode !== undefined && !this.props.isAnnotationOverlay) { - CollectionFreeFormDocumentView.setValues(this.Document.currentTimecode, d, x + NumCast(d.x) - dropX, y + NumCast(d.y) - dropY, Cast(d.opacity, "number", null)); + const vals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.displayTimecode, 1000)); + CollectionFreeFormDocumentView.setValues(this.Document.currentTimecode, d, x + vals.x - dropX, y + vals.y - dropY, vals.opacity); } else { d.x = x + NumCast(d.x) - dropX; d.y = y + NumCast(d.y) - dropY; @@ -1362,7 +1363,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P {!this.Document._LODdisable && !this.props.active() && !this.props.isAnnotationOverlay && !this.props.annotationsKey && this.props.renderDepth > 0 ? this.placeholder : this.marqueeView} <CollectionFreeFormOverlayView elements={this.elementFunc} /> - {this.isAnnotationOverlay || !this.props.isSelected() ? (null) : + {this.isAnnotationOverlay || !this.props.isSelected() || this.props.Document._viewType === CollectionViewType.Pile ? (null) : <> <div key="back" className="backKeyframe" onClick={this.prevKeyframe}> <FontAwesomeIcon icon={"caret-left"} size={"lg"} /> |