aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections
diff options
context:
space:
mode:
authorFawn <fangrui_tong@brown.edu>2019-07-26 16:23:22 -0400
committerFawn <fangrui_tong@brown.edu>2019-07-26 16:23:22 -0400
commitf5ffd372f48f68cd17ca15a8c1f5c7d67b0f7aae (patch)
tree840a6748350749bcbfe418fc08e45be958e2c8bc /src/client/views/collections
parent1bedf9e23afe26a284ba4804672ad4f396402813 (diff)
parent6c6c2a6c8e40b9f04942e65c416e16f1d3831385 (diff)
merged
Diffstat (limited to 'src/client/views/collections')
-rw-r--r--src/client/views/collections/CollectionSchemaView.scss15
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx36
-rw-r--r--src/client/views/collections/CollectionStackingView.scss42
-rw-r--r--src/client/views/collections/CollectionStackingView.tsx23
-rw-r--r--src/client/views/collections/CollectionStackingViewFieldColumn.tsx26
-rw-r--r--src/client/views/collections/CollectionTreeView.scss27
-rw-r--r--src/client/views/collections/CollectionTreeView.tsx120
-rw-r--r--src/client/views/collections/CollectionView.tsx29
-rw-r--r--src/client/views/collections/CollectionViewChromes.scss255
-rw-r--r--src/client/views/collections/CollectionViewChromes.tsx249
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss5
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx115
12 files changed, 508 insertions, 434 deletions
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index e56c705f0..91c6e8b3c 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -10,8 +10,19 @@
width: 100%;
height: calc(100% - 50px);
// overflow: hidden;
- overflow-x: scroll;
- border: none;
+ // overflow-x: scroll;
+ // border: none;
+ overflow: hidden;
+ transition: top 0.5s;
+
+ // .collectionSchemaView-cellContents {
+ // height: $MAX_ROW_HEIGHT;
+
+ // img {
+ // width: auto;
+ // max-height: $MAX_ROW_HEIGHT;
+ // }
+ // }
.collectionSchemaView-previewRegion {
position: relative;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index aa36b8584..60644b741 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -15,7 +15,7 @@ import { Cast, FieldValue, NumCast, StrCast, BoolCast } from "../../../new_field
import { Docs, DocumentOptions } from "../../documents/Documents";
import { Gateway } from "../../northstar/manager/Gateway";
import { SetupDrag, DragManager } from "../../util/DragManager";
-import { CompileScript } from "../../util/Scripting";
+import { CompileScript, ts, Transformer } from "../../util/Scripting";
import { Transform } from "../../util/Transform";
import { COLLECTION_BORDER_WIDTH, MAX_ROW_HEIGHT } from '../../views/globalCssVariables.scss';
import { ContextMenu } from "../ContextMenu";
@@ -70,6 +70,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
@observable private _node: HTMLDivElement | null = null;
@observable private _focusedTable: Doc = this.props.Document;
+ @computed get chromeCollapsed() { return this.props.chromeCollapsed; }
@computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
@computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; }
@computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); }
@@ -219,7 +220,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
}
@computed
- get schemaToolbar() {
+ public get schemaToolbar() {
return (
<div className="collectionSchemaView-toolbar">
<div className="collectionSchemaView-toolbar-item">
@@ -234,15 +235,12 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
// if (SelectionManager.SelectedDocuments().length > 0) console.log(StrCast(SelectionManager.SelectedDocuments()[0].Document.title));
// if (DocumentManager.Instance.getDocumentView(this.props.Document)) console.log(StrCast(this.props.Document.title), SelectionManager.IsSelected(DocumentManager.Instance.getDocumentView(this.props.Document)!))
return (
- <>
- {this.schemaToolbar}
- <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} onWheel={this.onWheel}
- onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createTarget}>
- {this.schemaTable}
- {this.dividerDragger}
- {!this.previewWidth() ? (null) : this.previewPanel}
- </div>
- </>
+ <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} onWheel={this.onWheel}
+ onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createTarget}>
+ {this.schemaTable}
+ {this.dividerDragger}
+ {!this.previewWidth() ? (null) : this.previewPanel}
+ </div>
);
}
}
@@ -441,7 +439,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
if (!column) return {};
let row = rowInfo.index;
- let col = this.columns.indexOf(column.id);
+ //@ts-ignore
+ let col = this.columns.indexOf(column!.id);
// let col = column ? this.columns.indexOf(column!) : -1;
let isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.props.isFocused(this.props.Document);
// let column = this.columns.indexOf(column.id!);
@@ -549,6 +548,17 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
fdoc && this.props.setPreviewDoc(fdoc);
}
+ createRow = () => {
+ console.log("creating row");
+ let doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document;
+ let children = Cast(doc[this.props.fieldKey], listSpec(Doc), []);
+
+ let newDoc = Docs.Create.TextDocument({ width: 100, height: 30 });
+ let proto = Doc.GetProto(newDoc);
+ proto.title = "";
+ children.push(newDoc);
+ }
+
@action
createColumn = () => {
let index = 0;
@@ -676,6 +686,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
let hasCollectionChild = children.reduce((found, doc) => found || doc.type === "collection", false);
let expandedRowsList = this._openCollections.map(col => children.findIndex(doc => doc[Id] === col).toString());
let expanded = {};
+ //@ts-ignore
expandedRowsList.forEach(row => expanded[row] = true);
console.log(...[...this._textWrappedRows]); // TODO: get component to rerender on text wrap change without needign to console.log :((((
@@ -738,6 +749,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
<div className="collectionSchemaView-table" onPointerDown={this.onPointerDown} onWheel={this.onWheel}
onDrop={(e: React.DragEvent) => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} >
{this.reactTable}
+ <button onClick={() => this.createRow()}>new row</button>
</div>
);
}
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index f43340967..9dbe4ccb8 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -96,7 +96,6 @@
outline: none;
border: 0px;
color: $light-color;
- text-transform: uppercase;
letter-spacing: 2px;
font-size: 75%;
transition: transform 0.2s;
@@ -118,9 +117,7 @@
padding: 12px 10px 11px 10px;
border: 0px;
color: grey;
- // font-size: 75%;
text-align: center;
- text-transform: uppercase;
letter-spacing: 2px;
outline-color: black;
}
@@ -142,15 +139,6 @@
width: 90%;
color: lightgrey;
overflow: ellipses;
- }
-
- .collectionStackingView-addGroupButton {
- background: rgb(238, 238, 238);
- font-size: 75%;
- text-align: center;
- text-transform: uppercase;
- letter-spacing: 2px;
- height: fit-content;
.editableView-container-editing-oneLine,
.editableView-container-editing {
@@ -165,14 +153,32 @@
}
.editableView-input {
- padding: 12px 10px 11px 10px;
- border: 0px;
- color: grey;
- // font-size: 75%;
- text-align: center;
- text-transform: uppercase;
+ outline-color: black;
letter-spacing: 2px;
+ color: grey;
+ border: 0px;
+ padding: 12px 10px 11px 10px;
+ }
+ }
+
+ .collectionStackingView-addDocumentButton {
+ font-size: 75%;
+ letter-spacing: 2px;
+
+ .editableView-input {
outline-color: black;
+ letter-spacing: 2px;
+ color: grey;
+ border: 0px;
+ padding: 12px 10px 11px 10px;
}
}
+
+ .collectionStackingView-addGroupButton {
+ background: rgb(238, 238, 238);
+ font-size: 75%;
+ text-align: center;
+ letter-spacing: 2px;
+ height: fit-content;
+ }
} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 2e90e8be4..7677f53c1 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -4,8 +4,8 @@ import { action, computed, IReactionDisposer, reaction, untracked, observable, r
import { observer } from "mobx-react";
import { Doc, HeightSym, WidthSym, DocListCast } from "../../../new_fields/Doc";
import { Id } from "../../../new_fields/FieldSymbols";
-import { BoolCast, NumCast, Cast, StrCast, FieldValue } from "../../../new_fields/Types";
-import { emptyFunction, Utils } from "../../../Utils";
+import { BoolCast, NumCast, Cast, StrCast } from "../../../new_fields/Types";
+import { emptyFunction, Utils, returnTrue } from "../../../Utils";
import { CollectionSchemaPreview } from "./CollectionSchemaView";
import "./CollectionStackingView.scss";
import { CollectionSubView, SubCollectionViewProps } from "./CollectionSubView";
@@ -21,8 +21,6 @@ import { List } from "../../../new_fields/List";
import { EditableView } from "../EditableView";
import { CollectionViewProps } from "./CollectionBaseView";
-let valuesCreated = 1;
-
@observer
export class CollectionStackingView extends CollectionSubView(doc => doc) {
_masonryGridRef: HTMLDivElement | null = null;
@@ -33,7 +31,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
_columnStart: number = 0;
@observable private cursor: CursorProperty = "grab";
get sectionHeaders() { return Cast(this.props.Document.sectionHeaders, listSpec(SchemaHeaderField)); }
- get chromeCollapsed() { return this.props.chromeCollapsed; }
+ @computed get chromeCollapsed() { return this.props.chromeCollapsed; }
@computed get xMargin() { return NumCast(this.props.Document.xMargin, 2 * this.gridGap); }
@computed get yMargin() { return NumCast(this.props.Document.yMargin, 2 * this.gridGap); }
@computed get gridGap() { return NumCast(this.props.Document.gridGap, 10); }
@@ -49,7 +47,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
let fields = new Map<SchemaHeaderField, Doc[]>(sectionHeaders.map(sh => [sh, []]));
if (sectionFilter) {
this.filteredChildren.map(d => {
- let sectionValue = (d[sectionFilter] ? d[sectionFilter] : `No ${sectionFilter} value`) as object;
+ let sectionValue = (d[sectionFilter] ? d[sectionFilter] : `NO ${sectionFilter.toUpperCase()} VALUE`) as object;
// the next five lines ensures that floating point rounding errors don't create more than one section -syip
let parsed = parseInt(sectionValue.toString());
let castedSectionValue: any = sectionValue;
@@ -58,12 +56,12 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
}
// look for if header exists already
- let existingHeader = sectionHeaders!.find(sh => sh.heading === (castedSectionValue ? castedSectionValue.toString() : `No ${sectionFilter} value`));
+ let existingHeader = sectionHeaders!.find(sh => sh.heading === (castedSectionValue ? castedSectionValue.toString() : `NO ${sectionFilter.toUpperCase()} VALUE`));
if (existingHeader) {
fields.get(existingHeader)!.push(d);
}
else {
- let newSchemaHeader = new SchemaHeaderField(castedSectionValue ? castedSectionValue.toString() : `No ${sectionFilter} value`);
+ let newSchemaHeader = new SchemaHeaderField(castedSectionValue ? castedSectionValue.toString() : `NO ${sectionFilter.toUpperCase()} VALUE`);
fields.set(newSchemaHeader, [d]);
sectionHeaders!.push(newSchemaHeader);
}
@@ -84,9 +82,8 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
() => StrCast(this.props.Document.sectionFilter),
() => {
this.props.Document.sectionHeaders = new List();
- valuesCreated = 1;
}
- )
+ );
}
componentWillUnmount() {
this._heightDisposer && this._heightDisposer();
@@ -264,8 +261,8 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
let editableViewProps = {
GetValue: () => "",
SetValue: this.addGroup,
- contents: "+ Add a Group"
- }
+ contents: "+ ADD A GROUP"
+ };
// let uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
return (
<div className="collectionStackingView" style={{ top: this.chromeCollapsed ? 0 : 100 }}
@@ -275,7 +272,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
["width = height", this.filteredChildren.filter(f => Math.abs(f[WidthSym]() - f[HeightSym]()) < 1)],
["height > width", this.filteredChildren.filter(f => f[WidthSym]() + 1 <= f[HeightSym]())]]. */}
{this.props.Document.sectionFilter ? Array.from(this.Sections.entries()).sort(this.sortFunc).
- map(section => this.section(section[0], section[1] as Doc[])) :
+ map(section => this.section(section[0], section[1])) :
this.section(undefined, this.filteredChildren)}
{this.props.Document.sectionFilter ?
<div key={`${this.props.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton"
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 582adc418..ea2a302ff 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -18,6 +18,7 @@ import { SchemaHeaderField } from "../../../new_fields/SchemaHeaderField";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ScriptField } from "../../../new_fields/ScriptField";
import { CompileScript } from "../../util/Scripting";
+import { RichTextField } from "../../../new_fields/RichTextField";
interface CSVFieldColumnProps {
@@ -168,11 +169,11 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
}
@action
- addDocument = () => {
+ addDocument = (value: string, shiftDown?: boolean) => {
let key = StrCast(this.props.parent.props.Document.sectionFilter);
- let newDoc = Docs.Create.TextDocument({ height: 18, title: "new text document" });
+ let newDoc = Docs.Create.TextDocument({ height: 18, width: 200, title: value });
newDoc[key] = this.getValue(this.props.heading);
- this.props.parent.props.addDocument(newDoc);
+ return this.props.parent.props.addDocument(newDoc);
}
@action
@@ -231,29 +232,34 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
let style = this.props.parent;
let singleColumn = style.singleColumn;
let uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
- let evContents = heading ? heading : this.props.type && this.props.type === "number" ? "0" : `No ${key} value`;
- let editableViewProps = {
+ let evContents = heading ? heading : this.props.type && this.props.type === "number" ? "0" : `NO ${key.toUpperCase()} VALUE`;
+ let headerEditableViewProps = {
GetValue: () => evContents,
SetValue: this.headingChanged,
contents: evContents,
oneLine: true
}
+ let newEditableViewProps = {
+ GetValue: () => "",
+ SetValue: this.addDocument,
+ contents: "+ NEW"
+ }
let headingView = this.props.headingObject ?
<div key={heading} className="collectionStackingView-sectionHeader" ref={this._headerRef}
style={{ width: (style.columnWidth) / (uniqueHeadings.length + 1) }}>
{/* the default bucket (no key value) has a tooltip that describes what it is.
Further, it does not have a color and cannot be deleted. */}
<div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown}
- title={evContents === `No ${key} value` ?
+ title={evContents === `NO ${key.toUpperCase()} VALUE` ?
`Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
style={{
width: "100%",
- background: this.props.headingObject && evContents !== `No ${key} value` ?
+ background: this.props.headingObject && evContents !== `NO ${key.toUpperCase()} VALUE` ?
this.props.headingObject.color : "lightgrey",
color: "grey"
}}>
- <EditableView {...editableViewProps} />
- {evContents === `No ${key} value` ?
+ <EditableView {...headerEditableViewProps} />
+ {evContents === `NO ${key.toUpperCase()} VALUE` ?
(null) :
<button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}>
<FontAwesomeIcon icon="trash" />
@@ -282,7 +288,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
</div>
<div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
style={{ width: style.columnWidth / (uniqueHeadings.length + 1) }}>
- <button style={{ width: "100%" }} onClick={this.addDocument}>+ New</button>
+ <EditableView {...newEditableViewProps} />
</div>
</div>
);
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 5205f4313..db3652ff6 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -31,6 +31,7 @@
margin-top: 4px;
transform: scale(1.3, 1.3);
}
+
.editableView-container {
font-weight: bold;
}
@@ -43,18 +44,20 @@
display: inline;
}
- .editableView-input, .editableView-container-editing {
+ .editableView-input,
+ .editableView-container-editing {
display: block;
text-overflow: ellipsis;
font-size: 24px;
white-space: nowrap;
}
}
+
.collectionTreeView-keyHeader {
font-style: italic;
font-size: 8pt;
margin-left: 3px;
- display:none;
+ display: none;
background: lightgray;
}
@@ -72,28 +75,31 @@
// width:100%;//width: max-content;
}
+
.treeViewItem-openRight {
display: none;
}
.treeViewItem-border {
- display:inherit;
+ display: inherit;
border-left: dashed 1px #00000042;
}
.treeViewItem-header:hover {
.collectionTreeView-keyHeader {
- display:inherit;
+ display: inherit;
}
+
.treeViewItem-openRight {
display: inline-block;
- height:13px;
- margin-top:2px;
+ height: 13px;
+ margin-top: 2px;
margin-left: 5px;
+
// display: inline;
svg {
- display:block;
- padding:0px;
+ display: block;
+ padding: 0px;
margin: 0px;
}
}
@@ -101,14 +107,17 @@
.treeViewItem-header {
border: transparent 1px solid;
- display:flex;
+ display: flex;
}
+
.treeViewItem-header-above {
border-top: black 1px solid;
}
+
.treeViewItem-header-below {
border-bottom: black 1px solid;
}
+
.treeViewItem-header-inside {
border: black 1px solid;
} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index f98629c5b..eeb33b40d 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -3,7 +3,7 @@ import { faAngleRight, faCamera, faExpand, faTrash, faBell, faCaretDown, faCaret
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable, trace, untracked } from "mobx";
import { observer } from "mobx-react";
-import { Doc, DocListCast, HeightSym, WidthSym, Opt } from '../../../new_fields/Doc';
+import { Doc, DocListCast, HeightSym, WidthSym, Opt, Field } from '../../../new_fields/Doc';
import { Id } from '../../../new_fields/FieldSymbols';
import { List } from '../../../new_fields/List';
import { Document, listSpec } from '../../../new_fields/Schema';
@@ -26,6 +26,8 @@ import { CollectionSubView } from "./CollectionSubView";
import "./CollectionTreeView.scss";
import React = require("react");
import { LinkManager } from '../../util/LinkManager';
+import { ComputedField } from '../../../new_fields/ScriptField';
+import { KeyValueBox } from '../nodes/KeyValueBox';
export interface TreeViewProps {
@@ -68,15 +70,15 @@ class TreeView extends React.Component<TreeViewProps> {
private _header?: React.RefObject<HTMLDivElement> = React.createRef();
private _treedropDisposer?: DragManager.DragDropDisposer;
private _dref = React.createRef<HTMLDivElement>();
- @observable __chosenKey: string = "";
- @computed get _chosenKey() { return this.__chosenKey ? this.__chosenKey : this.fieldKey; }
+ @computed get treeViewExpandedView() { return StrCast(this.props.document.treeViewExpandedView, "data"); }
@computed get MAX_EMBED_HEIGHT() { return NumCast(this.props.document.maxEmbedHeight, 300); }
@observable _collapsed: boolean = true;
@computed get fieldKey() {
- let keys = Array.from(Object.keys(this.dataDoc)); // bcz: Argh -- make untracked to avoid this rerunning whenever 'libraryBrush' is set
- if (this.dataDoc.proto instanceof Doc) {
- let arr = Array.from(Object.keys(this.dataDoc.proto));// bcz: Argh -- make untracked to avoid this rerunning whenever 'libraryBrush' is set
+ let target = this.props.document;
+ let keys = Array.from(Object.keys(target)); // bcz: Argh -- make untracked to avoid this rerunning whenever 'libraryBrush' is set
+ if (target.proto instanceof Doc) {
+ let arr = Array.from(Object.keys(target.proto));// bcz: Argh -- make untracked to avoid this rerunning whenever 'libraryBrush' is set
keys.push(...arr);
while (keys.indexOf("proto") !== -1) keys.splice(keys.indexOf("proto"), 1);
}
@@ -88,7 +90,7 @@ class TreeView extends React.Component<TreeViewProps> {
}
});
let layout = StrCast(this.props.document.layout);
- if (layout.indexOf("fieldKey={\"") !== -1) {
+ if (layout.indexOf("fieldKey={\"") !== -1 && layout.indexOf("fieldExt=") === -1) {
return layout.split("fieldKey={\"")[1].split("\"")[0];
}
return keyList.length ? keyList[0] : "data";
@@ -124,12 +126,12 @@ class TreeView extends React.Component<TreeViewProps> {
}
}
onPointerLeave = (e: React.PointerEvent): void => {
- this.props.document.libraryBrush = undefined;
+ this.props.document.libraryBrush = false;
this._header!.current!.className = "treeViewItem-header";
document.removeEventListener("pointermove", this.onDragMove, true);
}
onDragMove = (e: PointerEvent): void => {
- this.props.document.libraryBrush = undefined;
+ this.props.document.libraryBrush = false;
let x = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY);
let rect = this._header!.current!.getBoundingClientRect();
let bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2);
@@ -190,24 +192,6 @@ class TreeView extends React.Component<TreeViewProps> {
OnTab={() => this.props.indentDocument && this.props.indentDocument()}
/>)
- @computed get keyList() {
- let keys = Array.from(Object.keys(this.dataDoc));
- if (this.dataDoc.proto instanceof Doc) {
- keys.push(...Array.from(Object.keys(this.dataDoc.proto)));
- }
- let keyList: string[] = keys.reduce((l, key) => {
- let listspec = DocListCast(this.dataDoc[key]);
- if (listspec && listspec.length) return [...l, key];
- return l;
- }, [] as string[]);
- keys.map(key => Cast(this.dataDoc[key], Doc) instanceof Doc && (Cast(this.dataDoc[key], Doc) as Doc).type !== undefined && keyList.push(key));
- if (LinkManager.Instance.getAllRelatedLinks(this.props.document).length > 0) keyList.push("links");
- if (keyList.indexOf(this.fieldKey) !== -1) {
- keyList.splice(keyList.indexOf(this.fieldKey), 1);
- }
- keyList.splice(0, 0, this.fieldKey);
- return keyList.filter((item, index) => keyList.indexOf(item) >= index);
- }
/**
* Renders the EditableView title element for placement into the tree.
*/
@@ -216,13 +200,9 @@ class TreeView extends React.Component<TreeViewProps> {
let onItemDown = SetupDrag(reference, () => this.dataDoc, this.move, this.props.dropAction, this.props.treeViewId, true);
let headerElements = (
- <span className="collectionTreeView-keyHeader" key={this._chosenKey + "chosen"}
- onPointerDown={action(() => {
- let ind = this.keyList.indexOf(this._chosenKey);
- ind = (ind + 1) % this.keyList.length;
- this.__chosenKey = this.keyList[ind];
- })} >
- {this._chosenKey}
+ <span className="collectionTreeView-keyHeader" key={this.treeViewExpandedView}
+ onPointerDown={action(() => this.props.document.treeViewExpandedView = this.treeViewExpandedView === "data" ? "fields" : this.treeViewExpandedView === "fields" && this.props.document.layout ? "layout" : "data")}>
+ {this.treeViewExpandedView}
</span>);
let dataDocs = CollectionDockingView.Instance ? Cast(CollectionDockingView.Instance.props.Document[this.fieldKey], listSpec(Doc), []) : [];
let openRight = dataDocs && dataDocs.indexOf(this.dataDoc) !== -1 ? (null) : (
@@ -247,7 +227,6 @@ class TreeView extends React.Component<TreeViewProps> {
onWorkspaceContextMenu = (e: React.MouseEvent): void => {
if (!e.isPropagationStopped()) { // 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: (BoolCast(this.props.document.embed) ? "Collapse" : "Expand") + " inline", event: () => this.props.document.embed = !BoolCast(this.props.document.embed), icon: "expand" });
if (NumCast(this.props.document.viewType) !== CollectionViewType.Docking) {
ContextMenu.Instance.addItem({ description: "Open Tab", event: () => this.props.addDocTab(this.props.document, this.resolvedDataDoc, "inTab"), icon: "folder" });
ContextMenu.Instance.addItem({ description: "Open Right", event: () => this.props.addDocTab(this.props.document, this.resolvedDataDoc, "onRight"), icon: "caret-square-right" });
@@ -309,8 +288,8 @@ class TreeView extends React.Component<TreeViewProps> {
renderLinks = () => {
let ele: JSX.Element[] = [];
- let remDoc = (doc: Doc) => this.remove(doc, this._chosenKey);
- let addDoc = (doc: Doc, addBefore?: Doc, before?: boolean) => Doc.AddDocToList(this.props.document, this._chosenKey, doc, addBefore, before);
+ let remDoc = (doc: Doc) => this.remove(doc, this.fieldKey);
+ let addDoc = (doc: Doc, addBefore?: Doc, before?: boolean) => Doc.AddDocToList(this.props.document, this.fieldKey, doc, addBefore, before);
let groups = LinkManager.Instance.getRelatedGroupedLinks(this.props.document);
groups.forEach((groupLinkDocs, groupType) => {
// let destLinks = groupLinkDocs.map(d => LinkManager.Instance.getOppositeAnchor(d, this.props.document));
@@ -354,22 +333,67 @@ class TreeView extends React.Component<TreeViewProps> {
})());
}
- noOverlays = (doc: Doc) => { return { title: "", caption: "" } };
+ noOverlays = (doc: Doc) => ({ title: "", caption: "" });
+
+ expandedField = (doc?: Doc) => {
+ if (!doc) return <div />;
+ let realDoc = doc;
+
+ let ids: { [key: string]: string } = {};
+ Object.keys(doc).forEach(key => {
+ if (!(key in ids) && realDoc[key] !== ComputedField.undefined) {
+ ids[key] = key;
+ }
+ });
+
+ let rows: JSX.Element[] = [];
+ for (let key of Object.keys(ids).sort()) {
+ let contents = realDoc[key] ? realDoc[key] : undefined;
+ let contentElement: JSX.Element[] | JSX.Element = [];
+
+ if (contents instanceof Doc || Cast(contents, listSpec(Doc))) {
+ let docList = contents;
+ let remDoc = (doc: Doc) => this.remove(doc, key);
+ let addDoc = (doc: Doc, addBefore?: Doc, before?: boolean) => Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before);
+ contentElement = key === "links" ? this.renderLinks() :
+ TreeView.GetChildElements(docList instanceof Doc ? [docList as Doc] : DocListCast(docList), this.props.treeViewId, realDoc, undefined, key, addDoc, remDoc, this.move,
+ this.props.dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.props.outerXf, this.props.active, this.props.panelWidth, this.props.renderDepth);
+ } else {
+ contentElement = <EditableView
+ key="editableView"
+ contents={contents ? contents.toString() : "null"}
+ height={13}
+ fontSize={12}
+ GetValue={() => Field.toKeyValueString(realDoc, key)}
+ SetValue={(value: string) => KeyValueBox.SetField(realDoc, key, value)} />;
+ }
+ rows.push(<div style={{ display: "flex" }} key={key}>
+ <span style={{ fontWeight: "bold" }}>{key + ":"}</span>
+ &nbsp;
+ {contentElement}
+ </div>);
+ }
+ return rows;
+ }
render() {
let contentElement: (JSX.Element | null) = null;
- let docList = Cast(this.dataDoc[this._chosenKey], listSpec(Doc));
- let remDoc = (doc: Doc) => this.remove(doc, this._chosenKey);
- let addDoc = (doc: Doc, addBefore?: Doc, before?: boolean) => Doc.AddDocToList(this.dataDoc, this._chosenKey, doc, addBefore, before);
- let doc = Cast(this.dataDoc[this._chosenKey], Doc);
+ let docList = Cast(this.dataDoc[this.fieldKey], listSpec(Doc));
+ let remDoc = (doc: Doc) => this.remove(doc, this.fieldKey);
+ let addDoc = (doc: Doc, addBefore?: Doc, before?: boolean) => Doc.AddDocToList(this.dataDoc, this.fieldKey, doc, addBefore, before);
if (!this._collapsed) {
- if (!this.props.document.embed) {
- contentElement = <ul key={this._chosenKey + "more"}>
- {this._chosenKey === "links" ? this.renderLinks() :
- TreeView.GetChildElements(doc instanceof Doc ? [doc] : DocListCast(docList), this.props.treeViewId, this.props.document, this.resolvedDataDoc, this._chosenKey, addDoc, remDoc, this.move,
+ if (this.treeViewExpandedView === "data") {
+ let doc = Cast(this.props.document[this.fieldKey], Doc);
+ contentElement = <ul key={this.fieldKey + "more"}>
+ {this.fieldKey === "links" ? this.renderLinks() :
+ TreeView.GetChildElements(doc instanceof Doc ? [doc] : DocListCast(docList), this.props.treeViewId, this.props.document, this.resolvedDataDoc, this.fieldKey, addDoc, remDoc, this.move,
this.props.dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.props.outerXf, this.props.active, this.props.panelWidth, this.props.renderDepth)}
</ul >;
+ } else if (this.treeViewExpandedView === "fields") {
+ contentElement = <ul><div ref={this._dref} style={{ display: "inline-block" }} key={this.props.document[Id] + this.props.document.title}>
+ {this.expandedField(this.dataDoc)}
+ </div></ul>;
} else {
let layoutDoc = this.props.document;
contentElement = <div ref={this._dref} style={{ display: "inline-block", height: this.docHeight() }} key={this.props.document[Id] + this.props.document.title}>
@@ -446,7 +470,7 @@ class TreeView extends React.Component<TreeViewProps> {
dataDoc={dataDoc}
containingCollection={containingCollection}
treeViewId={treeViewId}
- key={child[Id] + "child " + i}
+ key={child[Id]}
indentDocument={indent}
renderDepth={renderDepth}
deleteDoc={remove}
@@ -469,6 +493,8 @@ export class CollectionTreeView extends CollectionSubView(Document) {
private treedropDisposer?: DragManager.DragDropDisposer;
private _mainEle?: HTMLDivElement;
+ @computed get chromeCollapsed() { return this.props.chromeCollapsed; }
+
protected createTreeDropTarget = (ele: HTMLDivElement) => {
this.treedropDisposer && this.treedropDisposer();
if (this._mainEle = ele) {
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index df8a1ebc1..d90eba401 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -1,5 +1,5 @@
import { library } from '@fortawesome/fontawesome-svg-core';
-import { faProjectDiagram, faSignature, faColumns, faSquare, faTh, faImage, faThList, faTree, faEllipsisV } from '@fortawesome/free-solid-svg-icons';
+import { faProjectDiagram, faSignature, faColumns, faSquare, faTh, faImage, faThList, faTree, faEllipsisV, faFingerprint, faLaptopCode } from '@fortawesome/free-solid-svg-icons';
import { observer } from "mobx-react";
import * as React from 'react';
import { Doc, DocListCast, WidthSym, HeightSym } from '../../../new_fields/Doc';
@@ -18,7 +18,7 @@ import { CollectionTreeView } from "./CollectionTreeView";
import { StrCast, PromiseValue } from '../../../new_fields/Types';
import { DocumentType } from '../../documents/Documents';
import { CollectionStackingViewChrome, CollectionViewBaseChrome } from './CollectionViewChromes';
-import { observable } from 'mobx';
+import { observable, action, runInAction } from 'mobx';
export const COLLECTION_BORDER_WIDTH = 2;
library.add(faTh);
@@ -27,6 +27,7 @@ library.add(faSquare);
library.add(faProjectDiagram);
library.add(faSignature);
library.add(faThList);
+library.add(faFingerprint);
library.add(faColumns);
library.add(faEllipsisV);
library.add(faImage);
@@ -37,11 +38,20 @@ export class CollectionView extends React.Component<FieldViewProps> {
public static LayoutString(fieldStr: string = "data", fieldExt: string = "") { return FieldView.LayoutString(CollectionView, fieldStr, fieldExt); }
+ componentDidMount = () => {
+ // chrome status is one of disabled, collapsed, or visible. this determines initial state from document
+ let chromeStatus = this.props.Document.chromeStatus;
+ if (chromeStatus && (chromeStatus === "disabled" || chromeStatus === "collapsed")) {
+ runInAction(() => this._collapsed = true);
+ }
+ }
+
private SubViewHelper = (type: CollectionViewType, renderProps: CollectionRenderProps) => {
let props = { ...this.props, ...renderProps };
switch (this.isAnnotationOverlay ? CollectionViewType.Freeform : type) {
case CollectionViewType.Schema: return (<CollectionSchemaView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />);
- case CollectionViewType.Docking: return (<CollectionDockingView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />);
+ // currently cant think of a reason for collection docking view to have a chrome. mind may change if we ever have nested docking views -syip
+ case CollectionViewType.Docking: return (<CollectionDockingView chromeCollapsed={true} key="collview" {...props} CollectionView={this} />);
case CollectionViewType.Tree: return (<CollectionTreeView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />);
case CollectionViewType.Stacking: { this.props.Document.singleColumn = true; return (<CollectionStackingView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />); }
case CollectionViewType.Masonry: { this.props.Document.singleColumn = false; return (<CollectionStackingView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />); }
@@ -52,17 +62,20 @@ export class CollectionView extends React.Component<FieldViewProps> {
return (null);
}
+ @action
private collapse = (value: boolean) => {
this._collapsed = value;
+ this.props.Document.chromeStatus = value ? "collapsed" : "visible";
}
private SubView = (type: CollectionViewType, renderProps: CollectionRenderProps) => {
- if (this.isAnnotationOverlay || this.props.Document === CurrentUserUtils.UserDocument.sidebar) {
+ // currently cant think of a reason for collection docking view to have a chrome. mind may change if we ever have nested docking views -syip
+ if (this.isAnnotationOverlay || this.props.Document.chromeStatus === "disabled" || type === CollectionViewType.Docking) {
return [(null), this.SubViewHelper(type, renderProps)];
}
else {
return [
- // (<CollectionViewBaseChrome CollectionView={this} type={type} collapse={this.collapse} />),
+ (<CollectionViewBaseChrome CollectionView={this} type={type} collapse={this.collapse} />),
this.SubViewHelper(type, renderProps)
];
}
@@ -81,6 +94,12 @@ export class CollectionView extends React.Component<FieldViewProps> {
subItems.push({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree), icon: "tree" });
subItems.push({ description: "Stacking", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Stacking), icon: "ellipsis-v" });
subItems.push({ description: "Masonry", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Masonry), icon: "columns" });
+ switch (this.props.Document.viewType) {
+ case CollectionViewType.Freeform: {
+ subItems.push({ description: "Custom", icon: "fingerprint", event: CollectionFreeFormView.AddCustomLayout(this.props.Document, this.props.fieldKey) });
+ break;
+ }
+ }
ContextMenu.Instance.addItem({ description: "View Modes...", subitems: subItems });
ContextMenu.Instance.addItem({ description: "Apply Template", event: undoBatch(() => this.props.addDocTab && this.props.addDocTab(Doc.ApplyTemplate(this.props.Document)!, undefined, "onRight")), icon: "project-diagram" });
}
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index d37228bde..6525f3b07 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -1,167 +1,168 @@
@import "../globalCssVariables";
@import '~js-datepicker/dist/datepicker.min.css';
-.collectionViewChrome {
- display: grid;
- grid-template-columns: 1fr auto;
- padding-bottom: 10px;
- border-bottom: .5px solid lightgrey;
- margin: 10px;
+.collectionViewChrome-cont {
position: relative;
z-index: 9001;
transition: top .5s;
+ background: lightslategray;
+ padding: 10px;
- .collectionViewBaseChrome {
- display: flex;
+ .collectionViewChrome {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ padding-bottom: 10px;
+ border-bottom: .5px solid lightgrey;
- .collectionViewBaseChrome-viewPicker {
- font-size: 75%;
- text-transform: uppercase;
- letter-spacing: 2px;
- background: rgb(238, 238, 238);
- color: grey;
- outline-color: black;
- border: none;
- padding: 12px 10px 11px 10px;
- margin-left: 50px;
- }
-
- .collectionViewBaseChrome-viewPicker:active {
- outline-color: black;
- }
-
- .collectionViewBaseChrome-collapse {
- transition: all .5s;
- position: absolute;
- width: 40px;
- }
+ .collectionViewBaseChrome {
+ display: flex;
- .collectionViewBaseChrome-viewSpecs {
- margin-left: 10px;
- display: grid;
-
- .collectionViewBaseChrome-viewSpecsInput {
- padding: 12px 10px 11px 10px;
- border: 0px;
- color: grey;
- text-align: center;
+ .collectionViewBaseChrome-viewPicker {
+ font-size: 75%;
text-transform: uppercase;
letter-spacing: 2px;
- outline-color: black;
- font-size: 75%;
background: rgb(238, 238, 238);
- height: 100%;
- width: 150px;
+ color: grey;
+ outline-color: black;
+ border: none;
+ padding: 12px 10px 11px 10px;
+ margin-left: 50px;
+ }
+
+ .collectionViewBaseChrome-viewPicker:active {
+ outline-color: black;
}
- .collectionViewBaseChrome-viewSpecsMenu {
- overflow: hidden;
- transition: height .5s, display .5s;
+ .collectionViewBaseChrome-collapse {
+ transition: all .5s;
position: absolute;
- top: 60px;
- z-index: 100;
- display: flex;
- flex-direction: column;
- background: rgb(238, 238, 238);
- box-shadow: grey 2px 2px 4px;
+ width: 40px;
+ }
- .qs-datepicker {
- left: unset;
- right: 0;
+ .collectionViewBaseChrome-viewSpecs {
+ margin-left: 10px;
+ display: grid;
+
+ .collectionViewBaseChrome-viewSpecsInput {
+ padding: 12px 10px 11px 10px;
+ border: 0px;
+ color: grey;
+ text-align: center;
+ letter-spacing: 2px;
+ outline-color: black;
+ font-size: 75%;
+ background: rgb(238, 238, 238);
+ height: 100%;
+ width: 150px;
}
- .collectionViewBaseChrome-viewSpecsMenu-row {
- display: grid;
- grid-template-columns: 150px 200px 150px;
- margin-top: 10px;
- margin-right: 10px;
-
- .collectionViewBaseChrome-viewSpecsMenu-rowLeft,
- .collectionViewBaseChrome-viewSpecsMenu-rowMiddle,
- .collectionViewBaseChrome-viewSpecsMenu-rowRight {
- font-size: 75%;
- letter-spacing: 2px;
- color: grey;
- margin-left: 10px;
- padding: 5px;
- border: none;
- outline-color: black;
+ .collectionViewBaseChrome-viewSpecsMenu {
+ overflow: hidden;
+ transition: height .5s, display .5s;
+ position: absolute;
+ top: 60px;
+ z-index: 100;
+ display: flex;
+ flex-direction: column;
+ background: rgb(238, 238, 238);
+ box-shadow: grey 2px 2px 4px;
+
+ .qs-datepicker {
+ left: unset;
+ right: 0;
}
- }
- .collectionViewBaseChrome-viewSpecsMenu-lastRow {
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-gap: 10px;
- margin: 10px;
+ .collectionViewBaseChrome-viewSpecsMenu-row {
+ display: grid;
+ grid-template-columns: 150px 200px 150px;
+ margin-top: 10px;
+ margin-right: 10px;
+
+ .collectionViewBaseChrome-viewSpecsMenu-rowLeft,
+ .collectionViewBaseChrome-viewSpecsMenu-rowMiddle,
+ .collectionViewBaseChrome-viewSpecsMenu-rowRight {
+ font-size: 75%;
+ letter-spacing: 2px;
+ color: grey;
+ margin-left: 10px;
+ padding: 5px;
+ border: none;
+ outline-color: black;
+ }
+ }
+
+ .collectionViewBaseChrome-viewSpecsMenu-lastRow {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 10px;
+ margin: 10px;
+ }
}
}
}
- }
- .collectionStackingViewChrome-cont {
- display: flex;
- justify-content: space-between;
- }
+ .collectionStackingViewChrome-cont {
+ display: flex;
+ justify-content: space-between;
+ }
- .collectionStackingViewChrome-sort {
- display: flex;
- align-items: center;
- justify-content: space-between;
+ .collectionStackingViewChrome-sort {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
- .collectionStackingViewChrome-sortIcon {
- transition: transform .5s;
- margin-left: 10px;
+ .collectionStackingViewChrome-sortIcon {
+ transition: transform .5s;
+ margin-left: 10px;
+ }
}
- }
-
- button:hover {
- transform: scale(1);
- }
+ button:hover {
+ transform: scale(1);
+ }
- .collectionStackingViewChrome-sectionFilter-cont {
- justify-self: right;
- display: flex;
- font-size: 75%;
- text-transform: uppercase;
- letter-spacing: 2px;
- .collectionStackingViewChrome-sectionFilter-label {
- vertical-align: center;
- padding: 10px;
- }
+ .collectionStackingViewChrome-sectionFilter-cont {
+ justify-self: right;
+ display: flex;
+ font-size: 75%;
+ letter-spacing: 2px;
- .collectionStackingViewChrome-sectionFilter {
- color: white;
- width: 100px;
- text-align: center;
- background: rgb(238, 238, 238);
+ .collectionStackingViewChrome-sectionFilter-label {
+ vertical-align: center;
+ padding: 10px;
+ }
- .editable-view-input,
- input,
- .editableView-container-editing-oneLine,
- .editableView-container-editing {
- padding: 12px 10px 11px 10px;
- border: 0px;
- color: grey;
+ .collectionStackingViewChrome-sectionFilter {
+ color: white;
+ width: 100px;
text-align: center;
- text-transform: uppercase;
- letter-spacing: 2px;
- outline-color: black;
- height: 100%;
- }
+ background: rgb(238, 238, 238);
- .react-autosuggest__container {
- margin: 0;
- color: grey;
- padding: 0px;
+ .editable-view-input,
+ input,
+ .editableView-container-editing-oneLine,
+ .editableView-container-editing {
+ padding: 12px 10px 11px 10px;
+ border: 0px;
+ color: grey;
+ text-align: center;
+ letter-spacing: 2px;
+ outline-color: black;
+ height: 100%;
+ }
+
+ .react-autosuggest__container {
+ margin: 0;
+ color: grey;
+ padding: 0px;
+ }
}
}
- }
- .collectionStackingViewChrome-sectionFilter:hover {
- cursor: text;
+ .collectionStackingViewChrome-sectionFilter:hover {
+ cursor: text;
+ }
}
} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index dbd61fb6e..1ad9e47ce 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -15,6 +15,7 @@ import { Utils } from "../../../Utils";
import KeyRestrictionRow from "./KeyRestrictionRow";
import { CompileScript } from "../../util/Scripting";
import { ScriptField } from "../../../new_fields/ScriptField";
+import { CollectionSchemaView } from "./CollectionSchemaView";
const datepicker = require('js-datepicker');
interface CollectionViewChromeProps {
@@ -47,6 +48,20 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
runInAction(() => {
this._keyRestrictions.push([<KeyRestrictionRow key={Utils.GenerateGuid()} contains={true} script={(value: string) => runInAction(() => this._keyRestrictions[0][1] = value)} />, ""]);
this._keyRestrictions.push([<KeyRestrictionRow key={Utils.GenerateGuid()} contains={false} script={(value: string) => runInAction(() => this._keyRestrictions[1][1] = value)} />, ""]);
+
+ // chrome status is one of disabled, collapsed, or visible. this determines initial state from document
+ let chromeStatus = this.props.CollectionView.props.Document.chromeStatus;
+ if (chromeStatus) {
+ if (chromeStatus === "disabled") {
+ throw new Error("how did you get here, if chrome status is 'disabled' on a collection, a chrome shouldn't even be instantiated!");
+ }
+ else if (chromeStatus === "collapsed") {
+ this._collapsed = true;
+ if (this.props.collapse) {
+ this.props.collapse(true);
+ }
+ }
+ }
});
}
@@ -130,17 +145,24 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
@action
toggleCollapse = () => {
this._collapsed = !this._collapsed;
- this.props.collapse(this._collapsed);
+ if (this.props.collapse) {
+ this.props.collapse(this._collapsed);
+ }
}
subChrome = () => {
-
switch (this.props.type) {
case CollectionViewType.Stacking: return (
<CollectionStackingViewChrome
key="collchrome"
CollectionView={this.props.CollectionView}
type={this.props.type} />);
+ case CollectionViewType.Schema: return (
+ <CollectionSchemaViewChrome
+ key="collchrome"
+ CollectionView={this.props.CollectionView}
+ type={this.props.type}
+ />);
default:
return null;
}
@@ -148,71 +170,73 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
render() {
return (
- <div className="collectionViewChrome" style={{ top: this._collapsed ? -100 : 0 }}>
- <div className="collectionViewBaseChrome">
- <button className="collectionViewBaseChrome-collapse"
- style={{ top: this._collapsed ? 80 : 0, transform: `rotate(${this._collapsed ? 180 : 0}deg)` }}
- title="Collapse collection chrome" onClick={this.toggleCollapse}>
- <FontAwesomeIcon icon="caret-up" size="2x" />
- </button>
- <select
- className="collectionViewBaseChrome-viewPicker"
- onPointerDown={stopPropagation}
- onChange={this.viewChanged}
- value={NumCast(this.props.CollectionView.props.Document.viewType)}>
- <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="1">Freeform View</option>
- <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="2">Schema View</option>
- <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="4">Tree View</option>
- <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="5">Stacking View</option>
- <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="6">Masonry View></option>
- </select>
- <div className="collectionViewBaseChrome-viewSpecs">
- <input className="collectionViewBaseChrome-viewSpecsInput"
- placeholder="Filter Documents"
- value={this.filterValue ? this.filterValue.script.originalScript : ""}
- onPointerDown={this.openViewSpecs} />
- <div className="collectionViewBaseChrome-viewSpecsMenu"
- onPointerDown={this.openViewSpecs}
- style={{
- height: this._viewSpecsOpen ? "fit-content" : "0px",
- overflow: this._viewSpecsOpen ? "initial" : "hidden"
- }}>
- {this._keyRestrictions.map(i => i[0])}
- <div className="collectionViewBaseChrome-viewSpecsMenu-row">
- <div className="collectionViewBaseChrome-viewSpecsMenu-rowLeft">
- CREATED WITHIN:
- </div>
- <select className="collectionViewBaseChrome-viewSpecsMenu-rowMiddle"
- style={{ textTransform: "uppercase", textAlign: "center" }}
- value={this._dateWithinValue}
- onChange={(e) => runInAction(() => this._dateWithinValue = e.target.value)}>
- <option value="1d">1 day of</option>
- <option value="3d">3 days of</option>
- <option value="1w">1 week of</option>
- <option value="2w">2 weeks of</option>
- <option value="1m">1 month of</option>
- <option value="2m">2 months of</option>
- <option value="6m">6 months of</option>
- <option value="1y">1 year of</option>
- </select>
- <input className="collectionViewBaseChrome-viewSpecsMenu-rowRight"
- id={this._datePickerElGuid}
- value={this._dateValue.toLocaleDateString()}
- onPointerDown={this.openDatePicker}
- placeholder="Value" />
+ <div className="collectionViewChrome-cont" style={{ top: this._collapsed ? -100 : 0 }}>
+ <div className="collectionViewChrome">
+ <div className="collectionViewBaseChrome">
+ <button className="collectionViewBaseChrome-collapse"
+ style={{ top: this._collapsed ? 90 : 10, transform: `rotate(${this._collapsed ? 180 : 0}deg)` }}
+ title="Collapse collection chrome" onClick={this.toggleCollapse}>
+ <FontAwesomeIcon icon="caret-up" size="2x" />
+ </button>
+ <select
+ className="collectionViewBaseChrome-viewPicker"
+ onPointerDown={stopPropagation}
+ onChange={this.viewChanged}
+ value={NumCast(this.props.CollectionView.props.Document.viewType)}>
+ <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="1">Freeform View</option>
+ <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="2">Schema View</option>
+ <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="4">Tree View</option>
+ <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="5">Stacking View</option>
+ <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="6">Masonry View</option>
+ </select>
+ <div className="collectionViewBaseChrome-viewSpecs">
+ <input className="collectionViewBaseChrome-viewSpecsInput"
+ placeholder="FILTER DOCUMENTS"
+ value={this.filterValue ? this.filterValue.script.originalScript : ""}
+ onPointerDown={this.openViewSpecs} />
+ <div className="collectionViewBaseChrome-viewSpecsMenu"
+ onPointerDown={this.openViewSpecs}
+ style={{
+ height: this._viewSpecsOpen ? "fit-content" : "0px",
+ overflow: this._viewSpecsOpen ? "initial" : "hidden"
+ }}>
+ {this._keyRestrictions.map(i => i[0])}
+ <div className="collectionViewBaseChrome-viewSpecsMenu-row">
+ <div className="collectionViewBaseChrome-viewSpecsMenu-rowLeft">
+ CREATED WITHIN:
</div>
- <div className="collectionViewBaseChrome-viewSpecsMenu-lastRow">
- <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.addKeyRestriction}>
- ADD KEY RESTRICTION
+ <select className="collectionViewBaseChrome-viewSpecsMenu-rowMiddle"
+ style={{ textTransform: "uppercase", textAlign: "center" }}
+ value={this._dateWithinValue}
+ onChange={(e) => runInAction(() => this._dateWithinValue = e.target.value)}>
+ <option value="1d">1 day of</option>
+ <option value="3d">3 days of</option>
+ <option value="1w">1 week of</option>
+ <option value="2w">2 weeks of</option>
+ <option value="1m">1 month of</option>
+ <option value="2m">2 months of</option>
+ <option value="6m">6 months of</option>
+ <option value="1y">1 year of</option>
+ </select>
+ <input className="collectionViewBaseChrome-viewSpecsMenu-rowRight"
+ id={this._datePickerElGuid}
+ value={this._dateValue.toLocaleDateString()}
+ onPointerDown={this.openDatePicker}
+ placeholder="Value" />
+ </div>
+ <div className="collectionViewBaseChrome-viewSpecsMenu-lastRow">
+ <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.addKeyRestriction}>
+ ADD KEY RESTRICTION
</button>
- <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.applyFilter}>
- APPLY FILTER
+ <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.applyFilter}>
+ APPLY FILTER
</button>
+ </div>
</div>
</div>
</div>
+ {this.subChrome()}
</div>
- {this.subChrome()}
</div>
);
}
@@ -287,7 +311,7 @@ export class CollectionStackingViewChrome extends React.Component<CollectionView
</button>
<div className="collectionStackingViewChrome-sectionFilter-cont">
<div className="collectionStackingViewChrome-sectionFilter-label">
- Group items by:
+ GROUP ITEMS BY:
</div>
<div className="collectionStackingViewChrome-sectionFilter">
<EditableView
@@ -322,108 +346,17 @@ export class CollectionStackingViewChrome extends React.Component<CollectionView
}
}
-
+interface SchemaChromeProps extends CollectionViewChromeProps {
+ toolbar: JSX.Element;
+}
@observer
-export class CollectionSchemaViewChrome extends React.Component<CollectionViewChromeProps> {
- @observable private _currentKey: string = "";
- @observable private suggestions: string[] = [];
-
- @computed private get descending() { return BoolCast(this.props.CollectionView.props.Document.stackingHeadersSortDescending); }
- @computed get sectionFilter() { return StrCast(this.props.CollectionView.props.Document.sectionFilter); }
-
- getKeySuggestions = async (value: string): Promise<string[]> => {
- value = value.toLowerCase();
- let docs: Doc | Doc[] | Promise<Doc> | Promise<Doc[]> | (() => DocLike)
- = () => DocListCast(this.props.CollectionView.props.Document[this.props.CollectionView.props.fieldExt ? this.props.CollectionView.props.fieldExt : this.props.CollectionView.props.fieldKey]);
- if (typeof docs === "function") {
- docs = docs();
- }
- docs = await docs;
- if (docs instanceof Doc) {
- return Object.keys(docs).filter(key => key.toLowerCase().startsWith(value));
- } else {
- const keys = new Set<string>();
- docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key)));
- return Array.from(keys).filter(key => key.toLowerCase().startsWith(value));
- }
- }
-
- @action
- onKeyChange = (e: React.ChangeEvent, { newValue }: { newValue: string }) => {
- this._currentKey = newValue;
- }
-
- getSuggestionValue = (suggestion: string) => suggestion;
-
- renderSuggestion = (suggestion: string) => {
- return <p>{suggestion}</p>;
- }
-
- onSuggestionFetch = async ({ value }: { value: string }) => {
- const sugg = await this.getKeySuggestions(value);
- runInAction(() => {
- this.suggestions = sugg;
- });
- }
-
- @action
- onSuggestionClear = () => {
- this.suggestions = [];
- }
-
- setValue = (value: string) => {
- this.props.CollectionView.props.Document.sectionFilter = value;
- return true;
- }
-
- @action toggleSort = () => { this.props.CollectionView.props.Document.stackingHeadersSortDescending = !this.props.CollectionView.props.Document.stackingHeadersSortDescending; }
- @action resetValue = () => { this._currentKey = this.sectionFilter; };
-
+export class CollectionSchemaViewChrome extends React.Component<SchemaChromeProps> {
render() {
return (
<div className="collectionStackingViewChrome-cont">
- <button className="collectionStackingViewChrome-sort" onClick={this.toggleSort}>
- <div className="collectionStackingViewChrome-sortLabel">
- Sort
- </div>
- <div className="collectionStackingViewChrome-sortIcon" style={{ transform: `rotate(${this.descending ? "180" : "0"}deg)` }}>
- <FontAwesomeIcon icon="caret-up" size="2x" color="white" />
- </div>
- </button>
- <div className="collectionStackingViewChrome-sectionFilter-cont">
- <div className="collectionStackingViewChrome-sectionFilter-label">
- Group items by:
- </div>
- <div className="collectionStackingViewChrome-sectionFilter">
- <EditableView
- GetValue={() => this.sectionFilter}
- autosuggestProps={
- {
- resetValue: this.resetValue,
- value: this._currentKey,
- onChange: this.onKeyChange,
- autosuggestProps: {
- inputProps:
- {
- value: this._currentKey,
- onChange: this.onKeyChange
- },
- getSuggestionValue: this.getSuggestionValue,
- suggestions: this.suggestions,
- alwaysRenderSuggestions: true,
- renderSuggestion: this.renderSuggestion,
- onSuggestionsFetchRequested: this.onSuggestionFetch,
- onSuggestionsClearRequested: this.onSuggestionClear
- }
- }}
- oneLine
- SetValue={this.setValue}
- contents={this.sectionFilter ? this.sectionFilter : "N/A"}
- />
- </div>
- </div>
+ {this.props.toolbar}
</div>
);
}
-}
+} \ 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 00407d39a..cca199afa 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -19,6 +19,11 @@
transform-origin: left top;
}
+.collectionFreeform-customText {
+ position: absolute;
+ text-align: center;
+}
+
.collectionfreeformview-container {
.collectionfreeformview>.jsx-parser {
position: inherit;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 71d8988bf..74535222f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -31,7 +31,12 @@ import { ScriptField } from "../../../../new_fields/ScriptField";
import { OverlayView, OverlayElementOptions } from "../../OverlayView";
import { ScriptBox } from "../../ScriptBox";
import { CompileScript } from "../../../util/Scripting";
+import { CognitiveServices } from "../../../cognitive_services/CognitiveServices";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faEye } from "@fortawesome/free-regular-svg-icons";
+import { faTable, faPaintBrush, faAsterisk } from "@fortawesome/free-solid-svg-icons";
+library.add(faEye, faTable, faPaintBrush);
export const panZoomSchema = createSchema({
panX: "number",
@@ -51,6 +56,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
private _lastY: number = 0;
private get _pwidth() { return this.props.PanelWidth(); }
private get _pheight() { return this.props.PanelHeight(); }
+ private inkKey = "ink";
@computed get contentBounds() {
let bounds = this.props.fitToBox && !NumCast(this.nativeWidth) ? Doc.ComputeContentBounds(DocListCast(this.props.Document.data)) : undefined;
@@ -358,8 +364,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
getChildDocumentViewProps(childDocLayout: Doc): DocumentViewProps {
let self = this;
let resolvedDataDoc = !this.props.Document.isTemplate && this.props.DataDoc !== this.props.Document ? this.props.DataDoc : undefined;
- resolvedDataDoc && Doc.UpdateDocumentExtensionForField(resolvedDataDoc, this.props.fieldKey);
- let layoutDoc = Doc.expandTemplateLayout(childDocLayout, resolvedDataDoc);
+ let layoutDoc = childDocLayout;
+ if (resolvedDataDoc && Doc.WillExpandTemplateLayout(childDocLayout, resolvedDataDoc)) {
+ Doc.UpdateDocumentExtensionForField(resolvedDataDoc, this.props.fieldKey);
+ let fieldExtensionDoc = Doc.resolvedFieldDataDoc(resolvedDataDoc, StrCast(childDocLayout.templateField, StrCast(childDocLayout.title)), "dummy");
+ layoutDoc = Doc.expandTemplateLayout(childDocLayout, fieldExtensionDoc !== resolvedDataDoc ? fieldExtensionDoc : undefined);
+ } else layoutDoc = Doc.expandTemplateLayout(childDocLayout, resolvedDataDoc);
return {
DataDoc: resolvedDataDoc !== layoutDoc && resolvedDataDoc ? resolvedDataDoc : undefined,
Document: layoutDoc,
@@ -414,6 +424,25 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
return result.result === undefined ? {} : result.result;
}
+ private viewDefToJSX(viewDef: any): JSX.Element | undefined {
+ if (viewDef.type === "text") {
+ const text = Cast(viewDef.text, "string");
+ const x = Cast(viewDef.x, "number");
+ const y = Cast(viewDef.y, "number");
+ const width = Cast(viewDef.width, "number");
+ const height = Cast(viewDef.height, "number");
+ const fontSize = Cast(viewDef.fontSize, "number");
+ if ([text, x, y].some(val => val === undefined)) {
+ return undefined;
+ }
+
+ return <div className="collectionFreeform-customText" style={{
+ transform: `translate(${x}px, ${y}px)`,
+ width, height, fontSize
+ }}>{text}</div>;
+ }
+ }
+
@computed.struct
get views() {
let curPage = FieldValue(this.Document.curPage, -1);
@@ -421,10 +450,20 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
const script = this.Document.arrangeScript;
let state: any = undefined;
const docs = this.childDocs;
+ let elements: JSX.Element[] = [];
if (initScript) {
const initResult = initScript.script.run({ docs, collection: this.Document });
if (initResult.success) {
- state = initResult.result;
+ const result = initResult.result;
+ const { state: scriptState, views } = result;
+ state = scriptState;
+ if (Array.isArray(views)) {
+ elements = views.reduce<JSX.Element[]>((prev, ele) => {
+ const jsx = this.viewDefToJSX(ele);
+ jsx && prev.push(jsx);
+ return prev;
+ }, elements);
+ }
}
}
let docviews = docs.reduce((prev, doc) => {
@@ -439,7 +478,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
}
}
return prev;
- }, [] as JSX.Element[]);
+ }, elements);
setTimeout(() => this._selectOnLoaded = "", 600);// bcz: surely there must be a better way ....
@@ -454,6 +493,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
onContextMenu = () => {
ContextMenu.Instance.addItem({
description: "Arrange contents in grid",
+ icon: "table",
event: async () => {
const docs = await DocListCastAsync(this.Document[this.props.fieldKey]);
UndoManager.RunInBatch(() => {
@@ -479,42 +519,51 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
}
});
ContextMenu.Instance.addItem({
- description: "Add freeform arrangement",
- event: () => {
- let addOverlay = (key: "arrangeScript" | "arrangeInit", options: OverlayElementOptions, params?: Record<string, string>, requiredType?: string) => {
- let overlayDisposer: () => void = emptyFunction;
- const script = this.Document[key];
- let originalText: string | undefined = undefined;
- if (script) originalText = script.script.originalScript;
- // tslint:disable-next-line: no-unnecessary-callback-wrapper
- let scriptingBox = <ScriptBox initialText={originalText} onCancel={() => overlayDisposer()} onSave={(text, onError) => {
- const script = CompileScript(text, {
- params,
- requiredType,
- typecheck: false
- });
- if (!script.compiled) {
- onError(script.errors.map(error => error.messageText).join("\n"));
- return;
- }
- const docs = DocListCast(this.Document[this.props.fieldKey]);
- docs.map(d => d.transition = "transform 1s");
- this.Document[key] = new ScriptField(script);
- overlayDisposer();
- setTimeout(() => docs.map(d => d.transition = undefined), 1200);
- }} />;
- overlayDisposer = OverlayView.Instance.addWindow(scriptingBox, options);
- };
- addOverlay("arrangeInit", { x: 400, y: 100, width: 400, height: 300, title: "Layout Initialization" }, { collection: "Doc", docs: "Doc[]" }, undefined);
- addOverlay("arrangeScript", { x: 400, y: 500, width: 400, height: 300, title: "Layout Script" }, { doc: "Doc", index: "number", collection: "Doc", state: "any", docs: "Doc[]" }, "{x: number, y: number, width?: number, height?: number}");
- }
+ description: "Analyze Strokes", event: async () => {
+ let data = Cast(this.fieldExtensionDoc[this.inkKey], InkField);
+ if (!data) {
+ return;
+ }
+ let relevantKeys = ["inkAnalysis", "handwriting"];
+ CognitiveServices.Inking.Manager.analyzer(this.fieldExtensionDoc, relevantKeys, data.inkData);
+ }, icon: "paint-brush"
});
}
+
private childViews = () => [
<CollectionFreeFormBackgroundView key="backgroundView" {...this.props} {...this.getDocumentViewProps(this.props.Document)} />,
...this.views
]
+
+ public static AddCustomLayout(doc: Doc, dataKey: string): () => void {
+ return () => {
+ let addOverlay = (key: "arrangeScript" | "arrangeInit", options: OverlayElementOptions, params?: Record<string, string>, requiredType?: string) => {
+ let overlayDisposer: () => void = emptyFunction;
+ const script = Cast(doc[key], ScriptField);
+ let originalText: string | undefined = undefined;
+ if (script) originalText = script.script.originalScript;
+ // tslint:disable-next-line: no-unnecessary-callback-wrapper
+ let scriptingBox = <ScriptBox initialText={originalText} onCancel={() => overlayDisposer()} onSave={(text, onError) => {
+ const script = CompileScript(text, {
+ params,
+ requiredType,
+ typecheck: false
+ });
+ if (!script.compiled) {
+ onError(script.errors.map(error => error.messageText).join("\n"));
+ return;
+ }
+ doc[key] = new ScriptField(script);
+ overlayDisposer();
+ }} />;
+ overlayDisposer = OverlayView.Instance.addWindow(scriptingBox, options);
+ };
+ addOverlay("arrangeInit", { x: 400, y: 100, width: 400, height: 300, title: "Layout Initialization" }, { collection: "Doc", docs: "Doc[]" }, undefined);
+ addOverlay("arrangeScript", { x: 400, y: 500, width: 400, height: 300, title: "Layout Script" }, { doc: "Doc", index: "number", collection: "Doc", state: "any", docs: "Doc[]" }, "{x: number, y: number, width?: number, height?: number}");
+ };
+ }
+
render() {
const easing = () => this.props.Document.panTransformType === "Ease";
Doc.UpdateDocumentExtensionForField(this.props.DataDoc ? this.props.DataDoc : this.props.Document, this.props.fieldKey);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-24 12:49:03 +0000