From 267bab4c2935841e6e94c63b982af9901ad89cbc Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 28 Jan 2020 11:11:18 -0500 Subject: multicolumn drop fixes. adding menu entry to stacking columndocs. fixed imagebox nativewidth/height settings. --- src/client/views/EditableView.tsx | 20 +++++---- src/client/views/MetadataEntryMenu.tsx | 1 - src/client/views/TemplateMenu.scss | 1 + .../CollectionStackingViewFieldColumn.tsx | 49 +++++++++++++++------- src/client/views/collections/CollectionView.tsx | 6 +-- .../views/collections/CollectionViewChromes.tsx | 5 ++- .../CollectionMulticolumnView.tsx | 20 +++++++-- src/client/views/nodes/ImageBox.tsx | 2 +- 8 files changed, 69 insertions(+), 35 deletions(-) (limited to 'src') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 394caba72..780c5b2f4 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -1,11 +1,12 @@ import React = require('react'); +import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; -import { observable, action, trace } from 'mobx'; -import "./EditableView.scss"; import * as Autosuggest from 'react-autosuggest'; -import { undoBatch } from '../util/UndoManager'; -import { SchemaHeaderField } from '../../new_fields/SchemaHeaderField'; import { ObjectField } from '../../new_fields/ObjectField'; +import { SchemaHeaderField } from '../../new_fields/SchemaHeaderField'; +import { ContextMenu } from './ContextMenu'; +import { ContextMenuProps } from './ContextMenuItem'; +import "./EditableView.scss"; export interface EditableProps { /** @@ -44,6 +45,7 @@ export interface EditableProps { editing?: boolean; onClick?: (e: React.MouseEvent) => boolean; isEditingCallback?: (isEditing: boolean) => void; + menuCallback?: (x: number, y: number) => void; HeadingObject?: SchemaHeaderField | undefined; HeadingsHack?: number; toggle?: () => void; @@ -88,12 +90,14 @@ export class EditableView extends React.Component { } else if (this.props.OnFillDown) { this.props.OnFillDown(e.currentTarget.value); this._editing = false; - this.props.isEditingCallback && this.props.isEditingCallback(false); + this.props.isEditingCallback?.(false); } } else if (e.key === "Escape") { e.stopPropagation(); this._editing = false; - this.props.isEditingCallback && this.props.isEditingCallback(false); + this.props.isEditingCallback?.(false); + } else if (e.key === ":") { + this.props.menuCallback?.(e.currentTarget.offsetLeft, e.currentTarget.offsetTop); } } @@ -102,7 +106,7 @@ export class EditableView extends React.Component { e.nativeEvent.stopPropagation(); if (!this.props.onClick || !this.props.onClick(e)) { this._editing = true; - this.props.isEditingCallback && this.props.isEditingCallback(true); + this.props.isEditingCallback?.(true); } e.stopPropagation(); } @@ -111,7 +115,7 @@ export class EditableView extends React.Component { private finalizeEdit(value: string, shiftDown: boolean) { this._editing = false; if (this.props.SetValue(value, shiftDown)) { - this.props.isEditingCallback && this.props.isEditingCallback(false); + this.props.isEditingCallback?.(false); } } diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx index a48e8f508..22259e509 100644 --- a/src/client/views/MetadataEntryMenu.tsx +++ b/src/client/views/MetadataEntryMenu.tsx @@ -19,7 +19,6 @@ export interface MetadataEntryProps { export class MetadataEntryMenu extends React.Component{ @observable private _currentKey: string = ""; @observable private _currentValue: string = ""; - @observable private suggestions: string[] = []; private _addChildren: boolean = false; @observable _allSuggestions: string[] = []; _suggestionDispser: IReactionDisposer | undefined; diff --git a/src/client/views/TemplateMenu.scss b/src/client/views/TemplateMenu.scss index 858fcfb5f..bbed8cd96 100644 --- a/src/client/views/TemplateMenu.scss +++ b/src/client/views/TemplateMenu.scss @@ -42,6 +42,7 @@ .templateToggle, .chromeToggle { text-align: left; + color: black; } input { diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index dabc14445..6a6f7aa6d 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -21,6 +21,9 @@ import { TraceMobx } from "../../../new_fields/util"; import { FormattedTextBox } from "../nodes/FormattedTextBox"; import { ImageField } from "../../../new_fields/URLField"; import { ImageBox } from "../nodes/ImageBox"; +import { ContextMenu } from "../ContextMenu"; +import { ContextMenuProps } from "../ContextMenuItem"; +import { RichTextField } from "../../../new_fields/RichTextField"; library.add(faPalette); @@ -135,21 +138,7 @@ export class CollectionStackingViewFieldColumn extends React.Component { - if (value === ":freeForm") { - return this.props.parent.props.addDocument(Docs.Create.FreeformDocument([], { _width: 200, _height: 200 })); - } else if (value.startsWith(":")) { - const { Document, addDocument } = this.props.parent.props; - const fieldKey = value.substring(1); - const dataDoc = this.props.parent.props.DataDoc || this.props.parent.Document; - const created = Docs.Get.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(Document)); - if (created) { - if (this.props.parent.Document.isTemplateDoc) { - Doc.MakeMetadataFieldTemplate(created, this.props.parent.props.Document); - } - return addDocument(created); - } - return false; - } + if (!value) return false; this._createAliasSelected = false; const key = StrCast(this.props.parent.props.Document.sectionFilter); const newDoc = Docs.Create.TextDocument(value, { _height: 18, _width: 200, title: value, _autoHeight: true }); @@ -275,6 +264,34 @@ export class CollectionStackingViewFieldColumn extends React.Component { + ContextMenu.Instance.clearItems(); + const layoutItems: ContextMenuProps[] = []; + const docItems: ContextMenuProps[] = []; + + const dataDoc = this.props.parent.props.DataDoc || this.props.parent.Document; + Array.from(Object.keys(Doc.GetProto(dataDoc))).filter(fieldKey => dataDoc[fieldKey] instanceof RichTextField || dataDoc[fieldKey] instanceof ImageField).map(fieldKey => + docItems.push({ + description: ":" + fieldKey, event: () => { + const created = Docs.Get.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this.props.parent.props.Document)); + if (created) { + if (this.props.parent.Document.isTemplateDoc) { + Doc.MakeMetadataFieldTemplate(created, this.props.parent.props.Document); + } + return this.props.parent.props.addDocument(created); + } + }, icon: "compress-arrows-alt" + })); + layoutItems.push({ description: ":freeform", event: () => this.props.parent.props.addDocument(Docs.Create.FreeformDocument([], { _width: 200, _height: 200, _LODdisable: true })), icon: "compress-arrows-alt" }); + layoutItems.push({ description: ":columns", event: () => this.props.parent.props.addDocument(Docs.Create.MulticolumnDocument([], { _width: 200, _height: 200 })), icon: "compress-arrows-alt" }); + layoutItems.push({ description: ":image", event: () => this.props.parent.props.addDocument(Docs.Create.ImageDocument("http://www.cs.brown.edu/~bcz/face.gif", { _width: 200, _height: 200 })), icon: "compress-arrows-alt" }); + + ContextMenu.Instance.addItem({ description: "Doc Fields ...", subitems: docItems, icon: "eye" }); + ContextMenu.Instance.addItem({ description: "Containers ...", subitems: layoutItems, icon: "eye" }); + const pt = this.props.screenToLocalTransform().inverse().transformPoint(x, y); + ContextMenu.Instance.displayMenu(pt[0], pt[1]); + } + render() { TraceMobx(); const cols = this.props.cols(); @@ -375,7 +392,7 @@ export class CollectionStackingViewFieldColumn extends React.Component - + : null} } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 0910e6d40..dab0ce08e 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -48,11 +48,11 @@ export enum CollectionViewType { Tree, Stacking, Masonry, + Multicolumn, Pivot, - Linear, Carousel, + Linear, Staff, - Multicolumn, Timeline } @@ -65,10 +65,10 @@ export namespace CollectionViewType { ["tree", CollectionViewType.Tree], ["stacking", CollectionViewType.Stacking], ["masonry", CollectionViewType.Masonry], + ["multicolumn", CollectionViewType.Multicolumn], ["pivot", CollectionViewType.Pivot], ["carousel", CollectionViewType.Carousel], ["linear", CollectionViewType.Linear], - ["multicolumn", CollectionViewType.Multicolumn] ]); export const valueOf = (value: string) => stringMapping.get(value.toLowerCase()); diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index d3ac86070..e09f90e2c 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -404,9 +404,10 @@ export class CollectionViewBaseChrome extends React.ComponentTree View - - + + +
; const MulticolumnDocument = makeInterface(documentSchema); @@ -186,6 +188,19 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu return Transform.Identity(); // type coersion, this case should never be hit } + @undoBatch + @action + drop = (e: Event, de: DragManager.DropEvent) => { + if (super.drop(e, de)) { + de.complete.docDragData?.droppedDocuments.forEach(action((d: Doc) => { + d.widthUnit = "*"; + d.widthMagnitude = 1; + })); + } + return false; + } + + @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } /** @@ -234,10 +249,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu render(): JSX.Element { return ( -
+
{this.contents}
); diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index ffcbe459e..33c694c6e 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -257,7 +257,7 @@ export class ImageBox extends DocAnnotatableComponent console.log(err)); } else if (this.Document._nativeHeight !== cachedNativeSize.width || this.Document._nativeWidth !== cachedNativeSize.height) { - setTimeout(() => { + !(this.Document[StrCast(this.props.Document.layoutKey)] instanceof Doc) && setTimeout(() => { this.Document._nativeWidth = cachedNativeSize.width; this.Document._nativeHeight = cachedNativeSize.height; }, 0); -- cgit v1.2.3-70-g09d2