aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
diff options
context:
space:
mode:
authormehekj <mehek.jethani@gmail.com>2022-10-12 13:21:07 -0400
committermehekj <mehek.jethani@gmail.com>2022-10-12 13:21:07 -0400
commit0b3a83acd4f75b7f6ff4b9bb7daf4377dede51a1 (patch)
tree438789f7e7f50e5eb9829e1f301b4d043d8d4906 /src/client/views/nodes/CollectionFreeFormDocumentView.tsx
parent69ca9baca6ff1da272a5191187542351bd242ccc (diff)
parenteb5f75785fd28acb50f1b30434e89223fff00185 (diff)
Merge branch 'master' into schema-mehek
Diffstat (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx46
1 files changed, 26 insertions, 20 deletions
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 86566ac6a..a48906372 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,12 +1,14 @@
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import { Doc, Opt } from '../../../fields/Doc';
+import { InkField } from '../../../fields/InkField';
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 } from '../../../Utils';
+import { DocumentType } from '../../documents/DocumentTypes';
import { DocumentManager } from '../../util/DocumentManager';
import { SelectionManager } from '../../util/SelectionManager';
import { Transform } from '../../util/Transform';
@@ -16,11 +18,6 @@ import { StyleProp } from '../StyleProvider';
import './CollectionFreeFormDocumentView.scss';
import { DocumentView, DocumentViewProps } from './DocumentView';
import React = require('react');
-import { InkField } from '../../../fields/InkField';
-import { DocumentType } from '../../documents/DocumentTypes';
-import { Field } from '../../util/ProsemirrorCopy/prompt';
-import { RefField } from '../../../fields/RefField';
-import { ObjectField } from '../../../fields/ObjectField';
export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
dataProvider?: (doc: Doc, replica: string) => { x: number; y: number; zIndex?: number; color?: string; backgroundColor?: string; opacity?: number; highlight?: boolean; z: number; transition?: string } | undefined;
@@ -36,9 +33,20 @@ 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: { key: string; val?: number }[] = [
+ { key: '_height' },
+ { key: '_width' },
+ { key: 'x' },
+ { key: 'y' },
+ { key: '_jitterRotation', val: 0 },
+ { key: '_scrollTop' },
+ { key: 'opacity', val: 1 },
+ { key: 'viewScale', val: 1 },
+ { key: 'panX' },
+ { key: 'panY' },
+ ]; // fields that are configured to be animatable using animation frames
public static animStringFields = ['backgroundColor', 'color']; // fields that are configured to be animatable using animation frames
- public static animDataFields = ['data', 'text']; // 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
@observable _animPos: number[] | undefined = undefined;
@observable _contentView: DocumentView | undefined | null;
get displayName() {
@@ -62,10 +70,10 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
return this.dataProvider?.opacity;
}
get BackgroundColor() {
- return this.dataProvider?.backgroundColor;
+ return this.dataProvider?.backgroundColor ?? Cast(this.Document._backgroundColor, 'string', null);
}
get Color() {
- return this.dataProvider?.color;
+ return this.dataProvider?.color ?? Cast(this.Document._color, 'string', null);
}
get Highlight() {
return this.dataProvider?.highlight;
@@ -88,16 +96,16 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
return this.props.styleProvider?.(doc, props, property);
};
- public static getValues(doc: Doc, time: number) {
+ public static getValues(doc: Doc, time: number, fillIn: boolean = true) {
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.key] = Cast(doc[`${val.key}-indexed`], listSpec('number'), fillIn ? [NumCast(doc[val.key], val.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 getStringValues(doc: Doc, time: number) {
return CollectionFreeFormDocumentView.animStringFields.reduce((p, val) => {
- p[val] = Cast(`${val}-indexed`, listSpec('string'), [StrCast(doc[val])]).reduce((p, v, i) => ((i <= Math.round(time) && v !== undefined) || p === undefined ? v : p), undefined as any as string);
+ p[val] = Cast(doc[`${val}-indexed`], listSpec('string'), [StrCast(doc[val])]).reduce((p, v, i) => ((i <= Math.round(time) && v !== undefined) || p === undefined ? v : p), undefined as any as string);
return p;
}, {} as { [val: string]: Opt<string> });
}
@@ -117,14 +125,14 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
action(doc => {
doc._viewTransition = doc.dataTransition = 'all 1s';
CollectionFreeFormDocumentView.animFields.forEach(val => {
- const findexed = Cast(doc[`${val}-indexed`], listSpec('number'), null);
+ const findexed = Cast(doc[`${val.key}-indexed`], listSpec('number'), null);
findexed?.length <= timecode + 1 && findexed.push(undefined as any as number);
});
CollectionFreeFormDocumentView.animStringFields.forEach(val => {
const findexed = Cast(doc[`${val}-indexed`], listSpec('string'), null);
findexed?.length <= timecode + 1 && findexed.push(undefined as any as string);
});
- CollectionFreeFormDocumentView.animDataFields.forEach(val => {
+ CollectionFreeFormDocumentView.animDataFields(doc).forEach(val => {
const findexed = Cast(doc[`${val}-indexed`], listSpec(InkField), null);
findexed?.length <= timecode + 1 && findexed.push(undefined as any);
});
@@ -140,8 +148,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
);
}
- public static gotoKeyframe(docs: Doc[]) {
- docs.forEach(doc => (doc._viewTransition = doc.dataTransition = 'all 1s'));
+ public static gotoKeyframe(docs: Doc[], duration = 1000) {
+ docs.forEach(doc => (doc._viewTransition = doc.dataTransition = `all ${duration}ms`));
setTimeout(
() =>
docs.forEach(doc => {
@@ -174,9 +182,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
// 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.MakeInterpolatedNumber(val, 'activeFrame', doc, currTimecode)));
+ CollectionFreeFormDocumentView.animFields.forEach(val => (doc[val.key] = ComputedField.MakeInterpolatedNumber(val.key, 'activeFrame', doc, currTimecode, val.val)));
CollectionFreeFormDocumentView.animStringFields.forEach(val => (doc[val] = ComputedField.MakeInterpolatedString(val, 'activeFrame', doc, currTimecode)));
- CollectionFreeFormDocumentView.animDataFields.forEach(val => (Doc.GetProto(doc)[val] = ComputedField.MakeInterpolatedDataField(val, 'activeFrame', Doc.GetProto(doc), currTimecode)));
+ CollectionFreeFormDocumentView.animDataFields(doc).forEach(val => (Doc.GetProto(doc)[val] = ComputedField.MakeInterpolatedDataField(val, 'activeFrame', Doc.GetProto(doc), currTimecode)));
const targetDoc = doc.type === DocumentType.RTF ? Doc.GetProto(doc) : doc; // data fields, like rtf 'text' exist on the data doc, so
doc !== targetDoc && (targetDoc.context = doc.context); // the computed fields don't see the layout doc -- need to copy the context to the data doc (HACK!!!) and set the activeFrame on the data doc (HACK!!!)
targetDoc.activeFrame = ComputedField.MakeFunction('self.context?._currentFrame||0');
@@ -226,7 +234,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
PanelWidth: this.panelWidth,
PanelHeight: this.panelHeight,
};
- const mixBlendMode = undefined; // (StrCast(this.layoutDoc.mixBlendMode) as any) || (typeof background === 'string' && background && !background.startsWith('linear') && DashColor(background).alpha() !== 1 ? 'multiply' : undefined);
return (
<div
className={'collectionFreeFormDocumentView-container'}
@@ -238,7 +245,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
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) ? (