From b8e81dc8a87ad0e4c5147553f326f3f4931b355b Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Fri, 5 Jun 2020 22:27:17 -0400 Subject: bugfixing filtr menu --- src/fields/Doc.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) (limited to 'src/fields/Doc.ts') diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 0a003e4f2..62eac379b 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -1148,11 +1148,13 @@ Scripting.addGlobal(function selectedDocs(container: Doc, excludeCollections: bo }); Scripting.addGlobal(function setDocFilter(container: Doc, key: string, value: any, modifiers?: "check" | "x" | undefined) { Doc.setDocFilter(container, key, value, modifiers); }); Scripting.addGlobal(function setDocFilterRange(container: Doc, key: string, range: number[]) { Doc.setDocFilterRange(container, key, range); }); -Scripting.addGlobal(function handleNodeChange(doc: any) { - console.log("oi"); - doc.handleNodeChange(); +// Scripting.addGlobal(function handleNodeChange(doc: any) { +// console.log("oi"); +// // console.log(doc); +// console.log(this); +// this.handleNodeChange(); - // const dv = DocumentManager.Instance.getDocumentView(doc); - // if (dv?.props.Document.layoutKey === layoutKey) dv?.switchViews(otherKey !== "layout", otherKey.replace("layout_", "")); - // else dv?.switchViews(true, layoutKey.replace("layout_", "")); -}); \ No newline at end of file +// // const dv = DocumentManager.Instance.getDocumentView(doc); +// // if (dv?.props.Document.layoutKey === layoutKey) dv?.switchViews(otherKey !== "layout", otherKey.replace("layout_", "")); +// // else dv?.switchViews(true, layoutKey.replace("layout_", "")); +// }); \ No newline at end of file -- cgit v1.2.3-70-g09d2 From e2a29915b100cb9a1580e224e0cfdfb8be669208 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Mon, 8 Jun 2020 14:22:27 -0400 Subject: fixed filtering on search, allowing buckets to expand searches --- solr-8.3.1/bin/solr-8983.pid | 2 +- src/client/util/Scripting.ts | 2 +- src/client/views/search/SearchBox.tsx | 118 +++++++++++++++++++++------------ src/client/views/search/SearchItem.tsx | 13 ++-- src/fields/Doc.ts | 10 --- 5 files changed, 85 insertions(+), 60 deletions(-) (limited to 'src/fields/Doc.ts') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index 5559899bb..6642ad1da 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -846 +2696 diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index ab577315c..98bbffcd7 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -93,7 +93,7 @@ export function scriptingGlobal(constructor: { new(...args: any[]): any }) { Scripting.addGlobal(constructor); } -const _scriptingGlobals: { [name: string]: any } = {}; +export const _scriptingGlobals: { [name: string]: any } = {}; let scriptingGlobals: { [name: string]: any } = _scriptingGlobals; function Run(script: string | undefined, customParams: string[], diagnostics: any[], originalScript: string, options: ScriptOptions): CompileResult { diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 15bddcd8a..8e188df38 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -30,12 +30,14 @@ import { List } from '../../../fields/List'; import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons'; import { Transform } from '../../util/Transform'; import { MainView } from "../MainView"; -import { Scripting } from '../../util/Scripting'; +import { Scripting,_scriptingGlobals } from '../../util/Scripting'; import { CollectionView, CollectionViewType } from '../collections/CollectionView'; import { ViewBoxBaseComponent } from "../DocComponent"; import { documentSchema } from "../../../fields/documentSchemas"; import { makeInterface, createSchema } from '../../../fields/Schema'; import { listSpec } from '../../../fields/Schema'; +import * as _ from "lodash"; + library.add(faTimes); @@ -107,9 +109,18 @@ export class SearchBox extends ViewBoxBaseComponent { if (e.key === "Enter") { + runInAction(()=>{this.expandedBucket=false}); this.submitSearch(); } } @@ -348,9 +360,10 @@ export class SearchBox extends ViewBoxBaseComponent { - console.log("yes"); + console.log(this._icons); if (reset){ this.layoutDoc._searchString=""; } @@ -411,7 +424,7 @@ export class SearchBox extends ViewBoxBaseComponent3){ + if (this._numTotalResults>3 && this.expandedBucket===false){ this.makenewbuckets(); for (let i = 0; i < this._numTotalResults; i++) { console.log(this._isSearch[i],this._isSorted[i]); @@ -701,9 +714,14 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + result[0].highlighting=highlights.join(", "); + result[0].targetDoc=result[0]; + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); } this._isSorted[i]="sorted"; } @@ -721,18 +739,24 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + result[0].highlighting=highlights.join(", "); + result[0].targetDoc=result[0]; + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); + } + } + } if (this._maxSearchIndex >= this._numTotalResults) { this._visibleElements.length = this._results.length; @@ -986,22 +1010,39 @@ export class SearchBox extends ViewBoxBaseComponent{ + if (this._icons.includes(icon)){ + _.pull(this._icons, icon); + let cap = icon.charAt(0).toUpperCase() + icon.slice(1) + console.log(cap); + let doc = await Cast(this.props.Document[cap], Doc) + doc!.backgroundColor= ""; + } + else{ + this._icons.push(icon); + let cap = icon.charAt(0).toUpperCase() + icon.slice(1) + let doc = await Cast(this.props.Document[cap], Doc) + doc!.backgroundColor= "aaaaa3"; + } + console.log(this._icons); + } + setupDocTypeButtons() { let doc = this.props.Document; const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc; - doc.Music = ficon({ onClick: undefined, title: "mussic button", icon: "music" }); - doc.Col = ficon({ onClick: undefined, title: "col button", icon: "object-group" }); - doc.Hist = ficon({ onClick: undefined, title: "hist button", icon: "chart-bar" }); - doc.Image = ficon({ onClick: undefined, title: "image button", icon: "image" }); - doc.Link = ficon({ onClick: undefined, title: "link button", icon: "link" }); - doc.PDF = ficon({ onClick: undefined, title: "pdf button", icon: "file-pdf" }); - doc.TEXT = ficon({ onClick: undefined, title: "text button", icon: "sticky-note" }); - doc.Vid = ficon({ onClick: undefined, title: "vid button", icon: "video" }); - doc.Web = ficon({ onClick: undefined, title: "web button", icon: "globe-asia" }); - - let buttons = [doc.None as Doc, doc.Music as Doc, doc.Col as Doc, doc.Hist as Doc, + doc.Music = ficon({ onClick: ScriptField.MakeScript(`updateIcon("audio")`), title: "music button", icon: "music" }); + doc.Col = ficon({ onClick: ScriptField.MakeScript(`updateIcon("collection")`), title: "col button", icon: "object-group" }); + doc.Image = ficon({ onClick: ScriptField.MakeScript(`updateIcon("image")`), title: "image button", icon: "image" }); + doc.Link = ficon({ onClick: ScriptField.MakeScript(`updateIcon("link")`), title: "link button", icon: "link" }); + doc.Pdf = ficon({ onClick: ScriptField.MakeScript(`updateIcon("pdf")`), title: "pdf button", icon: "file-pdf" }); + doc.Text = ficon({ onClick: ScriptField.MakeScript(`updateIcon("rtf")`), title: "text button", icon: "sticky-note" }); + doc.Vid = ficon({ onClick: ScriptField.MakeScript(`updateIcon("video")`), title: "vid button", icon: "video" }); + doc.Web = ficon({ onClick: ScriptField.MakeScript(`updateIcon("web")`), title: "web button", icon: "globe-asia" }); + + let buttons = [doc.None as Doc, doc.Music as Doc, doc.Col as Doc, doc.Hist as Doc, doc.Image as Doc, doc.Link as Doc, doc.PDF as Doc, doc.TEXT as Doc, doc.Vid as Doc, doc.Web as Doc]; const dragCreators = Docs.Create.MasonryDocument(buttons, { @@ -1036,7 +1077,9 @@ export class SearchBox extends ViewBoxBaseComponent new PrefetchProxy( Docs.Create.ButtonDocument({...opts, _width: 35, _height: 30, - borderRounding: "16px", border:"1px solid grey", color:"white", hovercolor: "rgb(170, 170, 163)", letterSpacing: "2px", + borderRounding: "16px", border:"1px solid grey", color:"white", + //hovercolor: "rgb(170, 170, 163)", + letterSpacing: "2px", _fontSize: 7, }))as any as Doc; doc.keywords=button({ title: "Keywords", onClick:ScriptField.MakeScript("handleWordQueryChange(self)")}); @@ -1087,18 +1130,11 @@ export class SearchBox extends ViewBoxBaseComponent0 ? {overflow:"visible"} : {overflow:"hidden"}}>
{this.defaultButtons} - {/* - - */}
{this.docButtons}
- {/*
*/} - {/* - - */} {this.keyButtons}
@@ -1117,9 +1153,7 @@ export class SearchBox extends ViewBoxBaseComponent - {this._visibleElements.length} - - + {this._visibleElements.length} ); diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index a8d664ad8..a9a8b563b 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -344,8 +344,11 @@ export class SearchItem extends ViewBoxBaseComponent{ - SearchBox.Instance._searchString=""; - SearchBox.Instance.submitSearch(true); + if (StrCast(this.rootDoc.bucketfield)!=="results"){ + SearchBox.Instance._icons=[StrCast(this.rootDoc.bucketfield)]; + } + SearchBox.Instance.expandedBucket= true; + SearchBox.Instance.submitSearch(); }) } @@ -355,26 +358,24 @@ export class SearchItem extends ViewBoxBaseComponent
- {StrCast(this.rootDoc.bucketfield)} + {StrCast(this.rootDoc.bucketfield)==="results"? null:StrCast(this.rootDoc.bucketfield)}
- } diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 62eac379b..e14e4996b 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -1148,13 +1148,3 @@ Scripting.addGlobal(function selectedDocs(container: Doc, excludeCollections: bo }); Scripting.addGlobal(function setDocFilter(container: Doc, key: string, value: any, modifiers?: "check" | "x" | undefined) { Doc.setDocFilter(container, key, value, modifiers); }); Scripting.addGlobal(function setDocFilterRange(container: Doc, key: string, range: number[]) { Doc.setDocFilterRange(container, key, range); }); -// Scripting.addGlobal(function handleNodeChange(doc: any) { -// console.log("oi"); -// // console.log(doc); -// console.log(this); -// this.handleNodeChange(); - -// // const dv = DocumentManager.Instance.getDocumentView(doc); -// // if (dv?.props.Document.layoutKey === layoutKey) dv?.switchViews(otherKey !== "layout", otherKey.replace("layout_", "")); -// // else dv?.switchViews(true, layoutKey.replace("layout_", "")); -// }); \ No newline at end of file -- cgit v1.2.3-70-g09d2 From b83a38a3a92c0149562da460ad9c35eaaf3054ec Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Sun, 26 Jul 2020 17:41:01 +0800 Subject: download name update **not part of pres trails** --- src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 10 +++++----- src/fields/Doc.ts | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'src/fields/Doc.ts') diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index ba9385514..480abdaed 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -114,10 +114,10 @@ export class CollectionFreeFormDocumentView extends DocComponent(); - let height = new List(); - let top = new List(); - let left = new List(); + const width = new List(); + const height = new List(); + const top = new List(); + const left = new List(); width.push(NumCast(doc.width)); height.push(NumCast(doc.height)); top.push(NumCast(doc.height) / -2); @@ -176,7 +176,7 @@ export class CollectionFreeFormDocumentView extends DocComponent; - if (this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc) { + if (PresBox.Instance && this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc) { const effectProps = { left: this.layoutDoc.presEffectDirection === 'left', right: this.layoutDoc.presEffectDirection === 'right', diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index e28f6b7d2..cc90574a2 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -595,7 +595,7 @@ export namespace Doc { var zip = new JSZip(); - zip.file("doc.json", docString); + zip.file(doc.title + ".json", docString); // // Generate a directory within the Zip file structure // var img = zip.folder("images"); @@ -607,7 +607,7 @@ export namespace Doc { zip.generateAsync({ type: "blob" }) .then((content: any) => { // Force down of the Zip file - saveAs(content, "download.zip"); + saveAs(content, doc.title + ".zip"); // glr: Possibly change the name of the document to match the title? }); } // -- cgit v1.2.3-70-g09d2 From 8303cd6389fe9e3c861d7b429bb4e32d3417a895 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Mon, 3 Aug 2020 02:58:31 +0800 Subject: Merge remote-tracking branch 'origin/menu_restructure' into presentation_updates --- package.json | 6 +- src/Utils.ts | 4 +- src/client/documents/DocumentTypes.ts | 1 + src/client/documents/Documents.ts | 12 + src/client/util/CurrentUserUtils.ts | 116 ++- src/client/util/GroupMemberView.scss | 2 +- src/client/util/SelectionManager.ts | 3 + src/client/util/SharingManager.tsx | 6 +- src/client/views/ContextMenuItem.tsx | 4 +- src/client/views/DocumentButtonBar.tsx | 8 +- src/client/views/DocumentDecorations.tsx | 19 +- src/client/views/EditableView.tsx | 2 +- src/client/views/MainView.scss | 135 +++- src/client/views/MainView.tsx | 393 ++++++---- src/client/views/PreviewCursor.tsx | 6 +- src/client/views/PropertiesButtons.scss | 119 +++ src/client/views/PropertiesButtons.tsx | 598 ++++++++++++++ .../views/collections/CollectionDockingView.scss | 16 +- .../views/collections/CollectionDockingView.tsx | 20 +- src/client/views/collections/CollectionMenu.tsx | 79 +- .../views/collections/CollectionSchemaView.tsx | 2 +- .../views/collections/CollectionStackingView.tsx | 1 + .../CollectionStackingViewFieldColumn.tsx | 2 +- src/client/views/collections/CollectionSubView.tsx | 2 +- .../views/collections/CollectionTreeView.tsx | 7 +- src/client/views/collections/CollectionView.scss | 1 + src/client/views/collections/CollectionView.tsx | 11 +- .../views/collections/ParentDocumentSelector.tsx | 6 +- src/client/views/collections/SchemaTable.tsx | 8 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 12 +- .../collectionFreeForm/FormatShapePane.tsx | 27 +- .../collectionFreeForm/PropertiesView.scss | 620 +++++++++++++++ .../collectionFreeForm/PropertiesView.tsx | 858 +++++++++++++++++++++ src/client/views/linking/LinkMenuItem.tsx | 3 +- .../views/nodes/ContentFittingDocumentView.tsx | 3 + src/client/views/nodes/DocumentContentsView.tsx | 3 +- src/client/views/nodes/DocumentLinksButton.tsx | 5 +- src/client/views/nodes/DocumentView.tsx | 62 +- src/client/views/nodes/FieldView.tsx | 1 + src/client/views/nodes/FontIconBox.scss | 2 +- src/client/views/nodes/MenuIconBox.scss | 49 ++ src/client/views/nodes/MenuIconBox.tsx | 33 + src/client/views/nodes/PresBox.tsx | 10 +- .../views/nodes/formattedText/DashFieldView.tsx | 2 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 4 +- .../views/nodes/formattedText/RichTextMenu.tsx | 41 +- src/client/views/nodes/formattedText/nodes_rts.ts | 8 +- src/fields/Doc.ts | 6 +- src/server/ActionUtilities.ts | 10 +- src/server/ApiManagers/UtilManager.ts | 1 - src/server/DashUploadUtils.ts | 27 +- src/server/GarbageCollector.ts | 6 +- src/server/MemoryDatabase.ts | 5 +- src/server/Message.ts | 2 +- src/server/ProcessFactory.ts | 6 +- src/server/Recommender.ts | 133 ---- src/server/RouteManager.ts | 8 +- src/server/Search.ts | 2 +- src/server/database.ts | 8 +- src/server/downsize.ts | 2 +- src/server/index.ts | 34 +- src/server/server_Initialization.ts | 38 +- src/server/websocket.ts | 27 +- 63 files changed, 3126 insertions(+), 521 deletions(-) create mode 100644 src/client/views/PropertiesButtons.scss create mode 100644 src/client/views/PropertiesButtons.tsx create mode 100644 src/client/views/collections/collectionFreeForm/PropertiesView.scss create mode 100644 src/client/views/collections/collectionFreeForm/PropertiesView.tsx create mode 100644 src/client/views/nodes/MenuIconBox.scss create mode 100644 src/client/views/nodes/MenuIconBox.tsx delete mode 100644 src/server/Recommender.ts (limited to 'src/fields/Doc.ts') diff --git a/package.json b/package.json index 11af6b2c6..420765e7c 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,8 @@ }, "scripts": { "start-release": "cross-env RELEASE=true NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev -- src/server/index.ts", - "start": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --transpile-only -- src/server/index.ts", - "oldstart": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev -- src/server/index.ts", + "start": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug --transpile-only -- src/server/index.ts", + "oldstart": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug -- src/server/index.ts", "debug": "cross-env NODE_OPTIONS=--max_old_space_size=8192 ts-node-dev --transpile-only --inspect -- src/server/index.ts", "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 webpack --env production", "test": "mocha -r ts-node/register test/**/*.ts", @@ -260,4 +260,4 @@ "xoauth2": "^1.2.0", "xregexp": "^4.3.0" } -} +} \ No newline at end of file diff --git a/src/Utils.ts b/src/Utils.ts index a01a94134..0b057dc23 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -1,8 +1,8 @@ import v4 = require('uuid/v4'); import v5 = require("uuid/v5"); -import { Socket, Room } from 'socket.io'; -import { Message } from './server/Message'; import { ColorState } from 'react-color'; +import { Socket } from 'socket.io'; +import { Message } from './server/Message'; export namespace Utils { export let DRAG_THRESHOLD = 4; diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index 985fcce11..659f78970 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -13,6 +13,7 @@ export enum DocumentType { INK = "ink", // ink stroke SCREENSHOT = "screenshot", // view of a desktop application FONTICON = "fonticonbox", // font icon + MENUICON = "menuiconbox", QUERY = "query", // search query LABEL = "label", // simple text label BUTTON = "button", // onClick button diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 0da93aa7a..01cdb1eee 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -31,6 +31,7 @@ import { ColorBox } from "../views/nodes/ColorBox"; import { ComparisonBox } from "../views/nodes/ComparisonBox"; import { DocHolderBox } from "../views/nodes/DocHolderBox"; import { FontIconBox } from "../views/nodes/FontIconBox"; +import { MenuIconBox } from "../views/nodes/MenuIconBox"; import { FormattedTextBox } from "../views/nodes/formattedText/FormattedTextBox"; import { ImageBox } from "../views/nodes/ImageBox"; import { KeyValueBox } from "../views/nodes/KeyValueBox"; @@ -305,6 +306,13 @@ export namespace Docs { layout: { view: FontIconBox, dataField: defaultDataKey }, options: { _width: 40, _height: 40, borderRounding: "100%" }, }], + [DocumentType.MENUICON, { + layout: { view: MenuIconBox, dataField: defaultDataKey }, + }], + // [DocumentType.RECOMMENDATION, { + // layout: { view: RecommendationsBox, dataField: defaultDataKey }, + // options: { _width: 200, _height: 200 }, + // }], [DocumentType.WEBCAM, { layout: { view: DashWebRTCVideo, dataField: defaultDataKey } }], @@ -791,6 +799,10 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.FONTICON), undefined, { hideLinkButton: true, ...(options || {}) }); } + export function MenuIconDocument(options?: DocumentOptions) { + return InstanceFromProto(Prototypes.get(DocumentType.MENUICON), undefined, { hideLinkButton: true, ...(options || {}) }); + } + export function PresElementBoxDocument(options?: DocumentOptions) { return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) }); } diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 6d752832a..b37c91c56 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -38,6 +38,16 @@ export class CurrentUserUtils { @observable public static GuestWorkspace: Doc | undefined; @observable public static GuestMobile: Doc | undefined; + @observable public static toolsBtn: any | undefined; + @observable public static libraryBtn: any | undefined; + @observable public static searchBtn: any | undefined; + + @observable public static toolsStack: any | undefined; + @observable public static workspaceStack: any | undefined; + @observable public static catalogStack: any | undefined; + @observable public static closedStack: any | undefined; + @observable public static searchStack: any | undefined; + // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { if (doc["template-button-query"] === undefined) { @@ -492,6 +502,46 @@ export class CurrentUserUtils { return doc.myItemCreators as Doc; } + static menuBtnDescriptions(): { + title: string, icon: string, click: string, + }[] { + return [ + { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("Workspace")' }, + { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("Catalog")' }, + { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("Archive")' }, + { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("Import")' }, + { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu("Sharing")' }, + { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("Tools")' }, + { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("Help")' }, + { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu("Settings")' }, + ]; + } + + static setupMenuPanel(doc: Doc) { + if (doc.menuStack === undefined) { + const buttons = CurrentUserUtils.menuBtnDescriptions(); + const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.MenuIconDocument({ + icon, + title, + _backgroundColor: "black", + stayInCollection: true, + _width: 60, + _height: 60, + onClick: ScriptField.MakeScript(click, { scriptContext: "any" }), + })); + + doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, { + title: "menuItemPanel", + _backgroundColor: "black", + _gridGap: 0, + _yMargin: 0, + _yPadding: 0, _xMargin: 0, _autoHeight: false, _width: 60, _columnWidth: 60, lockedPosition: true, _chromeStatus: "disabled", + })); + } + return doc.menuStack as Doc; + } + + // Sets up mobile menu if it is undefined creates a new one, otherwise returns existing menu static setupActiveMobileMenu(doc: Doc) { if (doc.activeMobileMenu === undefined) { @@ -601,6 +651,8 @@ export class CurrentUserUtils { const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc); const templateBtns = CurrentUserUtils.setupUserTemplateButtons(doc); + doc["tabs-button-tools"] = undefined; + if (doc.myCreators === undefined) { doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, templateBtns], { title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0, @@ -617,8 +669,11 @@ export class CurrentUserUtils { if (doc["tabs-button-tools"] === undefined) { const toolsStack = new PrefetchProxy(Docs.Create.StackingDocument([doc.myCreators as Doc, doc.myColorPicker as Doc], { - _width: 500, lockedPosition: true, _chromeStatus: "disabled", title: "tools stack", forceActive: true + _width: 500, lockedPosition: true, _chromeStatus: "disabled", hideFilterView: true, title: "tools stack", forceActive: true })) as any as Doc; + + CurrentUserUtils.toolsStack = toolsStack; + doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({ _width: 35, _height: 25, title: "Tools", _fontSize: "10pt", letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", @@ -627,41 +682,63 @@ export class CurrentUserUtils { dragFactory: toolsStack, removeDropProperties: new List(["lockedPosition"]), stayInCollection: true, + hideFilterView: true, targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc, onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel"), })); } - (doc["tabs-button-tools"] as Doc).sourcePanel; // prefetch sourcePanel - return doc["tabs-button-tools"] as Doc; + (doc["tabs-button-tools"] as any as Doc).sourcePanel; // prefetch sourcePanel + + return doc["tabs-button-tools"] as any as Doc; } static setupWorkspaces(doc: Doc) { // setup workspaces library item + doc.myWorkspaces === undefined; if (doc.myWorkspaces === undefined) { doc.myWorkspaces = new PrefetchProxy(Docs.Create.TreeDocument([], { - title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, + title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, treeViewOpen: true, })); } const newWorkspace = ScriptField.MakeScript(`createNewWorkspace()`); (doc.myWorkspaces as Doc).contextMenuScripts = new List([newWorkspace!]); (doc.myWorkspaces as Doc).contextMenuLabels = new List(["Create New Workspace"]); + const workspaces = doc.myWorkspaces as Doc; + + CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], { + title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, + lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" + })) as any as Doc; + return doc.myWorkspaces as Doc; } static setupCatalog(doc: Doc) { + doc.myCatalog === undefined; if (doc.myCatalog === undefined) { doc.myCatalog = new PrefetchProxy(Docs.Create.SchemaDocument([], [], { title: "CATALOG", _height: 1000, _fitWidth: true, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false, - childDropAction: "alias", targetDropAction: "same", stayInCollection: true, + childDropAction: "alias", targetDropAction: "same", stayInCollection: true, treeViewOpen: true, })); } + + const catalog = doc.myCatalog as Doc; + + CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], { + title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, + lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" + })) as any as Doc; + return doc.myCatalog as Doc; } static setupRecentlyClosed(doc: Doc) { // setup Recently Closed library item + doc.myRecentlyClosed === undefined; if (doc.myRecentlyClosed === undefined) { doc.myRecentlyClosed = new PrefetchProxy(Docs.Create.TreeDocument([], { - title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: true, stayInCollection: true, + title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false, treeViewOpen: true, stayInCollection: true, })); } // this is equivalent to using PrefetchProxies to make sure the recentlyClosed doc is ready @@ -670,6 +747,14 @@ export class CurrentUserUtils { (doc.myRecentlyClosed as Doc).contextMenuScripts = new List([clearAll!]); (doc.myRecentlyClosed as Doc).contextMenuLabels = new List(["Clear All"]); + const recentlyClosed = doc.myRecentlyClosed as Doc; + + CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], { + title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, + lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" + })) as any as Doc; + return doc.myRecentlyClosed as Doc; } // setup the Library button which will display the library panel. This panel includes a collection of workspaces, documents, and recently closed views @@ -681,7 +766,7 @@ export class CurrentUserUtils { if (doc["tabs-button-library"] === undefined) { const libraryStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces, documents, recentlyClosed, doc], { title: "Library", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({ @@ -701,6 +786,7 @@ export class CurrentUserUtils { // setup the Search button which will display the search panel. static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) { + doc["tabs-button-search"] = undefined; if (doc["tabs-button-search"] === undefined) { doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({ _width: 50, _height: 25, title: "Search", _fontSize: "10pt", @@ -711,8 +797,9 @@ export class CurrentUserUtils { lockedPosition: true, onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel") })); + CurrentUserUtils.searchStack = new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc; } - return doc["tabs-button-search"] as Doc; + return doc["tabs-button-search"] as any as Doc; } static setupSidebarContainer(doc: Doc) { @@ -728,17 +815,17 @@ export class CurrentUserUtils { // setup the list of sidebar mode buttons which determine what is displayed in the sidebar static async setupSidebarButtons(doc: Doc) { const sidebarContainer = CurrentUserUtils.setupSidebarContainer(doc); - const toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer); - const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer); - const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer); + CurrentUserUtils.toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer); + CurrentUserUtils.libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer); + CurrentUserUtils.searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer); // Finally, setup the list of buttons to display in the sidebar if (doc["tabs-buttons"] === undefined) { - doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([libraryBtn, searchBtn, toolsBtn], { + doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([CurrentUserUtils.libraryBtn, CurrentUserUtils.searchBtn, CurrentUserUtils.toolsBtn], { _width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", _columnsHideIfEmpty: true, ignoreClick: true, _chromeStatus: "view-mode", title: "sidebar btn row stack", backgroundColor: "dimGray", })); - (toolsBtn.onClick as ScriptField).script.run({ this: toolsBtn }); + (CurrentUserUtils.toolsBtn.onClick as ScriptField).script.run({ this: CurrentUserUtils.toolsBtn }); } } @@ -749,7 +836,7 @@ export class CurrentUserUtils { })) as any as Doc static ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ - ...opts, dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 + ...opts, dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 40, _nativeHeight: 40, _width: 40, _height: 40 })) as any as Doc /// sets up the default list of buttons to be shown in the expanding button menu at the bottom of the Dash window @@ -855,6 +942,7 @@ export class CurrentUserUtils { this.setupDocTemplates(doc); // sets up the template menu of templates this.setupRightSidebar(doc); // sets up the right sidebar collection for mobile upload documents and sharing this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile + this.setupMenuPanel(doc); this.setupOverlays(doc); // documents in overlay layer this.setupDockedButtons(doc); // the bottom bar of font icons this.setupDefaultPresentation(doc); // presentation that's initially triggered diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss index 2fc27ed03..2eb164988 100644 --- a/src/client/util/GroupMemberView.scss +++ b/src/client/util/GroupMemberView.scss @@ -44,7 +44,7 @@ background: none; &:hover { - text-overflow: visible; + text-overflow: unset; overflow-x: auto; } } diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 20d881961..05ba00331 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -12,6 +12,7 @@ export namespace SelectionManager { @observable IsDragging: boolean = false; SelectedDocuments: ObservableMap = new ObservableMap(); + @action SelectDoc(docView: DocumentView, ctrlPressed: boolean): void { @@ -32,6 +33,7 @@ export namespace SelectionManager { } @action DeselectDoc(docView: DocumentView): void { + if (manager.SelectedDocuments.get(docView)) { manager.SelectedDocuments.delete(docView); docView.props.whenActiveChanged(false); @@ -40,6 +42,7 @@ export namespace SelectionManager { } @action DeselectAll(): void { + Array.from(manager.SelectedDocuments.keys()).map(dv => dv.props.whenActiveChanged(false)); manager.SelectedDocuments.clear(); Doc.UserDoc().activeSelection = new List([]); diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index 5896bdf92..000b3e46c 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -72,8 +72,6 @@ export default class SharingManager extends React.Component<{}> { @observable private showUserOptions: boolean = false; // whether to show individuals as options when sharing (in the react-select component) @observable private showGroupOptions: boolean = false; // // whether to show groups as options when sharing (in the react-select component) - - // private get linkVisible() { // return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false; // } @@ -148,7 +146,7 @@ export default class SharingManager extends React.Component<{}> { const members: string[] = JSON.parse(StrCast(group.members)); const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email)); - const target = this.targetDoc!; + const target = targetDoc || this.targetDoc!; const ACL = `ACL-${StrCast(group.groupName)}`; target.author === Doc.CurrentUserEmail && distributeAcls(ACL, permission as SharingPermissions, target); @@ -222,7 +220,7 @@ export default class SharingManager extends React.Component<{}> { setInternalSharing = (recipient: ValidatedUser, permission: string) => { const { user, notificationDoc } = recipient; - const target = this.targetDoc!; + const target = targetDoc || this.targetDoc!; const key = user.email.replace('.', '_'); const ACL = `ACL-${key}`; diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index 81432968d..7e233ec04 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -80,7 +80,7 @@ export class ContextMenuItem extends React.Component +
{this.props.icon ? ( @@ -95,7 +95,7 @@ export class ContextMenuItem extends React.Component window.innerHeight * 2 / 3 ? "flex-end" : "center"; const marginTop = !this.overItem ? "" : this._overPosY < window.innerHeight / 3 ? "20px" : this._overPosY > window.innerHeight * 2 / 3 ? "-20px" : ""; const submenu = !this.overItem ? (null) : -
+
{this._items.map(prop => )}
; if (!("noexpand" in this.props)) { diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 6b85616c2..23a3e1684 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -281,7 +281,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV {DocumentLinksButton.StartLink ?
: null} -
+ {/*
{this.templateButton}
@@ -289,16 +289,16 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
{this.contextButton} -
+
*/}
{this.pinButton}
-
+ {/*
{this.considerGoogleDocsPush}
{this.considerGoogleDocsPull} -
+
*/}
; } } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 7fc4a5c99..dd5303904 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,5 +1,5 @@ import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; -import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes, faAngleLeft, faAngleRight, faAngleDoubleLeft, faAngleDoubleRight, faPause } from '@fortawesome/free-solid-svg-icons'; +import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes, faAngleLeft, faAngleRight, faAngleDoubleLeft, faAngleDoubleRight, faPause, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable, reaction, runInAction, get } from "mobx"; import { observer } from "mobx-react"; @@ -47,6 +47,7 @@ library.add(faAngleDoubleRight); library.add(faAngleLeft); library.add(faAngleRight); library.add(faPause); +library.add(faExternalLinkAlt); @observer export class DocumentDecorations extends React.Component<{}, { value: string }> { @@ -533,12 +534,12 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> const ink = Cast(doc.data, InkField)?.inkData; if (ink) { const newPoints: { X: number, Y: number }[] = []; - for (var i = 0; i < ink.length; i++) { + ink.forEach(i => { // (new x — oldx) + (oldxpoint * newWidt)/oldWidth - const newX = (doc.x - this._inkDocs[index].x) + (ink[i].X * doc._width) / this._inkDocs[index].width; - const newY = (doc.y - this._inkDocs[index].y) + (ink[i].Y * doc._height) / this._inkDocs[index].height; + const newX = ((doc.x || 0) - this._inkDocs[index].x) + (i.X * (doc._width || 0)) / this._inkDocs[index].width; + const newY = ((doc.y || 0) - this._inkDocs[index].y) + (i.Y * (doc._height || 0)) / this._inkDocs[index].height; newPoints.push({ X: newX, Y: newY }); - } + }); doc.data = new InkField(newPoints); } @@ -617,9 +618,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
} : <> - {minimal ? (null) :
Show context menu
} placement="top">
- -
} + {/* {minimal ? (null) :
Show context menu
} placement="top">
+ +
} */}
{`${this.selectionTitle}`}
@@ -666,7 +667,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> {"_"} }
Open Document In Tab
} placement="top">
- {SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."} + {SelectionManager.SelectedDocuments().length === 1 ? : "..."}
⟲
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index c7b149842..f9d060681 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -191,7 +191,7 @@ export class EditableView extends React.Component { return (this.props.contents instanceof ObjectField ? (null) :
{ return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); } @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; } + @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"]; + @observable public panelContent: string = "none"; + @observable public showProperties: boolean = false; public isPointerDown = false; + @computed get selectedDocumentView() { + if (SelectionManager.SelectedDocuments().length) { + return SelectionManager.SelectedDocuments()[0]; + } else { return undefined; } + } + + @observable _propertiesWidth: number = 0; + propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, this._propertiesWidth)); + + @computed get propertiesIcon() { + if (this.propertiesWidth() < 10) { + return "chevron-left"; + } else { + return "chevron-right"; + } + } + @observable propertiesDownX: number | undefined; componentDidMount() { DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType", "_chromeStatus"]); // can play with these fields on someone else's @@ -148,7 +171,10 @@ export class MainView extends React.Component { fa.faEye, fa.faArrowsAlt, fa.faQuoteLeft, fa.faSortAmountDown, fa.faAlignLeft, fa.faAlignCenter, fa.faAlignRight, fa.faHeading, fa.faRulerCombined, fa.faFillDrip, fa.faLink, fa.faUnlink, fa.faBold, fa.faItalic, fa.faChevronLeft, fa.faUnderline, fa.faStrikethrough, fa.faSuperscript, fa.faSubscript, fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper, - fa.faBezierCurve, fa.faCircle, fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, fa.faAngleUp, fa.faAngleDown, fa.faPlayCircle, fa.faClock, + fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle, + fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH); + //Pres trail icons (just for the sake of merging) + library.add(fa.faAngleUp, fa.faAngleDown, fa.faPlayCircle, fa.faClock, fa.faRocket, fa.faExchangeAlt, faBuffer); this.initEventListeners(); this.initAuthenticationRouters(); @@ -211,7 +237,7 @@ export class MainView extends React.Component { const freeformOptions: DocumentOptions = { x: 0, y: 400, - _width: this._panelWidth * .7, + _width: this._panelWidth * .7 - this.propertiesWidth(), _height: this._panelHeight, title: "Collection " + workspaceCount, }; @@ -277,16 +303,21 @@ export class MainView extends React.Component { @action onResize = (r: any) => { - this._panelWidth = r.offset.width; + this._panelWidth = r.offset.width;// - this.propertiesWidth(); this._panelHeight = r.offset.height; } - getPWidth = () => this._panelWidth; + + @action + getPWidth = () => this._panelWidth - this.propertiesWidth() + getPHeight = () => this._panelHeight; getContentsHeight = () => this._panelHeight - this._buttonBarHeight; - defaultBackgroundColors = (doc: Doc) => { + defaultBackgroundColors = (doc: Opt) => { + if (this.panelContent === doc?.title) return "lightgrey"; if (this.darkScheme) { switch (doc?.type) { + case DocumentType.MENUICON: return "white"; case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d"; case DocumentType.LINK: case DocumentType.COL: { @@ -296,6 +327,7 @@ export class MainView extends React.Component { } } else { switch (doc?.type) { + case DocumentType.MENUICON: return "black"; case DocumentType.RTF: return "#f1efeb"; case DocumentType.BUTTON: case DocumentType.LABEL: return "lightgray"; @@ -308,7 +340,8 @@ export class MainView extends React.Component { } } @computed get mainDocView() { - return ; } @computed get dockingContent() { TraceMobx(); const mainContainer = this.mainContainer; const width = this.flyoutWidth; - return - {({ measureRef }) => -
- {!mainContainer ? (null) : this.mainDocView} -
- } - ; - } - - _canClick = false; - onPointerDown = (e: React.PointerEvent) => { - if (this._flyoutTranslate) { - this._canClick = true; - this._flyoutSizeOnDown = e.clientX; - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointerup", this.onPointerUp); - e.stopPropagation(); - e.preventDefault(); - } + return
+ {!mainContainer ? (null) : this.mainDocView} +
; } @action - pointerLeaveDragger = () => { - if (!this._flyoutTranslate) { - this.flyoutWidth = 0; - this._flyoutTranslate = true; - } + onPropertiesPointerDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { + this._propertiesWidth = this._panelWidth - e.clientX; + return false; + }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false); } @action - onPointerMove = (e: PointerEvent) => { - this.flyoutWidth = Math.max(e.clientX, 0); - Math.abs(this.flyoutWidth - this._flyoutSizeOnDown) > 6 && (this._canClick = false); - this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30; - } - @action - onPointerUp = (e: PointerEvent) => { - if (Math.abs(e.clientX - this._flyoutSizeOnDown) < 4 && this._canClick) { - this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0; - this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30); + onFlyoutPointerDown = (e: React.PointerEvent) => { + this.panelContent = "none"; + if (this._flyoutTranslate) { + setupMoveUpEvents(this, e, action((e: PointerEvent) => { + this.flyoutWidth = Math.max(e.clientX, 0); + this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30; + return false; + }), emptyFunction, action(() => { + this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0; + this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30); + })); } - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); } + flyoutWidthFunc = () => this.flyoutWidth; addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => { return where === "close" ? CollectionDockingView.CloseRightSplit(doc) : doc.dockingConfig ? this.openWorkspace(doc) : CollectionDockingView.AddRightSplit(doc, libraryPath); } - sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1); + sidebarScreenToLocal = () => new Transform(0, (CollectionMenu.Instance.Pinned ? -35 : 0), 1); + //sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1); mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight); + @computed get closePosition() { return 55 + this.flyoutWidth; } @computed get flyout() { - const sidebarContent = this.userDoc?.["tabs-panelContainer"]; - if (!(sidebarContent instanceof Doc)) { - return (null); - } - return
-
- -
-
+ if (!this.sidebarContent) return null; + return
+
+ {this.flyoutWidth > 0 ?
+ +
: null} + -
- -
+ ContainingCollectionDoc={undefined} + relative={true} + />
- {this.docButtons} + {this.docButtons}
; + } + + @computed get menuPanel() { + + return
+ 70} + PanelHeight={this.getContentsHeight} + renderDepth={0} + focus={emptyFunction} + backgroundColor={this.defaultBackgroundColors} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + docFilters={returnEmptyFilter} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + relative={true} + scriptContext={this} + /> +
; + } + + + @action @undoBatch + closeFlyout = () => { + this.panelContent = "none"; + this.flyoutWidth = 0; + } + + get groupManager() { return GroupManager.Instance; } + + @action @undoBatch + selectMenu = (str: string) => { + if (this.panelContent === str && this.flyoutWidth !== 0) { + this.panelContent = "none"; + this.flyoutWidth = 0; + } else { + this.panelContent = str; + switch (this.panelContent) { + case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break; + case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break; + case "Catalog": this.sidebarContent.proto = CurrentUserUtils.catalogStack; break; + case "Archive": this.sidebarContent.proto = CurrentUserUtils.closedStack; break; + case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break; + case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break; + } + if (str === "Settings" || str === "Sharing" || str === "Help") { + this.panelContent = "none"; + this.flyoutWidth = 0; + } else { + MainView.expandFlyout(); + } + } + return true; + } + + @action @undoBatch + closeProperties = () => { + this._propertiesWidth = 0; + } + + @computed get propertiesView() { + TraceMobx(); + return
+
; } + @computed get mainInnerContent() { + const rightFlyout = this.propertiesWidth() - 1; + return <> + {this.menuPanel} +
+
+ {this.flyoutWidth !== 0 ?
+ +
+
+
: null} +
+ {this.flyout} + {this.expandButton} +
+
+ {this.dockingContent} + {this.showProperties ? (null) : +
+
+
+
+ } + {this.propertiesWidth() < 10 ? (null) : +
{this.propertiesView}
} +
+ ; + } + @computed get mainContent() { - const sidebar = this.userDoc?.["tabs-panelContainer"]; - const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); + //const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); + const n = (CollectionMenu.Instance?.Pinned ? 1 : 0); const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; - return !this.userDoc || !(sidebar instanceof Doc) ? (null) : ( -
-
-
-
- -
-
- {this.flyout} - {this.expandButton} -
+ const pinned = FormatShapePane.Instance?.Pinned; + const innerContent = this.mainInnerContent; + return !this.userDoc ? (null) : ( + + {({ measureRef }) => +
+ {innerContent}
- {this.dockingContent} -
-
); + } + ); } public static expandFlyout = action(() => { @@ -506,7 +608,7 @@ export class MainView extends React.Component { }); @computed get expandButton() { - return !this._flyoutTranslate ? (
) : (null); + return !this._flyoutTranslate ? (
) : (null); } addButtonDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => flg && Doc.AddDocToList(Doc.UserDoc().dockedBtns as Doc, "data", doc), true); @@ -600,8 +702,16 @@ export class MainView extends React.Component { ; } + @computed get search() { + return
+
{Doc.CurrentUserEmail}
+
SEARCH GOES HERE
+
; + } + render() { return (
+ {this.inkResources} @@ -610,9 +720,10 @@ export class MainView extends React.Component { + {/* {this.search} */} - +
{LinkDescriptionPopup.descriptionPopup ? : null} {DocumentLinksButton.EditLink ? : (null)} {LinkDocPreview.LinkInfo ? { } else if (e.clipboardData.items.length) { const batch = UndoManager.StartBatch("collection view drop"); const files: File[] = []; - for (let i = 0; i < e.clipboardData.items.length; i++) { - const file = e.clipboardData.items[i].getAsFile(); + Array.from(e.clipboardData.items).forEach(item => { + const file = item.getAsFile(); file && files.push(file); - } + }); const generatedDocuments = await DocUtils.uploadFilesToDocs(files, { x: newPoint[0], y: newPoint[1] }); generatedDocuments.forEach(PreviewCursor._addDocument); batch.end(); diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss new file mode 100644 index 000000000..e099122c4 --- /dev/null +++ b/src/client/views/PropertiesButtons.scss @@ -0,0 +1,119 @@ +@import "globalCssVariables"; + +$linkGap : 3px; + +.propertiesButtons-linkFlyout { + grid-column: 2/4; +} + +.propertiesButtons-linkButton-empty:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; +} + +.propertiesButtons-linkButton-nonempty:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; +} + +.propertiesButtons-linkButton-empty, +.propertiesButtons-linkButton-nonempty { + height: 30px; + width: 30px; + border-radius: 5px; + opacity: 0.9; + pointer-events: auto; + background-color: #121721; + color: #fcfbf7; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + transition: transform 0.2s; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + margin-right: 10px; + + &:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; + } +} + +.propertiesButtons { + margin-top: $linkGap; + grid-column: 1/4; + width: max-content; + height: auto; + display: flex; + flex-direction: row; + overflow-x: visible; +} + +.onClickFlyout-editScript { + text-align: center; + border: 0.5px solid grey; + background-color: rgb(230, 230, 230); + border-radius: 9px; + padding: 4px; +} + + +.propertiesButtons-button { + pointer-events: auto; + padding-right: 5px; + width: 25px; + border-radius: 5px; + margin-right: 18px; +} + +.propertiesButtons-linker { + height: 30px; + width: 30px; + text-align: center; + border-radius: 5px; + pointer-events: auto; + color: $dark-color; + border: $dark-color 1px solid; + transition: 0.2s ease all; + margin-right: 5px; +} + +.propertiesButtons-linker:hover { + cursor: pointer; + transform: scale(1.05); +} + + +@-moz-keyframes spin { + 100% { + -moz-transform: rotate(360deg); + } +} + +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + } +} + +@keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes shadow-pulse { + 0% { + box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.8); + } + + 100% { + box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); + } +} \ No newline at end of file diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx new file mode 100644 index 000000000..59e7cc7c8 --- /dev/null +++ b/src/client/views/PropertiesButtons.tsx @@ -0,0 +1,598 @@ +import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; +import { faArrowAltCircleDown, faArrowAltCircleRight, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faPhotoVideo, faShare, faStopCircle, faSyncAlt, faTag, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { action, computed, observable, runInAction } from "mobx"; +import { observer } from "mobx-react"; +import { Doc, DocListCast } from "../../fields/Doc"; +import { RichTextField } from '../../fields/RichTextField'; +import { Cast, NumCast, BoolCast } from "../../fields/Types"; +import { emptyFunction, setupMoveUpEvents, Utils } from "../../Utils"; +import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; +import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils'; +import { Docs, DocUtils } from '../documents/Documents'; +import { DragManager } from '../util/DragManager'; +import { CollectionDockingView, DockedFrameRenderer } from './collections/CollectionDockingView'; +import { ParentDocSelector } from './collections/ParentDocumentSelector'; +import './collections/ParentDocumentSelector.scss'; +import './PropertiesButtons.scss'; +import { MetadataEntryMenu } from './MetadataEntryMenu'; +import { DocumentView } from './nodes/DocumentView'; +import { GoogleRef } from "./nodes/formattedText/FormattedTextBox"; +import { TemplateMenu } from "./TemplateMenu"; +import { Template, Templates } from "./Templates"; +import React = require("react"); +import { Tooltip } from '@material-ui/core'; +import { SelectionManager } from '../util/SelectionManager'; +import SharingManager from '../util/SharingManager'; +import { GooglePhotos } from '../apis/google_docs/GooglePhotosClientUtils'; +import { ImageField } from '../../fields/URLField'; +import { undoBatch, UndoManager } from '../util/UndoManager'; +import { DocumentType } from '../documents/DocumentTypes'; +import { CollectionFreeFormView } from './collections/collectionFreeForm/CollectionFreeFormView'; +const higflyout = require("@hig/flyout"); +export const { anchorPoints } = higflyout; +export const Flyout = higflyout.default; + +library.add(faLink); +library.add(faTag); +library.add(faTimes); +library.add(faArrowAltCircleDown); +library.add(faArrowAltCircleUp); +library.add(faArrowAltCircleRight); +library.add(faStopCircle); +library.add(faCheckCircle); +library.add(faCloudUploadAlt); +library.add(faSyncAlt); +library.add(faShare); +library.add(faPhotoVideo); + +const cloud: IconProp = "cloud-upload-alt"; +const fetch: IconProp = "sync-alt"; + +enum UtilityButtonState { + Default, + OpenRight, + OpenExternally +} + +@observer +export class PropertiesButtons extends React.Component<{}, {}> { + private _dragRef = React.createRef(); + private _pullAnimating = false; + private _pushAnimating = false; + private _pullColorAnimating = false; + + @observable private pushIcon: IconProp = "arrow-alt-circle-up"; + @observable private pullIcon: IconProp = "arrow-alt-circle-down"; + @observable private pullColor: string = "white"; + @observable public isAnimatingFetch = false; + @observable public isAnimatingPulse = false; + + @observable private openHover: UtilityButtonState = UtilityButtonState.Default; + + @observable public static Instance: PropertiesButtons; + public static hasPushedHack = false; + public static hasPulledHack = false; + + + @computed get selectedDocumentView() { + if (SelectionManager.SelectedDocuments().length) { + return SelectionManager.SelectedDocuments()[0]; + } else { return undefined; } + } + @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } + @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } + + @computed get onClick() { return this.selectedDoc?.onClickBehavior ? this.selectedDoc?.onClickBehavior : "nothing"; } + + public startPullOutcome = action((success: boolean) => { + if (!this._pullAnimating) { + this._pullAnimating = true; + this.pullIcon = success ? "check-circle" : "stop-circle"; + setTimeout(() => runInAction(() => { + this.pullIcon = "arrow-alt-circle-down"; + this._pullAnimating = false; + }), 1000); + } + }); + + public startPushOutcome = action((success: boolean) => { + this.isAnimatingPulse = false; + if (!this._pushAnimating) { + this._pushAnimating = true; + this.pushIcon = success ? "check-circle" : "stop-circle"; + setTimeout(() => runInAction(() => { + this.pushIcon = "arrow-alt-circle-up"; + this._pushAnimating = false; + }), 1000); + } + }); + + public setPullState = action((unchanged: boolean) => { + this.isAnimatingFetch = false; + if (!this._pullColorAnimating) { + this._pullColorAnimating = true; + this.pullColor = unchanged ? "lawngreen" : "red"; + setTimeout(this.clearPullColor, 1000); + } + }); + + private clearPullColor = action(() => { + this.pullColor = "white"; + this._pullColorAnimating = false; + }); + + @computed + get considerGoogleDocsPush() { + const targetDoc = this.selectedDoc; + const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined; + const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none"; + return !targetDoc ? (null) :
{`${published ? "Push" : "Publish"} to Google Docs`}
}> +
{ + await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(); + !published && runInAction(() => this.isAnimatingPulse = true); + PropertiesButtons.hasPushedHack = false; + targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1; + }}> + +
; + } + + @computed + get considerGoogleDocsPull() { + const targetDoc = this.selectedDoc; + const dataDoc = targetDoc && Doc.GetProto(targetDoc); + const animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none"; + + const title = (() => { + switch (this.openHover) { + default: + case UtilityButtonState.Default: return `${!dataDoc?.unchanged ? "Pull from" : "Fetch"} Google Docs`; + case UtilityButtonState.OpenRight: return "Open in Right Split"; + case UtilityButtonState.OpenExternally: return "Open in new Browser Tab"; + } + })(); + + return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) :
{title}
}> +
{ + if (e.altKey) { + this.openHover = UtilityButtonState.OpenExternally; + } else if (e.shiftKey) { + this.openHover = UtilityButtonState.OpenRight; + } + })} + onPointerLeave={action(() => this.openHover = UtilityButtonState.Default)} + onClick={async e => { + const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`; + if (e.shiftKey) { + e.preventDefault(); + let googleDoc = await Cast(dataDoc.googleDoc, Doc); + if (!googleDoc) { + const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, UseCors: false }; + googleDoc = Docs.Create.WebDocument(googleDocUrl, options); + dataDoc.googleDoc = googleDoc; + } + CollectionDockingView.AddRightSplit(googleDoc); + } else if (e.altKey) { + e.preventDefault(); + window.open(googleDocUrl); + } else { + this.clearPullColor(); + PropertiesButtons.hasPulledHack = false; + targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1; + dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true); + } + }}> + { + switch (this.openHover) { + default: + case UtilityButtonState.Default: return dataDoc.unchanged === false ? (this.pullIcon as any) : fetch; + case UtilityButtonState.OpenRight: return "arrow-alt-circle-right"; + case UtilityButtonState.OpenExternally: return "share"; + } + })()} + /> +
; + } + @computed + get pinButton() { + const targetDoc = this.selectedDoc; + const isPinned = targetDoc && Doc.isDocPinned(targetDoc); + return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}> +
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> + +
; + } + + @computed + get metadataButton() { + //const view0 = this.view0; + if (this.selectedDoc) { + return
Show metadata panel
}> +
+ /* tfs: @bcz This might need to be the data document? */}> +
e.stopPropagation()} > + {} +
+ +
; + } else { + return null; + } + + } + + @observable _aliasDown = false; + onAliasButtonDown = (e: React.PointerEvent): void => { + setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction); + } + onAliasButtonMoved = () => { + if (this._dragRef.current) { + const dragDocView = this.selectedDocumentView!; + const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]); + const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + dragData.dropAction = "alias"; + DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, { + offsetX: dragData.offset[0], + offsetY: dragData.offset[1], + hideSource: false + }); + return true; + } + return false; + } + + @computed + get templateButton() { + const docView = this.selectedDocumentView; + const templates: Map = new Map(); + const views = [this.selectedDocumentView]; + Array.from(Object.values(Templates.TemplateList)).map(template => + templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean))); + return !docView ? (null) : +
Customize layout
}> +
+ this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} + content={ v).map(v => v as DocumentView)} templates={templates} />}> +
+ {} +
+ +
; + } + + onCopy = () => { + if (this.selectedDoc && this.selectedDocumentView) { + const copy = Doc.MakeCopy(this.selectedDocumentView.props.Document, true); + copy.x = NumCast(this.selectedDoc.x) + NumCast(this.selectedDoc._width); + copy.y = NumCast(this.selectedDoc.y) + 30; + this.selectedDocumentView.props.addDocument?.(copy); + } + } + + @computed + get copyButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Tap or Drag to create an alias"}
}> +
+ {} +
+ ; + } + + @action + onLock = () => { + this.selectedDocumentView?.toggleLockPosition(); + } + + @computed + get lockButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{this.selectedDoc?.lockedPosition ? + "Unlock Position" : "Lock Position"}
}> +
+ {} +
+ ; + } + + @computed + get downloadButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Download Document"}
}> +
{ + if (this.selectedDocumentView?.props.Document) { + Doc.Zip(this.selectedDocumentView?.props.Document); + } + }}> + {} +
+ ; + } + + @computed + get deleteButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Delete Document"}
}> +
{ + this.selectedDocumentView?.props.ContainingCollectionView?.removeDocument(this.selectedDocumentView?.props.Document); + }}> + {} +
+ ; + } + + @computed + get sharingButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Share Document"}
}> +
{ + if (this.selectedDocumentView) { + SharingManager.Instance.open(this.selectedDocumentView); + } + }}> + {} +
+ ; + } + + @computed + get onClickButton() { + if (this.selectedDoc) { + return
Choose onClick behavior
}> +
+ +
e.stopPropagation()} > + {} +
+ +
; + } else { + return null; + } + } + + @action + handleOptionChange = (e: any) => { + const value = e.target.value; + this.selectedDoc && (this.selectedDoc.onClickBehavior = e.target.value); + if (value === "nothing") { + this.selectedDocumentView?.noOnClick(); + } else if (value === "enterPortal") { + this.selectedDocumentView?.noOnClick(); + this.selectedDocumentView?.makeIntoPortal(); + } else if (value === "toggleDetail") { + this.selectedDocumentView?.noOnClick(); + this.selectedDocumentView?.toggleDetail(); + } else if (value === "linkInPlace") { + this.selectedDocumentView?.noOnClick(); + this.selectedDocumentView?.toggleFollowLink("inPlace", true, false); + } else if (value === "linkOnRight") { + this.selectedDocumentView?.noOnClick(); + this.selectedDocumentView?.toggleFollowLink("onRight", false, false); + } + } + + @undoBatch @action + editOnClickScript = () => { + if (this.selectedDoc) { + DocUtils.makeCustomViewClicked(this.selectedDoc, undefined, "onClick"); + } + } + + @computed + get onClickFlyout() { + return
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
Edit onClick Script
+
; + } + + @computed + get googlePhotosButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{"Export to Google Photos"}
}> +
{ + if (this.selectedDocumentView) { + GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log); + } + }}> + {} +
+ ; + } + + @computed + get clustersButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}
}> +
+ {} +
+ ; + } + + @action @undoBatch + changeFitToBox = () => { + this.selectedDoc && (this.selectedDoc._fitToBox = !this.selectedDoc._fitToBox); + } + + @action @undoBatch + changeClusters = () => { + this.selectedDoc && (this.selectedDoc.useClusters = !this.selectedDoc.useClusters); + } + + @computed + get fitContentButton() { + const targetDoc = this.selectedDoc; + return !targetDoc ? (null) :
{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}
}> +
+ {} +
+ ; + } + + // @computed + // get importButton() { + // const targetDoc = this.selectedDoc; + // return !targetDoc ? (null) :
{"Import a Document"}
}> + //
{ + // if (this.selectedDocumentView) { + // CollectionFreeFormView.importDocument(100, 100); + // } + // }}> + // {} + //
+ // ; + // } + + + render() { + if (!this.selectedDoc) return (null); + + const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField; + const considerPull = isText && this.considerGoogleDocsPull; + const considerPush = isText && this.considerGoogleDocsPush; + const isImage = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof ImageField; + const isCollection = this.selectedDoc.type === DocumentType.COL ? true : false; + const isFreeForm = this.selectedDoc._viewType === "freeform" ? true : false; + + return
+
+ {this.templateButton} +
+ {/*
+ {this.metadataButton} +
*/} +
+ {this.pinButton} +
+
+ {this.copyButton} +
+
+ {this.lockButton} +
+
+ {this.downloadButton} +
+
+
+
+ {this.deleteButton} +
+
+ {this.onClickButton} +
+
+ {this.sharingButton} +
+
+ {this.considerGoogleDocsPush} +
+
+ {this.considerGoogleDocsPull} +
+
+ {this.googlePhotosButton} +
+ {/*
+ {this.importButton} +
*/} + +
+ {this.clustersButton} +
+ +
+ {this.fitContentButton} +
+ +
+
; + } +} diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 9b14df760..6d93b2ba8 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -12,6 +12,7 @@ width: 100%; height: 100%; position: absolute; + .miniThumb { background: #25252525; position: absolute; @@ -89,6 +90,7 @@ transform: translate(0px, -3px); cursor: grab; } + .lm_title.focus-visible { cursor: text; } @@ -96,23 +98,25 @@ .lm_title_wrap { overflow: hidden; height: 19px; - margin-top: -3px; - display:inline-block; + margin-top: -2px; + display: inline-block; } + .lm_active .lm_title { border: solid 1px lightgray; } + .lm_header .lm_tab .lm_close_tab { position: absolute; text-align: center; } .lm_header .lm_tab { - padding-right : 20px; + padding-right: 20px; } .lm_popout { - display:none; + display: none; } .messageCounter { @@ -135,6 +139,7 @@ position: absolute; top: 0; left: 0; + // overflow: hidden; // bcz: menus don't show up when this is on (e.g., the parentSelectorMenu) .collectionDockingView-gear { padding-left: 5px; @@ -142,7 +147,10 @@ width: 18px; display: inline-block; margin: auto; + + display: none; } + .collectionDockingView-dragAsDocument { touch-action: none; position: absolute; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index f658e9816..d685fac4e 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -1,9 +1,8 @@ import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; -import { action, computed, Lambda, observable, reaction, runInAction, trace } from "mobx"; +import { action, computed, Lambda, observable, reaction, runInAction, trace, IReactionDisposer } from "mobx"; import { observer } from "mobx-react"; import * as ReactDOM from 'react-dom'; -import Measure from "react-measure"; import * as GoldenLayout from "../../../client/goldenLayout"; import { DateField } from '../../../fields/DateField'; import { Doc, DocListCast, Field, Opt, DataSym } from "../../../fields/Doc"; @@ -507,7 +506,6 @@ export class CollectionDockingView extends React.Component`; tab.titleElement[0].onclick = (e: any) => tab.titleElement[0].focus(); tab.titleElement[0].onchange = (e: any) => { tab.titleElement[0].size = e.currentTarget.value.length + 1; @@ -522,6 +520,10 @@ export class CollectionDockingView extends React.Component { + const view = DocumentManager.Instance.getDocumentView(doc); + view && SelectionManager.SelectDoc(view, false); + }; // shifts the focus to this tab when another tab is dragged over it tab.element[0].onmouseenter = (e: any) => { if (!this._isPointerDown || !SnappingManager.GetIsDragging()) return; @@ -676,10 +678,15 @@ export class DockedFrameRenderer extends React.Component { @observable private _panelHeight = 0; @observable private _document: Opt; @observable private _isActive: boolean = false; + _tabReaction: IReactionDisposer | undefined; get _stack(): any { return (this.props as any).glContainer.parent.parent; } + get _tab(): any { + const tab = (this.props as any).glContainer.tab.element[0] as HTMLElement; + return tab.getElementsByClassName("lm_title")?.[0]; + } constructor(props: any) { super(props); DocServer.GetRefField(this.props.documentId).then(action((f: Opt) => this._document = f as Doc)); @@ -740,9 +747,16 @@ export class DockedFrameRenderer extends React.Component { this.props.glContainer.layoutManager.on("activeContentItemChanged", this.onActiveContentItemChanged); this.props.glContainer.on("tab", this.onActiveContentItemChanged); this.onActiveContentItemChanged(); + this._tabReaction = reaction(() => ({ views: SelectionManager.SelectedDocuments(), color: StrCast(this._document?._backgroundColor, "white") }), + (data) => { + const selected = data.views.some(v => Doc.AreProtosEqual(v.props.Document, this._document)); + this._tab.style.backgroundColor = selected ? data.color : ""; + } + ); } componentWillUnmount() { + this._tabReaction?.(); this.props.glContainer.layoutManager.off("activeContentItemChanged", this.onActiveContentItemChanged); this.props.glContainer.off("tab", this.onActiveContentItemChanged); } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 0ca86172f..fdd1b4e81 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -25,6 +25,8 @@ import { SelectionManager } from "../../util/SelectionManager"; import { DocumentView } from "../nodes/DocumentView"; import { ColorState } from "react-color"; import { ObjectField } from "../../../fields/ObjectField"; +import RichTextMenu from "../nodes/formattedText/RichTextMenu"; +import { RichTextField } from "../../../fields/RichTextField"; import { ScriptField } from "../../../fields/ScriptField"; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { DocUtils } from "../../documents/Documents"; @@ -47,7 +49,7 @@ export default class CollectionMenu extends AntimodeMenu { componentDidMount() { reaction(() => SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0], - (doc) => doc && this.SetSelection(doc)) + (doc) => doc && this.SetSelection(doc)); } @action @@ -160,7 +162,8 @@ export class CollectionViewBaseChrome extends React.Component { button['target-docFilters'] = this.target._docFilters instanceof ObjectField ? ObjectField.MakeCopy(this.target._docFilters as any as ObjectField) : ""; }, }; - _freeform_commands = [this._viewCommand, this._saveFilterCommand, this._fitContentCommand, this._clusterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; + @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; } + _stacking_commands = [this._contentCommand, this._templateCommand]; _masonry_commands = [this._contentCommand, this._templateCommand]; _schema_commands = [this._templateCommand, this._narrativeCommand]; @@ -308,18 +311,32 @@ export class CollectionViewBaseChrome extends React.Component; } + @computed get selectedDocumentView() { + if (SelectionManager.SelectedDocuments().length) { + return SelectionManager.SelectedDocuments()[0]; + } else { return undefined; } + } + @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } + @computed get isText() { + if (this.selectedDoc) { + return this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField; + } + else return false; + } + render() { return (
- {this.props.type === CollectionViewType.Invalid || this.props.type === CollectionViewType.Docking ? (null) : this.viewModes} - {this.props.type === CollectionViewType.Docking ? (null) : this.templateChrome} -
+ {this.props.type === CollectionViewType.Invalid || + this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.viewModes} + {this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.templateChrome} + {/*
-
+
*/} {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) : ; + // return ; + return null; } render() { return !this.props.docView.layoutDoc ? (null) :
- {this.props.docView.props.renderDepth !== 0 ? (null) : + {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) :
} -
+ {!!!this.isText ?
-
-
: null} + {!!!this.isText ?
this.document.editing = !this.document.editing)} > {NumCast(this.document.currentFrame)} -
-
+
: null} + {!!!this.isText ?
-
+
: null} - {!this.props.isOverlay || this.document.type !== DocumentType.WEB ? (null) : + {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) : } - {!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating ? + {(!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating) && !this.isText ? <> {this.drawButtons} {this.widthPicker} @@ -566,6 +602,7 @@ export class CollectionFreeFormViewChrome extends React.Component : (null) } + {this.isText ? : null}
; } } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 5553bbbb7..f67e049fd 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -253,7 +253,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
this.typesDropdownChange(!this._openTypes)}> - +
{this._openTypes ? allColumnTypes : justColType}
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 425dc90e4..a104ac011 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -227,6 +227,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) addDocTab={this.addDocTab} bringToFront={returnFalse} ContentScaling={returnOne} + scriptContext={this.props.scriptContext} pinToPres={this.props.pinToPres} />; } diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 26d2ee8a3..68c233a16 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -351,7 +351,7 @@ export class CollectionStackingViewFieldColumn extends React.Component +
(schemaCtor: (doc: Doc) => T, moreProps?: const reg = new RegExp(Utils.prepend(""), "g"); const modHtml = srcUrl ? html.replace(reg, srcUrl) : html; const htmlDoc = Docs.Create.HtmlDocument(modHtml, { ...options, title: "-web page-", _width: 300, _height: 300 }); - Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc)["text"] = text; + Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc).text = text; this.props.addDocument(htmlDoc); if (srcWeb) { const focusNode = (SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")[0].contentDocument?.getSelection()?.focusNode as any); diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index b8996c178..e5c4b9187 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -90,7 +90,10 @@ class TreeView extends React.Component { get displayName() { return "TreeView(" + this.doc.title + ")"; } // this makes mobx trace() statements more descriptive get defaultExpandedView() { return this.childDocs ? this.fieldKey : StrCast(this.doc.defaultExpandedView, this.noviceMode ? "layout" : "fields"); } @observable _overrideTreeViewOpen = false; // override of the treeViewOpen field allowing the display state to be independent of the document's state - set treeViewOpen(c: boolean) { if (this.props.treeViewPreventOpen) this._overrideTreeViewOpen = c; else this.doc.treeViewOpen = this._overrideTreeViewOpen = c; } + set treeViewOpen(c: boolean) { + if (this.props.treeViewPreventOpen) this._overrideTreeViewOpen = c; + else this.doc.treeViewOpen = this._overrideTreeViewOpen = c; + } @computed get treeViewOpen() { return (!this.props.treeViewPreventOpen && !this.doc.treeViewPreventOpen && BoolCast(this.doc.treeViewOpen)) || this._overrideTreeViewOpen; } @computed get treeViewExpandedView() { return StrCast(this.doc.treeViewExpandedView, this.defaultExpandedView); } @computed get MAX_EMBED_HEIGHT() { return NumCast(this.props.containingCollection.maxEmbedHeight, 200); } @@ -101,7 +104,7 @@ class TreeView extends React.Component { const layout = Doc.LayoutField(this.doc) instanceof Doc ? Doc.LayoutField(this.doc) as Doc : undefined; return ((this.props.dataDoc ? DocListCast(this.props.dataDoc[field]) : undefined) || // if there's a data doc for an expanded template, use it's data field (layout ? DocListCast(layout[field]) : undefined) || // else if there's a layout doc, display it's fields - DocListCast(this.doc[field])) as Doc[]; // otherwise use the document's data field + DocListCast(this.doc[field])); // otherwise use the document's data field } @computed get childDocs() { return this.childDocList(this.fieldKey); } @computed get childLinks() { return this.childDocList("links"); } diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss index b630f9cf8..a5aef86de 100644 --- a/src/client/views/collections/CollectionView.scss +++ b/src/client/views/collections/CollectionView.scss @@ -24,6 +24,7 @@ border-right: unset; z-index: 2; } + .collectionTimeView-treeView { display: flex; flex-direction: column; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 7e7ea6786..62e8dc26a 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -78,6 +78,7 @@ export interface CollectionViewCustomProps { childLayoutTemplate?: () => Opt; // specify a layout Doc template to use for children of the collection childLayoutString?: string; // specify a layout string to use for children of the collection childOpacity?: () => number; + hideFilter?: true; } export interface CollectionRenderProps { @@ -309,7 +310,7 @@ export class CollectionView extends Touchable this.props.Document.forceActive = !this.props.Document.forceActive, icon: "project-diagram" }); + !Doc.UserDoc().noviceMode ? optionItems.splice(0, 0, { description: `${this.props.Document.forceActive ? "Select" : "Force"} Contents Active`, event: () => this.props.Document.forceActive = !this.props.Document.forceActive, icon: "project-diagram" }) : null; if (this.props.Document.childLayout instanceof Doc) { optionItems.push({ description: "View Child Layout", event: () => this.props.addDocTab(this.props.Document.childLayout as Doc, "onRight"), icon: "project-diagram" }); } @@ -368,7 +369,7 @@ export class CollectionView extends Touchable this.props.PanelWidth() - this.facetWidth(); + bodyPanelWidth = () => this.props.PanelWidth(); facetWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._facetWidth)); @computed get dataDoc() { @@ -490,6 +491,7 @@ export class CollectionView extends Touchable this._facetWidth = this.facetWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0), false); } + filterBackground = () => "rgba(105, 105, 105, 0.432)"; get ignoreFields() { return ["_docFilters", "_docRangeFilters"]; } // this makes the tree view collection ignore these filters (otherwise, the filters would filter themselves) @computed get scriptField() { @@ -559,6 +561,7 @@ export class CollectionView extends Touchable
; } + childLayoutTemplate = () => this.props.childLayoutTemplate?.() || Cast(this.props.Document.childLayoutTemplate, Doc, null); childLayoutString = this.props.childLayoutString || StrCast(this.props.Document.childLayoutString); @@ -588,11 +591,11 @@ export class CollectionView extends Touchable } - {this.facetWidth() < 10 ? (null) : this.filterView} + {this.facetWidth() < 10 ? (null) : this.filterView} */}
); } } diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx index 8c0b8de9d..532dd6abc 100644 --- a/src/client/views/collections/ParentDocumentSelector.tsx +++ b/src/client/views/collections/ParentDocumentSelector.tsx @@ -42,14 +42,14 @@ export class SelectorContextMenu extends React.Component { async fetchDocuments() { const aliases = (await SearchUtil.GetAliasesOfDocument(this.props.Document)); const containerProtoSets = await Promise.all(aliases.map(async alias => - await Promise.all((await SearchUtil.Search("", true, { fq: `data_l:"${alias[Id]}"` })).docs))); + ((await SearchUtil.Search("", true, { fq: `data_l:"${alias[Id]}"` })).docs))); const containerProtos = containerProtoSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set()); const containerSets = await Promise.all(Array.from(containerProtos.keys()).map(async container => { - return (await SearchUtil.GetAliasesOfDocument(container)); + return (SearchUtil.GetAliasesOfDocument(container)); })); const containers = containerSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set()); const doclayoutSets = await Promise.all(Array.from(containers.keys()).map(async (dp) => { - return (await SearchUtil.GetAliasesOfDocument(dp)); + return (SearchUtil.GetAliasesOfDocument(dp)); })); const doclayouts = Array.from(doclayoutSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set()).keys()); runInAction(() => { diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index cde795098..7e2840c2c 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -148,7 +148,7 @@ export class SchemaTable extends React.Component { } @action - changeTitleMode = () => this._showTitleDropdown = !this._showTitleDropdown; + changeTitleMode = () => this._showTitleDropdown = !this._showTitleDropdown @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column[] { @@ -208,7 +208,7 @@ export class SchemaTable extends React.Component { }}> {col.heading}
; - const sortIcon = col.desc === undefined ? "circle" : col.desc === true ? "caret-down" : "caret-up"; + const sortIcon = col.desc === undefined ? "caret-right" : col.desc === true ? "caret-down" : "caret-up"; const header =
{ {keysDropdown}
this.changeSorting(col)} - style={{ paddingRight: "6px", display: "inline" }}> + style={{ paddingRight: "6px", marginLeft: "4px", display: "inline" }}>
this.props.openHeader(col, e.clientX, e.clientY)} style={{ float: "right", paddingRight: "6px" }}> - +
; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 151acb64d..109808956 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1145,7 +1145,7 @@ export class CollectionFreeFormView extends CollectionSubView { TraceMobx(); return this.doLayoutComputation }, + this._layoutComputeReaction = reaction(() => this.doLayoutComputation, (elements) => this._layoutElements = elements || [], { fireImmediately: true, name: "doLayout" }); @@ -1240,13 +1240,15 @@ export class CollectionFreeFormView extends CollectionSubView { this.props.Document._panX = this.props.Document._panY = 0; this.props.Document[this.scaleFieldKey] = 1; }, icon: "compress-arrows-alt" }); appearanceItems.push({ description: `${this.fitToContent ? "Make Zoomable" : "Scale to Window"}`, event: () => this.Document._fitToBox = !this.fitToContent, icon: !this.fitToContent ? "expand-arrows-alt" : "compress-arrows-alt" }); - appearanceItems.push({ description: "Arrange contents in grid", event: this.layoutDocsInGrid, icon: "table" }); + !Doc.UserDoc().noviceMode ? appearanceItems.push({ description: "Arrange contents in grid", event: this.layoutDocsInGrid, icon: "table" }) : null; !appearance && ContextMenu.Instance.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" }); const viewctrls = ContextMenu.Instance.findByDescription("UI Controls..."); const viewCtrlItems = viewctrls && "subitems" in viewctrls ? viewctrls.subitems : []; - viewCtrlItems.push({ description: (Doc.UserDoc().showSnapLines ? "Hide" : "Show") + " Snap Lines", event: () => Doc.UserDoc().showSnapLines = !Doc.UserDoc().showSnapLines, icon: "compress-arrows-alt" }); - viewCtrlItems.push({ description: (this.Document.useClusters ? "Hide" : "Show") + " Clusters", event: () => this.updateClusters(!this.Document.useClusters), icon: "braille" }); + + + !Doc.UserDoc().noviceMode ? viewCtrlItems.push({ description: (Doc.UserDoc().showSnapLines ? "Hide" : "Show") + " Snap Lines", event: () => Doc.UserDoc().showSnapLines = !Doc.UserDoc().showSnapLines, icon: "compress-arrows-alt" }) : null; + !Doc.UserDoc().noviceMode ? viewCtrlItems.push({ description: (this.Document.useClusters ? "Hide" : "Show") + " Clusters", event: () => this.updateClusters(!this.Document.useClusters), icon: "braille" }) : null; !viewctrls && ContextMenu.Instance.addItem({ description: "UI Controls...", subitems: viewCtrlItems, icon: "eye" }); const options = ContextMenu.Instance.findByDescription("Options..."); @@ -1291,7 +1293,7 @@ export class CollectionFreeFormView extends CollectionSubView { SearchUtil.Search(`{!join from=id to=proto_i}id:link*`, true, {}).then(docs => { docs.docs.forEach(d => LinkManager.Instance.addLink(d)); - }) + }); }, 2000); // need to give solr some time to update so that this query will find any link docs we've added. } } diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index ddc282e57..6263be261 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -13,7 +13,6 @@ import AntimodeMenu from "../../AntimodeMenu"; import "./FormatShapePane.scss"; import { undoBatch } from "../../../util/UndoManager"; import { ColorState, SketchPicker } from 'react-color'; -import { DocumentView } from "../../../views/nodes/DocumentView" @observer export default class FormatShapePane extends AntimodeMenu { @@ -124,12 +123,12 @@ export default class FormatShapePane extends AntimodeMenu { console.log(ink); if (ink) { const newPoints: { X: number, Y: number }[] = []; - for (var j = 0; j < ink.length; j++) { + ink.forEach(i => { // (new x — oldx) + (oldxpoint * newWidt)/oldWidth - const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth; - const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight; + const newX = ((doc.x || 0) - oldX) + (i.X * (doc._width || 0)) / oldWidth; + const newY = ((doc.y || 0) - oldY) + (i.Y * (doc._height || 0)) / oldHeight; newPoints.push({ X: newX, Y: newY }); - } + }); doc.data = new InkField(newPoints); } } @@ -148,12 +147,12 @@ export default class FormatShapePane extends AntimodeMenu { console.log(ink); if (ink) { const newPoints: { X: number, Y: number }[] = []; - for (var j = 0; j < ink.length; j++) { + ink.forEach(i => { // (new x — oldx) + (oldxpoint * newWidt)/oldWidth - const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth; - const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight; + const newX = ((doc.x || 0) - oldX) + (i.X * (doc._width || 0)) / oldWidth; + const newY = ((doc.y || 0) - oldY) + (i.Y * (doc._height || 0)) / oldHeight; newPoints.push({ X: newX, Y: newY }); - } + }); doc.data = new InkField(newPoints); } } @@ -191,11 +190,11 @@ export default class FormatShapePane extends AntimodeMenu { if (ink) { const newPoints: { X: number, Y: number }[] = []; - for (var i = 0; i < ink.length; i++) { - const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X; - const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y; + ink.forEach(i => { + const newX = Math.cos(angle) * (i.X - _centerPoints[index].X) - Math.sin(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].X; + const newY = Math.sin(angle) * (i.X - _centerPoints[index].X) + Math.cos(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].Y; newPoints.push({ X: newX, Y: newY }); - } + }); doc.data = new InkField(newPoints); const xs = newPoints.map(p => p.X); const ys = newPoints.map(p => p.Y); @@ -395,12 +394,12 @@ export default class FormatShapePane extends AntimodeMenu { @computed get widInput() { return this.inputBox("wid", this.shapeWid, (val: string) => this.shapeWid = val); } @computed get rotInput() { return this.inputBoxDuo("rot", this.shapeRot, (val: string) => { this.rotate(Number(val) - Number(this.shapeRot)); this.shapeRot = val; return true; }, "∠:", "rot", this.shapeRot, (val: string) => this.shapeRot = val, ""); } - @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); } @computed get YpsInput() { return this.inputBox("Yps", this.shapeYps, (val: string) => this.shapeYps = val); } @computed get controlPoints() { return this.controlPointsButton(); } @computed get lockRatio() { return this.lockRatioButton(); } @computed get rotate90() { return this.rotate90Button(); } + @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); } @computed get propertyGroupItems() { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss new file mode 100644 index 000000000..74f32275a --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -0,0 +1,620 @@ +.propertiesView { + + background-color: rgb(205, 205, 205); + height: 100%; + font-family: "Noto Sans"; + cursor: auto; + + overflow-x: visible; + overflow-y: visible; + + .propertiesView-title { + background-color: rgb(159, 159, 159); + text-align: center; + padding-top: 12px; + padding-bottom: 12px; + display: flex; + font-size: 18px; + font-weight: bold; + justify-content: center; + + .propertiesView-title-icon { + width: 20px; + height: 20px; + padding-left: 38px; + margin-top: -5px; + right: 19; + position: absolute; + + &:hover { + color: grey; + cursor: pointer; + } + + } + + } + + .propertiesView-name { + border-bottom: 1px solid black; + padding: 8.5px; + font-size: 12.5px; + + &:hover { + cursor: pointer; + } + } + + .propertiesView-settings { + border-bottom: 1px solid black; + //padding: 8.5px; + font-size: 12.5px; + font-weight: bold; + + .propertiesView-settings-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + .propertiesView-settings-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-settings-content { + margin-left: 12px; + padding-bottom: 10px; + padding-top: 8px; + } + + } + + .propertiesView-sharing { + border-bottom: 1px solid black; + //padding: 8.5px; + + .propertiesView-sharing-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + .propertiesView-sharing-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-sharing-content { + font-size: 10px; + padding: 10px; + margin-left: 5px; + } + } + + .propertiesView-appearance { + border-bottom: 1px solid black; + //padding: 8.5px; + + .propertiesView-appearance-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + .propertiesView-appearance-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-appearance-content { + font-size: 10px; + padding: 10px; + margin-left: 5px; + } + } + + .propertiesView-transform { + border-bottom: 1px solid black; + //padding: 8.5px; + + .propertiesView-transform-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + .propertiesView-transform-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-transform-content { + font-size: 10px; + padding: 10px; + margin-left: 5px; + } + } + + .notify-button { + padding: 2px; + width: 12px; + height: 12px; + background-color: black; + border-radius: 10px; + padding-left: 2px; + padding-right: 2px; + margin-top: 2px; + margin-left: 3px; + + .notify-button-icon { + width: 6px; + height: 6.5px; + margin-left: .5px; + } + + &:hover { + background-color: rgb(158, 158, 158); + cursor: pointer; + } + } + + .expansion-button-icon { + width: 11px; + height: 11px; + color: black; + margin-left: 27px; + + &:hover { + color: rgb(131, 131, 131); + cursor: pointer; + } + } + + .propertiesView-sharingTable { + + border: 1px solid black; + padding: 5px; + border-radius: 6px; + /* width: 170px; */ + margin-right: 10px; + background-color: #ececec; + max-height: 130px; + overflow-y: scroll; + + .propertiesView-sharingTable-item { + + display: flex; + padding: 3px; + align-items: center; + border-bottom: 0.5px solid grey; + + &:hover .propertiesView-sharingTable-item-name { + overflow-x: unset; + white-space: unset; + overflow-wrap: break-word; + } + + .propertiesView-sharingTable-item-name { + font-weight: bold; + width: 80px; + overflow-x: hidden; + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; + } + + .propertiesView-sharingTable-item-permission { + display: flex; + right: 34; + float: right; + position: absolute; + + .permissions-select { + z-index: 1; + border: none; + background-color: inherit; + width: 75px; + text-align: justify; // for Edge + text-align-last: end; + + &:hover { + cursor: pointer; + } + } + } + + &:last-child { + border-bottom: none; + } + } + } + + .propertiesView-fields { + border-bottom: 1px solid black; + //padding: 8.5px; + + .propertiesView-fields-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + .propertiesView-fields-title-name { + font-size: 12.5px; + font-weight: bold; + white-space: nowrap; + width: 35px; + display: flex; + } + + .propertiesView-fields-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-fields-checkbox { + float: right; + height: 20px; + margin-top: -9px; + + .propertiesView-fields-checkbox-text { + font-size: 7px; + margin-top: -10px; + margin-left: 6px; + } + } + + .propertiesView-fields-content { + font-size: 10px; + margin-left: 2px; + padding: 10px; + + &:hover { + cursor: pointer; + } + } + } + + .field { + display: flex; + font-size: 7px; + background-color: #e8e8e8; + padding-right: 3px; + border: 0.5px solid grey; + border-radius: 5px; + padding-left: 3px; + } + + .uneditable-field { + display: flex; + overflow-y: visible; + margin-bottom: 2px; + + &:hover { + cursor: auto; + } + } + + .propertiesView-layout { + + .propertiesView-layout-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + .propertiesView-layout-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-layout-content { + overflow: hidden; + padding: 10px; + } + + } +} + +.inking-button { + + display: flex; + + .inking-button-points { + background-color: #333333; + padding: 7px; + border-radius: 7px; + margin-right: 32px; + width: 32; + height: 32; + padding-top: 9px; + margin-left: 18px; + + &:hover { + background: rgb(131, 131, 131); + transform: scale(1.05); + cursor: pointer; + } + } + + .inking-button-lock { + background-color: #333333; + padding: 7px; + border-radius: 7px; + margin-right: 32px; + width: 32; + height: 32; + padding-top: 9px; + padding-left: 10px; + + &:hover { + background: rgb(131, 131, 131); + transform: scale(1.05); + cursor: pointer; + } + } + + .inking-button-rotate { + background-color: #333333; + padding: 7px; + border-radius: 7px; + width: 32; + height: 32; + padding-top: 9px; + padding-left: 10px; + + &:hover { + background: rgb(131, 131, 131); + transform: scale(1.05); + cursor: pointer; + } + } +} + +.inputBox-duo { + display: flex; +} + +.inputBox { + + margin-top: 10px; + display: flex; + height: 19px; + margin-right: 15px; + + .inputBox-title { + font-size: 12px; + padding-right: 5px; + } + + .inputBox-input { + font-size: 10px; + width: 50px; + margin-right: 1px; + border-radius: 3px; + + &:hover { + cursor: pointer; + } + } + + .inputBox-button { + + .inputBox-button-up { + background-color: #333333; + height: 9px; + padding-left: 3px; + padding-right: 3px; + padding-top: 1px; + padding-bottom: 1px; + border-radius: 1.5px; + + &:hover { + background: rgb(131, 131, 131); + transform: scale(1.05); + cursor: pointer; + } + } + + .inputBox-button-down { + background-color: #333333; + height: 9px; + padding-left: 3px; + padding-right: 3px; + padding-top: 1px; + padding-bottom: 1px; + border-radius: 1.5px; + + &:hover { + background: rgb(131, 131, 131); + transform: scale(1.05); + cursor: pointer; + } + } + + } +} + +.color-palette { + width: 160px; + height: 360; +} + +.strokeAndFill { + display: flex; + margin-top: 10px; + + .fill { + margin-right: 40px; + display: flex; + padding-bottom: 7px; + margin-left: 35px; + + .fill-title { + font-size: 12px; + margin-right: 2px; + } + + .fill-button { + padding-top: 2px; + margin-top: -1px; + } + } + + .stroke { + display: flex; + + .stroke-title { + font-size: 12px; + } + + .stroke-button { + padding-top: 2px; + margin-left: 2px; + margin-top: -1px; + } + } +} + +.widthAndDash { + + .width { + .width-top { + display: flex; + + .width-title { + font-size: 12; + margin-right: 20px; + margin-left: 35px; + text-align: center; + } + + .width-input { + margin-right: 30px; + margin-top: -10px; + } + } + + .width-range { + margin-right: 1px; + margin-bottom: 6; + } + } + + .arrows { + + display: flex; + margin-bottom: 3px; + + .arrows-head { + + display: flex; + margin-right: 35px; + + .arrows-head-title { + font-size: 10; + } + + .arrows-head-input { + margin-left: 6px; + margin-top: 2px; + } + } + + .arrows-tail { + display: flex; + + .arrows-tail-title { + font-size: 10; + } + + .arrows-tail-input { + margin-left: 6px; + margin-top: 2px; + } + } + } + + .dashed { + + display: flex; + margin-left: 74px; + margin-bottom: 6px; + + .dashed-title { + font-size: 10; + } + + .dashed-input { + margin-left: 6px; + margin-top: 2px; + } + } +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx new file mode 100644 index 000000000..35c7fd425 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -0,0 +1,858 @@ +import React = require("react"); +import { observer } from "mobx-react"; +import "./PropertiesView.scss"; +import { observable, action, computed, runInAction } from "mobx"; +import { Doc, Field, DocListCast, WidthSym, HeightSym, AclSym, AclPrivate, AclReadonly, AclAddonly, AclEdit, AclAdmin, Opt } from "../../../../fields/Doc"; +import { DocumentView } from "../../nodes/DocumentView"; +import { ComputedField } from "../../../../fields/ScriptField"; +import { EditableView } from "../../EditableView"; +import { KeyValueBox } from "../../nodes/KeyValueBox"; +import { Cast, NumCast, StrCast } from "../../../../fields/Types"; +import { listSpec } from "../../../../fields/Schema"; +import { ContentFittingDocumentView } from "../../nodes/ContentFittingDocumentView"; +import { returnFalse, returnOne, emptyFunction, emptyPath, returnTrue, returnZero, returnEmptyFilter, Utils } from "../../../../Utils"; +import { Id } from "../../../../fields/FieldSymbols"; +import { Transform } from "../../../util/Transform"; +import { PropertiesButtons } from "../../PropertiesButtons"; +import { SelectionManager } from "../../../util/SelectionManager"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Tooltip, Checkbox, Divider } from "@material-ui/core"; +import SharingManager from "../../../util/SharingManager"; +import { DocumentType } from "../../../documents/DocumentTypes"; +import FormatShapePane from "./FormatShapePane"; +import { SharingPermissions, GetEffectiveAcl } from "../../../../fields/util"; +import { InkField } from "../../../../fields/InkField"; +import { undoBatch } from "../../../util/UndoManager"; +import { ColorState, SketchPicker } from "react-color"; +import AntimodeMenu from "../../AntimodeMenu"; +import "./FormatShapePane.scss"; +import { discovery_v1 } from "googleapis"; +import { PresBox } from "../../nodes/PresBox"; +import { DocumentManager } from "../../../util/DocumentManager"; + + +interface PropertiesViewProps { + width: number; + height: number; + renderDepth: number; + ScreenToLocalTransform: () => Transform; + onDown: (event: any) => void; +} + +@observer +export class PropertiesView extends React.Component { + + @computed get MAX_EMBED_HEIGHT() { return 200; } + + @computed get selectedDocumentView() { + if (SelectionManager.SelectedDocuments().length) { + return SelectionManager.SelectedDocuments()[0]; + } else if (PresBox.Instance) { + const presSlide = PresBox.Instance._selectedArray[0]; + const view = DocumentManager.Instance.getDocumentView(presSlide); + if (view) return view; + } else { return undefined; } + } + @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } + @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } + + @observable layoutFields: boolean = false; + + @observable openActions: boolean = true; + @observable openSharing: boolean = true; + @observable openFields: boolean = true; + @observable openLayout: boolean = true; + @observable openAppearance: boolean = true; + @observable openTransform: boolean = true; + + @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } + + @action + rtfWidth = () => { + if (this.selectedDoc) { + return Math.min(this.selectedDoc?.[WidthSym](), this.props.width - 20); + } else { + return 0; + } + } + @action + rtfHeight = () => { + if (this.selectedDoc) { + return this.rtfWidth() <= this.selectedDoc?.[WidthSym]() ? Math.min(this.selectedDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; + } else { + return 0; + } + } + + @action + docWidth = () => { + if (this.selectedDoc) { + const layoutDoc = this.selectedDoc; + const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); + if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.width - 20)); + return NumCast(layoutDoc._nativeWidth) ? Math.min(layoutDoc[WidthSym](), this.props.width - 20) : this.props.width - 20; + } else { + return 0; + } + } + + @action + docHeight = () => { + if (this.selectedDoc && this.dataDoc) { + const layoutDoc = this.selectedDoc; + return Math.max(70, Math.min(this.MAX_EMBED_HEIGHT, (() => { + const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); + if (aspect) return this.docWidth() * aspect; + return layoutDoc._fitWidth ? (!this.dataDoc._nativeHeight ? NumCast(this.props.height) : + Math.min(this.docWidth() * NumCast(layoutDoc.scrollHeight, NumCast(layoutDoc._nativeHeight)) / NumCast(layoutDoc._nativeWidth, + NumCast(this.props.height)))) : + NumCast(layoutDoc._height) ? NumCast(layoutDoc._height) : 50; + })())); + } else { + return 0; + } + } + + @computed get expandedField() { + if (this.dataDoc && this.selectedDoc) { + const ids: { [key: string]: string } = {}; + const doc = this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc; + doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); + const rows: JSX.Element[] = []; + for (const key of Object.keys(ids).slice().sort()) { + const contents = doc[key]; + if (key[0] === "#") { + rows.push(
+ {key} +   +
); + } else { + let contentElement: (JSX.Element | null)[] | JSX.Element = []; + contentElement = Field.toKeyValueString(doc, key)} + SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)} + />; + rows.push(
+ {key + ":"} +   + {contentElement} +
); + } + } + rows.push(
+ ""} + SetValue={this.setKeyValue} /> +
); + return rows; + } + } + + @computed get noviceFields() { + if (this.dataDoc && this.selectedDoc) { + const ids: { [key: string]: string } = {}; + const doc = this.dataDoc; + doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); + const rows: JSX.Element[] = []; + for (const key of Object.keys(ids).slice().sort()) { + if (key[0] === key[0].toUpperCase() || key[0] === "#" || key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) { + const contents = doc[key]; + if (key[0] === "#") { + rows.push(
+ {key} +   +
); + } else { + const value = Field.toString(contents as Field); + if (key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) { + rows.push(
+ {key + ": "} +
{value}
+
); + } else { + let contentElement: (JSX.Element | null)[] | JSX.Element = []; + contentElement = Field.toKeyValueString(doc, key)} + SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)} + />; + + rows.push(
+ {key + ":"} +   + {contentElement} +
); + } + } + } + } + rows.push(
+ ""} + SetValue={this.setKeyValue} /> +
); + return rows; + } + } + + + setKeyValue = (value: string) => { + if (this.selectedDoc && this.dataDoc) { + const doc = this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc; + if (value.indexOf(":") !== -1) { + const newVal = value[0].toUpperCase() + value.substring(1, value.length); + KeyValueBox.SetField(doc, newVal.substring(0, newVal.indexOf(":")), newVal.substring(newVal.indexOf(":") + 1, newVal.length), true); + return true; + } else if (value[0] === "#") { + const newVal = value + `:'${value}'`; + KeyValueBox.SetField(doc, newVal.substring(0, newVal.indexOf(":")), newVal.substring(newVal.indexOf(":") + 1, newVal.length), true); + return true; + } + } + return false; + } + + @computed get layoutPreview() { + if (this.selectedDoc) { + const layoutDoc = Doc.Layout(this.selectedDoc); + const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight; + const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth; + return
+ "lightgrey"} + fitToBox={false} + FreezeDimensions={true} + NativeWidth={layoutDoc.type === + StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : returnZero} + NativeHeight={layoutDoc.type === + StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : returnZero} + PanelWidth={panelWidth} + PanelHeight={panelHeight} + focus={returnFalse} + ScreenToLocalTransform={this.props.ScreenToLocalTransform} + docFilters={returnEmptyFilter} + ContainingCollectionDoc={undefined} + ContainingCollectionView={undefined} + addDocument={returnFalse} + moveDocument={undefined} + removeDocument={returnFalse} + parentActive={() => false} + whenActiveChanged={emptyFunction} + addDocTab={returnFalse} + pinToPres={emptyFunction} + bringToFront={returnFalse} + ContentScaling={returnOne} + dontRegisterView={true} + /> +
; + } else { + return null; + } + } + + getPermissionsSelect(user: string) { + return ; + } + + @computed get notifyIcon() { + return
Notify with message
}> +
+ +
+ ; + } + + @computed get expansionIcon() { + return
{"Show more permissions"}
}> +
{ + if (this.selectedDocumentView) { + SharingManager.Instance.open(this.selectedDocumentView); + } + }}> + +
+ ; + } + + sharingItem(name: string, effectiveAcl: symbol, permission?: string) { + return
+
{name}
+ {name !== "Me" ? this.notifyIcon : null} +
+ {effectiveAcl === AclAdmin && permission !== "Owner" ? this.getPermissionsSelect(name) : permission} + {permission === "Owner" ? this.expansionIcon : null} +
+
; + } + + @computed get sharingTable() { + const AclMap = new Map([ + [AclPrivate, SharingPermissions.None], + [AclReadonly, SharingPermissions.View], + [AclAddonly, SharingPermissions.Add], + [AclEdit, SharingPermissions.Edit], + [AclAdmin, SharingPermissions.Admin] + ]); + + const effectiveAcl = GetEffectiveAcl(this.selectedDoc!); + const tableEntries = []; + + if (this.selectedDoc![AclSym]) { + for (const [key, value] of Object.entries(this.selectedDoc![AclSym])) { + const name = key.substring(4).replace("_", "."); + if (name !== Doc.CurrentUserEmail && name !== this.selectedDoc!.author) tableEntries.push(this.sharingItem(name, effectiveAcl, AclMap.get(value)!)); + } + } + + tableEntries.unshift(this.sharingItem("Me", effectiveAcl, Doc.CurrentUserEmail === this.selectedDoc!.author ? "Owner" : StrCast(this.selectedDoc![`ACL-${Doc.CurrentUserEmail.replace(".", "_")}`]))); + if (Doc.CurrentUserEmail !== this.selectedDoc!.author) tableEntries.unshift(this.sharingItem(StrCast(this.selectedDoc!.author), effectiveAcl, "Owner")); + + return
+ {tableEntries} +
; + } + + @computed get fieldsCheckbox() { + return ; + } + + @action + toggleCheckbox = () => { + this.layoutFields = !this.layoutFields; + } + + @computed get editableTitle() { + return StrCast(this.selectedDoc?.title)} + SetValue={this.setTitle} />; + } + + @action + setTitle = (value: string) => { + if (this.dataDoc) { + this.selectedDoc && (this.selectedDoc.title = value); + KeyValueBox.SetField(this.dataDoc, "title", value, true); + return true; + } + return false; + } + + + + + + + + + + @undoBatch + @action + rotate = (angle: number) => { + const _centerPoints: { X: number, Y: number }[] = []; + if (this.selectedDoc) { + const doc = this.selectedDoc; + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { + const xs = ink.map(p => p.X); + const ys = ink.map(p => p.Y); + const left = Math.min(...xs); + const top = Math.min(...ys); + const right = Math.max(...xs); + const bottom = Math.max(...ys); + _centerPoints.push({ X: left, Y: top }); + } + } + + var index = 0; + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { + doc.rotation = Number(doc.rotation) + Number(angle); + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { + + const newPoints: { X: number, Y: number }[] = []; + for (var i = 0; i < ink.length; i++) { + const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X; + const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + const xs = newPoints.map(p => p.X); + const ys = newPoints.map(p => p.Y); + const left = Math.min(...xs); + const top = Math.min(...ys); + const right = Math.max(...xs); + const bottom = Math.max(...ys); + + doc._height = (bottom - top); + doc._width = (right - left); + } + index++; + } + } + } + + @observable _controlBtn: boolean = false; + @observable _lock: boolean = false; + + @computed + get controlPointsButton() { + return
+
{"Edit points"}
}> +
this._controlBtn = !this._controlBtn)} style={{ backgroundColor: this._controlBtn ? "black" : "" }}> + +
+ +
{this._lock ? "Unlock points" : "Lock points"}
}> +
this._lock = !this._lock)} > + +
+ +
{"Rotate 90˚"}
}> +
this.rotate(Math.PI / 2))}> + +
+ +
; + } + + inputBox = (key: string, value: any, setter: (val: string) => {}, title: string) => { + return
+
{title}
+ setter(e.target.value)} /> +
+
this.upDownButtons("up", key)))} > + +
+
this.upDownButtons("down", key)))} > + +
+
+
; + } + + inputBoxDuo = (key: string, value: any, setter: (val: string) => {}, title1: string, key2: string, value2: any, setter2: (val: string) => {}, title2: string) => { + return
+ {this.inputBox(key, value, setter, title1)} + {title2 === "" ? (null) : this.inputBox(key2, value2, setter2, title2)} +
; + } + + @action + upDownButtons = (dirs: string, field: string) => { + switch (field) { + case "rot": this.rotate((dirs === "up" ? .1 : -.1)); break; + // case "rot": this.selectedInk?.forEach(i => i.rootDoc.rotation = NumCast(i.rootDoc.rotation) + (dirs === "up" ? 0.1 : -0.1)); break; + case "Xps": this.selectedDoc && (this.selectedDoc.x = NumCast(this.selectedDoc?.x) + (dirs === "up" ? 10 : -10)); break; + case "Yps": this.selectedDoc && (this.selectedDoc.y = NumCast(this.selectedDoc?.y) + (dirs === "up" ? 10 : -10)); break; + case "stk": this.selectedDoc && (this.selectedDoc.strokeWidth = NumCast(this.selectedDoc?.strokeWidth) + (dirs === "up" ? .1 : -.1)); break; + case "wid": + const oldWidth = NumCast(this.selectedDoc?._width); + const oldHeight = NumCast(this.selectedDoc?._height); + const oldX = NumCast(this.selectedDoc?.x); + const oldY = NumCast(this.selectedDoc?.y); + this.selectedDoc && (this.selectedDoc._width = oldWidth + (dirs === "up" ? 10 : - 10)); + this._lock && this.selectedDoc && (this.selectedDoc._height = (NumCast(this.selectedDoc?._width) / oldWidth * NumCast(this.selectedDoc?._height))); + const doc = this.selectedDoc; + if (doc?.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { + console.log(doc.x, doc.y, doc._height, doc._width); + const ink = Cast(doc.data, InkField)?.inkData; + console.log(ink); + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var j = 0; j < ink.length; j++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (NumCast(doc.x) - oldX) + (ink[j].X * NumCast(doc._width)) / oldWidth; + const newY = (NumCast(doc.y) - oldY) + (ink[j].Y * NumCast(doc._height)) / oldHeight; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + } + } + break; + case "hgt": + const oWidth = NumCast(this.selectedDoc?._width); + const oHeight = NumCast(this.selectedDoc?._height); + const oX = NumCast(this.selectedDoc?.x); + const oY = NumCast(this.selectedDoc?.y); + this.selectedDoc && (this.selectedDoc._height = oHeight + (dirs === "up" ? 10 : - 10)); + this._lock && this.selectedDoc && (this.selectedDoc._width = (NumCast(this.selectedDoc?._height) / oHeight * NumCast(this.selectedDoc?._width))); + const docu = this.selectedDoc; + if (docu?.type === DocumentType.INK && docu.x && docu.y && docu._height && docu._width) { + console.log(docu.x, docu.y, docu._height, docu._width); + const ink = Cast(docu.data, InkField)?.inkData; + console.log(ink); + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var j = 0; j < ink.length; j++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (NumCast(docu.x) - oX) + (ink[j].X * NumCast(docu._width)) / oWidth; + const newY = (NumCast(docu.y) - oY) + (ink[j].Y * NumCast(docu._height)) / oHeight; + newPoints.push({ X: newX, Y: newY }); + } + docu.data = new InkField(newPoints); + } + } + break; + } + } + + getField(key: string) { + //if (this.selectedDoc) { + return Field.toString(this.selectedDoc[key] as Field); + // } else { + // return undefined as Opt; + // } + } + + @computed get shapeXps() { return this.getField("x"); } + @computed get shapeYps() { return this.getField("y"); } + @computed get shapeRot() { return this.getField("rotation"); } + @computed get shapeHgt() { return this.getField("_height"); } + @computed get shapeWid() { return this.getField("_width"); } + set shapeXps(value) { this.selectedDoc && (this.selectedDoc.x = Number(value)); } + set shapeYps(value) { this.selectedDoc && (this.selectedDoc.y = Number(value)); } + set shapeRot(value) { this.selectedDoc && (this.selectedDoc.rotation = Number(value)); } + set shapeWid(value) { + const oldWidth = NumCast(this.selectedDoc?._width); + this.selectedDoc && (this.selectedDoc._width = Number(value)); + this._lock && this.selectedDoc && (this.selectedDoc._height = (NumCast(this.selectedDoc?._width) * NumCast(this.selectedDoc?._height)) / oldWidth); + } + set shapeHgt(value) { + const oldHeight = NumCast(this.selectedDoc?._height); + this.selectedDoc && (this.selectedDoc._height = Number(value)); + this._lock && this.selectedDoc && (this.selectedDoc._width = (NumCast(this.selectedDoc?._height) * NumCast(this.selectedDoc?._width)) / oldHeight); + } + + @computed get hgtInput() { return this.inputBoxDuo("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val, "H:", "wid", this.shapeWid, (val: string) => this.shapeWid = val, "W:"); } + @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); } + @computed get rotInput() { return this.inputBoxDuo("rot", this.shapeRot, (val: string) => { this.rotate(Number(val) - Number(this.shapeRot)); this.shapeRot = val; return true; }, "∠:", "rot", this.shapeRot, (val: string) => this.shapeRot = val, ""); } + + @observable private _fillBtn = false; + @observable private _lineBtn = false; + + private _lastFill = "#D0021B"; + private _lastLine = "#D0021B"; + private _lastDash: any = "2"; + + @computed get colorFil() { const ccol = this.getField("fillColor") || ""; ccol && (this._lastFill = ccol); return ccol; } + @computed get colorStk() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; } + set colorFil(value) { value && (this._lastFill = value); this.selectedDoc && (this.selectedDoc.fillColor = value ? value : undefined); } + set colorStk(value) { value && (this._lastLine = value); this.selectedDoc && (this.selectedDoc.color = value ? value : undefined); } + + colorButton(value: string, setter: () => {}) { + return
setter()))}> +
+ {value === "" || value === "transparent" ?

☒

: ""} +
; + } + + @undoBatch + @action + switchStk = (color: ColorState) => { + const val = String(color.hex); + this.colorStk = val; + return true; + } + @undoBatch + @action + switchFil = (color: ColorState) => { + const val = String(color.hex); + this.colorFil = val; + return true; + } + + colorPicker(setter: (color: string) => {}, type: string) { + return ; + } + + @computed get fillButton() { return this.colorButton(this.colorFil, () => { this._fillBtn = !this._fillBtn; this._lineBtn = false; return true; }); } + @computed get lineButton() { return this.colorButton(this.colorStk, () => { this._lineBtn = !this._lineBtn; this._fillBtn = false; return true; }); } + + @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color, "fil"); } + @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color, "stk"); } + + @computed get strokeAndFill() { + return
+
+
+
Fill:
+
{this.fillButton}
+
+
+
Stroke:
+
{this.lineButton}
+
+
+ {this._fillBtn ? this.fillPicker : ""} + {this._lineBtn ? this.linePicker : ""} +
; + } + + @computed get solidStk() { return this.selectedDoc?.color && (!this.selectedDoc?.strokeDash || this.selectedDoc?.strokeDash === "0") ? true : false; } + @computed get dashdStk() { return this.selectedDoc?.strokeDash || ""; } + @computed get unStrokd() { return this.selectedDoc?.color ? true : false; } + @computed get widthStk() { return this.getField("strokeWidth") || "1"; } + @computed get markHead() { return this.getField("strokeStartMarker") || ""; } + @computed get markTail() { return this.getField("strokeEndMarker") || ""; } + set solidStk(value) { this.dashdStk = ""; this.unStrokd = !value; } + set dashdStk(value) { + value && (this._lastDash = value) && (this.unStrokd = false); + this.selectedDoc && (this.selectedDoc.strokeDash = value ? this._lastDash : undefined); + } + set widthStk(value) { this.selectedDoc && (this.selectedDoc.strokeWidth = Number(value)); } + set unStrokd(value) { this.colorStk = value ? "" : this._lastLine; } + set markHead(value) { this.selectedDoc && (this.selectedDoc.strokeStartMarker = value); } + set markTail(value) { this.selectedDoc && (this.selectedDoc.strokeEndMarker = value); } + + + @computed get stkInput() { return this.regInput("stk", this.widthStk, (val: string) => this.widthStk = val); } + + + regInput = (key: string, value: any, setter: (val: string) => {}) => { + return
+ setter(e.target.value)} /> +
+
this.upDownButtons("up", key)))} > + +
+
this.upDownButtons("down", key)))} > + +
+
+
; + } + + @computed get widthAndDash() { + return
+
+
+
Width:
+
{this.stkInput}
+
+ this.widthStk = e.target.value))} /> +
+ +
+
+
Arrow Head:
+ this.markHead = this.markHead ? "" : "arrow"))} /> +
+
+
Arrow End:
+ this.markTail = this.markTail ? "" : "arrow"))} /> +
+
+
+
Dash:
+ +
+
; + } + + @undoBatch @action + changeDash = () => { + const dash = this.dashdStk; + if (dash === "2") { + this.dashdStk = "0"; + } else { + this.dashdStk = "2"; + } + } + + @computed get appearanceEditor() { + return
+ {this.widthAndDash} + {this.strokeAndFill} +
; + } + + @computed get transformEditor() { + return
+ {this.controlPointsButton} + {this.hgtInput} + {this.XpsInput} + {this.rotInput} +
; + } + + render() { + + if (!this.selectedDoc) { + return
+
+ No Document Selected +
; + } + + const novice = Doc.UserDoc().noviceMode; + + return
+
+ Properties +
+ +
+
+
+ {this.editableTitle} +
+
+
runInAction(() => { this.openActions = !this.openActions; })} + style={{ backgroundColor: this.openActions ? "black" : "" }}> + Actions +
+ +
+
+ {this.openActions ?
+ +
: null} +
+
+
runInAction(() => { this.openSharing = !this.openSharing; })} + style={{ backgroundColor: this.openSharing ? "black" : "" }}> + Sharing {"&"} Permissions +
+ +
+
+ {this.openSharing ?
+ {this.sharingTable} +
: null} +
+ + + + + {this.isInk ?
+
runInAction(() => { this.openAppearance = !this.openAppearance; })} + style={{ backgroundColor: this.openAppearance ? "black" : "" }}> + Appearance +
+ +
+
+ {this.openAppearance ?
+ {this.appearanceEditor} +
: null} +
: null} + + {this.isInk ?
+
runInAction(() => { this.openTransform = !this.openTransform; })} + style={{ backgroundColor: this.openTransform ? "black" : "" }}> + Transform +
+ +
+
+ {this.openTransform ?
+ {this.transformEditor} +
: null} +
: null} + + + + + +
+
runInAction(() => { this.openFields = !this.openFields; })} + style={{ backgroundColor: this.openFields ? "black" : "" }}> +
+ Fields {"&"} Tags +
+ +
+
+
+ {!novice && this.openFields ?
+ {this.fieldsCheckbox} +
Layout
+
: null} + {this.openFields ? +
+ {novice ? this.noviceFields : this.expandedField} +
: null} +
+
+
runInAction(() => { this.openLayout = !this.openLayout; })} + style={{ backgroundColor: this.openLayout ? "black" : "" }}> + Layout +
runInAction(() => { this.openLayout = !this.openLayout; })}> + +
+
+ {this.openLayout ?
{this.layoutPreview}
: null} +
+
; + } +} \ No newline at end of file diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index d1c839c3b..0aabf5319 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -182,7 +182,7 @@ export class LinkMenuItem extends React.Component { switch (this.props.destinationDoc.type) { case DocumentType.IMG: destinationIcon = "image"; break; case DocumentType.COMPARISON: destinationIcon = "columns"; break; - case DocumentType.RTF: destinationIcon = "font"; break; + case DocumentType.RTF: destinationIcon = "sticky-note"; break; case DocumentType.COL: destinationIcon = "folder"; break; case DocumentType.WEB: destinationIcon = "globe-asia"; break; case DocumentType.SCREENSHOT: destinationIcon = "photo-video"; break; @@ -196,6 +196,7 @@ export class LinkMenuItem extends React.Component { case DocumentType.DOCHOLDER: destinationIcon = "expand"; break; case DocumentType.VID: destinationIcon = "video"; break; case DocumentType.INK: destinationIcon = "pen-nib"; break; + case DocumentType.PDF: destinationIcon = "file"; break; default: destinationIcon = "question"; break; } diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index 6081def5d..f7e253f42 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -78,6 +78,9 @@ export class ContentFittingDocumentView extends React.Component 0.001 ? "auto" : this.props.PanelWidth(), height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight(), diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index e8173d103..e3f258b8d 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -18,6 +18,7 @@ import { DocHolderBox } from "./DocHolderBox"; import { DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import { FontIconBox } from "./FontIconBox"; +import { MenuIconBox } from "./MenuIconBox"; import { FieldView, FieldViewProps } from "./FieldView"; import { FormattedTextBox } from "./formattedText/FormattedTextBox"; import { ImageBox } from "./ImageBox"; @@ -189,7 +190,7 @@ export class DocumentContentsView extends React.Component + {/* {this.props.InMenu ? this.props.StartLink ? : + : links.length} */} + {this.props.InMenu ? this.props.StartLink ? : - : links.length} + link : links.length}
{DocumentLinksButton.StartLink && this.props.InMenu && !!!this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
(Docu } onClick = action((e: React.MouseEvent | React.PointerEvent) => { - if (!e.nativeEvent.cancelBubble && !this.Document.ignoreClick && + if (!e.nativeEvent.cancelBubble && !this.Document.ignoreClick && this.props.renderDepth >= 0 && (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) { let stopPropagate = true; let preventDefault = true; @@ -319,10 +321,11 @@ export class DocumentView extends DocComponent(Docu const func = () => this.onClickHandler.script.run({ this: this.layoutDoc, self: this.rootDoc, + scriptContext: this.props.scriptContext, thisContainer: this.props.ContainingCollectionDoc, shiftKey: e.shiftKey }, console.log); - if (this.props.Document !== Doc.UserDoc()["dockedBtn-undo"] && this.props.Document !== Doc.UserDoc()["dockedBtn-redo"]) { + if (!Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()["dockedBtn-undo"] as Doc) && !Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()["dockedBtn-redo"] as Doc)) { UndoManager.RunInBatch(func, "on click"); } else func(); } else if (this.Document["onClick-rawScript"] && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes("ScriptingBox")) {// bcz: hack? don't edit a script if you're clicking on a scripting box itself @@ -584,6 +587,18 @@ export class DocumentView extends DocComponent(Docu } } + + @undoBatch + noOnClick = (): void => { + this.Document.ignoreClick = false; + this.Document.isLinkButton = false; + } + + @undoBatch + toggleDetail = (): void => { + this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`); + } + @undoBatch @action drop = async (e: Event, de: DragManager.DropEvent) => { if (this.props.Document === Doc.UserDoc().activeWorkspace) { @@ -660,6 +675,14 @@ export class DocumentView extends DocComponent(Docu } } + @action + onCopy = () => { + const copy = Doc.MakeCopy(this.props.Document, true); + copy.x = NumCast(this.props.Document.x) + NumCast(this.props.Document._width); + copy.y = NumCast(this.props.Document.y) + 30; + this.props.addDocument?.(copy); + } + @action onContextMenu = async (e: React.MouseEvent | Touch): Promise => { // the touch onContextMenu is button 0, the pointer onContextMenu is button 2 @@ -704,14 +727,14 @@ export class DocumentView extends DocComponent(Docu const existingOnClick = cm.findByDescription("OnClick..."); const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : []; onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" }); - onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "window-restore" }); + onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "concierge-bell" }); onClicks.push({ description: this.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" }); - onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: () => this.toggleFollowLink("inPlace", true, false), icon: "concierge-bell" }); - !this.Document.isLinkButton && onClicks.push({ description: "Follow Link on Right", event: () => this.toggleFollowLink("onRight", false, false), icon: "concierge-bell" }); - onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: () => this.toggleFollowLink(undefined, false, false), icon: "concierge-bell" }); - onClicks.push({ description: (this.Document.isPushpin ? "Remove" : "Make") + " Pushpin", event: () => this.toggleFollowLink(undefined, false, true), icon: "snowflake" }); - onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); - !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, addDivider: true, subitems: onClicks, icon: "hand-point-right" }); + onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: () => this.toggleFollowLink("inPlace", true, false), icon: "link" }); + !this.Document.isLinkButton && onClicks.push({ description: "Follow Link on Right", event: () => this.toggleFollowLink("onRight", false, false), icon: "link" }); + onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: () => this.toggleFollowLink(undefined, false, false), icon: "link" }); + onClicks.push({ description: (this.Document.isPushpin ? "Remove" : "Make") + " Pushpin", event: () => this.toggleFollowLink(undefined, false, true), icon: "map-pin" }); + onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "terminal" }); + !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, addDivider: true, subitems: onClicks, icon: "mouse-pointer" }); const funcs: ContextMenuProps[] = []; if (this.layoutDoc.onDragStart) { @@ -724,6 +747,9 @@ export class DocumentView extends DocComponent(Docu const more = cm.findByDescription("More..."); const moreItems = more && "subitems" in more ? more.subitems : []; moreItems.push({ description: "Download document", icon: "download", event: async () => Doc.Zip(this.props.Document) }); + moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "users" }); + //moreItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" }); + moreItems.push({ description: "Create an Alias", event: () => this.onCopy(), icon: "copy" }); if (!Doc.UserDoc().noviceMode) { moreItems.push({ description: "Make View of Metadata Field", event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc), icon: "concierge-bell" }); moreItems.push({ description: `${this.Document._chromeStatus !== "disabled" ? "Hide" : "Show"} Chrome`, event: () => this.Document._chromeStatus = (this.Document._chromeStatus !== "disabled" ? "disabled" : "enabled"), icon: "project-diagram" }); @@ -735,16 +761,18 @@ export class DocumentView extends DocComponent(Docu } moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" }); } + //GetEffectiveAcl(this.props.Document) === AclEdit && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" }); + const effectiveAcl = GetEffectiveAcl(this.props.Document); (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" }); - moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "external-link-alt" }); + !more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); cm.moveAfter(cm.findByDescription("More...")!, cm.findByDescription("OnClick...")!); const help = cm.findByDescription("Help..."); const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : []; + !Doc.UserDoc().novice && helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" }); helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" }); - helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" }); helpItems.push({ description: "Print Document in Console", event: () => console.log(this.props.Document), icon: "hand-point-right" }); cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" }); @@ -786,8 +814,9 @@ export class DocumentView extends DocComponent(Docu childScaling = () => (this.layoutDoc._fitWidth ? this.props.PanelWidth() / this.nativeWidth : this.props.ContentScaling()); @computed.struct get linkOffset() { return [-15, 0]; } @computed get contents() { + const pos = this.props.relative ? "relative " : "absolute"; TraceMobx(); - return (
+ return (
(Docu ChromeHeight={this.chromeHeight} isSelected={this.isSelected} select={this.select} + scriptContext={this.props.scriptContext} onClick={this.onClickFunc} layoutKey={this.finalLayoutKey} /> {this.layoutDoc.hideAllLinks ? (null) : this.allAnchors} @@ -877,8 +907,12 @@ export class DocumentView extends DocComponent(Docu } @computed get innards() { TraceMobx(); + const pos = this.props.relative ? "relative" : undefined; if (this.props.treeViewDoc && !this.props.LayoutTemplateString?.includes("LinkAnchorBox")) { // this happens when the document is a tree view label (but not an anchor dot) - return
+ return
{StrCast(this.props.Document.title)} {this.allAnchors}
; @@ -1003,7 +1037,7 @@ export class DocumentView extends DocComponent(Docu background: finalColor, opacity: finalOpacity, fontFamily: StrCast(this.Document._fontFamily, "inherit"), - fontSize: Cast(this.Document._fontSize, "string", null) + fontSize: Cast(this.Document._fontSize, "string", null), }}> {this.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ? <> {this.innards} diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 5d5bc1d73..1b4151bd8 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -61,6 +61,7 @@ export interface FieldViewProps { color?: string; xMargin?: number; yMargin?: number; + scriptContext?: any; } @observer diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss index 5b85d8b0b..69c835318 100644 --- a/src/client/views/nodes/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox.scss @@ -16,7 +16,7 @@ position: absolute; text-align: center; font-size: 8px; - margin-top:4px; + //margin-top:4px; letter-spacing: normal; left: 0; overflow: hidden; diff --git a/src/client/views/nodes/MenuIconBox.scss b/src/client/views/nodes/MenuIconBox.scss new file mode 100644 index 000000000..1b72f5a8f --- /dev/null +++ b/src/client/views/nodes/MenuIconBox.scss @@ -0,0 +1,49 @@ +.menuButton { + //padding: 7px; + padding-left: 7px; + width: 100%; + width: 60px; + height: 70px; + + .menuButton-wrap { + width: 45px; + /* padding: 5px; */ + touch-action: none; + background: black; + transform-origin: top left; + /* margin-bottom: 5px; */ + margin-top: 5px; + margin-right: 25px; + border-radius: 8px; + + &:hover { + background: rgb(61, 61, 61); + cursor: pointer; + } + } + + .menuButton-label { + color: white; + margin-right: 4px; + border-radius: 8px; + width: 42px; + position: relative; + text-align: center; + font-size: 8px; + margin-top: 1px; + letter-spacing: normal; + padding: 3px; + background-color: inherit; + } + + .menuButton-icon { + width: auto; + height: 35px; + padding: 5px; + } + + svg { + width: 95% !important; + height: 95%; + } +} \ No newline at end of file diff --git a/src/client/views/nodes/MenuIconBox.tsx b/src/client/views/nodes/MenuIconBox.tsx new file mode 100644 index 000000000..0aa7b327e --- /dev/null +++ b/src/client/views/nodes/MenuIconBox.tsx @@ -0,0 +1,33 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { createSchema, makeInterface } from '../../../fields/Schema'; +import { StrCast } from '../../../fields/Types'; +import { DocComponent } from '../DocComponent'; +import { FieldView, FieldViewProps } from './FieldView'; +import './MenuIconBox.scss'; +const MenuIconSchema = createSchema({ + icon: "string" +}); + +type MenuIconDocument = makeInterface<[typeof MenuIconSchema]>; +const MenuIconDocument = makeInterface(MenuIconSchema); +@observer +export class MenuIconBox extends DocComponent(MenuIconDocument) { + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MenuIconBox, fieldKey); } + _ref: React.RefObject = React.createRef(); + + render() { + + const color = this.props.backgroundColor?.(this.props.Document) === "lightgrey" ? "black" : "white"; + const menuBTN =
+
+ +
{this.dataDoc.title}
+
+
; + + return menuBTN; + } +} \ No newline at end of file diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index c04c6c409..97f223c02 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -32,6 +32,7 @@ import { conformsTo } from "lodash"; import { translate } from "googleapis/build/src/apis/translate"; import { DragManager, dropActionType } from "../../util/DragManager"; import { actionAsync } from "mobx-utils"; +import { SelectionManager } from "../../util/SelectionManager"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -260,7 +261,7 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); const srcContext = await DocCastAsync(targetDoc.context); const presCollection = Cast(this.layoutDoc.presCollection, Doc, null); - const collectionDocView = presCollection ? DocumentManager.Instance.getDocumentView(presCollection) : undefined; + const collectionDocView = presCollection ? await DocumentManager.Instance.getDocumentView(presCollection) : undefined; if (this.itemIndex >= 0) { if (targetDoc) { if (srcContext) this.layoutDoc.presCollection = srcContext; @@ -496,6 +497,8 @@ export class PresBox extends ViewBoxBaseComponent selectElement = (doc: Doc) => { // this._selectedArray = []; this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex)); + const view = DocumentManager.Instance.getDocumentView(doc); + view && SelectionManager.SelectDoc(view, false); // this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); // console.log(this._selectedArray); } @@ -504,8 +507,9 @@ export class PresBox extends ViewBoxBaseComponent @action multiSelect = (doc: Doc, ref: HTMLElement) => { this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); - const ele = ref.getElementsByClassName("stacking"); this._eleArray.push(ref); + const view = DocumentManager.Instance.getDocumentView(doc); + view && SelectionManager.SelectDoc(view, true); } //Shift click @@ -517,6 +521,8 @@ export class PresBox extends ViewBoxBaseComponent for (let i = Math.min(this.itemIndex, this.childDocs.indexOf(doc)); i <= Math.max(this.itemIndex, this.childDocs.indexOf(doc)); i++) { this._selectedArray.push(this.childDocs[i]); this._eleArray.push(ref); + const view = DocumentManager.Instance.getDocumentView(doc); + view && SelectionManager.SelectDoc(view, true); } } } diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index 958a37568..8ae71c035 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -190,7 +190,7 @@ export class DashFieldViewInternal extends React.Component c.heading).indexOf(this._fieldKey) === -1 && list.push(new SchemaHeaderField(this._fieldKey, "#f1efeb")); list.map(c => c.heading).indexOf("text") === -1 && list.push(new SchemaHeaderField("text", "#f1efeb")); - alias._pivotField = this._fieldKey; + alias._pivotField = this._fieldKey.startsWith("#") ? "#" : this._fieldKey; this.props.tbox.props.addDocTab(alias, "onRight"); } } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 627c6e363..fc65f34eb 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1267,7 +1267,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.doLinkOnDeselect(); // move the richtextmenu offscreen - if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide(); + //if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide(); } _lastTimedMark: Mark | undefined = undefined; @@ -1346,7 +1346,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp @computed get sidebarColor() { return StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], "transparent")); } render() { TraceMobx(); - const scale = this.props.ContentScaling() * NumCast(this.layoutDoc._viewScale, 1); + const scale = this.props.hideOnLeave ? 1 : this.props.ContentScaling() * NumCast(this.layoutDoc._viewScale, 1); const rounded = StrCast(this.layoutDoc.borderRounding) === "100%" ? "-rounded" : ""; const interactive = Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground; setTimeout(() => this._editorView && RichTextMenu.Instance.updateFromDash(this._editorView, undefined, this.props), this.props.isSelected() ? 10 : 0); // need to make sure that we update a text box that is selected after updating the one that was deselected diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 7ccbfa051..f76707a79 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -77,7 +77,8 @@ export default class RichTextMenu extends AntimodeMenu { super(props); RichTextMenu.Instance = this; this._canFade = false; - this.Pinned = BoolCast(Doc.UserDoc()["menuRichText-pinned"]); + //this.Pinned = BoolCast(Doc.UserDoc()["menuRichText-pinned"]); + this.Pinned = true; this.fontSizeOptions = [ { mark: schema.marks.pFontSize.create({ fontSize: 7 }), title: "Set font size", label: "7pt", command: this.changeFontSize }, @@ -529,7 +530,7 @@ export default class RichTextMenu extends AntimodeMenu { indentParagraph(state: EditorState, dispatch: any) { var tr = state.tr; - let headin = false; + const heading = false; state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => { if (node.type === schema.nodes.paragraph || node.type === schema.nodes.heading) { const nodeval = node.attrs.indent ? Number(node.attrs.indent) : undefined; @@ -539,7 +540,7 @@ export default class RichTextMenu extends AntimodeMenu { } return true; }); - !headin && dispatch?.(tr); + !heading && dispatch?.(tr); return true; } @@ -920,16 +921,22 @@ export default class RichTextMenu extends AntimodeMenu { render() { TraceMobx(); const row1 =
{[ - !this.collapsed ? this.getDragger() : (null), - !this.Pinned ? (null) :
{[ - this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)), - this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)), - this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)), - this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)), - this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)), - this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)), -
- ]}
, + //!this.collapsed ? this.getDragger() : (null), + // !this.Pinned ? (null) :
{[ + // this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)), + // this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)), + // this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)), + // this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)), + // this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)), + // this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)), + //
+ // ]}
, + this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)), + this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)), + this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)), + this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)), + this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)), + this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)), this.createColorButton(), this.createHighlighterButton(), this.createLinkButton(), @@ -957,16 +964,16 @@ export default class RichTextMenu extends AntimodeMenu { this.createButton("minus", "Horizontal Rule", undefined, this.insertHorizontalRule),
,]}
-
- {/*
+ {/*
+ {
-
*/} +
} -
+
*/}
; return ( diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts index 0eca6d753..1616500f6 100644 --- a/src/client/views/nodes/formattedText/nodes_rts.ts +++ b/src/client/views/nodes/formattedText/nodes_rts.ts @@ -79,14 +79,14 @@ export const nodes: { [index: string]: NodeSpec } = { { tag: "h5", attrs: { level: 5 } }, { tag: "h6", attrs: { level: 6 } }], toDOM(node) { - var dom = toParagraphDOM(node) as any; - var level = node.attrs.level || 1; + const dom = toParagraphDOM(node) as any; + const level = node.attrs.level || 1; dom[0] = 'h' + level; return dom; }, getAttrs(dom: any) { - var attrs = getParagraphNodeAttrs(dom) as any; - var level = Number(dom.nodeName.substring(1)) || 1; + const attrs = getParagraphNodeAttrs(dom) as any; + const level = Number(dom.nodeName.substring(1)) || 1; attrs.level = level; return attrs; } diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 43e74ff61..85fc63074 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -528,10 +528,10 @@ export namespace Doc { const cfield = ComputedField.WithoutComputed(() => FieldValue(doc[key])); const field = ProxyField.WithoutProxy(() => doc[key]); const copyObjectField = async (field: ObjectField) => { - const list = await Cast(doc[key], listSpec(Doc)); + const list = Cast(doc[key], listSpec(Doc)); const docs = list && (await DocListCastAsync(list))?.filter(d => d instanceof Doc); if (docs !== undefined && docs.length) { - const clones = await Promise.all(docs.map(async d => await Doc.makeClone(d as Doc, cloneMap, rtfs, exclusions, dontCreate))); + const clones = await Promise.all(docs.map(async d => Doc.makeClone(d, cloneMap, rtfs, exclusions, dontCreate))); !dontCreate && assignKey(new List(clones)); } else if (doc[key] instanceof Doc) { assignKey(key.includes("layout[") ? undefined : key.startsWith("layout") ? doc[key] as Doc : await Doc.makeClone(doc[key] as Doc, cloneMap, rtfs, exclusions, dontCreate)); // reference documents except copy documents that are expanded teplate fields @@ -625,7 +625,7 @@ export namespace Doc { Array.from(map.entries()).forEach(f => docs[f[0]] = f[1]); const docString = JSON.stringify({ id: doc[Id], docs }, replacer); - var zip = new JSZip(); + const zip = new JSZip(); zip.file(doc.title + ".json", docString); diff --git a/src/server/ActionUtilities.ts b/src/server/ActionUtilities.ts index 60f66c878..fd9bc0c83 100644 --- a/src/server/ActionUtilities.ts +++ b/src/server/ActionUtilities.ts @@ -1,11 +1,11 @@ -import { readFile, writeFile, exists, mkdir, unlink, createWriteStream } from 'fs'; -import { ExecOptions } from 'shelljs'; import { exec } from 'child_process'; -import * as path from 'path'; -import * as rimraf from "rimraf"; -import { yellow, Color } from 'colors'; +import { Color, yellow } from 'colors'; +import { createWriteStream, exists, mkdir, readFile, unlink, writeFile } from 'fs'; import * as nodemailer from "nodemailer"; import { MailOptions } from "nodemailer/lib/json-transport"; +import * as path from 'path'; +import * as rimraf from "rimraf"; +import { ExecOptions } from 'shelljs'; import Mail = require('nodemailer/lib/mailer'); const projectRoot = path.resolve(__dirname, "../../"); diff --git a/src/server/ApiManagers/UtilManager.ts b/src/server/ApiManagers/UtilManager.ts index e2cd88726..e657866ce 100644 --- a/src/server/ApiManagers/UtilManager.ts +++ b/src/server/ApiManagers/UtilManager.ts @@ -6,7 +6,6 @@ import { exec } from 'child_process'; // const recommender = new Recommender(); // recommender.testModel(); -import executeImport from "../../scraping/buxton/final/BuxtonImporter"; export default class UtilManager extends ApiManager { diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index 2bf4c1956..890fb6f6d 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -1,23 +1,22 @@ -import { unlinkSync, createWriteStream, readFileSync, rename, writeFile, existsSync } from 'fs'; -import { Utils } from '../Utils'; -import * as path from 'path'; -import * as sharp from 'sharp'; -import request = require('request-promise'); +import { red } from 'colors'; import { ExifImage } from 'exif'; -import { Opt } from '../fields/Doc'; -import { AcceptibleMedia, Upload } from './SharedMediaTypes'; -import { filesDirectory, publicDirectory } from '.'; import { File } from 'formidable'; +import { createWriteStream, existsSync, readFileSync, rename, unlinkSync, writeFile } from 'fs'; +import * as path from 'path'; import { basename } from "path"; -import { createIfNotExists } from './ActionUtilities'; +import * as sharp from 'sharp'; +import { Stream } from 'stream'; +import { filesDirectory, publicDirectory } from '.'; +import { Opt } from '../fields/Doc'; import { ParsedPDF } from "../server/PdfTypes"; +import { Utils } from '../Utils'; +import { createIfNotExists } from './ActionUtilities'; +import { clientPathToFile, Directory, pathToDirectory, serverPathToFile } from './ApiManagers/UploadManager'; +import { resolvedServerUrl } from "./server_Initialization"; +import { AcceptibleMedia, Upload } from './SharedMediaTypes'; +import request = require('request-promise'); const parse = require('pdf-parse'); -import { Directory, serverPathToFile, clientPathToFile, pathToDirectory } from './ApiManagers/UploadManager'; -import { red } from 'colors'; -import { Stream } from 'stream'; -import { resolvedPorts } from './server_Initialization'; const requestImageSize = require("../client/util/request-image-size"); -import { resolvedServerUrl } from "./server_Initialization"; export enum SizeSuffix { Small = "_s", diff --git a/src/server/GarbageCollector.ts b/src/server/GarbageCollector.ts index 24745cbb4..a9a3b0481 100644 --- a/src/server/GarbageCollector.ts +++ b/src/server/GarbageCollector.ts @@ -1,9 +1,9 @@ -import { Database } from './database'; - -import * as path from 'path'; import * as fs from 'fs'; +import * as path from 'path'; +import { Database } from './database'; import { Search } from './Search'; + function addDoc(doc: any, ids: string[], files: { [name: string]: string[] }) { for (const key in doc) { if (!doc.hasOwnProperty(key)) { diff --git a/src/server/MemoryDatabase.ts b/src/server/MemoryDatabase.ts index 1f1d702d9..7f477327e 100644 --- a/src/server/MemoryDatabase.ts +++ b/src/server/MemoryDatabase.ts @@ -1,6 +1,7 @@ -import { IDatabase, DocumentsCollection } from './IDatabase'; -import { Transferable } from './Message'; +import { DH_CHECK_P_NOT_SAFE_PRIME } from 'constants'; import * as mongodb from 'mongodb'; +import { DocumentsCollection, IDatabase } from './IDatabase'; +import { Transferable } from './Message'; export class MemoryDatabase implements IDatabase { diff --git a/src/server/Message.ts b/src/server/Message.ts index ff0381fd3..59b24cd82 100644 --- a/src/server/Message.ts +++ b/src/server/Message.ts @@ -1,6 +1,6 @@ -import { Utils } from "../Utils"; import { Point } from "../pen-gestures/ndollar"; import { AnalysisResult, ImportResults } from "../scraping/buxton/final/BuxtonImporter"; +import { Utils } from "../Utils"; export class Message { private _name: string; diff --git a/src/server/ProcessFactory.ts b/src/server/ProcessFactory.ts index acb8b3a99..63682368f 100644 --- a/src/server/ProcessFactory.ts +++ b/src/server/ProcessFactory.ts @@ -1,8 +1,8 @@ -import { existsSync, mkdirSync } from "fs"; -import { pathFromRoot, fileDescriptorFromStream } from './ActionUtilities'; -import rimraf = require("rimraf"); import { ChildProcess, spawn, StdioOptions } from "child_process"; +import { existsSync, mkdirSync } from "fs"; import { Stream } from "stream"; +import { fileDescriptorFromStream, pathFromRoot } from './ActionUtilities'; +import rimraf = require("rimraf"); export namespace ProcessFactory { diff --git a/src/server/Recommender.ts b/src/server/Recommender.ts deleted file mode 100644 index 935ec3871..000000000 --- a/src/server/Recommender.ts +++ /dev/null @@ -1,133 +0,0 @@ -// //import { Doc } from "../fields/Doc"; -// //import { StrCast } from "../fields/Types"; -// //import { List } from "../fields/List"; -// //import { CognitiveServices } from "../client/cognitive_services/CognitiveServices"; - -// // var w2v = require('word2vec'); -// var assert = require('assert'); -// var arxivapi = require('arxiv-api-node'); -// import requestPromise = require("request-promise"); -// import * as use from '@tensorflow-models/universal-sentence-encoder'; -// import { Tensor } from "@tensorflow/tfjs-core/dist/tensor"; -// require('@tensorflow/tfjs-node'); - -// //http://gnuwin32.sourceforge.net/packages/make.htm - -// export class Recommender { - -// private _model: any; -// static Instance: Recommender; -// private dimension: number = 0; -// private choice: string = ""; // Tensorflow or Word2Vec - -// constructor() { -// Recommender.Instance = this; -// } - -// /*** -// * Loads pre-trained model from TF -// */ - -// public async loadTFModel() { -// let self = this; -// return new Promise(res => { -// use.load().then(model => { -// self.choice = "TF"; -// self._model = model; -// self.dimension = 512; -// res(model); -// }); -// } - -// ); -// } - -// /*** -// * Loads pre-trained model from word2vec -// */ - -// // private loadModel(): Promise { -// // let self = this; -// // return new Promise(res => { -// // w2v.loadModel("./node_modules/word2vec/examples/fixtures/vectors.txt", function (err: any, model: any) { -// // self.choice = "WV"; -// // self._model = model; -// // self.dimension = model.size; -// // res(model); -// // }); -// // }); -// // } - -// /*** -// * Testing -// */ - -// public async testModel() { -// if (!this._model) { -// await this.loadTFModel(); -// } -// if (this._model) { -// if (this.choice === "WV") { -// let similarity = this._model.similarity('father', 'mother'); -// } -// else if (this.choice === "TF") { -// const model = this._model as use.UniversalSentenceEncoder; -// // Embed an array of sentences. -// const sentences = [ -// 'Hello.', -// 'How are you?' -// ]; -// const embeddings = await this.vectorize(sentences); -// if (embeddings) embeddings.print(true /*verbose*/); -// // model.embed(sentences).then(embeddings => { -// // // `embeddings` is a 2D tensor consisting of the 512-dimensional embeddings for each sentence. -// // // So in this example `embeddings` has the shape [2, 512]. -// // embeddings.print(true /* verbose */); -// // }); -// } -// } -// else { -// console.log("model not found :("); -// } -// } - -// /*** -// * Uses model to convert words to vectors -// */ - -// public async vectorize(text: string[]): Promise { -// if (!this._model) { -// await this.loadTFModel(); -// } -// if (this._model) { -// if (this.choice === "WV") { -// let word_vecs = this._model.getVectors(text); -// return word_vecs; -// } -// else if (this.choice === "TF") { -// const model = this._model as use.UniversalSentenceEncoder; -// return new Promise(res => { -// model.embed(text).then(embeddings => { -// res(embeddings); -// }); -// }); - -// } -// } -// } - -// // public async trainModel() { -// // w2v.word2vec("./node_modules/word2vec/examples/eng_news-typical_2016_1M-sentences.txt", './node_modules/word2vec/examples/my_phrases.txt', { -// // cbow: 1, -// // size: 200, -// // window: 8, -// // negative: 25, -// // hs: 0, -// // sample: 1e-4, -// // threads: 20, -// // iter: 200, -// // minCount: 2 -// // }); -// // } - -// } diff --git a/src/server/RouteManager.ts b/src/server/RouteManager.ts index 1a2340afc..78b75d6be 100644 --- a/src/server/RouteManager.ts +++ b/src/server/RouteManager.ts @@ -1,8 +1,8 @@ -import RouteSubscriber from "./RouteSubscriber"; -import { DashUserModel } from "./authentication/DashUserModel"; -import { Request, Response, Express } from 'express'; -import { cyan, red, green } from 'colors'; +import { cyan, green, red } from 'colors'; +import { Express, Request, Response } from 'express'; import { AdminPriviliges } from "."; +import { DashUserModel } from "./authentication/DashUserModel"; +import RouteSubscriber from "./RouteSubscriber"; export enum Method { GET, diff --git a/src/server/Search.ts b/src/server/Search.ts index 21064e520..decd1f5b1 100644 --- a/src/server/Search.ts +++ b/src/server/Search.ts @@ -1,5 +1,5 @@ -import * as rp from 'request-promise'; import { red } from 'colors'; +import * as rp from 'request-promise'; const pathTo = (relative: string) => `http://localhost:8983/solr/dash/${relative}`; diff --git a/src/server/database.ts b/src/server/database.ts index 2372cbcf2..b7aa77f5d 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -1,11 +1,11 @@ import * as mongodb from 'mongodb'; -import { Transferable } from './Message'; +import * as mongoose from 'mongoose'; import { Opt } from '../fields/Doc'; -import { Utils, emptyFunction } from '../Utils'; +import { emptyFunction, Utils } from '../Utils'; import { GoogleApiServerUtils } from './apis/google/GoogleApiServerUtils'; -import { IDatabase, DocumentsCollection } from './IDatabase'; +import { DocumentsCollection, IDatabase } from './IDatabase'; import { MemoryDatabase } from './MemoryDatabase'; -import * as mongoose from 'mongoose'; +import { Transferable } from './Message'; import { Upload } from './SharedMediaTypes'; export namespace Database { diff --git a/src/server/downsize.ts b/src/server/downsize.ts index 5cd709fa3..382994e2d 100644 --- a/src/server/downsize.ts +++ b/src/server/downsize.ts @@ -1,5 +1,5 @@ -import * as sharp from 'sharp'; import * as fs from 'fs'; +import * as sharp from 'sharp'; const folder = "./src/server/public/files/"; const pngTypes = ["png", "PNG"]; diff --git a/src/server/index.ts b/src/server/index.ts index 9af4b00bc..9185e3c5e 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -1,29 +1,29 @@ require('dotenv').config(); -import { GoogleApiServerUtils } from "./apis/google/GoogleApiServerUtils"; +import { yellow } from "colors"; import * as mobileDetect from 'mobile-detect'; import * as path from 'path'; -import { Database } from './database'; -import { DashUploadUtils } from './DashUploadUtils'; -import RouteSubscriber from './RouteSubscriber'; -import initializeServer, { resolvedPorts } from './server_Initialization'; -import RouteManager, { Method, _success, _permission_denied, _error, _invalid, PublicHandler } from './RouteManager'; import * as qs from 'query-string'; -import UtilManager from './ApiManagers/UtilManager'; -import { SearchManager } from './ApiManagers/SearchManager'; -import UserManager from './ApiManagers/UserManager'; -import DownloadManager from './ApiManagers/DownloadManager'; -import { GoogleCredentialsLoader, SSL } from './apis/google/CredentialsLoader'; -import DeleteManager from "./ApiManagers/DeleteManager"; -import PDFManager from "./ApiManagers/PDFManager"; -import UploadManager from "./ApiManagers/UploadManager"; import { log_execution } from "./ActionUtilities"; +import DeleteManager from "./ApiManagers/DeleteManager"; +import DownloadManager from './ApiManagers/DownloadManager'; import GeneralGoogleManager from "./ApiManagers/GeneralGoogleManager"; -import HypothesisManager from "./ApiManagers/HypothesisManager"; import GooglePhotosManager from "./ApiManagers/GooglePhotosManager"; -import { Logger } from "./ProcessFactory"; -import { yellow } from "colors"; +import HypothesisManager from "./ApiManagers/HypothesisManager"; +import PDFManager from "./ApiManagers/PDFManager"; +import { SearchManager } from './ApiManagers/SearchManager'; import SessionManager from "./ApiManagers/SessionManager"; +import UploadManager from "./ApiManagers/UploadManager"; +import UserManager from './ApiManagers/UserManager'; +import UtilManager from './ApiManagers/UtilManager'; +import { GoogleCredentialsLoader, SSL } from './apis/google/CredentialsLoader'; +import { GoogleApiServerUtils } from "./apis/google/GoogleApiServerUtils"; import { AppliedSessionAgent } from "./DashSession/Session/agents/applied_session_agent"; +import { DashUploadUtils } from './DashUploadUtils'; +import { Database } from './database'; +import { Logger } from "./ProcessFactory"; +import RouteManager, { Method, PublicHandler } from './RouteManager'; +import RouteSubscriber from './RouteSubscriber'; +import initializeServer, { resolvedPorts } from './server_Initialization'; export const AdminPriviliges: Map = new Map(); export const onWindows = process.platform === "win32"; diff --git a/src/server/server_Initialization.ts b/src/server/server_Initialization.ts index 744d4547b..e40f2b8e5 100644 --- a/src/server/server_Initialization.ts +++ b/src/server/server_Initialization.ts @@ -1,31 +1,31 @@ +import * as bodyParser from 'body-parser'; +import { blue, yellow } from 'colors'; +import * as cookieParser from 'cookie-parser'; +import * as cors from "cors"; import * as express from 'express'; -import * as expressValidator from 'express-validator'; import * as session from 'express-session'; +import * as expressValidator from 'express-validator'; +import * as fs from 'fs'; +import { Server as HttpServer } from "http"; +import { createServer, Server as HttpsServer } from "https"; import * as passport from 'passport'; -import * as bodyParser from 'body-parser'; -import * as cookieParser from 'cookie-parser'; -import expressFlash = require('express-flash'); -import flash = require('connect-flash'); -import { Database } from './database'; -import { getForgot, getLogin, getLogout, getReset, getSignup, postForgot, postLogin, postReset, postSignup } from './authentication/AuthenticationManager'; -const MongoStore = require('connect-mongo')(session); -import RouteManager from './RouteManager'; -import { WebSocket } from './websocket'; +import * as request from 'request'; import * as webpack from 'webpack'; -const config = require('../../webpack.config'); -const compiler = webpack(config); import * as wdm from 'webpack-dev-middleware'; import * as whm from 'webpack-hot-middleware'; -import * as fs from 'fs'; -import * as request from 'request'; -import RouteSubscriber from './RouteSubscriber'; import { publicDirectory } from '.'; import { logPort } from './ActionUtilities'; -import { blue, yellow } from 'colors'; -import * as cors from "cors"; -import { createServer, Server as HttpsServer } from "https"; -import { Server as HttpServer } from "http"; import { SSL } from './apis/google/CredentialsLoader'; +import { getForgot, getLogin, getLogout, getReset, getSignup, postForgot, postLogin, postReset, postSignup } from './authentication/AuthenticationManager'; +import { Database } from './database'; +import RouteManager from './RouteManager'; +import RouteSubscriber from './RouteSubscriber'; +import { WebSocket } from './websocket'; +import expressFlash = require('express-flash'); +import flash = require('connect-flash'); +const MongoStore = require('connect-mongo')(session); +const config = require('../../webpack.config'); +const compiler = webpack(config); /* RouteSetter is a wrapper around the server that prevents the server from being exposed. */ diff --git a/src/server/websocket.ts b/src/server/websocket.ts index f63a35e43..d5f89a750 100644 --- a/src/server/websocket.ts +++ b/src/server/websocket.ts @@ -1,21 +1,20 @@ -import * as fs from 'fs'; -import { logPort } from './ActionUtilities'; -import { Utils } from "../Utils"; -import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent, MobileDocumentUploadContent, RoomMessage } from "./Message"; -import { Client } from "./Client"; -import { Socket } from "socket.io"; -import { Database } from "./database"; -import { Search } from "./Search"; -import * as sio from 'socket.io'; -import YoutubeApi from "./apis/youtube/youtubeApiSample"; -import { GoogleCredentialsLoader, SSL } from "./apis/google/CredentialsLoader"; -import { timeMap } from "./ApiManagers/UserManager"; import { green } from "colors"; +import * as express from "express"; +import { createServer, Server } from "https"; import { networkInterfaces } from "os"; +import * as sio from 'socket.io'; +import { Socket } from "socket.io"; import executeImport from "../scraping/buxton/final/BuxtonImporter"; +import { Utils } from "../Utils"; +import { logPort } from './ActionUtilities'; +import { timeMap } from "./ApiManagers/UserManager"; +import { GoogleCredentialsLoader, SSL } from "./apis/google/CredentialsLoader"; +import YoutubeApi from "./apis/youtube/youtubeApiSample"; +import { Client } from "./Client"; +import { Database } from "./database"; import { DocumentsCollection } from "./IDatabase"; -import { createServer, Server } from "https"; -import * as express from "express"; +import { Diff, GestureContent, MessageStore, MobileDocumentUploadContent, MobileInkOverlayContent, Transferable, Types, UpdateMobileInkOverlayPositionContent, YoutubeQueryInput, YoutubeQueryTypes } from "./Message"; +import { Search } from "./Search"; import { resolvedPorts } from './server_Initialization'; export namespace WebSocket { -- cgit v1.2.3-70-g09d2 From 3e4329b81d96f139f38eeb182afcbd8359dcd171 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Thu, 6 Aug 2020 19:51:25 +0530 Subject: alias and acl related fixes --- src/client/documents/Documents.ts | 1 + src/client/views/collections/CollectionView.tsx | 3 ++- .../collectionFreeForm/PropertiesView.tsx | 20 +++++++++++--------- src/fields/Doc.ts | 4 ++-- src/fields/util.ts | 2 +- 5 files changed, 17 insertions(+), 13 deletions(-) (limited to 'src/fields/Doc.ts') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 7719b3eef..61a44a39d 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -565,6 +565,7 @@ export namespace Docs { // without this, if a doc has no annotations but the user has AddOnly privileges, they won't be able to add an annotation because they would have needed to create the field's list which they don't have permissions to do. dataDoc[fieldKey + "-annotations"] = new List(); + dataDoc.aliases = new List(); proto.links = ComputedField.MakeFunction("links(self)"); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index dcd5a31f6..4d1cb670c 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -151,7 +151,8 @@ export class CollectionView extends Touchable { for (const [key, value] of Object.entries(this.props.Document[AclSym])) { - distributeAcls(key, this.AclMap.get(value) as SharingPermissions, d, true); + if (d.author === Doc.CurrentUserEmail && !d.aliasOf) distributeAcls(key, SharingPermissions.Admin, d, true); + else distributeAcls(key, this.AclMap.get(value) as SharingPermissions, d, true); } }); } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index d22c00b1f..5634a438a 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -25,6 +25,7 @@ import "./FormatShapePane.scss"; import { discovery_v1 } from "googleapis"; import { PresBox } from "../../nodes/PresBox"; import { DocumentManager } from "../../../util/DocumentManager"; +import FormatShapePane from "./FormatShapePane"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -51,8 +52,8 @@ export class PropertiesView extends React.Component { @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) { return SelectionManager.SelectedDocuments()[0]; - } else if (PresBox.Instance._selectedArray.length >= 1) { - return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); + } else if (PresBox.Instance?._selectedArray.length >= 1) { + return DocumentManager.Instance.getDocumentView(PresBox.Instance?.rootDoc); } else { return undefined; } } @computed get isPres(): boolean { @@ -72,6 +73,7 @@ export class PropertiesView extends React.Component { @observable openTransform: boolean = true; // @observable selectedUser: string = ""; // @observable addButtonPressed: boolean = false; + //Pres Trails booleans: @observable openAddSlide: boolean = true; @observable openPresentationTools: boolean = true; @@ -957,9 +959,9 @@ export class PropertiesView extends React.Component {
{this.editableTitle}
- {PresBox.Instance._selectedArray.length} selected + {PresBox.Instance?._selectedArray.length} selected
- {PresBox.Instance.listOfSelected} + {PresBox.Instance?.listOfSelected}
@@ -973,7 +975,7 @@ export class PropertiesView extends React.Component {
{this.openAddSlide ?
- {PresBox.Instance.newDocumentDropdown} + {PresBox.Instance?.newDocumentDropdown}
: null}
@@ -986,7 +988,7 @@ export class PropertiesView extends React.Component {
{this.openPresTransitions ?
- {PresBox.Instance.transitionDropdown} + {PresBox.Instance?.transitionDropdown}
: null}
@@ -999,20 +1001,20 @@ export class PropertiesView extends React.Component {
{this.openPresProgressivize ?
- {PresBox.Instance.progressivizeDropdown} + {PresBox.Instance?.progressivizeDropdown}
: null}
runInAction(() => { this.openSlideOptions = !this.openSlideOptions; })} style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}> -     {PresBox.Instance.stringType} options +     {PresBox.Instance?.stringType} options
{this.openSlideOptions ?
- {PresBox.Instance.optionsDropdown} + {PresBox.Instance?.optionsDropdown}
: null}
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 6163fedbb..6bfe91378 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -508,9 +508,9 @@ export namespace Doc { alias.aliasOf = doc; alias.title = ComputedField.MakeFunction(`renameAlias(this, ${Doc.GetProto(doc).aliasNumber = NumCast(Doc.GetProto(doc).aliasNumber) + 1})`); alias.author = Doc.CurrentUserEmail; + alias[AclSym] = doc[AclSym]; - if (!doc.aliases) doc.aliases = new List([alias]); - else Doc.AddDocToList(doc, "aliases", alias); + Doc.AddDocToList(doc[DataSym], "aliases", alias); return alias; } diff --git a/src/fields/util.ts b/src/fields/util.ts index 44a3317db..4c71572db 100644 --- a/src/fields/util.ts +++ b/src/fields/util.ts @@ -220,7 +220,7 @@ export function distributeAcls(key: string, acl: SharingPermissions, target: Doc // maps over the aliases of the document if (target.aliases) { DocListCast(target.aliases).map(alias => { - distributeAcls(key, acl, alias); + distributeAcls(key, acl, alias, inheritingFromCollection); }); } -- cgit v1.2.3-70-g09d2