From aa7582dd4a46b6385e0be5bdc02f3d1076cab5b2 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 8 Dec 2020 11:05:44 -0500 Subject: cleaned up presEffects a bit so that they're part of PresBox --- .../views/nodes/CollectionFreeFormDocumentView.tsx | 80 ++++------------------ src/client/views/nodes/DocumentView.tsx | 30 ++++---- src/client/views/nodes/PresBox.tsx | 39 +++++++++-- 3 files changed, 63 insertions(+), 86 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index a17816705..51ed49df3 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -1,7 +1,6 @@ import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; -import { Bounce, Fade, Flip, LightSpeed, Roll, Rotate, Zoom } from 'react-reveal'; -import { Doc, HeightSym, WidthSym, Opt } from "../../../fields/Doc"; +import { Doc, HeightSym, Opt, WidthSym } from "../../../fields/Doc"; import { Document } from "../../../fields/documentSchemas"; import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; @@ -16,7 +15,6 @@ import { InkingStroke } from "../InkingStroke"; import "./CollectionFreeFormDocumentView.scss"; import { ContentFittingDocumentView } from "./ContentFittingDocumentView"; import { DocumentView, DocumentViewProps } from "./DocumentView"; -import { PresBox, PresEffect } from "./PresBox"; import React = require("react"); export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { @@ -80,23 +78,6 @@ export class CollectionFreeFormDocumentView extends DocComponent doc.dataTransition = "inherit", 1010); - // } - - // public static setupScroll(doc: Doc, timecode: number) { - // const scrollList = new List(); - // scrollList[timecode] = NumCast(doc._scrollTop); - // doc["scroll-indexed"] = scrollList; - // doc.activeFrame = ComputedField.MakeFunction("self._currentFrame"); - // doc._scrollTop = ComputedField.MakeInterpolated("scroll", "activeFrame"); - // } - - public static updateKeyframe(docs: Doc[], time: number, targetDoc?: Doc) { const timecode = Math.round(time); docs.forEach(action(doc => { @@ -151,46 +132,6 @@ export class CollectionFreeFormDocumentView extends DocComponent this._contentView = r)} /> : - ; - } - @computed get effectsNodeDiv() { - const effectProps = { - left: this.layoutDoc.presEffectDirection === PresEffect.Left, - right: this.layoutDoc.presEffectDirection === PresEffect.Right, - top: this.layoutDoc.presEffectDirection === PresEffect.Top, - bottom: this.layoutDoc.presEffectDirection === PresEffect.Bottom, - opposite: true, - delay: this.layoutDoc.presTransition, - // when: this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc, - }; - switch (this.layoutDoc.presEffect) { - case "Zoom": return ({this.freeformNodeDiv}); - case PresEffect.Fade: return ({this.freeformNodeDiv}); - case PresEffect.Flip: return ({this.freeformNodeDiv}); - case PresEffect.Rotate: return ({this.freeformNodeDiv}); - case PresEffect.Bounce: return ({this.freeformNodeDiv}); - case PresEffect.Roll: return ({this.freeformNodeDiv}); - case "LightSpeed": return ({this.freeformNodeDiv}); - case PresEffect.None: - default: return this.freeformNodeDiv; - } - } - contentScaling = () => this.nativeWidth > 0 && !this.props.fitToBox && !this.freezeDimensions ? this.width / this.nativeWidth : 1; panelWidth = () => (this.sizeProvider?.width || this.props.PanelWidth?.()); panelHeight = () => (this.sizeProvider?.height || this.props.PanelHeight?.()); @@ -208,6 +149,17 @@ export class CollectionFreeFormDocumentView extends DocComponent } - {PresBox.Instance && this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc ? - this.effectsNodeDiv - : - this.freeformNodeDiv - } + {this.props.fitToBox ? + this._contentView = r)} /> : + } ; } } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 53d6c0ddb..903e7e478 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,7 +1,6 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { AclAdmin, AclEdit, AclPrivate, DataSym, Doc, DocListCast, Field, HeightSym, Opt, WidthSym, StrListCast } from "../../../fields/Doc"; +import { AclAdmin, AclEdit, AclPrivate, DataSym, Doc, DocListCast, Field, Opt } from "../../../fields/Doc"; import { Document } from '../../../fields/documentSchemas'; import { Id } from '../../../fields/FieldSymbols'; import { InkTool } from '../../../fields/InkField'; @@ -12,7 +11,7 @@ import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Ty import { GetEffectiveAcl, TraceMobx } from '../../../fields/util'; import { MobileInterface } from '../../../mobile/MobileInterface'; import { GestureUtils } from '../../../pen-gestures/GestureUtils'; -import { emptyFunction, OmitKeys, returnOne, returnTransparent, returnVal, Utils, returnFalse, returnTrue } from "../../../Utils"; +import { emptyFunction, OmitKeys, returnFalse, returnOne, returnTrue, returnVal, Utils } from "../../../Utils"; import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils'; import { Docs, DocUtils } from "../../documents/Documents"; import { DocumentType } from '../../documents/DocumentTypes'; @@ -38,10 +37,10 @@ import { DocumentLinksButton } from './DocumentLinksButton'; import "./DocumentView.scss"; import { LinkAnchorBox } from './LinkAnchorBox'; import { LinkDescriptionPopup } from './LinkDescriptionPopup'; +import { PresBox } from './PresBox'; import { RadialMenu } from './RadialMenu'; import { TaskCompletionBox } from './TaskCompletedBox'; import React = require("react"); -import { List } from '../../../fields/List'; export type DocAfterFocusFunc = (notFocused: boolean) => boolean; export type DocFocusFunc = (doc: Doc, willZoom?: boolean, scale?: number, afterFocus?: DocAfterFocusFunc, dontCenter?: boolean, focused?: boolean) => void; @@ -655,7 +654,6 @@ export class DocumentView extends DocComponent(Docu this.Document.onClick = this.layoutDoc.onClick = undefined; } - @undoBatch noOnClick = (): void => { this.Document.ignoreClick = false; @@ -1084,8 +1082,7 @@ export class DocumentView extends DocComponent(Docu }), 400); }); - - render() { + @computed get renderDoc() { TraceMobx(); if (!(this.props.Document instanceof Doc)) return (null); if (GetEffectiveAcl(this.props.Document[DataSym]) === AclPrivate) return (null); @@ -1106,21 +1103,15 @@ export class DocumentView extends DocComponent(Docu const topmost = this.topMost ? "-topmost" : ""; return this.props.styleProvider?.(this.rootDoc, this.props, "docContents", this.props.layerProvider) ??
!SnappingManager.GetIsDragging() && Doc.BrushDoc(this.props.Document))} onPointerLeave={action(e => { let entered = false; - const target = document.elementFromPoint(e.nativeEvent.x, e.nativeEvent.y); - for (let child: any = target; child; child = child?.parentElement) { - if (child === this.ContentDiv) { - entered = true; - } + for (let child = document.elementFromPoint(e.nativeEvent.x, e.nativeEvent.y); child; child = child.parentElement) { + entered = entered || child === this.ContentDiv; } - // if (this.props.Document !== DocumentLinksButton.StartLink?.Document) { !entered && Doc.UnBrushDoc(this.props.Document); - //} - })} style={{ transformOrigin: this._animateScalingTo ? "center center" : undefined, @@ -1142,12 +1133,17 @@ export class DocumentView extends DocComponent(Docu }}> {this.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ? <> {this.innards} -
+
: this.innards} {!this.props.treeViewDoc && this.props.styleProvider?.(this.rootDoc, this.props, this.isSelected() ? "decorations:selected" : "decorations", this.props.layerProvider) || (null)}
; } + render() { + return
+ {PresBox.EffectsProvider(this.layoutDoc, this.renderDoc) || this.renderDoc} +
; + } } Scripting.addGlobal(function toggleDetail(doc: any, layoutKey: string, otherKey: string = "layout") { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index a4f79571e..5985225e3 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -1,10 +1,11 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Tooltip } from "@material-ui/core"; -import { action, computed, observable, runInAction, ObservableMap, IReactionDisposer, reaction } from "mobx"; +import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import { ColorState, SketchPicker } from "react-color"; -import { Doc, DocCastAsync, DocListCast, DocListCastAsync } from "../../../fields/Doc"; +import { Bounce, Fade, Flip, LightSpeed, Roll, Rotate, Zoom } from 'react-reveal'; +import { Doc, DocListCast, DocListCastAsync } from "../../../fields/Doc"; import { documentSchema } from "../../../fields/documentSchemas"; import { InkTool } from "../../../fields/InkField"; import { List } from "../../../fields/List"; @@ -12,7 +13,7 @@ import { PrefetchProxy } from "../../../fields/Proxy"; import { listSpec, makeInterface } from "../../../fields/Schema"; import { ScriptField } from "../../../fields/ScriptField"; import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types"; -import { returnFalse, returnOne, returnZero } from "../../../Utils"; +import { returnFalse, returnOne } from "../../../Utils"; import { Docs } from "../../documents/Documents"; import { DocumentType } from "../../documents/DocumentTypes"; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; @@ -28,7 +29,6 @@ import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView import { FieldView, FieldViewProps } from './FieldView'; import "./PresBox.scss"; import Color = require("color"); -import { clear } from "console"; export enum PresMovement { Zoom = "zoom", @@ -38,6 +38,8 @@ export enum PresMovement { } export enum PresEffect { + Zoom = "Zoom", + Lightspeed = "Lightspeed", Fade = "Fade in", Flip = "Flip", Rotate = "Rotate", @@ -71,6 +73,35 @@ const PresBoxDocument = makeInterface(documentSchema); export class PresBox extends ViewBoxBaseComponent(PresBoxDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); } + static renderEffectsDoc(renderDoc: any, layoutDoc: Doc) { + const effectProps = { + left: layoutDoc.presEffectDirection === PresEffect.Left, + right: layoutDoc.presEffectDirection === PresEffect.Right, + top: layoutDoc.presEffectDirection === PresEffect.Top, + bottom: layoutDoc.presEffectDirection === PresEffect.Bottom, + opposite: true, + delay: layoutDoc.presTransition, + // when: this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc, + }; + switch (layoutDoc.presEffect) { + case PresEffect.Zoom: return ({renderDoc}); + case PresEffect.Fade: return ({renderDoc}); + case PresEffect.Flip: return ({renderDoc}); + case PresEffect.Rotate: return ({renderDoc}); + case PresEffect.Bounce: return ({renderDoc}); + case PresEffect.Roll: return ({renderDoc}); + case PresEffect.Lightspeed: return ({renderDoc}); + case PresEffect.None: + default: return renderDoc; + } + } + public static EffectsProvider(layoutDoc: Doc, renderDoc: any) { + return PresBox.Instance && layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc ? + PresBox.renderEffectsDoc(renderDoc, layoutDoc) + : + renderDoc; + } + @observable public static Instance: PresBox; @observable _isChildActive = false; -- cgit v1.2.3-70-g09d2