cleaned up pinning documents with an activeFrame index (and special case of isInkMask). removed text-color from pres boxes which was breaking opacity when docs had an appearFrame > 0.

1 files changed, 121 insertions, 87 deletions

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 284584a3d..e154e8445 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,26 +1,26 @@
-import { action, computed, observable, trace } from "mobx";
-import { observer } from "mobx-react";
-import { Doc, Opt } from "../../../fields/Doc";
-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 { DashColor, numberRange, OmitKeys } from "../../../Utils";
-import { DocumentManager } from "../../util/DocumentManager";
-import { SelectionManager } from "../../util/SelectionManager";
-import { Transform } from "../../util/Transform";
-import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
-import { DocComponent } from "../DocComponent";
-import { InkingStroke } from "../InkingStroke";
-import { StyleProp } from "../StyleProvider";
-import "./CollectionFreeFormDocumentView.scss";
-import { DocumentView, DocumentViewProps } from "./DocumentView";
-import React = require("react");
+import { action, computed, observable, trace } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc, Opt } from '../../../fields/Doc';
+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 { DashColor, numberRange, OmitKeys } from '../../../Utils';
+import { DocumentManager } from '../../util/DocumentManager';
+import { SelectionManager } from '../../util/SelectionManager';
+import { Transform } from '../../util/Transform';
+import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView';
+import { DocComponent } from '../DocComponent';
+import { InkingStroke } from '../InkingStroke';
+import { StyleProp } from '../StyleProvider';
+import './CollectionFreeFormDocumentView.scss';
+import { DocumentView, DocumentViewProps } from './DocumentView';
+import React = require('react');
 
 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;
-    sizeProvider?: (doc: Doc, replica: string) => { width: number, height: number } | undefined;
+    dataProvider?: (doc: Doc, replica: string) => { x: number; y: number; zIndex?: number; opacity?: number; highlight?: boolean; z: number; transition?: string } | undefined;
+    sizeProvider?: (doc: Doc, replica: string) => { width: number; height: number } | undefined;
     renderCutoffProvider: (doc: Doc) => boolean;
     zIndex?: number;
     highlight?: boolean;
@@ -32,29 +32,51 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
 
 @observer
 export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeFormDocumentViewProps>() {
-    public static animFields = ["_height", "_width", "x", "y", "_scrollTop", "opacity"];  // fields that are configured to be animatable using animation frames
+    public static animFields = ['_height', '_width', 'x', 'y', '_scrollTop', 'opacity']; // fields that are configured to be animatable using animation frames
     @observable _animPos: number[] | undefined = undefined;
     @observable _contentView: DocumentView | undefined | null;
-    get displayName() { return "CollectionFreeFormDocumentView(" + this.rootDoc.title + ")"; } // this makes mobx trace() statements more descriptive
-    get maskCentering() { return this.props.Document.isInkMask ? InkingStroke.MaskDim / 2 : 0; }
-    get transform() { return `translate(${this.X - this.maskCentering}px, ${this.Y - this.maskCentering}px) rotate(${NumCast(this.Document.jitterRotation, this.props.jitterRotation)}deg)`; }
-    get X() { return this.dataProvider ? this.dataProvider.x : NumCast(this.Document.x); }
-    get Y() { return this.dataProvider ? this.dataProvider.y : NumCast(this.Document.y); }
-    get ZInd() { return this.dataProvider ? this.dataProvider.zIndex : NumCast(this.Document.zIndex); }
-    get Opacity() { return this.dataProvider ? this.dataProvider.opacity : undefined; }
-    get Highlight() { return this.dataProvider?.highlight; }
-    @computed get ShowTitle() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.ShowTitle) as (Opt<string>); }
-    @computed get dataProvider() { return this.props.dataProvider?.(this.props.Document, this.props.replica); }
-    @computed get sizeProvider() { return this.props.sizeProvider?.(this.props.Document, this.props.replica); }
+    get displayName() {
+        return 'CollectionFreeFormDocumentView(' + this.rootDoc.title + ')';
+    } // this makes mobx trace() statements more descriptive
+    get maskCentering() {
+        return this.props.Document.isInkMask ? InkingStroke.MaskDim / 2 : 0;
+    }
+    get transform() {
+        return `translate(${this.X - this.maskCentering}px, ${this.Y - this.maskCentering}px) rotate(${NumCast(this.Document.jitterRotation, this.props.jitterRotation)}deg)`;
+    }
+    get X() {
+        return this.dataProvider ? this.dataProvider.x : NumCast(this.Document.x);
+    }
+    get Y() {
+        return this.dataProvider ? this.dataProvider.y : NumCast(this.Document.y);
+    }
+    get ZInd() {
+        return this.dataProvider ? this.dataProvider.zIndex : NumCast(this.Document.zIndex);
+    }
+    get Opacity() {
+        return this.dataProvider ? this.dataProvider.opacity : undefined;
+    }
+    get Highlight() {
+        return this.dataProvider?.highlight;
+    }
+    @computed get ShowTitle() {
+        return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.ShowTitle) as Opt<string>;
+    }
+    @computed get dataProvider() {
+        return this.props.dataProvider?.(this.props.Document, this.props.replica);
+    }
+    @computed get sizeProvider() {
+        return this.props.sizeProvider?.(this.props.Document, this.props.replica);
+    }
 
     styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string) => {
         if (property === StyleProp.Opacity && doc === this.layoutDoc) return this.Opacity; // only change the opacity for this specific document, not its children
         return this.props.styleProvider?.(doc, props, property);
-    }
+    };
 
     public static getValues(doc: Doc, time: 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);
+            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> });
     }
@@ -62,35 +84,43 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     public static setValues(time: number, d: Doc, vals: { [val: string]: Opt<number> }) {
         const timecode = Math.round(time);
         Object.keys(vals).forEach(val => {
-            const findexed = Cast(d[`${val}-indexed`], listSpec("number"), []).slice();
+            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 updateKeyframe(docs: Doc[], time: number, targetDoc?: Doc) {
         const timecode = Math.round(time);
-        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);
+        docs.forEach(
+            action(doc => {
+                doc._viewTransition = doc.dataTransition = 'all 1s';
+                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._viewTransition = doc.dataTransition = "all 1s");
-        setTimeout(() => docs.forEach(doc => { doc._viewTransition = undefined; 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) {
@@ -102,21 +132,22 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         height.push(NumCast(targDoc._height));
         top.push(NumCast(targDoc._height) / -2);
         left.push(NumCast(targDoc._width) / -2);
-        doc["viewfinder-width-indexed"] = width;
-        doc["viewfinder-height-indexed"] = height;
-        doc["viewfinder-top-indexed"] = top;
-        doc["viewfinder-left-indexed"] = left;
+        doc['viewfinder-width-indexed'] = width;
+        doc['viewfinder-height-indexed'] = height;
+        doc['viewfinder-top-indexed'] = top;
+        doc['viewfinder-left-indexed'] = left;
     }
 
     public static setupKeyframes(docs: Doc[], currTimecode: number, makeAppear: boolean = false) {
         docs.forEach(doc => {
             if (doc.appearFrame === undefined) doc.appearFrame = currTimecode;
-            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
-                doc["opacity-indexed"] = new List<number>(numberRange(currTimecode + 1).map(t => !doc.z && makeAppear && t < NumCast(doc.appearFrame) ? 0 : 1));
+            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
+                doc['opacity-indexed'] = new List<number>(numberRange(currTimecode + 1).map(t => (!doc.z && makeAppear && t < NumCast(doc.appearFrame) ? 0 : 1)));
             }
-            CollectionFreeFormDocumentView.animFields.forEach(val => doc[val] = ComputedField.MakeInterpolated(val, "activeFrame", doc, currTimecode));
-            doc.activeFrame = ComputedField.MakeFunction("self.context?._currentFrame||0");
-            doc.dataTransition = "inherit";
+            CollectionFreeFormDocumentView.animFields.forEach(val => (doc[val] = ComputedField.MakeInterpolated(val, 'activeFrame', doc, currTimecode)));
+            doc.activeFrame = ComputedField.MakeFunction('self.context?._currentFrame||0');
+            doc.dataTransition = 'inherit';
         });
     }
 
@@ -131,7 +162,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 topDoc.x = spt[0];
                 topDoc.y = spt[1];
                 this.props.removeDocument?.(topDoc);
-                this.props.addDocTab(topDoc, "inParent");
+                this.props.addDocTab(topDoc, 'inParent');
             } else {
                 const spt = this.screenToLocalTransform().inverse().transformPoint(0, 0);
                 const fpt = screenXf.transformPoint(spt[0], spt[1]);
@@ -141,14 +172,14 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             }
             setTimeout(() => SelectionManager.SelectView(DocumentManager.Instance.getDocumentView(topDoc, container)!, false), 0);
         }
-    }
+    };
 
     nudge = (x: number, y: number) => {
         this.props.Document.x = NumCast(this.props.Document.x) + x;
         this.props.Document.y = NumCast(this.props.Document.y) + y;
-    }
-    panelWidth = () => (this.sizeProvider?.width || this.props.PanelWidth?.());
-    panelHeight = () => (this.sizeProvider?.height || this.props.PanelHeight?.());
+    };
+    panelWidth = () => this.sizeProvider?.width || this.props.PanelWidth?.();
+    panelHeight = () => this.sizeProvider?.height || this.props.PanelHeight?.();
     screenToLocalTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y);
     focusDoc = (doc: Doc) => this.props.focus(doc);
     returnThis = () => this;
@@ -163,24 +194,27 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             PanelHeight: this.panelHeight,
         };
         const background = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-        const mixBlendMode = StrCast(this.layoutDoc.mixBlendMode) as any || (typeof background === "string" && background && (!background.startsWith("linear") && DashColor(background).alpha() !== 1) ? "multiply" : undefined);
-        return <div className={"collectionFreeFormDocumentView-container"}
-            style={{
-                outline: this.Highlight ? "orange solid 2px" : "",
-                width: this.panelWidth(),
-                height: this.panelHeight(),
-                transform: this.transform,
-                transformOrigin: '50% 50%',
-                transition: this.dataProvider?.transition ?? (this.props.dataTransition ? this.props.dataTransition : this.dataProvider ? this.dataProvider.transition : StrCast(this.layoutDoc.dataTransition)),
-                zIndex: this.ZInd,
-                mixBlendMode: mixBlendMode,
-                display: this.ZInd === -99 ? "none" : undefined
-            }} >
-            {this.props.renderCutoffProvider(this.props.Document) ?
-                <div style={{ position: "absolute", width: this.panelWidth(), height: this.panelHeight(), background: "lightGreen" }} />
-                :
-                <DocumentView {...divProps} ref={action((r: DocumentView | null) => this._contentView = r)} />
-            }
-        </div>;
+        const mixBlendMode = (StrCast(this.layoutDoc.mixBlendMode) as any) || (typeof background === 'string' && background && !background.startsWith('linear') && DashColor(background).alpha() !== 1 ? 'multiply' : undefined);
+        return (
+            <div
+                className={'collectionFreeFormDocumentView-container'}
+                style={{
+                    outline: this.Highlight ? 'orange solid 2px' : '',
+                    width: this.panelWidth(),
+                    height: this.panelHeight(),
+                    transform: this.transform,
+                    transformOrigin: '50% 50%',
+                    transition: this.dataProvider?.transition ?? (this.props.dataTransition ? this.props.dataTransition : this.dataProvider ? this.dataProvider.transition : StrCast(this.layoutDoc.dataTransition)),
+                    zIndex: this.ZInd,
+                    mixBlendMode: mixBlendMode,
+                    display: this.ZInd === -99 ? 'none' : undefined,
+                }}>
+                {this.props.renderCutoffProvider(this.props.Document) ? (
+                    <div style={{ position: 'absolute', width: this.panelWidth(), height: this.panelHeight(), background: 'lightGreen' }} />
+                ) : (
+                    <DocumentView {...divProps} ref={action((r: DocumentView | null) => (this._contentView = r))} />
+                )}
+            </div>
+        );
     }
 }