From 21b1e20106ff49c02657c88f503ef46bc7e4fb07 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 16 Apr 2019 23:09:03 -0400 Subject: various bug fixes --- src/client/northstar/dash-nodes/HistogramBox.tsx | 2 +- .../views/collections/CollectionBaseView.tsx | 9 ++++-- .../views/collections/CollectionDockingView.scss | 5 ++++ .../views/collections/CollectionDockingView.tsx | 7 ++++- .../views/collections/CollectionSchemaView.tsx | 14 ++++++---- src/client/views/collections/CollectionView.tsx | 4 ++- .../CollectionFreeFormLinksView.tsx | 4 +-- .../CollectionFreeFormRemoteCursors.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- .../collections/collectionFreeForm/MarqueeView.tsx | 1 - src/client/views/nodes/DocumentView.scss | 4 +-- src/client/views/nodes/ImageBox.tsx | 32 ++++++---------------- 12 files changed, 44 insertions(+), 42 deletions(-) (limited to 'src') diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx index 3e94fed81..0e84ace50 100644 --- a/src/client/northstar/dash-nodes/HistogramBox.tsx +++ b/src/client/northstar/dash-nodes/HistogramBox.tsx @@ -118,7 +118,7 @@ export class HistogramBox extends React.Component { this.props.Document.GetTAsync(this.props.fieldKey, HistogramField).then((histoOp: Opt) => runInAction(() => { this.HistoOp = histoOp ? histoOp.Data : HistogramOperation.Empty; if (this.HistoOp !== HistogramOperation.Empty) { - reaction(() => this.props.Document.GetList(KeyStore.LinkedFromDocs, []), (docs: Document[]) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true }); + reaction(() => this.props.Document.GetList(KeyStore.LinkedFromDocs, [] as Document[]), (docs) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true }); reaction(() => this.props.Document.GetList(KeyStore.BrushingDocs, []).length, () => { let brushingDocs = this.props.Document.GetList(KeyStore.BrushingDocs, [] as Document[]); diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index 444f6fc26..4fda38a26 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -61,13 +61,16 @@ export class CollectionBaseView extends React.Component { } createsCycle(documentToAdd: Document, containerDocument: Document): boolean { - let data = documentToAdd.GetList(KeyStore.Data, []); - for (const doc of data) { + if (!(documentToAdd instanceof Document)) { + return false; + } + let data = documentToAdd.GetList(KeyStore.Data, [] as Document[]); + for (const doc of data.filter(d => d instanceof Document)) { if (this.createsCycle(doc, containerDocument)) { return true; } } - let annots = documentToAdd.GetList(KeyStore.Annotations, []); + let annots = documentToAdd.GetList(KeyStore.Annotations, [] as Document[]); for (const annot of annots) { if (this.createsCycle(annot, containerDocument)) { return true; diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 0e7e0afa7..5ed4567cf 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -2,6 +2,11 @@ .collectiondockingview-content { height: 100%; + text-align:center; + .documentView-node-topmost { + transform-origin: center top; + display: inline-block; + } } .lm_active .messageCounter{ color:white; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 4ea21b2f5..b998362f4 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -327,7 +327,12 @@ export class DockedFrameRenderer extends React.Component { private _nativeWidth = () => this._document!.GetNumber(KeyStore.NativeWidth, this._panelWidth); private _nativeHeight = () => this._document!.GetNumber(KeyStore.NativeHeight, this._panelHeight); - private _contentScaling = () => this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); + private _contentScaling = () => { + let wscale = this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); + if (wscale * this._nativeHeight() > this._panelHeight) + return this._panelHeight / (this._nativeHeight() ? this._nativeHeight() : this._panelHeight); + return wscale; + } ScreenToLocalTransform = () => { let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 4f4068e7a..1defdba7e 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -167,7 +167,7 @@ export class CollectionSchemaView extends CollectionSubView { @computed get columns() { - return this.props.Document.GetList(KeyStore.ColumnsKey, []); + return this.props.Document.GetList(KeyStore.ColumnsKey, [] as Key[]); } @action @@ -195,7 +195,7 @@ export class CollectionSchemaView extends CollectionSubView { @computed get findAllDocumentKeys(): { [id: string]: boolean } { - const docs = this.props.Document.GetList(this.props.fieldKey, []); + const docs = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); let keys: { [id: string]: boolean } = {}; if (this._optionsActivated > -1) { // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields. @@ -237,7 +237,7 @@ export class CollectionSchemaView extends CollectionSubView { } @action setScaling = (r: any) => { - const children = this.props.Document.GetList(this.props.fieldKey, []); + const children = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; this._panelWidth = r.entry.width; this._panelHeight = r.entry.height ? r.entry.height : this._panelHeight; @@ -253,8 +253,10 @@ export class CollectionSchemaView extends CollectionSubView { getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this._dividerX - this._tableWidth, - this.borderWidth).scale(1 / this._contentScaling); onPointerDown = (e: React.PointerEvent): void => { - if (e.button === 1 && this.props.isSelected() && !e.altKey && !e.ctrlKey && !e.metaKey) { - e.stopPropagation(); + if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey) { + if (this.props.isSelected()) + e.stopPropagation(); + else e.preventDefault(); } } @@ -293,7 +295,7 @@ export class CollectionSchemaView extends CollectionSubView { library.add(faCog); library.add(faPlus); const columns = this.columns; - const children = this.props.Document.GetList(this.props.fieldKey, []); + const children = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; //all the keys/columns that will be displayed in the schema const allKeys = this.findAllDocumentKeys; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index bd7a5635f..675e720e2 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -29,8 +29,10 @@ export class CollectionView extends React.Component { return (null); } + get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey.Id === KeyStore.Annotations.Id; } // bcz: ? Why do we need to compare Id's? + onContextMenu = (e: React.MouseEvent): void => { - if (!e.isPropagationStopped() && this.props.Document.Id !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + if (!this.isAnnotationOverlay && !e.isPropagationStopped() && this.props.Document.Id !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 ContextMenu.Instance.addItem({ description: "Freeform", event: undoBatch(() => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform)) }); ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema)) }); ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree)) }); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx index 2f684a54e..cd74d3a84 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx @@ -16,9 +16,9 @@ export class CollectionFreeFormLinksView extends React.Component this.props.Document.GetList(this.props.fieldKey, []).map(doc => doc.GetNumber(KeyStore.X, 0)), + this._brushReactionDisposer = reaction(() => this.props.Document.GetList(this.props.fieldKey, [] as Document[]).map(doc => doc.GetNumber(KeyStore.X, 0)), () => { - let views = this.props.Document.GetList(this.props.fieldKey, []); + let views = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); for (let i = 0; i < views.length; i++) { for (let j = 0; j < views.length; j++) { let srcDoc = views[j]; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx index 751ea8190..cf0a6de00 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx @@ -12,7 +12,7 @@ export class CollectionFreeFormRemoteCursors extends React.Component(KeyStore.Cursors, []); + let cursors = doc.GetList(KeyStore.Cursors, [] as CursorEntry[]); let notMe = cursors.filter(entry => entry.Data[0][0] !== id); return id ? notMe : []; } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 3ae64d2c6..97708ce19 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -218,7 +218,7 @@ export class CollectionFreeFormView extends CollectionSubView { @action bringToFront(doc: Document) { - this.props.Document.GetList(this.props.fieldKey, []).slice().sort((doc1, doc2) => { + this.props.Document.GetList(this.props.fieldKey, [] as Document[]).slice().sort((doc1, doc2) => { if (doc1 === doc) return 1; if (doc2 === doc) return -1; return doc1.GetNumber(KeyStore.ZIndex, 0) - doc2.GetNumber(KeyStore.ZIndex, 0); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 96d59c831..65f461b27 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -147,7 +147,6 @@ export class MarqueeView extends React.Component d.SetNumber(KeyStore.X, d.GetNumber(KeyStore.X, 0) - bounds.left - bounds.width / 2); d.SetNumber(KeyStore.Y, d.GetNumber(KeyStore.Y, 0) - bounds.top - bounds.height / 2); d.SetNumber(KeyStore.Page, -1); - d.SetText(KeyStore.Title, "" + d.Width() + " " + d.Height()); return d; }); let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField); diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 6383ac3f6..690ee50e8 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -1,6 +1,6 @@ @import "../globalCssVariables"; -.documentView-node, .documentView-node-topMost { +.documentView-node, .documentView-node-topmost { position: inherit; top: 0; left:0; @@ -29,7 +29,7 @@ height: calc(100% - 20px); } } -.documentView-node-topMost { +.documentView-node-topmost { background: white; } diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index ac54321d5..fe0b07bc0 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -1,24 +1,20 @@ -import { action, observable, trace } from 'mobx'; +import { action, observable } from 'mobx'; import { observer } from "mobx-react"; import Lightbox from 'react-image-lightbox'; import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app +import { Document } from '../../../fields/Document'; import { FieldWaiting } from '../../../fields/Field'; import { ImageField } from '../../../fields/ImageField'; import { KeyStore } from '../../../fields/KeyStore'; +import { ListField } from '../../../fields/ListField'; +import { Utils } from '../../../Utils'; +import { DragManager } from '../../util/DragManager'; +import { undoBatch } from '../../util/UndoManager'; import { ContextMenu } from "../../views/ContextMenu"; import { FieldView, FieldViewProps } from './FieldView'; import "./ImageBox.scss"; import React = require("react"); -import { Utils } from '../../../Utils'; -import { ListField } from '../../../fields/ListField'; -import { DragManager } from '../../util/DragManager'; -import { undoBatch, UndoManager } from '../../util/UndoManager'; -import { TextField } from '../../../fields/TextField'; -import { Document } from '../../../fields/Document'; -import { RouteStore } from '../../../server/RouteStore'; -import { ServerUtils } from '../../../server/ServerUtil'; -import { CollectionSubView } from '../collections/CollectionSubView'; @observer export class ImageBox extends React.Component { @@ -36,10 +32,6 @@ export class ImageBox extends React.Component { super(props); this._imgRef = React.createRef(); - this.state = { - photoIndex: 0, - isOpen: false, - }; } @action @@ -49,8 +41,6 @@ export class ImageBox extends React.Component { if (this._photoIndex == 0) this.props.Document.SetNumber(KeyStore.NativeHeight, this.props.Document.GetNumber(KeyStore.NativeWidth, 0) * h / w); } - componentDidMount() { - } protected createDropTarget = (ele: HTMLDivElement) => { if (this.dropDisposer) { @@ -60,10 +50,6 @@ export class ImageBox extends React.Component { this.dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.drop.bind(this) } }); } } - - componentWillUnmount() { - } - onDrop = (e: React.DragEvent) => { e.stopPropagation(); e.preventDefault(); @@ -158,8 +144,8 @@ export class ImageBox extends React.Component { let dist = Math.min(nativeWidth / paths.length, 40); let left = (nativeWidth - paths.length * dist) / 2; return paths.map((p, i) => -
-
{ e.stopPropagation(); this.onDotDown(i); }} /> +
+
{ e.stopPropagation(); this.onDotDown(i); }} />
) } @@ -174,7 +160,7 @@ export class ImageBox extends React.Component { return (
Image not found - {this.dots(paths)} + {paths.length > 1 ? this.dots(paths) : (null)} {this.lightbox(paths)}
); } -- cgit v1.2.3-70-g09d2 From 9c82d21123aaaa745a33e9dfe8775ef1db73c035 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 17 Apr 2019 01:27:35 -0400 Subject: small fixes to full screen and context menu on mac --- src/client/views/collections/CollectionDockingView.scss | 4 ++++ src/client/views/collections/CollectionDockingView.tsx | 14 +++++++++++--- src/client/views/nodes/DocumentView.tsx | 3 ++- 3 files changed, 17 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 5ed4567cf..50da2b11d 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -4,10 +4,14 @@ height: 100%; text-align:center; .documentView-node-topmost { + text-align:left; transform-origin: center top; display: inline-block; } } +.collectiondockingview-content-height { + height: 100%; +} .lm_active .messageCounter{ color:white; background: #999999; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index b998362f4..2b886adb6 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -19,6 +19,7 @@ import { ServerUtils } from "../../../server/ServerUtil"; import { DragManager, DragLinksAsDocuments } from "../../util/DragManager"; import { TextField } from "../../../fields/TextField"; import { ListField } from "../../../fields/ListField"; +import { thisExpression } from "babel-types"; @observer export class CollectionDockingView extends React.Component { @@ -335,16 +336,23 @@ export class DockedFrameRenderer extends React.Component { } ScreenToLocalTransform = () => { - let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!); - return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._contentScaling()); + let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!.children[0].firstChild as HTMLElement); + let scaling = scale; + { + let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!); + scaling = scale; + } + return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scaling / this._contentScaling()); } render() { if (!this._document) { return (null); } + let wscale = this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); + let name = (wscale * this._nativeHeight() > this._panelHeight) ? "" : "-height"; var content = -
+
{ //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) }) ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }); ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15); - SelectionManager.SelectDoc(this, e.ctrlKey); + if (!SelectionManager.IsSelected(this)) + SelectionManager.SelectDoc(this, false); } @action -- cgit v1.2.3-70-g09d2 From 1319573481868f2647259fce37cd15b35c3cafad Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 17 Apr 2019 12:07:55 -0400 Subject: fixed onactivechanged exception. restored preview region --- src/client/util/SelectionManager.ts | 4 ++-- src/client/views/Main.tsx | 2 +- src/client/views/MainOverlayTextBox.tsx | 2 +- src/client/views/collections/CollectionBaseView.tsx | 8 ++++---- src/client/views/collections/CollectionDockingView.tsx | 2 +- src/client/views/collections/CollectionSchemaView.tsx | 11 +++++------ .../collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/FieldView.tsx | 4 ++-- src/client/views/nodes/KeyValuePair.tsx | 2 +- 10 files changed, 19 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 320553952..b15a93d9f 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -18,13 +18,13 @@ export namespace SelectionManager { if (manager.SelectedDocuments.indexOf(doc) === -1) { manager.SelectedDocuments.push(doc); - doc.props.onActiveChanged(true); + doc.props.whenActiveChanged(true); } } @action DeselectAll(): void { - manager.SelectedDocuments.map(dv => dv.props.onActiveChanged(false)); + manager.SelectedDocuments.map(dv => dv.props.whenActiveChanged(false)); manager.SelectedDocuments = []; MainOverlayTextBox.Instance.SetTextDoc(); } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 0469211fa..84fdeab92 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -190,7 +190,7 @@ export class Main extends React.Component { selectOnLoad={false} focus={emptyDocFunction} parentActive={returnTrue} - onActiveChanged={emptyFunction} + whenActiveChanged={emptyFunction} ContainingCollectionView={undefined} />}
} diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx index 141b3ad74..8cb01117c 100644 --- a/src/client/views/MainOverlayTextBox.tsx +++ b/src/client/views/MainOverlayTextBox.tsx @@ -101,7 +101,7 @@ export class MainOverlayTextBox extends React.Component return
this._textXf} focus={emptyDocFunction} /> + selectOnLoad={true} ContainingCollectionView={undefined} whenActiveChanged={emptyFunction} active={returnTrue} ScreenToLocalTransform={() => this._textXf} focus={emptyDocFunction} />
; } diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index 4fda38a26..a8b061b04 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -22,7 +22,7 @@ export interface CollectionRenderProps { removeDocument: (document: Document) => boolean; moveDocument: (document: Document, targetCollection: Document, addDocument: (document: Document) => boolean) => boolean; active: () => boolean; - onActiveChanged: (isActive: boolean) => void; + whenActiveChanged: (isActive: boolean) => void; } export interface CollectionViewProps extends FieldViewProps { @@ -55,9 +55,9 @@ export class CollectionBaseView extends React.Component { //TODO should this be observable? private _isChildActive = false; - onActiveChanged = (isActive: boolean) => { + whenActiveChanged = (isActive: boolean) => { this._isChildActive = isActive; - this.props.onActiveChanged(isActive); + this.props.whenActiveChanged(isActive); } createsCycle(documentToAdd: Document, containerDocument: Document): boolean { @@ -184,7 +184,7 @@ export class CollectionBaseView extends React.Component { removeDocument: this.removeDocument, moveDocument: this.moveDocument, active: this.active, - onActiveChanged: this.onActiveChanged, + whenActiveChanged: this.whenActiveChanged, }; const viewtype = this.collectionViewType; return ( diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 2b886adb6..9ec0b3aeb 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -363,7 +363,7 @@ export class DockedFrameRenderer extends React.Component { isTopMost={true} selectOnLoad={false} parentActive={returnTrue} - onActiveChanged={emptyFunction} + whenActiveChanged={emptyFunction} focus={emptyDocFunction} ContainingCollectionView={undefined} />
; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 1defdba7e..15b7617ae 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -24,7 +24,7 @@ import { EditableView } from "../EditableView"; import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; -import { CollectionSubView } from "./CollectionSubView"; +import { CollectionSubView, SubCollectionViewProps } from "./CollectionSubView"; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 @@ -70,7 +70,6 @@ export class CollectionSchemaView extends CollectionSubView { @computed get splitPercentage() { return this.props.Document.GetNumber(KeyStore.SchemaSplitPercentage, 0); } - renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { Document: rowProps.value[0], @@ -83,7 +82,7 @@ export class CollectionSchemaView extends CollectionSubView { ScreenToLocalTransform: Transform.Identity, focus: emptyDocFunction, active: returnFalse, - onActiveChanged: emptyFunction, + whenActiveChanged: emptyFunction, }; let contents = ( @@ -285,7 +284,7 @@ export class CollectionSchemaView extends CollectionSubView { this._optionsActivated++; } - @observable previewScript: string = "this"; + @observable previewScript: string = ""; @action onPreviewScriptChange = (e: React.ChangeEvent) => { this.previewScript = e.currentTarget.value; @@ -299,7 +298,7 @@ export class CollectionSchemaView extends CollectionSubView { const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; //all the keys/columns that will be displayed in the schema const allKeys = this.findAllDocumentKeys; - let doc: any = selected ? selected.Get(new Key(this.previewScript)) : undefined; + let doc: any = selected ? (this.previewScript ? selected.Get(new Key(this.previewScript)) : selected) : undefined; // let doc = CompileScript(this.previewScript, { this: selected }, true)(); let content = this._selectedIndex === -1 || !selected ? (null) : ( @@ -318,7 +317,7 @@ export class CollectionSchemaView extends CollectionSubView { ContainingCollectionView={this.props.CollectionView} focus={emptyDocFunction} parentActive={this.props.active} - onActiveChanged={this.props.onActiveChanged} /> : null} + whenActiveChanged={this.props.whenActiveChanged} /> : null}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 97708ce19..80322c900 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -248,7 +248,7 @@ export class CollectionFreeFormView extends CollectionSubView { ContainingCollectionView: this.props.CollectionView, focus: this.focusDocument, parentActive: this.props.active, - onActiveChanged: this.props.active, + whenActiveChanged: this.props.active, }; } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index b99e449be..d74f9fc57 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -39,7 +39,7 @@ export interface DocumentViewProps { focus: (doc: Document) => void; selectOnLoad: boolean; parentActive: () => boolean; - onActiveChanged: (isActive: boolean) => void; + whenActiveChanged: (isActive: boolean) => void; } export interface JsxArgs extends DocumentViewProps { Keys: { [name: string]: Key }; diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index ebd25f937..e9f6950ff 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -43,7 +43,7 @@ export interface FieldViewProps { moveDocument?: (document: Document, targetCollection: Document, addDocument: (document: Document) => boolean) => boolean; ScreenToLocalTransform: () => Transform; active: () => boolean; - onActiveChanged: (isActive: boolean) => void; + whenActiveChanged: (isActive: boolean) => void; focus: (doc: Document) => void; } @@ -95,7 +95,7 @@ export class FieldView extends React.Component { layoutKey={KeyStore.Layout} ContainingCollectionView={this.props.ContainingCollectionView} parentActive={this.props.active} - onActiveChanged={this.props.onActiveChanged} /> + whenActiveChanged={this.props.whenActiveChanged} /> ); } else if (field instanceof ListField) { diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index 5d69f23b2..d480eb5af 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -48,7 +48,7 @@ export class KeyValuePair extends React.Component { isTopMost: false, selectOnLoad: false, active: returnFalse, - onActiveChanged: emptyFunction, + whenActiveChanged: emptyFunction, ScreenToLocalTransform: Transform.Identity, focus: emptyDocFunction, }; -- cgit v1.2.3-70-g09d2 From 8d7d4d4bee15f250eb93f4fb850075e99bebedd3 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 17 Apr 2019 14:17:29 -0400 Subject: schemaviews --- .../views/collections/CollectionSchemaView.scss | 10 ++- .../views/collections/CollectionSchemaView.tsx | 89 +++++++++++++--------- 2 files changed, 60 insertions(+), 39 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index c8bfedff4..8c51ed752 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -71,7 +71,10 @@ ul { position: absolute; height: 100%; width: 100%; - overflow: auto; + .documentView-node:first-child { + position: relative; + background: $light-color; + } } .collectionSchemaView-previewRegion { position: relative; @@ -193,6 +196,11 @@ ul { border-bottom-style: solid; border-bottom-width: 1; } + .documentView-node-topmost { + text-align:left; + transform-origin: center top; + display: inline-block; + } .documentView-node:first-child { background: $light-color; .imageBox-cont img { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 15b7617ae..9e740eb00 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -12,7 +12,7 @@ import { Field, Opt } from "../../../fields/Field"; import { Key } from "../../../fields/Key"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; -import { emptyDocFunction, emptyFunction, returnFalse, returnOne } from "../../../Utils"; +import { emptyDocFunction, emptyFunction, returnFalse, returnOne, Utils } from "../../../Utils"; import { Server } from "../../Server"; import { SetupDrag } from "../../util/DragManager"; import { CompileScript, ToField } from "../../util/Scripting"; @@ -25,6 +25,7 @@ import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; import { CollectionSubView, SubCollectionViewProps } from "./CollectionSubView"; +import { CollectionDockingView } from "./CollectionDockingView"; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 @@ -60,7 +61,6 @@ export class CollectionSchemaView extends CollectionSubView { private DIVIDER_WIDTH = 4; @observable _columns: Array = [KeyStore.Title, KeyStore.Data, KeyStore.Author]; - @observable _contentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ContentScaling prop of the DocumentView @observable _dividerX = 0; @observable _panelWidth = 0; @observable _panelHeight = 0; @@ -234,22 +234,9 @@ export class CollectionSchemaView extends CollectionSubView { setTableDimensions = (r: any) => { this._tableWidth = r.entry.width; } - @action - setScaling = (r: any) => { - const children = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); - const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; - this._panelWidth = r.entry.width; - this._panelHeight = r.entry.height ? r.entry.height : this._panelHeight; - this._contentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width); - } @computed get borderWidth() { return COLLECTION_BORDER_WIDTH; } - getContentScaling = (): number => this._contentScaling; - getPanelWidth = (): number => this._panelWidth; - getPanelHeight = (): number => this._panelHeight; - getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this._dividerX, - this.borderWidth).scale(1 / this._contentScaling); - getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this._dividerX - this._tableWidth, - this.borderWidth).scale(1 / this._contentScaling); onPointerDown = (e: React.PointerEvent): void => { if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey) { @@ -289,37 +276,63 @@ export class CollectionSchemaView extends CollectionSubView { onPreviewScriptChange = (e: React.ChangeEvent) => { this.previewScript = e.currentTarget.value; } + private get _document(): Document | undefined { + const children = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); + const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; + return selected ? (this.previewScript ? selected.Get(new Key(this.previewScript)) as Document : selected) : undefined; + } + private nativeWidth = () => this._document!.GetNumber(KeyStore.NativeWidth, this._panelWidth); + private nativeHeight = () => this._document!.GetNumber(KeyStore.NativeHeight, this._panelHeight); + private panelWidth = () => this.nativeWidth() * this._contentScaling(); + private panelHeight = () => this.nativeHeight() * this._contentScaling(); + private _contentScaling = () => { + let wscale = this._panelWidth / (this.nativeWidth() ? this.nativeWidth() : this._panelWidth); + if (wscale * this.nativeHeight() > this._panelHeight) + return this._panelHeight / (this.nativeHeight() ? this.nativeHeight() : this._panelHeight); + return wscale; + } + getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this._dividerX - this._tableWidth - this.offset(), - this.borderWidth).scale(1 / this._contentScaling()); + getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this._dividerX, - this.borderWidth).scale(1 / this._contentScaling()); + + offset = () => ((this.props as any).PanelWidth() * this.splitPercentage / 100 - this.nativeWidth() * this._contentScaling()) / 2; + @action + setScaling = (r: any) => { + this._panelWidth = r.entry.width; + this._panelHeight = r.entry.height ? r.entry.height : this._panelHeight; + } render() { library.add(faCog); library.add(faPlus); + if (!this._document) + return (null); const columns = this.columns; - const children = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); - const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; - //all the keys/columns that will be displayed in the schema + let doc = this._document; + const childs = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); const allKeys = this.findAllDocumentKeys; - let doc: any = selected ? (this.previewScript ? selected.Get(new Key(this.previewScript)) : selected) : undefined; - // let doc = CompileScript(this.previewScript, { this: selected }, true)(); - let content = this._selectedIndex === -1 || !selected ? (null) : ( + let offset = this.offset(); + let content = !doc ? (null) : ( {({ measureRef }) =>
- {doc instanceof Document ? - : null} - +
+ {doc instanceof Document ? + : null} + +
} @@ -355,8 +368,8 @@ export class CollectionSchemaView extends CollectionSubView { {({ measureRef }) =>
({ -- cgit v1.2.3-70-g09d2 From 3ec6343ad5f15cfe43c233f29453f02c435aecda Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 17 Apr 2019 19:12:38 -0400 Subject: fixed schema layout --- .../views/collections/CollectionSchemaView.scss | 11 ++ .../views/collections/CollectionSchemaView.tsx | 164 ++++++++++----------- 2 files changed, 86 insertions(+), 89 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 8c51ed752..580bce21b 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -71,6 +71,17 @@ ul { position: absolute; height: 100%; width: 100%; + .collectionSchemaView-previewDoc { + height: 100%; + width: 100%; + position: absolute; + } + .collectionSchemaView-input { + position: absolute; + max-width: 150px; + width: 100%; + bottom: 0px; + } .documentView-node:first-child { position: relative; background: $light-color; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 9e740eb00..f7d69aee1 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -61,9 +61,6 @@ export class CollectionSchemaView extends CollectionSubView { private DIVIDER_WIDTH = 4; @observable _columns: Array = [KeyStore.Title, KeyStore.Data, KeyStore.Author]; - @observable _dividerX = 0; - @observable _panelWidth = 0; - @observable _panelHeight = 0; @observable _selectedIndex = 0; @observable _columnsPercentage = 0; @observable _keys: Key[] = []; @@ -229,11 +226,6 @@ export class CollectionSchemaView extends CollectionSubView { document.addEventListener('pointerup', this.onDividerUp); } - @observable _tableWidth = 0; - @action - setTableDimensions = (r: any) => { - this._tableWidth = r.entry.width; - } @computed get borderWidth() { return COLLECTION_BORDER_WIDTH; } @@ -276,72 +268,65 @@ export class CollectionSchemaView extends CollectionSubView { onPreviewScriptChange = (e: React.ChangeEvent) => { this.previewScript = e.currentTarget.value; } - private get _document(): Document | undefined { + private get previewDocument(): Document | undefined { const children = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; return selected ? (this.previewScript ? selected.Get(new Key(this.previewScript)) as Document : selected) : undefined; } - private nativeWidth = () => this._document!.GetNumber(KeyStore.NativeWidth, this._panelWidth); - private nativeHeight = () => this._document!.GetNumber(KeyStore.NativeHeight, this._panelHeight); - private panelWidth = () => this.nativeWidth() * this._contentScaling(); - private panelHeight = () => this.nativeHeight() * this._contentScaling(); - private _contentScaling = () => { - let wscale = this._panelWidth / (this.nativeWidth() ? this.nativeWidth() : this._panelWidth); - if (wscale * this.nativeHeight() > this._panelHeight) - return this._panelHeight / (this.nativeHeight() ? this.nativeHeight() : this._panelHeight); + getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform().translate( + - this.borderWidth - this.DIVIDER_WIDTH - this.tableWidth - this.previewPanelCenteringOffset, + - this.borderWidth).scale(1 / this.previewContentScaling()); + getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH, - this.borderWidth).scale(1 / this.previewContentScaling()); + + get tableWidth() { return (this.props as any).PanelWidth() * (1 - this.splitPercentage / 100); } + get previewRegionHeight() { return (this.props as any).PanelHeight(); } + get previewRegionWidth() { return (this.props as any).PanelWidth() * this.splitPercentage / 100 - this.DIVIDER_WIDTH; } + + get previewPanelCenteringOffset() { return (this.previewRegionWidth - this.previewDocNativeWidth() * this.previewContentScaling()) / 2; } + private previewPanelWidth = () => this.previewDocNativeWidth() * this.previewContentScaling(); + private previewPanelHeight = () => this.previewDocNativeHeight() * this.previewContentScaling(); + private previewContentScaling = () => { + let wscale = this.previewRegionWidth / (this.previewDocNativeWidth() ? this.previewDocNativeWidth() : this.previewRegionWidth); + if (wscale * this.previewDocNativeHeight() > this.previewRegionHeight) + return this.previewRegionHeight / (this.previewDocNativeHeight() ? this.previewDocNativeHeight() : this.previewRegionHeight); return wscale; } - getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this._dividerX - this._tableWidth - this.offset(), - this.borderWidth).scale(1 / this._contentScaling()); - getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this._dividerX, - this.borderWidth).scale(1 / this._contentScaling()); + private previewDocNativeWidth = () => this.previewDocument!.GetNumber(KeyStore.NativeWidth, this.previewRegionWidth); + private previewDocNativeHeight = () => this.previewDocument!.GetNumber(KeyStore.NativeHeight, this.previewRegionHeight); - offset = () => ((this.props as any).PanelWidth() * this.splitPercentage / 100 - this.nativeWidth() * this._contentScaling()) / 2; - @action - setScaling = (r: any) => { - this._panelWidth = r.entry.width; - this._panelHeight = r.entry.height ? r.entry.height : this._panelHeight; - } - render() { - library.add(faCog); - library.add(faPlus); - if (!this._document) - return (null); - const columns = this.columns; - let doc = this._document; - const childs = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); - const allKeys = this.findAllDocumentKeys; + @computed + get previewPanel() { + let doc = this.previewDocument; // let doc = CompileScript(this.previewScript, { this: selected }, true)(); - let offset = this.offset(); - let content = !doc ? (null) : ( - - {({ measureRef }) => -
-
- {doc instanceof Document ? - : null} - -
+ let inputPanelWidth = Math.min(75, this.previewPanelWidth() / 2); + return !doc ? (null) : ( +
+
+
+ {doc instanceof Document ? + : + null}
- } - + +
+
); - let dividerDragger = this.splitPercentage === 0 ? (null) : -
; - - //options button and menu - let optionsMenu = !this.props.active() ? (null) : (
Options
@@ -360,37 +345,38 @@ export class CollectionSchemaView extends CollectionSubView { }> ); + } + @computed + get dividerDragger() { + return this.splitPercentage === 0 ? (null) : +
; + } + + render() { + library.add(faCog); + library.add(faPlus); + if (!this.previewDocument) + return (null); + + const children = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); return (
this.onDrop(e, {})} ref={this.createDropTarget}> - - {({ measureRef }) => -
- ({ - Header: col.Name, - accessor: (doc: Document) => [doc, col], - id: col.Id - }))} - column={{ - ...ReactTableDefaults.column, - Cell: this.renderCell, - - }} - getTrProps={this.getTrProps} - /> -
} - - {dividerDragger} -
- {content} +
+ ({ + Header: col.Name, + accessor: (doc: Document) => [doc, col], + id: col.Id + }))} + column={{ ...ReactTableDefaults.column, Cell: this.renderCell, }} + getTrProps={this.getTrProps} + />
- {optionsMenu} + {this.dividerDragger} + {this.previewPanel} + {this.tableOptionsPanel}
); -- cgit v1.2.3-70-g09d2 From d998bdaa38677e4888393db01cf9b73bb49f2cc9 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 17 Apr 2019 19:55:12 -0400 Subject: some schema view simplifications --- .../views/collections/CollectionSchemaView.scss | 125 ++++++++++----------- .../views/collections/CollectionSchemaView.tsx | 98 ++++++++-------- src/client/views/collections/CollectionSubView.tsx | 6 +- 3 files changed, 112 insertions(+), 117 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 580bce21b..bced0d5d4 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -1,61 +1,5 @@ @import "../globalCssVariables"; -//options menu styling -#schemaOptionsMenuBtn { - position: absolute; - height: 20px; - width: 20px; - border-radius: 50%; - z-index: 21; - right: 4px; - top: 4px; - pointer-events: auto; - background-color:black; - display:inline-block; - padding: 0px; - font-size: 100%; -} - -ul { - list-style-type: disc; -} - -#schema-options-header { - text-align: center; - padding: 0px; - margin: 0px; -} -.schema-options-subHeader { - color: $intermediate-color; - margin-bottom: 5px; -} -#schemaOptionsMenuBtn:hover { - transform: scale(1.15); -} - -#preview-schema-checkbox-div { - margin-left: 20px; - font-size: 12px; -} - - #options-flyout-div { - text-align: left; - padding:0px; - z-index: 100; - font-family: $sans-serif; - padding-left: 5px; - } - - #schema-col-checklist { - overflow: scroll; - text-align: left; - //background-color: $light-color-secondary; - line-height: 25px; - max-height: 175px; - font-family: $sans-serif; - font-size: 12px; - } - .collectionSchemaView-container { border-width: $COLLECTION_BORDER_WIDTH; @@ -67,10 +11,11 @@ ul { width: 100%; height: 100%; - .collectionSchemaView-content { - position: absolute; + .collectionSchemaView-previewRegion { + position: relative; + background: $light-color; + float: left; height: 100%; - width: 100%; .collectionSchemaView-previewDoc { height: 100%; width: 100%; @@ -87,12 +32,6 @@ ul { background: $light-color; } } - .collectionSchemaView-previewRegion { - position: relative; - background: $light-color; - float: left; - height: 100%; - } .collectionSchemaView-previewHandle { position: absolute; height: 15px; @@ -219,6 +158,62 @@ ul { } } } +//options menu styling +#schemaOptionsMenuBtn { + position: absolute; + height: 20px; + width: 20px; + border-radius: 50%; + z-index: 21; + right: 4px; + top: 4px; + pointer-events: auto; + background-color:black; + display:inline-block; + padding: 0px; + font-size: 100%; +} + +ul { + list-style-type: disc; +} + +#schema-options-header { + text-align: center; + padding: 0px; + margin: 0px; +} +.schema-options-subHeader { + color: $intermediate-color; + margin-bottom: 5px; +} +#schemaOptionsMenuBtn:hover { + transform: scale(1.15); +} + +#preview-schema-checkbox-div { + margin-left: 20px; + font-size: 12px; +} + + #options-flyout-div { + text-align: left; + padding:0px; + z-index: 100; + font-family: $sans-serif; + padding-left: 5px; + } + + #schema-col-checklist { + overflow: scroll; + text-align: left; + //background-color: $light-color-secondary; + line-height: 25px; + max-height: 175px; + font-family: $sans-serif; + font-size: 12px; + } + .Resizer { box-sizing: border-box; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index f7d69aee1..4e3149fe4 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -4,7 +4,6 @@ import { faCog, faPlus } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, untracked } from "mobx"; import { observer } from "mobx-react"; -import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; import "react-table/react-table.css"; import { Document } from "../../../fields/Document"; @@ -12,7 +11,7 @@ import { Field, Opt } from "../../../fields/Field"; import { Key } from "../../../fields/Key"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; -import { emptyDocFunction, emptyFunction, returnFalse, returnOne, Utils } from "../../../Utils"; +import { emptyDocFunction, emptyFunction, returnFalse } from "../../../Utils"; import { Server } from "../../Server"; import { SetupDrag } from "../../util/DragManager"; import { CompileScript, ToField } from "../../util/Scripting"; @@ -24,8 +23,7 @@ import { EditableView } from "../EditableView"; import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; -import { CollectionSubView, SubCollectionViewProps } from "./CollectionSubView"; -import { CollectionDockingView } from "./CollectionDockingView"; +import { CollectionSubView } from "./CollectionSubView"; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 @@ -56,7 +54,7 @@ class KeyToggle extends React.Component<{ keyId: string, checked: boolean, toggl @observer export class CollectionSchemaView extends CollectionSubView { - private _mainCont = React.createRef(); + private _mainCont?: HTMLDivElement; private _startSplitPercent = 0; private DIVIDER_WIDTH = 4; @@ -207,7 +205,7 @@ export class CollectionSchemaView extends CollectionSubView { @action onDividerMove = (e: PointerEvent): void => { - let nativeWidth = this._mainCont.current!.getBoundingClientRect(); + let nativeWidth = this._mainCont!.getBoundingClientRect(); this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, Math.max(0, 100 - Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100))); } @action @@ -279,47 +277,41 @@ export class CollectionSchemaView extends CollectionSubView { - this.borderWidth).scale(1 / this.previewContentScaling()); getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH, - this.borderWidth).scale(1 / this.previewContentScaling()); - get tableWidth() { return (this.props as any).PanelWidth() * (1 - this.splitPercentage / 100); } - get previewRegionHeight() { return (this.props as any).PanelHeight(); } - get previewRegionWidth() { return (this.props as any).PanelWidth() * this.splitPercentage / 100 - this.DIVIDER_WIDTH; } + get tableWidth() { return this.props.PanelWidth() * (1 - this.splitPercentage / 100); } + get previewRegionHeight() { return this.props.PanelHeight(); } + get previewRegionWidth() { return this.props.PanelWidth() * this.splitPercentage / 100 - this.DIVIDER_WIDTH; } - get previewPanelCenteringOffset() { return (this.previewRegionWidth - this.previewDocNativeWidth() * this.previewContentScaling()) / 2; } - private previewPanelWidth = () => this.previewDocNativeWidth() * this.previewContentScaling(); - private previewPanelHeight = () => this.previewDocNativeHeight() * this.previewContentScaling(); + private previewDocNativeWidth = () => this.previewDocument!.GetNumber(KeyStore.NativeWidth, this.previewRegionWidth); + private previewDocNativeHeight = () => this.previewDocument!.GetNumber(KeyStore.NativeHeight, this.previewRegionHeight); private previewContentScaling = () => { let wscale = this.previewRegionWidth / (this.previewDocNativeWidth() ? this.previewDocNativeWidth() : this.previewRegionWidth); if (wscale * this.previewDocNativeHeight() > this.previewRegionHeight) return this.previewRegionHeight / (this.previewDocNativeHeight() ? this.previewDocNativeHeight() : this.previewRegionHeight); return wscale; } - private previewDocNativeWidth = () => this.previewDocument!.GetNumber(KeyStore.NativeWidth, this.previewRegionWidth); - private previewDocNativeHeight = () => this.previewDocument!.GetNumber(KeyStore.NativeHeight, this.previewRegionHeight); + private previewPanelWidth = () => this.previewDocNativeWidth() * this.previewContentScaling(); + private previewPanelHeight = () => this.previewDocNativeHeight() * this.previewContentScaling(); + get previewPanelCenteringOffset() { return (this.previewRegionWidth - this.previewDocNativeWidth() * this.previewContentScaling()) / 2; } @computed get previewPanel() { - let doc = this.previewDocument; // let doc = CompileScript(this.previewScript, { this: selected }, true)(); - let inputPanelWidth = Math.min(75, this.previewPanelWidth() / 2); - return !doc ? (null) : ( + return !this.previewDocument ? (null) : (
-
-
- {doc instanceof Document ? - : - null} -
- +
+
+
); } @@ -353,6 +345,11 @@ export class CollectionSchemaView extends CollectionSubView {
; } + createTarget = (ele: HTMLDivElement) => { + this._mainCont = ele; + super.CreateDropTarget(ele); + } + render() { library.add(faCog); library.add(faPlus); @@ -361,24 +358,23 @@ export class CollectionSchemaView extends CollectionSubView { const children = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); return ( -
-
this.onDrop(e, {})} ref={this.createDropTarget}> -
- ({ - Header: col.Name, - accessor: (doc: Document) => [doc, col], - id: col.Id - }))} - column={{ ...ReactTableDefaults.column, Cell: this.renderCell, }} - getTrProps={this.getTrProps} - /> -
- {this.dividerDragger} - {this.previewPanel} - {this.tableOptionsPanel} +
this.onDrop(e, {})} ref={this.createTarget}> +
+ ({ + Header: col.Name, + accessor: (doc: Document) => [doc, col], + id: col.Id + }))} + column={{ ...ReactTableDefaults.column, Cell: this.renderCell, }} + getTrProps={this.getTrProps} + />
-
+ {this.dividerDragger} + {this.previewPanel} + {this.tableOptionsPanel} +
); } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index d3d69b1af..5c3b2e586 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -15,7 +15,6 @@ import { ServerUtils } from "../../../server/ServerUtil"; import { Server } from "../../Server"; import { FieldViewProps } from "../nodes/FieldView"; import * as rp from 'request-promise'; -import { emptyFunction } from "../../../Utils"; import { CollectionView } from "./CollectionView"; import { CollectionPDFView } from "./CollectionPDFView"; import { CollectionVideoView } from "./CollectionVideoView"; @@ -24,6 +23,8 @@ export interface CollectionViewProps extends FieldViewProps { addDocument: (document: Document, allowDuplicates?: boolean) => boolean; removeDocument: (document: Document) => boolean; moveDocument: (document: Document, targetCollection: Document, addDocument: (document: Document) => boolean) => boolean; + PanelWidth: () => number; + PanelHeight: () => number; } export interface SubCollectionViewProps extends CollectionViewProps { @@ -42,6 +43,9 @@ export class CollectionSubView extends React.Component { this.dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.drop.bind(this) } }); } } + protected CreateDropTarget(ele: HTMLDivElement) { + this.createDropTarget(ele); + } @action protected setCursorPosition(position: [number, number]) { -- cgit v1.2.3-70-g09d2 From 6c56cbad38efbde578e2c2c90cbce4b7ff033059 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 17 Apr 2019 21:02:12 -0400 Subject: final cleanup of schema views --- .../views/collections/CollectionSchemaView.tsx | 144 +++++++++------------ 1 file changed, 59 insertions(+), 85 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 4e3149fe4..08c9740d0 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -33,22 +33,17 @@ import { CollectionSubView } from "./CollectionSubView"; class KeyToggle extends React.Component<{ keyId: string, checked: boolean, toggle: (key: Key) => void }> { @observable key: Key | undefined; - componentWillReceiveProps() { - Server.GetField(this.props.keyId, action((field: Opt) => { - if (field instanceof Key) { - this.key = field; - } - })); + constructor(props: any) { + super(props); + Server.GetField(this.props.keyId, action((field: Opt) => field instanceof Key && (this.key = field))); } render() { - if (this.key) { - return (
+ return !this.key ? (null) : + (
this.key && this.props.toggle(this.key)} /> {this.key.Name}
); - } - return (null); } } @@ -62,8 +57,11 @@ export class CollectionSchemaView extends CollectionSubView { @observable _selectedIndex = 0; @observable _columnsPercentage = 0; @observable _keys: Key[] = []; + @observable _newKeyName: string = ""; @computed get splitPercentage() { return this.props.Document.GetNumber(KeyStore.SchemaSplitPercentage, 0); } + @computed get columns() { return this.props.Document.GetList(KeyStore.ColumnsKey, [] as Key[]); } + @computed get borderWidth() { return COLLECTION_BORDER_WIDTH; } renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { @@ -159,9 +157,9 @@ export class CollectionSchemaView extends CollectionSubView { }; } - @computed - get columns() { - return this.props.Document.GetList(KeyStore.ColumnsKey, [] as Key[]); + private createTarget = (ele: HTMLDivElement) => { + this._mainCont = ele; + super.CreateDropTarget(ele); } @action @@ -181,26 +179,7 @@ export class CollectionSchemaView extends CollectionSubView { //toggles preview side-panel of schema @action toggleExpander = (event: React.ChangeEvent) => { - this._startSplitPercent = this.splitPercentage; - if (this._startSplitPercent === this.splitPercentage) { - this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage === 0 ? 33 : 0); - } - } - - @computed - get findAllDocumentKeys(): { [id: string]: boolean } { - const docs = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); - let keys: { [id: string]: boolean } = {}; - if (this._optionsActivated > -1) { - // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields. - // then as each document's fields come back, we update the documents _proxies. Each time we do this, the whole schema will be - // invalidated and re-rendered. This workaround will inquire all of the document fields before the options button is clicked. - // then by the time the options button is clicked, all of the fields should be in place. If a new field is added while this menu - // is displayed (unlikely) it won't show up until something else changes. - untracked(() => docs.map(doc => doc.GetAllPrototypes().map(proto => proto._proxies.forEach((val: any, key: string) => keys[key] = false)))); - } - this.columns.forEach(key => keys[key.Id] = true); - return keys; + this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage === 0 ? 33 : 0); } @action @@ -224,10 +203,6 @@ export class CollectionSchemaView extends CollectionSubView { document.addEventListener('pointerup', this.onDividerUp); } - - @computed - get borderWidth() { return COLLECTION_BORDER_WIDTH; } - onPointerDown = (e: React.PointerEvent): void => { if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey) { if (this.props.isSelected()) @@ -236,29 +211,21 @@ export class CollectionSchemaView extends CollectionSubView { } } - @action - addColumn = () => { - this.columns.push(new Key(this.newKeyName)); - this.newKeyName = ""; - } - - @observable - newKeyName: string = ""; - - @action - newKeyChange = (e: React.ChangeEvent) => { - this.newKeyName = e.currentTarget.value; - } onWheel = (e: React.WheelEvent): void => { if (this.props.active()) { e.stopPropagation(); } } - @observable _optionsActivated: number = 0; @action - OptionsMenuDown = (e: React.PointerEvent) => { - this._optionsActivated++; + addColumn = () => { + this.columns.push(new Key(this._newKeyName)); + this._newKeyName = ""; + } + + @action + newKeyChange = (e: React.ChangeEvent) => { + this._newKeyName = e.currentTarget.value; } @observable previewScript: string = ""; @@ -266,17 +233,12 @@ export class CollectionSchemaView extends CollectionSubView { onPreviewScriptChange = (e: React.ChangeEvent) => { this.previewScript = e.currentTarget.value; } - private get previewDocument(): Document | undefined { + + get previewDocument(): Document | undefined { const children = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; return selected ? (this.previewScript ? selected.Get(new Key(this.previewScript)) as Document : selected) : undefined; } - - getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform().translate( - - this.borderWidth - this.DIVIDER_WIDTH - this.tableWidth - this.previewPanelCenteringOffset, - - this.borderWidth).scale(1 / this.previewContentScaling()); - getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH, - this.borderWidth).scale(1 / this.previewContentScaling()); - get tableWidth() { return this.props.PanelWidth() * (1 - this.splitPercentage / 100); } get previewRegionHeight() { return this.props.PanelHeight(); } get previewRegionWidth() { return this.props.PanelWidth() * this.splitPercentage / 100 - this.DIVIDER_WIDTH; } @@ -292,6 +254,9 @@ export class CollectionSchemaView extends CollectionSubView { private previewPanelWidth = () => this.previewDocNativeWidth() * this.previewContentScaling(); private previewPanelHeight = () => this.previewDocNativeHeight() * this.previewContentScaling(); get previewPanelCenteringOffset() { return (this.previewRegionWidth - this.previewDocNativeWidth() * this.previewContentScaling()) / 2; } + getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform().translate( + - this.borderWidth - this.DIVIDER_WIDTH - this.tableWidth - this.previewPanelCenteringOffset, + - this.borderWidth).scale(1 / this.previewContentScaling()); @computed get previewPanel() { @@ -315,28 +280,42 @@ export class CollectionSchemaView extends CollectionSubView {
); } - @computed + + get documentKeysCheckList() { + const docs = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); + let keys: { [id: string]: boolean } = {}; + // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields. + // then as each document's fields come back, we update the documents _proxies. Each time we do this, the whole schema will be + // invalidated and re-rendered. This workaround will inquire all of the document fields before the options button is clicked. + // then by the time the options button is clicked, all of the fields should be in place. If a new field is added while this menu + // is displayed (unlikely) it won't show up until something else changes. + untracked(() => docs.map(doc => doc.GetAllPrototypes().map(proto => proto._proxies.forEach((val: any, key: string) => keys[key] = false)))); + + this.columns.forEach(key => keys[key.Id] = true); + return Array.from(Object.keys(keys)).map(item => + ()); + } + get tableOptionsPanel() { - const allKeys = this.findAllDocumentKeys; - return !this.props.active() ? (null) : ( -
Options
-
-
Preview Window
-
Show Preview
-
Displayed Columns
-
    - {Array.from(Object.keys(allKeys)).map(item => - ())} -
- - + return !this.props.active() ? (null) : + ( +
Options
+
+
Preview Window
+
Show Preview
+
Displayed Columns
+
    + {this.documentKeysCheckList} +
+ + +
-
- }> - - ); + }> + + ); } @computed @@ -345,11 +324,6 @@ export class CollectionSchemaView extends CollectionSubView {
; } - createTarget = (ele: HTMLDivElement) => { - this._mainCont = ele; - super.CreateDropTarget(ele); - } - render() { library.add(faCog); library.add(faPlus); -- cgit v1.2.3-70-g09d2 From ba20c5a0fe5f74bfc59b0d6d46cb5731585515d2 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 17 Apr 2019 21:33:11 -0400 Subject: fixed docking view for documents with native widths --- src/client/views/collections/CollectionDockingView.scss | 5 ----- src/client/views/collections/CollectionDockingView.tsx | 13 ++++++------- 2 files changed, 6 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 50da2b11d..b4d9efc47 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -3,11 +3,6 @@ .collectiondockingview-content { height: 100%; text-align:center; - .documentView-node-topmost { - text-align:left; - transform-origin: center top; - display: inline-block; - } } .collectiondockingview-content-height { height: 100%; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 9ec0b3aeb..62321b7a8 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -337,13 +337,11 @@ export class DockedFrameRenderer extends React.Component { ScreenToLocalTransform = () => { let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!.children[0].firstChild as HTMLElement); - let scaling = scale; - { - let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!); - scaling = scale; - } - return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scaling / this._contentScaling()); + scale = Utils.GetScreenTransform(this._mainCont.current!).scale; + return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._contentScaling()); } + get previewPanelCenteringOffset() { return (this._panelWidth - this._nativeWidth() * this._contentScaling()) / 2; } + render() { if (!this._document) { @@ -352,7 +350,8 @@ export class DockedFrameRenderer extends React.Component { let wscale = this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); let name = (wscale * this._nativeHeight() > this._panelHeight) ? "" : "-height"; var content = -
+
Date: Wed, 17 Apr 2019 21:50:33 -0400 Subject: fixed docking view and freeform to not need --- .../views/collections/CollectionDockingView.scss | 4 -- .../views/collections/CollectionDockingView.tsx | 49 ++++++++++----------- .../collectionFreeForm/CollectionFreeFormView.scss | 9 +--- .../collectionFreeForm/CollectionFreeFormView.tsx | 50 +++++++++------------- 4 files changed, 44 insertions(+), 68 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index b4d9efc47..0e7e0afa7 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -2,10 +2,6 @@ .collectiondockingview-content { height: 100%; - text-align:center; -} -.collectiondockingview-content-height { - height: 100%; } .lm_active .messageCounter{ color:white; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 62321b7a8..39e27b601 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -316,7 +316,7 @@ interface DockedFrameProps { @observer export class DockedFrameRenderer extends React.Component { - private _mainCont = React.createRef(); + _mainCont = React.createRef(); @observable private _panelWidth = 0; @observable private _panelHeight = 0; @observable private _document: Opt; @@ -326,38 +326,32 @@ export class DockedFrameRenderer extends React.Component { Server.GetField(this.props.documentId, action((f: Opt) => this._document = f as Document)); } - private _nativeWidth = () => this._document!.GetNumber(KeyStore.NativeWidth, this._panelWidth); - private _nativeHeight = () => this._document!.GetNumber(KeyStore.NativeHeight, this._panelHeight); - private _contentScaling = () => { - let wscale = this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); - if (wscale * this._nativeHeight() > this._panelHeight) - return this._panelHeight / (this._nativeHeight() ? this._nativeHeight() : this._panelHeight); + nativeWidth = () => this._document!.GetNumber(KeyStore.NativeWidth, this._panelWidth); + nativeHeight = () => this._document!.GetNumber(KeyStore.NativeHeight, this._panelHeight); + contentScaling = () => { + let wscale = this._panelWidth / (this.nativeWidth() ? this.nativeWidth() : this._panelWidth); + if (wscale * this.nativeHeight() > this._panelHeight) + return this._panelHeight / (this.nativeHeight() ? this.nativeHeight() : this._panelHeight); return wscale; } ScreenToLocalTransform = () => { let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!.children[0].firstChild as HTMLElement); scale = Utils.GetScreenTransform(this._mainCont.current!).scale; - return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._contentScaling()); + return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this.contentScaling()); } - get previewPanelCenteringOffset() { return (this._panelWidth - this._nativeWidth() * this._contentScaling()) / 2; } + get previewPanelCenteringOffset() { return (this._panelWidth - this.nativeWidth() * this.contentScaling()) / 2; } - - render() { - if (!this._document) { - return (null); - } - let wscale = this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); - let name = (wscale * this._nativeHeight() > this._panelHeight) ? "" : "-height"; - var content = -
- { whenActiveChanged={emptyFunction} focus={emptyDocFunction} ContainingCollectionView={undefined} /> -
; +
); + } - return { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}> - {({ measureRef }) =>
{content}
} - ; + render() { + return !this._document ? (null) : + { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}> + {({ measureRef }) =>
{this.content}
} + ; } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 392bd514f..57706b51e 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -1,11 +1,4 @@ @import "../../globalCssVariables"; -.collectionfreeformview-measure { - position: inherit; - top: 0; - left: 0; - width: 100%; - height: 100%; - } .collectionfreeformview { position: inherit; top: 0; @@ -52,7 +45,7 @@ } opacity: 0.99; - border-width: 0; + border-width: 0; border-color: transparent; border-style: solid; border-radius: $border-radius; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 80322c900..d4385b12c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -28,8 +28,8 @@ export class CollectionFreeFormView extends CollectionSubView { private _selectOnLoaded: string = ""; // id of document that should be selected once it's loaded (used for click-to-type) private _lastX: number = 0; private _lastY: number = 0; - @observable private _pwidth: number = 0; - @observable private _pheight: number = 0; + private get _pwidth() { return this.props.PanelWidth(); } + private get _pheight() { return this.props.PanelHeight(); } @computed get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); } @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); } @@ -268,11 +268,6 @@ export class CollectionFreeFormView extends CollectionSubView { return docviews; } - @action - onResize = (r: any) => { - this._pwidth = r.entry.width; - this._pheight = r.entry.height; - } @action onCursorMove = (e: React.PointerEvent) => { super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY)); @@ -281,29 +276,24 @@ export class CollectionFreeFormView extends CollectionSubView { render() { const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`; return ( - - {({ measureRef }) => ( -
-
- - - - - - {this.childViews} - - - - - - -
-
)} - +
+ + + + + + {this.childViews} + + + + + + +
); } } -- cgit v1.2.3-70-g09d2 From 80a58ec7213d3c7cd1a290a1dd291891e8333803 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 17 Apr 2019 22:33:03 -0400 Subject: fixed initial heights of videso and images --- src/client/views/Main.tsx | 4 ++-- .../collections/collectionFreeForm/CollectionFreeFormView.tsx | 4 +++- src/client/views/nodes/ImageBox.tsx | 8 ++++++-- 3 files changed, 11 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 84fdeab92..5cae4fdaf 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -210,9 +210,9 @@ export class Main extends React.Component { let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" })); let addSchemaNode = action(() => Documents.SchemaDocument([], { width: 200, height: 200, title: "a schema collection" })); let addTreeNode = action(() => Documents.TreeDocument(this._northstarSchemas, { width: 250, height: 400, title: "northstar schemas", copyDraggedItems: true })); - let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 200, height: 200, title: "video node" })); + let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 200, title: "video node" })); let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, height: 200, title: "a pdf doc" })); - let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" })); + let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, title: "an image of a cat" })); let addWebNode = action(() => Documents.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" })); let addAudioNode = action(() => Documents.AudioDocument(audiourl, { width: 200, height: 200, title: "audio node" })); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index d4385b12c..228fc937e 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -85,7 +85,9 @@ export class CollectionFreeFormView extends CollectionSubView { d.SetNumber(KeyStore.Width, 300); } if (!d.GetNumber(KeyStore.Height, 0)) { - d.SetNumber(KeyStore.Height, 300); + let nw = d.GetNumber(KeyStore.NativeWidth, 0); + let nh = d.GetNumber(KeyStore.NativeHeight, 0); + d.SetNumber(KeyStore.Height, nw && nh ? nh / nw * d.Width() : 300); } this.bringToFront(d); }); diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index fe0b07bc0..38a588812 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -38,7 +38,10 @@ export class ImageBox extends React.Component { onLoad = (target: any) => { var h = this._imgRef.current!.naturalHeight; var w = this._imgRef.current!.naturalWidth; - if (this._photoIndex == 0) this.props.Document.SetNumber(KeyStore.NativeHeight, this.props.Document.GetNumber(KeyStore.NativeWidth, 0) * h / w); + if (this._photoIndex == 0) { + this.props.Document.SetNumber(KeyStore.NativeHeight, this.props.Document.GetNumber(KeyStore.NativeWidth, 0) * h / w); + this.props.Document.SetNumber(KeyStore.Height, this.props.Document.Width() * h / w); + } } @@ -65,7 +68,7 @@ export class ImageBox extends React.Component { if (layout.indexOf(ImageBox.name) !== -1) { let imgData = this.props.Document.Get(KeyStore.Data); if (imgData instanceof ImageField && imgData) { - this.props.Document.Set(KeyStore.Data, new ListField([imgData])); + this.props.Document.SetOnPrototype(KeyStore.Data, new ListField([imgData])); } let imgList = this.props.Document.GetList(KeyStore.Data, [] as any[]); if (imgList) { @@ -137,6 +140,7 @@ export class ImageBox extends React.Component { @action onDotDown(index: number) { this._photoIndex = index; + this.props.Document.SetNumber(KeyStore.CurPage, index); } dots(paths: string[]) { -- cgit v1.2.3-70-g09d2