aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts3
-rw-r--r--src/client/views/EditableView.tsx34
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx1
-rw-r--r--src/client/views/collections/CollectionTreeView.tsx96
-rw-r--r--src/client/views/nodes/ImageBox.tsx2
5 files changed, 103 insertions, 33 deletions
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<string>;
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<U extends Field>(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<EditableProps> {
- @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<HTMLInputElement>) => {
- 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 <input className="editableView-input" defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}
+ if (this._editing) {
+ return <input className="editableView-input" defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus
+ onBlur={action(() => this._editing = false)}
style={{ display: this.props.display }} />;
} else {
return (
- <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`} style={{ display: this.props.display, height: "auto", maxHeight: `${this.props.height}` }}
+ <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`}
+ style={{ display: this.props.display, height: "auto", maxHeight: `${this.props.height}` }}
onClick={this.onClick} >
- <span>{this.props.contents}</span>
+ <span style={{ fontStyle: this.props.fontStyle }}>{this.props.contents}</span>
</div>
);
}
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<DockedFrameProps> {
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<TreeViewProps> {
}
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<TreeViewProps> {
}
return <div className="bullet" onClick={onClicked}>{bullet ? <FontAwesomeIcon icon={bullet} /> : ""} </div>;
}
+ static loadId = "";
+ editableView = (key: string, style?: string) =>
+ (<EditableView
+ oneLine={true}
+ display={"inline"}
+ editing={this.props.document[Id] === TreeView.loadId}
+ contents={StrCast(this.props.document[key])}
+ height={36}
+ fontStyle={style}
+ GetValue={() => 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<HTMLDivElement>();
let onItemDown = SetupDrag(reference, () => this.props.document, this.move, this.props.dropAction, this.props.treeViewId, true);
- let editableView = (titleString: string) =>
- (<EditableView
- oneLine={!this._isOver ? true : false}
- display={"inline"}
- contents={titleString}
- height={36}
- GetValue={() => 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) : (
<div className="treeViewItem-openRight" onPointerDown={this.onPointerDown} onClick={this.openRight}>
@@ -156,7 +176,7 @@ class TreeView extends React.Component<TreeViewProps> {
pointerEvents: this.props.active() || SelectionManager.GetIsDragging() ? "all" : "none"
}}
>
- {editableView(StrCast(this.props.document.title))}
+ {this.editableView("title")}
{/* {<div className="delete-button" onClick={this.delete}><FontAwesomeIcon icon="trash-alt" size="xs" /></div>} */}
</div >
{openRight}
@@ -221,6 +241,7 @@ class TreeView extends React.Component<TreeViewProps> {
return true;
}
+ @observable _chosenKey: string = "data"
_bulletType: BulletType = BulletType.List;
render() {
let bulletType = BulletType.List;
@@ -234,8 +255,22 @@ class TreeView extends React.Component<TreeViewProps> {
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 = <div style={{ display: "block", marginTop: "7px" }} key={this._chosenKey}>{keyList.map(key =>
+ <span className="collectionTreeView-keyHeader" key={key} onPointerDown={action(() => this._chosenKey = key)}
+ style={{ display: "inline", marginRight: "3px", marginTop: "7px", background: key === this._chosenKey ? "lightgray" : undefined }}>
+ {key}
+ </span>)}
+ </div>
+ [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);
let doc = Cast(this.props.document[key], Doc);
@@ -243,9 +278,10 @@ class TreeView extends React.Component<TreeViewProps> {
if (!this._collapsed) {
bulletType = BulletType.Collapsible;
contentElement.push(<ul key={key + "more"}>
- <span className="collectionTreeView-keyHeader" style={{ display: "block", marginTop: "7px" }} key={key}>{key}</span>
+ {headerElements}
<div style={{ display: "block" }}>
{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)}
</div>
</ul >);
@@ -274,14 +310,36 @@ class TreeView extends React.Component<TreeViewProps> {
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 =>
- <TreeView document={child} treeViewId={treeViewId} key={child[Id]} deleteDoc={remove} addDocument={add} moveDocument={move}
- dropAction={dropAction} addDocTab={addDocTab} ScreenToLocalTransform={screenToLocalXf} parentKey={key} active={active} />);
+ 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 <TreeView
+ document={child}
+ treeViewId={treeViewId}
+ key={child[Id]}
+ indentDocument={indent}
+ deleteDoc={remove}
+ addDocument={add}
+ moveDocument={move}
+ dropAction={dropAction}
+ addDocTab={addDocTab}
+ ScreenToLocalTransform={screenToLocalXf}
+ parentKey={key}
+ active={active} />
+ });
}
}
@@ -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 (
<div id="body" className="collectionTreeView-dropTarget"
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 6b8b64c5f..345fa5cc7 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -217,7 +217,7 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
let aspect = (rotation % 180) ? this.props.Document[HeightSym]() / this.props.Document[WidthSym]() : 1;
let shift = (rotation % 180) ? (nativeHeight - nativeWidth / aspect) / 2 : 0;
return (
- <div id={id} className={`imageBox-cont${interactive}`}
+ <div id={id} className={`imageBox-cont${interactive}`} style={{ background: "transparent" }}
onPointerDown={this.onPointerDown}
onDrop={this.onDrop} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}>
<img id={id}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 21:35:06 +0000