From c4cc3cc6a43cbb61c4557da1b6809502645b371a Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 14 Apr 2021 18:01:32 -0400 Subject: fixed audiowaveform height. --- src/client/views/collections/CollectionStackedTimeline.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss index 19ad5cefa..e456c0664 100644 --- a/src/client/views/collections/CollectionStackedTimeline.scss +++ b/src/client/views/collections/CollectionStackedTimeline.scss @@ -62,6 +62,7 @@ .collectionStackedTimeline-waveform { position: absolute; width: 100%; + height: 100%; top: 0; left: 0; pointer-events: none; -- cgit v1.2.3-70-g09d2 From 3ca56576e187e2f3cc87770b0fbdf8aa6cae73f3 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 14 Apr 2021 23:12:19 -0400 Subject: fixed image templates to set/use the appropriate nativewidth/height. fixed carousel views and style provider to better support properties for components of a document view. fixed menus to show text options when captions and other sub text components are focused. --- src/client/views/DocComponent.tsx | 4 +- src/client/views/StyleProvider.tsx | 3 +- .../views/collections/CollectionCarousel3DView.tsx | 23 +---------- .../views/collections/CollectionCarouselView.tsx | 46 +++++++--------------- src/client/views/collections/CollectionMenu.scss | 2 +- src/client/views/collections/CollectionMenu.tsx | 3 ++ src/client/views/collections/TabDocView.tsx | 3 +- src/client/views/nodes/ImageBox.tsx | 4 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 6 ++- src/fields/Doc.ts | 4 +- 10 files changed, 35 insertions(+), 63 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index c017b7015..3c565fd62 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -124,8 +124,8 @@ export function ViewBoxAnnotatableComponent

{ - const p = (this.props as any)[prop] as string; - p && (style[prop] = p?.replace(/{([^.'][^}']+)}/g, replacer)); + const p = (this.props as any)[prop]; + typeof p === "string" && (style[prop] = p?.replace(/{([^.'][^}']+)}/g, replacer)); }); return style; } diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 9102b9fa4..ebd453295 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -65,6 +65,7 @@ export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentVie // export function DefaultStyleProvider(doc: Opt, props: Opt, property: string): any { const docProps = testDocProps(props) ? props : undefined; + const fieldKey = (props as any)?.fieldKey ? (props as any).fieldKey + "-" : ""; const selected = property.includes(":selected"); const isCaption = property.includes(":caption"); const isAnchor = property.includes(":anchor"); @@ -99,7 +100,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt = StrCast(doc?._backgroundColor); + let docColor: Opt = StrCast(doc?.[fieldKey + "backgroundColor"], StrCast(doc?._backgroundColor)); if (MainView.Instance.LastButton === doc) return darkScheme() ? "dimgrey" : "lightgrey"; switch (doc?.type) { case DocumentType.PRESELEMENT: docColor = docColor || (darkScheme() ? "" : ""); break; diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index b2ae441d6..9a3183d88 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -104,27 +104,6 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume }, 1500); } - _downX = 0; - _downY = 0; - onPointerDown = (e: React.PointerEvent) => { - this._downX = e.clientX; - this._downY = e.clientY; - document.addEventListener("pointerup", this.onpointerup); - } - private _lastTap: number = 0; - private _doubleTap = false; - onpointerup = (e: PointerEvent) => { - this._doubleTap = (Date.now() - this._lastTap < 300 && e.button === 0 && Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2); - this._lastTap = Date.now(); - } - - onClick = (e: React.MouseEvent) => { - if (this._doubleTap) { - e.stopPropagation(); - this.props.Document.isLightboxOpen = true; - } - } - @computed get buttons() { if (!this.props.isContentActive()) return null; return

@@ -167,7 +146,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume const index = NumCast(this.layoutDoc._itemIndex); const translateX = this.panelWidth() * (1 - index); - return
+ return
{this.content}
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index cc90b9134..0642a1f9b 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -62,53 +62,37 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument)
+ Document={curDoc.layout} DataDoc={undefined} fieldKey={"caption"} + fontSize={NumCast(this.layoutDoc["caption-fontSize"])} + xMargin={NumCast(this.layoutDoc["caption-xMargin"])} + yMargin={NumCast(this.layoutDoc["caption-yMargin"])} />
; } @computed get buttons() { return <> -
+
-
+
; } - _downX = 0; - _downY = 0; - onPointerDown = (e: React.PointerEvent) => { - this._downX = e.clientX; - this._downY = e.clientY; - document.addEventListener("pointerup", this.onpointerup); - } - private _lastTap: number = 0; - private _doubleTap = false; - onpointerup = (e: PointerEvent) => { - this._doubleTap = (Date.now() - this._lastTap < 300 && e.button === 0 && Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2); - this._lastTap = Date.now(); - } - - onClick = (e: React.MouseEvent) => { - if (this._doubleTap) { - e.stopPropagation(); - this.props.Document.isLightboxOpen = true; - } - } - render() { - return
+ return
{this.content} - {!this.props.Document._chromeHidden ? (null) : this.buttons} + {this.props.Document._chromeHidden ? (null) : this.buttons}
; } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 9eac75f4b..dc5231a3a 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -300,7 +300,7 @@ .collection3DCarouselViewChrome-scrollSpeed-cont { justify-self: right; align-items: center; - display: grid; + display: flex; grid-auto-columns: auto; font-size: 75%; letter-spacing: 2px; diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index a26953ff6..95b0ef790 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -37,6 +37,7 @@ import { LightboxView } from "../LightboxView"; import { Docs } from "../../documents/Documents"; import { DocumentManager } from "../../util/DocumentManager"; import { CollectionDockingView } from "./CollectionDockingView"; +import { FormattedTextBox } from "../nodes/formattedText/FormattedTextBox"; @observer export class CollectionMenu extends AntimodeMenu { @@ -260,6 +261,7 @@ export class CollectionViewBaseChrome extends React.Component); case CollectionViewType.Tree: return (); case CollectionViewType.Masonry: return (); + case CollectionViewType.Carousel: case CollectionViewType.Carousel3D: return (); case CollectionViewType.Grid: return (); case CollectionViewType.Docking: return (); @@ -1021,6 +1023,7 @@ export class Collection3DCarouselViewChrome extends React.Component
+ {FormattedTextBox.Focused ? : (null)}
AUTOSCROLL SPEED:
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index f6aecbb14..4417038fa 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -92,7 +92,8 @@ export class TabDocView extends React.Component { }; tab.element[0].style.borderTopRightRadius = "8px"; tab.element[0].children[1].appendChild(toggle); - tab._disposers.layerDisposer = reaction(() => ({ layer: tab.DashDoc.activeLayer, color: this.tabColor }), + tab._disposers.layerDisposer = reaction(() => + ({ layer: tab.DashDoc.activeLayer, color: this.tabColor }), ({ layer, color }) => toggle.style.background = !layer ? color : "dimgrey", { fireImmediately: true }); } // shifts the focus to this tab when another tab is dragged over it diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 8a6946b78..1ab367395 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -102,8 +102,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent disposer?.()); this.endUndoTypingBatch(); this.unhighlightSearchTerms(); @@ -1236,8 +1237,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp @action onFocused = (e: React.FocusEvent): void => { //applyDevTools.applyDevTools(this._editorView); + FormattedTextBox.Focused = this; this._editorView && RichTextMenu.Instance?.updateMenu(this._editorView, undefined, this.props); } + @observable public static Focused: FormattedTextBox | undefined; onClick = (e: React.MouseEvent): void => { if (Math.abs(e.clientX - this._downX) > 4 || Math.abs(e.clientY - this._downY) > 4) { @@ -1340,6 +1343,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp return wasUndoing; } onBlur = (e: any) => { + FormattedTextBox.Focused === this && (FormattedTextBox.Focused = undefined); if (RichTextMenu.Instance?.view === this._editorView && !this.props.isSelected(true)) { RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined); } diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 9faba9486..bd0ba3ad7 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -910,8 +910,8 @@ export namespace Doc { } export function NativeWidth(doc?: Doc, dataDoc?: Doc, useWidth?: boolean) { return !doc ? 0 : NumCast(doc._nativeWidth, NumCast((dataDoc || doc)[Doc.LayoutFieldKey(doc) + "-nativeWidth"], useWidth ? doc[WidthSym]() : 0)); } export function NativeHeight(doc?: Doc, dataDoc?: Doc, useHeight?: boolean) { return !doc ? 0 : NumCast(doc._nativeHeight, NumCast((dataDoc || doc)[Doc.LayoutFieldKey(doc) + "-nativeHeight"], useHeight ? doc[HeightSym]() : 0)); } - export function SetNativeWidth(doc: Doc, width: number | undefined) { doc[Doc.LayoutFieldKey(doc) + "-nativeWidth"] = width; } - export function SetNativeHeight(doc: Doc, height: number | undefined) { doc[Doc.LayoutFieldKey(doc) + "-nativeHeight"] = height; } + export function SetNativeWidth(doc: Doc, width: number | undefined, fieldKey?: string) { doc[(fieldKey ?? Doc.LayoutFieldKey(doc)) + "-nativeWidth"] = width; } + export function SetNativeHeight(doc: Doc, height: number | undefined, fieldKey?: string) { doc[(fieldKey ?? Doc.LayoutFieldKey(doc)) + "-nativeHeight"] = height; } const manager = new DocData(); -- cgit v1.2.3-70-g09d2 From 4334a553fdfdf44b1d1c609290fe2a874a408967 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 15 Apr 2021 00:04:18 -0400 Subject: fixed up carousels to work with templated documents --- .../views/collections/CollectionCarousel3DView.tsx | 40 +++++++++++++++++----- .../views/collections/CollectionCarouselView.tsx | 32 +++++++++++++---- src/client/views/collections/CollectionMenu.tsx | 2 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 1 + 4 files changed, 59 insertions(+), 16 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 9a3183d88..7cebabaa9 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -9,10 +9,11 @@ import { makeInterface } from '../../../fields/Schema'; import { ScriptField } from '../../../fields/ScriptField'; import { NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { OmitKeys, returnFalse, Utils } from '../../../Utils'; -import { DragManager } from '../../util/DragManager'; +import { DragManager, dropActionType } from '../../util/DragManager'; import { DocumentView } from '../nodes/DocumentView'; import "./CollectionCarousel3DView.scss"; import { CollectionSubView } from './CollectionSubView'; +import { StyleProp } from '../StyleProvider'; type Carousel3DDocument = makeInterface<[typeof documentSchema, typeof collectionSchema]>; const Carousel3DDocument = makeInterface(documentSchema, collectionSchema); @@ -42,17 +43,36 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume const displayDoc = (childPair: { layout: Doc, data: Doc }) => { const script = ScriptField.MakeScript("this._showCaption = 'caption'", { this: Doc.name }); const onChildClick = script && (() => script); - return ; }; @@ -146,7 +166,11 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume const index = NumCast(this.layoutDoc._itemIndex); const translateX = this.panelWidth() * (1 - index); - return
+ return
{this.content}
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 0642a1f9b..4a7bdf6db 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -7,7 +7,7 @@ import { collectionSchema, documentSchema } from '../../../fields/documentSchema import { makeInterface } from '../../../fields/Schema'; import { NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { OmitKeys, returnFalse } from '../../../Utils'; -import { DragManager } from '../../util/DragManager'; +import { DragManager, dropActionType } from '../../util/DragManager'; import { DocumentView } from '../nodes/DocumentView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { StyleProp } from '../StyleProvider'; @@ -47,16 +47,34 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) return !(curDoc?.layout instanceof Doc) ? (null) : <>
-
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 95b0ef790..ab4f197a6 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -554,7 +554,7 @@ export class CollectionViewBaseChrome extends React.Component
{this.lightboxButton} {this.recordButton} - {/* {!this._buttonizableCommands ? (null) : this.templateChrome} */} + {!this._buttonizableCommands ? (null) : this.templateChrome}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 9203207d7..25dc93605 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1342,6 +1342,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._undoTyping = undefined; return wasUndoing; } + @action onBlur = (e: any) => { FormattedTextBox.Focused === this && (FormattedTextBox.Focused = undefined); if (RichTextMenu.Instance?.view === this._editorView && !this.props.isSelected(true)) { -- cgit v1.2.3-70-g09d2 From 70f92c85461dc50fb0e63d3ecd5c429bcae37cc7 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 15 Apr 2021 00:20:57 -0400 Subject: simplified carousel DocumentView calls. --- .../views/collections/CollectionCarousel3DView.tsx | 35 ++++------------------ .../views/collections/CollectionCarouselView.tsx | 33 +++++--------------- 2 files changed, 13 insertions(+), 55 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 7cebabaa9..2251b60e5 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -9,7 +9,7 @@ import { makeInterface } from '../../../fields/Schema'; import { ScriptField } from '../../../fields/ScriptField'; import { NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { OmitKeys, returnFalse, Utils } from '../../../Utils'; -import { DragManager, dropActionType } from '../../util/DragManager'; +import { DragManager } from '../../util/DragManager'; import { DocumentView } from '../nodes/DocumentView'; import "./CollectionCarousel3DView.scss"; import { CollectionSubView } from './CollectionSubView'; @@ -41,38 +41,15 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume @computed get content() { const currentIndex = NumCast(this.layoutDoc._itemIndex); const displayDoc = (childPair: { layout: Doc, data: Doc }) => { - const script = ScriptField.MakeScript("this._showCaption = 'caption'", { this: Doc.name }); - const onChildClick = script && (() => script); - return ; }; diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 4a7bdf6db..d28a4d87d 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -7,7 +7,7 @@ import { collectionSchema, documentSchema } from '../../../fields/documentSchema import { makeInterface } from '../../../fields/Schema'; import { NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { OmitKeys, returnFalse } from '../../../Utils'; -import { DragManager, dropActionType } from '../../util/DragManager'; +import { DragManager } from '../../util/DragManager'; import { DocumentView } from '../nodes/DocumentView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { StyleProp } from '../StyleProvider'; @@ -47,34 +47,15 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) return !(curDoc?.layout instanceof Doc) ? (null) : <>
-
-- cgit v1.2.3-70-g09d2 From e55aed8d419d9e1d7385d0556c09405035f01e7c Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 15 Apr 2021 23:09:26 -0400 Subject: cleaned up CollectionCarousel and styleprovider to handle sub-component properties better. updated resizers in multicol/row to be visible. --- src/client/views/SidebarAnnos.tsx | 2 -- src/client/views/StyleProvider.tsx | 12 ++++--- .../views/collections/CollectionCarouselView.scss | 15 ++++---- .../views/collections/CollectionCarouselView.tsx | 40 ++++++++++++++-------- .../views/collections/CollectionStackingView.tsx | 2 +- .../collections/collectionFreeForm/MarqueeView.tsx | 2 +- .../CollectionMulticolumnView.tsx | 2 ++ .../CollectionMultirowView.tsx | 2 ++ .../collectionMulticolumn/MulticolumnResizer.tsx | 27 ++++++++------- .../collectionMulticolumn/MultirowResizer.tsx | 27 ++++++++------- src/client/views/nodes/DocumentView.tsx | 7 ++-- src/client/views/nodes/FieldView.tsx | 4 +-- src/client/views/nodes/ScreenshotBox.tsx | 4 +-- .../views/nodes/formattedText/FormattedTextBox.tsx | 16 ++++----- 14 files changed, 90 insertions(+), 72 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx index 6c3eb1e95..bff4c95fc 100644 --- a/src/client/views/SidebarAnnos.tsx +++ b/src/client/views/SidebarAnnos.tsx @@ -113,8 +113,6 @@ export class SidebarAnnos extends React.Component { NativeHeight={returnZero} PanelHeight={this.panelHeight} PanelWidth={this.panelWidth} - xMargin={0} - yMargin={0} styleProvider={this.sidebarStyleProvider} docFilters={this.docFilters} scaleField={this.sidebarKey() + "-scale"} diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index ebd453295..bde741959 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -86,21 +86,23 @@ export function DefaultStyleProvider(doc: Opt, props: Opt = StrCast(doc?.[fieldKey + "color"], StrCast(doc?._color)); + if (docColor) return docColor; if (isCaption) return "white"; - const backColor = backgroundCol() || "black"; + const backColor = backgroundCol();// || (darkScheme() ? "black" : "white"); + if (!backColor) return undefined; const col = Color(backColor).rgb(); const colsum = (col.red() + col.green() + col.blue()); if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return "black"; return "white"; case StyleProp.Hidden: return BoolCast(doc?._hidden); - case StyleProp.BorderRounding: return StrCast(doc?._borderRounding); + case StyleProp.BorderRounding: return StrCast(doc?.[fieldKey + "borderRounding"], StrCast(doc?._borderRounding)); case StyleProp.TitleHeight: return 15; case StyleProp.HeaderMargin: return ([CollectionViewType.Stacking, CollectionViewType.Masonry].includes(doc?._viewType as any) || doc?.type === DocumentType.RTF) && showTitle() && !StrCast(doc?.showTitle).includes(":hover") ? 15 : 0; case StyleProp.BackgroundColor: { - if (isCaption) return "rgba(0,0,0 ,0.4)"; if (Doc.UserDoc().renderStyle === "comic") return "transparent"; - let docColor: Opt = StrCast(doc?.[fieldKey + "backgroundColor"], StrCast(doc?._backgroundColor)); + let docColor: Opt = StrCast(doc?.[fieldKey + "backgroundColor"], StrCast(doc?._backgroundColor, isCaption ? "rbga(0,0,0,0.4)" : "")); if (MainView.Instance.LastButton === doc) return darkScheme() ? "dimgrey" : "lightgrey"; switch (doc?.type) { case DocumentType.PRESELEMENT: docColor = docColor || (darkScheme() ? "" : ""); break; @@ -131,7 +133,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt; const CarouselDocument = makeInterface(documentSchema, collectionSchema); @@ -38,12 +38,19 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) e.stopPropagation(); this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; } - panelHeight = () => this.props.PanelHeight() - 50; + captionStyleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { + const captionProps = { ...this.props, fieldKey: "caption" }; + return this.props.styleProvider?.(doc, props, property) || this.props.styleProvider?.(this.layoutDoc, captionProps, property); + } + panelHeight = () => this.props.PanelHeight() - (StrCast(this.layoutDoc._showCaption) ? 50 : 0); onContentDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick); onContentClick = () => ScriptCast(this.layoutDoc.onChildClick); @computed get content() { const index = NumCast(this.layoutDoc._itemIndex); const curDoc = this.childLayoutPairs?.[index]; + const captionProps = { ...this.props, fieldKey: "caption" }; + const marginX = NumCast(this.layoutDoc["caption-xMargin"]); + const marginY = NumCast(this.layoutDoc["caption-yMargin"]); return !(curDoc?.layout instanceof Doc) ? (null) : <>
@@ -51,6 +58,7 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) onDoubleClick={this.onContentDoubleClick} onClick={this.onContentClick} renderDepth={this.props.renderDepth + 1} + ContainingCollectionView={this} LayoutTemplate={this.props.childLayoutTemplate} LayoutTemplateString={this.props.childLayoutString} Document={curDoc.layout} @@ -61,25 +69,27 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument)
- + xPadding={NumCast(this.layoutDoc["caption-xPadding"])} + yPadding={NumCast(this.layoutDoc["caption-yPadding"])} />
; } @computed get buttons() { return <> -
- +
+
-
- +
+
; } diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 1aed40bc3..30f8e0112 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -58,7 +58,7 @@ export class CollectionStackingView extends CollectionSubView (pair.layout instanceof Doc) && !pair.layout.hidden).map(pair => pair.layout); } @computed get headerMargin() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin); } @computed get xMargin() { return NumCast(this.layoutDoc._xMargin, 2 * Math.min(this.gridGap, .05 * this.props.PanelWidth())); } - @computed get yMargin() { return this.props.yMargin || NumCast(this.layoutDoc._yMargin, 5); } // 2 * this.gridGap)); } + @computed get yMargin() { return this.props.yPadding || NumCast(this.layoutDoc._yMargin, 5); } // 2 * this.gridGap)); } @computed get gridGap() { return NumCast(this.layoutDoc._gridGap, 10); } @computed get isStackingView() { return (this.props.viewType ?? this.layoutDoc._viewType) === CollectionViewType.Stacking; } @computed get numGroupColumns() { return this.isStackingView ? Math.max(1, this.Sections.size + (this.showAddAGroup ? 1 : 0)) : 1; } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index a4f129b8c..b1f2750c3 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -155,7 +155,7 @@ export class MarqueeView extends React.Component, boolean; columnUnitLength(): number | undefined; toLeft?: Doc; toRight?: Doc; @@ -85,19 +89,16 @@ export default class ResizeBar extends React.Component { } render() { - return ( -
this.isHoverActive = true)} - onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))} - > -
this.registerResizing(e)} /> -
- ); + return
this.isHoverActive = true)} + onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))} + > +
this.registerResizing(e)} /> +
; } } \ No newline at end of file diff --git a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx index d0bc4d01c..5478bf709 100644 --- a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx +++ b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx @@ -5,9 +5,13 @@ import { Doc } from "../../../../fields/Doc"; import { NumCast, StrCast } from "../../../../fields/Types"; import { DimUnit } from "./CollectionMultirowView"; import { UndoManager } from "../../../util/UndoManager"; +import { StyleProp } from "../../StyleProvider"; +import { StyleProviderFunc } from "../../nodes/DocumentView"; interface ResizerProps { height: number; + styleProvider?: StyleProviderFunc; + isContentActive?: () => boolean; columnUnitLength(): number | undefined; toTop?: Doc; toBottom?: Doc; @@ -83,19 +87,16 @@ export default class ResizeBar extends React.Component { } render() { - return ( -
this.isHoverActive = true)} - onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))} - > -
this.registerResizing(e)} /> -
- ); + return
this.isHoverActive = true)} + onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))} + > +
this.registerResizing(e)} /> +
; } } \ No newline at end of file diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index f08cda92c..5e97b07f0 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -508,6 +508,7 @@ export class DocumentViewInternal extends DocComponent 0))) { if ((this.props.isDocumentActive?.() || this.layoutDoc.onDragStart) && + !this.Document.ignoreClick && !e.ctrlKey && (e.button === 0 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) { @@ -891,7 +892,7 @@ export class DocumentViewInternal extends DocComponent Opt; // bcz: hack: notifies the text document when the container has made a link. allows the text doc to react and setup a hyeprlink for any selected text hideOnLeave?: boolean; // used by DocumentView for setting caption's hide on leave (bcz: would prefer to have caption-hideOnLeave field set or something similar) - xMargin?: number; // used to override document's settings for xMargin --- see CollectionCarouselView - yMargin?: number; + xPadding?: number; // used to override document's settings for xMargin --- see CollectionCarouselView + yPadding?: number; noSidebar?: boolean; dontSelectOnLoad?: boolean; // suppress selecting the text box when loaded } @@ -1477,8 +1477,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp NativeHeight={returnZero} PanelHeight={this.props.PanelHeight} PanelWidth={this.sidebarWidth} - xMargin={0} - yMargin={0} + xPadding={0} + yPadding={0} scaleField={this.SidebarKey + "-scale"} isAnnotationOverlay={false} select={emptyFunction} @@ -1510,7 +1510,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const interactive = (CurrentUserUtils.SelectedTool === InkTool.None || SnappingManager.GetIsDragging()) && (this.layoutDoc.z || this.props.layerProvider?.(this.layoutDoc) !== false); if (!selected && FormattedTextBoxComment.textBox === this) setTimeout(FormattedTextBoxComment.Hide); const minimal = this.props.ignoreAutoHeight; - const margins = NumCast(this.layoutDoc._yMargin, this.props.yMargin || 0); + const margins = NumCast(this.layoutDoc._yMargin, this.props.yPadding || 0); const selPad = Math.min(margins, 10); const padding = Math.max(margins + ((selected && !this.layoutDoc._singleLine) || minimal ? -selPad : 0), 0); const selPaddingClass = selected && !this.layoutDoc._singleLine && margins >= 10 ? "-selected" : ""; @@ -1529,8 +1529,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp style={{ overflow: this.autoHeight ? "hidden" : undefined, height: this.props.height || (this.autoHeight && this.props.renderDepth ? "max-content" : undefined), - background: this.props.background ? this.props.background : StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor)), - color: this.props.color ? this.props.color : StrCast(this.layoutDoc[this.props.fieldKey + "-color"], this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color)), + background: this.props.background ? this.props.background : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor), + color: this.props.color ? this.props.color : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color), pointerEvents: interactive ? undefined : "none", fontSize: this.props.fontSize || Cast(this.layoutDoc._fontSize, "string", null), fontWeight: Cast(this.layoutDoc._fontWeight, "number", null), @@ -1565,7 +1565,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp {(this.props.noSidebar || this.Document._noSidebar) || this.Document._singleLine ? (null) : this.sidebarHandle} {!this.layoutDoc._showAudio ? (null) : this.audioHandle}
-
+
); } } -- cgit v1.2.3-70-g09d2 From e7f4439446200833082e23c7b6091817031235a5 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 16 Apr 2021 13:12:17 -0400 Subject: fixed so that minimaps can't appear on non freeform collections. fixed multirow/col to work with templates & stopped normalizing dimensions (which breaks templates). added quick and dirty lightboxDocTemplate to display templated documents. fixed TextDocs to work with template fields that just have a text string. --- src/client/views/LightboxView.tsx | 10 ++++--- src/client/views/collections/TabDocView.tsx | 10 ++++--- .../CollectionMulticolumnView.tsx | 27 +++++++++++-------- .../CollectionMultirowView.tsx | 31 +++++++++++++--------- src/client/views/nodes/DocumentView.tsx | 11 ++++---- .../views/nodes/formattedText/FormattedTextBox.tsx | 6 ++--- 6 files changed, 58 insertions(+), 37 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index b26765fa7..9c03b457b 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -26,6 +26,8 @@ interface LightboxViewProps { export class LightboxView extends React.Component { @computed public static get LightboxDoc() { return this._doc; } + private static LightboxDocTemplate = () => LightboxView._layoutTemplate; + @observable private static _layoutTemplate: Opt; @observable private static _doc: Opt; @observable private static _docTarget: Opt; @observable private static _docFilters: string[] = []; // filters @@ -35,7 +37,7 @@ export class LightboxView extends React.Component { private static _future: Opt = []; private static _docView: Opt; static path: { doc: Opt, target: Opt, history: Opt<{ doc: Doc, target?: Doc }[]>, future: Opt, saved: Opt<{ panX: Opt, panY: Opt, scale: Opt, scrollTop: Opt }> }[] = []; - @action public static SetLightboxDoc(doc: Opt, target?: Doc, future?: Doc[]) { + @action public static SetLightboxDoc(doc: Opt, target?: Doc, future?: Doc[], layoutTemplate?: Doc) { if (this.LightboxDoc && this.LightboxDoc !== doc && this._savedState) { this.LightboxDoc._panX = this._savedState.panX; this.LightboxDoc._panY = this._savedState.panY; @@ -62,6 +64,7 @@ export class LightboxView extends React.Component { this._future = future.slice().sort((a, b) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)).sort((a, b) => DocListCast(a.links).length - DocListCast(b.links).length); } this._doc = doc; + this._layoutTemplate = layoutTemplate; this._docTarget = target || doc; this._tourMap = DocListCast(doc?.links).map(link => { const opp = LinkManager.getOppositeAnchor(link, doc!); @@ -101,13 +104,13 @@ export class LightboxView extends React.Component { this._docFilters = (f => this._docFilters ? [this._docFilters.push(f) as any, this._docFilters][1] : [f])(`cookies:${cookie}:provide`); } } - public static AddDocTab = (doc: Doc, location: string) => { + public static AddDocTab = (doc: Doc, location: string, layoutTemplate?: Doc) => { SelectionManager.DeselectAll(); return LightboxView.SetLightboxDoc(doc, undefined, [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + "-annotations"]), ...(LightboxView._future ?? []) - ].sort((a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow))); + ].sort((a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)), layoutTemplate); } docFilters = () => LightboxView._docFilters || []; addDocTab = LightboxView.AddDocTab; @@ -229,6 +232,7 @@ export class LightboxView extends React.Component { })} Document={LightboxView.LightboxDoc} DataDoc={undefined} + LayoutTemplate={LightboxView.LightboxDocTemplate} addDocument={undefined} fitContentsToDoc={this.fitToBox} isDocumentActive={returnFalse} diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 4417038fa..983c3732f 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -9,7 +9,7 @@ import * as ReactDOM from 'react-dom'; import { DataSym, Doc, DocListCast, DocListCastAsync, HeightSym, Opt, WidthSym } from "../../../fields/Doc"; import { Id } from '../../../fields/FieldSymbols'; import { FieldId } from "../../../fields/RefField"; -import { Cast, NumCast, StrCast } from "../../../fields/Types"; +import { Cast, NumCast, StrCast, BoolCast } from "../../../fields/Types"; import { TraceMobx } from '../../../fields/util'; import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents, Utils } from "../../../Utils"; import { DocServer } from "../../DocServer"; @@ -299,6 +299,8 @@ export class TabDocView extends React.Component { PanelHeight = () => this._panelHeight; miniMapColor = () => this.tabColor; tabView = () => this._view; + disableMinimap = () => !this._document || (this._document.layout !== CollectionView.LayoutString(Doc.LayoutFieldKey(this._document)) || this._document?._viewType !== CollectionViewType.Freeform); + hideMinimap = () => this.disableMinimap() || BoolCast(this._document?.hideMinimap); @computed get layerProvider() { return this._document && DefaultLayerProvider(this._document); } @computed get docView() { @@ -330,13 +332,14 @@ export class TabDocView extends React.Component { bringToFront={emptyFunction} pinToPres={TabDocView.PinDoc} /> - {"toggle minimap"}
}> + {"toggle minimap"}
}>
e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} >
@@ -361,6 +364,7 @@ export class TabDocView extends React.Component { interface TabMinimapViewProps { document: Doc; + hideMinimap: () => boolean; tabView: () => DocumentView | undefined; addDocTab: (doc: Doc, where: string) => boolean; PanelWidth: () => number; @@ -411,7 +415,7 @@ export class TabMinimapView extends React.Component { const miniLeft = 50 + (NumCast(this.props.document._panX) - this.renderBounds.cx) / this.renderBounds.dim * 100 - miniWidth / 2; const miniTop = 50 + (NumCast(this.props.document._panY) - this.renderBounds.cy) / this.renderBounds.dim * 100 - miniHeight / 2; const miniSize = this.returnMiniSize(); - return this.props.document.hideMinimap ? (null) : + return this.props.hideMinimap() ? (null) :
pair.layout).filter(layout => StrCast(layout._dimUnit, "*") === DimUnit.Ratio); } + @computed + private get minimumDim() { + return Math.min(...this.ratioDefinedDocs.filter(layout => layout._dimMagnitude).map(layout => NumCast(layout._dimMagnitude))); + } + /** * This loops through all childLayoutPairs and extracts the values for _dimUnit * and _dimMagnitude, ignoring any that are malformed. Additionally, it then @@ -63,7 +68,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu const widthSpecifiers: WidthSpecifier[] = []; this.childLayoutPairs.map(pair => { const unit = StrCast(pair.layout._dimUnit, "*"); - const magnitude = NumCast(pair.layout._dimMagnitude, 1); + const magnitude = NumCast(pair.layout._dimMagnitude, this.minimumDim); if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) { (unit === DimUnit.Ratio) && (starSum += magnitude); widthSpecifiers.push({ magnitude, unit }); @@ -80,15 +85,15 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu * themselves to drift toward zero. Thus, whenever we change any of the values, * we normalize everything (dividing by the smallest magnitude). */ - setTimeout(() => { - const { ratioDefinedDocs } = this; - if (this.childLayoutPairs.length) { - const minimum = Math.min(...ratioDefinedDocs.map(doc => NumCast(doc._dimMagnitude, 1))); - if (minimum !== 0) { - ratioDefinedDocs.forEach(layout => layout._dimMagnitude = NumCast(layout._dimMagnitude, 1) / minimum, 1); - } - } - }); + // setTimeout(() => { + // const { ratioDefinedDocs } = this; + // if (this.childLayoutPairs.length) { + // const minimum = this.minimumDim; + // if (minimum !== 0) { + // ratioDefinedDocs.forEach(layout => layout._dimMagnitude = NumCast(layout._dimMagnitude, 1) / minimum, 1); + // } + // } + // }); return { widthSpecifiers, starSum }; } @@ -161,7 +166,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu if (columnUnitLength === undefined) { return 0; // we're still waiting on promises to resolve } - let width = NumCast(layout._dimMagnitude, 1); + let width = NumCast(layout._dimMagnitude, this.minimumDim); if (StrCast(layout._dimUnit, "*") === DimUnit.Ratio) { width *= columnUnitLength; } diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index 40b155c34..29cb3511a 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -49,6 +49,11 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) return this.childLayoutPairs.map(pair => pair.layout).filter(layout => StrCast(layout._dimUnit, "*") === DimUnit.Ratio); } + @computed + private get minimumDim() { + return Math.min(...this.ratioDefinedDocs.filter(layout => layout._dimMagnitude).map(layout => NumCast(layout._dimMagnitude))); + } + /** * This loops through all childLayoutPairs and extracts the values for _dimUnit * and _dimUnit, ignoring any that are malformed. Additionally, it then @@ -63,7 +68,7 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) const heightSpecifiers: HeightSpecifier[] = []; this.childLayoutPairs.map(pair => { const unit = StrCast(pair.layout._dimUnit, "*"); - const magnitude = NumCast(pair.layout._dimMagnitude, 1); + const magnitude = NumCast(pair.layout._dimMagnitude, this.minimumDim); if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) { (unit === DimUnit.Ratio) && (starSum += magnitude); heightSpecifiers.push({ magnitude, unit }); @@ -80,15 +85,15 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) * themselves to drift toward zero. Thus, whenever we change any of the values, * we normalize everything (dividing by the smallest magnitude). */ - setTimeout(() => { - const { ratioDefinedDocs } = this; - if (this.childLayoutPairs.length) { - const minimum = Math.min(...ratioDefinedDocs.map(layout => NumCast(layout._dimMagnitude, 1))); - if (minimum !== 0) { - ratioDefinedDocs.forEach(layout => layout._dimMagnitude = NumCast(layout._dimMagnitude, 1) / minimum); - } - } - }); + // setTimeout(() => { + // const { ratioDefinedDocs } = this; + // if (this.childLayoutPairs.length) { + // const minimum = Math.min(...ratioDefinedDocs.map(layout => NumCast(layout._dimMagnitude, 1))); + // if (minimum !== 0) { + // ratioDefinedDocs.forEach(layout => layout._dimMagnitude = NumCast(layout._dimMagnitude, 1) / minimum); + // } + // } + // }); return { heightSpecifiers, starSum }; } @@ -161,7 +166,7 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) if (rowUnitLength === undefined) { return 0; // we're still waiting on promises to resolve } - let height = NumCast(layout._dimMagnitude, 1); + let height = NumCast(layout._dimMagnitude, this.minimumDim); if (StrCast(layout._dimUnit, "*") === DimUnit.Ratio) { height *= rowUnitLength; } @@ -261,7 +266,9 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) const height = () => this.lookupPixels(layout); const width = () => PanelWidth() - 2 * NumCast(Document._xMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); collector.push( -
+
{this.getDisplayDoc(layout, dxf, width, height)}
, diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 5e97b07f0..857d06ea7 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -200,7 +200,7 @@ export class DocumentViewInternal extends DocComponent func().result?.select === true ? this.props.select(false) : "", "on double click"); } else if (!Doc.IsSystem(this.rootDoc)) { - if (this.props.Document.type !== DocumentType.LABEL) { - UndoManager.RunInBatch(() => this.props.addDocTab((this.rootDoc._fullScreenView as Doc) || this.rootDoc, "lightbox"), "double tap"); - SelectionManager.DeselectAll(); - } + UndoManager.RunInBatch(() => + LightboxView.AddDocTab(this.rootDoc, "lightbox", this.props.LayoutTemplate?.()) + //this.props.addDocTab((this.rootDoc._fullScreenView as Doc) || this.rootDoc, "lightbox") + , "double tap"); + SelectionManager.DeselectAll(); Doc.UnBrushDoc(this.props.Document); } } else if (this.onClickHandler?.script && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes(ScriptingBox.name)) { // bcz: hack? don't execute script if you're clicking on a scripting box itself diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index ea854ebe7..8039e777e 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1064,8 +1064,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp }); } setupEditor(config: any, fieldKey: string) { - const curText = Cast(this.dataDoc[this.props.fieldKey], RichTextField, null); - const rtfField = Cast((!curText?.Text && this.layoutDoc[this.props.fieldKey]) || this.dataDoc[fieldKey], RichTextField); + const curText = Cast(this.dataDoc[this.props.fieldKey], RichTextField, null) || StrCast(this.dataDoc[this.props.fieldKey]); + const rtfField = Cast((!curText && this.layoutDoc[this.props.fieldKey]) || this.dataDoc[fieldKey], RichTextField); if (this.ProseRef) { const self = this; this._editorView?.destroy(); @@ -1118,7 +1118,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const tr = this._editorView.state.tr.setStoredMarks(storedMarks).insertText(FormattedTextBox.SelectOnLoadChar, this._editorView.state.doc.content.size - 1, this._editorView.state.doc.content.size).setStoredMarks(storedMarks); this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(tr.doc.content.size)))); FormattedTextBox.SelectOnLoadChar = ""; - } else if (curText?.Text && !FormattedTextBox.DontSelectInitialText) { + } else if (curText && !FormattedTextBox.DontSelectInitialText) { selectAll(this._editorView!.state, this._editorView?.dispatch); this.startUndoTypingBatch(); } -- cgit v1.2.3-70-g09d2 From 8824730d44f52ad41c2687205109a271f8c63e80 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 19 Apr 2021 12:27:33 -0400 Subject: started to cleanup comic mode. --- src/client/views/StyleProvider.tsx | 1 - src/client/views/collections/TabDocView.tsx | 5 +++- .../nodes/CollectionFreeFormDocumentView.scss | 6 ++++ .../views/nodes/CollectionFreeFormDocumentView.tsx | 33 +++++++++++++--------- 4 files changed, 30 insertions(+), 15 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index bde741959..0702f0d6b 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -101,7 +101,6 @@ export function DefaultStyleProvider(doc: Opt, props: Opt = StrCast(doc?.[fieldKey + "backgroundColor"], StrCast(doc?._backgroundColor, isCaption ? "rbga(0,0,0,0.4)" : "")); if (MainView.Instance.LastButton === doc) return darkScheme() ? "dimgrey" : "lightgrey"; switch (doc?.type) { diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 983c3732f..7e2f7811e 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -350,7 +350,10 @@ export class TabDocView extends React.Component { render() { this.tab && CollectionDockingView.Instance.tabMap.delete(this.tab); return ( -
{ +
{ if (this._mainCont = ref) { (this._mainCont as any).InitTab = (tab: any) => this.init(tab, this._document); DocServer.GetRefField(this.props.documentId).then(action(doc => doc instanceof Doc && (this._document = doc) && this.tab && this.init(this.tab, this._document))); diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.scss b/src/client/views/nodes/CollectionFreeFormDocumentView.scss index 724394025..98208c2a6 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.scss +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.scss @@ -6,4 +6,10 @@ top: 0; left: 0; pointer-events: none; + .collectionFreeFormDocumentView-comic { + width:100%; + height: 100%; + position: absolute; + top: 0; + } } \ No newline at end of file diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 1fda4cc5e..807a61094 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -37,10 +37,14 @@ export class CollectionFreeFormDocumentView extends DocComponent this.props.PanelHeight() ? 0.5 : 1); + return rot; + } random(min: number, max: number) { /* min should not be equal to max */ return min + ((Math.abs(this.X * this.Y) * 9301 + 49297) % 233280 / 233280) * (max - min); } get displayName() { return "CollectionFreeFormDocumentView(" + this.rootDoc.title + ")"; } // this makes mobx trace() statements more descriptive get maskCentering() { return this.props.Document.isInkMask ? InkingStroke.MaskDim / 2 : 0; } - get transform() { return `translate(${this.X - this.maskCentering}px, ${this.Y - this.maskCentering}px) rotate(${this.random(-1, 1) * this.props.jitterRotation}deg)`; } + get transform() { return `translate(${this.X - this.maskCentering}px, ${this.Y - this.maskCentering}px) rotate(${this.jitterRotation}deg)`; } get X() { return this.dataProvider ? this.dataProvider.x : (this.Document.x || 0); } get Y() { return this.dataProvider ? this.dataProvider.y : (this.Document.y || 0); } get ZInd() { return this.dataProvider ? this.dataProvider.zIndex : (this.Document.zIndex || 0); } @@ -156,7 +160,9 @@ export class CollectionFreeFormDocumentView extends DocComponent this; render() { TraceMobx(); - const backgroundColor = () => this.props.styleProvider?.(this.Document, this.props, StyleProp.BackgroundColor); + const pw = this.panelWidth(); + const ph = this.panelHeight(); + const path = `M ${pw * .5} ${ph * .05} C ${pw * .6} ${ph * .05} ${pw * .9} 0 ${pw * .95} ${ph * .05} C ${pw} ${ph * .1} ${pw * .95} ${ph * .2} ${pw * .95} ${ph * .25} C ${pw * .95} ${ph * .35} ${pw} ${ph * .9} ${pw * .95} ${ph * .95} C ${pw * .9} ${ph} ${pw * .6} ${ph * .95} ${pw * .5} ${ph * .95} C ${pw * .3} ${ph * .95} ${pw * .1} ${ph} ${pw * .05} ${ph * .95} C 0 ${ph * .9} ${pw * .05} ${ph * .85} ${pw * .05} ${ph * .8} C ${pw * .05} ${ph * .75} 0 ${ph * .1} ${pw * .05} ${ph * .05} C ${pw * .1} 0 ${pw * .25} ${ph * .05} ${pw * .5} ${ph * .05}`; const divProps: DocumentViewProps = { ...this.props, CollectionFreeFormDocumentView: this.returnThis, @@ -175,18 +181,19 @@ export class CollectionFreeFormDocumentView extends DocComponent - - {Doc.UserDoc().renderStyle !== "comic" ? (null) : -
- - - -
} - - this._contentView = r)} /> + {Doc.UserDoc().renderStyle !== "comic" ? this._contentView = r)} /> : + <> +
+ this._contentView = r)} /> +
+
+ + + +
+ }
; } } -- cgit v1.2.3-70-g09d2 From b7296ff9e0cf083ef1ae3423aa307e0dedf56f94 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 19 Apr 2021 16:10:19 -0400 Subject: more improvements to comic mode. --- src/client/util/CurrentUserUtils.ts | 2 ++ src/client/views/MainView.tsx | 7 +++---- src/client/views/StyleProvider.tsx | 12 ++++++++++-- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- .../nodes/CollectionFreeFormDocumentView.scss | 6 ------ .../views/nodes/CollectionFreeFormDocumentView.tsx | 22 ++-------------------- src/client/views/nodes/DocumentView.scss | 7 +++++++ src/client/views/nodes/DocumentView.tsx | 14 +++++++++++++- 8 files changed, 38 insertions(+), 34 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index cb8bf5a7f..b1b7f8a09 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -1242,3 +1242,5 @@ Scripting.addGlobal(function links(doc: any) { return new List(LinkManager.Insta "returns all the links to the document or its annotations", "(doc: any)"); Scripting.addGlobal(function importDocument() { return CurrentUserUtils.importDocument(); }, "imports files from device directly into the import sidebar"); +Scripting.addGlobal(function toggleComicMode() { Doc.UserDoc().renderStyle = Doc.UserDoc().renderStyle === "comic" ? undefined : "comic"; }, + "toggle between regular rendeing and an informal sketch/comic style"); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index fa2a738c8..e54d84a6c 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -180,8 +180,8 @@ export class MainView extends React.Component { const targClass = targets[0].className.toString(); if (SearchBox.Instance._searchbarOpen || SearchBox.Instance.open) { const check = targets.some((thing) => - (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset.icon === "filter" || - thing.className === "collectionSchema-header-menuOptions")); + (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset.icon === "filter" || + thing.className === "collectionSchema-header-menuOptions")); !check && SearchBox.Instance.resetSearch(true); } !targClass.includes("contextMenu") && ContextMenu.Instance.closeMenu(); @@ -704,5 +704,4 @@ export class MainView extends React.Component { } } -Scripting.addGlobal(function selectMainMenu(doc: Doc, title: string) { MainView.Instance.selectMenu(doc); }); -Scripting.addGlobal(function toggleComicMode() { Doc.UserDoc().fontFamily = "Comic Sans MS"; Doc.UserDoc().renderStyle = Doc.UserDoc().renderStyle === "comic" ? undefined : "comic"; }); \ No newline at end of file +Scripting.addGlobal(function selectMainMenu(doc: Doc, title: string) { MainView.Instance.selectMenu(doc); }); \ No newline at end of file diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 0702f0d6b..a9fcd4717 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -41,6 +41,8 @@ export enum StyleProp { HeaderMargin = "headerMargin", // margin at top of documentview, typically for displaying a title -- doc contents will start below that TitleHeight = "titleHeight", // Height of Title area ShowTitle = "showTitle", // whether to display a title on a Document (optional :hover suffix) + JitterRotation = "jitterRotation", // whether documents should be randomly rotated + BorderPath = "customBorder", // border path for document view } function darkScheme() { return BoolCast(CurrentUserUtils.ActiveDashboard?.darkScheme); } @@ -60,7 +62,10 @@ export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentVie return (toBeDetermined?.isContentActive) ? toBeDetermined : undefined; } -// +function wavyBorderPath(pw: number, ph: number) { + return `M ${pw * .5} ${ph * .05} C ${pw * .6} ${ph * .05} ${pw * .9} 0 ${pw * .95} ${ph * .05} C ${pw} ${ph * .1} ${pw * .95} ${ph * .2} ${pw * .95} ${ph * .25} C ${pw * .95} ${ph * .35} ${pw} ${ph * .9} ${pw * .95} ${ph * .95} C ${pw * .9} ${ph} ${pw * .6} ${ph * .95} ${pw * .5} ${ph * .95} C ${pw * .3} ${ph * .95} ${pw * .1} ${ph} ${pw * .05} ${ph * .95} C 0 ${ph * .9} ${pw * .05} ${ph * .85} ${pw * .05} ${ph * .8} C ${pw * .05} ${ph * .75} 0 ${ph * .1} ${pw * .05} ${ph * .05} C ${pw * .1} 0 ${pw * .25} ${ph * .05} ${pw * .5} ${ph * .05}`; +} + // a preliminary implementation of a dash style sheet for setting rendering properties of documents nested within a Tab // export function DefaultStyleProvider(doc: Opt, props: Opt, property: string): any { @@ -71,11 +76,12 @@ export function DefaultStyleProvider(doc: Opt, props: Opt doc && !Doc.IsSystem(doc) && Doc.UserDoc().renderStyle === "comic"; const isBackground = () => StrListCast(doc?._layerTags).includes(StyleLayers.Background); const backgroundCol = () => props?.styleProvider?.(doc, props, StyleProp.BackgroundColor); const opacity = () => props?.styleProvider?.(doc, props, StyleProp.Opacity); const showTitle = () => props?.styleProvider?.(doc, props, StyleProp.ShowTitle); - + const random = (min: number, max: number, x: number, y: number) => { /* min should not be equal to max */ return min + ((Math.abs(x * y) * 9301 + 49297) % 233280 / 233280) * (max - min); } switch (property.split(":")[0]) { case StyleProp.TreeViewIcon: return Doc.toIcon(doc, isOpen); case StyleProp.DocContents: return undefined; @@ -98,6 +104,8 @@ export function DefaultStyleProvider(doc: Opt, props: Opt (props?.PanelHeight() || 0) ? 5 : 10) : 0; case StyleProp.HeaderMargin: return ([CollectionViewType.Stacking, CollectionViewType.Masonry].includes(doc?._viewType as any) || doc?.type === DocumentType.RTF) && showTitle() && !StrCast(doc?.showTitle).includes(":hover") ? 15 : 0; case StyleProp.BackgroundColor: { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 7a879ecde..407216217 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1051,7 +1051,7 @@ export class CollectionFreeFormView extends CollectionSubView; } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.scss b/src/client/views/nodes/CollectionFreeFormDocumentView.scss index 98208c2a6..724394025 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.scss +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.scss @@ -6,10 +6,4 @@ top: 0; left: 0; pointer-events: none; - .collectionFreeFormDocumentView-comic { - width:100%; - height: 100%; - position: absolute; - top: 0; - } } \ No newline at end of file diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 807a61094..092823603 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -37,14 +37,9 @@ export class CollectionFreeFormDocumentView extends DocComponent this.props.PanelHeight() ? 0.5 : 1); - return rot; - } - random(min: number, max: number) { /* min should not be equal to max */ return min + ((Math.abs(this.X * this.Y) * 9301 + 49297) % 233280 / 233280) * (max - min); } get displayName() { return "CollectionFreeFormDocumentView(" + this.rootDoc.title + ")"; } // this makes mobx trace() statements more descriptive get maskCentering() { return this.props.Document.isInkMask ? InkingStroke.MaskDim / 2 : 0; } - get transform() { return `translate(${this.X - this.maskCentering}px, ${this.Y - this.maskCentering}px) rotate(${this.jitterRotation}deg)`; } + get transform() { return `translate(${this.X - this.maskCentering}px, ${this.Y - this.maskCentering}px) rotate(${this.props.jitterRotation}deg)`; } get X() { return this.dataProvider ? this.dataProvider.x : (this.Document.x || 0); } get Y() { return this.dataProvider ? this.dataProvider.y : (this.Document.y || 0); } get ZInd() { return this.dataProvider ? this.dataProvider.zIndex : (this.Document.zIndex || 0); } @@ -160,9 +155,6 @@ export class CollectionFreeFormDocumentView extends DocComponent this; render() { TraceMobx(); - const pw = this.panelWidth(); - const ph = this.panelHeight(); - const path = `M ${pw * .5} ${ph * .05} C ${pw * .6} ${ph * .05} ${pw * .9} 0 ${pw * .95} ${ph * .05} C ${pw} ${ph * .1} ${pw * .95} ${ph * .2} ${pw * .95} ${ph * .25} C ${pw * .95} ${ph * .35} ${pw} ${ph * .9} ${pw * .95} ${ph * .95} C ${pw * .9} ${ph} ${pw * .6} ${ph * .95} ${pw * .5} ${ph * .95} C ${pw * .3} ${ph * .95} ${pw * .1} ${ph} ${pw * .05} ${ph * .95} C 0 ${ph * .9} ${pw * .05} ${ph * .85} ${pw * .05} ${ph * .8} C ${pw * .05} ${ph * .75} 0 ${ph * .1} ${pw * .05} ${ph * .05} C ${pw * .1} 0 ${pw * .25} ${ph * .05} ${pw * .5} ${ph * .05}`; const divProps: DocumentViewProps = { ...this.props, CollectionFreeFormDocumentView: this.returnThis, @@ -183,17 +175,7 @@ export class CollectionFreeFormDocumentView extends DocComponent - {Doc.UserDoc().renderStyle !== "comic" ? this._contentView = r)} /> : - <> -
- this._contentView = r)} /> -
-
- - - -
- } + this._contentView = r)} />
; } } diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 36572b861..bdbece621 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -4,6 +4,13 @@ border-radius: inherit; } +.documentView-customBorder { + width:100%; + height: 100%; + position: absolute; + top: 0; +} + .documentView-node, .documentView-node-topmost { position: inherit; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 01b83644e..810868c75 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -978,6 +978,8 @@ export class DocumentViewInternal extends DocComponent - {PresBox.EffectsProvider(this.layoutDoc, this.renderDoc) || this.renderDoc} + {!borderPath.path ? internal : + <> + {internal} +
+ + + +
+ + }
; } } -- cgit v1.2.3-70-g09d2 From e37e13d5505dc880b16e43b504b6fa5d04194a75 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 22 Apr 2021 16:48:52 -0400 Subject: allowed maximize button to be dragged to add a new window. fixed colorBox transparency setting. fixed anchormenuClick when in full tab. --- src/client/views/DocumentDecorations.tsx | 23 ++++++++++++++++------ src/client/views/MarqueeAnnotator.tsx | 6 ++++-- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 ++-- src/client/views/nodes/ColorBox.tsx | 2 +- src/client/views/nodes/PDFBox.tsx | 4 +++- src/client/views/nodes/WebBox.tsx | 3 ++- src/client/views/pdf/PDFViewer.tsx | 2 +- 7 files changed, 30 insertions(+), 14 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 24ca3a8fa..959b44f98 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -141,6 +141,17 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b SelectionManager.DeselectAll(); selected.map(dv => dv.props.removeDocument?.(dv.props.Document)); } + onMaximizeDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, () => { + DragManager.StartWindowDrag?.({ + pageX: e.pageX, + pageY: e.pageY, + preventDefault: emptyFunction, + button: 0 + }, [SelectionManager.Views().lastElement().rootDoc]); + return true; + }, emptyFunction, this.onMaximizeClick, false, false); + } @undoBatch @action onMaximizeClick = (e: any): void => { @@ -427,10 +438,10 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b return (!docView.rootDoc._stayInCollection || docView.rootDoc.isInkMask) && (collectionAcl === AclAdmin || collectionAcl === AclEdit || GetEffectiveAcl(docView.rootDoc) === AclAdmin); }); - const topBtn = (key: string, icon: string, click: (e: any) => void, title: string) => ( + const topBtn = (key: string, icon: string, pointerDown: undefined | ((e: React.PointerEvent) => void), click: undefined | ((e: any) => void), title: string) => ( {title}
} placement="top">
e.preventDefault()} - onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, click, emptyFunction)} > + onPointerDown={pointerDown ?? (e => setupMoveUpEvents(this, e, returnFalse, click!, emptyFunction))} >
); @@ -471,13 +482,13 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b left: bounds.x - this._resizeBorderWidth / 2, top: bounds.y - this._resizeBorderWidth / 2 - this._titleHeight, }}> - {!canDelete ?
: topBtn("close", "times", this.onCloseClick, "Close")} + {!canDelete ?
: topBtn("close", "times", undefined, this.onCloseClick, "Close")} {seldoc.props.hideDecorationTitle || seldoc.props.Document.type === DocumentType.EQUATION ? (null) : titleArea} {seldoc.props.hideResizeHandles || seldoc.props.Document.type === DocumentType.EQUATION ? (null) : <> {SelectionManager.Views().length !== 1 || seldoc.Document.type === DocumentType.INK ? (null) : - topBtn("iconify", `window-${seldoc.finalLayoutKey.includes("icon") ? "restore" : "minimize"}`, this.onIconifyClick, `${seldoc.finalLayoutKey.includes("icon") ? "De" : ""}Iconify Document`)} - {!canOpen ? (null) : topBtn("open", "external-link-alt", this.onMaximizeClick, "Open in Tab (ctrl: as alias, shift: in new collection)")} + topBtn("iconify", `window-${seldoc.finalLayoutKey.includes("icon") ? "restore" : "minimize"}`, undefined, this.onIconifyClick, `${seldoc.finalLayoutKey.includes("icon") ? "De" : ""}Iconify Document`)} + {!canOpen ? (null) : topBtn("open", "external-link-alt", this.onMaximizeDown, undefined, "Open in Tab (ctrl: as alias, shift: in new collection)")}
e.preventDefault()} />
e.preventDefault()} />
e.preventDefault()} /> @@ -489,7 +500,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
e.preventDefault()} /> {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) : - topBtn("selector", "arrow-alt-circle-up", this.onSelectorClick, "tap to select containing document")} + topBtn("selector", "arrow-alt-circle-up", undefined, this.onSelectorClick, "tap to select containing document")}
e.preventDefault()}>{useRotation && "⟲"}
diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx index efdf7f9f5..8c4bdcc41 100644 --- a/src/client/views/MarqueeAnnotator.tsx +++ b/src/client/views/MarqueeAnnotator.tsx @@ -32,7 +32,7 @@ export interface MarqueeAnnotatorProps { addDocument: (doc: Doc) => boolean; getPageFromScroll?: (top: number) => number; finishMarquee: (x?: number, y?: number) => void; - anchorMenuClick?: (anchor: Doc) => void; + anchorMenuClick?: () => undefined | ((anchor: Doc) => void); } @observer export class MarqueeAnnotator extends React.Component { @@ -65,7 +65,9 @@ export class MarqueeAnnotator extends React.Component { doc.addEventListener("pointermove", this.onSelectMove); doc.addEventListener("pointerup", this.onSelectEnd); - AnchorMenu.Instance.OnClick = (e: PointerEvent) => this.props.anchorMenuClick?.(this.highlight("rgba(173, 216, 230, 0.75)", true)); + AnchorMenu.Instance.OnClick = (e: PointerEvent) => { + this.props.anchorMenuClick?.()?.(this.highlight("rgba(173, 216, 230, 0.75)", true)); + } AnchorMenu.Instance.Highlight = this.highlight; /** * This function is used by the AnchorMenu to create an anchor highlight and a new linked text annotation. diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 407216217..a14ba036f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -805,8 +805,8 @@ export class CollectionFreeFormView extends CollectionSubView= 0.15 || localTransform.Scale > this.zoomScaling()) { - const safeScale = Math.min(Math.max(0.15, localTransform.Scale), 20); + if (localTransform.Scale >= 0.05 || localTransform.Scale > this.zoomScaling()) { + const safeScale = Math.min(Math.max(0.05, localTransform.Scale), 20); this.props.Document[this.scaleFieldKey] = Math.abs(safeScale); this.setPan(-localTransform.TranslateX / safeScale, -localTransform.TranslateY / safeScale); } diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index 46c599abe..454fd5a0c 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -41,7 +41,7 @@ export class ColorBox extends ViewBoxBaseComponent; } + anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick; + @computed get renderPdfView() { TraceMobx(); return
this.props.PanelWidth() / (this.props.scaling?.() || 1) - this.sidebarWidth(); // (this.Document.scrollHeight || Doc.NativeHeight(this.Document) || 0); panelHeight = () => this.props.PanelHeight() / (this.props.scaling?.() || 1); // () => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : Doc.NativeWidth(this.Document); scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._scrollTop)); + anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick; render() { const inactiveLayer = this.props.layerProvider?.(this.layoutDoc) === false; const scale = this.props.scaling?.() || 1; @@ -531,7 +532,7 @@ export class WebBox extends ViewBoxAnnotatableComponent void; ContentScaling?: () => number; sidebarWidth: () => number; - anchorMenuClick?: (anchor: Doc) => void; + anchorMenuClick?: () => undefined | ((anchor: Doc) => void); } /** -- cgit v1.2.3-70-g09d2 From 18cee14d5a1273e2db26fec7654dde3e67ec8f27 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 22 Apr 2021 18:44:27 -0400 Subject: fixing problems with dictation panel height in videobox. --- src/client/views/collections/CollectionStackedTimeline.tsx | 4 ++-- src/client/views/nodes/ScreenshotBox.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index ab9c4aa2c..a2c95df6e 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -235,12 +235,12 @@ export class CollectionStackedTimeline extends CollectionSubView `${this.dictationHeightPercent}%`; + dictationHeight = () => this.props.PanelHeight() * (100 - this.dictationHeightPercent) / 100; timelineContentHeight = () => this.props.PanelHeight() * this.dictationHeightPercent / 100; dictationScreenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.timelineContentHeight()); @computed get renderDictation() { const dictation = Cast(this.dataDoc[this.props.dictationKey], Doc, null); - return !dictation ? (null) :
+ return !dictation ? (null) :
-
+
Date: Fri, 23 Apr 2021 14:15:11 -0400 Subject: fixed code warnings. updated some npm pacakges including typescript. --- package-lock.json | 616 +++++++++++++++++------- package.json | 19 +- src/client/util/CaptureManager.tsx | 4 +- src/client/util/Scripting.ts | 1 + src/client/views/MarqueeAnnotator.tsx | 2 +- src/client/views/PropertiesView.tsx | 4 +- src/client/views/StyleProvider.tsx | 2 +- src/client/views/collections/CollectionMenu.tsx | 2 +- src/client/views/nodes/DocumentContentsView.tsx | 44 +- src/client/views/nodes/ImageBox.tsx | 2 - src/client/views/nodes/ScreenshotBox.tsx | 217 ++++----- src/fields/Schema.ts | 32 +- webpack.config.js | 4 +- 13 files changed, 593 insertions(+), 356 deletions(-) (limited to 'src/client/views/collections') diff --git a/package-lock.json b/package-lock.json index d286a4e02..3637b14ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -512,6 +512,42 @@ "react-is": "^16.8.0" } }, + "@react-three/fiber": { + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-6.0.16.tgz", + "integrity": "sha512-oKMYNJOd5t+V4o18aRMhaRhcDQ1NeeCDy52yJvXpu7zrsR04YZtXD4RacW0FDH0KnwkOLDst95LCCphm3Thk/A==", + "requires": { + "@babel/runtime": "^7.13.10", + "react-merge-refs": "^1.1.0", + "react-reconciler": "^0.26.2", + "react-three-fiber": "0.0.0-deprecated", + "react-use-measure": "^2.0.4", + "resize-observer-polyfill": "^1.5.1", + "scheduler": "^0.20.2", + "use-asset": "^1.0.4", + "utility-types": "^3.10.0", + "zustand": "^3.3.3" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.13.17", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz", + "integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "scheduler": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", + "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + } + } + }, "@rkusa/linebreak": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@rkusa/linebreak/-/linebreak-1.0.0.tgz", @@ -683,6 +719,37 @@ "@types/express": "*" } }, + "@types/d3-axis": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-2.0.0.tgz", + "integrity": "sha512-gUdlEwGBLl3tXGiBnBNmNzph9W3bCfa4tBgWZD60Z1eDQKTY4zyCAcZ3LksignGfKawYatmDYcBdjJ5h/54sqA==", + "requires": { + "@types/d3-selection": "*" + } + }, + "@types/d3-color": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-2.0.1.tgz", + "integrity": "sha512-u7LTCL7RnaavFSmob2rIAJLNwu50i6gFwY9cHFr80BrQURYQBRkJ+Yv47nA3Fm7FeRhdWTiVTeqvSeOuMAOzBQ==" + }, + "@types/d3-scale": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.2.2.tgz", + "integrity": "sha512-qpQe8G02tzUwt9sdWX1h8A/W0Q1+N48wMnYXVOkrzeLUkCfvzJYV9Ee3aORCS4dN4ONRLFmMvaXdziQ29XGLjQ==", + "requires": { + "@types/d3-time": "*" + } + }, + "@types/d3-selection": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-2.0.0.tgz", + "integrity": "sha512-EF0lWZ4tg7oDFg4YQFlbOU3936e3a9UmoQ2IXlBy1+cv2c2Pv7knhKUzGlH5Hq2sF/KeDTH1amiRPey2rrLMQA==" + }, + "@types/d3-time": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.0.0.tgz", + "integrity": "sha512-Abz8bTzy8UWDeYs9pCa3D37i29EWDjNTjemdk0ei1ApYVNqulYlGUKip/jLOpogkPSsPz/GvZCYiC7MFlEk0iQ==" + }, "@types/dotenv": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/@types/dotenv/-/dotenv-6.1.1.tgz", @@ -845,9 +912,9 @@ "dev": true }, "@types/memory-fs": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@types/memory-fs/-/memory-fs-0.3.2.tgz", - "integrity": "sha512-j5AcZo7dbMxHoOimcHEIh0JZe5e1b8q8AqGSpZJrYc7xOgCIP79cIjTdx5jSDLtySnQDwkDTqwlC7Xw7uXw7qg==", + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@types/memory-fs/-/memory-fs-0.3.3.tgz", + "integrity": "sha512-rLEYzl1xODshz+Lm+YX8NYws8Xw7/qcYbQInMkotl96VpLZmUvoCfYYGxfajMSiugANV02QO5Fc+R98KKeE4gQ==", "dev": true, "requires": { "@types/node": "*" @@ -1195,6 +1262,14 @@ "@types/react": "*" } }, + "@types/react-reconciler": { + "version": "0.26.1", + "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.26.1.tgz", + "integrity": "sha512-jeizEH5o/k6tv42RYNbaulR9KvoSM4RAUq1Q2SXd2HZ7dqgTxN9OIf+GU/sErT7CohB/mUxy9hSjaRLiCPGF5w==", + "requires": { + "@types/react": "*" + } + }, "@types/react-select": { "version": "3.0.13", "resolved": "https://registry.npmjs.org/@types/react-select/-/react-select-3.0.13.tgz", @@ -1337,9 +1412,9 @@ "dev": true }, "@types/tapable": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.6.tgz", - "integrity": "sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.7.tgz", + "integrity": "sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ==", "dev": true }, "@types/three": { @@ -1363,9 +1438,9 @@ } }, "@types/uglify-js": { - "version": "3.9.2", - "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.9.2.tgz", - "integrity": "sha512-d6dIfpPbF+8B7WiCi2ELY7m0w1joD8cRW4ms88Emdb2w062NeEpbNCeWwVCgzLRpVG+5e74VFSg4rgJ2xXjEiQ==", + "version": "3.13.0", + "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.0.tgz", + "integrity": "sha512-EGkrJD5Uy+Pg0NUR8uA4bJ5WMfljyad0G+784vLCNUkD+QwOJXUbBYExXfVGf7YtyzdQp3L/XMYcliB987kL5Q==", "dev": true, "requires": { "source-map": "^0.6.1" @@ -1392,14 +1467,14 @@ "dev": true }, "@types/webpack": { - "version": "4.41.18", - "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.18.tgz", - "integrity": "sha512-mQm2R8vV2BZE/qIDVYqmBVLfX73a8muwjs74SpjEyJWJxeXBbsI9L65Pcia9XfYLYWzD1c1V8m+L0p30y2N7MA==", + "version": "4.41.27", + "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.27.tgz", + "integrity": "sha512-wK/oi5gcHi72VMTbOaQ70VcDxSQ1uX8S2tukBK9ARuGXrYM/+u4ou73roc7trXDNmCxCoerE8zruQqX/wuHszA==", "dev": true, "requires": { "@types/anymatch": "*", "@types/node": "*", - "@types/tapable": "*", + "@types/tapable": "^1", "@types/uglify-js": "*", "@types/webpack-sources": "*", "source-map": "^0.6.0" @@ -1414,30 +1489,31 @@ } }, "@types/webpack-dev-middleware": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/@types/webpack-dev-middleware/-/webpack-dev-middleware-2.0.5.tgz", - "integrity": "sha512-B/1X0xAYz62rtjn3gYWaYLRISKzjWehpjndCvpCNuv0OJi4TbIV6QQt9xq/moVxB83u2RjsG8E8S6U/Efg/Vvw==", + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/webpack-dev-middleware/-/webpack-dev-middleware-2.0.7.tgz", + "integrity": "sha512-pArv7YnqpbSCOBWiRlR1KgqVorlzkIiwto66hI8Gdgp5ATQAC+Ug4QVz69ZI1dP+D5Rs8QWnbT81tE4tcMuTag==", "dev": true, "requires": { "@types/connect": "*", "@types/memory-fs": "*", - "@types/webpack": "*" + "@types/webpack": "^4", + "loglevel": "^1.6.2" } }, "@types/webpack-hot-middleware": { - "version": "2.25.3", - "resolved": "https://registry.npmjs.org/@types/webpack-hot-middleware/-/webpack-hot-middleware-2.25.3.tgz", - "integrity": "sha512-zGkTzrwQnhSadIXGYGZLu7tpXQwn4+6y9nGeql+5UeRtW/k54Jp4SnzB0Qw00ednw0ZFoZOvqTFfXSbFXohc5Q==", + "version": "2.25.4", + "resolved": "https://registry.npmjs.org/@types/webpack-hot-middleware/-/webpack-hot-middleware-2.25.4.tgz", + "integrity": "sha512-6tQb9EBKIANZYUVLQYWiWfDFVe7FhXSj4bB2EF5QB7VtYWL3HDR+y/zqjZPAnCorv0spLqVMRqjRK8AmhfocMw==", "dev": true, "requires": { "@types/connect": "*", - "@types/webpack": "*" + "@types/webpack": "^4" } }, "@types/webpack-sources": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-1.4.0.tgz", - "integrity": "sha512-c88dKrpSle9BtTqR6ifdaxu1Lvjsl3C5OsfvuUbUwdXymshv1TkufUAXBajCCUM/f/TmnkZC/Esb03MinzSiXQ==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-2.1.0.tgz", + "integrity": "sha512-LXn/oYIpBeucgP1EIJbKQ2/4ZmpvRl+dlrFdX7+94SKRUV3Evy3FsfMZY318vGhkWUS5MPhtOM3w1/hCOAOXcg==", "dev": true, "requires": { "@types/node": "*", @@ -2138,14 +2214,23 @@ } }, "asn1.js": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz", - "integrity": "sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==", + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz", + "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==", "dev": true, "requires": { "bn.js": "^4.0.0", "inherits": "^2.0.1", - "minimalistic-assert": "^1.0.0" + "minimalistic-assert": "^1.0.0", + "safer-buffer": "^2.1.0" + }, + "dependencies": { + "bn.js": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", + "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==", + "dev": true + } } }, "assert": { @@ -2597,9 +2682,9 @@ "integrity": "sha512-6sTGh1OiUmuH8ftAYvUzALivoOmcnahinGmjZFI4puZVowXoKTn/bXtth7N1skW5AlezEOfjgFH4lNXHeNRQog==" }, "bn.js": { - "version": "4.11.8", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz", - "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz", + "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==", "dev": true }, "body-parser": { @@ -2793,28 +2878,38 @@ } }, "browserify-rsa": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", - "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz", + "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==", "dev": true, "requires": { - "bn.js": "^4.1.0", + "bn.js": "^5.0.0", "randombytes": "^2.0.1" } }, "browserify-sign": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.0.4.tgz", - "integrity": "sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz", + "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==", "dev": true, "requires": { - "bn.js": "^4.1.1", - "browserify-rsa": "^4.0.0", - "create-hash": "^1.1.0", - "create-hmac": "^1.1.2", - "elliptic": "^6.0.0", - "inherits": "^2.0.1", - "parse-asn1": "^5.0.0" + "bn.js": "^5.1.1", + "browserify-rsa": "^4.0.1", + "create-hash": "^1.2.0", + "create-hmac": "^1.1.7", + "elliptic": "^6.5.3", + "inherits": "^2.0.4", + "parse-asn1": "^5.1.5", + "readable-stream": "^3.6.0", + "safe-buffer": "^5.2.0" + }, + "dependencies": { + "safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "dev": true + } } }, "browserify-zlib": { @@ -3680,13 +3775,10 @@ } }, "chrome-trace-event": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz", - "integrity": "sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ==", - "dev": true, - "requires": { - "tslib": "^1.9.0" - } + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", + "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==", + "dev": true }, "ci-info": { "version": "1.6.0", @@ -4341,13 +4433,21 @@ } }, "create-ecdh": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz", - "integrity": "sha512-GbEHQPMOswGpKXM9kCWVrremUcBmjteUaQ01T9rkKCPDXfUHX0IoP9LpHYo2NPFampa4e+/pFDc3jQdxrxQLaw==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz", + "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==", "dev": true, "requires": { "bn.js": "^4.1.0", - "elliptic": "^6.0.0" + "elliptic": "^6.5.3" + }, + "dependencies": { + "bn.js": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", + "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==", + "dev": true + } } }, "create-emotion": { @@ -5323,6 +5423,14 @@ "bn.js": "^4.1.0", "miller-rabin": "^4.0.0", "randombytes": "^2.0.0" + }, + "dependencies": { + "bn.js": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", + "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==", + "dev": true + } } }, "dir-glob": { @@ -5532,18 +5640,26 @@ "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" }, "elliptic": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz", - "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==", + "version": "6.5.4", + "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz", + "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==", "dev": true, "requires": { - "bn.js": "^4.4.0", - "brorand": "^1.0.1", + "bn.js": "^4.11.9", + "brorand": "^1.1.0", "hash.js": "^1.0.0", - "hmac-drbg": "^1.0.0", - "inherits": "^2.0.1", - "minimalistic-assert": "^1.0.0", - "minimalistic-crypto-utils": "^1.0.0" + "hmac-drbg": "^1.0.1", + "inherits": "^2.0.4", + "minimalistic-assert": "^1.0.1", + "minimalistic-crypto-utils": "^1.0.1" + }, + "dependencies": { + "bn.js": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", + "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==", + "dev": true + } } }, "emoji-regex": { @@ -5821,12 +5937,20 @@ "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==" }, "esrecurse": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz", - "integrity": "sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", + "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", "dev": true, "requires": { - "estraverse": "^4.1.0" + "estraverse": "^5.2.0" + }, + "dependencies": { + "estraverse": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz", + "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==", + "dev": true + } } }, "estraverse": { @@ -5857,9 +5981,9 @@ "dev": true }, "events": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/events/-/events-3.1.0.tgz", - "integrity": "sha512-Rv+u8MLHNOdMjTAFeT3nCjHn2aGlx435FP/sDHNaRhDEMwyI/aB22Kj2qIN8R0cw3z28psEQLYwxVKLsKrMgWg==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz", + "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==", "dev": true }, "eventsource": { @@ -7251,13 +7375,22 @@ } }, "hash-base": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz", - "integrity": "sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz", + "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==", "dev": true, "requires": { - "inherits": "^2.0.1", - "safe-buffer": "^5.0.1" + "inherits": "^2.0.4", + "readable-stream": "^3.6.0", + "safe-buffer": "^5.2.0" + }, + "dependencies": { + "safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "dev": true + } } }, "hash.js": { @@ -9190,6 +9323,14 @@ "requires": { "bn.js": "^4.0.0", "brorand": "^1.0.1" + }, + "dependencies": { + "bn.js": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", + "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==", + "dev": true + } } }, "mime": { @@ -13487,14 +13628,13 @@ } }, "parse-asn1": { - "version": "5.1.5", - "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.5.tgz", - "integrity": "sha512-jkMYn1dcJqF6d5CpU689bq7w/b5ALS9ROVSpQDPrZsqqesUJii9qutvoT5ltGedNXMO2e16YUWIghG9KxaViTQ==", + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz", + "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==", "dev": true, "requires": { - "asn1.js": "^4.0.0", + "asn1.js": "^5.2.0", "browserify-aes": "^1.0.0", - "create-hash": "^1.1.0", "evp_bytestokey": "^1.0.0", "pbkdf2": "^3.0.3", "safe-buffer": "^5.1.1" @@ -13650,9 +13790,9 @@ "integrity": "sha1-HUCLP9t2kjuVQ9lvtMnf1TXZy10=" }, "pbkdf2": { - "version": "3.0.17", - "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz", - "integrity": "sha512-U/il5MsrZp7mGg3mSQfn742na2T+1/vHDCG5/iTI3X9MKUuYUZVLQhyRsg06mCgDBTd57TxzgZt7P+fYfjRLtA==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz", + "integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==", "dev": true, "requires": { "create-hash": "^1.1.2", @@ -14174,6 +14314,14 @@ "parse-asn1": "^5.0.0", "randombytes": "^2.0.1", "safe-buffer": "^5.1.2" + }, + "dependencies": { + "bn.js": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", + "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==", + "dev": true + } } }, "pug": { @@ -14801,13 +14949,13 @@ } }, "react-reconciler": { - "version": "0.26.1", - "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.26.1.tgz", - "integrity": "sha512-6E/CvH9zcDmHjhiNJlP0qJ8+3ufnY2b5RWs774Uy8XKWN0l6qfnlkz0XnDacxqj2rbJdq76w9dlFXjPPOQrmqA==", + "version": "0.26.2", + "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.26.2.tgz", + "integrity": "sha512-nK6kgY28HwrMNwDnMui3dvm3rCFjZrcGiuwLc5COUipBK5hWHLOxMJhSnSomirqWwjPBJKV1QcbkI0VJr7Gl1Q==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", - "scheduler": "^0.20.1" + "scheduler": "^0.20.2" }, "dependencies": { "scheduler": { @@ -14918,39 +15066,9 @@ } }, "react-three-fiber": { - "version": "5.3.22", - "resolved": "https://registry.npmjs.org/react-three-fiber/-/react-three-fiber-5.3.22.tgz", - "integrity": "sha512-TAOsFg7oerXDkUK/NUwlaMd+drteokXdDMACDmeBKzx64Z0IruJl/ORW7x3giWzqG3fs6BBv+rpcreFW9Ofuyg==", - "requires": { - "@babel/runtime": "^7.12.1", - "react-merge-refs": "^1.1.0", - "react-reconciler": "0.26.1", - "react-use-measure": "^2.0.3", - "resize-observer-polyfill": "^1.5.1", - "scheduler": "0.20.1", - "tiny-emitter": "^2.1.0", - "use-asset": "^1.0.4", - "utility-types": "^3.10.0" - }, - "dependencies": { - "@babel/runtime": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz", - "integrity": "sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==", - "requires": { - "regenerator-runtime": "^0.13.4" - } - }, - "scheduler": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz", - "integrity": "sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - } - } + "version": "0.0.0-deprecated", + "resolved": "https://registry.npmjs.org/react-three-fiber/-/react-three-fiber-0.0.0-deprecated.tgz", + "integrity": "sha512-EblIqTAsIpkYeM8bZtC4lcpTE0A2zCEGipFB52RgcQq/q+0oryrk7Sxt+sqhIjUu6xMNEVywV8dr74lz5yWO6A==" }, "react-transition-group": { "version": "2.9.0", @@ -16847,9 +16965,9 @@ } }, "terser": { - "version": "4.6.12", - "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.12.tgz", - "integrity": "sha512-fnIwuaKjFPANG6MAixC/k1TDtnl1YlPLUlLVIxxGZUn1gfUx2+l3/zGNB72wya+lgsb50QBi2tUV75RiODwnww==", + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz", + "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==", "dev": true, "requires": { "commander": "^2.20.0", @@ -16866,16 +16984,16 @@ } }, "terser-webpack-plugin": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz", - "integrity": "sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==", + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz", + "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==", "dev": true, "requires": { "cacache": "^12.0.2", "find-cache-dir": "^2.1.0", "is-wsl": "^1.1.0", "schema-utils": "^1.0.0", - "serialize-javascript": "^2.1.2", + "serialize-javascript": "^4.0.0", "source-map": "^0.6.1", "terser": "^4.1.2", "webpack-sources": "^1.4.0", @@ -16962,23 +17080,15 @@ "glob": "^7.1.3" } }, - "schema-utils": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", - "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==", + "serialize-javascript": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", + "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==", "dev": true, "requires": { - "ajv": "^6.1.0", - "ajv-errors": "^1.0.0", - "ajv-keywords": "^3.1.0" + "randombytes": "^2.1.0" } }, - "serialize-javascript": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz", - "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==", - "dev": true - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -16986,9 +17096,9 @@ "dev": true }, "ssri": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz", - "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz", + "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==", "dev": true, "requires": { "figgy-pudding": "^3.5.1" @@ -17050,19 +17160,14 @@ "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=" }, "timers-browserify": { - "version": "2.0.11", - "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.11.tgz", - "integrity": "sha512-60aV6sgJ5YEbzUdn9c8kYGIqOubPoUdqQCul3SBAsRCZ40s6Y5cMcrW4dt3/k/EsbLVJNl9n6Vz3fTc+k2GeKQ==", + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz", + "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==", "dev": true, "requires": { "setimmediate": "^1.0.4" } }, - "tiny-emitter": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", - "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" - }, "tiny-inflate": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz", @@ -17578,9 +17683,9 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, "typescript": { - "version": "3.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.5.tgz", - "integrity": "sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==", + "version": "3.9.9", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.9.tgz", + "integrity": "sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==", "dev": true }, "typescript-collections": { @@ -18170,14 +18275,136 @@ } }, "watchpack": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz", - "integrity": "sha512-+IF9hfUFOrYOOaKyfaI7h7dquUIOgyEMoQMLA7OP5FxegKA2+XdXThAZ9TU2kucfhDH7rfMHs1oPYziVGWRnZA==", + "version": "1.7.5", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz", + "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==", "dev": true, "requires": { - "chokidar": "^2.1.8", + "chokidar": "^3.4.1", "graceful-fs": "^4.1.2", - "neo-async": "^2.5.0" + "neo-async": "^2.5.0", + "watchpack-chokidar2": "^2.0.1" + }, + "dependencies": { + "anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "dev": true, + "optional": true, + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, + "binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "optional": true + }, + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "optional": true, + "requires": { + "fill-range": "^7.0.1" + } + }, + "chokidar": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz", + "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==", + "dev": true, + "optional": true, + "requires": { + "anymatch": "~3.1.1", + "braces": "~3.0.2", + "fsevents": "~2.3.1", + "glob-parent": "~5.1.0", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.5.0" + } + }, + "fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "optional": true, + "requires": { + "to-regex-range": "^5.0.1" + } + }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "optional": true + }, + "glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "optional": true, + "requires": { + "is-glob": "^4.0.1" + } + }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "optional": true, + "requires": { + "binary-extensions": "^2.0.0" + } + }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "optional": true + }, + "readdirp": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz", + "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==", + "dev": true, + "optional": true, + "requires": { + "picomatch": "^2.2.1" + } + }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "optional": true, + "requires": { + "is-number": "^7.0.0" + } + } + } + }, + "watchpack-chokidar2": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz", + "integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==", + "dev": true, + "optional": true, + "requires": { + "chokidar": "^2.1.8" } }, "wbuf": { @@ -18204,9 +18431,9 @@ "dev": true }, "webpack": { - "version": "4.43.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.43.0.tgz", - "integrity": "sha512-GW1LjnPipFW2Y78OOab8NJlCflB7EFskMih2AHdvjbpKMeDJqEgSx24cXXXiPS65+WSwVyxtDsJH6jGX2czy+g==", + "version": "4.46.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz", + "integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==", "dev": true, "requires": { "@webassemblyjs/ast": "1.9.0", @@ -18217,7 +18444,7 @@ "ajv": "^6.10.2", "ajv-keywords": "^3.4.1", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^4.1.0", + "enhanced-resolve": "^4.5.0", "eslint-scope": "^4.0.3", "json-parse-better-errors": "^1.0.2", "loader-runner": "^2.4.0", @@ -18230,16 +18457,39 @@ "schema-utils": "^1.0.0", "tapable": "^1.1.3", "terser-webpack-plugin": "^1.4.3", - "watchpack": "^1.6.1", + "watchpack": "^1.7.4", "webpack-sources": "^1.4.1" }, "dependencies": { "acorn": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz", - "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==", + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz", + "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==", "dev": true }, + "enhanced-resolve": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz", + "integrity": "sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "memory-fs": "^0.5.0", + "tapable": "^1.0.0" + }, + "dependencies": { + "memory-fs": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz", + "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==", + "dev": true, + "requires": { + "errno": "^0.1.3", + "readable-stream": "^2.0.1" + } + } + } + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -18264,17 +18514,6 @@ "string_decoder": "~1.1.1", "util-deprecate": "~1.0.1" } - }, - "schema-utils": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", - "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==", - "dev": true, - "requires": { - "ajv": "^6.1.0", - "ajv-errors": "^1.0.0", - "ajv-keywords": "^3.1.0" - } } } }, @@ -18328,9 +18567,9 @@ } }, "webpack-dev-middleware": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz", - "integrity": "sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==", + "version": "3.7.3", + "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz", + "integrity": "sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==", "dev": true, "requires": { "memory-fs": "^0.4.1", @@ -18351,9 +18590,9 @@ } }, "mime": { - "version": "2.4.4", - "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz", - "integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==", + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz", + "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==", "dev": true }, "readable-stream": { @@ -18925,6 +19164,11 @@ "compress-commons": "^2.1.1", "readable-stream": "^3.4.0" } + }, + "zustand": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.4.1.tgz", + "integrity": "sha512-Kb91vSjy5vwBQ/PQ1a5GE6naS3gCxCgpkujT9zqZSO85+gnvmzgqraMW3ao1I0jR4PwHBXtLTf26r9j7EXoUiQ==" } } } diff --git a/package.json b/package.json index 8853714f1..6cbde9e1f 100644 --- a/package.json +++ b/package.json @@ -85,9 +85,9 @@ "@types/typescript": "^2.0.0", "@types/uuid": "^3.4.6", "@types/valid-url": "^1.0.3", - "@types/webpack": "^4.41.18", - "@types/webpack-dev-middleware": "^2.0.5", - "@types/webpack-hot-middleware": "^2.25.3", + "@types/webpack": "^4.41.27", + "@types/webpack-dev-middleware": "^2.0.7", + "@types/webpack-hot-middleware": "^2.25.4", "@types/xregexp": "^4.3.0", "@types/youtube": "0.0.39", "awesome-typescript-loader": "^5.2.1", @@ -108,10 +108,10 @@ "ts-node-dev": "^1.0.0-pre.49", "tslint": "^5.20.1", "tslint-loader": "^3.6.0", - "typescript": "^3.9.5", - "webpack": "^4.41.5", + "typescript": "^3.9.9", + "webpack": "^4.46.0", "webpack-cli": "^3.3.12", - "webpack-dev-middleware": "^3.7.2", + "webpack-dev-middleware": "^3.7.3", "webpack-dev-server": "^3.11.0", "webpack-hot-middleware": "^2.24.3" }, @@ -125,8 +125,14 @@ "@hig/theme-context": "^2.1.3", "@hig/theme-data": "^2.16.1", "@material-ui/core": "^4.11.0", + "@react-three/fiber": "^6.0.16", "@types/cors": "^2.8.8", + "@types/d3-axis": "^2.0.0", + "@types/d3-color": "^2.0.1", + "@types/d3-scale": "^3.2.2", + "@types/d3-selection": "^2.0.0", "@types/google-maps": "^3.2.2", + "@types/react-reconciler": "^0.26.1", "@types/reveal": "^3.3.33", "@types/three": "^0.126.2", "@types/webscopeio__react-textarea-autocomplete": "^4.6.1", @@ -241,7 +247,6 @@ "react-reveal": "^1.2.2", "react-select": "^3.1.0", "react-table": "^6.11.5", - "react-three-fiber": "^5.3.22", "readline": "^1.3.0", "request": "^2.88.0", "request-promise": "^4.2.5", diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx index c38337c91..c247afa26 100644 --- a/src/client/util/CaptureManager.tsx +++ b/src/client/util/CaptureManager.tsx @@ -99,7 +99,7 @@ export class CaptureManager extends React.Component<{}> { Cancel
-
+
; } @@ -135,6 +135,6 @@ export class CaptureManager extends React.Component<{}> { dialogueBoxStyle={{ width: "500px", height: "350px", border: "none", background: "whitesmoke" }} overlayStyle={{ background: "black" }} overlayDisplayedOpacity={0.6} - /> + />; } } \ No newline at end of file diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index cb0a4bea0..c3c3083be 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -1,5 +1,6 @@ import * as ts from "typescript"; export { ts }; + // export const ts = (window as any).ts; // // @ts-ignore diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx index 8c4bdcc41..d2074d653 100644 --- a/src/client/views/MarqueeAnnotator.tsx +++ b/src/client/views/MarqueeAnnotator.tsx @@ -67,7 +67,7 @@ export class MarqueeAnnotator extends React.Component { AnchorMenu.Instance.OnClick = (e: PointerEvent) => { this.props.anchorMenuClick?.()?.(this.highlight("rgba(173, 216, 230, 0.75)", true)); - } + }; AnchorMenu.Instance.Highlight = this.highlight; /** * This function is used by the AnchorMenu to create an anchor highlight and a new linked text annotation. diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index bb0ad4c66..d09d949ff 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -328,7 +328,7 @@ export class PropertiesView extends React.Component { */ @undoBatch changePermissions = (e: any, user: string) => { - const docs = SelectionManager.Views().length < 2 ? [this.selectedDoc!] : SelectionManager.Views().map(docView => docView.props.Document); + const docs = SelectionManager.Views().length < 2 ? [this.selectedDoc] : SelectionManager.Views().map(docView => docView.props.Document); SharingManager.Instance.shareFromPropertiesSidebar(user, e.currentTarget.value as SharingPermissions, docs); } @@ -409,7 +409,7 @@ export class PropertiesView extends React.Component { // all selected docs const docs = SelectionManager.Views().length < 2 ? - [this.layoutDocAcls ? this.selectedDoc! : this.selectedDoc![DataSym]] + [this.layoutDocAcls ? this.selectedDoc : this.selectedDoc[DataSym]] : SelectionManager.Views().map(docView => this.layoutDocAcls ? docView.props.Document : docView.props.Document[DataSym]); const target = docs[0]; diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 96f9eab97..0fca61913 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -81,7 +81,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt props?.styleProvider?.(doc, props, StyleProp.BackgroundColor); const opacity = () => props?.styleProvider?.(doc, props, StyleProp.Opacity); const showTitle = () => props?.styleProvider?.(doc, props, StyleProp.ShowTitle); - const random = (min: number, max: number, x: number, y: number) => { /* min should not be equal to max */ return min + ((Math.abs(x * y) * 9301 + 49297) % 233280 / 233280) * (max - min); } + const random = (min: number, max: number, x: number, y: number) => /* min should not be equal to max */ min + ((Math.abs(x * y) * 9301 + 49297) % 233280 / 233280) * (max - min); switch (property.split(":")[0]) { case StyleProp.TreeViewIcon: return Doc.toIcon(doc, isOpen); case StyleProp.DocContents: return undefined; diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index ab4f197a6..08290a9b3 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -535,7 +535,7 @@ export class CollectionViewBaseChrome extends React.Component - + ; } render() { diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index b53827371..f0a54e4ac 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -1,46 +1,45 @@ import { computed } from "mobx"; import { observer } from "mobx-react"; -import { Doc, Opt, Field, AclPrivate } from "../../../fields/Doc"; -import { Cast, StrCast, NumCast } from "../../../fields/Types"; -import { OmitKeys, Without, emptyPath } from "../../../Utils"; +import { AclPrivate, Doc, Opt } from "../../../fields/Doc"; +import { ScriptField } from "../../../fields/ScriptField"; +import { Cast, StrCast } from "../../../fields/Types"; +import { GetEffectiveAcl, TraceMobx } from "../../../fields/util"; +import { emptyPath, OmitKeys, Without } from "../../../Utils"; import { DirectoryImportBox } from "../../util/Import & Export/DirectoryImportBox"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; import { CollectionSchemaView } from "../collections/CollectionSchemaView"; import { CollectionView } from "../collections/CollectionView"; +import { InkingStroke } from "../InkingStroke"; +import { PresElementBox } from "../presentationview/PresElementBox"; +import { SearchBox } from "../search/SearchBox"; +import { DashWebRTCVideo } from "../webcam/DashWebRTCVideo"; import { YoutubeBox } from "./../../apis/youtube/YoutubeBox"; import { AudioBox } from "./AudioBox"; -import { LabelBox } from "./LabelBox"; -import { EquationBox } from "./EquationBox"; -import { FunctionPlotBox } from "./FunctionPlotBox"; -import { SliderBox } from "./SliderBox"; -import { LinkBox } from "./LinkBox"; -import { ScriptingBox } from "./ScriptingBox"; +import { ColorBox } from "./ColorBox"; +import { ComparisonBox } from "./ComparisonBox"; import { DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; -import { FontIconBox } from "./FontIconBox"; +import { EquationBox } from "./EquationBox"; import { FieldView, FieldViewProps } from "./FieldView"; +import { FilterBox } from "./FilterBox"; +import { FontIconBox } from "./FontIconBox"; import { FormattedTextBox, FormattedTextBoxProps } from "./formattedText/FormattedTextBox"; +import { FunctionPlotBox } from "./FunctionPlotBox"; import { ImageBox } from "./ImageBox"; import { KeyValueBox } from "./KeyValueBox"; +import { LabelBox } from "./LabelBox"; +import { LinkAnchorBox } from "./LinkAnchorBox"; +import { LinkBox } from "./LinkBox"; import { PDFBox } from "./PDFBox"; import { PresBox } from "./PresBox"; -import { SearchBox } from "../search/SearchBox"; -import { FilterBox } from "./FilterBox"; -import { ColorBox } from "./ColorBox"; -import { DashWebRTCVideo } from "../webcam/DashWebRTCVideo"; -import { LinkAnchorBox } from "./LinkAnchorBox"; -import { PresElementBox } from "../presentationview/PresElementBox"; import { ScreenshotBox } from "./ScreenshotBox"; -import { ComparisonBox } from "./ComparisonBox"; +import { ScriptingBox } from "./ScriptingBox"; +import { SliderBox } from "./SliderBox"; import { VideoBox } from "./VideoBox"; import { WebBox } from "./WebBox"; -import { InkingStroke } from "../InkingStroke"; import React = require("react"); -import { TraceMobx, GetEffectiveAcl } from "../../../fields/util"; -import { ScriptField } from "../../../fields/ScriptField"; import XRegExp = require("xregexp"); -import { DocumentType } from "../../documents/DocumentTypes"; const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? @@ -226,7 +225,8 @@ export class DocumentContentsView extends React.Component; const ScreenshotDocument = makeInterface(documentSchema); -interface VideoTileProps { - raised: { coord: Vector2, off: Vector3 }[]; - setRaised: (r: { coord: Vector2, off: Vector3 }[]) => void; - x: number; - y: number; - rootDoc: Doc; - color: string; -} +// interface VideoTileProps { +// raised: { coord: Vector2, off: Vector3 }[]; +// setRaised: (r: { coord: Vector2, off: Vector3 }[]) => void; +// x: number; +// y: number; +// rootDoc: Doc; +// color: string; +// } -@observer -export class VideoTile extends React.Component { - @observable _videoRef: HTMLVideoElement | undefined; - _mesh: any = undefined; +// @observer +// export class VideoTile extends React.Component { +// @observable _videoRef: HTMLVideoElement | undefined; +// _mesh: any = undefined; - render() { - const topLeft = [this.props.x, this.props.y]; - const raised = this.props.raised; - const find = (raised: { coord: Vector2, off: Vector3 }[], what: Vector2) => raised.find(r => r.coord.x === what.x && r.coord.y === what.y); - const tl1 = find(raised, new Vector2(topLeft[0], topLeft[1] + 1)); - const tl2 = find(raised, new Vector2(topLeft[0] + 1, topLeft[1] + 1)); - const tl3 = find(raised, new Vector2(topLeft[0] + 1, topLeft[1])); - const tl4 = find(raised, new Vector2(topLeft[0], topLeft[1])); - const quad_indices = [0, 2, 1, 0, 3, 2]; - const quad_uvs = [0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 0.0, 0.0]; - const quad_normals = [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,]; - const quad_vertices = - [ - topLeft[0] - 0.0 + (tl1?.off.x || 0), topLeft[1] + 1.0 + (tl1?.off.y || 0), 0.0 + (tl1?.off.z || 0), - topLeft[0] + 1.0 + (tl2?.off.x || 0), topLeft[1] + 1.0 + (tl2?.off.y || 0), 0.0 + (tl2?.off.z || 0), - topLeft[0] + 1.0 + (tl3?.off.x || 0), topLeft[1] - 0.0 + (tl3?.off.y || 0), 0.0 + (tl3?.off.z || 0), - topLeft[0] - 0.0 + (tl4?.off.x || 0), topLeft[1] - 0.0 + (tl4?.off.y || 0), 0.0 + (tl4?.off.z || 0) - ]; +// render() { +// const topLeft = [this.props.x, this.props.y]; +// const raised = this.props.raised; +// const find = (raised: { coord: Vector2, off: Vector3 }[], what: Vector2) => raised.find(r => r.coord.x === what.x && r.coord.y === what.y); +// const tl1 = find(raised, new Vector2(topLeft[0], topLeft[1] + 1)); +// const tl2 = find(raised, new Vector2(topLeft[0] + 1, topLeft[1] + 1)); +// const tl3 = find(raised, new Vector2(topLeft[0] + 1, topLeft[1])); +// const tl4 = find(raised, new Vector2(topLeft[0], topLeft[1])); +// const quad_indices = [0, 2, 1, 0, 3, 2]; +// const quad_uvs = [0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 0.0, 0.0]; +// const quad_normals = [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,]; +// const quad_vertices = +// [ +// topLeft[0] - 0.0 + (tl1?.off.x || 0), topLeft[1] + 1.0 + (tl1?.off.y || 0), 0.0 + (tl1?.off.z || 0), +// topLeft[0] + 1.0 + (tl2?.off.x || 0), topLeft[1] + 1.0 + (tl2?.off.y || 0), 0.0 + (tl2?.off.z || 0), +// topLeft[0] + 1.0 + (tl3?.off.x || 0), topLeft[1] - 0.0 + (tl3?.off.y || 0), 0.0 + (tl3?.off.z || 0), +// topLeft[0] - 0.0 + (tl4?.off.x || 0), topLeft[1] - 0.0 + (tl4?.off.y || 0), 0.0 + (tl4?.off.z || 0) +// ]; - const vertices = new Float32Array(quad_vertices); - const normals = new Float32Array(quad_normals); - const uvs = new Float32Array(quad_uvs); // Each vertex has one uv coordinate for texture mapping - const indices = new Uint32Array(quad_indices); // Use the four vertices to draw the two triangles that make up the square. - const popOut = () => NumCast(this.props.rootDoc.popOut); - const popOff = () => NumCast(this.props.rootDoc.popOff); - return ( - { - this.props.setRaised([ - { coord: new Vector2(topLeft[0], topLeft[1]), off: new Vector3(-popOff(), -popOff(), popOut()) }, - { coord: new Vector2(topLeft[0] + 1, topLeft[1]), off: new Vector3(popOff(), -popOff(), popOut()) }, - { coord: new Vector2(topLeft[0], topLeft[1] + 1), off: new Vector3(-popOff(), popOff(), popOut()) }, - { coord: new Vector2(topLeft[0] + 1, topLeft[1] + 1), off: new Vector3(popOff(), popOff(), popOut()) } - ]); - if (!this._videoRef) { - (navigator.mediaDevices as any).getDisplayMedia({ video: true }).then(action((stream: any) => { - //const videoSettings = stream.getVideoTracks()[0].getSettings(); - this._videoRef = document.createElement("video"); - Object.assign(this._videoRef, { - srcObject: stream, - //height: videoSettings.height, - //width: videoSettings.width, - autoplay: true - }); - })); - } - })} ref={(r: any) => this._mesh = r}> - { - // itemSize = 3 because there are 3 values (components) per vertex - r?.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); - r?.setAttribute('normal', new THREE.BufferAttribute(normals, 3)); - r?.setAttribute('uv', new THREE.BufferAttribute(uvs, 2)); - r?.setIndex(new THREE.BufferAttribute(indices, 1)); - }} /> - {!this._videoRef ? : - - - } - - ) - }; -} +// const vertices = new Float32Array(quad_vertices); +// const normals = new Float32Array(quad_normals); +// const uvs = new Float32Array(quad_uvs); // Each vertex has one uv coordinate for texture mapping +// const indices = new Uint32Array(quad_indices); // Use the four vertices to draw the two triangles that make up the square. +// const popOut = () => NumCast(this.props.rootDoc.popOut); +// const popOff = () => NumCast(this.props.rootDoc.popOff); +// return ( +// { +// this.props.setRaised([ +// { coord: new Vector2(topLeft[0], topLeft[1]), off: new Vector3(-popOff(), -popOff(), popOut()) }, +// { coord: new Vector2(topLeft[0] + 1, topLeft[1]), off: new Vector3(popOff(), -popOff(), popOut()) }, +// { coord: new Vector2(topLeft[0], topLeft[1] + 1), off: new Vector3(-popOff(), popOff(), popOut()) }, +// { coord: new Vector2(topLeft[0] + 1, topLeft[1] + 1), off: new Vector3(popOff(), popOff(), popOut()) } +// ]); +// if (!this._videoRef) { +// (navigator.mediaDevices as any).getDisplayMedia({ video: true }).then(action((stream: any) => { +// //const videoSettings = stream.getVideoTracks()[0].getSettings(); +// this._videoRef = document.createElement("video"); +// Object.assign(this._videoRef, { +// srcObject: stream, +// //height: videoSettings.height, +// //width: videoSettings.width, +// autoplay: true +// }); +// })); +// } +// })} ref={(r: any) => this._mesh = r}> +// { +// // itemSize = 3 because there are 3 values (components) per vertex +// r?.setAttribute('position', new BufferAttribute(vertices, 3)); +// r?.setAttribute('normal', new BufferAttribute(normals, 3)); +// r?.setAttribute('uv', new BufferAttribute(uvs, 2)); +// r?.setIndex(new BufferAttribute(indices, 1)); +// }} /> +// {!this._videoRef ? : +// +// +// } +// +// ); +// } +// } @observer export class ScreenshotBox extends ViewBoxAnnotatableComponent(ScreenshotDocument) { @@ -153,16 +152,16 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent ({ width: this.props.PanelWidth(), height: this.props.PanelHeight() }), - ({ width, height }) => { - if (this._camera) { - const angle = -Math.abs(1 - width / height); - const xz = [0, (this._numScreens - 2) / Math.abs(1 + angle)]; - this._camera.position.set(this._numScreens / 2 + xz[1] * Math.sin(angle), this._numScreens / 2, xz[1] * Math.cos(angle)); - this._camera.lookAt(this._numScreens / 2, this._numScreens / 2, 0); - (this._camera as any).updateProjectionMatrix(); - } - }); + // this.rootDoc.videoWall && reaction(() => ({ width: this.props.PanelWidth(), height: this.props.PanelHeight() }), + // ({ width, height }) => { + // if (this._camera) { + // const angle = -Math.abs(1 - width / height); + // const xz = [0, (this._numScreens - 2) / Math.abs(1 + angle)]; + // this._camera.position.set(this._numScreens / 2 + xz[1] * Math.sin(angle), this._numScreens / 2, xz[1] * Math.cos(angle)); + // this._camera.lookAt(this._numScreens / 2, this._numScreens / 2, 0); + // (this._camera as any).updateProjectionMatrix(); + // } + // }); } componentWillUnmount() { const ind = DocUtils.ActiveRecordings.indexOf(this); @@ -196,27 +195,29 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent; } - _numScreens = 5; - _camera: Camera | undefined; - @observable _raised = [] as { coord: Vector2, off: Vector3 }[]; - @action setRaised = (r: { coord: Vector2, off: Vector3 }[]) => this._raised = r; + // _numScreens = 5; + // _camera: Camera | undefined; + // @observable _raised = [] as { coord: Vector2, off: Vector3 }[]; + // @action setRaised = (r: { coord: Vector2, off: Vector3 }[]) => this._raised = r; @computed get threed() { - if (!this.rootDoc.videoWall) return (null); - const screens: any[] = []; - const colors = ["yellow", "red", "orange", "brown", "maroon", "gray"]; - let count = 0; - numberRange(this._numScreens).forEach(x => numberRange(this._numScreens).forEach(y => screens.push( - ))); - return { - this._camera = props.camera; - props.camera.position.set(this._numScreens / 2, this._numScreens / 2, this._numScreens - 2); - props.camera.lookAt(this._numScreens / 2, this._numScreens / 2, 0); - }}> - {/* */} - - {screens} - - }; + // if (this.rootDoc.videoWall) { + // const screens: any[] = []; + // const colors = ["yellow", "red", "orange", "brown", "maroon", "gray"]; + // let count = 0; + // numberRange(this._numScreens).forEach(x => numberRange(this._numScreens).forEach(y => screens.push( + // ))); + // return { + // this._camera = props.camera; + // props.camera.position.set(this._numScreens / 2, this._numScreens / 2, this._numScreens - 2); + // props.camera.lookAt(this._numScreens / 2, this._numScreens / 2, 0); + // }}> + // {/* */} + // + // {screens} + // ; + // } + return (null); + } toggleRecording = action(async () => { this._screenCapture = !this._screenCapture; if (this._screenCapture) { diff --git a/src/fields/Schema.ts b/src/fields/Schema.ts index 78f8a6bfb..7ad376a28 100644 --- a/src/fields/Schema.ts +++ b/src/fields/Schema.ts @@ -21,8 +21,6 @@ export interface InterfaceFunc { } export type makeInterface = AllToInterface & Doc & { proto: Doc | undefined }; -// export function makeInterface(schemas: T): (doc: U) => All; -// export function makeInterface(schema: T): (doc: U) => makeInterface; export function makeInterface(...schemas: T): InterfaceFunc { const schema: Interface = {}; for (const s of schemas) { @@ -37,18 +35,18 @@ export function makeInterface(...schemas: T): InterfaceFu const desc = prop === "proto" ? Doc : (schema as any)[prop]; // bcz: proto doesn't appear in schemas ... maybe it should? if (typeof desc === "object" && "defaultVal" in desc && "type" in desc) {//defaultSpec return Cast(field, desc.type, desc.defaultVal); - } else if (typeof desc === "function" && !ObjectField.isPrototypeOf(desc) && !RefField.isPrototypeOf(desc)) { + } + if (typeof desc === "function" && !ObjectField.isPrototypeOf(desc) && !RefField.isPrototypeOf(desc)) { const doc = Cast(field, Doc); if (doc === undefined) { return undefined; - } else if (doc instanceof Doc) { + } + if (doc instanceof Doc) { return desc(doc); - } else { - return doc.then(doc => doc && desc(doc)); } - } else { - return Cast(field, desc); + return doc.then(doc => doc && desc(doc)); } + return Cast(field, desc); } return field; }, @@ -57,21 +55,9 @@ export function makeInterface(...schemas: T): InterfaceFu return true; } }); - const fn = (doc: Doc) => { - doc = doc[SelfProxy]; - // if (!(doc instanceof Doc)) { - // throw new Error("Currently wrapping a schema in another schema isn't supported"); - // } - const obj = Object.create(proto, { doc: { value: doc, writable: false } }); - return obj; - }; - return function (doc?: Doc | Doc[]) { - if (doc instanceof Doc || doc === undefined) { - return fn(doc || new Doc); - } else if (doc instanceof List) { - return doc.map(fn); - } else return {}; - }; + // !(doc instanceof Doc) && (throw new Error("Currently wrapping a schema in another schema isn't supported")); + const fn = (doc: Doc) => Object.create(proto, { doc: { value: doc[SelfProxy], writable: false } }); + return ((doc?: Doc | Doc[]) => (doc instanceof List ? doc : undefined)?.map?.(fn) ?? fn((doc as Doc) ?? new Doc)) as InterfaceFunc; } export type makeStrictInterface = Partial>; diff --git a/webpack.config.js b/webpack.config.js index 30967d618..56bd428e4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -106,7 +106,9 @@ module.exports = { } }] } - ] + ], + + noParse: [require.resolve('typescript/lib/typescript.js')], }, plugins, externals: [ -- cgit v1.2.3-70-g09d2 From 82b9c13e3fdcf883ce97a66e24ca1dbc80e6739a Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 29 Apr 2021 11:38:31 -0400 Subject: fixed up some caption things with carousel and other views. made caption fontsizes increase with zoom level. --- src/client/views/StyleProvider.tsx | 7 +++++-- .../views/collections/CollectionCarousel3DView.tsx | 7 +++---- .../views/collections/CollectionCarouselView.tsx | 18 ++++++++++-------- src/client/views/collections/CollectionMenu.tsx | 5 ++--- src/client/views/nodes/DocumentView.tsx | 16 +++++++--------- .../views/nodes/formattedText/FormattedTextBox.tsx | 6 ++++-- 6 files changed, 31 insertions(+), 28 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 0fca61913..8cb8fea11 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -43,6 +43,7 @@ export enum StyleProp { ShowTitle = "showTitle", // whether to display a title on a Document (optional :hover suffix) JitterRotation = "jitterRotation", // whether documents should be randomly rotated BorderPath = "customBorder", // border path for document view + FontSize = "fontSize", // size of text font } function darkScheme() { return BoolCast(CurrentUserUtils.ActiveDashboard?.darkScheme); } @@ -70,12 +71,12 @@ export function wavyBorderPath(pw: number, ph: number, inset: number = 0.05) { // export function DefaultStyleProvider(doc: Opt, props: Opt, property: string): any { const docProps = testDocProps(props) ? props : undefined; - const fieldKey = (props as any)?.fieldKey ? (props as any).fieldKey + "-" : ""; const selected = property.includes(":selected"); const isCaption = property.includes(":caption"); const isAnchor = property.includes(":anchor"); const isAnnotated = property.includes(":annotated"); const isOpen = property.includes(":open"); + const fieldKey = (props as any)?.fieldKey ? (props as any).fieldKey + "-" : isCaption ? "caption-" : ""; const comicStyle = () => doc && !Doc.IsSystem(doc) && Doc.UserDoc().renderStyle === "comic"; const isBackground = () => StrListCast(doc?._layerTags).includes(StyleLayers.Background); const backgroundCol = () => props?.styleProvider?.(doc, props, StyleProp.BackgroundColor); @@ -88,6 +89,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt, props: Opt 400 || col.alpha() < 0.25) return "black"; return "white"; case StyleProp.Hidden: return BoolCast(doc?._hidden); - case StyleProp.BorderRounding: return StrCast(doc?.[fieldKey + "borderRounding"], StrCast(doc?._borderRounding)); + case StyleProp.BorderRounding: return StrCast(doc?.[fieldKey + "borderRounding"]); case StyleProp.TitleHeight: return 15; case StyleProp.BorderPath: return comicStyle() && props?.renderDepth ? { path: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0), fill: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0, .08), width: 3 } : { path: undefined, width: 0 }; case StyleProp.JitterRotation: return comicStyle() ? random(-1, 1, NumCast(doc?.x), NumCast(doc?.y)) * ((props?.PanelWidth() || 0) > (props?.PanelHeight() || 0) ? 5 : 10) : 0; @@ -124,6 +126,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt { - return
this.layoutDoc._itemIndex = index} />; - })); + return (this.childLayoutPairs.map((_child, index) => +
this.layoutDoc._itemIndex = index} />)); } render() { diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index cd81a99c9..6c2c27e8e 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -38,9 +38,10 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) e.stopPropagation(); this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; } - captionStyleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { - const captionProps = { ...this.props, fieldKey: "caption" }; - return this.props.styleProvider?.(doc, props, property) || this.props.styleProvider?.(this.layoutDoc, captionProps, property); + captionStyleProvider = (doc: (Doc | undefined), captionProps: Opt, property: string): any => { + // first look for properties on the document in the carousel, then fallback to properties on the container + const childValue = doc?.["caption-" + property] ? this.props.styleProvider?.(doc, captionProps, property) : undefined; + return childValue ?? this.props.styleProvider?.(this.layoutDoc, captionProps, property); } panelHeight = () => this.props.PanelHeight() - (StrCast(this.layoutDoc._showCaption) ? 50 : 0); onContentDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick); @@ -51,12 +52,14 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) const captionProps = { ...this.props, fieldKey: "caption" }; const marginX = NumCast(this.layoutDoc["caption-xMargin"]); const marginY = NumCast(this.layoutDoc["caption-yMargin"]); + const showCaptions = StrCast(this.layoutDoc._showCaption); return !(curDoc?.layout instanceof Doc) ? (null) : <>
+ Document={curDoc.layout} + DataDoc={undefined} />
; } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 08290a9b3..6e6fabd0d 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -763,7 +763,7 @@ export class CollectionFreeFormViewChrome extends React.Component - + {!this.isText ? <> {this.drawButtons} @@ -789,8 +789,7 @@ export class CollectionFreeFormViewChrome extends React.Component } - : - + : (null) } {!this.selectedDocumentView?.ComponentView?.menuControls ? (null) : this.selectedDocumentView?.ComponentView?.menuControls?.()}
; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 37394ba83..7ec9f5f74 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -121,6 +121,7 @@ export interface DocumentViewSharedProps { dropAction?: dropActionType; dontRegisterView?: boolean; hideLinkButton?: boolean; + hideCaptions?: boolean; ignoreAutoHeight?: boolean; disableDocBrushing?: boolean; // should highlighting for this view be disabled when same document in another view is hovered over. pointerEvents?: string; @@ -908,22 +909,19 @@ export class DocumentViewInternal extends DocComponent - + `} onClick={this.onClickFunc} - layoutKey={this.finalLayoutKey} /> + />
; const titleView = !showTitle ? (null) :
= 10 ? "-selected" : ""; + const col = this.props.color ? this.props.color : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color); + const back = this.props.background ? this.props.background : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor); return (
this.isContentActive() && e.stopPropagation()} @@ -1531,10 +1533,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp height: this.props.height || (this.autoHeight && this.props.renderDepth ? "max-content" : undefined), background: this.props.background ? this.props.background : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor), color: this.props.color ? this.props.color : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color), - pointerEvents: interactive ? undefined : "none", - fontSize: this.props.fontSize || Cast(this.layoutDoc._fontSize, "string", null), + fontSize: this.props.fontSize ? this.props.fontSize : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.FontSize), fontWeight: Cast(this.layoutDoc._fontWeight, "number", null), fontFamily: StrCast(this.layoutDoc._fontFamily, "inherit"), + pointerEvents: interactive ? undefined : "none", }} onContextMenu={this.specificContextMenu} onKeyDown={this.onKeyDown} -- cgit v1.2.3-70-g09d2 From c1a664b55ff39c3f1697249e6a712c741efc2458 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 30 Apr 2021 15:03:45 -0400 Subject: cleaned up rightbuttons in treeView and fixed so that they show up in dashboard. fixed filters to gatherfield values correctly. --- src/client/views/MainView.tsx | 28 +---------- src/client/views/StyleProvider.scss | 10 ++++ src/client/views/StyleProvider.tsx | 77 ++++++++++-------------------- src/client/views/collections/TreeView.scss | 18 ++----- src/client/views/collections/TreeView.tsx | 5 +- src/client/views/nodes/FilterBox.tsx | 47 ++++++++---------- 6 files changed, 64 insertions(+), 121 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index e54d84a6c..4eeb1fc95 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -309,32 +309,6 @@ export class MainView extends React.Component { } - /** - * 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} @@ -349,7 +323,7 @@ export class MainView extends React.Component { pinToPres={emptyFunction} docViewPath={returnEmptyDoclist} layerProvider={undefined} - styleProvider={this._sidebarContent.proto === Doc.UserDoc().myDashboards ? this.DashboardStyleProvider : DefaultStyleProvider} + styleProvider={this._sidebarContent.proto === Doc.UserDoc().myDashboards ? DashboardStyleProvider : DefaultStyleProvider} rootSelected={returnTrue} removeDocument={returnFalse} ScreenToLocalTransform={this.mainContainerXf} diff --git a/src/client/views/StyleProvider.scss b/src/client/views/StyleProvider.scss index 94001730c..f26ed1f2d 100644 --- a/src/client/views/StyleProvider.scss +++ b/src/client/views/StyleProvider.scss @@ -16,4 +16,14 @@ } .styleProvider-lock:hover { opacity:1; +} + +.styleProvider-treeView-icon, +.styleProvider-treeView-icon-active { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + +.styleProvider-treeView-icon { + display: none; } \ No newline at end of file diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index d7ee82f2c..9e61351c4 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -1,7 +1,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; -import { runInAction } from 'mobx'; +import { runInAction, action } from 'mobx'; import { Doc, Opt, StrListCast } from "../../fields/Doc"; import { List } from '../../fields/List'; import { listSpec } from '../../fields/Schema'; @@ -9,16 +10,16 @@ import { BoolCast, Cast, NumCast, StrCast } from "../../fields/Types"; import { DocumentType } from '../documents/DocumentTypes'; import { CurrentUserUtils } from '../util/CurrentUserUtils'; import { SnappingManager } from '../util/SnappingManager'; -import { UndoManager } from '../util/UndoManager'; +import { UndoManager, undoBatch } from '../util/UndoManager'; import { CollectionViewType } from './collections/CollectionView'; +import "./collections/TreeView.scss"; import { MainView } from './MainView'; import { DocumentViewProps } from "./nodes/DocumentView"; -import "./StyleProvider.scss"; -import "./collections/TreeView.scss"; +import { FieldViewProps } from './nodes/FieldView'; import "./nodes/FilterBox.scss"; +import "./StyleProvider.scss"; import React = require("react"); import Color = require('color'); -import { FieldViewProps } from './nodes/FieldView'; export enum StyleLayers { Background = "background" @@ -98,7 +99,9 @@ export function DefaultStyleProvider(doc: Opt, props: Opt 400 || col.alpha() < 0.25) return "black"; return "white"; @@ -110,7 +113,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt = StrCast(doc?.[fieldKey + "backgroundColor"], StrCast(doc?._backgroundColor, isCaption ? "rbga(0,0,0,0.4)" : "")); + let docColor: Opt = StrCast(doc?.[fieldKey + "backgroundColor"], StrCast(doc?._backgroundColor, isCaption ? "rgba(0,0,0,0.4)" : "")); if (MainView.Instance.LastButton === doc) return darkScheme() ? "dimgrey" : "lightgrey"; switch (doc?.type) { case DocumentType.PRESELEMENT: docColor = docColor || (darkScheme() ? "" : ""); break; @@ -189,60 +192,30 @@ export function DefaultStyleProvider(doc: Opt, props: Opt 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"); +export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp, offIcon: IconProp, clickFunc?: () => void) { + return
{ + e.stopPropagation(); + clickFunc ? clickFunc() : (doc[field] = doc[field] ? undefined : true); + }))}> + +
; } - /** * 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); + if (doc && property.split(":")[0] === StyleProp.Decorations) { + return doc._viewType === CollectionViewType.Docking ? (null) : + <> + {DashboardToggleButton(doc, "hidden", "eye-slash", "eye")} + {DashboardToggleButton(doc, "lockedPosition", "lock", "unlock")} + ; } + return DefaultStyleProvider(doc, props, property); } -function changeFilterBool(e: any, doc: Doc) { - UndoManager.RunInBatch(() => runInAction(() => { - //e.stopPropagation(); - //doc.lockedPosition = doc.lockedPosition ? undefined : true; - }), "changeFilterBool"); -} - -function closeFilter(e: React.MouseEvent, doc: Doc) { - UndoManager.RunInBatch(() => runInAction(() => { - e.stopPropagation(); - //doc.lockedPosition = doc.lockedPosition ? undefined : true; - }), "closeFilter"); -} - - // // a preliminary semantic-"layering/grouping" mechanism for determining interactive properties of documents // currently, the provider tests whether the docuemnt's layer field matches the activeLayer field of the tab. diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 5b0c04f33..0239ae863 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -113,24 +113,18 @@ width: unset; } - .right-buttons-container { + .treeView-rightButtons { display: flex; align-items: center; margin-left: 0.25rem; opacity: 0.75; - >svg, - .styleProvider-treeView-lock, - .styleProvider-treeView-hide, - .styleProvider-treeView-lock-active, - .styleProvider-treeView-hide-active { + >svg { margin-left: 0.25rem; margin-right: 0.25rem; } - >svg, - .styleProvider-treeView-lock, - .styleProvider-treeView-hide { + >svg { display: none; } } @@ -154,11 +148,9 @@ } } - .right-buttons-container { - + .treeView-rightButtons { >svg, - .styleProvider-treeView-lock, - .styleProvider-treeView-hide { + .styleProvider-treeView-icon { display: inherit; } } diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index e1fd78270..49db98743 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -626,6 +626,7 @@ export class TreeView extends React.Component { ContainingCollectionDoc={this.props.treeView.props.Document} />; + const buttons = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations + (Doc.IsSystem(this.props.containerCollection) ? ":afterHeader" : "")); return <>
{ }} > {view}
-
- {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations + (Doc.IsSystem(this.props.containerCollection) ? ":afterHeader" : ""))} {/* hide and lock buttons */} +
+ {buttons} {/* hide and lock buttons */} {this.headerElements}
; diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx index 78449636a..c97de3402 100644 --- a/src/client/views/nodes/FilterBox.tsx +++ b/src/client/views/nodes/FilterBox.tsx @@ -1,8 +1,9 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { computed, observable, action, trace, reaction, runInAction } from "mobx"; +import { action, computed, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { Doc, DocListCast, Field, Opt, DocListCastAsync, HeightSym } from "../../../fields/Doc"; +import Select from "react-select"; +import { Doc, DocListCast, DocListCastAsync, Field, HeightSym, Opt } from "../../../fields/Doc"; import { documentSchema } from "../../../fields/documentSchemas"; import { List } from "../../../fields/List"; import { RichTextField } from "../../../fields/RichTextField"; @@ -12,24 +13,22 @@ import { Cast, StrCast } from "../../../fields/Types"; import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from "../../../Utils"; import { Docs } from "../../documents/Documents"; import { DocumentType } from "../../documents/DocumentTypes"; +import { CurrentUserUtils } from "../../util/CurrentUserUtils"; +import { UserOptions } from "../../util/GroupManager"; +import { Scripting } from "../../util/Scripting"; +import { SelectionManager } from "../../util/SelectionManager"; import { CollectionTreeView } from "../collections/CollectionTreeView"; +import { CollectionView } from "../collections/CollectionView"; import { ViewBoxBaseComponent } from "../DocComponent"; +import { EditableView } from "../EditableView"; import { SearchBox } from "../search/SearchBox"; +import { DashboardToggleButton, DefaultStyleProvider, StyleProp } from "../StyleProvider"; +import { DocumentViewProps } from "./DocumentView"; import { FieldView, FieldViewProps } from './FieldView'; import './FilterBox.scss'; -import { Scripting } from "../../util/Scripting"; -import { SelectionManager } from "../../util/SelectionManager"; -import { CollectionView } from "../collections/CollectionView"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; -import Select from "react-select"; -import { UserOptions } from "../../util/GroupManager"; -import { DocumentViewProps } from "./DocumentView"; -import { DefaultStyleProvider, StyleProp } from "../StyleProvider"; -import { CurrentUserUtils } from "../../util/CurrentUserUtils"; -import { EditableView } from "../EditableView"; -import { undoBatch } from "../../util/UndoManager"; type FilterBoxDocument = makeInterface<[typeof documentSchema]>; const FilterBoxDocument = makeInterface(documentSchema); @@ -135,7 +134,7 @@ export class FilterBox extends ViewBoxBaseComponent(); let rtFields = 0; childDocs.forEach((d) => { @@ -206,7 +205,7 @@ export class FilterBox extends ViewBoxBaseComponent { - const num = Number(val); + const num = val ? Number(val) : Number.NaN; if (Number.isNaN(num)) { nonNumbers++; } else { @@ -217,8 +216,8 @@ export class FilterBox extends ViewBoxBaseComponent; if (facetHeader === "text" || facetValues.rtFields / allCollectionDocs.length > 0.1) { newFacet = Docs.Create.TextDocument("", { - _width: 100, _height: 25, system: true, _stayInCollection: true, target: targetDoc, - treeViewExpandedView: "layout", title: facetHeader, _treeViewOpen: true, _forceActive: true, ignoreClick: true + title: facetHeader, system: true, target: targetDoc, _width: 100, _height: 25, _stayInCollection: true, + treeViewExpandedView: "layout", _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; @@ -226,7 +225,8 @@ export class FilterBox extends ViewBoxBaseComponent, props: Opt, property: string) => { - switch (property.split(":")[0]) { - case StyleProp.Decorations: - return !doc || doc.treeViewHideHeaderFields ? (null) : - <> -
- this.removeFilter(StrCast(doc.title)) - )}> - -
- ; + if (property.split(":")[0] === StyleProp.Decorations) { + return !doc || doc.treeViewHideHeaderFields ? (null) : + DashboardToggleButton(doc, "hidden", "trash", "trash", () => this.removeFilter(StrCast(doc.title))); } return this.props.styleProvider?.(doc, props, property); } -- cgit v1.2.3-70-g09d2 From 66f120531a7e86a7a6bfac30e9c966c3baaed99d Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 12 May 2021 13:18:33 -0400 Subject: fixed issue with link panel appearing on text boxes when no link is clicked. --- src/client/views/collections/TreeView.tsx | 2 +- src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 49db98743..2e98fb508 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -720,7 +720,7 @@ export class TreeView extends React.Component { } @computed get renderBorder() { - const sorting = this.doc[`${this.fieldKey}-sortCriteria`]; + const sorting = this.doc[`${this.fieldKey}-sortCriterion`]; return
{!this.treeViewOpen ? (null) : this.renderContent} diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 6821935a0..1fde6e5f0 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -85,7 +85,7 @@ export class FormattedTextBoxComment { static update(textBox: FormattedTextBox, view: EditorView, lastState?: EditorState, hrefs: string = "") { FormattedTextBoxComment.textBox = textBox; if ((hrefs || !lastState?.doc.eq(view.state.doc) || !lastState?.selection.eq(view.state.selection))) { - FormattedTextBoxComment.setupPreview(view, textBox, hrefs?.trim().split(" ")); + FormattedTextBoxComment.setupPreview(view, textBox, hrefs?.trim().split(" ").filter(h => h)); } } @@ -109,7 +109,7 @@ export class FormattedTextBoxComment { } // this checks if the selection is a hyperlink. If so, it displays the target doc's text for internal links, and the url of the target for external links. - if (state.selection.$from && hrefs) { + if (state.selection.$from && hrefs?.length) { const nbef = findStartOfMark(state.selection.$from, view, findLinkMark); const naft = findEndOfMark(state.selection.$from, view, findLinkMark) || nbef; nbef && naft && LinkDocPreview.SetLinkInfo({ -- cgit v1.2.3-70-g09d2