From 664a8a3968ce1d3a4fe549613aae4e509c2409ec Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 17 Mar 2021 12:25:01 -0400 Subject: added autoHeight proeprtyButton. cleaned up stackingViewFieldColumn a bit --- src/client/views/InkingStroke.tsx | 2 +- src/client/views/MainView.tsx | 2 +- src/client/views/PropertiesButtons.tsx | 5 + src/client/views/TemplateMenu.tsx | 3 +- .../collections/CollectionMasonryViewFieldRow.tsx | 26 +-- .../views/collections/CollectionStackingView.tsx | 20 +- .../CollectionStackingViewFieldColumn.tsx | 223 ++++++++------------- src/client/views/nodes/WebBox.tsx | 4 - .../views/nodes/formattedText/FormattedTextBox.tsx | 7 +- src/client/views/pdf/PDFViewer.tsx | 3 +- src/fields/SchemaHeaderField.ts | 1 + 11 files changed, 130 insertions(+), 166 deletions(-) (limited to 'src') diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 34cdb50e3..966abc0e7 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -39,7 +39,7 @@ export class InkingStroke extends ViewBoxBaseComponent { @computed get titleButton() { return this.propertyToggleBtn("Title", "_showTitle", on => "Switch between title styles", on => "text-width", (dv, doc) => (dv?.rootDoc || doc)._showTitle = !(dv?.rootDoc || doc)._showTitle ? "title" : (dv?.rootDoc || doc)._showTitle === "title" ? "title:hover" : undefined); } + @computed get autoHeightButton() { + return this.propertyToggleBtn("Auto\xA0Size", "_autoHeight", on => `Automatical vertical sizing to show all content`, on => "arrows-alt-v"); + } @computed get onClickButton() { @@ -142,6 +145,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const isText = layoutField instanceof RichTextField; const isInk = layoutField instanceof InkField; const isCollection = this.selectedDoc?.type === DocumentType.COL; + const isStacking = this.selectedDoc?._viewType === CollectionViewType.Stacking; const isFreeForm = this.selectedDoc?._viewType === CollectionViewType.Freeform; const toggle = (ele: JSX.Element | null, style?: React.CSSProperties) =>
{ele}
; @@ -152,6 +156,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { {toggle(this.chromeButton, { display: isCollection ? "" : "none" })} {toggle(this.lockButton)} {toggle(this.dictationButton)} + {toggle(this.autoHeightButton, { display: !isText && !isStacking ? "none" : "" })} {toggle(this.onClickButton)} {toggle(this.clustersButton, { display: !isFreeForm ? "none" : "" })} {toggle(this.panButton, { display: !isFreeForm ? "none" : "" })} diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index 9f04e8a6e..23d8baeaf 100644 --- a/src/client/views/TemplateMenu.tsx +++ b/src/client/views/TemplateMenu.tsx @@ -45,7 +45,7 @@ class OtherToggle extends React.Component<{ checked: boolean, name: string, togg export interface TemplateMenuProps { docViews: DocumentView[]; - templates: Map; + templates?: Map; } @@ -133,6 +133,7 @@ export class TemplateMenu extends React.Component { ContainingCollectionView={undefined} styleProvider={DefaultStyleProvider} layerProvider={undefined} + setHeight={returnFalse} docViewPath={returnEmptyDoclist} docFilters={returnEmptyFilter} docRangeFilters={returnEmptyFilter} diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx index 46bfd841e..581520619 100644 --- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx +++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx @@ -25,10 +25,13 @@ export const Flyout = higflyout.default; interface CMVFieldRowProps { rows: () => number; headings: () => object[]; + Document: Doc; + chromeStatus: string; heading: string; headingObject: SchemaHeaderField | undefined; docList: Doc[]; parent: CollectionStackingView; + pivotField: string; type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined; createDropTarget: (ele: HTMLDivElement) => void; screenToLocalTransform: () => Transform; @@ -90,7 +93,7 @@ export class CollectionMasonryViewFieldRow extends React.Component Doc.SetInPlace(d, key, castedValue, !onLayoutDoc)); @@ -110,7 +113,7 @@ export class CollectionMasonryViewFieldRow extends React.Component { this._createAliasSelected = false; - const key = StrCast(this.props.parent.props.Document._pivotField); + const key = this.props.pivotField; const castedValue = this.getValue(value); if (castedValue) { if (this.props.parent.columnHeaders) { @@ -143,7 +146,7 @@ export class CollectionMasonryViewFieldRow extends React.Component { if (!value && !forceEmptyNote) return false; this._createAliasSelected = false; - const key = StrCast(this.props.parent.props.Document._pivotField); + const key = this.props.pivotField; const newDoc = Docs.Create.TextDocument("", { _autoHeight: true, _width: 200, _fitWidth: true, title: value }); const onLayoutDoc = this.onLayoutDoc(key); FormattedTextBox.SelectOnLoad = newDoc[Id]; @@ -155,7 +158,7 @@ export class CollectionMasonryViewFieldRow extends React.Component { this._createAliasSelected = false; - const key = StrCast(this.props.parent.props.Document._pivotField); + const key = this.props.pivotField; this.props.docList.forEach(d => Doc.SetInPlace(d, key, undefined, true)); if (this.props.parent.columnHeaders && this.props.headingObject) { const index = this.props.parent.columnHeaders.indexOf(this.props.headingObject); @@ -171,8 +174,8 @@ export class CollectionMasonryViewFieldRow extends React.Component { - const alias = Doc.MakeAlias(this.props.parent.props.Document); - const key = StrCast(this.props.parent.props.Document._pivotField); + const alias = Doc.MakeAlias(this.props.Document); + const key = this.props.pivotField; let value = this.getValue(this.heading); value = typeof value === "string" ? `"${value}"` : value; const script = `return doc.${key} === ${value}`; @@ -187,7 +190,7 @@ export class CollectionMasonryViewFieldRow extends React.Component) => { if (e.button === 0 && !e.ctrlKey) { - setupMoveUpEvents(this, e, this.headerMove, emptyFunction, e => !this.props.parent.props.Document._chromeStatus && this.collapseSection(e)); + setupMoveUpEvents(this, e, this.headerMove, emptyFunction, e => !this.props.chromeStatus && this.collapseSection(e)); this._createAliasSelected = false; } } @@ -251,8 +254,7 @@ export class CollectionMasonryViewFieldRow extends React.Component evContents} @@ -295,7 +297,7 @@ export class CollectionMasonryViewFieldRow extends React.Component; - return this.props.parent.props.Document.miniHeaders ? + return this.props.Document.miniHeaders ?
{editableHeaderView}
: diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index e3d7118e9..6ecee64cc 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -54,7 +54,7 @@ export class CollectionStackingView extends CollectionSubView pair.layout instanceof Doc).map(pair => pair.layout); } @computed get headerMargin() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin); } @@ -78,7 +78,7 @@ export class CollectionStackingView extends CollectionSubView { TraceMobx(); this._docXfs.length = 0; return docs.map((d, i) => { @@ -410,13 +410,22 @@ export class CollectionStackingView extends CollectionSubView this.refList.splice(this.refList.indexOf(ref), 1)} observeHeight={(ref) => { if (ref) { diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 389b449b5..70ec1f925 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -2,9 +2,8 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; -import { Doc, DocListCast } from "../../../fields/Doc"; +import { Doc, DocListCast, Opt } from "../../../fields/Doc"; import { RichTextField } from "../../../fields/RichTextField"; -import { listSpec } from "../../../fields/Schema"; import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { ScriptField } from "../../../fields/ScriptField"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; @@ -20,7 +19,6 @@ import { undoBatch } from "../../util/UndoManager"; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import { EditableView } from "../EditableView"; -import { CollectionStackingView } from "./CollectionStackingView"; import "./CollectionStackingView.scss"; import { FormattedTextBox } from "../nodes/formattedText/FormattedTextBox"; import { Id } from "../../../fields/FieldSymbols"; @@ -29,13 +27,22 @@ export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; interface CSVFieldColumnProps { - cols: () => number; - headings: () => object[]; + Document: Doc; + DataDoc: Opt; + docList: Doc[]; heading: string; + pivotField: string; + chromeStatus: string; + columnHeaders: SchemaHeaderField[] | undefined; headingObject: SchemaHeaderField | undefined; - docList: Doc[]; - parent: CollectionStackingView; + yMargin: number; + columnWidth: number; + numGroupColumns: number; + gridGap: number; type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined; + headings: () => object[]; + renderChildren: (docs: Doc[]) => JSX.Element[]; + addDocument: (doc: Doc | Doc[]) => boolean; createDropTarget: (ele: HTMLDivElement) => void; screenToLocalTransform: () => Transform; observeHeight: (myref: any) => void; @@ -68,39 +75,25 @@ export class CollectionStackingViewFieldColumn extends React.Component { - if (de.complete.docDragData) { - const key = StrCast(this.props.parent.props.Document._pivotField); - const castedValue = this.getValue(this._heading); - de.complete.docDragData.droppedDocuments.forEach(d => Doc.SetInPlace(d, key, castedValue, false)); - this.props.parent.onInternalDrop(e, de); - e.stopPropagation(); - } + const drop = { docs: de.complete.docDragData?.droppedDocuments, val: this.getValue(this._heading) }; + drop.docs?.forEach(d => Doc.SetInPlace(d, this.props.pivotField, drop.val, false)); }); getValue = (value: string): any => { const parsed = parseInt(value); - if (!isNaN(parsed)) { - return parsed; - } - if (value.toLowerCase().indexOf("true") > -1) { - return true; - } - if (value.toLowerCase().indexOf("false") > -1) { - return false; - } + if (!isNaN(parsed)) return parsed; + if (value.toLowerCase().indexOf("true") > -1) return true; + if (value.toLowerCase().indexOf("false") > -1) return false; return value; } @action headingChanged = (value: string, shiftDown?: boolean) => { - const key = StrCast(this.props.parent.props.Document._pivotField); const castedValue = this.getValue(value); if (castedValue) { - if (this.props.parent.columnHeaders) { - if (this.props.parent.columnHeaders.map(i => i.heading).indexOf(castedValue.toString()) > -1) { - return false; - } + if (this.props.columnHeaders?.map(i => i.heading).indexOf(castedValue.toString()) !== -1) { + return false; } - this.props.docList.forEach(d => d[key] = castedValue); + this.props.docList.forEach(d => d[this.props.pivotField] = castedValue); if (this.props.headingObject) { this.props.headingObject.setHeading(castedValue.toString()); this._heading = this.props.headingObject.heading; @@ -112,33 +105,18 @@ export class CollectionStackingViewFieldColumn extends React.Component { - if (this.props.headingObject) { - this.props.headingObject.setColor(color); - this._color = color; - } - } - - @action - pointerEntered = () => { - if (SnappingManager.GetIsDragging()) { - this._background = "#b4b4b4"; - } - } - - @action - pointerLeave = () => { - this._background = "inherit"; + this.props.headingObject?.setColor(color); + this._color = color; } - @action - textCallback = (char: string) => { - return this.addDocument("", false, true); - } + @action pointerEntered = () => SnappingManager.GetIsDragging() && (this._background = "#b4b4b4"); + @action pointerLeave = () => this._background = "inherit"; + textCallback = (char: string) => this.addNewTextDoc("", false, true); @action - addDocument = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => { + addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => { if (!value && !forceEmptyNote) return false; - const key = StrCast(this.props.parent.props.Document._pivotField); + const key = this.props.pivotField; const newDoc = Docs.Create.TextDocument(value, { _height: 18, _width: 200, _fitWidth: true, title: value, _autoHeight: true }); newDoc[key] = this.getValue(this.props.heading); const maxHeading = this.props.docList.reduce((maxHeading, doc) => NumCast(doc.heading) > maxHeading ? NumCast(doc.heading) : maxHeading, 0); @@ -146,39 +124,33 @@ export class CollectionStackingViewFieldColumn extends React.Component { - const key = StrCast(this.props.parent.props.Document._pivotField); - this.props.docList.forEach(d => d[key] = undefined); - if (this.props.parent.columnHeaders && this.props.headingObject) { - const index = this.props.parent.columnHeaders.indexOf(this.props.headingObject); - this.props.parent.columnHeaders.splice(index, 1); + this.props.docList.forEach(d => d[this.props.pivotField] = undefined); + if (this.props.columnHeaders && this.props.headingObject) { + const index = this.props.columnHeaders.indexOf(this.props.headingObject); + this.props.columnHeaders.splice(index, 1); } } @action collapseSection = () => { - if (this.props.headingObject) { - this.props.headingObject.setCollapsed(!this.props.headingObject.collapsed); - this.toggleVisibility(); - } + this.props.headingObject?.setCollapsed(!this.props.headingObject.collapsed); + this.toggleVisibility(); } - headerDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); - } + headerDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); startDrag = (e: PointerEvent, down: number[], delta: number[]) => { - const alias = Doc.MakeAlias(this.props.parent.props.Document); - alias._width = this.props.parent.props.PanelWidth() / (Cast(this.props.parent.columnHeaders, listSpec(SchemaHeaderField))?.length || 1); + const alias = Doc.MakeAlias(this.props.Document); + alias._width = this.props.columnWidth / (this.props.columnHeaders?.length || 1); alias._pivotField = undefined; - const key = StrCast(this.props.parent.props.Document._pivotField); let value = this.getValue(this._heading); value = typeof value === "string" ? `"${value}"` : value; - alias.viewSpecScript = ScriptField.MakeFunction(`doc.${key} === ${value}`, { doc: Doc.name }); + alias.viewSpecScript = ScriptField.MakeFunction(`doc.${this.props.pivotField} === ${value}`, { doc: Doc.name }); if (alias.viewSpecScript) { DragManager.StartDocumentDrag([this._headerRef.current!], new DragManager.DocumentDragData([alias]), e.clientX, e.clientY); return true; @@ -187,43 +159,25 @@ export class CollectionStackingViewFieldColumn extends React.Component { - const selected = this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; - - const pink = PastelSchemaPalette.get("pink2"); - const purple = PastelSchemaPalette.get("purple4"); - const blue = PastelSchemaPalette.get("bluegreen1"); - const yellow = PastelSchemaPalette.get("yellow4"); - const red = PastelSchemaPalette.get("red2"); - const green = PastelSchemaPalette.get("bluegreen7"); - const cyan = PastelSchemaPalette.get("bluegreen5"); - const orange = PastelSchemaPalette.get("orange1"); const gray = "#f1efeb"; - - return ( -
-
-
this.changeColumnColor(pink!)}>
-
this.changeColumnColor(purple!)}>
-
this.changeColumnColor(blue!)}>
-
this.changeColumnColor(yellow!)}>
-
this.changeColumnColor(red!)}>
-
this.changeColumnColor(gray)}>
-
this.changeColumnColor(green!)}>
-
this.changeColumnColor(cyan!)}>
-
this.changeColumnColor(orange!)}>
-
+ const selected = this.props.headingObject ? this.props.headingObject.color : gray; + const colors = ["pink2", "purple4", "bluegreen1", "yellow4", "gray", "red2", "bluegreen7", "bluegreen5", "orange1"]; + return
+
+ {colors.map(col => { + const palette = PastelSchemaPalette.get(col); + return
this.changeColumnColor(palette!)} /> + })}
- ); +
; } renderMenu = () => { - return ( -
-
-
{ })}>Add options here
-
-
- ); + return
+
+
{ })}>Add options here
+
+
; } @observable private collapsed: boolean = false; @@ -234,22 +188,22 @@ export class CollectionStackingViewFieldColumn extends React.Component { FormattedTextBox.SelectOnLoad = doc[Id]; - return this.props.parent.props.addDocument?.(doc) || false; - }, this.props.parent.props.addDocument || returnFalse, x, y, true); + return this.props.addDocument?.(doc); + }, this.props.addDocument, x, y, true); Array.from(Object.keys(Doc.GetProto(dataDoc))).filter(fieldKey => dataDoc[fieldKey] instanceof RichTextField || dataDoc[fieldKey] instanceof ImageField || typeof (dataDoc[fieldKey]) === "string").map(fieldKey => docItems.push({ description: ":" + fieldKey, event: () => { - const created = DocUtils.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this.props.parent.props.Document)); + const created = DocUtils.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this.props.Document)); if (created) { - if (this.props.parent.Document.isTemplateDoc) { - Doc.MakeMetadataFieldTemplate(created, this.props.parent.props.Document); + if (this.props.Document.isTemplateDoc) { + Doc.MakeMetadataFieldTemplate(created, this.props.Document); } - return this.props.parent.props.addDocument?.(created) || false; + return this.props.addDocument?.(created); } }, icon: "compress-arrows-alt" })); @@ -258,25 +212,25 @@ export class CollectionStackingViewFieldColumn extends React.Component { const created = Docs.Create.CarouselDocument([], { _width: 400, _height: 200, title: fieldKey }); if (created) { - const container = this.props.parent.Document.resolvedDataDoc ? Doc.GetProto(this.props.parent.Document) : this.props.parent.Document; + const container = this.props.Document.resolvedDataDoc ? Doc.GetProto(this.props.Document) : this.props.Document; if (container.isTemplateDoc) { Doc.MakeMetadataFieldTemplate(created, container); return Doc.AddDocToList(container, Doc.LayoutFieldKey(container), created); } - return this.props.parent.props.addDocument?.(created) || false; + return this.props.addDocument?.(created) || false; } }, icon: "compress-arrows-alt" })); !Doc.UserDoc().noviceMode && ContextMenu.Instance.addItem({ description: "Doc Fields ...", subitems: docItems, icon: "eye" }); !Doc.UserDoc().noviceMode && ContextMenu.Instance.addItem({ description: "Containers ...", subitems: layoutItems, icon: "eye" }); ContextMenu.Instance.setDefaultItem("::", (name: string): void => { - Doc.GetProto(this.props.parent.props.Document)[name] = ""; + Doc.GetProto(this.props.Document)[name] = ""; const created = Docs.Create.TextDocument("", { title: name, _width: 250, _autoHeight: true }); if (created) { - if (this.props.parent.Document.isTemplateDoc) { - Doc.MakeMetadataFieldTemplate(created, this.props.parent.props.Document); + if (this.props.Document.isTemplateDoc) { + Doc.MakeMetadataFieldTemplate(created, this.props.Document); } - this.props.parent.props.addDocument?.(created); + this.props.addDocument?.(created); } }); const pt = this.props.screenToLocalTransform().inverse().transformPoint(x, y); @@ -284,23 +238,19 @@ export class CollectionStackingViewFieldColumn extends React.Component headings.indexOf(i) === idx); const evContents = heading ? heading : this.props?.type === "number" ? "0" : `NO ${key.toUpperCase()} VALUE`; const headingView = this.props.headingObject ?
{/* the default bucket (no key value) has a tooltip that describes what it is. @@ -337,34 +287,32 @@ export class CollectionStackingViewFieldColumn extends React.Component
: (null); - for (let i = 0; i < cols; i++) templatecols += `${style.columnWidth / style.numGroupColumns}px `; - const chromeStatus = this.props.parent.chromeStatus; - const type = this.props.parent.props.Document.type; + const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `; + const type = this.props.Document.type; return <> - {this.props.parent.Document._columnsHideIfEmpty ? (null) : headingView} + {this.props.Document._columnsHideIfEmpty ? (null) : headingView} { this.collapsed ? (null) :
-
- {this.props.parent.children(this.props.docList, uniqueHeadings.length)} - {singleColumn ? (null) : this.props.parent.columnDragger} + {this.props.renderChildren(this.props.docList)}
- {(chromeStatus !== 'view-mode' && chromeStatus && type !== DocumentType.PRES) ? + {(this.props.chromeStatus !== 'view-mode' && this.props.chromeStatus && type !== DocumentType.PRES) ?
+ style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10 }}> headings.indexOf(i) === idx); - const chromeStatus = this.props.parent.props.Document._chromeStatus; return (
!this.active() && this._iframe && (this._iframe.scrollTop = NumCast(this.layoutDoc._scrollTop), false)); - iframe.contentDocument.addEventListener('scroll', () => { - console.log("Scroll = " + this._iframe?.scrollTop) - } - , true); } } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index e4c481014..d64db1ee1 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -571,7 +571,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp })); const uicontrols: ContextMenuProps[] = []; - uicontrols.push({ description: `${FormattedTextBox._canAnnotate ? "Hide" : "Show"} Annotation Bar`, event: () => FormattedTextBox._canAnnotate = !FormattedTextBox._canAnnotate, icon: "expand-arrows-alt" }); + !Doc.UserDoc().noviceMode && uicontrols.push({ description: `${FormattedTextBox._canAnnotate ? "Don't" : ""} Show Menu on Selections`, event: () => FormattedTextBox._canAnnotate = !FormattedTextBox._canAnnotate, icon: "expand-arrows-alt" }); uicontrols.push({ description: !this.Document._noSidebar ? "Hide Sidebar Handle" : "Show Sidebar Handle", event: () => this.layoutDoc._noSidebar = !this.layoutDoc._noSidebar, icon: "expand-arrows-alt" }); uicontrols.push({ description: `${this.layoutDoc._showAudio ? "Hide" : "Show"} Dictation Icon`, event: () => this.layoutDoc._showAudio = !this.layoutDoc._showAudio, icon: "expand-arrows-alt" }); uicontrols.push({ description: "Show Highlights...", noexpand: true, subitems: highlighting, icon: "hand-point-right" }); @@ -748,8 +748,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.props.setContentView?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document. this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link. this.props.contentsActive?.(this.active); this._cachedLinks = DocListCast(this.Document.links); - this._disposers.autoHeight = reaction(() => ({ scrollHeight: this.scrollHeight, autoHeight: this.autoHeight, width: NumCast(this.layoutDoc._width) }), - ({ width, autoHeight, scrollHeight }) => width && autoHeight && this.resetNativeHeight(scrollHeight) + this._disposers.autoHeight = reaction(() => this.autoHeight, autoHeight => autoHeight && this.tryUpdateScrollHeight()); + this._disposers.autoHeight = reaction(() => ({ scrollHeight: this.scrollHeight, width: NumCast(this.layoutDoc._width) }), + ({ width, scrollHeight }) => width && this.autoHeight && this.resetNativeHeight(scrollHeight) ); this._disposers.componentHeights = reaction( // set the document height when one of the component heights changes and autoHeight is on () => ({ sidebarHeight: this.sidebarHeight, textHeight: this.textHeight, autoHeight: this.autoHeight }), diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 91bb321b2..68b1452f8 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -146,8 +146,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent this.Document._curPage, + this._disposers.curPage = reaction(() => this.Document._curPage, (page) => page !== undefined && page !== this._pdfViewer?.currentPageNumber && this.gotoPage(page), { fireImmediately: true } ); diff --git a/src/fields/SchemaHeaderField.ts b/src/fields/SchemaHeaderField.ts index 22ae454f8..88de3a19f 100644 --- a/src/fields/SchemaHeaderField.ts +++ b/src/fields/SchemaHeaderField.ts @@ -37,6 +37,7 @@ export const PastelSchemaPalette = new Map([ ["red3", "#ffbebc"], ["red4", "#ffcbc1"], ["orange1", "#ffd5b3"], + ["gray", "#f1efeb"] ]); export const RandomPastel = () => Array.from(PastelSchemaPalette.values())[Math.floor(Math.random() * PastelSchemaPalette.size)]; -- cgit v1.2.3-70-g09d2