From 43e573ea0cf4634b65b513c633f90be84846f8df Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 29 Apr 2020 21:08:37 -0400 Subject: changed detailedView template to be a layoutstring. fixed text boxes to allow new templates from templated text boxes. fixed __LAYOUT__ to work with comound layout strings --- src/client/views/animationtimeline/Timeline.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'src/client/views/animationtimeline') diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index 677267ca0..fe1e40778 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -119,9 +119,7 @@ export class Timeline extends React.Component { } componentWillUnmount() { - runInAction(() => { - this.props.Document.AnimationLength = this._time; //save animation length - }); + this.props.Document.AnimationLength = this._time; //save animation length } ///////////////////////////////////////////////// -- cgit v1.2.3-70-g09d2 From 90c45914694a971c1b3cb356921c04f337625db5 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 30 Apr 2020 00:06:08 -0400 Subject: fixes for snapping & timeline. changed looi of document decorations --- src/client/util/DragManager.ts | 8 ++--- src/client/views/DocumentDecorations.scss | 34 +++++++++++++++++++++- src/client/views/DocumentDecorations.tsx | 9 +++--- src/client/views/MainView.tsx | 1 - src/client/views/MetadataEntryMenu.scss | 9 +++--- src/client/views/animationtimeline/Timeline.tsx | 33 ++++++++------------- .../collectionFreeForm/CollectionFreeFormView.tsx | 14 ++++++--- .../views/nodes/formattedText/FormattedTextBox.tsx | 8 +++-- 8 files changed, 74 insertions(+), 42 deletions(-) (limited to 'src/client/views/animationtimeline') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 36c26fe2c..bccdf38ce 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -310,10 +310,10 @@ export namespace DragManager { const currTop = e.pageY - yFromTop; const currRight = e.pageX + xFromRight; const currBottom = e.pageY + yFromBottom; - const closestLeft = vertSnapLines.reduce((prev, curr) => Math.abs(prev - currLeft) > Math.abs(curr - currLeft) ? curr : prev); - const closestTop = horizSnapLines.reduce((prev, curr) => Math.abs(prev - currTop) > Math.abs(curr - currTop) ? curr : prev); - const closestRight = vertSnapLines.reduce((prev, curr) => Math.abs(prev - currRight) > Math.abs(curr - currRight) ? curr : prev); - const closestBottom = horizSnapLines.reduce((prev, curr) => Math.abs(prev - currBottom) > Math.abs(curr - currBottom) ? curr : prev); + const closestLeft = vertSnapLines.reduce((prev, curr) => Math.abs(prev - currLeft) > Math.abs(curr - currLeft) ? curr : prev, currLeft); + const closestTop = horizSnapLines.reduce((prev, curr) => Math.abs(prev - currTop) > Math.abs(curr - currTop) ? curr : prev, currTop); + const closestRight = vertSnapLines.reduce((prev, curr) => Math.abs(prev - currRight) > Math.abs(curr - currRight) ? curr : prev, currRight); + const closestBottom = horizSnapLines.reduce((prev, curr) => Math.abs(prev - currBottom) > Math.abs(curr - currBottom) ? curr : prev, currBottom); const distFromClosestLeft = Math.abs(e.pageX - xFromLeft - closestLeft); const distFromClosestTop = Math.abs(e.pageY - yFromTop - closestTop); const distFromClosestRight = Math.abs(e.pageX + xFromRight - closestRight); diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 28cf9fd47..61d517d43 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -21,9 +21,13 @@ $linkGap : 3px; background: none; } + .documentDecorations-resizer { pointer-events: auto; background: $alt-accent; + opacity: 0.1; + } + .documentDecorations-resizer:hover { opacity: 1; } @@ -80,7 +84,20 @@ $linkGap : 3px; #documentDecorations-topLeftResizer, #documentDecorations-bottomRightResizer { cursor: nwse-resize; - background: dimGray; + background: unset; + opacity: 1; + } + #documentDecorations-topLeftResizer { + border-left: black 2px solid; + border-top: black solid 2px; + } + #documentDecorations-bottomRightResizer { + border-right: black 2px solid; + border-bottom: black solid 2px; + } + #documentDecorations-topLeftResizer:hover, + #documentDecorations-bottomRightResizer:hover { + opacity: 1; } #documentDecorations-bottomRightResizer { @@ -89,8 +106,23 @@ $linkGap : 3px; #documentDecorations-topRightResizer, #documentDecorations-bottomLeftResizer { + cursor: nesw-resize; + background: unset; + opacity: 1; + } + #documentDecorations-topRightResizer { + border-right: black 2px solid; + border-top: black 2px solid; + } + #documentDecorations-bottomLeftResizer { + border-left: black 2px solid; + border-bottom: black 2px solid; + } + #documentDecorations-topRightResizer:hover, + #documentDecorations-bottomLeftResizer:hover { cursor: nesw-resize; background: dimGray; + opacity: 1; } #documentDecorations-topResizer, diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 312acd5b2..973ec2e89 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -473,10 +473,11 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}>
e.preventDefault()}>
- {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) :
e.preventDefault()}> - -
} + {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) : +
e.preventDefault()}> + +
}
e.preventDefault()}>
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 62b2d1d18..e5a8ebcb5 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -42,7 +42,6 @@ import { OverlayView } from './OverlayView'; import PDFMenu from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; import { ScriptField } from '../../new_fields/ScriptField'; -import { DragManager } from '../util/DragManager'; import { TimelineMenu } from './animationtimeline/TimelineMenu'; @observer diff --git a/src/client/views/MetadataEntryMenu.scss b/src/client/views/MetadataEntryMenu.scss index 5776cf070..28de0b7a5 100644 --- a/src/client/views/MetadataEntryMenu.scss +++ b/src/client/views/MetadataEntryMenu.scss @@ -9,9 +9,10 @@ } .metadataEntry-autoSuggester { - width: 100%; + width: 80%; height: 100%; - padding-right: 10px; + margin: 0; + display: inline-block; } #metadataEntry-outer { @@ -25,7 +26,7 @@ flex-direction: column; } .metadataEntry-inputArea { - display:flex; + display:inline-block; flex-direction: row; } @@ -44,7 +45,7 @@ .react-autosuggest__input { border: 1px solid #aaa; border-radius: 4px; - width: 100%; + width: 75%; } .react-autosuggest__input--focused { diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index fe1e40778..77656b85f 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -71,7 +71,6 @@ export class Timeline extends React.Component { @observable private _tickIncrement = this.DEFAULT_TICK_INCREMENT; @observable private _time = 100000; //DEFAULT @observable private _playButton = faPlayCircle; - @observable private _timelineVisible = false; @observable private _mouseToggled = false; @observable private _doubleClickEnabled = false; @observable private _titleHeight = 0; @@ -336,20 +335,6 @@ export class Timeline extends React.Component { } - /** - * context menu function. - * opens the timeline or closes the timeline. - * Used in: Freeform - */ - timelineContextMenu = (e: React.MouseEvent): void => { - ContextMenu.Instance.addItem({ - description: (this._timelineVisible ? "Close" : "Open") + " Animation Timeline", event: action(() => { - this._timelineVisible = !this._timelineVisible; - }), icon: this._timelineVisible ? faEyeSlash : faEye - }); - } - - /** * timeline zoom function * use mouse middle button to zoom in/out the timeline @@ -463,7 +448,7 @@ export class Timeline extends React.Component {
-
+
{this.timeIndicator(lengthString, totalTime)}
this.resetView(this.props.Document)}>
this.setView(this.props.Document)}>
@@ -481,10 +466,16 @@ export class Timeline extends React.Component { ); } else { + const ctime = `Current: ${this.getCurrentTime()}`; + const ttime = `Total: ${this.toReadTime(this._time)}`; return (
-
{`Current: ${this.getCurrentTime()}`}
-
{`Total: ${this.toReadTime(this._time)}`}
+
+ {ctime} +
+
+ {ttime} +
); } @@ -601,8 +592,8 @@ export class Timeline extends React.Component { trace(); // change visible and total width return ( -
-
+
+
{this.drawTicks()} @@ -611,7 +602,7 @@ export class Timeline extends React.Component {
{DocListCast(this.children).map(doc => - this.mapOfTracks.push(ref)} node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} transform={this.props.ScreenToLocalTransform()} time={this._time} tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} collection={this.props.Document} timelineVisible={this._timelineVisible} /> + this.mapOfTracks.push(ref)} node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} transform={this.props.ScreenToLocalTransform()} time={this._time} tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} collection={this.props.Document} timelineVisible={true} /> )}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 0c9403429..77de486d9 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1,5 +1,5 @@ import { library } from "@fortawesome/fontawesome-svg-core"; -import { faEye } from "@fortawesome/free-regular-svg-icons"; +import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons"; import { faBraille, faChalkboard, faCompass, faCompressArrowsAlt, faExpandArrowsAlt, faFileUpload, faPaintBrush, faTable, faUpload } from "@fortawesome/free-solid-svg-icons"; import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; @@ -1093,7 +1093,6 @@ export class CollectionFreeFormView extends CollectionSubView { this.props.Document._panX = this.props.Document._panY = 0; this.props.Document.scale = 1; }, icon: "compress-arrows-alt" }); optionItems.push({ description: `${this.Document._LODdisable ? "Enable LOD" : "Disable LOD"}`, event: () => this.Document._LODdisable = !this.Document._LODdisable, icon: "table" }); optionItems.push({ description: `${this.fitToContent ? "Unset" : "Set"} Fit To Container`, event: () => this.Document._fitToBox = !this.fitToContent, icon: !this.fitToContent ? "expand-arrows-alt" : "compress-arrows-alt" }); @@ -1130,8 +1129,15 @@ export class CollectionFreeFormView extends CollectionSubView { + this._timelineVisible = !this._timelineVisible; + }), icon: this._timelineVisible ? faEyeSlash : faEye + }); } + @observable _timelineVisible = false; intersectRect(r1: { left: number, top: number, width: number, height: number }, r2: { left: number, top: number, width: number, height: number }) { @@ -1215,7 +1221,7 @@ export class CollectionFreeFormView extends CollectionSubView {this.children} - + {this._timelineVisible ? : (null)} ; } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 2038efbc6..4df693c9a 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -435,9 +435,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.rootDoc.isTemplateForField = ""; this.rootDoc.layoutKey = "layout"; this.rootDoc.isTemplateDoc = makeTemplate(this.rootDoc, true, title); - this.rootDoc._width = this.layoutDoc._width || 300; // the width and height are stored on the template, since we're getting rid of the old template - this.rootDoc._height = this.layoutDoc._height || 200; // we need to copy them over to the root. This should probably apply to all '_' fields - this.rootDoc._backgroundColor = Cast(this.layoutDoc._backgroundColor, "string", null); + setTimeout(() => { + this.rootDoc._width = this.layoutDoc._width || 300; // the width and height are stored on the template, since we're getting rid of the old template + this.rootDoc._height = this.layoutDoc._height || 200; // we need to copy them over to the root. This should probably apply to all '_' fields + this.rootDoc._backgroundColor = Cast(this.layoutDoc._backgroundColor, "string", null); + }, 10); Doc.AddDocToList(Cast(Doc.UserDoc()["template-notes"], Doc, null), "data", this.rootDoc); }, icon: "eye" }); -- cgit v1.2.3-70-g09d2 From 5e6352c78be5b2a9fe791bd87da9b2415ced4839 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 1 May 2020 19:35:37 -0400 Subject: added childLayoutTemplate to render collection children w/o modifying them. fixed docComponent's layoutDoc to use LayoutDoc prop. change buxton template to use new template mechanisms. fixed fixed lint errors. --- src/client/documents/Documents.ts | 5 +- src/client/util/DragManager.ts | 2 +- src/client/views/DocComponent.tsx | 2 +- src/client/views/animationtimeline/Timeline.tsx | 4 +- .../views/animationtimeline/TimelineMenu.tsx | 81 +++++++++++----------- src/client/views/animationtimeline/Track.tsx | 50 ++++++------- .../views/collections/CollectionStackingView.tsx | 2 +- src/client/views/collections/CollectionSubView.tsx | 17 ----- .../views/collections/CollectionTreeView.tsx | 36 ++++------ .../collectionFreeForm/CollectionFreeFormView.tsx | 11 ++- src/client/views/nodes/PresBox.tsx | 2 +- .../views/nodes/formattedText/DashFieldView.tsx | 2 +- src/new_fields/documentSchemas.ts | 2 +- 13 files changed, 94 insertions(+), 122 deletions(-) (limited to 'src/client/views/animationtimeline') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index a8b10bc7b..434b26312 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -93,7 +93,8 @@ export interface DocumentOptions { scale?: number; isDisplayPanel?: boolean; // whether the panel functions as GoldenLayout "stack" used to display documents forceActive?: boolean; - layout?: string | Doc; + layout?: string | Doc; // default layout string for a document + childLayoutTemplate?: Doc; // template for collection to use to render its children (see PresBox or Buxton layout in tree view) hideFilterView?: boolean; // whether to hide the filter popout on collections hideHeadings?: boolean; // whether stacking view column headings should be hidden isTemplateForField?: string; // the field key for which the containing document is a rendering template @@ -123,7 +124,7 @@ export interface DocumentOptions { borderRounding?: string; boxShadow?: string; dontRegisterChildren?: boolean; - "onDoubleClick-rawScript"?: string // onDoubleClick script in raw text form + "onDoubleClick-rawScript"?: string; // onDoubleClick script in raw text form "onClick-rawScript"?: string; // onClick script in raw text form "onCheckedClick-rawScript"?: string; // onChecked script in raw text form "onCheckedClick-params"?: List; // parameter list for onChecked treeview functions diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index c48611eff..c06ad3d60 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -316,7 +316,7 @@ export namespace DragManager { return closestDists[minIndex] < snapThreshold ? closestPts[minIndex] + offs[minIndex] : drag; } return drag; - } + }; return { thisX: snapVal([xFromLeft, xFromRight], e.pageX, vertSnapLines), thisY: snapVal([yFromTop, yFromBottom], e.pageY, horizSnapLines) }; } diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 0a8f0c9a7..629b0f447 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -20,7 +20,7 @@ export function DocComponent

(schemaCtor: (doc: D // This is the "The Document" -- it encapsulates, data, layout, and any templates @computed get rootDoc() { return Cast(this.props.Document.rootDocument, Doc, null) || this.props.Document; } // This is the rendering data of a document -- it may be "The Document", or it may be some template document that holds the rendering info - @computed get layoutDoc() { return Doc.Layout(this.props.Document); } + @computed get layoutDoc() { return Doc.Layout(this.props.Document, this.props.LayoutDoc?.()); } // This is the data part of a document -- ie, the data that is constant across all views of the document @computed get dataDoc() { return this.props.Document[DataSym] as Doc; } diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index 77656b85f..466cbb867 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -525,8 +525,8 @@ export class Timeline extends React.Component { @action.bound changeLengths() { if (this._infoContainer.current) { - this._visibleLength = this._infoContainer.current!.getBoundingClientRect().width; //the visible length of the timeline (the length that you current see) - this._visibleStart = this._infoContainer.current!.scrollLeft; //where the div starts + this._visibleLength = this._infoContainer.current.getBoundingClientRect().width; //the visible length of the timeline (the length that you current see) + this._visibleStart = this._infoContainer.current.scrollLeft; //where the div starts } } diff --git a/src/client/views/animationtimeline/TimelineMenu.tsx b/src/client/views/animationtimeline/TimelineMenu.tsx index 59c25596e..53ca9acad 100644 --- a/src/client/views/animationtimeline/TimelineMenu.tsx +++ b/src/client/views/animationtimeline/TimelineMenu.tsx @@ -1,7 +1,7 @@ import * as React from "react"; -import {observable, action, runInAction} from "mobx"; -import {observer} from "mobx-react"; -import "./TimelineMenu.scss"; +import { observable, action, runInAction } from "mobx"; +import { observer } from "mobx-react"; +import "./TimelineMenu.scss"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChartLine, faRoad, faClipboard, faPen, faTrash, faTable } from "@fortawesome/free-solid-svg-icons"; import { Utils } from "../../../Utils"; @@ -9,67 +9,66 @@ import { Utils } from "../../../Utils"; @observer export class TimelineMenu extends React.Component { - public static Instance:TimelineMenu; + public static Instance: TimelineMenu; @observable private _opacity = 0; - @observable private _x = 0; - @observable private _y = 0; - @observable private _currentMenu:JSX.Element[] = []; + @observable private _x = 0; + @observable private _y = 0; + @observable private _currentMenu: JSX.Element[] = []; - constructor (props:Readonly<{}>){ - super(props); - TimelineMenu.Instance = this; + constructor(props: Readonly<{}>) { + super(props); + TimelineMenu.Instance = this; } - + @action - openMenu = (x?:number, y?:number) => { - this._opacity = 1; - x ? this._x = x : this._x = 0; - y ? this._y = y : this._y = 0; + openMenu = (x?: number, y?: number) => { + this._opacity = 1; + x ? this._x = x : this._x = 0; + y ? this._y = y : this._y = 0; } @action closeMenu = () => { - this._opacity = 0; - this._currentMenu = []; - this._x = -1000000; - this._y = -1000000; + this._opacity = 0; + this._currentMenu = []; + this._x = -1000000; + this._y = -1000000; } @action - addItem = (type: "input" | "button", title: string, event: (e:any, ...args:any[]) => void) => { - if (type === "input"){ - let inputRef = React.createRef(); - let text = ""; - this._currentMenu.push(

{ + addItem = (type: "input" | "button", title: string, event: (e: any, ...args: any[]) => void) => { + if (type === "input") { + const inputRef = React.createRef(); + let text = ""; + this._currentMenu.push(
{ e.stopPropagation(); text = e.target.value; }} onKeyDown={(e) => { if (e.keyCode === 13) { - event(text); - this.closeMenu(); - e.stopPropagation(); - } - }}/>
); + event(text); + this.closeMenu(); + e.stopPropagation(); + } + }} />
); } else if (type === "button") { - let buttonRef = React.createRef(); - this._currentMenu.push(

{ - e.preventDefault(); - e.stopPropagation(); - event(e); - this.closeMenu(); - }}>{title}

); - } + this._currentMenu.push(

{ + e.preventDefault(); + e.stopPropagation(); + event(e); + this.closeMenu(); + }}>{title}

); + } } - @action - addMenu = (title:string) => { - this._currentMenu.unshift(

{title}

); + @action + addMenu = (title: string) => { + this._currentMenu.unshift(

{title}

); } render() { return ( -
+
{this._currentMenu}
); diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx index 79eb60fae..461db4858 100644 --- a/src/client/views/animationtimeline/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -90,9 +90,9 @@ export class Track extends React.Component { */ @action saveKeyframe = async () => { - let keyframes = Cast(this.saveStateRegion?.keyframes, listSpec(Doc)) as List; - let kfIndex = keyframes.indexOf(this.saveStateKf!); - let kf = keyframes[kfIndex] as Doc; //index in the keyframe + const keyframes = Cast(this.saveStateRegion?.keyframes, listSpec(Doc)) as List; + const kfIndex = keyframes.indexOf(this.saveStateKf!); + const kf = keyframes[kfIndex] as Doc; //index in the keyframe if (this._newKeyframe) { DocListCast(this.saveStateRegion?.keyframes).forEach((kf, index) => { this.copyDocDataToKeyFrame(kf); @@ -103,17 +103,17 @@ export class Track extends React.Component { if (!kf) return; if (kf.type === KeyframeFunc.KeyframeType.default) { // only save for non-fades this.copyDocDataToKeyFrame(kf); - let leftkf = KeyframeFunc.calcMinLeft(this.saveStateRegion!, this.time, kf); // lef keyframe, if it exists - let rightkf = KeyframeFunc.calcMinRight(this.saveStateRegion!, this.time, kf); //right keyframe, if it exists + const leftkf = KeyframeFunc.calcMinLeft(this.saveStateRegion!, this.time, kf); // lef keyframe, if it exists + const rightkf = KeyframeFunc.calcMinRight(this.saveStateRegion!, this.time, kf); //right keyframe, if it exists if (leftkf?.type === KeyframeFunc.KeyframeType.fade) { //replicating this keyframe to fades - let edge = KeyframeFunc.calcMinLeft(this.saveStateRegion!, this.time, leftkf); + const edge = KeyframeFunc.calcMinLeft(this.saveStateRegion!, this.time, leftkf); edge && this.copyDocDataToKeyFrame(edge); leftkf && this.copyDocDataToKeyFrame(leftkf); - edge && (edge!.opacity = 0.1); - leftkf && (leftkf!.opacity = 1); + edge && (edge.opacity = 0.1); + leftkf && (leftkf.opacity = 1); } if (rightkf?.type === KeyframeFunc.KeyframeType.fade) { - let edge = KeyframeFunc.calcMinRight(this.saveStateRegion!, this.time, rightkf); + const edge = KeyframeFunc.calcMinRight(this.saveStateRegion!, this.time, rightkf); edge && this.copyDocDataToKeyFrame(edge); rightkf && this.copyDocDataToKeyFrame(rightkf); edge && (edge.opacity = 0.1); @@ -142,7 +142,7 @@ export class Track extends React.Component { //check for region const region = this.findRegion(this.time); if (region !== undefined) { //if region at scrub time exist - let r = region as RegionData; //for some region is returning undefined... which is not the case + const r = region as RegionData; //for some region is returning undefined... which is not the case if (DocListCast(r.keyframes).find(kf => kf.time === this.time) === undefined) { //basically when there is no additional keyframe at that timespot this.makeKeyData(r, this.time, KeyframeFunc.KeyframeType.default); } @@ -222,11 +222,11 @@ export class Track extends React.Component { } else if (this._newKeyframe) { await this.saveKeyframe(); } - let regiondata = await this.findRegion(Math.round(this.time)); //finds a region that the scrubber is on + const regiondata = await this.findRegion(Math.round(this.time)); //finds a region that the scrubber is on if (regiondata) { - let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata, this.time); // lef keyframe, if it exists - let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata, this.time); //right keyframe, if it exists - let currentkf: (Doc | undefined) = await this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe + const leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata, this.time); // lef keyframe, if it exists + const rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata, this.time); //right keyframe, if it exists + const currentkf: (Doc | undefined) = await this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe if (currentkf) { console.log("is current"); await this.applyKeys(currentkf); @@ -248,7 +248,7 @@ export class Track extends React.Component { if (!kf[key]) { this.props.node[key] = undefined; } else { - let stored = kf[key]; + const stored = kf[key]; this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored; } }); @@ -261,7 +261,7 @@ export class Track extends React.Component { @action calcCurrent = (region: Doc) => { let currentkf: (Doc | undefined) = undefined; - let keyframes = DocListCast(region.keyframes!); + const keyframes = DocListCast(region.keyframes!); keyframes.forEach((kf) => { if (NumCast(kf.time) === Math.round(this.time)) currentkf = kf; }); @@ -276,12 +276,12 @@ export class Track extends React.Component { interpolate = async (left: Doc, right: Doc) => { this.primitiveWhitelist.forEach(key => { if (left[key] && right[key] && typeof (left[key]) === "number" && typeof (right[key]) === "number") { //if it is number, interpolate - let dif = NumCast(right[key]) - NumCast(left[key]); - let deltaLeft = this.time - NumCast(left.time); - let ratio = deltaLeft / (NumCast(right.time) - NumCast(left.time)); + const dif = NumCast(right[key]) - NumCast(left[key]); + const deltaLeft = this.time - NumCast(left.time); + const ratio = deltaLeft / (NumCast(right.time) - NumCast(left.time)); this.props.node[key] = NumCast(left[key]) + (dif * ratio); } else { // case data - let stored = left[key]; + const stored = left[key]; this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored; } }); @@ -301,8 +301,8 @@ export class Track extends React.Component { */ @action onInnerDoubleClick = (e: React.MouseEvent) => { - let inner = this._inner.current!; - let offsetX = Math.round((e.clientX - inner.getBoundingClientRect().left) * this.props.transform.Scale); + const inner = this._inner.current!; + const offsetX = Math.round((e.clientX - inner.getBoundingClientRect().left) * this.props.transform.Scale); this.createRegion(KeyframeFunc.convertPixelTime(offsetX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); } @@ -313,10 +313,10 @@ export class Track extends React.Component { @action createRegion = (time: number) => { if (this.findRegion(time) === undefined) { //check if there is a region where double clicking (prevents phantom regions) - let regiondata = KeyframeFunc.defaultKeyframe(); //create keyframe data + const regiondata = KeyframeFunc.defaultKeyframe(); //create keyframe data regiondata.position = time; //set position - let rightRegion = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.right, regiondata, this.regions); + const rightRegion = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.right, regiondata, this.regions); if (rightRegion && rightRegion.position - regiondata.position <= 4000) { //edge case when there is less than default 4000 duration space between this and right region regiondata.duration = rightRegion.position - regiondata.position; @@ -332,7 +332,7 @@ export class Track extends React.Component { @action makeKeyData = (regiondata: RegionData, time: number, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time - const trackKeyFrames = DocListCast(regiondata.keyframes)!; + const trackKeyFrames = DocListCast(regiondata.keyframes); const existingkf = trackKeyFrames.find(TK => TK.time === time); if (existingkf) return existingkf; //else creates a new doc. diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 6c230d5b1..01766f65f 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -128,7 +128,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { return layoutDoc._fitWidth ? wid * NumCast(layoutDoc.scrollHeight, nh) / (nw || 1) : layoutDoc[HeightSym](); } componentDidMount() { - super.componentDidMount(); + super.componentDidMount?.(); // reset section headers when a new filter is inputted this._pivotFieldDisposer = reaction( diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 8cc1af55b..e44bbae78 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -58,7 +58,6 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: private dropDisposer?: DragManager.DragDropDisposer; private gestureDisposer?: GestureUtils.GestureEventDisposer; protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; - private _childLayoutDisposer?: IReactionDisposer; protected _mainCont?: HTMLDivElement; protected createDashEventsTarget = (ele: HTMLDivElement) => { //used for stacking and masonry view this.dropDisposer?.(); @@ -75,25 +74,9 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: this.createDashEventsTarget(ele); } - componentDidMount() { - this._childLayoutDisposer = reaction(() => ({ childDocs: this.childDocs, childLayout: Cast(this.props.Document.childLayout, Doc) }), - ({ childDocs, childLayout }) => { - if (childLayout instanceof Doc) { - childDocs.map(doc => { - doc.layout_fromParent = childLayout; - doc.layoutKey = "layout_fromParent"; - }); - } - else if (!(childLayout instanceof Promise)) { - childDocs.filter(d => !d.isTemplateForField).map(doc => doc.layoutKey === "layout_fromParent" && (doc.layoutKey = "layout")); - } - }, { fireImmediately: true }); - - } componentWillUnmount() { this.gestureDisposer?.(); this.multiTouchDisposer?.(); - this._childLayoutDisposer?.(); } @computed get dataDoc() { diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 71358a8ec..296c1a39c 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -725,14 +725,6 @@ export class CollectionTreeView extends CollectionSubView { - DocListCast(this.dataDoc[this.props.fieldKey]).map(d => { - DocListCast(d.data).map((img, i) => { - const caption = (d.captions as any)[i]; - if (caption) { - Doc.GetProto(img).caption = caption; - } - }); - }); const { ImageDocument } = Docs.Create; const { Document } = this.props; const fallbackImg = "http://www.cs.brown.edu/~bcz/face.gif"; @@ -742,21 +734,19 @@ export class CollectionTreeView extends CollectionSubView(["dropAction"]), icon: "portrait", - onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'), - })); - - Doc.AddDocToList(Doc.UserDoc().dockedBtns as Doc, "data", - Docs.Create.FontIconDocument({ - title: "detail view", _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100, dropAction: "alias", - dragFactory: detailView, removeDropProperties: new List(["dropAction"]), icon: "file-alt", - onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'), - })); - - Document.childLayout = heroView; + const doubleClickView = ImageDocument("http://cs.brown.edu/~bcz/face.gif", { _width: 400 }); // replace with desired double click target + DocListCast(this.dataDoc[this.props.fieldKey]).map(d => { + DocListCast(d.data).map((img, i) => { + const caption = (d.captions as any)[i]; + if (caption) { + Doc.GetProto(img).caption = caption; + Doc.GetProto(img).doubleClickView = doubleClickView; + } + }); + d.layout = ImageBox.LayoutString("hero"); + }); + + Document.childLayoutTemplate = heroView; Document.childDetailView = detailView; Document._viewType = CollectionViewType.Time; Document._forceActive = true; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index b4eb22444..45ef0455e 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -855,9 +855,10 @@ export class CollectionFreeFormView extends CollectionSubView BoolCast(this.Document.useClusters); @computed get backgroundActive() { return this.layoutDoc.isBackground && (this.props.ContainingCollectionView?.active() || this.props.active()); } + backgroundHalo = () => BoolCast(this.Document.useClusters); parentActive = () => this.props.active() || this.backgroundActive ? true : false; + childLayoutFunc = () => this.props.childLayoutTemplate?.() || Cast(this.props.Document.childLayoutTemplate, Doc, null); getChildDocumentViewProps(childLayout: Doc, childData?: Doc): DocumentViewProps { return { ...this.props, @@ -867,12 +868,12 @@ export class CollectionFreeFormView extends CollectionSubView this.props.childLayoutTemplate?.() || Cast(this.props.Document.childLayoutTemplate, Doc, null); get doLayoutComputation() { const { newPool, computedElementData } = this.doInternalLayoutComputation; runInAction(() => @@ -1025,7 +1025,6 @@ export class CollectionFreeFormView extends CollectionSubView this.doLayoutComputation, (elements) => this._layoutElements = elements || [], { fireImmediately: true, name: "doLayout" }); @@ -1156,7 +1155,7 @@ export class CollectionFreeFormView extends CollectionSubView !doc.isBackground && doc.z === undefined).map(doc => isDocInView(doc, selRect)); // first see if there are any foreground docs to snap to diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 72bbc9e4b..6e3420f22 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -260,7 +260,7 @@ export class PresBox extends ViewBoxBaseComponent panelHeight = () => this.props.PanelHeight() - 20; active = (outsideReaction?: boolean) => ((InkingControl.Instance.selectedTool === InkTool.None && !this.layoutDoc.isBackground) && - (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false); + (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index 1b22ed4cd..d87d6e424 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -104,7 +104,7 @@ export class DashFieldViewInternal extends React.Component this._showEnumerables = true)); }} > {strVal} - + ; } } } diff --git a/src/new_fields/documentSchemas.ts b/src/new_fields/documentSchemas.ts index 7bf1c03c8..fd9a304f9 100644 --- a/src/new_fields/documentSchemas.ts +++ b/src/new_fields/documentSchemas.ts @@ -78,7 +78,7 @@ export const positionSchema = createSchema({ }); export const collectionSchema = createSchema({ - childLayout: Doc, // layout template for children of a collecion + childLayoutTemplate: Doc, // layout template for children of a collecion childDetailView: Doc, // layout template to apply to a child when its clicked on in a collection and opened (requires onChildClick or other script to use this field) onChildClick: ScriptField, // script to run for each child when its clicked onChildDoubleClick: ScriptField, // script to run for each child when its clicked -- cgit v1.2.3-70-g09d2