diff options
Diffstat (limited to 'src')
29 files changed, 92 insertions, 69 deletions
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index d6116fd23..2c7d15ae0 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -14,6 +14,7 @@ import { GetEffectiveAcl, SharingPermissions, distributeAcls, denormalizeEmail } interface DocComponentProps { Document: Doc; LayoutTemplate?: () => Opt<Doc>; + LayoutTemplateString?: string; } export function DocComponent<P extends DocComponentProps, T>(schemaCtor: (doc: Doc) => T) { class Component extends Touchable<P> { @@ -22,7 +23,7 @@ export function DocComponent<P extends DocComponentProps, T>(schemaCtor: (doc: D // This is the "The Document" -- it encapsulates, data, layout, and any templates @computed get rootDoc() { return Cast(this.props.Document.rootDocument, Doc, null) || this.props.Document; } // This is the rendering data of a document -- it may be "The Document", or it may be some template document that holds the rendering info - @computed get layoutDoc() { return Doc.Layout(this.props.Document, this.props.LayoutTemplate?.()); } + @computed get layoutDoc() { return this.props.LayoutTemplateString ? this.props.Document : Doc.Layout(this.props.Document, this.props.LayoutTemplate?.()); } // This is the data part of a document -- ie, the data that is constant across all views of the document @computed get dataDoc() { return this.props.Document[DataSym] as Doc; } diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index eb7df0248..24c6c6d71 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -271,7 +271,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { renderDepth={1} rootSelected={returnFalse} styleProvider={DefaultStyleProvider} - fitToBox={true} + fitDocToPanel={true} freezeDimensions={true} dontCenter={"y"} NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 128c3cb96..28373952a 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -30,13 +30,12 @@ export enum StyleProp { BorderRounding = "borderRounding", // border radius of the document view Color = "color", // foreground color of Document view items BackgroundColor = "backgroundColor", // background color of a document view - ItemBackgroundColor = "itemBackgroundColor", // background color for <item>Box inside DocumentView - WidgetColor = "widgetColor", // color to display UI widgets on a document view -- used for the sidebar divider dragger on a text note - HideLinkButton = "hideLinkButton", // hides the blue-dot link button. used when a document acts like a button - LinkSource = "linkSource", // source document of a link -- used by LinkAnchorBox - PointerEvents = "pointerEvents",// pointer events for DocumentView -- inherits pointer events if not specified - Decorations = "decorations", // additional decoration to display above a DocumentView -- currently only used to display a Lock for making things background - HeaderMargin = "headerMargin", // margin at top of documentview, typically for displaying a title -- doc contents will start below that + WidgetColor = "widgetColor", // color to display UI widgets on a document view -- used for the sidebar divider dragger on a text note + HideLinkButton = "hideLinkButton", // hides the blue-dot link button. used when a document acts like a button + LinkSource = "linkSource", // source document of a link -- used by LinkAnchorBox + PointerEvents = "pointerEvents", // pointer events for DocumentView -- inherits pointer events if not specified + Decorations = "decorations", // additional decoration to display above a DocumentView -- currently only used to display a Lock for making things background + HeaderMargin = "headerMargin", // margin at top of documentview, typically for displaying a title -- doc contents will start below that } function darkScheme() { return BoolCast(CurrentUserUtils.ActiveDashboard?.darkScheme); } @@ -61,22 +60,20 @@ function toggleBackground(doc: Doc) { } export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentViewProps { - if (toBeDetermined.ContentScaling) { - return true; - } - return false; + return (toBeDetermined?.ContentScaling) ? true : false; } // // a preliminary implementation of a dash style sheet for setting rendering properties of documents nested within a Tab // export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string): any { + const docProps = testDocProps(props); switch (property.split(":")[0]) { case StyleProp.DocContents: return undefined; case StyleProp.WidgetColor: return darkScheme() ? "lightgrey" : "dimgrey"; case StyleProp.Opacity: return Cast(doc?._opacity, "number", Cast(doc?.opacity, "number", null)); case StyleProp.Color: - const backColor = props?.styleProvider?.(doc, props, StyleProp.ItemBackgroundColor) || "black"; + const backColor = props?.styleProvider?.(doc, props, StyleProp.BackgroundColor) || "black"; const col = Color(backColor).rgb(); const colsum = (col.red() + col.green() + col.blue()); if (colsum / col.alpha() > 600 || col.alpha() < 0.25) return "black"; @@ -84,17 +81,17 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | case StyleProp.Hidden: return BoolCast(doc?._hidden, BoolCast(doc?.hidden)); case StyleProp.BorderRounding: return !doc ? undefined : StrCast(doc._borderRounding, StrCast(doc.borderRounding)); case StyleProp.HeaderMargin: return ([CollectionViewType.Stacking, CollectionViewType.Masonry].includes(doc?._viewType as any) || doc?.type === DocumentType.RTF) && doc?._showTitle && !doc?._showTitleHover ? 15 : 0; - case StyleProp.ItemBackgroundColor: - const docColor: Opt<string> = StrCast(doc?._backgroundColor, StrCast(doc?.backgroundColor)); - if (docColor) return docColor; - if (MainView.Instance.LastButton === doc) return darkScheme() ? "dimgrey" : "lightgrey"; - switch (doc?.type) { - case DocumentType.FONTICON: return "black"; - case DocumentType.LINK: return "lightblue"; - } case StyleProp.BackgroundColor: { if (Doc.UserDoc().renderStyle === "comic") return "transparent"; let docColor: Opt<string> = StrCast(doc?._backgroundColor, StrCast(doc?.backgroundColor)); + if (!docProps) { + if (MainView.Instance.LastButton === doc) return darkScheme() ? "dimgrey" : "lightgrey"; + switch (doc?.type) { + case DocumentType.FONTICON: return docColor || "black"; + case DocumentType.LINK: return docColor || "lightblue"; + default: undefined; + } + } switch (doc?.type) { case DocumentType.PRESELEMENT: docColor = docColor || (darkScheme() ? "" : ""); break; case DocumentType.PRES: docColor = docColor || (darkScheme() ? "#3e3e3e" : "white"); break; @@ -103,7 +100,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | case DocumentType.LABEL: case DocumentType.INK: docColor = undefined; break; case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? "#2d2d2d" : "lightgray"); break; - case DocumentType.LINK: + case DocumentType.LINK: return "transparent"; case DocumentType.COL: docColor = docColor || (Doc.IsSystem(doc) ? (darkScheme() ? "rgb(62,62,62)" : "lightgrey") : @@ -129,7 +126,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | `${darkScheme() ? "rgb(30, 32, 31) " : "#9c9396 "} ${StrCast(doc.boxShadow, "0.2vw 0.2vw 0.8vw")}`; default: return doc.z ? `#9c9396 ${StrCast(doc?.boxShadow, "10px 10px 0.9vw")}` : // if it's a floating doc, give it a big shadow - backgroundHalo(doc) && doc.type !== DocumentType.INK ? (`${props?.styleProvider?.(doc, props, StyleProp.BackgroundColor)} ${StrCast(doc.boxShadow, `0vw 0vw ${(isBackground() ? 100 : 50) / ((testDocProps(props) && props?.ContentScaling()) || 1)}px`)}`) : // if it's just in a cluster, make the shadown roughly match the cluster border extent + backgroundHalo(doc) && doc.type !== DocumentType.INK ? (`${props?.styleProvider?.(doc, props, StyleProp.BackgroundColor)} ${StrCast(doc.boxShadow, `0vw 0vw ${(isBackground() ? 100 : 50) / ((docProps && (props as DocumentViewProps).ContentScaling()) || 1)}px`)}`) : // if it's just in a cluster, make the shadown roughly match the cluster border extent isBackground() ? undefined : // if it's a background & has a cluster color, make the shadow spread really big StrCast(doc.boxShadow, ""); } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index c64048345..973cd5d3c 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -400,7 +400,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { <ContentFittingDocumentView Document={this.previewDocument} DataDoc={undefined} - fitToBox={true} + fitDocToPanel={true} freezeDimensions={true} dontCenter={"y"} focus={emptyFunction} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 510e47b20..f64186728 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -214,7 +214,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument, NativeWidth={this.props.childIgnoreNativeSize ? returnZero : undefined} // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox NativeHeight={this.props.childIgnoreNativeSize ? returnZero : undefined} dontCenter={this.props.childIgnoreNativeSize ? "xy" : undefined} - fitToBox={false} + fitDocToPanel={false} dontRegisterView={dataDoc ? true : BoolCast(this.layoutDoc.dontRegisterChildViews, this.props.dontRegisterView)} rootSelected={this.rootSelected} dropAction={StrCast(this.layoutDoc.childDropAction) as dropActionType} diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx index c7a826669..cc625e12e 100644 --- a/src/client/views/collections/CollectionTimeView.tsx +++ b/src/client/views/collections/CollectionTimeView.tsx @@ -86,7 +86,7 @@ export class CollectionTimeView extends CollectionSubView(doc => doc) { @computed get contents() { return <div className="collectionTimeView-innards" key="timeline" style={{ width: "100%", pointerEvents: this.props.active() ? undefined : "none" }} onPointerDown={this.contentsDown}> <CollectionFreeFormView {...this.props} - fitToBox={true} + fitContentsToDoc={true} childClickScript={this._childClickedScript} viewDefDivClick={this._viewDefDivClick} childFreezeDimensions={true} diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 24a67faaf..58adff6b9 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -570,7 +570,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { ref="overlay"><ContentFittingDocumentView Document={this._showDoc} DataDoc={this._showDataDoc} - fitToBox={true} + fitDocToPanel={true} freezeDimensions={true} focus={emptyFunction} renderDepth={this.props.renderDepth} diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index fe929abc5..fc2f7c522 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -365,7 +365,7 @@ export class TabDocView extends React.Component<TabDocViewProps> { docFilters={CollectionDockingView.Instance.docFilters} docRangeFilters={CollectionDockingView.Instance.docRangeFilters} searchFilterDocs={CollectionDockingView.Instance.searchFilterDocs} - fitToBox={true} + fitContentsToDoc={true} /> <div className="miniOverlay" onPointerDown={this.miniDown} > <div className="miniThumb" style={{ width: `${miniWidth}% `, height: `${miniHeight}% `, left: `${miniLeft}% `, top: `${miniTop}% `, }} /> diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 11ff4ca3b..c03041214 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -617,7 +617,7 @@ export class TreeView extends React.Component<TreeViewProps> { PanelHeight={panelHeight} NativeWidth={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} NativeHeight={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined} - fitToBox={!asText && this.isCollectionDoc !== undefined} + fitDocToPanel={!asText && this.isCollectionDoc !== undefined} hideTitle={asText} LayoutTemplateString={asText ? FormattedTextBox.LayoutString("text") : undefined} focus={asText ? this.refocus : returnFalse} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 3f7eb24f8..403c20ba2 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -76,6 +76,7 @@ export type collectionFreeformViewProps = { forceScaling?: boolean; // whether to force scaling of content (needed by ImageBox) viewDefDivClick?: ScriptField; childPointerEvents?: boolean; + fitContentsToDoc?: boolean; parentActive: (outsideReaction: boolean) => boolean; scaleField?: string; noOverlay?: boolean; // used to suppress docs in the overlay (z) layer (ie, for minimap since overlay doesn't scale) @@ -116,7 +117,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P @computed get backgroundActive() { return this.props.layerProvider?.(this.layoutDoc) === false && (this.props.ContainingCollectionView?.active() || this.props.active()); } @computed get fitToContentScaling() { return this.fitToContent ? NumCast(this.layoutDoc.fitToContentScaling, 1) : 1; } - @computed get fitToContent() { return (this.props.fitToBox || this.Document._fitToBox) && !this.isAnnotationOverlay; } + @computed get fitToContent() { return (this.props.fitContentsToDoc || this.Document._fitToBox) && !this.isAnnotationOverlay; } @computed get parentScaling() { return 1; } @computed get contentBounds() { return aggregateBounds(this._layoutElements.filter(e => e.bounds && !e.bounds.z).map(e => e.bounds!), NumCast(this.layoutDoc._xPadding, 10), NumCast(this.layoutDoc._yPadding, 10)); } @computed get nativeWidth() { return this.fitToContent ? 0 : returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.Document)); } @@ -998,7 +999,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P pinToPres: this.props.pinToPres, whenActiveChanged: this.props.whenActiveChanged, parentActive: this.parentActive, - fitToBox: false, + fitDocToPanel: false, DataDoc: childData, Document: childLayout, ContainingCollectionView: this.props.CollectionView, @@ -1175,7 +1176,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P (this.props.viewDefDivClick || (engine === "pass" && !this.props.isSelected(true))) ? "none" : undefined} jitterRotation={NumCast(this.props.Document._jitterRotation) || ((Doc.UserDoc().renderStyle === "comic" ? 10 : 0))} //fitToBox={this.props.fitToBox || BoolCast(this.props.freezeChildDimensions)} // bcz: check this - fitToBox={BoolCast(this.props.childFreezeDimensions)} // bcz: check this + fitDocToPanel={BoolCast(this.props.childFreezeDimensions)} // bcz: check this freezeDimensions={BoolCast(this.props.childFreezeDimensions)} />, bounds: this.childDataProvider(entry[1].pair.layout, entry[1].replica) diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 1a4eb8b7b..36ed72596 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -169,7 +169,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { PanelHeight={height} ContentScaling={returnOne} freezeDimensions={true} - fitToBox={true} + fitDocToPanel={true} ScreenToLocalTransform={dxf} onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index d4913a5ed..6ed7d1dd3 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -223,7 +223,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - fitToBox={false} + fitDocToPanel={false} rootSelected={this.rootSelected} dropAction={StrCast(this.props.Document.childDropAction) as dropActionType} onClick={this.onChildClickHandler} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index 9039090d1..a4a569cc9 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -223,7 +223,7 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - fitToBox={false} + fitDocToPanel={false} rootSelected={this.rootSelected} dropAction={StrCast(this.props.Document.childDropAction) as dropActionType} onClick={this.onChildClickHandler} diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 3f473460f..6eb8dc8c9 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -27,7 +27,7 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { highlight?: boolean; jitterRotation: number; dataTransition?: string; - fitToBox?: boolean; + fitDocToPanel?: boolean; replica: string; } @@ -139,7 +139,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF this.props.Document.x = NumCast(this.props.Document.x) + x; this.props.Document.y = NumCast(this.props.Document.y) + y; } - contentScaling = () => this.nativeWidth > 0 && !this.props.fitToBox && !this.freezeDimensions ? this.width / this.nativeWidth : 1; + contentScaling = () => this.nativeWidth > 0 && !this.props.fitDocToPanel && !this.freezeDimensions ? this.width / this.nativeWidth : 1; panelWidth = () => (this.sizeProvider?.width || this.props.PanelWidth?.()); panelHeight = () => (this.sizeProvider?.height || this.props.PanelHeight?.()); getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y).scale(1 / this.contentScaling()); @@ -190,7 +190,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF </svg> </div>} - {this.props.fitToBox ? + {this.props.fitDocToPanel ? <ContentFittingDocumentView {...divProps} ref={action((r: ContentFittingDocumentView | null) => this._contentView = r)} /> : <DocumentView {...divProps} ContentScaling={this.contentScaling} />} </div>; diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 0ba53dee6..1b7084ffa 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -12,7 +12,7 @@ import "./ComparisonBox.scss"; import React = require("react"); import { ContentFittingDocumentView } from './ContentFittingDocumentView'; import { undoBatch } from '../../util/UndoManager'; -import { setupMoveUpEvents, emptyFunction } from '../../../Utils'; +import { setupMoveUpEvents, emptyFunction, returnOne } from '../../../Utils'; import { SnappingManager } from '../../util/SnappingManager'; import { DocumentViewProps } from './DocumentView'; @@ -74,7 +74,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C render() { const clipWidth = NumCast(this.layoutDoc._clipWidth) + "%"; - const childProps: DocumentViewProps = { ...this.props, pointerEvents: "none", parentActive: this.props.active }; const clearButton = (which: string) => { return <div className={`clear-button ${which}`} onPointerDown={e => e.stopPropagation()} // prevent triggering slider movement in registerSliding @@ -85,7 +84,11 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C const displayDoc = (which: string) => { const whichDoc = Cast(this.dataDoc[`compareBox-${which}`], Doc, null); return whichDoc ? <> - <ContentFittingDocumentView {...childProps} Document={whichDoc} /> + <ContentFittingDocumentView {...this.props} + ContentScaling={returnOne} + pointerEvents={"none"} + parentActive={this.props.active} + Document={whichDoc} /> {clearButton(which)} </> : // placeholder image if doc is missing <div className="placeholder"> diff --git a/src/client/views/nodes/DocHolderBox.tsx b/src/client/views/nodes/DocHolderBox.tsx index 1bc7bc8d7..5aab0a4c8 100644 --- a/src/client/views/nodes/DocHolderBox.tsx +++ b/src/client/views/nodes/DocHolderBox.tsx @@ -124,7 +124,7 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent<FieldViewProps, Do searchFilterDocs={this.props.searchFilterDocs} ContainingCollectionView={this as any} // bcz: hack! need to pass a prop that can be used to select the container (ie, 'this') when the up selector in document decorations is clicked. currently, the up selector allows only a containing collection to be selected ContainingCollectionDoc={undefined} - fitToBox={true} + fitDocToPanel={true} styleProvider={this.props.styleProvider} LayoutTemplateString={layoutTemplate} LayoutTemplate={this.layoutTemplateDoc} @@ -152,7 +152,7 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent<FieldViewProps, Do searchFilterDocs={this.props.searchFilterDocs} ContainingCollectionView={this as any} // bcz: hack! need to pass a prop that can be used to select the container (ie, 'this') when the up selector in document decorations is clicked. currently, the up selector allows only a containing collection to be selected ContainingCollectionDoc={undefined} - fitToBox={true} + fitDocToPanel={true} styleProvider={this.props.styleProvider} ignoreAutoHeight={true} LayoutTemplateString={layoutTemplate} diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 98a1b026d..2c3e9bc88 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -138,8 +138,25 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo } CreateBindings(onClick: Opt<ScriptField>, onInput: Opt<ScriptField>): JsxBindings { + const docOnlyProps = [ // these are the properties in DocumentViewProps that need to be removed to pass on only DocumentSharedViewProps to the FieldViews + "freezeDimensions", + "hideTitle", + "fitDocToPanel", + "treeViewDoc", + "dragDivName", + "contentPointerEvents", + "radialMenu", + "LayoutTemplateString", + "LayoutTemplate", + "ContentScaling", + "contentFittingScaling", + "contextMenuItems", + "onDoubleClick", + "onPointerDown", + "onPointerUp", + ]; const list = { - ...OmitKeys(this.props, ['NativeWidth', 'NativeHeight'], "", (obj: any) => obj.active = this.props.parentActive).omit, + ...OmitKeys(this.props, [...docOnlyProps, 'NativeWidth', 'NativeHeight'], "", (obj: any) => obj.active = this.props.parentActive).omit, RootDoc: Cast(this.layoutDoc?.rootDocument, Doc, null) || this.layoutDoc, Document: this.layoutDoc, DataDoc: this.dataDoc, diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 10b406fd4..f766976d0 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -42,7 +42,7 @@ import { RadialMenu } from './RadialMenu'; import { TaskCompletionBox } from './TaskCompletedBox'; import React = require("react"); import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; -import { StyleProp, StyleLayers } from "../StyleProvider"; +import { StyleProp, StyleLayers, testDocProps } from "../StyleProvider"; import { FieldViewProps } from "./FieldView"; export type DocAfterFocusFunc = (notFocused: boolean) => boolean; @@ -78,7 +78,6 @@ export interface DocumentViewSharedProps { bringToFront: (doc: Doc, sendToBack?: boolean) => void; onClick?: () => ScriptField; dropAction?: dropActionType; - LayoutTemplateString?: string; dontRegisterView?: boolean; ignoreAutoHeight?: boolean; pointerEvents?: string; @@ -88,14 +87,15 @@ export interface DocumentViewProps extends DocumentViewSharedProps { // properties specific to DocumentViews but not to FieldView freezeDimensions?: boolean; hideTitle?: boolean; // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings - fitToBox?: boolean; + fitDocToPanel?: boolean; treeViewDoc?: Doc; dragDivName?: string; - contentPointerEvents?: string; + contentPointerEvents?: string; // pointer events allowed for content of a document view. eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents radialMenu?: String[]; + LayoutTemplateString?: string; + LayoutTemplate?: () => Opt<Doc>; ContentScaling: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal contentFittingScaling?: () => number;// scaling done outside the document view (eg in ContentFittingDocumentView) to fit contents into panel (needed for ScreenToLocal but not needed by DocumentView to scale its content) - LayoutTemplate?: () => Opt<Doc>; contextMenuItems?: () => { script: ScriptField, label: string }[]; onDoubleClick?: () => ScriptField; onPointerDown?: () => ScriptField; @@ -934,7 +934,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu makeLink={this.makeLink} focus={this.props.focus} dontRegisterView={this.props.dontRegisterView} - fitToBox={this.props.fitToBox} + fitDocToPanel={this.props.fitDocToPanel} addDocument={this.props.addDocument} removeDocument={this.props.removeDocument} moveDocument={this.props.moveDocument} @@ -974,11 +974,16 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu anchorPanelWidth = () => this.props.PanelWidth() || 1; anchorPanelHeight = () => this.props.PanelHeight() || 1; anchorStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps | FieldViewProps>, property: string): any => { - switch (property.split(":")[0]) { - case StyleProp.BackgroundColor: return "transparent"; - case StyleProp.HideLinkButton: return true; - case StyleProp.PointerEvents: return "none"; - case StyleProp.LinkSource: return this.props.Document; + if (testDocProps(props)) { + switch (property.split(":")[0]) { + case StyleProp.BackgroundColor: return "transparent"; // background of linkanchor documentView is transparent since it covers the whole document + case StyleProp.HideLinkButton: return true; // don't want linkAnchor documentview to show its own link button + case StyleProp.PointerEvents: return "none"; // don't want linkAnchor documentView to handle events (since it covers the whole document). However, the linkAnchorBox itself is set to pointerEvent all + } + } else { + switch (property.split(":")[0]) { + case StyleProp.LinkSource: return this.props.Document; // pass the LinkSource to the LinkAnchorBox + } } return this.props.styleProvider?.(doc, props, property); } diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 057c7afae..fd2193bd8 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -16,7 +16,6 @@ import { VideoBox } from "./VideoBox"; export interface FieldViewProps extends DocumentViewSharedProps { // FieldView specific props that are not part of DocumentView props fieldKey: string; - fitToBox?: boolean; overflow?: boolean; // bcz: would like to think this can be avoided -- need to look at further active: (outsideReaction?: boolean) => boolean; select: (isCtrlPressed: boolean) => void; diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx index ffe1684d4..730ae8f10 100644 --- a/src/client/views/nodes/FilterBox.tsx +++ b/src/client/views/nodes/FilterBox.tsx @@ -204,7 +204,6 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc parentActive={returnFalse} whenActiveChanged={returnFalse} treeViewHideTitle={true} - ContentScaling={returnOne} focus={returnFalse} treeViewHideHeaderFields={true} onCheckedClick={this.scriptField} diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx index b979c9017..121b9f26c 100644 --- a/src/client/views/nodes/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox.tsx @@ -42,7 +42,7 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>( render() { const label = StrCast(this.rootDoc.label, StrCast(this.rootDoc.title)); const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); - const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.ItemBackgroundColor); + const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); const shape = StrCast(this.layoutDoc.iconShape, label ? "round" : "circle"); const icon = StrCast(this.dataDoc.icon, "user") as any; const presSize = shape === 'round' ? 25 : 30; diff --git a/src/client/views/nodes/LinkAnchorBox.scss b/src/client/views/nodes/LinkAnchorBox.scss index 62ee9513c..caff369df 100644 --- a/src/client/views/nodes/LinkAnchorBox.scss +++ b/src/client/views/nodes/LinkAnchorBox.scss @@ -23,7 +23,6 @@ padding-top: 1px; } .linkAnchorBox-button { - pointer-events: all; position: relative; display: inline-block; } diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx index d0048c67b..f035fba33 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.ItemBackgroundColor); + const background = this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.BackgroundColor); const anchor = this.fieldKey === "anchor1" ? "anchor2" : "anchor1"; const anchorScale = !this.dataDoc[this.fieldKey + "-useLinkSmallAnchor"] && (x === 0 || x === 100 || y === 0 || y === 100) ? 1 : .25; @@ -142,7 +142,8 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps, LinkAnch Location: [e.clientX, e.clientY + 20] })} onPointerDown={this.onPointerDown} onClick={this.onClick} title={targetTitle} onContextMenu={this.specificContextMenu} - ref={this._ref} style={{ + ref={this._ref} + style={{ background, left: `calc(${x}% - ${small ? 2.5 : 7.5}px)`, top: `calc(${y}% - ${small ? 2.5 : 7.5}px)`, diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index e0c8c032f..508d85e14 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -94,7 +94,7 @@ export class LinkDocPreview extends React.Component<Props> { : <ContentFittingDocumentView Document={this._targetDoc} - fitToBox={true} + fitDocToPanel={true} moveDocument={returnFalse} rootSelected={returnFalse} ScreenToLocalTransform={Transform.Identity} @@ -125,6 +125,7 @@ export class LinkDocPreview extends React.Component<Props> { position: "absolute", left: this.props.location[0], top: this.props.location[1], width: this.width() + 16, height: this.height() + 16, zIndex: 1000, + backgroundColor: "lightblue", border: "8px solid white", borderRadius: "7px", boxShadow: "3px 3px 1.5px grey", borderBottom: "8px solid white", borderRight: "8px solid white" diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx index 450f0b6bc..04e94391f 100644 --- a/src/client/views/nodes/formattedText/DashDocView.tsx +++ b/src/client/views/nodes/formattedText/DashDocView.tsx @@ -228,7 +228,7 @@ export class DashDocView extends React.Component<IDashDocView> { <DocumentView Document={finalLayout} DataDoc={resolvedDataDoc} - fitToBox={BoolCast(dashDoc._fitToBox)} + fitDocToPanel={BoolCast(dashDoc._fitToBox)} addDocument={returnFalse} rootSelected={this._textBox.props.isSelected} removeDocument={this.removeDoc} diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index feb5e63b2..c6036330d 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1576,7 +1576,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const nh = this.layoutDoc.isTemplateForField ? 0 : NumCast(this.layoutDoc._nativeHeight, 0); const dh = NumCast(this.rootDoc._height, 0); const newHeight = Math.max(10, (nh ? dh / nh * scrollHeight : scrollHeight) + this.titleHeight); - if (!this.props.LayoutTemplateString && this.rootDoc !== this.layoutDoc.doc && !this.layoutDoc.resolvedDataDoc) { + if (this.rootDoc !== this.layoutDoc.doc && !this.layoutDoc.resolvedDataDoc) { // if we have a template that hasn't been resolved yet, we can't set the height or we'd be setting it on the unresolved template. So set a timeout and hope its arrived... console.log("Delayed height adjustment..."); setTimeout(() => { @@ -1624,7 +1624,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp scaleField: this.annotationKey + "-scale", isAnnotationOverlay: true, fieldKey: this.annotationKey, - fitToBox: fitToBox, + fitContentsToDoc: fitToBox, select: emptyFunction, active: this.annotationsActive, ContentScaling: this.sidebarContentScaling, diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 1d7b7ec91..1ee217d03 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -297,7 +297,7 @@ export class FormattedTextBoxComment { <div className="FormattedTextBoxComment-preview-wrapper"> <ContentFittingDocumentView Document={target} - fitToBox={true} + fitDocToPanel={true} moveDocument={returnFalse} rootSelected={returnFalse} ScreenToLocalTransform={Transform.Identity} diff --git a/src/client/views/nodes/formattedText/RichTextSchema.tsx b/src/client/views/nodes/formattedText/RichTextSchema.tsx index e94829769..683fa1029 100644 --- a/src/client/views/nodes/formattedText/RichTextSchema.tsx +++ b/src/client/views/nodes/formattedText/RichTextSchema.tsx @@ -137,7 +137,7 @@ export class DashDocView { ReactDOM.render(<DocumentView Document={finalLayout} DataDoc={resolvedDataDoc} - fitToBox={BoolCast(dashDoc._fitToBox)} + fitDocToPanel={BoolCast(dashDoc._fitToBox)} addDocument={returnFalse} rootSelected={this._textBox.props.isSelected} removeDocument={removeDoc} diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 8615ba81d..6d51df01d 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -92,7 +92,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc <ContentFittingDocumentView Document={this.targetDoc} DataDoc={this.targetDoc[DataSym] !== this.targetDoc && this.targetDoc[DataSym]} - fitToBox={true} + fitDocToPanel={true} styleProvider={this.styleProvider} rootSelected={returnTrue} addDocument={returnFalse} |