diff options
Diffstat (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')
| -rw-r--r-- | src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 232 |
1 files changed, 63 insertions, 169 deletions
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 94793ffff..b4b887617 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -1,25 +1,21 @@ -import { computed, IReactionDisposer, observable, reaction, trace, action } from "mobx"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; -import { Doc, HeightSym, WidthSym } 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"; +import { ComputedField } from "../../../fields/ScriptField"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; +import { TraceMobx } from "../../../fields/util"; +import { numberRange, returnVal } from "../../../Utils"; +import { DocumentType } from "../../documents/DocumentTypes"; import { Transform } from "../../util/Transform"; import { DocComponent } from "../DocComponent"; +import { InkingStroke } from "../InkingStroke"; import "./CollectionFreeFormDocumentView.scss"; +import { ContentFittingDocumentView } from "./ContentFittingDocumentView"; import { DocumentView, DocumentViewProps } from "./DocumentView"; import React = require("react"); -import { Document } from "../../../fields/documentSchemas"; -import { TraceMobx } from "../../../fields/util"; -import { ContentFittingDocumentView } from "./ContentFittingDocumentView"; -import { List } from "../../../fields/List"; -import { numberRange, smoothScroll, returnVal } from "../../../Utils"; -import { ComputedField } from "../../../fields/ScriptField"; -import { listSpec } from "../../../fields/Schema"; -import { DocumentType } from "../../documents/DocumentTypes"; -import { Zoom, Fade, Flip, Rotate, Bounce, Roll, LightSpeed } from 'react-reveal'; -import { PresBox, PresEffect } from "./PresBox"; -import { InkingStroke } from "../InkingStroke"; -import { SnappingManager } from "../../util/SnappingManager"; -import { InkTool } from "../../../fields/InkField"; export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { dataProvider?: (doc: Doc, replica: string) => { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined; @@ -62,98 +58,48 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, undefined, this.freezeDimensions)); } @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, undefined, this.freezeDimensions)); } + static animFields = ["_height", "_width", "x", "y", "_scrollTop", "opacity"]; public static getValues(doc: Doc, time: number) { - const timecode = Math.round(time); - return ({ - h: Cast(doc["h-indexed"], listSpec("number"), [NumCast(doc._height)]).reduce((p, h, i) => (i <= timecode && h !== undefined) || p === undefined ? h : p, undefined as any as number), - w: Cast(doc["w-indexed"], listSpec("number"), [NumCast(doc._width)]).reduce((p, w, i) => (i <= timecode && w !== undefined) || p === undefined ? w : p, undefined as any as number), - x: Cast(doc["x-indexed"], listSpec("number"), [NumCast(doc.x)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number), - y: Cast(doc["y-indexed"], listSpec("number"), [NumCast(doc.y)]).reduce((p, y, i) => (i <= timecode && y !== undefined) || p === undefined ? y : p, undefined as any as number), - scroll: Cast(doc["scroll-indexed"], listSpec("number"), [NumCast(doc._scrollTop, 0)]).reduce((p, s, i) => (i <= timecode && s !== undefined) || p === undefined ? s : p, undefined as any as number), - opacity: Cast(doc["opacity-indexed"], listSpec("number"), [NumCast(doc.opacity, 1)]).reduce((p, o, i) => i <= timecode || p === undefined ? o : p, undefined as any as number), - }); + return CollectionFreeFormDocumentView.animFields.reduce((p, val) => { + p[val] = Cast(`${val}-indexed`, listSpec("number"), [NumCast(doc[val])]).reduce((p, v, i) => (i <= Math.round(time) && v !== undefined) || p === undefined ? v : p, undefined as any as number); + return p; + }, {} as { [val: string]: Opt<number> }); } - public static setValues(time: number, d: Doc, x?: number, y?: number, h?: number, w?: number, scroll?: number, opacity?: number) { + public static setValues(time: number, d: Doc, vals: { [val: string]: Opt<number> }) { const timecode = Math.round(time); - const hindexed = Cast(d["h-indexed"], listSpec("number"), []).slice(); - const windexed = Cast(d["w-indexed"], listSpec("number"), []).slice(); - const xindexed = Cast(d["x-indexed"], listSpec("number"), []).slice(); - const yindexed = Cast(d["y-indexed"], listSpec("number"), []).slice(); - const oindexed = Cast(d["opacity-indexed"], listSpec("number"), []).slice(); - const scrollIndexed = Cast(d["scroll-indexed"], listSpec("number"), []).slice(); - xindexed[timecode] = x as any as number; - yindexed[timecode] = y as any as number; - hindexed[timecode] = h as any as number; - windexed[timecode] = w as any as number; - oindexed[timecode] = opacity as any as number; - if (scroll) scrollIndexed[timecode] = scroll as any as number; - d["x-indexed"] = new List<number>(xindexed); - d["y-indexed"] = new List<number>(yindexed); - d["h-indexed"] = new List<number>(hindexed); - d["w-indexed"] = new List<number>(windexed); - d["opacity-indexed"] = new List<number>(oindexed); - d["scroll-indexed"] = new List<number>(scrollIndexed); - if (d.appearFrame) { - if (d.appearFrame === timecode + 1) { - d["text-color"] = "red"; - } else if (d.appearFrame < timecode + 1) { - d["text-color"] = "grey"; - } else { d["text-color"] = "black"; } - } else if (d.appearFrame === 0) { - } + Object.keys(vals).forEach(val => { + const findexed = Cast(d[`${val}-indexed`], listSpec("number"), []).slice(); + findexed[timecode] = vals[val] as any as number; + d[`${val}-indexed`] = new List<number>(findexed); + }); + d.appearFrame && (d["text-color"] = + d.appearFrame === timecode + 1 ? "red" : + d.appearFrame < timecode + 1 ? "grey" : "black"); } - // public static updateScrollframe(doc: Doc, time: number) { - // console.log('update scroll frame'); - // const timecode = Math.round(time); - // const scrollIndexed = Cast(doc['scroll-indexed'], listSpec("number"), null); - // scrollIndexed?.length <= timecode + 1 && scrollIndexed.push(undefined as any as number); - // setTimeout(() => doc.dataTransition = "inherit", 1010); - // } - - // public static setupScroll(doc: Doc, timecode: number) { - // const scrollList = new List<number>(); - // 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(doc => { - const xindexed = Cast(doc['x-indexed'], listSpec("number"), null); - const yindexed = Cast(doc['y-indexed'], listSpec("number"), null); - const hindexed = Cast(doc['h-indexed'], listSpec("number"), null); - const windexed = Cast(doc['w-indexed'], listSpec("number"), null); - const opacityindexed = Cast(doc['opacity-indexed'], listSpec("number"), null); - hindexed?.length <= timecode + 1 && hindexed.push(undefined as any as number); - windexed?.length <= timecode + 1 && windexed.push(undefined as any as number); - xindexed?.length <= timecode + 1 && xindexed.push(undefined as any as number); - yindexed?.length <= timecode + 1 && yindexed.push(undefined as any as number); - opacityindexed?.length <= timecode + 1 && opacityindexed.push(undefined as any as number); - if (doc.appearFrame && targetDoc) { - if (doc.appearFrame === timecode + 1) { - doc["text-color"] = StrCast(targetDoc["pres-text-color"]); - } else if (doc.appearFrame < timecode + 1) { - doc["text-color"] = StrCast(targetDoc["pres-text-viewed-color"]); - } else { doc["text-color"] = "black"; } - } else if (doc.appearFrame === 0) { - doc["text-color"] = "black"; - } - doc.dataTransition = "all 1s"; - }); - setTimeout(() => docs.forEach(doc => doc.dataTransition = "inherit"), 1010); + docs.forEach(action(doc => { + doc._viewTransition = doc.dataTransition = "all 1s"; + doc["text-color"] = + !doc.appearFrame || !targetDoc ? "black" : + doc.appearFrame === timecode + 1 ? StrCast(targetDoc["pres-text-color"]) : + doc.appearFrame < timecode + 1 ? StrCast(targetDoc["pres-text-viewed-color"]) : + "black"; + CollectionFreeFormDocumentView.animFields.forEach(val => { + const findexed = Cast(doc[`${val}-indexed`], listSpec("number"), null); + findexed?.length <= timecode + 1 && findexed.push(undefined as any as number); + }); + })); + setTimeout(() => docs.forEach(doc => { doc._viewTransition = undefined; doc.dataTransition = "inherit"; }), 1010); } public static gotoKeyframe(docs: Doc[]) { - docs.forEach(doc => doc.dataTransition = "all 1s"); - setTimeout(() => docs.forEach(doc => doc.dataTransition = "inherit"), 1010); + docs.forEach(doc => doc._viewTransition = doc.dataTransition = "all 1s"); + setTimeout(() => docs.forEach(doc => { doc._viewTransition = undefined; doc.dataTransition = "inherit"; }), 1010); } - public static setupZoom(doc: Doc, targDoc: Doc) { const width = new List<number>(); const height = new List<number>(); @@ -172,27 +118,12 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF public static setupKeyframes(docs: Doc[], currTimecode: number, makeAppear: boolean = false) { docs.forEach(doc => { if (doc.appearFrame === undefined) doc.appearFrame = currTimecode; - const curTimecode = currTimecode; - const xlist = new List<number>(numberRange(currTimecode + 1).map(i => undefined) as any as number[]); - const ylist = new List<number>(numberRange(currTimecode + 1).map(i => undefined) as any as number[]); - const wlist = new List<number>(numberRange(currTimecode + 1).map(i => undefined) as any as number[]); - const hlist = new List<number>(numberRange(currTimecode + 1).map(i => undefined) as any as number[]); - const olist = new List<number>(numberRange(currTimecode + 1).map(t => !doc.z && makeAppear && t < NumCast(doc.appearFrame) ? 0 : 1)); - wlist[curTimecode] = NumCast(doc._width); - hlist[curTimecode] = NumCast(doc._height); - xlist[curTimecode] = NumCast(doc.x); - ylist[curTimecode] = NumCast(doc.y); - doc["x-indexed"] = xlist; - doc["y-indexed"] = ylist; - doc["w-indexed"] = wlist; - doc["h-indexed"] = hlist; - doc["opacity-indexed"] = olist; + if (!doc["opacity-indexed"]) { // opacity is unlike other fields because it's value should not be undefined before it appears to enable it to fade-in + const olist = new List<number>(numberRange(currTimecode + 1).map(t => !doc.z && makeAppear && t < NumCast(doc.appearFrame) ? 0 : 1)); + doc["opacity-indexed"] = olist; + } + CollectionFreeFormDocumentView.animFields.forEach(val => doc[val] = ComputedField.MakeInterpolated(val, "activeFrame", doc, currTimecode)); doc.activeFrame = ComputedField.MakeFunction("self.context?._currentFrame||0"); - doc._height = ComputedField.MakeInterpolated("h", "activeFrame"); - doc._width = ComputedField.MakeInterpolated("w", "activeFrame"); - doc.x = ComputedField.MakeInterpolated("x", "activeFrame"); - doc.y = ComputedField.MakeInterpolated("y", "activeFrame"); - doc.opacity = ComputedField.MakeInterpolated("opacity", "activeFrame"); doc.dataTransition = "inherit"; }); } @@ -201,46 +132,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF this.props.Document.x = NumCast(this.props.Document.x) + x; this.props.Document.y = NumCast(this.props.Document.y) + y; } - - @computed get freeformNodeDiv() { - const node = <DocumentView {...this.props} - nudge={this.nudge} - dragDivName={"collectionFreeFormDocumentView-container"} - ContentScaling={this.contentScaling} - ScreenToLocalTransform={this.getTransform} - styleProvider={this.props.styleProvider} - opacity={this.opacity} - layerProvider={this.props.layerProvider} - NativeHeight={this.NativeHeight} - NativeWidth={this.NativeWidth} - PanelWidth={this.panelWidth} - PanelHeight={this.panelHeight} />; - if (PresBox.Instance && this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc) { - 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 (<Zoom {...effectProps}>{node}</Zoom>); break; - case PresEffect.Fade: return (<Fade {...effectProps}>{node}</Fade>); break; - case PresEffect.Flip: return (<Flip {...effectProps}>{node}</Flip>); break; - case PresEffect.Rotate: return (<Rotate {...effectProps}>{node}</Rotate>); break; - case PresEffect.Bounce: return (<Bounce {...effectProps}>{node}</Bounce>); break; - case PresEffect.Roll: return (<Roll {...effectProps}>{node}</Roll>); break; - case "LightSpeed": return (<LightSpeed {...effectProps}>{node}</LightSpeed>); break; - case PresEffect.None: return node; break; - default: return node; break; - } - } else { - return node; - } - } - 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?.()); @@ -251,18 +142,30 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF NativeHeight = () => this.nativeHeight; @computed get pointerEvents() { if (this.props.pointerEvents === "none") return "none"; - return this.props.styleProvider?.(this.Document, this.props, !this._contentView?.docView?.isSelected() ? "pointerEvents:selected" : "pointerEvents", this.props.layerProvider); + return this.props.styleProvider?.(this.Document, this.props, !this._contentView?.docView?.isSelected() ? "pointerEvents:selected" : "pointerEvents"); } render() { TraceMobx(); - const backgroundColor = this.props.styleProvider?.(this.Document, this.props, "backgroundColor", this.props.layerProvider); + const backgroundColor = this.props.styleProvider?.(this.Document, this.props, "backgroundColor"); const borderRounding = StrCast(Doc.Layout(this.layoutDoc).borderRounding) || StrCast(this.layoutDoc.borderRounding) || StrCast(this.Document.borderRounding) || undefined; + + const divProps = { + ...this.props, + nudge: this.nudge, + dragDivName: "collectionFreeFormDocumentView-container", + opacity: this.opacity, + ScreenToLocalTransform: this.getTransform, + NativeHeight: this.NativeHeight, + NativeWidth: this.NativeWidth, + PanelWidth: this.panelWidth, + PanelHeight: this.panelHeight + }; return <div className="collectionFreeFormDocumentView-container" style={{ boxShadow: this.Opacity === 0 ? undefined : // if it's not visible, then no shadow this.layoutDoc.z ? `#9c9396 ${StrCast(this.layoutDoc.boxShadow, "10px 10px 0.9vw")}` : // if it's a floating doc, give it a big shadow - this.props.backgroundHalo?.(this.props.Document) && this.props.Document.type !== DocumentType.INK ? (`${this.props.styleProvider?.(this.props.Document, this.props, "backgroundColor", this.props.layerProvider)} ${StrCast(this.layoutDoc.boxShadow, `0vw 0vw ${(Cast(this.layoutDoc.layers, listSpec("string"), []).includes("background") ? 100 : 50) / this.props.ContentScaling()}px`)}`) : // if it's just in a cluster, make the shadown roughly match the cluster border extent + this.props.backgroundHalo?.(this.props.Document) && this.props.Document.type !== DocumentType.INK ? (`${this.props.styleProvider?.(this.props.Document, this.props, "backgroundColor")} ${StrCast(this.layoutDoc.boxShadow, `0vw 0vw ${(Cast(this.layoutDoc.layers, listSpec("string"), []).includes("background") ? 100 : 50) / this.props.ContentScaling()}px`)}`) : // if it's just in a cluster, make the shadown roughly match the cluster border extent Cast(this.layoutDoc.layers, listSpec("string"), []).includes('background') ? undefined : // if it's a background & has a cluster color, make the shadow spread really big StrCast(this.layoutDoc.boxShadow, ""), borderRadius: borderRounding, @@ -286,18 +189,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF </svg> </div>} - {!this.props.fitToBox ? - <>{this.freeformNodeDiv}</> - : <ContentFittingDocumentView {...this.props} - ref={action((r: ContentFittingDocumentView | null) => this._contentView = r)} - ContainingCollectionDoc={this.props.ContainingCollectionDoc} - DataDoc={this.props.DataDoc} - ScreenToLocalTransform={this.getTransform} - NativeHeight={this.NativeHeight} - NativeWidth={this.NativeWidth} - PanelWidth={this.panelWidth} - PanelHeight={this.panelHeight} - />} + {this.props.fitToBox ? + <ContentFittingDocumentView {...divProps} ref={action((r: ContentFittingDocumentView | null) => this._contentView = r)} /> : + <DocumentView {...divProps} ContentScaling={this.contentScaling} />} </div>; } } |