From 03b2c984d581e18ed898cb097b12ab3ec70c833d Mon Sep 17 00:00:00 2001 From: laurawilsonri Date: Tue, 2 Apr 2019 18:31:37 -0400 Subject: bullets work --- src/client/util/TooltipTextMenu.tsx | 52 +++++++++++++++++----- .../views/collections/CollectionSchemaView.scss | 5 +++ .../views/collections/CollectionTreeView.scss | 2 +- src/server/database.ts | 2 +- 4 files changed, 47 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 2a613ba8b..eaf18825c 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -1,25 +1,29 @@ import { action, IReactionDisposer, reaction } from "mobx"; -import { baseKeymap } from "prosemirror-commands"; +import { baseKeymap, lift } from "prosemirror-commands"; import { history, redo, undo } from "prosemirror-history"; import { keymap } from "prosemirror-keymap"; import { EditorState, Transaction, NodeSelection } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import { schema } from "./RichTextSchema"; -import { Schema, NodeType } from "prosemirror-model" -import React = require("react") +import { Schema, NodeType } from "prosemirror-model"; +import { liftItem } from "prosemirror-menu"; +import React = require("react"); import "./TooltipTextMenu.scss"; const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands"); import { library } from '@fortawesome/fontawesome-svg-core' -import { wrapInList, bulletList } from 'prosemirror-schema-list' +import { wrapInList, bulletList, liftListItem, listItem } from 'prosemirror-schema-list' import { faListUl, } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +const SVG = "http://www.w3.org/2000/svg" //appears above a selection of text in a RichTextBox to give user options such as Bold, Italics, etc. export class TooltipTextMenu { private tooltip: HTMLElement; + private num_icons = 0; constructor(view: EditorView) { this.tooltip = document.createElement("div"); @@ -39,20 +43,28 @@ export class TooltipTextMenu { { command: toggleMark(schema.marks.strikethrough), dom: this.icon("S", "strikethrough") }, { command: toggleMark(schema.marks.superscript), dom: this.icon("s", "superscript") }, { command: toggleMark(schema.marks.subscript), dom: this.icon("s", "subscript") }, - //this doesn't work currently - look into notion of active block { command: wrapInList(schema.nodes.bullet_list), dom: this.icon(":", "bullets") }, + //{ command: lift, dom: this.icon("<", "unindent") }, + + { command: lift, dom: this.unorderedListIcon() }, ] - items.forEach(({ dom }) => this.tooltip.appendChild(dom)); + //add menu items + items.forEach(({ dom, command }) => { + this.tooltip.appendChild(dom); + }); //pointer down handler to activate button effects this.tooltip.addEventListener("pointerdown", e => { e.preventDefault(); view.focus(); + //update view of icons + this.num_icons = 0; items.forEach(({ command, dom }) => { if (dom.contains(e.srcElement)) { + //let active = command(view.state, view.dispatch, view); let active = command(view.state, view.dispatch, view); //uncomment this if we want the bullet button to disappear if current selection is bulleted - // dom.style.display = active ? "" : "none" + //dom.style.display = active ? "" : "none"; } }) }) @@ -90,9 +102,24 @@ export class TooltipTextMenu { //this doesn't currently work but could be used to use icons for buttons unorderedListIcon(): HTMLSpanElement { let span = document.createElement("span"); - let icon = document.createElement("FontAwesomeIcon"); - icon.className = "menuicon fa fa-smile-o"; - span.appendChild(icon); + //let icon = document.createElement("FontAwesomeIcon"); + //icon.className = "menuicon"; + //icon.style.color = "white"; + //span.appendChild(); + let i = document.createElement("i"); + i.className = "fa falist-ul"; + span.appendChild(i); + //span.appendChild(icon); + //return liftItem.spec.icon.sty + + //let sym = document.createElementNS(SVG, "symbol") + // sym.id = name + //sym.style.color = "white"; + //width then height + //sym.setAttribute("viewBox", "0 0 " + 1024 + " " + 1024); + //let path = sym.appendChild(document.createElementNS(SVG, "path")); + //path.setAttribute("d", "M219 310v329q0 7-5 12t-12 5q-8 0-13-5l-164-164q-5-5-5-13t5-13l164-164q5-5 13-5 7 0 12 5t5 12zM1024 749v109q0 7-5 12t-12 5h-987q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h987q7 0 12 5t5 12zM1024 530v109q0 7-5 12t-12 5h-621q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h621q7 0 12 5t5 12zM1024 310v109q0 7-5 12t-12 5h-621q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h621q7 0 12 5t5 12zM1024 91v109q0 7-5 12t-12 5h-987q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h987q7 0 12 5t5 12z"); + //span.appendChild(sym); return span; } @@ -127,11 +154,12 @@ export class TooltipTextMenu { // crossing lines, end may be more to the left) let left = Math.max((start.left + end.left) / 2, start.left + 3) this.tooltip.style.left = (left - box.left) + "px" - let width = Math.abs(start.left - end.left) / 2; + //let width = Math.abs(start.left - end.left) / 2; + let width = 8 * 16 + 15; let mid = Math.min(start.left, end.left) + width; //THIS WIDTH IS 15 * NUMBER OF ICONS + 15 - this.tooltip.style.width = 122 + "px"; + this.tooltip.style.width = width + "px"; this.tooltip.style.bottom = (box.bottom - start.top) + "px"; } diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index c3a2e88ac..9cd6c8a39 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -15,6 +15,11 @@ padding: 0px; font-size: 100%; } + +ul { + list-style-type: disc; +} + #schema-options-header { text-align: center; padding: 0px; diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 5a14aa54d..8ec996326 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -8,7 +8,7 @@ overflow: scroll; } -ul { +.no-indent { list-style: none; padding-left: 20px; } diff --git a/src/server/database.ts b/src/server/database.ts index a42d29aac..87a0b3c70 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -27,7 +27,7 @@ export class Database { console.log(err.errmsg); } if (res) { - console.log(JSON.stringify(res.result)); + // console.log(JSON.stringify(res.result)); } callback() }); -- cgit v1.2.3-70-g09d2 From b3246c495a1e116abe7ab7abea347126eead4e0d Mon Sep 17 00:00:00 2001 From: laurawilsonri Date: Mon, 8 Apr 2019 18:24:06 -0400 Subject: bulleting works with some bugsbugs, font styles in progress --- src/client/util/RichTextSchema.tsx | 10 +++++++++- src/client/util/TooltipTextMenu.tsx | 9 +++++---- .../files/upload_1b4818f39ea324b5a687bb1ade3dca6c.jpg | Bin 0 -> 26946 bytes .../files/upload_1f1c6cfef33e5992fa860802e8c466a7.jpg | Bin 0 -> 45309 bytes .../files/upload_2045f363aa9cf281407703ca242aad1a.jpg | Bin 0 -> 9009 bytes .../files/upload_25bffd90c080c27f5ac822984406b958.jpg | Bin 0 -> 43534 bytes .../files/upload_261f11dc39ad568212b5c7e39d1e6d13.jpg | Bin 0 -> 27259 bytes .../files/upload_26bcc62639141ba64e603daebb5bf5d3.png | Bin 0 -> 2757327 bytes .../files/upload_2d77d0773612e4723b78118ac50a2929.jpg | Bin 0 -> 1805512 bytes .../files/upload_2de9ad4dc687c53760c39f724c9a08a5.jpg | Bin 0 -> 77462 bytes .../files/upload_4abb568aa7cce9d291532c3d0da97102.jpg | Bin 0 -> 22445 bytes .../files/upload_54c34aaca5a7bf510cebad461ec39512.png | Bin 0 -> 2757327 bytes .../files/upload_562b1e527300df8b350eeab094b3e1f1.jpg | Bin 0 -> 15988 bytes .../files/upload_6a26d3f7008a8c79ee5fc8054ba69996.jpg | Bin 0 -> 45025 bytes .../files/upload_70fa5e0c3f393504349d5865e28f4cac.jpg | Bin 0 -> 18041 bytes .../files/upload_8155b5b0f57da107bb07083c04e78943.jpg | Bin 0 -> 31103 bytes .../files/upload_88f588574e0efc415186af935114af9a.jpg | Bin 0 -> 40249 bytes .../files/upload_8d1c253f93f77c69c0c04ae3efb7d714.png | Bin 0 -> 2757327 bytes .../files/upload_9ef80158609f5ff739087aecad367b9d.jpg | Bin 0 -> 28523 bytes .../files/upload_c39a7e0d7e8d35bb18461a5a0aa063bf.jpg | Bin 0 -> 13811 bytes .../files/upload_c6b81ab4eb70465a7e9b45d5c8f3ecaa.jpg | Bin 0 -> 28566 bytes .../files/upload_c99ec7a8a2df0b2f90479fde7d70c2eb.jpg | Bin 0 -> 21995 bytes .../files/upload_cec1cfcc67cfe5889de4098a49fec45e.jpg | Bin 0 -> 22125 bytes .../files/upload_f27688fe92dc7de398e957e5d96e1a22.jpg | Bin 0 -> 18964 bytes 24 files changed, 14 insertions(+), 5 deletions(-) create mode 100644 src/server/public/files/upload_1b4818f39ea324b5a687bb1ade3dca6c.jpg create mode 100644 src/server/public/files/upload_1f1c6cfef33e5992fa860802e8c466a7.jpg create mode 100644 src/server/public/files/upload_2045f363aa9cf281407703ca242aad1a.jpg create mode 100644 src/server/public/files/upload_25bffd90c080c27f5ac822984406b958.jpg create mode 100644 src/server/public/files/upload_261f11dc39ad568212b5c7e39d1e6d13.jpg create mode 100644 src/server/public/files/upload_26bcc62639141ba64e603daebb5bf5d3.png create mode 100644 src/server/public/files/upload_2d77d0773612e4723b78118ac50a2929.jpg create mode 100644 src/server/public/files/upload_2de9ad4dc687c53760c39f724c9a08a5.jpg create mode 100644 src/server/public/files/upload_4abb568aa7cce9d291532c3d0da97102.jpg create mode 100644 src/server/public/files/upload_54c34aaca5a7bf510cebad461ec39512.png create mode 100644 src/server/public/files/upload_562b1e527300df8b350eeab094b3e1f1.jpg create mode 100644 src/server/public/files/upload_6a26d3f7008a8c79ee5fc8054ba69996.jpg create mode 100644 src/server/public/files/upload_70fa5e0c3f393504349d5865e28f4cac.jpg create mode 100644 src/server/public/files/upload_8155b5b0f57da107bb07083c04e78943.jpg create mode 100644 src/server/public/files/upload_88f588574e0efc415186af935114af9a.jpg create mode 100644 src/server/public/files/upload_8d1c253f93f77c69c0c04ae3efb7d714.png create mode 100644 src/server/public/files/upload_9ef80158609f5ff739087aecad367b9d.jpg create mode 100644 src/server/public/files/upload_c39a7e0d7e8d35bb18461a5a0aa063bf.jpg create mode 100644 src/server/public/files/upload_c6b81ab4eb70465a7e9b45d5c8f3ecaa.jpg create mode 100644 src/server/public/files/upload_c99ec7a8a2df0b2f90479fde7d70c2eb.jpg create mode 100644 src/server/public/files/upload_cec1cfcc67cfe5889de4098a49fec45e.jpg create mode 100644 src/server/public/files/upload_f27688fe92dc7de398e957e5d96e1a22.jpg (limited to 'src') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 2a3c1da6e..98c22204a 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -222,7 +222,15 @@ export const marks: { [index: string]: MarkSpec } = { code: { parseDOM: [{ tag: "code" }], toDOM() { return codeDOM } - } + }, + + + timesNewRoman: { + parseDOM: [{ style: 'font-family: "Times New Roman", Times, serif;' }], + toDOM: () => ['span', { + style: 'font-family: "Times New Roman", Times, serif;' + }] + }, } // :: Schema diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index eaf18825c..3f37d5fb8 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -1,4 +1,5 @@ import { action, IReactionDisposer, reaction } from "mobx"; +import { Dropdown, DropdownSubmenu, MenuItem } from "prosemirror-menu"; import { baseKeymap, lift } from "prosemirror-commands"; import { history, redo, undo } from "prosemirror-history"; import { keymap } from "prosemirror-keymap"; @@ -6,7 +7,6 @@ import { EditorState, Transaction, NodeSelection } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import { schema } from "./RichTextSchema"; import { Schema, NodeType } from "prosemirror-model"; -import { liftItem } from "prosemirror-menu"; import React = require("react"); import "./TooltipTextMenu.scss"; const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands"); @@ -44,15 +44,16 @@ export class TooltipTextMenu { { command: toggleMark(schema.marks.superscript), dom: this.icon("s", "superscript") }, { command: toggleMark(schema.marks.subscript), dom: this.icon("s", "subscript") }, { command: wrapInList(schema.nodes.bullet_list), dom: this.icon(":", "bullets") }, - //{ command: lift, dom: this.icon("<", "unindent") }, - - { command: lift, dom: this.unorderedListIcon() }, + { command: toggleMark(schema.marks.timesNewRoman), dom: this.icon("x", "TNR") }, + { command: lift, dom: this.icon("<", "lift") }, ] //add menu items items.forEach(({ dom, command }) => { this.tooltip.appendChild(dom); }); + //add dropdowns + //pointer down handler to activate button effects this.tooltip.addEventListener("pointerdown", e => { e.preventDefault(); diff --git a/src/server/public/files/upload_1b4818f39ea324b5a687bb1ade3dca6c.jpg b/src/server/public/files/upload_1b4818f39ea324b5a687bb1ade3dca6c.jpg new file mode 100644 index 000000000..aeb10c4b0 Binary files /dev/null and b/src/server/public/files/upload_1b4818f39ea324b5a687bb1ade3dca6c.jpg differ diff --git a/src/server/public/files/upload_1f1c6cfef33e5992fa860802e8c466a7.jpg b/src/server/public/files/upload_1f1c6cfef33e5992fa860802e8c466a7.jpg new file mode 100644 index 000000000..a2c1d8a46 Binary files /dev/null and b/src/server/public/files/upload_1f1c6cfef33e5992fa860802e8c466a7.jpg differ diff --git a/src/server/public/files/upload_2045f363aa9cf281407703ca242aad1a.jpg b/src/server/public/files/upload_2045f363aa9cf281407703ca242aad1a.jpg new file mode 100644 index 000000000..c19b31a38 Binary files /dev/null and b/src/server/public/files/upload_2045f363aa9cf281407703ca242aad1a.jpg differ diff --git a/src/server/public/files/upload_25bffd90c080c27f5ac822984406b958.jpg b/src/server/public/files/upload_25bffd90c080c27f5ac822984406b958.jpg new file mode 100644 index 000000000..3614b42eb Binary files /dev/null and b/src/server/public/files/upload_25bffd90c080c27f5ac822984406b958.jpg differ diff --git a/src/server/public/files/upload_261f11dc39ad568212b5c7e39d1e6d13.jpg b/src/server/public/files/upload_261f11dc39ad568212b5c7e39d1e6d13.jpg new file mode 100644 index 000000000..ecd12d9cb Binary files /dev/null and b/src/server/public/files/upload_261f11dc39ad568212b5c7e39d1e6d13.jpg differ diff --git a/src/server/public/files/upload_26bcc62639141ba64e603daebb5bf5d3.png b/src/server/public/files/upload_26bcc62639141ba64e603daebb5bf5d3.png new file mode 100644 index 000000000..e2297cb3c Binary files /dev/null and b/src/server/public/files/upload_26bcc62639141ba64e603daebb5bf5d3.png differ diff --git a/src/server/public/files/upload_2d77d0773612e4723b78118ac50a2929.jpg b/src/server/public/files/upload_2d77d0773612e4723b78118ac50a2929.jpg new file mode 100644 index 000000000..261a0ceff Binary files /dev/null and b/src/server/public/files/upload_2d77d0773612e4723b78118ac50a2929.jpg differ diff --git a/src/server/public/files/upload_2de9ad4dc687c53760c39f724c9a08a5.jpg b/src/server/public/files/upload_2de9ad4dc687c53760c39f724c9a08a5.jpg new file mode 100644 index 000000000..6b6ec3c3f Binary files /dev/null and b/src/server/public/files/upload_2de9ad4dc687c53760c39f724c9a08a5.jpg differ diff --git a/src/server/public/files/upload_4abb568aa7cce9d291532c3d0da97102.jpg b/src/server/public/files/upload_4abb568aa7cce9d291532c3d0da97102.jpg new file mode 100644 index 000000000..f6332670c Binary files /dev/null and b/src/server/public/files/upload_4abb568aa7cce9d291532c3d0da97102.jpg differ diff --git a/src/server/public/files/upload_54c34aaca5a7bf510cebad461ec39512.png b/src/server/public/files/upload_54c34aaca5a7bf510cebad461ec39512.png new file mode 100644 index 000000000..e2297cb3c Binary files /dev/null and b/src/server/public/files/upload_54c34aaca5a7bf510cebad461ec39512.png differ diff --git a/src/server/public/files/upload_562b1e527300df8b350eeab094b3e1f1.jpg b/src/server/public/files/upload_562b1e527300df8b350eeab094b3e1f1.jpg new file mode 100644 index 000000000..db40705dd Binary files /dev/null and b/src/server/public/files/upload_562b1e527300df8b350eeab094b3e1f1.jpg differ diff --git a/src/server/public/files/upload_6a26d3f7008a8c79ee5fc8054ba69996.jpg b/src/server/public/files/upload_6a26d3f7008a8c79ee5fc8054ba69996.jpg new file mode 100644 index 000000000..f0417a752 Binary files /dev/null and b/src/server/public/files/upload_6a26d3f7008a8c79ee5fc8054ba69996.jpg differ diff --git a/src/server/public/files/upload_70fa5e0c3f393504349d5865e28f4cac.jpg b/src/server/public/files/upload_70fa5e0c3f393504349d5865e28f4cac.jpg new file mode 100644 index 000000000..395f8ec21 Binary files /dev/null and b/src/server/public/files/upload_70fa5e0c3f393504349d5865e28f4cac.jpg differ diff --git a/src/server/public/files/upload_8155b5b0f57da107bb07083c04e78943.jpg b/src/server/public/files/upload_8155b5b0f57da107bb07083c04e78943.jpg new file mode 100644 index 000000000..53d9315a9 Binary files /dev/null and b/src/server/public/files/upload_8155b5b0f57da107bb07083c04e78943.jpg differ diff --git a/src/server/public/files/upload_88f588574e0efc415186af935114af9a.jpg b/src/server/public/files/upload_88f588574e0efc415186af935114af9a.jpg new file mode 100644 index 000000000..b72dbc482 Binary files /dev/null and b/src/server/public/files/upload_88f588574e0efc415186af935114af9a.jpg differ diff --git a/src/server/public/files/upload_8d1c253f93f77c69c0c04ae3efb7d714.png b/src/server/public/files/upload_8d1c253f93f77c69c0c04ae3efb7d714.png new file mode 100644 index 000000000..e2297cb3c Binary files /dev/null and b/src/server/public/files/upload_8d1c253f93f77c69c0c04ae3efb7d714.png differ diff --git a/src/server/public/files/upload_9ef80158609f5ff739087aecad367b9d.jpg b/src/server/public/files/upload_9ef80158609f5ff739087aecad367b9d.jpg new file mode 100644 index 000000000..84423538c Binary files /dev/null and b/src/server/public/files/upload_9ef80158609f5ff739087aecad367b9d.jpg differ diff --git a/src/server/public/files/upload_c39a7e0d7e8d35bb18461a5a0aa063bf.jpg b/src/server/public/files/upload_c39a7e0d7e8d35bb18461a5a0aa063bf.jpg new file mode 100644 index 000000000..dc7ec2f33 Binary files /dev/null and b/src/server/public/files/upload_c39a7e0d7e8d35bb18461a5a0aa063bf.jpg differ diff --git a/src/server/public/files/upload_c6b81ab4eb70465a7e9b45d5c8f3ecaa.jpg b/src/server/public/files/upload_c6b81ab4eb70465a7e9b45d5c8f3ecaa.jpg new file mode 100644 index 000000000..4422124a1 Binary files /dev/null and b/src/server/public/files/upload_c6b81ab4eb70465a7e9b45d5c8f3ecaa.jpg differ diff --git a/src/server/public/files/upload_c99ec7a8a2df0b2f90479fde7d70c2eb.jpg b/src/server/public/files/upload_c99ec7a8a2df0b2f90479fde7d70c2eb.jpg new file mode 100644 index 000000000..3747ca985 Binary files /dev/null and b/src/server/public/files/upload_c99ec7a8a2df0b2f90479fde7d70c2eb.jpg differ diff --git a/src/server/public/files/upload_cec1cfcc67cfe5889de4098a49fec45e.jpg b/src/server/public/files/upload_cec1cfcc67cfe5889de4098a49fec45e.jpg new file mode 100644 index 000000000..95053d772 Binary files /dev/null and b/src/server/public/files/upload_cec1cfcc67cfe5889de4098a49fec45e.jpg differ diff --git a/src/server/public/files/upload_f27688fe92dc7de398e957e5d96e1a22.jpg b/src/server/public/files/upload_f27688fe92dc7de398e957e5d96e1a22.jpg new file mode 100644 index 000000000..9841bad3f Binary files /dev/null and b/src/server/public/files/upload_f27688fe92dc7de398e957e5d96e1a22.jpg differ -- cgit v1.2.3-70-g09d2 From 4790fd3ff75ace158c47823b5619440d8fd1d879 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Mon, 8 Apr 2019 18:55:53 -0400 Subject: beginning keyboard shortcuts --- src/client/util/RichTextSchema.tsx | 1 - src/client/util/TooltipTextMenu.tsx | 2 +- src/client/views/InkingCanvas.tsx | 2 +- src/client/views/nodes/PDFBox.tsx | 4 ++-- 4 files changed, 4 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 98c22204a..489c22a57 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -9,7 +9,6 @@ import { EditorView, } from "prosemirror-view"; const pDOM: DOMOutputSpecArray = ["p", 0], blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"], preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0] - // :: Object // [Specs](#model.NodeSpec) for the nodes defined in this schema. export const nodes: { [index: string]: NodeSpec } = { diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 3f37d5fb8..4715fcc14 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -61,7 +61,7 @@ export class TooltipTextMenu { //update view of icons this.num_icons = 0; items.forEach(({ command, dom }) => { - if (dom.contains(e.srcElement)) { + if (e.srcElement && dom.contains(e.srcElement as Node)) { //let active = command(view.state, view.dispatch, view); let active = command(view.state, view.dispatch, view); //uncomment this if we want the bullet button to disappear if current selection is bulleted diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 123ff679b..3189e8a5f 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -24,7 +24,7 @@ export class InkingCanvas extends React.Component { return stroke.pathData.reduce((inside, val) => inside || (selRect.left < val.x - InkingCanvas.InkOffset && selRect.left + selRect.width > val.x - InkingCanvas.InkOffset && selRect.top < val.y - InkingCanvas.InkOffset && selRect.top + selRect.height > val.y - InkingCanvas.InkOffset) - , false); + , false as boolean); } @computed diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 28a1f9757..12208714d 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -151,7 +151,7 @@ export class PDFBox extends React.Component { */ makeEditableAndHighlight = (colour: string) => { var range, sel = window.getSelection(); - if (sel.rangeCount && sel.getRangeAt) { + if (sel && sel.rangeCount && sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on"; @@ -159,7 +159,7 @@ export class PDFBox extends React.Component { document.execCommand("HiliteColor", false, colour); } - if (range) { + if (range && sel) { sel.removeAllRanges(); sel.addRange(range); -- cgit v1.2.3-70-g09d2 From 218a3bdff2f7c4888b5f21466dee65c36a76ea00 Mon Sep 17 00:00:00 2001 From: laurawilsonri Date: Mon, 8 Apr 2019 18:56:40 -0400 Subject: work on dropdown --- src/client/util/TooltipTextMenu.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'src') diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 3f37d5fb8..8c4470f23 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -53,6 +53,18 @@ export class TooltipTextMenu { }); //add dropdowns + let cut = arr => arr.filter(x => x); + let config = { + + } + let tnr = new MenuItem({ + title: "tnr", + label: "Times New Roman", + css: "font-family: Times New Roman, Times, serif; ", + enable(state) { return canInsert(state, hr) }, + run(state, dispatch) { dispatch(state.tr.replaceSelectionWith(hr.create())) } + }) + new Dropdown(cut([schema.marks.timesNewRoman, r.insertHorizontalRule]), { label: "Insert" }) //pointer down handler to activate button effects this.tooltip.addEventListener("pointerdown", e => { -- cgit v1.2.3-70-g09d2 From b7d02ec188ecf043300ed858fdb68148b3e52a71 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 9 Apr 2019 17:24:11 -0400 Subject: exploring in-editor undo-redo --- src/client/util/TooltipTextMenu.tsx | 2 +- src/client/views/nodes/FormattedTextBox.tsx | 11 +++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 4715fcc14..e84d48ce3 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -45,7 +45,7 @@ export class TooltipTextMenu { { command: toggleMark(schema.marks.subscript), dom: this.icon("s", "subscript") }, { command: wrapInList(schema.nodes.bullet_list), dom: this.icon(":", "bullets") }, { command: toggleMark(schema.marks.timesNewRoman), dom: this.icon("x", "TNR") }, - { command: lift, dom: this.icon("<", "lift") }, + { command: undo, dom: this.icon("<", "lift") }, ] //add menu items items.forEach(({ dom, command }) => { diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 512ad7d70..be534099c 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -15,6 +15,7 @@ import { Decoration, DecorationSet } from 'prosemirror-view' import { TooltipTextMenu } from "../../util/TooltipTextMenu" import { ContextMenu } from "../../views/ContextMenu"; import { inpRules } from "../../util/RichTextRules"; +import { Schema } from "prosemirror-model"; const { buildMenuItems } = require("prosemirror-example-setup"); const { menuBar } = require("prosemirror-menu"); @@ -61,6 +62,12 @@ export class FormattedTextBox extends React.Component { } } + undo = (state: EditorState, dispatch?: (tr: Transaction) => void): boolean => { + console.log(state); + console.log(dispatch); + return true; + } + componentDidMount() { let state: EditorState; const config = { @@ -68,7 +75,7 @@ export class FormattedTextBox extends React.Component { inpRules, //these currently don't do anything, but could eventually be helpful plugins: [ history(), - keymap({ "Mod-z": undo, "Mod-y": redo }), + keymap({ "Mod-z": this.undo, "Mod-y": redo }), keymap(baseKeymap), this.tooltipMenuPlugin() ] @@ -151,7 +158,7 @@ export class FormattedTextBox extends React.Component { e.stopPropagation(); } - tooltipMenuPlugin() { + tooltipMenuPlugin(): Plugin { return new Plugin({ view(_editorView) { return new TooltipTextMenu(_editorView) -- cgit v1.2.3-70-g09d2 From 54a89c59905b74ab71aa7366b3f1b7d653000547 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Wed, 10 Apr 2019 01:53:56 -0400 Subject: Fixed a couple server bugs --- src/client/Server.ts | 20 ++++++++++---------- src/client/views/Main.tsx | 3 ++- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- 3 files changed, 13 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/Server.ts b/src/client/Server.ts index 857101a33..b3cca0f4c 100644 --- a/src/client/Server.ts +++ b/src/client/Server.ts @@ -59,14 +59,14 @@ export class Server { public static GetFields(fieldIds: FieldId[]): Promise<{ [id: string]: Field }>; public static GetFields(fieldIds: FieldId[], callback: (fields: FieldMap) => any): void; public static GetFields(fieldIds: FieldId[], callback?: (fields: FieldMap) => any): Promise | void { - let fn = (cb: (fields: FieldMap) => void) => { + let fn = action((cb: (fields: FieldMap) => void) => { let neededFieldIds: FieldId[] = []; let waitingFieldIds: FieldId[] = []; - let existingFields: { [id: string]: Field } = {}; + let existingFields: FieldMap = {}; for (let id of fieldIds) { let field = this.ClientFieldsCached.get(id); - if (!field) { + if (field === undefined) { neededFieldIds.push(id); this.ClientFieldsCached.set(id, FieldWaiting); } else if (field === FieldWaiting) { @@ -79,7 +79,7 @@ export class Server { for (let id of neededFieldIds) { let field = fields[id]; if (field) { - if (!(this.ClientFieldsCached.get(field.Id) instanceof Field)) { + if (this.ClientFieldsCached.get(field.Id) === FieldWaiting) { this.ClientFieldsCached.set(field.Id, field); } else { throw new Error("we shouldn't be trying to replace things that are already in the cache"); @@ -94,17 +94,17 @@ export class Server { } reaction(() => waitingFieldIds.map(id => this.ClientFieldsCached.get(id)), (cachedFields, reaction) => { - if (!cachedFields.some(field => !field)) { + if (!cachedFields.some(field => field === FieldWaiting)) { + const realFields = cachedFields as Opt[]; reaction.dispose(); - for (let field of cachedFields) { - let realField = field as Field; - existingFields[realField.Id] = realField; - } + waitingFieldIds.forEach((id, index) => { + existingFields[id] = realFields[index]; + }); cb({ ...fields, ...existingFields }); } }, { fireImmediately: true }); })); - }; + }); if (callback) { fn(callback); } else { diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 32798631d..6e7701d89 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -384,8 +384,9 @@ export class Main extends React.Component { let cat = Gateway.Instance.ClearCatalog(); cat.then(async () => { this.AddToNorthstarCatalog(await Gateway.Instance.GetCatalog()); - if (!CurrentUserUtils.GetNorthstarSchema("Book1")) + if (!CurrentUserUtils.GetNorthstarSchema("Book1")) { this.AddToNorthstarCatalog(await Gateway.Instance.GetSchema("http://www.cs.brown.edu/~bcz/Book1.csv")); + } }); } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 1feb30db1..9914f3793 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -312,7 +312,7 @@ export class CollectionFreeFormView extends CollectionSubView { const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0); return ( - runInAction(() => { this._pwidth = r.entry.width; this._pheight = r.entry.height })}> + runInAction(() => { this._pwidth = r.entry.width; this._pheight = r.entry.height; })}> {({ measureRef }) => (
Date: Wed, 10 Apr 2019 10:45:59 -0400 Subject: fixed uploading of csv files. --- src/client/documents/Documents.ts | 39 +++++++++++++++++++-- src/client/northstar/manager/Gateway.ts | 12 +++---- src/client/views/Main.tsx | 4 +-- src/client/views/collections/CollectionSubView.tsx | 40 +++++++++++++--------- src/fields/KeyStore.ts | 1 - 5 files changed, 68 insertions(+), 28 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 72e6e57ab..f8438e093 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1,6 +1,6 @@ import { AudioField } from "../../fields/AudioField"; import { Document } from "../../fields/Document"; -import { Field } from "../../fields/Field"; +import { Field, Opt } from "../../fields/Field"; import { HtmlField } from "../../fields/HtmlField"; import { ImageField } from "../../fields/ImageField"; import { InkField, StrokeData } from "../../fields/InkField"; @@ -26,6 +26,12 @@ import { KeyValueBox } from "../views/nodes/KeyValueBox"; import { PDFBox } from "../views/nodes/PDFBox"; import { VideoBox } from "../views/nodes/VideoBox"; import { WebBox } from "../views/nodes/WebBox"; +import { Gateway } from "../northstar/manager/Gateway"; +import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils"; +import { action } from "mobx"; +import { ColumnAttributeModel } from "../northstar/core/attribute/AttributeModel"; +import { AttributeTransformationModel } from "../northstar/core/attribute/AttributeTransformationModel"; +import { AggregateFunction } from "../northstar/model/idea/idea"; export interface DocumentOptions { x?: number; @@ -200,6 +206,31 @@ export namespace Documents { export function PdfDocument(url: string, options: DocumentOptions = {}) { return assignToDelegate(SetInstanceOptions(pdfProto, options, [new URL(url), PDFField]).MakeDelegate(), options); } + export async function DBDocument(url: string, options: DocumentOptions = {}) { + let schemaName = options.title ? options.title : "-no schema-"; + let ctlog = await Gateway.Instance.GetSchema(url, schemaName) + if (ctlog && ctlog.schemas) { + let schema = ctlog.schemas[0]; + let schemaDoc = Documents.TreeDocument([], { ...options, nativeWidth: undefined, nativeHeight: undefined, width: 150, height: 100, title: schema.displayName! }); + let schemaDocuments = schemaDoc.GetList(KeyStore.Data, [] as Document[]); + CurrentUserUtils.GetAllNorthstarColumnAttributes(schema).map(attr => { + Server.GetField(attr.displayName! + ".alias", action((field: Opt) => { + if (field instanceof Document) { + schemaDocuments.push(field); + } else { + var atmod = new ColumnAttributeModel(attr); + let histoOp = new HistogramOperation(schema.displayName!, + new AttributeTransformationModel(atmod, AggregateFunction.None), + new AttributeTransformationModel(atmod, AggregateFunction.Count), + new AttributeTransformationModel(atmod, AggregateFunction.Count)); + schemaDocuments.push(Documents.HistogramDocument(histoOp, { width: 200, height: 200, title: attr.displayName! }, undefined, attr.displayName! + ".alias")); + } + })); + }); + return schemaDoc; + }; + return Documents.TreeDocument([], { width: 50, height: 100, title: schemaName }); + } export function WebDocument(url: string, options: DocumentOptions = {}) { return assignToDelegate(SetInstanceOptions(webProto, options, [new URL(url), WebField]).MakeDelegate(), options); } @@ -242,13 +273,15 @@ export namespace Documents {
` + FormattedTextBox.LayoutString("CaptionKey") + `
-
`; } +
`; + } export function FixedCaption(fieldName: string = "Caption") { return `
` + FormattedTextBox.LayoutString(fieldName + "Key") + `
-
`; } + `; + } function OuterCaption() { return (` diff --git a/src/client/northstar/manager/Gateway.ts b/src/client/northstar/manager/Gateway.ts index 8f3b6b11c..207a9ad19 100644 --- a/src/client/northstar/manager/Gateway.ts +++ b/src/client/northstar/manager/Gateway.ts @@ -23,9 +23,9 @@ export class Gateway { } } - public async GetSchema(dbName: string): Promise { + public async GetSchema(pathname: string, schemaname: string): Promise { try { - const json = await this.MakeGetRequest("schema", undefined, dbName); + const json = await this.MakeGetRequest("schema", undefined, { path: pathname, schema: schemaname }); const cat = Catalog.fromJS(json); return cat; } @@ -144,13 +144,13 @@ export class Gateway { }); } - public async MakeGetRequest(endpoint: string, signal?: AbortSignal, data?: any): Promise { - let url = !data ? Gateway.ConstructUrl(endpoint) : + public async MakeGetRequest(endpoint: string, signal?: AbortSignal, params?: any): Promise { + let url = !params ? Gateway.ConstructUrl(endpoint) : (() => { let newUrl = new URL(Gateway.ConstructUrl(endpoint)); - newUrl.searchParams.append("data", data); + Object.getOwnPropertyNames(params).map(prop => + newUrl.searchParams.append(prop, params[prop])); return Gateway.ConstructUrl(endpoint) + newUrl.search; - return newUrl as any; })(); const response = await fetch(url, diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 32798631d..012633bed 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -384,8 +384,8 @@ export class Main extends React.Component { let cat = Gateway.Instance.ClearCatalog(); cat.then(async () => { this.AddToNorthstarCatalog(await Gateway.Instance.GetCatalog()); - if (!CurrentUserUtils.GetNorthstarSchema("Book1")) - this.AddToNorthstarCatalog(await Gateway.Instance.GetSchema("http://www.cs.brown.edu/~bcz/Book1.csv")); + // if (!CurrentUserUtils.GetNorthstarSchema("Book1")) + // this.AddToNorthstarCatalog(await Gateway.Instance.GetSchema("http://www.cs.brown.edu/~bcz/Book1.csv", "Book1")); }); } diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 5cdea0568..588ff9483 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -87,8 +87,8 @@ export class CollectionSubView extends React.Component { return false; } - protected getDocumentFromType(type: string, path: string, options: DocumentOptions): Opt { - let ctor: ((path: string, options: DocumentOptions) => Document) | undefined; + protected async getDocumentFromType(type: string, path: string, options: DocumentOptions): Promise> { + let ctor: ((path: string, options: DocumentOptions) => (Document | Promise)) | undefined = undefined; if (type.indexOf("image") !== -1) { ctor = Documents.ImageDocument; } @@ -102,6 +102,10 @@ export class CollectionSubView extends React.Component { ctor = Documents.PdfDocument; options.nativeWidth = 1200; } + if (type.indexOf("excel") !== -1) { + ctor = Documents.DBDocument; + options.copyDraggedItems = true; + } if (type.indexOf("html") !== -1) { if (path.includes('localhost')) { let s = path.split('/'); @@ -159,10 +163,11 @@ export class CollectionSubView extends React.Component { })).then(res => { let type = res.headers["content-type"]; if (type) { - let doc = this.getDocumentFromType(type, str, { ...options, width: 300, nativeWidth: 300 }); - if (doc) { - this.props.addDocument(doc, false); - } + this.getDocumentFromType(type, str, { ...options, width: 300, nativeWidth: 300 }).then(doc => { + if (doc) { + this.props.addDocument(doc, false); + } + }); } }); promises.push(prom); @@ -176,6 +181,7 @@ export class CollectionSubView extends React.Component { if (file) { formData.append('file', file); } + let dropFileName = file ? file.name : "-empty-"; let prom = fetch(upload, { method: 'POST', @@ -185,18 +191,20 @@ export class CollectionSubView extends React.Component { json.map((file: any) => { let path = window.location.origin + file; runInAction(() => { - let doc = this.getDocumentFromType(type, path, { ...options, nativeWidth: 300, width: 300 }); + let docPromise = this.getDocumentFromType(type, path, { ...options, nativeWidth: 300, width: 300, title: dropFileName }); - let docs = this.props.Document.GetT(KeyStore.Data, ListField); - if (docs !== FieldWaiting) { - if (!docs) { - docs = new ListField(); - this.props.Document.Set(KeyStore.Data, docs); - } - if (doc) { - docs.Data.push(doc); + docPromise.then(doc => runInAction(() => { + let docs = this.props.Document.GetT(KeyStore.Data, ListField); + if (docs !== FieldWaiting) { + if (!docs) { + docs = new ListField(); + this.props.Document.Set(KeyStore.Data, docs); + } + if (doc) { + docs.Data.push(doc); + } } - } + })); }); }); }); diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index 425408273..da2d7268f 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -1,5 +1,4 @@ import { Key } from "./Key"; -import { KeyTransfer } from "../server/Message"; export namespace KeyStore { export const Prototype = new Key("Prototype"); -- cgit v1.2.3-70-g09d2 From e0b3c759880639bf56f9b8b39ea2e38c5cbad8a6 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 10 Apr 2019 14:28:25 -0400 Subject: fixed extra rendering for collections. --- src/client/Server.ts | 10 +++---- .../dash-nodes/HistogramBoxPrimitives.tsx | 6 ++-- src/client/util/DragManager.ts | 4 +-- src/client/util/SelectionManager.ts | 2 +- src/client/views/DocumentDecorations.tsx | 5 ++-- src/client/views/Main.scss | 24 +++++++-------- src/client/views/Main.tsx | 19 ++++++++---- .../views/collections/CollectionDockingView.tsx | 4 +-- src/client/views/collections/CollectionPDFView.tsx | 3 +- .../views/collections/CollectionSchemaView.tsx | 4 +-- src/client/views/collections/CollectionSubView.tsx | 3 +- .../views/collections/CollectionVideoView.tsx | 3 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 7 +++-- src/client/views/nodes/DocumentView.tsx | 35 ++++++++++++++-------- src/client/views/nodes/FieldView.tsx | 10 +++---- src/client/views/nodes/FormattedTextBox.tsx | 4 +-- src/client/views/nodes/VideoBox.tsx | 2 +- 17 files changed, 84 insertions(+), 61 deletions(-) (limited to 'src') diff --git a/src/client/Server.ts b/src/client/Server.ts index 857101a33..228d94a7b 100644 --- a/src/client/Server.ts +++ b/src/client/Server.ts @@ -1,10 +1,10 @@ import { Key } from "../fields/Key"; -import { ObservableMap, action, reaction } from "mobx"; +import { ObservableMap, action, reaction, runInAction } from "mobx"; import { Field, FieldWaiting, FIELD_WAITING, Opt, FieldId } from "../fields/Field"; import { Document } from "../fields/Document"; import { SocketStub, FieldMap } from "./SocketStub"; import * as OpenSocket from 'socket.io-client'; -import { Utils } from "./../Utils"; +import { Utils, emptyFunction } from "./../Utils"; import { MessageStore, Types } from "./../server/Message"; export class Server { @@ -59,7 +59,7 @@ export class Server { public static GetFields(fieldIds: FieldId[]): Promise<{ [id: string]: Field }>; public static GetFields(fieldIds: FieldId[], callback: (fields: FieldMap) => any): void; public static GetFields(fieldIds: FieldId[], callback?: (fields: FieldMap) => any): Promise | void { - let fn = (cb: (fields: FieldMap) => void) => { + let fn = (cb: (fields: FieldMap) => void) => runInAction(() => { let neededFieldIds: FieldId[] = []; let waitingFieldIds: FieldId[] = []; @@ -104,7 +104,7 @@ export class Server { } }, { fireImmediately: true }); })); - }; + }); if (callback) { fn(callback); } else { @@ -167,7 +167,7 @@ export class Server { if (f) { // console.log("Applying : " + field._id); f.UpdateFromServer(field.data); - f.init(() => { }); + f.init(emptyFunction); } else { // console.log("Not applying wa : " + field._id); } diff --git a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx index 4c5bdb14b..721bf6a89 100644 --- a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx +++ b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx @@ -1,7 +1,7 @@ import React = require("react"); import { computed, observable, reaction, runInAction, trace, action } from "mobx"; import { observer } from "mobx-react"; -import { Utils as DashUtils } from '../../../Utils'; +import { Utils as DashUtils, emptyFunction } from '../../../Utils'; import { FilterModel } from "../../northstar/core/filter/FilterModel"; import { ModelHelpers } from "../../northstar/model/ModelHelpers"; import { ArrayUtil } from "../../northstar/utils/ArrayUtil"; @@ -49,7 +49,7 @@ export class HistogramBoxPrimitives extends React.Component bp.BrushIndex === allBrushIndex); if (!rawAllBrushPrim) { - return () => { }; + return emptyFunction; } let allBrushPrim = rawAllBrushPrim; return () => runInAction(() => { @@ -97,7 +97,7 @@ export class HistogramBoxPrimitives extends React.Component; } - drawRect(r: PIXIRectangle, barAxis: number, color: number | undefined, classExt: string, tapHandler: () => void = () => { }) { + drawRect(r: PIXIRectangle, barAxis: number, color: number | undefined, classExt: string, tapHandler: () => void = emptyFunction) { if (r.height < 0) { r.y += r.height; r.height = -r.height; diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 4849ae9f7..f7395578f 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -4,7 +4,7 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie import { CollectionView } from "../views/collections/CollectionView"; import { DocumentDecorations } from "../views/DocumentDecorations"; import { DocumentView } from "../views/nodes/DocumentView"; -import { returnFalse } from "../../Utils"; +import { returnFalse, emptyFunction } from "../../Utils"; export function setupDrag(_reference: React.RefObject, docFunc: () => Document, moveFunc?: DragManager.MoveFunction, copyOnDrop: boolean = false) { let onRowMove = action((e: PointerEvent): void => { @@ -224,7 +224,7 @@ export namespace DragManager { CollectionDockingView.Instance.StartOtherDrag(docs, { pageX: e.pageX, pageY: e.pageY, - preventDefault: () => { }, + preventDefault: emptyFunction, button: 0 }); } diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 5ddaafc72..c6b8c7b0d 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -48,7 +48,7 @@ export namespace SelectionManager { manager.DeselectAll(); if (found) manager.SelectDoc(found, false); - Main.Instance.SetTextDoc(undefined, undefined); + Main.Instance.SetTextDoc(undefined, undefined, undefined); } export function SelectedDocuments(): Array { diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 28af46358..b7bf727f1 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -15,6 +15,7 @@ import { DocumentView } from "./nodes/DocumentView"; import { LinkMenu } from "./nodes/LinkMenu"; import React = require("react"); import { FieldWaiting } from "../../fields/Field"; +import { emptyFunction } from "../../Utils"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -217,7 +218,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> let dragData = new DragManager.LinkDragData(SelectionManager.SelectedDocuments()[0]); DragManager.StartLinkDrag(this._linkerButton.current, dragData, e.pageX, e.pageY, { handlers: { - dragComplete: action(() => { }), + dragComplete: action(emptyFunction), }, hideSource: false }); @@ -262,7 +263,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> let dragData = new DragManager.DocumentDragData(moddrag.length ? moddrag : draggedDocs); DragManager.StartDocumentDrag([this._linkButton.current], dragData, e.x, e.y, { handlers: { - dragComplete: action(() => { }), + dragComplete: action(emptyFunction), }, hideSource: false }); diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index fe7f007b0..8ef6b83f1 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -169,21 +169,21 @@ button:hover { overflow: scroll; } .mainDiv-textInput { - background:pink; - width: 200px; - height: 200px; + background-color: rgba(248, 6, 6, 0.1); + width: 200px; + height: 200px; + position:absolute; + overflow: visible; + top: 0; + left: 0; + .formattedTextBox-cont { + background-color: rgba(248, 6, 6, 0.1); + width: 100%; + height: 100%; position:absolute; - overflow: visible; top: 0; left: 0; - .formattedTextBox-cont { - background:pink; - width: 100%; - height: 100%; - position:absolute; - top: 0; - left: 0; - } +} } #mainContent-div { width:100%; diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 012633bed..2751b1899 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -23,7 +23,7 @@ import { Documents } from '../documents/Documents'; import { ColumnAttributeModel } from '../northstar/core/attribute/AttributeModel'; import { AttributeTransformationModel } from '../northstar/core/attribute/AttributeTransformationModel'; import { Gateway, Settings } from '../northstar/manager/Gateway'; -import { AggregateFunction, Catalog } from '../northstar/model/idea/idea'; +import { AggregateFunction, Catalog, Point } from '../northstar/model/idea/idea'; import '../northstar/model/ModelExtensions'; import { HistogramOperation } from '../northstar/operations/HistogramOperation'; import '../northstar/utils/Extensions'; @@ -204,10 +204,12 @@ export class Main extends React.Component { @observable _textDoc?: Document = undefined; _textRect: any; + _textXf: Transform = Transform.Identity(); @action - SetTextDoc(textDoc?: Document, div?: HTMLDivElement) { + SetTextDoc(textDoc?: Document, div?: HTMLDivElement, tx?: Transform) { this._textDoc = undefined; this._textDoc = textDoc; + this._textXf = tx ? tx : Transform.Identity(); if (div) { this._textRect = div.getBoundingClientRect(); } @@ -220,8 +222,15 @@ export class Main extends React.Component { let y: number = this._textRect.y; let w: number = this._textRect.width; let h: number = this._textRect.height; - return
- { }} /> + let t = this._textXf.transformPoint(0, 0); + let s = this._textXf.transformPoint(1, 0); + s[0] = Math.sqrt((s[0] - t[0]) * (s[0] - t[0]) + (s[1] - t[1]) * (s[1] - t[1])); + return
+
+ + { }} /> + +
; } else return (null); @@ -310,7 +319,7 @@ export class Main extends React.Component {
,
-
+
]; } diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index ea6d3a247..212cf8a69 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -50,7 +50,7 @@ export class CollectionDockingView extends React.Component this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener. - onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 })); + onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: emptyFunction, button: 0 })); } @action @@ -204,7 +204,7 @@ export class CollectionDockingView extends React.Component { }), + dragComplete: action(emptyFunction), }, hideSource: false }); diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 97bac745c..6cbe59012 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -7,6 +7,7 @@ import React = require("react"); import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import { CollectionRenderProps, CollectionBaseView, CollectionViewType } from "./CollectionBaseView"; +import { emptyFunction } from "../../../Utils"; @observer @@ -33,7 +34,7 @@ export class CollectionPDFView extends React.Component { onContextMenu = (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 - ContextMenu.Instance.addItem({ description: "PDFOptions", event: () => { } }); + ContextMenu.Instance.addItem({ description: "PDFOptions", event: emptyFunction }); } } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 587f60b3d..c67f8cd97 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -77,8 +77,8 @@ export class CollectionSchemaView extends CollectionSubView { let props: FieldViewProps = { Document: rowProps.value[0], fieldKey: rowProps.value[1], - isSelected: () => false, - select: () => { }, + isSelected: returnFalse, + select: emptyFunction, isTopMost: false, selectOnLoad: false, ScreenToLocalTransform: Transform.Identity, diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 588ff9483..ef0684955 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -15,6 +15,7 @@ import { ServerUtils } from "../../../server/ServerUtil"; import { Server } from "../../Server"; import { FieldViewProps } from "../nodes/FieldView"; import * as rp from 'request-promise'; +import { emptyFunction } from "../../../Utils"; export interface CollectionViewProps extends FieldViewProps { addDocument: (document: Document, allowDuplicates?: boolean) => boolean; @@ -213,7 +214,7 @@ export class CollectionSubView extends React.Component { } if (promises.length) { - Promise.all(promises).catch(() => { }).then(() => batch.end()); + Promise.all(promises).catch(emptyFunction).then(() => batch.end()); } else { batch.end(); } diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index b02983a2e..6c9780adb 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -7,6 +7,7 @@ import React = require("react"); import "./CollectionVideoView.scss"; import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; +import { emptyFunction } from "../../../Utils"; @observer @@ -100,7 +101,7 @@ export class CollectionVideoView extends React.Component { onContextMenu = (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 - ContextMenu.Instance.addItem({ description: "VideoOptions", event: () => { } }); + ContextMenu.Instance.addItem({ description: "VideoOptions", event: emptyFunction }); } } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 1feb30db1..102455d27 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -25,6 +25,7 @@ import { SelectionManager } from "../../../util/SelectionManager"; import { NumberField } from "../../../../fields/NumberField"; import { Main } from "../../Main"; import Measure from "react-measure"; +import { returnFalse, emptyFunction } from "../../../../Utils"; @observer export class CollectionFreeFormView extends CollectionSubView { @@ -200,7 +201,7 @@ export class CollectionFreeFormView extends CollectionSubView { @action private SetPan(panX: number, panY: number) { - Main.Instance.SetTextDoc(undefined, undefined); + Main.Instance.SetTextDoc(undefined, undefined, undefined); var x1 = this.getLocalTransform().inverse().Scale; const newPanX = Math.min((1 - 1 / x1) * this.nativeWidth, Math.max(0, panX)); const newPanY = Math.min((1 - 1 / x1) * this.nativeHeight, Math.max(0, panY)); @@ -290,13 +291,13 @@ export class CollectionFreeFormView extends CollectionSubView { get backgroundView() { return !this.backgroundLayout ? (null) : ( false} select={() => { }} />); + layoutKey={KeyStore.BackgroundLayout} isTopMost={this.props.isTopMost} isSelected={returnFalse} select={emptyFunction} />); } @computed get overlayView() { return !this.overlayLayout ? (null) : ( false} select={() => { }} />); + layoutKey={KeyStore.OverlayLayout} isTopMost={this.props.isTopMost} isSelected={returnFalse} select={emptyFunction} />); } getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform()); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 9670ca6b2..42967eb22 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,4 +1,4 @@ -import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx"; +import { action, computed, IReactionDisposer, reaction, runInAction, trace } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { Field, FieldWaiting, Opt } from "../../../fields/Field"; @@ -8,7 +8,7 @@ import { ListField } from "../../../fields/ListField"; import { BooleanField } from "../../../fields/BooleanField"; import { TextField } from "../../../fields/TextField"; import { ServerUtils } from "../../../server/ServerUtil"; -import { Utils } from "../../../Utils"; +import { Utils, emptyFunction } from "../../../Utils"; import { Documents } from "../../documents/Documents"; import { DocumentManager } from "../../util/DocumentManager"; import { DragManager } from "../../util/DragManager"; @@ -62,12 +62,12 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { let Keys: { [name: string]: any } = {}; let Fields: { [name: string]: any } = {}; for (const key of keys) { - let fn = () => { }; + let fn = emptyFunction; Object.defineProperty(fn, "name", { value: key + "Key" }); Keys[key] = fn; } for (const field of fields) { - let fn = () => { }; + let fn = emptyFunction; Object.defineProperty(fn, "name", { value: field }); Fields[field] = fn; } @@ -157,7 +157,7 @@ export class DocumentView extends React.Component { dragData.moveDocument = this.props.moveDocument; DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { handlers: { - dragComplete: action(() => { }) + dragComplete: action(emptyFunction) }, hideSource: !dropAliasOfDraggedDoc }); @@ -377,14 +377,28 @@ export class DocumentView extends React.Component { SelectionManager.SelectDoc(this, ctrlPressed); } + @computed get nativeWidth(): number { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); } + @computed get nativeHeight(): number { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); } + @computed + get contents() { + trace(); + return (); + } + render() { if (!this.props.Document) { return null; } + trace(); var scaling = this.props.ContentScaling(); - var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); - var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); + var nativeWidth = this.nativeWidth; + var nativeHeight = this.nativeHeight; if (this.isMinimized()) { return ( @@ -420,12 +434,7 @@ export class DocumentView extends React.Component { onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} > - + {this.contents}
); } diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 07c5b332c..40b44aae5 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -19,7 +19,7 @@ import { ListField } from "../../../fields/ListField"; import { DocumentContentsView } from "./DocumentContentsView"; import { Transform } from "../../util/Transform"; import { KeyStore } from "../../../fields/KeyStore"; -import { returnFalse } from "../../../Utils"; +import { returnFalse, emptyFunction } from "../../../Utils"; // @@ -85,9 +85,9 @@ export class FieldView extends React.Component { PanelHeight={() => 100} isTopMost={true} //TODO Why is this top most? selectOnLoad={false} - focus={() => { }} - isSelected={() => false} - select={() => false} + focus={emptyFunction} + isSelected={returnFalse} + select={returnFalse} layoutKey={KeyStore.Layout} ContainingCollectionView={undefined} parentActive={this.props.active} @@ -111,7 +111,7 @@ export class FieldView extends React.Component { } else { return

{"Waiting for server..."}

; - } + } } } \ No newline at end of file diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index beca6cdc6..bb1bc4fb0 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -161,13 +161,13 @@ export class FormattedTextBox extends React.Component { } if (this.props.fieldKey !== KeyStore.Archives) { e.preventDefault(); - Main.Instance.SetTextDoc(this.props.Document, this._ref.current!); + Main.Instance.SetTextDoc(this.props.Document, this._ref.current!, this.props.ScreenToLocalTransform()); } } onFocused = (e: React.FocusEvent): void => { if (this.props.fieldKey !== KeyStore.Archives) { - Main.Instance.SetTextDoc(this.props.Document, this._ref.current!); + Main.Instance.SetTextDoc(this.props.Document, this._ref.current!, this.props.ScreenToLocalTransform()); } } diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 314af64c9..9d7c2bc56 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -66,7 +66,7 @@ export class VideoBox extends React.Component { {({ measureRef }) =>
-