From e7ebcd064a89c3f7c246bca680cea9634f87625b Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Mon, 21 Dec 2020 09:21:31 -0800 Subject: hardcoded lock/hide buttons --- src/client/views/collections/TreeView.tsx | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) (limited to 'src/client/views/collections/TreeView.tsx') diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 93d3be1fc..bc0fd287b 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -466,6 +466,34 @@ export class TreeView extends React.Component { } ; } + + @action + toggleHidden = (e: React.MouseEvent) => { + e.stopPropagation(); + this.doc.hidden = this.doc.hidden ? undefined : true; + } + + @action + toggleLock = (e: React.MouseEvent) => { + e.stopPropagation(); + this.doc.lockedPosition = this.doc.lockedPosition ? undefined : true; + } + + @computed get renderRightButtons() { + TraceMobx(); + const hidden = this.doc.hidden; + const locked = this.doc.lockedPosition; + return this.doc._viewType == CollectionViewType.Docking || (Doc.IsSystem(this.doc) && Doc.UserDoc().noviceMode) ? (null) : + <> +
+ +
+
+ +
+ + } + @computed get showTitleEditorControl() { return ["*", this._uniqueId, this.props.treeView._uniqueId].includes(Doc.GetT(this.doc, "editTitle", "string", true) || ""); } @computed get headerElements() { return (Doc.IsSystem(this.doc) && Doc.UserDoc().noviceMode) || this.props.treeViewHideHeaderFields() ? (null) : @@ -584,6 +612,7 @@ export class TreeView extends React.Component { }} > {view} + {this.renderRightButtons} {this.headerElements} ; } -- cgit v1.2.3-70-g09d2 From 57552e7b8640bbb6896e8d484aea9656b264e548 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Wed, 23 Dec 2020 13:20:51 -0800 Subject: move lock/hide buttons to StyleProvider --- src/client/views/MainView.tsx | 5 ++-- src/client/views/StyleProvider.tsx | 37 ++++++++++++++++++++++++++++++ src/client/views/collections/TreeView.scss | 6 ++--- src/client/views/collections/TreeView.tsx | 30 ++---------------------- 4 files changed, 45 insertions(+), 33 deletions(-) (limited to 'src/client/views/collections/TreeView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 5eb8429f0..daa059a49 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -58,7 +58,7 @@ import { PDFMenu } from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; import { PropertiesView } from './PropertiesView'; import { SearchBox } from './search/SearchBox'; -import { DefaultStyleProvider } from './StyleProvider'; +import { DefaultStyleProvider, DashboardStyleProvider } from './StyleProvider'; const _global = (window /* browser */ || global /* node */) as any; @observer @@ -296,6 +296,7 @@ export class MainView extends React.Component { } @computed get flyout() { + console.log(this._sidebarContent.title); return !this._flyoutWidth ?
{this.docButtons}
: @@ -314,7 +315,7 @@ export class MainView extends React.Component { PanelHeight={this.getContentsHeight} renderDepth={0} focus={emptyFunction} - styleProvider={DefaultStyleProvider} + styleProvider={this._sidebarContent.title === "My Dashboards" ? DashboardStyleProvider : DefaultStyleProvider} parentActive={returnTrue} whenActiveChanged={emptyFunction} bringToFront={emptyFunction} diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 312cfc73e..10cad5806 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -160,6 +160,43 @@ export function DefaultStyleProvider(doc: Opt, props: Opt : (null); } + } +} + +function toggleHidden(e: React.MouseEvent, doc: Doc) { + UndoManager.RunInBatch(() => runInAction(() => { + e.stopPropagation(); + doc.hidden = doc.hidden ? undefined : true; + }), "toggleHidden"); +} + +function toggleLock(e: React.MouseEvent, doc: Doc) { + UndoManager.RunInBatch(() => runInAction(() => { + e.stopPropagation(); + doc.lockedPosition = doc.lockedPosition ? undefined : true; + }), "toggleHidden"); +} + +/** + * add lock and hide button decorations for the "Dashboards" flyout TreeView + */ +export function DashboardStyleProvider(doc: Opt, props: Opt, property: string) { + switch (property.split(":")[0]) { + case StyleProp.Decorations: + if (doc) { + const hidden = doc.hidden; + const locked = doc.lockedPosition; + return doc._viewType == CollectionViewType.Docking || (Doc.IsSystem(doc) && Doc.UserDoc().noviceMode) ? (null) : + <> +
toggleHidden(e, doc)}> + +
+
toggleLock(e, doc)}> + +
+ + } + default: return DefaultStyleProvider(doc, props, property); } } diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 1cd7cf82a..45dec2661 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -98,12 +98,12 @@ width: unset; } - >svg, .treeView-lock, .treeView-hide, .treeView-lock-active, .treeView-hide-active { + >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active { margin-left: 0.25rem; margin-right: 0.25rem; } - >svg, .treeView-lock, .treeView-hide { + >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide { display: none; } @@ -131,7 +131,7 @@ } } - .treeView-lock, .treeView-hide { + .styleProvider-treeView-lock, .styleProvider-treeView-hide { display: inherit; } } diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index bc0fd287b..8d25cc295 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -466,33 +466,6 @@ export class TreeView extends React.Component { } ; } - - @action - toggleHidden = (e: React.MouseEvent) => { - e.stopPropagation(); - this.doc.hidden = this.doc.hidden ? undefined : true; - } - - @action - toggleLock = (e: React.MouseEvent) => { - e.stopPropagation(); - this.doc.lockedPosition = this.doc.lockedPosition ? undefined : true; - } - - @computed get renderRightButtons() { - TraceMobx(); - const hidden = this.doc.hidden; - const locked = this.doc.lockedPosition; - return this.doc._viewType == CollectionViewType.Docking || (Doc.IsSystem(this.doc) && Doc.UserDoc().noviceMode) ? (null) : - <> -
- -
-
- -
- - } @computed get showTitleEditorControl() { return ["*", this._uniqueId, this.props.treeView._uniqueId].includes(Doc.GetT(this.doc, "editTitle", "string", true) || ""); } @computed get headerElements() { @@ -612,7 +585,8 @@ export class TreeView extends React.Component { }} > {view} - {this.renderRightButtons} + {/* hide and lock buttons */} + {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} {this.headerElements} ; } -- cgit v1.2.3-70-g09d2 From 7aba0a9b1b1a3e7d72e24118ecbb05b98165d3b9 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Wed, 23 Dec 2020 14:39:29 -0800 Subject: UI styling changes --- src/client/views/MainView.scss | 1 - src/client/views/MainView.tsx | 5 ++--- src/client/views/collections/TreeView.scss | 27 +++++++++++++++------------ src/client/views/collections/TreeView.tsx | 7 ++++--- src/client/views/search/SearchBox.scss | 29 ++++++++--------------------- src/client/views/search/SearchBox.tsx | 2 +- 6 files changed, 30 insertions(+), 41 deletions(-) (limited to 'src/client/views/collections/TreeView.tsx') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 33bd7e77e..d6a455a22 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -369,7 +369,6 @@ height: 55px; top: 50%; left: -10px; - border: 1px solid black; border-radius: 8px; position: relative; z-index: 41; // lm_maximised has a z-index of 40 and this needs to be above that diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index daa059a49..48cc6f36d 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -296,7 +296,6 @@ export class MainView extends React.Component { } @computed get flyout() { - console.log(this._sidebarContent.title); return !this._flyoutWidth ?
{this.docButtons}
: @@ -387,8 +386,8 @@ export class MainView extends React.Component { {this.menuPanel}
{this.flyout} - < div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} > - +
+
{this.dockingContent} diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 45dec2661..3c1e16f6c 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -98,15 +98,20 @@ width: unset; } - >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active { + .right-buttons-container { + display: flex; + align-items: center; margin-left: 0.25rem; - margin-right: 0.25rem; - } - >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide { - display: none; + >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active { + margin-left: 0.25rem; + margin-right: 0.25rem; + } + + >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide { + display: none; + } } - } .treeView-header:hover { @@ -114,10 +119,6 @@ display: inherit; } - >svg { - display: inherit; - } - .treeView-openRight { display: inline-block; height: 17px; @@ -131,8 +132,10 @@ } } - .styleProvider-treeView-lock, .styleProvider-treeView-hide { - display: inherit; + .right-buttons-container { + >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide { + display: inherit; + } } } diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 8d25cc295..bce0ba9e2 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -585,9 +585,10 @@ export class TreeView extends React.Component { }} > {view}
- {/* hide and lock buttons */} - {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} - {this.headerElements} +
+ {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} {/* hide and lock buttons */} + {this.headerElements} +
; } diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 13d4a6d5a..76f9b66eb 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -30,42 +30,29 @@ .searchBox-lozenge-user, .searchBox-lozenge-dashboard, .searchBox-lozenge { - background-color: #313131; - border-radius: 5px; height: 18px; padding: 4px; - box-shadow: lightgrey 0.15em 0.15em 0.1em; - margin: 2px; - margin-bottom: 4px; - border-top: dimgrey 1px solid; - border-left: dimgrey 1px solid; + margin-right: 5px; display: flex; + align-items: center; + border: grey 1px solid; .searchBox-logoff, .searchBox-dashboards { border-radius: 3px; background: olivedrab; color: white; - position: relative; display: none; - margin-left: 3px; - padding-left: 2px; - padding-right: 2px; - padding-bottom: 11px; - cursor: default; + margin-left: 5px; + padding: 1px 2px 1px 2px; + cursor: pointer; } .searchBox-logoff { background: red; } .searchBox-dashSelect{ - background-color: black; - color: white; - font-size: 9; - margin-right: 6; - border-radius: 5px; - position: relative; - height: 15px; - transform: translate(0,-3px); + border: none; + background-color: transparent; &:hover { cursor: pointer; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index d3fee85a7..d10afdcf9 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -466,7 +466,7 @@ export class SearchBox extends ViewBoxBaseComponent + return
-- cgit v1.2.3-70-g09d2 From a2807a42ab6af0d683726d8263b14fc8121fc6f0 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 23 Dec 2020 19:21:10 -0500 Subject: changed DashbaoardStyleProvider to not show icons for tab's by adding an 'afterHeader' property extension to treeView styleprovider calls. --- src/client/views/MainView.tsx | 40 ++++++++++++++++++++++++++----- src/client/views/StyleProvider.tsx | 37 ---------------------------- src/client/views/collections/TreeView.tsx | 2 +- 3 files changed, 35 insertions(+), 44 deletions(-) (limited to 'src/client/views/collections/TreeView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 48cc6f36d..f301d6c51 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -3,7 +3,7 @@ import { faBuffer, faHireAHelper } from '@fortawesome/free-brands-svg-icons'; import * as far from '@fortawesome/free-regular-svg-icons'; import * as fa from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, configure, observable, reaction } from 'mobx'; +import { action, computed, configure, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import "normalize.css"; import * as React from 'react'; @@ -28,7 +28,7 @@ import { SettingsManager } from '../util/SettingsManager'; import { SharingManager } from '../util/SharingManager'; import { SnappingManager } from '../util/SnappingManager'; import { Transform } from '../util/Transform'; -import { UndoManager } from '../util/UndoManager'; +import { UndoManager, undoBatch } from '../util/UndoManager'; import { TimelineMenu } from './animationtimeline/TimelineMenu'; import { CollectionDockingView } from './collections/CollectionDockingView'; import { MarqueeOptionsMenu } from './collections/collectionFreeForm/MarqueeOptionsMenu'; @@ -46,7 +46,7 @@ import { LinkMenu } from './linking/LinkMenu'; import "./MainView.scss"; import { AudioBox } from './nodes/AudioBox'; import { DocumentLinksButton } from './nodes/DocumentLinksButton'; -import { DocumentView } from './nodes/DocumentView'; +import { DocumentView, DocumentViewProps } from './nodes/DocumentView'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup'; import { LinkDocPreview } from './nodes/LinkDocPreview'; @@ -58,7 +58,8 @@ import { PDFMenu } from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; import { PropertiesView } from './PropertiesView'; import { SearchBox } from './search/SearchBox'; -import { DefaultStyleProvider, DashboardStyleProvider } from './StyleProvider'; +import { DefaultStyleProvider, StyleProp } from './StyleProvider'; +import { FieldViewProps } from './nodes/FieldView'; const _global = (window /* browser */ || global /* node */) as any; @observer @@ -295,6 +296,33 @@ export class MainView extends React.Component { doc.dockingConfig ? CurrentUserUtils.openDashboard(Doc.UserDoc(), doc) : CollectionDockingView.AddSplit(doc, "right"); } + + /** + * add lock and hide button decorations for the "Dashboards" flyout TreeView + */ + DashboardStyleProvider(doc: Opt, props: Opt, property: string) { + const toggleField = undoBatch(action((e: React.MouseEvent, doc: Doc, field: string) => { + e.stopPropagation(); + doc[field] = doc[field] ? undefined : true; + })); + switch (property.split(":")[0]) { + case StyleProp.Decorations: + return !doc || property.includes(":afterHeader") || // bcz: Todo: afterHeader should be generalized into a renderPath that is a list of the documents rendered so far which would mimic much of CSS property selectors + DocListCast((Doc.UserDoc().myDashboards as Doc).data).some(dash => dash === doc || + DocListCast(dash.data).some(tabset => tabset === doc)) ? (null) : + <> +
toggleField(e, doc, "hidden")}> + +
+
toggleField(e, doc, "lockedPosition")}> + +
+ ; + } + return DefaultStyleProvider(doc, props, property); + } + + @computed get flyout() { return !this._flyoutWidth ?
{this.docButtons} @@ -314,7 +342,7 @@ export class MainView extends React.Component { PanelHeight={this.getContentsHeight} renderDepth={0} focus={emptyFunction} - styleProvider={this._sidebarContent.title === "My Dashboards" ? DashboardStyleProvider : DefaultStyleProvider} + styleProvider={this._sidebarContent.proto === Doc.UserDoc().myDashboards ? this.DashboardStyleProvider : DefaultStyleProvider} parentActive={returnTrue} whenActiveChanged={emptyFunction} bringToFront={emptyFunction} @@ -387,7 +415,7 @@ export class MainView extends React.Component {
{this.flyout}
- +
{this.dockingContent} diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 10cad5806..312cfc73e 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -160,43 +160,6 @@ export function DefaultStyleProvider(doc: Opt, props: Opt : (null); } - } -} - -function toggleHidden(e: React.MouseEvent, doc: Doc) { - UndoManager.RunInBatch(() => runInAction(() => { - e.stopPropagation(); - doc.hidden = doc.hidden ? undefined : true; - }), "toggleHidden"); -} - -function toggleLock(e: React.MouseEvent, doc: Doc) { - UndoManager.RunInBatch(() => runInAction(() => { - e.stopPropagation(); - doc.lockedPosition = doc.lockedPosition ? undefined : true; - }), "toggleHidden"); -} - -/** - * add lock and hide button decorations for the "Dashboards" flyout TreeView - */ -export function DashboardStyleProvider(doc: Opt, props: Opt, property: string) { - switch (property.split(":")[0]) { - case StyleProp.Decorations: - if (doc) { - const hidden = doc.hidden; - const locked = doc.lockedPosition; - return doc._viewType == CollectionViewType.Docking || (Doc.IsSystem(doc) && Doc.UserDoc().noviceMode) ? (null) : - <> -
toggleHidden(e, doc)}> - -
-
toggleLock(e, doc)}> - -
- - } - default: return DefaultStyleProvider(doc, props, property); } } diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index bce0ba9e2..e05e5925d 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -586,7 +586,7 @@ export class TreeView extends React.Component { {view}
- {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} {/* hide and lock buttons */} + {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations + (Doc.IsSystem(this.props.containingCollection) ? ":afterHeader" : ""))} {/* hide and lock buttons */} {this.headerElements}
; -- cgit v1.2.3-70-g09d2 From e59f88e1af2ca691bd48188e5bef9e6a4d4e2dab Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 31 Dec 2020 13:53:29 -0500 Subject: fixes for sliderBox to work in FilterBox. suppressed brush highlighting in filterBox. --- src/client/documents/Documents.ts | 4 ++-- src/client/views/StyleProvider.tsx | 4 +++- src/client/views/collections/TreeView.tsx | 13 +++++++++---- src/client/views/nodes/DocumentView.tsx | 3 ++- src/client/views/nodes/FilterBox.tsx | 9 +++++---- src/client/views/nodes/SliderBox.scss | 4 +++- src/client/views/nodes/SliderBox.tsx | 10 ++++++---- 7 files changed, 30 insertions(+), 17 deletions(-) (limited to 'src/client/views/collections/TreeView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 8fd906dc7..c457fb722 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -113,6 +113,7 @@ export interface DocumentOptions { page?: number; description?: string; // added for links _viewScale?: number; + _overflow?: string; forceActive?: boolean; layout?: string | Doc; // default layout string for a document contentPointerEvents?: string; // pointer events allowed for content of a document view. eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents @@ -1250,14 +1251,13 @@ export namespace DocUtils { }); }); if (x !== undefined && y !== undefined) { - const newCollection = Docs.Create.PileDocument(docList, { title: "pileup", x: x - 55, y: y - 55, _width: 110, _height: 100 }); + const newCollection = Docs.Create.PileDocument(docList, { title: "pileup", x: x - 55, y: y - 55, _width: 110, _height: 100, _overflow: "visible" }); newCollection.x = NumCast(newCollection.x) + NumCast(newCollection._width) / 2 - 55; newCollection.y = NumCast(newCollection.y) + NumCast(newCollection._height) / 2 - 55; newCollection._width = newCollection._height = 110; //newCollection.borderRounding = "40px"; newCollection._jitterRotation = 10; newCollection._backgroundColor = "gray"; - newCollection._overflow = "visible"; return newCollection; } } diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 056854ad3..e1600f748 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; import { runInAction } from 'mobx'; -import { Doc, Opt, StrListCast } from "../../fields/Doc"; +import { Doc, Opt, StrListCast, LayoutSym } from "../../fields/Doc"; import { List } from '../../fields/List'; import { listSpec } from '../../fields/Schema'; import { BoolCast, Cast, NumCast, StrCast } from "../../fields/Types"; @@ -107,9 +107,11 @@ export function DefaultStyleProvider(doc: Opt, props: Opt { parentActive={returnTrue} whenActiveChanged={this.props.whenActiveChanged} bringToFront={emptyFunction} + cantBrush={this.props.treeView.props.cantBrush} dontRegisterView={BoolCast(this.props.treeView.props.Document.dontRegisterChildViews)} docFilters={returnEmptyFilter} docRangeFilters={returnEmptyFilter} @@ -616,15 +618,17 @@ export class TreeView extends React.Component { } renderEmbeddedDocument = (asText: boolean) => { - const panelWidth = asText || StrCast(Doc.LayoutField(this.layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.expandPanelWidth; - const panelHeight = asText ? this.rtfOutlineHeight : StrCast(Doc.LayoutField(this.layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.expandPanelHeight; + const layout = StrCast(Doc.LayoutField(this.layoutDoc)); + const isExpandable = layout.includes(FormattedTextBox.name) || layout.includes(SliderBox.name); + const panelWidth = asText || isExpandable ? this.rtfWidth : this.expandPanelWidth; + const panelHeight = asText ? this.rtfOutlineHeight : isExpandable ? this.rtfHeight : this.expandPanelHeight; return this._dref = r)} Document={this.doc} DataDoc={undefined} PanelWidth={panelWidth} PanelHeight={panelHeight} - NativeWidth={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} - NativeHeight={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined} + NativeWidth={!asText && (this.layoutDoc.type === DocumentType.RTF || this.layoutDoc.type === DocumentType.SLIDER) ? this.rtfWidth : undefined} + NativeHeight={!asText && (this.layoutDoc.type === DocumentType.RTF || this.layoutDoc.type === DocumentType.SLIDER) ? this.rtfHeight : undefined} fitContentsToDoc={true} hideTitle={asText} LayoutTemplateString={asText ? FormattedTextBox.LayoutString("text") : undefined} @@ -646,6 +650,7 @@ export class TreeView extends React.Component { whenActiveChanged={this.props.whenActiveChanged} addDocTab={this.props.addDocTab} pinToPres={this.props.pinToPres} + cantBrush={this.props.treeView.props.cantBrush} bringToFront={returnFalse} />; } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index e99b0a155..d72e555a0 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -74,6 +74,7 @@ export interface DocumentViewSharedProps { dropAction?: dropActionType; dontRegisterView?: boolean; ignoreAutoHeight?: boolean; + cantBrush?: boolean; // whether the document doesn't show brush highlighting pointerEvents?: string; scriptContext?: any; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document } @@ -820,7 +821,7 @@ export class DocumentViewInternal extends DocComponent item.split(":")[0] === facetHeader)) !== -1) { - docRangeFilters.splice(index, 1); + docRangeFilters.splice(index, 3); } } } else { @@ -122,13 +122,13 @@ export class FilterBox extends ViewBoxBaseComponent; if (facetHeader === "text" || facetValues.rtFields / allCollectionDocs.length > 0.1) { - newFacet = Docs.Create.TextDocument("", { _width: 100, _height: 25, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", title: facetHeader, treeViewOpen: true, forceActive: true, ignoreClick: true }); + newFacet = Docs.Create.TextDocument("", { _width: 100, _height: 25, system: true, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", title: facetHeader, treeViewOpen: true, forceActive: true, ignoreClick: true }); Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox newFacet._textBoxPadding = 4; const scriptText = `setDocFilter(this?.target, "${facetHeader}", text, "match")`; newFacet.onTextChanged = ScriptField.MakeScript(scriptText, { this: Doc.name, text: "string" }); } else if (facetHeader !== "tags" && nonNumbers / facetValues.strings.length < .1) { - newFacet = Docs.Create.SliderDocument({ title: facetHeader, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", treeViewOpen: true }); + newFacet = Docs.Create.SliderDocument({ title: facetHeader, _overflow: "visible", _height: 40, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", treeViewOpen: true }); const newFacetField = Doc.LayoutFieldKey(newFacet); const ranged = Doc.readDocRangeFilter(targetDoc, facetHeader); Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox @@ -146,7 +146,7 @@ export class FilterBox extends ViewBoxBaseComponent e.stopPropagation()} style={{ boxShadow: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow) }}> -
+
Date: Fri, 15 Jan 2021 15:27:16 -0500 Subject: fixed more issues with audio Box - simplified decorations when selected. fixed dragging when not selected. added esc to stop dragging. --- src/client/views/DocumentDecorations.tsx | 54 ++++++------ src/client/views/GlobalKeyHandler.ts | 4 + src/client/views/InkStrokeProperties.ts | 2 +- src/client/views/collections/TreeView.tsx | 5 +- src/client/views/nodes/AudioBox.scss | 1 - src/client/views/nodes/AudioBox.tsx | 140 +++++++++++------------------- src/client/views/nodes/DocumentView.tsx | 2 +- 7 files changed, 91 insertions(+), 117 deletions(-) (limited to 'src/client/views/collections/TreeView.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index c2de78d09..e1b9fe8aa 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -569,7 +569,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
); - const openIcon = !canOpen ? (null) : Open in Tab (ctrl: as alias, shift: in new collection)
} placement="top">
{ e.preventDefault(); e.stopPropagation(); }} onPointerDown={this.onMaximizeDown}> + const openIcon = !canOpen ? (null) : Open in Tab (ctrl: as alias, shift: in new collection)
} placement="top">
{ e.preventDefault(); e.stopPropagation(); }} onPointerDown={this.onMaximizeDown}> {SelectionManager.Views().length === 1 ? : "..."}
; @@ -613,31 +613,35 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b }}> {closeIcon} {bounds.r - bounds.x < 100 ? null : titleArea} - {SelectionManager.Views().length !== 1 || seldoc.Document.type === DocumentType.INK ? (null) : - {`${seldoc.finalLayoutKey.includes("icon") ? "De" : ""}Iconify Document`}
} placement="top"> -
- -
- } - {openIcon} -
e.preventDefault()} /> -
e.preventDefault()} /> -
e.preventDefault()} /> -
e.preventDefault()} /> -
-
e.preventDefault()} /> -
e.preventDefault()} /> -
e.preventDefault()} /> -
e.preventDefault()} /> - {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) : - tap to select containing document
} placement="top"> -
e.preventDefault()}> - -
} -
+ {SelectionManager.Views().length !== 1 || seldoc.Document.type === DocumentType.INK ? (null) : + {`${seldoc.finalLayoutKey.includes("icon") ? "De" : ""}Iconify Document`}
} placement="top"> +
+ +
+ } + {openIcon} +
e.preventDefault()} /> +
e.preventDefault()} /> +
e.preventDefault()} /> +
e.preventDefault()} /> +
+
e.preventDefault()} /> +
e.preventDefault()} /> +
e.preventDefault()} /> +
e.preventDefault()} /> + + {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) : + tap to select containing document
} placement="top"> +
e.preventDefault()}> + +
} + + } +
e.preventDefault()}>{useRotation && "⟲"}
-
{seldoc?.Document.type === DocumentType.FONTICON ? (null) :
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index c38842c4f..8a07c5321 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -27,6 +27,7 @@ import { SnappingManager } from "../util/SnappingManager"; import { SearchBox } from "./search/SearchBox"; import { random } from "lodash"; import { DocumentView } from "./nodes/DocumentView"; +import { AudioBox } from "./nodes/AudioBox"; const modifiers = ["control", "meta", "shift", "alt"]; type KeyHandler = (keycode: string, e: KeyboardEvent) => KeyControlInfo | Promise; @@ -121,6 +122,9 @@ export class KeyManager { DragManager.AbortDrag(); } else if (CollectionDockingView.Instance.HasFullScreen) { CollectionDockingView.Instance.CloseFullScreen(); + } else if (AudioBox.SelectingRegion) { + AudioBox.SelectingRegion = undefined; + doDeselect = false; } else { doDeselect = !ContextMenu.Instance.closeMenu(); } diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts index fcc6b9da0..ce7f3d8d9 100644 --- a/src/client/views/InkStrokeProperties.ts +++ b/src/client/views/InkStrokeProperties.ts @@ -220,7 +220,7 @@ export class InkStrokeProperties { ((ink[0].X === ink[ink.length - 1].X) && (ink[0].Y === ink[ink.length - 1].Y) && (i === 0 || i === ink.length - 1) && (controlNum === 0 || controlNum === ink.length - 1)) ) ? { X: ink[i].X - xDiff, Y: ink[i].Y - yDiff } : - { X: ink[i].X, Y: ink[i].Y }) + { X: ink[i].X, Y: ink[i].Y }); } const oldx = doc.x; const oldy = doc.y; diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index a61a9e43c..c4934cf45 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -379,7 +379,8 @@ export class TreeView extends React.Component { TraceMobx(); const expandKey = this.treeViewExpandedView; if (["links", "annotations", this.fieldKey].includes(expandKey)) { - const remDoc = (doc: Doc | Doc[]) => this.remove(doc, expandKey); + const key = expandKey === "annotations" ? this.fieldKey + "-annotations" : expandKey; + const remDoc = (doc: Doc | Doc[]) => this.remove(doc, key); const localAdd = (doc: Doc, addBefore?: Doc, before?: boolean) => { // if there's a sort ordering specified that can be modified on drop (eg, zorder can be modified, alphabetical can't), // then the modification would be done here @@ -391,7 +392,7 @@ export class TreeView extends React.Component { docs.sort((a, b) => NumCast(a.zIndex) > NumCast(b.zIndex) ? 1 : -1); docs.forEach((d, i) => d.zIndex = i); } - const added = Doc.AddDocToList(this.dataDoc, expandKey, doc, addBefore, before, false, true); + const added = Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, false, true); added && (doc.context = this.doc.context); return added; }; diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 36cc22d79..93cdbbb09 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -4,7 +4,6 @@ height: 100%; position: inherit; display: flex; - pointer-events: all; position: relative; cursor: default; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 9f8bdcd57..c3c876b75 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -3,17 +3,17 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import axios from "axios"; import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; +import { computedFn } from "mobx-utils"; import Waveform from "react-audio-waveform"; import { DateField } from "../../../fields/DateField"; import { Doc, DocListCast, Opt } from "../../../fields/Doc"; import { documentSchema } from "../../../fields/documentSchemas"; -import { Id } from "../../../fields/FieldSymbols"; import { List } from "../../../fields/List"; import { createSchema, listSpec, makeInterface } from "../../../fields/Schema"; import { ComputedField, ScriptField } from "../../../fields/ScriptField"; -import { Cast, DateCast, NumCast } from "../../../fields/Types"; +import { Cast, NumCast } from "../../../fields/Types"; import { AudioField, nullAudio } from "../../../fields/URLField"; -import { emptyFunction, formatTime, numberRange, returnFalse, returnTrue, setupMoveUpEvents, Utils } from "../../../Utils"; +import { emptyFunction, formatTime, numberRange, returnFalse, setupMoveUpEvents, Utils } from "../../../Utils"; import { Docs, DocUtils } from "../../documents/Documents"; import { Networking } from "../../Network"; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; @@ -29,7 +29,6 @@ import { DocumentView } from "./DocumentView"; import { FieldView, FieldViewProps } from './FieldView'; import { FormattedTextBoxComment } from "./formattedText/FormattedTextBoxComment"; import { LinkDocPreview } from "./LinkDocPreview"; -import { computedFn } from "mobx-utils"; declare class MediaRecorder { // whatever MediaRecorder has @@ -47,7 +46,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent = []; _audioRef = React.createRef(); _timeline: Opt; - _duration = 0; _markerStart: number = 0; _currMarker: any; - @observable _selectRegionVisible: boolean = false; + @observable static SelectingRegion: AudioBox | undefined = undefined; + @observable static _scrubTime = 0; @observable _markerEnd: number = 0; @observable _position: number = 0; @observable _waveHeight: Opt = this.layoutDoc._height; - @observable private _paused: boolean = false; - @observable private static _scrubTime = 0; + @observable _paused: boolean = false; @computed get audioState(): undefined | "recording" | "paused" | "playing" { return this.dataDoc.audioState as (undefined | "recording" | "paused" | "playing"); } set audioState(value) { this.dataDoc.audioState = value; } public static SetScrubTime = action((timeInMillisFrom1970: number) => { AudioBox._scrubTime = 0; AudioBox._scrubTime = timeInMillisFrom1970; }); @computed get recordingStart() { return Cast(this.dataDoc[this.props.fieldKey + "-recordingStart"], DateField)?.date.getTime(); } @computed get audioDuration() { return NumCast(this.dataDoc.duration); } - async slideTemplate() { return (await Cast((await Cast(Doc.UserDoc().slidesBtn, Doc) as Doc).dragFactory, Doc) as Doc); } + @computed get markerDocs() { return DocListCast(this.dataDoc[this.annotationKey]); } + @computed get links() { return DocListCast(this.dataDoc.links); } + @computed get pauseTime() { return this._pauseEnd - this._pauseStart; } // total time paused to update the correct time constructor(props: Readonly) { super(props); @@ -103,7 +99,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - const time = this._ele?.currentTime || Cast(this.props.Document._currentTimecode, "number", null) || (this.audioState === "recording" ? (Date.now() - (this.recordingStart || 0)) / 1000 : undefined); - return time ? this.createMarker(time) : this.rootDoc; + return this.createMarker(this._ele?.currentTime || Cast(this.props.Document._currentTimecode, "number", null) || (this.audioState === "recording" ? (Date.now() - (this.recordingStart || 0)) / 1000 : undefined)); } @action componentDidMount() { - if (!this.dataDoc.markerAmount) { - this.dataDoc.markerAmount = 0; - } this.props.setContentView?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document. this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link. this.audioState = this.path ? "paused" : undefined; @@ -156,7 +148,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - console.log(doc); this.links.filter(l => l.anchor1 === doc || l.anchor2 === doc).forEach(l => { const { la1, la2 } = this.getLinkData(l); const startTime = NumCast(la1.audioStart, NumCast(la2.audioStart, null)); @@ -165,9 +156,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { clearTimeout(this._play); - this._duration = endTime - seekTimeInSeconds; if (Number.isNaN(this._ele?.duration)) { setTimeout(() => this.playFrom(seekTimeInSeconds, endTime), 500); } else if (this._ele && AudioBox.Enabled) { @@ -231,7 +219,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent this.audioState = "playing"); if (endTime !== this.audioDuration) { - this._play = setTimeout(() => this.pause(), (this._duration) * 1000); // use setTimeout to play a specific duration + this._play = setTimeout(() => this.pause(), (endTime - seekTimeInSeconds) * 1000); // use setTimeout to play a specific duration } } else { this.pause(); @@ -350,7 +338,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent { const rect = this._timeline?.getBoundingClientRect();// (e.target as any).getBoundingClientRect(); - if (rect && e.target !== this._audioRef.current) { + if (rect && e.target !== this._audioRef.current && this.active()) { const wasPaused = this.audioState === "paused"; this._ele!.currentTime = this.layoutDoc._currentTimecode = (e.clientX - rect.x) / rect.width * this.audioDuration; wasPaused && this.pause(); - this.props.select(false); const toTimeline = (screen_delta: number) => screen_delta / rect.width * this.audioDuration; this._markerStart = this._markerEnd = toTimeline(e.clientX - rect.x); + AudioBox.SelectingRegion = this; setupMoveUpEvents(this, e, action(e => { - this._selectRegionVisible = true; this._markerEnd = toTimeline(e.clientX - rect.x); if (this._markerEnd < this._markerStart) { const tmp = this._markerStart; @@ -392,16 +372,20 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - (Math.abs(movement[0]) > 15) && this.createMarker(this._markerStart, toTimeline(e.clientX - rect.x)); - this._selectRegionVisible = false; + AudioBox.SelectingRegion === this && (Math.abs(movement[0]) > 15) && this.createMarker(this._markerStart, toTimeline(e.clientX - rect.x)); + AudioBox.SelectingRegion = undefined; }), - e => e.shiftKey && this.createMarker(this._ele!.currentTime) - ); + e => { + this.props.select(false); + e.shiftKey && this.createMarker(this._ele!.currentTime); + } + , this.props.isSelected(true) || this._isChildActive); } } @action - createMarker(audioStart: number, audioEnd?: number) { + createMarker(audioStart?: number, audioEnd?: number) { + if (audioStart === undefined) return this.rootDoc; const marker = Docs.Create.LabelDocument({ title: ComputedField.MakeFunction(`"#" + formatToTime(self.audioStart) + "-" + formatToTime(self.audioEnd)`) as any, useLinkSmallAnchor: true, hideLinkButton: true, audioStart, audioEnd, _showSidebar: false, @@ -448,56 +432,35 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - const increment = this.audioDuration / AudioBox.NUMBER_OF_BUCKETS; - this._count = []; - for (let i = 0; i < AudioBox.NUMBER_OF_BUCKETS; i++) { - this._count.push([increment * i, 0]); - } - } - // makes sure no markers overlaps each other by setting the correct position and width - isOverlap = (m: any) => { - if (this._first) { - this._first = false; - this.markers(); - } - let max = 0; + getLevel = (m: any, placed: { audioStart: number, audioEnd: number, level: number }[]) => { const timelineContentWidth = this.props.PanelWidth() - AudioBox.playheadWidth; - const audioEnd = m.audioEnd === undefined ? m.audioStart + 10 / timelineContentWidth * this.audioDuration : m.audioEnd; - for (let i = 0; i < AudioBox.NUMBER_OF_BUCKETS; i++) { - if (this._count[i][0] >= m.audioStart && this._count[i][0] <= audioEnd) { - this._count[i][1]++; - - if (this._count[i][1] > max) { - max = this._count[i][1]; - } - } - } - - for (let i = 0; i < AudioBox.NUMBER_OF_BUCKETS; i++) { - if (this._count[i][0] >= m.audioStart && this._count[i][0] <= audioEnd) { - this._count[i][1] = max; + const x1 = m.audioStart; + const x2 = m.audioEnd === undefined ? m.audioStart + 10 / timelineContentWidth * this.audioDuration : m.audioEnd; + let max = 0; + const overlappedLevels = new Set(placed.map(p => { + const y1 = p.audioStart; + const y2 = p.audioEnd; + if ((x1 >= y1 && x1 <= y2) || (x2 >= y1 && x2 <= y2) || + (y1 >= x1 && y1 <= x2) || (y2 >= x1 && y2 <= x2)) { + max = Math.max(max, p.level); + return p.level; } - } + })); + let level = max + 1; + for (let j = max; j >= 0; j--) !overlappedLevels.has(j) && (level = j); - if (this.dataDoc.markerAmount < max) { - this.dataDoc.markerAmount = max; - } - return max - 1; + placed.push({ audioStart: x1, audioEnd: x2, level }); + return level; } @computed get selectionContainer() { - return !this._selectRegionVisible ? (null) :
; } - @computed get markerDocs() { return DocListCast(this.dataDoc[this.annotationKey]); } - @computed get links() { return DocListCast(this.dataDoc.links); } - // returns the audio waveform @computed get waveform() { const audioBuckets = Cast(this.dataDoc.audioBuckets, listSpec("number"), []); @@ -544,7 +507,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent this.props.ScreenToLocalTransform().translate(-x - 4, -y - 3)} - parentActive={returnTrue} + parentActive={(out) => this.props.isSelected(out) || this._isChildActive} + whenActiveChanged={action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive))} onClick={script} onDoubleClick={this.layoutDoc.playOnClick ? undefined : doublescript} ignoreAutoHeight={false} @@ -563,12 +527,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent} ; }); + render() { const interactive = SnappingManager.GetIsDragging() || this.active() ? "-interactive" : ""; - this._first = true; // for indicating the first marker that is rendered - const timelineContentWidth = this.props.PanelWidth() - AudioBox.playheadWidth; const timelineContentHeight = (this.props.PanelHeight() * AudioBox.heightPercent / 100) * AudioBox.heightPercent / 100; // panelHeight * heightPercent is player height. * heightPercent is timeline height (as per css inline) + const overlaps: { audioStart: number, audioEnd: number, level: number }[] = []; + const drawMarkers = this.markerDocs.map((m, i) => ({ level: this.getLevel(m, overlaps), marker: m })); + const maxLevel = overlaps.reduce((m, o) => Math.max(m, o.level), 0) + 1; return
}
: -
+
@@ -603,20 +569,20 @@ export class AudioBox extends ViewBoxAnnotatableComponent {this.waveform}
- {this.markerDocs.map((m, i) => { - const isOverlap = this.isOverlap(m); + {drawMarkers.map((d, i) => { + const m = d.marker; const left = NumCast(m.audioStart) / this.audioDuration * timelineContentWidth; - const top = isOverlap / (this.dataDoc.markerAmount + 1) * timelineContentHeight; + const top = d.level / maxLevel * timelineContentHeight; const timespan = m.audioEnd === undefined ? 10 / timelineContentWidth * this.audioDuration : NumCast(m.audioEnd) - NumCast(m.audioStart); return this.layoutDoc.hideMarkers ? (null) :
{ this.playFrom(NumCast(m.audioStart), Cast(m.audioEnd, "number", null)); e.stopPropagation(); }} > {this.renderMarker(m, this.rangeClickScript, this.rangePlayScript, left + AudioBox.playheadWidth, (1 - AudioBox.heightPercent / 100) / 2 * this.props.PanelHeight() + top, timelineContentWidth * timespan / this.audioDuration, - timelineContentHeight / (this.dataDoc.markerAmount + 1))} + timelineContentHeight / maxLevel)}
; })} {this.selectionContainer} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 131e33e2a..6371ae5fb 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -416,7 +416,7 @@ export class DocumentViewInternal extends DocComponent { this._timeout = undefined; clickFunc(); }, 500); + this._timeout = setTimeout(() => { this._timeout = undefined; clickFunc(); }, 350); } else clickFunc(); } else if (this.Document["onClick-rawScript"] && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes("ScriptingBox")) {// bcz: hack? don't edit a script if you're clicking on a scripting box itself this.props.addDocTab(DocUtils.makeCustomViewClicked(Doc.MakeAlias(this.props.Document), undefined, "onClick"), "add:right"); -- cgit v1.2.3-70-g09d2