From ae62e415d18b83fb1ef6b4a8f438b1d7e8d3157a Mon Sep 17 00:00:00 2001 From: HJF Bulterman Date: Fri, 9 Aug 2019 11:31:57 -0400 Subject: initial commit - individual presentation document view showing but with errors --- src/client/documents/Documents.ts | 13 +- src/client/views/MainView.tsx | 7 +- src/client/views/nodes/DocumentContentsView.tsx | 3 +- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/FieldView.tsx | 5 + src/client/views/nodes/PresBox.tsx | 880 ++++++++++++++++++++++++ src/client/views/pdf/PDFMenu.tsx | 2 +- src/new_fields/PresField.ts | 6 + 8 files changed, 912 insertions(+), 6 deletions(-) create mode 100644 src/client/views/nodes/PresBox.tsx create mode 100644 src/new_fields/PresField.ts (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index ee1b9fd0d..492aebf4a 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -40,6 +40,9 @@ import DirectoryImportBox from "../util/Import & Export/DirectoryImportBox"; import { Scripting } from "../util/Scripting"; import { ButtonBox } from "../views/nodes/ButtonBox"; import { SchemaHeaderField, RandomPastel } from "../../new_fields/SchemaHeaderField"; +import { PresBox } from "../views/nodes/PresBox"; +//import { PresBox } from "../views/nodes/PresBox"; +//import { PresField } from "../../new_fields/PresField"; var requestImageSize = require('../util/request-image-size'); var path = require('path'); @@ -60,7 +63,8 @@ export enum DocumentType { LINKDOC = "linkdoc", BUTTON = "button", TEMPLATE = "template", - EXTENSION = "extension" + EXTENSION = "extension", + PRES = "presentation" } export interface DocumentOptions { @@ -168,6 +172,10 @@ export namespace Docs { }], [DocumentType.BUTTON, { layout: { view: ButtonBox }, + }], + [DocumentType.PRES, { + layout: { view: PresBox }, + options: {} }] ]); @@ -335,6 +343,9 @@ export namespace Docs { .catch((err: any) => console.log(err)); return inst; } + export function PresDocument(initial: List = new List(), options: DocumentOptions = {}) { + return InstanceFromProto(Prototypes.get(DocumentType.PRES), initial, options); + } export function VideoDocument(url: string, options: DocumentOptions = {}) { return InstanceFromProto(Prototypes.get(DocumentType.VID), new VideoField(new URL(url)), options); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f5a6715e5..14cfc6792 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -58,7 +58,8 @@ export class MainView extends React.Component { private set mainContainer(doc: Opt) { if (doc) { if (!("presentationView" in doc)) { - doc.presentationView = new List([Docs.Create.TreeDocument([], { title: "Presentation" })]); + let initialDoc = Docs.Create.TreeDocument([], { title: "Presentation" }); + doc.presentationView = Docs.Create.PresDocument(new List([initialDoc])); } CurrentUserUtils.UserDocument.activeWorkspace = doc; } @@ -384,11 +385,13 @@ export class MainView extends React.Component { let addButtonDocument = action(() => Docs.Create.ButtonDocument({ width: 150, height: 50, title: "Button" })); let addImportCollectionNode = action(() => Docs.Create.DirectoryImportDocument({ title: "Directory Import", width: 400, height: 400 })); + let addPresentationNode = action(() => Docs.Create.PresDocument(new List([Docs.Create.TreeDocument([], { title: "Presentation" })]))); + let btns: [React.RefObject, IconName, string, () => Doc][] = [ [React.createRef(), "object-group", "Add Collection", addColNode], [React.createRef(), "bolt", "Add Button", addButtonDocument], // [React.createRef(), "clone", "Add Docking Frame", addDockingNode], - [React.createRef(), "cloud-upload-alt", "Import Directory", addImportCollectionNode], + [React.createRef(), "cloud-upload-alt", "Import Directory", addPresentationNode], //remove at some point in favor of addImportCollectionNode ]; if (!ClientUtils.RELEASE) btns.unshift([React.createRef(), "cat", "Add Cat Image", addImageNode]); diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 91d4fb524..f74336cdd 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -12,6 +12,7 @@ import "./DocumentView.scss"; import { FormattedTextBox } from "./FormattedTextBox"; import { ImageBox } from "./ImageBox"; import { ButtonBox } from "./ButtonBox"; +import { PresBox } from "./PresBox"; import { IconBox } from "./IconBox"; import { KeyValueBox } from "./KeyValueBox"; import { PDFBox } from "./PDFBox"; @@ -98,7 +99,7 @@ export class DocumentContentsView extends React.Component 7) return (null); if (!this.layout && (this.props.layoutKey !== "overlayLayout" || !this.templates.length)) return (null); return (Docu subitems.push({ description: "Open Fields", event: this.fieldsClicked, icon: "layer-group" }); cm.addItem({ description: "Open...", subitems: subitems, icon: "external-link-alt" }); cm.addItem({ description: BoolCast(this.props.Document.ignoreAspect, false) || !this.props.Document.nativeWidth || !this.props.Document.nativeHeight ? "Freeze" : "Unfreeze", event: this.freezeNativeDimensions, icon: "snowflake" }); - cm.addItem({ description: "Pin to Presentation", event: () => PresentationView.Instance.PinDoc(this.props.Document), icon: "map-pin" }); + cm.addItem({ description: "Pin to Presentation", event: () => PresentationView.Instance.PinDoc(this.props.Document), icon: "map-pin" }); //change this to cm.addItem({ description: BoolCast(this.props.Document.lockedPosition) ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.props.Document.lockedPosition) ? "unlock" : "lock" }); let makes: ContextMenuProps[] = []; makes.push({ description: "Make Background", event: this.makeBackground, icon: BoolCast(this.props.Document.lockedPosition) ? "unlock" : "lock" }); diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index ffaee8042..b1030d19d 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -18,6 +18,7 @@ import { ImageBox } from "./ImageBox"; import { PDFBox } from "./PDFBox"; import { VideoBox } from "./VideoBox"; import { Id } from "../../../new_fields/FieldSymbols"; +import { PresBox } from "./PresBox"; // // these properties get assigned through the render() method of the DocumentView when it creates this node. @@ -54,6 +55,7 @@ export interface FieldViewProps { export class FieldView extends React.Component { public static LayoutString(fieldType: { name: string }, fieldStr: string = "data", fieldExt: string = "") { return `<${fieldType.name} {...props} fieldKey={"${fieldStr}"} fieldExt={"${fieldExt}"} />`; + //"" } @computed @@ -75,6 +77,9 @@ export class FieldView extends React.Component { else if (field instanceof ImageField) { return ; } + // else if (field instaceof PresBox) { + // return ; + // } else if (field instanceof IconField) { return ; } diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx new file mode 100644 index 000000000..2feb32693 --- /dev/null +++ b/src/client/views/nodes/PresBox.tsx @@ -0,0 +1,880 @@ +import React = require("react"); +import { FieldViewProps, FieldView } from './FieldView'; +import { observer } from "mobx-react"; +import { observable, action, runInAction, reaction, autorun, computed } from "mobx"; +import "../presentationview/PresentationView.scss"; +import { DocumentManager } from "../../util/DocumentManager"; +import { Utils } from "../../../Utils"; +import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc"; +import { listSpec } from "../../../new_fields/Schema"; +import { Cast, NumCast, FieldValue, PromiseValue, StrCast, BoolCast } from "../../../new_fields/Types"; +import { Id } from "../../../new_fields/FieldSymbols"; +import { List } from "../../../new_fields/List"; +import PresentationElement, { buttonIndex } from "../presentationview/PresentationElement"; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus, faEdit } from '@fortawesome/free-solid-svg-icons'; +import { Docs } from "../../documents/Documents"; +import { undoBatch, UndoManager } from "../../util/UndoManager"; +import PresentationViewList from "../presentationview/PresentationList"; + +library.add(faArrowLeft); +library.add(faArrowRight); +library.add(faPlay); +library.add(faStop); +library.add(faPlus); +library.add(faTimes); +library.add(faMinus); +library.add(faEdit); + + +export interface PresViewProps { + Documents: List; +} + +const expandedWidth = 400; + +@observer +export class PresBox extends React.Component { //FieldViewProps? + + @computed + private get presentationDocs() { + let source = Doc.GetProto(this.props.Document); + return DocListCast(source.data); + } + + public static LayoutString(fieldKey?: string) { return FieldView.LayoutString(PresBox, fieldKey); } + + //public static Instance: PresentationView; + public static Instance: PresBox; + + //Mapping from presentation ids to a list of doc that represent a group + @observable groupMappings: Map = new Map(); + //mapping from docs to their rendered component + @observable presElementsMappings: Map = new Map(); + //variable that holds all the docs in the presentation + @observable childrenDocs: Doc[] = []; + //variable to hold if presentation is started + @observable presStatus: boolean = false; + //back-up so that presentation stays the way it's when refreshed + @observable presGroupBackUp: Doc = new Doc(); + @observable presButtonBackUp: Doc = new Doc(); + + //Keeping track of the doc for the current presentation + @observable curPresentation: Doc = new Doc(); + //Mapping of guids to presentations. + @observable presentationsMapping: Map = new Map(); + //Mapping of presentations to guid, so that select option values can be given. + @observable presentationsKeyMapping: Map = new Map(); + //Variable to keep track of guid of the current presentation + @observable currentSelectedPresValue: string | undefined; + //A flag to keep track if title input is open, which is used in rendering. + @observable PresTitleInputOpen: boolean = false; + //Variable that holds reference to title input, so that new presentations get titles assigned. + @observable titleInputElement: HTMLInputElement | undefined; + @observable PresTitleChangeOpen: boolean = false; + + @observable opacity = 1; + @observable persistOpacity = true; + @observable labelOpacity = 0; + + //initilize class variables + constructor(props: FieldViewProps) { //FieldViewProps? + super(props); + //PresentationView.Instance = this; + PresBox.Instance = this; + } + + @action + toggle = (forcedValue: boolean | undefined) => { + if (forcedValue !== undefined) { + this.curPresentation.width = forcedValue ? expandedWidth : 0; + } else { + this.curPresentation.width = this.curPresentation.width === expandedWidth ? 0 : expandedWidth; + } + } + + //The first lifecycle function that gets called to set up the current presentation. + async componentWillMount() { + this.presentationDocs.forEach(async (doc, index: number) => { + + //For each presentation received from mainContainer, a mapping is created. + let curDoc: Doc = await doc; + let newGuid = Utils.GenerateGuid(); + this.presentationsKeyMapping.set(curDoc, newGuid); + this.presentationsMapping.set(newGuid, curDoc); + + //The Presentation at first index gets set as default start presentation + if (index === 0) { + runInAction(() => this.currentSelectedPresValue = newGuid); + runInAction(() => this.curPresentation = curDoc); + } + }); + } + + //Second lifecycle function that gets called when component mounts. It makes sure to + //get the back-up information from previous session for the current presentation. + async componentDidMount() { + let docAtZero = await this.presentationDocs[0]; + runInAction(() => this.curPresentation = docAtZero); + + this.setPresentationBackUps(); + + } + + + /** + * The function that retrieves the backUps for the current Presentation if present, + * otherwise initializes. + */ + setPresentationBackUps = async () => { + //getting both backUp documents + + let castedGroupBackUp = Cast(this.curPresentation.presGroupBackUp, Doc); + let castedButtonBackUp = Cast(this.curPresentation.presButtonBackUp, Doc); + //if instantiated before + if (castedGroupBackUp instanceof Promise) { + castedGroupBackUp.then(doc => { + let toAssign = doc ? doc : new Doc(); + this.curPresentation.presGroupBackUp = toAssign; + runInAction(() => this.presGroupBackUp = toAssign); + if (doc) { + if (toAssign[Id] === doc[Id]) { + this.retrieveGroupMappings(); + } + } + }); + + //if never instantiated a store doc yet + } else if (castedGroupBackUp instanceof Doc) { + let castedDoc: Doc = await castedGroupBackUp; + runInAction(() => this.presGroupBackUp = castedDoc); + this.retrieveGroupMappings(); + } else { + runInAction(() => { + let toAssign = new Doc(); + this.presGroupBackUp = toAssign; + this.curPresentation.presGroupBackUp = toAssign; + + }); + + } + //if instantiated before + if (castedButtonBackUp instanceof Promise) { + castedButtonBackUp.then(doc => { + let toAssign = doc ? doc : new Doc(); + this.curPresentation.presButtonBackUp = toAssign; + runInAction(() => this.presButtonBackUp = toAssign); + }); + + //if never instantiated a store doc yet + } else if (castedButtonBackUp instanceof Doc) { + let castedDoc: Doc = await castedButtonBackUp; + runInAction(() => this.presButtonBackUp = castedDoc); + + } else { + runInAction(() => { + let toAssign = new Doc(); + this.presButtonBackUp = toAssign; + this.curPresentation.presButtonBackUp = toAssign; + }); + + } + + + //storing the presentation status,ie. whether it was stopped or playing + let presStatusBackUp = BoolCast(this.curPresentation.presStatus); + runInAction(() => this.presStatus = presStatusBackUp); + } + + /** + * This is the function that is called to retrieve the groups that have been stored and + * push them to the groupMappings. + */ + retrieveGroupMappings = async () => { + let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); + if (castedGroupDocs !== undefined) { + castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { + let castedGrouping = await DocListCastAsync(groupDoc.grouping); + let castedKey = StrCast(groupDoc.presentIdStore, null); + if (castedGrouping) { + castedGrouping.forEach((doc: Doc) => { + doc.presentId = castedKey; + }); + } + if (castedGrouping !== undefined && castedKey !== undefined) { + this.groupMappings.set(castedKey, castedGrouping); + } + }); + } + } + + //observable means render is re-called every time variable is changed + @observable + collapsed: boolean = false; + closePresentation = action(() => this.curPresentation.width = 0); + next = async () => { + const current = NumCast(this.curPresentation.selectedDoc); + //asking to get document at current index + let docAtCurrentNext = await this.getDocAtIndex(current + 1); + if (docAtCurrentNext === undefined) { + return; + } + //asking for it's presentation id + let curNextPresId = StrCast(docAtCurrentNext.presentId); + let nextSelected = current + 1; + + //if curDoc is in a group, selection slides until last one, if not it's next one + if (this.groupMappings.has(curNextPresId)) { + let currentsArray = this.groupMappings.get(StrCast(docAtCurrentNext.presentId))!; + nextSelected = current + currentsArray.length - currentsArray.indexOf(docAtCurrentNext); + + //end of grup so go beyond + if (nextSelected === current) nextSelected = current + 1; + } + + this.gotoDocument(nextSelected, current); + + } + back = async () => { + const current = NumCast(this.curPresentation.selectedDoc); + //requesting for the doc at current index + let docAtCurrent = await this.getDocAtIndex(current); + if (docAtCurrent === undefined) { + return; + } + + //asking for its presentation id. + let curPresId = StrCast(docAtCurrent.presentId); + let prevSelected = current - 1; + let zoomOut: boolean = false; + + //checking if this presentation id is mapped to a group, if so chosing the first element in group + if (this.groupMappings.has(curPresId)) { + let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!; + prevSelected = current - currentsArray.length + (currentsArray.length - currentsArray.indexOf(docAtCurrent)) - 1; + //end of grup so go beyond + if (prevSelected === current) prevSelected = current - 1; + + //checking if any of the group members had used zooming in + currentsArray.forEach((doc: Doc) => { + //let presElem: PresentationElement | undefined = this.presElementsMappings.get(doc); + if (this.presElementsMappings.get(doc)!.selected[buttonIndex.Show]) { + zoomOut = true; + return; + } + }); + + } + + // if a group set that flag to zero or a single element + //If so making sure to zoom out, which goes back to state before zooming action + if (current > 0) { + if (zoomOut || this.presElementsMappings.get(docAtCurrent)!.selected[buttonIndex.Show]) { + let prevScale = NumCast(this.childrenDocs[prevSelected].viewScale, null); + let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[current]); + if (prevScale !== undefined) { + if (prevScale !== curScale) { + DocumentManager.Instance.zoomIntoScale(docAtCurrent, prevScale); + } + } + } + } + this.gotoDocument(prevSelected, current); + + } + + /** + * This is the method that checks for the actions that need to be performed + * after the document has been presented, which involves 3 button options: + * Hide Until Presented, Hide After Presented, Fade After Presented + */ + showAfterPresented = (index: number) => { + this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => { + let selectedButtons: boolean[] = presElem.selected; + //the order of cases is aligned based on priority + if (selectedButtons[buttonIndex.HideTillPressed]) { + if (this.childrenDocs.indexOf(key) <= index) { + key.opacity = 1; + } + } + if (selectedButtons[buttonIndex.HideAfter]) { + if (this.childrenDocs.indexOf(key) < index) { + key.opacity = 0; + } + } + if (selectedButtons[buttonIndex.FadeAfter]) { + if (this.childrenDocs.indexOf(key) < index) { + key.opacity = 0.5; + } + } + }); + } + + /** + * This is the method that checks for the actions that need to be performed + * before the document has been presented, which involves 3 button options: + * Hide Until Presented, Hide After Presented, Fade After Presented + */ + hideIfNotPresented = (index: number) => { + this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => { + let selectedButtons: boolean[] = presElem.selected; + + //the order of cases is aligned based on priority + + if (selectedButtons[buttonIndex.HideAfter]) { + if (this.childrenDocs.indexOf(key) >= index) { + key.opacity = 1; + } + } + if (selectedButtons[buttonIndex.FadeAfter]) { + if (this.childrenDocs.indexOf(key) >= index) { + key.opacity = 1; + } + } + if (selectedButtons[buttonIndex.HideTillPressed]) { + if (this.childrenDocs.indexOf(key) > index) { + key.opacity = 0; + } + } + }); + } + + /** + * This method makes sure that cursor navigates to the element that + * has the option open and last in the group. If not in the group, and it has + * te option open, navigates to that element. + */ + navigateToElement = async (curDoc: Doc, fromDoc: number) => { + let docToJump: Doc = curDoc; + let curDocPresId = StrCast(curDoc.presentId, null); + let willZoom: boolean = false; + + //checking if in group + if (curDocPresId !== undefined) { + if (this.groupMappings.has(curDocPresId)) { + let currentDocGroup = this.groupMappings.get(curDocPresId)!; + currentDocGroup.forEach((doc: Doc, index: number) => { + let selectedButtons: boolean[] = this.presElementsMappings.get(doc)!.selected; + if (selectedButtons[buttonIndex.Navigate]) { + docToJump = doc; + willZoom = false; + } + if (selectedButtons[buttonIndex.Show]) { + docToJump = doc; + willZoom = true; + } + }); + } + + } + //docToJump stayed same meaning, it was not in the group or was the last element in the group + if (docToJump === curDoc) { + //checking if curDoc has navigation open + let curDocButtons = this.presElementsMappings.get(curDoc)!.selected; + if (curDocButtons[buttonIndex.Navigate]) { + DocumentManager.Instance.jumpToDocument(curDoc, false); + } else if (curDocButtons[buttonIndex.Show]) { + let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]); + //awaiting jump so that new scale can be found, since jumping is async + await DocumentManager.Instance.jumpToDocument(curDoc, true); + let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc); + curDoc.viewScale = newScale; + + //saving the scale user was on before zooming in + if (curScale !== 1) { + this.childrenDocs[fromDoc].viewScale = curScale; + } + + } + return; + } + let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]); + + //awaiting jump so that new scale can be found, since jumping is async + await DocumentManager.Instance.jumpToDocument(docToJump, willZoom); + let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc); + curDoc.viewScale = newScale; + //saving the scale that user was on + if (curScale !== 1) { + this.childrenDocs[fromDoc].viewScale = curScale; + } + + } + + /** + * Async function that supposedly return the doc that is located at given index. + */ + getDocAtIndex = async (index: number) => { + const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); + if (!list) { + return undefined; + } + if (index < 0 || index >= list.length) { + return undefined; + } + + this.curPresentation.selectedDoc = index; + //awaiting async call to finish to get Doc instance + const doc = await list[index]; + return doc; + } + + /** + * The function that removes a doc from a presentation. It also makes sure to + * do necessary updates to backUps and mappings stored locally. + */ + @action + public RemoveDoc = async (index: number) => { + const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); + if (value) { + let removedDoc = await value.splice(index, 1)[0]; + + //removing the Presentation Element stored for it + this.presElementsMappings.delete(removedDoc); + + let removedDocPresentId = StrCast(removedDoc.presentId); + + //Removing it from local mapping of the groups + if (this.groupMappings.has(removedDocPresentId)) { + let removedDocsGroup = this.groupMappings.get(removedDocPresentId); + if (removedDocsGroup) { + removedDocsGroup.splice(removedDocsGroup.indexOf(removedDoc), 1); + if (removedDocsGroup.length === 0) { + this.groupMappings.delete(removedDocPresentId); + } + } + } + + //removing it from the backUp of selected Buttons + // let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc)); + // if (castedList) { + // castedList.forEach(async (doc, indexOfDoc) => { + // let curDoc = await doc; + // let curDocId = StrCast(curDoc.docId); + // if (curDocId === removedDoc[Id]) { + // if (castedList) { + // castedList.splice(indexOfDoc, 1); + // return; + // } + // } + // }); + + // } + //removing it from the backUp of selected Buttons + + let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc)); + if (castedList) { + for (let doc of castedList) { + let curDoc = await doc; + let curDocId = StrCast(curDoc.docId); + if (curDocId === removedDoc[Id]) { + castedList.splice(castedList.indexOf(curDoc), 1); + break; + + } + } + } + + //removing it from the backup of groups + let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); + if (castedGroupDocs) { + castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { + let castedKey = StrCast(groupDoc.presentIdStore, null); + if (castedKey === removedDocPresentId) { + let castedGrouping = await DocListCastAsync(groupDoc.grouping); + if (castedGrouping) { + castedGrouping.splice(castedGrouping.indexOf(removedDoc), 1); + if (castedGrouping.length === 0) { + castedGroupDocs!.splice(castedGroupDocs!.indexOf(groupDoc), 1); + } + } + } + + }); + + } + + + } + } + + public removeDocByRef = (doc: Doc) => { + let indexOfDoc = this.childrenDocs.indexOf(doc); + const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); + if (value) { + value.splice(indexOfDoc, 1)[0]; + } + //this.RemoveDoc(indexOfDoc, true); + if (indexOfDoc !== - 1) { + return true; + } + return false; + } + + //The function that is called when a document is clicked or reached through next or back. + //it'll also execute the necessary actions if presentation is playing. + @action + public gotoDocument = async (index: number, fromDoc: number) => { + const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); + if (!list) { + return; + } + if (index < 0 || index >= list.length) { + return; + } + this.curPresentation.selectedDoc = index; + + if (!this.presStatus) { + this.presStatus = true; + this.startPresentation(index); + } + + const doc = await list[index]; + if (this.presStatus) { + this.navigateToElement(doc, fromDoc); + this.hideIfNotPresented(index); + this.showAfterPresented(index); + } + + } + + //Function that is called to resetGroupIds, so that documents get new groupIds at + //first load, when presentation is changed. + resetGroupIds = async () => { + let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); + if (castedGroupDocs !== undefined) { + castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { + let castedGrouping = await DocListCastAsync(groupDoc.grouping); + if (castedGrouping) { + castedGrouping.forEach((doc: Doc) => { + doc.presentId = Utils.GenerateGuid(); + }); + } + }); + } + runInAction(() => this.groupMappings = new Map()); + } + + /** + * Adds a document to the presentation view + **/ + @undoBatch + @action + public PinDoc(doc: Doc) { + //add this new doc to props.Document + const data = Cast(this.curPresentation.data, listSpec(Doc)); + if (data) { + data.push(doc); + } else { + this.curPresentation.data = new List([doc]); + } + + this.toggle(true); + } + + //Function that sets the store of the children docs. + @action + setChildrenDocs = (docList: Doc[]) => { + this.childrenDocs = docList; + } + + //The function that is called to render the play or pause button depending on + //if presentation is running or not. + renderPlayPauseButton = () => { + if (this.presStatus) { + return ; + } else { + return ; + } + } + + //The function that starts or resets presentaton functionally, depending on status flag. + @action + startOrResetPres = () => { + if (this.presStatus) { + this.resetPresentation(); + } else { + this.presStatus = true; + this.startPresentation(0); + const current = NumCast(this.curPresentation.selectedDoc); + this.gotoDocument(0, current); + } + this.curPresentation.presStatus = this.presStatus; + } + + //The function that resets the presentation by removing every action done by it. It also + //stops the presentaton. + @action + resetPresentation = () => { + this.childrenDocs.forEach((doc: Doc) => { + doc.opacity = 1; + doc.viewScale = 1; + }); + this.curPresentation.selectedDoc = 0; + this.presStatus = false; + this.curPresentation.presStatus = this.presStatus; + if (this.childrenDocs.length === 0) { + return; + } + DocumentManager.Instance.zoomIntoScale(this.childrenDocs[0], 1); + } + + + //The function that starts the presentation, also checking if actions should be applied + //directly at start. + startPresentation = (startIndex: number) => { + let selectedButtons: boolean[]; + this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => { + selectedButtons = component.selected; + if (selectedButtons[buttonIndex.HideTillPressed]) { + if (this.childrenDocs.indexOf(doc) > startIndex) { + doc.opacity = 0; + } + + } + if (selectedButtons[buttonIndex.HideAfter]) { + if (this.childrenDocs.indexOf(doc) < startIndex) { + doc.opacity = 0; + } + } + if (selectedButtons[buttonIndex.FadeAfter]) { + if (this.childrenDocs.indexOf(doc) < startIndex) { + doc.opacity = 0.5; + } + } + + }); + + } + + /** + * The function that is called to add a new presentation to the presentationView. + * It sets up te mappings and local copies of it. Resets the groupings and presentation. + * Makes the new presentation current selected, and retrieve the back-Ups if present. + */ + @action + addNewPresentation = (presTitle: string) => { + //creating a new presentation doc + let newPresentationDoc = Docs.Create.TreeDocument([], { title: presTitle }); + let presDocs = Cast(Doc.GetProto(this.props.Document).data, listSpec(Doc)); + presDocs && presDocs.push(newPresentationDoc); + + //setting that new doc as current + this.curPresentation = newPresentationDoc; + + //storing the doc in local copies for easier access + let newGuid = Utils.GenerateGuid(); + this.presentationsMapping.set(newGuid, newPresentationDoc); + this.presentationsKeyMapping.set(newPresentationDoc, newGuid); + + //resetting the previous presentation's actions so that new presentation can be loaded. + this.resetGroupIds(); + this.resetPresentation(); + this.presElementsMappings = new Map(); + this.currentSelectedPresValue = newGuid; + this.setPresentationBackUps(); + + } + + /** + * The function that is called to change the current selected presentation. + * Changes the presentation, also resetting groupings and presentation in process. + * Plus retrieving the backUps for the newly selected presentation. + */ + @action + getSelectedPresentation = (e: React.ChangeEvent) => { + //get the guid of the selected presentation + let selectedGuid = e.target.value; + //set that as current presentation + this.curPresentation = this.presentationsMapping.get(selectedGuid)!; + + //reset current Presentations local things so that new one can be loaded + this.resetGroupIds(); + this.resetPresentation(); + this.presElementsMappings = new Map(); + this.currentSelectedPresValue = selectedGuid; + this.setPresentationBackUps(); + + + } + + /** + * The function that is called to render either select for presentations, or title inputting. + */ + renderSelectOrPresSelection = () => { + let presentationList = this.presentationDocs; + if (this.PresTitleInputOpen || this.PresTitleChangeOpen) { + return this.titleInputElement = e!} type="text" className="presentationView-title" placeholder="Enter Name!" onKeyDown={this.submitPresentationTitle} />; + } else { + return ; + } + } + + /** + * The function that is called on enter press of title input. It gives the + * new presentation the title user entered. If nothing is entered, gives a default title. + */ + @action + submitPresentationTitle = (e: React.KeyboardEvent) => { + if (e.keyCode === 13) { + let presTitle = this.titleInputElement!.value; + this.titleInputElement!.value = ""; + if (this.PresTitleInputOpen) { + if (presTitle === "") { + presTitle = "Presentation"; + } + this.PresTitleInputOpen = false; + this.addNewPresentation(presTitle); + } else if (this.PresTitleChangeOpen) { + this.PresTitleChangeOpen = false; + this.changePresentationTitle(presTitle); + } + } + } + + /** + * The function that is called to remove a presentation from all its copies, and the main Container's + * list. Sets up the next presentation as current. + */ + @action + removePresentation = async () => { + if (this.presentationsMapping.size !== 1) { + let presentationList = this.presentationDocs; + let batch = UndoManager.StartBatch("presRemoval"); + + //getting the presentation that will be removed + let removedDoc = this.presentationsMapping.get(this.currentSelectedPresValue!); + //that presentation is removed + presentationList!.splice(presentationList!.indexOf(removedDoc!), 1); + + //its mappings are removed from local copies + this.presentationsKeyMapping.delete(removedDoc!); + this.presentationsMapping.delete(this.currentSelectedPresValue!); + + //the next presentation is set as current + let remainingPresentations = this.presentationsMapping.values(); + let nextDoc = remainingPresentations.next().value; + this.curPresentation = nextDoc; + + + //Storing these for being able to undo changes + let curGuid = this.currentSelectedPresValue!; + let curPresStatus = this.presStatus; + + //resetting the groups and presentation actions so that next presentation gets loaded + this.resetGroupIds(); + this.resetPresentation(); + this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString(); + this.setPresentationBackUps(); + + //Storing for undo + let currentGroups = this.groupMappings; + let curPresElemMapping = this.presElementsMappings; + + //Event to undo actions that are not related to doc directly, aka. local things + UndoManager.AddEvent({ + undo: action(() => { + this.curPresentation = removedDoc!; + this.presentationsMapping.set(curGuid, removedDoc!); + this.presentationsKeyMapping.set(removedDoc!, curGuid); + this.currentSelectedPresValue = curGuid; + + this.presStatus = curPresStatus; + this.groupMappings = currentGroups; + this.presElementsMappings = curPresElemMapping; + this.setPresentationBackUps(); + + }), + redo: action(() => { + this.curPresentation = nextDoc; + this.presStatus = false; + this.presentationsKeyMapping.delete(removedDoc!); + this.presentationsMapping.delete(curGuid); + this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString(); + this.setPresentationBackUps(); + + }), + }); + + batch.end(); + } + } + + /** + * The function that is called to change title of presentation to what user entered. + */ + @undoBatch + changePresentationTitle = (newTitle: string) => { + if (newTitle === "") { + return; + } + this.curPresentation.title = newTitle; + } + + addPressElem = (keyDoc: Doc, elem: PresentationElement) => { + this.presElementsMappings.set(keyDoc, elem); + } + + + render() { + + let width = NumCast(this.curPresentation.width); + + return ( +
!this.persistOpacity && (this.opacity = 1))} onPointerLeave={action(() => !this.persistOpacity && (this.opacity = 0.4))} style={{ width: width, overflow: "hidden", opacity: this.opacity, transition: "0.7s opacity ease" }}> +
+ {this.renderSelectOrPresSelection()} + {/**this.closePresentation CLICK does not work?! Also without the*/} + + + +
+
+ + {this.renderPlayPauseButton()} + +
+ ) => { + this.persistOpacity = e.target.checked; + this.opacity = this.persistOpacity ? 1 : 0.4; + })} + checked={this.persistOpacity} + style={{ position: "absolute", bottom: 5, left: 5 }} + onPointerEnter={action(() => this.labelOpacity = 1)} + onPointerLeave={action(() => this.labelOpacity = 0)} + /> +

opacity {this.persistOpacity ? "persistent" : "on focus"}

+ this.presElementsMappings.clear()} + /> +
+ ); + } + + +} \ No newline at end of file diff --git a/src/client/views/pdf/PDFMenu.tsx b/src/client/views/pdf/PDFMenu.tsx index 27c2a8f1a..23d0c0b10 100644 --- a/src/client/views/pdf/PDFMenu.tsx +++ b/src/client/views/pdf/PDFMenu.tsx @@ -250,7 +250,7 @@ export default class PDFMenu extends React.Component { ] : [ , - , + , //change this to pin to 'new' presentation
diff --git a/src/new_fields/PresField.ts b/src/new_fields/PresField.ts new file mode 100644 index 000000000..f236a04fd --- /dev/null +++ b/src/new_fields/PresField.ts @@ -0,0 +1,6 @@ +//insert code here +import { ObjectField } from "./ObjectField"; + +export abstract class PresField extends ObjectField { + +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 158a6f960f6c069af16ab0b84df8ce76c7327ebc Mon Sep 17 00:00:00 2001 From: Fawn Date: Fri, 9 Aug 2019 15:20:11 -0400 Subject: first commit --- src/client/views/MetadataEntryMenu.tsx | 2 ++ src/server/index.ts | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx index 36c240dd8..abdd876fa 100644 --- a/src/client/views/MetadataEntryMenu.tsx +++ b/src/client/views/MetadataEntryMenu.tsx @@ -169,6 +169,8 @@ export class MetadataEntryMenu extends React.Component{ ref={this.autosuggestRef} /> Value: + Spread to children: +
); } diff --git a/src/server/index.ts b/src/server/index.ts index 29b44713c..f7f01126b 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -437,7 +437,7 @@ function LoadPage(file: string, pageNumber: number, res: Response) { console.log(pageNumber); pdf.getPage(pageNumber).then((page: Pdfjs.PDFPageProxy) => { console.log("reading " + page); - let viewport = page.getViewport(1); + let viewport = page.getViewport({ scale: 1 }); let canvasAndContext = factory.create(viewport.width, viewport.height); let renderContext = { canvasContext: canvasAndContext.context, -- cgit v1.2.3-70-g09d2 From 0af800d2edf120ab2a20842ed67ea7d7616996b9 Mon Sep 17 00:00:00 2001 From: HJF Bulterman Date: Fri, 9 Aug 2019 15:37:49 -0400 Subject: working for about 85% --- src/client/views/MainView.tsx | 27 +++++++++++++++++----- .../views/collections/CollectionDockingView.tsx | 9 ++++++++ src/client/views/nodes/DocumentView.tsx | 3 ++- src/client/views/nodes/PresBox.tsx | 7 +++--- 4 files changed, 36 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 14cfc6792..cb81f9aad 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -247,7 +247,6 @@ export class MainView extends React.Component { @computed get dockingContent() { let flyoutWidth = this.flyoutWidth; let mainCont = this.mainContainer; - let castRes = mainCont ? FieldValue(Cast(mainCont.presentationView, listSpec(Doc))) : undefined; return {({ measureRef }) =>
@@ -271,7 +270,7 @@ export class MainView extends React.Component { zoomToScale={emptyFunction} getScale={returnOne} />} - {castRes ? : null} + {/* {presentationDoc ? : null} */}
} ; @@ -385,13 +384,11 @@ export class MainView extends React.Component { let addButtonDocument = action(() => Docs.Create.ButtonDocument({ width: 150, height: 50, title: "Button" })); let addImportCollectionNode = action(() => Docs.Create.DirectoryImportDocument({ title: "Directory Import", width: 400, height: 400 })); - let addPresentationNode = action(() => Docs.Create.PresDocument(new List([Docs.Create.TreeDocument([], { title: "Presentation" })]))); - let btns: [React.RefObject, IconName, string, () => Doc][] = [ [React.createRef(), "object-group", "Add Collection", addColNode], [React.createRef(), "bolt", "Add Button", addButtonDocument], // [React.createRef(), "clone", "Add Docking Frame", addDockingNode], - [React.createRef(), "cloud-upload-alt", "Import Directory", addPresentationNode], //remove at some point in favor of addImportCollectionNode + [React.createRef(), "cloud-upload-alt", "Import Directory", addImportCollectionNode], //remove at some point in favor of addImportCollectionNode ]; if (!ClientUtils.RELEASE) btns.unshift([React.createRef(), "cat", "Add Cat Image", addImageNode]); @@ -402,7 +399,7 @@ export class MainView extends React.Component {
    • -
    • +
    • {btns.map(btn => @@ -453,6 +450,24 @@ export class MainView extends React.Component { this.isSearchVisible = !this.isSearchVisible; } + togglePresentationView = () => { + let presDoc = this.presentationDoc; + if (!presDoc) { + return; + } + let isOpen = CollectionDockingView.Instance.Has(presDoc); + if (isOpen) { + CollectionDockingView.Instance.CloseRightSplit(presDoc); + } else { + CollectionDockingView.Instance.AddRightSplit(presDoc, undefined); + } + } + + private get presentationDoc() { + let mainCont = this.mainContainer; + return mainCont ? FieldValue(Cast(mainCont.presentationView, Doc)) : undefined; + } + render() { return (
    diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 1859ebee7..bd83a46a3 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -162,6 +162,14 @@ export class CollectionDockingView extends React.Component { + let docs = Cast(this.props.Document.data, listSpec(Doc)); + if (!docs) { + return false; + } + return docs.includes(document); + } + // // Creates a vertical split on the right side of the docking view, and then adds the Document to that split // @@ -525,6 +533,7 @@ export class DockedFrameRenderer extends React.Component { this.props.glContainer.layoutManager.on("activeContentItemChanged", this.onActiveContentItemChanged); this.props.glContainer.on("tab", this.onActiveContentItemChanged); this.onActiveContentItemChanged(); + // setTimeout(() => MainView.Instance.openPresentationView(), 2000); } componentWillUnmount() { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 0ca303dde..6d4c18050 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -41,6 +41,7 @@ import { ClientUtils } from '../../util/ClientUtils'; import { EditableView } from '../EditableView'; import { faHandPointer, faHandPointRight } from '@fortawesome/free-regular-svg-icons'; import { DocumentDecorations } from '../DocumentDecorations'; +import { PresBox } from './PresBox'; const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? library.add(fa.faTrash); @@ -553,7 +554,7 @@ export class DocumentView extends DocComponent(Docu subitems.push({ description: "Open Fields", event: this.fieldsClicked, icon: "layer-group" }); cm.addItem({ description: "Open...", subitems: subitems, icon: "external-link-alt" }); cm.addItem({ description: BoolCast(this.props.Document.ignoreAspect, false) || !this.props.Document.nativeWidth || !this.props.Document.nativeHeight ? "Freeze" : "Unfreeze", event: this.freezeNativeDimensions, icon: "snowflake" }); - cm.addItem({ description: "Pin to Presentation", event: () => PresentationView.Instance.PinDoc(this.props.Document), icon: "map-pin" }); //change this to + cm.addItem({ description: "Pin to Presentation", event: () => PresBox.Instance.PinDoc(this.props.Document), icon: "map-pin" }); //this should work, and it does! A miracle! cm.addItem({ description: BoolCast(this.props.Document.lockedPosition) ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.props.Document.lockedPosition) ? "unlock" : "lock" }); let makes: ContextMenuProps[] = []; makes.push({ description: "Make Background", event: this.makeBackground, icon: BoolCast(this.props.Document.lockedPosition) ? "unlock" : "lock" }); diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 2feb32693..8316c4469 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -32,7 +32,7 @@ export interface PresViewProps { Documents: List; } -const expandedWidth = 400; +const expandedWidth = 450; @observer export class PresBox extends React.Component { //FieldViewProps? @@ -825,10 +825,11 @@ export class PresBox extends React.Component { //FieldViewProps? render() { - let width = NumCast(this.curPresentation.width); + let width = "100%"; //NumCast(this.curPresentation.width) + console.log("The width is: " + width); return ( -
    !this.persistOpacity && (this.opacity = 1))} onPointerLeave={action(() => !this.persistOpacity && (this.opacity = 0.4))} style={{ width: width, overflow: "hidden", opacity: this.opacity, transition: "0.7s opacity ease" }}> +
    !this.persistOpacity && (this.opacity = 1))} onPointerLeave={action(() => !this.persistOpacity && (this.opacity = 0.4))} style={{ width: width, overflow: "hidden", opacity: this.opacity, transition: "0.7s opacity ease", pointerEvents: "all" }}>
    {this.renderSelectOrPresSelection()} {/**this.closePresentation CLICK does not work?! Also without the*/} -- cgit v1.2.3-70-g09d2 From e7883760751d053133c8bb9b867509fa23f40b68 Mon Sep 17 00:00:00 2001 From: Fawn Date: Fri, 9 Aug 2019 15:38:49 -0400 Subject: pushing work so far --- src/client/views/MetadataEntryMenu.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx index abdd876fa..426b24212 100644 --- a/src/client/views/MetadataEntryMenu.tsx +++ b/src/client/views/MetadataEntryMenu.tsx @@ -20,6 +20,7 @@ export class MetadataEntryMenu extends React.Component{ @observable private _currentValue: string = ""; @observable private suggestions: string[] = []; private userModified = false; + private _addChildren = false; private autosuggestRef = React.createRef(); @@ -82,6 +83,9 @@ export class MetadataEntryMenu extends React.Component{ e.stopPropagation(); const script = KeyValueBox.CompileKVPScript(this._currentValue); if (!script) return; + // add optional adding here + let docs = Array(); + let doc = this.props.docs; if (typeof doc === "function") { doc = doc(); @@ -155,6 +159,11 @@ export class MetadataEntryMenu extends React.Component{ this.suggestions = []; } + onClick = (e: React.ChangeEvent) => { + this._addChildren = !this._addChildren; + console.log(this._addChildren); + } + render() { return (
    @@ -170,7 +179,7 @@ export class MetadataEntryMenu extends React.Component{ Value: Spread to children: - +
    ); } -- cgit v1.2.3-70-g09d2 From d271205a94bcb2ebc524b70f8a3ff98398e69252 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Mon, 12 Aug 2019 21:39:16 -0400 Subject: exporting text to google docs almost supported --- package.json | 1 + src/client/DocServer.ts | 1 + .../apis/google_docs/GoogleApiClientUtils.ts | 85 ++++++++++ src/client/views/MainView.tsx | 11 +- src/server/Message.ts | 1 + src/server/RouteStore.ts | 3 +- src/server/apis/google/GoogleApiServerUtils.ts | 109 +++++++++++++ src/server/apis/youtube/youtubeApiSample.d.ts | 2 + src/server/apis/youtube/youtubeApiSample.js | 179 +++++++++++++++++++++ .../credentials/google_docs_credentials.json | 1 + src/server/credentials/google_docs_token.json | 1 + src/server/index.ts | 33 +++- src/server/youtubeApi/youtubeApiSample.d.ts | 2 - src/server/youtubeApi/youtubeApiSample.js | 179 --------------------- 14 files changed, 418 insertions(+), 190 deletions(-) create mode 100644 src/client/apis/google_docs/GoogleApiClientUtils.ts create mode 100644 src/server/apis/google/GoogleApiServerUtils.ts create mode 100644 src/server/apis/youtube/youtubeApiSample.d.ts create mode 100644 src/server/apis/youtube/youtubeApiSample.js create mode 100644 src/server/credentials/google_docs_credentials.json create mode 100644 src/server/credentials/google_docs_token.json delete mode 100644 src/server/youtubeApi/youtubeApiSample.d.ts delete mode 100644 src/server/youtubeApi/youtubeApiSample.js (limited to 'src') diff --git a/package.json b/package.json index d699d1e6f..326468ab9 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "@types/express-session": "^1.15.12", "@types/express-validator": "^3.0.0", "@types/formidable": "^1.0.31", + "@types/gapi": "0.0.39", "@types/jquery": "^3.3.29", "@types/jquery-awesome-cursor": "^0.3.0", "@types/jsonwebtoken": "^8.3.2", diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts index bf5168c22..47aff2bb6 100644 --- a/src/client/DocServer.ts +++ b/src/client/DocServer.ts @@ -5,6 +5,7 @@ import { Utils, emptyFunction } from '../Utils'; import { SerializationHelper } from './util/SerializationHelper'; import { RefField } from '../new_fields/RefField'; import { Id, HandleUpdate } from '../new_fields/FieldSymbols'; +import { docs_v1 } from 'googleapis'; /** * This class encapsulates the transfer and cross-client synchronization of diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts new file mode 100644 index 000000000..42e621f6b --- /dev/null +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -0,0 +1,85 @@ +import { docs_v1 } from "googleapis"; +import { PostToServer } from "../../../Utils"; +import { RouteStore } from "../../../server/RouteStore"; + +export namespace GoogleApiClientUtils { + + export namespace Docs { + + export enum Actions { + Create = "create", + Retrieve = "retrieve" + } + + export namespace Helpers { + + export const fromRgb = (red: number, green: number, blue: number) => { + return { color: { rgbColor: { red, green, blue } } }; + }; + + } + + export const ExampleDocumentSchema = { + title: "This is a Google Doc Created From Dash Web", + body: { + content: [ + { + paragraph: { + elements: [ + { + textRun: { + content: "And this is its bold, blue text!!!", + textStyle: { + bold: true, + backgroundColor: Helpers.fromRgb(0, 0, 1) + } + } + } + ] + } + } + ] as docs_v1.Schema$StructuralElement[] + } + } as docs_v1.Schema$Document; + + /** + * After following the authentication routine, which connects this API call to the current signed in account + * and grants the appropriate permissions, this function programmatically creates an arbitrary Google Doc which + * should appear in the user's Google Doc library instantaneously. + * + * @param schema whatever subset of a docs_v1.Schema$Document is required to properly initialize your + * Google Doc. This schema defines all aspects of a Google Doc, from the title to headers / footers to the + * actual document body and its styling! + * @returns the documentId of the newly generated document, or undefined if the creation process fails. + */ + export const Create = async (schema?: docs_v1.Schema$Document): Promise => { + let path = RouteStore.googleDocs + Actions.Create; + let parameters = { requestBody: schema || ExampleDocumentSchema }; + let generatedId: string | undefined; + try { + generatedId = await PostToServer(path, parameters); + } catch (e) { + console.error(e); + generatedId = undefined; + } finally { + return generatedId; + } + }; + + let path = RouteStore.googleDocs + Actions.Retrieve; + export const Retrieve = async (documentId: string): Promise => { + let parameters = { documentId }; + let documentContents: any; + try { + documentContents = await PostToServer(path, parameters); + } catch (e) { + console.error(e); + documentContents = undefined; + } finally { + return documentContents; + } + }; + + } + +} \ No newline at end of file diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 031478477..0a987de4a 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -15,7 +15,7 @@ import { listSpec } from '../../new_fields/Schema'; import { Cast, FieldValue, NumCast, BoolCast, StrCast } from '../../new_fields/Types'; import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils'; import { RouteStore } from '../../server/RouteStore'; -import { emptyFunction, returnOne, returnTrue, Utils, returnEmptyString } from '../../Utils'; +import { emptyFunction, returnOne, returnTrue, Utils, returnEmptyString, PostToServer } from '../../Utils'; import { DocServer } from '../DocServer'; import { Docs } from '../documents/Documents'; import { SetupDrag } from '../util/DragManager'; @@ -40,6 +40,8 @@ import { CollectionTreeView } from './collections/CollectionTreeView'; import { ClientUtils } from '../util/ClientUtils'; import { SchemaHeaderField, RandomPastel } from '../../new_fields/SchemaHeaderField'; import { DictationManager } from '../util/DictationManager'; +import { docs_v1 } from 'googleapis'; +import { GoogleApiClientUtils } from '../apis/google_docs/GoogleApiClientUtils'; @observer export class MainView extends React.Component { @@ -130,6 +132,8 @@ export class MainView extends React.Component { window.removeEventListener("keydown", KeyManager.Instance.handle); window.addEventListener("keydown", KeyManager.Instance.handle); + GoogleApiClientUtils.Docs.Create().then(id => console.log(id)); + reaction(() => { let workspaces = CurrentUserUtils.UserDocument.workspaces; let recent = CurrentUserUtils.UserDocument.recentlyClosed; @@ -569,6 +573,11 @@ export class MainView extends React.Component { render() { return (
    + { + if (e.which === 13) { + GoogleApiClientUtils.Docs.Retrieve(e.currentTarget.value.trim()).then((res: any) => console.log(res)); + } + }} /> {this.dictationOverlay} {this.mainContent} diff --git a/src/server/Message.ts b/src/server/Message.ts index aaee143e8..4ec390ade 100644 --- a/src/server/Message.ts +++ b/src/server/Message.ts @@ -1,4 +1,5 @@ import { Utils } from "../Utils"; +import { google, docs_v1 } from "googleapis"; export class Message { private _name: string; diff --git a/src/server/RouteStore.ts b/src/server/RouteStore.ts index e30015e39..5d977006a 100644 --- a/src/server/RouteStore.ts +++ b/src/server/RouteStore.ts @@ -30,6 +30,7 @@ export enum RouteStore { reset = "/reset/:token", // APIS - cognitiveServices = "/cognitiveservices" + cognitiveServices = "/cognitiveservices", + googleDocs = "/googleDocs/" } \ No newline at end of file diff --git a/src/server/apis/google/GoogleApiServerUtils.ts b/src/server/apis/google/GoogleApiServerUtils.ts new file mode 100644 index 000000000..817b2b696 --- /dev/null +++ b/src/server/apis/google/GoogleApiServerUtils.ts @@ -0,0 +1,109 @@ +import { google, docs_v1 } from "googleapis"; +import { createInterface } from "readline"; +import { readFile, writeFile } from "fs"; +import { OAuth2Client } from "google-auth-library"; + +/** + * Server side authentication for Google Api queries. + */ +export namespace GoogleApiServerUtils { + + // If modifying these scopes, delete token.json. + const prefix = 'https://www.googleapis.com/auth/'; + const SCOPES = [ + 'documents.readonly', + 'documents', + 'drive', + 'drive.file', + ]; + // The file token.json stores the user's access and refresh tokens, and is + // created automatically when the authorization flow completes for the first + // time. + export const parseBuffer = (data: Buffer) => JSON.parse(data.toString()); + + export namespace Docs { + + export interface CredentialPaths { + credentials: string; + token: string; + } + + export type Endpoint = docs_v1.Docs; + + export const GetEndpoint = async (paths: CredentialPaths) => { + return new Promise((resolve, reject) => { + readFile(paths.credentials, (err, credentials) => { + if (err) { + reject(err); + return console.log('Error loading client secret file:', err); + } + return authorize(parseBuffer(credentials), paths.token).then(auth => { + resolve(google.docs({ version: "v1", auth })); + }); + }); + }); + }; + + } + + /** + * Create an OAuth2 client with the given credentials, and returns the promise resolving to the authenticated client + * @param {Object} credentials The authorization client credentials. + */ + export function authorize(credentials: any, token_path: string): Promise { + const { client_secret, client_id, redirect_uris } = credentials.installed; + const oAuth2Client = new google.auth.OAuth2( + client_id, client_secret, redirect_uris[0]); + + return new Promise((resolve, reject) => { + readFile(token_path, (err, token) => { + // Check if we have previously stored a token. + if (err) { + return getNewToken(oAuth2Client, token_path).then(resolve, reject); + } + oAuth2Client.setCredentials(parseBuffer(token)); + resolve(oAuth2Client); + }); + }); + } + + /** + * Get and store new token after prompting for user authorization, and then + * execute the given callback with the authorized OAuth2 client. + * @param {google.auth.OAuth2} oAuth2Client The OAuth2 client to get token for. + * @param {getEventsCallback} callback The callback for the authorized client. + */ + function getNewToken(oAuth2Client: OAuth2Client, token_path: string) { + return new Promise((resolve, reject) => { + const authUrl = oAuth2Client.generateAuthUrl({ + access_type: 'offline', + scope: SCOPES.map(relative => prefix + relative), + }); + console.log('Authorize this app by visiting this url:', authUrl); + const rl = createInterface({ + input: process.stdin, + output: process.stdout, + }); + rl.question('Enter the code from that page here: ', (code) => { + rl.close(); + oAuth2Client.getToken(code, (err, token) => { + if (err || !token) { + reject(err); + return console.error('Error retrieving access token', err); + } + oAuth2Client.setCredentials(token); + // Store the token to disk for later program executions + writeFile(token_path, JSON.stringify(token), (err) => { + if (err) { + console.error(err); + reject(err); + } + console.log('Token stored to', token_path); + }); + resolve(oAuth2Client); + }); + }); + }); + } + +} \ No newline at end of file diff --git a/src/server/apis/youtube/youtubeApiSample.d.ts b/src/server/apis/youtube/youtubeApiSample.d.ts new file mode 100644 index 000000000..427f54608 --- /dev/null +++ b/src/server/apis/youtube/youtubeApiSample.d.ts @@ -0,0 +1,2 @@ +declare const YoutubeApi: any; +export = YoutubeApi; \ No newline at end of file diff --git a/src/server/apis/youtube/youtubeApiSample.js b/src/server/apis/youtube/youtubeApiSample.js new file mode 100644 index 000000000..50b3c7b38 --- /dev/null +++ b/src/server/apis/youtube/youtubeApiSample.js @@ -0,0 +1,179 @@ +const fs = require('fs'); +const readline = require('readline'); +const { google } = require('googleapis'); +const OAuth2 = google.auth.OAuth2; + + +// If modifying these scopes, delete your previously saved credentials +// at ~/.credentials/youtube-nodejs-quickstart.json +let SCOPES = ['https://www.googleapis.com/auth/youtube.readonly']; +let TOKEN_DIR = (process.env.HOME || process.env.HOMEPATH || + process.env.USERPROFILE) + '/.credentials/'; +let TOKEN_PATH = TOKEN_DIR + 'youtube-nodejs-quickstart.json'; + +module.exports.readApiKey = (callback) => { + fs.readFile('client_secret.json', function processClientSecrets(err, content) { + if (err) { + console.log('Error loading client secret file: ' + err); + return; + } + callback(content); + }); +} + +module.exports.authorizedGetChannel = (apiKey) => { + //this didnt get called + // Authorize a client with the loaded credentials, then call the YouTube API. + authorize(JSON.parse(apiKey), getChannel); +} + +module.exports.authorizedGetVideos = (apiKey, userInput, callBack) => { + authorize(JSON.parse(apiKey), getVideos, { userInput: userInput, callBack: callBack }); +} + +module.exports.authorizedGetVideoDetails = (apiKey, videoIds, callBack) => { + authorize(JSON.parse(apiKey), getVideoDetails, { videoIds: videoIds, callBack: callBack }); +} + + +/** + * Create an OAuth2 client with the given credentials, and then execute the + * given callback function. + * + * @param {Object} credentials The authorization client credentials. + * @param {function} callback The callback to call with the authorized client. + */ +function authorize(credentials, callback, args = {}) { + let clientSecret = credentials.installed.client_secret; + let clientId = credentials.installed.client_id; + let redirectUrl = credentials.installed.redirect_uris[0]; + let oauth2Client = new OAuth2(clientId, clientSecret, redirectUrl); + + // Check if we have previously stored a token. + fs.readFile(TOKEN_PATH, function (err, token) { + if (err) { + getNewToken(oauth2Client, callback); + } else { + oauth2Client.credentials = JSON.parse(token); + callback(oauth2Client, args); + } + }); +} + +/** + * Get and store new token after prompting for user authorization, and then + * execute the given callback with the authorized OAuth2 client. + * + * @param {google.auth.OAuth2} oauth2Client The OAuth2 client to get token for. + * @param {getEventsCallback} callback The callback to call with the authorized + * client. + */ +function getNewToken(oauth2Client, callback) { + var authUrl = oauth2Client.generateAuthUrl({ + access_type: 'offline', + scope: SCOPES + }); + console.log('Authorize this app by visiting this url: ', authUrl); + var rl = readline.createInterface({ + input: process.stdin, + output: process.stdout + }); + rl.question('Enter the code from that page here: ', function (code) { + rl.close(); + oauth2Client.getToken(code, function (err, token) { + if (err) { + console.log('Error while trying to retrieve access token', err); + return; + } + oauth2Client.credentials = token; + storeToken(token); + callback(oauth2Client); + }); + }); +} + +/** + * Store token to disk be used in later program executions. + * + * @param {Object} token The token to store to disk. + */ +function storeToken(token) { + try { + fs.mkdirSync(TOKEN_DIR); + } catch (err) { + if (err.code != 'EEXIST') { + throw err; + } + } + fs.writeFile(TOKEN_PATH, JSON.stringify(token), (err) => { + if (err) throw err; + console.log('Token stored to ' + TOKEN_PATH); + }); + console.log('Token stored to ' + TOKEN_PATH); +} + +/** + * Lists the names and IDs of up to 10 files. + * + * @param {google.auth.OAuth2} auth An authorized OAuth2 client. + */ +function getChannel(auth) { + var service = google.youtube('v3'); + service.channels.list({ + auth: auth, + part: 'snippet,contentDetails,statistics', + forUsername: 'GoogleDevelopers' + }, function (err, response) { + if (err) { + console.log('The API returned an error: ' + err); + return; + } + var channels = response.data.items; + if (channels.length == 0) { + console.log('No channel found.'); + } else { + console.log('This channel\'s ID is %s. Its title is \'%s\', and ' + + 'it has %s views.', + channels[0].id, + channels[0].snippet.title, + channels[0].statistics.viewCount); + } + }); +} + +function getVideos(auth, args) { + let service = google.youtube('v3'); + service.search.list({ + auth: auth, + part: 'id, snippet', + type: 'video', + q: args.userInput, + maxResults: 10 + }, function (err, response) { + if (err) { + console.log('The API returned an error: ' + err); + return; + } + let videos = response.data.items; + args.callBack(videos); + }); +} + +function getVideoDetails(auth, args) { + if (args.videoIds === undefined) { + return; + } + let service = google.youtube('v3'); + service.videos.list({ + auth: auth, + part: 'contentDetails, statistics', + id: args.videoIds + }, function (err, response) { + if (err) { + console.log('The API returned an error from details: ' + err); + return; + } + let videoDetails = response.data.items; + args.callBack(videoDetails); + }); +} \ No newline at end of file diff --git a/src/server/credentials/google_docs_credentials.json b/src/server/credentials/google_docs_credentials.json new file mode 100644 index 000000000..8d097d363 --- /dev/null +++ b/src/server/credentials/google_docs_credentials.json @@ -0,0 +1 @@ +{"installed":{"client_id":"343179513178-ud6tvmh275r2fq93u9eesrnc66t6akh9.apps.googleusercontent.com","project_id":"quickstart-1565056383187","auth_uri":"https://accounts.google.com/o/oauth2/auth","token_uri":"https://oauth2.googleapis.com/token","auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs","client_secret":"w8KIFSc0MQpmUYHed4qEzn8b","redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]}} \ No newline at end of file diff --git a/src/server/credentials/google_docs_token.json b/src/server/credentials/google_docs_token.json new file mode 100644 index 000000000..07c02d56c --- /dev/null +++ b/src/server/credentials/google_docs_token.json @@ -0,0 +1 @@ +{"access_token":"ya29.GltjB4-x03xFpd2NY2555cxg1xlT_ajqRi78M9osOfdOF2jTIjlPkn_UZL8cUwVP0DPC8rH3vhhg8RpspFe8Vewx92shAO3RPos_uMH0CUqEiCiZlaaB5I3Jq3Mv","refresh_token":"1/teUKUqGKMLjVqs-eed0L8omI02pzSxMUYaxGc2QxBw0","scope":"https://www.googleapis.com/auth/documents https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/documents.readonly","token_type":"Bearer","expiry_date":1565654175862} \ No newline at end of file diff --git a/src/server/index.ts b/src/server/index.ts index eae018f13..9986e62d6 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -14,7 +14,6 @@ import * as mobileDetect from 'mobile-detect'; import * as passport from 'passport'; import * as path from 'path'; import * as request from 'request'; -import * as rp from 'request-promise'; import * as io from 'socket.io'; import { Socket } from 'socket.io'; import * as webpack from 'webpack'; @@ -36,19 +35,16 @@ const port = 1050; // default port to listen const serverPort = 4321; import expressFlash = require('express-flash'); import flash = require('connect-flash'); -import c = require("crypto"); import { Search } from './Search'; -import { debug } from 'util'; import _ = require('lodash'); import * as Archiver from 'archiver'; -import * as AdmZip from 'adm-zip'; -import * as YoutubeApi from './youtubeApi/youtubeApiSample.js'; +import AdmZip from 'adm-zip'; +import * as YoutubeApi from "./apis/youtube/youtubeApiSample"; import { Response } from 'express-serve-static-core'; +import { GoogleApiServerUtils } from "./apis/google/GoogleApiServerUtils"; const MongoStore = require('connect-mongo')(session); const mongoose = require('mongoose'); const probe = require("probe-image-size"); -var SolrNode = require('solr-node'); -var shell = require('shelljs'); const download = (url: string, dest: fs.PathLike) => request.get(url).pipe(fs.createWriteStream(dest)); let youtubeApiKey: string; @@ -790,6 +786,29 @@ function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: any } } +const credentials = path.join(__dirname, "./credentials/google_docs_credentials.json"); +const token = path.join(__dirname, "./credentials/google_docs_token.json"); + +app.post(RouteStore.googleDocs + ":action", (req, res) => { + let parameters = req.body; + console.log(parameters, req.params.action); + + GoogleApiServerUtils.Docs.GetEndpoint({ credentials, token }).then(endpoint => { + let results: Promise | undefined; + switch (req.params.action) { + case "create": + results = endpoint.documents.create(parameters).then(generated => generated.data.documentId); + break; + case "retrieve": + results = endpoint.documents.get(parameters).then(response => response.data); + break; + default: + results = undefined; + } + results && results.then(final => res.send(final)); + }); +}); + const suffixMap: { [type: string]: (string | [string, string | ((json: any) => any)]) } = { "number": "_n", "string": "_t", diff --git a/src/server/youtubeApi/youtubeApiSample.d.ts b/src/server/youtubeApi/youtubeApiSample.d.ts deleted file mode 100644 index 427f54608..000000000 --- a/src/server/youtubeApi/youtubeApiSample.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare const YoutubeApi: any; -export = YoutubeApi; \ No newline at end of file diff --git a/src/server/youtubeApi/youtubeApiSample.js b/src/server/youtubeApi/youtubeApiSample.js deleted file mode 100644 index 50b3c7b38..000000000 --- a/src/server/youtubeApi/youtubeApiSample.js +++ /dev/null @@ -1,179 +0,0 @@ -const fs = require('fs'); -const readline = require('readline'); -const { google } = require('googleapis'); -const OAuth2 = google.auth.OAuth2; - - -// If modifying these scopes, delete your previously saved credentials -// at ~/.credentials/youtube-nodejs-quickstart.json -let SCOPES = ['https://www.googleapis.com/auth/youtube.readonly']; -let TOKEN_DIR = (process.env.HOME || process.env.HOMEPATH || - process.env.USERPROFILE) + '/.credentials/'; -let TOKEN_PATH = TOKEN_DIR + 'youtube-nodejs-quickstart.json'; - -module.exports.readApiKey = (callback) => { - fs.readFile('client_secret.json', function processClientSecrets(err, content) { - if (err) { - console.log('Error loading client secret file: ' + err); - return; - } - callback(content); - }); -} - -module.exports.authorizedGetChannel = (apiKey) => { - //this didnt get called - // Authorize a client with the loaded credentials, then call the YouTube API. - authorize(JSON.parse(apiKey), getChannel); -} - -module.exports.authorizedGetVideos = (apiKey, userInput, callBack) => { - authorize(JSON.parse(apiKey), getVideos, { userInput: userInput, callBack: callBack }); -} - -module.exports.authorizedGetVideoDetails = (apiKey, videoIds, callBack) => { - authorize(JSON.parse(apiKey), getVideoDetails, { videoIds: videoIds, callBack: callBack }); -} - - -/** - * Create an OAuth2 client with the given credentials, and then execute the - * given callback function. - * - * @param {Object} credentials The authorization client credentials. - * @param {function} callback The callback to call with the authorized client. - */ -function authorize(credentials, callback, args = {}) { - let clientSecret = credentials.installed.client_secret; - let clientId = credentials.installed.client_id; - let redirectUrl = credentials.installed.redirect_uris[0]; - let oauth2Client = new OAuth2(clientId, clientSecret, redirectUrl); - - // Check if we have previously stored a token. - fs.readFile(TOKEN_PATH, function (err, token) { - if (err) { - getNewToken(oauth2Client, callback); - } else { - oauth2Client.credentials = JSON.parse(token); - callback(oauth2Client, args); - } - }); -} - -/** - * Get and store new token after prompting for user authorization, and then - * execute the given callback with the authorized OAuth2 client. - * - * @param {google.auth.OAuth2} oauth2Client The OAuth2 client to get token for. - * @param {getEventsCallback} callback The callback to call with the authorized - * client. - */ -function getNewToken(oauth2Client, callback) { - var authUrl = oauth2Client.generateAuthUrl({ - access_type: 'offline', - scope: SCOPES - }); - console.log('Authorize this app by visiting this url: ', authUrl); - var rl = readline.createInterface({ - input: process.stdin, - output: process.stdout - }); - rl.question('Enter the code from that page here: ', function (code) { - rl.close(); - oauth2Client.getToken(code, function (err, token) { - if (err) { - console.log('Error while trying to retrieve access token', err); - return; - } - oauth2Client.credentials = token; - storeToken(token); - callback(oauth2Client); - }); - }); -} - -/** - * Store token to disk be used in later program executions. - * - * @param {Object} token The token to store to disk. - */ -function storeToken(token) { - try { - fs.mkdirSync(TOKEN_DIR); - } catch (err) { - if (err.code != 'EEXIST') { - throw err; - } - } - fs.writeFile(TOKEN_PATH, JSON.stringify(token), (err) => { - if (err) throw err; - console.log('Token stored to ' + TOKEN_PATH); - }); - console.log('Token stored to ' + TOKEN_PATH); -} - -/** - * Lists the names and IDs of up to 10 files. - * - * @param {google.auth.OAuth2} auth An authorized OAuth2 client. - */ -function getChannel(auth) { - var service = google.youtube('v3'); - service.channels.list({ - auth: auth, - part: 'snippet,contentDetails,statistics', - forUsername: 'GoogleDevelopers' - }, function (err, response) { - if (err) { - console.log('The API returned an error: ' + err); - return; - } - var channels = response.data.items; - if (channels.length == 0) { - console.log('No channel found.'); - } else { - console.log('This channel\'s ID is %s. Its title is \'%s\', and ' + - 'it has %s views.', - channels[0].id, - channels[0].snippet.title, - channels[0].statistics.viewCount); - } - }); -} - -function getVideos(auth, args) { - let service = google.youtube('v3'); - service.search.list({ - auth: auth, - part: 'id, snippet', - type: 'video', - q: args.userInput, - maxResults: 10 - }, function (err, response) { - if (err) { - console.log('The API returned an error: ' + err); - return; - } - let videos = response.data.items; - args.callBack(videos); - }); -} - -function getVideoDetails(auth, args) { - if (args.videoIds === undefined) { - return; - } - let service = google.youtube('v3'); - service.videos.list({ - auth: auth, - part: 'contentDetails, statistics', - id: args.videoIds - }, function (err, response) { - if (err) { - console.log('The API returned an error from details: ' + err); - return; - } - let videoDetails = response.data.items; - args.callBack(videoDetails); - }); -} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 278cabf67a77edb3dd3bd9bb392550eeb08ab910 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 13 Aug 2019 02:06:32 -0400 Subject: more util functions and clean up --- .../apis/google_docs/GoogleApiClientUtils.ts | 71 +++++++++++++++++++--- src/client/views/MainView.tsx | 24 +++++--- src/server/index.ts | 1 - 3 files changed, 78 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts index 42e621f6b..71e5e1073 100644 --- a/src/client/apis/google_docs/GoogleApiClientUtils.ts +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -1,6 +1,7 @@ import { docs_v1 } from "googleapis"; import { PostToServer } from "../../../Utils"; import { RouteStore } from "../../../server/RouteStore"; +import { Opt } from "../../../new_fields/Doc"; export namespace GoogleApiClientUtils { @@ -11,33 +12,76 @@ export namespace GoogleApiClientUtils { Retrieve = "retrieve" } - export namespace Helpers { + export namespace Utils { export const fromRgb = (red: number, green: number, blue: number) => { return { color: { rgbColor: { red, green, blue } } }; }; + export const extractText = (document: docs_v1.Schema$Document, removeNewlines = false) => { + let fragments: string[] = []; + if (document.body && document.body.content) { + for (let element of document.body.content) { + if (element.paragraph && element.paragraph.elements) { + for (let inner of element.paragraph.elements) { + if (inner && inner.textRun) { + let fragment = inner.textRun.content; + fragment && fragments.push(fragment); + } + } + } + } + } + let text = fragments.join(""); + return removeNewlines ? text.ReplaceAll("\n", "") : text; + }; + } export const ExampleDocumentSchema = { title: "This is a Google Doc Created From Dash Web", body: { content: [ + { + endIndex: 1, + sectionBreak: { + sectionStyle: { + columnSeparatorStyle: "NONE", + contentDirection: "LEFT_TO_RIGHT" + } + } + }, { paragraph: { elements: [ { textRun: { - content: "And this is its bold, blue text!!!", + content: "And this is its bold, blue text!!!\n", textStyle: { bold: true, - backgroundColor: Helpers.fromRgb(0, 0, 1) + backgroundColor: Utils.fromRgb(0, 0, 1) } } } ] } - } + }, + { + paragraph: { + elements: [ + { + textRun: { + content: "And this is its bold, blue text!!!\n", + textStyle: { + bold: true, + backgroundColor: Utils.fromRgb(0, 0, 1) + } + } + } + ] + } + }, + ] as docs_v1.Schema$StructuralElement[] } } as docs_v1.Schema$Document; @@ -66,20 +110,27 @@ export namespace GoogleApiClientUtils { } }; - let path = RouteStore.googleDocs + Actions.Retrieve; - export const Retrieve = async (documentId: string): Promise => { + export const Read = async (documentId: string, removeNewlines = false): Promise> => { + return Retrieve(documentId).then(schema => { + return schema ? Utils.extractText(schema, removeNewlines) : undefined; + }); + }; + + export const Retrieve = async (documentId: string): Promise> => { + let path = RouteStore.googleDocs + Actions.Retrieve; let parameters = { documentId }; - let documentContents: any; + let schema: Opt; try { - documentContents = await PostToServer(path, parameters); + schema = await PostToServer(path, parameters); } catch (e) { console.error(e); - documentContents = undefined; + schema = undefined; } finally { - return documentContents; + return schema; } }; + } } \ No newline at end of file diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 0a987de4a..3a5285a66 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -87,6 +87,11 @@ export class MainView extends React.Component { if (!("presentationView" in doc)) { doc.presentationView = new List([Docs.Create.TreeDocument([], { title: "Presentation" })]); } + if (!("googleDocId" in doc)) { + GoogleApiClientUtils.Docs.Create().then(id => { + id && (doc.googleDocId = id); + }); + } CurrentUserUtils.UserDocument.activeWorkspace = doc; } } @@ -132,8 +137,6 @@ export class MainView extends React.Component { window.removeEventListener("keydown", KeyManager.Instance.handle); window.addEventListener("keydown", KeyManager.Instance.handle); - GoogleApiClientUtils.Docs.Create().then(id => console.log(id)); - reaction(() => { let workspaces = CurrentUserUtils.UserDocument.workspaces; let recent = CurrentUserUtils.UserDocument.recentlyClosed; @@ -151,6 +154,18 @@ export class MainView extends React.Component { }, { fireImmediately: true }); } + componentDidMount() { + reaction(() => this.mainContainer, () => { + let main = this.mainContainer, googleDocId; + if (main && (googleDocId = StrCast(main.googleDocId))) { + GoogleApiClientUtils.Docs.Read(googleDocId, true).then(text => { + text && Utils.CopyText(text); + console.log(text); + }); + } + }); + } + componentWillUnMount() { window.removeEventListener("keydown", KeyManager.Instance.handle); window.removeEventListener("pointerdown", this.globalPointerDown); @@ -573,11 +588,6 @@ export class MainView extends React.Component { render() { return (
    - { - if (e.which === 13) { - GoogleApiClientUtils.Docs.Retrieve(e.currentTarget.value.trim()).then((res: any) => console.log(res)); - } - }} /> {this.dictationOverlay} {this.mainContent} diff --git a/src/server/index.ts b/src/server/index.ts index 9986e62d6..4ccb61681 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -791,7 +791,6 @@ const token = path.join(__dirname, "./credentials/google_docs_token.json"); app.post(RouteStore.googleDocs + ":action", (req, res) => { let parameters = req.body; - console.log(parameters, req.params.action); GoogleApiServerUtils.Docs.GetEndpoint({ credentials, token }).then(endpoint => { let results: Promise | undefined; -- cgit v1.2.3-70-g09d2 From 2ed0c3e1203794ddaa0b17ed908432582d0198d1 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 13 Aug 2019 02:11:38 -0400 Subject: reading options --- src/client/apis/google_docs/GoogleApiClientUtils.ts | 11 ++++++++--- src/client/views/MainView.tsx | 6 +++--- 2 files changed, 11 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts index 71e5e1073..5e974b2e7 100644 --- a/src/client/apis/google_docs/GoogleApiClientUtils.ts +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -110,9 +110,14 @@ export namespace GoogleApiClientUtils { } }; - export const Read = async (documentId: string, removeNewlines = false): Promise> => { - return Retrieve(documentId).then(schema => { - return schema ? Utils.extractText(schema, removeNewlines) : undefined; + export interface ReadOptions { + documentId: string; + removeNewlines?: boolean; + } + + export const Read = async (options: ReadOptions): Promise> => { + return Retrieve(options.documentId).then(schema => { + return schema ? Utils.extractText(schema, options.removeNewlines) : undefined; }); }; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 3a5285a66..705eacc0c 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -156,9 +156,9 @@ export class MainView extends React.Component { componentDidMount() { reaction(() => this.mainContainer, () => { - let main = this.mainContainer, googleDocId; - if (main && (googleDocId = StrCast(main.googleDocId))) { - GoogleApiClientUtils.Docs.Read(googleDocId, true).then(text => { + let main = this.mainContainer, documentId; + if (main && (documentId = StrCast(main.googleDocId))) { + GoogleApiClientUtils.Docs.Read({ documentId }).then(text => { text && Utils.CopyText(text); console.log(text); }); -- cgit v1.2.3-70-g09d2 From 2b829d1028a61869858ecd48e2f1801819e17488 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 13 Aug 2019 22:15:47 -0400 Subject: robust google doc export api and cleanup --- .../apis/google_docs/GoogleApiClientUtils.ts | 185 ++++++++++++--------- src/client/views/MainView.tsx | 11 +- src/client/views/nodes/FormattedTextBox.tsx | 24 ++- src/new_fields/RichTextField.ts | 13 ++ src/server/index.ts | 25 ++- 5 files changed, 162 insertions(+), 96 deletions(-) (limited to 'src') diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts index 5e974b2e7..dda36f05a 100644 --- a/src/client/apis/google_docs/GoogleApiClientUtils.ts +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -1,7 +1,8 @@ import { docs_v1 } from "googleapis"; import { PostToServer } from "../../../Utils"; import { RouteStore } from "../../../server/RouteStore"; -import { Opt } from "../../../new_fields/Doc"; +import { Opt, Doc } from "../../../new_fields/Doc"; +import { isArray } from "util"; export namespace GoogleApiClientUtils { @@ -9,15 +10,12 @@ export namespace GoogleApiClientUtils { export enum Actions { Create = "create", - Retrieve = "retrieve" + Retrieve = "retrieve", + Update = "update" } export namespace Utils { - export const fromRgb = (red: number, green: number, blue: number) => { - return { color: { rgbColor: { red, green, blue } } }; - }; - export const extractText = (document: docs_v1.Schema$Document, removeNewlines = false) => { let fragments: string[] = []; if (document.body && document.body.content) { @@ -36,55 +34,36 @@ export namespace GoogleApiClientUtils { return removeNewlines ? text.ReplaceAll("\n", "") : text; }; - } - - export const ExampleDocumentSchema = { - title: "This is a Google Doc Created From Dash Web", - body: { - content: [ - { - endIndex: 1, - sectionBreak: { - sectionStyle: { - columnSeparatorStyle: "NONE", - contentDirection: "LEFT_TO_RIGHT" + export const EndOf = (schema: docs_v1.Schema$Document): Opt => { + if (schema.body && schema.body.content) { + let paragraphs = schema.body.content.filter(el => el.paragraph); + if (paragraphs.length) { + let target = paragraphs[paragraphs.length - 1]; + if (target.paragraph && target.paragraph.elements) { + length = target.paragraph.elements.length; + if (length) { + let final = target.paragraph.elements[length - 1]; + return final.endIndex ? final.endIndex - 1 : undefined; } } - }, - { - paragraph: { - elements: [ - { - textRun: { - content: "And this is its bold, blue text!!!\n", - textStyle: { - bold: true, - backgroundColor: Utils.fromRgb(0, 0, 1) - } - } - } - ] - } - }, - { - paragraph: { - elements: [ - { - textRun: { - content: "And this is its bold, blue text!!!\n", - textStyle: { - bold: true, - backgroundColor: Utils.fromRgb(0, 0, 1) - } - } - } - ] - } - }, + } + } + }; - ] as docs_v1.Schema$StructuralElement[] - } - } as docs_v1.Schema$Document; + } + + export interface ReadOptions { + documentId: string; + removeNewlines?: boolean; + } + + export interface WriteOptions { + documentId?: string; + title?: string; + content: string | string[]; + index?: number; + store?: { receiver: Doc, key: string }; + } /** * After following the authentication routine, which connects this API call to the current signed in account @@ -96,45 +75,95 @@ export namespace GoogleApiClientUtils { * actual document body and its styling! * @returns the documentId of the newly generated document, or undefined if the creation process fails. */ - export const Create = async (schema?: docs_v1.Schema$Document): Promise => { + const Create = async (title?: string): Promise => { let path = RouteStore.googleDocs + Actions.Create; - let parameters = { requestBody: schema || ExampleDocumentSchema }; - let generatedId: string | undefined; + let parameters = { + requestBody: { + title: title || `Dash Export (${new Date().toDateString()})` + } + }; try { - generatedId = await PostToServer(path, parameters); - } catch (e) { - console.error(e); - generatedId = undefined; - } finally { - return generatedId; + let schema: docs_v1.Schema$Document = await PostToServer(path, parameters); + return schema.documentId; + } catch { + return undefined; } }; - export interface ReadOptions { - documentId: string; - removeNewlines?: boolean; - } + const Retrieve = async (documentId: string): Promise => { + let path = RouteStore.googleDocs + Actions.Retrieve; + let parameters = { + documentId + }; + try { + let schema: docs_v1.Schema$Document = await PostToServer(path, parameters); + return schema; + } catch { + return undefined; + } + }; + + const Update = async (documentId: string, requests: docs_v1.Schema$Request[]): Promise => { + let path = RouteStore.googleDocs + Actions.Update; + let parameters = { + documentId, + requestBody: { + requests + } + }; + try { + let replies: docs_v1.Schema$BatchUpdateDocumentResponse = await PostToServer(path, parameters); + console.log(replies); + return replies; + } catch { + return undefined; + } + }; - export const Read = async (options: ReadOptions): Promise> => { + export const Read = async (options: ReadOptions): Promise => { return Retrieve(options.documentId).then(schema => { return schema ? Utils.extractText(schema, options.removeNewlines) : undefined; }); }; - export const Retrieve = async (documentId: string): Promise> => { - let path = RouteStore.googleDocs + Actions.Retrieve; - let parameters = { documentId }; - let schema: Opt; - try { - schema = await PostToServer(path, parameters); - } catch (e) { - console.error(e); - schema = undefined; - } finally { - return schema; - } + export const ReadLines = async (options: ReadOptions) => { + return Retrieve(options.documentId).then(schema => { + if (!schema) { + return undefined; + } + let lines = Utils.extractText(schema).split("\n"); + return options.removeNewlines ? lines.filter(line => line.length) : lines; + }); }; + export const Write = async (options: WriteOptions): Promise => { + let target = options.documentId; + if (!target) { + if (!(target = await Create(options.title))) { + return undefined; + } + } + let index = options.index; + if (!index) { + let schema = await Retrieve(target); + if (!schema || !(index = Utils.EndOf(schema))) { + return undefined; + } + } + let text = options.content; + let request = { + insertText: { + text: isArray(text) ? text.join("\n") : text, + location: { index } + } + }; + return Update(target, [request]).then(res => { + if (res && options.store) { + options.store.receiver[options.store.key] = res.documentId; + } + return res; + }); + }; } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 705eacc0c..7b15e9624 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -87,11 +87,6 @@ export class MainView extends React.Component { if (!("presentationView" in doc)) { doc.presentationView = new List([Docs.Create.TreeDocument([], { title: "Presentation" })]); } - if (!("googleDocId" in doc)) { - GoogleApiClientUtils.Docs.Create().then(id => { - id && (doc.googleDocId = id); - }); - } CurrentUserUtils.UserDocument.activeWorkspace = doc; } } @@ -158,9 +153,9 @@ export class MainView extends React.Component { reaction(() => this.mainContainer, () => { let main = this.mainContainer, documentId; if (main && (documentId = StrCast(main.googleDocId))) { - GoogleApiClientUtils.Docs.Read({ documentId }).then(text => { - text && Utils.CopyText(text); - console.log(text); + let options = { documentId, removeNewlines: true }; + GoogleApiClientUtils.Docs.ReadLines(options).then(lines => { + console.log(lines); }); } }); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 44b5d2c21..8c2af7c9e 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -1,5 +1,5 @@ import { library } from '@fortawesome/fontawesome-svg-core'; -import { faEdit, faSmile, faTextHeight } from '@fortawesome/free-solid-svg-icons'; +import { faEdit, faSmile, faTextHeight, faUpload } from '@fortawesome/free-solid-svg-icons'; import { action, IReactionDisposer, observable, reaction, runInAction, computed, Lambda, trace } from "mobx"; import { observer } from "mobx-react"; import { baseKeymap } from "prosemirror-commands"; @@ -38,9 +38,10 @@ import { For } from 'babel-types'; import { DateField } from '../../../new_fields/DateField'; import { Utils } from '../../../Utils'; import { MainOverlayTextBox } from '../MainOverlayTextBox'; +import { GoogleApiClientUtils } from '../../apis/google_docs/GoogleApiClientUtils'; library.add(faEdit); -library.add(faSmile, faTextHeight); +library.add(faSmile, faTextHeight, faUpload); // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document // @@ -58,6 +59,8 @@ const richTextSchema = createSchema({ documentText: "string" }); +const googleDocKey = "googleDocId"; + type RichTextDocument = makeInterface<[typeof richTextSchema]>; const RichTextDocument = makeInterface(richTextSchema); @@ -661,7 +664,24 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe event: action(() => Doc.GetProto(this.props.Document).autoHeight = !BoolCast(this.props.Document.autoHeight)), icon: "expand-arrows-alt" }); ContextMenu.Instance.addItem({ description: "Text Funcs...", subitems: subitems, icon: "text-height" }); + if (!(googleDocKey in Doc.GetProto(this.props.Document))) { + ContextMenu.Instance.addItem({ description: "Export to Google Doc...", event: this.exportToGoogleDoc, icon: "upload" }); + } } + + exportToGoogleDoc = () => { + let dataDoc = Doc.GetProto(this.props.Document); + let data = Cast(dataDoc.data, RichTextField); + let content: string | undefined; + if (data && (content = data.plainText())) { + GoogleApiClientUtils.Docs.Write({ + title: StrCast(dataDoc.title), + store: { receiver: dataDoc, key: googleDocKey }, + content + }); + } + } + render() { let self = this; let style = this.props.isOverlay ? "scroll" : "hidden"; diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts index 89799b2af..dc66813e0 100644 --- a/src/new_fields/RichTextField.ts +++ b/src/new_fields/RichTextField.ts @@ -9,6 +9,7 @@ import { scriptingGlobal } from "../client/util/Scripting"; export class RichTextField extends ObjectField { @serializable(true) readonly Data: string; + private Extractor = /,\"text\":\"([^\"\}]*)\"\}/g; constructor(data: string) { super(); @@ -22,4 +23,16 @@ export class RichTextField extends ObjectField { [ToScriptString]() { return `new RichTextField("${this.Data}")`; } + + plainText = () => { + let contents = ""; + let matches: RegExpExecArray | null; + let considering = this.Data; + while ((matches = this.Extractor.exec(considering)) !== null) { + contents += matches[1]; + considering = considering.substring(matches.index + matches[0].length); + this.Extractor.lastIndex = 0; + } + return contents.length ? contents : undefined; + } } \ No newline at end of file diff --git a/src/server/index.ts b/src/server/index.ts index 4ccb61681..abaa29658 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -42,6 +42,7 @@ import AdmZip from 'adm-zip'; import * as YoutubeApi from "./apis/youtube/youtubeApiSample"; import { Response } from 'express-serve-static-core'; import { GoogleApiServerUtils } from "./apis/google/GoogleApiServerUtils"; +import { GaxiosResponse } from 'gaxios'; const MongoStore = require('connect-mongo')(session); const mongoose = require('mongoose'); const probe = require("probe-image-size"); @@ -170,6 +171,13 @@ const read_text_file = (relativePath: string) => { }); }; +const write_text_file = (relativePath: string, contents: any) => { + let target = path.join(__dirname, relativePath); + return new Promise((resolve, reject) => { + fs.writeFile(target, contents, (err) => err ? reject(err) : resolve()); + }); +}; + app.get("/version", (req, res) => { exec('"C:\\Program Files\\Git\\bin\\git.exe" rev-parse HEAD', (err, stdout, stderr) => { if (err) { @@ -790,21 +798,22 @@ const credentials = path.join(__dirname, "./credentials/google_docs_credentials. const token = path.join(__dirname, "./credentials/google_docs_token.json"); app.post(RouteStore.googleDocs + ":action", (req, res) => { - let parameters = req.body; - GoogleApiServerUtils.Docs.GetEndpoint({ credentials, token }).then(endpoint => { - let results: Promise | undefined; + let results: Promise | undefined; + let documents = endpoint.documents; + let parameters = req.body; switch (req.params.action) { case "create": - results = endpoint.documents.create(parameters).then(generated => generated.data.documentId); + results = documents.create(parameters); break; case "retrieve": - results = endpoint.documents.get(parameters).then(response => response.data); + results = documents.get(parameters); + break; + case "update": + results = documents.batchUpdate(parameters); break; - default: - results = undefined; } - results && results.then(final => res.send(final)); + !results ? res.send(undefined) : results.then(response => res.send(response.data)); }); }); -- cgit v1.2.3-70-g09d2 From dc766185075b5861686c68a704a8e49213eacbc6 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 14 Aug 2019 01:00:29 -0400 Subject: cleanup and streamlined / robust type requirements --- .../apis/google_docs/GoogleApiClientUtils.ts | 88 +++++++++++----------- src/client/views/MainView.tsx | 12 --- src/client/views/nodes/FormattedTextBox.tsx | 20 ++--- src/new_fields/RichTextField.ts | 2 +- 4 files changed, 58 insertions(+), 64 deletions(-) (limited to 'src') diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts index dda36f05a..f4fb87e0b 100644 --- a/src/client/apis/google_docs/GoogleApiClientUtils.ts +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -17,32 +17,32 @@ export namespace GoogleApiClientUtils { export namespace Utils { export const extractText = (document: docs_v1.Schema$Document, removeNewlines = false) => { - let fragments: string[] = []; + const fragments: string[] = []; if (document.body && document.body.content) { - for (let element of document.body.content) { + for (const element of document.body.content) { if (element.paragraph && element.paragraph.elements) { - for (let inner of element.paragraph.elements) { + for (const inner of element.paragraph.elements) { if (inner && inner.textRun) { - let fragment = inner.textRun.content; + const fragment = inner.textRun.content; fragment && fragments.push(fragment); } } } } } - let text = fragments.join(""); + const text = fragments.join(""); return removeNewlines ? text.ReplaceAll("\n", "") : text; }; export const EndOf = (schema: docs_v1.Schema$Document): Opt => { if (schema.body && schema.body.content) { - let paragraphs = schema.body.content.filter(el => el.paragraph); + const paragraphs = schema.body.content.filter(el => el.paragraph); if (paragraphs.length) { - let target = paragraphs[paragraphs.length - 1]; + const target = paragraphs[paragraphs.length - 1]; if (target.paragraph && target.paragraph.elements) { length = target.paragraph.elements.length; if (length) { - let final = target.paragraph.elements[length - 1]; + const final = target.paragraph.elements[length - 1]; return final.endIndex ? final.endIndex - 1 : undefined; } } @@ -52,17 +52,25 @@ export namespace GoogleApiClientUtils { } + export type IdHandler = (id: DocumentId) => any; + export interface CreateOptions { + handler: IdHandler; + // if excluded, will use a default title annotated with the current date + title?: string; + } + export interface ReadOptions { documentId: string; + // if exluded, will preserve newlines removeNewlines?: boolean; } + export type DocumentId = string; export interface WriteOptions { - documentId?: string; - title?: string; content: string | string[]; + reference: DocumentId | CreateOptions; + // if excluded, will compute the last index of the document and append the content there index?: number; - store?: { receiver: Doc, key: string }; } /** @@ -70,33 +78,36 @@ export namespace GoogleApiClientUtils { * and grants the appropriate permissions, this function programmatically creates an arbitrary Google Doc which * should appear in the user's Google Doc library instantaneously. * - * @param schema whatever subset of a docs_v1.Schema$Document is required to properly initialize your - * Google Doc. This schema defines all aspects of a Google Doc, from the title to headers / footers to the - * actual document body and its styling! + * @param options the title to assign to the new document, and the information necessary + * to store the new documentId returned from the creation process * @returns the documentId of the newly generated document, or undefined if the creation process fails. */ - const Create = async (title?: string): Promise => { - let path = RouteStore.googleDocs + Actions.Create; - let parameters = { + const Create = async (options: CreateOptions): Promise => { + const path = RouteStore.googleDocs + Actions.Create; + const parameters = { requestBody: { - title: title || `Dash Export (${new Date().toDateString()})` + title: options.title || `Dash Export (${new Date().toDateString()})` } }; try { - let schema: docs_v1.Schema$Document = await PostToServer(path, parameters); - return schema.documentId; + const schema: docs_v1.Schema$Document = await PostToServer(path, parameters); + const generatedId = schema.documentId; + if (generatedId) { + options.handler(generatedId); + return generatedId; + } } catch { return undefined; } }; const Retrieve = async (documentId: string): Promise => { - let path = RouteStore.googleDocs + Actions.Retrieve; - let parameters = { + const path = RouteStore.googleDocs + Actions.Retrieve; + const parameters = { documentId }; try { - let schema: docs_v1.Schema$Document = await PostToServer(path, parameters); + const schema: docs_v1.Schema$Document = await PostToServer(path, parameters); return schema; } catch { return undefined; @@ -104,16 +115,15 @@ export namespace GoogleApiClientUtils { }; const Update = async (documentId: string, requests: docs_v1.Schema$Request[]): Promise => { - let path = RouteStore.googleDocs + Actions.Update; - let parameters = { + const path = RouteStore.googleDocs + Actions.Update; + const parameters = { documentId, requestBody: { requests } }; try { - let replies: docs_v1.Schema$BatchUpdateDocumentResponse = await PostToServer(path, parameters); - console.log(replies); + const replies: docs_v1.Schema$BatchUpdateDocumentResponse = await PostToServer(path, parameters); return replies; } catch { return undefined; @@ -131,38 +141,32 @@ export namespace GoogleApiClientUtils { if (!schema) { return undefined; } - let lines = Utils.extractText(schema).split("\n"); + const lines = Utils.extractText(schema).split("\n"); return options.removeNewlines ? lines.filter(line => line.length) : lines; }); }; export const Write = async (options: WriteOptions): Promise => { - let target = options.documentId; - if (!target) { - if (!(target = await Create(options.title))) { - return undefined; - } + let documentId: string | undefined; + const ref = options.reference; + if (!(documentId = typeof ref === "string" ? ref : await Create(ref))) { + return undefined; } let index = options.index; if (!index) { - let schema = await Retrieve(target); + let schema = await Retrieve(documentId); if (!schema || !(index = Utils.EndOf(schema))) { return undefined; } } - let text = options.content; - let request = { + const text = options.content; + const request = { insertText: { text: isArray(text) ? text.join("\n") : text, location: { index } } }; - return Update(target, [request]).then(res => { - if (res && options.store) { - options.store.receiver[options.store.key] = res.documentId; - } - return res; - }); + return Update(documentId, [request]); }; } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 7b15e9624..77f0e3d60 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -149,18 +149,6 @@ export class MainView extends React.Component { }, { fireImmediately: true }); } - componentDidMount() { - reaction(() => this.mainContainer, () => { - let main = this.mainContainer, documentId; - if (main && (documentId = StrCast(main.googleDocId))) { - let options = { documentId, removeNewlines: true }; - GoogleApiClientUtils.Docs.ReadLines(options).then(lines => { - console.log(lines); - }); - } - }); - } - componentWillUnMount() { window.removeEventListener("keydown", KeyManager.Instance.handle); window.removeEventListener("pointerdown", this.globalPointerDown); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 8c2af7c9e..50ec27259 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -670,16 +670,18 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } exportToGoogleDoc = () => { - let dataDoc = Doc.GetProto(this.props.Document); - let data = Cast(dataDoc.data, RichTextField); - let content: string | undefined; - if (data && (content = data.plainText())) { - GoogleApiClientUtils.Docs.Write({ - title: StrCast(dataDoc.title), - store: { receiver: dataDoc, key: googleDocKey }, - content - }); + const dataDoc = Doc.GetProto(this.props.Document); + const data = Cast(dataDoc.data, RichTextField); + if (!data) { + return; } + GoogleApiClientUtils.Docs.Write({ + reference: { + title: StrCast(dataDoc.title), + handler: id => dataDoc[googleDocKey] = id + }, + content: data.plainText() + }); } render() { diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts index dc66813e0..3e8803a34 100644 --- a/src/new_fields/RichTextField.ts +++ b/src/new_fields/RichTextField.ts @@ -33,6 +33,6 @@ export class RichTextField extends ObjectField { considering = considering.substring(matches.index + matches[0].length); this.Extractor.lastIndex = 0; } - return contents.length ? contents : undefined; + return contents; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 48fcec82fa384ec260a02965f9f78c2e41256dd9 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 14 Aug 2019 03:41:11 -0400 Subject: clean up and regex improvement --- .../apis/google_docs/GoogleApiClientUtils.ts | 111 ++++++++++++--------- src/client/views/nodes/FormattedTextBox.tsx | 15 ++- src/new_fields/RichTextField.ts | 4 +- src/server/index.ts | 35 ++++--- 4 files changed, 99 insertions(+), 66 deletions(-) (limited to 'src') diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts index f4fb87e0b..c6c7d7bd4 100644 --- a/src/client/apis/google_docs/GoogleApiClientUtils.ts +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -1,7 +1,7 @@ import { docs_v1 } from "googleapis"; import { PostToServer } from "../../../Utils"; import { RouteStore } from "../../../server/RouteStore"; -import { Opt, Doc } from "../../../new_fields/Doc"; +import { Opt } from "../../../new_fields/Doc"; import { isArray } from "util"; export namespace GoogleApiClientUtils { @@ -14,9 +14,42 @@ export namespace GoogleApiClientUtils { Update = "update" } + export type DocumentId = string; + export type Reference = DocumentId | CreateOptions; + export type TextContent = string | string[]; + export type IdHandler = (id: DocumentId) => any; + + export type CreationResult = Opt; + export type RetrievalResult = Opt; + export type UpdateResult = Opt; + export type ReadLinesResult = Opt; + export type ReadResult = Opt; + + export interface CreateOptions { + handler: IdHandler; // callback to process the documentId of the newly created Google Doc + title?: string; // if excluded, will use a default title annotated with the current date + } + + export interface RetrieveOptions { + documentId: DocumentId; + } + + export type ReadOptions = RetrieveOptions & { removeNewlines?: boolean }; + + export interface WriteOptions { + content: TextContent; + reference: Reference; + index?: number; // if excluded, will compute the last index of the document and append the content there + } + + export interface UpdateOptions { + documentId: DocumentId; + requests: docs_v1.Schema$Request[]; + } + export namespace Utils { - export const extractText = (document: docs_v1.Schema$Document, removeNewlines = false) => { + export const extractText = (document: docs_v1.Schema$Document, removeNewlines = false): string => { const fragments: string[] = []; if (document.body && document.body.content) { for (const element of document.body.content) { @@ -34,7 +67,7 @@ export namespace GoogleApiClientUtils { return removeNewlines ? text.ReplaceAll("\n", "") : text; }; - export const EndOf = (schema: docs_v1.Schema$Document): Opt => { + export const endOf = (schema: docs_v1.Schema$Document): number | undefined => { if (schema.body && schema.body.content) { const paragraphs = schema.body.content.filter(el => el.paragraph); if (paragraphs.length) { @@ -50,27 +83,8 @@ export namespace GoogleApiClientUtils { } }; - } + export const initialize = async (reference: Reference) => typeof reference === "string" ? reference : create(reference); - export type IdHandler = (id: DocumentId) => any; - export interface CreateOptions { - handler: IdHandler; - // if excluded, will use a default title annotated with the current date - title?: string; - } - - export interface ReadOptions { - documentId: string; - // if exluded, will preserve newlines - removeNewlines?: boolean; - } - - export type DocumentId = string; - export interface WriteOptions { - content: string | string[]; - reference: DocumentId | CreateOptions; - // if excluded, will compute the last index of the document and append the content there - index?: number; } /** @@ -82,7 +96,7 @@ export namespace GoogleApiClientUtils { * to store the new documentId returned from the creation process * @returns the documentId of the newly generated document, or undefined if the creation process fails. */ - const Create = async (options: CreateOptions): Promise => { + export const create = async (options: CreateOptions): Promise => { const path = RouteStore.googleDocs + Actions.Create; const parameters = { requestBody: { @@ -101,43 +115,40 @@ export namespace GoogleApiClientUtils { } }; - const Retrieve = async (documentId: string): Promise => { + export const retrieve = async (options: RetrieveOptions): Promise => { const path = RouteStore.googleDocs + Actions.Retrieve; - const parameters = { - documentId - }; try { - const schema: docs_v1.Schema$Document = await PostToServer(path, parameters); + const schema: RetrievalResult = await PostToServer(path, options); return schema; } catch { return undefined; } }; - const Update = async (documentId: string, requests: docs_v1.Schema$Request[]): Promise => { + export const update = async (options: UpdateOptions): Promise => { const path = RouteStore.googleDocs + Actions.Update; const parameters = { - documentId, + documentId: options.documentId, requestBody: { - requests + requests: options.requests } }; try { - const replies: docs_v1.Schema$BatchUpdateDocumentResponse = await PostToServer(path, parameters); + const replies: UpdateResult = await PostToServer(path, parameters); return replies; } catch { return undefined; } }; - export const Read = async (options: ReadOptions): Promise => { - return Retrieve(options.documentId).then(schema => { + export const read = async (options: ReadOptions): Promise => { + return retrieve(options).then(schema => { return schema ? Utils.extractText(schema, options.removeNewlines) : undefined; }); }; - export const ReadLines = async (options: ReadOptions) => { - return Retrieve(options.documentId).then(schema => { + export const readLines = async (options: ReadOptions): Promise => { + return retrieve(options).then(schema => { if (!schema) { return undefined; } @@ -146,27 +157,29 @@ export namespace GoogleApiClientUtils { }); }; - export const Write = async (options: WriteOptions): Promise => { - let documentId: string | undefined; - const ref = options.reference; - if (!(documentId = typeof ref === "string" ? ref : await Create(ref))) { + export const write = async (options: WriteOptions): Promise => { + const documentId = await Utils.initialize(options.reference); + if (!documentId) { return undefined; } let index = options.index; if (!index) { - let schema = await Retrieve(documentId); - if (!schema || !(index = Utils.EndOf(schema))) { + let schema = await retrieve({ documentId }); + if (!schema || !(index = Utils.endOf(schema))) { return undefined; } } const text = options.content; - const request = { - insertText: { - text: isArray(text) ? text.join("\n") : text, - location: { index } - } + const updateOptions = { + documentId, + requests: [{ + insertText: { + text: isArray(text) ? text.join("\n") : text, + location: { index } + } + }] }; - return Update(documentId, [request]); + return update(updateOptions); }; } diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 50ec27259..46aed9b2d 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -288,6 +288,19 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } } + componentWillMount() { + this.pollExportedCounterpart(); + } + + pollExportedCounterpart = async () => { + let dataDoc = Doc.GetProto(this.props.Document); + let documentId = StrCast(dataDoc[googleDocKey]); + if (documentId) { + let contents = await GoogleApiClientUtils.Docs.read({ documentId }); + contents ? console.log(contents) : delete dataDoc[googleDocKey]; + } + } + componentDidMount() { const config = { schema, @@ -675,7 +688,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe if (!data) { return; } - GoogleApiClientUtils.Docs.Write({ + GoogleApiClientUtils.Docs.write({ reference: { title: StrCast(dataDoc.title), handler: id => dataDoc[googleDocKey] = id diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts index 3e8803a34..4f782816c 100644 --- a/src/new_fields/RichTextField.ts +++ b/src/new_fields/RichTextField.ts @@ -9,7 +9,7 @@ import { scriptingGlobal } from "../client/util/Scripting"; export class RichTextField extends ObjectField { @serializable(true) readonly Data: string; - private Extractor = /,\"text\":\"([^\"\}]*)\"\}/g; + private Extractor = /,\"text\":\"([^\}]*)\"\}/g; constructor(data: string) { super(); @@ -33,6 +33,6 @@ export class RichTextField extends ObjectField { considering = considering.substring(matches.index + matches[0].length); this.Extractor.lastIndex = 0; } - return contents; + return contents.ReplaceAll("\\", ""); } } \ No newline at end of file diff --git a/src/server/index.ts b/src/server/index.ts index abaa29658..ef1829f30 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -43,6 +43,8 @@ import * as YoutubeApi from "./apis/youtube/youtubeApiSample"; import { Response } from 'express-serve-static-core'; import { GoogleApiServerUtils } from "./apis/google/GoogleApiServerUtils"; import { GaxiosResponse } from 'gaxios'; +import { Opt } from '../new_fields/Doc'; +import { docs_v1 } from 'googleapis'; const MongoStore = require('connect-mongo')(session); const mongoose = require('mongoose'); const probe = require("probe-image-size"); @@ -797,23 +799,28 @@ function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: any const credentials = path.join(__dirname, "./credentials/google_docs_credentials.json"); const token = path.join(__dirname, "./credentials/google_docs_token.json"); +type ApiResponse = Promise; +type ApiHandler = (endpoint: docs_v1.Resource$Documents, parameters: any) => ApiResponse; +type Action = "create" | "retrieve" | "update"; + +const EndpointHandlerMap = new Map([ + ["create", (api, params) => api.create(params)], + ["retrieve", (api, params) => api.get(params)], + ["update", (api, params) => api.batchUpdate(params)], +]); + app.post(RouteStore.googleDocs + ":action", (req, res) => { GoogleApiServerUtils.Docs.GetEndpoint({ credentials, token }).then(endpoint => { - let results: Promise | undefined; - let documents = endpoint.documents; - let parameters = req.body; - switch (req.params.action) { - case "create": - results = documents.create(parameters); - break; - case "retrieve": - results = documents.get(parameters); - break; - case "update": - results = documents.batchUpdate(parameters); - break; + let handler = EndpointHandlerMap.get(req.params.action); + if (handler) { + let execute = handler(endpoint.documents, req.body).then( + response => res.send(response.data), + rejection => res.send(rejection) + ); + execute.catch(exception => res.send(exception)); + return; } - !results ? res.send(undefined) : results.then(response => res.send(response.data)); + res.send(undefined); }); }); -- cgit v1.2.3-70-g09d2 From 9ea032b9ab14ba17511b1014044dba0236e93837 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 14 Aug 2019 10:48:23 -0400 Subject: refactored plain text parsing and setting --- src/client/views/nodes/FormattedTextBox.tsx | 13 +++++--- src/new_fields/RichTextField.ts | 50 ++++++++++++++++++++++------- 2 files changed, 48 insertions(+), 15 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 46aed9b2d..5ba2aa0cf 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -12,7 +12,7 @@ import { EditorView } from "prosemirror-view"; import { Doc, Opt, DocListCast } from "../../../new_fields/Doc"; import { Id, Copy } from '../../../new_fields/FieldSymbols'; import { List } from '../../../new_fields/List'; -import { RichTextField } from "../../../new_fields/RichTextField"; +import { RichTextField, ToPlainText, FromPlainText } from "../../../new_fields/RichTextField"; import { createSchema, listSpec, makeInterface } from "../../../new_fields/Schema"; import { BoolCast, Cast, NumCast, StrCast, DateCast } from "../../../new_fields/Types"; import { DocServer } from "../../DocServer"; @@ -296,8 +296,13 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe let dataDoc = Doc.GetProto(this.props.Document); let documentId = StrCast(dataDoc[googleDocKey]); if (documentId) { - let contents = await GoogleApiClientUtils.Docs.read({ documentId }); - contents ? console.log(contents) : delete dataDoc[googleDocKey]; + let exportState = await GoogleApiClientUtils.Docs.read({ documentId }); + if (exportState) { + let data = Cast(dataDoc.data, RichTextField); + data && data[FromPlainText](exportState); + } else { + delete dataDoc[googleDocKey]; + } } } @@ -693,7 +698,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe title: StrCast(dataDoc.title), handler: id => dataDoc[googleDocKey] = id }, - content: data.plainText() + content: data[ToPlainText]() }); } diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts index 4f782816c..9d8a1cecb 100644 --- a/src/new_fields/RichTextField.ts +++ b/src/new_fields/RichTextField.ts @@ -4,12 +4,14 @@ import { Deserializable } from "../client/util/SerializationHelper"; import { Copy, ToScriptString } from "./FieldSymbols"; import { scriptingGlobal } from "../client/util/Scripting"; +export const ToPlainText = Symbol("PlainText"); +export const FromPlainText = Symbol("PlainText"); + @scriptingGlobal @Deserializable("RichTextField") export class RichTextField extends ObjectField { @serializable(true) - readonly Data: string; - private Extractor = /,\"text\":\"([^\}]*)\"\}/g; + Data: string; constructor(data: string) { super(); @@ -24,15 +26,41 @@ export class RichTextField extends ObjectField { return `new RichTextField("${this.Data}")`; } - plainText = () => { - let contents = ""; - let matches: RegExpExecArray | null; - let considering = this.Data; - while ((matches = this.Extractor.exec(considering)) !== null) { - contents += matches[1]; - considering = considering.substring(matches.index + matches[0].length); - this.Extractor.lastIndex = 0; + [ToPlainText]() { + let content = JSON.parse(this.Data).doc.content; + let paragraphs = content.filter((item: any) => item.type === "paragraph"); + let output = ""; + for (let i = 0; i < paragraphs.length; i++) { + let paragraph = paragraphs[i]; + if (paragraph.content) { + output += paragraph.content.map((block: any) => block.text).join(""); + } else { + output += i > 0 && paragraphs[i - 1].content ? "\n\n" : "\n"; + } } - return contents.ReplaceAll("\\", ""); + return output; + } + + [FromPlainText](plainText: string) { + let elements = plainText.split("\n"); + let parsed = JSON.parse(this.Data); + parsed.doc.content = elements.map(text => { + let paragraph: any = { type: "paragraph" }; + if (text.length) { + paragraph.content = [{ + type: "text", + marks: [], + text + }]; + } + return paragraph; + }); + parsed.selection = { + type: "text", + anchor: 0, + head: 0 + }; + this.Data = JSON.stringify(parsed); } + } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 1b9ee607e0c34f82ef39da494329d24623debd18 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 14 Aug 2019 10:58:26 -0400 Subject: changed selection --- src/new_fields/RichTextField.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts index 9d8a1cecb..f0284b1b8 100644 --- a/src/new_fields/RichTextField.ts +++ b/src/new_fields/RichTextField.ts @@ -57,8 +57,8 @@ export class RichTextField extends ObjectField { }); parsed.selection = { type: "text", - anchor: 0, - head: 0 + anchor: plainText.length, + head: plainText.length }; this.Data = JSON.stringify(parsed); } -- cgit v1.2.3-70-g09d2 From 13d2be7f66c01ee9f09cb65f567eb3da760df670 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 14 Aug 2019 15:18:13 -0400 Subject: semi-synchronous editing between dash notes and google docs --- package.json | 2 + .../apis/google_docs/GoogleApiClientUtils.ts | 40 ++++++++++++++------ src/client/views/nodes/FormattedTextBox.tsx | 44 ++++++++++++++-------- src/new_fields/RichTextField.ts | 25 +++++++----- 4 files changed, 76 insertions(+), 35 deletions(-) (limited to 'src') diff --git a/package.json b/package.json index 326468ab9..7a629d813 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "@types/cookie-parser": "^1.4.1", "@types/cookie-session": "^2.0.36", "@types/d3-format": "^1.3.1", + "@types/diff": "^4.0.2", "@types/dotenv": "^6.1.1", "@types/express": "^4.16.1", "@types/express-flash": "0.0.0", @@ -127,6 +128,7 @@ "cookie-session": "^2.0.0-beta.3", "crypto-browserify": "^3.11.0", "d3-format": "^1.3.2", + "diff": "^4.0.1", "dotenv": "^8.0.0", "express": "^4.16.4", "express-flash": "0.0.2", diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts index c6c7d7bd4..c1cbba31f 100644 --- a/src/client/apis/google_docs/GoogleApiClientUtils.ts +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -14,6 +14,11 @@ export namespace GoogleApiClientUtils { Update = "update" } + export enum WriteMode { + Insert, + Replace + } + export type DocumentId = string; export type Reference = DocumentId | CreateOptions; export type TextContent = string | string[]; @@ -37,6 +42,7 @@ export namespace GoogleApiClientUtils { export type ReadOptions = RetrieveOptions & { removeNewlines?: boolean }; export interface WriteOptions { + mode: WriteMode; content: TextContent; reference: Reference; index?: number; // if excluded, will compute the last index of the document and append the content there @@ -158,28 +164,40 @@ export namespace GoogleApiClientUtils { }; export const write = async (options: WriteOptions): Promise => { + const requests: docs_v1.Schema$Request[] = []; const documentId = await Utils.initialize(options.reference); if (!documentId) { return undefined; } let index = options.index; - if (!index) { + const mode = options.mode; + if (!(index && mode === WriteMode.Insert)) { let schema = await retrieve({ documentId }); if (!schema || !(index = Utils.endOf(schema))) { return undefined; } } - const text = options.content; - const updateOptions = { - documentId, - requests: [{ - insertText: { - text: isArray(text) ? text.join("\n") : text, - location: { index } + if (mode === WriteMode.Replace) { + requests.push({ + deleteContentRange: { + range: { + startIndex: 1, + endIndex: index + } } - }] - }; - return update(updateOptions); + }); + index = 1; + } + const text = options.content; + requests.push({ + insertText: { + text: isArray(text) ? text.join("\n") : text, + location: { index } + } + }); + let replies = await update({ documentId, requests }); + console.log(replies); + return replies; }; } diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 5ba2aa0cf..ad29ce775 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -12,7 +12,7 @@ import { EditorView } from "prosemirror-view"; import { Doc, Opt, DocListCast } from "../../../new_fields/Doc"; import { Id, Copy } from '../../../new_fields/FieldSymbols'; import { List } from '../../../new_fields/List'; -import { RichTextField, ToPlainText, FromPlainText } from "../../../new_fields/RichTextField"; +import { RichTextField, ToGoogleDocText, FromGoogleDocText } from "../../../new_fields/RichTextField"; import { createSchema, listSpec, makeInterface } from "../../../new_fields/Schema"; import { BoolCast, Cast, NumCast, StrCast, DateCast } from "../../../new_fields/Types"; import { DocServer } from "../../DocServer"; @@ -39,6 +39,7 @@ import { DateField } from '../../../new_fields/DateField'; import { Utils } from '../../../Utils'; import { MainOverlayTextBox } from '../MainOverlayTextBox'; import { GoogleApiClientUtils } from '../../apis/google_docs/GoogleApiClientUtils'; +import * as diff from "diff"; library.add(faEdit); library.add(faSmile, faTextHeight, faUpload); @@ -299,7 +300,9 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe let exportState = await GoogleApiClientUtils.Docs.read({ documentId }); if (exportState) { let data = Cast(dataDoc.data, RichTextField); - data && data[FromPlainText](exportState); + if (data) { + dataDoc.data = new RichTextField(data[FromGoogleDocText](exportState)); + } } else { delete dataDoc[googleDocKey]; } @@ -629,6 +632,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe this._undoTyping.end(); this._undoTyping = undefined; } + this.updateGoogleDoc(); } public _undoTyping?: UndoManager.Batch; onKeyPress = (e: React.KeyboardEvent) => { @@ -683,23 +687,33 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe }); ContextMenu.Instance.addItem({ description: "Text Funcs...", subitems: subitems, icon: "text-height" }); if (!(googleDocKey in Doc.GetProto(this.props.Document))) { - ContextMenu.Instance.addItem({ description: "Export to Google Doc...", event: this.exportToGoogleDoc, icon: "upload" }); + ContextMenu.Instance.addItem({ + description: "Export to Google Doc...", + event: this.updateGoogleDoc, + icon: "upload" + }); } } - exportToGoogleDoc = () => { - const dataDoc = Doc.GetProto(this.props.Document); - const data = Cast(dataDoc.data, RichTextField); - if (!data) { - return; + updateGoogleDoc = () => { + let modes = GoogleApiClientUtils.Docs.WriteMode; + let mode = modes.Replace; + let reference: Opt = Cast(this.dataDoc[googleDocKey], "string"); + if (!reference) { + mode = modes.Insert; + reference = { + title: StrCast(this.dataDoc.title), + handler: id => this.dataDoc[googleDocKey] = id + }; + } + const data = Cast(this.dataDoc.data, RichTextField); + if (data) { + GoogleApiClientUtils.Docs.write({ + mode, + content: data[ToGoogleDocText](), + reference + }); } - GoogleApiClientUtils.Docs.write({ - reference: { - title: StrCast(dataDoc.title), - handler: id => dataDoc[googleDocKey] = id - }, - content: data[ToPlainText]() - }); } render() { diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts index f0284b1b8..92b19b921 100644 --- a/src/new_fields/RichTextField.ts +++ b/src/new_fields/RichTextField.ts @@ -4,14 +4,14 @@ import { Deserializable } from "../client/util/SerializationHelper"; import { Copy, ToScriptString } from "./FieldSymbols"; import { scriptingGlobal } from "../client/util/Scripting"; -export const ToPlainText = Symbol("PlainText"); -export const FromPlainText = Symbol("PlainText"); +export const ToGoogleDocText = Symbol("PlainText"); +export const FromGoogleDocText = Symbol("PlainText"); @scriptingGlobal @Deserializable("RichTextField") export class RichTextField extends ObjectField { @serializable(true) - Data: string; + readonly Data: string; constructor(data: string) { super(); @@ -26,24 +26,28 @@ export class RichTextField extends ObjectField { return `new RichTextField("${this.Data}")`; } - [ToPlainText]() { + [ToGoogleDocText]() { let content = JSON.parse(this.Data).doc.content; let paragraphs = content.filter((item: any) => item.type === "paragraph"); let output = ""; for (let i = 0; i < paragraphs.length; i++) { let paragraph = paragraphs[i]; + let addNewLine = i > 0 ? paragraphs[i - 1].content : false; if (paragraph.content) { output += paragraph.content.map((block: any) => block.text).join(""); } else { - output += i > 0 && paragraphs[i - 1].content ? "\n\n" : "\n"; + output += "\n"; } + addNewLine && (output += "\n"); } return output; } - [FromPlainText](plainText: string) { + [FromGoogleDocText](plainText: string) { let elements = plainText.split("\n"); + !elements[elements.length - 1].length && elements.pop(); let parsed = JSON.parse(this.Data); + let blankCount = 0; parsed.doc.content = elements.map(text => { let paragraph: any = { type: "paragraph" }; if (text.length) { @@ -52,15 +56,18 @@ export class RichTextField extends ObjectField { marks: [], text }]; + } else { + blankCount++; } return paragraph; }); + let selection = plainText.length + 2 * blankCount; parsed.selection = { type: "text", - anchor: plainText.length, - head: plainText.length + anchor: selection, + head: selection }; - this.Data = JSON.stringify(parsed); + return JSON.stringify(parsed); } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 4f338a06345c6a002c9bebc9ad0c9c1fe910eebd Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 14 Aug 2019 16:15:56 -0400 Subject: clean up and edge cases --- src/client/apis/google_docs/GoogleApiClientUtils.ts | 15 +++++++++++---- src/new_fields/RichTextField.ts | 10 +++------- 2 files changed, 14 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts index c1cbba31f..9d78b632d 100644 --- a/src/client/apis/google_docs/GoogleApiClientUtils.ts +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -178,7 +178,7 @@ export namespace GoogleApiClientUtils { } } if (mode === WriteMode.Replace) { - requests.push({ + index > 1 && requests.push({ deleteContentRange: { range: { startIndex: 1, @@ -189,14 +189,21 @@ export namespace GoogleApiClientUtils { index = 1; } const text = options.content; - requests.push({ + text.length && requests.push({ insertText: { text: isArray(text) ? text.join("\n") : text, location: { index } } }); - let replies = await update({ documentId, requests }); - console.log(replies); + if (!requests.length) { + return undefined; + } + let replies: any = await update({ documentId, requests }); + let errors = "errors"; + if (errors in replies) { + console.log("Write operation failed:"); + console.log(replies[errors].map((error: any) => error.message)); + } return replies; }; diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts index 92b19b921..bd24bad1a 100644 --- a/src/new_fields/RichTextField.ts +++ b/src/new_fields/RichTextField.ts @@ -36,7 +36,7 @@ export class RichTextField extends ObjectField { if (paragraph.content) { output += paragraph.content.map((block: any) => block.text).join(""); } else { - output += "\n"; + output += i === 0 ? "" : "\n"; } addNewLine && (output += "\n"); } @@ -47,7 +47,6 @@ export class RichTextField extends ObjectField { let elements = plainText.split("\n"); !elements[elements.length - 1].length && elements.pop(); let parsed = JSON.parse(this.Data); - let blankCount = 0; parsed.doc.content = elements.map(text => { let paragraph: any = { type: "paragraph" }; if (text.length) { @@ -56,16 +55,13 @@ export class RichTextField extends ObjectField { marks: [], text }]; - } else { - blankCount++; } return paragraph; }); - let selection = plainText.length + 2 * blankCount; parsed.selection = { type: "text", - anchor: selection, - head: selection + anchor: 1, + head: 1 }; return JSON.stringify(parsed); } -- cgit v1.2.3-70-g09d2 From 1644ec6fe0c42dab05f837761c559fbc9b4a6450 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Thu, 15 Aug 2019 13:01:09 -0400 Subject: text box almost happening --- src/client/views/GlobalKeyHandler.ts | 4 +++- src/client/views/PreviewCursor.tsx | 26 ++++++++++++++++++++-- .../collectionFreeForm/CollectionFreeFormView.tsx | 1 + .../collections/collectionFreeForm/MarqueeView.tsx | 2 +- 4 files changed, 29 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index f55953bd4..df907b950 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -181,7 +181,9 @@ export default class KeyManager { break; case "a": case "v": - this.printClipboard(); + // this.printClipboard(); + stopPropagation = false; + preventDefault = false; break; case "x": case "c": diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index e7a5475ed..9967e142d 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -3,11 +3,15 @@ import { observer } from 'mobx-react'; import "normalize.css"; import * as React from 'react'; import "./PreviewCursor.scss"; +import { Docs } from '../documents/Documents'; +import { Transform } from 'prosemirror-transform'; +import { Doc } from '../../new_fields/Doc'; @observer export class PreviewCursor extends React.Component<{}> { private _prompt = React.createRef(); static _onKeyPress?: (e: KeyboardEvent) => void; + static _addLiveTextDoc: (doc: Doc) => void; @observable static _clickPoint = [0, 0]; @observable public static Visible = false; //when focus is lost, this will remove the preview cursor @@ -20,13 +24,29 @@ export class PreviewCursor extends React.Component<{}> { document.addEventListener("keydown", this.onKeyPress); document.addEventListener("paste", this.paste); } + paste = (e: ClipboardEvent) => { console.log(e.clipboardData); if (e.clipboardData) { + //what needs to be done with this? console.log(e.clipboardData.getData("text/html")); - console.log(e.clipboardData.getData("text/csv")); + // console.log(e.clipboardData.getData("text/csv")); console.log(e.clipboardData.getData("text/plain")); + console.log(e.clipboardData.getData("image/png")); + console.log(e.clipboardData.getData("image/jpg")); + console.log(e.clipboardData.getData("image/jpeg")); + + if (e.clipboardData.getData("text/plain") !== "") { + let text = e.clipboardData.getData("text/plain"); + let newBox = Docs.Create.TextDocument({ width: 200, height: 100, x: PreviewCursor._clickPoint[0], y: PreviewCursor._clickPoint[1], title: "-typed text-" }); + newBox.proto!.autoHeight = true; + PreviewCursor._addLiveTextDoc(newBox); + } } + + // let newBox = Docs.Create.TextDocument({ width: 200, height: 100, x: x, y: y, title: "-typed text-" }); + // newBox.proto!.autoHeight = true; + // this.props.addLiveTextDocument(newBox); } @action @@ -49,9 +69,11 @@ export class PreviewCursor extends React.Component<{}> { } } @action - public static Show(x: number, y: number, onKeyPress: (e: KeyboardEvent) => void) { + public static Show(x: number, y: number, onKeyPress: (e: KeyboardEvent) => void, addLiveText: (doc: Doc) => void) { + console.log("clickpoint setting") this._clickPoint = [x, y]; this._onKeyPress = onKeyPress; + this._addLiveTextDoc = addLiveText; setTimeout(action(() => this.Visible = true), (1)); } render() { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 0501bf929..34cb2f5e0 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -37,6 +37,7 @@ import "./CollectionFreeFormView.scss"; import { MarqueeView } from "./MarqueeView"; import React = require("react"); import { DocumentType, Docs } from "../../../documents/Documents"; +import { PreviewCursor } from "../../PreviewCursor"; library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index aad26efa0..08d2a8adf 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -203,7 +203,7 @@ export class MarqueeView extends React.Component onClick = (e: React.MouseEvent): void => { if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) { - PreviewCursor.Show(e.clientX, e.clientY, this.onKeyPress); + PreviewCursor.Show(e.clientX, e.clientY, this.onKeyPress, this.props.addLiveTextDocument); // let the DocumentView stopPropagation of this event when it selects this document } else { // why do we get a click event when the cursor have moved a big distance? // let's cut it off here so no one else has to deal with it. -- cgit v1.2.3-70-g09d2 From 9d76e8c2f318b4c6a4f941e6d2c8e795bc93f372 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Thu, 15 Aug 2019 16:15:05 -0400 Subject: updated webbox --- src/client/views/nodes/WebBox.tsx | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index ff5297783..91170e99a 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -17,6 +17,7 @@ import { RefField } from "../../../new_fields/RefField"; import { ObjectField } from "../../../new_fields/ObjectField"; import { updateSourceFile } from "typescript"; import { KeyValueBox } from "./KeyValueBox"; +import { setReactionScheduler } from "mobx/lib/internal"; @observer export class WebBox extends React.Component { @@ -38,6 +39,8 @@ export class WebBox extends React.Component { this.props.Document.height = NumCast(this.props.Document.width) / youtubeaspect; } } + + this.setURL(); } @action @@ -50,15 +53,13 @@ export class WebBox extends React.Component { const script = KeyValueBox.CompileKVPScript(`new WebField("${this.url}")`); if (!script) return; KeyValueBox.ApplyKVPScript(this.props.Document, "data", script); - let mod = document.getElementById("webpage-input"); - if (mod) mod.style.display = "none"; } - @computed - get getURL() { + @action + setURL() { let urlField: FieldResult = Cast(this.props.Document.data, WebField) - if (urlField) return urlField.url.toString(); - return ""; + if (urlField) this.url = urlField.url.toString(); + else this.url = ""; } onValueKeyDown = async (e: React.KeyboardEvent) => { @@ -86,10 +87,9 @@ export class WebBox extends React.Component {
    diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index ad29ce775..bc057bb5f 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -60,7 +60,7 @@ const richTextSchema = createSchema({ documentText: "string" }); -const googleDocKey = "googleDocId"; +const googleDocId = "googleDocId"; type RichTextDocument = makeInterface<[typeof richTextSchema]>; const RichTextDocument = makeInterface(richTextSchema); @@ -84,6 +84,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe private _proxyReactionDisposer: Opt; private dropDisposer?: DragManager.DragDropDisposer; public get CurrentDiv(): HTMLDivElement { return this._ref.current!; } + private isOpening = false; @observable _entered = false; @observable public static InputBoxOverlay?: FormattedTextBox = undefined; @@ -295,17 +296,19 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe pollExportedCounterpart = async () => { let dataDoc = Doc.GetProto(this.props.Document); - let documentId = StrCast(dataDoc[googleDocKey]); + let documentId = StrCast(dataDoc[googleDocId]); if (documentId) { let exportState = await GoogleApiClientUtils.Docs.read({ documentId }); if (exportState) { let data = Cast(dataDoc.data, RichTextField); if (data) { + this.isOpening = true; dataDoc.data = new RichTextField(data[FromGoogleDocText](exportState)); } } else { - delete dataDoc[googleDocKey]; + delete dataDoc[googleDocId]; } + this.tryUpdateHeight(); } } @@ -346,9 +349,18 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe const field = this.dataDoc ? Cast(this.dataDoc[this.props.fieldKey], RichTextField) : undefined; return field ? field.Data : `{"doc":{"type":"doc","content":[]},"selection":{"type":"text","anchor":0,"head":0}}`; }, - field2 => { - this._editorView && !this._applyingChange && - this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field2))); + incomingValue => { + if (this._editorView && !this._applyingChange) { + let updatedState = JSON.parse(incomingValue); + this._editorView.updateState(EditorState.fromJSON(config, updatedState)); + // manually sets cursor selection at the end of the text on focus + if (this.isOpening) { + this.isOpening = false; + let end = this._editorView.state.doc.content.size - 1; + updatedState.selection = { type: "text", anchor: end, head: end }; + this._editorView.updateState(EditorState.fromJSON(config, updatedState)); + } + } } ); @@ -686,7 +698,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe event: action(() => Doc.GetProto(this.props.Document).autoHeight = !BoolCast(this.props.Document.autoHeight)), icon: "expand-arrows-alt" }); ContextMenu.Instance.addItem({ description: "Text Funcs...", subitems: subitems, icon: "text-height" }); - if (!(googleDocKey in Doc.GetProto(this.props.Document))) { + if (!(googleDocId in Doc.GetProto(this.props.Document))) { ContextMenu.Instance.addItem({ description: "Export to Google Doc...", event: this.updateGoogleDoc, @@ -698,21 +710,18 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe updateGoogleDoc = () => { let modes = GoogleApiClientUtils.Docs.WriteMode; let mode = modes.Replace; - let reference: Opt = Cast(this.dataDoc[googleDocKey], "string"); + let reference: Opt = Cast(this.dataDoc[googleDocId], "string"); if (!reference) { mode = modes.Insert; reference = { title: StrCast(this.dataDoc.title), - handler: id => this.dataDoc[googleDocKey] = id + handler: id => this.dataDoc[googleDocId] = id }; } - const data = Cast(this.dataDoc.data, RichTextField); - if (data) { - GoogleApiClientUtils.Docs.write({ - mode, - content: data[ToGoogleDocText](), - reference - }); + if (this._editorView) { + let data = Cast(this.dataDoc.data, RichTextField); + let content = data ? data[ToGoogleDocText]() : this._editorView.state.doc.textContent; + GoogleApiClientUtils.Docs.write({ reference, content, mode }); } } diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts index 8963682c3..ec08293e9 100644 --- a/src/new_fields/RichTextField.ts +++ b/src/new_fields/RichTextField.ts @@ -6,6 +6,8 @@ import { scriptingGlobal } from "../client/util/Scripting"; export const ToGoogleDocText = Symbol("PlainText"); export const FromGoogleDocText = Symbol("PlainText"); +const delimiter = "\n"; +const joiner = ""; @scriptingGlobal @Deserializable("RichTextField") @@ -27,45 +29,39 @@ export class RichTextField extends ObjectField { } [ToGoogleDocText]() { - let state = JSON.parse(this.Data); - let text = state.doc.textBetween(0, state.doc.content.size, "\n\n"); - console.log(text); + // Because we're working with plain text, just concatenate all paragraphs let content = JSON.parse(this.Data).doc.content; let paragraphs = content.filter((item: any) => item.type === "paragraph"); - let output = ""; - for (let i = 0; i < paragraphs.length; i++) { - let paragraph = paragraphs[i]; - let addNewLine = i > 0 ? paragraphs[i - 1].content : false; - if (paragraph.content) { - output += paragraph.content.map((block: any) => block.text).join(""); - } else { - output += i === 0 ? "" : "\n"; - } - addNewLine && (output += "\n"); - } - return output; + + // Functions to flatten ProseMirror paragraph objects (and their components) to plain text + // While this function already exists in state.doc.textBeteen(), it doesn't account for newlines + let blockText = (block: any) => block.text; + let concatenateParagraph = (p: any) => (p.content ? p.content.map(blockText).join(joiner) : "") + delimiter; + + // Concatentate paragraphs and string the result together. Trim the last newline, an artifact. + let textParagraphs = paragraphs.map(concatenateParagraph); + return textParagraphs.join(joiner).trimEnd(delimiter); } [FromGoogleDocText](plainText: string) { - let elements = plainText.split("\n"); + // Remap the text, creating blocks split on newlines + let elements = plainText.split(delimiter); + + // Google Docs adds in an extra carriage return automatically, so this counteracts it !elements[elements.length - 1].length && elements.pop(); + + // Preserve the current state, but re-write the content to be the blocks let parsed = JSON.parse(this.Data); parsed.doc.content = elements.map(text => { let paragraph: any = { type: "paragraph" }; - if (text.length) { - paragraph.content = [{ - type: "text", - marks: [], - text - }]; - } + text.length && (paragraph.content = [{ type: "text", marks: [], text }]); // An empty paragraph gets treated as a line break return paragraph; }); - parsed.selection = { - type: "text", - anchor: 1, - head: 1 - }; + + // If the new content is shorter than the previous content and selection is unchanged, may throw an out of bounds exception, so we reset it + parsed.selection = { type: "text", anchor: 1, head: 1 }; + + // Export the ProseMirror-compatible state object we've jsut built return JSON.stringify(parsed); } -- cgit v1.2.3-70-g09d2 From a2bf83f4dacd939aeadf0dd566bba067986953d9 Mon Sep 17 00:00:00 2001 From: kimdahey Date: Mon, 19 Aug 2019 15:00:21 -0400 Subject: css changes --- src/client/views/MetadataEntryMenu.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/MetadataEntryMenu.scss b/src/client/views/MetadataEntryMenu.scss index d665f028c..a33f24bcc 100644 --- a/src/client/views/MetadataEntryMenu.scss +++ b/src/client/views/MetadataEntryMenu.scss @@ -1,6 +1,6 @@ .metadataEntry-outerDiv { display: flex; - width: 300px; + width: 310px; input[type=checkbox] { margin-left: 5px; -- cgit v1.2.3-70-g09d2 From 629870ee9938597818324d13b775ef38333f1736 Mon Sep 17 00:00:00 2001 From: kimdahey Date: Mon, 19 Aug 2019 15:04:31 -0400 Subject: fix error with page.getViewport in index.ts --- src/server/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/server/index.ts b/src/server/index.ts index 7a425b60a..eae018f13 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -436,7 +436,7 @@ function LoadPage(file: string, pageNumber: number, res: Response) { console.log(pageNumber); pdf.getPage(pageNumber).then((page: Pdfjs.PDFPageProxy) => { console.log("reading " + page); - let viewport = page.getViewport({ scale: 1 }); + let viewport = page.getViewport(1); let canvasAndContext = factory.create(viewport.width, viewport.height); let renderContext = { canvasContext: canvasAndContext.context, -- cgit v1.2.3-70-g09d2 From 616d71c6ad8b15b9736ada0754c557c2a81964bc Mon Sep 17 00:00:00 2001 From: kimdahey Date: Mon, 19 Aug 2019 15:07:31 -0400 Subject: fixed errors --- src/client/views/MetadataEntryMenu.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx index aed84768e..06084aac0 100644 --- a/src/client/views/MetadataEntryMenu.tsx +++ b/src/client/views/MetadataEntryMenu.tsx @@ -22,7 +22,6 @@ export class MetadataEntryMenu extends React.Component{ @observable private suggestions: string[] = []; private _addChildren: boolean = false; private userModified = false; - private _addChildren = false; private autosuggestRef = React.createRef(); @@ -85,11 +84,6 @@ export class MetadataEntryMenu extends React.Component{ e.stopPropagation(); const script = KeyValueBox.CompileKVPScript(this._currentValue); if (!script) return; -<<<<<<< HEAD -======= - // add optional adding here - let docs = Array(); ->>>>>>> e7883760751d053133c8bb9b867509fa23f40b68 let doc = this.props.docs; if (typeof doc === "function") { @@ -193,13 +187,8 @@ export class MetadataEntryMenu extends React.Component{ ref={this.autosuggestRef} /> Value: -<<<<<<< HEAD - Children: - -======= - Spread to children: - ->>>>>>> e7883760751d053133c8bb9b867509fa23f40b68 + Children: +
    ); } -- cgit v1.2.3-70-g09d2 From 0e4729a8d634c67a3575761784b840a28694ba7a Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 19 Aug 2019 15:55:36 -0400 Subject: fixed treeview dragging. got rid of extra stuff from presentationview --- src/client/documents/Documents.ts | 2 +- src/client/views/MainView.tsx | 62 +- .../views/collections/CollectionDockingView.tsx | 27 +- .../views/collections/CollectionSchemaCells.tsx | 2 + .../views/collections/CollectionSchemaView.tsx | 4 + src/client/views/collections/CollectionSubView.tsx | 2 +- .../views/collections/CollectionTreeView.tsx | 18 +- .../CollectionFreeFormRemoteCursors.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 + src/client/views/nodes/DocumentView.tsx | 6 +- src/client/views/nodes/FieldView.tsx | 1 + src/client/views/nodes/KeyValuePair.tsx | 1 + src/client/views/nodes/LinkMenu.tsx | 3 - src/client/views/nodes/PresBox.tsx | 249 +----- src/client/views/pdf/Annotation.tsx | 6 +- src/client/views/pdf/PDFViewer.tsx | 1 + .../views/presentationview/PresentationElement.tsx | 3 +- .../views/presentationview/PresentationList.tsx | 5 +- .../views/presentationview/PresentationView.scss | 4 +- .../views/presentationview/PresentationView.tsx | 994 --------------------- src/client/views/search/SearchItem.tsx | 1 + src/new_fields/Doc.ts | 55 +- src/new_fields/util.ts | 3 +- .../authentication/models/current_user_utils.ts | 23 +- 24 files changed, 172 insertions(+), 1304 deletions(-) delete mode 100644 src/client/views/presentationview/PresentationView.tsx (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index c551fd2a3..47df17329 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -290,7 +290,7 @@ export namespace Docs { const { omit: protoProps, extract: delegateProps } = OmitKeys(options, delegateKeys); if (!("author" in protoProps)) { - protoProps.author = CurrentUserUtils.email; + protoProps.author = Doc.CurrentUserEmail; } if (!("creationDate" in protoProps)) { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 7119a4fc3..7b7a5542d 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -12,7 +12,6 @@ import { List } from '../../new_fields/List'; import { Id } from '../../new_fields/FieldSymbols'; import { InkTool } from '../../new_fields/InkField'; import { listSpec } from '../../new_fields/Schema'; -import { SchemaHeaderField } from '../../new_fields/SchemaHeaderField'; import { BoolCast, Cast, FieldValue, StrCast } from '../../new_fields/Types'; import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils'; import { RouteStore } from '../../server/RouteStore'; @@ -24,7 +23,7 @@ import { DictationManager } from '../util/DictationManager'; import { SetupDrag } from '../util/DragManager'; import { HistoryUtil } from '../util/History'; import { Transform } from '../util/Transform'; -import { UndoManager } from '../util/UndoManager'; +import { UndoManager, undoBatch } from '../util/UndoManager'; import { CollectionBaseView } from './collections/CollectionBaseView'; import { CollectionDockingView } from './collections/CollectionDockingView'; import { CollectionTreeView } from './collections/CollectionTreeView'; @@ -37,15 +36,16 @@ import { MainOverlayTextBox } from './MainOverlayTextBox'; import { DocumentView } from './nodes/DocumentView'; import { OverlayView } from './OverlayView'; import PDFMenu from './pdf/PDFMenu'; -import { PresentationView } from './presentationview/PresentationView'; import { PreviewCursor } from './PreviewCursor'; import { FilterBox } from './search/FilterBox'; +import { DocumentManager } from '../util/DocumentManager'; +import PresModeMenu from './presentationview/PresentationModeMenu'; +import { PresBox } from './nodes/PresBox'; @observer export class MainView extends React.Component { public static Instance: MainView; @observable addMenuToggle = React.createRef(); - @observable private _workspacesShown: boolean = false; @observable public pwidth: number = 0; @observable public pheight: number = 0; @@ -82,10 +82,6 @@ export class MainView extends React.Component { public isPointerDown = false; private set mainContainer(doc: Opt) { if (doc) { - if (!("presentationView" in doc)) { - let initialDoc = Docs.Create.TreeDocument([], { title: "Presentation" }); - doc.presentationView = Docs.Create.PresDocument(new List([initialDoc])); - } CurrentUserUtils.UserDocument.activeWorkspace = doc; } } @@ -322,6 +318,7 @@ export class MainView extends React.Component { DataDoc={undefined} addDocument={undefined} addDocTab={emptyFunction} + pinToPres={emptyFunction} onClick={undefined} removeDocument={undefined} ScreenToLocalTransform={Transform.Identity} @@ -339,7 +336,6 @@ export class MainView extends React.Component { zoomToScale={emptyFunction} getScale={returnOne} />} - {/* {presentationDoc ? : null} */}
    } ; @@ -386,6 +382,7 @@ export class MainView extends React.Component { DataDoc={undefined} addDocument={undefined} addDocTab={this.addDocTabFunc} + pinToPres={emptyFunction} removeDocument={undefined} onClick={undefined} ScreenToLocalTransform={Transform.Identity} @@ -443,26 +440,24 @@ export class MainView extends React.Component { let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; - // let addDockingNode = action(() => Docs.Create.StandardCollectionDockingDocument([{ doc: addColNode(), initialWidth: 200 }], { width: 200, height: 200, title: "a nested docking freeform collection" })); - let addSchemaNode = action(() => Docs.Create.SchemaDocument([new SchemaHeaderField("title", "#f1efeb")], [], { width: 200, height: 200, title: "a schema collection" })); - //let addTreeNode = action(() => Docs.TreeDocument([CurrentUserUtils.UserDocument], { width: 250, height: 400, title: "Library:" + CurrentUserUtils.email, dropAction: "alias" })); - // let addTreeNode = action(() => Docs.TreeDocument(this._northstarSchemas, { width: 250, height: 400, title: "northstar schemas", dropAction: "copy" })); let addColNode = action(() => Docs.Create.FreeformDocument([], { width: this.pwidth * .7, height: this.pheight, title: "a freeform collection" })); + let addPresNode = action(() => Doc.UserDoc().curPresentation = Docs.Create.PresDocument(new List(), { width: 200, height: 500, title: "a presentation trail" })); let addWebNode = action(() => Docs.Create.WebDocument("https://en.wikipedia.org/wiki/Hedgehog", { width: 300, height: 300, title: "New Webpage" })); let addDragboxNode = action(() => Docs.Create.DragboxDocument({ width: 40, height: 40, title: "drag collection" })); let addImageNode = action(() => Docs.Create.ImageDocument(imgurl, { width: 200, title: "an image of a cat" })); let addButtonDocument = action(() => Docs.Create.ButtonDocument({ width: 150, height: 50, title: "Button" })); let addImportCollectionNode = action(() => Docs.Create.DirectoryImportDocument({ title: "Directory Import", width: 400, height: 400 })); - let youtubeurl = "https://www.youtube.com/embed/TqcApsGRzWw"; - let addYoutubeSearcher = action(() => Docs.Create.YoutubeDocument(youtubeurl, { width: 600, height: 600, title: "youtube search" })); + // let youtubeurl = "https://www.youtube.com/embed/TqcApsGRzWw"; + // let addYoutubeSearcher = action(() => Docs.Create.YoutubeDocument(youtubeurl, { width: 600, height: 600, title: "youtube search" })); let btns: [React.RefObject, IconName, string, () => Doc][] = [ [React.createRef(), "object-group", "Add Collection", addColNode], + [React.createRef(), "table", "Add Presentation Trail", addPresNode], [React.createRef(), "globe-asia", "Add Website", addWebNode], [React.createRef(), "bolt", "Add Button", addButtonDocument], // [React.createRef(), "clone", "Add Docking Frame", addDockingNode], [React.createRef(), "cloud-upload-alt", "Import Directory", addImportCollectionNode], //remove at some point in favor of addImportCollectionNode - [React.createRef(), "play", "Add Youtube Searcher", addYoutubeSearcher], + //[React.createRef(), "play", "Add Youtube Searcher", addYoutubeSearcher], [React.createRef(), "file", "Add Document Dragger", addDragboxNode] ]; if (!ClientUtils.RELEASE) btns.unshift([React.createRef(), "cat", "Add Cat Image", addImageNode]); @@ -489,7 +484,7 @@ export class MainView extends React.Component {
      • -
      • +
      • {btns.map(btn => @@ -543,30 +538,20 @@ export class MainView extends React.Component { @observable isSearchVisible = false; @action.bound toggleSearch = () => { - // console.log("search toggling") this.isSearchVisible = !this.isSearchVisible; } togglePresentationView = () => { - let presDoc = this.presentationDoc; - if (!presDoc) { - return; - } - let isOpen = CollectionDockingView.Instance.Has(presDoc); - if (isOpen) { - return; - // CollectionDockingView.Instance.CloseRightSplit(presDoc); - //why?? It's throwing an error that seems impossible to fix. - //ToDo: - } else { - CollectionDockingView.Instance.AddRightSplit(presDoc, undefined); + if (CurrentUserUtils.UserDocument.curPresentation) { + let isOpen = DocumentManager.Instance.getDocumentView(CurrentUserUtils.UserDocument.curPresentation as Doc); + if (isOpen) { + CollectionDockingView.Instance.CloseRightSplit(CurrentUserUtils.UserDocument.curPresentation as Doc); + } else { + CollectionDockingView.Instance.AddRightSplit(CurrentUserUtils.UserDocument.curPresentation as Doc, undefined); + } } } - private get presentationDoc() { - let mainCont = this.mainContainer; - return mainCont ? FieldValue(Cast(mainCont.presentationView, Doc)) : undefined; - } private get dictationOverlay() { let display = this.dictationOverlayVisible; let success = this.dictationSuccess; @@ -592,12 +577,21 @@ export class MainView extends React.Component { ); } + @computed get miniPresentation() { + let next = () => PresBox.CurrentPresentation.next(); + let back = () => PresBox.CurrentPresentation.back(); + let startOrResetPres = () => PresBox.CurrentPresentation.startOrResetPres(); + let closePresMode = action(() => {PresBox.CurrentPresentation.presMode = false; this.addDocTabFunc(PresBox.CurrentPresentation.props.Document)}); + return !PresBox.CurrentPresentation || !PresBox.CurrentPresentation.presMode ? (null) : + } + render() { return (
      {this.dictationOverlay} {this.mainContent} + {this.miniPresentation} {this.nodesMenu()} diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 3fcc61b76..47dfeb169 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -29,6 +29,8 @@ import { faFile, faUnlockAlt } from '@fortawesome/free-solid-svg-icons'; import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils'; import { Docs } from '../../documents/Documents'; import { DateField } from '../../../new_fields/DateField'; +import { List } from '../../../new_fields/List'; +import { DocumentType } from '../../documents/DocumentTypes'; library.add(faFile); @observer @@ -543,11 +545,31 @@ export class DockedFrameRenderer extends React.Component { })); } + /** + * Adds a document to the presentation view + **/ + @undoBatch + @action + public PinDoc(doc: Doc) { + if (doc.type === DocumentType.PRES) { + MainView.Instance.toggleMiniPresentation() + } + //add this new doc to props.Document + let curPres = Cast(CurrentUserUtils.UserDocument.curPresentation, Doc) as Doc; + if (curPres) { + const data = Cast(curPres.data, listSpec(Doc)); + if (data) { + data.push(doc); + } else { + curPres.data = new List([doc]); + } + } + } + componentDidMount() { this.props.glContainer.layoutManager.on("activeContentItemChanged", this.onActiveContentItemChanged); this.props.glContainer.on("tab", this.onActiveContentItemChanged); this.onActiveContentItemChanged(); - // setTimeout(() => MainView.Instance.openPresentationView(), 2000); } componentWillUnmount() { @@ -592,6 +614,8 @@ export class DockedFrameRenderer extends React.Component { MainView.Instance.openWorkspace(doc); } else if (location === "onRight") { CollectionDockingView.Instance.AddRightSplit(doc, dataDoc); + } else if (location === "close") { + CollectionDockingView.Instance.CloseRightSplit(doc); } else { CollectionDockingView.Instance.AddTab(this._stack, doc, dataDoc); } @@ -618,6 +642,7 @@ export class DockedFrameRenderer extends React.Component { focus={emptyFunction} backgroundColor={returnEmptyString} addDocTab={this.addDocTab} + pinToPres={this.PinDoc} ContainingCollectionView={undefined} zoomToScale={emptyFunction} getScale={returnOne} />; diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 7e3061354..551b485e7 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -40,6 +40,7 @@ export interface CellProps { fieldKey: string; renderDepth: number; addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; + pinToPres: (document: Doc) => void; moveDocument: (document: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean) => boolean; isFocused: boolean; changeFocusedCellByIndex: (row: number, col: number) => void; @@ -160,6 +161,7 @@ export class CollectionSchemaCell extends React.Component { PanelHeight: returnZero, PanelWidth: returnZero, addDocTab: this.props.addDocTab, + pinToPres: this.props.pinToPres, ContentScaling: returnOne }; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 4537dcc85..221908dd2 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -251,6 +251,7 @@ export interface SchemaTableProps { active: () => boolean; onDrop: (e: React.DragEvent, options: DocumentOptions, completed?: (() => void) | undefined) => void; addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; + pinToPres: (document: Doc) => void; isSelected: () => boolean; isFocused: (document: Doc) => boolean; setFocused: (document: Doc) => void; @@ -377,6 +378,7 @@ export class SchemaTable extends React.Component { fieldKey: this.props.fieldKey, renderDepth: this.props.renderDepth, addDocTab: this.props.addDocTab, + pinToPres: this.props.pinToPres, moveDocument: this.props.moveDocument, setIsEditing: this.setCellIsEditing, isEditable: isEditable, @@ -907,6 +909,7 @@ interface CollectionSchemaPreviewProps { active: () => boolean; whenActiveChanged: (isActive: boolean) => void; addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; + pinToPres: (document: Doc) => void; setPreviewScript: (script: string) => void; previewScript?: string; } @@ -997,6 +1000,7 @@ export class CollectionSchemaPreview extends React.Component(schemaCtor: (doc: Doc) => T) { let ind; let doc = this.props.Document; let id = CurrentUserUtils.id; - let email = CurrentUserUtils.email; + let email = Doc.CurrentUserEmail; let pos = { x: position[0], y: position[1] }; if (id && email) { const proto = Doc.GetProto(doc); diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 7424cc186..6b9cd57b3 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -39,6 +39,7 @@ export interface TreeViewProps { moveDocument: DragManager.MoveFunction; dropAction: "alias" | "copy" | undefined; addDocTab: (doc: Doc, dataDoc: Doc | undefined, where: string) => void; + pinToPres: (document: Doc) => void; panelWidth: () => number; panelHeight: () => number; addDocument: (doc: Doc, relativeTo?: Doc, before?: boolean) => boolean; @@ -259,10 +260,10 @@ class TreeView extends React.Component { if (contents instanceof Doc || Cast(contents, listSpec(Doc))) { let remDoc = (doc: Doc) => this.remove(doc, key); - let addDoc = (doc: Doc, addBefore?: Doc, before?: boolean) => Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before); + let addDoc = (doc: Doc, addBefore?: Doc, before?: boolean) => Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, !BoolCast(this.props.document.stackingHeadersSortDescending)); contentElement = TreeView.GetChildElements(contents instanceof Doc ? [contents] : DocListCast(contents), this.props.treeViewId, doc, undefined, key, addDoc, remDoc, this.move, - this.props.dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.props.outerXf, this.props.active, this.props.panelWidth, this.props.renderDepth); + this.props.dropAction, this.props.addDocTab, this.props.pinToPres, this.props.ScreenToLocalTransform, this.props.outerXf, this.props.active, this.props.panelWidth, this.props.renderDepth); } else { contentElement = { const expandKey = this.treeViewExpandedView === this.fieldKey ? this.fieldKey : this.treeViewExpandedView === "links" ? "links" : undefined; if (expandKey !== undefined) { let remDoc = (doc: Doc) => this.remove(doc, expandKey); - let addDoc = (doc: Doc, addBefore?: Doc, before?: boolean) => Doc.AddDocToList(this.dataDoc, expandKey, doc, addBefore, before); + let addDoc = (doc: Doc, addBefore?: Doc, before?: boolean) => Doc.AddDocToList(this.dataDoc, expandKey, doc, addBefore, before, !BoolCast(this.props.document.stackingHeadersSortDescending)); let docs = expandKey === "links" ? this.childLinks : this.childDocs; return
        {!docs ? (null) : TreeView.GetChildElements(docs as Doc[], this.props.treeViewId, this.props.document.layout as Doc, this.resolvedDataDoc, expandKey, addDoc, remDoc, this.move, - this.props.dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, + this.props.dropAction, this.props.addDocTab, this.props.pinToPres, this.props.ScreenToLocalTransform, this.props.outerXf, this.props.active, this.props.panelWidth, this.props.renderDepth)}
      ; } else if (this.treeViewExpandedView === "fields") { @@ -319,6 +320,7 @@ class TreeView extends React.Component { active={this.props.active} whenActiveChanged={emptyFunction as any} addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} setPreviewScript={emptyFunction}>
      ; @@ -395,6 +397,7 @@ class TreeView extends React.Component { move: DragManager.MoveFunction, dropAction: dropActionType, addDocTab: (doc: Doc, dataDoc: Doc | undefined, where: string) => void, + pinToPres: (document: Doc) => void, screenToLocalXf: () => Transform, outerXf: () => { translateX: number, translateY: number }, active: () => boolean, @@ -471,6 +474,7 @@ class TreeView extends React.Component { moveDocument={move} dropAction={dropAction} addDocTab={addDocTab} + pinToPres={pinToPres} ScreenToLocalTransform={screenToLocalXf} outerXf={outerXf} parentKey={key} @@ -554,7 +558,7 @@ export class CollectionTreeView extends CollectionSubView(Document) { render() { Doc.UpdateDocumentExtensionForField(this.props.DataDoc ? this.props.DataDoc : this.props.Document, this.props.fieldKey); let dropAction = StrCast(this.props.Document.dropAction) as dropActionType; - let addDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before); + let addDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before, !BoolCast(this.props.Document.stackingHeadersSortDescending)); let moveDoc = (d: Doc, target: Doc, addDoc: (doc: Doc) => boolean) => this.props.moveDocument(d, target, addDoc); return !this.childDocs ? (null) : (
      ([Templates.Title.Layout]) }); TreeView.loadId = doc[Id]; - Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, this.childDocs.length ? this.childDocs[0] : undefined, true); + Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, this.childDocs.length ? this.childDocs[0] : undefined, true, !BoolCast(this.props.Document.stackingHeadersSortDescending)); }} /> {this.props.Document.workspaceLibrary ? this.renderNotifsButton : (null)} {this.props.Document.allowClear ? this.renderClearButton : (null)}
        { TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.Document, this.props.DataDoc, this.props.fieldKey, addDoc, this.remove, - moveDoc, dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.renderDepth) + moveDoc, dropAction, this.props.addDocTab, this.props.pinToPres, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.renderDepth) }
      diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx index 3193f5624..b8148852d 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx @@ -55,7 +55,7 @@ export class CollectionFreeFormRemoteCursors extends React.Component void; bringToFront: (doc: Doc, sendToBack?: boolean) => void; addDocTab: (doc: Doc, dataDoc: Doc | undefined, where: string) => void; + pinToPres: (document: Doc) => void; collapseToPoint?: (scrpt: number[], expandedDocs: Doc[] | undefined) => void; zoomToScale: (scale: number) => void; backgroundColor: (doc: Doc) => string | undefined; @@ -614,7 +614,7 @@ export class DocumentView extends DocComponent(Docu let analyzers: ContextMenuProps[] = existingAnalyze && "subitems" in existingAnalyze ? existingAnalyze.subitems : []; analyzers.push({ description: "Transcribe Speech", event: this.listen, icon: "microphone" }); !existingAnalyze && cm.addItem({ description: "Analyzers...", subitems: analyzers, icon: "hand-point-right" }); - cm.addItem({ description: "Pin to Presentation", event: () => PresBox.Instance.PinDoc(this.props.Document), icon: "map-pin" }); //I think this should work... and it does! A miracle! + cm.addItem({ description: "Pin to Presentation", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin" }); //I think this should work... and it does! A miracle! cm.addItem({ description: "Add Repl", icon: "laptop-code", event: () => OverlayView.Instance.addWindow(, { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" }) }); cm.addItem({ description: "Download document", icon: "download", event: () => { @@ -661,7 +661,7 @@ export class DocumentView extends DocComponent(Docu try { let stuff = await rp.get(Utils.prepend(RouteStore.getUsers)); const users: User[] = JSON.parse(stuff); - usersMenu = users.filter(({ email }) => email !== CurrentUserUtils.email).map(({ email, userDocumentId }) => ({ + usersMenu = users.filter(({ email }) => email !== Doc.CurrentUserEmail).map(({ email, userDocumentId }) => ({ description: email, event: async () => { const userDocument = await Cast(DocServer.GetRefField(userDocumentId), Doc); if (!userDocument) { diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index cae975f30..f0f1b3b73 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -39,6 +39,7 @@ export interface FieldViewProps { selectOnLoad: boolean; addDocument?: (document: Doc, allowDuplicates?: boolean) => boolean; addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; + pinToPres: (document: Doc) => void; removeDocument?: (document: Doc) => boolean; moveDocument?: (document: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean) => boolean; ScreenToLocalTransform: () => Transform; diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index 534a42efc..8001b24a7 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -68,6 +68,7 @@ export class KeyValuePair extends React.Component { PanelWidth: returnZero, PanelHeight: returnZero, addDocTab: returnZero, + pinToPres: returnZero, ContentScaling: returnOne }; let contents = ; diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx index 1a4af04f8..1908889e9 100644 --- a/src/client/views/nodes/LinkMenu.tsx +++ b/src/client/views/nodes/LinkMenu.tsx @@ -12,9 +12,6 @@ import { library } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; library.add(faTrash); -import { Cast, FieldValue, StrCast } from "../../../new_fields/Types"; -import { Id } from "../../../new_fields/FieldSymbols"; -import { DocumentType } from "../../documents/Documents"; interface Props { docView: DocumentView; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 91c141540..cc042e008 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -1,22 +1,22 @@ import React = require("react"); -import { FieldViewProps, FieldView } from './FieldView'; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { faArrowLeft, faArrowRight, faEdit, faMinus, faPlay, faPlus, faStop, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { observable, action, runInAction, reaction, autorun, computed } from "mobx"; -import "../presentationview/PresentationView.scss"; -import { DocumentManager } from "../../util/DocumentManager"; -import { Utils } from "../../../Utils"; import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc"; -import { listSpec } from "../../../new_fields/Schema"; -import { Cast, NumCast, FieldValue, PromiseValue, StrCast, BoolCast } from "../../../new_fields/Types"; import { Id } from "../../../new_fields/FieldSymbols"; import { List } from "../../../new_fields/List"; +import { listSpec } from "../../../new_fields/Schema"; +import { BoolCast, Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types"; +import { Utils } from "../../../Utils"; +import { DocumentManager } from "../../util/DocumentManager"; +import { undoBatch } from "../../util/UndoManager"; import PresentationElement, { buttonIndex } from "../presentationview/PresentationElement"; -import { library } from '@fortawesome/fontawesome-svg-core'; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus, faEdit } from '@fortawesome/free-solid-svg-icons'; -import { Docs } from "../../documents/Documents"; -import { undoBatch, UndoManager } from "../../util/UndoManager"; import PresentationViewList from "../presentationview/PresentationList"; +import "../presentationview/PresentationView.scss"; +import { FieldView, FieldViewProps } from './FieldView'; +import { ContextMenu } from "../ContextMenu"; library.add(faArrowLeft); library.add(faArrowRight); @@ -37,17 +37,14 @@ const expandedWidth = 450; @observer export class PresBox extends React.Component { //FieldViewProps? - @computed - private get presentationDocs() { - let source = Doc.GetProto(this.props.Document); - return DocListCast(source.data); - } public static LayoutString(fieldKey?: string) { return FieldView.LayoutString(PresBox, fieldKey); } - //public static Instance: PresentationView; public static Instance: PresBox; + //Keeping track of the doc for the current presentation -- bcz: keeping a list of current presentations shouldn't be needed. Let users create them, store them, as they see fit. + @computed get curPresentation() { return this.props.Document; } + //Mapping from presentation ids to a list of doc that represent a group @observable groupMappings: Map = new Map(); //mapping from docs to their rendered component @@ -59,9 +56,6 @@ export class PresBox extends React.Component { //FieldViewProps? //back-up so that presentation stays the way it's when refreshed @observable presGroupBackUp: Doc = new Doc(); @observable presButtonBackUp: Doc = new Doc(); - - //Keeping track of the doc for the current presentation - @observable curPresentation: Doc = new Doc(); //Mapping of guids to presentations. @observable presentationsMapping: Map = new Map(); //Mapping of presentations to guid, so that select option values can be given. @@ -77,12 +71,14 @@ export class PresBox extends React.Component { //FieldViewProps? @observable opacity = 1; @observable persistOpacity = true; @observable labelOpacity = 0; + @observable presMode = false; + + @observable public static CurrentPresentation: PresBox; //initilize class variables - constructor(props: FieldViewProps) { //FieldViewProps? + constructor(props: FieldViewProps) { super(props); - //PresentationView.Instance = this; - PresBox.Instance = this; + runInAction(() => PresBox.CurrentPresentation = this); } @action @@ -94,32 +90,10 @@ export class PresBox extends React.Component { //FieldViewProps? } } - //The first lifecycle function that gets called to set up the current presentation. - async componentWillMount() { - this.presentationDocs.forEach(async (doc, index: number) => { - - //For each presentation received from mainContainer, a mapping is created. - let curDoc: Doc = await doc; - let newGuid = Utils.GenerateGuid(); - this.presentationsKeyMapping.set(curDoc, newGuid); - this.presentationsMapping.set(newGuid, curDoc); - - //The Presentation at first index gets set as default start presentation - if (index === 0) { - runInAction(() => this.currentSelectedPresValue = newGuid); - runInAction(() => this.curPresentation = curDoc); - } - }); - } - - //Second lifecycle function that gets called when component mounts. It makes sure to + //Second lifecycle function that gets called when component mounts. It makes sure toS //get the back-up information from previous session for the current presentation. async componentDidMount() { - let docAtZero = await this.presentationDocs[0]; - runInAction(() => this.curPresentation = docAtZero); - this.setPresentationBackUps(); - } @@ -212,7 +186,6 @@ export class PresBox extends React.Component { //FieldViewProps? //observable means render is re-called every time variable is changed @observable collapsed: boolean = false; - closePresentation = action(() => this.curPresentation.width = 0); next = async () => { const current = NumCast(this.curPresentation.selectedDoc); //asking to get document at current index @@ -556,23 +529,6 @@ export class PresBox extends React.Component { //FieldViewProps? runInAction(() => this.groupMappings = new Map()); } - /** - * Adds a document to the presentation view - **/ - @undoBatch - @action - public PinDoc(doc: Doc) { - //add this new doc to props.Document - const data = Cast(this.curPresentation.data, listSpec(Doc)); - if (data) { - data.push(doc); - } else { - this.curPresentation.data = new List([doc]); - } - - this.toggle(true); - } - //Function that sets the store of the children docs. @action setChildrenDocs = (docList: Doc[]) => { @@ -648,72 +604,15 @@ export class PresBox extends React.Component { //FieldViewProps? } - /** - * The function that is called to add a new presentation to the presentationView. - * It sets up te mappings and local copies of it. Resets the groupings and presentation. - * Makes the new presentation current selected, and retrieve the back-Ups if present. - */ - @action - addNewPresentation = (presTitle: string) => { - //creating a new presentation doc - let newPresentationDoc = Docs.Create.TreeDocument([], { title: presTitle }); - let presDocs = Cast(Doc.GetProto(this.props.Document).data, listSpec(Doc)); - presDocs && presDocs.push(newPresentationDoc); - - //setting that new doc as current - this.curPresentation = newPresentationDoc; - - //storing the doc in local copies for easier access - let newGuid = Utils.GenerateGuid(); - this.presentationsMapping.set(newGuid, newPresentationDoc); - this.presentationsKeyMapping.set(newPresentationDoc, newGuid); - - //resetting the previous presentation's actions so that new presentation can be loaded. - this.resetGroupIds(); - this.resetPresentation(); - this.presElementsMappings = new Map(); - this.currentSelectedPresValue = newGuid; - this.setPresentationBackUps(); - - } - - /** - * The function that is called to change the current selected presentation. - * Changes the presentation, also resetting groupings and presentation in process. - * Plus retrieving the backUps for the newly selected presentation. - */ - @action - getSelectedPresentation = (e: React.ChangeEvent) => { - //get the guid of the selected presentation - let selectedGuid = e.target.value; - //set that as current presentation - this.curPresentation = this.presentationsMapping.get(selectedGuid)!; - - //reset current Presentations local things so that new one can be loaded - this.resetGroupIds(); - this.resetPresentation(); - this.presElementsMappings = new Map(); - this.currentSelectedPresValue = selectedGuid; - this.setPresentationBackUps(); - - - } /** * The function that is called to render either select for presentations, or title inputting. */ renderSelectOrPresSelection = () => { - let presentationList = this.presentationDocs; if (this.PresTitleInputOpen || this.PresTitleChangeOpen) { return this.titleInputElement = e!} type="text" className="presentationView-title" placeholder="Enter Name!" onKeyDown={this.submitPresentationTitle} />; } else { - return ; + return (null); } } @@ -726,87 +625,12 @@ export class PresBox extends React.Component { //FieldViewProps? if (e.keyCode === 13) { let presTitle = this.titleInputElement!.value; this.titleInputElement!.value = ""; - if (this.PresTitleInputOpen) { - if (presTitle === "") { - presTitle = "Presentation"; - } - this.PresTitleInputOpen = false; - this.addNewPresentation(presTitle); - } else if (this.PresTitleChangeOpen) { + if (this.PresTitleChangeOpen) { this.PresTitleChangeOpen = false; this.changePresentationTitle(presTitle); } } } - - /** - * The function that is called to remove a presentation from all its copies, and the main Container's - * list. Sets up the next presentation as current. - */ - @action - removePresentation = async () => { - if (this.presentationsMapping.size !== 1) { - let presentationList = this.presentationDocs; - let batch = UndoManager.StartBatch("presRemoval"); - - //getting the presentation that will be removed - let removedDoc = this.presentationsMapping.get(this.currentSelectedPresValue!); - //that presentation is removed - presentationList!.splice(presentationList.indexOf(removedDoc!), 1); - - //its mappings are removed from local copies - this.presentationsKeyMapping.delete(removedDoc!); - this.presentationsMapping.delete(this.currentSelectedPresValue!); - - //the next presentation is set as current - let remainingPresentations = this.presentationsMapping.values(); - let nextDoc = remainingPresentations.next().value; - this.curPresentation = nextDoc; - - - //Storing these for being able to undo changes - let curGuid = this.currentSelectedPresValue!; - let curPresStatus = this.presStatus; - - //resetting the groups and presentation actions so that next presentation gets loaded - this.resetGroupIds(); - this.resetPresentation(); - this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString(); - this.setPresentationBackUps(); - - //Storing for undo - let currentGroups = this.groupMappings; - let curPresElemMapping = this.presElementsMappings; - - //Event to undo actions that are not related to doc directly, aka. local things - UndoManager.AddEvent({ - undo: action(() => { - this.curPresentation = removedDoc!; - this.presentationsMapping.set(curGuid, removedDoc!); - this.presentationsKeyMapping.set(removedDoc!, curGuid); - this.currentSelectedPresValue = curGuid; - - this.presStatus = curPresStatus; - this.groupMappings = currentGroups; - this.presElementsMappings = curPresElemMapping; - this.setPresentationBackUps(); - - }), - redo: action(() => { - this.curPresentation = nextDoc; - this.presStatus = false; - this.presentationsKeyMapping.delete(removedDoc!); - this.presentationsMapping.delete(curGuid); - this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString(); - this.setPresentationBackUps(); - - }), - }); - - batch.end(); - } - } - /** * The function that is called to change title of presentation to what user entered. */ @@ -822,26 +646,23 @@ export class PresBox extends React.Component { //FieldViewProps? this.presElementsMappings.set(keyDoc, elem); } + specificContextMenu = (e: React.MouseEvent): void => { + ContextMenu.Instance.addItem({ description: "Make Current Presentation", event: action(() => Doc.UserDoc().curPresentation = this.props.Document), icon: "asterisk" }); + ContextMenu.Instance.addItem({ + description: "Toggle Minimized Mode", event: action(() => { + this.presMode = !this.presMode; + if (this.presMode) this.props.addDocTab && this.props.addDocTab(this.props.Document, this.props.DataDoc, "close"); + }), icon: "asterisk" + }); + } render() { let width = "100%"; //NumCast(this.curPresentation.width) - return ( -
      !this.persistOpacity && (this.opacity = 1))} onPointerLeave={action(() => !this.persistOpacity && (this.opacity = 0.4))} style={{ width: width, overflow: "hidden", opacity: this.opacity, transition: "0.7s opacity ease", pointerEvents: "all" }}> -
      - {this.renderSelectOrPresSelection()} - {/**this.closePresentation CLICK does not work?! Also without the*/} - - - -
      +
      !this.persistOpacity && (this.opacity = 1))} onContextMenu={this.specificContextMenu} + onPointerLeave={action(() => !this.persistOpacity && (this.opacity = 0.4))} + style={{ width: width, opacity: this.opacity, }}>
      {this.renderPlayPauseButton()} diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx index 7ba7b6d14..6f77a0a5b 100644 --- a/src/client/views/pdf/Annotation.tsx +++ b/src/client/views/pdf/Annotation.tsx @@ -6,10 +6,10 @@ import { Id } from "../../../new_fields/FieldSymbols"; import { List } from "../../../new_fields/List"; import { Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types"; import { DocumentManager } from "../../util/DocumentManager"; -import { PresentationView } from "../presentationview/PresentationView"; import PDFMenu from "./PDFMenu"; import "./Annotation.scss"; import { scale } from "./PDFViewer"; +import { PresBox } from "../nodes/PresBox"; interface IAnnotationProps { anno: Doc; @@ -18,6 +18,7 @@ interface IAnnotationProps { fieldExtensionDoc: Doc; scrollTo?: (n: number) => void; addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; + pinToPres: (document: Doc) => void; } export default class Annotation extends React.Component { @@ -37,6 +38,7 @@ interface IRegionAnnotationProps { fieldExtensionDoc: Doc; scrollTo?: (n: number) => void; addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; + pinToPres: (document: Doc) => void; document: Doc; } @@ -81,7 +83,7 @@ class RegionAnnotation extends React.Component { pinToPres = () => { let group = FieldValue(Cast(this.props.document.group, Doc)); - group && PresentationView.Instance.PinDoc(group); + group && this.props.pinToPres(group); } @action diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 08674720d..258e218f0 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -36,6 +36,7 @@ interface IViewerProps { active: () => boolean; setPanY?: (n: number) => void; addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; + pinToPres: (document: Doc) => void; addDocument?: (doc: Doc, allowDuplicates?: boolean) => boolean; } diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index d98b66324..912970a50 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -15,7 +15,7 @@ import { SelectionManager } from "../../util/SelectionManager"; import { ContextMenu } from "../ContextMenu"; import { Transform } from "../../util/Transform"; import { DocumentView } from "../nodes/DocumentView"; -import { DocumentType } from "../../documents/Documents"; +import { DocumentType } from "../../documents/DocumentTypes"; import React = require("react"); @@ -839,6 +839,7 @@ export default class PresentationElement extends React.Component 350} PanelHeight={() => 90} diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx index e853c4070..288ade042 100644 --- a/src/client/views/presentationview/PresentationList.tsx +++ b/src/client/views/presentationview/PresentationList.tsx @@ -6,10 +6,7 @@ import { Utils } from "../../../Utils"; import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc"; import { NumCast, StrCast } from "../../../new_fields/Types"; import { Id } from "../../../new_fields/FieldSymbols"; -import PresentationElement, { buttonIndex } from "./PresentationElement"; -import "../../../new_fields/Doc"; - - +import PresentationElement from "./PresentationElement"; interface PresListProps { diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss index 65b09c833..4f5858f20 100644 --- a/src/client/views/presentationview/PresentationView.scss +++ b/src/client/views/presentationview/PresentationView.scss @@ -7,7 +7,9 @@ top: 0; bottom: 0; letter-spacing: 2px; - + overflow: hidden; + transition: 0.7s opacity ease; + pointer-events: all; } .presentationView-item { diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx deleted file mode 100644 index bea70f00b..000000000 --- a/src/client/views/presentationview/PresentationView.tsx +++ /dev/null @@ -1,994 +0,0 @@ -import { observer } from "mobx-react"; -import React = require("react"); -import { observable, action, runInAction, reaction, autorun } from "mobx"; -import "./PresentationView.scss"; -import { DocumentManager } from "../../util/DocumentManager"; -import { Utils } from "../../../Utils"; -import { Doc, DocListCast, DocListCastAsync, WidthSym } from "../../../new_fields/Doc"; -import { listSpec } from "../../../new_fields/Schema"; -import { Cast, NumCast, FieldValue, PromiseValue, StrCast, BoolCast } from "../../../new_fields/Types"; -import { Id } from "../../../new_fields/FieldSymbols"; -import { List } from "../../../new_fields/List"; -import PresentationElement, { buttonIndex } from "./PresentationElement"; -import { library } from '@fortawesome/fontawesome-svg-core'; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus, faEdit, faEye } from '@fortawesome/free-solid-svg-icons'; -import { Docs } from "../../documents/Documents"; -import { undoBatch, UndoManager } from "../../util/UndoManager"; -import PresentationViewList from "./PresentationList"; -import PresModeMenu from "./PresentationModeMenu"; -import { CollectionDockingView } from "../collections/CollectionDockingView"; - -library.add(faArrowLeft); -library.add(faArrowRight); -library.add(faPlay); -library.add(faStop); -library.add(faPlus); -library.add(faTimes); -library.add(faMinus); -library.add(faEdit); -library.add(faEye); - - -export interface PresViewProps { - Documents: List; -} - -const expandedWidth = 400; -const presMinWidth = 300; - -@observer -export class PresentationView extends React.Component { - public static Instance: PresentationView; - - //Mapping from presentation ids to a list of doc that represent a group - @observable groupMappings: Map = new Map(); - //mapping from docs to their rendered component - @observable presElementsMappings: Map = new Map(); - //variable that holds all the docs in the presentation - @observable childrenDocs: Doc[] = []; - //variable to hold if presentation is started - @observable presStatus: boolean = false; - //back-up so that presentation stays the way it's when refreshed - @observable presGroupBackUp: Doc = new Doc(); - @observable presButtonBackUp: Doc = new Doc(); - - //Keeping track of the doc for the current presentation - @observable curPresentation: Doc = new Doc(); - //Mapping of guids to presentations. - @observable presentationsMapping: Map = new Map(); - //Mapping of presentations to guid, so that select option values can be given. - @observable presentationsKeyMapping: Map = new Map(); - //Variable to keep track of guid of the current presentation - @observable currentSelectedPresValue: string | undefined; - //A flag to keep track if title input is open, which is used in rendering. - @observable PresTitleInputOpen: boolean = false; - //Variable that holds reference to title input, so that new presentations get titles assigned. - @observable titleInputElement: HTMLInputElement | undefined; - @observable PresTitleChangeOpen: boolean = false; - @observable presMode: boolean = false; - - - @observable opacity = 1; - @observable persistOpacity = true; - @observable labelOpacity = 0; - - //initilize class variables - constructor(props: PresViewProps) { - super(props); - PresentationView.Instance = this; - } - - @action - toggle = (forcedValue: boolean | undefined) => { - if (forcedValue !== undefined) { - this.curPresentation.width = forcedValue ? expandedWidth : 0; - } else { - this.curPresentation.width = this.curPresentation.width === expandedWidth ? 0 : expandedWidth; - } - } - - //The first lifecycle function that gets called to set up the current presentation. - async componentWillMount() { - - this.props.Documents.forEach(async (doc, index: number) => { - - //For each presentation received from mainContainer, a mapping is created. - let curDoc: Doc = await doc; - let newGuid = Utils.GenerateGuid(); - this.presentationsKeyMapping.set(curDoc, newGuid); - this.presentationsMapping.set(newGuid, curDoc); - - //The Presentation at first index gets set as default start presentation - if (index === 0) { - runInAction(() => this.currentSelectedPresValue = newGuid); - runInAction(() => this.curPresentation = curDoc); - } - }); - } - - //Second lifecycle function that gets called when component mounts. It makes sure to - //get the back-up information from previous session for the current presentation. - async componentDidMount() { - let docAtZero = await this.props.Documents[0]; - runInAction(() => this.curPresentation = docAtZero); - - this.setPresentationBackUps(); - - } - - - /** - * The function that retrieves the backUps for the current Presentation if present, - * otherwise initializes. - */ - setPresentationBackUps = async () => { - //getting both backUp documents - - let castedGroupBackUp = Cast(this.curPresentation.presGroupBackUp, Doc); - let castedButtonBackUp = Cast(this.curPresentation.presButtonBackUp, Doc); - //if instantiated before - if (castedGroupBackUp instanceof Promise) { - castedGroupBackUp.then(doc => { - let toAssign = doc ? doc : new Doc(); - this.curPresentation.presGroupBackUp = toAssign; - runInAction(() => this.presGroupBackUp = toAssign); - if (doc) { - if (toAssign[Id] === doc[Id]) { - this.retrieveGroupMappings(); - } - } - }); - - //if never instantiated a store doc yet - } else if (castedGroupBackUp instanceof Doc) { - let castedDoc: Doc = await castedGroupBackUp; - runInAction(() => this.presGroupBackUp = castedDoc); - this.retrieveGroupMappings(); - } else { - runInAction(() => { - let toAssign = new Doc(); - this.presGroupBackUp = toAssign; - this.curPresentation.presGroupBackUp = toAssign; - - }); - - } - //if instantiated before - if (castedButtonBackUp instanceof Promise) { - castedButtonBackUp.then(doc => { - let toAssign = doc ? doc : new Doc(); - this.curPresentation.presButtonBackUp = toAssign; - runInAction(() => this.presButtonBackUp = toAssign); - }); - - //if never instantiated a store doc yet - } else if (castedButtonBackUp instanceof Doc) { - let castedDoc: Doc = await castedButtonBackUp; - runInAction(() => this.presButtonBackUp = castedDoc); - - } else { - runInAction(() => { - let toAssign = new Doc(); - this.presButtonBackUp = toAssign; - this.curPresentation.presButtonBackUp = toAssign; - }); - - } - - - //storing the presentation status,ie. whether it was stopped or playing - let presStatusBackUp = BoolCast(this.curPresentation.presStatus); - runInAction(() => this.presStatus = presStatusBackUp); - } - - /** - * This is the function that is called to retrieve the groups that have been stored and - * push them to the groupMappings. - */ - retrieveGroupMappings = async () => { - let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); - if (castedGroupDocs !== undefined) { - castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { - let castedGrouping = await DocListCastAsync(groupDoc.grouping); - let castedKey = StrCast(groupDoc.presentIdStore, null); - if (castedGrouping) { - castedGrouping.forEach((doc: Doc) => { - doc.presentId = castedKey; - }); - } - if (castedGrouping !== undefined && castedKey !== undefined) { - this.groupMappings.set(castedKey, castedGrouping); - } - }); - } - } - - //observable means render is re-called every time variable is changed - @observable - collapsed: boolean = false; - closePresentation = action(() => this.curPresentation.width = 0); - next = async () => { - const current = NumCast(this.curPresentation.selectedDoc); - //asking to get document at current index - let docAtCurrentNext = await this.getDocAtIndex(current + 1); - if (docAtCurrentNext === undefined) { - return; - } - //asking for it's presentation id - let curNextPresId = StrCast(docAtCurrentNext.presentId); - let nextSelected = current + 1; - - //if curDoc is in a group, selection slides until last one, if not it's next one - if (this.groupMappings.has(curNextPresId)) { - let currentsArray = this.groupMappings.get(StrCast(docAtCurrentNext.presentId))!; - nextSelected = current + currentsArray.length - currentsArray.indexOf(docAtCurrentNext); - - //end of grup so go beyond - if (nextSelected === current) nextSelected = current + 1; - } - - this.gotoDocument(nextSelected, current); - - } - back = async () => { - const current = NumCast(this.curPresentation.selectedDoc); - //requesting for the doc at current index - let docAtCurrent = await this.getDocAtIndex(current); - if (docAtCurrent === undefined) { - return; - } - - //asking for its presentation id. - let curPresId = StrCast(docAtCurrent.presentId); - let prevSelected = current - 1; - let zoomOut: boolean = false; - - //checking if this presentation id is mapped to a group, if so chosing the first element in group - if (this.groupMappings.has(curPresId)) { - let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!; - prevSelected = current - currentsArray.length + (currentsArray.length - currentsArray.indexOf(docAtCurrent)) - 1; - //end of grup so go beyond - if (prevSelected === current) prevSelected = current - 1; - - //checking if any of the group members had used zooming in - currentsArray.forEach((doc: Doc) => { - //let presElem: PresentationElement | undefined = this.presElementsMappings.get(doc); - if (this.presElementsMappings.get(doc)!.selected[buttonIndex.Show]) { - zoomOut = true; - return; - } - }); - - } - - // if a group set that flag to zero or a single element - //If so making sure to zoom out, which goes back to state before zooming action - if (current > 0) { - if (zoomOut || this.presElementsMappings.get(docAtCurrent)!.selected[buttonIndex.Show]) { - let prevScale = NumCast(this.childrenDocs[prevSelected].viewScale, null); - let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[current]); - if (prevScale !== undefined) { - if (prevScale !== curScale) { - DocumentManager.Instance.zoomIntoScale(docAtCurrent, prevScale); - } - } - } - } - this.gotoDocument(prevSelected, current); - - } - - /** - * This is the method that checks for the actions that need to be performed - * after the document has been presented, which involves 3 button options: - * Hide Until Presented, Hide After Presented, Fade After Presented - */ - showAfterPresented = (index: number) => { - this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => { - let selectedButtons: boolean[] = presElem.selected; - //the order of cases is aligned based on priority - if (selectedButtons[buttonIndex.HideTillPressed]) { - if (this.childrenDocs.indexOf(key) <= index) { - key.opacity = 1; - } - } - if (selectedButtons[buttonIndex.HideAfter]) { - if (this.childrenDocs.indexOf(key) < index) { - key.opacity = 0; - } - } - if (selectedButtons[buttonIndex.FadeAfter]) { - if (this.childrenDocs.indexOf(key) < index) { - key.opacity = 0.5; - } - } - }); - } - - /** - * This is the method that checks for the actions that need to be performed - * before the document has been presented, which involves 3 button options: - * Hide Until Presented, Hide After Presented, Fade After Presented - */ - hideIfNotPresented = (index: number) => { - this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => { - let selectedButtons: boolean[] = presElem.selected; - - //the order of cases is aligned based on priority - - if (selectedButtons[buttonIndex.HideAfter]) { - if (this.childrenDocs.indexOf(key) >= index) { - key.opacity = 1; - } - } - if (selectedButtons[buttonIndex.FadeAfter]) { - if (this.childrenDocs.indexOf(key) >= index) { - key.opacity = 1; - } - } - if (selectedButtons[buttonIndex.HideTillPressed]) { - if (this.childrenDocs.indexOf(key) > index) { - key.opacity = 0; - } - } - }); - } - - /** - * This method makes sure that cursor navigates to the element that - * has the option open and last in the group. If not in the group, and it has - * te option open, navigates to that element. - */ - navigateToElement = async (curDoc: Doc, fromDoc: number) => { - let docToJump: Doc = curDoc; - let curDocPresId = StrCast(curDoc.presentId, null); - let willZoom: boolean = false; - - //checking if in group - if (curDocPresId !== undefined) { - if (this.groupMappings.has(curDocPresId)) { - let currentDocGroup = this.groupMappings.get(curDocPresId)!; - currentDocGroup.forEach((doc: Doc, index: number) => { - let selectedButtons: boolean[] = this.presElementsMappings.get(doc)!.selected; - if (selectedButtons[buttonIndex.Navigate]) { - docToJump = doc; - willZoom = false; - } - if (selectedButtons[buttonIndex.Show]) { - docToJump = doc; - willZoom = true; - } - }); - } - - } - //docToJump stayed same meaning, it was not in the group or was the last element in the group - if (docToJump === curDoc) { - //checking if curDoc has navigation open - let curDocButtons = this.presElementsMappings.get(curDoc)!.selected; - if (curDocButtons[buttonIndex.Navigate]) { - this.jumpToTabOrRight(curDocButtons, curDoc); - } else if (curDocButtons[buttonIndex.Show]) { - let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]); - if (curDocButtons[buttonIndex.OpenRight]) { - //awaiting jump so that new scale can be found, since jumping is async - await DocumentManager.Instance.jumpToDocument(curDoc, true); - } else { - await DocumentManager.Instance.jumpToDocument(curDoc, true, undefined, doc => CollectionDockingView.Instance.AddTab(undefined, doc, undefined)); - } - - let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc); - curDoc.viewScale = newScale; - - //saving the scale user was on before zooming in - if (curScale !== 1) { - this.childrenDocs[fromDoc].viewScale = curScale; - } - - } - return; - } - let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]); - let curDocButtons = this.presElementsMappings.get(docToJump)!.selected; - - - if (curDocButtons[buttonIndex.OpenRight]) { - //awaiting jump so that new scale can be found, since jumping is async - await DocumentManager.Instance.jumpToDocument(docToJump, willZoom); - } else { - await DocumentManager.Instance.jumpToDocument(docToJump, willZoom, undefined, doc => CollectionDockingView.Instance.AddTab(undefined, doc, undefined)); - } - let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc); - curDoc.viewScale = newScale; - //saving the scale that user was on - if (curScale !== 1) { - this.childrenDocs[fromDoc].viewScale = curScale; - } - - } - - /** - * This function checks if right option is clicked on a presentation element, if not it does open it as a tab - * with help of CollectionDockingView. - */ - jumpToTabOrRight = (curDocButtons: boolean[], curDoc: Doc) => { - if (curDocButtons[buttonIndex.OpenRight]) { - DocumentManager.Instance.jumpToDocument(curDoc, false); - } else { - DocumentManager.Instance.jumpToDocument(curDoc, false, undefined, doc => CollectionDockingView.Instance.AddTab(undefined, doc, undefined)); - } - } - - /** - * Async function that supposedly return the doc that is located at given index. - */ - getDocAtIndex = async (index: number) => { - const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); - if (!list) { - return undefined; - } - if (index < 0 || index >= list.length) { - return undefined; - } - - this.curPresentation.selectedDoc = index; - //awaiting async call to finish to get Doc instance - const doc = await list[index]; - return doc; - } - - /** - * The function that removes a doc from a presentation. It also makes sure to - * do necessary updates to backUps and mappings stored locally. - */ - @action - public RemoveDoc = async (index: number) => { - const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); - if (value) { - let removedDoc = await value.splice(index, 1)[0]; - - //removing the Presentation Element stored for it - this.presElementsMappings.delete(removedDoc); - - let removedDocPresentId = StrCast(removedDoc.presentId); - - //Removing it from local mapping of the groups - if (this.groupMappings.has(removedDocPresentId)) { - let removedDocsGroup = this.groupMappings.get(removedDocPresentId); - if (removedDocsGroup) { - removedDocsGroup.splice(removedDocsGroup.indexOf(removedDoc), 1); - if (removedDocsGroup.length === 0) { - this.groupMappings.delete(removedDocPresentId); - } - } - } - - - let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc)); - if (castedList) { - for (let doc of castedList) { - let curDoc = await doc; - let curDocId = StrCast(curDoc.docId); - if (curDocId === removedDoc[Id]) { - castedList.splice(castedList.indexOf(curDoc), 1); - break; - - } - } - } - - //removing it from the backup of groups - let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); - if (castedGroupDocs) { - castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { - let castedKey = StrCast(groupDoc.presentIdStore, null); - if (castedKey === removedDocPresentId) { - let castedGrouping = await DocListCastAsync(groupDoc.grouping); - if (castedGrouping) { - castedGrouping.splice(castedGrouping.indexOf(removedDoc), 1); - if (castedGrouping.length === 0) { - castedGroupDocs!.splice(castedGroupDocs!.indexOf(groupDoc), 1); - } - } - } - - }); - - } - - - } - } - - /** - * An alternative remove method that removes a doc from presentation by its actual - * reference. - */ - public removeDocByRef = (doc: Doc) => { - let indexOfDoc = this.childrenDocs.indexOf(doc); - const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); - if (value) { - value.splice(indexOfDoc, 1)[0]; - } - if (indexOfDoc !== - 1) { - return true; - } - return false; - } - - //The function that is called when a document is clicked or reached through next or back. - //it'll also execute the necessary actions if presentation is playing. - @action - public gotoDocument = async (index: number, fromDoc: number) => { - const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); - if (!list) { - return; - } - if (index < 0 || index >= list.length) { - return; - } - this.curPresentation.selectedDoc = index; - - if (!this.presStatus) { - this.presStatus = true; - this.startPresentation(index); - } - - const doc = await list[index]; - if (this.presStatus) { - this.navigateToElement(doc, fromDoc); - this.hideIfNotPresented(index); - this.showAfterPresented(index); - } - - } - - //Function that is called to resetGroupIds, so that documents get new groupIds at - //first load, when presentation is changed. - resetGroupIds = async () => { - let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); - if (castedGroupDocs !== undefined) { - castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { - let castedGrouping = await DocListCastAsync(groupDoc.grouping); - if (castedGrouping) { - castedGrouping.forEach((doc: Doc) => { - doc.presentId = Utils.GenerateGuid(); - }); - } - }); - } - runInAction(() => this.groupMappings = new Map()); - } - - /** - * Adds a document to the presentation view - **/ - @undoBatch - @action - public PinDoc(doc: Doc) { - //add this new doc to props.Document - const data = Cast(this.curPresentation.data, listSpec(Doc)); - if (data) { - data.push(doc); - } else { - this.curPresentation.data = new List([doc]); - } - - this.toggle(true); - } - - //Function that sets the store of the children docs. - @action - setChildrenDocs = (docList: Doc[]) => { - this.childrenDocs = docList; - } - - //The function that is called to render the play or pause button depending on - //if presentation is running or not. - renderPlayPauseButton = () => { - if (this.presStatus) { - return ; - } else { - return ; - } - } - - //The function that starts or resets presentaton functionally, depending on status flag. - @action - startOrResetPres = async () => { - if (this.presStatus) { - this.resetPresentation(); - } else { - this.presStatus = true; - let startIndex = await this.findStartDocument(); - this.startPresentation(startIndex); - const current = NumCast(this.curPresentation.selectedDoc); - this.gotoDocument(startIndex, current); - } - this.curPresentation.presStatus = this.presStatus; - } - - /** - * This method is called to find the start document of presentation. So - * that when user presses on play, the correct presentation element will be - * selected. - */ - findStartDocument = async () => { - let docAtZero = await this.getDocAtIndex(0); - if (docAtZero === undefined) { - return 0; - } - let docAtZeroPresId = StrCast(docAtZero.presentId); - - if (this.groupMappings.has(docAtZeroPresId)) { - let group = this.groupMappings.get(docAtZeroPresId)!; - let lastDoc = group[group.length - 1]; - return this.childrenDocs.indexOf(lastDoc); - } else { - return 0; - } - } - - //The function that resets the presentation by removing every action done by it. It also - //stops the presentaton. - @action - resetPresentation = () => { - this.childrenDocs.forEach((doc: Doc) => { - doc.opacity = 1; - doc.viewScale = 1; - }); - this.curPresentation.selectedDoc = 0; - this.presStatus = false; - this.curPresentation.presStatus = this.presStatus; - if (this.childrenDocs.length === 0) { - return; - } - DocumentManager.Instance.zoomIntoScale(this.childrenDocs[0], 1); - } - - - //The function that starts the presentation, also checking if actions should be applied - //directly at start. - startPresentation = (startIndex: number) => { - let selectedButtons: boolean[]; - this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => { - selectedButtons = component.selected; - if (selectedButtons[buttonIndex.HideTillPressed]) { - if (this.childrenDocs.indexOf(doc) > startIndex) { - doc.opacity = 0; - } - - } - if (selectedButtons[buttonIndex.HideAfter]) { - if (this.childrenDocs.indexOf(doc) < startIndex) { - doc.opacity = 0; - } - } - if (selectedButtons[buttonIndex.FadeAfter]) { - if (this.childrenDocs.indexOf(doc) < startIndex) { - doc.opacity = 0.5; - } - } - - }); - - } - - /** - * The function that is called to add a new presentation to the presentationView. - * It sets up te mappings and local copies of it. Resets the groupings and presentation. - * Makes the new presentation current selected, and retrieve the back-Ups if present. - */ - @action - addNewPresentation = (presTitle: string) => { - //creating a new presentation doc - let newPresentationDoc = Docs.Create.TreeDocument([], { title: presTitle }); - this.props.Documents.push(newPresentationDoc); - - //setting that new doc as current - this.curPresentation = newPresentationDoc; - - //storing the doc in local copies for easier access - let newGuid = Utils.GenerateGuid(); - this.presentationsMapping.set(newGuid, newPresentationDoc); - this.presentationsKeyMapping.set(newPresentationDoc, newGuid); - - //resetting the previous presentation's actions so that new presentation can be loaded. - this.resetGroupIds(); - this.resetPresentation(); - this.presElementsMappings = new Map(); - this.currentSelectedPresValue = newGuid; - this.setPresentationBackUps(); - - } - - /** - * The function that is called to change the current selected presentation. - * Changes the presentation, also resetting groupings and presentation in process. - * Plus retrieving the backUps for the newly selected presentation. - */ - @action - getSelectedPresentation = (e: React.ChangeEvent) => { - //get the guid of the selected presentation - let selectedGuid = e.target.value; - //set that as current presentation - this.curPresentation = this.presentationsMapping.get(selectedGuid)!; - - //reset current Presentations local things so that new one can be loaded - this.resetGroupIds(); - this.resetPresentation(); - this.presElementsMappings = new Map(); - this.currentSelectedPresValue = selectedGuid; - this.setPresentationBackUps(); - - - } - - /** - * The function that is called to render either select for presentations, or title inputting. - */ - renderSelectOrPresSelection = () => { - let presentationList = DocListCast(this.props.Documents); - if (this.PresTitleInputOpen || this.PresTitleChangeOpen) { - return this.titleInputElement = e!} type="text" className="presentationView-title" placeholder="Enter Name!" onKeyDown={this.submitPresentationTitle} />; - } else { - return ; - } - } - - /** - * The function that is called on enter press of title input. It gives the - * new presentation the title user entered. If nothing is entered, gives a default title. - */ - @action - submitPresentationTitle = (e: React.KeyboardEvent) => { - if (e.keyCode === 13) { - let presTitle = this.titleInputElement!.value; - this.titleInputElement!.value = ""; - if (this.PresTitleInputOpen) { - if (presTitle === "") { - presTitle = "Presentation"; - } - this.PresTitleInputOpen = false; - this.addNewPresentation(presTitle); - } else if (this.PresTitleChangeOpen) { - this.PresTitleChangeOpen = false; - this.changePresentationTitle(presTitle); - } - } - } - - /** - * The function that is called to remove a presentation from all its copies, and the main Container's - * list. Sets up the next presentation as current. - */ - @action - removePresentation = async () => { - if (this.presentationsMapping.size !== 1) { - let presentationList = Cast(this.props.Documents, listSpec(Doc)); - let batch = UndoManager.StartBatch("presRemoval"); - - //getting the presentation that will be removed - let removedDoc = this.presentationsMapping.get(this.currentSelectedPresValue!); - //that presentation is removed - presentationList!.splice(presentationList!.indexOf(removedDoc!), 1); - - //its mappings are removed from local copies - this.presentationsKeyMapping.delete(removedDoc!); - this.presentationsMapping.delete(this.currentSelectedPresValue!); - - //the next presentation is set as current - let remainingPresentations = this.presentationsMapping.values(); - let nextDoc = remainingPresentations.next().value; - this.curPresentation = nextDoc; - - - //Storing these for being able to undo changes - let curGuid = this.currentSelectedPresValue!; - let curPresStatus = this.presStatus; - - //resetting the groups and presentation actions so that next presentation gets loaded - this.resetGroupIds(); - this.resetPresentation(); - this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString(); - this.setPresentationBackUps(); - - //Storing for undo - let currentGroups = this.groupMappings; - let curPresElemMapping = this.presElementsMappings; - - //Event to undo actions that are not related to doc directly, aka. local things - UndoManager.AddEvent({ - undo: action(() => { - this.curPresentation = removedDoc!; - this.presentationsMapping.set(curGuid, removedDoc!); - this.presentationsKeyMapping.set(removedDoc!, curGuid); - this.currentSelectedPresValue = curGuid; - - this.presStatus = curPresStatus; - this.groupMappings = currentGroups; - this.presElementsMappings = curPresElemMapping; - this.setPresentationBackUps(); - - }), - redo: action(() => { - this.curPresentation = nextDoc; - this.presStatus = false; - this.presentationsKeyMapping.delete(removedDoc!); - this.presentationsMapping.delete(curGuid); - this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString(); - this.setPresentationBackUps(); - - }), - }); - - batch.end(); - } - } - - /** - * The function that is called to change title of presentation to what user entered. - */ - @undoBatch - changePresentationTitle = (newTitle: string) => { - if (newTitle === "") { - return; - } - this.curPresentation.title = newTitle; - } - - /** - * On pointer down element that is catched on resizer of te - * presentation view. Sets up the event listeners to change the size with - * mouse move. - */ - _downsize = 0; - onPointerDown = (e: React.PointerEvent) => { - this._downsize = e.clientX; - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointerup", this.onPointerUp); - e.stopPropagation(); - e.preventDefault(); - } - /** - * Changes the size of the presentation view, with mouse move. - * Minimum size is set to 300, so that every button is visible. - */ - @action - onPointerMove = (e: PointerEvent) => { - - this.curPresentation.width = Math.max(window.innerWidth - e.clientX, presMinWidth); - } - - /** - * The method that is called on pointer up event. It checks if the button is just - * clicked so that presentation view will be closed. The way it's done is to check - * for minimal pixel change like 4, and accept it as it's just a click on top of the dragger. - */ - @action - onPointerUp = (e: PointerEvent) => { - if (Math.abs(e.clientX - this._downsize) < 4) { - let presWidth = NumCast(this.curPresentation.width); - if (presWidth - presMinWidth !== 0) { - this.curPresentation.width = 0; - } - if (presWidth === 0) { - this.curPresentation.width = presMinWidth; - } - } - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - } - - /** - * This function is a setter that opens up the - * presentation mode, by setting it's render flag - * to true. It also closes the presentation view. - */ - @action - openPresMode = () => { - if (!this.presMode) { - this.curPresentation.width = 0; - this.presMode = true; - } - } - - /** - * This function closes the presentation mode by setting its - * render flag to false. It also opens up the presentation view. - * By setting it to it's minimum size. - */ - @action - closePresMode = () => { - if (this.presMode) { - this.presMode = false; - this.curPresentation.width = presMinWidth; - } - - } - - /** - * Function that is called to render the presentation mode, depending on its flag. - */ - renderPresMode = () => { - if (this.presMode) { - return ; - } else { - return (null); - } - - } - - render() { - - let width = NumCast(this.curPresentation.width); - - return ( -
      -
      !this.persistOpacity && (this.opacity = 1))} onPointerLeave={action(() => !this.persistOpacity && (this.opacity = 0.4))} style={{ width: width, overflowY: "scroll", overflowX: "hidden", opacity: this.opacity, transition: "0.7s opacity ease" }}> -
      - {this.renderSelectOrPresSelection()} - - - - - -
      -
      - - {this.renderPlayPauseButton()} - -
      - - this.presElementsMappings.clear()} - /> - ) => { - this.persistOpacity = e.target.checked; - this.opacity = this.persistOpacity ? 1 : 0.4; - })} - checked={this.persistOpacity} - style={{ position: "absolute", bottom: 5, left: 5 }} - onPointerEnter={action(() => this.labelOpacity = 1)} - onPointerLeave={action(() => this.labelOpacity = 0)} - /> -

      opacity {this.persistOpacity ? "persistent" : "on focus"}

      -
      -
      - -
      - {this.renderPresMode()} - -
      - ); - } -} diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 4bb2ed55b..41fc49c2e 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -203,6 +203,7 @@ export class SearchItem extends React.Component { removeDocument={returnFalse} ScreenToLocalTransform={Transform.Identity} addDocTab={returnFalse} + pinToPres={returnFalse} renderDepth={1} PanelWidth={returnXDimension} PanelHeight={returnYDimension} diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index a8b616565..31f1f7a12 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -1,19 +1,18 @@ -import { observable, action, runInAction, ObservableMap } from "mobx"; -import { serializable, primitive, map, alias, list, PropSchema, custom } from "serializr"; -import { autoObject, SerializationHelper, Deserializable, afterDocDeserialize } from "../client/util/SerializationHelper"; +import { observable, ObservableMap, runInAction } from "mobx"; +import { alias, map, serializable } from "serializr"; import { DocServer } from "../client/DocServer"; -import { setter, getter, getField, updateFunction, deleteProperty, makeEditable, makeReadOnly } from "./util"; -import { Cast, ToConstructor, PromiseValue, FieldValue, NumCast, BoolCast, StrCast } from "./Types"; -import { listSpec } from "./Schema"; -import { ObjectField } from "./ObjectField"; -import { RefField, FieldId } from "./RefField"; -import { ToScriptString, SelfProxy, Parent, OnUpdate, Self, HandleUpdate, Update, Id, Copy } from "./FieldSymbols"; -import { scriptingGlobal, CompileScript, Scripting } from "../client/util/Scripting"; -import { List } from "./List"; import { DocumentType } from "../client/documents/DocumentTypes"; -import { ComputedField, ScriptField } from "./ScriptField"; +import { CompileScript, Scripting, scriptingGlobal } from "../client/util/Scripting"; +import { afterDocDeserialize, autoObject, Deserializable, SerializationHelper } from "../client/util/SerializationHelper"; +import { Copy, HandleUpdate, Id, OnUpdate, Parent, Self, SelfProxy, ToScriptString, Update } from "./FieldSymbols"; +import { List } from "./List"; +import { ObjectField } from "./ObjectField"; import { PrefetchProxy, ProxyField } from "./Proxy"; -//import { CurrentUserUtils } from "../server/authentication/models/current_user_utils"; +import { FieldId, RefField } from "./RefField"; +import { listSpec } from "./Schema"; +import { ComputedField } from "./ScriptField"; +import { BoolCast, Cast, FieldValue, NumCast, PromiseValue, StrCast, ToConstructor } from "./Types"; +import { deleteProperty, getField, getter, makeEditable, makeReadOnly, setter, updateFunction } from "./util"; export namespace Field { export function toKeyValueString(doc: Doc, key: string): string { @@ -72,6 +71,7 @@ export const HeightSym = Symbol("Height"); export const UpdatingFromServer = Symbol("UpdatingFromServer"); const CachedUpdates = Symbol("Cached updates"); + function fetchProto(doc: Doc) { const proto = doc.proto; if (proto instanceof Promise) { @@ -151,10 +151,10 @@ export class Doc extends RefField { } private [CachedUpdates]: { [key: string]: () => void | Promise } = {}; - + public static CurrentUserEmail: string = ""; public async [HandleUpdate](diff: any) { const set = diff.$set; - const sameAuthor = this.author === "foo@bar.com";//CurrentUserUtils.email; + const sameAuthor = this.author === Doc.CurrentUserEmail; if (set) { for (const key in set) { if (!key.startsWith("fields.")) { @@ -327,14 +327,12 @@ export namespace Doc { return Array.from(results); } - export function AddDocToList(target: Doc, key: string, doc: Doc, relativeTo?: Doc, before?: boolean, first?: boolean, allowDuplicates?: boolean) { + export function AddDocToList(target: Doc, key: string, doc: Doc, relativeTo?: Doc, before?: boolean, first?: boolean, allowDuplicates?: boolean, reversed?: boolean) { if (target[key] === undefined) { - console.log("target key undefined"); Doc.GetProto(target)[key] = new List(); } let list = Cast(target[key], listSpec(Doc)); if (list) { - console.log("has list"); if (allowDuplicates !== true) { let pind = list.reduce((l, d, i) => d instanceof Doc && Doc.AreProtosEqual(d, doc) ? i : l, -1); if (pind !== -1) { @@ -342,15 +340,18 @@ export namespace Doc { } } if (first) { - console.log("is first"); list.splice(0, 0, doc); } else { - console.log("not first"); let ind = relativeTo ? list.indexOf(relativeTo) : -1; - if (ind === -1) list.push(doc); - else list.splice(before ? ind : ind + 1, 0, doc); - console.log("index", ind); + if (ind === -1) { + if (reversed) list.splice(0, 0, doc); + else list.push(doc); + } + else { + if (reversed) list.splice(before ? (list.length - ind) + 1 : list.length - ind, 0, doc); + else list.splice(before ? ind : ind + 1, 0, doc); + } } } return true; @@ -595,10 +596,14 @@ export namespace Doc { }); } - export class DocBrush { + + export class DocData { + @observable _user_doc: Doc = undefined!; @observable BrushedDoc: ObservableMap = new ObservableMap(); } - const manager = new DocBrush(); + const manager = new DocData(); + export function UserDoc(): Doc { return manager._user_doc; } + export function SetUserDoc(doc: Doc) { manager._user_doc = doc; } export function IsBrushed(doc: Doc) { return manager.BrushedDoc.has(doc) || manager.BrushedDoc.has(Doc.GetDataDoc(doc)); } diff --git a/src/new_fields/util.ts b/src/new_fields/util.ts index c546e2aac..04194509c 100644 --- a/src/new_fields/util.ts +++ b/src/new_fields/util.ts @@ -7,7 +7,6 @@ import { ObjectField } from "./ObjectField"; import { action } from "mobx"; import { Parent, OnUpdate, Update, Id, SelfProxy, Self } from "./FieldSymbols"; import { DocServer } from "../client/DocServer"; -import { CurrentUserUtils } from "../server/authentication/models/current_user_utils"; function _readOnlySetter(): never { throw new Error("Documents can't be modified in read-only mode"); @@ -61,7 +60,7 @@ const _setterImpl = action(function (target: any, prop: string | symbol | number } const writeMode = DocServer.getFieldWriteMode(prop as string); const fromServer = target[UpdatingFromServer]; - const sameAuthor = fromServer || (receiver.author === CurrentUserUtils.email); + const sameAuthor = fromServer || (receiver.author === Doc.CurrentUserEmail); const writeToDoc = sameAuthor || (writeMode !== DocServer.WriteMode.LiveReadonly); const writeToServer = sameAuthor || (writeMode === DocServer.WriteMode.Default); if (writeToDoc) { diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index f36f5b73d..508655605 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -10,20 +10,17 @@ import { CollectionView } from "../../../client/views/collections/CollectionView import { Doc } from "../../../new_fields/Doc"; import { List } from "../../../new_fields/List"; import { listSpec } from "../../../new_fields/Schema"; -import { Cast, FieldValue, StrCast } from "../../../new_fields/Types"; -import { RouteStore } from "../../RouteStore"; +import { Cast, StrCast } from "../../../new_fields/Types"; import { Utils } from "../../../Utils"; +import { RouteStore } from "../../RouteStore"; export class CurrentUserUtils { - private static curr_email: string; private static curr_id: string; - @observable private static user_document: Doc; //TODO tfs: these should be temporary... private static mainDocId: string | undefined; - public static get email() { return this.curr_email; } public static get id() { return this.curr_id; } - @computed public static get UserDocument() { return this.user_document; } + @computed public static get UserDocument() { return Doc.UserDoc(); } public static get MainDocId() { return this.mainDocId; } public static set MainDocId(id: string | undefined) { this.mainDocId = id; } @@ -32,7 +29,7 @@ export class CurrentUserUtils { doc.viewType = CollectionViewType.Tree; doc.dropAction = "alias"; doc.layout = CollectionView.LayoutString(); - doc.title = this.email; + doc.title = Doc.CurrentUserEmail this.updateUserDocument(doc); doc.data = new List(); doc.gridGap = 5; @@ -58,6 +55,12 @@ export class CurrentUserUtils { recentlyClosed.boxShadow = "0 0"; doc.recentlyClosed = recentlyClosed; } + if (doc.curPresentation === undefined) { + const curPresentation = Docs.Create.PresDocument(new List(), { title: "Presentation" }); + curPresentation.excludeFromLibrary = true; + curPresentation.boxShadow = "0 0"; + doc.curPresentation = curPresentation; + } if (doc.sidebar === undefined) { const sidebar = Docs.Create.StackingDocument([doc.workspaces as Doc, doc, doc.recentlyClosed as Doc], { title: "Sidebar" }); sidebar.excludeFromLibrary = true; @@ -85,15 +88,15 @@ export class CurrentUserUtils { public static async loadUserDocument({ id, email }: { id: string, email: string }) { this.curr_id = id; - this.curr_email = email; + Doc.CurrentUserEmail = email; await rp.get(Utils.prepend(RouteStore.getUserDocumentId)).then(id => { if (id) { return DocServer.GetRefField(id).then(async field => { if (field instanceof Doc) { await this.updateUserDocument(field); - runInAction(() => this.user_document = field); + runInAction(() => Doc.SetUserDoc(field)); } else { - runInAction(() => this.user_document = this.createUserDocument(id)); + runInAction(() => Doc.SetUserDoc(this.createUserDocument(id))); } }); } else { -- cgit v1.2.3-70-g09d2 From 8225f3d2f6647b4163f7fe056af73c86f85c28d2 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 19 Aug 2019 17:00:59 -0400 Subject: cleaned up some buttons --- src/client/DocServer.ts | 2 + src/client/views/MainView.tsx | 45 +++------------------- .../views/collections/CollectionTreeView.tsx | 4 +- src/client/views/collections/CollectionView.tsx | 6 ++- src/client/views/nodes/DocumentView.tsx | 40 +++++++++++++------ 5 files changed, 43 insertions(+), 54 deletions(-) (limited to 'src') diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts index bf5168c22..2cec1046b 100644 --- a/src/client/DocServer.ts +++ b/src/client/DocServer.ts @@ -33,6 +33,8 @@ export namespace DocServer { LivePlayground = 3, } + export let AclsMode = WriteMode.Default; + const fieldWriteModes: { [field: string]: WriteMode } = {}; const docsWithUpdates: { [field: string]: Set } = {}; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 7b7a5542d..b27b91c12 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -1,5 +1,5 @@ import { IconName, library } from '@fortawesome/fontawesome-svg-core'; -import { faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faTable, faThumbtack, faTree, faUndoAlt } from '@fortawesome/free-solid-svg-icons'; +import { faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, configure, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -38,7 +38,6 @@ import { OverlayView } from './OverlayView'; import PDFMenu from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; import { FilterBox } from './search/FilterBox'; -import { DocumentManager } from '../util/DocumentManager'; import PresModeMenu from './presentationview/PresentationModeMenu'; import { PresBox } from './nodes/PresBox'; @@ -172,7 +171,7 @@ export class MainView extends React.Component { library.add(faCat); library.add(faFilePdf); library.add(faObjectGroup); - library.add(faTable); + library.add(faTv); library.add(faGlobeAsia); library.add(faUndoAlt); library.add(faRedoAlt); @@ -452,30 +451,15 @@ export class MainView extends React.Component { let btns: [React.RefObject, IconName, string, () => Doc][] = [ [React.createRef(), "object-group", "Add Collection", addColNode], - [React.createRef(), "table", "Add Presentation Trail", addPresNode], + [React.createRef(), "tv", "Add Presentation Trail", addPresNode], [React.createRef(), "globe-asia", "Add Website", addWebNode], [React.createRef(), "bolt", "Add Button", addButtonDocument], - // [React.createRef(), "clone", "Add Docking Frame", addDockingNode], + [React.createRef(), "file", "Add Document Dragger", addDragboxNode], [React.createRef(), "cloud-upload-alt", "Import Directory", addImportCollectionNode], //remove at some point in favor of addImportCollectionNode //[React.createRef(), "play", "Add Youtube Searcher", addYoutubeSearcher], - [React.createRef(), "file", "Add Document Dragger", addDragboxNode] ]; if (!ClientUtils.RELEASE) btns.unshift([React.createRef(), "cat", "Add Cat Image", addImageNode]); - const setWriteMode = (mode: DocServer.WriteMode) => { - console.log(DocServer.WriteMode[mode]); - const mode1 = mode; - const mode2 = mode === DocServer.WriteMode.Default ? mode : DocServer.WriteMode.Playground; - DocServer.setFieldWriteMode("x", mode1); - DocServer.setFieldWriteMode("y", mode1); - DocServer.setFieldWriteMode("width", mode1); - DocServer.setFieldWriteMode("height", mode1); - - DocServer.setFieldWriteMode("panX", mode2); - DocServer.setFieldWriteMode("panY", mode2); - DocServer.setFieldWriteMode("scale", mode2); - DocServer.setFieldWriteMode("viewType", mode2); - }; return < div id="add-nodes-menu" style={{ left: this.flyoutWidth + 20, bottom: 20 }} > @@ -484,7 +468,6 @@ export class MainView extends React.Component {
        • -
        • {btns.map(btn => @@ -493,13 +476,6 @@ export class MainView extends React.Component {
      )} -
      • - {ClientUtils.RELEASE ? [] : [ -
      • , -
      • , -
      • , -
      • - ]}
      • diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 077f3f941..70c0632d1 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -16,7 +16,7 @@ import { DragManager } from "../../util/DragManager"; import { undoBatch, UndoManager } from "../../util/UndoManager"; import { DocComponent } from "../DocComponent"; import { FieldViewProps } from "../nodes/FieldView"; -import { FormattedTextBox } from "../nodes/FormattedTextBox"; +import { FormattedTextBox, Blank } from "../nodes/FormattedTextBox"; import { CollectionPDFView } from "./CollectionPDFView"; import { CollectionVideoView } from "./CollectionVideoView"; import { CollectionView } from "./CollectionView"; @@ -206,7 +206,17 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T) { this.props.addDocument(Docs.Create.VideoDocument(url, { ...options, title: url, width: 400, height: 315, nativeWidth: 600, nativeHeight: 472.5 })); return; } - + let matches: RegExpExecArray | null; + if ((matches = /(https:\/\/)?docs\.google\.com\/document\/d\/([^\\]+)\/edit/g.exec(text)) !== null) { + let newBox = Docs.Create.TextDocument({ ...options, width: 600, height: 400, title: "Fetching title from Google Docs..." }); + let proto = newBox.proto!; + proto.autoHeight = true; + proto.googleDocId = matches[2]; + proto.data = "Fetching contents from Google Docs..."; + proto.backgroundColor = "#eeeeff"; + this.props.addDocument(newBox); + return; + } let batch = UndoManager.StartBatch("collection view drop"); let promises: Promise[] = []; // tslint:disable-next-line:prefer-for-of diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index bc057bb5f..406c2c4a6 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -1,6 +1,6 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEdit, faSmile, faTextHeight, faUpload } from '@fortawesome/free-solid-svg-icons'; -import { action, IReactionDisposer, observable, reaction, runInAction, computed, Lambda, trace } from "mobx"; +import { action, IReactionDisposer, observable, reaction, runInAction, computed, Lambda, trace, untracked } from "mobx"; import { observer } from "mobx-react"; import { baseKeymap } from "prosemirror-commands"; import { history } from "prosemirror-history"; @@ -47,6 +47,8 @@ library.add(faSmile, faTextHeight, faUpload); // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document // +export const Blank = `{"doc":{"type":"doc","content":[]},"selection":{"type":"text","anchor":0,"head":0}}`; + export interface FormattedTextBoxProps { isOverlay?: boolean; hideOnLeave?: boolean; @@ -84,7 +86,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe private _proxyReactionDisposer: Opt; private dropDisposer?: DragManager.DragDropDisposer; public get CurrentDiv(): HTMLDivElement { return this._ref.current!; } - private isOpening = false; + private isGoogleDocsUpdate = false; @observable _entered = false; @observable public static InputBoxOverlay?: FormattedTextBox = undefined; @@ -290,28 +292,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } } - componentWillMount() { - this.pollExportedCounterpart(); - } - - pollExportedCounterpart = async () => { - let dataDoc = Doc.GetProto(this.props.Document); - let documentId = StrCast(dataDoc[googleDocId]); - if (documentId) { - let exportState = await GoogleApiClientUtils.Docs.read({ documentId }); - if (exportState) { - let data = Cast(dataDoc.data, RichTextField); - if (data) { - this.isOpening = true; - dataDoc.data = new RichTextField(data[FromGoogleDocText](exportState)); - } - } else { - delete dataDoc[googleDocId]; - } - this.tryUpdateHeight(); - } - } - componentDidMount() { const config = { schema, @@ -347,23 +327,32 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe this._reactionDisposer = reaction( () => { const field = this.dataDoc ? Cast(this.dataDoc[this.props.fieldKey], RichTextField) : undefined; - return field ? field.Data : `{"doc":{"type":"doc","content":[]},"selection":{"type":"text","anchor":0,"head":0}}`; + return field ? field.Data : Blank; }, incomingValue => { if (this._editorView && !this._applyingChange) { let updatedState = JSON.parse(incomingValue); this._editorView.updateState(EditorState.fromJSON(config, updatedState)); // manually sets cursor selection at the end of the text on focus - if (this.isOpening) { - this.isOpening = false; + if (this.isGoogleDocsUpdate) { + this.isGoogleDocsUpdate = false; let end = this._editorView.state.doc.content.size - 1; updatedState.selection = { type: "text", anchor: end, head: end }; this._editorView.updateState(EditorState.fromJSON(config, updatedState)); } + this.tryUpdateHeight(); } } ); + reaction(() => this.props.Document.pullFromGoogleDocsTrigger, () => { + this.pullFromGoogleDoc(); + }); + + reaction(() => this.props.Document.pushToGoogleDocsTrigger, () => { + this.pushToGoogleDoc(); + }); + this._textReactionDisposer = reaction( () => this.extensionDoc, () => { @@ -391,6 +380,13 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe this.unhighlightSearchTerms(); } }, { fireImmediately: true }); + + ["pushToGoogleDocsTrigger", "pullFromGoogleDocsTrigger"].map(key => { + let doc = this.props.Document; + if (doc[key] === undefined) { + untracked(() => doc[key] = false); + } + }); } clipboardTextSerializer = (slice: Slice): string => { @@ -644,7 +640,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe this._undoTyping.end(); this._undoTyping = undefined; } - this.updateGoogleDoc(); } public _undoTyping?: UndoManager.Batch; onKeyPress = (e: React.KeyboardEvent) => { @@ -701,13 +696,13 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe if (!(googleDocId in Doc.GetProto(this.props.Document))) { ContextMenu.Instance.addItem({ description: "Export to Google Doc...", - event: this.updateGoogleDoc, + event: this.pushToGoogleDoc, icon: "upload" }); } } - updateGoogleDoc = () => { + pushToGoogleDoc = () => { let modes = GoogleApiClientUtils.Docs.WriteMode; let mode = modes.Replace; let reference: Opt = Cast(this.dataDoc[googleDocId], "string"); @@ -725,6 +720,25 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } } + pullFromGoogleDoc = async () => { + let dataDoc = Doc.GetProto(this.props.Document); + let documentId = StrCast(dataDoc[googleDocId]); + if (documentId) { + let exportState = await GoogleApiClientUtils.Docs.read({ documentId }); + if (exportState && exportState.body && exportState.title) { + let data = Cast(dataDoc.data, RichTextField); + if (data) { + this.isGoogleDocsUpdate = true; + dataDoc.data = new RichTextField(data[FromGoogleDocText](exportState.body)); + dataDoc.title = exportState.title; + } + } else { + delete dataDoc[googleDocId]; + } + } + } + + render() { let self = this; let style = this.props.isOverlay ? "scroll" : "hidden"; -- cgit v1.2.3-70-g09d2 From 7f6a802ad6306e55332cf2fd50084de80f935650 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Mon, 19 Aug 2019 20:46:26 -0400 Subject: a few link behaviors are done --- src/client/views/DocumentDecorations.tsx | 1 + src/client/views/SearchItem.tsx | 67 -------------------- src/client/views/nodes/LinkMenu.tsx | 1 + src/client/views/nodes/LinkMenuGroup.tsx | 10 ++- src/client/views/nodes/LinkMenuItem.tsx | 103 ++++++++++++++++++++++++++++++- 5 files changed, 112 insertions(+), 70 deletions(-) delete mode 100644 src/client/views/SearchItem.tsx (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index aae7f0d3f..3fdda00cf 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -685,6 +685,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> let linkButton = null; if (SelectionManager.SelectedDocuments().length > 0) { let selFirst = SelectionManager.SelectedDocuments()[0]; + let linkCount = LinkManager.Instance.getAllRelatedLinks(selFirst.props.Document).length; linkButton = ( { - - onClick = () => { - DocumentManager.Instance.jumpToDocument(this.props.doc, false); - } - - //needs help - // @computed get layout(): string { const field = Cast(this.props.doc[fieldKey], IconField); return field ? field.icon : "

      Error loading icon data

      "; } - - - public static DocumentIcon(layout: string) { - let button = layout.indexOf("PDFBox") !== -1 ? faFilePdf : - layout.indexOf("ImageBox") !== -1 ? faImage : - layout.indexOf("Formatted") !== -1 ? faStickyNote : - layout.indexOf("Video") !== -1 ? faFilm : - layout.indexOf("Collection") !== -1 ? faObjectGroup : - faCaretUp; - return ; - } - onPointerEnter = (e: React.PointerEvent) => { - Doc.BrushDoc(this.props.doc); - } - onPointerLeave = (e: React.PointerEvent) => { - Doc.UnBrushDoc(this.props.doc); - } - - collectionRef = React.createRef(); - startDocDrag = () => { - let doc = this.props.doc; - const isProto = Doc.GetT(doc, "isPrototype", "boolean", true); - if (isProto) { - return Doc.MakeDelegate(doc); - } else { - return Doc.MakeAlias(doc); - } - } - render() { - return ( -
      -
      title: {this.props.doc.title}
      - {/*
      Type: {this.props.doc.layout}
      */} - {/*
      {SearchItem.DocumentIcon(this.layout)}
      */} -
      - ); - } -} \ No newline at end of file diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx index 1a4af04f8..fe7d88457 100644 --- a/src/client/views/nodes/LinkMenu.tsx +++ b/src/client/views/nodes/LinkMenu.tsx @@ -42,6 +42,7 @@ export class LinkMenu extends React.Component { linkItems.push( void; addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; + docView: DocumentView; + } @observer @@ -83,9 +85,13 @@ export class LinkMenuGroup extends React.Component { let groupItems = this.props.group.map(linkDoc => { let destination = LinkManager.Instance.getOppositeAnchor(linkDoc, this.props.sourceDoc); if (destination && this.props.sourceDoc) { - return ; + linkDoc={linkDoc} + sourceDoc={this.props.sourceDoc} + destinationDoc={destination} + showEditor={this.props.showEditor} />; } }); diff --git a/src/client/views/nodes/LinkMenuItem.tsx b/src/client/views/nodes/LinkMenuItem.tsx index a119eb39b..caae88943 100644 --- a/src/client/views/nodes/LinkMenuItem.tsx +++ b/src/client/views/nodes/LinkMenuItem.tsx @@ -13,6 +13,8 @@ import { LinkManager } from '../../util/LinkManager'; import { DragLinkAsDocument } from '../../util/DragManager'; import { CollectionDockingView } from '../collections/CollectionDockingView'; import { SelectionManager } from '../../util/SelectionManager'; +import { CollectionViewType } from '../collections/CollectionBaseView'; +import { DocumentView } from './DocumentView'; library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp); @@ -53,21 +55,117 @@ export class LinkMenuItem extends React.Component { if (this.props.destinationDoc === self.props.linkDoc.anchor2 && targetContext) { DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, async document => dockingFunc(document), undefined, targetContext!); + console.log("1") } else if (this.props.destinationDoc === self.props.linkDoc.anchor1 && sourceContext) { DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, document => dockingFunc(sourceContext!)); + console.log("2") } else if (DocumentManager.Instance.getDocumentView(jumpToDoc)) { DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, undefined, undefined, NumCast((this.props.destinationDoc === self.props.linkDoc.anchor2 ? self.props.linkDoc.anchor2Page : self.props.linkDoc.anchor1Page))); + console.log("3") + } else { DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, dockingFunc); + console.log("4") + + } + } + + // NOT DONE? + // col = collection the doc is in + // target = the document to center on + @undoBatch + openLinkColRight = ({ col, target }: { col: Doc, target: Doc }) => { + col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; + if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { + const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2; + const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2; + col.panX = newPanX; + col.panY = newPanY; } + CollectionDockingView.Instance.AddRightSplit(col, undefined); } + // DONE + // this opens the linked doc in a right split, NOT in its collection + @undoBatch + openLinkRight = () => { + let alias = Doc.MakeAlias(this.props.destinationDoc); + CollectionDockingView.Instance.AddRightSplit(alias, undefined); + SelectionManager.DeselectAll(); + + } + + // NOT DONE + // this is the standard "follow link" (jump to document) + // taken from follow link + @undoBatch + jumpToLink = async (shouldZoom: boolean = false) => { + let jumpToDoc = this.props.destinationDoc; + let pdfDoc = FieldValue(Cast(this.props.destinationDoc, Doc)); + if (pdfDoc) { + jumpToDoc = pdfDoc; + } + let proto = Doc.GetProto(this.props.linkDoc); + let targetContext = await Cast(proto.targetContext, Doc); + let sourceContext = await Cast(proto.sourceContext, Doc); + let self = this; + + + let dockingFunc = (document: Doc) => { this.props.addDocTab(document, undefined, "inTab"); SelectionManager.DeselectAll(); }; + + if (this.props.destinationDoc === self.props.linkDoc.anchor2 && targetContext) { + DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, async document => dockingFunc(document), undefined, targetContext!); + } + else if (this.props.destinationDoc === self.props.linkDoc.anchor1 && sourceContext) { + DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, document => dockingFunc(sourceContext!)); + } + else if (DocumentManager.Instance.getDocumentView(jumpToDoc)) { + DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, undefined, undefined, NumCast((this.props.destinationDoc === self.props.linkDoc.anchor2 ? self.props.linkDoc.anchor2Page : self.props.linkDoc.anchor1Page))); + + } + else { + DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, dockingFunc); + } + } + + // DONE + // opens link in new tab (not in a collection) + // this opens it full screen, do we need a separate full screen option? + @undoBatch + openLinkTab = () => { + let fullScreenAlias = Doc.MakeAlias(this.props.destinationDoc); + this.props.addDocTab(fullScreenAlias, undefined, "inTab"); + SelectionManager.DeselectAll(); + } + + //opens link in new tab in collection + // col = collection the doc is in + // target = the document to center on + @undoBatch + openLinkColTab = ({ col, target }: { col: Doc, target: Doc }) => { + + } + + // this will open a link next to the source doc + @undoBatch + openLinkInPlace = () => { + let alias = Doc.MakeAlias(this.props.destinationDoc); + let y = this.props.sourceDoc.y; + let x = this.props.sourceDoc.x; + + console.log(x, y); + } + + //set this to be the default link behavior, can be any of the above + private defaultLinkBehavior: any = this.openLinkInPlace; + onEdit = (e: React.PointerEvent): void => { e.stopPropagation(); this.props.showEditor(this.props.linkDoc); + SelectionManager.DeselectAll(); } renderMetadata = (): JSX.Element => { @@ -127,7 +225,10 @@ export class LinkMenuItem extends React.Component { {canExpand ?
      this.toggleShowMore()}>
      : <>}
      -
      + {/* Original */} + {/*
      */} + {/* New */} +
      {this._showMore ? this.renderMetadata() : <>} -- cgit v1.2.3-70-g09d2 From 43ea15b087ec923e9bd54001c7bd06c5e08efdb7 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 19 Aug 2019 22:02:21 -0400 Subject: presentation view fixes --- src/client/views/MainOverlayTextBox.tsx | 3 ++- src/client/views/collections/CollectionDockingView.tsx | 6 +++--- src/client/views/collections/CollectionSchemaView.tsx | 2 ++ src/client/views/collections/CollectionStackingView.tsx | 1 + src/client/views/nodes/PDFBox.tsx | 2 +- src/client/views/nodes/PresBox.tsx | 12 ++++++------ src/client/views/presentationview/PresentationView.scss | 2 +- src/client/views/search/IconBar.tsx | 1 - 8 files changed, 16 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx index b14a1e0ea..9fe435bc5 100644 --- a/src/client/views/MainOverlayTextBox.tsx +++ b/src/client/views/MainOverlayTextBox.tsx @@ -146,7 +146,8 @@ export class MainOverlayTextBox extends React.Component onClick={undefined} isSelected={returnTrue} select={emptyFunction} renderDepth={0} selectOnLoad={true} ContainingCollectionView={undefined} whenActiveChanged={emptyFunction} active={returnTrue} ContentScaling={returnOne} - ScreenToLocalTransform={this._textXf} PanelWidth={returnZero} PanelHeight={returnZero} focus={emptyFunction} addDocTab={this.addDocTab} outer_div={(tooltip: HTMLElement) => { this._tooltip = tooltip; this.updateTooltip(); }} /> + ScreenToLocalTransform={this._textXf} PanelWidth={returnZero} PanelHeight={returnZero} focus={emptyFunction} + pinToPres={returnZero} addDocTab={this.addDocTab} outer_div={(tooltip: HTMLElement) => { this._tooltip = tooltip; this.updateTooltip(); }} />
    diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 47dfeb169..dc0cbda0b 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -551,9 +551,6 @@ export class DockedFrameRenderer extends React.Component { @undoBatch @action public PinDoc(doc: Doc) { - if (doc.type === DocumentType.PRES) { - MainView.Instance.toggleMiniPresentation() - } //add this new doc to props.Document let curPres = Cast(CurrentUserUtils.UserDocument.curPresentation, Doc) as Doc; if (curPres) { @@ -563,6 +560,9 @@ export class DockedFrameRenderer extends React.Component { } else { curPres.data = new List([doc]); } + if (!DocumentManager.Instance.getDocumentView(curPres)) { + this.addDocTab(curPres, undefined, "onRight"); + } } } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 221908dd2..4008dea51 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -171,6 +171,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { active={this.props.active} whenActiveChanged={this.props.whenActiveChanged} addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} setPreviewScript={this.setPreviewScript} previewScript={this.previewScript} /> @@ -200,6 +201,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { active={this.props.active} onDrop={this.onDrop} addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} isSelected={this.props.isSelected} isFocused={this.isFocused} setFocused={this.setFocused} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 8e7fe9a82..1f7ef0689 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -155,6 +155,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { active={this.props.active} whenActiveChanged={this.props.whenActiveChanged} addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} setPreviewScript={emptyFunction} previewScript={undefined}> ; diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 6450cb826..18f82ff47 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -198,7 +198,7 @@ export class PDFBox extends DocComponent(PdfDocumen {this.settingsPanel()}
    ); diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index cc042e008..112d39c32 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -646,14 +646,13 @@ export class PresBox extends React.Component { //FieldViewProps? this.presElementsMappings.set(keyDoc, elem); } + minimize = undoBatch(action(() => { + this.presMode = true; + this.props.addDocTab && this.props.addDocTab(this.props.Document, this.props.DataDoc, "close"); + })); + specificContextMenu = (e: React.MouseEvent): void => { ContextMenu.Instance.addItem({ description: "Make Current Presentation", event: action(() => Doc.UserDoc().curPresentation = this.props.Document), icon: "asterisk" }); - ContextMenu.Instance.addItem({ - description: "Toggle Minimized Mode", event: action(() => { - this.presMode = !this.presMode; - if (this.presMode) this.props.addDocTab && this.props.addDocTab(this.props.Document, this.props.DataDoc, "close"); - }), icon: "asterisk" - }); } render() { @@ -667,6 +666,7 @@ export class PresBox extends React.Component { //FieldViewProps? {this.renderPlayPauseButton()} +
Date: Mon, 19 Aug 2019 22:15:34 -0400 Subject: removed multi target from pdf --- src/client/views/pdf/Page.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx index 5194ab71c..0de1777e6 100644 --- a/src/client/views/pdf/Page.tsx +++ b/src/client/views/pdf/Page.tsx @@ -151,6 +151,9 @@ export default class Page extends React.Component { PDFMenu.Instance.fadeOut(true); if (e.target && (e.target as any).parentElement === this._textLayer.current) { e.stopPropagation(); + if (!e.ctrlKey) { + this.props.sendAnnotations([], -1); + } } else { // set marquee x and y positions to the spatially transformed position @@ -161,14 +164,12 @@ export default class Page extends React.Component { } this._marqueeing = true; this._marquee.current && (this._marquee.current.style.opacity = "0.2"); + this.props.sendAnnotations([], -1); } document.removeEventListener("pointermove", this.onSelectStart); document.addEventListener("pointermove", this.onSelectStart); document.removeEventListener("pointerup", this.onSelectEnd); document.addEventListener("pointerup", this.onSelectEnd); - if (!e.ctrlKey) { - this.props.sendAnnotations([], -1); - } } } -- cgit v1.2.3-70-g09d2 From 00cecb10d80bad8d717cd06ddc4bf156664b9f2d Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Mon, 19 Aug 2019 22:39:56 -0400 Subject: fixed push pull UI --- .../apis/google_docs/GoogleApiClientUtils.ts | 3 + src/client/views/DocumentDecorations.tsx | 14 ++- src/client/views/nodes/FormattedTextBox.tsx | 122 +++++++++++---------- src/new_fields/RichTextField.ts | 8 +- 4 files changed, 81 insertions(+), 66 deletions(-) (limited to 'src') diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts index 55b4a76f8..821c52270 100644 --- a/src/client/apis/google_docs/GoogleApiClientUtils.ts +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -4,6 +4,9 @@ import { RouteStore } from "../../../server/RouteStore"; import { Opt } from "../../../new_fields/Doc"; import { isArray } from "util"; +export const Pulls = "googleDocsPullCount"; +export const Pushes = "googleDocsPushCount"; + export namespace GoogleApiClientUtils { export namespace Docs { diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 80d4ecb9b..797b43add 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -30,6 +30,7 @@ import { ObjectField } from '../../new_fields/ObjectField'; import { MetadataEntryMenu } from './MetadataEntryMenu'; import { ImageBox } from './nodes/ImageBox'; import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils'; +import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -626,7 +627,10 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (!canPush) return (null); return (
-
thisDoc.pushToGoogleDocsTrigger = !thisDoc.pushToGoogleDocsTrigger}> +
{ + DocumentDecorations.hasPushedHack = false; + thisDoc[Pushes] = NumCast(thisDoc[Pushes]) + 1; + }}>
@@ -639,13 +643,19 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (!canPull) return (null); return (
-
thisDoc.pullFromGoogleDocsTrigger = !thisDoc.pullFromGoogleDocsTrigger}> +
{ + DocumentDecorations.hasPulledHack = false; + thisDoc[Pulls] = NumCast(thisDoc[Pulls]) + 1; + }}>
); } + public static hasPushedHack = false; + public static hasPulledHack = false; + considerTooltip = () => { let thisDoc = SelectionManager.SelectedDocuments()[0].props.Document; let isTextDoc = thisDoc.data && thisDoc.data instanceof RichTextField; diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 406c2c4a6..d2eb71350 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -12,7 +12,7 @@ import { EditorView } from "prosemirror-view"; import { Doc, Opt, DocListCast } from "../../../new_fields/Doc"; import { Id, Copy } from '../../../new_fields/FieldSymbols'; import { List } from '../../../new_fields/List'; -import { RichTextField, ToGoogleDocText, FromGoogleDocText } from "../../../new_fields/RichTextField"; +import { RichTextField, ToPlainText, FromPlainText } from "../../../new_fields/RichTextField"; import { createSchema, listSpec, makeInterface } from "../../../new_fields/Schema"; import { BoolCast, Cast, NumCast, StrCast, DateCast } from "../../../new_fields/Types"; import { DocServer } from "../../DocServer"; @@ -30,16 +30,14 @@ import { ContextMenu } from "../../views/ContextMenu"; import { ContextMenuProps } from '../ContextMenuItem'; import { DocComponent } from "../DocComponent"; import { InkingControl } from "../InkingControl"; -import { Templates } from '../Templates'; import { FieldView, FieldViewProps } from "./FieldView"; import "./FormattedTextBox.scss"; import React = require("react"); -import { For } from 'babel-types'; import { DateField } from '../../../new_fields/DateField'; import { Utils } from '../../../Utils'; import { MainOverlayTextBox } from '../MainOverlayTextBox'; -import { GoogleApiClientUtils } from '../../apis/google_docs/GoogleApiClientUtils'; -import * as diff from "diff"; +import { GoogleApiClientUtils, Pulls, Pushes } from '../../apis/google_docs/GoogleApiClientUtils'; +import { DocumentDecorations } from '../DocumentDecorations'; library.add(faEdit); library.add(faSmile, faTextHeight, faUpload); @@ -84,6 +82,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe private _searchReactionDisposer?: Lambda; private _textReactionDisposer: Opt; private _proxyReactionDisposer: Opt; + private pullReactionDisposer: Opt; + private pushReactionDisposer: Opt; private dropDisposer?: DragManager.DragDropDisposer; public get CurrentDiv(): HTMLDivElement { return this._ref.current!; } private isGoogleDocsUpdate = false; @@ -345,13 +345,25 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } ); - reaction(() => this.props.Document.pullFromGoogleDocsTrigger, () => { - this.pullFromGoogleDoc(); - }); + this.pullReactionDisposer = reaction( + () => this.props.Document[Pulls], + () => { + if (!DocumentDecorations.hasPulledHack) { + DocumentDecorations.hasPulledHack = true; + this.pullFromGoogleDoc(); + } + } + ); - reaction(() => this.props.Document.pushToGoogleDocsTrigger, () => { - this.pushToGoogleDoc(); - }); + this.pushReactionDisposer = reaction( + () => this.props.Document[Pushes], + () => { + if (!DocumentDecorations.hasPushedHack) { + DocumentDecorations.hasPushedHack = true; + this.pushToGoogleDoc(); + } + } + ); this._textReactionDisposer = reaction( () => this.extensionDoc, @@ -380,13 +392,44 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe this.unhighlightSearchTerms(); } }, { fireImmediately: true }); + } - ["pushToGoogleDocsTrigger", "pullFromGoogleDocsTrigger"].map(key => { - let doc = this.props.Document; - if (doc[key] === undefined) { - untracked(() => doc[key] = false); - } - }); + pushToGoogleDoc = () => { + let modes = GoogleApiClientUtils.Docs.WriteMode; + let mode = modes.Replace; + let reference: Opt = Cast(this.dataDoc[googleDocId], "string"); + if (!reference) { + mode = modes.Insert; + reference = { + title: StrCast(this.dataDoc.title), + handler: id => this.dataDoc[googleDocId] = id + }; + } + if (this._editorView) { + let data = Cast(this.dataDoc.data, RichTextField); + let content = data ? data[ToPlainText]() : this._editorView.state.doc.textContent; + GoogleApiClientUtils.Docs.write({ reference, content, mode }); + } + } + + pullFromGoogleDoc = async () => { + let dataDoc = Doc.GetProto(this.props.Document); + let documentId = StrCast(dataDoc[googleDocId]); + if (documentId) { + let exportState = await GoogleApiClientUtils.Docs.read({ documentId }); + UndoManager.RunInBatch(() => { + if (exportState && exportState.body && exportState.title) { + let data = Cast(dataDoc.data, RichTextField); + if (data) { + this.isGoogleDocsUpdate = true; + dataDoc.data = new RichTextField(data[FromPlainText](exportState.body)); + dataDoc.title = exportState.title; + } + } else { + delete dataDoc[googleDocId]; + } + }, Pulls); + } } clipboardTextSerializer = (slice: Slice): string => { @@ -516,6 +559,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe this._reactionDisposer && this._reactionDisposer(); this._proxyReactionDisposer && this._proxyReactionDisposer(); this._textReactionDisposer && this._textReactionDisposer(); + this.pushReactionDisposer && this.pushReactionDisposer(); + this.pullReactionDisposer && this.pullReactionDisposer(); } onPointerDown = (e: React.PointerEvent): void => { @@ -693,49 +738,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe event: action(() => Doc.GetProto(this.props.Document).autoHeight = !BoolCast(this.props.Document.autoHeight)), icon: "expand-arrows-alt" }); ContextMenu.Instance.addItem({ description: "Text Funcs...", subitems: subitems, icon: "text-height" }); - if (!(googleDocId in Doc.GetProto(this.props.Document))) { - ContextMenu.Instance.addItem({ - description: "Export to Google Doc...", - event: this.pushToGoogleDoc, - icon: "upload" - }); - } - } - - pushToGoogleDoc = () => { - let modes = GoogleApiClientUtils.Docs.WriteMode; - let mode = modes.Replace; - let reference: Opt = Cast(this.dataDoc[googleDocId], "string"); - if (!reference) { - mode = modes.Insert; - reference = { - title: StrCast(this.dataDoc.title), - handler: id => this.dataDoc[googleDocId] = id - }; - } - if (this._editorView) { - let data = Cast(this.dataDoc.data, RichTextField); - let content = data ? data[ToGoogleDocText]() : this._editorView.state.doc.textContent; - GoogleApiClientUtils.Docs.write({ reference, content, mode }); - } - } - - pullFromGoogleDoc = async () => { - let dataDoc = Doc.GetProto(this.props.Document); - let documentId = StrCast(dataDoc[googleDocId]); - if (documentId) { - let exportState = await GoogleApiClientUtils.Docs.read({ documentId }); - if (exportState && exportState.body && exportState.title) { - let data = Cast(dataDoc.data, RichTextField); - if (data) { - this.isGoogleDocsUpdate = true; - dataDoc.data = new RichTextField(data[FromGoogleDocText](exportState.body)); - dataDoc.title = exportState.title; - } - } else { - delete dataDoc[googleDocId]; - } - } } diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts index ec08293e9..ab58329f9 100644 --- a/src/new_fields/RichTextField.ts +++ b/src/new_fields/RichTextField.ts @@ -4,8 +4,8 @@ import { Deserializable } from "../client/util/SerializationHelper"; import { Copy, ToScriptString } from "./FieldSymbols"; import { scriptingGlobal } from "../client/util/Scripting"; -export const ToGoogleDocText = Symbol("PlainText"); -export const FromGoogleDocText = Symbol("PlainText"); +export const ToPlainText = Symbol("PlainText"); +export const FromPlainText = Symbol("PlainText"); const delimiter = "\n"; const joiner = ""; @@ -28,7 +28,7 @@ export class RichTextField extends ObjectField { return `new RichTextField("${this.Data}")`; } - [ToGoogleDocText]() { + [ToPlainText]() { // Because we're working with plain text, just concatenate all paragraphs let content = JSON.parse(this.Data).doc.content; let paragraphs = content.filter((item: any) => item.type === "paragraph"); @@ -43,7 +43,7 @@ export class RichTextField extends ObjectField { return textParagraphs.join(joiner).trimEnd(delimiter); } - [FromGoogleDocText](plainText: string) { + [FromPlainText](plainText: string) { // Remap the text, creating blocks split on newlines let elements = plainText.split(delimiter); -- cgit v1.2.3-70-g09d2 From ffb4da00970f4146d7ce2c5022dabba193e763a3 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Mon, 19 Aug 2019 22:44:05 -0400 Subject: things won't highlight more than once --- src/client/views/nodes/DocumentView.tsx | 12 ++-- src/client/views/nodes/LinkMenuItem.tsx | 106 ++++++++++++++++++++------------ src/new_fields/Doc.ts | 67 ++++++++++++++++---- 3 files changed, 129 insertions(+), 56 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 6f5235c4a..900cd266e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -747,18 +747,20 @@ export class DocumentView extends DocComponent(Docu } let showTextTitle = showTitle && StrCast(this.layoutDoc.layout).startsWith(" { private _drag = React.createRef(); @observable private _showMore: boolean = false; @action toggleShowMore() { this._showMore = !this._showMore; } + @observable shouldUnhighlight: boolean = false; - @undoBatch - onFollowLink = async (e: React.PointerEvent): Promise => { - e.stopPropagation(); - e.persist(); - let jumpToDoc = this.props.destinationDoc; - let pdfDoc = FieldValue(Cast(this.props.destinationDoc, Doc)); - if (pdfDoc) { - jumpToDoc = pdfDoc; - } - let proto = Doc.GetProto(this.props.linkDoc); - let targetContext = await Cast(proto.targetContext, Doc); - let sourceContext = await Cast(proto.sourceContext, Doc); - let self = this; + componentDidMount = () => { + // document.addEventListener("pointerdown", this.unhighlight); + } + unhighlight = () => { + // if (this.shouldUnhighlight) + // Doc.UnhighlightAll(); + Doc.UnHighlightDoc(this.props.destinationDoc); + } - let dockingFunc = (document: Doc) => { this.props.addDocTab(document, undefined, "inTab"); SelectionManager.DeselectAll(); }; - if (e.ctrlKey) { - dockingFunc = (document: Doc) => CollectionDockingView.Instance.AddRightSplit(document, undefined); - } + @action + highlightDoc = () => { + // this.shouldUnhighlight = false; + document.removeEventListener("pointerdown", this.unhighlight); - if (this.props.destinationDoc === self.props.linkDoc.anchor2 && targetContext) { - DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, async document => dockingFunc(document), undefined, targetContext!); - console.log("1") - } - else if (this.props.destinationDoc === self.props.linkDoc.anchor1 && sourceContext) { - DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, document => dockingFunc(sourceContext!)); - console.log("2") - } - else if (DocumentManager.Instance.getDocumentView(jumpToDoc)) { - DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, undefined, undefined, NumCast((this.props.destinationDoc === self.props.linkDoc.anchor2 ? self.props.linkDoc.anchor2Page : self.props.linkDoc.anchor1Page))); - console.log("3") + Doc.HighlightDoc(this.props.destinationDoc); - } - else { - DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, dockingFunc); - console.log("4") + window.setTimeout(() => { + // this.shouldUnhighlight = true; + document.addEventListener("pointerdown", this.unhighlight); - } + }, 3000); } // NOT DONE? @@ -92,17 +77,18 @@ export class LinkMenuItem extends React.Component { // this opens the linked doc in a right split, NOT in its collection @undoBatch openLinkRight = () => { + this.highlightDoc(); let alias = Doc.MakeAlias(this.props.destinationDoc); CollectionDockingView.Instance.AddRightSplit(alias, undefined); SelectionManager.DeselectAll(); - } - // NOT DONE + // DONE // this is the standard "follow link" (jump to document) // taken from follow link @undoBatch jumpToLink = async (shouldZoom: boolean = false) => { + this.highlightDoc(); let jumpToDoc = this.props.destinationDoc; let pdfDoc = FieldValue(Cast(this.props.destinationDoc, Doc)); if (pdfDoc) { @@ -113,7 +99,6 @@ export class LinkMenuItem extends React.Component { let sourceContext = await Cast(proto.sourceContext, Doc); let self = this; - let dockingFunc = (document: Doc) => { this.props.addDocTab(document, undefined, "inTab"); SelectionManager.DeselectAll(); }; if (this.props.destinationDoc === self.props.linkDoc.anchor2 && targetContext) { @@ -136,6 +121,7 @@ export class LinkMenuItem extends React.Component { // this opens it full screen, do we need a separate full screen option? @undoBatch openLinkTab = () => { + this.highlightDoc(); let fullScreenAlias = Doc.MakeAlias(this.props.destinationDoc); this.props.addDocTab(fullScreenAlias, undefined, "inTab"); SelectionManager.DeselectAll(); @@ -146,12 +132,14 @@ export class LinkMenuItem extends React.Component { // target = the document to center on @undoBatch openLinkColTab = ({ col, target }: { col: Doc, target: Doc }) => { - + this.highlightDoc(); } // this will open a link next to the source doc @undoBatch openLinkInPlace = () => { + this.highlightDoc(); + let alias = Doc.MakeAlias(this.props.destinationDoc); let y = this.props.sourceDoc.y; let x = this.props.sourceDoc.x; @@ -160,7 +148,7 @@ export class LinkMenuItem extends React.Component { } //set this to be the default link behavior, can be any of the above - private defaultLinkBehavior: any = this.openLinkInPlace; + private defaultLinkBehavior: any = this.openLinkRight; onEdit = (e: React.PointerEvent): void => { e.stopPropagation(); @@ -237,4 +225,44 @@ export class LinkMenuItem extends React.Component {
); } -} \ No newline at end of file +} + + // @undoBatch + // onFollowLink = async (e: React.PointerEvent): Promise => { + // e.stopPropagation(); + // e.persist(); + // let jumpToDoc = this.props.destinationDoc; + // let pdfDoc = FieldValue(Cast(this.props.destinationDoc, Doc)); + // if (pdfDoc) { + // jumpToDoc = pdfDoc; + // } + // let proto = Doc.GetProto(this.props.linkDoc); + // let targetContext = await Cast(proto.targetContext, Doc); + // let sourceContext = await Cast(proto.sourceContext, Doc); + // let self = this; + + + // let dockingFunc = (document: Doc) => { this.props.addDocTab(document, undefined, "inTab"); SelectionManager.DeselectAll(); }; + // if (e.ctrlKey) { + // dockingFunc = (document: Doc) => CollectionDockingView.Instance.AddRightSplit(document, undefined); + // } + + // if (this.props.destinationDoc === self.props.linkDoc.anchor2 && targetContext) { + // DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, async document => dockingFunc(document), undefined, targetContext!); + // console.log("1") + // } + // else if (this.props.destinationDoc === self.props.linkDoc.anchor1 && sourceContext) { + // DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, document => dockingFunc(sourceContext!)); + // console.log("2") + // } + // else if (DocumentManager.Instance.getDocumentView(jumpToDoc)) { + // DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, undefined, undefined, NumCast((this.props.destinationDoc === self.props.linkDoc.anchor2 ? self.props.linkDoc.anchor2Page : self.props.linkDoc.anchor1Page))); + // console.log("3") + + // } + // else { + // DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, dockingFunc); + // console.log("4") + + // } + // } \ No newline at end of file diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index d634cf57f..425d532c0 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -329,12 +329,12 @@ export namespace Doc { export function AddDocToList(target: Doc, key: string, doc: Doc, relativeTo?: Doc, before?: boolean, first?: boolean, allowDuplicates?: boolean) { if (target[key] === undefined) { - console.log("target key undefined"); + // console.log("target key undefined"); Doc.GetProto(target)[key] = new List(); } let list = Cast(target[key], listSpec(Doc)); if (list) { - console.log("has list"); + // console.log("has list"); if (allowDuplicates !== true) { let pind = list.reduce((l, d, i) => d instanceof Doc && Doc.AreProtosEqual(d, doc) ? i : l, -1); if (pind !== -1) { @@ -342,15 +342,15 @@ export namespace Doc { } } if (first) { - console.log("is first"); + // console.log("is first"); list.splice(0, 0, doc); } else { - console.log("not first"); + // console.log("not first"); let ind = relativeTo ? list.indexOf(relativeTo) : -1; if (ind === -1) list.push(doc); else list.splice(before ? ind : ind + 1, 0, doc); - console.log("index", ind); + // console.log("index", ind); } } return true; @@ -595,23 +595,66 @@ export namespace Doc { }); } + export function isBrushedHighlightedDegree(doc: Doc) { + if (Doc.IsHighlighted(doc)) { + return 3; + } + else { + return Doc.IsBrushedDegree(doc); + } + } + export class DocBrush { @observable BrushedDoc: ObservableMap = new ObservableMap(); } - const manager = new DocBrush(); + const brushManager = new DocBrush(); export function IsBrushed(doc: Doc) { - return manager.BrushedDoc.has(doc) || manager.BrushedDoc.has(Doc.GetDataDoc(doc)); + return brushManager.BrushedDoc.has(doc) || brushManager.BrushedDoc.has(Doc.GetDataDoc(doc)); } export function IsBrushedDegree(doc: Doc) { - return manager.BrushedDoc.has(Doc.GetDataDoc(doc)) ? 2 : manager.BrushedDoc.has(doc) ? 1 : 0; + return brushManager.BrushedDoc.has(Doc.GetDataDoc(doc)) ? 2 : brushManager.BrushedDoc.has(doc) ? 1 : 0; } export function BrushDoc(doc: Doc) { - manager.BrushedDoc.set(doc, true); - manager.BrushedDoc.set(Doc.GetDataDoc(doc), true); + brushManager.BrushedDoc.set(doc, true); + brushManager.BrushedDoc.set(Doc.GetDataDoc(doc), true); } export function UnBrushDoc(doc: Doc) { - manager.BrushedDoc.delete(doc); - manager.BrushedDoc.delete(Doc.GetDataDoc(doc)); + brushManager.BrushedDoc.delete(doc); + brushManager.BrushedDoc.delete(Doc.GetDataDoc(doc)); + } + + export class HighlightBrush { + @observable HighlightedDoc: ObservableMap = new ObservableMap(); + } + const highlightManager = new HighlightBrush(); + export function IsHighlighted(doc: Doc) { + // return highlightManager.HighlightedDoc.has(doc) || highlightManager.HighlightedDoc.has(Doc.GetDataDoc(doc)); + return highlightManager.HighlightedDoc.get(doc) || highlightManager.HighlightedDoc.get(Doc.GetDataDoc(doc)); + } + export function HighlightDoc(doc: Doc) { + console.log("is highlighting") + runInAction(() => { + highlightManager.HighlightedDoc.set(doc, true); + highlightManager.HighlightedDoc.set(Doc.GetDataDoc(doc), true); + }); + } + export function UnHighlightDoc(doc: Doc) { + // highlightManager.HighlightedDoc.delete(doc); + // highlightManager.HighlightedDoc.delete(Doc.GetDataDoc(doc)); + runInAction(() => { + highlightManager.HighlightedDoc.set(doc, false); + highlightManager.HighlightedDoc.set(Doc.GetDataDoc(doc), false); + }) + } + export function UnhighlightAll() { + // highlightManager.HighlightedDoc.clear(); + let docs = highlightManager.HighlightedDoc.keys(); + let doc = docs.next(); + while (docs.next !== null) { + Doc.UnHighlightDoc(doc.value); + doc = docs.next(); + } + } } Scripting.addGlobal(function renameAlias(doc: any, n: any) { return StrCast(doc.title).replace(/\([0-9]*\)/, "") + `(${n})`; }); -- cgit v1.2.3-70-g09d2 From b987fe6e18c4b37a1ec40abcb4d8360d57dc7d54 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Mon, 19 Aug 2019 23:14:00 -0400 Subject: switch to text needs help lol --- src/client/views/PreviewCursor.tsx | 18 +++++++++++++++++- src/client/views/nodes/WebBox.tsx | 37 +++++++++++++++++++++++++++++++++++-- 2 files changed, 52 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index 7bf0d8ace..40be470d6 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -34,8 +34,10 @@ export class PreviewCursor extends React.Component<{}> { let newPoint = PreviewCursor._getTransform().transformPoint(PreviewCursor._clickPoint[0], PreviewCursor._clickPoint[1]); runInAction(() => { PreviewCursor.Visible = false; }); - // pasting in text/video from youtube + if (e.clipboardData.getData("text/plain") !== "") { + + // tests for youtube and makes video document if (e.clipboardData.getData("text/plain").indexOf("www.youtube.com/watch") !== -1) { const url = e.clipboardData.getData("text/plain").replace("youtube.com/watch?v=", "youtube.com/embed/"); PreviewCursor._addDocument(Docs.Create.VideoDocument(url, { @@ -45,6 +47,20 @@ export class PreviewCursor extends React.Component<{}> { }), false); return; } + + // tests for URL and makes web document + let re: any = /^https?:\/\/www\./g; + if (re.test(e.clipboardData.getData("text/plain"))) { + const url = e.clipboardData.getData("text/plain") + PreviewCursor._addDocument(Docs.Create.WebDocument(url, { + title: url, width: 300, height: 300, + // nativeWidth: 300, nativeHeight: 472.5, + x: newPoint[0], y: newPoint[1] + }), false); + return; + } + + // creates text document let newBox = Docs.Create.TextDocument({ width: 200, height: 100, x: newPoint[0], diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 91170e99a..6e23d6fb7 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -10,6 +10,7 @@ import { InkTool } from "../../../new_fields/InkField"; import { Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types"; import { Utils } from "../../../Utils"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faStickyNote } from '@fortawesome/free-solid-svg-icons'; import { observable, action, computed } from "mobx"; import { listSpec } from "../../../new_fields/Schema"; import { Field, FieldResult } from "../../../new_fields/Doc"; @@ -18,6 +19,11 @@ import { ObjectField } from "../../../new_fields/ObjectField"; import { updateSourceFile } from "typescript"; import { KeyValueBox } from "./KeyValueBox"; import { setReactionScheduler } from "mobx/lib/internal"; +import { library } from "@fortawesome/fontawesome-svg-core"; +import { Docs } from "../../documents/Documents"; +import { PreviewCursor } from "../PreviewCursor"; + +library.add(faStickyNote) @observer export class WebBox extends React.Component { @@ -69,6 +75,24 @@ export class WebBox extends React.Component { } } + switchToText() { + console.log("switchng to text") + if (this.props.removeDocument) this.props.removeDocument(this.props.Document); + // let newPoint = PreviewCursor._getTransform().transformPoint(PreviewCursor._clickPoint[0], PreviewCursor._clickPoint[1]); + let newBox = Docs.Create.TextDocument({ + width: 200, height: 100, + // x: newPoint[0], + // y: newPoint[1], + x: NumCast(this.props.Document.x), + y: NumCast(this.props.Document.y), + title: "-pasted text-" + }); + + newBox.proto!.autoHeight = true; + PreviewCursor._addLiveTextDoc(newBox); + return; + } + urlEditor() { return (
@@ -91,9 +115,18 @@ export class WebBox extends React.Component { onChange={this.onURLChange} onKeyDown={this.onValueKeyDown} /> - + +
-- cgit v1.2.3-70-g09d2 From c92761206957aebdba1cc2e77f6b662ae42db847 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 20 Aug 2019 01:44:18 -0400 Subject: interactive ui --- src/client/views/DocumentDecorations.tsx | 84 +++++++++++++++++++++++------ src/client/views/nodes/FormattedTextBox.tsx | 63 +++++++++++++++------- 2 files changed, 112 insertions(+), 35 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 797b43add..1db452b45 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,5 +1,5 @@ -import { library } from '@fortawesome/fontawesome-svg-core'; -import { faLink, faTag, faArrowAltCircleDown, faArrowAltCircleUp } from '@fortawesome/free-solid-svg-icons'; +import { library, IconProp } from '@fortawesome/fontawesome-svg-core'; +import { faLink, faTag, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faStopCircle, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; @@ -18,7 +18,7 @@ import { CollectionView } from "./collections/CollectionView"; import './DocumentDecorations.scss'; import { DocumentView, PositionDocument } from "./nodes/DocumentView"; import { FieldView } from "./nodes/FieldView"; -import { FormattedTextBox } from "./nodes/FormattedTextBox"; +import { FormattedTextBox, GoogleRef } from "./nodes/FormattedTextBox"; import { IconBox } from "./nodes/IconBox"; import { LinkMenu } from "./nodes/LinkMenu"; import { TemplateMenu } from "./TemplateMenu"; @@ -26,7 +26,6 @@ import { Template, Templates } from "./Templates"; import React = require("react"); import { RichTextField } from '../../new_fields/RichTextField'; import { LinkManager } from '../util/LinkManager'; -import { ObjectField } from '../../new_fields/ObjectField'; import { MetadataEntryMenu } from './MetadataEntryMenu'; import { ImageBox } from './nodes/ImageBox'; import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils'; @@ -39,6 +38,11 @@ library.add(faLink); library.add(faTag); library.add(faArrowAltCircleDown); library.add(faArrowAltCircleUp); +library.add(faStopCircle); +library.add(faCheckCircle); +library.add(faCloudUploadAlt); + +const cloud: IconProp = "cloud-upload-alt"; @observer export class DocumentDecorations extends React.Component<{}, { value: string }> { @@ -69,6 +73,52 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> @observable private _removeIcon = false; @observable public Interacting = false; + @observable public pushIcon: IconProp = "arrow-alt-circle-up"; + @observable public pullIcon: IconProp = "arrow-alt-circle-down"; + @observable public pullColor: string = "white"; + public pullColorAnimating = false; + + private pullAnimating = false; + private pushAnimating = false; + + public startPullOutcome = action((success: boolean) => { + if (this.pullAnimating) { + return; + } + this.pullAnimating = true; + this.pullIcon = success ? "check-circle" : "stop-circle"; + setTimeout(() => runInAction(() => { + this.pullIcon = "arrow-alt-circle-down"; + this.pullAnimating = false; + }), 1000); + }); + + public startPushOutcome = action((success: boolean) => { + if (this.pushAnimating) { + return; + } + this.pushAnimating = true; + this.pushIcon = success ? "check-circle" : "stop-circle"; + setTimeout(() => runInAction(() => { + this.pushIcon = "arrow-alt-circle-up"; + this.pushAnimating = false; + }), 1000); + }); + + public setPullState = (unchanged: boolean) => { + if (this.pullColorAnimating) { + return; + } + this.pullColorAnimating = true; + this.pullColor = unchanged ? "lawngreen" : "red"; + setTimeout(() => { + runInAction(() => { + this.pullColor = "white"; + this.pullColorAnimating = false; + }); + }, 2000); + } + constructor(props: Readonly<{}>) { super(props); DocumentDecorations.Instance = this; @@ -621,33 +671,37 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> ); } + private get targetDoc() { + return SelectionManager.SelectedDocuments()[0].props.Document; + } + considerGoogleDocsPush = () => { - let thisDoc = SelectionManager.SelectedDocuments()[0].props.Document; - let canPush = thisDoc.data && thisDoc.data instanceof RichTextField; + let canPush = this.targetDoc.data && this.targetDoc.data instanceof RichTextField; if (!canPush) return (null); + let published = Doc.GetProto(this.targetDoc)[GoogleRef] !== undefined; + let icon: IconProp = published ? (this.pushIcon as any) : (cloud as any); return (
-
{ +
{ DocumentDecorations.hasPushedHack = false; - thisDoc[Pushes] = NumCast(thisDoc[Pushes]) + 1; + this.targetDoc[Pushes] = NumCast(this.targetDoc[Pushes]) + 1; }}> - +
); } considerGoogleDocsPull = () => { - let thisDoc = SelectionManager.SelectedDocuments()[0].props.Document; - let canPull = thisDoc.data && thisDoc.data instanceof RichTextField; - if (!canPull) return (null); + let canPull = this.targetDoc.data && this.targetDoc.data instanceof RichTextField; + if (!canPull || !Doc.GetProto(this.targetDoc)[GoogleRef]) return (null); return (
-
{ +
{ DocumentDecorations.hasPulledHack = false; - thisDoc[Pulls] = NumCast(thisDoc[Pulls]) + 1; + this.targetDoc[Pulls] = NumCast(this.targetDoc[Pulls]) + 1; }}> - +
); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index d2eb71350..33d222813 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -60,11 +60,13 @@ const richTextSchema = createSchema({ documentText: "string" }); -const googleDocId = "googleDocId"; +export const GoogleRef = "googleDocId"; type RichTextDocument = makeInterface<[typeof richTextSchema]>; const RichTextDocument = makeInterface(richTextSchema); +type PullHandler = (exportState: GoogleApiClientUtils.Docs.ReadResult, dataDoc: Doc) => void; + @observer export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTextBoxProps), RichTextDocument>(RichTextDocument) { public static LayoutString(fieldStr: string = "data") { @@ -324,6 +326,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe }, { fireImmediately: true }); } + this.pullFromGoogleDoc(this.checkState); + this._reactionDisposer = reaction( () => { const field = this.dataDoc ? Cast(this.dataDoc[this.props.fieldKey], RichTextField) : undefined; @@ -350,7 +354,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe () => { if (!DocumentDecorations.hasPulledHack) { DocumentDecorations.hasPulledHack = true; - this.pullFromGoogleDoc(); + this.pullFromGoogleDoc(this.updateState); } } ); @@ -394,44 +398,63 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe }, { fireImmediately: true }); } - pushToGoogleDoc = () => { + pushToGoogleDoc = async () => { let modes = GoogleApiClientUtils.Docs.WriteMode; let mode = modes.Replace; - let reference: Opt = Cast(this.dataDoc[googleDocId], "string"); + let reference: Opt = Cast(this.dataDoc[GoogleRef], "string"); if (!reference) { mode = modes.Insert; reference = { title: StrCast(this.dataDoc.title), - handler: id => this.dataDoc[googleDocId] = id + handler: id => this.dataDoc[GoogleRef] = id }; } if (this._editorView) { let data = Cast(this.dataDoc.data, RichTextField); let content = data ? data[ToPlainText]() : this._editorView.state.doc.textContent; - GoogleApiClientUtils.Docs.write({ reference, content, mode }); + let response = await GoogleApiClientUtils.Docs.write({ reference, content, mode }); + let pushSuccess = response !== undefined && !("errors" in response); + DocumentDecorations.Instance.startPushOutcome(pushSuccess); } } - pullFromGoogleDoc = async () => { + pullFromGoogleDoc = async (handler: PullHandler) => { let dataDoc = Doc.GetProto(this.props.Document); - let documentId = StrCast(dataDoc[googleDocId]); + let documentId = StrCast(dataDoc[GoogleRef]); if (documentId) { let exportState = await GoogleApiClientUtils.Docs.read({ documentId }); - UndoManager.RunInBatch(() => { - if (exportState && exportState.body && exportState.title) { - let data = Cast(dataDoc.data, RichTextField); - if (data) { - this.isGoogleDocsUpdate = true; - dataDoc.data = new RichTextField(data[FromPlainText](exportState.body)); - dataDoc.title = exportState.title; - } - } else { - delete dataDoc[googleDocId]; - } - }, Pulls); + UndoManager.RunInBatch(() => handler(exportState, dataDoc), Pulls); } } + updateState = (exportState: GoogleApiClientUtils.Docs.ReadResult, dataDoc: Doc) => { + let pullSuccess = false; + if (exportState !== undefined && exportState.body !== undefined && exportState.title !== undefined) { + let data = Cast(dataDoc.data, RichTextField); + if (data) { + pullSuccess = true; + this.isGoogleDocsUpdate = true; + dataDoc.data = new RichTextField(data[FromPlainText](exportState.body)); + dataDoc.title = exportState.title; + } + } else { + delete dataDoc[GoogleRef]; + } + DocumentDecorations.Instance.startPullOutcome(pullSuccess); + } + + checkState = (exportState: GoogleApiClientUtils.Docs.ReadResult, dataDoc: Doc) => { + if (exportState !== undefined && exportState.body !== undefined && exportState.title !== undefined) { + let data = Cast(dataDoc.data, RichTextField); + if (data) { + let storedPlainText = data[ToPlainText]() + "\n"; + let receivedPlainText = exportState.body; + DocumentDecorations.Instance.setPullState(storedPlainText === receivedPlainText); + } + } + } + + clipboardTextSerializer = (slice: Slice): string => { let text = "", separated = true; const from = 0, to = slice.content.size; -- cgit v1.2.3-70-g09d2 From aa0e6f5ffc30fdffc3be13a1948981b754544a01 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 20 Aug 2019 12:03:50 -0400 Subject: automation of pull push button visibility --- src/client/views/DocumentDecorations.tsx | 3 +- src/client/views/nodes/FormattedTextBox.tsx | 61 +++++++++++++++++++---------- 2 files changed, 42 insertions(+), 22 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 1db452b45..05239073b 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -694,7 +694,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> considerGoogleDocsPull = () => { let canPull = this.targetDoc.data && this.targetDoc.data instanceof RichTextField; - if (!canPull || !Doc.GetProto(this.targetDoc)[GoogleRef]) return (null); + let dataDoc = Doc.GetProto(this.targetDoc); + if (!canPull || !dataDoc[GoogleRef] || dataDoc.unchanged) return (null); return (
{ diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 33d222813..8a355a425 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -1,6 +1,6 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEdit, faSmile, faTextHeight, faUpload } from '@fortawesome/free-solid-svg-icons'; -import { action, IReactionDisposer, observable, reaction, runInAction, computed, Lambda, trace, untracked } from "mobx"; +import { action, IReactionDisposer, observable, reaction, runInAction, computed, Lambda, trace, untracked, autorun } from "mobx"; import { observer } from "mobx-react"; import { baseKeymap } from "prosemirror-commands"; import { history } from "prosemirror-history"; @@ -399,32 +399,46 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } pushToGoogleDoc = async () => { - let modes = GoogleApiClientUtils.Docs.WriteMode; - let mode = modes.Replace; - let reference: Opt = Cast(this.dataDoc[GoogleRef], "string"); - if (!reference) { - mode = modes.Insert; - reference = { - title: StrCast(this.dataDoc.title), - handler: id => this.dataDoc[GoogleRef] = id + this.pullFromGoogleDoc(async (exportState: GoogleApiClientUtils.Docs.ReadResult, dataDoc: Doc) => { + let modes = GoogleApiClientUtils.Docs.WriteMode; + let mode = modes.Replace; + let reference: Opt = Cast(this.dataDoc[GoogleRef], "string"); + if (!reference) { + mode = modes.Insert; + reference = { + title: StrCast(this.dataDoc.title), + handler: id => this.dataDoc[GoogleRef] = id + }; + } + let redo = async () => { + if (this._editorView && reference) { + let data = Cast(this.dataDoc.data, RichTextField); + let content = data ? data[ToPlainText]() : this._editorView.state.doc.textContent; + let response = await GoogleApiClientUtils.Docs.write({ reference, content, mode }); + let pushSuccess = response !== undefined && !("errors" in response); + dataDoc.unchanged = pushSuccess; + DocumentDecorations.Instance.startPushOutcome(pushSuccess); + } }; - } - if (this._editorView) { - let data = Cast(this.dataDoc.data, RichTextField); - let content = data ? data[ToPlainText]() : this._editorView.state.doc.textContent; - let response = await GoogleApiClientUtils.Docs.write({ reference, content, mode }); - let pushSuccess = response !== undefined && !("errors" in response); - DocumentDecorations.Instance.startPushOutcome(pushSuccess); - } + let undo = () => { + let content = exportState.body; + if (reference && content) { + GoogleApiClientUtils.Docs.write({ reference, content, mode }); + } + }; + UndoManager.AddEvent({ undo, redo }); + redo(); + }); } pullFromGoogleDoc = async (handler: PullHandler) => { - let dataDoc = Doc.GetProto(this.props.Document); + let dataDoc = this.dataDoc; let documentId = StrCast(dataDoc[GoogleRef]); + let exportState: GoogleApiClientUtils.Docs.ReadResult = {}; if (documentId) { - let exportState = await GoogleApiClientUtils.Docs.read({ documentId }); - UndoManager.RunInBatch(() => handler(exportState, dataDoc), Pulls); + exportState = await GoogleApiClientUtils.Docs.read({ documentId }); } + UndoManager.RunInBatch(() => handler(exportState, dataDoc), Pulls); } updateState = (exportState: GoogleApiClientUtils.Docs.ReadResult, dataDoc: Doc) => { @@ -436,6 +450,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe this.isGoogleDocsUpdate = true; dataDoc.data = new RichTextField(data[FromPlainText](exportState.body)); dataDoc.title = exportState.title; + dataDoc.unchanged = true; } } else { delete dataDoc[GoogleRef]; @@ -449,7 +464,11 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe if (data) { let storedPlainText = data[ToPlainText]() + "\n"; let receivedPlainText = exportState.body; - DocumentDecorations.Instance.setPullState(storedPlainText === receivedPlainText); + let storedTitle = dataDoc.title; + let receivedTitle = exportState.title; + let unchanged = storedPlainText === receivedPlainText && storedTitle === receivedTitle; + dataDoc.unchanged = unchanged; + DocumentDecorations.Instance.setPullState(unchanged); } } } -- cgit v1.2.3-70-g09d2 From 9a39ac87972243787474d489856818f44b90d524 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Tue, 20 Aug 2019 12:12:58 -0400 Subject: send halp --- src/client/views/PreviewCursor.tsx | 2 +- src/client/views/nodes/WebBox.tsx | 41 +++++++++++++++++++++++++++++++------- 2 files changed, 35 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index 40be470d6..d8e161ab6 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -49,7 +49,7 @@ export class PreviewCursor extends React.Component<{}> { } // tests for URL and makes web document - let re: any = /^https?:\/\/www\./g; + let re: any = /^https?:\/\//g; if (re.test(e.clipboardData.getData("text/plain"))) { const url = e.clipboardData.getData("text/plain") PreviewCursor._addDocument(Docs.Create.WebDocument(url, { diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 6e23d6fb7..c43b90f91 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -13,7 +13,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faStickyNote } from '@fortawesome/free-solid-svg-icons'; import { observable, action, computed } from "mobx"; import { listSpec } from "../../../new_fields/Schema"; -import { Field, FieldResult } from "../../../new_fields/Doc"; +import { Field, FieldResult, Doc, Opt } from "../../../new_fields/Doc"; import { RefField } from "../../../new_fields/RefField"; import { ObjectField } from "../../../new_fields/ObjectField"; import { updateSourceFile } from "typescript"; @@ -22,6 +22,10 @@ import { setReactionScheduler } from "mobx/lib/internal"; import { library } from "@fortawesome/fontawesome-svg-core"; import { Docs } from "../../documents/Documents"; import { PreviewCursor } from "../PreviewCursor"; +import { SelectionManager } from "../../util/SelectionManager"; +import { CollectionView } from "../collections/CollectionView"; +import { CollectionPDFView } from "../collections/CollectionPDFView"; +import { CollectionVideoView } from "../collections/CollectionVideoView"; library.add(faStickyNote) @@ -75,21 +79,44 @@ export class WebBox extends React.Component { } } - switchToText() { - console.log("switchng to text") - if (this.props.removeDocument) this.props.removeDocument(this.props.Document); - // let newPoint = PreviewCursor._getTransform().transformPoint(PreviewCursor._clickPoint[0], PreviewCursor._clickPoint[1]); + + switchToText = () => { + let url: string = ""; + let field = Cast(this.props.Document[this.props.fieldKey], WebField); + if (field) url = field.url.href; + + let parent: Opt; + // let parentDoc: any; + SelectionManager.SelectedDocuments().map(dv => { + parent = dv.props.ContainingCollectionView; + // if(parent) parentDoc = parent.props.Document; + dv.props.removeDocument && dv.props.removeDocument(dv.props.Document); + }); + + // // let newPoint = PreviewCursor._getTransform().transformPoint(PreviewCursor._clickPoint[0], PreviewCursor._clickPoint[1]); let newBox = Docs.Create.TextDocument({ width: 200, height: 100, // x: newPoint[0], // y: newPoint[1], x: NumCast(this.props.Document.x), y: NumCast(this.props.Document.y), - title: "-pasted text-" + title: url }); + console.log(newBox) + if (parent) { + let parentDoc: Doc = parent.props.Document; + if (parentDoc && parentDoc.props) { + parentDoc.props.addDocument(); + } + } + newBox.proto!.autoHeight = true; - PreviewCursor._addLiveTextDoc(newBox); + // PreviewCursor._addLiveTextDoc(newBox); + // if (parent && parent.props.addDocument) { + // console.log("adding doc") + // parent.props.addDocument(newBox); + // } return; } -- cgit v1.2.3-70-g09d2 From bd484eac03d50b6ce517bf9d0f966d4c48d14570 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Tue, 20 Aug 2019 14:37:20 -0400 Subject: highlighting working --- src/client/views/nodes/LinkMenuItem.tsx | 16 +++------------- src/new_fields/Doc.ts | 22 +++++++++------------- 2 files changed, 12 insertions(+), 26 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/LinkMenuItem.tsx b/src/client/views/nodes/LinkMenuItem.tsx index c3d9d033f..12eb2c2f7 100644 --- a/src/client/views/nodes/LinkMenuItem.tsx +++ b/src/client/views/nodes/LinkMenuItem.tsx @@ -32,30 +32,20 @@ export class LinkMenuItem extends React.Component { private _drag = React.createRef(); @observable private _showMore: boolean = false; @action toggleShowMore() { this._showMore = !this._showMore; } - @observable shouldUnhighlight: boolean = false; - componentDidMount = () => { - // document.addEventListener("pointerdown", this.unhighlight); - } unhighlight = () => { - // if (this.shouldUnhighlight) - // Doc.UnhighlightAll(); - Doc.UnHighlightDoc(this.props.destinationDoc); + Doc.UnhighlightAll(); + document.removeEventListener("pointerdown", this.unhighlight); } @action highlightDoc = () => { - // this.shouldUnhighlight = false; document.removeEventListener("pointerdown", this.unhighlight); - Doc.HighlightDoc(this.props.destinationDoc); - window.setTimeout(() => { - // this.shouldUnhighlight = true; document.addEventListener("pointerdown", this.unhighlight); - - }, 3000); + }, 10000); } // NOT DONE? diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index 425d532c0..b47811ac6 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -624,35 +624,31 @@ export namespace Doc { } export class HighlightBrush { - @observable HighlightedDoc: ObservableMap = new ObservableMap(); + @observable HighlightedDoc: Map = new Map(); } const highlightManager = new HighlightBrush(); export function IsHighlighted(doc: Doc) { - // return highlightManager.HighlightedDoc.has(doc) || highlightManager.HighlightedDoc.has(Doc.GetDataDoc(doc)); - return highlightManager.HighlightedDoc.get(doc) || highlightManager.HighlightedDoc.get(Doc.GetDataDoc(doc)); + let IsHighlighted = highlightManager.HighlightedDoc.get(doc) || highlightManager.HighlightedDoc.get(Doc.GetDataDoc(doc)); + return IsHighlighted; } export function HighlightDoc(doc: Doc) { - console.log("is highlighting") runInAction(() => { highlightManager.HighlightedDoc.set(doc, true); highlightManager.HighlightedDoc.set(Doc.GetDataDoc(doc), true); }); } export function UnHighlightDoc(doc: Doc) { - // highlightManager.HighlightedDoc.delete(doc); - // highlightManager.HighlightedDoc.delete(Doc.GetDataDoc(doc)); runInAction(() => { highlightManager.HighlightedDoc.set(doc, false); highlightManager.HighlightedDoc.set(Doc.GetDataDoc(doc), false); - }) + }); } export function UnhighlightAll() { - // highlightManager.HighlightedDoc.clear(); - let docs = highlightManager.HighlightedDoc.keys(); - let doc = docs.next(); - while (docs.next !== null) { - Doc.UnHighlightDoc(doc.value); - doc = docs.next(); + let mapEntries = highlightManager.HighlightedDoc.keys(); + let docEntry: IteratorResult; + while (!(docEntry = mapEntries.next()).done) { + let targetDoc = docEntry.value; + targetDoc && Doc.UnHighlightDoc(targetDoc); } } -- cgit v1.2.3-70-g09d2 From 700dfc5add1ecd9c2b1ecafcdc593ff821b7a6a6 Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 20 Aug 2019 17:20:27 -0400 Subject: UI enhancements and other backend fixes for templates. --- src/client/util/DragManager.ts | 3 +- src/client/views/MetadataEntryMenu.scss | 12 +++++ src/client/views/MetadataEntryMenu.tsx | 52 +++++++++++--------- .../views/collections/CollectionStackingView.tsx | 3 +- .../CollectionStackingViewFieldColumn.tsx | 9 ++-- src/client/views/collections/CollectionSubView.tsx | 2 +- .../views/collections/CollectionTreeView.tsx | 3 ++ .../views/collections/CollectionViewChromes.scss | 1 - .../views/collections/CollectionViewChromes.tsx | 57 +++++++++++----------- .../collectionFreeForm/CollectionFreeFormView.tsx | 30 ++++++------ src/client/views/nodes/DocumentContentsView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 25 +++++++--- src/client/views/nodes/FormattedTextBox.tsx | 12 ++--- src/client/views/nodes/ImageBox.tsx | 7 +-- src/new_fields/Doc.ts | 11 +++-- 15 files changed, 131 insertions(+), 98 deletions(-) (limited to 'src') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 0b6d9b5e5..894b366ef 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -9,8 +9,6 @@ import { DocumentManager } from "./DocumentManager"; import { LinkManager } from "./LinkManager"; import { SelectionManager } from "./SelectionManager"; import { SchemaHeaderField } from "../../new_fields/SchemaHeaderField"; -import { DocumentDecorations } from "../views/DocumentDecorations"; -import { NumberLiteralType } from "typescript"; export type dropActionType = "alias" | "copy" | undefined; export function SetupDrag( @@ -211,6 +209,7 @@ export namespace DragManager { dropAction: dropActionType; userDropAction: dropActionType; moveDocument?: MoveFunction; + applyAsTemplate?: boolean; [id: string]: any; } diff --git a/src/client/views/MetadataEntryMenu.scss b/src/client/views/MetadataEntryMenu.scss index bcfc9a82d..e28c4d0e0 100644 --- a/src/client/views/MetadataEntryMenu.scss +++ b/src/client/views/MetadataEntryMenu.scss @@ -1,8 +1,20 @@ .metadataEntry-outerDiv { display: flex; + flex-direction: column; width: 300px; } +.metadataEntry-keys { + max-height: 80; + overflow-y: auto; + display: flex; + flex-direction: column; +} +.metadataEntry-inputArea { + display:flex; + flex-direction: row; +} + .react-autosuggest__container { position: relative; } diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx index 36c240dd8..4a45eede9 100644 --- a/src/client/views/MetadataEntryMenu.tsx +++ b/src/client/views/MetadataEntryMenu.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import "./MetadataEntryMenu.scss"; import { observer } from 'mobx-react'; -import { observable, action, runInAction, trace } from 'mobx'; +import { observable, action, runInAction, trace, computed, IReactionDisposer, reaction } from 'mobx'; import { KeyValueBox } from './nodes/KeyValueBox'; import { Doc, Field } from '../../new_fields/Doc'; import * as Autosuggest from 'react-autosuggest'; import { undoBatch } from '../util/UndoManager'; +import { emptyFunction } from '../../Utils'; export type DocLike = Doc | Doc[] | Promise | Promise; export interface MetadataEntryProps { @@ -18,7 +19,8 @@ export interface MetadataEntryProps { export class MetadataEntryMenu extends React.Component{ @observable private _currentKey: string = ""; @observable private _currentValue: string = ""; - @observable private suggestions: string[] = []; + @observable _allSuggestions: string[] = []; + _suggestionDispser: IReactionDisposer | undefined; private userModified = false; private autosuggestRef = React.createRef(); @@ -140,35 +142,39 @@ export class MetadataEntryMenu extends React.Component{ getSuggestionValue = (suggestion: string) => suggestion; renderSuggestion = (suggestion: string) => { - return

{suggestion}

; + return (null); } + componentDidMount() { - onSuggestionFetch = async ({ value }: { value: string }) => { - const sugg = await this.getKeySuggestions(value); - runInAction(() => { - this.suggestions = sugg; - }); + this._suggestionDispser = reaction(() => this._currentKey, + () => this.getKeySuggestions(this._currentKey).then(action((s: string[]) => this._allSuggestions = s)), + { fireImmediately: true }); } - - @action - onSuggestionClear = () => { - this.suggestions = []; + componentWillUnmount() { + this._suggestionDispser && this._suggestionDispser(); } render() { return (
- Key: - - Value: - +
+ Key: + + Value: + +
+
+
    + {this._allSuggestions.map(s =>
  • { this._currentKey = s; this.previewValue(); })} >{s}
    • )} +
+
); } diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 1f7ef0689..c74c60d8f 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -160,7 +160,8 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { previewScript={undefined}> ; } - getDocHeight(d: Doc) { + getDocHeight(d?: Doc) { + if (!d) return 0; let nw = NumCast(d.nativeWidth); let nh = NumCast(d.nativeHeight); if (!d.ignoreAspect && nw && nh) { diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 74c7ef305..cc8476548 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -78,11 +78,14 @@ export class CollectionStackingViewFieldColumn extends React.Component { - let pair = Doc.GetLayoutDataDocPair(parent.props.Document, parent.props.DataDoc, parent.props.fieldKey, d); + const pair = Doc.GetLayoutDataDocPair(parent.props.Document, parent.props.DataDoc, parent.props.fieldKey, d); + if (!pair.layout || pair.data instanceof Promise) { + return (null); + } let width = () => Math.min(d.nativeWidth && !d.ignoreAspect && !parent.props.Document.fillColumn ? d[WidthSym]() : Number.MAX_VALUE, parent.columnWidth / parent.numGroupColumns); - let height = () => parent.getDocHeight(pair.layout); + let height = () => parent.getDocHeight(pair!.layout); let dref = React.createRef(); - let dxf = () => this.getDocTransform(pair.layout, dref.current!); + let dxf = () => this.getDocTransform(pair!.layout, dref.current!); this.props.parent._docXfs.push({ dxf: dxf, width: width, height: height }); let rowSpan = Math.ceil((height() + parent.gridGap) / parent.gridGap); let style = parent.isStackingView ? { width: width(), margin: "auto", marginTop: i === 0 ? 0 : parent.gridGap, height: height() } : { gridRowEnd: `span ${rowSpan}` }; diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index cfe3fefb3..818e76619 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -113,7 +113,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T) { @undoBatch @action protected drop(e: Event, de: DragManager.DropEvent): boolean { - if (de.data instanceof DragManager.DocumentDragData) { + if (de.data instanceof DragManager.DocumentDragData && !de.data.applyAsTemplate) { if (de.mods === "AltKey" && de.data.draggedDocuments.length) { this.childDocs.map(doc => Doc.ApplyTemplateTo(de.data.draggedDocuments[0], doc, undefined) diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index b6a14238e..ebd385743 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -443,6 +443,9 @@ class TreeView extends React.Component { let rowWidth = () => panelWidth() - 20; return docs.map((child, i) => { let pair = Doc.GetLayoutDataDocPair(containingCollection, dataDoc, key, child); + if (!pair.layout || pair.data instanceof Promise) { + return (null); + } let indent = i === 0 ? undefined : () => { if (StrCast(docs[i - 1].layout).indexOf("CollectionView") !== -1) { diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 595f079d1..f39bd877a 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -7,7 +7,6 @@ z-index: 9001; transition: top .5s; background: lightgrey; - padding: 10px; .collectionViewChrome { display: grid; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index b92bcc7cb..25b152d4e 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -1,30 +1,25 @@ -import * as React from "react"; -import { CollectionView } from "./CollectionView"; -import "./CollectionViewChromes.scss"; -import { CollectionViewType } from "./CollectionBaseView"; -import { undoBatch } from "../../util/UndoManager"; -import { action, observable, runInAction, computed, IObservable, IObservableValue, reaction, autorun } from "mobx"; -import { observer } from "mobx-react"; -import { Doc, DocListCast, FieldResult } from "../../../new_fields/Doc"; -import { DocLike } from "../MetadataEntryMenu"; -import * as Autosuggest from 'react-autosuggest'; -import { EditableView } from "../EditableView"; -import { StrCast, NumCast, BoolCast, Cast } from "../../../new_fields/Types"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { action, computed, observable, runInAction } from "mobx"; +import { observer } from "mobx-react"; +import * as React from "react"; +import { Doc, DocListCast } from "../../../new_fields/Doc"; +import { Id } from "../../../new_fields/FieldSymbols"; +import { List } from "../../../new_fields/List"; +import { listSpec } from "../../../new_fields/Schema"; +import { ScriptField } from "../../../new_fields/ScriptField"; +import { BoolCast, Cast, NumCast, StrCast } from "../../../new_fields/Types"; import { Utils } from "../../../Utils"; -import KeyRestrictionRow from "./KeyRestrictionRow"; +import { DragManager } from "../../util/DragManager"; import { CompileScript } from "../../util/Scripting"; -import { ScriptField } from "../../../new_fields/ScriptField"; -import { CollectionSchemaView } from "./CollectionSchemaView"; +import { undoBatch } from "../../util/UndoManager"; +import { EditableView } from "../EditableView"; import { COLLECTION_BORDER_WIDTH } from "../globalCssVariables.scss"; -import { listSpec } from "../../../new_fields/Schema"; -import { List } from "../../../new_fields/List"; -import { Id } from "../../../new_fields/FieldSymbols"; -import { threadId } from "worker_threads"; -import { DragManager } from "../../util/DragManager"; +import { DocLike } from "../MetadataEntryMenu"; +import { CollectionViewType } from "./CollectionBaseView"; +import { CollectionView } from "./CollectionView"; +import "./CollectionViewChromes.scss"; +import KeyRestrictionRow from "./KeyRestrictionRow"; const datepicker = require('js-datepicker'); -import * as $ from 'jquery'; -import { firebasedynamiclinks } from "googleapis/build/src/apis/firebasedynamiclinks"; interface CollectionViewChromeProps { CollectionView: CollectionView; @@ -51,7 +46,6 @@ export class CollectionViewBaseChrome extends React.Component { let re: any = /(!)?\(\(\(doc\.(\w+)\s+&&\s+\(doc\.\w+\s+as\s+\w+\)\.includes\(\"(\w+)\"\)/g; @@ -91,11 +85,6 @@ export class CollectionViewBaseChrome extends React.Component { - setTimeout(() => this._picker = datepicker("#" + this._datePickerElGuid, { - disabler: (date: Date) => date > new Date(), - onSelect: (instance: any, date: Date) => runInAction(() => this._dateValue = date), - dateSelected: new Date() - }), 1000); let fields: Filter[] = []; if (this.filterValue) { @@ -306,6 +295,15 @@ export class CollectionViewBaseChrome extends React.Component { + if (node) { + this._picker = datepicker("#" + node.id, { + disabler: (date: Date) => date > new Date(), + onSelect: (instance: any, date: Date) => runInAction(() => this._dateValue = date), + dateSelected: new Date() + }); + } + } render() { let collapsed = this.props.CollectionView.props.Document.chromeStatus !== "enabled"; return ( @@ -366,7 +364,8 @@ export class CollectionViewBaseChrome extends React.Component1 year of runInAction(() => this._dateValue = e.target.value)} onPointerDown={this.openDatePicker} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index d69ece421..3be6aa3d3 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -622,20 +622,19 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { getScale = () => this.Document.scale ? this.Document.scale : 1; - getChildDocumentViewProps(childDocLayout: Doc): DocumentViewProps { - let pair = Doc.GetLayoutDataDocPair(this.props.Document, this.props.DataDoc, this.props.fieldKey, childDocLayout); + getChildDocumentViewProps(childLayout: Doc, childData?: Doc): DocumentViewProps { return { - DataDoc: pair.data, - Document: pair.layout, + DataDoc: childData, + Document: childLayout, addDocument: this.props.addDocument, removeDocument: this.props.removeDocument, moveDocument: this.props.moveDocument, onClick: this.props.onClick, - ScreenToLocalTransform: pair.layout.z ? this.getTransformOverlay : this.getTransform, + ScreenToLocalTransform: childLayout.z ? this.getTransformOverlay : this.getTransform, renderDepth: this.props.renderDepth + 1, - selectOnLoad: pair.layout[Id] === this._selectOnLoaded, - PanelWidth: pair.layout[WidthSym], - PanelHeight: pair.layout[HeightSym], + selectOnLoad: childLayout[Id] === this._selectOnLoaded, + PanelWidth: childLayout[WidthSym], + PanelHeight: childLayout[HeightSym], ContentScaling: returnOne, ContainingCollectionView: this.props.CollectionView, focus: this.focusDocument, @@ -745,12 +744,15 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { const pos = script ? this.getCalculatedPositions(script, { doc, index: prev.length, collection: this.Document, docs, state }) : { x: Cast(doc.x, "number"), y: Cast(doc.y, "number"), z: Cast(doc.z, "number"), width: Cast(doc.width, "number"), height: Cast(doc.height, "number") }; state = pos.state === undefined ? state : pos.state; - prev.push({ - ele: , - bounds: (pos.x !== undefined && pos.y !== undefined) ? { x: pos.x, y: pos.y, z: pos.z, width: NumCast(pos.width), height: NumCast(pos.height) } : undefined - }); + let pair = Doc.GetLayoutDataDocPair(this.props.Document, this.props.DataDoc, this.props.fieldKey, doc); + if (pair.layout && !(pair.data instanceof Promise)) { + prev.push({ + ele: , + bounds: (pos.x !== undefined && pos.y !== undefined) ? { x: pos.x, y: pos.y, z: pos.z, width: NumCast(pos.width), height: NumCast(pos.height) } : undefined + }); + } } } return prev; diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index b901bdcfb..d77662355 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -68,7 +68,7 @@ export class DocumentContentsView extends React.Component(Docu private _lastTap: number = 0; private _doubleTap = false; private _hitExpander = false; + private _hitTemplateDrag = false; private _mainCont = React.createRef(); private _dropDisposer?: DragManager.DragDropDisposer; _animateToIconDisposer?: IReactionDisposer; @@ -228,7 +229,7 @@ export class DocumentView extends DocComponent(Docu } get dataDoc() { - if (this.props.DataDoc === undefined && this.props.Document.layout instanceof Doc) { + if (this.props.DataDoc === undefined && (this.props.Document.layout instanceof Doc || this.props.Document instanceof Promise)) { // if there is no dataDoc (ie, we're not rendering a temlplate layout), but this document // has a template layout document, then we will render the template layout but use // this document as the data document for the layout. @@ -236,7 +237,7 @@ export class DocumentView extends DocComponent(Docu } return this.props.DataDoc !== this.props.Document ? this.props.DataDoc : undefined; } - startDragging(x: number, y: number, dropAction: dropActionType, dragSubBullets: boolean) { + startDragging(x: number, y: number, dropAction: dropActionType, dragSubBullets: boolean, applyAsTemplate?: boolean) { if (this._mainCont.current) { let allConnected = [this.props.Document, ...(dragSubBullets ? DocListCast(this.props.Document.subBulletDocs) : [])]; let alldataConnected = [this.dataDoc, ...(dragSubBullets ? DocListCast(this.props.Document.subBulletDocs) : [])]; @@ -247,6 +248,7 @@ export class DocumentView extends DocComponent(Docu dragData.xOffset = xoff; dragData.yOffset = yoff; dragData.moveDocument = this.props.moveDocument; + dragData.applyAsTemplate = applyAsTemplate; DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { handlers: { dragComplete: action(emptyFunction) @@ -377,15 +379,19 @@ export class DocumentView extends DocComponent(Docu } } } + + onPointerDown = (e: React.PointerEvent): void => { if (e.nativeEvent.cancelBubble) return; this._downX = e.clientX; this._downY = e.clientY; this._hitExpander = DocListCast(this.props.Document.subBulletDocs).length > 0; - // if (e.shiftKey && e.buttons === 1 && CollectionDockingView.Instance) { - // CollectionDockingView.Instance.StartOtherDrag(e, [Doc.MakeAlias(this.props.Document)], [this.dataDoc]); - // e.stopPropagation(); - // } else { + this._hitTemplateDrag = false; + for (let element = (e.target as any); element && !this._hitTemplateDrag; element = element.parentElement) { + if (element.className && element.className.toString() === "collectionViewBaseChrome-collapse") { + this._hitTemplateDrag = true; + } + } if (this.active) e.stopPropagation(); // events stop at the lowest document that is active. document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); @@ -399,7 +405,7 @@ export class DocumentView extends DocComponent(Docu if (!e.altKey && !this.topMost && e.buttons === 1 && !BoolCast(this.props.Document.lockedPosition)) { document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); - this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey ? "alias" : undefined, this._hitExpander); + this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey ? "alias" : undefined, this._hitExpander, this._hitTemplateDrag); } } e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document' however it does mark the event as cancelBubble=true which we test for in the move event handlers @@ -457,6 +463,10 @@ export class DocumentView extends DocComponent(Docu DocUtils.MakeLink(annotationDoc, targetDoc, this.props.ContainingCollectionView!.props.Document, `Link from ${StrCast(annotationDoc.title)}`); } + if (de.data instanceof DragManager.DocumentDragData && de.data.applyAsTemplate) { + Doc.ApplyTemplateTo(de.data.draggedDocuments[0], this.props.Document, this.props.DataDoc); + e.stopPropagation(); + } if (de.data instanceof DragManager.LinkDragData) { let sourceDoc = de.data.linkSourceDocument; let destDoc = this.props.Document; @@ -679,7 +689,6 @@ export class DocumentView extends DocComponent(Docu cm.addItem({ description: "Share...", subitems: usersMenu, icon: "share" }); if (!ClientUtils.RELEASE) { let setWriteMode = (mode: DocServer.WriteMode) => { - console.log(DocServer.WriteMode[mode]); DocServer.AclsMode = mode; const mode1 = mode; const mode2 = mode === DocServer.WriteMode.Default ? mode : DocServer.WriteMode.Playground; diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index f7890e5a6..0e347ca67 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -167,7 +167,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe FormattedTextBox._toolTipTextMenu && (FormattedTextBox._toolTipTextMenu.HackToFixTextSelectionGlitch = false); if (state.selection.empty && FormattedTextBox._toolTipTextMenu) { const marks = tx.storedMarks; - console.log(marks); if (marks) { FormattedTextBox._toolTipTextMenu.mark_key_pressed(marks); } } this._applyingChange = true; @@ -296,10 +295,10 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field2))) ); - this.props.isOverlay && (this._heightReactionDisposer = reaction( + this._heightReactionDisposer = reaction( () => this.props.Document[WidthSym](), () => this.tryUpdateHeight() - )); + ); this._textReactionDisposer = reaction( () => this.extensionDoc, @@ -448,8 +447,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe if (this.props.selectOnLoad) { if (!this.props.isOverlay) this.props.select(false); else this._editorView!.focus(); - this.tryUpdateHeight(); } + this.tryUpdateHeight(); } componentWillUnmount() { @@ -610,9 +609,10 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe @action tryUpdateHeight() { - if (this.props.Document.autoHeight && this.props.isOverlay) { + if (this.props.Document.autoHeight && this._ref.current!.scrollHeight !== 0) { + console.log("DT = " + this.props.Document.title + " " + this._ref.current!.clientHeight + " " + this._ref.current!.scrollHeight + " " + this._ref.current!.textContent) let xf = this._ref.current!.getBoundingClientRect(); - let scrBounds = this.props.ScreenToLocalTransform().transformBounds(0, 0, xf.width, xf.height); + let scrBounds = this.props.ScreenToLocalTransform().transformBounds(0, 0, xf.width, this._ref.current!.textContent === "" ? 35 : this._ref.current!.scrollHeight); let nh = this.props.Document.isTemplate ? 0 : NumCast(this.dataDoc.nativeHeight, 0); let dh = NumCast(this.props.Document.height, 0); let sh = scrBounds.height; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 708e00576..6fc94a140 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -89,10 +89,7 @@ export class ImageBox extends DocComponent(ImageD drop = (e: Event, de: DragManager.DropEvent) => { if (de.data instanceof DragManager.DocumentDragData) { de.data.droppedDocuments.forEach(action((drop: Doc) => { - if (de.mods === "CtrlKey") { - Doc.ApplyTemplateTo(drop, this.props.Document, this.props.DataDoc); - e.stopPropagation(); - } else if (de.mods === "AltKey" && /*this.dataDoc !== this.props.Document &&*/ drop.data instanceof ImageField) { + if (de.mods === "AltKey" && /*this.dataDoc !== this.props.Document &&*/ drop.data instanceof ImageField) { Doc.GetProto(this.dataDoc)[this.props.fieldKey] = new ImageField(drop.data.url); e.stopPropagation(); } else if (de.mods === "MetaKey") { @@ -321,7 +318,7 @@ export class ImageBox extends DocComponent(ImageD let rotation = NumCast(this.dataDoc.rotation) % 180; let realsize = rotation === 90 || rotation === 270 ? { height: size.width, width: size.height } : size; let aspect = realsize.height / realsize.width; - if (Math.abs(NumCast(layoutdoc.height) - realsize.height) > 1 || Math.abs(NumCast(layoutdoc.width) - realsize.width) > 1) { + if (layoutdoc.nativeHeight !== 0 && layoutdoc.nativeWidth !== 0 && (Math.abs(NumCast(layoutdoc.height) - realsize.height) > 1 || Math.abs(NumCast(layoutdoc.width) - realsize.width) > 1)) { setTimeout(action(() => { layoutdoc.height = layoutdoc[WidthSym]() * aspect; layoutdoc.nativeHeight = realsize.height; diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index 31f1f7a12..ca05dfa45 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -446,20 +446,23 @@ export namespace Doc { if (expandedTemplateLayout instanceof Doc) { return expandedTemplateLayout; } + if (expandedTemplateLayout instanceof Promise) { + return undefined; + } let expandedLayoutFieldKey = "Layout[" + templateLayoutDoc[Id] + "]"; expandedTemplateLayout = dataDoc[expandedLayoutFieldKey]; if (expandedTemplateLayout instanceof Doc) { return expandedTemplateLayout; } if (expandedTemplateLayout === undefined) { - setTimeout(() => - dataDoc[expandedLayoutFieldKey] = Doc.MakeDelegate(templateLayoutDoc, undefined, "[" + templateLayoutDoc.title + "]"), 0); + setTimeout(() => dataDoc[expandedLayoutFieldKey] === undefined && + (dataDoc[expandedLayoutFieldKey] = Doc.MakeDelegate(templateLayoutDoc, undefined, "[" + templateLayoutDoc.title + "]")), 0); } - return templateLayoutDoc; // use the templateLayout when it's not a template or the expandedTemplate is pending. + return undefined; // use the templateLayout when it's not a template or the expandedTemplate is pending. } export function GetLayoutDataDocPair(doc: Doc, dataDoc: Doc | undefined, fieldKey: string, childDocLayout: Doc) { - let layoutDoc = childDocLayout; + let layoutDoc: Doc | undefined = childDocLayout; let resolvedDataDoc = !doc.isTemplate && dataDoc !== doc && dataDoc ? Doc.GetDataDoc(dataDoc) : undefined; if (resolvedDataDoc && Doc.WillExpandTemplateLayout(childDocLayout, resolvedDataDoc)) { Doc.UpdateDocumentExtensionForField(resolvedDataDoc, fieldKey); -- cgit v1.2.3-70-g09d2 From dc587b0fb493d869e6cd38fa94b81105da4fbaab Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 20 Aug 2019 20:03:08 -0400 Subject: finished UI --- src/client/views/DocumentDecorations.scss | 6 +- src/client/views/DocumentDecorations.tsx | 92 ++++++++++++++++++----------- src/client/views/nodes/FormattedTextBox.tsx | 3 +- src/new_fields/RichTextField.ts | 7 ++- 4 files changed, 67 insertions(+), 41 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 0b7411fca..ef7159370 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -255,4 +255,8 @@ $linkGap : 3px; input { margin-right: 10px; } -} \ No newline at end of file +} + +@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } +@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } +@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } \ No newline at end of file diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 05239073b..7645af054 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,5 +1,5 @@ import { library, IconProp } from '@fortawesome/fontawesome-svg-core'; -import { faLink, faTag, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faStopCircle, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons'; +import { faLink, faTag, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faStopCircle, faCloudUploadAlt, faSyncAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; @@ -41,8 +41,10 @@ library.add(faArrowAltCircleUp); library.add(faStopCircle); library.add(faCheckCircle); library.add(faCloudUploadAlt); +library.add(faSyncAlt); const cloud: IconProp = "cloud-upload-alt"; +const fetch: IconProp = "sync-alt"; @observer export class DocumentDecorations extends React.Component<{}, { value: string }> { @@ -76,48 +78,47 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> @observable public pushIcon: IconProp = "arrow-alt-circle-up"; @observable public pullIcon: IconProp = "arrow-alt-circle-down"; @observable public pullColor: string = "white"; + @observable public isAnimatingFetch = false; public pullColorAnimating = false; private pullAnimating = false; private pushAnimating = false; public startPullOutcome = action((success: boolean) => { - if (this.pullAnimating) { - return; + if (!this.pullAnimating) { + this.pullAnimating = true; + this.pullIcon = success ? "check-circle" : "stop-circle"; + setTimeout(() => runInAction(() => { + this.pullIcon = "arrow-alt-circle-down"; + this.pullAnimating = false; + }), 1000); } - this.pullAnimating = true; - this.pullIcon = success ? "check-circle" : "stop-circle"; - setTimeout(() => runInAction(() => { - this.pullIcon = "arrow-alt-circle-down"; - this.pullAnimating = false; - }), 1000); }); public startPushOutcome = action((success: boolean) => { - if (this.pushAnimating) { - return; + if (!this.pushAnimating) { + this.pushAnimating = true; + this.pushIcon = success ? "check-circle" : "stop-circle"; + setTimeout(() => runInAction(() => { + this.pushIcon = "arrow-alt-circle-up"; + this.pushAnimating = false; + }), 1000); } - this.pushAnimating = true; - this.pushIcon = success ? "check-circle" : "stop-circle"; - setTimeout(() => runInAction(() => { - this.pushIcon = "arrow-alt-circle-up"; - this.pushAnimating = false; - }), 1000); }); - public setPullState = (unchanged: boolean) => { - if (this.pullColorAnimating) { - return; + public setPullState = action((unchanged: boolean) => { + this.isAnimatingFetch = false; + if (!this.pullColorAnimating) { + this.pullColorAnimating = true; + this.pullColor = unchanged ? "lawngreen" : "red"; + setTimeout(this.clearPullColor, 1000); } - this.pullColorAnimating = true; - this.pullColor = unchanged ? "lawngreen" : "red"; - setTimeout(() => { - runInAction(() => { - this.pullColor = "white"; - this.pullColorAnimating = false; - }); - }, 2000); - } + }); + + private clearPullColor = action(() => { + this.pullColor = "white"; + this.pullColorAnimating = false; + }); constructor(props: Readonly<{}>) { super(props); @@ -679,7 +680,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> let canPush = this.targetDoc.data && this.targetDoc.data instanceof RichTextField; if (!canPush) return (null); let published = Doc.GetProto(this.targetDoc)[GoogleRef] !== undefined; - let icon: IconProp = published ? (this.pushIcon as any) : (cloud as any); + let icon: IconProp = published ? (this.pushIcon as any) : cloud; return (
{ @@ -695,14 +696,33 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> considerGoogleDocsPull = () => { let canPull = this.targetDoc.data && this.targetDoc.data instanceof RichTextField; let dataDoc = Doc.GetProto(this.targetDoc); - if (!canPull || !dataDoc[GoogleRef] || dataDoc.unchanged) return (null); + if (!canPull || !dataDoc[GoogleRef]) return (null); + let icon = !dataDoc.unchanged ? (this.pullIcon as any) : fetch; + let animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none"; return (
-
{ - DocumentDecorations.hasPulledHack = false; - this.targetDoc[Pulls] = NumCast(this.targetDoc[Pulls]) + 1; - }}> - +
{ + this.clearPullColor(); + DocumentDecorations.hasPulledHack = false; + this.targetDoc[Pulls] = NumCast(this.targetDoc[Pulls]) + 1; + dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true); + }}> +
); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 8a355a425..e06be7079 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -354,7 +354,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe () => { if (!DocumentDecorations.hasPulledHack) { DocumentDecorations.hasPulledHack = true; - this.pullFromGoogleDoc(this.updateState); + let unchanged = this.dataDoc.unchanged; + this.pullFromGoogleDoc(unchanged ? this.checkState : this.updateState); } } ); diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts index ab58329f9..cae5623e6 100644 --- a/src/new_fields/RichTextField.ts +++ b/src/new_fields/RichTextField.ts @@ -38,9 +38,10 @@ export class RichTextField extends ObjectField { let blockText = (block: any) => block.text; let concatenateParagraph = (p: any) => (p.content ? p.content.map(blockText).join(joiner) : "") + delimiter; - // Concatentate paragraphs and string the result together. Trim the last newline, an artifact. - let textParagraphs = paragraphs.map(concatenateParagraph); - return textParagraphs.join(joiner).trimEnd(delimiter); + // Concatentate paragraphs and string the result together + let textParagraphs: string[] = paragraphs.map(concatenateParagraph); + let plainText = textParagraphs.join(joiner); + return plainText.substring(0, plainText.length - 1); } [FromPlainText](plainText: string) { -- cgit v1.2.3-70-g09d2 From bd734ec84fa8fae36fceebf74da44216a0746b23 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 20 Aug 2019 21:02:05 -0400 Subject: open remote document on ctrl click --- src/client/views/DocumentDecorations.tsx | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index d5d59a8ee..3482fd043 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,5 +1,5 @@ import { library, IconProp } from '@fortawesome/fontawesome-svg-core'; -import { faLink, faTag, faTimes, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faStopCircle, faCloudUploadAlt, faSyncAlt } from '@fortawesome/free-solid-svg-icons'; +import { faLink, faTag, faTimes, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faStopCircle, faCloudUploadAlt, faSyncAlt, faShare } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; @@ -43,6 +43,7 @@ library.add(faStopCircle); library.add(faCheckCircle); library.add(faCloudUploadAlt); library.add(faSyncAlt); +library.add(faShare); const cloud: IconProp = "cloud-upload-alt"; const fetch: IconProp = "sync-alt"; @@ -81,6 +82,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> @observable public pullIcon: IconProp = "arrow-alt-circle-down"; @observable public pullColor: string = "white"; @observable public isAnimatingFetch = false; + @observable public openHover = false; public pullColorAnimating = false; private pullAnimating = false; @@ -710,21 +712,29 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> let dataDoc = Doc.GetProto(this.targetDoc); if (!canPull || !dataDoc[GoogleRef]) return (null); let icon = !dataDoc.unchanged ? (this.pullIcon as any) : fetch; + icon = this.openHover ? "share" : icon; let animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none"; + let title = `${!dataDoc.unchanged ? "Pull from" : "Fetch"} Google Docs`; return (
{ - this.clearPullColor(); - DocumentDecorations.hasPulledHack = false; - this.targetDoc[Pulls] = NumCast(this.targetDoc[Pulls]) + 1; - dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true); + onPointerEnter={e => e.ctrlKey && runInAction(() => this.openHover = true)} + onPointerLeave={() => runInAction(() => this.openHover = false)} + onClick={e => { + if (e.ctrlKey) { + window.open(`https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`); + } else { + this.clearPullColor(); + DocumentDecorations.hasPulledHack = false; + this.targetDoc[Pulls] = NumCast(this.targetDoc[Pulls]) + 1; + dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true); + } }}> Date: Tue, 20 Aug 2019 21:05:25 -0400 Subject: auto height set on google docs publishing --- src/client/views/DocumentDecorations.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 3482fd043..891fd7847 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -694,6 +694,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> let canPush = this.targetDoc.data && this.targetDoc.data instanceof RichTextField; if (!canPush) return (null); let published = Doc.GetProto(this.targetDoc)[GoogleRef] !== undefined; + if (!published) { + this.targetDoc.autoHeight = true; + } let icon: IconProp = published ? (this.pushIcon as any) : cloud; return (
-- cgit v1.2.3-70-g09d2 From 820ad7343816ee9d5881eefdbcbe8783fe903257 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 20 Aug 2019 21:07:43 -0400 Subject: animation fix --- src/client/views/nodes/FormattedTextBox.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 2705fac14..d4cbb5116 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -1,6 +1,6 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEdit, faSmile, faTextHeight, faUpload } from '@fortawesome/free-solid-svg-icons'; -import { action, computed, IReactionDisposer, Lambda, observable, reaction } from "mobx"; +import { action, computed, IReactionDisposer, Lambda, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import { baseKeymap } from "prosemirror-commands"; import { history } from "prosemirror-history"; @@ -298,6 +298,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } this.pullFromGoogleDoc(this.checkState); + runInAction(() => DocumentDecorations.Instance.isAnimatingFetch = true); this._reactionDisposer = reaction( () => { -- cgit v1.2.3-70-g09d2 From c0439996ec8b4858c48a7871120e19bb7c06c67d Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 20 Aug 2019 21:37:32 -0400 Subject: drag and drop google docs tweaks --- package.json | 4 +--- src/client/DocServer.ts | 1 - src/client/views/collections/CollectionSubView.tsx | 8 ++++---- src/client/views/nodes/FormattedTextBox.tsx | 1 + 4 files changed, 6 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/package.json b/package.json index e6a0a54b9..de1f3f6e6 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,6 @@ "@types/cookie-parser": "^1.4.1", "@types/cookie-session": "^2.0.36", "@types/d3-format": "^1.3.1", - "@types/diff": "^4.0.2", "@types/dotenv": "^6.1.1", "@types/express": "^4.16.1", "@types/express-flash": "0.0.0", @@ -128,7 +127,6 @@ "cookie-session": "^2.0.0-beta.3", "crypto-browserify": "^3.11.0", "d3-format": "^1.3.2", - "diff": "^4.0.1", "dotenv": "^8.0.0", "express": "^4.16.4", "express-flash": "0.0.2", @@ -221,4 +219,4 @@ "xoauth2": "^1.2.0", "youtube": "^0.1.0" } -} +} \ No newline at end of file diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts index 56d9147ae..2cec1046b 100644 --- a/src/client/DocServer.ts +++ b/src/client/DocServer.ts @@ -5,7 +5,6 @@ import { Utils, emptyFunction } from '../Utils'; import { SerializationHelper } from './util/SerializationHelper'; import { RefField } from '../new_fields/RefField'; import { Id, HandleUpdate } from '../new_fields/FieldSymbols'; -import { docs_v1 } from 'googleapis'; /** * This class encapsulates the transfer and cross-client synchronization of diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 3deec22b5..5b50c545c 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -17,7 +17,7 @@ import { DragManager } from "../../util/DragManager"; import { undoBatch, UndoManager } from "../../util/UndoManager"; import { DocComponent } from "../DocComponent"; import { FieldViewProps } from "../nodes/FieldView"; -import { FormattedTextBox, Blank } from "../nodes/FormattedTextBox"; +import { FormattedTextBox, GoogleRef } from "../nodes/FormattedTextBox"; import { CollectionPDFView } from "./CollectionPDFView"; import { CollectionVideoView } from "./CollectionVideoView"; import { CollectionView } from "./CollectionView"; @@ -209,11 +209,11 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T) { } let matches: RegExpExecArray | null; if ((matches = /(https:\/\/)?docs\.google\.com\/document\/d\/([^\\]+)\/edit/g.exec(text)) !== null) { - let newBox = Docs.Create.TextDocument({ ...options, width: 600, height: 400, title: "Fetching title from Google Docs..." }); + let newBox = Docs.Create.TextDocument({ ...options, width: 400, height: 200, title: "Awaiting title from Google Docs..." }); let proto = newBox.proto!; proto.autoHeight = true; - proto.googleDocId = matches[2]; - proto.data = "Fetching contents from Google Docs..."; + proto[GoogleRef] = matches[2]; + proto.data = "Please select and then click on this document's pull button to load its contents from from Google Docs..."; proto.backgroundColor = "#eeeeff"; this.props.addDocument(newBox); return; diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index d4cbb5116..2b01fb70a 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -434,6 +434,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe delete dataDoc[GoogleRef]; } DocumentDecorations.Instance.startPullOutcome(pullSuccess); + this.tryUpdateHeight(); } checkState = (exportState: GoogleApiClientUtils.Docs.ReadResult, dataDoc: Doc) => { -- cgit v1.2.3-70-g09d2 From 73bb0f572e261850583b698dd819d35a6fe768ec Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 20 Aug 2019 21:42:37 -0400 Subject: cleanup --- src/client/views/MainView.tsx | 2 +- src/client/views/collections/CollectionSubView.tsx | 2 +- src/client/views/nodes/FormattedTextBox.tsx | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index e85374f6a..f28844009 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -15,7 +15,7 @@ import { listSpec } from '../../new_fields/Schema'; import { BoolCast, Cast, FieldValue, StrCast } from '../../new_fields/Types'; import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils'; import { RouteStore } from '../../server/RouteStore'; -import { emptyFunction, returnOne, returnTrue, Utils, returnEmptyString, PostToServer } from '../../Utils'; +import { emptyFunction, returnOne, returnTrue, Utils, returnEmptyString } from '../../Utils'; import { DocServer } from '../DocServer'; import { Docs } from '../documents/Documents'; import { ClientUtils } from '../util/ClientUtils'; diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 5b50c545c..99e5ab7b3 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -213,7 +213,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T) { let proto = newBox.proto!; proto.autoHeight = true; proto[GoogleRef] = matches[2]; - proto.data = "Please select and then click on this document's pull button to load its contents from from Google Docs..."; + proto.data = "Please select this document and then click on its pull button to load its contents from from Google Docs..."; proto.backgroundColor = "#eeeeff"; this.props.addDocument(newBox); return; diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 2b01fb70a..606e8edb0 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -389,9 +389,9 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe }; } let redo = async () => { - if (this._editorView && reference) { - let data = Cast(this.dataDoc.data, RichTextField); - let content = data ? data[ToPlainText]() : this._editorView.state.doc.textContent; + let data = Cast(this.dataDoc.data, RichTextField); + if (this._editorView && reference && data) { + let content = data[ToPlainText](); let response = await GoogleApiClientUtils.Docs.write({ reference, content, mode }); let pushSuccess = response !== undefined && !("errors" in response); dataDoc.unchanged = pushSuccess; -- cgit v1.2.3-70-g09d2 From 9984f2f19001c07e63738947172e12da25e4498e Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 20 Aug 2019 21:55:46 -0400 Subject: bulleted list --- src/client/util/DictationManager.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts index b00846756..488a146bf 100644 --- a/src/client/util/DictationManager.ts +++ b/src/client/util/DictationManager.ts @@ -13,6 +13,7 @@ import { AudioField, ImageField } from "../../new_fields/URLField"; import { HistogramField } from "../northstar/dash-fields/HistogramField"; import { MainView } from "../views/MainView"; import { Utils } from "../../Utils"; +import { RichTextField } from "../../new_fields/RichTextField"; /** * This namespace provides a singleton instance of a manager that @@ -300,11 +301,15 @@ export namespace DictationManager { } }], - ["promote", { + ["create bulleted note", { action: (target: DocumentView) => { - console.log(target); - }, - restrictTo: [DocumentType.TEXT] + let newBox = Docs.Create.TextDocument({ width: 400, height: 200, title: "My Outline" }); + let proto = newBox.proto!; + let proseMirrorState = '"{"doc":{"type":"doc","content":[{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"type":"text","text":""}]}]}]}]},"selection":{"type":"text","anchor":1,"head":1}}"'; + proto.data = new RichTextField(proseMirrorState); + proto.backgroundColor = "#eeffff"; + target.props.addDocTab(newBox, proto, "onRight"); + } }] ]); -- cgit v1.2.3-70-g09d2 From 8fa3c03f1fae853e3c626e748aef76f9b7bbc875 Mon Sep 17 00:00:00 2001 From: kimdahey Date: Tue, 20 Aug 2019 22:42:25 -0400 Subject: initial commit --- package.json | 2 +- src/client/util/DictationManager.ts | 12 ++++++++++-- src/client/views/nodes/FormattedTextBox.tsx | 20 ++++++++++++++++++++ 3 files changed, 31 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/package.json b/package.json index de1f3f6e6..cd60b7b55 100644 --- a/package.json +++ b/package.json @@ -219,4 +219,4 @@ "xoauth2": "^1.2.0", "youtube": "^0.1.0" } -} \ No newline at end of file +} diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts index 488a146bf..758482eae 100644 --- a/src/client/util/DictationManager.ts +++ b/src/client/util/DictationManager.ts @@ -301,11 +301,16 @@ export namespace DictationManager { } }], - ["create bulleted note", { + ["new outline", { action: (target: DocumentView) => { let newBox = Docs.Create.TextDocument({ width: 400, height: 200, title: "My Outline" }); + newBox.autoHeight = true; let proto = newBox.proto!; - let proseMirrorState = '"{"doc":{"type":"doc","content":[{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"type":"text","text":""}]}]}]}]},"selection":{"type":"text","anchor":1,"head":1}}"'; + proto.page = -1; + let prompt = "Press alt + r to start dictating here..."; + let head = 3; + let anchor = head + prompt.length; + let proseMirrorState = `{"doc":{"type":"doc","content":[{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"type":"text","text":"${prompt}"}]}]}]}]},"selection":{"type":"text","anchor":${anchor},"head":${head}}}`; proto.data = new RichTextField(proseMirrorState); proto.backgroundColor = "#eeffff"; target.props.addDocTab(newBox, proto, "onRight"); @@ -323,6 +328,9 @@ export namespace DictationManager { let what = matches[2]; let dataDoc = Doc.GetProto(target.props.Document); let fieldKey = "data"; + if (isNaN(count)) { + return; + } for (let i = 0; i < count; i++) { let created: Doc | undefined; switch (what) { diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 606e8edb0..e460e3e50 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -35,6 +35,7 @@ import React = require("react"); import { GoogleApiClientUtils, Pulls, Pushes } from '../../apis/google_docs/GoogleApiClientUtils'; import { DocumentDecorations } from '../DocumentDecorations'; import { MainOverlayTextBox } from '../MainOverlayTextBox'; +import { DictationManager } from '../../util/DictationManager'; library.add(faEdit); library.add(faSmile, faTextHeight, faUpload); @@ -265,7 +266,25 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } } + setCurrentBulletContent = (value: string) => { + if (this._editorView) { + this._editorView.state; + } + } + + considerRecordingSession = (e: KeyboardEvent) => { + if (e.which === 82 && e.altKey) { + let continuous = { indefinite: true }; + DictationManager.Controls.listen({ + interimHandler: this.setCurrentBulletContent, + continuous + }); + } + } + componentDidMount() { + document.removeEventListener("keypress", this.considerRecordingSession); + document.addEventListener("keypress", this.considerRecordingSession); const config = { schema, inpRules, //these currently don't do anything, but could eventually be helpful @@ -576,6 +595,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } componentWillUnmount() { + document.removeEventListener("keypress", this.considerRecordingSession); this._editorView && this._editorView.destroy(); this._reactionDisposer && this._reactionDisposer(); this._proxyReactionDisposer && this._proxyReactionDisposer(); -- cgit v1.2.3-70-g09d2 From d260d9abc13ae60c3206c3110f2d7f23ceeb2449 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 21 Aug 2019 05:29:07 -0400 Subject: prosemirror bulleted list dictation integration --- src/client/util/DictationManager.ts | 48 ++++++++++-------- src/client/views/DocumentDecorations.tsx | 3 +- src/client/views/nodes/FormattedTextBox.tsx | 76 ++++++++++++++++++++++++----- 3 files changed, 93 insertions(+), 34 deletions(-) (limited to 'src') diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts index 758482eae..781e5e465 100644 --- a/src/client/util/DictationManager.ts +++ b/src/client/util/DictationManager.ts @@ -45,7 +45,7 @@ export namespace DictationManager { export namespace Controls { - const infringe = "unable to process: dictation manager still involved in previous session"; + export const Infringed = "unable to process: dictation manager still involved in previous session"; const intraSession = ". "; const interSession = " ... "; @@ -69,30 +69,32 @@ export namespace DictationManager { delimiters: DelimiterArgs; interimHandler: InterimResultHandler; tryExecute: boolean; + terminators: string[]; } export const listen = async (options?: Partial) => { let results: string | undefined; - let main = MainView.Instance; + // let main = MainView.Instance; - main.dictationOverlayVisible = true; - main.isListening = { interim: false }; + // main.dictationOverlayVisible = true; + // main.isListening = { interim: false }; try { results = await listenImpl(options); if (results) { Utils.CopyText(results); - main.isListening = false; - let execute = options && options.tryExecute; - main.dictatedPhrase = execute ? results.toLowerCase() : results; - main.dictationSuccess = execute ? await DictationManager.Commands.execute(results) : true; + // main.isListening = false; + // let execute = options && options.tryExecute; + // main.dictatedPhrase = execute ? results.toLowerCase() : results; + // main.dictationSuccess = execute ? await DictationManager.Commands.execute(results) : true; + options && options.tryExecute && await DictationManager.Commands.execute(results); } } catch (e) { - main.isListening = false; - main.dictatedPhrase = results = `dictation error: ${"error" in e ? e.error : "unknown error"}`; - main.dictationSuccess = false; + // main.isListening = false; + // main.dictatedPhrase = results = `dictation error: ${"error" in e ? e.error : "unknown error"}`; + // main.dictationSuccess = false; } finally { - main.initiateDictationFade(); + // main.initiateDictationFade(); } return results; @@ -100,7 +102,7 @@ export namespace DictationManager { const listenImpl = (options?: Partial) => { if (isListening) { - return infringe; + return Infringed; } isListening = true; @@ -128,6 +130,12 @@ export namespace DictationManager { recognizer.onresult = (e: SpeechRecognitionEvent) => { current = synthesize(e, intra); + let matchedTerminator: string | undefined; + if (options && options.terminators && (matchedTerminator = options.terminators.find(end => current ? current.trim().toLowerCase().endsWith(end.toLowerCase()) : false))) { + current = matchedTerminator; + recognizer.abort(); + return complete(); + } handler && handler(current); isManuallyStopped && complete(); }; @@ -163,13 +171,13 @@ export namespace DictationManager { } isManuallyStopped = true; salvageSession ? recognizer.stop() : recognizer.abort(); - let main = MainView.Instance; - if (main.dictationOverlayVisible) { - main.cancelDictationFade(); - main.dictationOverlayVisible = false; - main.dictationSuccess = undefined; - setTimeout(() => main.dictatedPhrase = placeholder, 500); - } + // let main = MainView.Instance; + // if (main.dictationOverlayVisible) { + // main.cancelDictationFade(); + // main.dictationOverlayVisible = false; + // main.dictationSuccess = undefined; + // setTimeout(() => main.dictatedPhrase = placeholder, 500); + // } }; const synthesize = (e: SpeechRecognitionEvent, delimiter?: string) => { diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 891fd7847..cc8e57af9 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -730,7 +730,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> onPointerEnter={e => e.ctrlKey && runInAction(() => this.openHover = true)} onPointerLeave={() => runInAction(() => this.openHover = false)} onClick={e => { - if (e.ctrlKey) { + if (e.altKey) { + e.preventDefault(); window.open(`https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`); } else { this.clearPullColor(); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index e460e3e50..222ebed8f 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -6,7 +6,7 @@ import { baseKeymap } from "prosemirror-commands"; import { history } from "prosemirror-history"; import { keymap } from "prosemirror-keymap"; import { Fragment, Node, Node as ProsNode, NodeType, Slice } from "prosemirror-model"; -import { EditorState, Plugin, Transaction } from "prosemirror-state"; +import { EditorState, Plugin, Transaction, TextSelection } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import { DateField } from '../../../new_fields/DateField'; import { Doc, DocListCast, Opt, WidthSym } from "../../../new_fields/Doc"; @@ -36,6 +36,7 @@ import { GoogleApiClientUtils, Pulls, Pushes } from '../../apis/google_docs/Goog import { DocumentDecorations } from '../DocumentDecorations'; import { MainOverlayTextBox } from '../MainOverlayTextBox'; import { DictationManager } from '../../util/DictationManager'; +import { ReplaceStep } from 'prosemirror-transform'; library.add(faEdit); library.add(faSmile, faTextHeight, faUpload); @@ -181,6 +182,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe const marks = tx.storedMarks; if (marks) { FormattedTextBox._toolTipTextMenu.mark_key_pressed(marks); } } + this._applyingChange = true; const fieldkey = "preview"; if (this.extensionDoc) this.extensionDoc.text = state.doc.textBetween(0, state.doc.content.size, "\n\n"); @@ -268,23 +270,70 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe setCurrentBulletContent = (value: string) => { if (this._editorView) { - this._editorView.state; + // let next = value.endsWith("bullet"); + // if (next) { + // value = value.split("bullet")[0]; + // } + let state = this._editorView.state; + let from = state.selection.from; + let to = state.selection.to; + this._editorView.dispatch(state.tr.insertText(value, from, to)); + state = this._editorView.state; + let updated = TextSelection.create(state.doc, from, from + value.length); + this._editorView.dispatch(state.tr.setSelection(updated)); + // if (next) { + // this.nextBullet(this._editorView.state.selection.to); + // } } } - considerRecordingSession = (e: KeyboardEvent) => { - if (e.which === 82 && e.altKey) { - let continuous = { indefinite: true }; - DictationManager.Controls.listen({ - interimHandler: this.setCurrentBulletContent, - continuous - }); + nextBullet = (pos: number) => { + if (this._editorView) { + // DictationManager.Controls.stop(false); + let frag = Fragment.fromArray(this.newListItems(2)); + let slice = new Slice(frag, 2, 2); + let state = this._editorView.state; + this._editorView.dispatch(state.tr.step(new ReplaceStep(pos, pos, slice))); + pos += 4; + state = this._editorView.state; + this._editorView.dispatch(state.tr.setSelection(TextSelection.create(this._editorView.state.doc, pos, pos))); + // this.recordSession(); + } + } + + private newListItems = (count: number) => { + let listItems: any[] = []; + for (let i = 0; i < count; i++) { + listItems.push(schema.nodes.list_item.create(null, schema.nodes.paragraph.create(null))); } + return listItems; + } + + recordSession = async () => { + let completedCue = "end session"; + let results = await DictationManager.Controls.listen({ + interimHandler: this.setCurrentBulletContent, + continuous: { indefinite: false }, + terminators: [completedCue, "bullet", "next"] + }); + if (results && [DictationManager.Controls.Infringed, completedCue].includes(results)) { + DictationManager.Controls.stop(); + return; + } + this.nextBullet(this._editorView!.state.selection.to); + setTimeout(this.recordSession, 2000); + } + + recordKeyHandler = (e: KeyboardEvent) => { + if (this.props.Document !== SelectionManager.SelectedDocuments()[0].props.Document) { + return; + } + e.stopPropagation(); + e.preventDefault(); + e.which === 174 && e.altKey && this.recordSession(); } componentDidMount() { - document.removeEventListener("keypress", this.considerRecordingSession); - document.addEventListener("keypress", this.considerRecordingSession); const config = { schema, inpRules, //these currently don't do anything, but could eventually be helpful @@ -335,7 +384,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe updatedState.selection = { type: "text", anchor: end, head: end }; this._editorView.updateState(EditorState.fromJSON(config, updatedState)); } - this.tryUpdateHeight(); } } ); @@ -595,7 +643,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } componentWillUnmount() { - document.removeEventListener("keypress", this.considerRecordingSession); this._editorView && this._editorView.destroy(); this._reactionDisposer && this._reactionDisposer(); this._proxyReactionDisposer && this._proxyReactionDisposer(); @@ -678,6 +725,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe @action onFocused = (e: React.FocusEvent): void => { + document.removeEventListener("keypress", this.recordKeyHandler); + document.addEventListener("keypress", this.recordKeyHandler); if (!this.props.isOverlay) { FormattedTextBox.InputBoxOverlay = this; } else { @@ -727,6 +776,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe }); } onBlur = (e: any) => { + document.removeEventListener("keypress", this.recordKeyHandler); if (this._undoTyping) { this._undoTyping.end(); this._undoTyping = undefined; -- cgit v1.2.3-70-g09d2 From 654db73e0615e77f7206128b6e5524553d653c66 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 21 Aug 2019 05:30:39 -0400 Subject: cleanup --- src/client/views/nodes/FormattedTextBox.tsx | 57 ++++++++++++----------------- 1 file changed, 24 insertions(+), 33 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 222ebed8f..a2ea12ac5 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -268,12 +268,32 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } } + recordKeyHandler = (e: KeyboardEvent) => { + if (this.props.Document !== SelectionManager.SelectedDocuments()[0].props.Document) { + return; + } + e.stopPropagation(); + e.preventDefault(); + e.which === 174 && e.altKey && this.recordBullet(); + } + + recordBullet = async () => { + let completedCue = "end session"; + let results = await DictationManager.Controls.listen({ + interimHandler: this.setCurrentBulletContent, + continuous: { indefinite: false }, + terminators: [completedCue, "bullet", "next"] + }); + if (results && [DictationManager.Controls.Infringed, completedCue].includes(results)) { + DictationManager.Controls.stop(); + return; + } + this.nextBullet(this._editorView!.state.selection.to); + setTimeout(this.recordBullet, 2000); + } + setCurrentBulletContent = (value: string) => { if (this._editorView) { - // let next = value.endsWith("bullet"); - // if (next) { - // value = value.split("bullet")[0]; - // } let state = this._editorView.state; let from = state.selection.from; let to = state.selection.to; @@ -281,15 +301,11 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe state = this._editorView.state; let updated = TextSelection.create(state.doc, from, from + value.length); this._editorView.dispatch(state.tr.setSelection(updated)); - // if (next) { - // this.nextBullet(this._editorView.state.selection.to); - // } } } nextBullet = (pos: number) => { if (this._editorView) { - // DictationManager.Controls.stop(false); let frag = Fragment.fromArray(this.newListItems(2)); let slice = new Slice(frag, 2, 2); let state = this._editorView.state; @@ -297,7 +313,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe pos += 4; state = this._editorView.state; this._editorView.dispatch(state.tr.setSelection(TextSelection.create(this._editorView.state.doc, pos, pos))); - // this.recordSession(); } } @@ -309,30 +324,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe return listItems; } - recordSession = async () => { - let completedCue = "end session"; - let results = await DictationManager.Controls.listen({ - interimHandler: this.setCurrentBulletContent, - continuous: { indefinite: false }, - terminators: [completedCue, "bullet", "next"] - }); - if (results && [DictationManager.Controls.Infringed, completedCue].includes(results)) { - DictationManager.Controls.stop(); - return; - } - this.nextBullet(this._editorView!.state.selection.to); - setTimeout(this.recordSession, 2000); - } - - recordKeyHandler = (e: KeyboardEvent) => { - if (this.props.Document !== SelectionManager.SelectedDocuments()[0].props.Document) { - return; - } - e.stopPropagation(); - e.preventDefault(); - e.which === 174 && e.altKey && this.recordSession(); - } - componentDidMount() { const config = { schema, -- cgit v1.2.3-70-g09d2 From 2423533d1044ed14b5b356709234bbaa27fd2561 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 21 Aug 2019 10:21:02 -0400 Subject: yeet --- src/client/views/nodes/LinkMenuItem.tsx | 34 ++++++++++++++++++++++++++++----- 1 file changed, 29 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/LinkMenuItem.tsx b/src/client/views/nodes/LinkMenuItem.tsx index 12eb2c2f7..1e7ff07c8 100644 --- a/src/client/views/nodes/LinkMenuItem.tsx +++ b/src/client/views/nodes/LinkMenuItem.tsx @@ -48,7 +48,7 @@ export class LinkMenuItem extends React.Component { }, 10000); } - // NOT DONE? + // NOT TESTED // col = collection the doc is in // target = the document to center on @undoBatch @@ -77,7 +77,9 @@ export class LinkMenuItem extends React.Component { // this is the standard "follow link" (jump to document) // taken from follow link @undoBatch - jumpToLink = async (shouldZoom: boolean = false) => { + jumpToLink = async (shouldZoom: boolean) => { + //there is an issue right now so this will be false automatically + shouldZoom = false; this.highlightDoc(); let jumpToDoc = this.props.destinationDoc; let pdfDoc = FieldValue(Cast(this.props.destinationDoc, Doc)); @@ -117,12 +119,23 @@ export class LinkMenuItem extends React.Component { SelectionManager.DeselectAll(); } - //opens link in new tab in collection + // NOT TESTED + // opens link in new tab in collection // col = collection the doc is in // target = the document to center on @undoBatch openLinkColTab = ({ col, target }: { col: Doc, target: Doc }) => { this.highlightDoc(); + col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; + if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { + const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2; + const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2; + col.panX = newPanX; + col.panY = newPanY; + } + // CollectionDockingView.Instance.AddRightSplit(col, undefined); + this.props.addDocTab(col, undefined, "inTab"); + SelectionManager.DeselectAll(); } // this will open a link next to the source doc @@ -133,12 +146,23 @@ export class LinkMenuItem extends React.Component { let alias = Doc.MakeAlias(this.props.destinationDoc); let y = this.props.sourceDoc.y; let x = this.props.sourceDoc.x; + let parentView: any = undefined; + let parentDoc: Doc = this.props.sourceDoc; - console.log(x, y); + SelectionManager.SelectedDocuments().map(dv => { + if (dv.props.Document === this.props.sourceDoc) { + parentView = dv.props.ContainingCollectionView; + } + }); + + if (parentView) { + // console.log(parentDoc) + console.log(parentView.props.addDocument) + } } //set this to be the default link behavior, can be any of the above - private defaultLinkBehavior: any = this.openLinkRight; + private defaultLinkBehavior: any = this.openLinkInPlace; onEdit = (e: React.PointerEvent): void => { e.stopPropagation(); -- cgit v1.2.3-70-g09d2 From 0759b23448de29158367f344342e939dfa6eaf48 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 21 Aug 2019 11:00:08 -0400 Subject: moved links to own folder --- package.json | 2 +- src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/PreviewCursor.tsx | 2 +- src/client/views/linking/LinkEditor.scss | 145 ++++++++ src/client/views/linking/LinkEditor.tsx | 400 +++++++++++++++++++++ src/client/views/linking/LinkFollowBox.tsx | 9 + src/client/views/linking/LinkMenu.scss | 137 +++++++ src/client/views/linking/LinkMenu.tsx | 76 ++++ src/client/views/linking/LinkMenuGroup.tsx | 111 ++++++ src/client/views/linking/LinkMenuItem.tsx | 282 +++++++++++++++ src/client/views/nodes/LinkEditor.scss | 145 -------- src/client/views/nodes/LinkEditor.tsx | 400 --------------------- src/client/views/nodes/LinkMenu.scss | 137 ------- src/client/views/nodes/LinkMenu.tsx | 76 ---- src/client/views/nodes/LinkMenuGroup.tsx | 111 ------ src/client/views/nodes/LinkMenuItem.tsx | 282 --------------- src/client/views/nodes/WebBox.tsx | 3 +- .../authentication/models/current_user_utils.ts | 2 +- 18 files changed, 1165 insertions(+), 1157 deletions(-) create mode 100644 src/client/views/linking/LinkEditor.scss create mode 100644 src/client/views/linking/LinkEditor.tsx create mode 100644 src/client/views/linking/LinkFollowBox.tsx create mode 100644 src/client/views/linking/LinkMenu.scss create mode 100644 src/client/views/linking/LinkMenu.tsx create mode 100644 src/client/views/linking/LinkMenuGroup.tsx create mode 100644 src/client/views/linking/LinkMenuItem.tsx delete mode 100644 src/client/views/nodes/LinkEditor.scss delete mode 100644 src/client/views/nodes/LinkEditor.tsx delete mode 100644 src/client/views/nodes/LinkMenu.scss delete mode 100644 src/client/views/nodes/LinkMenu.tsx delete mode 100644 src/client/views/nodes/LinkMenuGroup.tsx delete mode 100644 src/client/views/nodes/LinkMenuItem.tsx (limited to 'src') diff --git a/package.json b/package.json index de1f3f6e6..cd60b7b55 100644 --- a/package.json +++ b/package.json @@ -219,4 +219,4 @@ "xoauth2": "^1.2.0", "youtube": "^0.1.0" } -} \ No newline at end of file +} diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index b18a3c192..2d92aaba7 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -20,7 +20,7 @@ import { DocumentView, PositionDocument } from "./nodes/DocumentView"; import { FieldView } from "./nodes/FieldView"; import { FormattedTextBox, GoogleRef } from "./nodes/FormattedTextBox"; import { IconBox } from "./nodes/IconBox"; -import { LinkMenu } from "./nodes/LinkMenu"; +import { LinkMenu } from "./linking/LinkMenu"; import { TemplateMenu } from "./TemplateMenu"; import { Template, Templates } from "./Templates"; import React = require("react"); diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index 40be470d6..9ec31d67d 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -51,7 +51,7 @@ export class PreviewCursor extends React.Component<{}> { // tests for URL and makes web document let re: any = /^https?:\/\/www\./g; if (re.test(e.clipboardData.getData("text/plain"))) { - const url = e.clipboardData.getData("text/plain") + const url = e.clipboardData.getData("text/plain"); PreviewCursor._addDocument(Docs.Create.WebDocument(url, { title: url, width: 300, height: 300, // nativeWidth: 300, nativeHeight: 472.5, diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss new file mode 100644 index 000000000..fc5f2410c --- /dev/null +++ b/src/client/views/linking/LinkEditor.scss @@ -0,0 +1,145 @@ +@import "../globalCssVariables"; + +.linkEditor { + width: 100%; + height: auto; + font-size: 12px; // TODO +} + +.linkEditor-back { + margin-bottom: 6px; +} + +.linkEditor-info { + border-bottom: 0.5px solid $light-color-secondary; + padding-bottom: 6px; + margin-bottom: 6px; + display: flex; + justify-content: space-between; + + .linkEditor-linkedTo { + width: calc(100% - 26px); + } +} + +.linkEditor-button { + width: 20px; + height: 20px; + margin-left: 6px; + padding: 0; + // font-size: 12px; + border-radius: 10px; + + &:disabled { + background-color: gray; + } +} + +.linkEditor-groupsLabel { + display: flex; + justify-content: space-between; +} + +.linkEditor-group { + background-color: $light-color-secondary; + padding: 6px; + margin: 3px 0; + border-radius: 3px; + + .linkEditor-group-row { + display: flex; + margin-bottom: 3px; + + .linkEditor-group-row-label { + margin-right: 6px; + } + } + + .linkEditor-metadata-row { + display: flex; + justify-content: space-between; + margin-bottom: 6px; + + .linkEditor-error { + border-color: red; + } + + input { + width: calc(50% - 16px); + height: 20px; + } + + button { + width: 20px; + height: 20px; + margin-left: 3px; + padding: 0; + font-size: 10px; + } + } +} + + +.linkEditor-dropdown { + width: 100%; + position: relative; + z-index: 999; + + input { + width: 100%; + } + + .linkEditor-options-wrapper { + width: 100%; + position: absolute; + top: 19px; + left: 0; + display: flex; + flex-direction: column; + } + + .linkEditor-option { + background-color: $light-color-secondary; + border: 1px solid $intermediate-color; + border-top: 0; + padding: 3px; + cursor: pointer; + + &:hover { + background-color: lightgray; + } + + &.onDown { + background-color: gray; + } + } +} + +.linkEditor-typeButton { + background-color: transparent; + color: $dark-color; + width: 100%; + height: 20px; + padding: 0 3px; + padding-bottom: 2px; + text-align: left; + text-transform: none; + letter-spacing: normal; + font-size: 12px; + font-weight: bold; + + &:hover { + background-color: $light-color; + } +} + +.linkEditor-group-buttons { + height: 20px; + display: flex; + justify-content: flex-end; + margin-top: 5px; + + .linkEditor-button { + margin-left: 6px; + } +} \ No newline at end of file diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx new file mode 100644 index 000000000..ecb3e9db4 --- /dev/null +++ b/src/client/views/linking/LinkEditor.tsx @@ -0,0 +1,400 @@ +import { observable, computed, action, trace } from "mobx"; +import React = require("react"); +import { observer } from "mobx-react"; +import './LinkEditor.scss'; +import { StrCast, Cast, FieldValue } from "../../../new_fields/Types"; +import { Doc } from "../../../new_fields/Doc"; +import { LinkManager } from "../../util/LinkManager"; +import { Docs } from "../../documents/Documents"; +import { Utils } from "../../../Utils"; +import { faArrowLeft, faEllipsisV, faTable, faTrash, faCog, faExchangeAlt, faTimes, faPlus } from '@fortawesome/free-solid-svg-icons'; +import { library } from "@fortawesome/fontawesome-svg-core"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { SetupDrag } from "../../util/DragManager"; +import { SchemaHeaderField, RandomPastel } from "../../../new_fields/SchemaHeaderField"; + +library.add(faArrowLeft, faEllipsisV, faTable, faTrash, faCog, faExchangeAlt, faTimes, faPlus); + + +interface GroupTypesDropdownProps { + groupType: string; + setGroupType: (group: string) => void; +} +// this dropdown could be generalized +@observer +class GroupTypesDropdown extends React.Component { + @observable private _searchTerm: string = this.props.groupType; + @observable private _groupType: string = this.props.groupType; + @observable private _isEditing: boolean = false; + + @action + createGroup = (groupType: string): void => { + this.props.setGroupType(groupType); + LinkManager.Instance.addGroupType(groupType); + } + + @action + onChange = (val: string): void => { + this._searchTerm = val; + this._groupType = val; + this._isEditing = true; + } + + @action + onKeyDown = (e: React.KeyboardEvent): void => { + if (e.key === "Enter") { + let allGroupTypes = Array.from(LinkManager.Instance.getAllGroupTypes()); + let groupOptions = allGroupTypes.filter(groupType => groupType.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1); + let exactFound = groupOptions.findIndex(groupType => groupType.toUpperCase() === this._searchTerm.toUpperCase()); + + if (exactFound > -1) { + let groupType = groupOptions[exactFound]; + this.props.setGroupType(groupType); + this._groupType = groupType; + } else { + this.createGroup(this._searchTerm); + this._groupType = this._searchTerm; + } + + this._searchTerm = this._groupType; + this._isEditing = false; + } + } + + @action + onOptionClick = (value: string, createNew: boolean): void => { + if (createNew) { + this.createGroup(this._searchTerm); + this._groupType = this._searchTerm; + + } else { + this.props.setGroupType(value); + this._groupType = value; + + } + this._searchTerm = this._groupType; + this._isEditing = false; + } + + @action + onButtonPointerDown = (): void => { + this._isEditing = true; + } + + renderOptions = (): JSX.Element[] | JSX.Element => { + if (this._searchTerm === "") return <>; + + let allGroupTypes = Array.from(LinkManager.Instance.getAllGroupTypes()); + let groupOptions = allGroupTypes.filter(groupType => groupType.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1); + let exactFound = groupOptions.findIndex(groupType => groupType.toUpperCase() === this._searchTerm.toUpperCase()) > -1; + + let options = groupOptions.map(groupType => { + let ref = React.createRef(); + return
this.onOptionClick(groupType, false)}>{groupType}
; + }); + + // if search term does not already exist as a group type, give option to create new group type + if (!exactFound && this._searchTerm !== "") { + let ref = React.createRef(); + options.push(
this.onOptionClick(this._searchTerm, true)}>Define new "{this._searchTerm}" relationship
); + } + + return options; + } + + render() { + if (this._isEditing || this._groupType === "") { + return ( +
+ this.onChange(e.target.value)} onKeyDown={this.onKeyDown} autoFocus> +
+ {this.renderOptions()} +
+
+ ); + } else { + return ; + } + } +} + + +interface LinkMetadataEditorProps { + id: string; + groupType: string; + mdDoc: Doc; + mdKey: string; + mdValue: string; + changeMdIdKey: (id: string, newKey: string) => void; +} +@observer +class LinkMetadataEditor extends React.Component { + @observable private _key: string = this.props.mdKey; + @observable private _value: string = this.props.mdValue; + @observable private _keyError: boolean = false; + + @action + setMetadataKey = (value: string): void => { + let groupMdKeys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType); + + // don't allow user to create existing key + let newIndex = groupMdKeys.findIndex(key => key.toUpperCase() === value.toUpperCase()); + if (newIndex > -1) { + this._keyError = true; + this._key = value; + return; + } else { + this._keyError = false; + } + + // set new value for key + let currIndex = groupMdKeys.findIndex(key => { + return StrCast(key).toUpperCase() === this._key.toUpperCase(); + }); + if (currIndex === -1) console.error("LinkMetadataEditor: key was not found"); + groupMdKeys[currIndex] = value; + + this.props.changeMdIdKey(this.props.id, value); + this._key = value; + LinkManager.Instance.setMetadataKeysForGroup(this.props.groupType, [...groupMdKeys]); + } + + @action + setMetadataValue = (value: string): void => { + if (!this._keyError) { + this._value = value; + this.props.mdDoc[this._key] = value; + } + } + + @action + removeMetadata = (): void => { + let groupMdKeys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType); + + let index = groupMdKeys.findIndex(key => key.toUpperCase() === this._key.toUpperCase()); + if (index === -1) console.error("LinkMetadataEditor: key was not found"); + groupMdKeys.splice(index, 1); + + LinkManager.Instance.setMetadataKeysForGroup(this.props.groupType, groupMdKeys); + this._key = ""; + } + + render() { + return ( +
+ this.setMetadataKey(e.target.value)}>: + this.setMetadataValue(e.target.value)}> + +
+ ); + } +} + +interface LinkGroupEditorProps { + sourceDoc: Doc; + linkDoc: Doc; + groupDoc: Doc; +} +@observer +export class LinkGroupEditor extends React.Component { + + private _metadataIds: Map = new Map(); + + constructor(props: LinkGroupEditorProps) { + super(props); + + let groupMdKeys = LinkManager.Instance.getMetadataKeysInGroup(StrCast(props.groupDoc.type)); + groupMdKeys.forEach(key => { + this._metadataIds.set(key, Utils.GenerateGuid()); + }); + } + + @action + setGroupType = (groupType: string): void => { + this.props.groupDoc.type = groupType; + } + + removeGroupFromLink = (groupType: string): void => { + LinkManager.Instance.removeGroupFromAnchor(this.props.linkDoc, this.props.sourceDoc, groupType); + } + + deleteGroup = (groupType: string): void => { + LinkManager.Instance.deleteGroupType(groupType); + } + + copyGroup = async (groupType: string): Promise => { + let sourceGroupDoc = this.props.groupDoc; + const sourceMdDoc = await Cast(sourceGroupDoc.metadata, Doc); + if (!sourceMdDoc) return; + + let destDoc = LinkManager.Instance.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc); + // let destGroupList = LinkManager.Instance.getAnchorGroups(this.props.linkDoc, destDoc); + let keys = LinkManager.Instance.getMetadataKeysInGroup(groupType); + + // create new metadata doc with copied kvp + let destMdDoc = new Doc(); + destMdDoc.anchor1 = StrCast(sourceMdDoc.anchor2); + destMdDoc.anchor2 = StrCast(sourceMdDoc.anchor1); + keys.forEach(key => { + let val = sourceMdDoc[key] === undefined ? "" : StrCast(sourceMdDoc[key]); + destMdDoc[key] = val; + }); + + // create new group doc with new metadata doc + let destGroupDoc = new Doc(); + destGroupDoc.type = groupType; + destGroupDoc.metadata = destMdDoc; + + if (destDoc) { + LinkManager.Instance.addGroupToAnchor(this.props.linkDoc, destDoc, destGroupDoc, true); + } + } + + @action + addMetadata = (groupType: string): void => { + this._metadataIds.set("new key", Utils.GenerateGuid()); + let mdKeys = LinkManager.Instance.getMetadataKeysInGroup(groupType); + // only add "new key" if there is no other key with value "new key"; prevents spamming + if (mdKeys.indexOf("new key") === -1) mdKeys.push("new key"); + LinkManager.Instance.setMetadataKeysForGroup(groupType, mdKeys); + } + + // for key rendering purposes + changeMdIdKey = (id: string, newKey: string) => { + this._metadataIds.set(newKey, id); + } + + renderMetadata = (): JSX.Element[] => { + let metadata: Array = []; + let groupDoc = this.props.groupDoc; + const mdDoc = FieldValue(Cast(groupDoc.metadata, Doc)); + if (!mdDoc) { + return []; + } + let groupType = StrCast(groupDoc.type); + let groupMdKeys = LinkManager.Instance.getMetadataKeysInGroup(groupType); + + groupMdKeys.forEach((key) => { + let val = StrCast(mdDoc[key]); + metadata.push( + + ); + }); + return metadata; + } + + viewGroupAsTable = (groupType: string): JSX.Element => { + let keys = LinkManager.Instance.getMetadataKeysInGroup(groupType); + let index = keys.indexOf(""); + if (index > -1) keys.splice(index, 1); + let cols = ["anchor1", "anchor2", ...[...keys]].map(c => new SchemaHeaderField(c, "#f1efeb")); + let docs: Doc[] = LinkManager.Instance.getAllMetadataDocsInGroup(groupType); + let createTable = action(() => Docs.Create.SchemaDocument(cols, docs, { width: 500, height: 300, title: groupType + " table" })); + let ref = React.createRef(); + return
; + } + + render() { + let groupType = StrCast(this.props.groupDoc.type); + // if ((groupType && LinkManager.Instance.getMetadataKeysInGroup(groupType).length > 0) || groupType === "") { + let buttons; + if (groupType === "") { + buttons = ( + <> + + + + + + + ); + } else { + buttons = ( + <> + + + + + {this.viewGroupAsTable(groupType)} + + ); + } + return ( +
+
+

type:

+ +
+ {this.renderMetadata().length > 0 ?

metadata:

: <>} + {this.renderMetadata()} +
+ {buttons} +
+
+ ); + } +} + + +interface LinkEditorProps { + sourceDoc: Doc; + linkDoc: Doc; + showLinks: () => void; +} +@observer +export class LinkEditor extends React.Component { + + @action + deleteLink = (): void => { + LinkManager.Instance.deleteLink(this.props.linkDoc); + this.props.showLinks(); + } + + @action + addGroup = (): void => { + // create new metadata document for group + let mdDoc = new Doc(); + mdDoc.anchor1 = this.props.sourceDoc.title; + let opp = LinkManager.Instance.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc); + if (opp) { + mdDoc.anchor2 = opp.title; + } + + // create new group document + let groupDoc = new Doc(); + groupDoc.type = ""; + groupDoc.metadata = mdDoc; + + LinkManager.Instance.addGroupToAnchor(this.props.linkDoc, this.props.sourceDoc, groupDoc); + } + + render() { + let destination = LinkManager.Instance.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc); + + let groupList = LinkManager.Instance.getAnchorGroups(this.props.linkDoc, this.props.sourceDoc); + let groups = groupList.map(groupDoc => { + return ; + }); + + if (destination) { + return ( +
+ +
+

editing link to: {destination.proto!.title}

+ +
+
+ Relationships: + +
+ {groups.length > 0 ? groups :
There are currently no relationships associated with this link.
} +
+ + ); + } + } +} \ No newline at end of file diff --git a/src/client/views/linking/LinkFollowBox.tsx b/src/client/views/linking/LinkFollowBox.tsx new file mode 100644 index 000000000..487281d50 --- /dev/null +++ b/src/client/views/linking/LinkFollowBox.tsx @@ -0,0 +1,9 @@ +import { observable, computed, action, trace } from "mobx"; +import React = require("react"); +import { observer } from "mobx-react"; +import { FieldViewProps } from "../nodes/FieldView"; + +@observer +export class LinkFollowBox extends React.Component { + +} \ No newline at end of file diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss new file mode 100644 index 000000000..a4018bd2d --- /dev/null +++ b/src/client/views/linking/LinkMenu.scss @@ -0,0 +1,137 @@ +@import "../globalCssVariables"; + +.linkMenu { + width: 100%; + height: auto; +} + +.linkMenu-list { + max-height: 200px; + overflow-y: scroll; +} + +.linkMenu-group { + border-bottom: 0.5px solid lightgray; + padding: 5px 0; + + + &:last-child { + border-bottom: none; + } + + .linkMenu-group-name { + display: flex; + + &:hover { + p { + background-color: lightgray; + } + p.expand-one { + width: calc(100% - 26px); + } + .linkEditor-tableButton { + display: block; + } + } + + p { + width: 100%; + padding: 4px 6px; + line-height: 12px; + border-radius: 5px; + font-weight: bold; + } + + .linkEditor-tableButton { + display: none; + } + } +} + +.linkMenu-item { + // border-top: 0.5px solid $main-accent; + position: relative; + display: flex; + font-size: 12px; + + + .link-name { + position: relative; + + p { + padding: 4px 6px; + line-height: 12px; + border-radius: 5px; + overflow-wrap: break-word; + } + } + + .linkMenu-item-content { + width: 100%; + } + + .link-metadata { + padding: 0 10px 0 16px; + margin-bottom: 4px; + color: $main-accent; + font-style: italic; + font-size: 10.5px; + } + + &:hover { + .linkMenu-item-buttons { + display: flex; + } + .linkMenu-item-content { + &.expand-two p { + width: calc(100% - 52px); + background-color: lightgray; + } + &.expand-three p { + width: calc(100% - 84px); + background-color: lightgray; + } + } + } +} + +.linkMenu-item-buttons { + display: none; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + + .button { + width: 20px; + height: 20px; + margin: 0; + margin-right: 6px; + border-radius: 50%; + cursor: pointer; + pointer-events: auto; + background-color: $dark-color; + color: $light-color; + font-size: 65%; + transition: transform 0.2s; + text-align: center; + position: relative; + + .fa-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + &:last-child { + margin-right: 0; + } + &:hover { + background: $main-accent; + } + } +} + + + diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx new file mode 100644 index 000000000..842ce45b1 --- /dev/null +++ b/src/client/views/linking/LinkMenu.tsx @@ -0,0 +1,76 @@ +import { action, observable } from "mobx"; +import { observer } from "mobx-react"; +import { DocumentView } from "../nodes/DocumentView"; +import { LinkEditor } from "./LinkEditor"; +import './LinkMenu.scss'; +import React = require("react"); +import { Doc } from "../../../new_fields/Doc"; +import { LinkManager } from "../../util/LinkManager"; +import { LinkMenuGroup } from "./LinkMenuGroup"; +import { faTrash } from '@fortawesome/free-solid-svg-icons'; +import { library } from "@fortawesome/fontawesome-svg-core"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +library.add(faTrash); + +interface Props { + docView: DocumentView; + changeFlyout: () => void; + addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; +} + +@observer +export class LinkMenu extends React.Component { + + @observable private _editingLink?: Doc; + + @action + componentWillReceiveProps() { + this._editingLink = undefined; + } + + clearAllLinks = () => { + LinkManager.Instance.deleteAllLinksOnAnchor(this.props.docView.props.Document); + } + + renderAllGroups = (groups: Map>): Array => { + let linkItems: Array = []; + groups.forEach((group, groupType) => { + linkItems.push( + this._editingLink = linkDoc)} + addDocTab={this.props.addDocTab} /> + ); + }); + + // if source doc has no links push message + if (linkItems.length === 0) linkItems.push(

No links have been created yet. Drag the linking button onto another document to create a link.

); + + return linkItems; + } + + render() { + let sourceDoc = this.props.docView.props.Document; + let groups: Map = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc); + if (this._editingLink === undefined) { + return ( +
+ + {/* */} +
+ {this.renderAllGroups(groups)} +
+
+ ); + } else { + return ( + this._editingLink = undefined)}> + ); + } + } +} \ No newline at end of file diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx new file mode 100644 index 000000000..b6a24b0c8 --- /dev/null +++ b/src/client/views/linking/LinkMenuGroup.tsx @@ -0,0 +1,111 @@ +import { action, observable } from "mobx"; +import { observer } from "mobx-react"; +import { DocumentView } from "../nodes/DocumentView"; +import { LinkMenuItem } from "./LinkMenuItem"; +import { LinkEditor } from "./LinkEditor"; +import './LinkMenu.scss'; +import React = require("react"); +import { Doc, DocListCast } from "../../../new_fields/Doc"; +import { Id } from "../../../new_fields/FieldSymbols"; +import { LinkManager } from "../../util/LinkManager"; +import { DragLinksAsDocuments, DragManager, SetupDrag } from "../../util/DragManager"; +import { emptyFunction } from "../../../Utils"; +import { Docs } from "../../documents/Documents"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { UndoManager } from "../../util/UndoManager"; +import { StrCast } from "../../../new_fields/Types"; +import { SchemaHeaderField, RandomPastel } from "../../../new_fields/SchemaHeaderField"; + +interface LinkMenuGroupProps { + sourceDoc: Doc; + group: Doc[]; + groupType: string; + showEditor: (linkDoc: Doc) => void; + addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; + docView: DocumentView; + +} + +@observer +export class LinkMenuGroup extends React.Component { + + private _drag = React.createRef(); + private _table = React.createRef(); + + onLinkButtonDown = (e: React.PointerEvent): void => { + e.stopPropagation(); + document.removeEventListener("pointermove", this.onLinkButtonMoved); + document.addEventListener("pointermove", this.onLinkButtonMoved); + document.removeEventListener("pointerup", this.onLinkButtonUp); + document.addEventListener("pointerup", this.onLinkButtonUp); + } + + onLinkButtonUp = (e: PointerEvent): void => { + document.removeEventListener("pointermove", this.onLinkButtonMoved); + document.removeEventListener("pointerup", this.onLinkButtonUp); + e.stopPropagation(); + } + + + onLinkButtonMoved = async (e: PointerEvent) => { + UndoManager.RunInBatch(() => { + if (this._drag.current !== null && (e.movementX > 1 || e.movementY > 1)) { + document.removeEventListener("pointermove", this.onLinkButtonMoved); + document.removeEventListener("pointerup", this.onLinkButtonUp); + + let draggedDocs = this.props.group.map(linkDoc => { + let opp = LinkManager.Instance.getOppositeAnchor(linkDoc, this.props.sourceDoc); + if (opp) return opp; + }) as Doc[]; + let dragData = new DragManager.DocumentDragData(draggedDocs, draggedDocs.map(d => undefined)); + + DragManager.StartLinkedDocumentDrag([this._drag.current], dragData, e.x, e.y, { + handlers: { + dragComplete: action(emptyFunction), + }, + hideSource: false + }); + } + }, "drag links"); + e.stopPropagation(); + } + + viewGroupAsTable = (groupType: string): JSX.Element => { + let keys = LinkManager.Instance.getMetadataKeysInGroup(groupType); + let index = keys.indexOf(""); + if (index > -1) keys.splice(index, 1); + let cols = ["anchor1", "anchor2", ...[...keys]].map(c => new SchemaHeaderField(c, "#f1efeb")); + let docs: Doc[] = LinkManager.Instance.getAllMetadataDocsInGroup(groupType); + let createTable = action(() => Docs.Create.SchemaDocument(cols, docs, { width: 500, height: 300, title: groupType + " table" })); + let ref = React.createRef(); + return
; + } + + render() { + let groupItems = this.props.group.map(linkDoc => { + let destination = LinkManager.Instance.getOppositeAnchor(linkDoc, this.props.sourceDoc); + if (destination && this.props.sourceDoc) { + return ; + } + }); + + return ( +
+
+

{this.props.groupType}:

+ {this.props.groupType === "*" || this.props.groupType === "" ? <> : this.viewGroupAsTable(this.props.groupType)} +
+
+ {groupItems} +
+
+ ); + } +} \ No newline at end of file diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx new file mode 100644 index 000000000..7dc0a9fcd --- /dev/null +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -0,0 +1,282 @@ +import { library } from '@fortawesome/fontawesome-svg-core'; +import { faEdit, faEye, faTimes, faArrowRight, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { observer } from "mobx-react"; +import { DocumentManager } from "../../util/DocumentManager"; +import { undoBatch } from "../../util/UndoManager"; +import './LinkMenu.scss'; +import React = require("react"); +import { Doc, DocListCastAsync } from '../../../new_fields/Doc'; +import { StrCast, Cast, FieldValue, NumCast } from '../../../new_fields/Types'; +import { observable, action } from 'mobx'; +import { LinkManager } from '../../util/LinkManager'; +import { DragLinkAsDocument } from '../../util/DragManager'; +import { CollectionDockingView } from '../collections/CollectionDockingView'; +import { SelectionManager } from '../../util/SelectionManager'; +import { CollectionViewType } from '../collections/CollectionBaseView'; +import { DocumentView } from '../nodes/DocumentView'; +library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp); + + +interface LinkMenuItemProps { + groupType: string; + linkDoc: Doc; + sourceDoc: Doc; + destinationDoc: Doc; + showEditor: (linkDoc: Doc) => void; + addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; +} + +@observer +export class LinkMenuItem extends React.Component { + private _drag = React.createRef(); + @observable private _showMore: boolean = false; + @action toggleShowMore() { this._showMore = !this._showMore; } + + + unhighlight = () => { + Doc.UnhighlightAll(); + document.removeEventListener("pointerdown", this.unhighlight); + } + + @action + highlightDoc = () => { + document.removeEventListener("pointerdown", this.unhighlight); + Doc.HighlightDoc(this.props.destinationDoc); + window.setTimeout(() => { + document.addEventListener("pointerdown", this.unhighlight); + }, 10000); + } + + // NOT TESTED + // col = collection the doc is in + // target = the document to center on + @undoBatch + openLinkColRight = ({ col, target }: { col: Doc, target: Doc }) => { + col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; + if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { + const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2; + const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2; + col.panX = newPanX; + col.panY = newPanY; + } + CollectionDockingView.Instance.AddRightSplit(col, undefined); + } + + // DONE + // this opens the linked doc in a right split, NOT in its collection + @undoBatch + openLinkRight = () => { + this.highlightDoc(); + let alias = Doc.MakeAlias(this.props.destinationDoc); + CollectionDockingView.Instance.AddRightSplit(alias, undefined); + SelectionManager.DeselectAll(); + } + + // DONE + // this is the standard "follow link" (jump to document) + // taken from follow link + @undoBatch + jumpToLink = async (shouldZoom: boolean) => { + //there is an issue right now so this will be false automatically + shouldZoom = false; + this.highlightDoc(); + let jumpToDoc = this.props.destinationDoc; + let pdfDoc = FieldValue(Cast(this.props.destinationDoc, Doc)); + if (pdfDoc) { + jumpToDoc = pdfDoc; + } + let proto = Doc.GetProto(this.props.linkDoc); + let targetContext = await Cast(proto.targetContext, Doc); + let sourceContext = await Cast(proto.sourceContext, Doc); + let self = this; + + let dockingFunc = (document: Doc) => { this.props.addDocTab(document, undefined, "inTab"); SelectionManager.DeselectAll(); }; + + if (this.props.destinationDoc === self.props.linkDoc.anchor2 && targetContext) { + DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, async document => dockingFunc(document), undefined, targetContext); + } + else if (this.props.destinationDoc === self.props.linkDoc.anchor1 && sourceContext) { + DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, document => dockingFunc(sourceContext!)); + } + else if (DocumentManager.Instance.getDocumentView(jumpToDoc)) { + DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, undefined, undefined, NumCast((this.props.destinationDoc === self.props.linkDoc.anchor2 ? self.props.linkDoc.anchor2Page : self.props.linkDoc.anchor1Page))); + + } + else { + DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, dockingFunc); + } + } + + // DONE + // opens link in new tab (not in a collection) + // this opens it full screen, do we need a separate full screen option? + @undoBatch + openLinkTab = () => { + this.highlightDoc(); + let fullScreenAlias = Doc.MakeAlias(this.props.destinationDoc); + this.props.addDocTab(fullScreenAlias, undefined, "inTab"); + SelectionManager.DeselectAll(); + } + + // NOT TESTED + // opens link in new tab in collection + // col = collection the doc is in + // target = the document to center on + @undoBatch + openLinkColTab = ({ col, target }: { col: Doc, target: Doc }) => { + this.highlightDoc(); + col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; + if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { + const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2; + const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2; + col.panX = newPanX; + col.panY = newPanY; + } + // CollectionDockingView.Instance.AddRightSplit(col, undefined); + this.props.addDocTab(col, undefined, "inTab"); + SelectionManager.DeselectAll(); + } + + // this will open a link next to the source doc + @undoBatch + openLinkInPlace = () => { + this.highlightDoc(); + + let alias = Doc.MakeAlias(this.props.destinationDoc); + let y = this.props.sourceDoc.y; + let x = this.props.sourceDoc.x; + let parentView: any = undefined; + let parentDoc: Doc = this.props.sourceDoc; + + SelectionManager.SelectedDocuments().map(dv => { + if (dv.props.Document === this.props.sourceDoc) { + parentView = dv.props.ContainingCollectionView; + } + }); + + if (parentView) { + // console.log(parentDoc) + console.log(parentView.props.addDocument); + } + } + + //set this to be the default link behavior, can be any of the above + private defaultLinkBehavior: any = this.openLinkInPlace; + + onEdit = (e: React.PointerEvent): void => { + e.stopPropagation(); + this.props.showEditor(this.props.linkDoc); + SelectionManager.DeselectAll(); + } + + renderMetadata = (): JSX.Element => { + let groups = LinkManager.Instance.getAnchorGroups(this.props.linkDoc, this.props.sourceDoc); + let index = groups.findIndex(groupDoc => StrCast(groupDoc.type).toUpperCase() === this.props.groupType.toUpperCase()); + let groupDoc = index > -1 ? groups[index] : undefined; + + let mdRows: Array = []; + if (groupDoc) { + let mdDoc = Cast(groupDoc.metadata, Doc, null); + if (mdDoc) { + let keys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType);//groupMetadataKeys.get(this.props.groupType); + mdRows = keys.map(key => { + return (
{key}: {StrCast(mdDoc[key])}
); + }); + } + } + + return (
{mdRows}
); + } + + onLinkButtonDown = (e: React.PointerEvent): void => { + e.stopPropagation(); + document.removeEventListener("pointermove", this.onLinkButtonMoved); + document.addEventListener("pointermove", this.onLinkButtonMoved); + document.removeEventListener("pointerup", this.onLinkButtonUp); + document.addEventListener("pointerup", this.onLinkButtonUp); + } + + onLinkButtonUp = (e: PointerEvent): void => { + document.removeEventListener("pointermove", this.onLinkButtonMoved); + document.removeEventListener("pointerup", this.onLinkButtonUp); + e.stopPropagation(); + } + + onLinkButtonMoved = async (e: PointerEvent) => { + if (this._drag.current !== null && (e.movementX > 1 || e.movementY > 1)) { + document.removeEventListener("pointermove", this.onLinkButtonMoved); + document.removeEventListener("pointerup", this.onLinkButtonUp); + + DragLinkAsDocument(this._drag.current, e.x, e.y, this.props.linkDoc, this.props.sourceDoc); + } + e.stopPropagation(); + } + + render() { + + let keys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType);//groupMetadataKeys.get(this.props.groupType); + let canExpand = keys ? keys.length > 0 : false; + + return ( +
+
+
+

{StrCast(this.props.destinationDoc.title)}

+
+ {canExpand ?
this.toggleShowMore()}> +
: <>} +
+ {/* Original */} + {/*
*/} + {/* New */} +
+
+
+ {this._showMore ? this.renderMetadata() : <>} +
+ +
+ ); + } +} + + // @undoBatch + // onFollowLink = async (e: React.PointerEvent): Promise => { + // e.stopPropagation(); + // e.persist(); + // let jumpToDoc = this.props.destinationDoc; + // let pdfDoc = FieldValue(Cast(this.props.destinationDoc, Doc)); + // if (pdfDoc) { + // jumpToDoc = pdfDoc; + // } + // let proto = Doc.GetProto(this.props.linkDoc); + // let targetContext = await Cast(proto.targetContext, Doc); + // let sourceContext = await Cast(proto.sourceContext, Doc); + // let self = this; + + + // let dockingFunc = (document: Doc) => { this.props.addDocTab(document, undefined, "inTab"); SelectionManager.DeselectAll(); }; + // if (e.ctrlKey) { + // dockingFunc = (document: Doc) => CollectionDockingView.Instance.AddRightSplit(document, undefined); + // } + + // if (this.props.destinationDoc === self.props.linkDoc.anchor2 && targetContext) { + // DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, async document => dockingFunc(document), undefined, targetContext!); + // console.log("1") + // } + // else if (this.props.destinationDoc === self.props.linkDoc.anchor1 && sourceContext) { + // DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, document => dockingFunc(sourceContext!)); + // console.log("2") + // } + // else if (DocumentManager.Instance.getDocumentView(jumpToDoc)) { + // DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, undefined, undefined, NumCast((this.props.destinationDoc === self.props.linkDoc.anchor2 ? self.props.linkDoc.anchor2Page : self.props.linkDoc.anchor1Page))); + // console.log("3") + + // } + // else { + // DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, dockingFunc); + // console.log("4") + + // } + // } \ No newline at end of file diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss deleted file mode 100644 index fc5f2410c..000000000 --- a/src/client/views/nodes/LinkEditor.scss +++ /dev/null @@ -1,145 +0,0 @@ -@import "../globalCssVariables"; - -.linkEditor { - width: 100%; - height: auto; - font-size: 12px; // TODO -} - -.linkEditor-back { - margin-bottom: 6px; -} - -.linkEditor-info { - border-bottom: 0.5px solid $light-color-secondary; - padding-bottom: 6px; - margin-bottom: 6px; - display: flex; - justify-content: space-between; - - .linkEditor-linkedTo { - width: calc(100% - 26px); - } -} - -.linkEditor-button { - width: 20px; - height: 20px; - margin-left: 6px; - padding: 0; - // font-size: 12px; - border-radius: 10px; - - &:disabled { - background-color: gray; - } -} - -.linkEditor-groupsLabel { - display: flex; - justify-content: space-between; -} - -.linkEditor-group { - background-color: $light-color-secondary; - padding: 6px; - margin: 3px 0; - border-radius: 3px; - - .linkEditor-group-row { - display: flex; - margin-bottom: 3px; - - .linkEditor-group-row-label { - margin-right: 6px; - } - } - - .linkEditor-metadata-row { - display: flex; - justify-content: space-between; - margin-bottom: 6px; - - .linkEditor-error { - border-color: red; - } - - input { - width: calc(50% - 16px); - height: 20px; - } - - button { - width: 20px; - height: 20px; - margin-left: 3px; - padding: 0; - font-size: 10px; - } - } -} - - -.linkEditor-dropdown { - width: 100%; - position: relative; - z-index: 999; - - input { - width: 100%; - } - - .linkEditor-options-wrapper { - width: 100%; - position: absolute; - top: 19px; - left: 0; - display: flex; - flex-direction: column; - } - - .linkEditor-option { - background-color: $light-color-secondary; - border: 1px solid $intermediate-color; - border-top: 0; - padding: 3px; - cursor: pointer; - - &:hover { - background-color: lightgray; - } - - &.onDown { - background-color: gray; - } - } -} - -.linkEditor-typeButton { - background-color: transparent; - color: $dark-color; - width: 100%; - height: 20px; - padding: 0 3px; - padding-bottom: 2px; - text-align: left; - text-transform: none; - letter-spacing: normal; - font-size: 12px; - font-weight: bold; - - &:hover { - background-color: $light-color; - } -} - -.linkEditor-group-buttons { - height: 20px; - display: flex; - justify-content: flex-end; - margin-top: 5px; - - .linkEditor-button { - margin-left: 6px; - } -} \ No newline at end of file diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx deleted file mode 100644 index ecb3e9db4..000000000 --- a/src/client/views/nodes/LinkEditor.tsx +++ /dev/null @@ -1,400 +0,0 @@ -import { observable, computed, action, trace } from "mobx"; -import React = require("react"); -import { observer } from "mobx-react"; -import './LinkEditor.scss'; -import { StrCast, Cast, FieldValue } from "../../../new_fields/Types"; -import { Doc } from "../../../new_fields/Doc"; -import { LinkManager } from "../../util/LinkManager"; -import { Docs } from "../../documents/Documents"; -import { Utils } from "../../../Utils"; -import { faArrowLeft, faEllipsisV, faTable, faTrash, faCog, faExchangeAlt, faTimes, faPlus } from '@fortawesome/free-solid-svg-icons'; -import { library } from "@fortawesome/fontawesome-svg-core"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { SetupDrag } from "../../util/DragManager"; -import { SchemaHeaderField, RandomPastel } from "../../../new_fields/SchemaHeaderField"; - -library.add(faArrowLeft, faEllipsisV, faTable, faTrash, faCog, faExchangeAlt, faTimes, faPlus); - - -interface GroupTypesDropdownProps { - groupType: string; - setGroupType: (group: string) => void; -} -// this dropdown could be generalized -@observer -class GroupTypesDropdown extends React.Component { - @observable private _searchTerm: string = this.props.groupType; - @observable private _groupType: string = this.props.groupType; - @observable private _isEditing: boolean = false; - - @action - createGroup = (groupType: string): void => { - this.props.setGroupType(groupType); - LinkManager.Instance.addGroupType(groupType); - } - - @action - onChange = (val: string): void => { - this._searchTerm = val; - this._groupType = val; - this._isEditing = true; - } - - @action - onKeyDown = (e: React.KeyboardEvent): void => { - if (e.key === "Enter") { - let allGroupTypes = Array.from(LinkManager.Instance.getAllGroupTypes()); - let groupOptions = allGroupTypes.filter(groupType => groupType.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1); - let exactFound = groupOptions.findIndex(groupType => groupType.toUpperCase() === this._searchTerm.toUpperCase()); - - if (exactFound > -1) { - let groupType = groupOptions[exactFound]; - this.props.setGroupType(groupType); - this._groupType = groupType; - } else { - this.createGroup(this._searchTerm); - this._groupType = this._searchTerm; - } - - this._searchTerm = this._groupType; - this._isEditing = false; - } - } - - @action - onOptionClick = (value: string, createNew: boolean): void => { - if (createNew) { - this.createGroup(this._searchTerm); - this._groupType = this._searchTerm; - - } else { - this.props.setGroupType(value); - this._groupType = value; - - } - this._searchTerm = this._groupType; - this._isEditing = false; - } - - @action - onButtonPointerDown = (): void => { - this._isEditing = true; - } - - renderOptions = (): JSX.Element[] | JSX.Element => { - if (this._searchTerm === "") return <>; - - let allGroupTypes = Array.from(LinkManager.Instance.getAllGroupTypes()); - let groupOptions = allGroupTypes.filter(groupType => groupType.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1); - let exactFound = groupOptions.findIndex(groupType => groupType.toUpperCase() === this._searchTerm.toUpperCase()) > -1; - - let options = groupOptions.map(groupType => { - let ref = React.createRef(); - return
this.onOptionClick(groupType, false)}>{groupType}
; - }); - - // if search term does not already exist as a group type, give option to create new group type - if (!exactFound && this._searchTerm !== "") { - let ref = React.createRef(); - options.push(
this.onOptionClick(this._searchTerm, true)}>Define new "{this._searchTerm}" relationship
); - } - - return options; - } - - render() { - if (this._isEditing || this._groupType === "") { - return ( -
- this.onChange(e.target.value)} onKeyDown={this.onKeyDown} autoFocus> -
- {this.renderOptions()} -
-
- ); - } else { - return ; - } - } -} - - -interface LinkMetadataEditorProps { - id: string; - groupType: string; - mdDoc: Doc; - mdKey: string; - mdValue: string; - changeMdIdKey: (id: string, newKey: string) => void; -} -@observer -class LinkMetadataEditor extends React.Component { - @observable private _key: string = this.props.mdKey; - @observable private _value: string = this.props.mdValue; - @observable private _keyError: boolean = false; - - @action - setMetadataKey = (value: string): void => { - let groupMdKeys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType); - - // don't allow user to create existing key - let newIndex = groupMdKeys.findIndex(key => key.toUpperCase() === value.toUpperCase()); - if (newIndex > -1) { - this._keyError = true; - this._key = value; - return; - } else { - this._keyError = false; - } - - // set new value for key - let currIndex = groupMdKeys.findIndex(key => { - return StrCast(key).toUpperCase() === this._key.toUpperCase(); - }); - if (currIndex === -1) console.error("LinkMetadataEditor: key was not found"); - groupMdKeys[currIndex] = value; - - this.props.changeMdIdKey(this.props.id, value); - this._key = value; - LinkManager.Instance.setMetadataKeysForGroup(this.props.groupType, [...groupMdKeys]); - } - - @action - setMetadataValue = (value: string): void => { - if (!this._keyError) { - this._value = value; - this.props.mdDoc[this._key] = value; - } - } - - @action - removeMetadata = (): void => { - let groupMdKeys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType); - - let index = groupMdKeys.findIndex(key => key.toUpperCase() === this._key.toUpperCase()); - if (index === -1) console.error("LinkMetadataEditor: key was not found"); - groupMdKeys.splice(index, 1); - - LinkManager.Instance.setMetadataKeysForGroup(this.props.groupType, groupMdKeys); - this._key = ""; - } - - render() { - return ( -
- this.setMetadataKey(e.target.value)}>: - this.setMetadataValue(e.target.value)}> - -
- ); - } -} - -interface LinkGroupEditorProps { - sourceDoc: Doc; - linkDoc: Doc; - groupDoc: Doc; -} -@observer -export class LinkGroupEditor extends React.Component { - - private _metadataIds: Map = new Map(); - - constructor(props: LinkGroupEditorProps) { - super(props); - - let groupMdKeys = LinkManager.Instance.getMetadataKeysInGroup(StrCast(props.groupDoc.type)); - groupMdKeys.forEach(key => { - this._metadataIds.set(key, Utils.GenerateGuid()); - }); - } - - @action - setGroupType = (groupType: string): void => { - this.props.groupDoc.type = groupType; - } - - removeGroupFromLink = (groupType: string): void => { - LinkManager.Instance.removeGroupFromAnchor(this.props.linkDoc, this.props.sourceDoc, groupType); - } - - deleteGroup = (groupType: string): void => { - LinkManager.Instance.deleteGroupType(groupType); - } - - copyGroup = async (groupType: string): Promise => { - let sourceGroupDoc = this.props.groupDoc; - const sourceMdDoc = await Cast(sourceGroupDoc.metadata, Doc); - if (!sourceMdDoc) return; - - let destDoc = LinkManager.Instance.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc); - // let destGroupList = LinkManager.Instance.getAnchorGroups(this.props.linkDoc, destDoc); - let keys = LinkManager.Instance.getMetadataKeysInGroup(groupType); - - // create new metadata doc with copied kvp - let destMdDoc = new Doc(); - destMdDoc.anchor1 = StrCast(sourceMdDoc.anchor2); - destMdDoc.anchor2 = StrCast(sourceMdDoc.anchor1); - keys.forEach(key => { - let val = sourceMdDoc[key] === undefined ? "" : StrCast(sourceMdDoc[key]); - destMdDoc[key] = val; - }); - - // create new group doc with new metadata doc - let destGroupDoc = new Doc(); - destGroupDoc.type = groupType; - destGroupDoc.metadata = destMdDoc; - - if (destDoc) { - LinkManager.Instance.addGroupToAnchor(this.props.linkDoc, destDoc, destGroupDoc, true); - } - } - - @action - addMetadata = (groupType: string): void => { - this._metadataIds.set("new key", Utils.GenerateGuid()); - let mdKeys = LinkManager.Instance.getMetadataKeysInGroup(groupType); - // only add "new key" if there is no other key with value "new key"; prevents spamming - if (mdKeys.indexOf("new key") === -1) mdKeys.push("new key"); - LinkManager.Instance.setMetadataKeysForGroup(groupType, mdKeys); - } - - // for key rendering purposes - changeMdIdKey = (id: string, newKey: string) => { - this._metadataIds.set(newKey, id); - } - - renderMetadata = (): JSX.Element[] => { - let metadata: Array = []; - let groupDoc = this.props.groupDoc; - const mdDoc = FieldValue(Cast(groupDoc.metadata, Doc)); - if (!mdDoc) { - return []; - } - let groupType = StrCast(groupDoc.type); - let groupMdKeys = LinkManager.Instance.getMetadataKeysInGroup(groupType); - - groupMdKeys.forEach((key) => { - let val = StrCast(mdDoc[key]); - metadata.push( - - ); - }); - return metadata; - } - - viewGroupAsTable = (groupType: string): JSX.Element => { - let keys = LinkManager.Instance.getMetadataKeysInGroup(groupType); - let index = keys.indexOf(""); - if (index > -1) keys.splice(index, 1); - let cols = ["anchor1", "anchor2", ...[...keys]].map(c => new SchemaHeaderField(c, "#f1efeb")); - let docs: Doc[] = LinkManager.Instance.getAllMetadataDocsInGroup(groupType); - let createTable = action(() => Docs.Create.SchemaDocument(cols, docs, { width: 500, height: 300, title: groupType + " table" })); - let ref = React.createRef(); - return
; - } - - render() { - let groupType = StrCast(this.props.groupDoc.type); - // if ((groupType && LinkManager.Instance.getMetadataKeysInGroup(groupType).length > 0) || groupType === "") { - let buttons; - if (groupType === "") { - buttons = ( - <> - - - - - - - ); - } else { - buttons = ( - <> - - - - - {this.viewGroupAsTable(groupType)} - - ); - } - return ( -
-
-

type:

- -
- {this.renderMetadata().length > 0 ?

metadata:

: <>} - {this.renderMetadata()} -
- {buttons} -
-
- ); - } -} - - -interface LinkEditorProps { - sourceDoc: Doc; - linkDoc: Doc; - showLinks: () => void; -} -@observer -export class LinkEditor extends React.Component { - - @action - deleteLink = (): void => { - LinkManager.Instance.deleteLink(this.props.linkDoc); - this.props.showLinks(); - } - - @action - addGroup = (): void => { - // create new metadata document for group - let mdDoc = new Doc(); - mdDoc.anchor1 = this.props.sourceDoc.title; - let opp = LinkManager.Instance.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc); - if (opp) { - mdDoc.anchor2 = opp.title; - } - - // create new group document - let groupDoc = new Doc(); - groupDoc.type = ""; - groupDoc.metadata = mdDoc; - - LinkManager.Instance.addGroupToAnchor(this.props.linkDoc, this.props.sourceDoc, groupDoc); - } - - render() { - let destination = LinkManager.Instance.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc); - - let groupList = LinkManager.Instance.getAnchorGroups(this.props.linkDoc, this.props.sourceDoc); - let groups = groupList.map(groupDoc => { - return ; - }); - - if (destination) { - return ( -
- -
-

editing link to: {destination.proto!.title}

- -
-
- Relationships: - -
- {groups.length > 0 ? groups :
There are currently no relationships associated with this link.
} -
- - ); - } - } -} \ No newline at end of file diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss deleted file mode 100644 index a4018bd2d..000000000 --- a/src/client/views/nodes/LinkMenu.scss +++ /dev/null @@ -1,137 +0,0 @@ -@import "../globalCssVariables"; - -.linkMenu { - width: 100%; - height: auto; -} - -.linkMenu-list { - max-height: 200px; - overflow-y: scroll; -} - -.linkMenu-group { - border-bottom: 0.5px solid lightgray; - padding: 5px 0; - - - &:last-child { - border-bottom: none; - } - - .linkMenu-group-name { - display: flex; - - &:hover { - p { - background-color: lightgray; - } - p.expand-one { - width: calc(100% - 26px); - } - .linkEditor-tableButton { - display: block; - } - } - - p { - width: 100%; - padding: 4px 6px; - line-height: 12px; - border-radius: 5px; - font-weight: bold; - } - - .linkEditor-tableButton { - display: none; - } - } -} - -.linkMenu-item { - // border-top: 0.5px solid $main-accent; - position: relative; - display: flex; - font-size: 12px; - - - .link-name { - position: relative; - - p { - padding: 4px 6px; - line-height: 12px; - border-radius: 5px; - overflow-wrap: break-word; - } - } - - .linkMenu-item-content { - width: 100%; - } - - .link-metadata { - padding: 0 10px 0 16px; - margin-bottom: 4px; - color: $main-accent; - font-style: italic; - font-size: 10.5px; - } - - &:hover { - .linkMenu-item-buttons { - display: flex; - } - .linkMenu-item-content { - &.expand-two p { - width: calc(100% - 52px); - background-color: lightgray; - } - &.expand-three p { - width: calc(100% - 84px); - background-color: lightgray; - } - } - } -} - -.linkMenu-item-buttons { - display: none; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - - .button { - width: 20px; - height: 20px; - margin: 0; - margin-right: 6px; - border-radius: 50%; - cursor: pointer; - pointer-events: auto; - background-color: $dark-color; - color: $light-color; - font-size: 65%; - transition: transform 0.2s; - text-align: center; - position: relative; - - .fa-icon { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - - &:last-child { - margin-right: 0; - } - &:hover { - background: $main-accent; - } - } -} - - - diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx deleted file mode 100644 index 16e318f7a..000000000 --- a/src/client/views/nodes/LinkMenu.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { action, observable } from "mobx"; -import { observer } from "mobx-react"; -import { DocumentView } from "./DocumentView"; -import { LinkEditor } from "./LinkEditor"; -import './LinkMenu.scss'; -import React = require("react"); -import { Doc } from "../../../new_fields/Doc"; -import { LinkManager } from "../../util/LinkManager"; -import { LinkMenuGroup } from "./LinkMenuGroup"; -import { faTrash } from '@fortawesome/free-solid-svg-icons'; -import { library } from "@fortawesome/fontawesome-svg-core"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - -library.add(faTrash); - -interface Props { - docView: DocumentView; - changeFlyout: () => void; - addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; -} - -@observer -export class LinkMenu extends React.Component { - - @observable private _editingLink?: Doc; - - @action - componentWillReceiveProps() { - this._editingLink = undefined; - } - - clearAllLinks = () => { - LinkManager.Instance.deleteAllLinksOnAnchor(this.props.docView.props.Document); - } - - renderAllGroups = (groups: Map>): Array => { - let linkItems: Array = []; - groups.forEach((group, groupType) => { - linkItems.push( - this._editingLink = linkDoc)} - addDocTab={this.props.addDocTab} /> - ); - }); - - // if source doc has no links push message - if (linkItems.length === 0) linkItems.push(

No links have been created yet. Drag the linking button onto another document to create a link.

); - - return linkItems; - } - - render() { - let sourceDoc = this.props.docView.props.Document; - let groups: Map = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc); - if (this._editingLink === undefined) { - return ( -
- - {/* */} -
- {this.renderAllGroups(groups)} -
-
- ); - } else { - return ( - this._editingLink = undefined)}> - ); - } - } -} \ No newline at end of file diff --git a/src/client/views/nodes/LinkMenuGroup.tsx b/src/client/views/nodes/LinkMenuGroup.tsx deleted file mode 100644 index aa23d80a1..000000000 --- a/src/client/views/nodes/LinkMenuGroup.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { action, observable } from "mobx"; -import { observer } from "mobx-react"; -import { DocumentView } from "./DocumentView"; -import { LinkMenuItem } from "./LinkMenuItem"; -import { LinkEditor } from "./LinkEditor"; -import './LinkMenu.scss'; -import React = require("react"); -import { Doc, DocListCast } from "../../../new_fields/Doc"; -import { Id } from "../../../new_fields/FieldSymbols"; -import { LinkManager } from "../../util/LinkManager"; -import { DragLinksAsDocuments, DragManager, SetupDrag } from "../../util/DragManager"; -import { emptyFunction } from "../../../Utils"; -import { Docs } from "../../documents/Documents"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { UndoManager } from "../../util/UndoManager"; -import { StrCast } from "../../../new_fields/Types"; -import { SchemaHeaderField, RandomPastel } from "../../../new_fields/SchemaHeaderField"; - -interface LinkMenuGroupProps { - sourceDoc: Doc; - group: Doc[]; - groupType: string; - showEditor: (linkDoc: Doc) => void; - addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; - docView: DocumentView; - -} - -@observer -export class LinkMenuGroup extends React.Component { - - private _drag = React.createRef(); - private _table = React.createRef(); - - onLinkButtonDown = (e: React.PointerEvent): void => { - e.stopPropagation(); - document.removeEventListener("pointermove", this.onLinkButtonMoved); - document.addEventListener("pointermove", this.onLinkButtonMoved); - document.removeEventListener("pointerup", this.onLinkButtonUp); - document.addEventListener("pointerup", this.onLinkButtonUp); - } - - onLinkButtonUp = (e: PointerEvent): void => { - document.removeEventListener("pointermove", this.onLinkButtonMoved); - document.removeEventListener("pointerup", this.onLinkButtonUp); - e.stopPropagation(); - } - - - onLinkButtonMoved = async (e: PointerEvent) => { - UndoManager.RunInBatch(() => { - if (this._drag.current !== null && (e.movementX > 1 || e.movementY > 1)) { - document.removeEventListener("pointermove", this.onLinkButtonMoved); - document.removeEventListener("pointerup", this.onLinkButtonUp); - - let draggedDocs = this.props.group.map(linkDoc => { - let opp = LinkManager.Instance.getOppositeAnchor(linkDoc, this.props.sourceDoc); - if (opp) return opp; - }) as Doc[]; - let dragData = new DragManager.DocumentDragData(draggedDocs, draggedDocs.map(d => undefined)); - - DragManager.StartLinkedDocumentDrag([this._drag.current], dragData, e.x, e.y, { - handlers: { - dragComplete: action(emptyFunction), - }, - hideSource: false - }); - } - }, "drag links"); - e.stopPropagation(); - } - - viewGroupAsTable = (groupType: string): JSX.Element => { - let keys = LinkManager.Instance.getMetadataKeysInGroup(groupType); - let index = keys.indexOf(""); - if (index > -1) keys.splice(index, 1); - let cols = ["anchor1", "anchor2", ...[...keys]].map(c => new SchemaHeaderField(c, "#f1efeb")); - let docs: Doc[] = LinkManager.Instance.getAllMetadataDocsInGroup(groupType); - let createTable = action(() => Docs.Create.SchemaDocument(cols, docs, { width: 500, height: 300, title: groupType + " table" })); - let ref = React.createRef(); - return
; - } - - render() { - let groupItems = this.props.group.map(linkDoc => { - let destination = LinkManager.Instance.getOppositeAnchor(linkDoc, this.props.sourceDoc); - if (destination && this.props.sourceDoc) { - return ; - } - }); - - return ( -
-
-

{this.props.groupType}:

- {this.props.groupType === "*" || this.props.groupType === "" ? <> : this.viewGroupAsTable(this.props.groupType)} -
-
- {groupItems} -
-
- ); - } -} \ No newline at end of file diff --git a/src/client/views/nodes/LinkMenuItem.tsx b/src/client/views/nodes/LinkMenuItem.tsx deleted file mode 100644 index 9349dbbac..000000000 --- a/src/client/views/nodes/LinkMenuItem.tsx +++ /dev/null @@ -1,282 +0,0 @@ -import { library } from '@fortawesome/fontawesome-svg-core'; -import { faEdit, faEye, faTimes, faArrowRight, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { observer } from "mobx-react"; -import { DocumentManager } from "../../util/DocumentManager"; -import { undoBatch } from "../../util/UndoManager"; -import './LinkMenu.scss'; -import React = require("react"); -import { Doc, DocListCastAsync } from '../../../new_fields/Doc'; -import { StrCast, Cast, FieldValue, NumCast } from '../../../new_fields/Types'; -import { observable, action } from 'mobx'; -import { LinkManager } from '../../util/LinkManager'; -import { DragLinkAsDocument } from '../../util/DragManager'; -import { CollectionDockingView } from '../collections/CollectionDockingView'; -import { SelectionManager } from '../../util/SelectionManager'; -import { CollectionViewType } from '../collections/CollectionBaseView'; -import { DocumentView } from './DocumentView'; -library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp); - - -interface LinkMenuItemProps { - groupType: string; - linkDoc: Doc; - sourceDoc: Doc; - destinationDoc: Doc; - showEditor: (linkDoc: Doc) => void; - addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; -} - -@observer -export class LinkMenuItem extends React.Component { - private _drag = React.createRef(); - @observable private _showMore: boolean = false; - @action toggleShowMore() { this._showMore = !this._showMore; } - - - unhighlight = () => { - Doc.UnhighlightAll(); - document.removeEventListener("pointerdown", this.unhighlight); - } - - @action - highlightDoc = () => { - document.removeEventListener("pointerdown", this.unhighlight); - Doc.HighlightDoc(this.props.destinationDoc); - window.setTimeout(() => { - document.addEventListener("pointerdown", this.unhighlight); - }, 10000); - } - - // NOT TESTED - // col = collection the doc is in - // target = the document to center on - @undoBatch - openLinkColRight = ({ col, target }: { col: Doc, target: Doc }) => { - col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; - if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { - const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2; - const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2; - col.panX = newPanX; - col.panY = newPanY; - } - CollectionDockingView.Instance.AddRightSplit(col, undefined); - } - - // DONE - // this opens the linked doc in a right split, NOT in its collection - @undoBatch - openLinkRight = () => { - this.highlightDoc(); - let alias = Doc.MakeAlias(this.props.destinationDoc); - CollectionDockingView.Instance.AddRightSplit(alias, undefined); - SelectionManager.DeselectAll(); - } - - // DONE - // this is the standard "follow link" (jump to document) - // taken from follow link - @undoBatch - jumpToLink = async (shouldZoom: boolean) => { - //there is an issue right now so this will be false automatically - shouldZoom = false; - this.highlightDoc(); - let jumpToDoc = this.props.destinationDoc; - let pdfDoc = FieldValue(Cast(this.props.destinationDoc, Doc)); - if (pdfDoc) { - jumpToDoc = pdfDoc; - } - let proto = Doc.GetProto(this.props.linkDoc); - let targetContext = await Cast(proto.targetContext, Doc); - let sourceContext = await Cast(proto.sourceContext, Doc); - let self = this; - - let dockingFunc = (document: Doc) => { this.props.addDocTab(document, undefined, "inTab"); SelectionManager.DeselectAll(); }; - - if (this.props.destinationDoc === self.props.linkDoc.anchor2 && targetContext) { - DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, async document => dockingFunc(document), undefined, targetContext); - } - else if (this.props.destinationDoc === self.props.linkDoc.anchor1 && sourceContext) { - DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, document => dockingFunc(sourceContext!)); - } - else if (DocumentManager.Instance.getDocumentView(jumpToDoc)) { - DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, undefined, undefined, NumCast((this.props.destinationDoc === self.props.linkDoc.anchor2 ? self.props.linkDoc.anchor2Page : self.props.linkDoc.anchor1Page))); - - } - else { - DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, dockingFunc); - } - } - - // DONE - // opens link in new tab (not in a collection) - // this opens it full screen, do we need a separate full screen option? - @undoBatch - openLinkTab = () => { - this.highlightDoc(); - let fullScreenAlias = Doc.MakeAlias(this.props.destinationDoc); - this.props.addDocTab(fullScreenAlias, undefined, "inTab"); - SelectionManager.DeselectAll(); - } - - // NOT TESTED - // opens link in new tab in collection - // col = collection the doc is in - // target = the document to center on - @undoBatch - openLinkColTab = ({ col, target }: { col: Doc, target: Doc }) => { - this.highlightDoc(); - col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; - if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { - const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2; - const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2; - col.panX = newPanX; - col.panY = newPanY; - } - // CollectionDockingView.Instance.AddRightSplit(col, undefined); - this.props.addDocTab(col, undefined, "inTab"); - SelectionManager.DeselectAll(); - } - - // this will open a link next to the source doc - @undoBatch - openLinkInPlace = () => { - this.highlightDoc(); - - let alias = Doc.MakeAlias(this.props.destinationDoc); - let y = this.props.sourceDoc.y; - let x = this.props.sourceDoc.x; - let parentView: any = undefined; - let parentDoc: Doc = this.props.sourceDoc; - - SelectionManager.SelectedDocuments().map(dv => { - if (dv.props.Document === this.props.sourceDoc) { - parentView = dv.props.ContainingCollectionView; - } - }); - - if (parentView) { - // console.log(parentDoc) - console.log(parentView.props.addDocument) - } - } - - //set this to be the default link behavior, can be any of the above - private defaultLinkBehavior: any = this.openLinkInPlace; - - onEdit = (e: React.PointerEvent): void => { - e.stopPropagation(); - this.props.showEditor(this.props.linkDoc); - SelectionManager.DeselectAll(); - } - - renderMetadata = (): JSX.Element => { - let groups = LinkManager.Instance.getAnchorGroups(this.props.linkDoc, this.props.sourceDoc); - let index = groups.findIndex(groupDoc => StrCast(groupDoc.type).toUpperCase() === this.props.groupType.toUpperCase()); - let groupDoc = index > -1 ? groups[index] : undefined; - - let mdRows: Array = []; - if (groupDoc) { - let mdDoc = Cast(groupDoc.metadata, Doc, null); - if (mdDoc) { - let keys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType);//groupMetadataKeys.get(this.props.groupType); - mdRows = keys.map(key => { - return (
{key}: {StrCast(mdDoc[key])}
); - }); - } - } - - return (
{mdRows}
); - } - - onLinkButtonDown = (e: React.PointerEvent): void => { - e.stopPropagation(); - document.removeEventListener("pointermove", this.onLinkButtonMoved); - document.addEventListener("pointermove", this.onLinkButtonMoved); - document.removeEventListener("pointerup", this.onLinkButtonUp); - document.addEventListener("pointerup", this.onLinkButtonUp); - } - - onLinkButtonUp = (e: PointerEvent): void => { - document.removeEventListener("pointermove", this.onLinkButtonMoved); - document.removeEventListener("pointerup", this.onLinkButtonUp); - e.stopPropagation(); - } - - onLinkButtonMoved = async (e: PointerEvent) => { - if (this._drag.current !== null && (e.movementX > 1 || e.movementY > 1)) { - document.removeEventListener("pointermove", this.onLinkButtonMoved); - document.removeEventListener("pointerup", this.onLinkButtonUp); - - DragLinkAsDocument(this._drag.current, e.x, e.y, this.props.linkDoc, this.props.sourceDoc); - } - e.stopPropagation(); - } - - render() { - - let keys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType);//groupMetadataKeys.get(this.props.groupType); - let canExpand = keys ? keys.length > 0 : false; - - return ( -
-
-
-

{StrCast(this.props.destinationDoc.title)}

-
- {canExpand ?
this.toggleShowMore()}> -
: <>} -
- {/* Original */} - {/*
*/} - {/* New */} -
-
-
- {this._showMore ? this.renderMetadata() : <>} -
- -
- ); - } -} - - // @undoBatch - // onFollowLink = async (e: React.PointerEvent): Promise => { - // e.stopPropagation(); - // e.persist(); - // let jumpToDoc = this.props.destinationDoc; - // let pdfDoc = FieldValue(Cast(this.props.destinationDoc, Doc)); - // if (pdfDoc) { - // jumpToDoc = pdfDoc; - // } - // let proto = Doc.GetProto(this.props.linkDoc); - // let targetContext = await Cast(proto.targetContext, Doc); - // let sourceContext = await Cast(proto.sourceContext, Doc); - // let self = this; - - - // let dockingFunc = (document: Doc) => { this.props.addDocTab(document, undefined, "inTab"); SelectionManager.DeselectAll(); }; - // if (e.ctrlKey) { - // dockingFunc = (document: Doc) => CollectionDockingView.Instance.AddRightSplit(document, undefined); - // } - - // if (this.props.destinationDoc === self.props.linkDoc.anchor2 && targetContext) { - // DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, async document => dockingFunc(document), undefined, targetContext!); - // console.log("1") - // } - // else if (this.props.destinationDoc === self.props.linkDoc.anchor1 && sourceContext) { - // DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, document => dockingFunc(sourceContext!)); - // console.log("2") - // } - // else if (DocumentManager.Instance.getDocumentView(jumpToDoc)) { - // DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, undefined, undefined, NumCast((this.props.destinationDoc === self.props.linkDoc.anchor2 ? self.props.linkDoc.anchor2Page : self.props.linkDoc.anchor1Page))); - // console.log("3") - - // } - // else { - // DocumentManager.Instance.jumpToDocument(jumpToDoc, e.altKey, false, dockingFunc); - // console.log("4") - - // } - // } \ No newline at end of file diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 173de64de..1b54472e5 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -23,7 +23,7 @@ import { library } from "@fortawesome/fontawesome-svg-core"; import { Docs } from "../../documents/Documents"; import { PreviewCursor } from "../PreviewCursor"; -library.add(faStickyNote) +library.add(faStickyNote); @observer export class WebBox extends React.Component { @@ -76,7 +76,6 @@ export class WebBox extends React.Component { } switchToText() { - console.log("switchng to text") if (this.props.removeDocument) this.props.removeDocument(this.props.Document); // let newPoint = PreviewCursor._getTransform().transformPoint(PreviewCursor._clickPoint[0], PreviewCursor._clickPoint[1]); let newBox = Docs.Create.TextDocument({ diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index 508655605..de45aad02 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -29,7 +29,7 @@ export class CurrentUserUtils { doc.viewType = CollectionViewType.Tree; doc.dropAction = "alias"; doc.layout = CollectionView.LayoutString(); - doc.title = Doc.CurrentUserEmail + doc.title = Doc.CurrentUserEmail; this.updateUserDocument(doc); doc.data = new List(); doc.gridGap = 5; -- cgit v1.2.3-70-g09d2 From 186cf33322b6c96386c6e9fdb823025d09c5caeb Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 21 Aug 2019 11:35:18 -0400 Subject: extended treeview functionality - better indenting, state management, drag dropping. --- src/client/views/EditableView.tsx | 28 +++++--- .../views/collections/CollectionTreeView.tsx | 83 +++++++++++++--------- src/client/views/nodes/FormattedTextBox.tsx | 1 - .../authentication/models/current_user_utils.ts | 5 +- 4 files changed, 75 insertions(+), 42 deletions(-) (limited to 'src') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index c3612fee9..dd5395802 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -3,6 +3,7 @@ import { observer } from 'mobx-react'; import { observable, action, trace } from 'mobx'; import "./EditableView.scss"; import * as Autosuggest from 'react-autosuggest'; +import { undoBatch } from '../util/UndoManager'; export interface EditableProps { /** @@ -70,14 +71,12 @@ export class EditableView extends React.Component { onKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Tab") { e.stopPropagation(); + this.finalizeEdit(e.currentTarget.value, e.shiftKey); this.props.OnTab && this.props.OnTab(); } else if (e.key === "Enter") { e.stopPropagation(); if (!e.ctrlKey) { - if (this.props.SetValue(e.currentTarget.value, e.shiftKey)) { - this._editing = false; - this.props.isEditingCallback && this.props.isEditingCallback(false); - } + this.finalizeEdit(e.currentTarget.value, e.shiftKey); } else if (this.props.OnFillDown) { this.props.OnFillDown(e.currentTarget.value); this._editing = false; @@ -100,6 +99,14 @@ export class EditableView extends React.Component { e.stopPropagation(); } + @action + private finalizeEdit(value: string, shiftDown: boolean) { + if (this.props.SetValue(value, shiftDown)) { + this._editing = false; + this.props.isEditingCallback && this.props.isEditingCallback(false); + } + } + stopPropagation(e: React.SyntheticEvent) { e.stopPropagation(); } @@ -118,7 +125,7 @@ export class EditableView extends React.Component { className: "editableView-input", onKeyDown: this.onKeyDown, autoFocus: true, - onBlur: action(() => this._editing = false), + onBlur: e => this.finalizeEdit(e.currentTarget.value, false), onPointerDown: this.stopPropagation, onClick: this.stopPropagation, onPointerUp: this.stopPropagation, @@ -126,9 +133,14 @@ export class EditableView extends React.Component { onChange: this.props.autosuggestProps.onChange }} /> - : { this._editing = false; this.props.isEditingCallback && this.props.isEditingCallback(false); })} onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation} - style={{ display: this.props.display, fontSize: this.props.fontSize }} />; + : this.finalizeEdit(e.currentTarget.value, false)} + onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation} + style={{ display: this.props.display, fontSize: this.props.fontSize }} + />; } else { if (this.props.autosuggestProps) this.props.autosuggestProps.resetValue(); return ( diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index ebd385743..e1eb9e1a5 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -49,6 +49,8 @@ export interface TreeViewProps { treeViewId: string; parentKey: string; active: () => boolean; + showHeaderFields: () => boolean; + preventTreeViewOpen: boolean; } library.add(faTrashAlt); @@ -65,7 +67,12 @@ library.add(faArrowsAltH); library.add(faPlus, faMinus); @observer /** - * Component that takes in a document prop and a boolean whether it's collapsed or not. + * Renders a treeView of a collection of documents + * + * special fields: + * treeViewOpen : flag denoting whether the documents sub-tree (contents) is visible or hidden + * preventTreeViewOpen : ignores the treeViewOpen flag (for allowing a view to not be slaved to other views of the document) + * treeViewExpandedView : name of field whose contents are being displayed as the document's subtree */ class TreeView extends React.Component { static loadId = ""; @@ -73,7 +80,9 @@ class TreeView extends React.Component { private _treedropDisposer?: DragManager.DragDropDisposer; private _dref = React.createRef(); get defaultExpandedView() { return this.childDocs ? this.fieldKey : "fields"; } - @observable _collapsed: boolean = true; + @observable _overrideTreeViewOpen = false; // override of the treeViewOpen field allowing the display state to be independent of the document's state + @computed get treeViewOpen() { return (BoolCast(this.props.document.treeViewOpen) && !this.props.preventTreeViewOpen) || this._overrideTreeViewOpen; } + set treeViewOpen(c: boolean) { if (this.props.preventTreeViewOpen) this._overrideTreeViewOpen = c; else this.props.document.treeViewOpen = c; } @computed get treeViewExpandedView() { return StrCast(this.props.document.treeViewExpandedView, this.defaultExpandedView); } @computed get MAX_EMBED_HEIGHT() { return NumCast(this.props.document.maxEmbedHeight, 300); } @computed get dataDoc() { return this.resolvedDataDoc ? this.resolvedDataDoc : this.props.document; } @@ -146,7 +155,7 @@ class TreeView extends React.Component { let rect = this._header!.current!.getBoundingClientRect(); let bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2); let before = x[1] < bounds[1]; - let inside = x[0] > bounds[0] + 75 || (!before && !this._collapsed); + let inside = x[0] > bounds[0] + 75 || (!before && this.treeViewOpen); this._header!.current!.className = "treeViewItem-header"; if (inside) this._header!.current!.className += " treeViewItem-header-inside"; else if (before) this._header!.current!.className += " treeViewItem-header-above"; @@ -163,15 +172,15 @@ class TreeView extends React.Component { fontStyle={style} fontSize={12} GetValue={() => StrCast(this.props.document[key])} - SetValue={(value: string) => (Doc.GetProto(this.dataDoc)[key] = value) ? true : true} - OnFillDown={(value: string) => { + SetValue={undoBatch((value: string) => (Doc.GetProto(this.dataDoc)[key] = value) ? true : true)} + OnFillDown={undoBatch((value: string) => { Doc.GetProto(this.dataDoc)[key] = value; let doc = this.props.document.detailedLayout instanceof Doc ? Doc.ApplyTemplate(Doc.GetProto(this.props.document.detailedLayout)) : undefined; if (!doc) doc = Docs.Create.FreeformDocument([], { title: "", x: 0, y: 0, width: 100, height: 25, templates: new List([Templates.Title.Layout]) }); TreeView.loadId = doc[Id]; return this.props.addDocument(doc); - }} - OnTab={() => this.props.indentDocument && this.props.indentDocument()} + })} + OnTab={() => { TreeView.loadId = ""; this.props.indentDocument && this.props.indentDocument(); }} />) onWorkspaceContextMenu = (e: React.MouseEvent): void => { @@ -200,7 +209,7 @@ class TreeView extends React.Component { let rect = this._header!.current!.getBoundingClientRect(); let bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2); let before = x[1] < bounds[1]; - let inside = x[0] > bounds[0] + 75 || (!before && !this._collapsed); + let inside = x[0] > bounds[0] + 75 || (!before && this.treeViewOpen); if (de.data instanceof DragManager.LinkDragData) { let sourceDoc = de.data.linkSourceDocument; let destDoc = this.props.document; @@ -256,14 +265,14 @@ class TreeView extends React.Component { let rows: JSX.Element[] = []; for (let key of Object.keys(ids).slice().sort()) { let contents = doc[key]; - let contentElement: JSX.Element[] | JSX.Element = []; + let contentElement: (JSX.Element | null)[] | JSX.Element = []; if (contents instanceof Doc || Cast(contents, listSpec(Doc))) { let remDoc = (doc: Doc) => this.remove(doc, key); - let addDoc = (doc: Doc, addBefore?: Doc, before?: boolean) => Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, !BoolCast(this.props.document.stackingHeadersSortDescending)); + let addDoc = (doc: Doc, addBefore?: Doc, before?: boolean) => Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, !BoolCast(this.props.document.stackingHeadersSortDescending, true)); contentElement = TreeView.GetChildElements(contents instanceof Doc ? [contents] : DocListCast(contents), this.props.treeViewId, doc, undefined, key, addDoc, remDoc, this.move, - this.props.dropAction, this.props.addDocTab, this.props.pinToPres, this.props.ScreenToLocalTransform, this.props.outerXf, this.props.active, this.props.panelWidth, this.props.renderDepth); + this.props.dropAction, this.props.addDocTab, this.props.pinToPres, this.props.ScreenToLocalTransform, this.props.outerXf, this.props.active, this.props.panelWidth, this.props.renderDepth, this.props.showHeaderFields, this.props.preventTreeViewOpen); } else { contentElement = { const expandKey = this.treeViewExpandedView === this.fieldKey ? this.fieldKey : this.treeViewExpandedView === "links" ? "links" : undefined; if (expandKey !== undefined) { let remDoc = (doc: Doc) => this.remove(doc, expandKey); - let addDoc = (doc: Doc, addBefore?: Doc, before?: boolean) => Doc.AddDocToList(this.dataDoc, expandKey, doc, addBefore, before, !BoolCast(this.props.document.stackingHeadersSortDescending)); + let addDoc = (doc: Doc, addBefore?: Doc, before?: boolean) => Doc.AddDocToList(this.dataDoc, expandKey, doc, addBefore, before, !BoolCast(this.props.document.stackingHeadersSortDescending, true)); let docs = expandKey === "links" ? this.childLinks : this.childDocs; return
    {!docs ? (null) : TreeView.GetChildElements(docs as Doc[], this.props.treeViewId, this.props.document.layout as Doc, this.resolvedDataDoc, expandKey, addDoc, remDoc, this.move, this.props.dropAction, this.props.addDocTab, this.props.pinToPres, this.props.ScreenToLocalTransform, - this.props.outerXf, this.props.active, this.props.panelWidth, this.props.renderDepth)} + this.props.outerXf, this.props.active, this.props.panelWidth, this.props.renderDepth, this.props.showHeaderFields, this.props.preventTreeViewOpen)}
; } else if (this.treeViewExpandedView === "fields") { return
    @@ -329,8 +338,8 @@ class TreeView extends React.Component { @computed get renderBullet() { - return
    this._collapsed = !this._collapsed)} style={{ color: StrCast(this.props.document.color, "black"), opacity: 0.4 }}> - {} + return
    this.treeViewOpen = !this.treeViewOpen)} style={{ color: StrCast(this.props.document.color, "black"), opacity: 0.4 }}> + {}
    ; } /** @@ -344,13 +353,13 @@ class TreeView extends React.Component { let headerElements = ( { - if (!this._collapsed) { + if (this.treeViewOpen) { this.props.document.treeViewExpandedView = this.treeViewExpandedView === this.fieldKey ? "fields" : this.treeViewExpandedView === "fields" && this.props.document.layout ? "layout" : this.treeViewExpandedView === "layout" && this.props.document.links ? "links" : this.childDocs ? this.fieldKey : "fields"; } - this._collapsed = false; + this.treeViewOpen = true; })}> {this.treeViewExpandedView} ); @@ -368,7 +377,7 @@ class TreeView extends React.Component { }} > {this.editableView("title")}
    - {headerElements} + {this.props.showHeaderFields() ? headerElements : (null)} {openRight} ; } @@ -381,13 +390,13 @@ class TreeView extends React.Component { {this.renderTitle}
    - {this._collapsed ? (null) : this.renderContent} + {!this.treeViewOpen ? (null) : this.renderContent}
; } public static GetChildElements( - docs: Doc[], + docList: Doc[], treeViewId: string, containingCollection: Doc, dataDoc: Doc | undefined, @@ -402,8 +411,11 @@ class TreeView extends React.Component { outerXf: () => { translateX: number, translateY: number }, active: () => boolean, panelWidth: () => number, - renderDepth: number + renderDepth: number, + showHeaderFields: () => boolean, + preventTreeViewOpen: boolean ) { + let docs = docList.filter(child => !child.excludeFromLibrary); let viewSpecScript = Cast(containingCollection.viewSpecScript, ScriptField); if (viewSpecScript) { let script = viewSpecScript.script; @@ -418,7 +430,7 @@ class TreeView extends React.Component { }); } - let descending = BoolCast(containingCollection.stackingHeadersSortDescending); + let descending = BoolCast(containingCollection.stackingHeadersSortDescending, true); docs.slice().sort(function (a, b): 1 | -1 { let descA = descending ? b : a; let descB = descending ? a : b; @@ -448,11 +460,14 @@ class TreeView extends React.Component { } let indent = i === 0 ? undefined : () => { - if (StrCast(docs[i - 1].layout).indexOf("CollectionView") !== -1) { + if (StrCast(docs[i - 1].layout).indexOf("fieldKey") !== -1) { let fieldKeysub = StrCast(docs[i - 1].layout).split("fieldKey")[1]; let fieldKey = fieldKeysub.split("\"")[1]; - Doc.AddDocToList(docs[i - 1], fieldKey, child); - remove(child); + if (fieldKey && Cast(docs[i - 1][fieldKey], listSpec(Doc)) !== undefined) { + Doc.AddDocToList(docs[i - 1], fieldKey, child); + docs[i - 1].treeViewOpen = true; + remove(child); + } } }; let addDocument = (doc: Doc, relativeTo?: Doc, before?: boolean) => { @@ -481,7 +496,9 @@ class TreeView extends React.Component { ScreenToLocalTransform={screenToLocalXf} outerXf={outerXf} parentKey={key} - active={active} />; + active={active} + showHeaderFields={showHeaderFields} + preventTreeViewOpen={preventTreeViewOpen} />; }); } } @@ -561,7 +578,7 @@ export class CollectionTreeView extends CollectionSubView(Document) { render() { Doc.UpdateDocumentExtensionForField(this.props.DataDoc ? this.props.DataDoc : this.props.Document, this.props.fieldKey); let dropAction = StrCast(this.props.Document.dropAction) as dropActionType; - let addDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before, !BoolCast(this.props.Document.stackingHeadersSortDescending)); + let addDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before, false, false, !BoolCast(this.props.Document.stackingHeadersSortDescending, true)); let moveDoc = (d: Doc, target: Doc, addDoc: (doc: Doc) => boolean) => this.props.moveDocument(d, target, addDoc); return !this.childDocs ? (null) : (
StrCast(this.resolvedDataDoc.title)} - SetValue={(value: string) => (Doc.GetProto(this.resolvedDataDoc).title = value) ? true : true} - OnFillDown={(value: string) => { + SetValue={undoBatch((value: string) => (Doc.GetProto(this.resolvedDataDoc).title = value) ? true : true)} + OnFillDown={undoBatch((value: string) => { Doc.GetProto(this.props.Document).title = value; let doc = this.props.Document.detailedLayout instanceof Doc ? Doc.ApplyTemplate(Doc.GetProto(this.props.Document.detailedLayout)) : undefined; if (!doc) doc = Docs.Create.FreeformDocument([], { title: "", x: 0, y: 0, width: 100, height: 25, templates: new List([Templates.Title.Layout]) }); TreeView.loadId = doc[Id]; - Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, this.childDocs.length ? this.childDocs[0] : undefined, true, !BoolCast(this.props.Document.stackingHeadersSortDescending)); - }} /> + Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, this.childDocs.length ? this.childDocs[0] : undefined, true, false, false, !BoolCast(this.props.Document.stackingHeadersSortDescending, true)); + })} /> {this.props.Document.workspaceLibrary ? this.renderNotifsButton : (null)} {this.props.Document.allowClear ? this.renderClearButton : (null)}
    { TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.Document, this.props.DataDoc, this.props.fieldKey, addDoc, this.remove, - moveDoc, dropAction, this.props.addDocTab, this.props.pinToPres, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.renderDepth) + moveDoc, dropAction, this.props.addDocTab, this.props.pinToPres, this.props.ScreenToLocalTransform, + this.outerXf, this.props.active, this.props.PanelWidth, this.props.renderDepth, () => this.props.Document.chromeStatus !== "disabled", + BoolCast(this.props.Document.preventTreeViewOpen)) }
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 606e8edb0..3f3360eff 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -736,7 +736,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe @action tryUpdateHeight() { if (this.props.Document.autoHeight && this._ref.current!.scrollHeight !== 0) { - console.log("DT = " + this.props.Document.title + " " + this._ref.current!.clientHeight + " " + this._ref.current!.scrollHeight + " " + this._ref.current!.textContent); let xf = this._ref.current!.getBoundingClientRect(); let scrBounds = this.props.ScreenToLocalTransform().transformBounds(0, 0, xf.width, this._ref.current!.textContent === "" ? 35 : this._ref.current!.scrollHeight); let nh = this.props.Document.isTemplate ? 0 : NumCast(this.dataDoc.nativeHeight, 0); diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index 508655605..aa3da0034 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -10,7 +10,7 @@ import { CollectionView } from "../../../client/views/collections/CollectionView import { Doc } from "../../../new_fields/Doc"; import { List } from "../../../new_fields/List"; import { listSpec } from "../../../new_fields/Schema"; -import { Cast, StrCast } from "../../../new_fields/Types"; +import { Cast, StrCast, PromiseValue } from "../../../new_fields/Types"; import { Utils } from "../../../Utils"; import { RouteStore } from "../../RouteStore"; @@ -49,12 +49,14 @@ export class CurrentUserUtils { workspaces.boxShadow = "0 0"; doc.workspaces = workspaces; } + PromiseValue(Cast(doc.workspaces, Doc)).then(workspaces => workspaces && (workspaces.preventTreeViewOpen = true)); if (doc.recentlyClosed === undefined) { const recentlyClosed = Docs.Create.TreeDocument([], { title: "Recently Closed", height: 75 }); recentlyClosed.excludeFromLibrary = true; recentlyClosed.boxShadow = "0 0"; doc.recentlyClosed = recentlyClosed; } + PromiseValue(Cast(doc.recentlyClosed, Doc)).then(recent => recent && (recent.preventTreeViewOpen = true)); if (doc.curPresentation === undefined) { const curPresentation = Docs.Create.PresDocument(new List(), { title: "Presentation" }); curPresentation.excludeFromLibrary = true; @@ -73,6 +75,7 @@ export class CurrentUserUtils { } StrCast(doc.title).indexOf("@") !== -1 && (doc.title = StrCast(doc.title).split("@")[0] + "'s Library"); doc.width = 100; + doc.preventTreeViewOpen = true; } public static loadCurrentUser() { -- cgit v1.2.3-70-g09d2 From 542d272921666ad6ffbef8a028d8204e5c357791 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 21 Aug 2019 11:51:55 -0400 Subject: added pinning tree items to presentation. fixed float doc opacity when = 0 --- src/client/views/MetadataEntryMenu.tsx | 2 +- src/client/views/collections/CollectionTreeView.tsx | 3 ++- src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx index 4a45eede9..4d696e37a 100644 --- a/src/client/views/MetadataEntryMenu.tsx +++ b/src/client/views/MetadataEntryMenu.tsx @@ -172,7 +172,7 @@ export class MetadataEntryMenu extends React.Component{
    - {this._allSuggestions.map(s =>
  • { this._currentKey = s; this.previewValue(); })} >{s}
    • )} + {this._allSuggestions.sort().map(s =>
  • { this._currentKey = s; this.previewValue(); })} >{s}
    • )}
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index e1eb9e1a5..472e2f256 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -186,6 +186,7 @@ class TreeView extends React.Component { onWorkspaceContextMenu = (e: React.MouseEvent): void => { if (!e.isPropagationStopped()) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 if (NumCast(this.props.document.viewType) !== CollectionViewType.Docking) { + ContextMenu.Instance.addItem({ description: "Pin to Presentation", event: () => this.props.pinToPres(this.props.document), icon: "tv" }); ContextMenu.Instance.addItem({ description: "Open Tab", event: () => this.props.addDocTab(this.props.document, this.resolvedDataDoc, "inTab"), icon: "folder" }); ContextMenu.Instance.addItem({ description: "Open Right", event: () => this.props.addDocTab(this.props.document, this.resolvedDataDoc, "onRight"), icon: "caret-square-right" }); if (DocumentManager.Instance.getDocumentViews(this.dataDoc).length) { @@ -415,7 +416,7 @@ class TreeView extends React.Component { showHeaderFields: () => boolean, preventTreeViewOpen: boolean ) { - let docs = docList.filter(child => !child.excludeFromLibrary); + let docs = docList.filter(child => !child.excludeFromLibrary && child.opacity !== 0); let viewSpecScript = Cast(containingCollection.viewSpecScript, ScriptField); if (viewSpecScript) { let script = viewSpecScript.script; diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index ee596c841..7631ecc6c 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -83,7 +83,7 @@ export class CollectionFreeFormDocumentView extends DocComponent Date: Wed, 21 Aug 2019 12:58:34 -0400 Subject: tweaks --- src/client/views/nodes/FormattedTextBox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index a2ea12ac5..f2ca0715a 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -274,7 +274,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } e.stopPropagation(); e.preventDefault(); - e.which === 174 && e.altKey && this.recordBullet(); + e.key === "R" && this.recordBullet(); } recordBullet = async () => { @@ -282,7 +282,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe let results = await DictationManager.Controls.listen({ interimHandler: this.setCurrentBulletContent, continuous: { indefinite: false }, - terminators: [completedCue, "bullet", "next"] + // terminators: [completedCue, "bullet", "next"] }); if (results && [DictationManager.Controls.Infringed, completedCue].includes(results)) { DictationManager.Controls.stop(); -- cgit v1.2.3-70-g09d2 From 3535bd703cfdb4872ff6ff0c41d17e39ad1c8e45 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 21 Aug 2019 13:17:50 -0400 Subject: fixed updating size of textboxes --- src/client/views/nodes/FormattedTextBox.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 0c39a57ff..505257e9c 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -272,9 +272,11 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe if (this.props.Document !== SelectionManager.SelectedDocuments()[0].props.Document) { return; } - e.stopPropagation(); - e.preventDefault(); - e.key === "R" && this.recordBullet(); + if (e.key === "R" && e.altKey) { + e.stopPropagation(); + e.preventDefault(); + this.recordBullet(); + } } recordBullet = async () => { @@ -480,8 +482,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe updateState = (exportState: GoogleApiClientUtils.Docs.ReadResult, dataDoc: Doc) => { let pullSuccess = false; if (exportState !== undefined && exportState.body !== undefined && exportState.title !== undefined) { - let data = Cast(dataDoc.data, RichTextField); - if (data) { + const data = Cast(dataDoc.data, RichTextField); + if (data instanceof RichTextField) { pullSuccess = true; this.isGoogleDocsUpdate = true; dataDoc.data = new RichTextField(data[FromPlainText](exportState.body)); @@ -492,7 +494,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe delete dataDoc[GoogleRef]; } DocumentDecorations.Instance.startPullOutcome(pullSuccess); - this.tryUpdateHeight(); + setTimeout(() => this.tryUpdateHeight(), 0); } checkState = (exportState: GoogleApiClientUtils.Docs.ReadResult, dataDoc: Doc) => { @@ -630,7 +632,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe if (!this.props.isOverlay) this.props.select(false); else this._editorView!.focus(); } - this.tryUpdateHeight(); } componentWillUnmount() { -- cgit v1.2.3-70-g09d2 From 2677b811a49788cea9c98d89f85c4959d72e99f7 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 21 Aug 2019 13:37:55 -0400 Subject: tree view drop tweak --- src/client/views/collections/CollectionTreeView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 472e2f256..b61894b29 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -155,7 +155,7 @@ class TreeView extends React.Component { let rect = this._header!.current!.getBoundingClientRect(); let bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2); let before = x[1] < bounds[1]; - let inside = x[0] > bounds[0] + 75 || (!before && this.treeViewOpen); + let inside = x[0] > bounds[0] + 75; this._header!.current!.className = "treeViewItem-header"; if (inside) this._header!.current!.className += " treeViewItem-header-inside"; else if (before) this._header!.current!.className += " treeViewItem-header-above"; -- cgit v1.2.3-70-g09d2 From 11d2743b553da47da88e77de1ac758e16e09b3e0 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 21 Aug 2019 13:55:46 -0400 Subject: adding docs works --- src/client/views/linking/LinkFollowBox.tsx | 3 ++- src/client/views/linking/LinkMenuItem.tsx | 26 ++++++++++++++------------ src/client/views/nodes/FormattedTextBox.tsx | 2 +- 3 files changed, 17 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/client/views/linking/LinkFollowBox.tsx b/src/client/views/linking/LinkFollowBox.tsx index 487281d50..061a4fa93 100644 --- a/src/client/views/linking/LinkFollowBox.tsx +++ b/src/client/views/linking/LinkFollowBox.tsx @@ -1,9 +1,10 @@ import { observable, computed, action, trace } from "mobx"; import React = require("react"); import { observer } from "mobx-react"; -import { FieldViewProps } from "../nodes/FieldView"; +import { FieldViewProps, FieldView } from "../nodes/FieldView"; @observer export class LinkFollowBox extends React.Component { + public static LayoutString() { return FieldView.LayoutString(LinkFollowBox); } } \ No newline at end of file diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 7dc0a9fcd..65516b374 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -1,12 +1,12 @@ import { library } from '@fortawesome/fontawesome-svg-core'; -import { faEdit, faEye, faTimes, faArrowRight, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'; +import { faEdit, faEye, faTimes, faArrowRight, faChevronDown, faChevronUp, faGlobeAsia } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { observer } from "mobx-react"; import { DocumentManager } from "../../util/DocumentManager"; import { undoBatch } from "../../util/UndoManager"; import './LinkMenu.scss'; import React = require("react"); -import { Doc, DocListCastAsync } from '../../../new_fields/Doc'; +import { Doc, DocListCastAsync, WidthSym } from '../../../new_fields/Doc'; import { StrCast, Cast, FieldValue, NumCast } from '../../../new_fields/Types'; import { observable, action } from 'mobx'; import { LinkManager } from '../../util/LinkManager'; @@ -138,27 +138,29 @@ export class LinkMenuItem extends React.Component { SelectionManager.DeselectAll(); } + // DONE // this will open a link next to the source doc @undoBatch openLinkInPlace = () => { this.highlightDoc(); let alias = Doc.MakeAlias(this.props.destinationDoc); - let y = this.props.sourceDoc.y; - let x = this.props.sourceDoc.x; - let parentView: any = undefined; - let parentDoc: Doc = this.props.sourceDoc; + let y = NumCast(this.props.sourceDoc.y); + let x = NumCast(this.props.sourceDoc.x); + + let width = NumCast(this.props.sourceDoc.width); + let height = NumCast(this.props.sourceDoc.height); + + alias.x = x + width + 30; + alias.y = y; + alias.width = width; + alias.height = height; SelectionManager.SelectedDocuments().map(dv => { if (dv.props.Document === this.props.sourceDoc) { - parentView = dv.props.ContainingCollectionView; + dv.props.addDocument && dv.props.addDocument(alias, false); } }); - - if (parentView) { - // console.log(parentDoc) - console.log(parentView.props.addDocument); - } } //set this to be the default link behavior, can be any of the above diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 9ae092bad..9652a3a78 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -739,7 +739,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe @action tryUpdateHeight() { if (this.props.Document.autoHeight && this._ref.current!.scrollHeight !== 0) { - console.log("DT = " + this.props.Document.title + " " + this._ref.current!.clientHeight + " " + this._ref.current!.scrollHeight + " " + this._ref.current!.textContent); + // console.log("DT = " + this.props.Document.title + " " + this._ref.current!.clientHeight + " " + this._ref.current!.scrollHeight + " " + this._ref.current!.textContent); let xf = this._ref.current!.getBoundingClientRect(); let scrBounds = this.props.ScreenToLocalTransform().transformBounds(0, 0, xf.width, this._ref.current!.textContent === "" ? 35 : this._ref.current!.scrollHeight); let nh = this.props.Document.isTemplate ? 0 : NumCast(this.dataDoc.nativeHeight, 0); -- cgit v1.2.3-70-g09d2 From 76a693012866178a3fbe037ab06cfd4482f37917 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 21 Aug 2019 14:22:30 -0400 Subject: djlzdkfj --- src/client/views/nodes/FormattedTextBox.tsx | 7 +++++++ src/client/views/nodes/WebBox.tsx | 26 ++++++++++++++++---------- 2 files changed, 23 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 25f611f19..d299bbf72 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -162,6 +162,13 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } } + public setText = (text: string) => { + const tx = this._editorView!.state.tr.insertText(text); + const state = this._editorView!.state; + this._editorView!.dispatch(tx); + return new RichTextField(JSON.stringify(state.toJSON())); + } + dispatchTransaction = (tx: Transaction) => { if (this._editorView) { const state = this._editorView.state.apply(tx); diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index c43b90f91..e7bed3bed 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -26,6 +26,8 @@ import { SelectionManager } from "../../util/SelectionManager"; import { CollectionView } from "../collections/CollectionView"; import { CollectionPDFView } from "../collections/CollectionPDFView"; import { CollectionVideoView } from "../collections/CollectionVideoView"; +import { DocumentView } from "./DocumentView"; +import { FormattedTextBox } from "./FormattedTextBox"; library.add(faStickyNote) @@ -85,14 +87,15 @@ export class WebBox extends React.Component { let field = Cast(this.props.Document[this.props.fieldKey], WebField); if (field) url = field.url.href; - let parent: Opt; + let docView: DocumentView; // let parentDoc: any; SelectionManager.SelectedDocuments().map(dv => { - parent = dv.props.ContainingCollectionView; - // if(parent) parentDoc = parent.props.Document; + // docView = dv; dv.props.removeDocument && dv.props.removeDocument(dv.props.Document); }); + console.log("happening") + // // let newPoint = PreviewCursor._getTransform().transformPoint(PreviewCursor._clickPoint[0], PreviewCursor._clickPoint[1]); let newBox = Docs.Create.TextDocument({ width: 200, height: 100, @@ -103,13 +106,16 @@ export class WebBox extends React.Component { title: url }); - console.log(newBox) - if (parent) { - let parentDoc: Doc = parent.props.Document; - if (parentDoc && parentDoc.props) { - parentDoc.props.addDocument(); - } - } + console.log(typeof newBox) + + // const script = KeyValueBox.CompileKVPScript(`new RichTextField("{"doc":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"${url}"}]}]},"selection":{"type":"text","anchor":1,"head":1}}")`); + // const script = KeyValueBox.CompileKVPScript(newBox.setText(url)) + // console.log(script) + // if (!script) return; + // KeyValueBox.ApplyKVPScript(this.props.Document, "data", script); + + console.log(newBox); + newBox.proto!.autoHeight = true; // PreviewCursor._addLiveTextDoc(newBox); -- cgit v1.2.3-70-g09d2 From e50dc35f922efdeadfde70c9cf552b9ed5722810 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 21 Aug 2019 14:35:35 -0400 Subject: uncommented terminators --- src/client/views/nodes/FormattedTextBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 505257e9c..1e0975b4b 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -284,7 +284,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe let results = await DictationManager.Controls.listen({ interimHandler: this.setCurrentBulletContent, continuous: { indefinite: false }, - // terminators: [completedCue, "bullet", "next"] + terminators: [completedCue, "bullet", "next"] }); if (results && [DictationManager.Controls.Infringed, completedCue].includes(results)) { DictationManager.Controls.stop(); -- cgit v1.2.3-70-g09d2 From 5c9f40006aa157c58ec40828ebd4845c16daa8af Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 21 Aug 2019 15:08:39 -0400 Subject: start of making link follow --- src/client/documents/DocumentTypes.ts | 1 + src/client/documents/Documents.ts | 4 + src/client/views/MainView.tsx | 11 ++ src/client/views/linking/LinkFollowBox.scss | 6 + src/client/views/linking/LinkFollowBox.tsx | 148 ++++++++++++++++++++++++ src/client/views/linking/LinkMenuItem.tsx | 12 +- src/client/views/nodes/DocumentContentsView.tsx | 4 +- 7 files changed, 179 insertions(+), 7 deletions(-) create mode 100644 src/client/views/linking/LinkFollowBox.scss (limited to 'src') diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index 1578e49fe..381981e1b 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -19,4 +19,5 @@ export enum DocumentType { YOUTUBE = "youtube", DRAGBOX = "dragbox", PRES = "presentation", + LINKFOLLOW = "linkfollow", } \ No newline at end of file diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 47df17329..cd612aaa9 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -45,6 +45,7 @@ import { PresBox } from "../views/nodes/PresBox"; import { ComputedField } from "../../new_fields/ScriptField"; import { ProxyField } from "../../new_fields/Proxy"; import { DocumentType } from "./DocumentTypes"; +import { LinkFollowBox } from "../views/linking/LinkFollowBox"; //import { PresBox } from "../views/nodes/PresBox"; //import { PresField } from "../../new_fields/PresField"; var requestImageSize = require('../util/request-image-size'); @@ -169,6 +170,9 @@ export namespace Docs { [DocumentType.DRAGBOX, { layout: { view: DragBox }, options: { width: 40, height: 40 }, + }], + [DocumentType.LINKFOLLOW, { + layout: { view: LinkFollowBox } }] ]); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f28844009..f3c8a176c 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -40,6 +40,7 @@ import { PreviewCursor } from './PreviewCursor'; import { FilterBox } from './search/FilterBox'; import PresModeMenu from './presentationview/PresentationModeMenu'; import { PresBox } from './nodes/PresBox'; +import { LinkFollowBox } from './linking/LinkFollowBox'; @observer export class MainView extends React.Component { @@ -55,6 +56,8 @@ export class MainView extends React.Component { public overlayTimeout: NodeJS.Timeout | undefined; + @observable private _linkFollowBox = false; + public initiateDictationFade = () => { let duration = DictationManager.Commands.dictationFadeDuration; this.overlayTimeout = setTimeout(() => { @@ -498,6 +501,12 @@ export class MainView extends React.Component { this._colorPickerDisplay = close ? false : !this._colorPickerDisplay; } + @action + toggleLinkFollowBox = () => { + console.log("toggling link editor") + this._linkFollowBox = !this._linkFollowBox; + } + /* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */ @computed get miscButtons() { @@ -506,6 +515,7 @@ export class MainView extends React.Component { return [ this.isSearchVisible ?
: null,
+
]; @@ -564,6 +574,7 @@ export class MainView extends React.Component { + {/* */}
); } diff --git a/src/client/views/linking/LinkFollowBox.scss b/src/client/views/linking/LinkFollowBox.scss new file mode 100644 index 000000000..c764b002f --- /dev/null +++ b/src/client/views/linking/LinkFollowBox.scss @@ -0,0 +1,6 @@ +@import "../globalCssVariables"; + +.linkFollowBox-main { + position: absolute; + background: $main-accent; +} \ No newline at end of file diff --git a/src/client/views/linking/LinkFollowBox.tsx b/src/client/views/linking/LinkFollowBox.tsx index 061a4fa93..7fc4449d3 100644 --- a/src/client/views/linking/LinkFollowBox.tsx +++ b/src/client/views/linking/LinkFollowBox.tsx @@ -2,9 +2,157 @@ import { observable, computed, action, trace } from "mobx"; import React = require("react"); import { observer } from "mobx-react"; import { FieldViewProps, FieldView } from "../nodes/FieldView"; +import { Doc } from "../../../new_fields/Doc"; +import { undoBatch } from "../../util/UndoManager"; +import { NumCast, FieldValue, Cast } from "../../../new_fields/Types"; +import { CollectionViewType } from "../collections/CollectionBaseView"; +import { CollectionDockingView } from "../collections/CollectionDockingView"; +import { SelectionManager } from "../../util/SelectionManager"; +import { DocumentManager } from "../../util/DocumentManager"; @observer export class LinkFollowBox extends React.Component { public static LayoutString() { return FieldView.LayoutString(LinkFollowBox); } + public static Instance: LinkFollowBox; + //set this to be the default link behavior, can be any of the above + + unhighlight = () => { + Doc.UnhighlightAll(); + document.removeEventListener("pointerdown", this.unhighlight); + } + + @action + highlightDoc = (destinationDoc: Doc) => { + document.removeEventListener("pointerdown", this.unhighlight); + Doc.HighlightDoc(destinationDoc); + window.setTimeout(() => { + document.addEventListener("pointerdown", this.unhighlight); + }, 10000); + } + + // NOT TESTED + // col = collection the doc is in + // target = the document to center on + @undoBatch + openLinkColRight = (destinationDoc: Doc, col: Doc) => { + col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; + if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { + const newPanX = NumCast(destinationDoc.x) + NumCast(destinationDoc.width) / NumCast(destinationDoc.zoomBasis, 1) / 2; + const newPanY = NumCast(destinationDoc.y) + NumCast(destinationDoc.height) / NumCast(destinationDoc.zoomBasis, 1) / 2; + col.panX = newPanX; + col.panY = newPanY; + } + CollectionDockingView.Instance.AddRightSplit(col, undefined); + } + + // DONE + // this opens the linked doc in a right split, NOT in its collection + @undoBatch + openLinkRight = (destinationDoc: Doc) => { + this.highlightDoc(destinationDoc); + let alias = Doc.MakeAlias(destinationDoc); + CollectionDockingView.Instance.AddRightSplit(alias, undefined); + SelectionManager.DeselectAll(); + } + + // DONE + // this is the standard "follow link" (jump to document) + // taken from follow link + @undoBatch + jumpToLink = async (destinationDoc: Doc, shouldZoom: boolean, linkDoc: Doc) => { + //there is an issue right now so this will be false automatically + shouldZoom = false; + this.highlightDoc(destinationDoc); + let jumpToDoc = destinationDoc; + let pdfDoc = FieldValue(Cast(destinationDoc, Doc)); + if (pdfDoc) { + jumpToDoc = pdfDoc; + } + let proto = Doc.GetProto(linkDoc); + let targetContext = await Cast(proto.targetContext, Doc); + let sourceContext = await Cast(proto.sourceContext, Doc); + + let dockingFunc = (document: Doc) => { this.props.addDocTab(document, undefined, "inTab"); SelectionManager.DeselectAll(); }; + + if (destinationDoc === linkDoc.anchor2 && targetContext) { + DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, async document => dockingFunc(document), undefined, targetContext); + } + else if (destinationDoc === linkDoc.anchor1 && sourceContext) { + DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, document => dockingFunc(sourceContext!)); + } + else if (DocumentManager.Instance.getDocumentView(jumpToDoc)) { + DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, undefined, undefined, NumCast((destinationDoc === linkDoc.anchor2 ? linkDoc.anchor2Page : linkDoc.anchor1Page))); + + } + else { + DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, dockingFunc); + } + } + + // DONE + // opens link in new tab (not in a collection) + // this opens it full screen, do we need a separate full screen option? + @undoBatch + openLinkTab = (destinationDoc: Doc) => { + this.highlightDoc(destinationDoc); + let fullScreenAlias = Doc.MakeAlias(destinationDoc); + this.props.addDocTab(fullScreenAlias, undefined, "inTab"); + SelectionManager.DeselectAll(); + } + + // NOT TESTED + // opens link in new tab in collection + // col = collection the doc is in + // target = the document to center on + @undoBatch + openLinkColTab = (destinationDoc: Doc, col: Doc) => { + this.highlightDoc(destinationDoc); + col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; + if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { + const newPanX = NumCast(destinationDoc.x) + NumCast(destinationDoc.width) / NumCast(destinationDoc.zoomBasis, 1) / 2; + const newPanY = NumCast(destinationDoc.y) + NumCast(destinationDoc.height) / NumCast(destinationDoc.zoomBasis, 1) / 2; + col.panX = newPanX; + col.panY = newPanY; + } + // CollectionDockingView.Instance.AddRightSplit(col, undefined); + this.props.addDocTab(col, undefined, "inTab"); + SelectionManager.DeselectAll(); + } + + // DONE + // this will open a link next to the source doc + @undoBatch + openLinkInPlace = (destinationDoc: Doc, sourceDoc: Doc) => { + this.highlightDoc(destinationDoc); + + let alias = Doc.MakeAlias(destinationDoc); + let y = NumCast(sourceDoc.y); + let x = NumCast(sourceDoc.x); + + let width = NumCast(sourceDoc.width); + let height = NumCast(sourceDoc.height); + + alias.x = x + width + 30; + alias.y = y; + alias.width = width; + alias.height = height; + + SelectionManager.SelectedDocuments().map(dv => { + if (dv.props.Document === sourceDoc) { + dv.props.addDocument && dv.props.addDocument(alias, false); + } + }); + } + + private defaultLinkBehavior: any = this.openLinkInPlace; + private currentLinkBehavior: any = this.defaultLinkBehavior; + + render() { + return ( +
+ +
+ ); + } } \ No newline at end of file diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 65516b374..41723030d 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -52,11 +52,11 @@ export class LinkMenuItem extends React.Component { // col = collection the doc is in // target = the document to center on @undoBatch - openLinkColRight = ({ col, target }: { col: Doc, target: Doc }) => { + openLinkColRight = (col: Doc) => { col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { - const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2; - const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2; + const newPanX = NumCast(this.props.destinationDoc.x) + NumCast(this.props.destinationDoc.width) / NumCast(this.props.destinationDoc.zoomBasis, 1) / 2; + const newPanY = NumCast(this.props.destinationDoc.y) + NumCast(this.props.destinationDoc.height) / NumCast(this.props.destinationDoc.zoomBasis, 1) / 2; col.panX = newPanX; col.panY = newPanY; } @@ -124,12 +124,12 @@ export class LinkMenuItem extends React.Component { // col = collection the doc is in // target = the document to center on @undoBatch - openLinkColTab = ({ col, target }: { col: Doc, target: Doc }) => { + openLinkColTab = (col: Doc) => { this.highlightDoc(); col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { - const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2; - const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2; + const newPanX = NumCast(this.props.destinationDoc.x) + NumCast(this.props.destinationDoc.width) / NumCast(this.props.destinationDoc.zoomBasis, 1) / 2; + const newPanY = NumCast(this.props.destinationDoc.y) + NumCast(this.props.destinationDoc.height) / NumCast(this.props.destinationDoc.zoomBasis, 1) / 2; col.panX = newPanX; col.panY = newPanY; } diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index d77662355..d0e117fe4 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -14,6 +14,7 @@ import { ImageBox } from "./ImageBox"; import { DragBox } from "./DragBox"; import { ButtonBox } from "./ButtonBox"; import { PresBox } from "./PresBox"; +import { LinkFollowBox } from "../linking/LinkFollowBox"; import { IconBox } from "./IconBox"; import { KeyValueBox } from "./KeyValueBox"; import { PDFBox } from "./PDFBox"; @@ -30,6 +31,7 @@ import { List } from "../../../new_fields/List"; import { Doc } from "../../../new_fields/Doc"; import DirectoryImportBox from "../../util/Import & Export/DirectoryImportBox"; import { ScriptField } from "../../../new_fields/ScriptField"; +import { fromPromise } from "mobx-utils"; const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? type BindingProps = Without; @@ -108,7 +110,7 @@ export class DocumentContentsView extends React.Component Date: Wed, 21 Aug 2019 15:46:23 -0400 Subject: restructed presentationview --- src/client/views/nodes/PresBox.tsx | 279 ++-------- .../views/presentationview/PresentationElement.tsx | 611 ++------------------- .../views/presentationview/PresentationList.tsx | 47 +- .../views/presentationview/PresentationView.scss | 10 +- src/new_fields/Doc.ts | 3 + 5 files changed, 128 insertions(+), 822 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 112d39c32..cf222601f 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -12,7 +12,7 @@ import { BoolCast, Cast, FieldValue, NumCast, StrCast } from "../../../new_field import { Utils } from "../../../Utils"; import { DocumentManager } from "../../util/DocumentManager"; import { undoBatch } from "../../util/UndoManager"; -import PresentationElement, { buttonIndex } from "../presentationview/PresentationElement"; +import PresentationElement from "../presentationview/PresentationElement"; import PresentationViewList from "../presentationview/PresentationList"; import "../presentationview/PresentationView.scss"; import { FieldView, FieldViewProps } from './FieldView'; @@ -45,17 +45,12 @@ export class PresBox extends React.Component { //FieldViewProps? //Keeping track of the doc for the current presentation -- bcz: keeping a list of current presentations shouldn't be needed. Let users create them, store them, as they see fit. @computed get curPresentation() { return this.props.Document; } - //Mapping from presentation ids to a list of doc that represent a group - @observable groupMappings: Map = new Map(); //mapping from docs to their rendered component @observable presElementsMappings: Map = new Map(); //variable that holds all the docs in the presentation @observable childrenDocs: Doc[] = []; //variable to hold if presentation is started @observable presStatus: boolean = false; - //back-up so that presentation stays the way it's when refreshed - @observable presGroupBackUp: Doc = new Doc(); - @observable presButtonBackUp: Doc = new Doc(); //Mapping of guids to presentations. @observable presentationsMapping: Map = new Map(); //Mapping of presentations to guid, so that select option values can be given. @@ -102,87 +97,11 @@ export class PresBox extends React.Component { //FieldViewProps? * otherwise initializes. */ setPresentationBackUps = async () => { - //getting both backUp documents - - let castedGroupBackUp = Cast(this.curPresentation.presGroupBackUp, Doc); - let castedButtonBackUp = Cast(this.curPresentation.presButtonBackUp, Doc); - //if instantiated before - if (castedGroupBackUp instanceof Promise) { - castedGroupBackUp.then(doc => { - let toAssign = doc ? doc : new Doc(); - this.curPresentation.presGroupBackUp = toAssign; - runInAction(() => this.presGroupBackUp = toAssign); - if (doc) { - if (toAssign[Id] === doc[Id]) { - this.retrieveGroupMappings(); - } - } - }); - - //if never instantiated a store doc yet - } else if (castedGroupBackUp instanceof Doc) { - let castedDoc: Doc = await castedGroupBackUp; - runInAction(() => this.presGroupBackUp = castedDoc); - this.retrieveGroupMappings(); - } else { - runInAction(() => { - let toAssign = new Doc(); - this.presGroupBackUp = toAssign; - this.curPresentation.presGroupBackUp = toAssign; - - }); - - } - //if instantiated before - if (castedButtonBackUp instanceof Promise) { - castedButtonBackUp.then(doc => { - let toAssign = doc ? doc : new Doc(); - this.curPresentation.presButtonBackUp = toAssign; - runInAction(() => this.presButtonBackUp = toAssign); - }); - - //if never instantiated a store doc yet - } else if (castedButtonBackUp instanceof Doc) { - let castedDoc: Doc = await castedButtonBackUp; - runInAction(() => this.presButtonBackUp = castedDoc); - - } else { - runInAction(() => { - let toAssign = new Doc(); - this.presButtonBackUp = toAssign; - this.curPresentation.presButtonBackUp = toAssign; - }); - - } - - //storing the presentation status,ie. whether it was stopped or playing let presStatusBackUp = BoolCast(this.curPresentation.presStatus); runInAction(() => this.presStatus = presStatusBackUp); } - /** - * This is the function that is called to retrieve the groups that have been stored and - * push them to the groupMappings. - */ - retrieveGroupMappings = async () => { - let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); - if (castedGroupDocs !== undefined) { - castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { - let castedGrouping = await DocListCastAsync(groupDoc.grouping); - let castedKey = StrCast(groupDoc.presentIdStore, null); - if (castedGrouping) { - castedGrouping.forEach((doc: Doc) => { - doc.presentId = castedKey; - }); - } - if (castedGrouping !== undefined && castedKey !== undefined) { - this.groupMappings.set(castedKey, castedGrouping); - } - }); - } - } - //observable means render is re-called every time variable is changed @observable collapsed: boolean = false; @@ -193,17 +112,13 @@ export class PresBox extends React.Component { //FieldViewProps? if (docAtCurrentNext === undefined) { return; } - //asking for it's presentation id - let curNextPresId = StrCast(docAtCurrentNext.presentId); let nextSelected = current + 1; - //if curDoc is in a group, selection slides until last one, if not it's next one - if (this.groupMappings.has(curNextPresId)) { - let currentsArray = this.groupMappings.get(StrCast(docAtCurrentNext.presentId))!; - nextSelected = current + currentsArray.length - currentsArray.indexOf(docAtCurrentNext); + let presDocs = DocListCast(this.curPresentation.data); + for (; nextSelected < presDocs.length - 1; nextSelected++) { + if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton) + break; - //end of grup so go beyond - if (nextSelected === current) nextSelected = current + 1; } this.gotoDocument(nextSelected, current); @@ -219,31 +134,31 @@ export class PresBox extends React.Component { //FieldViewProps? //asking for its presentation id. let curPresId = StrCast(docAtCurrent.presentId); - let prevSelected = current - 1; + let prevSelected = current; let zoomOut: boolean = false; //checking if this presentation id is mapped to a group, if so chosing the first element in group - if (this.groupMappings.has(curPresId)) { - let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!; - prevSelected = current - currentsArray.length + (currentsArray.length - currentsArray.indexOf(docAtCurrent)) - 1; - //end of grup so go beyond - if (prevSelected === current) prevSelected = current - 1; - - //checking if any of the group members had used zooming in - currentsArray.forEach((doc: Doc) => { - //let presElem: PresentationElement | undefined = this.presElementsMappings.get(doc); - if (this.presElementsMappings.get(doc)!.selected[buttonIndex.Show]) { - zoomOut = true; - return; - } - }); - + let presDocs = DocListCast(this.curPresentation.data); + let currentsArray: Doc[] = []; + for (; prevSelected > 0 && presDocs[prevSelected].groupButton; prevSelected--) { + currentsArray.push(presDocs[prevSelected]); } + prevSelected = Math.max(0, prevSelected - 1); + + //checking if any of the group members had used zooming in + currentsArray.forEach((doc: Doc) => { + //let presElem: PresentationElement | undefined = this.presElementsMappings.get(doc); + if (this.presElementsMappings.get(doc)!.props.document.showButton) { + zoomOut = true; + return; + } + }); + // if a group set that flag to zero or a single element //If so making sure to zoom out, which goes back to state before zooming action if (current > 0) { - if (zoomOut || this.presElementsMappings.get(docAtCurrent)!.selected[buttonIndex.Show]) { + if (zoomOut || this.presElementsMappings.get(docAtCurrent)!.showButton) { let prevScale = NumCast(this.childrenDocs[prevSelected].viewScale, null); let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[current]); if (prevScale !== undefined) { @@ -264,19 +179,18 @@ export class PresBox extends React.Component { //FieldViewProps? */ showAfterPresented = (index: number) => { this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => { - let selectedButtons: boolean[] = presElem.selected; //the order of cases is aligned based on priority - if (selectedButtons[buttonIndex.HideTillPressed]) { + if (presElem.props.document.hideTillShownButton) { if (this.childrenDocs.indexOf(key) <= index) { key.opacity = 1; } } - if (selectedButtons[buttonIndex.HideAfter]) { + if (presElem.props.document.hideAfterButton) { if (this.childrenDocs.indexOf(key) < index) { key.opacity = 0; } } - if (selectedButtons[buttonIndex.FadeAfter]) { + if (presElem.props.document.fadeButton) { if (this.childrenDocs.indexOf(key) < index) { key.opacity = 0.5; } @@ -291,21 +205,19 @@ export class PresBox extends React.Component { //FieldViewProps? */ hideIfNotPresented = (index: number) => { this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => { - let selectedButtons: boolean[] = presElem.selected; - //the order of cases is aligned based on priority - if (selectedButtons[buttonIndex.HideAfter]) { + if (presElem.props.document.hideAfterButton) { if (this.childrenDocs.indexOf(key) >= index) { key.opacity = 1; } } - if (selectedButtons[buttonIndex.FadeAfter]) { + if (presElem.props.document.fadeButton) { if (this.childrenDocs.indexOf(key) >= index) { key.opacity = 1; } } - if (selectedButtons[buttonIndex.HideTillPressed]) { + if (presElem.props.document.hideTillShownButton) { if (this.childrenDocs.indexOf(key) > index) { key.opacity = 0; } @@ -320,34 +232,35 @@ export class PresBox extends React.Component { //FieldViewProps? */ navigateToElement = async (curDoc: Doc, fromDoc: number) => { let docToJump: Doc = curDoc; - let curDocPresId = StrCast(curDoc.presentId, null); let willZoom: boolean = false; - //checking if in group - if (curDocPresId !== undefined) { - if (this.groupMappings.has(curDocPresId)) { - let currentDocGroup = this.groupMappings.get(curDocPresId)!; - currentDocGroup.forEach((doc: Doc, index: number) => { - let selectedButtons: boolean[] = this.presElementsMappings.get(doc)!.selected; - if (selectedButtons[buttonIndex.Navigate]) { - docToJump = doc; - willZoom = false; - } - if (selectedButtons[buttonIndex.Show]) { - docToJump = doc; - willZoom = true; - } - }); - } + let presDocs = DocListCast(this.curPresentation.data); + let nextSelected = presDocs.indexOf(curDoc); + let currentDocGroups: Doc[] = []; + for (; nextSelected < presDocs.length - 1; nextSelected++) { + if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton) + break; + currentDocGroups.push(presDocs[nextSelected]); } + + currentDocGroups.forEach((doc: Doc, index: number) => { + if (this.presElementsMappings.get(doc)!.navButton) { + docToJump = doc; + willZoom = false; + } + if (this.presElementsMappings.get(doc)!.showButton) { + docToJump = doc; + willZoom = true; + } + }); + //docToJump stayed same meaning, it was not in the group or was the last element in the group if (docToJump === curDoc) { //checking if curDoc has navigation open - let curDocButtons = this.presElementsMappings.get(curDoc)!.selected; - if (curDocButtons[buttonIndex.Navigate]) { + if (this.presElementsMappings.get(curDoc)!.navButton) { DocumentManager.Instance.jumpToDocument(curDoc, false); - } else if (curDocButtons[buttonIndex.Show]) { + } else if (this.presElementsMappings.get(curDoc)!.showButton) { let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]); //awaiting jump so that new scale can be found, since jumping is async await DocumentManager.Instance.jumpToDocument(curDoc, true); @@ -406,69 +319,6 @@ export class PresBox extends React.Component { //FieldViewProps? //removing the Presentation Element stored for it this.presElementsMappings.delete(removedDoc); - let removedDocPresentId = StrCast(removedDoc.presentId); - - //Removing it from local mapping of the groups - if (this.groupMappings.has(removedDocPresentId)) { - let removedDocsGroup = this.groupMappings.get(removedDocPresentId); - if (removedDocsGroup) { - removedDocsGroup.splice(removedDocsGroup.indexOf(removedDoc), 1); - if (removedDocsGroup.length === 0) { - this.groupMappings.delete(removedDocPresentId); - } - } - } - - //removing it from the backUp of selected Buttons - // let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc)); - // if (castedList) { - // castedList.forEach(async (doc, indexOfDoc) => { - // let curDoc = await doc; - // let curDocId = StrCast(curDoc.docId); - // if (curDocId === removedDoc[Id]) { - // if (castedList) { - // castedList.splice(indexOfDoc, 1); - // return; - // } - // } - // }); - - // } - //removing it from the backUp of selected Buttons - - let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc)); - if (castedList) { - for (let doc of castedList) { - let curDoc = await doc; - let curDocId = StrCast(curDoc.docId); - if (curDocId === removedDoc[Id]) { - castedList.splice(castedList.indexOf(curDoc), 1); - break; - - } - } - } - - //removing it from the backup of groups - let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); - if (castedGroupDocs) { - castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { - let castedKey = StrCast(groupDoc.presentIdStore, null); - if (castedKey === removedDocPresentId) { - let castedGrouping = await DocListCastAsync(groupDoc.grouping); - if (castedGrouping) { - castedGrouping.splice(castedGrouping.indexOf(removedDoc), 1); - if (castedGrouping.length === 0) { - castedGroupDocs!.splice(castedGroupDocs!.indexOf(groupDoc), 1); - } - } - } - - }); - - } - - } } @@ -489,6 +339,7 @@ export class PresBox extends React.Component { //FieldViewProps? //it'll also execute the necessary actions if presentation is playing. @action public gotoDocument = async (index: number, fromDoc: number) => { + Doc.UnBrushAllDocs(); const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc))); if (!list) { return; @@ -509,26 +360,7 @@ export class PresBox extends React.Component { //FieldViewProps? this.hideIfNotPresented(index); this.showAfterPresented(index); } - } - - //Function that is called to resetGroupIds, so that documents get new groupIds at - //first load, when presentation is changed. - resetGroupIds = async () => { - let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs); - if (castedGroupDocs !== undefined) { - castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => { - let castedGrouping = await DocListCastAsync(groupDoc.grouping); - if (castedGrouping) { - castedGrouping.forEach((doc: Doc) => { - doc.presentId = Utils.GenerateGuid(); - }); - } - }); - } - runInAction(() => this.groupMappings = new Map()); - } - //Function that sets the store of the children docs. @action setChildrenDocs = (docList: Doc[]) => { @@ -580,21 +412,19 @@ export class PresBox extends React.Component { //FieldViewProps? //The function that starts the presentation, also checking if actions should be applied //directly at start. startPresentation = (startIndex: number) => { - let selectedButtons: boolean[]; this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => { - selectedButtons = component.selected; - if (selectedButtons[buttonIndex.HideTillPressed]) { + if (component.props.document.hideTillShownButton) { if (this.childrenDocs.indexOf(doc) > startIndex) { doc.opacity = 0; } } - if (selectedButtons[buttonIndex.HideAfter]) { + if (component.props.document.hideAfterButton) { if (this.childrenDocs.indexOf(doc) < startIndex) { doc.opacity = 0; } } - if (selectedButtons[buttonIndex.FadeAfter]) { + if (component.props.document.fadeButton) { if (this.childrenDocs.indexOf(doc) < startIndex) { doc.opacity = 0.5; } @@ -684,12 +514,9 @@ export class PresBox extends React.Component { //FieldViewProps? mainDocument={this.curPresentation} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} - groupMappings={this.groupMappings} PresElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} presStatus={this.presStatus} - presButtonBackUp={this.presButtonBackUp} - presGroupBackUp={this.presGroupBackUp} removeDocByRef={this.removeDocByRef} clearElemMap={() => this.presElementsMappings.clear()} /> diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 912970a50..68c5a5b8d 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -1,21 +1,19 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons'; -import { faArrowUp, faFile as fileSolid, faFileDownload, faLocationArrow, faSearch, faArrowRight } from '@fortawesome/free-solid-svg-icons'; +import { faArrowRight, faArrowUp, faFile as fileSolid, faFileDownload, faLocationArrow, faSearch } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, computed, observable, runInAction } from "mobx"; +import { action, computed } from "mobx"; import { observer } from "mobx-react"; import { Doc } from "../../../new_fields/Doc"; import { Id } from "../../../new_fields/FieldSymbols"; -import { List } from "../../../new_fields/List"; -import { listSpec } from "../../../new_fields/Schema"; -import { BoolCast, Cast, NumCast, StrCast } from "../../../new_fields/Types"; -import { Utils, returnFalse, emptyFunction, returnOne, returnEmptyString } from "../../../Utils"; +import { BoolCast, NumCast, StrCast } from "../../../new_fields/Types"; +import { emptyFunction, returnEmptyString, returnFalse, returnOne } from "../../../Utils"; +import { DocumentType } from "../../documents/DocumentTypes"; import { DragManager, dropActionType, SetupDrag } from "../../util/DragManager"; import { SelectionManager } from "../../util/SelectionManager"; -import { ContextMenu } from "../ContextMenu"; import { Transform } from "../../util/Transform"; +import { ContextMenu } from "../ContextMenu"; import { DocumentView } from "../nodes/DocumentView"; -import { DocumentType } from "../../documents/DocumentTypes"; import React = require("react"); @@ -33,26 +31,9 @@ interface PresentationElementProps { deleteDocument(index: number): void; gotoDocument(index: number, fromDoc: number): Promise; allListElements: Doc[]; - groupMappings: Map; presStatus: boolean; - presButtonBackUp: Doc; - presGroupBackUp: Doc; removeDocByRef(doc: Doc): boolean; PresElementsMappings: Map; - - -} - -//enum for the all kinds of buttons a doc in presentation can have -export enum buttonIndex { - Show = 0, - Navigate = 1, - HideTillPressed = 2, - FadeAfter = 3, - HideAfter = 4, - Group = 5, - OpenRight = 6 - } /** @@ -62,37 +43,33 @@ export enum buttonIndex { @observer export default class PresentationElement extends React.Component { - @observable private selectedButtons: boolean[]; private header?: HTMLDivElement | undefined; private listdropDisposer?: DragManager.DragDropDisposer; - private presElRef: React.RefObject; - private backUpDoc: Doc | undefined; - - - constructor(props: PresentationElementProps) { - super(props); - this.selectedButtons = new Array(7); - - this.presElRef = React.createRef(); - } - + private presElRef: React.RefObject = React.createRef(); componentWillUnmount() { this.listdropDisposer && this.listdropDisposer(); } + @computed get currentIndex() { return NumCast(this.props.mainDocument.selectedDoc); } - /** - * Getter to get the status of the buttons. - */ - @computed - get selected() { - return this.selectedButtons; - } + @computed get showButton() { return BoolCast(this.props.document.showButton); } + @computed get navButton() { return BoolCast(this.props.document.navButton); } + @computed get hideTillShownButton() { return BoolCast(this.props.document.hideTillShownButton); } + @computed get fadeButton() { return BoolCast(this.props.document.fadeButton); } + @computed get hideAfterButton() { return BoolCast(this.props.document.hideAfterButton); } + @computed get groupButton() { return BoolCast(this.props.document.groupButton); } + @computed get openRightButton() { return BoolCast(this.props.document.openRightButton); } + set showButton(val: boolean) { this.props.document.showButton = val; } + set navButton(val: boolean) { this.props.document.navButton = val; } + set hideTillShownButton(val: boolean) { this.props.document.hideTillShownButton = val; } + set fadeButton(val: boolean) { this.props.document.fadeButton = val; } + set hideAfterButton(val: boolean) { this.props.document.hideAfterButton = val; } + set groupButton(val: boolean) { this.props.document.groupButton = val; } + set openRightButton(val: boolean) { this.props.document.openRightButton = val; } //Lifecycle function that makes sure that button BackUp is received when mounted. async componentDidMount() { - this.receiveButtonBackUp(); if (this.presElRef.current) { this.header = this.presElRef.current; this.createListDropTarget(this.presElRef.current); @@ -107,156 +84,9 @@ export default class PresentationElement extends React.Component { - - //get the list that stores docs that keep track of buttons - let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc)); - if (!castedList) { - this.props.presButtonBackUp.selectedButtonDocs = castedList = new List(); - } - - let foundDoc: boolean = false; - - //if this is the first time this doc mounts, push a doc for it to store - - for (let doc of castedList) { - let curDoc = await doc; - let curDocId = StrCast(curDoc.docId); - if (curDocId === this.props.document[Id]) { - let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null); - if (selectedButtonOfDoc !== undefined) { - runInAction(() => this.selectedButtons = selectedButtonOfDoc); - foundDoc = true; - this.backUpDoc = curDoc; - break; - } - } - } - - if (!foundDoc) { - let newDoc = new Doc(); - let defaultBooleanArray: boolean[] = new Array(7); - newDoc.selectedButtons = new List(defaultBooleanArray); - newDoc.docId = this.props.document[Id]; - castedList.push(newDoc); - this.backUpDoc = newDoc; - } - - } - - /** - * The function that is called to group docs together. It tries to group a doc - * that turned grouping option with the above document. If that doc is grouped with - * other documents. Those other documents will be grouped with doc's above document as well. - */ @action - onGroupClick = (document: Doc, index: number, buttonStatus: boolean) => { - let p = this.props; - if (index >= 1) { - //checking if options was turned true - if (buttonStatus) { - //getting the id of the above-doc and the doc - let aboveGuid = StrCast(p.allListElements[index - 1].presentId, null); - let docGuid = StrCast(document.presentId, null); - //the case where above-doc is already in group - if (p.groupMappings.has(aboveGuid)) { - let aboveArray = p.groupMappings.get(aboveGuid)!; - //case where doc is already in group - if (p.groupMappings.has(docGuid)) { - let docsArray = p.groupMappings.get(docGuid)!; - docsArray.forEach((doc: Doc) => { - if (!aboveArray.includes(doc)) { - aboveArray.push(doc); - } - doc.presentId = aboveGuid; - }); - p.groupMappings.delete(docGuid); - //the case where doc was not in group - } else { - if (!aboveArray.includes(document)) { - aboveArray.push(document); - - } - - } - //the case where above-doc was not in group - } else { - let newAboveArray: Doc[] = []; - newAboveArray.push(p.allListElements[index - 1]); - - //the case where doc is in group - if (p.groupMappings.has(docGuid)) { - let docsArray = p.groupMappings.get(docGuid)!; - docsArray.forEach((doc: Doc) => { - newAboveArray.push(doc); - doc.presentId = aboveGuid; - }); - p.groupMappings.delete(docGuid); - - //the case where doc is not in a group - } else { - newAboveArray.push(document); - - } - p.groupMappings.set(aboveGuid, newAboveArray); - - } - document.presentId = aboveGuid; - - //when grouping is turned off - } else { - let curArray = p.groupMappings.get(StrCast(document.presentId, Utils.GenerateGuid()))!; - let targetIndex = curArray.indexOf(document); - let firstPart = curArray.slice(0, targetIndex); - let firstPartNewGuid = Utils.GenerateGuid(); - firstPart.forEach((doc: Doc) => doc.presentId = firstPartNewGuid); - let secondPart = curArray.slice(targetIndex); - p.groupMappings.set(StrCast(p.allListElements[index - 1].presentId, Utils.GenerateGuid()), firstPart); - p.groupMappings.set(StrCast(document.presentId, Utils.GenerateGuid()), secondPart); - - - } - - } - this.autoSaveGroupChanges(); - - } - - - /** - * This function is called at the end of each group update to update the group updates. - */ - @action - autoSaveGroupChanges = () => { - let castedList: List = new List(); - this.props.presGroupBackUp.groupDocs = castedList; - this.props.groupMappings.forEach((docArray: Doc[], id: String) => { - //create a new doc for each group - let newGroupDoc = new Doc(); - castedList.push(newGroupDoc); - //store the id of the group in the doc - newGroupDoc.presentIdStore = id.toString(); - //store the doc array which represents the group in the doc - newGroupDoc.grouping = new List(docArray); - }); - - } - - /** - * Function that is called on click to change the group status of a docus, by turning the option on/off. - */ - @action - changeGroupStatus = () => { - if (this.selectedButtons[buttonIndex.Group]) { - this.selectedButtons[buttonIndex.Group] = false; - } else { - this.selectedButtons[buttonIndex.Group] = true; - } - this.autoSaveButtonChange(buttonIndex.Group); - + onGroupClick = (e: React.MouseEvent) => { + this.groupButton = !this.groupButton; } /** @@ -266,31 +96,18 @@ export default class PresentationElement extends React.Component { e.stopPropagation(); - const current = NumCast(this.props.mainDocument.selectedDoc); - if (this.selectedButtons[buttonIndex.HideTillPressed]) { - this.selectedButtons[buttonIndex.HideTillPressed] = false; - if (this.props.index >= current) { + this.hideTillShownButton = !this.hideTillShownButton; + if (!this.hideTillShownButton) { + if (this.props.index >= this.currentIndex) { this.props.document.opacity = 1; } } else { - this.selectedButtons[buttonIndex.HideTillPressed] = true; if (this.props.presStatus) { - if (this.props.index > current) { + if (this.props.index > this.currentIndex) { this.props.document.opacity = 0; } } } - this.autoSaveButtonChange(buttonIndex.HideTillPressed); - } - - /** - * This function is called to get the updates for the changed buttons. - */ - @action - autoSaveButtonChange = async (index: buttonIndex) => { - if (this.backUpDoc) { - this.backUpDoc.selectedButtons = new List(this.selectedButtons); - } } /** @@ -301,25 +118,19 @@ export default class PresentationElement extends React.Component { e.stopPropagation(); - const current = NumCast(this.props.mainDocument.selectedDoc); - if (this.selectedButtons[buttonIndex.HideAfter]) { - this.selectedButtons[buttonIndex.HideAfter] = false; - if (this.props.index <= current) { + this.hideAfterButton = !this.hideAfterButton; + if (!this.hideAfterButton) { + if (this.props.index <= this.currentIndex) { this.props.document.opacity = 1; } } else { - if (this.selectedButtons[buttonIndex.FadeAfter]) { - this.selectedButtons[buttonIndex.FadeAfter] = false; - } - this.selectedButtons[buttonIndex.HideAfter] = true; + if (this.fadeButton) this.fadeButton = false; if (this.props.presStatus) { - if (this.props.index < current) { + if (this.props.index < this.currentIndex) { this.props.document.opacity = 0; } } } - this.autoSaveButtonChange(buttonIndex.HideAfter); - } /** @@ -330,25 +141,19 @@ export default class PresentationElement extends React.Component { e.stopPropagation(); - const current = NumCast(this.props.mainDocument.selectedDoc); - if (this.selectedButtons[buttonIndex.FadeAfter]) { - this.selectedButtons[buttonIndex.FadeAfter] = false; - if (this.props.index <= current) { + this.fadeButton = !this.fadeButton; + if (!this.fadeButton) { + if (this.props.index <= this.currentIndex) { this.props.document.opacity = 1; } } else { - if (this.selectedButtons[buttonIndex.HideAfter]) { - this.selectedButtons[buttonIndex.HideAfter] = false; - } - this.selectedButtons[buttonIndex.FadeAfter] = true; + this.hideAfterButton = false; if (this.props.presStatus) { - if (this.props.index < current) { + if (this.props.index < this.currentIndex) { this.props.document.opacity = 0.5; } } } - this.autoSaveButtonChange(buttonIndex.FadeAfter); - } /** @@ -357,22 +162,13 @@ export default class PresentationElement extends React.Component { e.stopPropagation(); - if (this.selectedButtons[buttonIndex.Navigate]) { - this.selectedButtons[buttonIndex.Navigate] = false; - - } else { - if (this.selectedButtons[buttonIndex.Show]) { - this.selectedButtons[buttonIndex.Show] = false; - } - this.selectedButtons[buttonIndex.Navigate] = true; - const current = NumCast(this.props.mainDocument.selectedDoc); - if (current === this.props.index) { + this.navButton = !this.navButton; + if (this.navButton) { + this.showButton = false; + if (this.currentIndex === this.props.index) { this.props.gotoDocument(this.props.index, this.props.index); } } - - this.autoSaveButtonChange(buttonIndex.Navigate); - } /** @@ -381,23 +177,16 @@ export default class PresentationElement extends React.Component { e.stopPropagation(); - if (this.selectedButtons[buttonIndex.Show]) { - this.selectedButtons[buttonIndex.Show] = false; - this.props.document.viewScale = 1; + this.showButton = !this.showButton; + if (!this.showButton) { + this.props.document.viewScale = 1; } else { - if (this.selectedButtons[buttonIndex.Navigate]) { - this.selectedButtons[buttonIndex.Navigate] = false; - } - this.selectedButtons[buttonIndex.Show] = true; - const current = NumCast(this.props.mainDocument.selectedDoc); - if (current === this.props.index) { + this.navButton = false; + if (this.currentIndex === this.props.index) { this.props.gotoDocument(this.props.index, this.props.index); } } - - this.autoSaveButtonChange(buttonIndex.Show); - } /** @@ -407,13 +196,8 @@ export default class PresentationElement extends React.Component { e.stopPropagation(); - if (this.selectedButtons[buttonIndex.OpenRight]) { - this.selectedButtons[buttonIndex.OpenRight] = false; - // action maybe - } else { - this.selectedButtons[buttonIndex.OpenRight] = true; - } - this.autoSaveButtonChange(buttonIndex.OpenRight); + + this.openRightButton = !this.openRightButton; } /** @@ -449,8 +233,6 @@ export default class PresentationElement extends React.Component Doc.AddDocToList(this.props.mainDocument, "data", d, this.props.document, before) || added, false) @@ -463,221 +245,13 @@ export default class PresentationElement extends React.Component { - - let x = this.ScreenToLocalListTransform(de.x, de.y); - let rect = this.header!.getBoundingClientRect(); - let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2); - let before = x[1] < bounds[1]; - - let droppedDocIndex = this.props.allListElements.indexOf(droppedDoc); - - let dropIndexDiff = droppedDocIndex - this.props.index; - - //checking if the position it's dropped corresponds to current location with 3 cases. - if (droppedDocIndex === this.props.index) { - return; - } - - if (dropIndexDiff === 1 && !before) { - return; - } - if (dropIndexDiff === -1 && before) { - return; - } - - let p = this.props; - let droppedDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(droppedDoc); - let curDocGuid = StrCast(droppedDoc.presentId, null); - - //Splicing the doc from its current group, since it's moved - if (p.groupMappings.has(curDocGuid)) { - let groupArray = this.props.groupMappings.get(curDocGuid)!; - - if (droppedDocSelectedButtons[buttonIndex.Group]) { - let groupIndexOfDrop = groupArray.indexOf(droppedDoc); - let firstPart = groupArray.splice(0, groupIndexOfDrop); - - if (firstPart.length > 1) { - let newGroupGuid = Utils.GenerateGuid(); - firstPart.forEach((doc: Doc) => doc.presentId = newGroupGuid); - this.props.groupMappings.set(newGroupGuid, firstPart); - } - } - - groupArray.splice(groupArray.indexOf(droppedDoc), 1); - if (groupArray.length === 0) { - this.props.groupMappings.delete(curDocGuid); - } - droppedDoc.presentId = Utils.GenerateGuid(); - - //making sure to correct to groups after splicing, in case the dragged element - //had the grouping on. - let indexOfBelow = droppedDocIndex + 1; - if (indexOfBelow < this.props.allListElements.length && indexOfBelow > 1) { - let selectedButtonsOrigBelow: boolean[] = await this.getSelectedButtonsOfDoc(this.props.allListElements[indexOfBelow]); - let aboveBelowDoc: Doc = this.props.allListElements[droppedDocIndex - 1]; - let aboveBelowDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(aboveBelowDoc); - let belowDoc: Doc = this.props.allListElements[indexOfBelow]; - let belowDocPresId = StrCast(belowDoc.presentId); - - if (selectedButtonsOrigBelow[buttonIndex.Group]) { - let belowDocGroup: Doc[] = this.props.groupMappings.get(belowDocPresId)!; - if (aboveBelowDocSelectedButtons[buttonIndex.Group]) { - let aboveBelowDocPresId = StrCast(aboveBelowDoc.presentId); - if (this.props.groupMappings.has(aboveBelowDocPresId)) { - let aboveBelowDocGroup: Doc[] = this.props.groupMappings.get(aboveBelowDocPresId)!; - aboveBelowDocGroup.push(...belowDocGroup); - this.props.groupMappings.delete(belowDocPresId); - belowDocGroup.forEach((doc: Doc) => doc.presentId = aboveBelowDocPresId); - - } - } else { - belowDocGroup.unshift(aboveBelowDoc); - aboveBelowDoc.presentId = belowDocPresId; - } - - - } - } - - } - - //Case, when the dropped doc had the group button clicked. - if (droppedDocSelectedButtons[buttonIndex.Group]) { - if (before) { - if (this.props.index > 0) { - let aboveDoc = this.props.allListElements[this.props.index - 1]; - let aboveDocGuid = StrCast(aboveDoc.presentId); - if (this.props.groupMappings.has(aboveDocGuid)) { - this.protectOrderAndPush(aboveDocGuid, aboveDoc, droppedDoc); - } else { - this.createNewGroup(aboveDoc, droppedDoc, aboveDocGuid); - } - } else { - let propsPresId = StrCast(this.props.document.presentId); - if (this.selectedButtons[buttonIndex.Group]) { - let propsArray = this.props.groupMappings.get(propsPresId)!; - propsArray.unshift(droppedDoc); - droppedDoc.presentId = propsPresId; - } - } - } else { - let propsDocGuid = StrCast(this.props.document.presentId); - if (this.props.groupMappings.has(propsDocGuid)) { - this.protectOrderAndPush(propsDocGuid, this.props.document, droppedDoc); - - } else { - this.createNewGroup(this.props.document, droppedDoc, propsDocGuid); - } - } - - - //if the group button of the element was not clicked. - } else { - if (before) { - if (this.props.index > 0) { - - let aboveDoc = this.props.allListElements[this.props.index - 1]; - let aboveDocGuid = StrCast(aboveDoc.presentId); - let aboveDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(aboveDoc); - - - if (this.selectedButtons[buttonIndex.Group]) { - if (aboveDocSelectedButtons[buttonIndex.Group]) { - let aboveGroupArray = this.props.groupMappings.get(aboveDocGuid)!; - let propsDocPresId = StrCast(this.props.document.presentId); - - this.halveGroupArray(aboveDoc, aboveGroupArray, droppedDoc, propsDocPresId); - - } else { - let belowPresentId = StrCast(this.props.document.presentId); - let belowGroup = this.props.groupMappings.get(belowPresentId)!; - belowGroup.splice(belowGroup.indexOf(aboveDoc), 1); - belowGroup.unshift(droppedDoc); - droppedDoc.presentId = belowPresentId; - aboveDoc.presentId = Utils.GenerateGuid(); - } - - - } - } else { - let propsPresId = StrCast(this.props.document.presentId); - if (this.selectedButtons[buttonIndex.Group]) { - let propsArray = this.props.groupMappings.get(propsPresId)!; - propsArray.unshift(droppedDoc); - droppedDoc.presentId = propsPresId; - } - } - } else { - if (this.props.index < this.props.allListElements.length - 1) { - let belowDoc = this.props.allListElements[this.props.index + 1]; - let belowDocGuid = StrCast(belowDoc.presentId); - let belowDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(belowDoc); - - let propsDocGuid = StrCast(this.props.document.presentId); - - if (belowDocSelectedButtons[buttonIndex.Group]) { - let belowGroupArray = this.props.groupMappings.get(belowDocGuid)!; - if (this.selectedButtons[buttonIndex.Group]) { - - let propsGroupArray = this.props.groupMappings.get(propsDocGuid)!; - - this.halveGroupArray(this.props.document, propsGroupArray, droppedDoc, belowDocGuid); - - } else { - belowGroupArray.splice(belowGroupArray.indexOf(this.props.document), 1); - this.props.document.presentId = Utils.GenerateGuid(); - belowGroupArray.unshift(droppedDoc); - droppedDoc.presentId = belowDocGuid; - } - } - - } - } - } - this.autoSaveGroupChanges(); - - } - - /** - * This method returns the selectedButtons boolean array of the passed in doc, - * retrieving it from the back-up. - */ - getSelectedButtonsOfDoc = async (paramDoc: Doc) => { - let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc)); - let foundSelectedButtons: boolean[] = new Array(7); - - //if this is the first time this doc mounts, push a doc for it to store - for (let doc of castedList!) { - let curDoc = await doc; - let curDocId = StrCast(curDoc.docId); - if (curDocId === paramDoc[Id]) { - let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null); - if (selectedButtonOfDoc !== undefined) { - return selectedButtonOfDoc; - } - } - } - - return foundSelectedButtons; - - } - //This is used to add dragging as an event. onPointerEnter = (e: React.PointerEvent): void => { if (e.buttons === 1 && SelectionManager.GetIsDragging()) { - let selected = NumCast(this.props.mainDocument.selectedDoc, 0); this.header!.className = "presentationView-item"; - - if (selected === this.props.index) { + if (this.currentIndex === this.props.index) { //this doc is selected this.header!.className = "presentationView-item presentationView-selected"; } @@ -688,12 +262,10 @@ export default class PresentationElement extends React.Component { //to get currently selected presentation doc - let selected = NumCast(this.props.mainDocument.selectedDoc, 0); this.header!.className = "presentationView-item"; - - if (selected === this.props.index) { + if (this.currentIndex === this.props.index) { //this doc is selected this.header!.className = "presentationView-item presentationView-selected"; @@ -729,62 +301,6 @@ export default class PresentationElement extends React.Component { return this.props.document !== target && this.props.removeDocByRef(doc) && addDoc(doc); } - - /** - * Helper method that gets called to divide a group array into two different groups - * including the targetDoc in first part. - * @param targetDoc document that is targeted as slicing point - * @param propsGroupArray the array that gets divided into 2 - * @param droppedDoc the dropped document - * @param belowDocGuid presentId of the belowGroup - */ - private halveGroupArray(targetDoc: Doc, propsGroupArray: Doc[], droppedDoc: Doc, belowDocGuid: string) { - let targetIndex = propsGroupArray.indexOf(targetDoc); - let firstPart = propsGroupArray.slice(0, targetIndex + 1); - let firstPartNewGuid = Utils.GenerateGuid(); - firstPart.forEach((doc: Doc) => doc.presentId = firstPartNewGuid); - let secondPart = propsGroupArray.slice(targetIndex + 1); - secondPart.unshift(droppedDoc); - droppedDoc.presentId = belowDocGuid; - this.props.groupMappings.set(firstPartNewGuid, firstPart); - this.props.groupMappings.set(belowDocGuid, secondPart); - } - - /** - * Helper method that creates a new group, pushing above document first, - * and dropped document second. - * @param aboveDoc the document above dropped document - * @param droppedDoc the dropped document itself - * @param aboveDocGuid above document's presentId - */ - private createNewGroup(aboveDoc: Doc, droppedDoc: Doc, aboveDocGuid: string) { - let newGroup: Doc[] = []; - newGroup.push(aboveDoc); - newGroup.push(droppedDoc); - droppedDoc.presentId = aboveDocGuid; - this.props.groupMappings.set(aboveDocGuid, newGroup); - } - - /** - * Helper method that finds the above document's group, and pushes the - * dropped document into that group, protecting the visual order of the - * presentation elements. - * @param aboveDoc the document above dropped document - * @param droppedDoc the dropped document itself - * @param aboveDocGuid above document's presentId - */ - private protectOrderAndPush(aboveDocGuid: string, aboveDoc: Doc, droppedDoc: Doc) { - let groupArray = this.props.groupMappings.get(aboveDocGuid)!; - let tempStack: Doc[] = []; - while (groupArray[groupArray.length - 1] !== aboveDoc) { - tempStack.push(groupArray.pop()!); - } - groupArray.push(droppedDoc); - droppedDoc.presentId = aboveDocGuid; - while (tempStack.length !== 0) { - groupArray.push(tempStack.pop()!); - } - } /** * This function is a getter to get if a document is in previewMode. */ @@ -872,11 +388,8 @@ export default class PresentationElement extends React.Component { p.gotoDocument(p.index, NumCast(this.props.mainDocument.selectedDoc)); e.stopPropagation(); }}> + onClick={e => { p.gotoDocument(p.index, this.currentIndex); e.stopPropagation(); }}> {`${p.index + 1}. ${title}`}

- - - - - - - + + + + + + +
{this.renderEmbeddedInline()} diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx index 288ade042..930ce202e 100644 --- a/src/client/views/presentationview/PresentationList.tsx +++ b/src/client/views/presentationview/PresentationList.tsx @@ -1,24 +1,20 @@ -import { observer } from "mobx-react"; -import React = require("react"); import { action } from "mobx"; -import "./PresentationView.scss"; -import { Utils } from "../../../Utils"; -import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc"; -import { NumCast, StrCast } from "../../../new_fields/Types"; +import { observer } from "mobx-react"; +import { Doc, DocListCast } from "../../../new_fields/Doc"; import { Id } from "../../../new_fields/FieldSymbols"; +import { NumCast } from "../../../new_fields/Types"; import PresentationElement from "./PresentationElement"; +import "./PresentationView.scss"; +import React = require("react"); interface PresListProps { mainDocument: Doc; deleteDocument(index: number): void; gotoDocument(index: number, fromDoc: number): Promise; - groupMappings: Map; PresElementsMappings: Map; setChildrenDocs: (docList: Doc[]) => void; presStatus: boolean; - presButtonBackUp: Doc; - presGroupBackUp: Doc; removeDocByRef(doc: Doc): boolean; clearElemMap(): void; @@ -31,35 +27,6 @@ interface PresListProps { */ export default class PresentationViewList extends React.Component { - /** - * Method that initializes presentation ids for the - * docs that is in the presentation, when presentation list - * gets re-rendered. It makes sure to not assign ids to the - * docs that are in the group, so that mapping won't be disrupted. - */ - - @action - initializeGroupIds = async (docList: Doc[]) => { - docList.forEach(async (doc: Doc, index: number) => { - let docGuid = StrCast(doc.presentId, null); - //checking if part of group - let storedGuids: string[] = []; - let castedGroupDocs = await DocListCastAsync(this.props.presGroupBackUp.groupDocs); - //making sure the docs that were in groups, which were stored, to not get new guids. - if (castedGroupDocs !== undefined) { - castedGroupDocs.forEach((doc: Doc) => { - let storedGuid = StrCast(doc.presentIdStore, null); - if (storedGuid) { - storedGuids.push(storedGuid); - } - - }); - } - if (!this.props.groupMappings.has(docGuid) && !storedGuids.includes(docGuid)) { - doc.presentId = Utils.GenerateGuid(); - } - }); - } /** * Initially every document starts with a viewScale 1, which means @@ -77,7 +44,6 @@ export default class PresentationViewList extends React.Component render() { const children = DocListCast(this.props.mainDocument.data); - this.initializeGroupIds(children); this.initializeScaleViews(children); this.props.setChildrenDocs(children); this.props.clearElemMap(); @@ -96,11 +62,8 @@ export default class PresentationViewList extends React.Component index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} - groupMappings={this.props.groupMappings} allListElements={children} presStatus={this.props.presStatus} - presButtonBackUp={this.props.presButtonBackUp} - presGroupBackUp={this.props.presGroupBackUp} removeDocByRef={this.props.removeDocByRef} PresElementsMappings={this.props.PresElementsMappings} /> diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss index b0968132b..bc1899811 100644 --- a/src/client/views/presentationview/PresentationView.scss +++ b/src/client/views/presentationview/PresentationView.scss @@ -1,6 +1,5 @@ .presentationView-cont { position: absolute; - background: white; z-index: 2; box-shadow: #AAAAAA .2vw .2vw .4vw; right: 0; @@ -49,12 +48,15 @@ .presentationView-item:hover { transition: all .1s; - background: #AAAAAA + background: #AAAAAA; + border-radius: 12px; } .presentationView-selected { background: gray; color: black; + border-radius: 12px; + box-shadow: black 2px 2px 5px; } .presentationView-heading { @@ -79,11 +81,12 @@ } .presentation-interaction { + color: gray; float: left; } .presentation-interaction-selected { - background: #505050; + color: white; float: left; } @@ -96,6 +99,7 @@ margin-right: 2.5%; margin-left: 2.5%; width: 20%; + border-radius: 5px; } .presentation-buttons { diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index ca05dfa45..e5b609966 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -621,6 +621,9 @@ export namespace Doc { manager.BrushedDoc.delete(doc); manager.BrushedDoc.delete(Doc.GetDataDoc(doc)); } + export function UnBrushAllDocs() { + manager.BrushedDoc.clear(); + } } Scripting.addGlobal(function renameAlias(doc: any, n: any) { return StrCast(doc.title).replace(/\([0-9]*\)/, "") + `(${n})`; }); Scripting.addGlobal(function getProto(doc: any) { return Doc.GetProto(doc); }); \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 88454c8163115b1396a34f4836b5f6f04817a3f0 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 21 Aug 2019 16:11:20 -0400 Subject: tryupdateheight fixes --- src/client/views/DocumentDecorations.tsx | 4 ++-- src/client/views/nodes/FormattedTextBox.tsx | 26 +++++++++++++------------- 2 files changed, 15 insertions(+), 15 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index cc8e57af9..a28088032 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -714,7 +714,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> let canPull = this.targetDoc.data && this.targetDoc.data instanceof RichTextField; let dataDoc = Doc.GetProto(this.targetDoc); if (!canPull || !dataDoc[GoogleRef]) return (null); - let icon = !dataDoc.unchanged ? (this.pullIcon as any) : fetch; + let icon = dataDoc.unchanged === false ? (this.pullIcon as any) : fetch; icon = this.openHover ? "share" : icon; let animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none"; let title = `${!dataDoc.unchanged ? "Pull from" : "Fetch"} Google Docs`; @@ -727,7 +727,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> backgroundColor: this.pullColor, transition: "0.2s ease all" }} - onPointerEnter={e => e.ctrlKey && runInAction(() => this.openHover = true)} + onPointerEnter={e => e.altKey && runInAction(() => this.openHover = true)} onPointerLeave={() => runInAction(() => this.openHover = false)} onClick={e => { if (e.altKey) { diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 1e0975b4b..c8722c6e3 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -1,6 +1,6 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEdit, faSmile, faTextHeight, faUpload } from '@fortawesome/free-solid-svg-icons'; -import { action, computed, IReactionDisposer, Lambda, observable, reaction, runInAction } from "mobx"; +import { action, computed, IReactionDisposer, Lambda, observable, reaction, runInAction, autorun } from "mobx"; import { observer } from "mobx-react"; import { baseKeymap } from "prosemirror-commands"; import { history } from "prosemirror-history"; @@ -87,7 +87,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe private pushReactionDisposer: Opt; private dropDisposer?: DragManager.DragDropDisposer; public get CurrentDiv(): HTMLDivElement { return this._ref.current!; } - private isGoogleDocsUpdate = false; @observable _entered = false; @observable public static InputBoxOverlay?: FormattedTextBox = undefined; @@ -321,7 +320,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe private newListItems = (count: number) => { let listItems: any[] = []; for (let i = 0; i < count; i++) { - listItems.push(schema.nodes.list_item.create(null, schema.nodes.paragraph.create(null))); + listItems.push(schema.nodes.list_item.create(undefined, schema.nodes.paragraph.create())); } return listItems; } @@ -359,7 +358,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } this.pullFromGoogleDoc(this.checkState); - runInAction(() => DocumentDecorations.Instance.isAnimatingFetch = true); + this.dataDoc[GoogleRef] && this.dataDoc.unchanged && runInAction(() => DocumentDecorations.Instance.isAnimatingFetch = true); this._reactionDisposer = reaction( () => { @@ -370,13 +369,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe if (this._editorView && !this._applyingChange) { let updatedState = JSON.parse(incomingValue); this._editorView.updateState(EditorState.fromJSON(config, updatedState)); - // manually sets cursor selection at the end of the text on focus - if (this.isGoogleDocsUpdate) { - this.isGoogleDocsUpdate = false; - let end = this._editorView.state.doc.content.size - 1; - updatedState.selection = { type: "text", anchor: end, head: end }; - this._editorView.updateState(EditorState.fromJSON(config, updatedState)); - } + this.tryUpdateHeight(); } } ); @@ -485,16 +478,22 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe const data = Cast(dataDoc.data, RichTextField); if (data instanceof RichTextField) { pullSuccess = true; - this.isGoogleDocsUpdate = true; dataDoc.data = new RichTextField(data[FromPlainText](exportState.body)); + setTimeout(() => { + if (this._editorView) { + let state = this._editorView.state; + let end = state.doc.content.size - 1; + this._editorView.dispatch(state.tr.setSelection(TextSelection.create(state.doc, end, end))); + } + }, 0); dataDoc.title = exportState.title; + this.Document.customTitle = true; dataDoc.unchanged = true; } } else { delete dataDoc[GoogleRef]; } DocumentDecorations.Instance.startPullOutcome(pullSuccess); - setTimeout(() => this.tryUpdateHeight(), 0); } checkState = (exportState: GoogleApiClientUtils.Docs.ReadResult, dataDoc: Doc) => { @@ -719,6 +718,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe onFocused = (e: React.FocusEvent): void => { document.removeEventListener("keypress", this.recordKeyHandler); document.addEventListener("keypress", this.recordKeyHandler); + this.tryUpdateHeight(); if (!this.props.isOverlay) { FormattedTextBox.InputBoxOverlay = this; } else { -- cgit v1.2.3-70-g09d2 From 43d731ef2a6b2bd3fcdb7dd26fb6a8beac8e1306 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 21 Aug 2019 16:23:38 -0400 Subject: from last with presentations and small tweaks. --- src/client/views/MetadataEntryMenu.tsx | 2 +- src/client/views/collections/CollectionStackingView.tsx | 4 ++-- src/client/views/collections/CollectionStackingViewFieldColumn.tsx | 4 ++-- src/client/views/nodes/KeyValueBox.tsx | 2 +- src/client/views/nodes/PresBox.tsx | 7 ++++--- src/client/views/presentationview/PresentationElement.tsx | 2 -- src/client/views/presentationview/PresentationView.scss | 4 ---- src/server/authentication/models/current_user_utils.ts | 2 +- 8 files changed, 11 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx index 4d696e37a..ec628c5a3 100644 --- a/src/client/views/MetadataEntryMenu.tsx +++ b/src/client/views/MetadataEntryMenu.tsx @@ -172,7 +172,7 @@ export class MetadataEntryMenu extends React.Component{
    - {this._allSuggestions.sort().map(s =>
  • { this._currentKey = s; this.previewValue(); })} >{s}
    • )} + {this._allSuggestions.slice().sort().map(s =>
  • { this._currentKey = s; this.previewValue(); })} >{s}
    • )}
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index c74c60d8f..be6ee1756 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -291,10 +291,10 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { let layoutDoc = Doc.expandTemplateLayout(d, this.props.DataDoc); let width = () => (d.nativeWidth && !d.ignoreAspect && !this.props.Document.fillColumn ? Math.min(d[WidthSym](), this.columnWidth) : this.columnWidth);/// (uniqueHeadings.length + 1); let height = () => this.getDocHeight(layoutDoc); - let dxf = () => this.getDocTransform(layoutDoc, dref.current!); + let dxf = () => this.getDocTransform(layoutDoc!, dref.current!); let rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap); this._docXfs.push({ dxf: dxf, width: width, height: height }); - return
+ return !layoutDoc ? (null) :
{this.getDisplayDoc(layoutDoc, d, dxf, width)}
; }); diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index cc8476548..2536eff00 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -83,9 +83,9 @@ export class CollectionStackingViewFieldColumn extends React.Component Math.min(d.nativeWidth && !d.ignoreAspect && !parent.props.Document.fillColumn ? d[WidthSym]() : Number.MAX_VALUE, parent.columnWidth / parent.numGroupColumns); - let height = () => parent.getDocHeight(pair!.layout); + let height = () => parent.getDocHeight(pair.layout); let dref = React.createRef(); - let dxf = () => this.getDocTransform(pair!.layout, dref.current!); + let dxf = () => this.getDocTransform(pair.layout!, dref.current!); this.props.parent._docXfs.push({ dxf: dxf, width: width, height: height }); let rowSpan = Math.ceil((height() + parent.gridGap) / parent.gridGap); let style = parent.isStackingView ? { width: width(), margin: "auto", marginTop: i === 0 ? 0 : parent.gridGap, height: height() } : { gridRowEnd: `span ${rowSpan}` }; diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index 0d4b377dd..653c5c27f 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -128,7 +128,7 @@ export class KeyValueBox extends React.Component { let rows: JSX.Element[] = []; let i = 0; const self = this; - for (let key of Object.keys(ids).sort()) { + for (let key of Object.keys(ids).slice().sort()) { rows.push( { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index cf222601f..e376fbddb 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -116,9 +116,9 @@ export class PresBox extends React.Component { //FieldViewProps? let presDocs = DocListCast(this.curPresentation.data); for (; nextSelected < presDocs.length - 1; nextSelected++) { - if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton) + if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton) { break; - + } } this.gotoDocument(nextSelected, current); @@ -239,8 +239,9 @@ export class PresBox extends React.Component { //FieldViewProps? let nextSelected = presDocs.indexOf(curDoc); let currentDocGroups: Doc[] = []; for (; nextSelected < presDocs.length - 1; nextSelected++) { - if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton) + if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton) { break; + } currentDocGroups.push(presDocs[nextSelected]); } diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 68c5a5b8d..83413814f 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -261,8 +261,6 @@ export default class PresentationElement extends React.Component { - //to get currently selected presentation doc - this.header!.className = "presentationView-item"; if (this.currentIndex === this.props.index) { diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss index bc1899811..5c40a8808 100644 --- a/src/client/views/presentationview/PresentationView.scss +++ b/src/client/views/presentationview/PresentationView.scss @@ -23,14 +23,11 @@ user-select: none; transition: all .1s; - - .documentView-node { position: absolute; z-index: 1; } - } .presentationView-item-above { @@ -73,7 +70,6 @@ display: inline-block; width: calc(100% - 200px); letter-spacing: 2px; - } .presentation-icon { diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index aa3da0034..f7ce24967 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -29,7 +29,7 @@ export class CurrentUserUtils { doc.viewType = CollectionViewType.Tree; doc.dropAction = "alias"; doc.layout = CollectionView.LayoutString(); - doc.title = Doc.CurrentUserEmail + doc.title = Doc.CurrentUserEmail; this.updateUserDocument(doc); doc.data = new List(); doc.gridGap = 5; -- cgit v1.2.3-70-g09d2 From 6604c40d02b4dd7c6a6c663f301bcaedfee6998f Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 21 Aug 2019 17:18:02 -0400 Subject: send help oh god --- src/client/util/RichTextSchema.tsx | 81 ------------------------------------- src/client/util/TooltipTextMenu.tsx | 29 ------------- src/client/views/nodes/WebBox.scss | 10 +++++ src/client/views/nodes/WebBox.tsx | 51 +++++++---------------- 4 files changed, 25 insertions(+), 146 deletions(-) (limited to 'src') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 733c50d20..1f6c2badb 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -111,19 +111,6 @@ export const nodes: { [index: string]: NodeSpec } = { // } // }] }, - - checkbox: { - inline: true, - attrs: { - visibility: { default: false } - }, - group: "inline", - toDOM(node) { - const attrs = { style: `width: 40px` }; - return ["span", { ...node.attrs, ...attrs }]; - }, - }, - // :: NodeSpec An inline image (``) node. Supports `src`, // `alt`, and `href` attributes. The latter two default to the empty // string. @@ -203,19 +190,6 @@ export const nodes: { [index: string]: NodeSpec } = { // toDOM() { return ulDOM } }, - checkbox_list: { - content: 'checklist_item+', - marks: '_', - group: 'block', - // inline: true, - parseDOM: [ - { tag: "ul" } - ], - toDOM() { - return ["ul", { style: 'list-style: none' }, 0]; - }, - }, - //bullet_list: { // content: 'list_item+', // group: 'block', @@ -228,18 +202,6 @@ export const nodes: { [index: string]: NodeSpec } = { ...listItem, content: 'paragraph block*' }, - - checklist_item: { - content: 'paragraph block*', - parseDOM: [{ tag: "li" }], - // toDOM() { - // return ["li", { style: 'content: checkbox' }, 0]; - // }, - toDOM() { - return ["li", 0]; - }, - defining: true - } }; const emDOM: DOMOutputSpecArray = ["em", 0]; @@ -562,49 +524,6 @@ export class ImageResizeView { } } -export class CheckboxView { - _view: any; - _collapsed: HTMLElement; - - constructor(node: any, view: any, getPos: any) { - this._collapsed = document.createElement("span"); - this._collapsed.textContent = node.attrs.visibility ? "⬛" : "⬜"; - this._collapsed.style.position = "relative"; - // this._collapsed.style.width = "80px"; - this._collapsed.style.height = "20px"; - let self = this; - this._view = view; - const js = node.toJSON; - node.toJSON = function () { - - return js.apply(this, arguments); - }; - this._collapsed.onpointerdown = function (e: any) { - console.log(node.attrs.visibility) - if (node.attrs.visibility) { - let y = getPos(); - const attrs = { ...node.attrs }; - attrs.visibility = !attrs.visibility; - view.dispatch(view.state.tr.setNodeMarkup(y, undefined, attrs)); - self._collapsed.textContent = "⬜"; - } else { - let y = getPos(); - const attrs = { ...node.attrs }; - attrs.visibility = !attrs.visibility; - console.log(attrs.visibility) - view.dispatch(view.state.tr.setNodeMarkup(y, undefined, attrs)); - self._collapsed.textContent = "⬛"; - } - e.preventDefault(); - e.stopPropagation(); - console.log(node.attrs.visibility) - - }; - (this as any).dom = this._collapsed; - } - -} - export class SummarizedView { // TODO: highlight text that is summarized. to find end of region, walk along mark _collapsed: HTMLElement; diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 46961e416..450931b76 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -189,7 +189,6 @@ export class TooltipTextMenu { this.tooltip.appendChild(this._brushdom); this.tooltip.appendChild(this.createLink().render(this.view).dom); this.tooltip.appendChild(this.createStar().render(this.view).dom); - this.tooltip.appendChild(this.createCheckbox().render(this.view).dom); this.updateListItemDropdown(":", this.listTypeBtnDom); @@ -441,14 +440,6 @@ export class TooltipTextMenu { return true; } - public static insertCheckbox(state: EditorState, dispatch: any) { - let newNode = schema.nodes.checkbox.create({ visibility: false }); - if (dispatch) { - dispatch(state.tr.replaceSelectionWith(newNode)); - } - return true; - } - //will display a remove-list-type button if selection is in list, otherwise will show list type dropdown updateListItemDropdown(label: string, listTypeBtn: any) { //remove old btn @@ -461,7 +452,6 @@ export class TooltipTextMenu { }); //option to remove the list formatting toAdd.push(this.dropdownNodeBtn("X", "color: black; width: 40px;", undefined, this.view, this.listTypes, this.changeToNodeType)); - toAdd.push(this.dropdownNodeBtn("⬜", "color:black; width:40px;", schema.nodes.checkbox_list, this.view, this.listTypes, this.changeToNodeType)) listTypeBtn = (new Dropdown(toAdd, { label: label, @@ -525,11 +515,6 @@ export class TooltipTextMenu { liftListItem(schema.nodes.list_item)(view.state, view.dispatch); if (nodeType) { //add new wrapInList(nodeType)(view.state, view.dispatch); - // console.log(nodeType === schema.nodes.checkbox_list) - // if (nodeType === schema.nodes.checkbox_list) { - // TooltipTextMenu.insertCheckbox(view.state, view.dispatch) - // } - } } @@ -564,20 +549,6 @@ export class TooltipTextMenu { }); } - createCheckbox() { - return new MenuItem({ - title: "Checkbox", - label: "Checkbox", - icon: icons.code, - css: "color:white", - class: "checkbox", - execEvent: "", - run: (state, dispatch) => { - TooltipTextMenu.insertCheckbox(state, dispatch); - } - }) - } - deleteLinkItem() { const icon = { height: 16, width: 16, diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index c37f08eca..6272d3d47 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -1,3 +1,5 @@ +@import "../globalCssVariables.scss"; + .webBox-cont, .webBox-cont-interactive { padding: 0vw; @@ -79,6 +81,14 @@ // margin-top: 10px; } + .switchToText { + color: $main-accent; + } + + .switchToText:hover { + color: $dark-color; + } + .collectionViewBaseChrome-viewSpecs { margin-left: 10px; display: grid; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index e7bed3bed..ef8f8c664 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -87,43 +87,21 @@ export class WebBox extends React.Component { let field = Cast(this.props.Document[this.props.fieldKey], WebField); if (field) url = field.url.href; - let docView: DocumentView; - // let parentDoc: any; - SelectionManager.SelectedDocuments().map(dv => { - // docView = dv; - dv.props.removeDocument && dv.props.removeDocument(dv.props.Document); - }); - - console.log("happening") - - // // let newPoint = PreviewCursor._getTransform().transformPoint(PreviewCursor._clickPoint[0], PreviewCursor._clickPoint[1]); let newBox = Docs.Create.TextDocument({ - width: 200, height: 100, - // x: newPoint[0], - // y: newPoint[1], x: NumCast(this.props.Document.x), y: NumCast(this.props.Document.y), - title: url + title: url, + width: 200, + height: 70, + documentText: "@@@" + url }); - console.log(typeof newBox) - - // const script = KeyValueBox.CompileKVPScript(`new RichTextField("{"doc":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"${url}"}]}]},"selection":{"type":"text","anchor":1,"head":1}}")`); - // const script = KeyValueBox.CompileKVPScript(newBox.setText(url)) - // console.log(script) - // if (!script) return; - // KeyValueBox.ApplyKVPScript(this.props.Document, "data", script); - - console.log(newBox); - + SelectionManager.SelectedDocuments().map(dv => { + dv.props.addDocument && dv.props.addDocument(newBox, false); + dv.props.removeDocument && dv.props.removeDocument(dv.props.Document); + }); - newBox.proto!.autoHeight = true; - // PreviewCursor._addLiveTextDoc(newBox); - // if (parent && parent.props.addDocument) { - // console.log("adding doc") - // parent.props.addDocument(newBox); - // } - return; + Doc.BrushDoc(newBox); } urlEditor() { @@ -151,14 +129,15 @@ export class WebBox extends React.Component {
- +
+ +
-- cgit v1.2.3-70-g09d2 From 5bd664e113434ec08fd56a34bb8f6a3e2ce136e8 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 21 Aug 2019 17:25:13 -0400 Subject: fixed upload of docs zip --- .../collectionFreeForm/CollectionFreeFormView.tsx | 46 ++++++++++++++++++---- src/client/views/nodes/DocumentView.tsx | 30 -------------- src/server/index.ts | 22 ++++++----- 3 files changed, 51 insertions(+), 47 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 3be6aa3d3..cbc123c61 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1,17 +1,18 @@ import { library } from "@fortawesome/fontawesome-svg-core"; import { faEye } from "@fortawesome/free-regular-svg-icons"; -import { faCompass, faCompressArrowsAlt, faExpandArrowsAlt, faPaintBrush, faTable, faUpload, faChalkboard, faBraille } from "@fortawesome/free-solid-svg-icons"; -import { action, computed, observable, IReactionDisposer, reaction } from "mobx"; +import { faBraille, faChalkboard, faCompass, faCompressArrowsAlt, faExpandArrowsAlt, faPaintBrush, faTable, faUpload } from "@fortawesome/free-solid-svg-icons"; +import { action, computed, IReactionDisposer, observable, reaction } from "mobx"; import { observer } from "mobx-react"; -import { Doc, DocListCastAsync, HeightSym, WidthSym, DocListCast, FieldResult, Field, Opt } from "../../../../new_fields/Doc"; +import { Doc, DocListCastAsync, Field, FieldResult, HeightSym, Opt, WidthSym } from "../../../../new_fields/Doc"; import { Id } from "../../../../new_fields/FieldSymbols"; import { InkField, StrokeData } from "../../../../new_fields/InkField"; import { createSchema, makeInterface } from "../../../../new_fields/Schema"; import { ScriptField } from "../../../../new_fields/ScriptField"; import { BoolCast, Cast, FieldValue, NumCast, StrCast } from "../../../../new_fields/Types"; -import { emptyFunction, returnOne, Utils, returnFalse, returnEmptyString } from "../../../../Utils"; +import { emptyFunction, returnEmptyString, returnOne, Utils } from "../../../../Utils"; import { CognitiveServices } from "../../../cognitive_services/CognitiveServices"; -import { DocServer } from "../../../DocServer"; +import { Docs } from "../../../documents/Documents"; +import { DocumentType } from "../../../documents/DocumentTypes"; import { DocumentManager } from "../../../util/DocumentManager"; import { DragManager } from "../../../util/DragManager"; import { HistoryUtil } from "../../../util/History"; @@ -29,15 +30,14 @@ import { DocumentViewProps, positionSchema } from "../../nodes/DocumentView"; import { pageSchema } from "../../nodes/ImageBox"; import { OverlayElementOptions, OverlayView } from "../../OverlayView"; import PDFMenu from "../../pdf/PDFMenu"; -import { CollectionSubView } from "../CollectionSubView"; import { ScriptBox } from "../../ScriptBox"; +import { CollectionSubView } from "../CollectionSubView"; import { CollectionFreeFormLinksView } from "./CollectionFreeFormLinksView"; import { CollectionFreeFormRemoteCursors } from "./CollectionFreeFormRemoteCursors"; import "./CollectionFreeFormView.scss"; import { MarqueeView } from "./MarqueeView"; import React = require("react"); -import { Docs } from "../../../documents/Documents"; -import { DocumentType } from "../../../documents/DocumentTypes"; +import { DocServer } from "../../../DocServer"; library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard); @@ -841,6 +841,36 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { let analyzers: ContextMenuProps[] = existingAnalyze && "subitems" in existingAnalyze ? existingAnalyze.subitems : []; analyzers.push({ description: "Analyze Strokes", event: this.analyzeStrokes, icon: "paint-brush" }); !existingAnalyze && ContextMenu.Instance.addItem({ description: "Analyzers...", subitems: analyzers, icon: "hand-point-right" }); + ContextMenu.Instance.addItem({ + description: "Import document", icon: "upload", event: () => { + const input = document.createElement("input"); + input.type = "file"; + input.accept = ".zip"; + input.onchange = async _e => { + const files = input.files; + if (!files) return; + const file = files[0]; + let formData = new FormData(); + formData.append('file', file); + formData.append('remap', "true"); + const upload = Utils.prepend("/uploadDoc"); + const response = await fetch(upload, { method: "POST", body: formData }); + const json = await response.json(); + if (json === "error") { + return; + } + const doc = await DocServer.GetRefField(json); + if (!doc || !(doc instanceof Doc)) { + return; + } + const [x, y] = this.props.ScreenToLocalTransform().transformPoint(e.pageX, e.pageY); + doc.x = x, doc.y = y; + this.props.addDocument && + this.props.addDocument(doc, false); + }; + input.click(); + } + }); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index fd53262d7..8dadf2bef 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -40,7 +40,6 @@ import { DocumentContentsView } from "./DocumentContentsView"; import "./DocumentView.scss"; import { FormattedTextBox } from './FormattedTextBox'; import React = require("react"); -import { PresBox } from './PresBox'; const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? library.add(fa.faTrash); @@ -629,35 +628,6 @@ export class DocumentView extends DocComponent(Docu } }); - cm.addItem({ - description: "Import document", icon: "upload", event: () => { - const input = document.createElement("input"); - input.type = "file"; - input.accept = ".zip"; - input.onchange = async _e => { - const files = input.files; - if (!files) return; - const file = files[0]; - let formData = new FormData(); - formData.append('file', file); - formData.append('remap', "true"); - const upload = Utils.prepend("/uploadDoc"); - const response = await fetch(upload, { method: "POST", body: formData }); - const json = await response.json(); - if (json === "error") { - return; - } - const doc = await DocServer.GetRefField(json); - if (!doc || !(doc instanceof Doc)) { - return; - } - const [x, y] = this.props.ScreenToLocalTransform().transformPoint(e.pageX, e.pageY); - doc.x = x, doc.y = y; - this.props.addDocument && this.props.addDocument(doc, false); - }; - input.click(); - } - }); cm.addItem({ description: "Delete", event: this.deleteClicked, icon: "trash" }); type User = { email: string, userDocumentId: string }; let usersMenu: ContextMenuProps[] = []; diff --git a/src/server/index.ts b/src/server/index.ts index ef1829f30..51c7d8a38 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -38,7 +38,7 @@ import flash = require('connect-flash'); import { Search } from './Search'; import _ = require('lodash'); import * as Archiver from 'archiver'; -import AdmZip from 'adm-zip'; +var AdmZip = require('adm-zip'); import * as YoutubeApi from "./apis/youtube/youtubeApiSample"; import { Response } from 'express-serve-static-core'; import { GoogleApiServerUtils } from "./apis/google/GoogleApiServerUtils"; @@ -358,7 +358,7 @@ app.post("/uploadDoc", (req, res) => { for (const name in files) { const path_2 = files[name].path; const zip = new AdmZip(path_2); - zip.getEntries().forEach(entry => { + zip.getEntries().forEach((entry: any) => { if (!entry.entryName.startsWith("files/")) return; let dirname = path.dirname(entry.entryName) + "/"; let extname = path.extname(entry.entryName); @@ -367,13 +367,17 @@ app.post("/uploadDoc", (req, res) => { // zip.extractEntryTo(dirname + basename + "_s" + extname, __dirname + RouteStore.public, true, false); // zip.extractEntryTo(dirname + basename + "_m" + extname, __dirname + RouteStore.public, true, false); // zip.extractEntryTo(dirname + basename + "_l" + extname, __dirname + RouteStore.public, true, false); - zip.extractEntryTo(entry.entryName, __dirname + RouteStore.public, true, false); - dirname = "/" + dirname; - - fs.createReadStream(__dirname + RouteStore.public + dirname + basename + extname).pipe(fs.createWriteStream(__dirname + RouteStore.public + dirname + basename + "_o" + extname)); - fs.createReadStream(__dirname + RouteStore.public + dirname + basename + extname).pipe(fs.createWriteStream(__dirname + RouteStore.public + dirname + basename + "_s" + extname)); - fs.createReadStream(__dirname + RouteStore.public + dirname + basename + extname).pipe(fs.createWriteStream(__dirname + RouteStore.public + dirname + basename + "_m" + extname)); - fs.createReadStream(__dirname + RouteStore.public + dirname + basename + extname).pipe(fs.createWriteStream(__dirname + RouteStore.public + dirname + basename + "_l" + extname)); + try { + zip.extractEntryTo(entry.entryName, __dirname + RouteStore.public, true, false); + dirname = "/" + dirname; + + fs.createReadStream(__dirname + RouteStore.public + dirname + basename + extname).pipe(fs.createWriteStream(__dirname + RouteStore.public + dirname + basename + "_o" + extname)); + fs.createReadStream(__dirname + RouteStore.public + dirname + basename + extname).pipe(fs.createWriteStream(__dirname + RouteStore.public + dirname + basename + "_s" + extname)); + fs.createReadStream(__dirname + RouteStore.public + dirname + basename + extname).pipe(fs.createWriteStream(__dirname + RouteStore.public + dirname + basename + "_m" + extname)); + fs.createReadStream(__dirname + RouteStore.public + dirname + basename + extname).pipe(fs.createWriteStream(__dirname + RouteStore.public + dirname + basename + "_l" + extname)); + } catch (e) { + console.log(e); + } }); const json = zip.getEntry("doc.json"); let docs: any; -- cgit v1.2.3-70-g09d2 From db3f38fd1506f43b46bba11cb37b5912f3191713 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 21 Aug 2019 17:39:36 -0400 Subject: eek --- src/server/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/server/index.ts b/src/server/index.ts index 51c7d8a38..e09297d23 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -446,7 +446,7 @@ function LoadPage(file: string, pageNumber: number, res: Response) { console.log(pageNumber); pdf.getPage(pageNumber).then((page: Pdfjs.PDFPageProxy) => { console.log("reading " + page); - let viewport = page.getViewport(1); + let viewport = page.getViewport(1 as any); let canvasAndContext = factory.create(viewport.width, viewport.height); let renderContext = { canvasContext: canvasAndContext.context, -- cgit v1.2.3-70-g09d2 From ad13ce64efaa6edaa6a04972a3c7a74bedb1ab2d Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 21 Aug 2019 18:22:40 -0400 Subject: welp --- src/server/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/server/index.ts b/src/server/index.ts index e09297d23..85545a8e4 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -815,7 +815,7 @@ const EndpointHandlerMap = new Map([ app.post(RouteStore.googleDocs + ":action", (req, res) => { GoogleApiServerUtils.Docs.GetEndpoint({ credentials, token }).then(endpoint => { - let handler = EndpointHandlerMap.get(req.params.action); + let handler = EndpointHandlerMap.get(req.params.action as Action); if (handler) { let execute = handler(endpoint.documents, req.body).then( response => res.send(response.data), -- cgit v1.2.3-70-g09d2 From f4888ec4b2862cdf890ac1b0f6670b41398266df Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 21 Aug 2019 20:01:35 -0400 Subject: can create google slides presentations --- .../apis/google_docs/GoogleApiClientUtils.ts | 99 +++++++++++++--------- src/client/views/MainView.tsx | 4 + src/client/views/nodes/FormattedTextBox.tsx | 20 ++--- src/server/apis/google/GoogleApiServerUtils.ts | 65 +++++++++----- src/server/index.ts | 19 ++--- 5 files changed, 123 insertions(+), 84 deletions(-) (limited to 'src') diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts index 821c52270..52452cd95 100644 --- a/src/client/apis/google_docs/GoogleApiClientUtils.ts +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -1,4 +1,4 @@ -import { docs_v1 } from "googleapis"; +import { docs_v1, slides_v1 } from "googleapis"; import { PostToServer } from "../../../Utils"; import { RouteStore } from "../../../server/RouteStore"; import { Opt } from "../../../new_fields/Doc"; @@ -9,47 +9,47 @@ export const Pushes = "googleDocsPushCount"; export namespace GoogleApiClientUtils { - export namespace Docs { + export enum Actions { + Create = "create", + Retrieve = "retrieve", + Update = "update" + } - export enum Actions { - Create = "create", - Retrieve = "retrieve", - Update = "update" - } + export enum WriteMode { + Insert, + Replace + } - export enum WriteMode { - Insert, - Replace - } + export type DocumentId = string; + export type Reference = DocumentId | CreateOptions; + export type TextContent = string | string[]; + export type IdHandler = (id: DocumentId) => any; + export type CreationResult = Opt; + export type ReadLinesResult = Opt<{ title?: string, bodyLines?: string[] }>; + export type ReadResult = { title?: string, body?: string }; - export type DocumentId = string; - export type Reference = DocumentId | CreateOptions; - export type TextContent = string | string[]; - export type IdHandler = (id: DocumentId) => any; + export interface CreateOptions { + title?: string; // if excluded, will use a default title annotated with the current date + } - export type CreationResult = Opt; - export type RetrievalResult = Opt; - export type UpdateResult = Opt; - export type ReadLinesResult = Opt<{ title?: string, bodyLines?: string[] }>; - export type ReadResult = { title?: string, body?: string }; + export interface RetrieveOptions { + documentId: DocumentId; + } - export interface CreateOptions { - handler: IdHandler; // callback to process the documentId of the newly created Google Doc - title?: string; // if excluded, will use a default title annotated with the current date - } + export type ReadOptions = RetrieveOptions & { removeNewlines?: boolean }; - export interface RetrieveOptions { - documentId: DocumentId; - } + export interface WriteOptions { + mode: WriteMode; + content: TextContent; + reference: Reference; + index?: number; // if excluded, will compute the last index of the document and append the content there + } - export type ReadOptions = RetrieveOptions & { removeNewlines?: boolean }; - export interface WriteOptions { - mode: WriteMode; - content: TextContent; - reference: Reference; - index?: number; // if excluded, will compute the last index of the document and append the content there - } + export namespace Docs { + + export type RetrievalResult = Opt; + export type UpdateResult = Opt; export interface UpdateOptions { documentId: DocumentId; @@ -106,7 +106,7 @@ export namespace GoogleApiClientUtils { * @returns the documentId of the newly generated document, or undefined if the creation process fails. */ export const create = async (options: CreateOptions): Promise => { - const path = RouteStore.googleDocs + Actions.Create; + const path = RouteStore.googleDocs + "Documents/" + Actions.Create; const parameters = { requestBody: { title: options.title || `Dash Export (${new Date().toDateString()})` @@ -115,17 +115,14 @@ export namespace GoogleApiClientUtils { try { const schema: docs_v1.Schema$Document = await PostToServer(path, parameters); const generatedId = schema.documentId; - if (generatedId) { - options.handler(generatedId); - return generatedId; - } + return generatedId; } catch { return undefined; } }; export const retrieve = async (options: RetrieveOptions): Promise => { - const path = RouteStore.googleDocs + Actions.Retrieve; + const path = RouteStore.googleDocs + "Documents/" + Actions.Retrieve; try { const schema: RetrievalResult = await PostToServer(path, options); return schema; @@ -135,7 +132,7 @@ export namespace GoogleApiClientUtils { }; export const update = async (options: UpdateOptions): Promise => { - const path = RouteStore.googleDocs + Actions.Update; + const path = RouteStore.googleDocs + "Documents/" + Actions.Update; const parameters = { documentId: options.documentId, requestBody: { @@ -221,4 +218,24 @@ export namespace GoogleApiClientUtils { } + export namespace Slides { + + export const create = async (options: CreateOptions): Promise => { + const path = RouteStore.googleDocs + "Slides/" + Actions.Create; + const parameters = { + requestBody: { + title: options.title || `Dash Export (${new Date().toDateString()})` + } + }; + try { + const schema: slides_v1.Schema$Presentation = await PostToServer(path, parameters); + const generatedId = schema.presentationId; + return generatedId; + } catch { + return undefined; + } + }; + + } + } \ No newline at end of file diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f28844009..3490a0f68 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -40,6 +40,7 @@ import { PreviewCursor } from './PreviewCursor'; import { FilterBox } from './search/FilterBox'; import PresModeMenu from './presentationview/PresentationModeMenu'; import { PresBox } from './nodes/PresBox'; +import { GoogleApiClientUtils } from '../apis/google_docs/GoogleApiClientUtils'; @observer export class MainView extends React.Component { @@ -120,6 +121,9 @@ export class MainView extends React.Component { componentWillMount() { var tag = document.createElement('script'); + let title = "THIS IS MY FIRST DASH PRESENTATION"; + GoogleApiClientUtils.Slides.create({ title }).then(id => console.log("We received this! ", id)); + tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode!.insertBefore(tag, firstScriptTag); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index c8722c6e3..408a6948e 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -64,7 +64,7 @@ export const GoogleRef = "googleDocId"; type RichTextDocument = makeInterface<[typeof richTextSchema]>; const RichTextDocument = makeInterface(richTextSchema); -type PullHandler = (exportState: GoogleApiClientUtils.Docs.ReadResult, dataDoc: Doc) => void; +type PullHandler = (exportState: GoogleApiClientUtils.ReadResult, dataDoc: Doc) => void; @observer export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTextBoxProps), RichTextDocument>(RichTextDocument) { @@ -430,22 +430,20 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } pushToGoogleDoc = async () => { - this.pullFromGoogleDoc(async (exportState: GoogleApiClientUtils.Docs.ReadResult, dataDoc: Doc) => { - let modes = GoogleApiClientUtils.Docs.WriteMode; + this.pullFromGoogleDoc(async (exportState: GoogleApiClientUtils.ReadResult, dataDoc: Doc) => { + let modes = GoogleApiClientUtils.WriteMode; let mode = modes.Replace; - let reference: Opt = Cast(this.dataDoc[GoogleRef], "string"); + let reference: Opt = Cast(this.dataDoc[GoogleRef], "string"); if (!reference) { mode = modes.Insert; - reference = { - title: StrCast(this.dataDoc.title), - handler: id => this.dataDoc[GoogleRef] = id - }; + reference = { title: StrCast(this.dataDoc.title) }; } let redo = async () => { let data = Cast(this.dataDoc.data, RichTextField); if (this._editorView && reference && data) { let content = data[ToPlainText](); let response = await GoogleApiClientUtils.Docs.write({ reference, content, mode }); + response && (this.dataDoc[GoogleRef] = response.documentId); let pushSuccess = response !== undefined && !("errors" in response); dataDoc.unchanged = pushSuccess; DocumentDecorations.Instance.startPushOutcome(pushSuccess); @@ -465,14 +463,14 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe pullFromGoogleDoc = async (handler: PullHandler) => { let dataDoc = this.dataDoc; let documentId = StrCast(dataDoc[GoogleRef]); - let exportState: GoogleApiClientUtils.Docs.ReadResult = {}; + let exportState: GoogleApiClientUtils.ReadResult = {}; if (documentId) { exportState = await GoogleApiClientUtils.Docs.read({ documentId }); } UndoManager.RunInBatch(() => handler(exportState, dataDoc), Pulls); } - updateState = (exportState: GoogleApiClientUtils.Docs.ReadResult, dataDoc: Doc) => { + updateState = (exportState: GoogleApiClientUtils.ReadResult, dataDoc: Doc) => { let pullSuccess = false; if (exportState !== undefined && exportState.body !== undefined && exportState.title !== undefined) { const data = Cast(dataDoc.data, RichTextField); @@ -496,7 +494,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe DocumentDecorations.Instance.startPullOutcome(pullSuccess); } - checkState = (exportState: GoogleApiClientUtils.Docs.ReadResult, dataDoc: Doc) => { + checkState = (exportState: GoogleApiClientUtils.ReadResult, dataDoc: Doc) => { if (exportState !== undefined && exportState.body !== undefined && exportState.title !== undefined) { let data = Cast(dataDoc.data, RichTextField); if (data) { diff --git a/src/server/apis/google/GoogleApiServerUtils.ts b/src/server/apis/google/GoogleApiServerUtils.ts index 817b2b696..ff027c501 100644 --- a/src/server/apis/google/GoogleApiServerUtils.ts +++ b/src/server/apis/google/GoogleApiServerUtils.ts @@ -1,7 +1,10 @@ -import { google, docs_v1 } from "googleapis"; +import { google, docs_v1, slides_v1 } from "googleapis"; import { createInterface } from "readline"; import { readFile, writeFile } from "fs"; import { OAuth2Client } from "google-auth-library"; +import { Opt } from "../../../new_fields/Doc"; +import { GlobalOptions } from "googleapis-common"; +import { GaxiosResponse } from "gaxios"; /** * Server side authentication for Google Api queries. @@ -13,38 +16,57 @@ export namespace GoogleApiServerUtils { const SCOPES = [ 'documents.readonly', 'documents', + 'presentations', + 'presentations.readonly', 'drive', 'drive.file', ]; - // The file token.json stores the user's access and refresh tokens, and is - // created automatically when the authorization flow completes for the first - // time. + export const parseBuffer = (data: Buffer) => JSON.parse(data.toString()); - export namespace Docs { + export enum Sector { + Documents = "Documents", + Slides = "Slides" + } + - export interface CredentialPaths { - credentials: string; - token: string; - } + export interface CredentialPaths { + credentials: string; + token: string; + } - export type Endpoint = docs_v1.Docs; + export type ApiResponse = Promise; + export type ApiRouter = (endpoint: Endpoint, paramters: any) => ApiResponse; + export type ApiHandler = (parameters: any) => ApiResponse; + export type Action = "create" | "retrieve" | "update"; - export const GetEndpoint = async (paths: CredentialPaths) => { - return new Promise((resolve, reject) => { - readFile(paths.credentials, (err, credentials) => { - if (err) { - reject(err); - return console.log('Error loading client secret file:', err); + export type Endpoint = { get: ApiHandler, create: ApiHandler, batchUpdate: ApiHandler }; + export type EndpointParameters = GlobalOptions & { version: "v1" }; + + export const GetEndpoint = async (sector: string, paths: CredentialPaths) => { + return new Promise>((resolve, reject) => { + readFile(paths.credentials, (err, credentials) => { + if (err) { + reject(err); + return console.log('Error loading client secret file:', err); + } + return authorize(parseBuffer(credentials), paths.token).then(auth => { + let routed: Opt; + let parameters: EndpointParameters = { auth, version: "v1" }; + switch (sector) { + case Sector.Documents: + routed = google.docs(parameters).documents; + break; + case Sector.Slides: + routed = google.slides(parameters).presentations; + break; } - return authorize(parseBuffer(credentials), paths.token).then(auth => { - resolve(google.docs({ version: "v1", auth })); - }); + resolve(routed); }); }); - }; + }); + }; - } /** * Create an OAuth2 client with the given credentials, and returns the promise resolving to the authenticated client @@ -105,5 +127,4 @@ export namespace GoogleApiServerUtils { }); }); } - } \ No newline at end of file diff --git a/src/server/index.ts b/src/server/index.ts index ef1829f30..6aecb875a 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -45,6 +45,7 @@ import { GoogleApiServerUtils } from "./apis/google/GoogleApiServerUtils"; import { GaxiosResponse } from 'gaxios'; import { Opt } from '../new_fields/Doc'; import { docs_v1 } from 'googleapis'; +import { Endpoint } from 'googleapis-common'; const MongoStore = require('connect-mongo')(session); const mongoose = require('mongoose'); const probe = require("probe-image-size"); @@ -799,21 +800,19 @@ function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: any const credentials = path.join(__dirname, "./credentials/google_docs_credentials.json"); const token = path.join(__dirname, "./credentials/google_docs_token.json"); -type ApiResponse = Promise; -type ApiHandler = (endpoint: docs_v1.Resource$Documents, parameters: any) => ApiResponse; -type Action = "create" | "retrieve" | "update"; - -const EndpointHandlerMap = new Map([ +const EndpointHandlerMap = new Map([ ["create", (api, params) => api.create(params)], ["retrieve", (api, params) => api.get(params)], ["update", (api, params) => api.batchUpdate(params)], ]); -app.post(RouteStore.googleDocs + ":action", (req, res) => { - GoogleApiServerUtils.Docs.GetEndpoint({ credentials, token }).then(endpoint => { - let handler = EndpointHandlerMap.get(req.params.action); - if (handler) { - let execute = handler(endpoint.documents, req.body).then( +app.post(RouteStore.googleDocs + ":sector/:action", (req, res) => { + let sector = req.params.sector; + let action = req.params.action; + GoogleApiServerUtils.GetEndpoint(GoogleApiServerUtils.Sector[sector], { credentials, token }).then(endpoint => { + let handler = EndpointHandlerMap.get(action); + if (endpoint && handler) { + let execute = handler(endpoint, req.body).then( response => res.send(response.data), rejection => res.send(rejection) ); -- cgit v1.2.3-70-g09d2 From 30d55c5b91329d32a79b7135fff3566b2cd0e822 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 21 Aug 2019 20:33:42 -0400 Subject: create is now shared between slides and docs --- .../apis/google_docs/GoogleApiClientUtils.ts | 79 +++++++++------------- src/client/views/MainView.tsx | 2 +- src/client/views/nodes/FormattedTextBox.tsx | 2 +- src/server/RouteStore.ts | 2 +- src/server/apis/google/GoogleApiServerUtils.ts | 6 +- src/server/index.ts | 4 +- 6 files changed, 40 insertions(+), 55 deletions(-) (limited to 'src') diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts index 52452cd95..ea020ed00 100644 --- a/src/client/apis/google_docs/GoogleApiClientUtils.ts +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -9,6 +9,11 @@ export const Pushes = "googleDocsPushCount"; export namespace GoogleApiClientUtils { + export enum Service { + Documents = "Documents", + Slides = "Slides" + } + export enum Actions { Create = "create", Retrieve = "retrieve", @@ -29,6 +34,7 @@ export namespace GoogleApiClientUtils { export type ReadResult = { title?: string, body?: string }; export interface CreateOptions { + service: Service; title?: string; // if excluded, will use a default title annotated with the current date } @@ -45,6 +51,30 @@ export namespace GoogleApiClientUtils { index?: number; // if excluded, will compute the last index of the document and append the content there } + /** + * After following the authentication routine, which connects this API call to the current signed in account + * and grants the appropriate permissions, this function programmatically creates an arbitrary Google Doc which + * should appear in the user's Google Doc library instantaneously. + * + * @param options the title to assign to the new document, and the information necessary + * to store the new documentId returned from the creation process + * @returns the documentId of the newly generated document, or undefined if the creation process fails. + */ + export const create = async (options: CreateOptions): Promise => { + const path = `${RouteStore.googleDocs}/${options.service}/${Actions.Create}`; + const parameters = { + requestBody: { + title: options.title || `Dash Export (${new Date().toDateString()})` + } + }; + try { + const schema: any = await PostToServer(path, parameters); + let key = ["document", "presentation"].find(prefix => `${prefix}Id` in schema) + "Id"; + return schema[key]; + } catch { + return undefined; + } + }; export namespace Docs { @@ -96,33 +126,8 @@ export namespace GoogleApiClientUtils { } - /** - * After following the authentication routine, which connects this API call to the current signed in account - * and grants the appropriate permissions, this function programmatically creates an arbitrary Google Doc which - * should appear in the user's Google Doc library instantaneously. - * - * @param options the title to assign to the new document, and the information necessary - * to store the new documentId returned from the creation process - * @returns the documentId of the newly generated document, or undefined if the creation process fails. - */ - export const create = async (options: CreateOptions): Promise => { - const path = RouteStore.googleDocs + "Documents/" + Actions.Create; - const parameters = { - requestBody: { - title: options.title || `Dash Export (${new Date().toDateString()})` - } - }; - try { - const schema: docs_v1.Schema$Document = await PostToServer(path, parameters); - const generatedId = schema.documentId; - return generatedId; - } catch { - return undefined; - } - }; - export const retrieve = async (options: RetrieveOptions): Promise => { - const path = RouteStore.googleDocs + "Documents/" + Actions.Retrieve; + const path = `${RouteStore.googleDocs}/${Service.Documents}/${Actions.Retrieve}`; try { const schema: RetrievalResult = await PostToServer(path, options); return schema; @@ -132,7 +137,7 @@ export namespace GoogleApiClientUtils { }; export const update = async (options: UpdateOptions): Promise => { - const path = RouteStore.googleDocs + "Documents/" + Actions.Update; + const path = `${RouteStore.googleDocs}/${Service.Documents}/${Actions.Update}`; const parameters = { documentId: options.documentId, requestBody: { @@ -218,24 +223,4 @@ export namespace GoogleApiClientUtils { } - export namespace Slides { - - export const create = async (options: CreateOptions): Promise => { - const path = RouteStore.googleDocs + "Slides/" + Actions.Create; - const parameters = { - requestBody: { - title: options.title || `Dash Export (${new Date().toDateString()})` - } - }; - try { - const schema: slides_v1.Schema$Presentation = await PostToServer(path, parameters); - const generatedId = schema.presentationId; - return generatedId; - } catch { - return undefined; - } - }; - - } - } \ No newline at end of file diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 3490a0f68..2a219fdd1 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -122,7 +122,7 @@ export class MainView extends React.Component { var tag = document.createElement('script'); let title = "THIS IS MY FIRST DASH PRESENTATION"; - GoogleApiClientUtils.Slides.create({ title }).then(id => console.log("We received this! ", id)); + GoogleApiClientUtils.create({ service: GoogleApiClientUtils.Service.Slides, title }).then(id => console.log("We received this! ", id)); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 408a6948e..bcec6f7c3 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -436,7 +436,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe let reference: Opt = Cast(this.dataDoc[GoogleRef], "string"); if (!reference) { mode = modes.Insert; - reference = { title: StrCast(this.dataDoc.title) }; + reference = { service: GoogleApiClientUtils.Service.Documents, title: StrCast(this.dataDoc.title) }; } let redo = async () => { let data = Cast(this.dataDoc.data, RichTextField); diff --git a/src/server/RouteStore.ts b/src/server/RouteStore.ts index 5d977006a..014906054 100644 --- a/src/server/RouteStore.ts +++ b/src/server/RouteStore.ts @@ -31,6 +31,6 @@ export enum RouteStore { // APIS cognitiveServices = "/cognitiveservices", - googleDocs = "/googleDocs/" + googleDocs = "/googleDocs" } \ No newline at end of file diff --git a/src/server/apis/google/GoogleApiServerUtils.ts b/src/server/apis/google/GoogleApiServerUtils.ts index ff027c501..8785cd974 100644 --- a/src/server/apis/google/GoogleApiServerUtils.ts +++ b/src/server/apis/google/GoogleApiServerUtils.ts @@ -24,7 +24,7 @@ export namespace GoogleApiServerUtils { export const parseBuffer = (data: Buffer) => JSON.parse(data.toString()); - export enum Sector { + export enum Service { Documents = "Documents", Slides = "Slides" } @@ -54,10 +54,10 @@ export namespace GoogleApiServerUtils { let routed: Opt; let parameters: EndpointParameters = { auth, version: "v1" }; switch (sector) { - case Sector.Documents: + case Service.Documents: routed = google.docs(parameters).documents; break; - case Sector.Slides: + case Service.Slides: routed = google.slides(parameters).presentations; break; } diff --git a/src/server/index.ts b/src/server/index.ts index 6aecb875a..0476bf3df 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -806,10 +806,10 @@ const EndpointHandlerMap = new Map api.batchUpdate(params)], ]); -app.post(RouteStore.googleDocs + ":sector/:action", (req, res) => { +app.post(RouteStore.googleDocs + "/:sector/:action", (req, res) => { let sector = req.params.sector; let action = req.params.action; - GoogleApiServerUtils.GetEndpoint(GoogleApiServerUtils.Sector[sector], { credentials, token }).then(endpoint => { + GoogleApiServerUtils.GetEndpoint(GoogleApiServerUtils.Service[sector], { credentials, token }).then(endpoint => { let handler = EndpointHandlerMap.get(action); if (endpoint && handler) { let execute = handler(endpoint, req.body).then( -- cgit v1.2.3-70-g09d2 From e68b1cc60b2a8ffe55eea3e1d5266d6897dcdcb6 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 21 Aug 2019 21:31:17 -0400 Subject: integrated slides --- .../apis/google_docs/GoogleApiClientUtils.ts | 47 +- src/client/views/MainView.tsx | 3 - src/client/views/nodes/FormattedTextBox.tsx | 2 +- src/server/slides.json | 10820 +++++++++++++++++++ 4 files changed, 10851 insertions(+), 21 deletions(-) create mode 100644 src/server/slides.json (limited to 'src') diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts index ea020ed00..3e90adc4d 100644 --- a/src/client/apis/google_docs/GoogleApiClientUtils.ts +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -25,11 +25,11 @@ export namespace GoogleApiClientUtils { Replace } - export type DocumentId = string; - export type Reference = DocumentId | CreateOptions; + export type Identifier = string; + export type Reference = Identifier | CreateOptions; export type TextContent = string | string[]; - export type IdHandler = (id: DocumentId) => any; - export type CreationResult = Opt; + export type IdHandler = (id: Identifier) => any; + export type CreationResult = Opt; export type ReadLinesResult = Opt<{ title?: string, bodyLines?: string[] }>; export type ReadResult = { title?: string, body?: string }; @@ -39,10 +39,14 @@ export namespace GoogleApiClientUtils { } export interface RetrieveOptions { - documentId: DocumentId; + service: Service; + identifier: Identifier; } - export type ReadOptions = RetrieveOptions & { removeNewlines?: boolean }; + export interface ReadOptions { + identifier: Identifier; + removeNewlines?: boolean; + } export interface WriteOptions { mode: WriteMode; @@ -78,11 +82,11 @@ export namespace GoogleApiClientUtils { export namespace Docs { - export type RetrievalResult = Opt; + export type RetrievalResult = Opt; export type UpdateResult = Opt; export interface UpdateOptions { - documentId: DocumentId; + documentId: Identifier; requests: docs_v1.Schema$Request[]; } @@ -126,11 +130,20 @@ export namespace GoogleApiClientUtils { } + const KeyMapping = new Map([ + [Service.Documents, "documentId"], + [Service.Slides, "presentationId"] + ]); + export const retrieve = async (options: RetrieveOptions): Promise => { - const path = `${RouteStore.googleDocs}/${Service.Documents}/${Actions.Retrieve}`; + const path = `${RouteStore.googleDocs}/${options.service}/${Actions.Retrieve}`; try { - const schema: RetrievalResult = await PostToServer(path, options); - return schema; + let parameters: any = {}, key: string | undefined; + if ((key = KeyMapping.get(options.service))) { + parameters[key] = options.identifier; + const schema: RetrievalResult = await PostToServer(path, parameters); + return schema; + } } catch { return undefined; } @@ -153,7 +166,7 @@ export namespace GoogleApiClientUtils { }; export const read = async (options: ReadOptions): Promise => { - return retrieve(options).then(document => { + return retrieve({ ...options, service: Service.Documents }).then(document => { let result: ReadResult = {}; if (document) { let title = document.title; @@ -165,7 +178,7 @@ export namespace GoogleApiClientUtils { }; export const readLines = async (options: ReadOptions): Promise => { - return retrieve(options).then(document => { + return retrieve({ ...options, service: Service.Documents }).then(document => { let result: ReadLinesResult = {}; if (document) { let title = document.title; @@ -179,14 +192,14 @@ export namespace GoogleApiClientUtils { export const write = async (options: WriteOptions): Promise => { const requests: docs_v1.Schema$Request[] = []; - const documentId = await Utils.initialize(options.reference); - if (!documentId) { + const identifier = await Utils.initialize(options.reference); + if (!identifier) { return undefined; } let index = options.index; const mode = options.mode; if (!(index && mode === WriteMode.Insert)) { - let schema = await retrieve({ documentId }); + let schema = await retrieve({ identifier, service: Service.Documents }); if (!schema || !(index = Utils.endOf(schema))) { return undefined; } @@ -212,7 +225,7 @@ export namespace GoogleApiClientUtils { if (!requests.length) { return undefined; } - let replies: any = await update({ documentId, requests }); + let replies: any = await update({ documentId: identifier, requests }); let errors = "errors"; if (errors in replies) { console.log("Write operation failed:"); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 2a219fdd1..0286a201b 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -121,9 +121,6 @@ export class MainView extends React.Component { componentWillMount() { var tag = document.createElement('script'); - let title = "THIS IS MY FIRST DASH PRESENTATION"; - GoogleApiClientUtils.create({ service: GoogleApiClientUtils.Service.Slides, title }).then(id => console.log("We received this! ", id)); - tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode!.insertBefore(tag, firstScriptTag); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index bcec6f7c3..a603676bb 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -465,7 +465,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe let documentId = StrCast(dataDoc[GoogleRef]); let exportState: GoogleApiClientUtils.ReadResult = {}; if (documentId) { - exportState = await GoogleApiClientUtils.Docs.read({ documentId }); + exportState = await GoogleApiClientUtils.Docs.read({ identifier: documentId }); } UndoManager.RunInBatch(() => handler(exportState, dataDoc), Pulls); } diff --git a/src/server/slides.json b/src/server/slides.json new file mode 100644 index 000000000..323cac3a6 --- /dev/null +++ b/src/server/slides.json @@ -0,0 +1,10820 @@ +{ + "presentationId": "1gHxyT6bBhsPVeuWNnWDzI33yEviMVo8n60JtZiVy3tY", + "pageSize": { + "width": { + "magnitude": 9144000, + "unit": "EMU" + }, + "height": { + "magnitude": 5143500, + "unit": "EMU" + } + }, + "slides": [ + { + "objectId": "p", + "pageElements": [ + { + "objectId": "i0", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 0.6842, + "translateX": 311708.35000000003, + "translateY": 744575, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 20, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 20, + "textRun": { + "content": "Importing into Dash\n", + "style": {} + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "CENTERED_TITLE", + "parentObjectId": "p2_i0" + } + } + }, + { + "objectId": "i1", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 0.2642, + "translateX": 311700, + "translateY": 2834125, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 15, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 15, + "textRun": { + "content": "By Sam Wilkins\n", + "style": {} + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SUBTITLE", + "parentObjectId": "p2_i1" + } + } + } + ], + "slideProperties": { + "layoutObjectId": "p2", + "masterObjectId": "simple-light-2", + "notesPage": { + "objectId": "p:notes", + "pageType": "NOTES", + "pageElements": [ + { + "objectId": "i2", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.032025, + "scaleY": 1.143, + "translateX": 381300, + "translateY": 685800, + "unit": "EMU" + }, + "shape": { + "shapeProperties": { + "outline": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SLIDE_IMAGE", + "parentObjectId": "n:slide" + } + } + }, + { + "objectId": "i3", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 1.8288, + "scaleY": 1.3716, + "translateX": 685800, + "translateY": 4343400, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "BODY", + "index": 1, + "parentObjectId": "n:text" + } + } + } + ], + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + }, + "notesProperties": { + "speakerNotesObjectId": "i3" + } + } + }, + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + } + }, + { + "objectId": "g5f40953d50_0_0", + "pageElements": [ + { + "objectId": "g5f40953d50_0_1", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 0.1909, + "translateX": 311700, + "translateY": 445025, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 10, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 10, + "textRun": { + "content": "Dr. Seuss\n", + "style": {} + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "TITLE", + "parentObjectId": "p4_i0" + } + } + }, + { + "objectId": "g5f40953d50_0_2", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 1.1388, + "translateX": 311700, + "translateY": 1152475, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 25, + "paragraphMarker": { + "style": { + "indentStart": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 25, + "textRun": { + "content": "Here is a bulleted list!\n", + "style": {} + } + }, + { + "startIndex": 25, + "endIndex": 34, + "paragraphMarker": { + "style": { + "indentStart": { + "magnitude": 36, + "unit": "PT" + }, + "indentFirstLine": { + "magnitude": 18, + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "COLLAPSE_LISTS" + }, + "bullet": { + "listId": "kix.wifbmqnyqu4p", + "glyph": "●", + "bulletStyle": { + "underline": false + } + } + } + }, + { + "startIndex": 25, + "endIndex": 34, + "textRun": { + "content": "One fish\n", + "style": {} + } + }, + { + "startIndex": 34, + "endIndex": 43, + "paragraphMarker": { + "style": { + "indentStart": { + "magnitude": 36, + "unit": "PT" + }, + "indentFirstLine": { + "magnitude": 18, + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "COLLAPSE_LISTS" + }, + "bullet": { + "listId": "kix.wifbmqnyqu4p", + "glyph": "●", + "bulletStyle": { + "underline": false + } + } + } + }, + { + "startIndex": 34, + "endIndex": 43, + "textRun": { + "content": "Two fish\n", + "style": {} + } + }, + { + "startIndex": 43, + "endIndex": 52, + "paragraphMarker": { + "style": { + "indentStart": { + "magnitude": 36, + "unit": "PT" + }, + "indentFirstLine": { + "magnitude": 18, + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "COLLAPSE_LISTS" + }, + "bullet": { + "listId": "kix.wifbmqnyqu4p", + "glyph": "●", + "bulletStyle": { + "underline": false + } + } + } + }, + { + "startIndex": 43, + "endIndex": 52, + "textRun": { + "content": "Red fish\n", + "style": {} + } + }, + { + "startIndex": 52, + "endIndex": 62, + "paragraphMarker": { + "style": { + "indentStart": { + "magnitude": 36, + "unit": "PT" + }, + "indentFirstLine": { + "magnitude": 18, + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "COLLAPSE_LISTS" + }, + "bullet": { + "listId": "kix.wifbmqnyqu4p", + "glyph": "●", + "bulletStyle": { + "underline": false + } + } + } + }, + { + "startIndex": 52, + "endIndex": 62, + "textRun": { + "content": "Blue fish\n", + "style": {} + } + } + ], + "lists": { + "kix.wifbmqnyqu4p": { + "listId": "kix.wifbmqnyqu4p", + "nestingLevel": { + "0": { + "bulletStyle": { + "underline": false + } + }, + "1": { + "bulletStyle": { + "underline": false + } + }, + "2": { + "bulletStyle": { + "underline": false + } + }, + "3": { + "bulletStyle": { + "underline": false + } + }, + "4": { + "bulletStyle": { + "underline": false + } + }, + "5": { + "bulletStyle": { + "underline": false + } + }, + "6": { + "bulletStyle": { + "underline": false + } + }, + "7": { + "bulletStyle": { + "underline": false + } + }, + "8": { + "bulletStyle": { + "underline": false + } + } + } + }, + "kix.yuy8atv38lqp": { + "listId": "kix.yuy8atv38lqp", + "nestingLevel": { + "0": { + "bulletStyle": { + "underline": false + } + }, + "1": { + "bulletStyle": { + "underline": false + } + }, + "2": { + "bulletStyle": { + "underline": false + } + }, + "3": { + "bulletStyle": { + "underline": false + } + }, + "4": { + "bulletStyle": { + "underline": false + } + }, + "5": { + "bulletStyle": { + "underline": false + } + }, + "6": { + "bulletStyle": { + "underline": false + } + }, + "7": { + "bulletStyle": { + "underline": false + } + }, + "8": { + "bulletStyle": { + "underline": false + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "BODY", + "parentObjectId": "p4_i1" + } + } + } + ], + "slideProperties": { + "layoutObjectId": "p4", + "masterObjectId": "simple-light-2", + "notesPage": { + "objectId": "g5f40953d50_0_0:notes", + "pageType": "NOTES", + "pageElements": [ + { + "objectId": "g5f40953d50_0_3", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.032, + "scaleY": 1.143, + "translateX": 381300, + "translateY": 685800, + "unit": "EMU" + }, + "shape": { + "shapeProperties": { + "outline": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SLIDE_IMAGE", + "parentObjectId": "n:slide" + } + } + }, + { + "objectId": "g5f40953d50_0_4", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 1.8288, + "scaleY": 1.3716, + "translateX": 685800, + "translateY": 4343400, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "BODY", + "index": 1, + "parentObjectId": "n:text" + } + } + } + ], + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + }, + "notesProperties": { + "speakerNotesObjectId": "g5f40953d50_0_4" + } + } + }, + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + } + } + ], + "title": "THIS IS MY FIRST DASH PRESENTATION", + "masters": [ + { + "objectId": "simple-light-2", + "pageType": "MASTER", + "pageElements": [ + { + "objectId": "p1_i0", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 0.1909, + "translateX": 311700, + "translateY": 445025, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "1": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "2": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "3": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "4": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "5": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "6": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "7": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "8": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK1" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 28, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "NOT_RENDERED", + "solidFill": { + "color": { + "rgbColor": { + "red": 1, + "green": 1, + "blue": 1 + } + }, + "alpha": 1 + } + }, + "outline": { + "outlineFill": { + "solidFill": { + "color": { + "rgbColor": {} + }, + "alpha": 1 + } + }, + "weight": { + "magnitude": 9525, + "unit": "EMU" + }, + "dashStyle": "SOLID", + "propertyState": "NOT_RENDERED" + }, + "shadow": { + "type": "OUTER", + "transform": { + "scaleX": 1, + "scaleY": 1, + "unit": "EMU" + }, + "alignment": "BOTTOM_LEFT", + "blurRadius": { + "unit": "EMU" + }, + "color": { + "rgbColor": {} + }, + "alpha": 1, + "rotateWithShape": false, + "propertyState": "NOT_RENDERED" + }, + "contentAlignment": "TOP" + }, + "placeholder": { + "type": "TITLE" + } + } + }, + { + "objectId": "p1_i1", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 1.1388, + "translateX": 311700, + "translateY": 1152475, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "lineSpacing": 115, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "magnitude": 16, + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 18, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "lineSpacing": 115, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "magnitude": 16, + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "lineSpacing": 115, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "magnitude": 16, + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "lineSpacing": 115, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "magnitude": 16, + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "lineSpacing": 115, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "magnitude": 16, + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "lineSpacing": 115, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "magnitude": 16, + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "lineSpacing": 115, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "magnitude": 16, + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "lineSpacing": 115, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "magnitude": 16, + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "lineSpacing": 115, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "magnitude": 16, + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 18, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "1": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "2": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "3": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "4": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "5": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "6": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "7": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "8": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 14, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "NOT_RENDERED", + "solidFill": { + "color": { + "rgbColor": { + "red": 1, + "green": 1, + "blue": 1 + } + }, + "alpha": 1 + } + }, + "outline": { + "outlineFill": { + "solidFill": { + "color": { + "rgbColor": {} + }, + "alpha": 1 + } + }, + "weight": { + "magnitude": 9525, + "unit": "EMU" + }, + "dashStyle": "SOLID", + "propertyState": "NOT_RENDERED" + }, + "shadow": { + "type": "OUTER", + "transform": { + "scaleX": 1, + "scaleY": 1, + "unit": "EMU" + }, + "alignment": "BOTTOM_LEFT", + "blurRadius": { + "unit": "EMU" + }, + "color": { + "rgbColor": {} + }, + "alpha": 1, + "rotateWithShape": false, + "propertyState": "NOT_RENDERED" + }, + "contentAlignment": "TOP" + }, + "placeholder": { + "type": "BODY" + } + } + }, + { + "objectId": "p1_i2", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 0.1829, + "scaleY": 0.1312, + "translateX": 8472457.8125, + "translateY": 4663216.797499999, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 2, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "END", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "NEVER_COLLAPSE" + } + } + }, + { + "endIndex": 1, + "autoText": { + "type": "SLIDE_NUMBER", + "content": "#", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 10, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "themeColor": "DARK2" + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 10, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "NOT_RENDERED", + "solidFill": { + "color": { + "rgbColor": { + "red": 1, + "green": 1, + "blue": 1 + } + }, + "alpha": 1 + } + }, + "outline": { + "outlineFill": { + "solidFill": { + "color": { + "rgbColor": {} + }, + "alpha": 1 + } + }, + "weight": { + "magnitude": 9525, + "unit": "EMU" + }, + "dashStyle": "SOLID", + "propertyState": "NOT_RENDERED" + }, + "shadow": { + "type": "OUTER", + "transform": { + "scaleX": 1, + "scaleY": 1, + "unit": "EMU" + }, + "alignment": "BOTTOM_LEFT", + "blurRadius": { + "unit": "EMU" + }, + "color": { + "rgbColor": {} + }, + "alpha": 1, + "rotateWithShape": false, + "propertyState": "NOT_RENDERED" + }, + "contentAlignment": "MIDDLE" + }, + "placeholder": { + "type": "SLIDE_NUMBER" + } + } + } + ], + "pageProperties": { + "pageBackgroundFill": { + "solidFill": { + "color": { + "themeColor": "LIGHT1" + }, + "alpha": 1 + } + }, + "colorScheme": { + "colors": [ + { + "type": "DARK1", + "color": {} + }, + { + "type": "LIGHT1", + "color": { + "red": 1, + "green": 1, + "blue": 1 + } + }, + { + "type": "DARK2", + "color": { + "red": 0.34901962, + "green": 0.34901962, + "blue": 0.34901962 + } + }, + { + "type": "LIGHT2", + "color": { + "red": 0.93333334, + "green": 0.93333334, + "blue": 0.93333334 + } + }, + { + "type": "ACCENT1", + "color": { + "red": 1, + "green": 0.67058825, + "blue": 0.2509804 + } + }, + { + "type": "ACCENT2", + "color": { + "red": 0.12941177, + "green": 0.12941177, + "blue": 0.12941177 + } + }, + { + "type": "ACCENT3", + "color": { + "red": 0.47058824, + "green": 0.5647059, + "blue": 0.6117647 + } + }, + { + "type": "ACCENT4", + "color": { + "red": 1, + "green": 0.67058825, + "blue": 0.2509804 + } + }, + { + "type": "ACCENT5", + "color": { + "green": 0.5921569, + "blue": 0.654902 + } + }, + { + "type": "ACCENT6", + "color": { + "red": 0.93333334, + "green": 1, + "blue": 0.25490198 + } + }, + { + "type": "HYPERLINK", + "color": { + "green": 0.5921569, + "blue": 0.654902 + } + }, + { + "type": "FOLLOWED_HYPERLINK", + "color": { + "green": 0.5921569, + "blue": 0.654902 + } + }, + { + "type": "TEXT1", + "color": {} + }, + { + "type": "BACKGROUND1", + "color": { + "red": 1, + "green": 1, + "blue": 1 + } + }, + { + "type": "TEXT2", + "color": { + "red": 0.93333334, + "green": 0.93333334, + "blue": 0.93333334 + } + }, + { + "type": "BACKGROUND2", + "color": { + "red": 0.34901962, + "green": 0.34901962, + "blue": 0.34901962 + } + } + ] + } + }, + "masterProperties": { + "displayName": "Simple Light" + } + } + ], + "layouts": [ + { + "objectId": "p2", + "pageType": "LAYOUT", + "pageElements": [ + { + "objectId": "p2_i0", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 0.6842, + "translateX": 311708.35000000003, + "translateY": 744575, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + }, + "1": { + "bulletStyle": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + }, + "2": { + "bulletStyle": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + }, + "3": { + "bulletStyle": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + }, + "4": { + "bulletStyle": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + }, + "5": { + "bulletStyle": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + }, + "6": { + "bulletStyle": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + }, + "7": { + "bulletStyle": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + }, + "8": { + "bulletStyle": { + "fontSize": { + "magnitude": 52, + "unit": "PT" + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + }, + "contentAlignment": "BOTTOM" + }, + "placeholder": { + "type": "CENTERED_TITLE", + "parentObjectId": "p1_i0" + } + } + }, + { + "objectId": "p2_i1", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 0.2642, + "translateX": 311700, + "translateY": 2834125, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + }, + "1": { + "bulletStyle": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + }, + "2": { + "bulletStyle": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + }, + "3": { + "bulletStyle": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + }, + "4": { + "bulletStyle": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + }, + "5": { + "bulletStyle": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + }, + "6": { + "bulletStyle": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + }, + "7": { + "bulletStyle": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + }, + "8": { + "bulletStyle": { + "fontSize": { + "magnitude": 28, + "unit": "PT" + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SUBTITLE", + "parentObjectId": "p1_i1" + } + } + }, + { + "objectId": "p2_i2", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 0.1829, + "scaleY": 0.1312, + "translateX": 8472457.8125, + "translateY": 4663216.797499999, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 1, + "autoText": { + "type": "SLIDE_NUMBER", + "content": "#", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SLIDE_NUMBER", + "parentObjectId": "p1_i2" + } + } + } + ], + "layoutProperties": { + "masterObjectId": "simple-light-2", + "name": "TITLE", + "displayName": "Title slide" + }, + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + } + }, + { + "objectId": "p3", + "pageType": "LAYOUT", + "pageElements": [ + { + "objectId": "p3_i0", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 0.2806, + "translateX": 311700, + "translateY": 2150850, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + }, + "1": { + "bulletStyle": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + }, + "2": { + "bulletStyle": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + }, + "3": { + "bulletStyle": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + }, + "4": { + "bulletStyle": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + }, + "5": { + "bulletStyle": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + }, + "6": { + "bulletStyle": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + }, + "7": { + "bulletStyle": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + }, + "8": { + "bulletStyle": { + "fontSize": { + "magnitude": 36, + "unit": "PT" + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + }, + "contentAlignment": "MIDDLE" + }, + "placeholder": { + "type": "TITLE", + "parentObjectId": "p1_i0" + } + } + }, + { + "objectId": "p3_i1", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 0.1829, + "scaleY": 0.1312, + "translateX": 8472457.8125, + "translateY": 4663216.797499999, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 1, + "autoText": { + "type": "SLIDE_NUMBER", + "content": "#", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SLIDE_NUMBER", + "parentObjectId": "p1_i2" + } + } + } + ], + "layoutProperties": { + "masterObjectId": "simple-light-2", + "name": "SECTION_HEADER", + "displayName": "Section header" + }, + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + } + }, + { + "objectId": "p4", + "pageType": "LAYOUT", + "pageElements": [ + { + "objectId": "p4_i0", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 0.1909, + "translateX": 311700, + "translateY": 445025, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": {} + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": {} + }, + "1": { + "bulletStyle": {} + }, + "2": { + "bulletStyle": {} + }, + "3": { + "bulletStyle": {} + }, + "4": { + "bulletStyle": {} + }, + "5": { + "bulletStyle": {} + }, + "6": { + "bulletStyle": {} + }, + "7": { + "bulletStyle": {} + }, + "8": { + "bulletStyle": {} + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "TITLE", + "parentObjectId": "p1_i0" + } + } + }, + { + "objectId": "p4_i1", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 1.1388, + "translateX": 311700, + "translateY": 1152475, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": {} + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": {} + }, + "1": { + "bulletStyle": {} + }, + "2": { + "bulletStyle": {} + }, + "3": { + "bulletStyle": {} + }, + "4": { + "bulletStyle": {} + }, + "5": { + "bulletStyle": {} + }, + "6": { + "bulletStyle": {} + }, + "7": { + "bulletStyle": {} + }, + "8": { + "bulletStyle": {} + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "BODY", + "parentObjectId": "p1_i1" + } + } + }, + { + "objectId": "p4_i2", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 0.1829, + "scaleY": 0.1312, + "translateX": 8472457.8125, + "translateY": 4663216.797499999, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 1, + "autoText": { + "type": "SLIDE_NUMBER", + "content": "#", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SLIDE_NUMBER", + "parentObjectId": "p1_i2" + } + } + } + ], + "layoutProperties": { + "masterObjectId": "simple-light-2", + "name": "TITLE_AND_BODY", + "displayName": "Title and body" + }, + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + } + }, + { + "objectId": "p5", + "pageType": "LAYOUT", + "pageElements": [ + { + "objectId": "p5_i0", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 0.1909, + "translateX": 311700, + "translateY": 445025, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": {} + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": {} + }, + "1": { + "bulletStyle": {} + }, + "2": { + "bulletStyle": {} + }, + "3": { + "bulletStyle": {} + }, + "4": { + "bulletStyle": {} + }, + "5": { + "bulletStyle": {} + }, + "6": { + "bulletStyle": {} + }, + "7": { + "bulletStyle": {} + }, + "8": { + "bulletStyle": {} + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "TITLE", + "parentObjectId": "p1_i0" + } + } + }, + { + "objectId": "p5_i1", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 1.3333, + "scaleY": 1.1388, + "translateX": 311700, + "translateY": 1152475, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 14, + "unit": "PT" + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": { + "fontSize": { + "magnitude": 14, + "unit": "PT" + } + } + }, + "1": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "2": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "3": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "4": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "5": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "6": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "7": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "8": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "BODY", + "parentObjectId": "p1_i1" + } + } + }, + { + "objectId": "p5_i2", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 1.3333, + "scaleY": 1.1388, + "translateX": 4832400, + "translateY": 1152475, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 14, + "unit": "PT" + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": { + "fontSize": { + "magnitude": 14, + "unit": "PT" + } + } + }, + "1": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "2": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "3": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "4": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "5": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "6": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "7": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "8": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "BODY", + "index": 1, + "parentObjectId": "p1_i1" + } + } + }, + { + "objectId": "p5_i3", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 0.1829, + "scaleY": 0.1312, + "translateX": 8472457.8125, + "translateY": 4663216.797499999, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 1, + "autoText": { + "type": "SLIDE_NUMBER", + "content": "#", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SLIDE_NUMBER", + "parentObjectId": "p1_i2" + } + } + } + ], + "layoutProperties": { + "masterObjectId": "simple-light-2", + "name": "TITLE_AND_TWO_COLUMNS", + "displayName": "Title and two columns" + }, + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + } + }, + { + "objectId": "p6", + "pageType": "LAYOUT", + "pageElements": [ + { + "objectId": "p6_i0", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 0.1909, + "translateX": 311700, + "translateY": 445025, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": {} + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": {} + }, + "1": { + "bulletStyle": {} + }, + "2": { + "bulletStyle": {} + }, + "3": { + "bulletStyle": {} + }, + "4": { + "bulletStyle": {} + }, + "5": { + "bulletStyle": {} + }, + "6": { + "bulletStyle": {} + }, + "7": { + "bulletStyle": {} + }, + "8": { + "bulletStyle": {} + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "TITLE", + "parentObjectId": "p1_i0" + } + } + }, + { + "objectId": "p6_i1", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 0.1829, + "scaleY": 0.1312, + "translateX": 8472457.8125, + "translateY": 4663216.797499999, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 1, + "autoText": { + "type": "SLIDE_NUMBER", + "content": "#", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SLIDE_NUMBER", + "parentObjectId": "p1_i2" + } + } + } + ], + "layoutProperties": { + "masterObjectId": "simple-light-2", + "name": "TITLE_ONLY", + "displayName": "Title only" + }, + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + } + }, + { + "objectId": "p7", + "pageType": "LAYOUT", + "pageElements": [ + { + "objectId": "p7_i0", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 0.936, + "scaleY": 0.2519, + "translateX": 311700, + "translateY": 555600, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + }, + "1": { + "bulletStyle": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + }, + "2": { + "bulletStyle": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + }, + "3": { + "bulletStyle": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + }, + "4": { + "bulletStyle": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + }, + "5": { + "bulletStyle": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + }, + "6": { + "bulletStyle": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + }, + "7": { + "bulletStyle": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + }, + "8": { + "bulletStyle": { + "fontSize": { + "magnitude": 24, + "unit": "PT" + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + }, + "contentAlignment": "BOTTOM" + }, + "placeholder": { + "type": "TITLE", + "parentObjectId": "p1_i0" + } + } + }, + { + "objectId": "p7_i1", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 0.936, + "scaleY": 1.0598, + "translateX": 311700, + "translateY": 1389600, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "1": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "2": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "3": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "4": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "5": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "6": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "7": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + }, + "8": { + "bulletStyle": { + "fontSize": { + "magnitude": 12, + "unit": "PT" + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "BODY", + "parentObjectId": "p1_i1" + } + } + }, + { + "objectId": "p7_i2", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 0.1829, + "scaleY": 0.1312, + "translateX": 8472457.8125, + "translateY": 4663216.797499999, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 1, + "autoText": { + "type": "SLIDE_NUMBER", + "content": "#", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SLIDE_NUMBER", + "parentObjectId": "p1_i2" + } + } + } + ], + "layoutProperties": { + "masterObjectId": "simple-light-2", + "name": "ONE_COLUMN_TEXT", + "displayName": "One column text" + }, + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + } + }, + { + "objectId": "p8", + "pageType": "LAYOUT", + "pageElements": [ + { + "objectId": "p8_i0", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.1226, + "scaleY": 1.3636, + "translateX": 490250, + "translateY": 450150, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + }, + "1": { + "bulletStyle": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + }, + "2": { + "bulletStyle": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + }, + "3": { + "bulletStyle": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + }, + "4": { + "bulletStyle": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + }, + "5": { + "bulletStyle": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + }, + "6": { + "bulletStyle": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + }, + "7": { + "bulletStyle": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + }, + "8": { + "bulletStyle": { + "fontSize": { + "magnitude": 48, + "unit": "PT" + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + }, + "contentAlignment": "MIDDLE" + }, + "placeholder": { + "type": "TITLE", + "parentObjectId": "p1_i0" + } + } + }, + { + "objectId": "p8_i1", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 0.1829, + "scaleY": 0.1312, + "translateX": 8472457.8125, + "translateY": 4663216.797499999, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 1, + "autoText": { + "type": "SLIDE_NUMBER", + "content": "#", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SLIDE_NUMBER", + "parentObjectId": "p1_i2" + } + } + } + ], + "layoutProperties": { + "masterObjectId": "simple-light-2", + "name": "MAIN_POINT", + "displayName": "Main point" + }, + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + } + }, + { + "objectId": "p9", + "pageType": "LAYOUT", + "pageElements": [ + { + "objectId": "p9_i0", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 1.524, + "scaleY": 1.7145, + "translateX": 4572000, + "translateY": -125, + "unit": "EMU" + }, + "shape": { + "shapeType": "RECTANGLE", + "shapeProperties": { + "shapeBackgroundFill": { + "solidFill": { + "color": { + "themeColor": "LIGHT2" + }, + "alpha": 1 + } + }, + "outline": { + "outlineFill": { + "solidFill": { + "color": { + "rgbColor": {} + }, + "alpha": 1 + } + }, + "weight": { + "magnitude": 9525, + "unit": "EMU" + }, + "dashStyle": "SOLID", + "propertyState": "NOT_RENDERED" + }, + "shadow": { + "type": "OUTER", + "transform": { + "scaleX": 1, + "scaleY": 1, + "unit": "EMU" + }, + "alignment": "BOTTOM_LEFT", + "blurRadius": { + "unit": "EMU" + }, + "color": { + "rgbColor": {} + }, + "alpha": 1, + "rotateWithShape": false, + "propertyState": "NOT_RENDERED" + }, + "contentAlignment": "MIDDLE" + } + } + }, + { + "objectId": "p9_i1", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 1.3484, + "scaleY": 0.4941, + "translateX": 265500, + "translateY": 1233175, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + }, + "1": { + "bulletStyle": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + }, + "2": { + "bulletStyle": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + }, + "3": { + "bulletStyle": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + }, + "4": { + "bulletStyle": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + }, + "5": { + "bulletStyle": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + }, + "6": { + "bulletStyle": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + }, + "7": { + "bulletStyle": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + }, + "8": { + "bulletStyle": { + "fontSize": { + "magnitude": 42, + "unit": "PT" + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + }, + "contentAlignment": "BOTTOM" + }, + "placeholder": { + "type": "TITLE", + "parentObjectId": "p1_i0" + } + } + }, + { + "objectId": "p9_i2", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 1.3484, + "scaleY": 0.4117, + "translateX": 265500, + "translateY": 2803075, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "CENTER", + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + }, + "1": { + "bulletStyle": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + }, + "2": { + "bulletStyle": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + }, + "3": { + "bulletStyle": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + }, + "4": { + "bulletStyle": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + }, + "5": { + "bulletStyle": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + }, + "6": { + "bulletStyle": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + }, + "7": { + "bulletStyle": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + }, + "8": { + "bulletStyle": { + "fontSize": { + "magnitude": 21, + "unit": "PT" + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SUBTITLE", + "parentObjectId": "p1_i1" + } + } + }, + { + "objectId": "p9_i3", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 1.279, + "scaleY": 1.2317, + "translateX": 4939500, + "translateY": 724075, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": {} + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": {} + }, + "1": { + "bulletStyle": {} + }, + "2": { + "bulletStyle": {} + }, + "3": { + "bulletStyle": {} + }, + "4": { + "bulletStyle": {} + }, + "5": { + "bulletStyle": {} + }, + "6": { + "bulletStyle": {} + }, + "7": { + "bulletStyle": {} + }, + "8": { + "bulletStyle": {} + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + }, + "contentAlignment": "MIDDLE" + }, + "placeholder": { + "type": "BODY", + "parentObjectId": "p1_i1" + } + } + }, + { + "objectId": "p9_i4", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 0.1829, + "scaleY": 0.1312, + "translateX": 8472457.8125, + "translateY": 4663216.797499999, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 1, + "autoText": { + "type": "SLIDE_NUMBER", + "content": "#", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SLIDE_NUMBER", + "parentObjectId": "p1_i2" + } + } + } + ], + "layoutProperties": { + "masterObjectId": "simple-light-2", + "name": "SECTION_TITLE_AND_DESCRIPTION", + "displayName": "Section title and description" + }, + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + } + }, + { + "objectId": "p10", + "pageType": "LAYOUT", + "pageElements": [ + { + "objectId": "p10_i0", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 1.9996, + "scaleY": 0.2017, + "translateX": 311700, + "translateY": 4230575, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "spaceBelow": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": {} + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": {} + }, + "1": { + "bulletStyle": { + "fontSize": { + "magnitude": 18, + "unit": "PT" + } + } + }, + "2": { + "bulletStyle": { + "fontSize": { + "magnitude": 18, + "unit": "PT" + } + } + }, + "3": { + "bulletStyle": { + "fontSize": { + "magnitude": 18, + "unit": "PT" + } + } + }, + "4": { + "bulletStyle": { + "fontSize": { + "magnitude": 18, + "unit": "PT" + } + } + }, + "5": { + "bulletStyle": { + "fontSize": { + "magnitude": 18, + "unit": "PT" + } + } + }, + "6": { + "bulletStyle": { + "fontSize": { + "magnitude": 18, + "unit": "PT" + } + } + }, + "7": { + "bulletStyle": { + "fontSize": { + "magnitude": 18, + "unit": "PT" + } + } + }, + "8": { + "bulletStyle": { + "fontSize": { + "magnitude": 18, + "unit": "PT" + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + }, + "contentAlignment": "MIDDLE" + }, + "placeholder": { + "type": "BODY", + "parentObjectId": "p1_i1" + } + } + }, + { + "objectId": "p10_i1", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 0.1829, + "scaleY": 0.1312, + "translateX": 8472457.8125, + "translateY": 4663216.797499999, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 1, + "autoText": { + "type": "SLIDE_NUMBER", + "content": "#", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SLIDE_NUMBER", + "parentObjectId": "p1_i2" + } + } + } + ], + "layoutProperties": { + "masterObjectId": "simple-light-2", + "name": "CAPTION_ONLY", + "displayName": "Caption" + }, + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + } + }, + { + "objectId": "p11", + "pageType": "LAYOUT", + "pageElements": [ + { + "objectId": "p11_i0", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 0.6545, + "translateX": 311700, + "translateY": 1106125, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": " ", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + }, + "1": { + "bulletStyle": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + }, + "2": { + "bulletStyle": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + }, + "3": { + "bulletStyle": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + }, + "4": { + "bulletStyle": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + }, + "5": { + "bulletStyle": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + }, + "6": { + "bulletStyle": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + }, + "7": { + "bulletStyle": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + }, + "8": { + "bulletStyle": { + "fontSize": { + "magnitude": 120, + "unit": "PT" + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + }, + "contentAlignment": "BOTTOM" + }, + "placeholder": { + "type": "TITLE", + "parentObjectId": "p1_i0" + } + } + }, + { + "objectId": "p11_i1", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.8402, + "scaleY": 0.4336, + "translateX": 311700, + "translateY": 3152225, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": {} + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "alignment": "CENTER", + "direction": "LEFT_TO_RIGHT" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": {} + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": {} + }, + "1": { + "bulletStyle": {} + }, + "2": { + "bulletStyle": {} + }, + "3": { + "bulletStyle": {} + }, + "4": { + "bulletStyle": {} + }, + "5": { + "bulletStyle": {} + }, + "6": { + "bulletStyle": {} + }, + "7": { + "bulletStyle": {} + }, + "8": { + "bulletStyle": {} + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "BODY", + "parentObjectId": "p1_i1" + } + } + }, + { + "objectId": "p11_i2", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 0.1829, + "scaleY": 0.1312, + "translateX": 8472457.8125, + "translateY": 4663216.797499999, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 1, + "autoText": { + "type": "SLIDE_NUMBER", + "content": "#", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SLIDE_NUMBER", + "parentObjectId": "p1_i2" + } + } + } + ], + "layoutProperties": { + "masterObjectId": "simple-light-2", + "name": "BIG_NUMBER", + "displayName": "Big number" + }, + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + } + }, + { + "objectId": "p12", + "pageType": "LAYOUT", + "pageElements": [ + { + "objectId": "p12_i0", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 0.1829, + "scaleY": 0.1312, + "translateX": 8472457.8125, + "translateY": 4663216.797499999, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 2, + "paragraphMarker": { + "style": { + "direction": "LEFT_TO_RIGHT" + } + } + }, + { + "endIndex": 1, + "autoText": { + "type": "SLIDE_NUMBER", + "content": "#", + "style": {} + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": {} + } + } + ] + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "INHERIT" + }, + "outline": { + "propertyState": "INHERIT" + }, + "shadow": { + "propertyState": "INHERIT" + } + }, + "placeholder": { + "type": "SLIDE_NUMBER", + "parentObjectId": "p1_i2" + } + } + } + ], + "layoutProperties": { + "masterObjectId": "simple-light-2", + "name": "BLANK", + "displayName": "Blank" + }, + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "INHERIT" + } + } + } + ], + "locale": "en", + "revisionId": "kaHql7SEgvqFcw", + "notesMaster": { + "objectId": "n", + "pageType": "NOTES_MASTER", + "pageElements": [ + { + "objectId": "n:slide", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 2.032025, + "scaleY": 1.143, + "translateX": 381300, + "translateY": 685800, + "unit": "EMU" + }, + "shape": { + "shapeProperties": { + "outline": { + "outlineFill": { + "solidFill": { + "color": { + "rgbColor": {} + }, + "alpha": 1 + } + }, + "weight": { + "magnitude": 9525, + "unit": "EMU" + }, + "dashStyle": "SOLID" + }, + "contentAlignment": "MIDDLE" + }, + "placeholder": { + "type": "SLIDE_IMAGE" + } + } + }, + { + "objectId": "n:text", + "size": { + "width": { + "magnitude": 3000000, + "unit": "EMU" + }, + "height": { + "magnitude": 3000000, + "unit": "EMU" + } + }, + "transform": { + "scaleX": 1.8288, + "scaleY": 1.3716, + "translateX": 685800, + "translateY": 4343400, + "unit": "EMU" + }, + "shape": { + "shapeType": "TEXT_BOX", + "text": { + "textElements": [ + { + "endIndex": 1, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "COLLAPSE_LISTS" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "endIndex": 1, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "COLLAPSE_LISTS" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 1, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 1, + "endIndex": 2, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "COLLAPSE_LISTS" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 2, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 2, + "endIndex": 3, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "COLLAPSE_LISTS" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 3, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 3, + "endIndex": 4, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "COLLAPSE_LISTS" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 4, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 4, + "endIndex": 5, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "COLLAPSE_LISTS" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 5, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 5, + "endIndex": 6, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "COLLAPSE_LISTS" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 6, + "glyph": "●", + "bulletStyle": {} + } + } + }, + { + "startIndex": 6, + "endIndex": 7, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "COLLAPSE_LISTS" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 7, + "glyph": "○", + "bulletStyle": {} + } + } + }, + { + "startIndex": 7, + "endIndex": 8, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "paragraphMarker": { + "style": { + "lineSpacing": 100, + "alignment": "START", + "indentStart": { + "unit": "PT" + }, + "indentEnd": { + "unit": "PT" + }, + "spaceAbove": { + "unit": "PT" + }, + "spaceBelow": { + "unit": "PT" + }, + "indentFirstLine": { + "unit": "PT" + }, + "direction": "LEFT_TO_RIGHT", + "spacingMode": "COLLAPSE_LISTS" + }, + "bullet": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": 8, + "glyph": "■", + "bulletStyle": {} + } + } + }, + { + "startIndex": 8, + "endIndex": 9, + "textRun": { + "content": "\n", + "style": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + } + ], + "lists": { + "bodyPlaceholderListEntity": { + "listId": "bodyPlaceholderListEntity", + "nestingLevel": { + "0": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "1": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "2": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "3": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "4": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "5": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "6": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "7": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + }, + "8": { + "bulletStyle": { + "backgroundColor": {}, + "foregroundColor": { + "opaqueColor": { + "rgbColor": {} + } + }, + "bold": false, + "italic": false, + "fontFamily": "Arial", + "fontSize": { + "magnitude": 11, + "unit": "PT" + }, + "baselineOffset": "NONE", + "smallCaps": false, + "strikethrough": false, + "underline": false, + "weightedFontFamily": { + "fontFamily": "Arial", + "weight": 400 + } + } + } + } + } + } + }, + "shapeProperties": { + "shapeBackgroundFill": { + "propertyState": "NOT_RENDERED", + "solidFill": { + "color": { + "rgbColor": { + "red": 1, + "green": 1, + "blue": 1 + } + }, + "alpha": 1 + } + }, + "outline": { + "outlineFill": { + "solidFill": { + "color": { + "rgbColor": {} + }, + "alpha": 1 + } + }, + "weight": { + "magnitude": 9525, + "unit": "EMU" + }, + "dashStyle": "SOLID", + "propertyState": "NOT_RENDERED" + }, + "shadow": { + "type": "OUTER", + "transform": { + "scaleX": 1, + "scaleY": 1, + "unit": "EMU" + }, + "alignment": "BOTTOM_LEFT", + "blurRadius": { + "unit": "EMU" + }, + "color": { + "rgbColor": {} + }, + "alpha": 1, + "rotateWithShape": false, + "propertyState": "NOT_RENDERED" + }, + "contentAlignment": "TOP" + }, + "placeholder": { + "type": "BODY", + "index": 1 + } + } + } + ], + "pageProperties": { + "pageBackgroundFill": { + "propertyState": "NOT_RENDERED", + "solidFill": { + "color": { + "rgbColor": { + "red": 1, + "green": 1, + "blue": 1 + } + }, + "alpha": 1 + } + }, + "colorScheme": { + "colors": [ + { + "type": "DARK1", + "color": {} + }, + { + "type": "LIGHT1", + "color": { + "red": 1, + "green": 1, + "blue": 1 + } + }, + { + "type": "DARK2", + "color": { + "red": 0.08235294, + "green": 0.5058824, + "blue": 0.34509805 + } + }, + { + "type": "LIGHT2", + "color": { + "red": 0.9529412, + "green": 0.9529412, + "blue": 0.9529412 + } + }, + { + "type": "ACCENT1", + "color": { + "red": 0.019607844, + "green": 0.5529412, + "blue": 0.78039217 + } + }, + { + "type": "ACCENT2", + "color": { + "red": 0.3137255, + "green": 0.7058824, + "blue": 0.19607843 + } + }, + { + "type": "ACCENT3", + "color": { + "red": 0.92941177, + "green": 0.3372549, + "blue": 0.105882354 + } + }, + { + "type": "ACCENT4", + "color": { + "red": 0.92941177, + "green": 0.9372549 + } + }, + { + "type": "ACCENT5", + "color": { + "red": 0.14117648, + "green": 0.79607844, + "blue": 0.8980392 + } + }, + { + "type": "ACCENT6", + "color": { + "red": 0.39215687, + "green": 0.8980392, + "blue": 0.44705883 + } + }, + { + "type": "HYPERLINK", + "color": { + "red": 0.13333334, + "blue": 0.8 + } + }, + { + "type": "FOLLOWED_HYPERLINK", + "color": { + "red": 0.33333334, + "green": 0.101960786, + "blue": 0.54509807 + } + }, + { + "type": "TEXT1", + "color": {} + }, + { + "type": "BACKGROUND1", + "color": { + "red": 1, + "green": 1, + "blue": 1 + } + }, + { + "type": "TEXT2", + "color": { + "red": 0.9529412, + "green": 0.9529412, + "blue": 0.9529412 + } + }, + { + "type": "BACKGROUND2", + "color": { + "red": 0.08235294, + "green": 0.5058824, + "blue": 0.34509805 + } + } + ] + } + } + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 6927418364d58c2aaba1b25f1d11537dd510535c Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 22 Aug 2019 08:29:43 -0400 Subject: fixed autoheight for text --- src/client/views/nodes/FormattedTextBox.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 3f3360eff..849f942b6 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -735,12 +735,10 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe @action tryUpdateHeight() { - if (this.props.Document.autoHeight && this._ref.current!.scrollHeight !== 0) { - let xf = this._ref.current!.getBoundingClientRect(); - let scrBounds = this.props.ScreenToLocalTransform().transformBounds(0, 0, xf.width, this._ref.current!.textContent === "" ? 35 : this._ref.current!.scrollHeight); + let sh = this._ref.current ? this._ref.current.scrollHeight : 0; + if (this.props.Document.autoHeight && sh !== 0) { let nh = this.props.Document.isTemplate ? 0 : NumCast(this.dataDoc.nativeHeight, 0); let dh = NumCast(this.props.Document.height, 0); - let sh = scrBounds.height; const ChromeHeight = MainOverlayTextBox.Instance.ChromeHeight; this.props.Document.height = Math.max(10, (nh ? dh / nh * sh : sh) + (ChromeHeight ? ChromeHeight() : 0)); this.dataDoc.nativeHeight = nh ? sh : undefined; -- cgit v1.2.3-70-g09d2 From 8cffe031fe364e19897cfb638cffa9e4056c4343 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 22 Aug 2019 11:07:11 -0400 Subject: fixed textheight with titles. fixed marquee with floating docs. other tweaks. --- src/client/util/DocumentManager.ts | 4 +++- src/client/views/MainOverlayTextBox.tsx | 1 + .../views/collections/CollectionStackingView.tsx | 13 ++++++++----- .../views/collections/CollectionViewChromes.tsx | 14 +++++++++----- .../collections/collectionFreeForm/MarqueeView.tsx | 20 ++++++++++++++++++-- src/client/views/nodes/DocumentView.tsx | 10 ++++++++-- src/client/views/nodes/FormattedTextBox.tsx | 6 ++++-- 7 files changed, 51 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 7f526b247..124faf266 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -9,6 +9,7 @@ import { CollectionView } from '../views/collections/CollectionView'; import { DocumentView } from '../views/nodes/DocumentView'; import { LinkManager } from './LinkManager'; import { undoBatch, UndoManager } from './UndoManager'; +import { Scripting } from './Scripting'; export class DocumentManager { @@ -202,4 +203,5 @@ export class DocumentManager { return 1; } } -} \ No newline at end of file +} +Scripting.addGlobal(function focus(doc: any) { DocumentManager.Instance.getDocumentViews(Doc.GetProto(doc)).map(view => view.props.focus(doc, true)) }) \ No newline at end of file diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx index 9fe435bc5..0839e1114 100644 --- a/src/client/views/MainOverlayTextBox.tsx +++ b/src/client/views/MainOverlayTextBox.tsx @@ -144,6 +144,7 @@ export class MainOverlayTextBox extends React.Component Document={FormattedTextBox.InputBoxOverlay.props.Document} DataDoc={FormattedTextBox.InputBoxOverlay.props.DataDoc} onClick={undefined} + ChromeHeight={this.ChromeHeight} isSelected={returnTrue} select={emptyFunction} renderDepth={0} selectOnLoad={true} ContainingCollectionView={undefined} whenActiveChanged={emptyFunction} active={returnTrue} ContentScaling={returnOne} ScreenToLocalTransform={this._textXf} PanelWidth={returnZero} PanelHeight={returnZero} focus={emptyFunction} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index be6ee1756..4ab656744 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -287,15 +287,18 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { masonryChildren(docs: Doc[]) { this._docXfs.length = 0; return docs.map((d, i) => { + const pair = Doc.GetLayoutDataDocPair(this.props.Document, this.props.DataDoc, this.props.fieldKey, d); + if (!pair.layout || pair.data instanceof Promise) { + return (null); + } let dref = React.createRef(); - let layoutDoc = Doc.expandTemplateLayout(d, this.props.DataDoc); let width = () => (d.nativeWidth && !d.ignoreAspect && !this.props.Document.fillColumn ? Math.min(d[WidthSym](), this.columnWidth) : this.columnWidth);/// (uniqueHeadings.length + 1); - let height = () => this.getDocHeight(layoutDoc); - let dxf = () => this.getDocTransform(layoutDoc!, dref.current!); + let height = () => this.getDocHeight(pair.layout); + let dxf = () => this.getDocTransform(pair.layout!, dref.current!); let rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap); this._docXfs.push({ dxf: dxf, width: width, height: height }); - return !layoutDoc ? (null) :
- {this.getDisplayDoc(layoutDoc, d, dxf, width)} + return !pair.layout ? (null) :
+ {this.getDisplayDoc(pair.layout, pair.data, dxf, width)}
; }); } diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 25b152d4e..74e57611d 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -297,11 +297,15 @@ export class CollectionViewBaseChrome extends React.Component { if (node) { - this._picker = datepicker("#" + node.id, { - disabler: (date: Date) => date > new Date(), - onSelect: (instance: any, date: Date) => runInAction(() => this._dateValue = date), - dateSelected: new Date() - }); + try { + this._picker = datepicker("#" + node.id, { + disabler: (date: Date) => date > new Date(), + onSelect: (instance: any, date: Date) => runInAction(() => this._dateValue = date), + dateSelected: new Date() + }); + } catch (e) { + console.log("date picker exception:" + e); + } } } render() { diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index aad26efa0..221237365 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -373,7 +373,7 @@ export class MarqueeView extends React.Component marqueeSelect(selectBackgrounds: boolean = true) { let selRect = this.Bounds; let selection: Doc[] = []; - this.props.activeDocuments().filter(doc => !doc.isBackground).map(doc => { + this.props.activeDocuments().filter(doc => !doc.isBackground && doc.z === undefined).map(doc => { var x = NumCast(doc.x); var y = NumCast(doc.y); var w = NumCast(doc.width); @@ -383,7 +383,7 @@ export class MarqueeView extends React.Component } }); if (!selection.length && selectBackgrounds) { - this.props.activeDocuments().map(doc => { + this.props.activeDocuments().filter(doc => doc.z === undefined).map(doc => { var x = NumCast(doc.x); var y = NumCast(doc.y); var w = NumCast(doc.width); @@ -393,6 +393,22 @@ export class MarqueeView extends React.Component } }); } + if (!selection.length) { + let left = this._downX < this._lastX ? this._downX : this._lastX; + let top = this._downY < this._lastY ? this._downY : this._lastY; + let topLeft = this.props.getContainerTransform().transformPoint(left, top); + let size = this.props.getContainerTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); + let otherBounds = { left: topLeft[0], top: topLeft[1], width: Math.abs(size[0]), height: Math.abs(size[1]) }; + this.props.activeDocuments().filter(doc => doc.z !== undefined).map(doc => { + var x = NumCast(doc.x); + var y = NumCast(doc.y); + var w = NumCast(doc.width); + var h = NumCast(doc.height); + if (this.intersectRect({ left: x, top: y, width: w, height: h }, otherBounds)) { + selection.push(doc); + } + }); + } return selection; } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 8dadf2bef..0c577af86 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -715,7 +715,13 @@ export class DocumentView extends DocComponent(Docu chromeHeight = () => { let showOverlays = this.props.showOverlays ? this.props.showOverlays(this.layoutDoc) : undefined; let showTitle = showOverlays && "title" in showOverlays ? showOverlays.title : StrCast(this.layoutDoc.showTitle); - return showTitle ? 25 : 0; + let templates = Cast(this.layoutDoc.templates, listSpec("string")); + if (!showOverlays && templates instanceof List) { + templates.map(str => { + if (!showTitle && str.indexOf("{props.Document.title}") !== -1) showTitle = "title"; + }); + } + return (showTitle ? 25 : 0) + 1;// bcz: why 8?? } get layoutDoc() { @@ -769,7 +775,7 @@ export class DocumentView extends DocComponent(Docu {!showTitle && !showCaption ? this.contents :
-
+
{this.contents}
{!showTitle ? (null) : diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 849f942b6..94d9f2f66 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -374,6 +374,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe this.unhighlightSearchTerms(); } }, { fireImmediately: true }); + this.tryUpdateHeight(); } pushToGoogleDoc = async () => { @@ -735,11 +736,12 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe @action tryUpdateHeight() { + const ChromeHeight = this.props.ChromeHeight; let sh = this._ref.current ? this._ref.current.scrollHeight : 0; + console.log(this.props.Document.title + " " + sh + " " + (ChromeHeight && ChromeHeight())); if (this.props.Document.autoHeight && sh !== 0) { let nh = this.props.Document.isTemplate ? 0 : NumCast(this.dataDoc.nativeHeight, 0); let dh = NumCast(this.props.Document.height, 0); - const ChromeHeight = MainOverlayTextBox.Instance.ChromeHeight; this.props.Document.height = Math.max(10, (nh ? dh / nh * sh : sh) + (ChromeHeight ? ChromeHeight() : 0)); this.dataDoc.nativeHeight = nh ? sh : undefined; } @@ -775,7 +777,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
Date: Thu, 22 Aug 2019 11:18:19 -0400 Subject: from last --- src/client/views/nodes/FormattedTextBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 94d9f2f66..1cc3e821f 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -374,7 +374,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe this.unhighlightSearchTerms(); } }, { fireImmediately: true }); - this.tryUpdateHeight(); + setTimeout(() => this.tryUpdateHeight(), 0); } pushToGoogleDoc = async () => { -- cgit v1.2.3-70-g09d2 From 0ee435f6bd686c667a067fa750b4589cedfb0070 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 22 Aug 2019 11:18:41 -0400 Subject: again --- src/client/views/nodes/FormattedTextBox.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 1cc3e821f..44a481953 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -738,7 +738,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe tryUpdateHeight() { const ChromeHeight = this.props.ChromeHeight; let sh = this._ref.current ? this._ref.current.scrollHeight : 0; - console.log(this.props.Document.title + " " + sh + " " + (ChromeHeight && ChromeHeight())); if (this.props.Document.autoHeight && sh !== 0) { let nh = this.props.Document.isTemplate ? 0 : NumCast(this.dataDoc.nativeHeight, 0); let dh = NumCast(this.props.Document.height, 0); -- cgit v1.2.3-70-g09d2 From a32a1b4f32ee309c306ab9c9fdc90573cddeed11 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Thu, 22 Aug 2019 11:45:23 -0400 Subject: video box fix and slides parsing beginning --- .../apis/google_docs/GoogleApiClientUtils.ts | 32 ++++++++++++++++++++++ src/client/views/nodes/VideoBox.tsx | 6 ++-- 2 files changed, 35 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts index 3e90adc4d..798886def 100644 --- a/src/client/apis/google_docs/GoogleApiClientUtils.ts +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -236,4 +236,36 @@ export namespace GoogleApiClientUtils { } + export namespace Slides { + + export namespace Utils { + + export const extractTextBoxes = (slides: slides_v1.Schema$Page[]) => { + slides.map(slide => { + let elements = slide.pageElements; + if (elements) { + let textboxes: slides_v1.Schema$TextContent[] = []; + for (let element of elements) { + if (element && element.shape && element.shape.shapeType === "TEXT_BOX" && element.shape.text) { + textboxes.push(element.shape.text); + } + } + textboxes.map(text => { + if (text.textElements) { + text.textElements.map(element => { + + }); + } + if (text.lists) { + + } + }); + } + }); + }; + + } + + } + } \ No newline at end of file diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 704030d85..3f4ee8960 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -34,7 +34,7 @@ library.add(faVideo); export class VideoBox extends DocComponent(VideoDocument) { private _reactionDisposer?: IReactionDisposer; private _youtubeReactionDisposer?: IReactionDisposer; - private _youtubePlayer: any = undefined; + private _youtubePlayer: YT.Player | undefined = undefined; private _videoRef: HTMLVideoElement | null = null; private _youtubeIframeId: number = -1; private _youtubeContentCreated = false; @@ -78,7 +78,7 @@ export class VideoBox extends DocComponent(VideoD @action public Pause = (update: boolean = true) => { this.Playing = false; update && this.player && this.player.pause(); - update && this._youtubePlayer && this._youtubePlayer.pauseVideo(); + update && this._youtubePlayer && this._youtubePlayer.pauseVideo && this._youtubePlayer.pauseVideo(); this._youtubePlayer && this._playTimer && clearInterval(this._playTimer); this._playTimer = undefined; this.updateTimecode(); @@ -244,7 +244,7 @@ export class VideoBox extends DocComponent(VideoD let onYoutubePlayerStateChange = (event: any) => runInAction(() => { if (started && event.data === YT.PlayerState.PLAYING) { started = false; - this._youtubePlayer.unMute(); + this._youtubePlayer && this._youtubePlayer.unMute(); this.Pause(); return; } -- cgit v1.2.3-70-g09d2 From 65aec7b22e63de15e0d911971fa4e5a32d09d9b5 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Thu, 22 Aug 2019 12:00:47 -0400 Subject: cleanup --- src/client/util/DictationManager.ts | 30 ++++++++++++++++++----------- src/client/views/GlobalKeyHandler.ts | 2 +- src/client/views/MainView.tsx | 1 - src/client/views/nodes/FormattedTextBox.tsx | 2 +- src/new_fields/RichTextField.ts | 6 ++++++ 5 files changed, 27 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts index 781e5e465..fb3c15cea 100644 --- a/src/client/util/DictationManager.ts +++ b/src/client/util/DictationManager.ts @@ -64,6 +64,7 @@ export namespace DictationManager { export type ListeningUIStatus = { interim: boolean } | false; export interface ListeningOptions { + useOverlay: boolean; language: string; continuous: ContinuityArgs; delimiters: DelimiterArgs; @@ -74,27 +75,34 @@ export namespace DictationManager { export const listen = async (options?: Partial) => { let results: string | undefined; - // let main = MainView.Instance; + let main = MainView.Instance; - // main.dictationOverlayVisible = true; - // main.isListening = { interim: false }; + let overlay = options !== undefined && options.useOverlay; + if (overlay) { + main.dictationOverlayVisible = true; + main.isListening = { interim: false }; + } try { results = await listenImpl(options); if (results) { Utils.CopyText(results); - // main.isListening = false; - // let execute = options && options.tryExecute; - // main.dictatedPhrase = execute ? results.toLowerCase() : results; - // main.dictationSuccess = execute ? await DictationManager.Commands.execute(results) : true; + if (overlay) { + main.isListening = false; + let execute = options && options.tryExecute; + main.dictatedPhrase = execute ? results.toLowerCase() : results; + main.dictationSuccess = execute ? await DictationManager.Commands.execute(results) : true; + } options && options.tryExecute && await DictationManager.Commands.execute(results); } } catch (e) { - // main.isListening = false; - // main.dictatedPhrase = results = `dictation error: ${"error" in e ? e.error : "unknown error"}`; - // main.dictationSuccess = false; + if (overlay) { + main.isListening = false; + main.dictatedPhrase = results = `dictation error: ${"error" in e ? e.error : "unknown error"}`; + main.dictationSuccess = false; + } } finally { - // main.initiateDictationFade(); + overlay && main.initiateDictationFade(); } return results; diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 8a7295c65..d0464bd5f 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -105,7 +105,7 @@ export default class KeyManager { switch (keyname) { case " ": - DictationManager.Controls.listen({ tryExecute: true }); + DictationManager.Controls.listen({ useOverlay: true, tryExecute: true }); stopPropagation = true; preventDefault = true; } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 0286a201b..f28844009 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -40,7 +40,6 @@ import { PreviewCursor } from './PreviewCursor'; import { FilterBox } from './search/FilterBox'; import PresModeMenu from './presentationview/PresentationModeMenu'; import { PresBox } from './nodes/PresBox'; -import { GoogleApiClientUtils } from '../apis/google_docs/GoogleApiClientUtils'; @observer export class MainView extends React.Component { diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index d9043c739..5492a457d 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -1,6 +1,6 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEdit, faSmile, faTextHeight, faUpload } from '@fortawesome/free-solid-svg-icons'; -import { action, computed, IReactionDisposer, Lambda, observable, reaction, runInAction, autorun } from "mobx"; +import { action, computed, IReactionDisposer, Lambda, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import { baseKeymap } from "prosemirror-commands"; import { history } from "prosemirror-history"; diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts index cae5623e6..1b52e6f82 100644 --- a/src/new_fields/RichTextField.ts +++ b/src/new_fields/RichTextField.ts @@ -28,6 +28,12 @@ export class RichTextField extends ObjectField { return `new RichTextField("${this.Data}")`; } + public static Initialize = (initial: string) => { + !initial.length && (initial = " "); + let pos = initial.length + 1; + return `{"doc":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"${initial}"}]}]},"selection":{"type":"text","anchor":${pos},"head":${pos}}}`; + } + [ToPlainText]() { // Because we're working with plain text, just concatenate all paragraphs let content = JSON.parse(this.Data).doc.content; -- cgit v1.2.3-70-g09d2 From 135da417387b5fef28df8f07266d404be8211320 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Thu, 22 Aug 2019 12:04:40 -0400 Subject: done? --- src/client/views/nodes/WebBox.scss | 51 -------------------------------------- 1 file changed, 51 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index b28f950c2..43220df71 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -62,7 +62,6 @@ position: absolute; width: 40px; transform-origin: top left; - // margin-top: 10px; } .switchToText { @@ -72,56 +71,6 @@ .switchToText:hover { color: $dark-color; } - - .collectionViewBaseChrome-viewSpecs { - margin-left: 10px; - display: grid; - - - - .collectionViewBaseChrome-viewSpecsMenu { - overflow: hidden; - transition: height .5s, display .5s; - position: absolute; - top: 60px; - z-index: 100; - display: flex; - flex-direction: column; - background: rgb(238, 238, 238); - box-shadow: grey 2px 2px 4px; - - .qs-datepicker { - left: unset; - right: 0; - } - - .collectionViewBaseChrome-viewSpecsMenu-row { - display: grid; - grid-template-columns: 150px 200px 150px; - margin-top: 10px; - margin-right: 10px; - - .collectionViewBaseChrome-viewSpecsMenu-rowLeft, - .collectionViewBaseChrome-viewSpecsMenu-rowMiddle, - .collectionViewBaseChrome-viewSpecsMenu-rowRight { - font-size: 75%; - letter-spacing: 2px; - color: grey; - margin-left: 10px; - padding: 5px; - border: none; - outline-color: black; - } - } - - .collectionViewBaseChrome-viewSpecsMenu-lastRow { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-gap: 10px; - margin: 10px; - } - } - } } button:hover { -- cgit v1.2.3-70-g09d2 From f0f0cc36654183921076db5a341fe7cac2bfdd3c Mon Sep 17 00:00:00 2001 From: monikahedman Date: Thu, 22 Aug 2019 12:08:12 -0400 Subject: cleaned up --- src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 1 - src/client/views/nodes/FormattedTextBox.tsx | 9 +-------- 2 files changed, 1 insertion(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index e70d526c5..27eafd769 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -203,7 +203,6 @@ export class MarqueeView extends React.Component onClick = (e: React.MouseEvent): void => { if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) { - //this is probably the wrong transform PreviewCursor.Show(e.clientX, e.clientY, this.onKeyPress, this.props.addLiveTextDocument, this.props.getTransform, this.props.addDocument); // let the DocumentView stopPropagation of this event when it selects this document } else { // why do we get a click event when the cursor have moved a big distance? diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 0c0ab4d87..1db66d4a0 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -145,7 +145,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe paste = (e: ClipboardEvent) => { - //this is throwing a ton of erros so i had to comment it out + //this is throwing a ton of errors so commented it out if (e.clipboardData && this._editorView) { // let pdfPasteText = `${Utils.GenerateDeterministicGuid("pdf paste")}`; // for (let i = 0; i < e.clipboardData.items.length; i++) { @@ -173,13 +173,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe } } - public setText = (text: string) => { - const tx = this._editorView!.state.tr.insertText(text); - const state = this._editorView!.state; - this._editorView!.dispatch(tx); - return new RichTextField(JSON.stringify(state.toJSON())); - } - dispatchTransaction = (tx: Transaction) => { if (this._editorView) { const state = this._editorView.state.apply(tx); -- cgit v1.2.3-70-g09d2 From 224d58da7c8bf8a7eb27cb616100473afcad4f7b Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 22 Aug 2019 12:22:54 -0400 Subject: cleaned up more context menu stuff. fixed buttons to follow links by default. --- src/client/util/SelectionManager.ts | 1 - .../views/collections/CollectionTreeView.tsx | 5 +++ .../collectionFreeForm/CollectionFreeFormView.tsx | 47 +++++++++++----------- src/client/views/nodes/DocumentView.tsx | 24 +++++++---- 4 files changed, 46 insertions(+), 31 deletions(-) (limited to 'src') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index ee623d082..9efef888d 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -4,7 +4,6 @@ import { DocumentView } from "../views/nodes/DocumentView"; import { FormattedTextBox } from "../views/nodes/FormattedTextBox"; import { NumCast, StrCast } from "../../new_fields/Types"; import { InkingControl } from "../views/InkingControl"; -import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils"; export namespace SelectionManager { diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index b61894b29..7e1aacd5d 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -28,6 +28,7 @@ import "./CollectionTreeView.scss"; import React = require("react"); import { ComputedField, ScriptField } from '../../../new_fields/ScriptField'; import { KeyValueBox } from '../nodes/KeyValueBox'; +import { ContextMenuProps } from '../ContextMenuItem'; export interface TreeViewProps { @@ -541,6 +542,10 @@ export class CollectionTreeView extends CollectionSubView(Document) { e.stopPropagation(); e.preventDefault(); ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15); + } else { + let layoutItems: ContextMenuProps[] = []; + layoutItems.push({ description: this.props.Document.preventTreeViewOpen ? "Persist Treeview State" : "Abandon Treeview State", event: () => this.props.Document.preventTreeViewOpen = !this.props.Document.preventTreeViewOpen, icon: "paint-brush" }); + ContextMenu.Instance.addItem({ description: "Treeview Options ...", subitems: layoutItems, icon: "eye" }); } } outerXf = () => Utils.GetScreenTransform(this._mainEle!); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index cbc123c61..224e8047d 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -345,9 +345,14 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { }, -1); if (cluster !== -1) { let eles = this.childDocs.filter(cd => NumCast(cd.cluster) === cluster); + + // hacky way to get a list of DocumentViews in the current view given a list of Documents in the current view + let prevSelected = SelectionManager.SelectedDocuments(); this.selectDocuments(eles); let clusterDocs = SelectionManager.SelectedDocuments(); SelectionManager.DeselectAll(); + prevSelected.map(dv => SelectionManager.SelectDoc(dv, true)); + let de = new DragManager.DocumentDragData(eles, eles.map(d => undefined)); de.moveDocument = this.props.moveDocument; const [left, top] = clusterDocs[0].props.ScreenToLocalTransform().scale(clusterDocs[0].props.ContentScaling()).inverse().transformPoint(0, 0); @@ -818,30 +823,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { onContextMenu = (e: React.MouseEvent) => { let layoutItems: ContextMenuProps[] = []; - layoutItems.push({ description: `${this.fitToBox ? "Unset" : "Set"} Fit To Container`, event: this.fitToContainer, icon: !this.fitToBox ? "expand-arrows-alt" : "compress-arrows-alt" }); - layoutItems.push({ description: "reset view", event: () => { this.props.Document.panX = this.props.Document.panY = 0; this.props.Document.scale = 1; }, icon: "compress-arrows-alt" }); - layoutItems.push({ - description: `${this.props.Document.useClusters ? "Uncluster" : "Use Clusters"}`, - event: async () => { - Docs.Prototypes.get(DocumentType.TEXT).defaultBackgroundColor = "#f1efeb"; // backward compatibility with databases that didn't have a default background color on prototypes - Docs.Prototypes.get(DocumentType.COL).defaultBackgroundColor = "white"; - this.props.Document.useClusters = !this.props.Document.useClusters; - }, - icon: !this.props.Document.useClusters ? "braille" : "braille" - }); layoutItems.push({ - description: `${this.props.Document.clusterOverridesDefaultBackground ? "Use Default Backgrounds" : "Clusters Override Defaults"}`, - event: async () => this.props.Document.clusterOverridesDefaultBackground = !this.props.Document.clusterOverridesDefaultBackground, - icon: !this.props.Document.useClusters ? "chalkboard" : "chalkboard" - }); - layoutItems.push({ description: "Arrange contents in grid", event: this.arrangeContents, icon: "table" }); - ContextMenu.Instance.addItem({ description: "Layout...", subitems: layoutItems, icon: "compass" }); - - let existingAnalyze = ContextMenu.Instance.findByDescription("Analyzers..."); - let analyzers: ContextMenuProps[] = existingAnalyze && "subitems" in existingAnalyze ? existingAnalyze.subitems : []; - analyzers.push({ description: "Analyze Strokes", event: this.analyzeStrokes, icon: "paint-brush" }); - !existingAnalyze && ContextMenu.Instance.addItem({ description: "Analyzers...", subitems: analyzers, icon: "hand-point-right" }); - ContextMenu.Instance.addItem({ description: "Import document", icon: "upload", event: () => { const input = document.createElement("input"); input.type = "file"; @@ -871,6 +853,25 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { input.click(); } }); + layoutItems.push({ description: `${this.fitToBox ? "Unset" : "Set"} Fit To Container`, event: this.fitToContainer, icon: !this.fitToBox ? "expand-arrows-alt" : "compress-arrows-alt" }); + layoutItems.push({ description: "reset view", event: () => { this.props.Document.panX = this.props.Document.panY = 0; this.props.Document.scale = 1; }, icon: "compress-arrows-alt" }); + layoutItems.push({ + description: `${this.props.Document.useClusters ? "Uncluster" : "Use Clusters"}`, + event: async () => { + Docs.Prototypes.get(DocumentType.TEXT).defaultBackgroundColor = "#f1efeb"; // backward compatibility with databases that didn't have a default background color on prototypes + Docs.Prototypes.get(DocumentType.COL).defaultBackgroundColor = "white"; + this.props.Document.useClusters = !this.props.Document.useClusters; + }, + icon: !this.props.Document.useClusters ? "braille" : "braille" + }); + layoutItems.push({ + description: `${this.props.Document.clusterOverridesDefaultBackground ? "Use Default Backgrounds" : "Clusters Override Defaults"}`, + event: async () => this.props.Document.clusterOverridesDefaultBackground = !this.props.Document.clusterOverridesDefaultBackground, + icon: !this.props.Document.useClusters ? "chalkboard" : "chalkboard" + }); + layoutItems.push({ description: "Arrange contents in grid", event: this.arrangeContents, icon: "table" }); + layoutItems.push({ description: "Analyze Strokes", event: this.analyzeStrokes, icon: "paint-brush" }); + ContextMenu.Instance.addItem({ description: "Freeform Options ...", subitems: layoutItems, icon: "eye" }); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 0c577af86..6c944c6b2 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -40,6 +40,7 @@ import { DocumentContentsView } from "./DocumentContentsView"; import "./DocumentView.scss"; import { FormattedTextBox } from './FormattedTextBox'; import React = require("react"); +import { DocumentType } from '../../documents/DocumentTypes'; const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? library.add(fa.faTrash); @@ -294,8 +295,8 @@ export class DocumentView extends DocComponent(Docu onClick = async (e: React.MouseEvent) => { if (e.nativeEvent.cancelBubble) return; // needed because EditableView may stopPropagation which won't apparently stop this event from firing. - e.stopPropagation(); if (this.onClickHandler && this.onClickHandler.script) { + e.stopPropagation(); this.onClickHandler.script.run({ this: this.props.Document.isTemplate && this.props.DataDoc ? this.props.DataDoc : this.props.Document }); e.preventDefault(); return; @@ -303,6 +304,7 @@ export class DocumentView extends DocComponent(Docu let altKey = e.altKey; let ctrlKey = e.ctrlKey; if (this._doubleTap && this.props.renderDepth) { + e.stopPropagation(); let fullScreenAlias = Doc.MakeAlias(this.props.Document); fullScreenAlias.templates = new List(); Doc.UseDetailLayout(fullScreenAlias); @@ -314,10 +316,13 @@ export class DocumentView extends DocComponent(Docu else if (CurrentUserUtils.MainDocId !== this.props.Document[Id] && (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) { + if (BoolCast(this.props.Document.ignoreClick)) { + return; + } + e.stopPropagation(); SelectionManager.SelectDoc(this, e.ctrlKey); let isExpander = (e.target as any).id === "isExpander"; - if (BoolCast(this.props.Document.isButton) || isExpander) { - SelectionManager.DeselectAll(); + if (BoolCast(this.props.Document.isButton) || this.props.Document.type === DocumentType.BUTTON || isExpander) { let subBulletDocs = await DocListCastAsync(this.props.Document.subBulletDocs); let maximizedDocs = await DocListCastAsync(this.props.Document.maximizedDocs); let summarizedDocs = await DocListCastAsync(this.props.Document.summarizedDocs); @@ -328,6 +333,7 @@ export class DocumentView extends DocComponent(Docu expandedDocs = summarizedDocs ? [...summarizedDocs, ...expandedDocs] : expandedDocs; // let expandedDocs = [...(subBulletDocs ? subBulletDocs : []), ...(maximizedDocs ? maximizedDocs : []), ...(summarizedDocs ? summarizedDocs : []),]; if (expandedDocs.length) { // bcz: need a better way to associate behaviors with click events on widget-documents + SelectionManager.DeselectAll(); let maxLocation = StrCast(this.props.Document.maximizeLocation, "inPlace"); let getDispDoc = (target: Doc) => Object.getOwnPropertyNames(target).indexOf("isPrototype") === -1 ? target : Doc.MakeDelegate(target); if (altKey || ctrlKey) { @@ -356,6 +362,7 @@ export class DocumentView extends DocComponent(Docu } } else if (linkedDocs.length) { + SelectionManager.DeselectAll(); let first = linkedDocs.filter(d => Doc.AreProtosEqual(d.anchor1 as Doc, this.props.Document)); let linkedFwdDocs = first.length ? [first[0].anchor2 as Doc, first[0].anchor1 as Doc] : [expandedDocs[0], expandedDocs[0]]; @@ -393,13 +400,15 @@ export class DocumentView extends DocComponent(Docu } if (this.active) e.stopPropagation(); // events stop at the lowest document that is active. document.removeEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointermove", this.onPointerMove); document.addEventListener("pointerup", this.onPointerUp); - // } } onPointerMove = (e: PointerEvent): void => { - if (!e.cancelBubble && this.active) { + if (e.cancelBubble && this.active) { + document.removeEventListener("pointermove", this.onPointerMove); + } + else if (!e.cancelBubble && this.active) { if (!this.props.Document.excludeFromLibrary && (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3)) { if (!e.altKey && !this.topMost && e.buttons === 1 && !BoolCast(this.props.Document.lockedPosition)) { document.removeEventListener("pointermove", this.onPointerMove); @@ -582,7 +591,7 @@ export class DocumentView extends DocComponent(Docu cm.addItem({ description: "Open...", subitems: subitems, icon: "external-link-alt" }); let existingMake = ContextMenu.Instance.findByDescription("Make..."); let makes: ContextMenuProps[] = existingMake && "subitems" in existingMake ? existingMake.subitems : []; - makes.push({ description: this.props.Document.isBackground ? "Remove Background" : "Into Background", event: this.makeBackground, icon: BoolCast(this.props.Document.lockedPosition) ? "unlock" : "lock" }); + makes.push({ description: this.props.Document.isBackground ? "Remove Background" : "Into Background", event: this.makeBackground, icon: this.props.Document.lockedPosition ? "unlock" : "lock" }); makes.push({ description: this.props.Document.isButton ? "Remove Button" : "Into Button", event: this.makeBtnClicked, icon: "concierge-bell" }); makes.push({ description: "OnClick script", icon: "edit", event: () => ScriptBox.EditClickScript(this.props.Document, "onClick") }); makes.push({ @@ -592,6 +601,7 @@ export class DocumentView extends DocComponent(Docu this.makeBtnClicked(); }, icon: "window-restore" }); + makes.push({ description: this.props.Document.ignoreClick ? "Selectable" : "Unselectable", event: () => this.props.Document.ignoreClick = !this.props.Document.ignoreClick, icon: this.props.Document.ignoreClick ? "unlock" : "lock" }) !existingMake && cm.addItem({ description: "Make...", subitems: makes, icon: "hand-point-right" }); let existing = ContextMenu.Instance.findByDescription("Layout..."); let layoutItems: ContextMenuProps[] = existing && "subitems" in existing ? existing.subitems : []; -- cgit v1.2.3-70-g09d2 From d1fbfc3ab46cfd9fea69b356cb5b8825625ab299 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Thu, 22 Aug 2019 12:37:15 -0400 Subject: only shows children option if working entirely with collections --- src/client/views/MetadataEntryMenu.tsx | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx index 06084aac0..df6b7f721 100644 --- a/src/client/views/MetadataEntryMenu.tsx +++ b/src/client/views/MetadataEntryMenu.tsx @@ -97,7 +97,6 @@ export class MetadataEntryMenu extends React.Component{ } else { let childSuccess = true; if (this._addChildren) { - console.log(this._currentKey); for (let document of doc) { let collectionChildren = await DocListCastAsync(document.data); if (collectionChildren) { @@ -173,6 +172,29 @@ export class MetadataEntryMenu extends React.Component{ this._addChildren = !this._addChildren; } + private get considerChildOptions() { + let docSource = this.props.docs; + if (typeof docSource === "function") { + docSource = docSource(); + } + docSource = docSource as Doc[] | Doc; + if (docSource instanceof Doc) { + if (docSource.viewType === undefined) { + return (null); + } + } else if (Array.isArray(docSource)) { + if (!docSource.every(doc => doc.viewType !== undefined)) { + return null; + } + } + return ( +
+ Children: + +
+ ); + } + render() { return (
@@ -187,8 +209,7 @@ export class MetadataEntryMenu extends React.Component{ ref={this.autosuggestRef} /> Value: - Children: - + {this.considerChildOptions}
); } -- cgit v1.2.3-70-g09d2 From 1fb290bcc1c46214cfd553f31c1282d2694530ea Mon Sep 17 00:00:00 2001 From: monikahedman Date: Thu, 22 Aug 2019 19:42:54 -0400 Subject: making the box come up --- src/client/documents/Documents.ts | 4 ++ src/client/views/MainView.tsx | 2 + src/client/views/linking/LinkFollowBox.scss | 2 +- src/client/views/linking/LinkFollowBox.tsx | 87 ++++++++++++++++++----------- src/client/views/linking/LinkMenuItem.tsx | 12 +++- 5 files changed, 73 insertions(+), 34 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index cd612aaa9..b7c8f4c12 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -446,6 +446,10 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.DRAGBOX), undefined, { ...(options || {}) }); } + export function LinkFollowBoxDocument(options?: DocumentOptions) { + return InstanceFromProto(Prototypes.get(DocumentType.LINKFOLLOW), undefined, { ...(options || {}) }); + } + export function DockDocument(documents: Array, config: string, options: DocumentOptions, id?: string) { return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, viewType: CollectionViewType.Docking, dockingConfig: config }, id); } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f3c8a176c..79c44ae72 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -443,6 +443,7 @@ export class MainView extends React.Component { let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; let addColNode = action(() => Docs.Create.FreeformDocument([], { width: this.pwidth * .7, height: this.pheight, title: "a freeform collection" })); + let addLinkFollowBox = action(() => Docs.Create.LinkFollowBoxDocument({ width: 200, height: 500, title: "Link Follow Document" })); let addPresNode = action(() => Doc.UserDoc().curPresentation = Docs.Create.PresDocument(new List(), { width: 200, height: 500, title: "a presentation trail" })); let addWebNode = action(() => Docs.Create.WebDocument("https://en.wikipedia.org/wiki/Hedgehog", { width: 300, height: 300, title: "New Webpage" })); let addDragboxNode = action(() => Docs.Create.DragboxDocument({ width: 40, height: 40, title: "drag collection" })); @@ -458,6 +459,7 @@ export class MainView extends React.Component { [React.createRef(), "globe-asia", "Add Website", addWebNode], [React.createRef(), "bolt", "Add Button", addButtonDocument], [React.createRef(), "file", "Add Document Dragger", addDragboxNode], + [React.createRef(), "caret-up", "Open Link Follow Box", addLinkFollowBox], [React.createRef(), "cloud-upload-alt", "Import Directory", addImportCollectionNode], //remove at some point in favor of addImportCollectionNode //[React.createRef(), "play", "Add Youtube Searcher", addYoutubeSearcher], ]; diff --git a/src/client/views/linking/LinkFollowBox.scss b/src/client/views/linking/LinkFollowBox.scss index c764b002f..522191792 100644 --- a/src/client/views/linking/LinkFollowBox.scss +++ b/src/client/views/linking/LinkFollowBox.scss @@ -2,5 +2,5 @@ .linkFollowBox-main { position: absolute; - background: $main-accent; + background: red; } \ No newline at end of file diff --git a/src/client/views/linking/LinkFollowBox.tsx b/src/client/views/linking/LinkFollowBox.tsx index 7fc4449d3..247b67776 100644 --- a/src/client/views/linking/LinkFollowBox.tsx +++ b/src/client/views/linking/LinkFollowBox.tsx @@ -9,13 +9,22 @@ import { CollectionViewType } from "../collections/CollectionBaseView"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { SelectionManager } from "../../util/SelectionManager"; import { DocumentManager } from "../../util/DocumentManager"; +import { DocumentView } from "../nodes/DocumentView"; +import "./LinkFollowBox.scss"; + +export type LinkParamOptions = { + container: Doc; + context: Doc; + sourceDoc: Doc; + shoudldZoom: boolean; + linkDoc: Doc; +}; @observer export class LinkFollowBox extends React.Component { public static LayoutString() { return FieldView.LayoutString(LinkFollowBox); } public static Instance: LinkFollowBox; - //set this to be the default link behavior, can be any of the above unhighlight = () => { Doc.UnhighlightAll(); @@ -31,19 +40,32 @@ export class LinkFollowBox extends React.Component { }, 10000); } + // DONE + @undoBatch + openFullScreen = (destinationDoc: Doc) => { + let view: DocumentView | null = DocumentManager.Instance.getDocumentView(destinationDoc) + view && CollectionDockingView.Instance && CollectionDockingView.Instance.OpenFullScreen(view); + } + + // should container be a doc or documentview or what? This one needs work and is more long term + @undoBatch + openInContainer = (destinationDoc: Doc, options: { container: Doc }) => { + + } + // NOT TESTED // col = collection the doc is in // target = the document to center on @undoBatch - openLinkColRight = (destinationDoc: Doc, col: Doc) => { - col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; - if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { + openLinkColRight = (destinationDoc: Doc, options: { context: Doc }) => { + options.context = Doc.IsPrototype(options.context) ? Doc.MakeDelegate(options.context) : options.context; + if (NumCast(options.context.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { const newPanX = NumCast(destinationDoc.x) + NumCast(destinationDoc.width) / NumCast(destinationDoc.zoomBasis, 1) / 2; const newPanY = NumCast(destinationDoc.y) + NumCast(destinationDoc.height) / NumCast(destinationDoc.zoomBasis, 1) / 2; - col.panX = newPanX; - col.panY = newPanY; + options.context.panX = newPanX; + options.context.panY = newPanY; } - CollectionDockingView.Instance.AddRightSplit(col, undefined); + CollectionDockingView.Instance.AddRightSplit(options.context, undefined); } // DONE @@ -60,39 +82,39 @@ export class LinkFollowBox extends React.Component { // this is the standard "follow link" (jump to document) // taken from follow link @undoBatch - jumpToLink = async (destinationDoc: Doc, shouldZoom: boolean, linkDoc: Doc) => { + jumpToLink = async (destinationDoc: Doc, options: { shouldZoom: boolean, linkDoc: Doc }) => { //there is an issue right now so this will be false automatically - shouldZoom = false; + options.shouldZoom = false; this.highlightDoc(destinationDoc); let jumpToDoc = destinationDoc; let pdfDoc = FieldValue(Cast(destinationDoc, Doc)); if (pdfDoc) { jumpToDoc = pdfDoc; } - let proto = Doc.GetProto(linkDoc); + let proto = Doc.GetProto(options.linkDoc); let targetContext = await Cast(proto.targetContext, Doc); let sourceContext = await Cast(proto.sourceContext, Doc); let dockingFunc = (document: Doc) => { this.props.addDocTab(document, undefined, "inTab"); SelectionManager.DeselectAll(); }; - if (destinationDoc === linkDoc.anchor2 && targetContext) { - DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, async document => dockingFunc(document), undefined, targetContext); + if (destinationDoc === options.linkDoc.anchor2 && targetContext) { + DocumentManager.Instance.jumpToDocument(jumpToDoc, options.shouldZoom, false, async document => dockingFunc(document), undefined, targetContext); } - else if (destinationDoc === linkDoc.anchor1 && sourceContext) { - DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, document => dockingFunc(sourceContext!)); + else if (destinationDoc === options.linkDoc.anchor1 && sourceContext) { + DocumentManager.Instance.jumpToDocument(jumpToDoc, options.shouldZoom, false, document => dockingFunc(sourceContext!)); } else if (DocumentManager.Instance.getDocumentView(jumpToDoc)) { - DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, undefined, undefined, NumCast((destinationDoc === linkDoc.anchor2 ? linkDoc.anchor2Page : linkDoc.anchor1Page))); + DocumentManager.Instance.jumpToDocument(jumpToDoc, options.shouldZoom, undefined, undefined, NumCast((destinationDoc === options.linkDoc.anchor2 ? options.linkDoc.anchor2Page : options.linkDoc.anchor1Page))); } else { - DocumentManager.Instance.jumpToDocument(jumpToDoc, shouldZoom, false, dockingFunc); + DocumentManager.Instance.jumpToDocument(jumpToDoc, options.shouldZoom, false, dockingFunc); } } // DONE // opens link in new tab (not in a collection) - // this opens it full screen, do we need a separate full screen option? + // this opens it full screen in new tab @undoBatch openLinkTab = (destinationDoc: Doc) => { this.highlightDoc(destinationDoc); @@ -106,32 +128,32 @@ export class LinkFollowBox extends React.Component { // col = collection the doc is in // target = the document to center on @undoBatch - openLinkColTab = (destinationDoc: Doc, col: Doc) => { + openLinkColTab = (destinationDoc: Doc, options: { context: Doc }) => { this.highlightDoc(destinationDoc); - col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; - if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { + options.context = Doc.IsPrototype(options.context) ? Doc.MakeDelegate(options.context) : options.context; + if (NumCast(options.context.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { const newPanX = NumCast(destinationDoc.x) + NumCast(destinationDoc.width) / NumCast(destinationDoc.zoomBasis, 1) / 2; const newPanY = NumCast(destinationDoc.y) + NumCast(destinationDoc.height) / NumCast(destinationDoc.zoomBasis, 1) / 2; - col.panX = newPanX; - col.panY = newPanY; + options.context.panX = newPanX; + options.context.panY = newPanY; } // CollectionDockingView.Instance.AddRightSplit(col, undefined); - this.props.addDocTab(col, undefined, "inTab"); + this.props.addDocTab(options.context, undefined, "inTab"); SelectionManager.DeselectAll(); } // DONE // this will open a link next to the source doc @undoBatch - openLinkInPlace = (destinationDoc: Doc, sourceDoc: Doc) => { + openLinkInPlace = (destinationDoc: Doc, options: { sourceDoc: Doc }) => { this.highlightDoc(destinationDoc); let alias = Doc.MakeAlias(destinationDoc); - let y = NumCast(sourceDoc.y); - let x = NumCast(sourceDoc.x); + let y = NumCast(options.sourceDoc.y); + let x = NumCast(options.sourceDoc.x); - let width = NumCast(sourceDoc.width); - let height = NumCast(sourceDoc.height); + let width = NumCast(options.sourceDoc.width); + let height = NumCast(options.sourceDoc.height); alias.x = x + width + 30; alias.y = y; @@ -139,18 +161,19 @@ export class LinkFollowBox extends React.Component { alias.height = height; SelectionManager.SelectedDocuments().map(dv => { - if (dv.props.Document === sourceDoc) { + if (dv.props.Document === options.sourceDoc) { dv.props.addDocument && dv.props.addDocument(alias, false); } }); } - private defaultLinkBehavior: any = this.openLinkInPlace; - private currentLinkBehavior: any = this.defaultLinkBehavior; + //set this to be the default link behavior, can be any of the above + private defaultLinkBehavior: (destinationDoc: Doc, options?: any) => void = this.openLinkInPlace; + private currentLinkBehavior: (destinationDoc: Doc, options?: any) => void = this.defaultLinkBehavior; render() { return ( -
+
); diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 41723030d..60f27c664 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -15,6 +15,7 @@ import { CollectionDockingView } from '../collections/CollectionDockingView'; import { SelectionManager } from '../../util/SelectionManager'; import { CollectionViewType } from '../collections/CollectionBaseView'; import { DocumentView } from '../nodes/DocumentView'; +import { SearchUtil } from '../../util/SearchUtil'; library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp); @@ -63,6 +64,13 @@ export class LinkMenuItem extends React.Component { CollectionDockingView.Instance.AddRightSplit(col, undefined); } + // DONE + @undoBatch + openFullScreen = () => { + let view: DocumentView | null = DocumentManager.Instance.getDocumentView(this.props.destinationDoc); + view && CollectionDockingView.Instance && CollectionDockingView.Instance.OpenFullScreen(view); + } + // DONE // this opens the linked doc in a right split, NOT in its collection @undoBatch @@ -161,10 +169,12 @@ export class LinkMenuItem extends React.Component { dv.props.addDocument && dv.props.addDocument(alias, false); } }); + + this.jumpToLink(false); } //set this to be the default link behavior, can be any of the above - private defaultLinkBehavior: any = this.openLinkInPlace; + private defaultLinkBehavior: any = this.openLinkTab; onEdit = (e: React.PointerEvent): void => { e.stopPropagation(); -- cgit v1.2.3-70-g09d2 From 20f7d2dca1c115c84f6ac89981ef1e3c7c9a2757 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 22 Aug 2019 23:18:42 -0400 Subject: added start of collection script building UI --- src/client/util/DragManager.ts | 4 +- .../views/collections/CollectionViewChromes.scss | 73 +++++++++++++++++- .../views/collections/CollectionViewChromes.tsx | 87 ++++++++++++++++++++-- src/client/views/nodes/ButtonBox.tsx | 27 ++++++- src/new_fields/Doc.ts | 3 +- 5 files changed, 184 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 894b366ef..24c093213 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -140,6 +140,8 @@ export namespace DragManager { withoutShiftDrag?: boolean; + finishDrag?: (dropData: { [id: string]: any }) => void; + offsetX?: number; offsetY?: number; @@ -234,7 +236,7 @@ export namespace DragManager { export function StartDocumentDrag(eles: HTMLElement[], dragData: DocumentDragData, downX: number, downY: number, options?: DragOptions) { runInAction(() => StartDragFunctions.map(func => func())); - StartDrag(eles, dragData, downX, downY, options, + StartDrag(eles, dragData, downX, downY, options, options && options.finishDrag ? options.finishDrag : (dropData: { [id: string]: any }) => { (dropData.droppedDocuments = dragData.userDropAction === "alias" || (!dragData.userDropAction && dragData.dropAction === "alias") ? dragData.draggedDocuments.map(d => Doc.MakeAlias(d)) : diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index f39bd877a..64411b5fe 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -64,7 +64,7 @@ font-size: 75%; background: rgb(238, 238, 238); height: 100%; - width: 150px; + width: 75px; } .collectionViewBaseChrome-viewSpecsMenu { @@ -234,4 +234,75 @@ margin-left: 50px; } } +} + + +.commandEntry-outerDiv { + display: flex; + flex-direction: column; + width: 165px; + height: 40px; +} +.commandEntry-inputArea { + display:flex; + flex-direction: row; + width: 150px; + margin: auto 0 auto auto; +} + +.react-autosuggest__container { + position: relative; + width: 100%; + margin-left: 5px; + margin-right: 5px; +} + +.react-autosuggest__input { + border: 1px solid #aaa; + border-radius: 4px; + width: 100%; +} + +.react-autosuggest__input--focused { + outline: none; +} + +.react-autosuggest__input--open { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.react-autosuggest__suggestions-container { + display: none; +} + +.react-autosuggest__suggestions-container--open { + display: block; + position: fixed; + overflow-y: auto; + max-height: 400px; + width: 180px; + border: 1px solid #aaa; + background-color: #fff; + font-family: Helvetica, sans-serif; + font-weight: 300; + font-size: 16px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + z-index: 2; +} + +.react-autosuggest__suggestions-list { + margin: 0; + padding: 0; + list-style-type: none; +} + +.react-autosuggest__suggestion { + cursor: pointer; + padding: 10px 20px; +} + +.react-autosuggest__suggestion--highlighted { + background-color: #ddd; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 74e57611d..352bcd4a6 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -8,7 +8,7 @@ import { List } from "../../../new_fields/List"; import { listSpec } from "../../../new_fields/Schema"; import { ScriptField } from "../../../new_fields/ScriptField"; import { BoolCast, Cast, NumCast, StrCast } from "../../../new_fields/Types"; -import { Utils } from "../../../Utils"; +import { Utils, emptyFunction } from "../../../Utils"; import { DragManager } from "../../util/DragManager"; import { CompileScript } from "../../util/Scripting"; import { undoBatch } from "../../util/UndoManager"; @@ -18,7 +18,9 @@ import { DocLike } from "../MetadataEntryMenu"; import { CollectionViewType } from "./CollectionBaseView"; import { CollectionView } from "./CollectionView"; import "./CollectionViewChromes.scss"; +import * as Autosuggest from 'react-autosuggest'; import KeyRestrictionRow from "./KeyRestrictionRow"; +import { Docs } from "../../documents/Documents"; const datepicker = require('js-datepicker'); interface CollectionViewChromeProps { @@ -43,6 +45,8 @@ export class CollectionViewBaseChrome extends React.Component(); @computed private get filterValue() { return Cast(this.props.CollectionView.props.Document.viewSpecScript, ScriptField); } private _picker: any; @@ -287,7 +291,12 @@ export class CollectionViewBaseChrome extends React.Component(de.data.draggedDocuments); + } e.stopPropagation(); return true; } @@ -308,6 +317,63 @@ export class CollectionViewBaseChrome extends React.Component(); + + renderSuggestion = (suggestion: string) => { + return

{suggestion}

; + } + getSuggestionValue = (suggestion: string) => suggestion; + + @action + onKeyChange = (e: React.ChangeEvent, { newValue }: { newValue: string }) => { + this._currentKey = newValue; + } + onSuggestionFetch = async ({ value }: { value: string }) => { + const sugg = await this.getKeySuggestions(value); + runInAction(() => this.suggestions = sugg); + } + @action + onSuggestionClear = () => { + this.suggestions = []; + } + getKeySuggestions = async (value: string): Promise => { + return this._allCommands.filter(c => c.indexOf(value) !== -1); + } + + autoSuggestDown = (e: React.PointerEvent) => { + e.stopPropagation(); + } + dragCommandDown = (e: React.PointerEvent) => { + let de = new DragManager.DocumentDragData([this.props.CollectionView.props.Document], [undefined]); + DragManager.StartDocumentDrag([this._commandRef.current!], de, e.clientX, e.clientY, { + finishDrag: (dropData: { [id: string]: any }) => { + let bd = Docs.Create.ButtonDocument({ width: 150, height: 50, title: this._currentKey }); + let script = `getProto(target).data = copyField(this.source);`; + let compiled = CompileScript(script, { + params: { doc: Doc.name }, + capturedVariables: { target: this.props.CollectionView.props.Document }, + typecheck: false, + editable: true + }); + if (compiled.compiled) { + let scriptField = new ScriptField(compiled); + bd.onClick = scriptField; + } + dropData.droppedDocuments = [bd]; + }, + handlers: { + dragComplete: action(() => { + }), + }, + hideSource: false + }); + e.preventDefault(); + e.stopPropagation(); + } + render() { let collapsed = this.props.CollectionView.props.Document.chromeStatus !== "enabled"; return ( @@ -337,7 +403,7 @@ export class CollectionViewBaseChrome extends React.Component
{ }} onPointerDown={this.openViewSpecs} @@ -388,8 +454,19 @@ export class CollectionViewBaseChrome extends React.Component
-
- TEMPLATE +
+
+
+ +
+
{this.subChrome()} diff --git a/src/client/views/nodes/ButtonBox.tsx b/src/client/views/nodes/ButtonBox.tsx index 8b6f11aac..ca5f0acc2 100644 --- a/src/client/views/nodes/ButtonBox.tsx +++ b/src/client/views/nodes/ButtonBox.tsx @@ -15,7 +15,11 @@ import { Doc } from '../../../new_fields/Doc'; import './ButtonBox.scss'; import { observer } from 'mobx-react'; import { DocumentIconContainer } from './DocumentIcon'; -import { StrCast } from '../../../new_fields/Types'; +import { StrCast, BoolCast } from '../../../new_fields/Types'; +import { DragManager } from '../../util/DragManager'; +import { undoBatch } from '../../util/UndoManager'; +import { action, computed } from 'mobx'; +import { List } from '../../../new_fields/List'; library.add(faEdit as any); @@ -30,10 +34,29 @@ const ButtonDocument = makeInterface(ButtonSchema); @observer export class ButtonBox extends DocComponent(ButtonDocument) { public static LayoutString() { return FieldView.LayoutString(ButtonBox); } + private dropDisposer?: DragManager.DragDropDisposer; + @computed get dataDoc() { return this.props.DataDoc && (BoolCast(this.props.Document.isTemplate) || BoolCast(this.props.DataDoc.isTemplate) || this.props.DataDoc.layout === this.props.Document) ? this.props.DataDoc : Doc.GetProto(this.props.Document); } + + + protected createDropTarget = (ele: HTMLDivElement) => { + if (this.dropDisposer) { + this.dropDisposer(); + } + if (ele) { + this.dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.drop.bind(this) } }); + } + } + @undoBatch + @action + drop = (e: Event, de: DragManager.DropEvent) => { + if (de.data instanceof DragManager.DocumentDragData) { + Doc.GetProto(this.dataDoc).source = new List(de.data.droppedDocuments); + } + } render() { return ( -
+
{this.Document.text || this.Document.title}
); diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index e5b609966..f6114d476 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -626,4 +626,5 @@ export namespace Doc { } } Scripting.addGlobal(function renameAlias(doc: any, n: any) { return StrCast(doc.title).replace(/\([0-9]*\)/, "") + `(${n})`; }); -Scripting.addGlobal(function getProto(doc: any) { return Doc.GetProto(doc); }); \ No newline at end of file +Scripting.addGlobal(function getProto(doc: any) { return Doc.GetProto(doc); }); +Scripting.addGlobal(function copyField(field: any) { return ObjectField.MakeCopy(field); }); \ No newline at end of file -- cgit v1.2.3-70-g09d2 From e680f97f9d50ce5759d4533bae38af341956ddce Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Fri, 23 Aug 2019 11:26:43 -0400 Subject: cleanup --- src/client/views/nodes/FormattedTextBox.tsx | 5 ----- src/server/index.ts | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 191a24664..0e04bacf7 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -34,16 +34,12 @@ import "./FormattedTextBox.scss"; import React = require("react"); import { GoogleApiClientUtils, Pulls, Pushes } from '../../apis/google_docs/GoogleApiClientUtils'; import { DocumentDecorations } from '../DocumentDecorations'; -import { MainOverlayTextBox } from '../MainOverlayTextBox'; import { DictationManager } from '../../util/DictationManager'; import { ReplaceStep } from 'prosemirror-transform'; library.add(faEdit); library.add(faSmile, faTextHeight, faUpload); -// FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document -// - export const Blank = `{"doc":{"type":"doc","content":[]},"selection":{"type":"text","anchor":0,"head":0}}`; export interface FormattedTextBoxProps { @@ -146,7 +142,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe paste = (e: ClipboardEvent) => { - //this is throwing a ton of errors so commented it out if (e.clipboardData && this._editorView) { // let pdfPasteText = `${Utils.GenerateDeterministicGuid("pdf paste")}`; // for (let i = 0; i < e.clipboardData.items.length; i++) { diff --git a/src/server/index.ts b/src/server/index.ts index eeadef239..34a0a19f1 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -447,7 +447,7 @@ function LoadPage(file: string, pageNumber: number, res: Response) { console.log(pageNumber); pdf.getPage(pageNumber).then((page: Pdfjs.PDFPageProxy) => { console.log("reading " + page); - let viewport = page.getViewport(1 as any); + let viewport = page.getViewport(1); let canvasAndContext = factory.create(viewport.width, viewport.height); let renderContext = { canvasContext: canvasAndContext.context, -- cgit v1.2.3-70-g09d2 From f4afa471e03618169137a6533db8623aae93d6c5 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 23 Aug 2019 12:42:38 -0400 Subject: got drag drop buttons working better. --- src/client/util/DragManager.ts | 30 ++++++++- .../views/collections/CollectionViewChromes.tsx | 71 +++++++--------------- .../collectionFreeForm/CollectionFreeFormView.tsx | 11 +++- src/client/views/nodes/ButtonBox.scss | 19 +++++- src/client/views/nodes/ButtonBox.tsx | 42 +++++++------ src/new_fields/Doc.ts | 14 ++++- 6 files changed, 111 insertions(+), 76 deletions(-) (limited to 'src') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 24c093213..748fb9d13 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -1,5 +1,5 @@ import { action, runInAction } from "mobx"; -import { Doc } from "../../new_fields/Doc"; +import { Doc, Field } from "../../new_fields/Doc"; import { Cast, StrCast } from "../../new_fields/Types"; import { URLField } from "../../new_fields/URLField"; import { emptyFunction } from "../../Utils"; @@ -9,6 +9,11 @@ import { DocumentManager } from "./DocumentManager"; import { LinkManager } from "./LinkManager"; import { SelectionManager } from "./SelectionManager"; import { SchemaHeaderField } from "../../new_fields/SchemaHeaderField"; +import { Docs } from "../documents/Documents"; +import { CompileScript } from "./Scripting"; +import { ScriptField } from "../../new_fields/ScriptField"; +import { List } from "../../new_fields/List"; +import { PrefetchProxy } from "../../new_fields/Proxy"; export type dropActionType = "alias" | "copy" | undefined; export function SetupDrag( @@ -247,6 +252,27 @@ export namespace DragManager { }); } + export function StartButtonDrag(eles: HTMLElement[], script: string, title: string, vars: { [name: string]: Field }, params: string[], downX: number, downY: number, options?: DragOptions) { + let dragData = new DragManager.DocumentDragData([], [undefined]); + runInAction(() => StartDragFunctions.map(func => func())); + StartDrag(eles, dragData, downX, downY, options, options && options.finishDrag ? options.finishDrag : + (dropData: { [id: string]: any }) => { + let bd = Docs.Create.ButtonDocument({ width: 150, height: 50, title: title }); + let compiled = CompileScript(script, { + params: { doc: Doc.name }, + typecheck: false, + editable: true + }); + if (compiled.compiled) { + let scriptField = new ScriptField(compiled); + bd.onClick = scriptField; + } + params.map(p => Object.keys(vars).indexOf(p) !== -1 && (Doc.GetProto(bd)[p] = new PrefetchProxy(vars[p] as Doc))); + bd.buttonParams = new List(params); + dropData.droppedDocuments = [bd]; + }); + } + export function StartLinkedDocumentDrag(eles: HTMLElement[], dragData: DocumentDragData, downX: number, downY: number, options?: DragOptions) { dragData.moveDocument = moveLinkedDocument; @@ -482,7 +508,7 @@ export namespace DragManager { // if (parent && dragEle) parent.appendChild(dragEle); }); if (target) { - if (finishDrag) finishDrag(dragData); + finishDrag && finishDrag(dragData); target.dispatchEvent( new CustomEvent("dashOnDrop", { diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 352bcd4a6..15bef39b3 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -286,20 +286,22 @@ export class CollectionViewBaseChrome extends React.Component await p));", params: ["target", "source"], // bcz: doesn't look like we can do async stuff in scripting... + title: "set content", script: "getProto(this.target).data = aliasDocs(this.source);", params: ["target", "source"], + immediate: (draggedDocs: Doc[]) => Doc.GetProto(this.props.CollectionView.props.Document).data = new List(draggedDocs) + }, + { + title: "set template", script: "this.target.childLayout = this.source ? this.source[0] : undefined", params: ["target", "source"], + immediate: (draggedDocs: Doc[]) => this.props.CollectionView.props.Document.childLayout = draggedDocs.length ? draggedDocs[0] : undefined + }]; @undoBatch @action protected drop(e: Event, de: DragManager.DropEvent): boolean { - if (de.data instanceof DragManager.DocumentDragData) { - if (de.data.draggedDocuments.length) { - if (this._currentKey === "Set Template") { - this.props.CollectionView.props.Document.childLayout = de.data.draggedDocuments[0]; - } - if (this._currentKey === "Set Content") { - Doc.GetProto(this.props.CollectionView.props.Document).data = new List(de.data.draggedDocuments); - } - e.stopPropagation(); - return true; - } + if (de.data instanceof DragManager.DocumentDragData && de.data.draggedDocuments.length) { + this.commands.filter(c => c.title === this._currentKey).map(c => c.immediate(de.data.draggedDocuments)); + e.stopPropagation(); } return true; } @@ -317,9 +319,7 @@ export class CollectionViewBaseChrome extends React.Component(); renderSuggestion = (suggestion: string) => { @@ -340,38 +340,19 @@ export class CollectionViewBaseChrome extends React.Component => { - return this._allCommands.filter(c => c.indexOf(value) !== -1); + return this.commands.filter(c => c.title.indexOf(value) !== -1).map(c => c.title); } autoSuggestDown = (e: React.PointerEvent) => { e.stopPropagation(); } + dragCommandDown = (e: React.PointerEvent) => { - let de = new DragManager.DocumentDragData([this.props.CollectionView.props.Document], [undefined]); - DragManager.StartDocumentDrag([this._commandRef.current!], de, e.clientX, e.clientY, { - finishDrag: (dropData: { [id: string]: any }) => { - let bd = Docs.Create.ButtonDocument({ width: 150, height: 50, title: this._currentKey }); - let script = `getProto(target).data = copyField(this.source);`; - let compiled = CompileScript(script, { - params: { doc: Doc.name }, - capturedVariables: { target: this.props.CollectionView.props.Document }, - typecheck: false, - editable: true - }); - if (compiled.compiled) { - let scriptField = new ScriptField(compiled); - bd.onClick = scriptField; - } - dropData.droppedDocuments = [bd]; - }, - handlers: { - dragComplete: action(() => { - }), - }, - hideSource: false - }); - e.preventDefault(); + this.commands.filter(c => c.title === this._currentKey).map(c => + DragManager.StartButtonDrag([this._commandRef.current!], c.script, c.title, + { target: this.props.CollectionView.props.Document }, c.params, e.clientX, e.clientY)); e.stopPropagation(); + e.preventDefault(); } render() { @@ -419,7 +400,7 @@ export class CollectionViewBaseChrome extends React.Component
CREATED WITHIN: -
+
+ {FollowModes.OPENRIGHT} +
+
+
+
+
+
+ ); + } + + @computed + get contexts() { + return ( +
+ +
+ ); + } render() { return (
+
{this.LinkFollowTitle}
+
+
+
Mode
+
{this.availableModes}
+
+
+
Context
+
+ +
+
+
+
Options
+
+
+
+
+
+ +
); } diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 60f27c664..406429ebf 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -16,6 +16,7 @@ import { SelectionManager } from '../../util/SelectionManager'; import { CollectionViewType } from '../collections/CollectionBaseView'; import { DocumentView } from '../nodes/DocumentView'; import { SearchUtil } from '../../util/SearchUtil'; +import { LinkFollowBox } from './LinkFollowBox'; library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp); @@ -174,7 +175,7 @@ export class LinkMenuItem extends React.Component { } //set this to be the default link behavior, can be any of the above - private defaultLinkBehavior: any = this.openLinkTab; + // private defaultLinkBehavior: any = LinkFollowBox.computeLinkDocs(this.props.linkDoc); onEdit = (e: React.PointerEvent): void => { e.stopPropagation(); @@ -242,7 +243,7 @@ export class LinkMenuItem extends React.Component { {/* Original */} {/*
*/} {/* New */} -
+
LinkFollowBox.Instance.setLinkDocs(this.props.linkDoc, this.props.sourceDoc, this.props.destinationDoc)}>
{this._showMore ? this.renderMetadata() : <>} -- cgit v1.2.3-70-g09d2 From 538187907421057212eca1eadbe07c8b79705d1d Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 23 Aug 2019 16:47:49 -0400 Subject: fixed text scrolling issues. --- src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/MainOverlayTextBox.tsx | 5 +++-- src/client/views/nodes/FormattedTextBox.tsx | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index a28088032..2c5940467 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -695,7 +695,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (!canPush) return (null); let published = Doc.GetProto(this.targetDoc)[GoogleRef] !== undefined; if (!published) { - this.targetDoc.autoHeight = true; + // this.targetDoc.autoHeight = true; } let icon: IconProp = published ? (this.pushIcon as any) : cloud; return ( diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx index 0839e1114..e95e5b777 100644 --- a/src/client/views/MainOverlayTextBox.tsx +++ b/src/client/views/MainOverlayTextBox.tsx @@ -59,7 +59,7 @@ export class MainOverlayTextBox extends React.Component let sxf = Utils.GetScreenTransform(box ? box.CurrentDiv : undefined); return new Transform(-sxf.translateX, -sxf.translateY, 1 / sxf.scale); }; - this.setTextDoc(box.props.fieldKey, box.CurrentDiv, xf, BoolCast(box.props.Document.autoHeight, false) || box.props.height === "min-content"); + this.setTextDoc(box.props.fieldKey, box.CurrentDiv, xf, BoolCast(box.props.Document.autoHeight) || box.props.height === "min-content"); } else { this.TextDoc = undefined; @@ -131,10 +131,11 @@ export class MainOverlayTextBox extends React.Component this.TextDoc; this.TextDataDoc; if (FormattedTextBox.InputBoxOverlay && this._textTargetDiv) { let wid = FormattedTextBox.InputBoxOverlay.props.Document.width; // need to force overlay to render when underlying text box is resized (eg, w/ DocDecorations) + let hgtx = FormattedTextBox.InputBoxOverlay.props.Document.height; // need to force overlay to render when underlying text box is resized (eg, w/ DocDecorations) let textRect = this._textTargetDiv.getBoundingClientRect(); let s = this._textXf().Scale; let location = this._textBottom ? textRect.bottom : textRect.top; - let hgt = this._textAutoHeight || this._textBottom ? "auto" : this._textTargetDiv.clientHeight; + let hgt = (this._textBox && this._textBox.props.Document.autoHeight) || this._textBottom ? "auto" : this._textTargetDiv.clientHeight; return
Date: Fri, 23 Aug 2019 17:41:11 -0400 Subject: fixed documents disappearing without an x/y, fixed dropping something onto textbox making it a template, fixed treeview to show minimized documents. --- src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/collections/CollectionTreeView.tsx | 1 + .../collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/FormattedTextBox.tsx | 10 ++++++---- 4 files changed, 9 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 2c5940467..ee2a57bd3 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,7 +1,7 @@ import { library, IconProp } from '@fortawesome/fontawesome-svg-core'; import { faLink, faTag, faTimes, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faStopCircle, faCloudUploadAlt, faSyncAlt, faShare } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, computed, observable, reaction, runInAction } from "mobx"; +import { action, computed, observable, reaction, runInAction, trace } from "mobx"; import { observer } from "mobx-react"; import { Doc } from "../../new_fields/Doc"; import { List } from "../../new_fields/List"; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 7e1aacd5d..6e284a76f 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -373,6 +373,7 @@ class TreeView extends React.Component { return <>
, - bounds: (pos.x !== undefined && pos.y !== undefined) ? { x: pos.x, y: pos.y, z: pos.z, width: NumCast(pos.width), height: NumCast(pos.height) } : undefined + bounds: { x: pos.x || 0, y: pos.y || 0, z: pos.z, width: NumCast(pos.width), height: NumCast(pos.height) } }); } } diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 91596e825..876d4c428 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -36,6 +36,7 @@ import { GoogleApiClientUtils, Pulls, Pushes } from '../../apis/google_docs/Goog import { DocumentDecorations } from '../DocumentDecorations'; import { DictationManager } from '../../util/DictationManager'; import { ReplaceStep } from 'prosemirror-transform'; +import { DocumentType } from '../../documents/DocumentTypes'; library.add(faEdit); library.add(faSmile, faTextHeight, faUpload); @@ -256,10 +257,11 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe let model: NodeType = (url.includes(".mov") || url.includes(".mp4")) ? schema.nodes.video : schema.nodes.image; this._editorView!.dispatch(this._editorView!.state.tr.insert(0, model.create({ src: url }))); e.stopPropagation(); - } else { - if (de.data instanceof DragManager.DocumentDragData) { - this.props.Document.layout = de.data.draggedDocuments[0]; - de.data.draggedDocuments[0].isTemplate = true; + } else if (de.data instanceof DragManager.DocumentDragData) { + const draggedDoc = de.data.draggedDocuments.length && de.data.draggedDocuments[0]; + if (draggedDoc && draggedDoc.type === DocumentType.TEXT && StrCast(draggedDoc.layout) != "") { + this.props.Document.layout = draggedDoc; + draggedDoc.isTemplate = true; e.stopPropagation(); } } -- cgit v1.2.3-70-g09d2 From db44339760b07afeb0d383b44783ec96860bf51e Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 23 Aug 2019 17:53:15 -0400 Subject: fixed imagebox overflow. --- src/client/views/nodes/ImageBox.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index b1afa3f7d..00c069e1f 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -65,6 +65,7 @@ display:flex; align-items: center; height:100%; + overflow:hidden; .imageBox-fadeBlocker { width:100%; height:100%; -- cgit v1.2.3-70-g09d2 From dee6904f0fd4d54862bfd1c86611be294517951c Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 23 Aug 2019 18:03:47 -0400 Subject: fixed toggleDetail layout. --- src/new_fields/Doc.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index 1d529ac84..6f1ef38d1 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -589,7 +589,8 @@ export namespace Doc { let miniLayout = await PromiseValue(d.miniLayout); let detailLayout = await PromiseValue(d.detailedLayout); d.layout !== miniLayout ? miniLayout && (d.layout = d.miniLayout) : detailLayout && (d.layout = detailLayout); - if (d.layout === detailLayout) Doc.GetProto(d).nativeWidth = Doc.GetProto(d).nativeHeight = undefined; + if (d.layout === detailLayout) d.nativeWidth = d.nativeHeight = 0; + if (StrCast(d.layout) !== "") d.nativeWidth = d.nativeHeight = undefined; }); } export function UseDetailLayout(d: Doc) { -- cgit v1.2.3-70-g09d2 From c752994552be6d8a7e91093bf9d64896fd51138f Mon Sep 17 00:00:00 2001 From: monikahedman Date: Fri, 23 Aug 2019 18:36:56 -0400 Subject: finding all collections --- src/client/views/linking/LinkFollowBox.tsx | 126 ++++++++++++++++++++++++++++- src/client/views/nodes/WebBox.tsx | 1 - src/client/views/search/SearchItem.tsx | 1 + 3 files changed, 123 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/linking/LinkFollowBox.tsx b/src/client/views/linking/LinkFollowBox.tsx index 8cd26bdec..6d4f3633e 100644 --- a/src/client/views/linking/LinkFollowBox.tsx +++ b/src/client/views/linking/LinkFollowBox.tsx @@ -1,4 +1,4 @@ -import { observable, computed, action, trace, ObservableMap } from "mobx"; +import { observable, computed, action, trace, ObservableMap, runInAction } from "mobx"; import React = require("react"); import { observer } from "mobx-react"; import { FieldViewProps, FieldView } from "../nodes/FieldView"; @@ -11,6 +11,8 @@ import { SelectionManager } from "../../util/SelectionManager"; import { DocumentManager } from "../../util/DocumentManager"; import { DocumentView } from "../nodes/DocumentView"; import "./LinkFollowBox.scss"; +import { SearchUtil } from "../../util/SearchUtil"; +import { Id } from "../../../new_fields/FieldSymbols"; enum FollowModes { OPENTAB = "Open in Tab", @@ -25,6 +27,60 @@ enum FollowOptions { NOZOOM = "no zoom", } +// @observer +// export class SelectorContextMenu extends React.Component { +// @observable private _docs: { col: Doc, target: Doc }[] = []; +// @observable private _otherDocs: { col: Doc, target: Doc }[] = []; + +// constructor(props: any) { +// super(props); +// this.fetchDocuments(); +// } + +// async fetchDocuments() { +// let aliases = (await SearchUtil.GetViewsOfDocument(this.props.doc)).filter(doc => doc !== this.props.doc); +// const { docs } = await SearchUtil.Search("", true, { fq: `data_l:"${this.props.doc[Id]}"` }); +// const map: Map = new Map; +// const allDocs = await Promise.all(aliases.map(doc => SearchUtil.Search("", true, { fq: `data_l:"${doc[Id]}"` }).then(result => result.docs))); +// allDocs.forEach((docs, index) => docs.forEach(doc => map.set(doc, aliases[index]))); +// docs.forEach(doc => map.delete(doc)); +// runInAction(() => { +// this._docs = docs.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).map(doc => ({ col: doc, target: this.props.doc })); +// this._otherDocs = Array.from(map.entries()).filter(entry => !Doc.AreProtosEqual(entry[0], CollectionDockingView.Instance.props.Document)).map(([col, target]) => ({ col, target })); +// }); +// } + +// getOnClick({ col, target }: { col: Doc, target: Doc }) { +// return () => { +// col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; +// if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { +// const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2; +// const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2; +// col.panX = newPanX; +// col.panY = newPanY; +// } +// CollectionDockingView.Instance.AddRightSplit(col, undefined); +// }; +// } +// render() { +// return ( +//
+//

Contexts:

+// {[...this._docs, ...this._otherDocs].map(doc => { +// let item = React.createRef(); +// return
+//
doc.col, undefined, undefined, undefined, undefined, () => SearchBox.Instance.closeSearch())}> +// +//
+// {doc.col.title} +//
; +// })} +//
+// ); +// } +// } + @observer export class LinkFollowBox extends React.Component { @@ -34,18 +90,45 @@ export class LinkFollowBox extends React.Component { @observable static destinationDoc: Doc | undefined = undefined; @observable static sourceDoc: Doc | undefined = undefined; @observable selectedMode: string = ""; + @observable selectedContext: any = undefined; @observable selectedOption: string = ""; + @observable selectedContextString: string = ""; + + @observable private _docs: { col: Doc, target: Doc }[] = []; + @observable private _otherDocs: { col: Doc, target: Doc }[] = []; constructor(props: FieldViewProps) { super(props); LinkFollowBox.Instance = this; } + async fetchDocuments() { + if (LinkFollowBox.destinationDoc) { + let dest: Doc = LinkFollowBox.destinationDoc; + let aliases = await SearchUtil.GetViewsOfDocument(Doc.GetProto(dest)); + const { docs } = await SearchUtil.Search("", true, { fq: `data_l:"${dest[Id]}"` }); + const map: Map = new Map; + const allDocs = await Promise.all(aliases.map(doc => SearchUtil.Search("", true, { fq: `data_l:"${doc[Id]}"` }).then(result => result.docs))); + allDocs.forEach((docs, index) => docs.forEach(doc => map.set(doc, aliases[index]))); + docs.forEach(doc => map.delete(doc)); + runInAction(() => { + this._docs = docs.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).map(doc => ({ col: doc, target: dest })); + this._otherDocs = Array.from(map.entries()).filter(entry => !Doc.AreProtosEqual(entry[0], CollectionDockingView.Instance.props.Document)).map(([col, target]) => ({ col, target })); + }); + } + } + @action setLinkDocs = (linkDoc: Doc, source: Doc, dest: Doc) => { + this.selectedContext = undefined; + this.selectedContextString = ""; + this.selectedMode = ""; + this.selectedOption = ""; + LinkFollowBox.linkDoc = linkDoc; LinkFollowBox.sourceDoc = source; LinkFollowBox.destinationDoc = dest; + this.fetchDocuments(); } unhighlight = () => { @@ -230,6 +313,12 @@ export class LinkFollowBox extends React.Component { this.selectedOption = target.value; } + @action + handleContextChange = (e: React.ChangeEvent) => { + let target = e.target as HTMLInputElement; + this.selectedContextString = target.value; + } + @computed get availableModes() { return ( @@ -279,7 +368,36 @@ export class LinkFollowBox extends React.Component { } @computed - get contexts() { + get availableContexts() { + return ( +
+
+ {[...this._docs, ...this._otherDocs].map(doc => { + if (doc && doc.target) { + return

; + } + })} +
+ ); + } + + @computed + get availableOptions() { return (
@@ -299,13 +417,13 @@ export class LinkFollowBox extends React.Component {
Context
- + {this.selectedMode !== "" ? this.availableContexts : "Please select a mode to view contexts"}
Options
- + {this.selectedContextString !== "" ? this.availableOptions : "Please select a context to view options"}
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 095b0094e..29eef27a0 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -24,7 +24,6 @@ import { SelectionManager } from "../../util/SelectionManager"; import { Docs } from "../../documents/Documents"; library.add(faStickyNote); -library.add(faStickyNote) @observer export class WebBox extends React.Component { diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 41fc49c2e..567bc6c97 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -63,6 +63,7 @@ export class SelectorContextMenu extends React.Component { runInAction(() => { this._docs = docs.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).map(doc => ({ col: doc, target: this.props.doc })); this._otherDocs = Array.from(map.entries()).filter(entry => !Doc.AreProtosEqual(entry[0], CollectionDockingView.Instance.props.Document)).map(([col, target]) => ({ col, target })); + }); } -- cgit v1.2.3-70-g09d2 From 91336f66d30c6a8830d9b69d7263ac72ecca3141 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Fri, 23 Aug 2019 18:40:42 -0400 Subject: removed autoheight --- src/client/views/DocumentDecorations.tsx | 3 --- 1 file changed, 3 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index a28088032..bd510c3c5 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -694,9 +694,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> let canPush = this.targetDoc.data && this.targetDoc.data instanceof RichTextField; if (!canPush) return (null); let published = Doc.GetProto(this.targetDoc)[GoogleRef] !== undefined; - if (!published) { - this.targetDoc.autoHeight = true; - } let icon: IconProp = published ? (this.pushIcon as any) : cloud; return (
-- cgit v1.2.3-70-g09d2 From d237c67b236ce66e9bc711931e4c283a8c1e95f2 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Fri, 23 Aug 2019 18:46:35 -0400 Subject: linter --- src/client/views/nodes/FormattedTextBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 876d4c428..d6ba1700a 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -259,7 +259,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe e.stopPropagation(); } else if (de.data instanceof DragManager.DocumentDragData) { const draggedDoc = de.data.draggedDocuments.length && de.data.draggedDocuments[0]; - if (draggedDoc && draggedDoc.type === DocumentType.TEXT && StrCast(draggedDoc.layout) != "") { + if (draggedDoc && draggedDoc.type === DocumentType.TEXT && StrCast(draggedDoc.layout) !== "") { this.props.Document.layout = draggedDoc; draggedDoc.isTemplate = true; e.stopPropagation(); -- cgit v1.2.3-70-g09d2 From 34699f81960504143057451a1959c80f268c07d4 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Fri, 23 Aug 2019 22:18:42 -0400 Subject: pan works --- src/client/views/linking/LinkFollowBox.tsx | 358 ++++++++++++++++------------- 1 file changed, 196 insertions(+), 162 deletions(-) (limited to 'src') diff --git a/src/client/views/linking/LinkFollowBox.tsx b/src/client/views/linking/LinkFollowBox.tsx index 6d4f3633e..f58e0c8b0 100644 --- a/src/client/views/linking/LinkFollowBox.tsx +++ b/src/client/views/linking/LinkFollowBox.tsx @@ -1,4 +1,4 @@ -import { observable, computed, action, trace, ObservableMap, runInAction } from "mobx"; +import { observable, computed, action, trace, ObservableMap, runInAction, reaction } from "mobx"; import React = require("react"); import { observer } from "mobx-react"; import { FieldViewProps, FieldView } from "../nodes/FieldView"; @@ -13,6 +13,7 @@ import { DocumentView } from "../nodes/DocumentView"; import "./LinkFollowBox.scss"; import { SearchUtil } from "../../util/SearchUtil"; import { Id } from "../../../new_fields/FieldSymbols"; +import { listSpec } from "../../../new_fields/Schema"; enum FollowModes { OPENTAB = "Open in Tab", @@ -27,60 +28,6 @@ enum FollowOptions { NOZOOM = "no zoom", } -// @observer -// export class SelectorContextMenu extends React.Component { -// @observable private _docs: { col: Doc, target: Doc }[] = []; -// @observable private _otherDocs: { col: Doc, target: Doc }[] = []; - -// constructor(props: any) { -// super(props); -// this.fetchDocuments(); -// } - -// async fetchDocuments() { -// let aliases = (await SearchUtil.GetViewsOfDocument(this.props.doc)).filter(doc => doc !== this.props.doc); -// const { docs } = await SearchUtil.Search("", true, { fq: `data_l:"${this.props.doc[Id]}"` }); -// const map: Map = new Map; -// const allDocs = await Promise.all(aliases.map(doc => SearchUtil.Search("", true, { fq: `data_l:"${doc[Id]}"` }).then(result => result.docs))); -// allDocs.forEach((docs, index) => docs.forEach(doc => map.set(doc, aliases[index]))); -// docs.forEach(doc => map.delete(doc)); -// runInAction(() => { -// this._docs = docs.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).map(doc => ({ col: doc, target: this.props.doc })); -// this._otherDocs = Array.from(map.entries()).filter(entry => !Doc.AreProtosEqual(entry[0], CollectionDockingView.Instance.props.Document)).map(([col, target]) => ({ col, target })); -// }); -// } - -// getOnClick({ col, target }: { col: Doc, target: Doc }) { -// return () => { -// col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; -// if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { -// const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2; -// const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2; -// col.panX = newPanX; -// col.panY = newPanY; -// } -// CollectionDockingView.Instance.AddRightSplit(col, undefined); -// }; -// } -// render() { -// return ( -//
-//

Contexts:

-// {[...this._docs, ...this._otherDocs].map(doc => { -// let item = React.createRef(); -// return
-//
doc.col, undefined, undefined, undefined, undefined, () => SearchBox.Instance.closeSearch())}> -// -//
-// {doc.col.title} -//
; -// })} -//
-// ); -// } -// } - @observer export class LinkFollowBox extends React.Component { @@ -93,6 +40,8 @@ export class LinkFollowBox extends React.Component { @observable selectedContext: any = undefined; @observable selectedOption: string = ""; @observable selectedContextString: string = ""; + @observable sourceView: DocumentView | undefined = undefined; + @observable canPan: boolean = false; @observable private _docs: { col: Doc, target: Doc }[] = []; @observable private _otherDocs: { col: Doc, target: Doc }[] = []; @@ -102,6 +51,53 @@ export class LinkFollowBox extends React.Component { LinkFollowBox.Instance = this; } + componentDidMount = () => { + this.resetVars(); + + reaction( + () => LinkFollowBox.destinationDoc, + async newLinkDestination => { + if (LinkFollowBox.destinationDoc && this.sourceView && this.sourceView.props.ContainingCollectionView) { + let colView = this.sourceView.props.ContainingCollectionView; + let colDoc = colView.props.Document; + let shouldReturn = true; + if (colDoc.viewType && colDoc.viewType === 1) { + //this means its in a freeform collection + let docs = Cast(colDoc.data, listSpec(Doc), []); + let aliases = await SearchUtil.GetViewsOfDocument(Doc.GetProto(LinkFollowBox.destinationDoc)); + + aliases.forEach(alias => { + let docs2 = docs; + let res = docs2.filter(doc => doc === alias); + if (res.length > 0) { + runInAction(() => { + this.canPan = true; + shouldReturn = false; + }); + } + }); + + if (shouldReturn) { (() => { this.canPan = false; }); return; } + } + else { runInAction(() => { this.canPan = false; }); return; } + } + else { runInAction(() => { this.canPan = false; }); return; } + } + ); + } + + @action + resetVars = () => { + this.selectedContext = undefined; + this.selectedContextString = ""; + this.selectedMode = ""; + this.selectedOption = ""; + LinkFollowBox.linkDoc = undefined; + LinkFollowBox.sourceDoc = undefined; + LinkFollowBox.destinationDoc = undefined; + this.sourceView = undefined; + } + async fetchDocuments() { if (LinkFollowBox.destinationDoc) { let dest: Doc = LinkFollowBox.destinationDoc; @@ -120,15 +116,18 @@ export class LinkFollowBox extends React.Component { @action setLinkDocs = (linkDoc: Doc, source: Doc, dest: Doc) => { - this.selectedContext = undefined; - this.selectedContextString = ""; - this.selectedMode = ""; - this.selectedOption = ""; + this.resetVars(); LinkFollowBox.linkDoc = linkDoc; LinkFollowBox.sourceDoc = source; LinkFollowBox.destinationDoc = dest; this.fetchDocuments(); + + SelectionManager.SelectedDocuments().forEach(dv => { + if (dv.props.Document === LinkFollowBox.sourceDoc) { + this.sourceView = dv; + } + }); } unhighlight = () => { @@ -137,147 +136,156 @@ export class LinkFollowBox extends React.Component { } @action - highlightDoc = (destinationDoc: Doc) => { - document.removeEventListener("pointerdown", this.unhighlight); - Doc.HighlightDoc(destinationDoc); - window.setTimeout(() => { - document.addEventListener("pointerdown", this.unhighlight); - }, 10000); + highlightDoc = () => { + if (LinkFollowBox.destinationDoc) { + document.removeEventListener("pointerdown", this.unhighlight); + Doc.HighlightDoc(LinkFollowBox.destinationDoc); + window.setTimeout(() => { + document.addEventListener("pointerdown", this.unhighlight); + }, 10000); + } } @undoBatch - openFullScreen = (destinationDoc: Doc) => { - let view: DocumentView | null = DocumentManager.Instance.getDocumentView(destinationDoc); - view && CollectionDockingView.Instance && CollectionDockingView.Instance.OpenFullScreen(view); - SelectionManager.DeselectAll(); + openFullScreen = () => { + if (LinkFollowBox.destinationDoc) { + let view: DocumentView | null = DocumentManager.Instance.getDocumentView(LinkFollowBox.destinationDoc); + view && CollectionDockingView.Instance && CollectionDockingView.Instance.OpenFullScreen(view); + SelectionManager.DeselectAll(); + } } // should container be a doc or documentview or what? This one needs work and is more long term @undoBatch - openInContainer = (destinationDoc: Doc, options: { container: Doc }) => { + openInContainer = (options: { container: Doc }) => { } // NOT TESTED @undoBatch - openLinkColRight = (destinationDoc: Doc, options: { context: Doc }) => { - options.context = Doc.IsPrototype(options.context) ? Doc.MakeDelegate(options.context) : options.context; - if (NumCast(options.context.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { - const newPanX = NumCast(destinationDoc.x) + NumCast(destinationDoc.width) / NumCast(destinationDoc.zoomBasis, 1) / 2; - const newPanY = NumCast(destinationDoc.y) + NumCast(destinationDoc.height) / NumCast(destinationDoc.zoomBasis, 1) / 2; - options.context.panX = newPanX; - options.context.panY = newPanY; - } - CollectionDockingView.Instance.AddRightSplit(options.context, undefined); + openLinkColRight = (options: { context: Doc }) => { + if (LinkFollowBox.destinationDoc) { + options.context = Doc.IsPrototype(options.context) ? Doc.MakeDelegate(options.context) : options.context; + if (NumCast(options.context.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { + const newPanX = NumCast(LinkFollowBox.destinationDoc.x) + NumCast(LinkFollowBox.destinationDoc.width) / NumCast(LinkFollowBox.destinationDoc.zoomBasis, 1) / 2; + const newPanY = NumCast(LinkFollowBox.destinationDoc.y) + NumCast(LinkFollowBox.destinationDoc.height) / NumCast(LinkFollowBox.destinationDoc.zoomBasis, 1) / 2; + options.context.panX = newPanX; + options.context.panY = newPanY; + } + CollectionDockingView.Instance.AddRightSplit(options.context, undefined); - this.highlightDoc(destinationDoc); - SelectionManager.DeselectAll(); + this.highlightDoc(); + SelectionManager.DeselectAll(); + } } @undoBatch - openLinkRight = (destinationDoc: Doc) => { - let alias = Doc.MakeAlias(destinationDoc); - CollectionDockingView.Instance.AddRightSplit(alias, undefined); - this.highlightDoc(destinationDoc); - SelectionManager.DeselectAll(); + openLinkRight = () => { + if (LinkFollowBox.destinationDoc) { + let alias = Doc.MakeAlias(LinkFollowBox.destinationDoc); + CollectionDockingView.Instance.AddRightSplit(alias, undefined); + this.highlightDoc(); + SelectionManager.DeselectAll(); + } } @undoBatch - jumpToLink = async (destinationDoc: Doc, options: { shouldZoom: boolean, linkDoc: Doc }) => { - let jumpToDoc = destinationDoc; - let pdfDoc = FieldValue(Cast(destinationDoc, Doc)); - if (pdfDoc) { - jumpToDoc = pdfDoc; - } - let proto = Doc.GetProto(options.linkDoc); - let targetContext = await Cast(proto.targetContext, Doc); - let sourceContext = await Cast(proto.sourceContext, Doc); + jumpToLink = async (options: { shouldZoom: boolean }) => { + if (LinkFollowBox.destinationDoc && LinkFollowBox.linkDoc) { + let jumpToDoc: Doc = LinkFollowBox.destinationDoc; + let pdfDoc = FieldValue(Cast(LinkFollowBox.destinationDoc, Doc)); + if (pdfDoc) { + jumpToDoc = pdfDoc; + } + let proto = Doc.GetProto(LinkFollowBox.linkDoc); + let targetContext = await Cast(proto.targetContext, Doc); + let sourceContext = await Cast(proto.sourceContext, Doc); - let dockingFunc = (document: Doc) => { this.props.addDocTab(document, undefined, "inTab"); SelectionManager.DeselectAll(); }; + let dockingFunc = (document: Doc) => { this.props.addDocTab(document, undefined, "inTab"); SelectionManager.DeselectAll(); }; - if (destinationDoc === options.linkDoc.anchor2 && targetContext) { - DocumentManager.Instance.jumpToDocument(jumpToDoc, options.shouldZoom, false, async document => dockingFunc(document), undefined, targetContext); - } - else if (destinationDoc === options.linkDoc.anchor1 && sourceContext) { - DocumentManager.Instance.jumpToDocument(jumpToDoc, options.shouldZoom, false, document => dockingFunc(sourceContext!)); - } - else if (DocumentManager.Instance.getDocumentView(jumpToDoc)) { - DocumentManager.Instance.jumpToDocument(jumpToDoc, options.shouldZoom, undefined, undefined, NumCast((destinationDoc === options.linkDoc.anchor2 ? options.linkDoc.anchor2Page : options.linkDoc.anchor1Page))); + if (LinkFollowBox.destinationDoc === LinkFollowBox.linkDoc.anchor2 && targetContext) { + DocumentManager.Instance.jumpToDocument(jumpToDoc, options.shouldZoom, false, async document => dockingFunc(document), undefined, targetContext); + } + else if (LinkFollowBox.destinationDoc === LinkFollowBox.linkDoc.anchor1 && sourceContext) { + DocumentManager.Instance.jumpToDocument(jumpToDoc, options.shouldZoom, false, document => dockingFunc(sourceContext!)); + } + else if (DocumentManager.Instance.getDocumentView(jumpToDoc)) { + DocumentManager.Instance.jumpToDocument(jumpToDoc, options.shouldZoom, undefined, undefined, + NumCast((LinkFollowBox.destinationDoc === LinkFollowBox.linkDoc.anchor2 ? LinkFollowBox.linkDoc.anchor2Page : LinkFollowBox.linkDoc.anchor1Page))); - } - else { - DocumentManager.Instance.jumpToDocument(jumpToDoc, options.shouldZoom, false, dockingFunc); - } + } + else { + DocumentManager.Instance.jumpToDocument(jumpToDoc, options.shouldZoom, false, dockingFunc); + } - this.highlightDoc(destinationDoc); - SelectionManager.DeselectAll(); + this.highlightDoc(); + SelectionManager.DeselectAll(); + } } @undoBatch - openLinkTab = (destinationDoc: Doc) => { - let fullScreenAlias = Doc.MakeAlias(destinationDoc); - this.props.addDocTab(fullScreenAlias, undefined, "inTab"); + openLinkTab = () => { + if (LinkFollowBox.destinationDoc) { + let fullScreenAlias = Doc.MakeAlias(LinkFollowBox.destinationDoc); + this.props.addDocTab(fullScreenAlias, undefined, "inTab"); - this.highlightDoc(destinationDoc); - SelectionManager.DeselectAll(); + this.highlightDoc(); + SelectionManager.DeselectAll(); + } } // NOT TESTED @undoBatch - openLinkColTab = (destinationDoc: Doc, options: { context: Doc }) => { - options.context = Doc.IsPrototype(options.context) ? Doc.MakeDelegate(options.context) : options.context; - if (NumCast(options.context.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { - const newPanX = NumCast(destinationDoc.x) + NumCast(destinationDoc.width) / NumCast(destinationDoc.zoomBasis, 1) / 2; - const newPanY = NumCast(destinationDoc.y) + NumCast(destinationDoc.height) / NumCast(destinationDoc.zoomBasis, 1) / 2; - options.context.panX = newPanX; - options.context.panY = newPanY; - } - this.props.addDocTab(options.context, undefined, "inTab"); + openLinkColTab = (options: { context: Doc }) => { + if (LinkFollowBox.destinationDoc) { + options.context = Doc.IsPrototype(options.context) ? Doc.MakeDelegate(options.context) : options.context; + if (NumCast(options.context.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { + const newPanX = NumCast(LinkFollowBox.destinationDoc.x) + NumCast(LinkFollowBox.destinationDoc.width) / NumCast(LinkFollowBox.destinationDoc.zoomBasis, 1) / 2; + const newPanY = NumCast(LinkFollowBox.destinationDoc.y) + NumCast(LinkFollowBox.destinationDoc.height) / NumCast(LinkFollowBox.destinationDoc.zoomBasis, 1) / 2; + options.context.panX = newPanX; + options.context.panY = newPanY; + } + this.props.addDocTab(options.context, undefined, "inTab"); - this.highlightDoc(destinationDoc); - SelectionManager.DeselectAll(); + this.highlightDoc(); + SelectionManager.DeselectAll(); + } } @undoBatch - openLinkInPlace = (destinationDoc: Doc, options: { sourceDoc: Doc, linkDoc: Doc }) => { + openLinkInPlace = (options: { shouldZoom: boolean }) => { - let alias = Doc.MakeAlias(destinationDoc); - let y = NumCast(options.sourceDoc.y); - let x = NumCast(options.sourceDoc.x); + if (LinkFollowBox.destinationDoc && LinkFollowBox.sourceDoc) { + let alias = Doc.MakeAlias(LinkFollowBox.destinationDoc); + let y = NumCast(LinkFollowBox.sourceDoc.y); + let x = NumCast(LinkFollowBox.sourceDoc.x); - let width = NumCast(options.sourceDoc.width); - let height = NumCast(options.sourceDoc.height); + let width = NumCast(LinkFollowBox.sourceDoc.width); + let height = NumCast(LinkFollowBox.sourceDoc.height); - alias.x = x + width + 30; - alias.y = y; - alias.width = width; - alias.height = height; + alias.x = x + width + 30; + alias.y = y; + alias.width = width; + alias.height = height; - SelectionManager.SelectedDocuments().map(dv => { - if (dv.props.Document === options.sourceDoc) { - dv.props.addDocument && dv.props.addDocument(alias, false); - } - }); + SelectionManager.SelectedDocuments().map(dv => { + if (dv.props.Document === LinkFollowBox.sourceDoc) { + dv.props.addDocument && dv.props.addDocument(alias, false); + } + }); - this.jumpToLink(destinationDoc, { shouldZoom: false, linkDoc: options.linkDoc }); + this.jumpToLink({ shouldZoom: false }); - this.highlightDoc(destinationDoc); - SelectionManager.DeselectAll(); + this.highlightDoc(); + SelectionManager.DeselectAll(); + } } //set this to be the default link behavior, can be any of the above - private defaultLinkBehavior: (destinationDoc: Doc, options?: any) => void = this.openLinkInPlace; + private defaultLinkBehavior: (options?: any) => void = this.openLinkInPlace; // private currentLinkBehavior: (destinationDoc: Doc, options?: any) => void = this.defaultLinkBehavior; - @computed - get LinkFollowTitle(): string { - if (LinkFollowBox.linkDoc) { - return StrCast(LinkFollowBox.linkDoc.title); - } - return "No Link Selected"; - } - @action currentLinkBehavior = () => { if (this.selectedMode === FollowModes.INPLACE) { @@ -319,6 +327,23 @@ export class LinkFollowBox extends React.Component { this.selectedContextString = target.value; } + // async canPan() { + + // } + + @computed + get canOpenInPlace() { + if (this.sourceView && this.sourceView.props.ContainingCollectionView) { + let colView = this.sourceView.props.ContainingCollectionView; + let colDoc = colView.props.Document; + if (colDoc.viewType && colDoc.viewType === 1) { + //this means its in a freeform collection + return true; + } + } + return false; + } + @computed get availableModes() { return ( @@ -328,7 +353,8 @@ export class LinkFollowBox extends React.Component { name="mode" value={FollowModes.OPENRIGHT} checked={this.selectedMode === FollowModes.OPENRIGHT} - onChange={this.handleModeChange} /> + onChange={this.handleModeChange} + disabled={false} /> {FollowModes.OPENRIGHT}




@@ -372,7 +402,7 @@ export class LinkFollowBox extends React.Component { return (