diff options
Diffstat (limited to 'src/client/views')
| -rw-r--r-- | src/client/views/InkingCanvas.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/InkingControl.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/Main.scss | 11 | ||||
| -rw-r--r-- | src/client/views/Main.tsx | 195 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionDockingView.tsx | 19 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.scss | 1 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionView.tsx | 3 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewBase.tsx | 91 | ||||
| -rw-r--r-- | src/client/views/nodes/FieldView.tsx | 3 | ||||
| -rw-r--r-- | src/client/views/nodes/FormattedTextBox.tsx | 2 |
11 files changed, 195 insertions, 138 deletions
diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index d7b8bf3c3..8d0121035 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -46,7 +46,7 @@ export class InkingCanvas extends React.Component<InkCanvasProps> { } set inkData(value: StrokeMap) { - this.props.Document.SetOnPrototype(KeyStore.Ink, new InkField(value)); + this.props.Document.SetDataOnPrototype(KeyStore.Ink, value, InkField); } componentDidMount() { diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index ad6bbd476..eb2172d03 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -40,7 +40,7 @@ export class InkingControl extends React.Component { if (SelectionManager.SelectedDocuments().length == 1) { var sdoc = SelectionManager.SelectedDocuments()[0]; if (sdoc.props.ContainingCollectionView && sdoc.props.ContainingCollectionView) { - sdoc.props.Document.SetOnPrototype(KeyStore.BackgroundColor, new TextField(color.hex)); + sdoc.props.Document.SetDataOnPrototype(KeyStore.BackgroundColor, color.hex, TextField); } } } diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index bb42db202..698a9c617 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -154,7 +154,16 @@ button:hover { cursor: pointer; } } - +#main-div { + width:100%; + height:100%; + position:absolute; +} +#mainContent-div { + width:100%; + height:100%; + position:absolute; +} #add-options-content { display: table; opacity: 1; diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 26a07fdfe..ac51a7d87 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -1,4 +1,4 @@ -import { action, configure, observable, runInAction } from 'mobx'; +import { action, configure, observable, runInAction, trace, computed } from 'mobx'; import "normalize.css"; import * as React from 'react'; import * as ReactDOM from 'react-dom'; @@ -42,6 +42,9 @@ import { ServerUtils } from '../../server/ServerUtil'; import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils'; import { Field, Opt } from '../../fields/Field'; import { ListField } from '../../fields/ListField'; +import { map } from 'bluebird'; +import { Gateway, Settings } from '../northstar/manager/Gateway'; +import { Catalog } from '../northstar/model/idea/idea'; @observer export class Main extends React.Component { @@ -51,18 +54,23 @@ export class Main extends React.Component { @observable private userWorkspaces: Document[] = []; @observable public pwidth: number = 0; @observable public pheight: number = 0; + @observable private _northstarCatalog: Catalog | undefined = undefined; - private mainDocId: string | undefined; + public mainDocId: string | undefined; private currentUser?: DashUserModel; + public static Instance: Main; constructor(props: Readonly<{}>) { super(props); + Main.Instance = this; // causes errors to be generated when modifying an observable outside of an action configure({ enforceActions: "observed" }); if (window.location.pathname !== RouteStore.home) { let pathname = window.location.pathname.split("/"); this.mainDocId = pathname[pathname.length - 1]; - } + }; + + this.initializeNorthstar(); CurrentUserUtils.loadCurrentUser(); @@ -79,9 +87,26 @@ export class Main extends React.Component { library.add(faMusic); this.initEventListeners(); - Documents.initProtos(() => { - this.initAuthenticationRouters(); + Documents.initProtos(() => this.initAuthenticationRouters()); + } + + @action SetNorthstarCatalog(ctlog: Catalog) { + this._northstarCatalog = ctlog; + if (this._northstarCatalog) { + console.log("CATALOG " + this._northstarCatalog.schemas); + } + } + async initializeNorthstar(): Promise<void> { + let envPath = "assets/env.json"; + const response = await fetch(envPath, { + redirect: "follow", + method: "GET", + credentials: "include" }); + const env = await response.json(); + Settings.Instance.Update(env); + let cat = Gateway.Instance.ClearCatalog(); + cat.then(async () => this.SetNorthstarCatalog(await Gateway.Instance.GetCatalog())); } onHistory = () => { @@ -194,112 +219,114 @@ export class Main extends React.Component { } } - render() { - let imgRef = React.createRef<HTMLDivElement>(); - let pdfRef = React.createRef<HTMLDivElement>(); - let webRef = React.createRef<HTMLDivElement>(); - let textRef = React.createRef<HTMLDivElement>(); - let schemaRef = React.createRef<HTMLDivElement>(); - let videoRef = React.createRef<HTMLDivElement>(); - let audioRef = React.createRef<HTMLDivElement>(); - let colRef = React.createRef<HTMLDivElement>(); - let workspacesRef = React.createRef<HTMLDivElement>(); - let logoutRef = React.createRef<HTMLDivElement>(); + screenToLocalTransform = () => Transform.Identity + pwidthFunc = () => this.pwidth; + pheightFunc = () => this.pheight; + focusDocument = (doc: Document) => { } + noScaling = () => 1; + + get content() { + return !this.mainContainer ? (null) : + <DocumentView Document={this.mainContainer} + AddDocument={undefined} + RemoveDocument={undefined} + ScreenToLocalTransform={this.screenToLocalTransform} + ContentScaling={this.noScaling} + PanelWidth={this.pwidthFunc} + PanelHeight={this.pheightFunc} + isTopMost={true} + SelectOnLoad={false} + focus={this.focusDocument} + ContainingCollectionView={undefined} /> + } + /* for the expandable add nodes menu. Not included with the miscbuttons because once it expands it expands the whole div with it, making canvas interactions limited. */ + @computed + get nodesMenu() { let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; let pdfurl = "http://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf" let weburl = "https://cs.brown.edu/courses/cs166/"; let audiourl = "http://techslides.com/demos/samples/sample.mp3"; let videourl = "http://techslides.com/demos/sample-videos/small.mp4"; - let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})) let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" })) let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" })); - let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" })); + let addSchemaNode = action(() => Documents.SchemaDocument([], { width: 200, height: 200, title: "a schema collection" })); let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 200, height: 200, title: "video node" })); let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, height: 200, title: "a schema collection" })); let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" })); let addWebNode = action(() => Documents.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" })); let addAudioNode = action(() => Documents.AudioDocument(audiourl, { width: 200, height: 200, title: "audio node" })) + let btns = [ + [React.createRef<HTMLDivElement>(), "font", "Add Textbox", addTextNode], + [React.createRef<HTMLDivElement>(), "image", "Add Image", addImageNode], + [React.createRef<HTMLDivElement>(), "file-pdf", "Add PDF", addPDFNode], + [React.createRef<HTMLDivElement>(), "film", "Add Video", addVideoNode], + [React.createRef<HTMLDivElement>(), "music", "Add Audio", addAudioNode], + [React.createRef<HTMLDivElement>(), "globe-asia", "Add Web Clipping", addWebNode], + [React.createRef<HTMLDivElement>(), "object-group", "Add Collection", addColNode], + [React.createRef<HTMLDivElement>(), "table", "Add Schema", addSchemaNode], + ] + let addClick = (creator: () => Document) => action(() => this.mainfreeform!.GetList<Document>(KeyStore.Data, []).push(creator())); + return < div id="add-nodes-menu" > + <input type="checkbox" id="add-menu-toggle" /> + <label htmlFor="add-menu-toggle" title="Add Node"><p>+</p></label> + + <div id="add-options-content"> + <ul id="add-options-list"> + {btns.map(btn => + <li key={btn[1] as string} ><div ref={btn[0] as React.RefObject<HTMLDivElement>}> + <button className="round-button add-button" title={btn[2] as string} onPointerDown={setupDrag(btn[0] as React.RefObject<HTMLDivElement>, btn[3] as any)} onClick={addClick(btn[3] as any)}> + <FontAwesomeIcon icon={btn[1] as any} size="sm" /> + </button> + </div></li>)} + </ul> + </div> + </div > + } + + /* @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() { + let workspacesRef = React.createRef<HTMLDivElement>(); + let logoutRef = React.createRef<HTMLDivElement>(); + + let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})) + return [ + <button className="clear-db-button" key="clear-db" onClick={clearDatabase}>Clear Database</button>, + <div id="toolbar" key="toolbar"> + <button className="toolbar-button round-button" title="Undo" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button> + <button className="toolbar-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button> + <button className="toolbar-button round-button" title="Ink" onClick={() => InkingControl.Instance.toggleDisplay()}><FontAwesomeIcon icon="pen-nib" size="sm" /></button> + </div >, + <div className="main-buttonDiv" key="workspaces" style={{ top: '34px', left: '2px', position: 'absolute' }} ref={workspacesRef}> + <button onClick={this.toggleWorkspaces}>Workspaces</button></div>, + <div className="main-buttonDiv" key="logout" style={{ top: '34px', right: '1px', position: 'absolute' }} ref={logoutRef}> + <button onClick={() => request.get(ServerUtils.prepend(RouteStore.logout), () => { })}>Log Out</button></div> + ] + } + + render() { return ( - <div style={{ position: "absolute", width: "100%", height: "100%" }}> + <div id="main-div"> <Measure onResize={(r: any) => runInAction(() => { this.pwidth = r.entry.width; this.pheight = r.entry.height; })}> - {({ measureRef }) => { - if (!this.mainContainer) { - return <div></div> - } - return <div ref={measureRef} style={{ position: "absolute", width: "100%", height: "100%" }}> - <DocumentView Document={this.mainContainer} - AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity} - ContentScaling={() => 1} - PanelWidth={() => this.pwidth} - PanelHeight={() => this.pheight} - isTopMost={true} - SelectOnLoad={false} - focus={() => { }} - ContainingCollectionView={undefined} /> + {({ measureRef }) => + <div ref={measureRef} id="mainContent-div"> + {this.content} </div> - }} + } </Measure> <DocumentDecorations /> <ContextMenu /> - - <button className="clear-db-button" onClick={clearDatabase}>Clear Database</button> - - {/* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */} - < div id="toolbar" > - <button className="toolbar-button round-button" title="Undo" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button> - <button className="toolbar-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button> - <button className="toolbar-button round-button" title="Ink" onClick={() => InkingControl.Instance.toggleDisplay()}><FontAwesomeIcon icon="pen-nib" size="sm" /></button> - </div > - - <div className="main-buttonDiv" style={{ top: '34px', left: '2px', position: 'absolute' }} ref={workspacesRef}> - <button onClick={this.toggleWorkspaces}>Workspaces</button></div> - <div className="main-buttonDiv" style={{ top: '34px', right: '1px', position: 'absolute' }} ref={logoutRef}> - <button onClick={() => request.get(ServerUtils.prepend(RouteStore.logout), () => { })}>Log Out</button></div> - + {this.nodesMenu} + {this.miscButtons} <WorkspacesMenu active={this.mainContainer} open={this.openWorkspace} new={this.createNewWorkspace} allWorkspaces={this.userWorkspaces} /> - {/* for the expandable add nodes menu. Not included with the above because once it expands it expands the whole div with it, making canvas interactions limited. */} - < div id="add-nodes-menu" > - <input type="checkbox" id="add-menu-toggle" /> - <label htmlFor="add-menu-toggle" title="Add Node"><p>+</p></label> - - <div id="add-options-content"> - <ul id="add-options-list"> - <li><div ref={textRef}><button className="round-button add-button" title="Add Textbox" onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}> - <FontAwesomeIcon icon="font" size="sm" /> - </button></div></li> - <li><div ref={imgRef}><button className="round-button add-button" title="Add Image" onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}> - <FontAwesomeIcon icon="image" size="sm" /> - </button></div></li> - <li><div ref={pdfRef}><button className="round-button add-button" title="Add PDF" onPointerDown={setupDrag(pdfRef, addPDFNode)} onClick={addClick(addPDFNode)}> - <FontAwesomeIcon icon="file-pdf" size="sm" /> - </button></div></li> - <li><div ref={videoRef}><button className="round-button add-button" title="Add Video" onPointerDown={setupDrag(videoRef, addVideoNode)} onClick={addClick(addVideoNode)}> - <FontAwesomeIcon icon="film" size="sm" /> - </button></div></li> - <li><div ref={audioRef}><button className="round-button add-button" title="Add Audio" onPointerDown={setupDrag(audioRef, addAudioNode)} onClick={addClick(addAudioNode)}> - <FontAwesomeIcon icon="music" size="sm" /> - </button></div></li> - <li><div ref={webRef}><button className="round-button add-button" title="Add Web Clipping" onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}> - <FontAwesomeIcon icon="globe-asia" size="sm" /> - </button></div></li> - <li><div ref={colRef}><button className="round-button add-button" title="Add Collection" onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}> - <FontAwesomeIcon icon="object-group" size="sm" /> - </button></div></li> - <li><div ref={schemaRef}><button className="round-button add-button" title="Add Schema" onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}> - <FontAwesomeIcon icon="table" size="sm" /> - </button></div></li> - </ul> - </div> - </div > - <InkingControl /> </div> ); diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 19788447e..0f0276929 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -1,7 +1,7 @@ import * as GoldenLayout from "golden-layout"; import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; -import { action, observable, reaction } from "mobx"; +import { action, observable, reaction, trace } from "mobx"; import { observer } from "mobx-react"; import * as ReactDOM from 'react-dom'; import { Document } from "../../../fields/Document"; @@ -16,6 +16,7 @@ import "./CollectionDockingView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import React = require("react"); import { SubCollectionViewProps } from "./CollectionViewBase"; +import { ServerUtils } from "../../../server/ServerUtil"; @observer export class CollectionDockingView extends React.Component<SubCollectionViewProps> { @@ -36,6 +37,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp private _containerRef = React.createRef<HTMLDivElement>(); private _fullScreen: any = null; private _flush: boolean = false; + private _ignoreStateChange = ""; constructor(props: SubCollectionViewProps) { super(props); @@ -44,7 +46,8 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp (window as any).ReactDOM = ReactDOM; } public StartOtherDrag(dragDoc: Document, e: any) { - this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 }) + this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener. + onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 }) } @action @@ -75,7 +78,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp // @action public AddRightSplit(document: Document, minimize: boolean = false) { - this._goldenLayout.emit('stateChanged'); let newItemStackConfig = { type: 'stack', content: [CollectionDockingView.makeDocumentConfig(document)] @@ -104,7 +106,9 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp newContentItem.callDownwards('_$init'); this._goldenLayout.root.callDownwards('setSize', [this._goldenLayout.width, this._goldenLayout.height]); this._goldenLayout.emit('stateChanged'); + this._ignoreStateChange = JSON.stringify(this._goldenLayout.toConfig()); this.stateChanged(); + return newContentItem; } @@ -144,7 +148,12 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp if (this._containerRef.current) { reaction( () => this.props.Document.GetText(KeyStore.Data, ""), - () => setTimeout(() => this.setupGoldenLayout(), 1), { fireImmediately: true }); + () => { + if (!this._goldenLayout || this._ignoreStateChange != JSON.stringify(this._goldenLayout.toConfig())) { + setTimeout(() => this.setupGoldenLayout(), 1); + } + this._ignoreStateChange = ""; + }, { fireImmediately: true }); window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window } @@ -215,7 +224,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp stack.header.controlsContainer.find('.lm_popout') //get the close icon .off('click') //unbind the current click handler .click(action(function () { - var url = "http://localhost:1050/doc/" + stack.contentItems[0].tab.contentItem.config.props.documentId; + var url = ServerUtils.prepend("/doc/" + stack.contentItems[0].tab.contentItem.config.props.documentId); let win = window.open(url, stack.contentItems[0].tab.title, "width=300,height=400"); })); } diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index 11addc5a1..0e0570397 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -41,6 +41,7 @@ background: $light-color-secondary; } + opacity: 0.99; position:absolute; border: 0px solid transparent; border-radius: $border-radius; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 50f5e9618..062babe58 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -9,7 +9,6 @@ import { Field, Opt } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; import { CompileScript, ToField } from "../../util/Scripting"; import { Transform } from "../../util/Transform"; -import { ContextMenu } from "../ContextMenu"; import { EditableView } from "../EditableView"; import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; @@ -27,8 +26,7 @@ import { ListField } from "../../../fields/ListField"; @observer class KeyToggle extends React.Component<{ keyId: string, checked: boolean, toggle: (key: Key) => void }> { - @observable - key: Key | undefined; + @observable key: Key | undefined; componentWillReceiveProps() { Server.GetField(this.props.keyId, action((field: Opt<Field>) => { diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 303099c16..d4afc69cf 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -13,6 +13,7 @@ import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; import { CollectionTreeView } from "./CollectionTreeView"; import { Field, FieldId } from "../../../fields/Field"; +import { Main } from "../Main"; export enum CollectionViewType { Invalid, @@ -95,7 +96,7 @@ export class CollectionView extends React.Component<CollectionViewProps> { } specificContextMenu = (e: React.MouseEvent): void => { - if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + if (!e.isPropagationStopped() && this.props.Document.Id != Main.Instance.mainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) }) ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) }) ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) }) diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 7175e2846..f33007196 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -15,6 +15,8 @@ import { TupleField } from "../../../fields/TupleField"; import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; import { NumberField } from "../../../fields/NumberField"; import { DocumentManager } from "../../util/DocumentManager"; +import request = require("request"); +import { ServerUtils } from "../../../server/ServerUtil"; export interface CollectionViewProps { fieldKey: Key; @@ -94,6 +96,27 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps> } } + protected getDocumentFromType(type: string, path: string, options: DocumentOptions): Opt<Document> { + let ctor: ((path: string, options: DocumentOptions) => Document) | undefined; + if (type.indexOf("image") !== -1) { + ctor = Documents.ImageDocument; + } + if (type.indexOf("video") !== -1) { + ctor = Documents.VideoDocument; + } + if (type.indexOf("audio") !== -1) { + ctor = Documents.AudioDocument; + } + if (type.indexOf("pdf") !== -1) { + ctor = Documents.PdfDocument; + } + if (type.indexOf("html") !== -1) { + ctor = Documents.WebDocument; + options = { height: options.width, ...options, }; + } + return ctor ? ctor(path, options) : undefined; + } + @action protected onDrop(e: React.DragEvent, options: DocumentOptions): void { let that = this; @@ -115,16 +138,25 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps> return; } - console.log(e.dataTransfer.items.length); - for (let i = 0; i < e.dataTransfer.items.length; i++) { const upload = window.location.origin + RouteStore.upload; let item = e.dataTransfer.items[i]; if (item.kind === "string" && item.type.indexOf("uri") != -1) { - e.dataTransfer.items[i].getAsString(action((s: string) => this.props.addDocument(Documents.WebDocument(s, options), false))) + e.dataTransfer.items[i].getAsString(action((s: string) => { + let document: Document; + request.head(ServerUtils.prepend(RouteStore.corsProxy + "/" + s), (err, res, body) => { + let type = res.headers["content-type"]; + if (type) { + let doc = this.getDocumentFromType(type, s, { ...options, width: 300, nativeWidth: 300 }) + if (doc) { + this.props.addDocument(doc, false); + } + } + }); + // this.props.addDocument(Documents.WebDocument(s, { ...options, width: 300, height: 300 }), false) + })) } let type = item.type - console.log(type) if (item.kind == "file") { let file = item.getAsFile(); let formData = new FormData() @@ -136,44 +168,27 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps> fetch(upload, { method: 'POST', body: formData - }) - .then((res: Response) => { - return res.json() - }).then(json => { - - json.map((file: any) => { - let path = window.location.origin + file - runInAction(() => { - var doc: any; - - if (type.indexOf("image") !== -1) { - doc = Documents.ImageDocument(path, { ...options, nativeWidth: 200, width: 200, }) - } - if (type.indexOf("video") !== -1) { - doc = Documents.VideoDocument(path, { ...options, nativeWidth: 300, width: 300, }) + }).then((res: Response) => { + return res.json() + }).then(json => { + json.map((file: any) => { + let path = window.location.origin + file + runInAction(() => { + let doc = this.getDocumentFromType(type, path, { ...options, nativeWidth: 300, width: 300 }) + + let docs = that.props.Document.GetT(KeyStore.Data, ListField); + if (docs != FieldWaiting) { + if (!docs) { + docs = new ListField<Document>(); + that.props.Document.Set(KeyStore.Data, docs) } - if (type.indexOf("audio") !== -1) { - doc = Documents.AudioDocument(path, { ...options, nativeWidth: 300, width: 300, }) + if (doc) { + docs.Data.push(doc); } - if (type.indexOf("pdf") !== -1) { - doc = Documents.PdfDocument(path, { ...options, nativeWidth: 300, width: 300, }) - } - let docs = that.props.Document.GetT(KeyStore.Data, ListField); - if (docs != FieldWaiting) { - if (!docs) { - docs = new ListField<Document>(); - that.props.Document.Set(KeyStore.Data, docs) - } - if (doc) { - docs.Data.push(doc); - } - - } - }) + } }) }) - - + }) } } } diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index e84c5f933..b6d50bffb 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -59,9 +59,6 @@ export class FieldView extends React.Component<FieldViewProps> { else if (field instanceof ImageField) { return <ImageBox {...this.props} /> } - else if (field instanceof WebField) { - return <WebBox {...this.props} /> - } else if (field instanceof VideoField) { return <VideoBox {...this.props} /> } diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 4bd5726f4..ba9bd9566 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -56,7 +56,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { const state = this._editorView.state.apply(tx); this._editorView.updateState(state); const { doc, fieldKey } = this.props; - doc.SetOnPrototype(fieldKey, new RichTextField(JSON.stringify(state.toJSON()))) + doc.SetDataOnPrototype(fieldKey, JSON.stringify(state.toJSON()), RichTextField); // doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField); } } |