From 3b880d7b15b7107049ae27601b9f759b17f7fde9 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 18 Jun 2019 22:51:46 -0400 Subject: added initial keyboard shortcuts for adding and moving docs in TreeView. fixed image drag bug. --- src/client/documents/Documents.ts | 3 +- src/client/views/EditableView.tsx | 34 +++++--- .../views/collections/CollectionDockingView.tsx | 1 + .../views/collections/CollectionTreeView.tsx | 96 +++++++++++++++++----- src/client/views/nodes/ImageBox.tsx | 2 +- 5 files changed, 103 insertions(+), 33 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 91d3707f6..fcd1010c6 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -51,7 +51,6 @@ export interface DocumentOptions { panY?: number; page?: number; scale?: number; - baseLayout?: string; layout?: string; templates?: List; viewType?: number; @@ -136,7 +135,7 @@ export namespace Docs { } function setupPrototypeOptions(protoId: string, title: string, layout: string, options: DocumentOptions): Doc { - return Doc.assign(new Doc(protoId, true), { ...options, title: title, layout: layout, baseLayout: layout }); + return Doc.assign(new Doc(protoId, true), { ...options, title: title, layout: layout }); } function SetInstanceOptions(doc: Doc, options: DocumentOptions, value: U) { const deleg = Doc.MakeDelegate(doc); diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index c946d68e1..a96fca464 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -18,13 +18,17 @@ export interface EditableProps { OnFillDown?(value: string): void; + OnTab?(): void; + /** * The contents to render when not editing */ contents: any; + fontStyle?: string; height?: number; display?: string; oneLine?: boolean; + editing?: boolean } /** @@ -34,40 +38,48 @@ export interface EditableProps { */ @observer export class EditableView extends React.Component { - @observable - editing: boolean = false; + @observable _editing: boolean = false; + + constructor(props: EditableProps) { + super(props); + this._editing = this.props.editing ? true : false; + } @action onKeyDown = (e: React.KeyboardEvent) => { - if (e.key === "Enter") { + if (e.key === "Tab") { + this.props.OnTab && this.props.OnTab(); + } else if (e.key === "Enter") { if (!e.ctrlKey) { if (this.props.SetValue(e.currentTarget.value)) { - this.editing = false; + this._editing = false; } } else if (this.props.OnFillDown) { this.props.OnFillDown(e.currentTarget.value); - this.editing = false; + this._editing = false; } } else if (e.key === "Escape") { - this.editing = false; + this._editing = false; } } @action onClick = (e: React.MouseEvent) => { - this.editing = true; + this._editing = true; e.stopPropagation(); } render() { - if (this.editing) { - return this.editing = false)} + if (this._editing) { + return this._editing = false)} style={{ display: this.props.display }} />; } else { return ( -
- {this.props.contents} + {this.props.contents}
); } diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index f2b3528b8..bd3020a78 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -467,6 +467,7 @@ export class DockedFrameRenderer extends React.Component { let docHeight = NumCast(this._document!.height); if (NumCast(this._document!.nativeWidth) || !docWidth || !this._panelWidth || !this._panelHeight) return 1; if (StrCast(this._document!.layout).indexOf("Collection") === -1 || + !BoolCast(this._document!.fitToContents, false) || NumCast(this._document!.viewType) !== CollectionViewType.Freeform) return 1; let scaling = Math.max(1, this._panelWidth / docWidth * docHeight > this._panelHeight ? this._panelHeight / docHeight : this._panelWidth / docWidth); diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index b13694e9d..23efe9f79 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -21,6 +21,7 @@ import "./CollectionTreeView.scss"; import React = require("react"); import { Transform } from '../../util/Transform'; import { SelectionManager } from '../../util/SelectionManager'; +import { emptyFunction } from '../../../Utils'; export interface TreeViewProps { @@ -30,6 +31,7 @@ export interface TreeViewProps { dropAction: "alias" | "copy" | undefined; addDocTab: (doc: Doc, where: string) => void; addDocument: (doc: Doc, relativeTo?: Doc, before?: boolean) => boolean; + indentDocument?: () => void; ScreenToLocalTransform: () => Transform; treeViewId: string; parentKey: string; @@ -114,6 +116,12 @@ class TreeView extends React.Component { } return true; } + @action + indent = () => { + this.props.addDocument(this.props.document); + this.delete(); + } + renderBullet(type: BulletType) { let onClicked = action(() => this._collapsed = !this._collapsed); @@ -124,25 +132,37 @@ class TreeView extends React.Component { } return
{bullet ? : ""}
; } + static loadId = ""; + editableView = (key: string, style?: string) => + ( StrCast(this.props.document[key])} + OnFillDown={(value: string) => { + Doc.GetProto(this.props.document)[key] = value; + let doc = Docs.FreeformDocument([], { title: "untitled" }); + TreeView.loadId = doc[Id]; + this.props.addDocument(doc); + return true; + }} + OnTab={() => this.props.indentDocument && this.props.indentDocument()} + SetValue={(value: string) => { + Doc.GetProto(this.props.document)[key] = value; + return true; + }} + />); + /** * Renders the EditableView title element for placement into the tree. */ renderTitle() { let reference = React.createRef(); let onItemDown = SetupDrag(reference, () => this.props.document, this.move, this.props.dropAction, this.props.treeViewId, true); - let editableView = (titleString: string) => - ( StrCast(this.props.document.title)} - SetValue={(value: string) => { - let target = this.props.document.proto ? this.props.document.proto : this.props.document; - target.title = value; - return true; - }} - />); + let dataDocs = CollectionDockingView.Instance ? Cast(CollectionDockingView.Instance.props.Document.data, listSpec(Doc), []) : []; let openRight = dataDocs && dataDocs.indexOf(this.props.document) !== -1 ? (null) : (
@@ -156,7 +176,7 @@ class TreeView extends React.Component { pointerEvents: this.props.active() || SelectionManager.GetIsDragging() ? "all" : "none" }} > - {editableView(StrCast(this.props.document.title))} + {this.editableView("title")} {/* {
} */}
{openRight} @@ -221,6 +241,7 @@ class TreeView extends React.Component { return true; } + @observable _chosenKey: string = "data" _bulletType: BulletType = BulletType.List; render() { let bulletType = BulletType.List; @@ -234,7 +255,21 @@ class TreeView extends React.Component { keys.splice(keys.indexOf("data"), 1); keys.splice(0, 0, "data"); } + let keyList: string[] = []; keys.map(key => { + let docList = Cast(this.props.document[key], listSpec(Doc)); + let doc = Cast(this.props.document[key], Doc); + if (doc instanceof Doc || (docList && (DocListCast(docList).length > 0 || key === "data"))) { + keyList.push(key); + } + }); + let headerElements =
{keyList.map(key => + this._chosenKey = key)} + style={{ display: "inline", marginRight: "3px", marginTop: "7px", background: key === this._chosenKey ? "lightgray" : undefined }}> + {key} + )} +
+ [this._chosenKey].map(key => { let docList = Cast(this.props.document[key], listSpec(Doc)); let remDoc = (doc: Doc) => this.remove(doc, key); let addDoc = (doc: Doc, addBefore?: Doc, before?: boolean) => TreeView.AddDocToList(this.props.document, key, doc, addBefore, before); @@ -243,9 +278,10 @@ class TreeView extends React.Component { if (!this._collapsed) { bulletType = BulletType.Collapsible; contentElement.push(
    - {key} + {headerElements}
    {TreeView.GetChildElements(doc instanceof Doc ? [doc] : DocListCast(docList), this.props.treeViewId, key, addDoc, remDoc, this.move, + this.indent, this.props.dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.props.active)}
); @@ -274,14 +310,36 @@ class TreeView extends React.Component { add: (doc: Doc, relativeTo?: Doc, before?: boolean) => boolean, remove: ((doc: Doc) => void), move: DragManager.MoveFunction, + indent: () => void, dropAction: dropActionType, addDocTab: (doc: Doc, where: string) => void, screenToLocalXf: () => Transform, active: () => boolean ) { - return docs.filter(child => !child.excludeFromLibrary && (key !== "data" || !child.isMinimized)).map(child => - ); + let docList = docs.filter(child => !child.excludeFromLibrary && (key !== "data" || !child.isMinimized)); + return docList.map((child, i) => { + let indent = i == 0 ? undefined : () => { + if (StrCast(docList[i - 1].layout).indexOf("CollectionView") !== -1) { + let fieldKeysub = StrCast(docList[i - 1].layout).split("fieldKey")[1]; + let fieldKey = fieldKeysub.split("\"")[1]; + TreeView.AddDocToList(docList[i - 1], fieldKey, child); + remove(child); + } + } + return + }); } } @@ -321,7 +379,7 @@ export class CollectionTreeView extends CollectionSubView(Document) { let addDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => TreeView.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before); let moveDoc = (d: Doc, target: Doc, addDoc: (doc: Doc) => boolean) => this.props.moveDocument(d, target, addDoc); let childElements = TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.fieldKey, addDoc, this.remove, - moveDoc, dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.props.active); + moveDoc, emptyFunction, dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.props.active); return (
(ImageD let aspect = (rotation % 180) ? this.props.Document[HeightSym]() / this.props.Document[WidthSym]() : 1; let shift = (rotation % 180) ? (nativeHeight - nativeWidth / aspect) / 2 : 0; return ( -