From 58b780563c7fc4a1496f5c676f2d14faddb096e0 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Fri, 3 Jul 2020 17:32:40 -0700 Subject: merge with master --- src/client/util/CurrentUserUtils.ts | 152 +++++++++++++++++++++++------------ src/client/util/InteractionUtils.tsx | 8 +- src/client/util/LinkManager.ts | 2 +- src/client/util/SettingsManager.scss | 21 +++++ 4 files changed, 127 insertions(+), 56 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 40bc24917..4276e04e4 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -54,6 +54,25 @@ export class CurrentUserUtils { removeDropProperties: new List(["dropAction"]), title: "query view", icon: "question-circle" }); } + // Prototype for mobile button (not sure if 'Advanced Item Prototypes' is ideal location) + if (doc["template-mobile-button"] === undefined) { + const queryTemplate = this.mobileButton({ + title: "NEW MOBILE BUTTON", + onClick: undefined, + }, + [this.ficon({ + ignoreClick: true, + icon: "mobile", + backgroundColor: "rgba(0,0,0,0)" + }), + this.mobileTextContainer({}, + [this.mobileButtonText({}, "NEW MOBILE BUTTON"), this.mobileButtonInfo({}, "You can customize this button and make it your own.")])]); + doc["template-mobile-button"] = CurrentUserUtils.ficon({ + onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'), + dragFactory: new PrefetchProxy(queryTemplate) as any as Doc, + removeDropProperties: new List(["dropAction"]), title: "mobile button", icon: "mobile" + }); + } if (doc["template-button-slides"] === undefined) { const slideTemplate = Docs.Create.MultirowDocument( @@ -219,6 +238,7 @@ export class CurrentUserUtils { doc["template-button-slides"] as Doc, doc["template-button-description"] as Doc, doc["template-button-query"] as Doc, + doc["template-mobile-button"] as Doc, doc["template-button-detail"] as Doc, doc["template-button-link"] as Doc, doc["template-button-switch"] as Doc]; @@ -343,7 +363,7 @@ export class CurrentUserUtils { } else { const templateIconsDoc = Cast(doc["template-icons"], Doc, null); const requiredTypes = [doc["template-icon-view"] as Doc, doc["template-icon-view-img"] as Doc, - doc["template-icon-view-col"] as Doc, doc["template-icon-view-rtf"] as Doc, doc["template-icon-view-pdf"] as Doc]; + doc["template-icon-view-col"] as Doc, doc["template-icon-view-rtf"] as Doc]; DocListCastAsync(templateIconsDoc.data).then(async curIcons => { await Promise.all(curIcons!); requiredTypes.map(ntype => Doc.AddDocToList(templateIconsDoc, "data", ntype)); @@ -378,6 +398,9 @@ export class CurrentUserUtils { if (doc.emptyWebpage === undefined) { doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true }); } + if (doc.activeMobileMenu === undefined) { + this.setupActiveMobileMenu(doc); + } return [ { title: "Drag a comparison box", label: "Comp", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc }, { title: "Drag a collection", label: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc }, @@ -391,7 +414,7 @@ export class CurrentUserUtils { { title: "Drag a search box", label: "Query", icon: "search", ignoreClick: true, drag: 'Docs.Create.QueryDocument({ _width: 200, title: "an image of a cat" })' }, { title: "Drag a scripting box", label: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc }, { title: "Drag an import folder", label: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' }, - { title: "Drag a mobile view", label: "Phone", icon: "phone", ignoreClick: true, drag: 'Doc.UserDoc().activeMobile' }, + { title: "Drag a mobile view", label: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc }, { title: "Drag an instance of the device collection", label: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' }, // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, @@ -445,25 +468,72 @@ export class CurrentUserUtils { return doc.myItemCreators as Doc; } - static setupMobileButtons(doc: Doc, buttons?: string[]) { - const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [ - { title: "record", icon: "microphone", ignoreClick: true, click: "FILL" }, - { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, - { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, - { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc }, - { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc }, - // { title: "draw", icon: "pen-nib", click: 'switchMobileView(setupMobileInkingDoc, renderMobileInking, onSwitchMobileInking);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "red", activeInkPen: doc }, - { title: "upload", icon: "upload", click: 'switchMobileView(setupMobileUploadDoc, renderMobileUpload, onSwitchMobileUpload);', backgroundColor: "orange" }, - // { title: "upload", icon: "upload", click: 'uploadImageMobile();', backgroundColor: "cyan" }, - ]; - return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({ - _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100, dropAction: data.click ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick, - onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined, - ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activeInkPen: data.activeInkPen, - backgroundColor: data.backgroundColor, removeDropProperties: new List(["dropAction"]), dragFactory: data.dragFactory, + // Sets up mobile menu if it is undefined creates a new one, otherwise returns existing menu + static setupActiveMobileMenu(doc: Doc) { + if (doc.activeMobileMenu === undefined) { + console.log("undefined"); + doc.activeMobileMenu = this.setupMobileMenu(); + } + return doc.activeMobileMenu as Doc; + } + + // Sets up mobileMenu stacking document + static setupMobileMenu() { + const menu = new PrefetchProxy(Docs.Create.StackingDocument(this.setupMobileButtons(), { + _width: 980, ignoreClick: true, lockedPosition: false, _chromeStatus: "disabled", title: "home", _yMargin: 100 })); + return menu; + } + + // SEts up mobile buttons for inside mobile menu + static setupMobileButtons(doc?: Doc, buttons?: string[]) { + const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ + { title: "WORKSPACES", icon: "bars", click: 'switchToMobileLibrary()', backgroundColor: "lightgrey", info: "Access your Workspaces from your mobile, and navigate through all of your documents. " }, + { title: "UPLOAD", icon: "upload", click: 'openMobileUploads()', backgroundColor: "lightgrey", info: "Upload files from your mobile device so they can be accessed on Dash Web." }, + { title: "MOBILE UPLOAD", icon: "mobile", click: 'switchToMobileUploadCollection()', backgroundColor: "lightgrey", info: "Access the collection of your mobile uploads." }, + { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey", info: "Use your phone to record, dictate and then upload audio onto Dash Web." }, + { title: "PRESENTATION", icon: "desktop", click: 'switchToMobilePresentation()', backgroundColor: "lightgrey", info: "Use your phone as a remote for you presentation." }, + { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey", info: "Change your password, log out, or manage your account security." } + ]; + // returns a list of mobile buttons + return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => + this.mobileButton({ + title: data.title, + lockedPosition: true, + onClick: data.click ? ScriptField.MakeScript(data.click) : undefined, + _backgroundColor: data.backgroundColor + }, + [this.ficon({ ignoreClick: true, icon: data.icon, backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, data.title), this.mobileButtonInfo({}, data.info)])]) + ); } + // sets up the main document for the mobile button + static mobileButton = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MulticolumnDocument(docs, { + ...opts, + dropAction: undefined, removeDropProperties: new List(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15, + borderRounding: "5px", boxShadow: "0 0", _chromeStatus: "disabled" + }) as any as Doc + + // sets up the text container for the information contained within the mobile button + static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MultirowDocument(docs, { + ...opts, + dropAction: undefined, removeDropProperties: new List(["dropAction"]), _nativeWidth: 450, _nativeHeight: 250, _width: 450, _height: 250, _yMargin: 25, + backgroundColor: "rgba(0,0,0,0)", borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", ignoreClick: true + }) as any as Doc + + // Sets up the title of the button + static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => Docs.Create.TextDocument(buttonTitle, { + ...opts, + dropAction: undefined, title: buttonTitle, _fontSize: 37, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)" + }) as any as Doc + + // Sets up the description of the button + static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => Docs.Create.TextDocument(buttonInfo, { + ...opts, + dropAction: undefined, title: "info", _fontSize: 25, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)", _dimMagnitude: 2, + }) as any as Doc + + static setupThumbButtons(doc: Doc) { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, pointerDown?: string, pointerUp?: string, ischecked?: string, clipboard?: Doc, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [ { title: "use pen", icon: "pen-nib", pointerUp: "resetPen()", pointerDown: 'setPen(2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, @@ -497,31 +567,12 @@ export class CurrentUserUtils { return Cast(userDoc.thumbDoc, Doc); } - static setupMobileDoc(userDoc: Doc) { - return userDoc.activeMoble ?? Docs.Create.MasonryDocument(CurrentUserUtils.setupMobileButtons(userDoc), { - _columnWidth: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", _autoHeight: true, _yMargin: 5 - }); - } - - static setupMobileInkingDoc(userDoc: Doc) { - return Docs.Create.FreeformDocument([], { title: "Mobile Inking", backgroundColor: "white" }); - } - - static setupMobileUploadDoc(userDoc: Doc) { - // const addButton = Docs.Create.FontIconDocument({ onDragStart: ScriptField.MakeScript('addWebToMobileUpload()'), title: "Add Web Doc to Upload Collection", icon: "plus", backgroundColor: "black" }) - const webDoc = Docs.Create.WebDocument("https://www.britannica.com/biography/Miles-Davis", { - title: "Upload Images From the Web", _chromeStatus: "enabled", lockedPosition: true - }); - const uploadDoc = Docs.Create.StackingDocument([], { - title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true - }); - return Docs.Create.StackingDocument([webDoc, uploadDoc], { - _width: screen.width, lockedPosition: true, _chromeStatus: "disabled", title: "Upload", _autoHeight: true, _yMargin: 80, backgroundColor: "lightgray" - }); + static setupLibrary(userDoc: Doc) { + return CurrentUserUtils.setupWorkspaces(userDoc); } - // setup the Creator button which will display the creator panel. This panel will include the drag creators and the color picker. - // when clicked, this panel will be displayed in the target container (ie, sidebarContainer) + // setup the Creator button which will display the creator panel. This panel will include the drag creators and the color picker. + // when clicked, this panel will be displayed in the target container (ie, sidebarContainer) static async setupToolsBtnPanel(doc: Doc, sidebarContainer: Doc) { // setup a masonry view of all he creators const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc); @@ -625,7 +676,7 @@ export class CurrentUserUtils { return doc["tabs-button-library"] as Doc; } - // setup the Search button which will display the search panel. + // setup the Search button which will display the search panel. static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) { if (doc["tabs-button-search"] === undefined) { doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({ @@ -715,12 +766,14 @@ export class CurrentUserUtils { } } + // Right sidebar is where mobile uploads are contained static setupRightSidebar(doc: Doc) { if (doc.rightSidebarCollection === undefined) { - doc.rightSidebarCollection = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Right Sidebar" })); + doc.rightSidebarCollection = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Mobile Uploads" })); } } + static setupClickEditorTemplates(doc: Doc) { if (doc["clickFuncs-child"] === undefined) { const openInTarget = Docs.Create.ScriptingDocument(ScriptField.MakeScript( @@ -771,13 +824,14 @@ export class CurrentUserUtils { doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "none"); doc.activeDash = StrCast(doc.activeDash, "0"); doc.fontSize = NumCast(doc.fontSize, 12); - doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // - doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // + doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // + doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]); this.setupDefaultIconTemplates(doc); // creates a set of icon templates triggered by the document deoration icon 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.setupOverlays(doc); // documents in overlay layer + this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile + this.setupOverlays(doc); // documents in overlay layer this.setupDockedButtons(doc); // the bottom bar of font icons this.setupDefaultPresentation(doc); // presentation that's initially triggered await this.setupSidebarButtons(doc); // the pop-out left sidebar of tools/panels @@ -816,9 +870,5 @@ export class CurrentUserUtils { } } -Scripting.addGlobal(function setupMobileInkingDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileInkingDoc(userDoc); }, - "initializes the Mobile inking document", "(userDoc: Doc)"); -Scripting.addGlobal(function setupMobileUploadDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileUploadDoc(userDoc); }, - "initializes the Mobile upload document", "(userDoc: Doc)"); Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); }, - "creates a new workspace when called"); \ No newline at end of file + "creates a new workspace when called"); diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index edeb461e0..02b444cd3 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -27,7 +27,7 @@ export namespace InteractionUtils { export interface MultiTouchEventDisposer { (): void; } /** - * + * * @param element - element to turn into a touch target * @param startFunc - event handler, typically Touchable.onTouchStart (classes that inherit touchable can pass in this.onTouchStart) */ @@ -278,8 +278,8 @@ export namespace InteractionUtils { /** * Returns euclidean distance between two points - * @param pt1 - * @param pt2 + * @param pt1 + * @param pt2 */ export function TwoPointEuclidist(pt1: React.Touch, pt2: React.Touch): number { return Math.sqrt(Math.pow(pt1.clientX - pt2.clientX, 2) + Math.pow(pt1.clientY - pt2.clientY, 2)); @@ -410,4 +410,4 @@ export namespace InteractionUtils { // } // } } -} \ No newline at end of file +} diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts index 9b4dc2630..749fabfcc 100644 --- a/src/client/util/LinkManager.ts +++ b/src/client/util/LinkManager.ts @@ -49,7 +49,7 @@ export class LinkManager { } public deleteLink(linkDoc: Doc): boolean { - if (LinkManager.Instance.LinkManagerDoc) { + if (LinkManager.Instance.LinkManagerDoc && linkDoc instanceof Doc) { Doc.RemoveDocFromList(LinkManager.Instance.LinkManagerDoc, "data", linkDoc); return true; } diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index fa2609ca2..13c65042c 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -133,5 +133,26 @@ + } +} + +@media only screen and (max-device-width: 480px) { + .settings-interface { + width: 80vw; + height: 400px; + } + + .settings-interface .settings-body .settings-content input { + font-size: 30; + } + + .settings-interface button { + width: 100%; + font-size: 30px; + background: #b2cef8; + } + + .settings-interface .settings-heading { + font-size: 25; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 876437db1f7347787badbdd48ac751dba111a752 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Wed, 8 Jul 2020 08:57:21 -0700 Subject: store hypothesis API tokens to database --- src/client/util/CurrentUserUtils.ts | 2 +- src/server/ApiManagers/HypothesisManager.ts | 14 ++++------- src/server/database.ts | 39 ++++++++++++++++++++++++++++- 3 files changed, 44 insertions(+), 11 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 8099228c6..cb2a025cb 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -424,7 +424,7 @@ export class CurrentUserUtils { { title: "Drag a document previewer", label: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.emptyDocHolder as Doc }, { title: "Toggle a Calculator REPL", label: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' }, { title: "Connect a Google Account", label: "Google Account", icon: "external-link-alt", click: 'GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' }, - { title: "Connect a Hypothesis Account", label: "Hypothesis Account", icon: "heading", click: 'HypothesisAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' }, + { title: "Connect a Hypothesis Account", label: "Hypothesis Account", icon: "heading", click: 'HypothesisAuthenticationManager.Instance.fetchAccessToken(true)' }, ]; } diff --git a/src/server/ApiManagers/HypothesisManager.ts b/src/server/ApiManagers/HypothesisManager.ts index 33badbc42..73c707a55 100644 --- a/src/server/ApiManagers/HypothesisManager.ts +++ b/src/server/ApiManagers/HypothesisManager.ts @@ -13,11 +13,8 @@ export default class HypothesisManager extends ApiManager { method: Method.GET, subscription: "/readHypothesisAccessToken", secureHandler: async ({ user, res }) => { - if (existsSync(serverPathToFile(Directory.hypothesis, user.id))) { - const read = readFileSync(serverPathToFile(Directory.hypothesis, user.id), "base64") || ""; - console.log("READ = " + read); - res.send(read); - } else res.send(""); + const credentials = await Database.Auxiliary.HypothesisAccessToken.Fetch(user.id); + res.send(credentials?.hypothesisApiKey ?? ""); } }); @@ -25,9 +22,8 @@ export default class HypothesisManager extends ApiManager { method: Method.POST, subscription: "/writeHypothesisAccessToken", secureHandler: async ({ user, req, res }) => { - const write = req.body.authenticationCode; - console.log("WRITE = " + write); - res.send(await writeFile(serverPathToFile(Directory.hypothesis, user.id), write, "base64", () => { })); + await Database.Auxiliary.HypothesisAccessToken.Write(user.id, req.body.authenticationCode); + res.send(); } }); @@ -35,7 +31,7 @@ export default class HypothesisManager extends ApiManager { method: Method.GET, subscription: "/revokeHypothesisAccessToken", secureHandler: async ({ user, res }) => { - await Database.Auxiliary.GoogleAccessToken.Revoke("dash-hyp-" + user.id); + await Database.Auxiliary.HypothesisAccessToken.Revoke(user.id); res.send(); } }); diff --git a/src/server/database.ts b/src/server/database.ts index 2372cbcf2..7fbab357b 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -304,7 +304,8 @@ export namespace Database { */ export enum AuxiliaryCollections { GooglePhotosUploadHistory = "uploadedFromGooglePhotos", - GoogleAccess = "googleAuthentication" + GoogleAccess = "googleAuthentication", + HypothesisAccess = "hypothesisAuthentication" } /** @@ -405,6 +406,42 @@ export namespace Database { } + export namespace HypothesisAccessToken { + /** + * Format stored in database. + */ + interface StoredCredentials { + userId: string; + hypothesisApiKey: string; + _id?: string; + } + + /** + * Writes the @param enrichedCredentials to the database, associated + * with @param userId for later retrieval and updating. + */ + export const Write = async (userId: string, hypothesisApiKey: string) => { + return Instance.insert({ userId, hypothesisApiKey }, AuxiliaryCollections.HypothesisAccess); + }; + + /** + * Retrieves the credentials associaed with @param userId + * and optionally removes their database id according to @param removeId. + */ + export const Fetch = async (userId: string, removeId = true): Promise> => { + return SanitizedSingletonQuery({ userId }, AuxiliaryCollections.HypothesisAccess, removeId); + }; + + /** + * Revokes the credentials associated with @param userId. + */ + export const Revoke = async (userId: string) => { + const entry = await Fetch(userId, false); + if (entry) { + Instance.delete({ _id: entry._id }, AuxiliaryCollections.HypothesisAccess); + } + }; + } } } -- cgit v1.2.3-70-g09d2 From ba8549220295d03fb7eb7d7d31c90af72b30b1a6 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Thu, 30 Jul 2020 10:38:57 -0700 Subject: remove unnecessary authentication/database stuff --- .../apis/HypothesisAuthenticationManager.tsx | 164 --------------------- src/client/apis/hypothesis/HypothesisUtils.ts | 18 +-- src/client/util/CurrentUserUtils.ts | 1 - src/client/util/SettingsManager.tsx | 6 - src/client/views/GlobalKeyHandler.ts | 2 - src/client/views/linking/LinkMenuItem.tsx | 2 +- src/server/ApiManagers/HypothesisManager.ts | 40 ----- src/server/ApiManagers/UploadManager.ts | 1 - src/server/apis/google/GoogleApiServerUtils.ts | 1 - src/server/database.ts | 38 ----- src/server/index.ts | 2 - 11 files changed, 4 insertions(+), 271 deletions(-) delete mode 100644 src/client/apis/HypothesisAuthenticationManager.tsx delete mode 100644 src/server/ApiManagers/HypothesisManager.ts (limited to 'src/client/util') diff --git a/src/client/apis/HypothesisAuthenticationManager.tsx b/src/client/apis/HypothesisAuthenticationManager.tsx deleted file mode 100644 index 653f21a7a..000000000 --- a/src/client/apis/HypothesisAuthenticationManager.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import { observable, action, reaction, runInAction, IReactionDisposer } from "mobx"; -import { observer } from "mobx-react"; -import * as React from "react"; -import MainViewModal from "../views/MainViewModal"; -import { Opt } from "../../fields/Doc"; -import { Networking } from "../Network"; -import "./HypothesisAuthenticationManager.scss"; -import { Scripting } from "../util/Scripting"; -import { Hypothesis } from "./hypothesis/HypothesisUtils"; - -const prompt = "Paste authorization code here..."; - -@observer -export default class HypothesisAuthenticationManager extends React.Component<{}> { - public static Instance: HypothesisAuthenticationManager; - private authenticationLink: Opt = undefined; - @observable private openState = false; - @observable private authenticationCode: Opt = undefined; - @observable private showPasteTargetState = false; - @observable private success: Opt = undefined; - @observable private displayLauncher = true; - @observable private credentials: { username: string, apiKey: string } | undefined; - private disposer: Opt; - - private set isOpen(value: boolean) { - runInAction(() => this.openState = value); - } - - private set shouldShowPasteTarget(value: boolean) { - runInAction(() => this.showPasteTargetState = value); - } - - public cancel() { - this.openState && this.resetState(0, 0); - } - - public fetchAccessToken = async (displayIfFound = false) => { - const jsonResponse = await Networking.FetchFromServer("/readHypothesisAccessToken"); - const response = jsonResponse !== "" ? JSON.parse(jsonResponse) : undefined; - // if this is an authentication url, activate the UI to register the new access token - if (!response) { - this.isOpen = true; - this.authenticationLink = response; - return new Promise(async resolve => { - this.disposer?.(); - this.disposer = reaction( - () => this.authenticationCode, - async authenticationCode => { - const userProfile = authenticationCode && await Hypothesis.fetchUser(authenticationCode); - if (userProfile && userProfile.userid !== null) { - this.disposer?.(); - const hypothesisUsername = Hypothesis.extractUsername(userProfile.userid); // extract username from profile - Networking.PostToServer("/writeHypothesisAccessToken", { authenticationCode, hypothesisUsername }); - runInAction(() => { - this.success = true; - this.credentials = { username: hypothesisUsername, apiKey: authenticationCode! }; - }); - this.resetState(); - resolve(authenticationCode); - } - } - ); - }); - } - - if (displayIfFound) { - runInAction(() => { - this.success = true; - this.credentials = response; - }); - this.resetState(-1, -1); - this.isOpen = true; - } - return response; - } - - resetState = action((visibleForMS: number = 3000, fadesOutInMS: number = 500) => { - if (!visibleForMS && !fadesOutInMS) { - runInAction(() => { - this.isOpen = false; - this.success = undefined; - this.displayLauncher = true; - this.credentials = undefined; - this.shouldShowPasteTarget = false; - this.authenticationCode = undefined; - }); - return; - } - this.authenticationCode = undefined; - this.displayLauncher = false; - this.shouldShowPasteTarget = false; - if (visibleForMS > 0 && fadesOutInMS > 0) { - setTimeout(action(() => { - this.isOpen = false; - setTimeout(action(() => { - this.success = undefined; - this.displayLauncher = true; - this.credentials = undefined; - }), fadesOutInMS); - }), visibleForMS); - } - }); - - constructor(props: {}) { - super(props); - HypothesisAuthenticationManager.Instance = this; - } - - private get renderPrompt() { - return ( -
- - {this.displayLauncher ? : (null)} - {this.showPasteTargetState ? this.authenticationCode = e.currentTarget.value)} - placeholder={prompt} - /> : (null)} - {this.credentials ? - <> - Welcome to Dash, {this.credentials.username} - -
{ - await Networking.FetchFromServer("/revokeHypothesisAccessToken"); - this.resetState(0, 0); - }} - >Disconnect Account
- : (null)} -
- ); - } - - private get dialogueBoxStyle() { - const borderColor = this.success === undefined ? "black" : this.success ? "green" : "red"; - return { borderColor, transition: "0.2s borderColor ease", zIndex: 1002 }; - } - - render() { - return ( - this.isOpen = false)} - /> - ); - } - -} - -Scripting.addGlobal("HypothesisAuthenticationManager", HypothesisAuthenticationManager); \ No newline at end of file diff --git a/src/client/apis/hypothesis/HypothesisUtils.ts b/src/client/apis/hypothesis/HypothesisUtils.ts index 8eaad2905..a9d807976 100644 --- a/src/client/apis/hypothesis/HypothesisUtils.ts +++ b/src/client/apis/hypothesis/HypothesisUtils.ts @@ -1,5 +1,4 @@ import { StrCast, Cast } from "../../../fields/Types"; -import HypothesisAuthenticationManager from "../HypothesisAuthenticationManager"; import { SearchUtil } from "../../util/SearchUtil"; import { action } from "mobx"; import { Doc } from "../../../fields/Doc"; @@ -8,18 +7,6 @@ import { WebField } from "../../../fields/URLField"; import { DocumentManager } from "../../util/DocumentManager"; export namespace Hypothesis { - export const fetchUser = async (apiKey: string) => { - const response = await fetch('https://api.hypothes.is/api/profile', { - headers: { - 'Authorization': `Bearer ${apiKey}`, - }, - }); - if (response.ok) { - return response.json(); - } else { - throw new Error('DASH: Error in fetchUser GET request'); - } - }; // Send Hypothes.is client request to edit an annotation to add a Dash hyperlink export const makeLink = async (title: string, url: string, annotationId: string) => { @@ -40,6 +27,7 @@ export namespace Hypothesis { // Construct an URL which will automatically scroll the web page to a specific annotation's position export const makeAnnotationUrl = (annotationId: string, baseUrl: string) => { + console.log("baseUrl", baseUrl, annotationId); return `${baseUrl}#annotations:${annotationId}`; }; @@ -58,8 +46,8 @@ export namespace Hypothesis { doc.type === DocumentType.WEB && doc.data ); filteredDocs.forEach(doc => { - console.log(Cast(doc.data, WebField)?.url.href); - if (uri === Cast(doc.data, WebField)?.url.href) results.push(doc); // TODO check history? imperfect matches? + console.log(uri, Cast(doc.data, WebField)?.url.href, uri === Cast(doc.data, WebField)?.url.href); + (uri === Cast(doc.data, WebField)?.url.href) && results.push(doc); // TODO check history? imperfect matches? }); })); diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index ff33d35e0..1fe611b12 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -441,7 +441,6 @@ export class CurrentUserUtils { { toolTip: "Drag a document previewer", title: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.emptyDocHolder as Doc }, { toolTip: "Toggle a Calculator REPL", title: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' }, { toolTip: "Connect a Google Account", title: "Google Account", icon: "external-link-alt", click: 'GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' }, - { toolTip: "Connect a Hypothesis Account", title: "Hypothesis Account", icon: "heading", click: 'HypothesisAuthenticationManager.Instance.fetchAccessToken(true)' }, ]; } diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 90d59aa51..a9c2d5e15 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -12,7 +12,6 @@ import { CurrentUserUtils } from "./CurrentUserUtils"; import { Utils } from "../../Utils"; import { Doc } from "../../fields/Doc"; import GroupManager from "./GroupManager"; -import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager"; import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager"; import { togglePlaygroundMode } from "../../fields/util"; @@ -92,10 +91,6 @@ export default class SettingsManager extends React.Component<{}> { googleAuthorize = (event: any) => { GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true); } - @action - hypothesisAuthorize = (event: any) => { - HypothesisAuthenticationManager.Instance.fetchAccessToken(true); - } @action togglePlaygroundMode = () => { @@ -118,7 +113,6 @@ export default class SettingsManager extends React.Component<{}> { - + {this.allowSubmit ? :
submit
} forgot password? ; + } - const modesContent =
+ @computed get modesContent() { + return
-
+
; ; + return preferencesContent; + } + + + @computed private get settingsInterface() { + return (
Settings
-
{Doc.CurrentUserEmail}
+
+
Signed in as:
+
{Doc.CurrentUserEmail}
+
@@ -245,19 +285,19 @@ export default class SettingsManager extends React.Component<{}> {
Password
-
{passwordContent}
+
{this.passwordContent}
Modes
-
{modesContent}
+
{this.modesContent}
Accounts
-
{accountsContent}
+
{this.accountsContent}
Preferences
-
{preferencesContent}
+
{this.preferencesContent}
); -- cgit v1.2.3-70-g09d2 From ecadf91fa662a45b7e0c2302f9423a2032589909 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 6 Aug 2020 11:21:33 -0500 Subject: ink fix --- src/client/util/SettingsManager.tsx | 2 +- .../collectionFreeForm/PropertiesView.tsx | 37 ++++++++++++++-------- 2 files changed, 24 insertions(+), 15 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 155c7f60c..8124b7676 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -257,7 +257,7 @@ export default class SettingsManager extends React.Component<{}> { ; })} -
; +
; return preferencesContent; diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 3b449d941..8aeb80ace 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -83,6 +83,8 @@ export class PropertiesView extends React.Component { @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } + @observable scrolling: boolean = true; + @action rtfWidth = () => { if (this.selectedDoc) { @@ -598,21 +600,28 @@ export class PropertiesView extends React.Component { set colorStk(value) { value && (this._lastLine = value); this.selectedDoc && (this.selectedDoc.color = value ? value : undefined); } colorButton(value: string, type: string, setter: () => {}) { - return
- -
setter()))}> -
- {value === "" || value === "transparent" ?

☒

: ""} -
- + // return
this.changeScrolling(false)} + // onPointerLeave={e => this.changeScrolling(true)}> + // + return
setter()))}> +
+ {value === "" || value === "transparent" ?

☒

: ""}
; + // + //
; } + @action + changeScrolling = (scroll: boolean) => { + console.log(scroll); + this.scrolling = scroll; + } + @undoBatch @action switchStk = (color: ColorState) => { @@ -654,8 +663,8 @@ export class PropertiesView extends React.Component {
{this.lineButton}
- {/* {this._fillBtn ? this.fillPicker : ""} - {this._lineBtn ? this.linePicker : ""} */} + {this._fillBtn ? this.fillPicker : ""} + {this._lineBtn ? this.linePicker : ""}
; } @@ -771,7 +780,7 @@ export class PropertiesView extends React.Component { if (this.selectedDoc && !this.isPres) { return
Properties -- cgit v1.2.3-70-g09d2 From 59a03f711c48aa51a53759dcece88cd6d6204010 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 6 Aug 2020 16:29:46 -0500 Subject: trying novice tools --- src/client/documents/Documents.ts | 1 + src/client/util/CurrentUserUtils.ts | 144 ++++++++++++++++++++++++--------- src/client/util/SettingsManager.tsx | 9 ++- src/client/views/nodes/FontIconBox.tsx | 8 +- 4 files changed, 117 insertions(+), 45 deletions(-) (limited to 'src/client/util') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 7719b3eef..3b5f10050 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -201,6 +201,7 @@ export interface DocumentOptions { linearViewIsExpanded?: boolean; // is linear view expanded border?: string; //for searchbox hovercolor?: string; + developerFeature?: boolean; } class EmptyBox { diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 1f140e145..822979e32 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -387,7 +387,8 @@ export class CurrentUserUtils { static creatorBtnDescriptors(doc: Doc): { title: string, toolTip: string, icon: string, drag?: string, ignoreClick?: boolean, - click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc + click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, hidden?: any, + developerFeature?: boolean }[] { if (doc.emptyPresentation === undefined) { doc.emptyPresentation = Docs.Create.PresDocument(new List(), @@ -426,30 +427,90 @@ export class CurrentUserUtils { if (doc.activeMobileMenu === undefined) { this.setupActiveMobileMenu(doc); } - return [ - { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc }, - { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc }, - { toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc }, - { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc }, - { toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc }, - // { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' }, - { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc }, - { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc }, - - { toolTip: "Drag a presentation view", title: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc }, - { toolTip: "Drag a search box", title: "Query", icon: "search", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptySearch as Doc }, - { toolTip: "Drag a scripting box", title: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc }, - // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' }, - { toolTip: "Drag a mobile view", title: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc }, - // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' }, - // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, - // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, - // { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, - // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc }, - // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc }, - { toolTip: "Drag a document previewer", title: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc }, - { toolTip: "Toggle a Calculator REPL", title: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' }, - ]; + + // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' }, + // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, + // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, + // { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, + // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc }, + // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc }, + // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' }, + // { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' }, + + const collection = { + toolTip: "Drag a collection", title: "Col", + icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc + }; + const web = { + toolTip: "Drag a web page", title: "Web", + icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc + }; + const cat = { + toolTip: "Drag a cat image", title: "Image", + icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc + }; + const compare = { + toolTip: "Drag a comparison box", title: "Compare", + icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc + } + const screen = { + toolTip: "Drag a screengrabber", title: "Grab", + icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc, + developerFeature: true, + }; + const audio = { + toolTip: "Drag a audio recorder", title: "Audio", + icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc + }; + const button = { + toolTip: "Drag a button", title: "Button", + icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc + }; + const pres = { + toolTip: "Drag a presentation view", title: "Pres", icon: "tv", + click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', + drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, + dragFactory: doc.emptyPresentation as Doc + }; + const search = { + toolTip: "Drag a search box", title: "Query", icon: "search", + click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', + dragFactory: doc.emptySearch as Doc, developerFeature: true, + }; + const script = { + toolTip: "Drag a scripting box", title: "Script", + icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc, + developerFeature: true, + }; + const mobile = { + toolTip: "Drag a mobile view", title: "Phone", + icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', + drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc, + developerFeature: true, + }; + const preview = { + toolTip: "Drag a document previewer", title: "Prev", + icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc, + developerFeature: true, + }; + const repl = { + toolTip: "Toggle a Calculator REPL", title: "repl", + icon: "calculator", + click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })', + developerFeature: true, + }; + + // novice : [collection, web, compare, audio, button, pres] + return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl]; } @@ -465,21 +526,24 @@ export class CurrentUserUtils { } } const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title)); - const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({ - _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, - icon, - title, - toolTip, - ignoreClick, - dropAction: "copy", - onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined, - onClick: click ? ScriptField.MakeScript(click) : undefined, - ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined, - activeInkPen, - backgroundColor, - removeDropProperties: new List(["dropAction"]), - dragFactory, - })); + const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, + click, ischecked, activeInkPen, backgroundColor, dragFactory, + developerFeature }) => Docs.Create.FontIconDocument({ + _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, + icon, + title, + toolTip, + ignoreClick, + dropAction: "copy", + onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined, + onClick: click ? ScriptField.MakeScript(click) : undefined, + ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined, + activeInkPen, + backgroundColor, + removeDropProperties: new List(["dropAction"]), + dragFactory, + developerFeature, + })); if (dragCreatorSet === undefined) { doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, { diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 8124b7676..1a419b7c6 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -203,9 +203,12 @@ export default class SettingsManager extends React.Component<{}> { @computed get accountsContent() { return
- - - + + {/* */} +
; } diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx index c0eb78d98..71832b0dc 100644 --- a/src/client/views/nodes/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox.tsx @@ -64,14 +64,18 @@ export class FontIconBox extends DocComponent( const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc))); const shape = StrCast(this.layoutDoc.iconShape, "round"); const button = ; - return !this.layoutDoc.toolTip ? button : + return !this.layoutDoc.toolTip || (this.layoutDoc.developerFeature && Doc.UserDoc().noviceMode) ? button : {StrCast(this.layoutDoc.toolTip)}
}> {button} ; -- cgit v1.2.3-70-g09d2 From ea3a2d51e130b1ea5954d9bb13658d25d8eac975 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 7 Aug 2020 01:23:00 -0500 Subject: trying novice buttons --- src/client/documents/Documents.ts | 1 - src/client/util/CurrentUserUtils.ts | 71 +++++++++++++++++++++++++++------- src/client/views/nodes/FontIconBox.tsx | 2 +- 3 files changed, 57 insertions(+), 17 deletions(-) (limited to 'src/client/util') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 50b7368d3..a06b4a581 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -205,7 +205,6 @@ export interface DocumentOptions { audioEnd?: number; // the time frame where the audio should stop playing border?: string; //for searchbox hovercolor?: string; - developerFeature?: boolean; } class EmptyBox { diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index c5d3fffc7..b1c98e549 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -385,10 +385,9 @@ export class CurrentUserUtils { return doc["template-icons"] as Doc; } - static creatorBtnDescriptors(doc: Doc): { + static creatorBtnDescriptors(doc: Doc, novice: boolean): { title: string, toolTip: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, hidden?: any, - developerFeature?: boolean }[] { if (doc.emptyPresentation === undefined) { doc.emptyPresentation = Docs.Create.PresDocument(new List(), @@ -461,7 +460,6 @@ export class CurrentUserUtils { toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc, - developerFeature: true, }; const audio = { toolTip: "Drag a audio recorder", title: "Audio", @@ -482,35 +480,35 @@ export class CurrentUserUtils { const search = { toolTip: "Drag a search box", title: "Query", icon: "search", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', - dragFactory: doc.emptySearch as Doc, developerFeature: true, + dragFactory: doc.emptySearch as Doc, }; const script = { toolTip: "Drag a scripting box", title: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc, - developerFeature: true, }; const mobile = { toolTip: "Drag a mobile view", title: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc, - developerFeature: true, }; const preview = { toolTip: "Drag a document previewer", title: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc, - developerFeature: true, }; const repl = { toolTip: "Toggle a Calculator REPL", title: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })', - developerFeature: true, }; // novice : [collection, web, compare, audio, button, pres] - return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl]; + if (novice) { + return [collection, web, compare, audio, button, pres]; + } else { + return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl]; + } } @@ -525,10 +523,9 @@ export class CurrentUserUtils { alreadyCreatedButtons = dragDocs.map(d => StrCast(d.title)); } } - const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title)); + const buttons = CurrentUserUtils.creatorBtnDescriptors(doc, true).filter(d => !alreadyCreatedButtons?.includes(d.title)); const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, - click, ischecked, activeInkPen, backgroundColor, dragFactory, - developerFeature }) => Docs.Create.FontIconDocument({ + click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({ _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, icon, title, @@ -542,12 +539,55 @@ export class CurrentUserUtils { backgroundColor, removeDropProperties: new List(["dropAction"]), dragFactory, - developerFeature, })); if (dragCreatorSet === undefined) { doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, { - title: "Basic Item Creators", _showTitle: "title", _xMargin: 0, + title: "Basic Item Creators", + hidden: ComputedField.MakeFunction("!self.target.noviceMode") as any, + _showTitle: "title", _xMargin: 0, + _autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", + dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), + })); + } else { + creatorBtns.forEach(nb => Doc.AddDocToList(doc.myItemCreators as Doc, "data", nb)); + } + return doc.myItemCreators as Doc; + } + + static async setupDevCreatorButtons(doc: Doc) { + let alreadyCreatedButtons: string[] = []; + const dragCreatorSet = await Cast(doc.myItemCreators, Doc, null); + if (dragCreatorSet) { + const dragCreators = await Cast(dragCreatorSet.data, listSpec(Doc)); + if (dragCreators) { + const dragDocs = await Promise.all(dragCreators); + alreadyCreatedButtons = dragDocs.map(d => StrCast(d.title)); + } + } + const buttons = CurrentUserUtils.creatorBtnDescriptors(doc, false).filter(d => !alreadyCreatedButtons?.includes(d.title)); + const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, + click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({ + _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, + icon, + title, + toolTip, + ignoreClick, + dropAction: "copy", + onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined, + onClick: click ? ScriptField.MakeScript(click) : undefined, + ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined, + activeInkPen, + backgroundColor, + removeDropProperties: new List(["dropAction"]), + dragFactory, + })); + + if (dragCreatorSet === undefined) { + doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, { + title: "Basic Item Creators", + hidden: ComputedField.MakeFunction("self.target.noviceMode") as any, + _showTitle: "title", _xMargin: 0, _autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), })); @@ -724,12 +764,13 @@ export class CurrentUserUtils { static async setupToolsBtnPanel(doc: Doc) { // setup a masonry view of all he creators const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc); + const devBtns = await CurrentUserUtils.setupDevCreatorButtons(doc); const templateBtns = CurrentUserUtils.setupUserTemplateButtons(doc); doc["tabs-button-tools"] = undefined; if (doc.myCreators === undefined) { - doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, templateBtns], { + doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, devBtns, templateBtns], { title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0, _width: 500, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", })); diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx index 95faabb48..a6b1678b5 100644 --- a/src/client/views/nodes/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox.tsx @@ -74,7 +74,7 @@ export class FontIconBox extends DocComponent( {!label ? (null) :
{label}
}
; - return (this.layoutDoc.developerFeature && Doc.UserDoc().noviceMode) ? (null) : !this.layoutDoc.toolTip ? button : + return !this.layoutDoc.toolTip ? button : {StrCast(this.layoutDoc.toolTip)}}> {button} ; -- cgit v1.2.3-70-g09d2 From cdd96649cb4a32ee9991deb314c4bd14a8352a6f Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 7 Aug 2020 08:23:11 -0400 Subject: added novice mode entries for creator buttons. fixed screentransform for propertiesview preview. fixed other runtime errors. --- src/client/util/CurrentUserUtils.ts | 18 +++++----- .../collectionFreeForm/PropertiesView.tsx | 38 ++++++++++++++-------- 2 files changed, 35 insertions(+), 21 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 37ffcb78e..0ed03cebe 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -387,7 +387,7 @@ export class CurrentUserUtils { static creatorBtnDescriptors(doc: Doc): { title: string, toolTip: string, icon: string, drag?: string, ignoreClick?: boolean, - click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc + click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, noviceMode?: boolean }[] { if (doc.emptyPresentation === undefined) { doc.emptyPresentation = Docs.Create.PresDocument(new List(), @@ -427,16 +427,16 @@ export class CurrentUserUtils { this.setupActiveMobileMenu(doc); } return [ - { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc }, - { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc }, + { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc, noviceMode: true }, + { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc, noviceMode: true }, { toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc }, - { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc }, + { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc, noviceMode: true }, { toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc }, // { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' }, - { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc }, - { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc }, + { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc, noviceMode: true }, + { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc, noviceMode: true }, - { toolTip: "Drag a presentation view", title: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc }, + { toolTip: "Drag a presentation view", title: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc, noviceMode: true }, { toolTip: "Drag a search box", title: "Query", icon: "search", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptySearch as Doc }, { toolTip: "Drag a scripting box", title: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc }, // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' }, @@ -465,7 +465,7 @@ export class CurrentUserUtils { } } const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title)); - const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({ + const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory, noviceMode }) => Docs.Create.FontIconDocument({ _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, icon, title, @@ -479,6 +479,8 @@ export class CurrentUserUtils { backgroundColor, removeDropProperties: new List(["dropAction"]), dragFactory, + target: noviceMode ? undefined as any : doc, + hidden: noviceMode ? undefined as any : ComputedField.MakeFunction("self.target.noviceMode") })); if (dragCreatorSet === undefined) { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 1a8ee3ea1..bc2c9422c 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -22,13 +22,13 @@ import { InkField } from "../../../../fields/InkField"; import { undoBatch, UndoManager } from "../../../util/UndoManager"; import { ColorState, SketchPicker } from "react-color"; 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; +const _global = (window /* browser */ || global /* node */) as any; // import * as fa from '@fortawesome/free-solid-svg-icons'; // import { library } from "@fortawesome/fontawesome-svg-core"; @@ -52,7 +52,7 @@ export class PropertiesView extends React.Component { @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) { return SelectionManager.SelectedDocuments()[0]; - } else if (PresBox.Instance._selectedArray.length) { + } else if (PresBox.Instance?._selectedArray.length) { return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); } else { return undefined; } } @@ -247,12 +247,22 @@ export class PropertiesView extends React.Component { return false; } + @observable transform: Transform = Transform.Identity(); + getTransform = () => { return this.transform; } + propertiesDocViewRef = (ref: HTMLDivElement) => { + const observer = new _global.ResizeObserver(action((entries: any) => { + const cliRect = ref.getBoundingClientRect(); + this.transform = new Transform(-cliRect.x, -cliRect.y, 1); + })); + ref && observer.observe(ref); + } + @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
+ return
{ PanelWidth={panelWidth} PanelHeight={panelHeight} focus={returnFalse} - ScreenToLocalTransform={this.props.ScreenToLocalTransform} + ScreenToLocalTransform={this.getTransform} docFilters={returnEmptyFilter} ContainingCollectionDoc={undefined} ContainingCollectionView={undefined} @@ -320,7 +330,7 @@ export class PropertiesView extends React.Component { * @returns the notification icon. On clicking, it should notify someone of a document been shared with them. */ @computed get notifyIcon() { - return
Notify with message
}> + return Notify with message
}>
@@ -331,7 +341,7 @@ export class PropertiesView extends React.Component { * ... next to the owner that opens the main SharingManager interface on click. */ @computed get expansionIcon() { - return
{"Show more permissions"}
}> + return {"Show more permissions"}
}>
{ if (this.selectedDocumentView) { SharingManager.Instance.open(this.selectedDocumentView); @@ -346,7 +356,7 @@ export class PropertiesView extends React.Component { * @returns a row of the permissions panel */ sharingItem(name: string, effectiveAcl: symbol, permission: string) { - return
this.selectedUser = this.selectedUser === name ? "" : name)} > @@ -378,7 +388,9 @@ export class PropertiesView extends React.Component { 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/* && sidebarUsersDisplayed![name] !== false*/) tableEntries.push(this.sharingItem(name, effectiveAcl, AclMap.get(value)!)); + if (name !== Doc.CurrentUserEmail && name !== this.selectedDoc!.author/* && sidebarUsersDisplayed![name] !== false*/) { + tableEntries.push(this.sharingItem(name, effectiveAcl, AclMap.get(value)!)); + } } } @@ -484,17 +496,17 @@ export class PropertiesView extends React.Component { @computed get controlPointsButton() { return
-
{"Edit points"}
}> + {"Edit points"}
}>
FormatShapePane.Instance._controlBtn = !FormatShapePane.Instance._controlBtn)} style={{ backgroundColor: FormatShapePane.Instance._controlBtn ? "black" : "" }}>
-
{FormatShapePane.Instance._lock ? "Unlock ratio" : "Lock ratio"}
}> + {FormatShapePane.Instance._lock ? "Unlock ratio" : "Lock ratio"}
}>
FormatShapePane.Instance._lock = !FormatShapePane.Instance._lock)} >
-
{"Rotate 90˚"}
}> + {"Rotate 90˚"}
}>
this.rotate(Math.PI / 2))}>
@@ -943,12 +955,12 @@ export class PropertiesView extends React.Component { - {this.openLayout ?
{this.layoutPreview}
: null} + {this.openLayout ?
{this.layoutPreview}
: null} ; } if (this.isPres) { - const selectedItem: boolean = PresBox.Instance._selectedArray.length > 0; + const selectedItem: boolean = PresBox.Instance?._selectedArray.length > 0; return
Presentation -- cgit v1.2.3-70-g09d2 From b02cfed890d9d95a8f45bbc93d688bd3311dd387 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 7 Aug 2020 08:37:02 -0400 Subject: tweaked noviceMode script to use non-generic variables & added ScriptField cache to avoid multiple scripts. --- src/client/util/CurrentUserUtils.ts | 12 ++++++------ src/fields/ScriptField.ts | 4 ++++ 2 files changed, 10 insertions(+), 6 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 0ed03cebe..c205acb99 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -248,8 +248,8 @@ export class CurrentUserUtils { if (doc["template-buttons"] === undefined) { doc["template-buttons"] = new PrefetchProxy(Docs.Create.MasonryDocument(requiredTypes, { title: "Advanced Item Prototypes", _xMargin: 0, _showTitle: "title", - hidden: ComputedField.MakeFunction("self.target.noviceMode") as any, - target: doc, + hidden: ComputedField.MakeFunction("self.userDoc.noviceMode") as any, + userDoc: doc, _autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), })); @@ -479,8 +479,8 @@ export class CurrentUserUtils { backgroundColor, removeDropProperties: new List(["dropAction"]), dragFactory, - target: noviceMode ? undefined as any : doc, - hidden: noviceMode ? undefined as any : ComputedField.MakeFunction("self.target.noviceMode") + userDoc: noviceMode ? undefined as any : doc, + hidden: noviceMode ? undefined as any : ComputedField.MakeFunction("self.userDoc.noviceMode") })); if (dragCreatorSet === undefined) { @@ -534,8 +534,8 @@ export class CurrentUserUtils { onClick: ScriptField.MakeScript(click, { scriptContext: "any" }), })); const userDoc = menuBtns[menuBtns.length - 1]; - userDoc.target = doc; - userDoc.hidden = ComputedField.MakeFunction("self.target.noviceMode"); + userDoc.userDoc = doc; + userDoc.hidden = ComputedField.MakeFunction("self.userDoc.noviceMode"); doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, { title: "menuItemPanel", diff --git a/src/fields/ScriptField.ts b/src/fields/ScriptField.ts index f55483a5b..4cc3a7cc7 100644 --- a/src/fields/ScriptField.ts +++ b/src/fields/ScriptField.ts @@ -53,6 +53,9 @@ async function deserializeScript(script: ScriptField) { if (script.script.originalScript === 'convertToButtons(dragData)') { return (script as any).script = (ScriptField.ConvertToButtons ?? (ScriptField.ConvertToButtons = ComputedField.MakeFunction('convertToButtons(dragData)', { dragData: "DocumentDragData" })))?.script; } + if (script.script.originalScript === 'self.userDoc.noviceMode') { + return (script as any).script = (ScriptField.NoviceMode ?? (ScriptField.NoviceMode = ComputedField.MakeFunction('self.userDoc.noviceMode')))?.script; + } const captures: ProxyField = (script as any).captures; if (captures) { const doc = (await captures.value())!; @@ -85,6 +88,7 @@ export class ScriptField extends ObjectField { public static OpenOnRight: Opt; public static DeiconifyView: Opt; public static ConvertToButtons: Opt; + public static NoviceMode: Opt; constructor(script: CompiledScript, setterscript?: CompiledScript) { super(); -- cgit v1.2.3-70-g09d2 From 5c3e84b8dc22ee630e4612f594635b56b5a7ee9a Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 7 Aug 2020 10:52:01 -0500 Subject: reverting back --- src/client/util/CurrentUserUtils.ts | 55 +++---------------------------------- 1 file changed, 4 insertions(+), 51 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index b1c98e549..fdca2b0da 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -385,7 +385,7 @@ export class CurrentUserUtils { return doc["template-icons"] as Doc; } - static creatorBtnDescriptors(doc: Doc, novice: boolean): { + static creatorBtnDescriptors(doc: Doc): { title: string, toolTip: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, hidden?: any, }[] { @@ -504,11 +504,7 @@ export class CurrentUserUtils { }; // novice : [collection, web, compare, audio, button, pres] - if (novice) { - return [collection, web, compare, audio, button, pres]; - } else { - return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl]; - } + return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl]; } @@ -523,7 +519,7 @@ export class CurrentUserUtils { alreadyCreatedButtons = dragDocs.map(d => StrCast(d.title)); } } - const buttons = CurrentUserUtils.creatorBtnDescriptors(doc, true).filter(d => !alreadyCreatedButtons?.includes(d.title)); + const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title)); const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({ _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, @@ -555,48 +551,6 @@ export class CurrentUserUtils { return doc.myItemCreators as Doc; } - static async setupDevCreatorButtons(doc: Doc) { - let alreadyCreatedButtons: string[] = []; - const dragCreatorSet = await Cast(doc.myItemCreators, Doc, null); - if (dragCreatorSet) { - const dragCreators = await Cast(dragCreatorSet.data, listSpec(Doc)); - if (dragCreators) { - const dragDocs = await Promise.all(dragCreators); - alreadyCreatedButtons = dragDocs.map(d => StrCast(d.title)); - } - } - const buttons = CurrentUserUtils.creatorBtnDescriptors(doc, false).filter(d => !alreadyCreatedButtons?.includes(d.title)); - const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, - click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({ - _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, - icon, - title, - toolTip, - ignoreClick, - dropAction: "copy", - onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined, - onClick: click ? ScriptField.MakeScript(click) : undefined, - ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined, - activeInkPen, - backgroundColor, - removeDropProperties: new List(["dropAction"]), - dragFactory, - })); - - if (dragCreatorSet === undefined) { - doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, { - title: "Basic Item Creators", - hidden: ComputedField.MakeFunction("self.target.noviceMode") as any, - _showTitle: "title", _xMargin: 0, - _autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", - dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), - })); - } else { - creatorBtns.forEach(nb => Doc.AddDocToList(doc.myItemCreators as Doc, "data", nb)); - } - return doc.myItemCreators as Doc; - } - static menuBtnDescriptions(): { title: string, icon: string, click: string, }[] { @@ -764,13 +718,12 @@ export class CurrentUserUtils { static async setupToolsBtnPanel(doc: Doc) { // setup a masonry view of all he creators const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc); - const devBtns = await CurrentUserUtils.setupDevCreatorButtons(doc); const templateBtns = CurrentUserUtils.setupUserTemplateButtons(doc); doc["tabs-button-tools"] = undefined; if (doc.myCreators === undefined) { - doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, devBtns, templateBtns], { + doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, templateBtns], { title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0, _width: 500, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", })); -- cgit v1.2.3-70-g09d2 From 362eb4d830c23a40c0813e7aae21e6bf6c5292b3 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 7 Aug 2020 11:09:51 -0500 Subject: merge fix --- src/client/util/CurrentUserUtils.ts | 107 +++++++++--------------------------- 1 file changed, 25 insertions(+), 82 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index ccd0b4ef3..c205acb99 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -426,85 +426,30 @@ export class CurrentUserUtils { if (doc.activeMobileMenu === undefined) { this.setupActiveMobileMenu(doc); } - - // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' }, - // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, - // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, - // { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, - // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc }, - // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc }, - // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' }, - // { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' }, - - const collection = { - toolTip: "Drag a collection", title: "Col", - icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', - drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc - }; - const web = { - toolTip: "Drag a web page", title: "Web", - icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', - drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc - }; - const cat = { - toolTip: "Drag a cat image", title: "Image", - icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', - drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc - }; - const compare = { - toolTip: "Drag a comparison box", title: "Compare", - icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', - drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc - } - const screen = { - toolTip: "Drag a screengrabber", title: "Grab", - icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', - drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc, - }; - const audio = { - toolTip: "Drag a audio recorder", title: "Audio", - icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', - drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc - }; - const button = { - toolTip: "Drag a button", title: "Button", - icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', - drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc - }; - const pres = { - toolTip: "Drag a presentation view", title: "Pres", icon: "tv", - click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', - drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, - dragFactory: doc.emptyPresentation as Doc - }; - const search = { - toolTip: "Drag a search box", title: "Query", icon: "search", - click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', - dragFactory: doc.emptySearch as Doc, - }; - const script = { - toolTip: "Drag a scripting box", title: "Script", - icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', - drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc, - }; - const mobile = { - toolTip: "Drag a mobile view", title: "Phone", - icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', - drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc, - }; - const preview = { - toolTip: "Drag a document previewer", title: "Prev", - icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', - drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc, - }; - const repl = { - toolTip: "Toggle a Calculator REPL", title: "repl", - icon: "calculator", - click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })', - }; - - // novice : [collection, web, compare, audio, button, pres] - return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl]; + return [ + { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc, noviceMode: true }, + { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc, noviceMode: true }, + { toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc }, + { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc, noviceMode: true }, + { toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc }, + // { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' }, + { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc, noviceMode: true }, + { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc, noviceMode: true }, + + { toolTip: "Drag a presentation view", title: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc, noviceMode: true }, + { toolTip: "Drag a search box", title: "Query", icon: "search", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptySearch as Doc }, + { toolTip: "Drag a scripting box", title: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc }, + // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' }, + { toolTip: "Drag a mobile view", title: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc }, + // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' }, + // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, + // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, + // { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, + // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc }, + // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc }, + { toolTip: "Drag a document previewer", title: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc }, + { toolTip: "Toggle a Calculator REPL", title: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' }, + ]; } @@ -540,9 +485,7 @@ export class CurrentUserUtils { if (dragCreatorSet === undefined) { doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, { - title: "Basic Item Creators", - hidden: ComputedField.MakeFunction("!self.target.noviceMode") as any, - _showTitle: "title", _xMargin: 0, + title: "Basic Item Creators", _showTitle: "title", _xMargin: 0, _autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), })); -- cgit v1.2.3-70-g09d2 From d6bbd8bd52231ffaea6d0f01c9e1447087e17914 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 7 Aug 2020 22:48:37 -0400 Subject: code cleanup --- src/client/documents/Documents.ts | 1 + src/client/util/SettingsManager.scss | 5 + src/client/util/SettingsManager.tsx | 281 +++++++-------------- .../collectionFreeForm/PropertiesView.tsx | 2 +- 4 files changed, 97 insertions(+), 192 deletions(-) (limited to 'src/client/util') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index a06b4a581..f902da0a2 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -94,6 +94,7 @@ export interface DocumentOptions { title?: string; label?: string; hidden?: boolean; + userDoc?: Doc; // the userDocument toolTip?: string; // tooltip to display on hover style?: string; page?: number; diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 41bce8a1b..3bae095d0 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -217,6 +217,11 @@ cursor: pointer; } + .logout-button { + right: 35; + position: absolute; + } + .settings-content { background: #e4e4e4; border-radius: 6px; diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 68ed32c0f..a6c5e518e 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -2,7 +2,6 @@ import { observable, runInAction, action, computed } from "mobx"; import * as React from "react"; import MainViewModal from "../views/MainViewModal"; import { observer } from "mobx-react"; -import { library } from '@fortawesome/fontawesome-svg-core'; import * as fa from '@fortawesome/free-solid-svg-icons'; import { SelectionManager } from "./SelectionManager"; import "./SettingsManager.scss"; @@ -22,220 +21,135 @@ const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; -library.add(fa.faTimes); - @observer export default class SettingsManager extends React.Component<{}> { public static Instance: SettingsManager; static _settingsStyle = addStyleSheet(); - @observable private isOpen = false; - @observable private dialogueBoxOpacity = 1; - @observable private overlayOpacity = 0.4; - @observable private settingsContent = "password"; - @observable private errorText = ""; - @observable private successText = ""; - @observable private playgroundMode = false; private curr_password_ref = React.createRef(); private new_password_ref = React.createRef(); private new_confirm_ref = React.createRef(); - + @observable private isOpen = false; + @observable private passwordResultText = ""; + @observable private playgroundMode = false; @computed get backgroundColor() { return Doc.UserDoc().defaultColor; } - public open = action(() => { - SelectionManager.DeselectAll(); - this.isOpen = true; - }); - - public close = action(() => { - this.isOpen = false; - }); - constructor(props: {}) { super(props); SettingsManager.Instance = this; } - @action - private dispatchRequest = async () => { + public close = action(() => this.isOpen = false); + public open = action(() => (this.isOpen = true) && SelectionManager.DeselectAll()); + + private googleAuthorize = action(() => GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)); + private hypothesisAuthorize = action(() => HypothesisAuthenticationManager.Instance.fetchAccessToken(true)); + private changePassword = async () => { const curr_pass = this.curr_password_ref.current?.value; const new_pass = this.new_password_ref.current?.value; const new_confirm = this.new_confirm_ref.current?.value; if (!(curr_pass && new_pass && new_confirm)) { - this.changeAlertText("Hey, we're missing some fields!", ""); - return; - } - - const passwordBundle = { - curr_pass, - new_pass, - new_confirm - }; - - const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle); - if (error) { - this.changeAlertText("Uh oh! " + error[0].msg + "...", ""); - return; + runInAction(() => this.passwordResultText = "Error: Hey, we're missing some fields!"); + } else { + const passwordBundle = { curr_pass, new_pass, new_confirm }; + const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle); + runInAction(() => this.passwordResultText = error ? "Error: " + error[0].msg + "..." : "Password successfully updated!"); } - - this.changeAlertText("", "Password successfully updated!"); - } - - @action - private changeAlertText = (errortxt: string, successtxt: string) => { - this.errorText = errortxt; - this.successText = successtxt; - } - - @action - onClick = (event: any) => { - this.settingsContent = event.currentTarget.value; - this.errorText = ""; - this.successText = ""; - } - @action - noviceToggle = (event: any) => { - Doc.UserDoc().noviceMode = !Doc.UserDoc().noviceMode; - } - @action - googleAuthorize = (event: any) => { - GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true); - } - @action - hypothesisAuthorize = (event: any) => { - HypothesisAuthenticationManager.Instance.fetchAccessToken(true); } - @action - togglePlaygroundMode = () => { + @undoBatch selectUserMode = action((e: React.ChangeEvent) => Doc.UserDoc().noviceMode = (e.currentTarget as any)?.value === "Novice"); + @undoBatch changeFontFamily = action((e: React.ChangeEvent) => Doc.UserDoc().fontFamily = (e.currentTarget as any).value); + @undoBatch changeFontSize = action((e: React.ChangeEvent) => Doc.UserDoc().fontSize = (e.currentTarget as any).value); + @undoBatch switchColor = action((color: ColorState) => Doc.UserDoc().defaultColor = String(color.hex)); + @undoBatch + playgroundModeToggle = action(() => { this.playgroundMode = !this.playgroundMode; - if (this.playgroundMode) DocServer.Control.makeReadOnly(); + if (this.playgroundMode) { + DocServer.Control.makeReadOnly(); + addStyleSheetRule(SettingsManager._settingsStyle, "lm_header", { background: "pink !important" }); + } else DocServer.Control.makeEditable(); + }); - addStyleSheetRule(SettingsManager._settingsStyle, "lm_header", { background: "pink !important" }); - } - - @action - changeMode = (e: any) => { - if (e.currentTarget.value === "Novice") { - Doc.UserDoc().noviceMode = true; - } else { - Doc.UserDoc().noviceMode = false; - } - } + @computed get preferencesContent() { + const colorBox = ; - @action - changeFontFamily = (e: any) => { - Doc.UserDoc().fontFamily = e.currentTarget.value; - } + const colorFlyout =
+ +
e.stopPropagation()} > + +
+ +
; - @action - changeFontSize = (e: any) => { - Doc.UserDoc().fontSize = e.currentTarget.value; - } + const fontFamilies = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]; + const fontSizes = ["7pt", "8pt", "9pt", "10pt", "12pt", "14pt", "16pt", "18pt", "20pt", "24pt", "32pt", "48pt", "72pt"]; - @action @undoBatch - switchColor = (color: ColorState) => { - const val = String(color.hex); - Doc.UserDoc().defaultColor = val; - return true; + return
+
+
Background Color
+ {colorFlyout} +
+
+
Default Font
+ + +
+
; } - private get settingsInterface() { - - - const passwordContent =
+ @computed get passwordContent() { + return
- {this.errorText ?
{this.errorText}
: undefined} - {this.successText ?
{this.successText}
: undefined} - - forgot password? + {!this.passwordResultText ??
{this.passwordResultText}
} + + forgot password?
; + } - const modesContent =
- + +
- this.togglePlaygroundMode()))} - />
Playground Mode
+ +
Playground Mode
; + } - const accountsContent =
- - - -
; - - const colorBox = ; - - const colorFlyout =
- -
-
e.stopPropagation()} > - -
-
- -
; - - const fontFamilies: string[] = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]; - const fontSizes: string[] = ["7pt", "8pt", "9pt", "10pt", "12pt", "14pt", "16pt", "18pt", "20pt", "24pt", "32pt", "48pt", "72pt"]; - - const preferencesContent =
-
-
Background Color
{colorFlyout} -
-
-
Default Font
- - -
+ @computed get accountsContent() { + return
+ + +
; + } - return (
+ private get settingsInterface() { + const pairs = [{ title: "Password", ele: this.passwordContent }, { title: "Modes", ele: this.modesContent }, + { title: "Accounts", ele: this.accountsContent }, { title: "Preferences", ele: this.preferencesContent }]; + return
Settings
{Doc.CurrentUserEmail}
-
@@ -243,36 +157,21 @@ export default class SettingsManager extends React.Component<{}> {
-
-
Password
-
{passwordContent}
-
-
-
Modes
-
{modesContent}
-
-
-
Accounts
-
{accountsContent}
-
-
-
Preferences
-
{preferencesContent}
+ {pairs.map(pair =>
+
{pair.title}
+
{pair.ele}
+ )}
-
); +
; } render() { - return ( - - ); + return ; } - } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 15900aa33..baa32e59b 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -248,7 +248,7 @@ export class PropertiesView extends React.Component { } @observable transform: Transform = Transform.Identity(); - getTransform = () => { return this.transform; } + getTransform = () => this.transform; propertiesDocViewRef = (ref: HTMLDivElement) => { const observer = new _global.ResizeObserver(action((entries: any) => { const cliRect = ref.getBoundingClientRect(); -- cgit v1.2.3-70-g09d2 From 47e3170534393ab9e4140c18b32110f83753d817 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 7 Aug 2020 23:24:35 -0400 Subject: removed greyed out submit password button. --- src/client/util/SettingsManager.scss | 23 ----------------------- 1 file changed, 23 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 22473e836..ca27cfa3c 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -39,29 +39,6 @@ left: 235; } -.grey-submit { - width: 71.1875px; - align-self: center; - background: #75787c; - outline: none; - border-radius: 5px; - border: 0px; - color: #fcfbf7; - text-transform: uppercase; - letter-spacing: 2px; - font-size: 75%; - padding: 10px; - transition: transform 0.2s; - margin: 2px; - margin-left: 85px; - height: 32px; - - &:hover { - cursor: not-allowed; - } - -} - .settings-section { display: flex; border-bottom: 1px solid grey; -- cgit v1.2.3-70-g09d2 From 1733759b776f0596c3a8561d2c735a4b7c7d54d3 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Sat, 8 Aug 2020 15:37:26 -0700 Subject: move HypothesisUtils.ts to Utils folder --- src/client/apis/hypothesis/HypothesisUtils.ts | 170 --------------------- src/client/util/HypothesisUtils.ts | 170 +++++++++++++++++++++ src/client/views/MainView.tsx | 2 +- src/client/views/collections/CollectionSubView.tsx | 2 +- src/client/views/linking/LinkMenuItem.tsx | 2 +- src/client/views/nodes/DocumentLinksButton.tsx | 2 +- 6 files changed, 174 insertions(+), 174 deletions(-) delete mode 100644 src/client/apis/hypothesis/HypothesisUtils.ts create mode 100644 src/client/util/HypothesisUtils.ts (limited to 'src/client/util') diff --git a/src/client/apis/hypothesis/HypothesisUtils.ts b/src/client/apis/hypothesis/HypothesisUtils.ts deleted file mode 100644 index 2a192c8e1..000000000 --- a/src/client/apis/hypothesis/HypothesisUtils.ts +++ /dev/null @@ -1,170 +0,0 @@ -import { StrCast, Cast } from "../../../fields/Types"; -import { SearchUtil } from "../../util/SearchUtil"; -import { action, runInAction } from "mobx"; -import { Doc, Opt } from "../../../fields/Doc"; -import { DocumentType } from "../../documents/DocumentTypes"; -import { Docs } from "../../documents/Documents"; -import { SelectionManager } from "../../util/SelectionManager"; -import { WebField } from "../../../fields/URLField"; -import { DocumentManager } from "../../util/DocumentManager"; -import { DocumentLinksButton } from "../../views/nodes/DocumentLinksButton"; -import { simulateMouseClick, Utils } from "../../../Utils"; -import { DocumentView } from "../../views/nodes/DocumentView"; -import { Id } from "../../../fields/FieldSymbols"; - -export namespace Hypothesis { - - /** - * Retrieve a WebDocument with the given url, prioritizing results that are on screen. - * If none exist, create and return a new WebDocument. - */ - export const getSourceWebDoc = async (uri: string) => { - const result = await findWebDoc(uri); - console.log(result ? "existing doc found" : "existing doc NOT found"); - return result || Docs.Create.WebDocument(uri, { title: uri, _nativeWidth: 850, _nativeHeight: 962, _width: 400, UseCors: true }); // create and return a new Web doc with given uri if no matching docs are found - }; - - - /** - * Search for a WebDocument whose url field matches the given uri, return undefined if not found - */ - export const findWebDoc = async (uri: string) => { - const currentDoc = SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0].props.Document; - if (currentDoc && Cast(currentDoc.data, WebField)?.url.href === uri) return currentDoc; // always check first whether the currently selected doc is the annotation's source, only use Search otherwise - - const results: Doc[] = []; - await SearchUtil.Search("web", true).then(action(async (res: SearchUtil.DocSearchResult) => { - const docs = await Promise.all(res.docs.map(async doc => (await Cast(doc.extendsDoc, Doc)) || doc)); - const filteredDocs = docs.filter(doc => - doc.author === Doc.CurrentUserEmail && doc.type === DocumentType.WEB && doc.data - ); - filteredDocs.forEach(doc => { - uri === Cast(doc.data, WebField)?.url.href && results.push(doc); // TODO check visited sites history? - }); - })); - - const onScreenResults = results.filter(doc => DocumentManager.Instance.getFirstDocumentView(doc)); - return onScreenResults.length ? onScreenResults[0] : (results.length ? results[0] : undefined); // prioritize results that are currently on the screen - }; - - /** - * listen for event from Hypothes.is plugin to link an annotation to Dash - */ - export const linkListener = async (e: any) => { - const annotationId: string = e.detail.id; - const annotationUri: string = StrCast(e.detail.uri).split("#annotations:")[0]; // clean hypothes.is URLs that reference a specific annotation - const sourceDoc: Doc = await getSourceWebDoc(annotationUri); - - if (!DocumentLinksButton.StartLink || sourceDoc === DocumentLinksButton.StartLink) { // start new link if there were none already started, or if the old startLink came from the same web document (prevent links to itself) - runInAction(() => { - DocumentLinksButton.AnnotationId = annotationId; - DocumentLinksButton.AnnotationUri = annotationUri; - DocumentLinksButton.StartLink = sourceDoc; - }); - } else { // if a link has already been started, complete the link to sourceDoc - runInAction(() => { - DocumentLinksButton.AnnotationId = annotationId; - DocumentLinksButton.AnnotationUri = annotationUri; - }); - const endLinkView = DocumentManager.Instance.getFirstDocumentView(sourceDoc); - const rect = document.body.getBoundingClientRect(); - const x = rect.x + rect.width / 2; - const y = 250; - DocumentLinksButton.finishLinkClick(x, y, DocumentLinksButton.StartLink, sourceDoc, false, endLinkView); - } - }; - - /** - * Send message to Hypothes.is client to edit an annotation to add a Dash hyperlink - */ - export const makeLink = async (title: string, url: string, annotationId: string, annotationSourceDoc: Doc) => { - // if the annotation's source webpage isn't currently loaded in Dash, we're not able to access and edit the annotation from the client - // so we're loading the webpage and its annotations invisibly in a WebBox in MainView.tsx, until the editing is done - !DocumentManager.Instance.getFirstDocumentView(annotationSourceDoc) && runInAction(() => DocumentLinksButton.invisibleWebDoc = annotationSourceDoc); - - var success = false; - const onSuccess = action(() => { - console.log("Edit success!!"); - success = true; - clearTimeout(interval); - DocumentLinksButton.invisibleWebDoc = undefined; - document.removeEventListener("editSuccess", onSuccess); - }); - - const newHyperlink = `[${title}\n](${url})`; - const interval = setInterval(() => // keep trying to edit until annotations have loaded and editing is successful - !success && document.dispatchEvent(new CustomEvent<{ newHyperlink: string, id: string }>("addLink", { - detail: { newHyperlink: newHyperlink, id: annotationId }, - bubbles: true - })), 300); - - setTimeout(action(() => { - if (!success) { - clearInterval(interval); - DocumentLinksButton.invisibleWebDoc = undefined; - } - }), 10000); // give up if no success after 10s - document.addEventListener("editSuccess", onSuccess); - }; - - /** - * Send message Hypothes.is client request to edit an annotation to find and delete the target Dash hyperlink - */ - export const deleteLink = async (linkDoc: Doc, sourceDoc: Doc, destinationDoc: Doc) => { - if (Cast(destinationDoc.data, WebField)?.url.href !== StrCast(linkDoc.annotationUri)) return; // check that the destinationDoc is a WebDocument containing the target annotation - - !DocumentManager.Instance.getFirstDocumentView(destinationDoc) && runInAction(() => DocumentLinksButton.invisibleWebDoc = destinationDoc); // see note in makeLink - - var success = false; - const onSuccess = action(() => { - console.log("Edit success!"); - success = true; - clearTimeout(interval); - DocumentLinksButton.invisibleWebDoc = undefined; - document.removeEventListener("editSuccess", onSuccess); - }); - - const annotationId = StrCast(linkDoc.annotationId); - const linkUrl = Utils.prepend("/doc/" + sourceDoc[Id]); - const interval = setInterval(() => {// keep trying to edit until annotations have loaded and editing is successful - !success && document.dispatchEvent(new CustomEvent<{ targetUrl: string, id: string }>("deleteLink", { - detail: { targetUrl: linkUrl, id: annotationId }, - bubbles: true - })); - }, 300); - - setTimeout(action(() => { - if (!success) { - clearInterval(interval); - DocumentLinksButton.invisibleWebDoc = undefined; - } - }), 10000); // give up if no success after 10s - document.addEventListener("editSuccess", onSuccess); - }; - - /** - * Send message to Hypothes.is client to scroll to an annotation when it loads - */ - export const scrollToAnnotation = (annotationId: string, target: Doc) => { - var success = false; - const onSuccess = () => { - console.log("Scroll success!!"); - document.removeEventListener('scrollSuccess', onSuccess); - clearInterval(interval); - success = true; - }; - - const interval = setInterval(() => { // keep trying to scroll every 250ms until annotations have loaded and scrolling is successful - document.dispatchEvent(new CustomEvent('scrollToAnnotation', { - detail: annotationId, - bubbles: true - })); - const targetView: Opt = DocumentManager.Instance.getFirstDocumentView(target); - const position = targetView?.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - targetView && position && simulateMouseClick(targetView.ContentDiv!, position[0], position[1], position[0], position[1], false); - }, 300); - - document.addEventListener('scrollSuccess', onSuccess); // listen for success message from client - setTimeout(() => !success && clearInterval(interval), 10000); // give up if no success after 10s - }; -} \ No newline at end of file diff --git a/src/client/util/HypothesisUtils.ts b/src/client/util/HypothesisUtils.ts new file mode 100644 index 000000000..9ede94e4b --- /dev/null +++ b/src/client/util/HypothesisUtils.ts @@ -0,0 +1,170 @@ +import { StrCast, Cast } from "../../fields/Types"; +import { SearchUtil } from "./SearchUtil"; +import { action, runInAction } from "mobx"; +import { Doc, Opt } from "../../fields/Doc"; +import { DocumentType } from "../documents/DocumentTypes"; +import { Docs } from "../documents/Documents"; +import { SelectionManager } from "./SelectionManager"; +import { WebField } from "../../fields/URLField"; +import { DocumentManager } from "./DocumentManager"; +import { DocumentLinksButton } from "../views/nodes/DocumentLinksButton"; +import { simulateMouseClick, Utils } from "../../Utils"; +import { DocumentView } from "../views/nodes/DocumentView"; +import { Id } from "../../fields/FieldSymbols"; + +export namespace Hypothesis { + + /** + * Retrieve a WebDocument with the given url, prioritizing results that are on screen. + * If none exist, create and return a new WebDocument. + */ + export const getSourceWebDoc = async (uri: string) => { + const result = await findWebDoc(uri); + console.log(result ? "existing doc found" : "existing doc NOT found"); + return result || Docs.Create.WebDocument(uri, { title: uri, _nativeWidth: 850, _nativeHeight: 962, _width: 400, UseCors: true }); // create and return a new Web doc with given uri if no matching docs are found + }; + + + /** + * Search for a WebDocument whose url field matches the given uri, return undefined if not found + */ + export const findWebDoc = async (uri: string) => { + const currentDoc = SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0].props.Document; + if (currentDoc && Cast(currentDoc.data, WebField)?.url.href === uri) return currentDoc; // always check first whether the currently selected doc is the annotation's source, only use Search otherwise + + const results: Doc[] = []; + await SearchUtil.Search("web", true).then(action(async (res: SearchUtil.DocSearchResult) => { + const docs = await Promise.all(res.docs.map(async doc => (await Cast(doc.extendsDoc, Doc)) || doc)); + const filteredDocs = docs.filter(doc => + doc.author === Doc.CurrentUserEmail && doc.type === DocumentType.WEB && doc.data + ); + filteredDocs.forEach(doc => { + uri === Cast(doc.data, WebField)?.url.href && results.push(doc); // TODO check visited sites history? + }); + })); + + const onScreenResults = results.filter(doc => DocumentManager.Instance.getFirstDocumentView(doc)); + return onScreenResults.length ? onScreenResults[0] : (results.length ? results[0] : undefined); // prioritize results that are currently on the screen + }; + + /** + * listen for event from Hypothes.is plugin to link an annotation to Dash + */ + export const linkListener = async (e: any) => { + const annotationId: string = e.detail.id; + const annotationUri: string = StrCast(e.detail.uri).split("#annotations:")[0]; // clean hypothes.is URLs that reference a specific annotation + const sourceDoc: Doc = await getSourceWebDoc(annotationUri); + + if (!DocumentLinksButton.StartLink || sourceDoc === DocumentLinksButton.StartLink) { // start new link if there were none already started, or if the old startLink came from the same web document (prevent links to itself) + runInAction(() => { + DocumentLinksButton.AnnotationId = annotationId; + DocumentLinksButton.AnnotationUri = annotationUri; + DocumentLinksButton.StartLink = sourceDoc; + }); + } else { // if a link has already been started, complete the link to sourceDoc + runInAction(() => { + DocumentLinksButton.AnnotationId = annotationId; + DocumentLinksButton.AnnotationUri = annotationUri; + }); + const endLinkView = DocumentManager.Instance.getFirstDocumentView(sourceDoc); + const rect = document.body.getBoundingClientRect(); + const x = rect.x + rect.width / 2; + const y = 250; + DocumentLinksButton.finishLinkClick(x, y, DocumentLinksButton.StartLink, sourceDoc, false, endLinkView); + } + }; + + /** + * Send message to Hypothes.is client to edit an annotation to add a Dash hyperlink + */ + export const makeLink = async (title: string, url: string, annotationId: string, annotationSourceDoc: Doc) => { + // if the annotation's source webpage isn't currently loaded in Dash, we're not able to access and edit the annotation from the client + // so we're loading the webpage and its annotations invisibly in a WebBox in MainView.tsx, until the editing is done + !DocumentManager.Instance.getFirstDocumentView(annotationSourceDoc) && runInAction(() => DocumentLinksButton.invisibleWebDoc = annotationSourceDoc); + + var success = false; + const onSuccess = action(() => { + console.log("Edit success!!"); + success = true; + clearTimeout(interval); + DocumentLinksButton.invisibleWebDoc = undefined; + document.removeEventListener("editSuccess", onSuccess); + }); + + const newHyperlink = `[${title}\n](${url})`; + const interval = setInterval(() => // keep trying to edit until annotations have loaded and editing is successful + !success && document.dispatchEvent(new CustomEvent<{ newHyperlink: string, id: string }>("addLink", { + detail: { newHyperlink: newHyperlink, id: annotationId }, + bubbles: true + })), 300); + + setTimeout(action(() => { + if (!success) { + clearInterval(interval); + DocumentLinksButton.invisibleWebDoc = undefined; + } + }), 10000); // give up if no success after 10s + document.addEventListener("editSuccess", onSuccess); + }; + + /** + * Send message Hypothes.is client request to edit an annotation to find and delete the target Dash hyperlink + */ + export const deleteLink = async (linkDoc: Doc, sourceDoc: Doc, destinationDoc: Doc) => { + if (Cast(destinationDoc.data, WebField)?.url.href !== StrCast(linkDoc.annotationUri)) return; // check that the destinationDoc is a WebDocument containing the target annotation + + !DocumentManager.Instance.getFirstDocumentView(destinationDoc) && runInAction(() => DocumentLinksButton.invisibleWebDoc = destinationDoc); // see note in makeLink + + var success = false; + const onSuccess = action(() => { + console.log("Edit success!"); + success = true; + clearTimeout(interval); + DocumentLinksButton.invisibleWebDoc = undefined; + document.removeEventListener("editSuccess", onSuccess); + }); + + const annotationId = StrCast(linkDoc.annotationId); + const linkUrl = Utils.prepend("/doc/" + sourceDoc[Id]); + const interval = setInterval(() => {// keep trying to edit until annotations have loaded and editing is successful + !success && document.dispatchEvent(new CustomEvent<{ targetUrl: string, id: string }>("deleteLink", { + detail: { targetUrl: linkUrl, id: annotationId }, + bubbles: true + })); + }, 300); + + setTimeout(action(() => { + if (!success) { + clearInterval(interval); + DocumentLinksButton.invisibleWebDoc = undefined; + } + }), 10000); // give up if no success after 10s + document.addEventListener("editSuccess", onSuccess); + }; + + /** + * Send message to Hypothes.is client to scroll to an annotation when it loads + */ + export const scrollToAnnotation = (annotationId: string, target: Doc) => { + var success = false; + const onSuccess = () => { + console.log("Scroll success!!"); + document.removeEventListener('scrollSuccess', onSuccess); + clearInterval(interval); + success = true; + }; + + const interval = setInterval(() => { // keep trying to scroll every 250ms until annotations have loaded and scrolling is successful + document.dispatchEvent(new CustomEvent('scrollToAnnotation', { + detail: annotationId, + bubbles: true + })); + const targetView: Opt = DocumentManager.Instance.getFirstDocumentView(target); + const position = targetView?.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + targetView && position && simulateMouseClick(targetView.ContentDiv!, position[0], position[1], position[0], position[1], false); + }, 300); + + document.addEventListener('scrollSuccess', onSuccess); // listen for success message from client + setTimeout(() => !success && clearInterval(interval), 10000); // give up if no success after 10s + }; +} \ No newline at end of file diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 8f9b9e0a0..f5dccd567 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -58,7 +58,7 @@ import { TaskCompletionBox } from './nodes/TaskCompletedBox'; import { OverlayView } from './OverlayView'; import PDFMenu from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; -import { Hypothesis } from '../apis/hypothesis/HypothesisUtils'; +import { Hypothesis } from '../util/HypothesisUtils'; import { undoBatch } from '../util/UndoManager'; import { WebBox } from './nodes/WebBox'; import * as ReactDOM from 'react-dom'; diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index e045b351f..72aece284 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -506,5 +506,5 @@ import { CollectionView, CollectionViewType } from "./CollectionView"; import { SelectionManager } from "../../util/SelectionManager"; import { OverlayView } from "../OverlayView"; import { setTimeout } from "timers"; -import { Hypothesis } from "../../apis/hypothesis/HypothesisUtils"; +import { Hypothesis } from "../../util/HypothesisUtils"; diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index de9e25f48..b95fccf2a 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -15,7 +15,7 @@ import { setupMoveUpEvents, emptyFunction, Utils, simulateMouseClick } from '../ import { DocumentView } from '../nodes/DocumentView'; import { DocumentLinksButton } from '../nodes/DocumentLinksButton'; import { LinkDocPreview } from '../nodes/LinkDocPreview'; -import { Hypothesis } from '../../apis/hypothesis/HypothesisUtils'; +import { Hypothesis } from '../../util/HypothesisUtils'; import { Id } from '../../../fields/FieldSymbols'; import { Tooltip } from '@material-ui/core'; import { DocumentType } from '../../documents/DocumentTypes'; diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 1e6f663d3..31dd33fc1 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -13,7 +13,7 @@ import { undoBatch, UndoManager } from "../../util/UndoManager"; import { DocumentView } from "./DocumentView"; import { StrCast, Cast } from "../../../fields/Types"; import { LinkDescriptionPopup } from "./LinkDescriptionPopup"; -import { Hypothesis } from "../../apis/hypothesis/HypothesisUtils"; +import { Hypothesis } from "../../util/HypothesisUtils"; import { Id } from "../../../fields/FieldSymbols"; import { TaskCompletionBox } from "./TaskCompletedBox"; import React = require("react"); -- cgit v1.2.3-70-g09d2