cleanup. fix color setting/interpolation for freeform animated views.

4 files changed, 30 insertions, 71 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
index f9f9b5637..4484f664f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -28,6 +28,8 @@ export interface ViewDefBounds {
 }
 
 export interface PoolData {
+    pair: { layout: Doc; data?: Doc };
+    replica: string;
     x: number;
     y: number;
     z?: number;
@@ -40,9 +42,7 @@ export interface PoolData {
     opacity?: number;
     transition?: string;
     highlight?: boolean;
-    replica: string;
-    pointerEvents?: string; // without this, toggling lockPosition of a group/collection in a freeform view won't update until something else invalidates the freeform view's documents forcing -- this is a problem with doLayoutComputation which makes a performance test to insure somethingChanged
-    pair: { layout: Doc; data?: Doc };
+    pointerEvents?: string;
 }
 
 export interface ViewDefResult {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index ce1aa87af..27c3eaa93 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -35,6 +35,7 @@ import { COLLECTION_BORDER_WIDTH } from '../../../views/global/globalCssVariable
 import { Timeline } from '../../animationtimeline/Timeline';
 import { ContextMenu } from '../../ContextMenu';
 import { GestureOverlay } from '../../GestureOverlay';
+import { CtrlKey } from '../../GlobalKeyHandler';
 import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, InkingStroke, SetActiveInkColor, SetActiveInkWidth } from '../../InkingStroke';
 import { LightboxView } from '../../LightboxView';
 import { CollectionFreeFormDocumentView } from '../../nodes/CollectionFreeFormDocumentView';
@@ -52,7 +53,6 @@ import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCurso
 import './CollectionFreeFormView.scss';
 import { MarqueeView } from './MarqueeView';
 import React = require('react');
-import { CtrlKey } from '../../GlobalKeyHandler';
 
 export type collectionFreeformViewProps = {
     NativeWidth?: () => number;
@@ -1422,7 +1422,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             x: Number.isNaN(NumCast(x)) ? 0 : NumCast(x),
             y: Number.isNaN(NumCast(y)) ? 0 : NumCast(y),
             z: Cast(z, 'number'),
-            rotation: rotation,
+            rotation,
             color: Cast(color, 'string') ? StrCast(color) : this.props.styleProvider?.(childDoc, this.props, StyleProp.Color),
             backgroundColor: Cast(backgroundColor, 'string') ? StrCast(backgroundColor) : this.getClusterColor(childDoc, this.props, StyleProp.BackgroundColor),
             opacity: !_width ? 0 : this._keyframeEditing ? 1 : Cast(opacity, 'number') ?? this.props.styleProvider?.(childDoc, this.props, StyleProp.Opacity),
@@ -1558,13 +1558,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 this._layoutSizeData.set(entry[0], { width: newPos.width, height: newPos.height });
             }
         }
-        // by returning undefined, we prevent an edit being made to layoutElements when nothing has happened
-        // this short circuit, prevents lots of downstream mobx invalidations which would have no effect but cause
-        // a distinct lag at the start of dragging.
-        // The reason we're here in the first place without a change is that when dragging a document,
-        // filters are changed on the annotation layers (eg. WebBox) which invalidate the childDoc list
-        // for the overlay views -- however, in many cases, this filter change doesn't actually affect anything
-        // (e.g, no annotations, or only opaque annotations).
         this._cachedPool.clear();
         Array.from(newPool.entries()).forEach(k => this._cachedPool.set(k[0], k[1]));
         const elements = computedElementData.slice();
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index b529991cb..8c49dc6ea 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -1,6 +1,6 @@
 import { Colors } from 'browndash-components';
 import { action, runInAction } from 'mobx';
-import { Doc } from '../../../fields/Doc';
+import { Doc, Opt } from '../../../fields/Doc';
 import { InkTool } from '../../../fields/InkField';
 import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types';
 import { WebField } from '../../../fields/URLField';
@@ -52,7 +52,9 @@ ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: b
             const layoutFrameNumber = Cast(dv.props.docViewPath().lastElement()?.rootDoc?._currentFrame, 'number'); // frame number that container is at which determines layout frame values
             const contentFrameNumber = Cast(dv.rootDoc?._currentFrame, 'number', layoutFrameNumber ?? null); // frame number that content is at which determines what content is displayed
             if (contentFrameNumber !== undefined) {
-                CollectionFreeFormDocumentView.setStringValues(contentFrameNumber, dv.rootDoc, { fieldKey: color });
+                const obj: { [key: string]: Opt<string> } = {};
+                obj[fieldKey as any] = color;
+                CollectionFreeFormDocumentView.setStringValues(contentFrameNumber, dv.rootDoc, obj);
             } else {
                 dv.rootDoc['_' + fieldKey] = color;
             }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 085f9f023..09dfa4f99 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -18,8 +18,8 @@ import { DocumentView, DocumentViewProps, OpenWhere } from './DocumentView';
 import React = require('react');
 
 export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
-    dataProvider?: (doc: Doc, replica: string) => { x: number; y: number; zIndex?: number; rotation?: number; color?: string; backgroundColor?: string; 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; rotation?: number; color?: string; backgroundColor?: string; opacity?: number; highlight?: boolean; z: number; transition?: string };
+    sizeProvider: (doc: Doc, replica: string) => { width: number; height: number };
     renderCutoffProvider: (doc: Doc) => boolean;
     zIndex?: number;
     dataTransition?: string;
@@ -29,14 +29,17 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
 
 @observer
 export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeFormDocumentViewProps>() {
+    get displayName() { // this makes mobx trace() statements more descriptive
+        return 'CollectionFreeFormDocumentView(' + this.rootDoc.title + ')';
+    } // prettier-ignore
     public static animFields: { key: string; val?: number }[] = [
-        { key: '_height' },
-        { key: '_width' },
         { key: 'x' },
         { key: 'y' },
+        { key: 'opacity', val: 1 },
+        { key: '_height' },
+        { key: '_width' },
         { key: '_rotation', val: 0 },
         { key: '_layout_scrollTop' },
-        { key: 'opacity', val: 1 },
         { key: '_currentFrame' },
         { key: 'freeform_scale', val: 1 },
         { key: 'freeform_panX' },
@@ -44,52 +47,28 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     ]; // fields that are configured to be animatable using animation frames
     public static animStringFields = ['backgroundColor', 'color', 'fillColor']; // fields that are configured to be animatable using animation frames
     public static animDataFields = (doc: Doc) => (Doc.LayoutFieldKey(doc) ? [Doc.LayoutFieldKey(doc)] : []); // fields that are configured to be animatable using animation frames
+
+    get X()               { return this.dataProvider.x; } // prettier-ignore
+    get Y()               { return this.dataProvider.y; } // prettier-ignore
+    get ZInd()            { return this.dataProvider.zIndex ?? NumCast(this.Document.zIndex); } // prettier-ignore
+    get Rot()             { return this.dataProvider.rotation ?? NumCast(this.Document._rotation); } // prettier-ignore
+    get Opacity()         { return this.dataProvider.opacity; } // prettier-ignore
+    get BackgroundColor() { return this.dataProvider.backgroundColor ?? Cast(this.Document._backgroundColor, 'string', null); } // prettier-ignore
+    get Color()           { return this.dataProvider.color ?? Cast(this.Document._color, 'string', null); } // prettier-ignore
+
     @observable _animPos: number[] | undefined = undefined;
     @observable _contentView: DocumentView | undefined | null;
-    get displayName() {
-        // this makes mobx trace() statements more descriptive
-        return 'CollectionFreeFormDocumentView(' + this.rootDoc.title + ')';
-    }
 
-    get transform() {
-        return `translate(${this.X}px, ${this.Y}px) rotate(${NumCast(this.Rot, this.Rot)}deg)`;
-    }
-    get X() {
-        return this.dataProvider?.x ?? NumCast(this.Document.x);
-    }
-    get Y() {
-        return this.dataProvider?.y ?? NumCast(this.Document.y);
-    }
-    get ZInd() {
-        return this.dataProvider?.zIndex ?? NumCast(this.Document.zIndex);
-    }
-    get Rot() {
-        return this.dataProvider?.rotation ?? NumCast(this.Document._rotation);
-    }
-    get Opacity() {
-        return this.dataProvider?.opacity;
-    }
-    get BackgroundColor() {
-        return this.dataProvider?.backgroundColor ?? Cast(this.Document._backgroundColor, 'string', null);
-    }
-    get Color() {
-        return this.dataProvider?.color ?? Cast(this.Document._color, 'string', null);
-    }
-    @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);
-    }
+    @computed get dataProvider() { return this.props.dataProvider(this.props.Document, this.props.replica); } // prettier-ignore
+    @computed get sizeProvider() { return this.props.sizeProvider(this.props.Document, this.props.replica); } // prettier-ignore
 
     styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string) => {
         if (doc === this.layoutDoc) {
-            // prettier-ignore
             switch (property) {
                 case StyleProp.Opacity:         return this.Opacity; // only change the opacity for this specific document, not its children
                 case StyleProp.BackgroundColor: return this.BackgroundColor;
                 case StyleProp.Color:           return this.Color;
-            }
+            } // prettier-ignore
         }
         return this.props.styleProvider?.(doc, props, property);
     };
@@ -126,21 +105,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         });
     }
 
-    public static setupZoom(doc: Doc, targDoc: Doc) {
-        const width = new List<number>();
-        const height = new List<number>();
-        const top = new List<number>();
-        const left = new List<number>();
-        width.push(NumCast(targDoc._width));
-        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;
-    }
-
     public static setupKeyframes(docs: Doc[], currTimecode: number, makeAppear: boolean = false) {
         docs.forEach(doc => {
             if (doc.appearFrame === undefined) doc.appearFrame = currTimecode;
@@ -221,7 +185,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 style={{
                     width: this.panelWidth(),
                     height: this.panelHeight(),
-                    transform: this.transform,
+                    transform: `translate(${this.X}px, ${this.Y}px) rotate(${NumCast(this.Rot, this.Rot)}deg)`,
                     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,