diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/ContextMenu.scss | 13 | ||||
| -rw-r--r-- | src/client/views/ContextMenu.tsx | 5 | ||||
| -rw-r--r-- | src/client/views/ContextMenuItem.tsx | 42 | ||||
| -rw-r--r-- | src/client/views/nodes/FormattedTextBox.tsx | 23 | ||||
| -rw-r--r-- | src/server/index.ts | 172 |
5 files changed, 180 insertions, 75 deletions
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index ea40c8e99..82e736520 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -6,9 +6,18 @@ flex-direction: column; } +.subMenu-cont { + position: relative; + display: flex; + z-index: 1000; + box-shadow: #AAAAAA .2vw .2vw .4vw; + flex-direction: column; + left: 100%; //should make this appear 100% to the right of the parent element (the original context menu) +} + .contextMenu-item { - width: auto; - height: auto; + width: 10vw; //auto + height: 2vh; //auto background: #F0F8FF; display: flex; justify-content: left; diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index fcb934860..8a8403c62 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -9,6 +9,7 @@ export class ContextMenu extends React.Component { static Instance: ContextMenu @observable private _items: Array<ContextMenuProps> = [{ description: "test", event: (e: React.MouseEvent) => e.preventDefault() }]; + //need to add a subitems component? @observable private _pageX: number = 0; @observable private _pageY: number = 0; @observable private _display: string = "none"; @@ -80,4 +81,6 @@ export class ContextMenu extends React.Component { onChange = (e: React.ChangeEvent<HTMLInputElement>) => { this._searchString = e.target.value; } -}
\ No newline at end of file +} + +//<input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
\ No newline at end of file diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index 723606dcf..3319b62db 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -1,26 +1,46 @@ import React = require("react"); -import { ContextMenu } from "./ContextMenu"; +import { observable, action } from "mobx"; -export interface ContextMenuProps { +export interface OriginalMenuProps { description: string; event: (e: React.MouseEvent<HTMLDivElement>) => void; } export interface SubmenuProps { description: string; - subitems: ContextMenuProps[]; + subitems: OriginalMenuProps[]; } -export interface ContextMenuItemProps { - type: ContextMenuProps | SubmenuProps -} +export type ContextMenuProps = OriginalMenuProps | SubmenuProps; export class ContextMenuItem extends React.Component<ContextMenuProps> { + @observable private _items: Array<ContextMenuProps> = [{ description: "test", event: (e: React.MouseEvent) => e.preventDefault() }]; + @observable private _pageX: number = 0; + @observable private _pageY: number = 0; + @observable private _display: string = "none"; + @observable private overItem = false; + render() { - return ( - <div className="contextMenu-item" onClick={this.props.event}> - <div className="contextMenu-description">{this.props.description}</div> - </div> - ) + if ("event" in this.props) { + return ( + <div className="contextMenu-item" onClick={this.props.event}> + <div className="contextMenu-description"> {this.props.description}</div> + </div>) + } + else { + let submenu = null; + if (this.overItem) { + submenu = (<div className="subMenu-cont" style={{ left: this._pageX, marginLeft: "100%", top: this._pageY, display: this._display }}> + {this._items.map(prop => { + return <ContextMenuItem {...prop} key={prop.description} /> + })} + </div>) + } + return ( + <div className="contextMenu-item" onMouseEnter={action(() => this.overItem = true)} onMouseLeave={action(() => this.overItem = false)}> + <div className="contextMenu-description"> {this.props.description}</div> + {submenu} + </div>) + } } }
\ No newline at end of file diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 8b3deeb8b..baedf0852 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -119,17 +119,18 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { specificContextMenu = (e: React.MouseEvent): void => { ContextMenu.Instance.addItem({ description: "Text Capability", event: this.textCapability }); - // ContextMenu.Instance.addItem({ - // description: "Submenu", - // items: [ - // { - // description: "item 1", event: - // }, - // { - // description: "item 2", event: - // } - // ] - // }) + ContextMenu.Instance.addItem({ + description: "Submenu", subitems: + [{ description: "Sub 1", event: this.textCapability }] + // [{ description: "Sub 2", event: this.textCapability }] + // { + // description: "item 1", event: + // }, + // { + // description: "item 2", event: + // } + // ] + }) // e.stopPropagation() } diff --git a/src/server/index.ts b/src/server/index.ts index 84acb72cb..7850fd1d8 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -1,23 +1,75 @@ -import * as express from 'express' -const app = express() -import * as webpack from 'webpack' +import * as express from 'express'; +const app = express(); +import * as webpack from 'webpack'; import * as wdm from 'webpack-dev-middleware'; import * as whm from 'webpack-hot-middleware'; -import * as path from 'path' +import * as path from 'path'; import * as passport from 'passport'; -import { MessageStore, Message, SetFieldArgs, GetFieldArgs, Transferable } from "./Message"; -import { Client } from './Client'; -import { Socket } from 'socket.io'; -import { Utils } from '../Utils'; -import { ObservableMap } from 'mobx'; -import { FieldId, Field } from '../fields/Field'; -import { Database } from './database'; -import { ServerUtils } from './ServerUtil'; -import { ObjectID } from 'mongodb'; -import { Document } from '../fields/Document'; -import * as io from 'socket.io' +import { + MessageStore, + Message, + SetFieldArgs, + GetFieldArgs, + Transferable +} + + from "./Message"; +import { + Client +} + + from './Client'; +import { + Socket +} + + from 'socket.io'; +import { + Utils +} + + from '../Utils'; +import { + ObservableMap +} + + from 'mobx'; +import { + FieldId, + Field +} + + from '../fields/Field'; +import { + Database +} + + from './database'; +import { + ServerUtils +} + + from './ServerUtil'; +import { + ObjectID +} + + from 'mongodb'; +import { + Document +} + + from '../fields/Document'; +import * as io from 'socket.io'; import * as passportConfig from './authentication/config/passport'; -import { getLogin, postLogin, getSignup, postSignup } from './authentication/controllers/user'; +import { + getLogin, + postLogin, + getSignup, + postSignup +} + + from './authentication/controllers/user'; const config = require('../../webpack.config'); const compiler = webpack(config); const port = 1050; // default port to listen @@ -30,17 +82,20 @@ import c = require("crypto"); const MongoStore = require('connect-mongo')(session); const mongoose = require('mongoose'); const bluebird = require('bluebird'); -import { performance } from 'perf_hooks' -import * as fs from 'fs'; -import * as request from 'request' +import { + performance +} + from 'perf_hooks'; +import * as fs from 'fs'; +import * as request from 'request'; const download = (url: string, dest: fs.PathLike) => { request.get(url).pipe(fs.createWriteStream(dest)); } const mongoUrl = 'mongodb://localhost:27017/Dash'; // mongoose.Promise = bluebird; -mongoose.connect(mongoUrl)//.then( +mongoose.connect(mongoUrl) //.then( // () => { /** ready to use. The `mongoose.connect()` promise resolves to undefined. */ }, // ).catch((err: any) => { // console.log("MongoDB connection error. Please make sure MongoDB is running. " + err); @@ -48,77 +103,88 @@ mongoose.connect(mongoUrl)//.then( // }); mongoose.connection.on('connected', function () { console.log("connected"); -}) +} +); app.use(bodyParser.json()); -app.use(bodyParser.urlencoded({ extended: true })); +app.use(bodyParser.urlencoded({ + extended: true +} + +)); app.use(expressValidator()); app.use(expressFlash()); app.use(require('express-session')({ - secret: `${c.randomBytes(64)}`, - resave: true, - saveUninitialized: true, - store: new MongoStore({ + secret: `$ { + c.randomBytes(64) + } + `, resave: true, saveUninitialized: true, store: new MongoStore({ url: 'mongodb://localhost:27017/Dash' - }) -})); + } + ) +} + +)); app.use(passport.initialize()); app.use(passport.session()); app.use((req, res, next) => { res.locals.user = req.user; next(); -}); +} +); app.get("/signup", getSignup); app.post("/signup", postSignup); app.get("/login", getLogin); app.post("/login", postLogin); - -let FieldStore: ObservableMap<FieldId, Field> = new ObservableMap(); - +let FieldStore: ObservableMap<FieldId, + Field> = new ObservableMap(); // define a route handler for the default home page app.get("/", (req, res) => { res.sendFile(path.join(__dirname, '../../deploy/index.html')); -}); +} +); app.get("/hello", (req, res) => { res.send("<p>Hello</p>"); -}) +} +); app.get("/delete", (req, res) => { deleteAll(); res.redirect("/"); -}); +} +); app.use(wdm(compiler, { publicPath: config.output.publicPath -})) - -app.use(whm(compiler)) +} -// start the Express server +)) +app.use(whm(compiler)) // start the Express server app.listen(port, () => { - console.log(`server started at http://localhost:${port}`); -}) + console.log(`server started at http: //localhost:${port}`); +} +) const server = io(); interface Map { [key: string]: Client; } + let clients: Map = {} server.on("connection", function (socket: Socket) { console.log("a user has connected") - Utils.Emit(socket, MessageStore.Foo, "handshooken") - Utils.AddServerHandler(socket, MessageStore.Bar, barReceived) Utils.AddServerHandler(socket, MessageStore.SetField, (args) => setField(socket, args)) Utils.AddServerHandlerCallback(socket, MessageStore.GetField, getField) Utils.AddServerHandlerCallback(socket, MessageStore.GetFields, getFields) Utils.AddServerHandler(socket, MessageStore.DeleteAll, deleteAll) -}) +} +) function deleteAll() { Database.Instance.deleteAll(); } @@ -127,9 +193,7 @@ function barReceived(guid: String) { clients[guid.toString()] = new Client(guid.toString()); } -function addDocument(document: Document) { - -} +function addDocument(document: Document) { } function getField([id, callback]: [string, (result: any) => void]) { Database.Instance.getDocument(id, (result: any) => { @@ -139,7 +203,8 @@ function getField([id, callback]: [string, (result: any) => void]) { else { callback(undefined) } - }) + } + ) } function getFields([ids, callback]: [string[], (result: any) => void]) { @@ -147,11 +212,18 @@ function getFields([ids, callback]: [string[], (result: any) => void]) { } function setField(socket: Socket, newValue: Transferable) { - let val = { ...newValue }; + let val = { + ...newValue + } + ; delete val._id; Database.Instance.update(newValue._id, val) socket.broadcast.emit(MessageStore.SetField.Message, newValue) } server.listen(serverPort); -console.log(`listening on port ${serverPort}`);
\ No newline at end of file +console.log(`listening on port $ { + serverPort +} + +`);
\ No newline at end of file |