From 96fd7e51d56bdd95a9f54d61090f45cd0dd17e6a Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 29 Mar 2021 22:37:58 -0400 Subject: more progress in fixing & simplifying active/selected stuff --- src/client/views/collections/CollectionStackedTimeline.tsx | 8 ++++---- src/client/views/collections/CollectionStackingView.tsx | 5 ++++- src/client/views/collections/CollectionTreeView.tsx | 1 + src/client/views/collections/TabDocView.tsx | 3 ++- src/client/views/collections/TreeView.tsx | 6 ++++-- .../collections/collectionFreeForm/CollectionFreeFormView.tsx | 7 +++++-- .../collectionMulticolumn/CollectionMulticolumnView.tsx | 1 + .../collections/collectionMulticolumn/CollectionMultirowView.tsx | 1 + 8 files changed, 22 insertions(+), 10 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index d6aca6f00..3168ef4ba 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -32,7 +32,6 @@ export type CollectionStackedTimelineProps = { playFrom: (seekTimeInSeconds: number, endTime?: number) => void; playing: () => boolean; setTime: (time: number) => void; - isChildActive: () => boolean; startTag: string; endTag: string; mediaPath: string; @@ -145,7 +144,7 @@ export class CollectionStackedTimeline extends CollectionSubView !wasPlaying && this.props.setTime((clientX - rect.x) / rect.width * this.duration)); } } @@ -244,6 +243,7 @@ export class CollectionStackedTimeline extends CollectionSubView ({ level: this.getLevel(anchor, overlaps), anchor })); const maxLevel = overlaps.reduce((m, o) => Math.max(m, o.level), 0) + 2; - const isActive = this.props.isChildActive() || this.props.isSelected(false); + const isActive = this.props.isContentActive() || this.props.isSelected(false); return
this._timeline = timeline} onClick={e => isActive && StopEvent(e)} onPointerDown={e => isActive && this.onPointerDownTimeline(e)}> {drawAnchors.map(d => { @@ -323,7 +323,6 @@ interface StackedTimelineAnchorProps { toTimeline: (screen_delta: number, width: number) => number; playLink: (linkDoc: Doc) => void; setTime: (time: number) => void; - isChildActive: () => boolean; startTag: string; endTag: string; renderDepth: number; @@ -395,6 +394,7 @@ class StackedTimelineAnchor extends React.Component renderDepth={this.props.renderDepth + 1} LayoutTemplate={undefined} LayoutTemplateString={LabelBox.LayoutString("data")} + isDocumentActive={returnFalse} PanelWidth={() => width} PanelHeight={() => height} ScreenToLocalTransform={() => this.props.ScreenToLocalTransform().translate(-x, -y)} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 4dab9d94a..fe42d7df0 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -196,7 +196,7 @@ export class CollectionStackingView extends CollectionSubView, property: string) => { + styleProvider = (doc: Doc | undefined, props: Opt, property: string) => { if (property === StyleProp.Opacity && doc) { if (this.props.childOpacity) { return this.props.childOpacity(); @@ -207,6 +207,7 @@ export class CollectionStackingView extends CollectionSubView this.props.isSelected() || this.props.isContentActive(); getDisplayDoc(doc: Doc, width: () => number) { const dataDoc = (!doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS) ? undefined : this.props.DataDoc; const height = () => this.getDocHeight(doc); @@ -224,6 +225,8 @@ export class CollectionStackingView extends CollectionSubView { DataDoc={!Doc.AreProtosEqual(this._document[DataSym], this._document) ? this._document[DataSym] : undefined} ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} + isContentActive={returnFalse} PanelWidth={this.PanelWidth} PanelHeight={this.PanelHeight} layerProvider={this.layerProvider} @@ -367,7 +368,7 @@ interface TabMinimapViewProps { } @observer export class TabMinimapView extends React.Component { - static miniStyleProvider = (doc: Opt, props: Opt, property: string): any => { + static miniStyleProvider = (doc: Opt, props: Opt, property: string): any => { if (doc) { switch (property.split(":")[0]) { default: return DefaultStyleProvider(doc, props, property); diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index e89c594fd..6add513c4 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -511,7 +511,7 @@ export class TreeView extends React.Component { e.preventDefault(); } } - titleStyleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { + titleStyleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { if (!doc || doc !== this.doc) return this.props?.treeView?.props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView switch (property.split(":")[0]) { @@ -527,7 +527,7 @@ export class TreeView extends React.Component { case StyleProp.Decorations: return (null); } } - embeddedStyleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { + embeddedStyleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { if (property.startsWith(StyleProp.Decorations)) return (null); return this.props?.treeView?.props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView } @@ -603,6 +603,7 @@ export class TreeView extends React.Component { PanelHeight={() => 18} contextMenuItems={this.contextMenuItems} renderDepth={1} + isContentActive={returnFalse} focus={returnTrue} whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged} bringToFront={emptyFunction} @@ -675,6 +676,7 @@ export class TreeView extends React.Component { ScreenToLocalTransform={this.docTransform} renderDepth={this.props.renderDepth + 1} rootSelected={returnTrue} + isContentActive={returnFalse} styleProvider={asText ? this.titleStyleProvider : this.embeddedStyleProvider} layerProvider={this.props.layerProvider} docViewPath={this.props.treeView.props.docViewPath} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index cf48a9237..950fc4a25 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -420,7 +420,7 @@ export class CollectionFreeFormView extends CollectionSubView, props: Opt, property: string) => { + getClusterColor = (doc: Opt, props: Opt, property: string) => { let styleProp = this.props.styleProvider?.(doc, props, property); // bcz: check 'props' used to be renderDepth + 1 if (property !== StyleProp.BackgroundColor) return styleProp; const cluster = NumCast(doc?.cluster); @@ -1005,6 +1005,8 @@ export class CollectionFreeFormView extends CollectionSubView this.props.isSelected() || this.props.isContentActive(); + getChildDocView(entry: PoolData) { const childLayout = entry.pair.layout; const childData = entry.pair.data; @@ -1028,6 +1030,8 @@ export class CollectionFreeFormView extends CollectionSubView