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