From 51eea45ec6ee39cb83ee3b0780ad262b8b8b5dd8 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 10 Sep 2020 20:10:58 -0400 Subject: made basic progressivized slides using TreeView --- .../views/collections/CollectionTreeView.scss | 13 +++++- .../views/collections/CollectionTreeView.tsx | 49 ++++++++++++++++++---- src/client/views/collections/CollectionView.tsx | 2 +- src/client/views/collections/TabDocView.tsx | 4 ++ .../collections/collectionFreeForm/MarqueeView.tsx | 24 +++++++---- 5 files changed, 74 insertions(+), 18 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index e192f1760..3f437b799 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -30,6 +30,14 @@ padding-left: 0; } + .outline-bullet { + position: relative; + width: 15px; + color: $intermediate-color; + margin-top: 3px; + transform: scale(0.5); + } + .bullet { position: relative; width: 15px; @@ -106,11 +114,14 @@ cursor: pointer; } +.treeViewItem-border-outline, .treeViewItem-border { display: flex; - border-left: dashed 1px #00000042; overflow: hidden; } +.treeViewItem-border{ + border-left: dashed 1px #00000042; +} .treeViewItem-header-editing, .treeViewItem-header { diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index d2b86d3c6..a6975f517 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -181,22 +181,38 @@ class TreeView extends React.Component { fontStyle={style} fontSize={12} GetValue={() => StrCast(this.doc[key])} - SetValue={undoBatch((value: string) => { - Doc.SetInPlace(this.doc, key, value, false) || true; - Doc.SetInPlace(this.doc, "editTitle", undefined, false); + SetValue={undoBatch((value: string, shiftKey: boolean, enterKey: boolean) => { + if (this.props.treeView.doc.treeViewOutlineMode && enterKey) { + Doc.SetInPlace(this.doc, key, value, false); + const doc = Docs.Create.FreeformDocument([], { title: "", x: 0, y: 0, _width: 100, _height: 25, templates: new List([Templates.Title.Layout]) }); + Doc.SetInPlace(this.doc, "editTitle", undefined, false); + Doc.SetInPlace(doc, "editTitle", "*", false); + this.props.addDocument(doc); + doc.context = this.props.treeView.Document; + } else { + Doc.SetInPlace(this.doc, key, value, false) || true; + Doc.SetInPlace(this.doc, "editTitle", undefined, false); + } })} OnFillDown={undoBatch((value: string) => { Doc.SetInPlace(this.doc, key, value, false); - const doc = Docs.Create.FreeformDocument([], { title: "-", x: 0, y: 0, _width: 100, _height: 25, templates: new List([Templates.Title.Layout]) }); + const doc = Docs.Create.FreeformDocument([], { title: "", x: 0, y: 0, _width: 100, _height: 25, templates: new List([Templates.Title.Layout]) }); Doc.SetInPlace(this.doc, "editTitle", undefined, false); Doc.SetInPlace(doc, "editTitle", "*", false); - return this.props.addDocument(doc); + const added = this.props.addDocument(doc); + doc.context = this.props.treeView.Document; + return added; })} onClick={() => { SelectionManager.DeselectAll(); Doc.UserDoc().activeSelection = new List([this.doc]); return false; }} + OnEmpty={undoBatch(() => { + if (this.props.treeView.doc.treeViewOutlineMode) { + this.props.removeDoc?.(this.doc); + } + })} OnTab={undoBatch((shift?: boolean) => { shift ? this.props.outdentDocument?.() : this.props.indentDocument?.(); setTimeout(() => Doc.SetInPlace(this.doc, "editTitle", `${this.props.treeView._uniqueId}`, false), 0); @@ -398,13 +414,25 @@ class TreeView extends React.Component { e.stopPropagation(); } + @computed get renderOutlineBullet() { + TraceMobx(); + return
+ {} +
; + } @computed get renderBullet() { TraceMobx(); const checked = this.doc.type === DocumentType.COL ? undefined : this.onCheckedClick ? (this.doc.treeViewChecked ?? "unchecked") : undefined; return
+ style={{ + color: StrCast(this.doc.color, checked === "unchecked" ? "white" : "inherit"), + opacity: checked === "unchecked" ? undefined : 0.4 + }}> {}
; } @@ -521,10 +549,10 @@ class TreeView extends React.Component { } }} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}> - {this.renderBullet} + {this.props.treeView.props.Document.treeViewOutlineMode ? this.renderOutlineBullet : this.renderBullet} {this.renderTitle} -
+
{!this.treeViewOpen || this.props.renderedIds.indexOf(this.doc[Id]) !== -1 ? (null) : this.renderContent}
@@ -617,6 +645,7 @@ class TreeView extends React.Component { Doc.AddDocToList(docs[i - 1], fieldKey, child); docs[i - 1].treeViewOpen = true; remove(child); + child.context = treeView.Document; } } }; @@ -627,6 +656,7 @@ class TreeView extends React.Component { Doc.AddDocToList(parentCollectionDoc, fieldKey, child, parentPrevSibling, false); parentCollectionDoc.treeViewOpen = true; remove(child); + child.context = treeView.Document; } }; const addDocument = (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => { @@ -729,8 +759,11 @@ export class CollectionTreeView extends CollectionSubView doAddDoc(doc)); + } else if (relativeTo === undefined) { + this.props.addDocument(doc); } else { doAddDoc(doc); + (doc instanceof Doc ? [doc] : doc).forEach(d => d.context = this.props.Document); } return true; } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 6939399e6..7084aba40 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -391,7 +391,7 @@ export class CollectionView extends Touchable diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 5ace82b3c..aa1852250 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -146,6 +146,10 @@ export class TabDocView extends React.Component { CollectionDockingView.AddSplit(curPres, "right"); } DocumentManager.Instance.jumpToDocument(doc, false, undefined, Cast(doc.context, Doc, null)); + setTimeout(() => { + curPres._itemIndex = DocListCast(curPres.data).length - 1; + doc.treeViewOutlineMode && PresBox.Instance.progressivizeChild(null as any); + }, 100); } } } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index deb7e68e8..ebad3bf45 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -116,15 +116,23 @@ export class MarqueeView extends React.Component { + // const ns = text.split("\n").filter(t => t.trim() !== "\r" && t.trim() !== ""); + // if (ns.length === 1 && text.startsWith("http")) { + // this.props.addDocument(Docs.Create.ImageDocument(text, { _nativeWidth: 300, _width: 300, x: x, y: y }));// paste an image from its URL in the paste buffer + // } else { + // this.pasteTable(ns, x, y); + // } + // }); + // e.stopPropagation(); + e.preventDefault(); - navigator.clipboard.readText().then(text => { - const ns = text.split("\n").filter(t => t.trim() !== "\r" && t.trim() !== ""); - if (ns.length === 1 && text.startsWith("http")) { - this.props.addDocument(Docs.Create.ImageDocument(text, { _nativeWidth: 300, _width: 300, x: x, y: y }));// paste an image from its URL in the paste buffer - } else { - this.pasteTable(ns, x, y); - } - }); + const slide = Doc.copyDragFactory(Doc.UserDoc().emptySlide as Doc)!; + slide.x = x; + slide.y = y; + this.props.addDocument(slide); + setTimeout(() => SelectionManager.SelectDoc(DocumentManager.Instance.getDocumentView(slide)!, false)); e.stopPropagation(); } else if (!e.ctrlKey && !e.metaKey) { FormattedTextBox.SelectOnLoadChar = FormattedTextBox.DefaultLayout ? e.key : ""; -- cgit v1.2.3-70-g09d2