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') 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