From 3ebb44420ebe8621be355478cbd45656a5224303 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 19 Nov 2023 13:49:19 -0500 Subject: fixed animations of text html overlays and turned off overflow hidden so that rotation doesn't get clipped. cleaned up docView querying for Selection --- .../collections/CollectionStackedTimeline.tsx | 4 +-- src/client/views/collections/TreeView.tsx | 2 +- src/client/views/nodes/DocumentView.scss | 1 - src/client/views/nodes/DocumentView.tsx | 40 ++++++++++++++-------- 4 files changed, 29 insertions(+), 18 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index 584098d35..3351ca48e 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -784,7 +784,7 @@ class StackedTimelineAnchor extends React.Component // renders anchor LabelBox renderInner = computedFn(function (this: StackedTimelineAnchor, mark: Doc, script: undefined | (() => ScriptField), doublescript: undefined | (() => ScriptField), screenXf: () => Transform, width: () => number, height: () => number) { - const anchor = observable({ view: undefined as any }); + const anchor = observable({ view: undefined as Opt | null }); const focusFunc = (doc: Doc, options: DocFocusOptions): number | undefined => { this.props.playLink(mark, options); return undefined; @@ -838,7 +838,7 @@ class StackedTimelineAnchor extends React.Component return (
{inner.view} - {!inner.anchor.view || !SelectionManager.IsSelected(inner.anchor.view) ? null : ( + {!inner.anchor.view || !inner.anchor.view.SELECTED ? null : ( <>
this.onAnchorDown(e, this.props.mark, true)} />
this.onAnchorDown(e, this.props.mark, false)} /> diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index dbce45fda..004857ed1 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -165,7 +165,7 @@ export class TreeView extends React.Component { return this.childDocList(this.fieldKey + '_annotations'); } @computed get selected() { - return SelectionManager.IsSelected(this._docRef); + return this._docRef?.SELECTED; } childDocList(field: string) { diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 505e937c5..406a1b8fb 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -61,7 +61,6 @@ .documentView-htmlOverlayInner { box-shadow: black 0.2vw 0.2vw 0.8vw; background: rgb(255, 255, 255); - overflow: auto; position: relative; margin: auto; padding: 20px; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 9d30a92b0..66a431bf0 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1364,9 +1364,10 @@ export class DocumentView extends React.Component { } @observable public docView: DocumentViewInternal | undefined | null; @observable public textHtmlOverlay: Opt; + @observable public textHtmlOverlayTime: Opt; @observable private _isHovering = false; - public htmlOverlayEffect = ''; + public htmlOverlayEffect: Opt; public get displayName() { return 'DocumentView(' + this.props.Document?.title + ')'; } // this makes mobx trace() statements more descriptive @@ -1596,7 +1597,7 @@ export class DocumentView extends React.Component { scaleToScreenSpace = () => (1 / (this.props.NativeDimScaling?.() || 1)) * this.screenToLocalTransform().Scale; docViewPathFunc = () => this.docViewPath; - isSelected = () => SelectionManager.IsSelected(this); + isSelected = () => this.SELECTED; select = (extendSelection: boolean, focusSelection?: boolean) => { if (this.isSelected() && SelectionManager.Views().length > 1) SelectionManager.DeselectView(this); else { @@ -1643,19 +1644,30 @@ export class DocumentView extends React.Component { Object.values(this._disposers).forEach(disposer => disposer?.()); !BoolCast(this.props.Document.dontRegisterView, this.props.dontRegisterView) && DocumentManager.Instance.RemoveView(this); } + // want the htmloverlay to be able to fade in but we also want it to be display 'none' until it is needed. + // unfortunately, CSS can't transition animate any properties for something that is display 'none'. + // so we need to first activate the div, then, after a render timeout, start the opacity transition. + @observable enableHtmlOverlayTransitions: boolean = false; @computed get htmlOverlay() { - return !this.textHtmlOverlay ? null : ( -
-
- - {DocumentViewInternal.AnimationEffect( -
- console.log('PARSE error', e)} renderInWrapper={false} jsx={StrCast(this.textHtmlOverlay)} /> -
, - { presentation_effect: this.htmlOverlayEffect ?? 'Zoom' } as any as Doc, - this.rootDoc - )}{' '} - + const effect = StrCast(this.htmlOverlayEffect?.presentation_effect, StrCast(this.htmlOverlayEffect?.followLinkAnimEffect)); + return ( +
{ + const val = r?.style.display !== 'none'; // if the outer overlay has been displayed, trigger the innner div to start it's opacity fade in transition + if (r && val !== this.enableHtmlOverlayTransitions) { + setTimeout(action(() => (this.enableHtmlOverlayTransitions = val))); + } + }} + style={{ display: !this.textHtmlOverlay ? 'none' : undefined }}> +
+ {DocumentViewInternal.AnimationEffect( +
+ console.log('PARSE error', e)} renderInWrapper={false} jsx={StrCast(this.textHtmlOverlay)} /> +
, + { ...(this.htmlOverlayEffect ?? {}), presentation_effect: effect ?? PresEffect.Zoom } as any as Doc, + this.rootDoc + )}
); -- cgit v1.2.3-70-g09d2