From 57c4cde2fab898976deec3fd037a3c9052ee2d30 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 28 May 2020 18:43:14 -0400
Subject: added aimated transitions to presentations of frame animations

---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 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 682aed8f5..697111ac8 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -96,12 +96,12 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             opacityindexed?.length <= timecode + 1 && opacityindexed.push(undefined as any as number);
             doc.transition = "all 1s";
         });
-        setTimeout(() => docs.forEach(doc => doc.transition = undefined), 1010);
+        setTimeout(() => docs.forEach(doc => doc.transition = "inherit"), 1010);
     }
 
     public static gotoKeyframe(docs: Doc[]) {
         docs.forEach(doc => doc.transition = "all 1s");
-        setTimeout(() => docs.forEach(doc => doc.transition = undefined), 1010);
+        setTimeout(() => docs.forEach(doc => doc.transition = "inherit"), 1010);
     }
 
     public static setupKeyframes(docs: Doc[], timecode: number, progressivize: boolean = false) {
@@ -119,6 +119,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             doc.x = ComputedField.MakeInterpolated("x", "activeFrame");
             doc.y = ComputedField.MakeInterpolated("y", "activeFrame");
             doc.opacity = ComputedField.MakeInterpolated("opacity", "activeFrame");
+            doc.transition = "inherit";
         });
     }
 
-- 
cgit v1.2.3-70-g09d2


From e23602188d575c3f2303bfc85114ac82561c7bbe Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 29 May 2020 13:14:59 -0400
Subject: added toggle to switch from fade to default keyframe. added
 mixBlendMode for collections

---
 src/client/views/animationtimeline/Keyframe.tsx    | 60 +++++++++-------------
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  1 +
 2 files changed, 26 insertions(+), 35 deletions(-)

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

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 92b0f05b3..e3274fb35 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -12,11 +12,9 @@ import { Transform } from "../../util/Transform";
 import { TimelineMenu } from "./TimelineMenu";
 import { Docs } from "../../documents/Documents";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { undoBatch, UndoManager } from "../../util/UndoManager";
 import { emptyPath } from "../../../Utils";
 
 
-
 /**
  * Useful static functions that you can use. Mostly for logic, but you can also add UI logic here also 
  */
@@ -100,16 +98,11 @@ export namespace KeyframeFunc {
     export const convertPixelTime = (pos: number, unit: "mili" | "sec" | "min" | "hr", dir: "pixel" | "time", tickSpacing: number, tickIncrement: number) => {
         const time = dir === "pixel" ? (pos * tickSpacing) / tickIncrement : (pos / tickSpacing) * tickIncrement;
         switch (unit) {
-            case "mili":
-                return time;
-            case "sec":
-                return dir === "pixel" ? time / 1000 : time * 1000;
-            case "min":
-                return dir === "pixel" ? time / 60000 : time * 60000;
-            case "hr":
-                return dir === "pixel" ? time / 3600000 : time * 3600000;
-            default:
-                return time;
+            case "mili": return time;
+            case "sec": return dir === "pixel" ? time / 1000 : time * 1000;
+            case "min": return dir === "pixel" ? time / 60000 : time * 60000;
+            case "hr": return dir === "pixel" ? time / 3600000 : time * 3600000;
+            default: return time;
         }
     };
 }
@@ -333,31 +326,28 @@ export class Keyframe extends React.Component<IProps> {
      */
     @action
     makeKeyframeMenu = (kf: Doc, e: MouseEvent) => {
-        TimelineMenu.Instance.addItem("button", "Show Data", () => {
-            runInAction(() => {
+        TimelineMenu.Instance.addItem("button", "Toggle Fade Only", () => {
+            kf.type = kf.type === KeyframeFunc.KeyframeType.fade ? KeyframeFunc.KeyframeType.default : KeyframeFunc.KeyframeType.fade;
+        }),
+            TimelineMenu.Instance.addItem("button", "Show Data", action(() => {
                 const kvp = Docs.Create.KVPDocument(kf, { _width: 300, _height: 300 });
                 CollectionDockingView.AddRightSplit(kvp, emptyPath);
-            });
-        }),
-            TimelineMenu.Instance.addItem("button", "Delete", () => {
-                runInAction(() => {
-                    (this.regiondata.keyframes as List<Doc>).splice(this.keyframes.indexOf(kf), 1);
-                    this.forceUpdate();
-                });
-            }),
-            TimelineMenu.Instance.addItem("input", "Move", (val) => {
-                runInAction(() => {
-                    let cannotMove: boolean = false;
-                    const kfIndex: number = this.keyframes.indexOf(kf);
-                    if (val < 0 || (val < NumCast(this.keyframes[kfIndex - 1].time) || val > NumCast(this.keyframes[kfIndex + 1].time))) {
-                        cannotMove = true;
-                    }
-                    if (!cannotMove) {
-                        this.keyframes[kfIndex].time = parseInt(val, 10);
-                        this.keyframes[1].time = this.regiondata.position + this.regiondata.fadeIn;
-                    }
-                });
-            });
+            })),
+            TimelineMenu.Instance.addItem("button", "Delete", action(() => {
+                (this.regiondata.keyframes as List<Doc>).splice(this.keyframes.indexOf(kf), 1);
+                this.forceUpdate();
+            })),
+            TimelineMenu.Instance.addItem("input", "Move", action((val) => {
+                let cannotMove: boolean = false;
+                const kfIndex: number = this.keyframes.indexOf(kf);
+                if (val < 0 || (val < NumCast(this.keyframes[kfIndex - 1].time) || val > NumCast(this.keyframes[kfIndex + 1].time))) {
+                    cannotMove = true;
+                }
+                if (!cannotMove) {
+                    this.keyframes[kfIndex].time = parseInt(val, 10);
+                    this.keyframes[1].time = this.regiondata.position + this.regiondata.fadeIn;
+                }
+            }));
         TimelineMenu.Instance.addMenu("Keyframe");
         TimelineMenu.Instance.openMenu(e.clientX, e.clientY);
     }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 697111ac8..910aa744d 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -154,6 +154,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 width: this.width,
                 height: this.height,
                 zIndex: this.ZInd,
+                mixBlendMode: StrCast(this.layoutDoc.mixBlendMode) as any,
                 display: this.ZInd === -99 ? "none" : undefined,
                 pointerEvents: this.props.Document.isBackground || this.Opacity === 0 ? "none" : this.props.pointerEvents ? "all" : undefined
             }} >
-- 
cgit v1.2.3-70-g09d2

