From 7132c4c8335fa3c7c5a5fa2386b710321a0c883d Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 15 Jun 2020 15:53:09 -0500 Subject: resizing images based on column width --- .../views/collections/CollectionSchemaCells.tsx | 118 ++++++++++++++++++--- .../views/collections/CollectionSchemaHeaders.tsx | 4 +- 2 files changed, 103 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 8164e37e3..e34a9e450 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -3,7 +3,7 @@ import { action, observable, trace } from "mobx"; import { observer } from "mobx-react"; import { CellInfo } from "react-table"; import "react-table/react-table.css"; -import { emptyFunction, returnFalse, returnZero, returnOne } from "../../../Utils"; +import { emptyFunction, returnFalse, returnZero, returnOne, Utils } from "../../../Utils"; import { Doc, DocListCast, Field, Opt } from "../../../fields/Doc"; import { Id } from "../../../fields/FieldSymbols"; import { KeyCodes } from "../../util/KeyCodes"; @@ -25,6 +25,8 @@ import { undoBatch } from "../../util/UndoManager"; import { SnappingManager } from "../../util/SnappingManager"; import { ComputedField } from "../../../fields/ScriptField"; import { ImageField } from "../../../fields/URLField"; +import { KeysDropdown } from "./CollectionSchemaHeaders"; +const path = require('path'); library.add(faExpand); @@ -322,6 +324,21 @@ export class CollectionSchemaImageCell extends CollectionSchemaCell { // render() { // return this.renderCellWithType("image"); // } + + choosePath(url: URL, dataDoc: any) { + const lower = url.href.toLowerCase(); + if (url.protocol === "data") { + return url.href; + } else if (url.href.indexOf(window.location.origin) === -1) { + return Utils.CorsProxy(url.href); + } else if (!/\.(png|jpg|jpeg|gif|webp)$/.test(lower)) { + return url.href;//Why is this here + } + const ext = path.extname(url.href); + const _curSuffix = "_o"; + return url.href.replace(ext, _curSuffix + ext); + } + render() { const props: FieldViewProps = { Document: this.props.rowProps.original, @@ -349,21 +366,40 @@ export class CollectionSchemaImageCell extends CollectionSchemaCell { ContentScaling: returnOne }; - const data = Cast(props.DataDoc?.data, ImageField); - const url = data ? data.url.href : undefined; - console.log(url); + let image = true; + let url = []; + if (props.DataDoc) { + const field = Cast(props.DataDoc[props.fieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc + const alts = DocListCast(props.DataDoc[props.fieldKey + "-alternates"]); // retrieve alternate documents that may be rendered as alternate images + const altpaths = alts.map(doc => Cast(doc[Doc.LayoutFieldKey(doc)], ImageField, null)?.url).filter(url => url).map(url => this.choosePath(url, props.DataDoc)); // access the primary layout data of the alternate documents + const paths = field ? [this.choosePath(field.url, props.DataDoc), ...altpaths] : altpaths; + if (paths.length) { + url = paths; + } else { + url = [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")]; + image = false; + } + //url = paths.length ? paths : [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")]; + } else { + url = [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")]; + image = false; + } + const heightToWidth = NumCast(props.DataDoc?._nativeHeight) / NumCast(props.DataDoc?._nativeWidth); + const height = this.props.rowProps.width * heightToWidth; if (props.fieldKey === "data") { - if (url) { + if (url !== []) { const reference = React.createRef(); return (
- +
); + } else { return this.renderCellWithType("image"); } @@ -375,20 +411,68 @@ export class CollectionSchemaImageCell extends CollectionSchemaCell { @observer export class CollectionSchemaListCell extends CollectionSchemaCell { - render() { - return this.renderCellWithType("list"); - } // render() { - // const reference = React.createRef(); - // return ( - //
- //
- // - //
- //
- // ); + // return this.renderCellWithType("list"); // } + + emptyFunc() { + + } + render() { + const props: FieldViewProps = { + Document: this.props.rowProps.original, + DataDoc: this.props.rowProps.original, + LibraryPath: [], + dropAction: "alias", + bringToFront: emptyFunction, + rootSelected: returnFalse, + fieldKey: this.props.rowProps.column.id as string, + ContainingCollectionView: this.props.CollectionView, + ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document, + isSelected: returnFalse, + select: emptyFunction, + renderDepth: this.props.renderDepth + 1, + ScreenToLocalTransform: Transform.Identity, + focus: emptyFunction, + active: returnFalse, + whenActiveChanged: emptyFunction, + PanelHeight: returnZero, + PanelWidth: returnZero, + NativeHeight: returnZero, + NativeWidth: returnZero, + addDocTab: this.props.addDocTab, + pinToPres: this.props.pinToPres, + ContentScaling: returnOne + }; + + let value = ""; + const reference = React.createRef(); + const data = props.DataDoc?.fieldKey; + + if (Array.isArray(data)) { + + + + return ( +
+
+ +
+
+ ); + } else { + return this.renderCellWithType("list"); + } + } } @observer diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 85908c0ca..0d6cf4474 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -267,7 +267,7 @@ export class CollectionSchemaColumnMenu extends React.Component } -interface KeysDropdownProps { +export interface KeysDropdownProps { keyValue: string; possibleKeys: string[]; existingKeys: string[]; @@ -277,7 +277,7 @@ interface KeysDropdownProps { setIsEditing: (isEditing: boolean) => void; } @observer -class KeysDropdown extends React.Component { +export class KeysDropdown extends React.Component { @observable private _key: string = this.props.keyValue; @observable private _searchTerm: string = this.props.keyValue; @observable private _isOpen: boolean = false; -- cgit v1.2.3-70-g09d2