From ce54e04c09ee0f7549d436f6ffe1f9f9b9efd7b5 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 21 Jun 2019 01:00:32 -0400 Subject: user assignable templates --- src/client/views/Templates.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'src/client/views/Templates.tsx') diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx index a227faa71..0904b03b0 100644 --- a/src/client/views/Templates.tsx +++ b/src/client/views/Templates.tsx @@ -50,7 +50,7 @@ export namespace Templates { export const Title = new Template("Title", TemplatePosition.InnerTop, `
- {props.Document.title} + {props.DataDoc.title}
{layout}
@@ -84,6 +84,16 @@ export namespace Templates {
`); } + export function TitleBar(titlestr: string) { + return (`
+
+ ${titlestr} +
+
+
{layout}
+
+
` ); + } export const TemplateList: Template[] = [Title, Header, Caption, Bullet]; export function sortTemplates(a: Template, b: Template) { -- cgit v1.2.3-70-g09d2 From 5483c3353b99e7993f358e3d212b1717bf21fec6 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 21 Jun 2019 10:44:15 -0400 Subject: more template improvements for treeview --- src/client/views/DocumentDecorations.tsx | 14 ++++---- src/client/views/Templates.tsx | 4 +-- .../views/collections/CollectionDockingView.tsx | 4 +-- .../views/collections/CollectionStackingView.tsx | 2 +- .../views/collections/CollectionTreeView.tsx | 37 +++++++++++++++++++--- src/client/views/collections/CollectionView.tsx | 27 ---------------- src/client/views/nodes/KeyValuePair.tsx | 1 + 7 files changed, 45 insertions(+), 44 deletions(-) (limited to 'src/client/views/Templates.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index b3f5340d9..3a366b4d2 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -74,24 +74,22 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (text[0] === '#') { this._fieldKey = text.slice(1, text.length); this._title = this.selectionTitle; + } else if (text[0] === ">") { + let metaKey = text.slice(1, text.length); let first = SelectionManager.SelectedDocuments()[0].props.Document!; let collection = SelectionManager.SelectedDocuments()[0].props.ContainingCollectionView!.props.Document; - Doc.GetProto(collection)[this._fieldKey] = "Testing"; + Doc.GetProto(collection)[metaKey] = "-empty field-"; let template = Doc.MakeAlias(collection); - template.title = "FIELD-" + this._fieldKey; - template.layout = FormattedTextBox.LayoutString(this._fieldKey); + template.title = metaKey; + template.layout = FormattedTextBox.LayoutString(metaKey); template.isTemplate = true; template.x = NumCast(first.x); template.y = NumCast(first.y); template.width = first[WidthSym](); template.height = first[HeightSym](); - //{props.DataDoc.${fieldKey}} - template.templates = new List([Templates.TitleBar(this._fieldKey)]); + template.templates = new List([Templates.TitleBar(metaKey)]);//`{props.DataDoc.${metaKey}_text}`)]); Doc.AddDocToList(collection, "data", template); SelectionManager.SelectedDocuments().map(dv => dv.props.removeDocument && dv.props.removeDocument(dv.props.Document)); - - // let template = SelectionManager.SelectedDocuments()[0].props.Document; template.proto = Doc.GetProto(collection) - // template.layout = FormattedTextBox.LayoutString(this._fieldKey); } else { if (SelectionManager.SelectedDocuments().length > 0) { diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx index 0904b03b0..5bb8d454a 100644 --- a/src/client/views/Templates.tsx +++ b/src/client/views/Templates.tsx @@ -84,10 +84,10 @@ export namespace Templates {
`); } - export function TitleBar(titlestr: string) { + export function TitleBar(datastring: string) { return (`
- ${titlestr} + ${datastring}
{layout}
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 05c3cdac6..79a0d18df 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -261,8 +261,8 @@ export class CollectionDockingView extends React.Component { window.removeEventListener("pointerup", onPointerUp) - this._isPointerDown = false - }) + this._isPointerDown = false; + }); window.addEventListener("pointerup", onPointerUp); var className = (e.target as any).className; if (className === "messageCounter") { diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index a1e84302b..19a9a1208 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -100,7 +100,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { let dref = React.createRef(); let dxf = () => this.getDocTransform(d, dref.current!).scale(this.columnWidth / d[WidthSym]()); let width = () => d.nativeWidth ? Math.min(d[WidthSym](), this.columnWidth) : this.columnWidth; - let height = () => aspect ? width() / aspect : d[HeightSym]() + let height = () => aspect ? width() / aspect : d[HeightSym](); let rowSpan = Math.ceil((height() + this.gridGap) / (this._gridSize + this.gridGap)); return (
boolean; moveDocument: DragManager.MoveFunction; dropAction: "alias" | "copy" | undefined; @@ -142,7 +145,29 @@ class TreeView extends React.Component { height={36} fontStyle={style} GetValue={() => StrCast(this.props.document[key])} - SetValue={(value: string) => (Doc.GetProto(this.props.document)[key] = value) ? true : true} + SetValue={(value: string) => { + let res = (Doc.GetProto(this.props.document)[key] = value) ? true : true; + + if (value.startsWith(">")) { + let metaKey = value.slice(1, value.length); + let collection = this.props.containingCollection; + Doc.GetProto(collection)[metaKey] = "-empty field-"; + let template = Doc.MakeAlias(collection); + template.title = metaKey; + template.embed = true; + template.layout = FormattedTextBox.LayoutString(metaKey); + template.x = 0; + template.y = 0; + template.width = 100; + template.height = 50; + template.isTemplate = true; + template.templates = new List([Templates.TitleBar(metaKey)]);//`{props.DataDoc.${metaKey}_text}`)]); + Doc.AddDocToList(collection, "data", template); + this.delete(); + } + + return res; + }} OnFillDown={(value: string) => { Doc.GetProto(this.props.document)[key] = value; let doc = Docs.FreeformDocument([], { title: "", x: 0, y: 0, width: 100, height: 25, templates: new List([Templates.Title.Layout]) }); @@ -269,14 +294,14 @@ class TreeView extends React.Component { if (!this._collapsed) { if (!this.props.document.embed) { contentElement =
    - {TreeView.GetChildElements(doc instanceof Doc ? [doc] : DocListCast(docList), this.props.treeViewId, this._chosenKey, addDoc, remDoc, this.move, + {TreeView.GetChildElements(doc instanceof Doc ? [doc] : DocListCast(docList), this.props.treeViewId, this.props.document, this.props.dataDoc, this._chosenKey, addDoc, remDoc, this.move, this.props.dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.props.outerXf, this.props.active, this.props.panelWidth)}
; } else { contentElement =
{ public static GetChildElements( docs: Doc[], treeViewId: string, + containingCollection: Doc, + dataDoc: Doc, key: string, add: (doc: Doc, relativeTo?: Doc, before?: boolean) => boolean, remove: ((doc: Doc) => boolean), @@ -338,6 +365,8 @@ class TreeView extends React.Component { }; return
    { - TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.fieldKey, addDoc, this.remove, + TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.Document, this.props.DataDoc, this.props.fieldKey, addDoc, this.remove, moveDoc, dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth) }
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index f254e6005..89e5ad74c 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -58,33 +58,6 @@ export class CollectionView extends React.Component { 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: "th-list" }); ContextMenu.Instance.addItem({ description: "View Modes...", subitems: subItems }); - ContextMenu.Instance.addItem({ - description: "Add Description Template", event: undoBatch(() => { - let collection = this.props.Document; - Doc.GetProto(collection).description = "my first templated box"; - let template = Doc.MakeAlias(collection); - template.layout = FormattedTextBox.LayoutString("description"); - template.isTemplate = true; - template.x = 0; - template.y = 0; - template.width = 100; - template.height = 25; - Doc.AddDocToList(this.props.Document, "data", template); - }), icon: "project-diagram" - }); - ContextMenu.Instance.addItem({ - description: "Add Summary Template", event: undoBatch(() => { - Doc.GetProto(this.props.Document).summary = "my first templated box"; - let template = Doc.MakeAlias(this.props.Document); - template.layout = FormattedTextBox.LayoutString("summary"); - template.isTemplate = true; - template.x = 0; - template.y = 0; - template.width = 100; - template.height = 25; - Doc.AddDocToList(this.props.Document, "data", template); - }), icon: "project-diagram" - }); ContextMenu.Instance.addItem({ description: "Apply Template", event: undoBatch(() => { let otherdoc = Docs.TextDocument({ width: 100, height: 50, title: "applied template" }); diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index 420a1ad94..d3bd9c875 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -28,6 +28,7 @@ export class KeyValuePair extends React.Component { render() { let props: FieldViewProps = { Document: this.props.doc, + DataDoc: this.props.doc, ContainingCollectionView: undefined, fieldKey: this.props.keyName, isSelected: returnFalse, -- cgit v1.2.3-70-g09d2 From 16822d88f981e7a86729d942a92b6ad8590680e4 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 1 Jul 2019 22:32:44 -0400 Subject: fixed title template view issue --- src/client/views/TemplateMenu.tsx | 8 ++++++++ src/client/views/Templates.tsx | 4 ++-- src/client/views/collections/CollectionDockingView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 5 +++++ 4 files changed, 16 insertions(+), 3 deletions(-) (limited to 'src/client/views/Templates.tsx') diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index d63f45e5a..1b32f0ddd 100644 --- a/src/client/views/TemplateMenu.tsx +++ b/src/client/views/TemplateMenu.tsx @@ -64,6 +64,13 @@ export class TemplateMenu extends React.Component { } } + @undoBatch + @action + clearTemplates = (event: React.MouseEvent) => { + this.props.docs.map(d => d.clearTemplates()); + Array.from(this.props.templates.keys()).map(t => this.props.templates.set(t, false)); + } + @action componentWillReceiveProps(nextProps: TemplateMenuProps) { // this._templates = nextProps.templates; @@ -84,6 +91,7 @@ export class TemplateMenu extends React.Component {
this.toggleTemplateActivity()}>+
    {templateMenu} +
); diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx index 5bb8d454a..4843a70a6 100644 --- a/src/client/views/Templates.tsx +++ b/src/client/views/Templates.tsx @@ -50,7 +50,7 @@ export namespace Templates { export const Title = new Template("Title", TemplatePosition.InnerTop, `
- {props.DataDoc.title} + {props.Document.title}
{layout}
@@ -58,7 +58,7 @@ export namespace Templates {
` ); export const Header = new Template("Header", TemplatePosition.InnerTop, - `< div style = "display:flex; flex-direction:column; height:100%;" > + `
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index ad5472a4a..8724216f5 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -269,7 +269,7 @@ export class CollectionDockingView extends React.Component(Docu } this.templates = this.templates; } + @action + clearTemplates = () => { + this.templates.length = 0; + this.templates = this.templates; + } @undoBatch @action -- cgit v1.2.3-70-g09d2 From 336266551d363df8c4958d485170846b478f1787 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 5 Jul 2019 11:54:39 -0400 Subject: fixed templates (old style) a bit. --- deploy/assets/downarrow.png | Bin 0 -> 3363 bytes src/client/views/Templates.tsx | 3 +-- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 ++-- src/client/views/nodes/DocumentContentsView.tsx | 5 ++++- 4 files changed, 7 insertions(+), 5 deletions(-) create mode 100644 deploy/assets/downarrow.png (limited to 'src/client/views/Templates.tsx') diff --git a/deploy/assets/downarrow.png b/deploy/assets/downarrow.png new file mode 100644 index 000000000..3c59ff5b1 Binary files /dev/null and b/deploy/assets/downarrow.png differ diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx index 4843a70a6..236704fa2 100644 --- a/src/client/views/Templates.tsx +++ b/src/client/views/Templates.tsx @@ -69,8 +69,7 @@ export namespace Templates { `< div >
{layout}
- +
` ); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 4b7d462e5..7c0591600 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -468,8 +468,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { description: "Add freeform arrangement", event: () => { let addOverlay = (key: "arrangeScript" | "arrangeInit", options: OverlayElementOptions, params?: Record, requiredType?: string) => { - const docs = DocListCast(this.Document[this.props.fieldKey]); - docs.map(d => d.transition = "transform 1s"); let overlayDisposer: () => void; const script = this.Document[key]; let originalText: string | undefined = undefined; @@ -484,6 +482,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { 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); diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 0da4888a1..51d0c83cd 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -24,6 +24,7 @@ import { Without, OmitKeys } from "../../../Utils"; import { Cast, StrCast, NumCast } from "../../../new_fields/Types"; import { List } from "../../../new_fields/List"; import { Doc } from "../../../new_fields/Doc"; +import { CollectionViewType } from "../collections/CollectionBaseView"; const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? type BindingProps = Without; @@ -82,7 +83,8 @@ export class DocumentContentsView extends React.Component { let self = this; // this scales constants in the markup by the scaling applied to the document, but caps the constants to be smaller @@ -103,6 +105,7 @@ export class DocumentContentsView extends React.Component 7) return (null); if (!this.layout && (this.props.layoutKey !== "overlayLayout" || !this.templates.length)) return (null); return