diff options
Diffstat (limited to 'src/client/views/collections')
4 files changed, 42 insertions, 6 deletions
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 0a06b6e00..ee3f46818 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -42,6 +42,7 @@ interface CollectionViewProps_ extends FieldViewProps { isAnnotationOverlayScrollable?: boolean; // whether the annotation overlay can be vertically scrolled (just for tree views, currently) layoutEngine?: () => string; setPreviewCursor?: (func: (x: number, y: number, drag: boolean, hide: boolean) => void) => void; + setBrushViewer?: (func?: (view: { width: number; height: number; panX: number; panY: number }) => void) => void; // property overrides for child documents childDocuments?: Doc[]; // used to override the documents shown by the sub collection to an explicit list (see LinkBox) diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 7a075a7ff..a82bd2dc8 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -231,7 +231,7 @@ export class TabDocView extends React.Component<TabDocViewProps> { pinDoc.presentationTargetDoc = doc; pinDoc.title = doc.title + ' - Slide'; pinDoc.data = new List<Doc>(); // the children of the alias' layout are the presentation slide children. the alias' data field might be children of a collection, PDF data, etc -- in any case we don't want the tree view to "see" this data - pinDoc.presMovement = pinProps?.pinDocView ? PresMovement.None : PresMovement.Zoom; + pinDoc.presMovement = pinProps?.pinDocView && !pinProps?.pinWithView ? PresMovement.None : PresMovement.Zoom; pinDoc.groupWithUp = false; pinDoc.context = curPres; // these should potentially all be props passed down by the CollectionTreeView to the TreeView elements. That way the PresBox could configure all of its children at render time @@ -367,7 +367,7 @@ export class TabDocView extends React.Component<TabDocViewProps> { @action focusFunc = (doc: Doc, options?: DocFocusOptions) => { const shrinkwrap = options?.originalTarget === this._document && this.view?.ComponentView?.shrinkWrap; - if (shrinkwrap && this._document) { + if (options?.willZoom !== false && shrinkwrap && this._document) { const focusSpeed = NumCast(this._document.focusSpeed, 500); shrinkwrap(); this._document._viewTransition = `transform ${focusSpeed}ms`; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 6927d429d..3cc425745 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -88,6 +88,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection private _cachedPool: Map<string, PoolData> = new Map(); private _lastTap = 0; private _batch: UndoManager.Batch | undefined = undefined; + private _brushtimer: any; + private _brushtimer1: any; // private isWritingMode: boolean = true; // private writingModeDocs: Doc[] = []; @@ -114,6 +116,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @observable _marqueeRef = React.createRef<HTMLDivElement>(); @observable _marqueeViewRef = React.createRef<MarqueeView>(); @observable ChildDrag: DocumentView | undefined; // child document view being dragged. needed to update drop areas of groups when a group item is dragged. + @observable _brushedView = { width: 0, height: 0, panX: 0, panY: 0, opacity: 0 }; // highlighted region of freeform canvas used by presentations to indicate a region @computed get views() { const viewsMask = this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z && ele.inkMask !== -1 && ele.inkMask !== undefined).map(ele => ele.ele); @@ -1520,6 +1523,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection componentDidMount() { super.componentDidMount?.(); this.props.setContentView?.(this); + this.props.setBrushViewer?.(this.brushView); setTimeout( action(() => { this._firstRender = false; @@ -1881,6 +1885,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection </div> ) : null} <CollectionFreeFormViewPannableContents + brushView={this._brushedView} isAnnotationOverlay={this.isAnnotationOverlay} isAnnotationOverlayScrollable={this.props.isAnnotationOverlayScrollable} transform={this.contentTransform} @@ -1916,9 +1921,25 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } }; + @action + brushView = (viewport: { width: number; height: number; panX: number; panY: number }) => { + this._brushedView = { ...viewport, panX: viewport.panX - viewport.width / 2, panY: viewport.panY - viewport.height / 2, opacity: 1 }; + this._brushtimer1 && clearTimeout(this._brushtimer1); + this._brushtimer && clearTimeout(this._brushtimer); + this._brushtimer1 = setTimeout( + action(() => { + this._brushedView.opacity = 0; + this._brushtimer = setTimeout( + action(() => (this._brushedView = { width: 0, height: 0, panX: 0, panY: 0, opacity: 0 })), + 500 + ); + }), + 1000 + ); + }; + render() { TraceMobx(); - const clientRect = this._mainCont?.getBoundingClientRect(); return ( <div className={'collectionfreeformview-container'} @@ -2004,6 +2025,7 @@ interface CollectionFreeFormViewPannableContentsProps { presPinView?: boolean; isAnnotationOverlay: boolean | undefined; isAnnotationOverlayScrollable: boolean | undefined; + brushView: { panX: number; panY: number; width: number; height: number; opacity: number }; } @observer @@ -2123,6 +2145,21 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF //willChange: "transform" }}> {this.props.children()} + {!this.props.brushView.width ? null : ( + <div + className="collectionFreeFormView-brushView" + style={{ + zIndex: 1000, + opacity: this.props.brushView.opacity, + border: 'orange solid 2px', + position: 'absolute', + transform: `translate(${this.props.brushView.panX}px, ${this.props.brushView.panY}px)`, + width: this.props.brushView.width, + height: this.props.brushView.height, + transition: 'opacity 2s', + }} + /> + )} {this.presPaths} {this.progressivize} {this.zoomProgressivize} diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 58a00bbac..584c9690f 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -425,13 +425,11 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque @undoBatch @action pinWithView = async () => { - const scale = Math.min(this.props.PanelWidth() / this.Bounds.width, this.props.PanelHeight() / this.Bounds.height); const doc = this.props.Document; const viewOptions: PinViewProps = { bounds: this.Bounds, - scale: scale, }; - TabDocView.PinDoc(doc, { pinWithView: viewOptions }); + TabDocView.PinDoc(doc, { pinWithView: viewOptions, pinDocView: true }); MarqueeOptionsMenu.Instance.fadeOut(true); this.hideMarquee(); }; |