From d460d2ec856c9fc13789e151c9738f3345e95b64 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 10 Nov 2023 14:03:06 -0500
Subject: cleanup.  fix color setting/interpolation for freeform animated
 views.

---
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 78 ++++++----------------
 1 file changed, 21 insertions(+), 57 deletions(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

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,
-- 
cgit v1.2.3-70-g09d2

