diff options
| -rw-r--r-- | solr-8.3.1/server/tmp/start_8210707001248201939.properties | 11 | ||||
| -rw-r--r-- | src/client/documents/Documents.ts | 5 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionDockingView.tsx | 33 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionPivotView.scss | 57 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionPivotView.tsx | 119 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionTreeView.tsx | 23 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionView.tsx | 3 |
7 files changed, 239 insertions, 12 deletions
diff --git a/solr-8.3.1/server/tmp/start_8210707001248201939.properties b/solr-8.3.1/server/tmp/start_8210707001248201939.properties new file mode 100644 index 000000000..aebc17bdc --- /dev/null +++ b/solr-8.3.1/server/tmp/start_8210707001248201939.properties @@ -0,0 +1,11 @@ +#start.jar properties +#Thu Jan 16 20:33:22 UTC 2020 +java.version.platform=8 +java.version=1.8.0_211 +java.version.micro=0 +jetty.home=C\:\\gitstuff\\GitCode\\Dash-Web\\solr-8.3.1\\server +java.version.minor=8 +jetty.home.uri=file\:///C\:/gitstuff/GitCode/Dash-Web/solr-8.3.1/server +jetty.base=C\:\\gitstuff\\GitCode\\Dash-Web\\solr-8.3.1\\server +java.version.major=1 +jetty.base.uri=file\:///C\:/gitstuff/GitCode/Dash-Web/solr-8.3.1/server diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index be678d765..eacdd8214 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -69,6 +69,8 @@ export interface DocumentOptions { page?: number; scale?: number; fitWidth?: boolean; + fitToBox?: boolean; // whether a freeformview should zoom/scale to create a shrinkwrapped view of its contents + isDisplayPanel?: boolean; // whether the panel functions as GoldenLayout "stack" used to display documents forceActive?: boolean; preventTreeViewOpen?: boolean; // ignores the treeViewOpen Doc flag which allows a treeViewItem's expande/collapse state to be independent of other views of the same document in the tree view layout?: string | Doc; @@ -114,6 +116,9 @@ export interface DocumentOptions { dropConverter?: ScriptField; // script to run when documents are dropped on this Document. strokeWidth?: number; color?: string; + treeViewHideTitle?: boolean; // whether to hide the title of a tree view + treeViewOpen?: boolean; // whether this document is expanded in a tree view + isFacetFilter?: boolean; // whether document functions as a facet filter in a tree view limitHeight?: number; // maximum height for newly created (eg, from pasting) text documents // [key: string]: Opt<Field>; } diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 6c50ea0f2..a7a124825 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -207,6 +207,38 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp instance.layoutChanged(); return true; } + // + // Creates a vertical split on the right side of the docking view, and then adds the Document to that split + // + @undoBatch + @action + public static UseRightSplit(document: Doc, dataDoc: Doc | undefined, libraryPath?: Doc[]) { + if (!CollectionDockingView.Instance) return false; + const instance = CollectionDockingView.Instance; + if (instance._goldenLayout.root.contentItems[0].isRow) { + let found: DocumentView | undefined; + Array.from(instance._goldenLayout.root.contentItems[0].contentItems).some((child: any) => { + if (child.contentItems.length === 1 && child.contentItems[0].config.component === "DocumentFrameRenderer" && + DocumentManager.Instance.getDocumentViewById(child.contentItems[0].config.props.documentId)?.props.Document.isDisplayPanel) { + found = DocumentManager.Instance.getDocumentViewById(child.contentItems[0].config.props.documentId)!; + } else { + Array.from(child.contentItems).filter((tab: any) => tab.config.component === "DocumentFrameRenderer").some((tab: any, j: number) => { + if (DocumentManager.Instance.getDocumentViewById(tab.config.props.documentId)?.props.Document.isDisplayPanel) { + found = DocumentManager.Instance.getDocumentViewById(tab.config.props.documentId)!; + return true; + } + return false; + }); + } + }); + if (found) { + Doc.GetProto(found.props.Document).data = new List<Doc>([document]); + } else { + const stackView = Docs.Create.FreeformDocument([document], { fitToBox: true, isDisplayPanel: true, title: "document viewer" }) + CollectionDockingView.AddRightSplit(stackView, undefined, []); + } + } + } @undoBatch @action @@ -721,3 +753,4 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> { } } Scripting.addGlobal(function openOnRight(doc: any) { CollectionDockingView.AddRightSplit(doc, undefined); }); +Scripting.addGlobal(function useRightSplit(doc: any) { CollectionDockingView.UseRightSplit(doc, undefined); }); diff --git a/src/client/views/collections/CollectionPivotView.scss b/src/client/views/collections/CollectionPivotView.scss new file mode 100644 index 000000000..bd3d6c77b --- /dev/null +++ b/src/client/views/collections/CollectionPivotView.scss @@ -0,0 +1,57 @@ +.collectionPivotView { + display: flex; + flex-direction: row; + position: absolute; + height:100%; + width:100%; + .collectionPivotView-flyout { + width: 400px; + height: 300px; + display: inline-block; + .collectionPivotView-flyout-item { + background-color: lightgray; + text-align: left; + display: inline-block; + position: relative; + width: 100%; + } + } + + .collectionPivotView-treeView { + display:flex; + flex-direction: column; + width: 200px; + height: 100%; + .collectionPivotView-addfacet { + display:inline-block; + width: 200px; + height: 30px; + background: darkGray; + text-align: center; + .collectionPivotView-button { + align-items: center; + display: flex; + width: 100%; + height: 100%; + .collectionPivotView-span { + margin: auto; + } + } + > div, > div > div { + width: 100%; + height: 100%; + text-align: center; + } + } + .collectionPivotView-tree { + display:inline-block; + width: 200px; + height: calc(100% - 30px); + } + } + .collectionPivotView-pivot { + display:inline-block; + width: calc(100% - 200px); + height: 100%; + } +}
\ No newline at end of file diff --git a/src/client/views/collections/CollectionPivotView.tsx b/src/client/views/collections/CollectionPivotView.tsx new file mode 100644 index 000000000..d56052ed5 --- /dev/null +++ b/src/client/views/collections/CollectionPivotView.tsx @@ -0,0 +1,119 @@ +import { CollectionSubView } from "./CollectionSubView"; +import React = require("react"); +import { computed, action, IReactionDisposer, reaction, runInAction, observable } from "mobx"; +import { faEdit, faChevronCircleUp } from "@fortawesome/free-solid-svg-icons"; +import { Doc, DocListCast } from "../../../new_fields/Doc"; +import "./CollectionPivotView.scss"; +import { observer } from "mobx-react"; +import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; +import { CollectionTreeView } from "./CollectionTreeView"; +import { Cast, StrCast, NumCast } from "../../../new_fields/Types"; +import { Docs } from "../../documents/Documents"; +import { ScriptField } from "../../../new_fields/ScriptField"; +import { CompileScript } from "../../util/Scripting"; +import { anchorPoints, Flyout } from "../TemplateMenu"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { List } from "../../../new_fields/List"; +import { Set } from "typescript-collections"; + +@observer +export class CollectionPivotView extends CollectionSubView(doc => doc) { + componentDidMount = () => { + this.props.Document.freeformLayoutEngine = "pivot"; + if (!this.props.Document.facetCollection) { + const facetCollection = Docs.Create.FreeformDocument([], { title: "facetFilters", yMargin: 0, treeViewHideTitle: true }); + facetCollection.target = this.props.Document; + + const scriptText = "setDocFilter(context.target, heading, this.title, checked)"; + const script = CompileScript(scriptText, { + params: { this: Doc.name, heading: "boolean", checked: "boolean", context: Doc.name }, + typecheck: false, + editable: true, + }); + if (script.compiled) { + facetCollection.onCheckedClick = new ScriptField(script); + } + + const openDocText = "const alias = getAlias(this); alias.layoutKey = 'layoutCustom'; useRightSplit(alias); "; + const openDocScript = CompileScript(openDocText, { + params: { this: Doc.name, heading: "boolean", checked: "boolean", context: Doc.name }, + typecheck: false, + editable: true, + }); + if (openDocScript.compiled) { + this.props.Document.onChildClick = new ScriptField(openDocScript); + } + + this.props.Document.facetCollection = facetCollection; + this.props.Document.fitToBox = true; + } + } + + @computed get fieldExtensionDoc() { + return Doc.fieldExtensionDoc(this.props.DataDoc || this.props.Document, this.props.fieldKey); + } + + bodyPanelWidth = () => this.props.PanelWidth() - 200; + getTransform = () => this.props.ScreenToLocalTransform().translate(-200, 0); + + @computed get _allFacets() { + const facets = new Set<string>(); + this.childDocs.forEach(child => Object.keys(Doc.GetProto(child)).forEach(key => facets.add(key))); + return facets.toArray(); + } + + facetClick = (facet: string) => { + const facetCollection = this.props.Document.facetCollection; + if (facetCollection instanceof Doc) { + let found = DocListCast(facetCollection.data).findIndex(doc => doc.title === facet); + if (found !== -1) { + //Doc.RemoveDocFromList(facetCollection, "data", DocListCast(facetCollection.data)[found]); + (facetCollection.data as List<Doc>).splice(found, 1); + } else { + const facetValues = new Set<string>(); + this.childDocs.forEach(child => { + Object.keys(Doc.GetProto(child)).forEach(key => child[key] instanceof Doc && facetValues.add((child[key] as Doc)[facet]?.toString() || "(null)")); + facetValues.add(child[facet]?.toString() || "(null)"); + }); + this.childDocs + + const newFacetVals = facetValues.toArray().map(val => Docs.Create.TextDocument({ title: val.toString() })); + const newFacet = Docs.Create.FreeformDocument(newFacetVals, { title: facet, treeViewOpen: true, isFacetFilter: true }); + Doc.AddDocToList(facetCollection, "data", newFacet); + } + } + } + + render() { + const facetCollection = Cast(this.props.Document?.facetCollection, Doc, null); + const flyout = ( + <div className="collectionPivotView-flyout" title=" "> + {this._allFacets.map(facet => <label className="collectionPivotView-flyout-item" onClick={e => this.facetClick(facet)}> + <input type="checkbox" checked={this.props.Document.facetCollection instanceof Doc && DocListCast(this.props.Document.facetCollection.data).some(d => { + return d.title === facet; + })} /> + <span className="checkmark" /> + {facet} + </label>)} + </div> + ); + return !facetCollection ? (null) : <div className="collectionPivotView"> + <div className="collectionPivotView-treeView"> + <div className="collectionPivotView-addFacet" onPointerDown={e => e.stopPropagation()}> + <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={flyout}> + <div className="collectionPivotView-button"> + <span className="collectionPivotView-span">Facet Filters</span> + <FontAwesomeIcon icon={faEdit} size={"lg"} /> + </div> + </Flyout> + </div> + <div className="collectionPivotView-tree"> + <CollectionTreeView {...this.props} Document={facetCollection} /> + </div> + </div> + <div className="collectionPivotView-pivot"> + <CollectionFreeFormView {...this.props} ScreenToLocalTransform={this.getTransform} PanelWidth={this.bodyPanelWidth} /> + </div> + </div>; + } +}
\ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 3356aed68..70860b6bd 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -52,7 +52,7 @@ export interface TreeViewProps { outdentDocument?: () => void; ScreenToLocalTransform: () => Transform; outerXf: () => { translateX: number, translateY: number }; - treeViewId: string; + treeViewId: Doc; parentKey: string; active: (outsideReaction?: boolean) => boolean; hideHeaderFields: () => boolean; @@ -234,8 +234,8 @@ class TreeView extends React.Component<TreeViewProps> { if (inside) { addDoc = (doc: Doc) => Doc.AddDocToList(this.dataDoc, this.fieldKey, doc) || addDoc(doc); } - const movedDocs = (de.complete.docDragData.treeViewId === this.props.treeViewId ? de.complete.docDragData.draggedDocuments : de.complete.docDragData.droppedDocuments); - return ((de.complete.docDragData.dropAction && (de.complete.docDragData.treeViewId !== this.props.treeViewId)) || de.complete.docDragData.userDropAction) ? + const movedDocs = (de.complete.docDragData.treeViewId === this.props.treeViewId[Id] ? de.complete.docDragData.draggedDocuments : de.complete.docDragData.droppedDocuments); + return ((de.complete.docDragData.dropAction && (de.complete.docDragData.treeViewId !== this.props.treeViewId[Id])) || de.complete.docDragData.userDropAction) ? de.complete.docDragData.droppedDocuments.reduce((added, d) => addDoc(d) || added, false) : de.complete.docDragData.moveDocument ? movedDocs.reduce((added, d) => de.complete.docDragData?.moveDocument?.(d, undefined, addDoc) || added, false) @@ -368,12 +368,13 @@ class TreeView extends React.Component<TreeViewProps> { @action bulletClick = (e: React.MouseEvent) => { - if (this.props.onCheckedClick) { + if (this.props.onCheckedClick && this.props.document.type !== DocumentType.COL) { this.props.document.treeViewChecked = this.props.document.treeViewChecked === "check" ? "x" : this.props.document.treeViewChecked === "x" ? undefined : "check"; ScriptCast(this.props.onCheckedClick).script.run({ this: this.props.document.isTemplateField && this.props.dataDoc ? this.props.dataDoc : this.props.document, heading: this.props.containingCollection.title, - checked: this.props.document.treeViewChecked === "check" ? false : this.props.document.treeViewChecked === "x" ? "x" : "none" + checked: this.props.document.treeViewChecked === "check" ? false : this.props.document.treeViewChecked === "x" ? "x" : "none", + context: this.props.treeViewId }, console.log); } else { this.treeViewOpen = !this.treeViewOpen; @@ -383,7 +384,7 @@ class TreeView extends React.Component<TreeViewProps> { @computed get renderBullet() { - const checked = this.props.onCheckedClick ? (this.props.document.treeViewChecked ? this.props.document.treeViewChecked : "unchecked") : undefined; + const checked = this.props.document.type === DocumentType.COL ? undefined : this.props.onCheckedClick ? (this.props.document.treeViewChecked ? this.props.document.treeViewChecked : "unchecked") : undefined; return <div className="bullet" title="view inline" onClick={this.bulletClick} style={{ color: StrCast(this.props.document.color, checked === "unchecked" ? "white" : "black"), opacity: 0.4 }}> {<FontAwesomeIcon icon={checked === "check" ? "check" : (checked === "x" ? "times" : checked === "unchecked" ? "square" : !this.treeViewOpen ? (this.childDocs ? "caret-square-right" : "caret-right") : (this.childDocs ? "caret-square-down" : "caret-down"))} />} </div>; @@ -394,7 +395,7 @@ class TreeView extends React.Component<TreeViewProps> { @computed get renderTitle() { const reference = React.createRef<HTMLDivElement>(); - const onItemDown = SetupDrag(reference, () => this.dataDoc, this.move, this.props.dropAction, this.props.treeViewId, true); + const onItemDown = SetupDrag(reference, () => this.dataDoc, this.move, this.props.dropAction, this.props.treeViewId[Id], true); const headerElements = ( <span className="collectionTreeView-keyHeader" key={this.treeViewExpandedView} @@ -444,7 +445,7 @@ class TreeView extends React.Component<TreeViewProps> { } public static GetChildElements( childDocs: Doc[], - treeViewId: string, + treeViewId: Doc, containingCollection: Doc, dataDoc: Doc | undefined, key: string, @@ -655,7 +656,7 @@ export class CollectionTreeView extends CollectionSubView(Document) { onWheel={(e: React.WheelEvent) => this._mainEle && this._mainEle.scrollHeight > this._mainEle.clientHeight && e.stopPropagation()} onDrop={this.onTreeDrop} ref={this.createTreeDropTarget}> - <EditableView + {(this.props.Document.treeViewHideTitle ? (null) : <EditableView contents={this.dataDoc.title} display={"block"} maxHeight={72} @@ -668,11 +669,11 @@ export class CollectionTreeView extends CollectionSubView(Document) { const doc = layoutDoc || Docs.Create.FreeformDocument([], { title: "", x: 0, y: 0, width: 100, height: 25, templates: new List<string>([Templates.Title.Layout]) }); TreeView.loadId = doc[Id]; Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, this.childDocs.length ? this.childDocs[0] : undefined, true, false, false, false); - })} /> + })} />)} {this.props.Document.allowClear ? this.renderClearButton : (null)} <ul className="no-indent" style={{ width: "max-content" }} > { - TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.Document, this.props.DataDoc, this.props.fieldKey, this.props.ContainingCollectionDoc, undefined, addDoc, this.remove, + TreeView.GetChildElements(this.childDocs, this.props.Document, this.props.Document, this.props.DataDoc, this.props.fieldKey, this.props.ContainingCollectionDoc, undefined, addDoc, this.remove, moveDoc, dropAction, this.props.addDocTab, this.props.pinToPres, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.ChromeHeight, this.props.renderDepth, () => BoolCast(this.props.Document.hideHeaderFields), BoolCast(this.props.Document.preventTreeViewOpen), [], this.props.LibraryPath, ScriptCast(this.props.Document.onCheckedClick)) diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 21371dd39..022fc8f48 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -36,6 +36,7 @@ import { TraceMobx } from '../../../new_fields/util'; import { Utils } from '../../../Utils'; import { ScriptBox } from '../ScriptBox'; import CollectionMulticolumnView from '../CollectionMulticolumnView'; +import { CollectionPivotView } from './CollectionPivotView'; const path = require('path'); library.add(faTh, faTree, faSquare, faProjectDiagram, faSignature, faThList, faFingerprint, faColumns, faEllipsisV, faImage, faEye as any, faCopy); @@ -180,7 +181,7 @@ export class CollectionView extends Touchable<FieldViewProps> { case CollectionViewType.Linear: { return (<CollectionLinearView key="collview" {...props} />); } case CollectionViewType.Stacking: { this.props.Document.singleColumn = true; return (<CollectionStackingView key="collview" {...props} />); } case CollectionViewType.Masonry: { this.props.Document.singleColumn = false; return (<CollectionStackingView key="collview" {...props} />); } - case CollectionViewType.Pivot: { this.props.Document.freeformLayoutEngine = "pivot"; return (<CollectionFreeFormView key="collview" {...props} />); } + case CollectionViewType.Pivot: { return (<CollectionPivotView key="collview" {...props} />); } case CollectionViewType.Freeform: default: { this.props.Document.freeformLayoutEngine = undefined; return (<CollectionFreeFormView key="collview" {...props} />); } } |