From 9a1fec81467e6d4b04c6e28d66b724aae92db826 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 7 Sep 2020 01:42:22 -0400 Subject: fixed image orientation for certain exif settings >= 5 --- src/client/views/nodes/ImageBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/nodes/ImageBox.tsx') diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 688bac725..5832a51a7 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -262,7 +262,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent= 5 || rotation === 90 || rotation === 270) { this.layoutDoc._nativeWidth = NumCast(this.dataDoc[this.fieldKey + "-nativeHeight"]); this.layoutDoc._nativeHeight = NumCast(this.dataDoc[this.fieldKey + "-nativeWidth"]); } else { -- cgit v1.2.3-70-g09d2 From 9e91c34bc25851ce9a6def9665267c0874b0693c Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 8 Sep 2020 14:24:33 -0400 Subject: resurrecting templates with childLayout --- .../views/collections/CollectionCarouselView.tsx | 11 ++++++---- .../views/collections/CollectionStackingView.tsx | 18 ++++++++-------- src/client/views/collections/CollectionSubView.tsx | 4 ++-- src/client/views/collections/CollectionView.tsx | 25 ---------------------- .../views/nodes/ContentFittingDocumentView.tsx | 5 +++-- src/client/views/nodes/DocumentView.tsx | 4 ++-- src/client/views/nodes/FieldView.tsx | 1 - src/client/views/nodes/ImageBox.tsx | 1 + .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- 9 files changed, 25 insertions(+), 46 deletions(-) (limited to 'src/client/views/nodes/ImageBox.tsx') diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 8a27f8102..5f63f536d 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -45,17 +45,20 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) onContentClick = () => ScriptCast(this.layoutDoc.onChildClick); @computed get content() { const index = NumCast(this.layoutDoc._itemIndex); - return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) : + const layoutTemp = this.props.DataDoc ? true : undefined; + const curDoc = this.childLayoutPairs?.[index] || (layoutTemp ? { layout: this.rootDoc, data: this.rootDoc } : undefined); + return !(curDoc?.layout instanceof Doc) ? (null) : <>
+ Document={curDoc.layout} DataDoc={undefined} fieldKey={"caption"} />
; } diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index fb0bce53e..b9a94642a 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -77,12 +77,9 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) const dxf = () => this.getDocTransform(d, dref.current!); this._docXfs.push({ dxf, width, height }); const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap); - if (height() < 5) { - console.log("here" + height()); - } const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` }; return
- {this.getDisplayDoc(d, (!d.isTemplateDoc && !d.isTemplateForField && !d.PARAMS) ? undefined : this.props.DataDoc, dxf, width)} + {this.getDisplayDoc(d, dxf, width)}
; }); } @@ -197,7 +194,8 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) }, 500); } - getDisplayDoc(doc: Doc, dataDoc: Doc | undefined, dxf: () => Transform, width: () => number) { + getDisplayDoc(doc: Doc, dxf: () => Transform, width: () => number) { + const dataDoc = (!doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS) ? undefined : this.props.DataDoc; const height = () => this.getDocHeight(doc); const opacity = () => this.Document._currentFrame === undefined ? this.props.childOpacity?.() : CollectionFreeFormDocumentView.getValues(doc, NumCast(this.Document._currentFrame))?.opacity; return (schemaCtor: (doc: Doc) => T, moreProps?: } else { // Finally, if it's not a doc or a list and the document is a template, we try to render the root doc. // For example, if an image doc is rendered with a slide template, the template will try to render the data field as a collection. // Since the data field is actually an image, we set the list of documents to the singleton of root document's proto which will be an image. - const rootDoc = Cast(this.props.Document.rootDocument, Doc, null); - rawdocs = rootDoc && !this.props.annotationsKey ? [Doc.GetProto(rootDoc)] : []; + // const rootDoc = Cast(this.props.Document.rootDocument, Doc, null); + // rawdocs = rootDoc && !this.props.annotationsKey ? [Doc.GetProto(rootDoc)] : []; } const docs = rawdocs.filter(d => !(d instanceof Promise)).map(d => d as Doc); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index e0c40ce77..bc882f559 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -372,31 +372,6 @@ export class CollectionView extends Touchable Doc.GetLayoutDataDocPair(Document, DataDoc, doc)).filter(pair => pair.layout); - return validPairs.map(({ data, layout }) => ({ data: data as Doc, layout: layout! })); // this mapping is a bit of a hack to coerce types - } - - get childDocList() { - return Cast(this.dataField, listSpec(Doc)); - } - - get childDocs() { - const dfield = this.dataField; - const rawdocs = (dfield instanceof Doc) ? [dfield] : Cast(dfield, listSpec(Doc), Cast(this.props.Document.rootDocument, Doc, null) ? [Cast(this.props.Document.rootDocument, Doc, null)] : []); - const docs = rawdocs.filter(d => d && !(d instanceof Promise)).map(d => d as Doc); - const viewSpecScript = ScriptCast(this.props.Document.viewSpecScript); - return viewSpecScript ? docs.filter(d => viewSpecScript.script.run({ doc: d }, console.log).result) : docs; - } onPointerDown = (e: React.PointerEvent) => { setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index 715faa934..6050d03cc 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -25,8 +25,9 @@ export class ContentFittingDocumentView extends React.Component NumCast(this.layoutDoc?._nativeWidth, this.props.NativeWidth?.() || (this.freezeDimensions && this.layoutDoc ? this.layoutDoc[WidthSym]() : this.props.PanelWidth())); - nativeHeight = () => NumCast(this.layoutDoc?._nativeHeight, this.props.NativeHeight?.() || (this.freezeDimensions && this.layoutDoc ? this.layoutDoc[HeightSym]() : this.props.PanelHeight())); + + nativeWidth = () => NumCast(this.layoutDoc?.[(this.props.DataDoc ? Doc.LayoutFieldKey(this.layoutDoc) + "-" : "_") + "nativeWidth"], this.props.NativeWidth?.() || (this.freezeDimensions && this.layoutDoc ? this.layoutDoc[WidthSym]() : this.props.PanelWidth())); + nativeHeight = () => NumCast(this.layoutDoc?.[(this.props.DataDoc ? Doc.LayoutFieldKey(this.layoutDoc) + "-" : "_") + "nativeHeight"], this.props.NativeHeight?.() || (this.freezeDimensions && this.layoutDoc ? this.layoutDoc[HeightSym]() : this.props.PanelHeight())); @computed get scaling() { const wscale = this.props.PanelWidth() / this.nativeWidth(); if (wscale * this.nativeHeight() > this.props.PanelHeight()) { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index f6360fc87..a4ac1c4dc 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -119,8 +119,8 @@ export class DocumentView extends DocComponent(Docu public get ContentDiv() { return this._mainCont.current; } @computed get topMost() { return this.props.renderDepth === 0; } @computed get freezeDimensions() { return this.props.FreezeDimensions; } - @computed get nativeWidth() { return NumCast(this.layoutDoc._nativeWidth, this.props.NativeWidth() || (this.freezeDimensions ? this.layoutDoc[WidthSym]() : 0)); } - @computed get nativeHeight() { return NumCast(this.layoutDoc._nativeHeight, this.props.NativeHeight() || (this.freezeDimensions ? this.layoutDoc[HeightSym]() : 0)); } + @computed get nativeWidth() { return NumCast(this.layoutDoc[(this.props.DataDoc ? Doc.LayoutFieldKey(this.layoutDoc) + "-" : "_") + "nativeWidth"], this.props.NativeWidth() || (this.freezeDimensions ? this.layoutDoc[WidthSym]() : 0)); } + @computed get nativeHeight() { return NumCast(this.layoutDoc[(this.props.DataDoc ? Doc.LayoutFieldKey(this.layoutDoc) + "-" : "_") + "nativeHeight"], this.props.NativeHeight() || (this.freezeDimensions ? this.layoutDoc[HeightSym]() : 0)); } @computed get onClickHandler() { return this.props.onClick?.() ?? Cast(this.Document.onClick, ScriptField, Cast(this.layoutDoc.onClick, ScriptField, null)); } @computed get onDoubleClickHandler() { return this.props.onDoubleClick?.() ?? (Cast(this.layoutDoc.onDoubleClick, ScriptField, null) ?? this.Document.onDoubleClick); } @computed get onPointerDownHandler() { return this.props.onPointerDown?.() ?? ScriptCast(this.Document.onPointerDown); } diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index fceeced36..746a906c7 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -56,7 +56,6 @@ export interface FieldViewProps { NativeWidth: () => number; setVideoBox?: (player: VideoBox) => void; ContentScaling: () => number; - ChromeHeight?: () => number; childLayoutTemplate?: () => Opt; // properties intended to be used from within layout strings (otherwise use the function equivalents that work more efficiently with React) diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 5832a51a7..6fd9b1337 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -250,6 +250,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent { + if (this.props.dontRegisterView) return; const basePath = imgPath.replace(/_[oms]./, ""); const curPath = this.dataDoc[this.fieldKey + "-path"]; const cachedNativeSize = { diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 311143ff7..f0dc92b90 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1200,7 +1200,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp if (this.props.onClick && e.button === 0 && !this.props.isSelected(false)) { e.preventDefault(); } - if (e.button === 0 && this.props.isSelected(true) && !e.altKey && !e.ctrlKey && !e.metaKey) { + if (e.button === 0 && (this.props.rootSelected(true) || this.props.isSelected(true)) && !e.altKey && !e.ctrlKey && !e.metaKey) { if (e.clientX < this.ProseRef!.getBoundingClientRect().right) { // stop propagation if not in sidebar e.stopPropagation(); // if the text box is selected, then it consumes all down events } -- cgit v1.2.3-70-g09d2 From 39224bee728cd17861d17d0d20f62a92aadf3090 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 8 Sep 2020 16:08:48 -0400 Subject: fixed images with different exif orientations and simplified ImageBox --- src/client/documents/Documents.ts | 4 +++ src/client/views/nodes/ImageBox.tsx | 57 +++++++++---------------------------- 2 files changed, 17 insertions(+), 44 deletions(-) (limited to 'src/client/views/nodes/ImageBox.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 8d1f8a04e..7e276747c 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1226,6 +1226,10 @@ export namespace DocUtils { proto["data-nativeOrientation"] = result.exifData?.data?.image?.Orientation; proto["data-nativeWidth"] = (result.nativeWidth < result.nativeHeight) ? maxNativeDim * result.nativeWidth / result.nativeHeight : maxNativeDim; proto["data-nativeHeight"] = (result.nativeWidth < result.nativeHeight) ? maxNativeDim : maxNativeDim / (result.nativeWidth / result.nativeHeight); + if (Number(result.exifData?.data?.image?.Orientation) >= 5) { + proto["data-nativeHeight"] = (result.nativeWidth < result.nativeHeight) ? maxNativeDim * result.nativeWidth / result.nativeHeight : maxNativeDim; + proto["data-nativeWidth"] = (result.nativeWidth < result.nativeHeight) ? maxNativeDim : maxNativeDim / (result.nativeWidth / result.nativeHeight); + } proto.contentSize = result.contentSize; } generatedDocuments.push(doc); diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 5832a51a7..d1e7f903b 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -26,6 +26,7 @@ import { FaceRectangles } from './FaceRectangles'; import { FieldView, FieldViewProps } from './FieldView'; import "./ImageBox.scss"; import React = require("react"); +import { takeWhile } from 'lodash'; const path = require('path'); const { Howl } = require('howler'); @@ -73,10 +74,16 @@ export class ImageBox extends ViewBoxAnnotatableComponent this.paths.length && this.resize(this.paths[0]), - () => true, + this._pathDisposer = reaction(() => ({ nativeSize: this.nativeSize, width: this.layoutDoc[WidthSym]() }), + ({ nativeSize, width }) => { + this.layoutDoc._nativeWidth = nativeSize.nativeWidth; + this.layoutDoc._nativeHeight = nativeSize.nativeHeight; + this.layoutDoc._nativeOrientation = nativeSize.nativeOrientation; + this.layoutDoc._height = width * nativeSize.nativeHeight / nativeSize.nativeWidth; + }, { fireImmediately: true }); } + componentWillUnmount() { this._pathDisposer?.(); } @@ -249,45 +256,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent { - const basePath = imgPath.replace(/_[oms]./, ""); - const curPath = this.dataDoc[this.fieldKey + "-path"]; - const cachedNativeSize = { - width: basePath === curPath || !curPath ? NumCast(this.dataDoc[this.fieldKey + "-nativeWidth"]) : 0, - height: basePath === curPath || !curPath ? NumCast(this.dataDoc[this.fieldKey + "-nativeHeight"]) : 0, - }; - const docAspect = this.layoutDoc[HeightSym]() / this.layoutDoc[WidthSym](); - const cachedAspect = cachedNativeSize.height / cachedNativeSize.width; - if (!cachedNativeSize.width || !cachedNativeSize.height || Math.abs(NumCast(this.layoutDoc._width) / NumCast(this.layoutDoc._height) - cachedNativeSize.width / cachedNativeSize.height) > 0.05) { - if (!this.layoutDoc.isTemplateDoc || this.dataDoc !== this.layoutDoc) { - const rotation = NumCast(this.dataDoc[this.fieldKey + "-rotation"]) % 180; - const orientation = NumCast(this.dataDoc[this.fieldKey + "-nativeOrientation"]); - if (orientation >= 5 || rotation === 90 || rotation === 270) { - this.layoutDoc._nativeWidth = NumCast(this.dataDoc[this.fieldKey + "-nativeHeight"]); - this.layoutDoc._nativeHeight = NumCast(this.dataDoc[this.fieldKey + "-nativeWidth"]); - } else { - this.layoutDoc._nativeWidth = NumCast(this.dataDoc[this.fieldKey + "-nativeWidth"]); - this.layoutDoc._nativeHeight = NumCast(this.dataDoc[this.fieldKey + "-nativeHeight"]); - } - const rotatedAspect = NumCast(this.layoutDoc._nativeHeight) / NumCast(this.layoutDoc._nativeWidth); - if (this.layoutDoc[WidthSym]() && (!cachedNativeSize.width || !cachedNativeSize.height || Math.abs(1 - docAspect / rotatedAspect) > 0.1)) { - this.layoutDoc._height = this.layoutDoc[WidthSym]() * rotatedAspect; - this.dataDoc[this.fieldKey + "-path"] = basePath; - } - } else if (Math.abs(1 - docAspect / cachedAspect) > 0.1) { - this.layoutDoc._width = this.layoutDoc[WidthSym]() || cachedNativeSize.width; - this.layoutDoc._height = this.layoutDoc[WidthSym]() * cachedAspect; - } - } else if (this.layoutDoc._nativeWidth !== cachedNativeSize.width || this.layoutDoc._nativeHeight !== cachedNativeSize.height) { - !(this.layoutDoc[StrCast(this.layoutDoc.layoutKey)] instanceof Doc) && setTimeout(() => { - if (!(this.layoutDoc[StrCast(this.layoutDoc.layoutKey)] instanceof Doc)) { - this.layoutDoc._nativeWidth = cachedNativeSize.width; - this.layoutDoc._nativeHeight = cachedNativeSize.height; - } - }, 0); - } - } - @action onPointerEnter = () => { const self = this; @@ -370,7 +338,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent Date: Tue, 8 Sep 2020 19:26:24 -0400 Subject: updated the way NativeWidth/Height props work so that, when specified, they override locally specified values --- src/Utils.ts | 2 ++ src/client/views/DocumentDecorations.tsx | 6 +++--- src/client/views/GestureOverlay.tsx | 2 -- src/client/views/MainView.tsx | 10 --------- src/client/views/OverlayView.tsx | 2 -- src/client/views/Palette.tsx | 2 -- src/client/views/PropertiesView.tsx | 4 ++-- src/client/views/TemplateMenu.tsx | 2 -- .../views/collections/CollectionCarouselView.tsx | 4 ++-- .../views/collections/CollectionLinearView.tsx | 2 -- .../views/collections/CollectionSchemaView.tsx | 2 -- .../views/collections/CollectionStackingView.tsx | 8 +++---- src/client/views/collections/CollectionSubView.tsx | 4 ++-- .../views/collections/CollectionTreeView.tsx | 6 ++---- src/client/views/collections/SchemaTable.tsx | 2 -- src/client/views/collections/TabDocView.tsx | 2 -- .../collectionFreeForm/CollectionFreeFormView.tsx | 14 ++++++------ .../collectionGrid/CollectionGridView.tsx | 2 -- .../CollectionMulticolumnView.tsx | 8 ++++--- .../CollectionMultirowView.tsx | 2 -- src/client/views/nodes/AudioBox.tsx | 4 ---- .../views/nodes/CollectionFreeFormDocumentView.tsx | 6 +++--- .../views/nodes/ContentFittingDocumentView.tsx | 10 ++++----- src/client/views/nodes/DocHolderBox.tsx | 4 ---- src/client/views/nodes/DocumentView.tsx | 10 ++++----- src/client/views/nodes/FieldView.tsx | 4 ++-- src/client/views/nodes/FilterBox.tsx | 2 -- src/client/views/nodes/ImageBox.tsx | 25 ++++++---------------- src/client/views/nodes/KeyValuePair.tsx | 2 -- src/client/views/nodes/LinkBox.tsx | 2 -- src/client/views/nodes/LinkDocPreview.tsx | 2 -- src/client/views/nodes/ScreenshotBox.tsx | 2 -- src/client/views/nodes/VideoBox.tsx | 2 -- src/client/views/nodes/WebBox.tsx | 4 +--- .../views/nodes/formattedText/DashDocView.tsx | 2 -- .../views/nodes/formattedText/FormattedTextBox.tsx | 4 +--- .../formattedText/FormattedTextBoxComment.tsx | 4 ++-- .../views/nodes/formattedText/RichTextSchema.tsx | 2 -- src/client/views/pdf/PDFViewer.tsx | 2 -- .../views/presentationview/PresElementBox.tsx | 2 -- src/mobile/AudioUpload.tsx | 2 -- src/mobile/MobileInterface.tsx | 2 -- 42 files changed, 52 insertions(+), 133 deletions(-) (limited to 'src/client/views/nodes/ImageBox.tsx') diff --git a/src/Utils.ts b/src/Utils.ts index 6582e43ef..7dff1ac55 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -414,6 +414,8 @@ export function returnTrue() { return true; } export function returnFalse() { return false; } +export function returnVal(val1?: number, val2?: number) { return val1 !== undefined ? val1 : val2 !== undefined ? val2 : 0; } + export function returnOne() { return 1; } export function returnZero() { return 0; } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 81c1676b0..e5c6f0aa9 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -10,7 +10,7 @@ import { InkField } from "../../fields/InkField"; import { ScriptField } from '../../fields/ScriptField'; import { Cast, NumCast } from "../../fields/Types"; import { GetEffectiveAcl } from '../../fields/util'; -import { emptyFunction, returnFalse, setupMoveUpEvents, simulateMouseClick } from "../../Utils"; +import { emptyFunction, returnFalse, setupMoveUpEvents, simulateMouseClick, returnVal } from "../../Utils"; import { DocUtils, Docs } from "../documents/Documents"; import { DocumentType } from '../documents/DocumentTypes'; import { DragManager } from "../util/DragManager"; @@ -453,8 +453,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (e.ctrlKey && !element.props.Document._nativeHeight) element.toggleNativeDimensions(); if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) { const doc = Document(element.rootDoc); - let nwidth = doc._nativeWidth || 0; - let nheight = doc._nativeHeight || 0; + let nwidth = returnVal(element.NativeWidth?.(), doc._nativeWidth); + let nheight = returnVal(element.NativeHeight?.(), doc._nativeHeight); const width = (doc._width || 0); let height = (doc._height || (nheight / nwidth * width)); height = !height || isNaN(height) ? 20 : height; diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 63711a3cb..6af3a40cf 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -926,8 +926,6 @@ export class GestureOverlay extends Touchable { ContentScaling={returnOne} PanelWidth={this.return300} PanelHeight={this.return300} - NativeHeight={returnZero} - NativeWidth={returnZero} renderDepth={0} backgroundColor={returnEmptyString} focus={emptyFunction} diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 318d0368c..d017de457 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -261,8 +261,6 @@ export class MainView extends React.Component { removeDocument={undefined} ScreenToLocalTransform={Transform.Identity} ContentScaling={returnOne} - NativeHeight={returnZero} - NativeWidth={returnZero} PanelWidth={this.getPWidth} PanelHeight={this.getPHeight} focus={emptyFunction} @@ -318,8 +316,6 @@ export class MainView extends React.Component { addDocument={undefined} addDocTab={this.addDocTabFunc} pinToPres={emptyFunction} - NativeHeight={returnZero} - NativeWidth={returnZero} rootSelected={returnTrue} removeDocument={returnFalse} onClick={undefined} @@ -354,8 +350,6 @@ export class MainView extends React.Component { addDocument={undefined} addDocTab={this.addDocTabFunc} pinToPres={emptyFunction} - NativeHeight={returnZero} - NativeWidth={returnZero} rootSelected={returnTrue} removeDocument={returnFalse} onClick={undefined} @@ -487,8 +481,6 @@ export class MainView extends React.Component { onClick={undefined} ScreenToLocalTransform={this.buttonBarXf} ContentScaling={returnOne} - NativeHeight={returnZero} - NativeWidth={returnZero} PanelWidth={this.flyoutWidthFunc} PanelHeight={this.getContentsHeight} renderDepth={0} @@ -553,8 +545,6 @@ export class MainView extends React.Component { removeDocument={undefined} ScreenToLocalTransform={Transform.Identity} ContentScaling={returnOne} - NativeHeight={returnZero} - NativeWidth={returnZero} PanelWidth={this.getPWidth} PanelHeight={this.getPHeight} renderDepth={0} diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx index cc0dd0443..4b8049e14 100644 --- a/src/client/views/OverlayView.tsx +++ b/src/client/views/OverlayView.tsx @@ -193,8 +193,6 @@ export class OverlayView extends React.Component { addDocument={undefined} removeDocument={undefined} ContentScaling={returnOne} - NativeHeight={returnZero} - NativeWidth={returnZero} PanelWidth={returnOne} PanelHeight={returnOne} ScreenToLocalTransform={Transform.Identity} diff --git a/src/client/views/Palette.tsx b/src/client/views/Palette.tsx index 92c3f09b4..9f08a03e1 100644 --- a/src/client/views/Palette.tsx +++ b/src/client/views/Palette.tsx @@ -49,8 +49,6 @@ export default class Palette extends React.Component { onClick={undefined} ScreenToLocalTransform={Transform.Identity} ContentScaling={returnOne} - NativeHeight={returnZero} - NativeWidth={returnZero} PanelWidth={() => window.screen.width} PanelHeight={() => window.screen.height} renderDepth={0} diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 041eec2b4..7da56721a 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -287,9 +287,9 @@ export class PropertiesView extends React.Component { fitToBox={true} FreezeDimensions={true} NativeWidth={layoutDoc.type === - StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : returnZero} + StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : undefined} NativeHeight={layoutDoc.type === - StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : returnZero} + StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : undefined} PanelWidth={panelWidth} PanelHeight={panelHeight} focus={returnFalse} diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index 870af03aa..c1878115d 100644 --- a/src/client/views/TemplateMenu.tsx +++ b/src/client/views/TemplateMenu.tsx @@ -150,8 +150,6 @@ export class TemplateMenu extends React.Component { select={emptyFunction} renderDepth={1} addDocTab={returnFalse} - NativeHeight={returnZero} - NativeWidth={returnZero} PanelWidth={this.return100} PanelHeight={this.return100} treeViewHideHeaderFields={true} diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 5f63f536d..034d006f2 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -13,7 +13,7 @@ import { Doc } from '../../../fields/Doc'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { ContextMenu } from '../ContextMenu'; import { ObjectField } from '../../../fields/ObjectField'; -import { returnFalse } from '../../../Utils'; +import { returnFalse, returnZero } from '../../../Utils'; import { ScriptField } from '../../../fields/ScriptField'; type CarouselDocument = makeInterface<[typeof documentSchema, typeof collectionSchema]>; @@ -54,9 +54,9 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) onDoubleClick={this.onContentDoubleClick} onClick={this.onContentClick} renderDepth={this.props.renderDepth + 1} - dontRegisterView={layoutTemp} // temporary hack to mark documents as being a template see imageBox LayoutTemplate={this.props.ChildLayoutTemplate} LayoutTemplateString={this.props.ChildLayoutString} + NativeWidth={layoutTemp ? returnZero : this.props.NativeWidth} Document={curDoc.layout} DataDoc={curDoc.data} PanelHeight={this.panelHeight} diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index ea050011a..22c1f51a6 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -153,8 +153,6 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { onClick={undefined} ScreenToLocalTransform={this.getTransform(dref)} ContentScaling={returnOne} - NativeHeight={returnZero} - NativeWidth={returnZero} PanelWidth={nested ? pair.layout[WidthSym] : () => this.dimension()}// ugh - need to get rid of this inline function to avoid recomputing PanelHeight={nested ? pair.layout[HeightSym] : () => this.dimension()} renderDepth={this.props.renderDepth + 1} diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 1b68c0e1a..332a2001f 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -429,8 +429,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { void) => void; rootSelected: (outsideReaction?: boolean) => boolean; fieldKey: string; - NativeWidth: () => number; - NativeHeight: () => number; + NativeWidth?: () => number; + NativeHeight?: () => number; } export interface SubCollectionViewProps extends CollectionViewProps { diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index f13fee776..7b3e95404 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -357,8 +357,8 @@ class TreeView extends React.Component { backgroundColor={this.props.backgroundColor} fitToBox={this.boundsOfCollectionDocument !== undefined} FreezeDimensions={true} - NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : returnZero} - NativeHeight={layoutDoc.type === DocumentType.RTF ? this.rtfHeight : returnZero} + NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} + NativeHeight={layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined} PanelWidth={panelWidth} PanelHeight={panelHeight} focus={returnFalse} @@ -464,8 +464,6 @@ class TreeView extends React.Component { ContentScaling={returnOne} PanelWidth={this.truncateTitleWidth} PanelHeight={returnZero} - NativeHeight={returnZero} - NativeWidth={returnZero} contextMenuItems={this.contextMenuItems} opacity={returnOne} renderDepth={1} diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 1fb7aa04a..854254195 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -570,8 +570,6 @@ export class SchemaTable extends React.Component { ref="overlay"> { ContentScaling={returnOne} PanelWidth={this.returnMiniSize} PanelHeight={this.returnMiniSize} - NativeHeight={returnZero} - NativeWidth={returnZero} ScreenToLocalTransform={this.ScreenToLocalTransform} renderDepth={0} whenActiveChanged={emptyFunction} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 86460eee1..aa334df6c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -12,7 +12,7 @@ import { ScriptField } from "../../../../fields/ScriptField"; import { BoolCast, Cast, FieldValue, NumCast, ScriptCast, StrCast } from "../../../../fields/Types"; import { TraceMobx } from "../../../../fields/util"; import { GestureUtils } from "../../../../pen-gestures/GestureUtils"; -import { aggregateBounds, intersectRect, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils } from "../../../../Utils"; +import { aggregateBounds, intersectRect, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils, returnVal } from "../../../../Utils"; import { CognitiveServices } from "../../../cognitive_services/CognitiveServices"; import { DocServer } from "../../../DocServer"; import { Docs, DocUtils } from "../../../documents/Documents"; @@ -107,8 +107,8 @@ export class CollectionFreeFormView extends CollectionSubView 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 : NumCast(this.Document._nativeWidth, this.props.NativeWidth()); } - @computed get nativeHeight() { return this.fitToContent ? 0 : NumCast(this.Document._nativeHeight, this.props.NativeHeight()); } + @computed get nativeWidth() { return this.fitToContent ? 0 : returnVal(this.props.NativeWidth?.(), NumCast(this.Document._nativeWidth)); } + @computed get nativeHeight() { return this.fitToContent ? 0 : returnVal(this.props.NativeHeight?.(), NumCast(this.Document._nativeHeight)); } private get isAnnotationOverlay() { return this.props.isAnnotationOverlay; } private get scaleFieldKey() { return this.props.scaleField || "_viewScale"; } private get borderWidth() { return this.isAnnotationOverlay ? 0 : COLLECTION_BORDER_WIDTH; } @@ -942,8 +942,6 @@ export class CollectionFreeFormView extends CollectionSubView { - Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth(), this.props.NativeHeight()); + Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); } @undoBatch @@ -1411,8 +1409,8 @@ export class CollectionFreeFormView extends CollectionSubView Transform, width: () => number, height: () => number) { + const layoutTemp = this.props.DataDoc ? true : undefined; return ; } + @computed get rootDoc() { return Cast(this.props.Document.rootDocument, Doc, null) || this.props.Document; } /** * @returns the resolved list of rendered child documents, displayed * at their resolved pixel widths, each separated by a resizer. @@ -257,6 +258,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu const { childLayoutPairs } = this; const { Document, PanelHeight } = this.props; const collector: JSX.Element[] = []; + const layoutTemp = this.props.DataDoc ? true : undefined; for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; const dxf = () => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin)); diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index 53825eece..9a4fb0627 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -224,8 +224,6 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - NativeHeight={returnZero} - NativeWidth={returnZero} fitToBox={false} rootSelected={this.rootSelected} dropAction={StrCast(this.props.Document.childDropAction) as dropActionType} diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 0e3c4462c..5e7f8dfda 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -520,8 +520,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent this.playLink(mark)} pointerEvents={true} - NativeHeight={returnZero} - NativeWidth={returnZero} rootSelected={returnFalse} LayoutTemplate={undefined} ContainingCollectionDoc={this.props.Document} @@ -607,8 +605,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent e.stopPropagation()}> NumCast(this.layoutDoc?.[(this.props.DataDoc ? Doc.LayoutFieldKey(this.layoutDoc) + "-" : "_") + "nativeWidth"], this.props.NativeWidth?.() || (this.freezeDimensions && this.layoutDoc ? this.layoutDoc[WidthSym]() : this.props.PanelWidth())); - nativeHeight = () => NumCast(this.layoutDoc?.[(this.props.DataDoc ? Doc.LayoutFieldKey(this.layoutDoc) + "-" : "_") + "nativeHeight"], this.props.NativeHeight?.() || (this.freezeDimensions && this.layoutDoc ? this.layoutDoc[HeightSym]() : this.props.PanelHeight())); + nativeWidth = () => returnVal(this.props.NativeWidth?.(), NumCast(this.layoutDoc?.[(this.props.DataDoc ? Doc.LayoutFieldKey(this.layoutDoc) + "-" : "_") + "nativeWidth"], (this.freezeDimensions && this.layoutDoc ? this.layoutDoc[WidthSym]() : this.props.PanelWidth()))); + nativeHeight = () => returnVal(this.props.NativeHeight?.(), NumCast(this.layoutDoc?.[(this.props.DataDoc ? Doc.LayoutFieldKey(this.layoutDoc) + "-" : "_") + "nativeHeight"], (this.freezeDimensions && this.layoutDoc ? this.layoutDoc[HeightSym]() : this.props.PanelHeight()))); @computed get scaling() { const wscale = this.props.PanelWidth() / this.nativeWidth(); if (wscale * this.nativeHeight() > this.props.PanelHeight()) { @@ -40,8 +40,8 @@ export class ContentFittingDocumentView extends React.Component this.panelWidth; private PanelHeight = () => this.panelHeight; - @computed get panelWidth() { return this.nativeWidth && !this.props.Document._fitWidth ? this.nativeWidth() * this.contentScaling() : this.props.PanelWidth(); } - @computed get panelHeight() { return this.nativeHeight && !this.props.Document._fitWidth ? this.nativeHeight() * this.contentScaling() : this.props.PanelHeight(); } + @computed get panelWidth() { return this.nativeWidth() && !this.props.Document._fitWidth ? this.nativeWidth() * this.contentScaling() : this.props.PanelWidth(); } + @computed get panelHeight() { return this.nativeHeight() && !this.props.Document._fitWidth ? this.nativeHeight() * this.contentScaling() : this.props.PanelHeight(); } private getTransform = () => this.props.ScreenToLocalTransform().translate(-this.centeringOffset, -this.centeringYOffset).scale(1 / this.contentScaling()); private get centeringOffset() { return this.nativeWidth() && !this.props.Document._fitWidth ? (this.props.PanelWidth() - this.nativeWidth() * this.contentScaling()) / 2 : 0; } diff --git a/src/client/views/nodes/DocHolderBox.tsx b/src/client/views/nodes/DocHolderBox.tsx index b3b7cc4f3..91f96135f 100644 --- a/src/client/views/nodes/DocHolderBox.tsx +++ b/src/client/views/nodes/DocHolderBox.tsx @@ -135,8 +135,6 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent string[]; searchFilterDocs: () => Doc[]; FreezeDimensions?: boolean; - NativeWidth: () => number; - NativeHeight: () => number; + NativeWidth?: () => number; + NativeHeight?: () => number; Document: Doc; DataDoc?: Doc; getView?: (view: DocumentView) => any; @@ -119,8 +119,8 @@ export class DocumentView extends DocComponent(Docu public get ContentDiv() { return this._mainCont.current; } @computed get topMost() { return this.props.renderDepth === 0; } @computed get freezeDimensions() { return this.props.FreezeDimensions; } - @computed get nativeWidth() { return NumCast(this.layoutDoc[(this.props.DataDoc ? Doc.LayoutFieldKey(this.layoutDoc) + "-" : "_") + "nativeWidth"], this.props.NativeWidth() || (this.freezeDimensions ? this.layoutDoc[WidthSym]() : 0)); } - @computed get nativeHeight() { return NumCast(this.layoutDoc[(this.props.DataDoc ? Doc.LayoutFieldKey(this.layoutDoc) + "-" : "_") + "nativeHeight"], this.props.NativeHeight() || (this.freezeDimensions ? this.layoutDoc[HeightSym]() : 0)); } + @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), NumCast(this.layoutDoc[(this.props.DataDoc ? Doc.LayoutFieldKey(this.layoutDoc) + "-" : "_") + "nativeWidth"], (this.freezeDimensions ? this.layoutDoc[WidthSym]() : 0))); } + @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), NumCast(this.layoutDoc[(this.props.DataDoc ? Doc.LayoutFieldKey(this.layoutDoc) + "-" : "_") + "nativeHeight"], (this.freezeDimensions ? this.layoutDoc[HeightSym]() : 0))); } @computed get onClickHandler() { return this.props.onClick?.() ?? Cast(this.Document.onClick, ScriptField, Cast(this.layoutDoc.onClick, ScriptField, null)); } @computed get onDoubleClickHandler() { return this.props.onDoubleClick?.() ?? (Cast(this.layoutDoc.onDoubleClick, ScriptField, null) ?? this.Document.onDoubleClick); } @computed get onPointerDownHandler() { return this.props.onPointerDown?.() ?? ScriptCast(this.Document.onPointerDown); } diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 746a906c7..4ec5bc534 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -52,8 +52,8 @@ export interface FieldViewProps { PanelHeight: () => number; PanelPosition?: string; overflow?: boolean; - NativeHeight: () => number; - NativeWidth: () => number; + NativeHeight?: () => number; + NativeWidth?: () => number; setVideoBox?: (player: VideoBox) => void; ContentScaling: () => number; ChromeHeight?: () => number; diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx index a97f8c541..eab365445 100644 --- a/src/client/views/nodes/FilterBox.tsx +++ b/src/client/views/nodes/FilterBox.tsx @@ -164,8 +164,6 @@ export class FilterBox extends ViewBoxBaseComponent ({ nativeSize: this.nativeSize, width: this.layoutDoc[WidthSym]() }), ({ nativeSize, width }) => { - this.layoutDoc._nativeWidth = nativeSize.nativeWidth; - this.layoutDoc._nativeHeight = nativeSize.nativeHeight; - this.layoutDoc._nativeOrientation = nativeSize.nativeOrientation; - this.layoutDoc._height = width * nativeSize.nativeHeight / nativeSize.nativeWidth; + if (this.props.NativeWidth?.() !== 0 || !this.layoutDoc._height) { + this.layoutDoc._nativeWidth = nativeSize.nativeWidth; + this.layoutDoc._nativeHeight = nativeSize.nativeHeight; + this.layoutDoc._nativeOrientation = nativeSize.nativeOrientation; + this.layoutDoc._height = width * nativeSize.nativeHeight / nativeSize.nativeWidth; + } }, { fireImmediately: true }); } @@ -164,19 +166,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent GooglePhotos.Transactions.UploadImages([this.props.Document]), icon: "caret-square-right" }); funcs.push({ description: "Copy path", event: () => Utils.CopyText(field.url.href), icon: "expand-arrows-alt" }); - // funcs.push({ - // description: "Reset Native Dimensions", event: action(async () => { - // const curNW = NumCast(this.dataDoc[this.fieldKey + "-nativeWidth"]); - // const curNH = NumCast(this.dataDoc[this.fieldKey + "-nativeHeight"]); - // if (this.props.PanelWidth() / this.props.PanelHeight() > curNW / curNH) { - // this.dataDoc[this.fieldKey + "-nativeWidth"] = this.props.PanelHeight() * curNW / curNH; - // this.dataDoc[this.fieldKey + "-nativeHeight"] = this.props.PanelHeight(); - // } else { - // this.dataDoc[this.fieldKey + "-nativeWidth"] = this.props.PanelWidth(); - // this.dataDoc[this.fieldKey + "-nativeHeight"] = this.props.PanelWidth() * curNH / curNW; - // } - // }), icon: "expand-arrows-alt" - // }); const existingAnalyze = ContextMenu.Instance?.findByDescription("Analyzers..."); const modes: ContextMenuProps[] = existingAnalyze && "subitems" in existingAnalyze ? existingAnalyze.subitems : []; @@ -434,8 +423,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent { whenActiveChanged: emptyFunction, ScreenToLocalTransform: Transform.Identity, focus: emptyFunction, - NativeHeight: returnZero, - NativeWidth: returnZero, PanelWidth: this.props.PanelWidth, PanelHeight: this.props.PanelHeight, addDocTab: returnFalse, diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index a067f23af..64ae1051b 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -22,8 +22,6 @@ export class LinkBox extends ViewBoxBaseComponent( { whenActiveChanged={returnFalse} bringToFront={returnFalse} ContentScaling={returnOne} - NativeWidth={returnZero} - NativeHeight={returnZero} backgroundColor={this.props.backgroundColor} />; } diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index 5d51c420b..34ad7f3be 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -172,8 +172,6 @@ export class ScreenshotBox extends ViewBoxBaseComponent { - Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth(), this.props.NativeHeight()); + Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); } specificContextMenu = (e: React.MouseEvent): void => { const cm = ContextMenu.Instance; @@ -650,8 +650,6 @@ export class WebBox extends ViewBoxAnnotatableComponent { addDocTab={this._textBox.props.addDocTab} pinToPres={returnFalse} renderDepth={self._textBox.props.renderDepth + 1} - NativeHeight={returnZero} - NativeWidth={returnZero} PanelWidth={finalLayout[WidthSym]} PanelHeight={finalLayout[HeightSym]} focus={this.outerFocus} diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index f0dc92b90..335605a00 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -562,7 +562,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp @undoBatch @action toggleNativeDimensions = () => { - Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth(), this.props.NativeHeight()); + Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth?.()||0, this.props.NativeHeight?.()||0); } public static get DefaultLayout(): Doc | string | undefined { @@ -1565,8 +1565,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp target._nativeWidth ? NumCast(target._nativeWidth) : 0} - NativeHeight={() => target._nativeHeight ? NumCast(target._nativeHeight) : 0} + NativeWidth={target._nativeWidth ? (() => NumCast(target._nativeWidth)) : undefined} + NativeHeight={target._natvieHeight ? (() => NumCast(target._nativeHeight)) : undefined} /> ; diff --git a/src/client/views/nodes/formattedText/RichTextSchema.tsx b/src/client/views/nodes/formattedText/RichTextSchema.tsx index f0bacb735..a80d2639d 100644 --- a/src/client/views/nodes/formattedText/RichTextSchema.tsx +++ b/src/client/views/nodes/formattedText/RichTextSchema.tsx @@ -145,8 +145,6 @@ export class DashDocView { addDocTab={this._textBox.props.addDocTab} pinToPres={returnFalse} renderDepth={self._textBox.props.renderDepth + 1} - NativeHeight={returnZero} - NativeWidth={returnZero} PanelWidth={finalLayout[WidthSym]} PanelHeight={finalLayout[HeightSym]} focus={this.outerFocus} diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 18be9b679..65eb23a06 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -679,8 +679,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent
; diff --git a/src/mobile/AudioUpload.tsx b/src/mobile/AudioUpload.tsx index 5e86246c5..81b3869ae 100644 --- a/src/mobile/AudioUpload.tsx +++ b/src/mobile/AudioUpload.tsx @@ -94,8 +94,6 @@ export class AudioUpload extends React.Component { ContentScaling={returnOne} PanelWidth={() => 600} PanelHeight={() => 400} - NativeHeight={returnZero} - NativeWidth={returnZero} renderDepth={0} focus={emptyFunction} backgroundColor={() => "rgba(0,0,0,0)"} diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index ae2c07c8e..cb5191e61 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -213,8 +213,6 @@ export class MobileInterface extends React.Component { ContentScaling={returnOne} PanelWidth={this.returnWidth} PanelHeight={this.returnHeight} - NativeHeight={returnZero} - NativeWidth={returnZero} renderDepth={0} focus={emptyFunction} backgroundColor={this.whitebackground} -- cgit v1.2.3-70-g09d2 From d5e086e4c161e7d445f6d69faca8ffc7391ed3dd Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 9 Sep 2020 04:04:58 -0400 Subject: fixed doc decorations on selected treeview items to not overlap as much. fixed contentFitting's screentToLocalXf which wasn't wroking for nested tempaltes with native dimensions --- src/client/documents/Documents.ts | 2 +- src/client/util/CurrentUserUtils.ts | 23 +++++++++++++++++++++- src/client/util/HypothesisUtils.ts | 2 +- src/client/views/DocumentDecorations.tsx | 4 ++-- src/client/views/collections/CollectionSubView.tsx | 17 ++++++++++------ .../views/collections/CollectionTreeView.scss | 1 + .../views/collections/CollectionTreeView.tsx | 4 ++-- .../collections/collectionFreeForm/MarqueeView.tsx | 2 +- .../views/nodes/ContentFittingDocumentView.scss | 2 ++ .../views/nodes/ContentFittingDocumentView.tsx | 21 ++++++++++---------- src/client/views/nodes/ImageBox.tsx | 4 ++-- src/client/views/nodes/WebBox.tsx | 8 +++++++- 12 files changed, 63 insertions(+), 27 deletions(-) (limited to 'src/client/views/nodes/ImageBox.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 7e276747c..2f7b5a449 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1050,7 +1050,7 @@ export namespace DocUtils { }); } ctor = Docs.Create.WebDocument; - options = { ...options, _nativeWidth: 850, _nativeHeight: 962, _width: 500, _height: 566, title: path, }; + options = { ...options, _nativeWidth: 850, _width: 400, _height: 512, title: path, }; } return ctor ? ctor(path, options) : undefined; } diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 7a1c193c1..82e80a394 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -245,6 +245,26 @@ export class CurrentUserUtils { removeDropProperties: new List(["dropAction"]), title: "detail view", icon: "window-maximize", system: true }); } + if (doc["template-button-simple"] === undefined) { + const { TextDocument, MasonryDocument, CarouselDocument } = Docs.Create; + + const openInTarget = ScriptField.MakeScript("openOnRight(self.doubleClickView)"); + const carousel = CarouselDocument([], { + title: "data", _height: 350, _itemIndex: 0, "_carousel-caption-xMargin": 10, "_carousel-caption-yMargin": 10, + onChildDoubleClick: openInTarget, backgroundColor: "#9b9b9b3F", system: true + }); + + const shared = { _chromeStatus: "disabled", _autoHeight: true, _xMargin: 0 }; + const detailViewOpts = { title: "detailView", _width: 300, _fontFamily: "Arial", _fontSize: "12pt" }; + const detailView = Docs.Create.StackingDocument([carousel], { ...shared, ...detailViewOpts, system: true }); + detailView.isTemplateDoc = makeTemplate(detailView); + + doc["template-button-simple"] = CurrentUserUtils.ficon({ + onDragStart: ScriptField.MakeFunction('copyDragFactory(this.dragFactory)'), + dragFactory: new PrefetchProxy(detailView) as any as Doc, + removeDropProperties: new List(["dropAction"]), title: "simple view", icon: "window-maximize", system: true + }); + } const requiredTypes = [ doc["template-button-slides"] as Doc, @@ -252,6 +272,7 @@ export class CurrentUserUtils { doc["template-button-query"] as Doc, doc["template-mobile-button"] as Doc, doc["template-button-detail"] as Doc, + doc["template-button-simple"] as Doc, doc["template-button-link"] as Doc, doc["template-button-switch"] as Doc]; if (doc["template-buttons"] === undefined) { @@ -439,7 +460,7 @@ export class CurrentUserUtils { { _width: 250, _height: 250, title: "container", system: true, cloneFieldFilter: new List(["system"]) }); } if (doc.emptyWebpage === undefined) { - doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 400, useCors: true, system: true, cloneFieldFilter: new List(["system"]) }); + doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, _height: 512, _width: 400, useCors: true, system: true, cloneFieldFilter: new List(["system"]) }); } if (doc.activeMobileMenu === undefined) { this.setupActiveMobileMenu(doc); diff --git a/src/client/util/HypothesisUtils.ts b/src/client/util/HypothesisUtils.ts index 4a5b52e1e..8cb523093 100644 --- a/src/client/util/HypothesisUtils.ts +++ b/src/client/util/HypothesisUtils.ts @@ -21,7 +21,7 @@ export namespace Hypothesis { export const getSourceWebDoc = async (uri: string) => { const result = await findWebDoc(uri); console.log(result ? "existing doc found" : "existing doc NOT found"); - return result || Docs.Create.WebDocument(uri, { title: uri, _nativeWidth: 850, _nativeHeight: 962, _width: 400, useCors: true }); // create and return a new Web doc with given uri if no matching docs are found + return result || Docs.Create.WebDocument(uri, { title: uri, _nativeWidth: 850, _height: 512, _width: 400, useCors: true }); // create and return a new Web doc with given uri if no matching docs are found }; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index e5c6f0aa9..abad53b6d 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -647,8 +647,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> top: bounds.y - this._resizeBorderWidth / 2 - this._titleHeight, }}> {closeIcon} - {titleArea} - {SelectionManager.SelectedDocuments().length !== 1 || seldoc.Document.type === DocumentType.INK || minimal ? (null) : + {Object.keys(SelectionManager.SelectedDocuments()[0].props).includes("treeViewDoc") ? (null) : titleArea} + {SelectionManager.SelectedDocuments().length !== 1 || seldoc.Document.type === DocumentType.INK || minimal || Object.keys(SelectionManager.SelectedDocuments()[0].props).includes("treeViewDoc") ? (null) : {`${seldoc.finalLayoutKey.includes("icon") ? "De" : ""}Iconify Document`}} placement="top">
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 81f3ddad2..aff7e8000 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -270,6 +270,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: return; } + console.log("Html = ", html); if (html) { if (FormattedTextBox.IsFragment(html)) { const href = FormattedTextBox.GetHref(html); @@ -353,14 +354,15 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: if (uriList || text) { if ((uriList || text).includes("www.youtube.com/watch") || text.includes("www.youtube.com/embed")) { const url = (uriList || text).replace("youtube.com/watch?v=", "youtube.com/embed/").split("&")[0]; - this.addDocument(Docs.Create.VideoDocument(url, { + console.log("Video URI = ", uriList); + console.log("Add:" + this.addDocument(Docs.Create.VideoDocument(url, { ...options, title: url, _width: 400, _height: 315, _nativeWidth: 600, _nativeHeight: 472.5 - })); + }))); return; } // let matches: RegExpExecArray | null; @@ -381,27 +383,30 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: // } } if (uriList) { + ; + console.log("Web URI = ", uriList); const existingWebDoc = await Hypothesis.findWebDoc(uriList); if (existingWebDoc) { const alias = Doc.MakeAlias(existingWebDoc); alias.x = options.x; alias.y = options.y; alias._nativeWidth = 850; - alias._nativeHeight = 962; + alias._height = 512; alias._width = 400; this.addDocument(alias); } else { + console.log("Adding ..."); const newDoc = Docs.Create.WebDocument(uriList, { ...options, title: uriList.split("#annotations:")[0], _width: 400, - _height: 315, + _height: 512, _nativeWidth: 850, - _nativeHeight: 962, useCors: true }); + console.log(" ... " + newDoc.title); newDoc.data = new WebField(uriList.split("#annotations:")[0]); // clean hypothes.is URLs that reference a specific annotation (eg. https://en.wikipedia.org/wiki/Cartoon#annotations:t7qAeNbCEeqfG5972KR2Ig) - this.addDocument(newDoc); + console.log(" ... " + this.addDocument(newDoc) + " " + newDoc.title); } return; } diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index b0a791a21..e192f1760 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -109,6 +109,7 @@ .treeViewItem-border { display: flex; border-left: dashed 1px #00000042; + overflow: hidden; } .treeViewItem-header-editing, diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 7b3e95404..6c3fb56e2 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -348,8 +348,8 @@ class TreeView extends React.Component { const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth; return
this.props.addDocTab( - Docs.Create.WebDocument(`https://bing.com/search?q=${str}`, { _width: 200, x, y, _nativeHeight: 962, _nativeWidth: 850, isAnnotating: false, title: "bing", useCors: true }), "add:right")); + Docs.Create.WebDocument(`https://bing.com/search?q=${str}`, { _width: 400, x, y, _height: 512, _nativeWidth: 850, isAnnotating: false, title: "bing", useCors: true }), "add:right")); cm.displayMenu(this._downX, this._downY); e.stopPropagation(); diff --git a/src/client/views/nodes/ContentFittingDocumentView.scss b/src/client/views/nodes/ContentFittingDocumentView.scss index 50562951a..679073d44 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.scss +++ b/src/client/views/nodes/ContentFittingDocumentView.scss @@ -3,6 +3,8 @@ .contentFittingDocumentView { position: relative; display: flex; + width: 100%; + height: 100%; .contentFittingDocumentView-previewDoc { position: relative; diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index c0bcc0a6d..7cb27451f 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -6,7 +6,7 @@ import { Doc, HeightSym, Opt, WidthSym } from "../../../fields/Doc"; import { ScriptField } from "../../../fields/ScriptField"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; -import { emptyFunction, returnVal } from "../../../Utils"; +import { emptyFunction, returnVal, OmitKeys } from "../../../Utils"; import { dropActionType } from "../../util/DragManager"; import { CollectionView } from "../collections/CollectionView"; import { DocumentView, DocumentViewProps } from "../nodes/DocumentView"; @@ -34,8 +34,9 @@ export class ContentFittingDocumentView extends React.Component this.props.PanelHeight()) { - return (this.props.PanelHeight() / this.nativeHeight()) || 1; + return hscale || 1; } return wscale || 1; } @@ -47,7 +48,10 @@ export class ContentFittingDocumentView extends React.Component this.props.dontCenter ? this.props.ScreenToLocalTransform().scale(1 / this.contentScaling()) : this.props.ScreenToLocalTransform().translate(-this.centeringOffset, -this.centeringYOffset).scale(1 / this.contentScaling()); + @computed get childXf() { return this.props.DataDoc ? 1 : 1 / this.contentScaling(); } + private getTransform = () => this.props.dontCenter ? + this.props.ScreenToLocalTransform().scale(this.childXf) : + this.props.ScreenToLocalTransform().translate(-this.centeringOffset, -this.centeringYOffset).scale(this.childXf); private get centeringOffset() { return this.nativeWidth() && !this.props.Document._fitWidth ? (this.props.PanelWidth() - this.nativeWidth() * this.contentScaling()) / 2 : 0; } private get centeringYOffset() { return Math.abs(this.centeringOffset) < 0.001 ? (this.props.PanelHeight() - this.nativeHeight() * this.contentScaling()) / 2 : 0; } @@ -55,10 +59,7 @@ export class ContentFittingDocumentView extends React.Component 0.001 ? "auto" : this.props.PanelWidth(), - height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight(), - }}> + return (
{!this.props.Document || !this.props.PanelWidth ? (null) : (
0.001 ? `${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() }}> - - (); private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean) => void); + constructor(props: any) { + super(props); + this.dataDoc[this.fieldKey + "-nativeWidth"] = this.Document._nativeWidth = NumCast(this.dataDoc[this.props.fieldKey + "-nativeWidth"], NumCast(this.Document._nativeWidth, 850)); + this.dataDoc[this.fieldKey + "-nativeHeight"] = this.Document._nativeHeight = NumCast(this.dataDoc[this.props.fieldKey + "-nativeHeight"], NumCast(this.Document._nativeHeight, this.Document[HeightSym]() / this.Document[WidthSym]() * 850)); + } + iframeLoaded = action((e: any) => { const iframe = this._iframeRef.current; if (iframe && iframe.contentDocument) { -- cgit v1.2.3-70-g09d2