diff options
Diffstat (limited to 'src/client/views/nodes')
| -rw-r--r-- | src/client/views/nodes/ContentFittingDocumentView.tsx | 23 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 17 | ||||
| -rw-r--r-- | src/client/views/nodes/FontIconBox.tsx | 44 | ||||
| -rw-r--r-- | src/client/views/nodes/LinkAnchorBox.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/formattedText/FormattedTextBox.tsx | 4 |
5 files changed, 32 insertions, 58 deletions
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index ae0275c3d..e632f0e19 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -1,15 +1,15 @@ import React = require("react"); import { computed, observable, action } from "mobx"; import { observer } from "mobx-react"; -import { Doc, HeightSym, WidthSym } from "../../../fields/Doc"; -import { Cast, StrCast } from "../../../fields/Types"; +import { Doc } from "../../../fields/Doc"; import { TraceMobx } from "../../../fields/util"; import { emptyFunction, OmitKeys, returnVal, returnOne } from "../../../Utils"; import { DocumentView, DocumentViewProps } from "../nodes/DocumentView"; import "./ContentFittingDocumentView.scss"; +import { StyleProp } from "../StyleProvider"; interface ContentFittingDocumentViewProps { - dontCenter?: string; // "x" ,"y", "xy" + dontCenter?: "x" | "y" | "xy"; } @observer @@ -17,14 +17,9 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive public ContentRef = React.createRef<HTMLDivElement>(); @observable public docView: DocumentView | undefined | null; - @computed get layoutDoc() { - return this.props.LayoutTemplate?.() || - (this.props.layoutKey && Doc.Layout(this.props.Document, Cast(this.props.Document[this.props.layoutKey], Doc, null))) || - Doc.Layout(this.props.Document); - } - @computed get freezeDimensions() { return this.props.freezeDimensions; } - @computed get nativeWidth() { return !this.layoutDoc._fitWidth && returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, this.freezeDimensions)); } - @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || 0); } + @computed get layoutDoc() { return Doc.Layout(this.props.Document, this.props.LayoutTemplate?.()); } + @computed get nativeWidth() { return !this.layoutDoc._fitWidth && returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions)); } + @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions) || 0); } @computed get nativeScaling() { if (!this.nativeWidth || !this.nativeHeight) return 1; const wscale = this.props.PanelWidth() / this.nativeWidth; @@ -38,7 +33,7 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp @computed get panelWidth() { return this.nativeWidth ? this.nativeWidth * this.nativeScaling : this.props.PanelWidth(); } @computed get panelHeight() { if (this.nativeHeight) { - if (this.props.Document._fitWidth) return Math.min(this.props.PanelHeight(), this.panelWidth / Doc.NativeAspect(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || 1); + if (this.props.Document._fitWidth) return Math.min(this.props.PanelHeight(), this.panelWidth / Doc.NativeAspect(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions) || 1); return Math.min(this.props.PanelHeight(), this.nativeHeight * this.nativeScaling); } return this.props.PanelHeight(); @@ -49,8 +44,6 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp private get centeringOffset() { return this.nativeWidth && !this.props.Document._fitWidth ? (this.props.PanelWidth() - this.nativeWidth * this.nativeScaling) / 2 : 0; } private get centeringYOffset() { return this.nativeWidth && Math.abs(this.centeringOffset) < 0.001 && this.nativeHeight ? (this.props.PanelHeight() - this.nativeHeight * this.nativeScaling) / 2 : 0; } - @computed get borderRounding() { return StrCast(this.props.Document?.borderRounding); } - PanelWidth = () => this.panelWidth; PanelHeight = () => this.panelHeight; @@ -61,7 +54,7 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp <div className="contentFittingDocumentView-previewDoc" ref={this.ContentRef} style={{ transform: `translate(${this.props.dontCenter?.includes("x") ? 0 : this.centeringOffset}px, ${this.props.dontCenter?.includes("y") ? 0 : this.centeringYOffset}px)`, - borderRadius: this.borderRounding, + borderRadius: this.props.styleProvider?.(this.props.Document, this.props, StyleProp.PointerEvents), height: Math.abs(this.centeringYOffset) > 0.001 && this.nativeWidth ? `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(), width: Math.abs(this.centeringOffset) > 0.001 ? `${100 * (this.props.PanelWidth() - this.centeringOffset * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth(), }}> diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 017c3cdea..65779088f 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -86,7 +86,6 @@ export interface DocumentViewSharedProps { } export interface DocumentViewProps extends DocumentViewSharedProps { // properties specific to DocumentViews but not to FieldView - layoutKey?: string; freezeDimensions?: boolean; hideTitle?: boolean; fitToBox?: boolean; @@ -124,7 +123,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu private get active() { return this.isSelected(true) || this.props.parentActive(true); } public get displayName() { return "DocumentView(" + this.props.Document.title + ")"; } // this makes mobx trace() statements more descriptive public get ContentDiv() { return this._mainCont.current; } - public get LayoutFieldKey() { return this.props.layoutKey || Doc.LayoutFieldKey(this.layoutDoc); } + public get LayoutFieldKey() { return Doc.LayoutFieldKey(this.layoutDoc); } @computed get ShowTitle() { return StrCast(this.layoutDoc._showTitle, !Doc.IsSystem(this.layoutDoc) && this.rootDoc.type === DocumentType.RTF && !this.rootDoc.presentationTargetDoc ? @@ -892,11 +891,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu } @computed get finalLayoutKey() { - if (typeof this.props.layoutKey === "string") { - return this.props.layoutKey; - } - const fallback = Cast(this.props.Document.layoutKey, "string"); - return typeof fallback === "string" ? fallback : "layout"; + return StrCast(this.props.Document.layoutKey, "layout"); } rootSelected = (outsideReaction?: boolean) => { return this.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false; @@ -980,11 +975,11 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu anchorStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any => { switch (property.split(":")[0]) { case StyleProp.BackgroundColor: return "transparent"; - case StyleProp.LinkBackgroundColor: return this.props.styleProvider?.(doc, props, StyleProp.BackgroundColor); case StyleProp.HideLinkButton: return true; case StyleProp.PointerEvents: return "none"; case StyleProp.LinkSource: return this.props.Document; } + return this.props.styleProvider?.(doc, props, property); } @computed get directLinks() { TraceMobx(); return LinkManager.Instance.getAllDirectLinks(this.rootDoc); } @@ -1012,6 +1007,11 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu LayoutTemplateString={LinkAnchorBox.LayoutString(`anchor${Doc.LinkEndpoint(d, this.props.Document)}`)} /> </div >); } + captionStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string) => { + if (property === StyleProp.Color) return "white"; + if (property === StyleProp.BackgroundColor) return "rgba(0,0,0 ,0.4)"; + return this.props?.styleProvider?.(doc, props, property); + } @computed get innards() { TraceMobx(); const showTitleHover = StrCast(this.layoutDoc._showTitleHover); @@ -1022,6 +1022,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu yMargin={10} xMargin={10} hideOnLeave={true} + styleProvider={this.captionStyleProvider} dontRegisterView={true} LayoutTemplateString={`<FormattedTextBox {...props} fieldKey={'${showCaption}'}/>`} ContentScaling={returnOne} diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx index 000c72e94..b979c9017 100644 --- a/src/client/views/nodes/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox.tsx @@ -1,20 +1,19 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Tooltip } from '@material-ui/core'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { AclPrivate, Doc, DocListCast } from '../../../fields/Doc'; import { createSchema, makeInterface } from '../../../fields/Schema'; -import { DocComponent } from '../DocComponent'; -import './FontIconBox.scss'; -import { FieldView, FieldViewProps } from './FieldView'; -import { StrCast, Cast, ScriptCast } from '../../../fields/Types'; -import { Utils, setupMoveUpEvents, returnFalse, emptyFunction } from "../../../Utils"; -import { runInAction, observable, reaction, IReactionDisposer } from 'mobx'; -import { Doc, DocListCast, AclPrivate } from '../../../fields/Doc'; -import { ContextMenu } from '../ContextMenu'; import { ScriptField } from '../../../fields/ScriptField'; -import { Tooltip } from '@material-ui/core'; -import { DragManager } from '../../util/DragManager'; +import { Cast, StrCast } from '../../../fields/Types'; import { GetEffectiveAcl } from '../../../fields/util'; +import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../../Utils"; +import { DragManager } from '../../util/DragManager'; +import { ContextMenu } from '../ContextMenu'; +import { DocComponent } from '../DocComponent'; import { StyleProp } from '../StyleProvider'; +import { FieldView, FieldViewProps } from './FieldView'; +import './FontIconBox.scss'; const FontIconSchema = createSchema({ icon: "string", }); @@ -24,21 +23,6 @@ const FontIconDocument = makeInterface(FontIconSchema); @observer export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(FontIconDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FontIconBox, fieldKey); } - @observable _foregroundColor = "white"; - _ref: React.RefObject<HTMLButtonElement> = React.createRef(); - _backgroundReaction: IReactionDisposer | undefined; - componentDidMount() { - this._backgroundReaction = reaction(() => this.layoutDoc.backgroundColor, - () => { - if (this._ref && this._ref.current) { - const col = Utils.fromRGBAstr(getComputedStyle(this._ref.current).backgroundColor); - const colsum = (col.r + col.g + col.b); - if (colsum / col.a > 600 || col.a < 0.25) runInAction(() => this._foregroundColor = "black"); - else if (colsum / col.a <= 600 || col.a >= .25) runInAction(() => this._foregroundColor = "white"); - } - }, { fireImmediately: true }); - } - showTemplate = (): void => { const dragFactory = Cast(this.layoutDoc.dragFactory, Doc, null); dragFactory && this.props.addDocTab(dragFactory, "add:right"); @@ -55,20 +39,16 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>( } } - componentWillUnmount() { - this._backgroundReaction?.(); - } - render() { const label = StrCast(this.rootDoc.label, StrCast(this.rootDoc.title)); - const color = StrCast(this.layoutDoc.color, this._foregroundColor); - const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); + const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); + const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.ItemBackgroundColor); const shape = StrCast(this.layoutDoc.iconShape, label ? "round" : "circle"); const icon = StrCast(this.dataDoc.icon, "user") as any; const presSize = shape === 'round' ? 25 : 30; const presTrailsIcon = <img src={`/assets/${"presTrails.png"}`} style={{ width: presSize, height: presSize, filter: `invert(${color === "white" ? "100%" : "0%"})`, marginBottom: "5px" }} />; - const button = <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu} + const button = <button className={`menuButton-${shape}`} onContextMenu={this.specificContextMenu} style={{ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, backgroundColor: this.layoutDoc.iconShape === "square" ? backgroundColor : "", diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx index f4528fbe0..abefc6561 100644 --- a/src/client/views/nodes/LinkAnchorBox.tsx +++ b/src/client/views/nodes/LinkAnchorBox.tsx @@ -119,7 +119,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps, LinkAnch const x = NumCast(this.rootDoc[this.fieldKey + "_x"], 100); const y = NumCast(this.rootDoc[this.fieldKey + "_y"], 100); const linkSource = this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.LinkSource); - const background = this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.LinkBackgroundColor); + const background = this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.ItemBackgroundColor); const anchor = this.fieldKey === "anchor1" ? "anchor2" : "anchor1"; const anchorScale = !this.dataDoc[this.fieldKey + "-useLinkSmallAnchor"] && (x === 0 || x === 100 || y === 0 || y === 100) ? 1 : .25; diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 0392566c0..4be49ca47 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1676,8 +1676,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp overflow: this.layoutDoc._autoHeight ? "hidden" : undefined, width: "100%", height: this.props.height || (this.layoutDoc._autoHeight && this.props.renderDepth ? "max-content" : undefined), - background: Doc.UserDoc().renderStyle === "comic" ? "transparent" : this.props.background ? this.props.background : StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], this.props.hideOnLeave ? "rgba(0,0,0 ,0.4)" : ""), - color: this.props.color ? this.props.color : StrCast(this.layoutDoc[this.props.fieldKey + "-color"], this.props.hideOnLeave ? "white" : "inherit"), + 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)), pointerEvents: interactive ? undefined : "none", fontSize: this.props.fontSize || Cast(this.layoutDoc._fontSize, "string", null), fontWeight: Cast(this.layoutDoc._fontWeight, "number", null), |