Dash Web

{this._items.filter(prop => { return prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1; diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index fb9091dfc..11595aa01 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -1,17 +1,18 @@ +@import "global_variables"; #documentDecorations-container { position: absolute; display: grid; z-index: 1000; - grid-template-rows: 20px 1fr 20px 0px; - grid-template-columns: 20px 1fr 20px; + grid-template-rows: 8px 1fr 8px 30px; + grid-template-columns: 8px 1fr 8px; pointer-events: none; #documentDecorations-centerCont { background: none; } .documentDecorations-resizer { pointer-events: auto; - background: lightblue; - opacity: 0.4; + background: $alt-accent; + opacity: 0.8; } #documentDecorations-topLeftResizer, #documentDecorations-bottomRightResizer { @@ -29,23 +30,89 @@ #documentDecorations-rightResizer { cursor: ew-resize; } - } + +// position: absolute; +// display: grid; +// z-index: 1000; +// grid-template-rows: 20px 1fr 20px 0px; +// grid-template-columns: 20px 1fr 20px; +// pointer-events: none; +// #documentDecorations-centerCont { +// background: none; +// } +// .documentDecorations-resizer { +// pointer-events: auto; +// background: lightblue; +// opacity: 0.4; +// } +// #documentDecorations-topLeftResizer, +// #documentDecorations-bottomRightResizer { +// cursor: nwse-resize; +// } +// #documentDecorations-topRightResizer, +// #documentDecorations-bottomLeftResizer { +// cursor: nesw-resize; +// } +// #documentDecorations-topResizer, +// #documentDecorations-bottomResizer { +// cursor: ns-resize; +// } +// #documentDecorations-leftResizer, +// #documentDecorations-rightResizer { +// cursor: ew-resize; +// } +// } +.linkFlyout { + grid-column: 1/4 +} + +.linkButton-empty:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; +} + +.linkButton-nonempty:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; +} + .linkButton-empty { height: 20px; width: 20px; margin-top: 10px; border-radius: 50%; - opacity: 0.6; + opacity: 0.9; pointer-events: auto; - background-color: #2B6091; + background-color: $dark-color; + color: $light-color; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + transition: transform 0.2s; + text-align: center; + display: flex; + justify-content: center; + align-items: center; } + .linkButton-nonempty { height: 20px; width: 20px; margin-top: 10px; border-radius: 50%; - opacity: 0.6; + opacity: 0.9; pointer-events: auto; - background-color: rgb(35, 165, 42); + background-color: $dark-color; + color: $light-color; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + transition: transform 0.2s; + text-align: center; + display: flex; + justify-content: center; + align-items: center; } \ No newline at end of file diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index dc62f97cf..3bdb7d5b3 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -18,6 +18,8 @@ export class DocumentDecorations extends React.Component { static Instance: DocumentDecorations private _resizer = "" private _isPointerDown = false; + + private _resizeBorderWidth = 16; private _linkButton = React.createRef(); @observable private _hidden = false; @@ -206,21 +208,24 @@ export class DocumentDecorations extends React.Component { let linkButton = null; if (SelectionManager.SelectedDocuments().length > 0) { let selFirst = SelectionManager.SelectedDocuments()[0]; + let linkToSize = selFirst.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []).length; + let linkFromSize = selFirst.props.Document.GetData(KeyStore.LinkedFromDocs, ListField, []).length; + let linkCount = linkToSize + linkFromSize; linkButton = ( }> -

{linkCount}

); } return (

e.preventDefault()}>

@@ -232,7 +237,7 @@ export class DocumentDecorations extends React.Component {

e.preventDefault()}>

- {linkButton} +

{linkButton}

) diff --git a/src/client/views/EditableView.scss b/src/client/views/EditableView.scss new file mode 100644 index 000000000..be3c5069a --- /dev/null +++ b/src/client/views/EditableView.scss @@ -0,0 +1,6 @@ +.editableView-container-editing { + overflow-wrap: break-word; + word-wrap: break-word; + hyphens: auto; + max-width: 300px; +} \ No newline at end of file diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 84b1b91c3..3b54c0dbb 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -1,6 +1,7 @@ import React = require('react') import { observer } from 'mobx-react'; import { observable, action } from 'mobx'; +import "./EditableView.scss" export interface EditableProps { /** @@ -49,7 +50,7 @@ export class EditableView extends React.Component { style={{ display: "inline" }}> } else { return ( -

this.editing = true)}> {this.props.contents}

diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index f654b194b..e79b146b9 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -1,8 +1,10 @@ +@import "global_variables"; .inking-canvas { - position: fixed; + position: absolute; top: -50000px; left: -50000px; // z-index: 99; //overlays ink on top of everything svg { + position:absolute; width: 100000px; height: 100000px; .highlight { @@ -13,20 +15,135 @@ .inking-control { position: absolute; - right: 0; - bottom: 75px; - text-align: right; + left: 70px; + bottom: 70px; + margin: 0; + padding: 0; + display: flex; + label, + input, + option { + font-size: 12px; + } + input[type="range"] { + -webkit-appearance: none; + background-color: transparent; + vertical-align: middle; + margin-top: 8px; + &:focus { + outline: none; + } + &::-webkit-slider-runnable-track { + width: 100%; + height: 3px; + border-radius: 1.5px; + cursor: pointer; + background: $intermediate-color; + } + &::-webkit-slider-thumb { + height: 12px; + width: 12px; + border: 1px solid $intermediate-color; + border-radius: 6px; + background: $light-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } + &::-moz-range-track { + width: 100%; + height: 3px; + border-radius: 1.5px; + cursor: pointer; + background: $light-color; + } + &::-moz-range-thumb { + height: 12px; + width: 12px; + border: 1px solid $intermediate-color; + border-radius: 6px; + background: $light-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } + } + input[type="text"] { + border: none; + padding: 0 0px; + background: transparent; + color: $dark-color; + font-size: 12px; + margin-top: 4px; + } .ink-panel { - margin-top: 12px; + margin: 6px 12px 6px 0; + height: 30px; + vertical-align: middle; + line-height: 36px; + padding: 0 10px; + color: $intermediate-color; &:first { margin-top: 0; } } + .ink-tools { + display: flex; + background-color: transparent; + border-radius: 0; + padding: 0; + button { + height: 36px; + padding: 0px; + padding-bottom: 3px; + margin-left: 10px; + background-color: transparent; + color: $intermediate-color; + } + button:hover { + transform: scale(1.15); + } + } .ink-size { display: flex; justify-content: space-between; - input { - width: 85%; + input[type="text"] { + width: 42px; + } + >* { + margin-right: 6px; + &:last-child { + margin-right: 0; + } + } + } + .ink-color { + display: flex; + position: relative; + padding-right: 0; + label { + margin-right: 6px; + } + .ink-color-display { + border-radius: 11px; + width: 22px; + height: 22px; + margin-top: 6px; + cursor: pointer; + text-align: center; // span { + // color: $light-color; + // font-size: 8px; + // user-select: none; + // } + } + .ink-color-picker { + background-color: $light-color; + border-radius: 5px; + padding: 12px; + position: absolute; + bottom: 36px; + left: -3px; + box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; } } } \ No newline at end of file diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 0d87c1239..84c47f616 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -1,4 +1,5 @@ import { observer } from "mobx-react"; +import { observable } from "mobx"; import { action, computed } from "mobx"; import { InkingControl } from "./InkingControl"; import React = require("react"); @@ -6,14 +7,10 @@ import { Transform } from "../util/Transform"; import { Document } from "../../fields/Document"; import { KeyStore } from "../../fields/KeyStore"; import { InkField, InkTool, StrokeData, StrokeMap } from "../../fields/InkField"; -import { JsxArgs } from "./nodes/DocumentView"; import { InkingStroke } from "./InkingStroke"; import "./InkingCanvas.scss" -import { CollectionDockingView } from "./collections/CollectionDockingView"; import { Utils } from "../../Utils"; import { FieldWaiting } from "../../fields/Field"; -import { getMapLikeKeys } from "mobx/lib/internal"; - interface InkCanvasProps { getScreenTransform: () => Transform; @@ -22,7 +19,16 @@ interface InkCanvasProps { @observer export class InkingCanvas extends React.Component { - + static InkOffset: number = 50000; + public static IntersectStrokeRect(stroke: StrokeData, selRect: { left: number, top: number, width: number, height: number }): boolean { + let inside = false; + stroke.pathData.map(val => { + if (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) + inside = true; + }); + return inside + } private _isDrawing: boolean = false; private _idGenerator: string = ""; @@ -51,7 +57,6 @@ export class InkingCanvas extends React.Component { document.removeEventListener("mouseup", this.handleMouseUp); } - @action handleMouseDown = (e: React.PointerEvent): void => { if (e.button != 0 || @@ -62,7 +67,6 @@ export class InkingCanvas extends React.Component { if (InkingControl.Instance.selectedTool === InkTool.Eraser) { return } - e.stopPropagation() const point = this.relativeCoordinatesForEvent(e); // start the new line, saves a uuid to represent the field of the stroke @@ -74,7 +78,7 @@ export class InkingCanvas extends React.Component { color: InkingControl.Instance.selectedColor, width: InkingControl.Instance.selectedWidth, tool: InkingControl.Instance.selectedTool, - page: this.props.Document.GetNumber(KeyStore.CurPage, 0) + page: this.props.Document.GetNumber(KeyStore.CurPage, -1) }); this.inkData = data; this._isDrawing = true; @@ -110,8 +114,8 @@ export class InkingCanvas extends React.Component { relativeCoordinatesForEvent = (e: React.MouseEvent): { x: number, y: number } => { let [x, y] = this.props.getScreenTransform().transformPoint(e.clientX, e.clientY); - x += 50000 - y += 50000 + x += InkingCanvas.InkOffset; + y += InkingCanvas.InkOffset; return { x, y }; } @@ -145,11 +149,11 @@ export class InkingCanvas extends React.Component { // parse data from server let paths: Array = [] - let curPage = this.props.Document.GetNumber(KeyStore.CurPage, 0) + let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1) Array.from(lines).map(item => { let id = item[0]; let strokeData = item[1]; - if (strokeData.page == 0 || strokeData.page == curPage) + if (strokeData.page == -1 || strokeData.page == curPage) paths.push() { super(props); @@ -49,29 +58,50 @@ export class InkingControl extends React.Component { selected = (tool: InkTool) => { if (this._selectedTool === tool) { - return { backgroundColor: "black", color: "white" } + return { color: "#61aaa3" } } return {} } + @action + toggleDisplay = () => { + this._open = !this._open; + } + + @action + toggleColorPicker = () => { + this._colorPickerDisplay = !this._colorPickerDisplay; + } + render() { return ( -

- - - - -

- Size - +

+ + + + +

+ COLOR: +

this.toggleColorPicker()}> + {/* {this._colorPickerDisplay ? ▼ : ▲} */} +

+ +

+ SIZE: + ) => this.switchWidth(e.target.value)} /> + ) => this.switchWidth(e.target.value)} /> -

- -

+ + ) } } \ No newline at end of file diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index d724421d3..87b5c43d8 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -21,8 +21,6 @@ export class InkingStroke extends React.Component { @observable private _strokeColor: string = this.props.color; @observable private _strokeWidth: string = this.props.width; - private _canvasColor: string = "#cdcdcd"; - deleteStroke = (e: React.MouseEvent): void => { if (InkingControl.Instance.selectedTool === InkTool.Eraser && e.buttons === 1) { this.props.deleteCallback(this.props.id); diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index 2b1c77b74..bb42db202 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -1,22 +1,35 @@ +@import "global_variables"; +@import "nodeModuleOverrides"; html, body { width: 100%; height: 100%; overflow: hidden; - font-family: 'Hind Siliguri', sans-serif; + font-family: $sans-serif; margin: 0; } +#dash-title { + position: absolute; + right: 46.5%; + letter-spacing: 3px; + top: 9px; + font-size: 12px; + color: $alt-accent; + z-index: 9999; +} + h1 { font-size: 50px; position: fixed; top: 30px; left: 50%; transform: translateX(-50%); - color: black; + color: $dark-color; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; z-index: 9999; - font-family: 'Fjalla One', sans-serif; + font-family: $sans-serif; + font-weight: 700; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; @@ -33,23 +46,131 @@ p { margin: 0px; padding: 0px; } + ::-webkit-scrollbar { -webkit-appearance: none; - height:5px; - width:5px; + height: 5px; + width: 5px; } + ::-webkit-scrollbar-thumb { border-radius: 2px; - background-color: rgba(0,0,0,.5); + background-color: rgba(0, 0, 0, 0.5); +} + +// button stuff +button { + background: $dark-color; + outline: none; + border: 0px; + color: $light-color; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + padding: 10px; + transition: transform 0.2s; +} + +button:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; } -.main-buttonDiv { +.clear-db-button { position: absolute; - width: 150px; - left: 0px; + right: 45%; + bottom: 3%; + font-size: 50%; +} + +.round-button { + width: 36px; + height: 36px; + border-radius: 18px; + font-size: 15px; +} + +.round-button:hover { + transform: scale(1.15); +} + +.add-button { + position: relative; + margin-right: 10px; } + .main-undoButtons { position: absolute; width: 150px; right: 0px; } + +//toolbar stuff +#toolbar { + position: absolute; + bottom: 62px; + left: 24px; + .toolbar-button { + display: block; + margin-bottom: 10px; + } +} + +// add nodes menu. Note that the + button is actually an input label, not an actual button. +#add-nodes-menu { + position: absolute; + bottom: 24px; + left: 24px; + label { + background: $dark-color; + color: $light-color; + display: inline-block; + border-radius: 18px; + font-size: 25px; + width: 36px; + height: 36px; + margin-right: 10px; + cursor: pointer; + transition: transform 0.2s; + } + label p { + padding-left: 10.5px; + padding-top: 3px; + } + label:hover { + background: $main-accent; + transform: scale(1.15); + } + input { + display: none; + } + input:not(:checked)~#add-options-content { + display: none; + } + input:checked~label { + transform: rotate(45deg); + transition: transform 0.5s; + cursor: pointer; + } +} + +#add-options-content { + display: table; + opacity: 1; + margin: 0; + padding: 0; + position: relative; + float: right; + bottom: 0.3em; + margin-bottom: -1.68em; +} + +ul#add-options-list { + list-style: none; + padding: 0; + li { + display: inline-block; + padding: 0; + } +} \ No newline at end of file diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 95bf9cad0..3a68b98ce 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -18,6 +18,19 @@ import { DocumentDecorations } from './DocumentDecorations'; import { DocumentView } from './nodes/DocumentView'; import "./Main.scss"; import { InkingControl } from './InkingControl'; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faFont } from '@fortawesome/free-solid-svg-icons'; +import { faImage } from '@fortawesome/free-solid-svg-icons'; +import { faFilePdf } from '@fortawesome/free-solid-svg-icons'; +import { faObjectGroup } from '@fortawesome/free-solid-svg-icons'; +import { faTable } from '@fortawesome/free-solid-svg-icons'; +import { faGlobeAsia } from '@fortawesome/free-solid-svg-icons'; +import { faUndoAlt } from '@fortawesome/free-solid-svg-icons'; +import { faRedoAlt } from '@fortawesome/free-solid-svg-icons'; +import { faPenNib } from '@fortawesome/free-solid-svg-icons'; +import { faFilm } from '@fortawesome/free-solid-svg-icons'; +import { faMusic } from '@fortawesome/free-solid-svg-icons'; configure({ enforceActions: "observed" }); // causes errors to be generated when modifying an observable outside of an action @@ -29,10 +42,22 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { } }), true) - const mainDocId = "mainDoc"; let mainContainer: Document; let mainfreeform: Document; + +library.add(faFont); +library.add(faImage); +library.add(faFilePdf); +library.add(faObjectGroup); +library.add(faTable); +library.add(faGlobeAsia); +library.add(faUndoAlt); +library.add(faRedoAlt); +library.add(faPenNib); +library.add(faFilm); +library.add(faMusic); + Documents.initProtos(mainDocId, (res?: Document) => { if (res instanceof Document) { mainContainer = res; @@ -80,6 +105,8 @@ Documents.initProtos(mainDocId, (res?: Document) => { ReactDOM.render((

+ {/*

— DASH —

*/} + Transform.Identity} ContentScaling={() => 1} @@ -91,27 +118,52 @@ Documents.initProtos(mainDocId, (res?: Document) => { ContainingCollectionView={undefined} /> -

- - + + + {/* @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" > + + + +

+ + {/* 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" > + +

+ +

+ -

), +

- - +

+ +

); } // "inherited" CollectionView API starts here... - + @observable + public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } @@ -49,7 +51,7 @@ export class CollectionPDFView extends React.Component { get subView(): any { return CollectionView.SubView(this); } render() { - return (

+ return (

{this.subView} {this.props.isSelected() ? this.uIButtons : (null)}

) diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index d40e6d314..0d615dc01 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -1,185 +1,162 @@ - +@import "../global_variables"; .collectionSchemaView-container { - border-style: solid; + border: 1px solid $intermediate-color; + border-radius: $border-radius; + box-sizing: border-box; + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; + +.collectionSchemaView-content { + position: absolute; + height:100%; + width:100%; + overflow:auto; +} + .collectionSchemaView-previewRegion { + position: relative; + background: $light-color; + float: left; + height: 100%; + } + .collectionSchemaView-previewHandle { + position: absolute; + height: 37px; + width: 20px; + z-index: 20; + right: 0; + top: 0; + background: $main-accent; + } + .collectionSchemaView-dividerDragger { + position: relative; box-sizing: border-box; + border-left: 1px solid $intermediate-color; + border-right: 1px solid $intermediate-color; + float: left; + height: 100%; + } + .collectionSchemaView-tableContainer { + position: relative; + float: left; + height: 100%; + } + + .ReactTable { position: absolute; + // display: inline-block; + // overflow: auto; width: 100%; height: 100%; - .collectionSchemaView-previewRegion { - position: relative; - background: black; - float: left; - height: 100%; - } - .collectionSchemaView-previewHandle { - position: absolute; - height: 37px; - width: 20px; - z-index: 20; - right: 0; - top: 0; - background: Black ; - } - .collectionSchemaView-dividerDragger{ - position: relative; - background: black; - float: left; - height: 100%; - } - .collectionSchemaView-tableContainer { + background: $light-color; + box-sizing: border-box; + border: none !important; + .rt-table { + overflow-y: auto; + overflow-x: auto; + height: 100%; + display: -webkit-inline-box; + direction: ltr; + // direction:rtl; + // display:block; + } + .rt-tbody { + //direction: ltr; + direction: rtl; + } + .rt-tr-group { + direction: ltr; + max-height: 44px; + } + .rt-td { + border-width: 1px; + border-right-color: $intermediate-color; + .imageBox-cont { position: relative; - float: left; - height: 100%; - } - - .ReactTable { - position: absolute; - // display: inline-block; - // overflow: auto; - width: 100%; + max-height: 100%; + } + .imageBox-cont img { + object-fit: contain; + max-width: 100%; height: 100%; - background: white; - box-sizing: border-box; - .rt-table { - overflow-y: auto; - overflow-x: auto; - height: 100%; - - display: -webkit-inline-box; - direction: ltr; - // direction:rtl; - // display:block; - } - .rt-tbody { - //direction: ltr; - direction: rtl; - } - .rt-tr-group { - direction: ltr; - max-height: 44px; - } - .rt-td { - border-width: 1; - border-right-color: #aaa; - .imageBox-cont { - position:relative; - max-height:100%; - } - .imageBox-cont img { - object-fit: contain; - max-width: 100%; - height: 100% - } - } - .rt-tr-group { - border-width: 1; - border-bottom-color: #aaa - } - } - .ReactTable .rt-thead.-header { - background:grey; - } - .ReactTable .rt-th, .ReactTable .rt-td { - max-height: 44; - padding: 3px 7px; - } - .ReactTable .rt-tbody .rt-tr-group:last-child { - border-bottom: grey; - border-bottom-style: solid; - border-bottom-width: 1; - } - .documentView-node:first-child { - background: grey; - .imageBox-cont img { - object-fit: contain; - } - } + } + .videobox-cont { + object-fit: contain; + width:auto; + height: 100%; + } + } + } + .ReactTable .rt-thead.-header { + background: $intermediate-color; + color: $light-color; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 12px; + height: 30px; + padding-top: 4px; + } + .ReactTable .rt-th, + .ReactTable .rt-td { + max-height: 44; + padding: 3px 7px; + font-size: 13px; + text-align: center; + } + .ReactTable .rt-tbody .rt-tr-group:last-child { + border-bottom: $intermediate-color; + border-bottom-style: solid; + border-bottom-width: 1; + } + .documentView-node:first-child { + background: $light-color; + .imageBox-cont img { + object-fit: contain; + } + } } .Resizer { - box-sizing: border-box; - background: #000; - opacity: 0.5; - z-index: 1; - background-clip: padding-box; - &.horizontal { - height: 11px; - margin: -5px 0; - border-top: 5px solid rgba(255, 255, 255, 0); - border-bottom: 5px solid rgba(255, 255, 255, 0); - cursor: row-resize; - width: 100%; - &:hover { - border-top: 5px solid rgba(0, 0, 0, 0.5); - border-bottom: 5px solid rgba(0, 0, 0, 0.5); - } - } - &.vertical { - width: 11px; - margin: 0 -5px; - border-left: 5px solid rgba(255, 255, 255, 0); - border-right: 5px solid rgba(255, 255, 255, 0); - cursor: col-resize; - &:hover { - border-left: 5px solid rgba(0, 0, 0, 0.5); - border-right: 5px solid rgba(0, 0, 0, 0.5); - } - } + box-sizing: border-box; + background: #000; + opacity: 0.5; + z-index: 1; + background-clip: padding-box; + &.horizontal { + height: 11px; + margin: -5px 0; + border-top: 5px solid rgba(255, 255, 255, 0); + border-bottom: 5px solid rgba(255, 255, 255, 0); + cursor: row-resize; + width: 100%; &:hover { - -webkit-transition: all 2s ease; - transition: all 2s ease; - } + border-top: 5px solid rgba(0, 0, 0, 0.5); + border-bottom: 5px solid rgba(0, 0, 0, 0.5); + } + } + &.vertical { + width: 11px; + margin: 0 -5px; + border-left: 5px solid rgba(255, 255, 255, 0); + border-right: 5px solid rgba(255, 255, 255, 0); + cursor: col-resize; + &:hover { + border-left: 5px solid rgba(0, 0, 0, 0.5); + border-right: 5px solid rgba(0, 0, 0, 0.5); + } + } + &:hover { + -webkit-transition: all 2s ease; + transition: all 2s ease; + } } .vertical { - section { - width: 100vh; - height: 100vh; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - } - header { - padding: 1rem; - background: #eee; - } - footer { - padding: 1rem; - background: #eee; - } -} - -.horizontal { - section { - width: 100vh; - height: 100vh; - display: flex; - flex-direction: column; - } - header { - padding: 1rem; - background: #eee; - } - footer { - padding: 1rem; - background: #eee; - } -} - -.parent { - width: 100%; - height: 100%; - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; + section { + width: 100vh; + height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -189,19 +166,71 @@ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + } + header { + padding: 1rem; + background: #eee; + } + footer { + padding: 1rem; + background: #eee; + } +} + +.horizontal { + section { + width: 100vh; + height: 100vh; + display: flex; + flex-direction: column; + } + header { + padding: 1rem; + background: #eee; + } + footer { + padding: 1rem; + background: #eee; + } +} + +.parent { + width: 100%; + height: 100%; + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } .header { - background: #aaa; - height: 3rem; - line-height: 3rem; + background: #aaa; + height: 3rem; + line-height: 3rem; } .wrapper { - background: #ffa; - margin: 5rem; - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} \ No newline at end of file + background: #ffa; + margin: 5rem; + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.-even { + background: $light-color !important; +} + +.-odd { + background: $light-color-secondary !important; +} diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 04f017378..8c1aeef2c 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,5 +1,5 @@ import React = require("react") -import { action, observable } from "mobx"; +import { action, observable, computed } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; @@ -24,14 +24,14 @@ import { setupDrag } from "../../util/DragManager"; @observer export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef(); - private DIVIDER_WIDTH = 5; + private DIVIDER_WIDTH = 4; @observable _contentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ContentScaling prop of the DocumentView @observable _dividerX = 0; @observable _panelWidth = 0; @observable _panelHeight = 0; @observable _selectedIndex = 0; - @observable _splitPercentage: number = 50; + @computed get splitPercentage() { return this.props.Document.GetNumber(KeyStore.SchemaSplitPercentage, 0); } renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { @@ -49,7 +49,7 @@ export class CollectionSchemaView extends CollectionViewBase { let reference = React.createRef(); let onItemDown = setupDrag(reference, () => props.doc); return ( -

{ let field = props.doc.Get(props.fieldKey); @@ -89,7 +89,8 @@ export class CollectionSchemaView extends CollectionViewBase { return { onClick: action((e: React.MouseEvent, handleOriginal: Function) => { that._selectedIndex = rowInfo.index; - this._splitPercentage += 0.05; // bcz - ugh - needed to force Measure to do its thing and call onResize + // bcz - ugh - needed to force Measure to do its thing and call onResize + this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage - 0.05) if (handleOriginal) { handleOriginal() @@ -106,18 +107,18 @@ export class CollectionSchemaView extends CollectionViewBase { @action onDividerMove = (e: PointerEvent): void => { let nativeWidth = this._mainCont.current!.getBoundingClientRect(); - this._splitPercentage = Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100); + this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, 100 - Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100)); } @action onDividerUp = (e: PointerEvent): void => { document.removeEventListener("pointermove", this.onDividerMove); document.removeEventListener('pointerup', this.onDividerUp); - if (this._startSplitPercent == this._splitPercentage) { - this._splitPercentage = this._splitPercentage == 1 ? 66 : 100; + if (this._startSplitPercent == this.splitPercentage) { + this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0); } } onDividerDown = (e: React.PointerEvent) => { - this._startSplitPercent = this._splitPercentage; + this._startSplitPercent = this.splitPercentage; e.stopPropagation(); e.preventDefault(); document.addEventListener("pointermove", this.onDividerMove); @@ -134,12 +135,12 @@ export class CollectionSchemaView extends CollectionViewBase { e.preventDefault(); document.removeEventListener("pointermove", this.onExpanderMove); document.removeEventListener('pointerup', this.onExpanderUp); - if (this._startSplitPercent == this._splitPercentage) { - this._splitPercentage = this._splitPercentage == 100 ? 66 : 100; + if (this._startSplitPercent == this.splitPercentage) { + this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0); } } onExpanderDown = (e: React.PointerEvent) => { - this._startSplitPercent = this._splitPercentage; + this._startSplitPercent = this.splitPercentage; e.stopPropagation(); e.preventDefault(); document.addEventListener("pointermove", this.onExpanderMove); @@ -203,7 +204,7 @@ export class CollectionSchemaView extends CollectionViewBase { ) let previewHandle = !this.props.active() ? (null) : (

); - let dividerDragger = this._splitPercentage == 100 ? (null) : + let dividerDragger = this.splitPercentage == 0 ? (null) :

return (

@@ -213,7 +214,8 @@ export class CollectionSchemaView extends CollectionViewBase { this._panelHeight = r.entry.height; })}> {({ measureRef }) => -

{dividerDragger} -

{content}

{previewHandle} diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index f8d580a7b..fa0f1c761 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -1,16 +1,25 @@ +@import "../global_variables"; #body { padding: 20px; - background: #bbbbbb; + background: $light-color-secondary; + font-size: 13px; + overflow: scroll; } ul { list-style: none; + padding-left: 20px; } li { margin: 5px 0; } +.collection-child { + margin-top: 10px; + margin-bottom: 10px; +} + .no-indent { padding-left: 0; } @@ -18,10 +27,17 @@ li { .bullet { width: 1.5em; display: inline-block; + color: $intermediate-color; +} + +.coll-title { + font-size: 24px; + margin-bottom: 20px; } .collectionTreeView-dropTarget { - border-style: solid; + border: 0px solid transparent; + border-radius: $border-radius; box-sizing: border-box; height: 100%; } @@ -30,8 +46,16 @@ li { display: inline-table; } +.docContainer:hover { + .delete-button { + display: inline; + } +} + .delete-button { - color: #999999; + color: $intermediate-color; float: right; - margin-left: 1em; + margin-left: 15px; + margin-top: 3px; + display: none; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 8b06d9ac4..80fc89712 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -12,6 +12,10 @@ import { setupDrag } from "../../util/DragManager"; import { FieldWaiting } from "../../../fields/Field"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faTrashAlt, faCaretRight, faCaretDown } from '@fortawesome/free-solid-svg-icons'; + export interface TreeViewProps { document: Document; deleteDoc: (doc: Document) => void; @@ -23,6 +27,10 @@ export enum BulletType { List } +library.add(faTrashAlt); +library.add(faCaretDown); +library.add(faCaretRight); + @observer /** * Component that takes in a document prop and a boolean whether it's collapsed or not. @@ -50,11 +58,11 @@ class TreeView extends React.Component { switch (type) { case BulletType.Collapsed: - return

▶

+ return

case BulletType.Collapsible: - return

▼

+ return

case BulletType.List: - return

—

+ return

} } @@ -79,7 +87,7 @@ class TreeView extends React.Component { this.props.document.SetData(KeyStore.Title, value, TextField); return true; }} /> -

} @@ -101,7 +109,7 @@ class TreeView extends React.Component { ) ) subView = -

{this.renderBullet(BulletType.Collapsible)} {titleElement}

{

} else { - subView =

+ subView =

{this.renderBullet(BulletType.Collapsed)} {titleElement}

@@ -157,7 +165,7 @@ export class CollectionTreeView extends CollectionViewBase { return (

this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}> -

+
{ return this.props.Document.Title; @@ -165,7 +173,8 @@ export class CollectionTreeView extends CollectionViewBase { this.props.Document.SetData(KeyStore.Title, value, TextField); return true; }} /> -

{childrenElement} diff --git a/src/client/views/collections/CollectionVideoView.scss b/src/client/views/collections/CollectionVideoView.scss new file mode 100644 index 000000000..cbb981b13 --- /dev/null +++ b/src/client/views/collections/CollectionVideoView.scss @@ -0,0 +1,40 @@ + +.collectionVideoView-cont{ + width: 100%; + height: 100%; + position: absolute; + +} +.collectionVideoView-time{ + color : white; + top :25px; + left : 25px; + position: absolute; + background-color: rgba(50, 50, 50, 0.2); + transform-origin: left top; +} +.collectionVideoView-play { + width: 25px; + height: 20px; + bottom: 25px; + left : 25px; + position: absolute; + color : white; + background-color: rgba(50, 50, 50, 0.2); + border-radius: 4px; + text-align: center; + transform-origin: left bottom; +} +.collectionVideoView-full { + width: 25px; + height: 20px; + bottom: 25px; + right : 25px; + position: absolute; + color : white; + background-color: rgba(50, 50, 50, 0.2); + border-radius: 4px; + text-align: center; + transform-origin: right bottom; + +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index a6471f53c..b64ef3c07 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -1,4 +1,4 @@ -import { action, computed } from "mobx"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/KeyStore"; @@ -7,6 +7,7 @@ import { CollectionView, CollectionViewType } from "./CollectionView"; import { CollectionViewProps } from "./CollectionViewBase"; import React = require("react"); import { FieldId } from "../../../fields/Field"; +import "./CollectionVideoView.scss" @observer @@ -18,14 +19,29 @@ export class CollectionVideoView extends React.Component { isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`; } - public SelectedDocs: FieldId[] = [] - @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : 0; - @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : 0; + private _mainCont = React.createRef(); + + private get uIButtons() { + let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]); + return ([ +

+ {"" + Math.round(this.ctime)} + {" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)} +

, +

+ {this.playing ? "\"" : ">"} +

, +

+ F +

+ ]); + } + - @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, 0); } - @computed private get numPages() { return this.props.Document.GetNumber(KeyStore.NumPages, 0); } // "inherited" CollectionView API starts here... + @observable + public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } @@ -40,11 +56,63 @@ export class CollectionVideoView extends React.Component { get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; } get subView(): any { return CollectionView.SubView(this); } + componentDidMount() { + this.updateTimecode(); + } + + get player(): HTMLVideoElement | undefined { + return this._mainCont.current ? this._mainCont.current.getElementsByTagName("video")[0] : undefined; + } + + @action + updateTimecode = () => { + if (this.player) { + this.ctime = this.player.currentTime; + this.props.Document.SetNumber(KeyStore.CurPage, Math.round(this.ctime)); + } + setTimeout(() => this.updateTimecode(), 100) + } + + + @observable + ctime: number = 0 + @observable + playing: boolean = false; + + @action + onPlayDown = () => { + if (this.player) { + if (this.player.paused) { + this.player.play(); + this.playing = true; + } else { + this.player.pause(); + this.playing = false; + } + } + } + @action + onFullDown = (e: React.PointerEvent) => { + if (this.player) { + this.player.requestFullscreen(); + e.stopPropagation(); + e.preventDefault(); + } + } + + @action + onResetDown = () => { + if (this.player) { + this.player.pause(); + this.player.currentTime = 0; + } + + } + render() { - return (

- {/*

) diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss index cb191dc8c..fb0c69cff 100644 --- a/src/client/views/nodes/LinkEditor.scss +++ b/src/client/views/nodes/LinkEditor.scss @@ -1,3 +1,4 @@ +@import "../global_variables"; .edit-container { width: 100%; height: auto; @@ -9,21 +10,34 @@ margin-bottom: 10px; padding: 5px; font-size: 12px; + border: 1px solid #bababa; } .description-input { - font-size: 12px; + font-size: 11px; padding: 5px; margin-bottom: 10px; + border: 1px solid #bababa; } .save-button { width: 50px; height: 20px; - background-color: #2B6091; + pointer-events: auto; + background-color: $dark-color; + color: $light-color; + text-transform: uppercase; + letter-spacing: 2px; + padding: 2px; + font-size: 10px; margin: 0 auto; - color: white; + transition: transform 0.2s; text-align: center; line-height: 20px; - font-size: 12px; +} + +.save-button:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; } \ No newline at end of file diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss index a120ab2a7..dedcce6ef 100644 --- a/src/client/views/nodes/LinkMenu.scss +++ b/src/client/views/nodes/LinkMenu.scss @@ -10,6 +10,7 @@ padding: 5px; margin-bottom: 10px; font-size: 12px; + border: 1px solid #bababa; } #linkMenu-list { diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx index 5c6b06d00..5eeb40772 100644 --- a/src/client/views/nodes/LinkMenu.tsx +++ b/src/client/views/nodes/LinkMenu.tsx @@ -39,8 +39,8 @@ export class LinkMenu extends React.Component {

- {this.renderLinkItems(linkTo, KeyStore.LinkedToDocs, "Source: ")} - {this.renderLinkItems(linkFrom, KeyStore.LinkedFromDocs, "Destination: ")} + {this.renderLinkItems(linkTo, KeyStore.LinkedToDocs, "Destination: ")} + {this.renderLinkItems(linkFrom, KeyStore.LinkedFromDocs, "Source: ")}

) diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 9f92410d4..ad947afd5 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -11,5 +11,5 @@ } .pdfBox-contentContainer { position: absolute; - transform-origin: "left top"; + transform-origin: left top; } \ No newline at end of file diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 544af41a2..b0b5a63a4 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -86,7 +86,7 @@ export class PDFBox extends React.Component { @observable private _interactive: boolean = false; @observable private _loaded: boolean = false; - @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, 0); } + @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, -1); } componentDidMount() { this._reactionDisposer = reaction( diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 9c60d4348..8c1ee669f 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -30,7 +30,7 @@ export class VideoBox extends React.Component { var nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 0); var nativeHeight = this.props.doc.GetNumber(KeyStore.NativeHeight, 0); var newNativeHeight = nativeWidth * r.entry.height / r.entry.width; - if (newNativeHeight != nativeHeight && !isNaN(newNativeHeight)) { + if (!nativeHeight && newNativeHeight != nativeHeight && !isNaN(newNativeHeight)) { this.props.doc.SetNumber(KeyStore.Height, newNativeHeight / nativeWidth * this.props.doc.GetNumber(KeyStore.Width, 0)); this.props.doc.SetNumber(KeyStore.NativeHeight, newNativeHeight); } @@ -48,16 +48,14 @@ export class VideoBox extends React.Component { //setTimeout(action(() => this._loaded = true), 500); return ( -

- - {({ measureRef }) => -

+ } + ) } } \ No newline at end of file diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index 6481e14fe..06cdc8fc8 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -19,11 +19,13 @@ export namespace KeyStore { export const Annotations = new Key("Annotations"); export const ViewType = new Key("ViewType"); export const Layout = new Key("Layout"); + export const BackgroundColor = new Key("BackgroundColor"); export const BackgroundLayout = new Key("BackgroundLayout"); export const OverlayLayout = new Key("OverlayLayout"); export const LayoutKeys = new Key("LayoutKeys"); export const LayoutFields = new Key("LayoutFields"); export const ColumnsKey = new Key("SchemaColumns"); + export const SchemaSplitPercentage = new Key("SchemaSplitPercentage"); export const Caption = new Key("Caption"); export const ActiveFrame = new Key("ActiveFrame"); export const DocumentText = new Key("DocumentText"); @@ -33,7 +35,6 @@ export namespace KeyStore { export const LinkTags = new Key("LinkTag"); export const Thumbnail = new Key("Thumbnail"); export const CurPage = new Key("CurPage"); - export const CurFrame = new Key("CurFrame"); export const NumPages = new Key("NumPages"); export const Ink = new Key("Ink"); } -- cgit v1.2.3-70-g09d2 From c1f88978266a007b1516295135d6959666a31894 Mon Sep 17 00:00:00 2001 From: Andrew Kim Date: Sun, 17 Mar 2019 00:24:24 -0400 Subject: fixed some things --- src/client/views/nodes/DocumentView.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 96a9ff2a8..54afda8f3 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -14,9 +14,21 @@ import { Transform } from "../../util/Transform"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionView, CollectionViewType } from "../collections/CollectionView"; import { ContextMenu } from "../ContextMenu"; +import {FormattedTextBox} from "../nodes/FormattedTextBox" +import {ImageBox} from "../nodes/ImageBox"; +import {CollectionFreeFormView} from "../collections/CollectionFreeFormView" +import {PDFBox} from "../nodes/PDFBox"; +import {WebBox} from "../nodes/WebBox" +import {CollectionSchemaView} from "../collections/CollectionSchemaView" +import {AudioBox} from "../nodes/AudioBox"; +import {VideoBox} from "../nodes/VideoBox"; +import {CollectionPDFView} from "../collections/CollectionPDFView" +import {CollectionVideoView} from "../collections/CollectionVideoView" +import {KeyValueBox} from "../nodes/KeyValueBox" import "./DocumentView.scss"; import React = require("react"); import { DocumentContentsView } from "./DocumentContentsView"; +import { faUserPlus } from "@fortawesome/free-solid-svg-icons"; const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? -- cgit v1.2.3-70-g09d2 From 301e7aef724a36926886659991c304da9c4d2b7c Mon Sep 17 00:00:00 2001 From: yipstanley Date: Sun, 17 Mar 2019 15:05:56 -0400 Subject: updates --- src/client/documents/Documents.ts | 27 +++++++++++----------- .../views/collections/CollectionViewBase.tsx | 17 +++++++++----- src/client/views/nodes/DocumentView.tsx | 4 ++-- 3 files changed, 26 insertions(+), 22 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 26167fab5..8fa2a7515 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -75,15 +75,15 @@ export namespace Documents { } function assignOptions(doc: Document, options: DocumentOptions): Document { if (options.title !== undefined) { doc.SetText(KeyStore.Title, options.title); } - if (options.panx !== undefined) { doc.SetNumber(KeyStore.PanX, options.panx); } - if (options.pany !== undefined) { doc.SetNumber(KeyStore.PanY, options.pany); } if (options.page !== undefined) { doc.SetNumber(KeyStore.Page, options.page); } if (options.scale !== undefined) { doc.SetNumber(KeyStore.Scale, options.scale); } if (options.viewType !== undefined) { doc.SetNumber(KeyStore.ViewType, options.viewType); } if (options.backgroundColor !== undefined) { doc.SetText(KeyStore.BackgroundColor, options.backgroundColor); } + if (options.ink !== undefined) { doc.Set(KeyStore.Ink, new InkField(options.ink)); } if (options.layout !== undefined) { doc.SetText(KeyStore.Layout, options.layout); } if (options.layoutKeys !== undefined) { doc.Set(KeyStore.LayoutKeys, new ListField(options.layoutKeys)); } - if (options.ink !== undefined) { doc.Set(KeyStore.Ink, new InkField(options.ink)); } + if (options.panx !== undefined) { doc.SetNumber(KeyStore.PanX, options.panx); } + if (options.pany !== undefined) { doc.SetNumber(KeyStore.PanY, options.pany); } return doc; } @@ -162,8 +162,7 @@ export namespace Documents { export function ImageDocument(url: string, options: DocumentOptions = {}) { - return SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, - [new URL(url), ImageField]).MakeDelegate(); + return assignToDelegate(SetInstanceOptions(GetImagePrototype(), options, [new URL(url), ImageField]).MakeDelegate(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }); // let doc = SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, // [new URL(url), ImageField]); // doc.SetText(KeyStore.Caption, "my caption..."); @@ -172,38 +171,38 @@ export namespace Documents { // return doc; } export function VideoDocument(url: string, options: DocumentOptions = {}) { - return SetInstanceOptions(GetVideoPrototype(), options, [new URL(url), VideoField]); + return assignToDelegate(SetInstanceOptions(GetVideoPrototype(), options, [new URL(url), VideoField]), options); } export function AudioDocument(url: string, options: DocumentOptions = {}) { - return SetInstanceOptions(GetAudioPrototype(), options, [new URL(url), AudioField]); + return assignToDelegate(SetInstanceOptions(GetAudioPrototype(), options, [new URL(url), AudioField]), options); } export function TextDocument(options: DocumentOptions = {}) { return assignToDelegate(SetInstanceOptions(GetTextPrototype(), options, ["", TextField]).MakeDelegate(), options); } export function PdfDocument(url: string, options: DocumentOptions = {}) { - return SetInstanceOptions(GetPdfPrototype(), options, [new URL(url), PDFField]).MakeDelegate(); + return assignToDelegate(SetInstanceOptions(GetPdfPrototype(), options, [new URL(url), PDFField]).MakeDelegate(), options); } export function WebDocument(url: string, options: DocumentOptions = {}) { - return SetInstanceOptions(GetWebPrototype(), options, [new URL(url), WebField]).MakeDelegate(); + return assignToDelegate(SetInstanceOptions(GetWebPrototype(), options, [new URL(url), WebField]).MakeDelegate(), options); } export function HtmlDocument(html: string, options: DocumentOptions = {}) { - return SetInstanceOptions(GetWebPrototype(), options, [html, HtmlField]).MakeDelegate(); + return assignToDelegate(SetInstanceOptions(GetWebPrototype(), options, [html, HtmlField]).MakeDelegate(), options); } export function KVPDocument(document: Document, options: DocumentOptions = {}, id?: string) { - return SetInstanceOptions(GetKVPPrototype(), options, document, id).MakeDelegate() + return assignToDelegate(SetInstanceOptions(GetKVPPrototype(), options, document, id), options) } export function FreeformDocument(documents: Array, options: DocumentOptions, id?: string, makePrototype: boolean = true) { if (!makePrototype) { return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Freeform }, [documents, ListField], id) } - return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Freeform }, [documents, ListField], id).MakeDelegate() + return assignToDelegate(SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Freeform }, [documents, ListField], id).MakeDelegate(), options) } export function SchemaDocument(documents: Array, options: DocumentOptions, id?: string) { - return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Schema }, [documents, ListField], id) + return assignToDelegate(SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Schema }, [documents, ListField], id), options) } export function DockDocument(config: string, options: DocumentOptions, id?: string) { - return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Docking }, [config, TextField], id) + return assignToDelegate(SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Docking }, [config, TextField], id), options) } // example of custom display string for an image that shows a caption. diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 7cccfaf05..6725fc2d1 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -3,7 +3,7 @@ import { Document } from "../../../fields/Document"; import { ListField } from "../../../fields/ListField"; import React = require("react"); import { KeyStore } from "../../../fields/KeyStore"; -import { FieldWaiting, Field } from "../../../fields/Field"; +import { FieldWaiting, Field, Opt } from "../../../fields/Field"; import { undoBatch } from "../../util/UndoManager"; import { DragManager } from "../../util/DragManager"; import { DocumentView } from "../nodes/DocumentView"; @@ -11,6 +11,7 @@ import { Documents, DocumentOptions } from "../../documents/Documents"; import { Key } from "../../../fields/Key"; import { Transform } from "../../util/Transform"; import { CollectionView } from "./CollectionView"; +import { NumberField } from "../../../fields/NumberField"; export interface CollectionViewProps { fieldKey: Key; @@ -51,11 +52,15 @@ export class CollectionViewBase extends React.Component let newDoc = docView ? docView.props.Document.CreateAlias() : doc.CreateAlias() de.data["newDoc"] = newDoc let oldDoc = docView ? docView.props.Document : doc - oldDoc.GetAsync(KeyStore.Width, (f: Field) => { - newDoc.Set(KeyStore.Width, f) + oldDoc.GetTAsync(KeyStore.Width, NumberField, (f: Opt) => { + if (f) { + newDoc.SetNumber(KeyStore.Width, f.Data) + } }) - oldDoc.GetAsync(KeyStore.Height, (f: Field) => { - newDoc.Set(KeyStore.Height, f) + oldDoc.GetTAsync(KeyStore.Height, NumberField, (f: Opt) => { + if (f) { + newDoc.SetNumber(KeyStore.Height, f.Data) + } }) } @@ -68,7 +73,7 @@ export class CollectionViewBase extends React.Component if (!de.data["alias"]) { this.props.removeDocument(doc) } - this.props.addDocument(doc) + this.props.addDocument(de.data["alias"] ? de.data["newDoc"] : doc) } e.stopPropagation(); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 84483ac55..a0ea9d3c2 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -156,7 +156,7 @@ export class DocumentView extends React.Component { const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); let dragData: { [id: string]: any } = {}; dragData["documentView"] = this; - dragData["document"] = ctrlPressed ? this.props.Document.CreateAlias() : this.props.Document + dragData["document"] = this.props.Document dragData["xOffset"] = x - left; dragData["yOffset"] = y - top; dragData["alias"] = ctrlPressed @@ -203,7 +203,7 @@ export class DocumentView extends React.Component { fieldsClicked = (e: React.MouseEvent): void => { if (this.props.AddDocument) { - this.props.AddDocument(Documents.KVPDocument(this.props.Document)); + this.props.AddDocument(Documents.KVPDocument(this.props.Document, { width: 300, height: 300 })); } } fullScreenClicked = (e: React.MouseEvent): void => { -- cgit v1.2.3-70-g09d2 From 1bf3a5a0108704a0204cedcbad6e6d52d19cf982 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 17 Mar 2019 22:04:03 -0400 Subject: moved DocumentContents to DocumentContentsView --- src/client/views/InkingControl.tsx | 8 +++ .../views/collections/CollectionFreeFormView.tsx | 34 ++---------- src/client/views/collections/MarqueeView.tsx | 2 +- src/client/views/collections/PreviewCursor.tsx | 10 ++-- src/client/views/nodes/DocumentContentsView.tsx | 60 +++++++++++++++------- src/client/views/nodes/DocumentView.tsx | 55 ++------------------ 6 files changed, 62 insertions(+), 107 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index fb75ef2a5..6616f68d8 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -9,6 +9,8 @@ import "./InkingCanvas.scss" import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPen, faHighlighter, faEraser, faBan } from '@fortawesome/free-solid-svg-icons'; +import { SelectionManager } from "../util/SelectionManager"; +import { KeyStore } from "../../fields/KeyStore"; library.add(faPen, faHighlighter, faEraser, faBan); @@ -34,6 +36,12 @@ export class InkingControl extends React.Component { @action switchColor = (color: ColorResult): void => { this._selectedColor = color.hex; + if (SelectionManager.SelectedDocuments().length == 1) { + var sdoc = SelectionManager.SelectedDocuments()[0]; + if (sdoc.props.ContainingCollectionView && sdoc.props.ContainingCollectionView) { + sdoc.props.Document.SetText(KeyStore.BackgroundColor, color.hex); + } + } } @action diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 988c9941f..cca57912c 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -8,28 +8,16 @@ import { TextField } from "../../../fields/TextField"; import { DragManager } from "../../util/DragManager"; import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; -import { CollectionDockingView } from "../collections/CollectionDockingView"; -import { CollectionPDFView } from "../collections/CollectionPDFView"; -import { CollectionSchemaView } from "../collections/CollectionSchemaView"; -import { CollectionVideoView } from "../collections/CollectionVideoView"; -import { CollectionView } from "../collections/CollectionView"; import { InkingCanvas } from "../InkingCanvas"; -import { AudioBox } from "../nodes/AudioBox"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; -import { DocumentView, DocumentViewProps, DocumentContents } from "../nodes/DocumentView"; -import { FormattedTextBox } from "../nodes/FormattedTextBox"; -import { ImageBox } from "../nodes/ImageBox"; -import { KeyValueBox } from "../nodes/KeyValueBox"; -import { PDFBox } from "../nodes/PDFBox"; -import { VideoBox } from "../nodes/VideoBox"; -import { WebBox } from "../nodes/WebBox"; +import { DocumentContentsView } from "../nodes/DocumentContentsView"; +import { DocumentView, DocumentViewProps } from "../nodes/DocumentView"; import "./CollectionFreeFormView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import { MarqueeView } from "./MarqueeView"; import { PreviewCursor } from "./PreviewCursor"; import React = require("react"); -const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @observer export class CollectionFreeFormView extends CollectionViewBase { @@ -283,28 +271,14 @@ export class CollectionFreeFormView extends CollectionViewBase { @computed get backgroundView() { return !this.backgroundLayout ? (null) : - ( false} select={() => { }} />); - // ( console.log(test)} - // />); } @computed get overlayView() { return !this.overlayLayout ? (null) : - ( false} select={() => { }} />); - // ( console.log(test)} - // />); } 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/collections/MarqueeView.tsx b/src/client/views/collections/MarqueeView.tsx index 65aaa837f..f5c83a934 100644 --- a/src/client/views/collections/MarqueeView.tsx +++ b/src/client/views/collections/MarqueeView.tsx @@ -121,7 +121,7 @@ export class MarqueeView extends React.Component let centerShiftX = 0 - (selRect.left + selRect.width / 2); // moves each point by the offset that shifts the selection's center to the origin. let centerShiftY = 0 - (selRect.top + selRect.height / 2); let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField); - if (ink && ink != FieldWaiting) { + if (ink && ink != FieldWaiting && ink.Data) { let idata = new Map(); ink.Data.forEach((value: StrokeData, key: string, map: any) => { let inside = InkingCanvas.IntersectStrokeRect(value, selRect); diff --git a/src/client/views/collections/PreviewCursor.tsx b/src/client/views/collections/PreviewCursor.tsx index a1411250a..cbcfa568d 100644 --- a/src/client/views/collections/PreviewCursor.tsx +++ b/src/client/views/collections/PreviewCursor.tsx @@ -1,16 +1,12 @@ -import { trace } from "mobx"; -import "./PreviewCursor.scss"; -import React = require("react"); import { action, IReactionDisposer, observable, reaction } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; -import { FieldWaiting, Opt } from "../../../fields/Field"; -import { KeyStore } from "../../../fields/KeyStore"; -import { ListField } from "../../../fields/ListField"; +import { Opt } from "../../../fields/Field"; import { Documents } from "../../documents/Documents"; -import { SelectionManager } from "../../util/SelectionManager"; import { Transform } from "../../util/Transform"; import { CollectionFreeFormView } from "./CollectionFreeFormView"; +import "./PreviewCursor.scss"; +import React = require("react"); export interface PreviewCursorProps { diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 55b4938a0..ce72ab64b 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -1,33 +1,55 @@ -import { Document } from "../../../fields/Document"; -import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; +import { computed } from "mobx"; +import { observer } from "mobx-react"; +import { FieldWaiting } from "../../../fields/Field"; +import { Key } from "../../../fields/Key"; +import { KeyStore } from "../../../fields/KeyStore"; +import { ListField } from "../../../fields/ListField"; import { CollectionDockingView } from "../collections/CollectionDockingView"; -import { CollectionSchemaView } from "../collections/CollectionSchemaView"; -import { CollectionView, CollectionViewType } from "../collections/CollectionView"; +import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; import { CollectionPDFView } from "../collections/CollectionPDFView"; +import { CollectionSchemaView } from "../collections/CollectionSchemaView"; import { CollectionVideoView } from "../collections/CollectionVideoView"; -import { FormattedTextBox } from "../nodes/FormattedTextBox"; -import { ImageBox } from "../nodes/ImageBox"; -import { VideoBox } from "../nodes/VideoBox"; -import { AudioBox } from "../nodes/AudioBox"; -import { KeyValueBox } from "./KeyValueBox" -import { WebBox } from "../nodes/WebBox"; -import { PDFBox } from "../nodes/PDFBox"; +import { CollectionView } from "../collections/CollectionView"; +import { AudioBox } from "./AudioBox"; +import { DocumentViewProps, JsxBindings } from "./DocumentView"; import "./DocumentView.scss"; +import { FormattedTextBox } from "./FormattedTextBox"; +import { ImageBox } from "./ImageBox"; +import { KeyValueBox } from "./KeyValueBox"; +import { PDFBox } from "./PDFBox"; +import { VideoBox } from "./VideoBox"; +import { WebBox } from "./WebBox"; import React = require("react"); const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? -interface JsxBindings { - Document: Document; - layout: string; - [prop: string]: any; -} -export class DocumentContentsView extends React.PureComponent { +@observer +export class DocumentContentsView extends React.Component boolean, + select: (ctrl: boolean) => void, + layoutKey: Key +}> { + @computed get layout(): string { return this.props.Document.GetText(this.props.layoutKey, "

Error loading layout data

"); } + @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array()); } + @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array()); } + + CreateBindings(): JsxBindings { + let bindings: JsxBindings = { ...this.props, }; + for (const key of this.layoutKeys) { + bindings[key.Name + "Key"] = key; // this maps string values of the form Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data + } + for (const key of this.layoutFields) { + let field = this.props.Document.Get(key); + bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field; + } + return bindings; + } + render() { return { console.log(test) }} /> diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 3e691ee6d..b36d47b8b 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,11 +1,12 @@ import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; -import { Field, FieldWaiting, Opt } from "../../../fields/Field"; +import { Field, Opt } from "../../../fields/Field"; import { Key } from "../../../fields/Key"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; import { TextField } from "../../../fields/TextField"; +import { Utils } from "../../../Utils"; import { Documents } from "../../documents/Documents"; import { DocumentManager } from "../../util/DocumentManager"; import { DragManager } from "../../util/DragManager"; @@ -14,22 +15,9 @@ import { Transform } from "../../util/Transform"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionView, CollectionViewType } from "../collections/CollectionView"; import { ContextMenu } from "../ContextMenu"; +import { DocumentContentsView } from "./DocumentContentsView"; import "./DocumentView.scss"; import React = require("react"); -import { DocumentContentsView } from "./DocumentContentsView"; -import { Utils } from "../../../Utils"; -import { FormattedTextBox } from "./FormattedTextBox"; -import { ImageBox } from "./ImageBox"; -import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; -import { CollectionSchemaView } from "../collections/CollectionSchemaView"; -import { CollectionPDFView } from "../collections/CollectionPDFView"; -import { CollectionVideoView } from "../collections/CollectionVideoView"; -import { WebBox } from "./WebBox"; -import { KeyValueBox } from "./KeyValueBox"; -import { PDFBox } from "./PDFBox"; -import { VideoBox } from "./VideoBox"; -import { AudioBox } from "./AudioBox"; -const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? export interface DocumentViewProps { @@ -87,7 +75,7 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { return args; } -interface JsxBindings { +export interface JsxBindings { Document: Document; isSelected: () => boolean; select: (isCtrlPressed: boolean) => void; @@ -96,40 +84,7 @@ interface JsxBindings { [prop: string]: any; } -@observer -export class DocumentContents extends React.Component boolean, - select: (ctrl: boolean) => void, - layoutKey: Key -}> { - @computed get layout(): string { return this.props.Document.GetText(this.props.layoutKey, "

Error loading layout data

"); } - @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array()); } - @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array()); } - - CreateBindings(): JsxBindings { - let bindings: JsxBindings = { - ...this.props, - }; - for (const key of this.layoutKeys) { - bindings[key.Name + "Key"] = key; // this maps string values of the form Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data - } - for (const key of this.layoutFields) { - let field = this.props.Document.Get(key); - bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field; - } - return bindings; - } - render() { - return { console.log(test) }} - /> - } -} @observer export class DocumentView extends React.Component { @@ -377,7 +332,7 @@ export class DocumentView extends React.Component { onDrop={this.onDrop} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} > - +

) } -- cgit v1.2.3-70-g09d2 From 196da9c88cc2489b4e6831be1e3ec72c7ce0f0c4 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 17 Mar 2019 22:29:15 -0400 Subject: added alt option to ctrl for macbook --- src/client/views/nodes/DocumentView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index a0ea9d3c2..8ff86fbba 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -94,7 +94,7 @@ export class DocumentView extends React.Component { this._downY = e.clientY; if (e.shiftKey && e.buttons === 2) { if (this.props.isTopMost) { - this.startDragging(e.pageX, e.pageY, e.ctrlKey); + this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey); } else CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e); e.stopPropagation(); @@ -177,7 +177,7 @@ export class DocumentView extends React.Component { document.removeEventListener("pointermove", this.onPointerMove) document.removeEventListener("pointerup", this.onPointerUp); if (!this.topMost || e.buttons == 2 || e.altKey) { - this.startDragging(e.x, e.y, e.ctrlKey); + this.startDragging(e.x, e.y, e.ctrlKey || e.altKey); } } e.stopPropagation(); -- cgit v1.2.3-70-g09d2 From a6ca5db7f43ee31965169ff8d6d0aaffa86dc74e Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 17 Mar 2019 23:04:18 -0400 Subject: tweaked drop code --- src/client/documents/Documents.ts | 39 ++++++++++------------ src/client/util/DragManager.ts | 2 +- .../views/collections/CollectionFreeFormView.tsx | 19 +++-------- .../views/collections/CollectionViewBase.tsx | 34 +++++++++---------- src/client/views/nodes/DocumentView.tsx | 8 ++--- 5 files changed, 43 insertions(+), 59 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 20cbcdcb4..3aa575dbb 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1,30 +1,27 @@ +import { AudioField } from "../../fields/AudioField"; import { Document } from "../../fields/Document"; -import { Server } from "../Server"; +import { Field } from "../../fields/Field"; +import { HtmlField } from "../../fields/HtmlField"; +import { ImageField } from "../../fields/ImageField"; +import { InkField, StrokeData } from "../../fields/InkField"; +import { Key } from "../../fields/Key"; import { KeyStore } from "../../fields/KeyStore"; -import { TextField } from "../../fields/TextField"; -import { NumberField } from "../../fields/NumberField"; import { ListField } from "../../fields/ListField"; -import { FormattedTextBox } from "../views/nodes/FormattedTextBox"; -import { ImageField } from "../../fields/ImageField"; -import { ImageBox } from "../views/nodes/ImageBox"; +import { PDFField } from "../../fields/PDFField"; +import { TextField } from "../../fields/TextField"; +import { VideoField } from "../../fields/VideoField"; import { WebField } from "../../fields/WebField"; -import { WebBox } from "../views/nodes/WebBox"; +import { Server } from "../Server"; +import { CollectionPDFView } from "../views/collections/CollectionPDFView"; +import { CollectionVideoView } from "../views/collections/CollectionVideoView"; import { CollectionView, CollectionViewType } from "../views/collections/CollectionView"; -import { HtmlField } from "../../fields/HtmlField"; -import { Key } from "../../fields/Key" -import { Field } from "../../fields/Field"; -import { KeyValueBox } from "../views/nodes/KeyValueBox" -import { KVPField } from "../../fields/KVPField"; -import { VideoField } from "../../fields/VideoField" -import { VideoBox } from "../views/nodes/VideoBox"; -import { AudioField } from "../../fields/AudioField"; import { AudioBox } from "../views/nodes/AudioBox"; -import { PDFField } from "../../fields/PDFField"; +import { FormattedTextBox } from "../views/nodes/FormattedTextBox"; +import { ImageBox } from "../views/nodes/ImageBox"; +import { KeyValueBox } from "../views/nodes/KeyValueBox"; import { PDFBox } from "../views/nodes/PDFBox"; -import { CollectionPDFView } from "../views/collections/CollectionPDFView"; -import { RichTextField } from "../../fields/RichTextField"; -import { CollectionVideoView } from "../views/collections/CollectionVideoView"; -import { StrokeData, InkField } from "../../fields/InkField"; +import { VideoBox } from "../views/nodes/VideoBox"; +import { WebBox } from "../views/nodes/WebBox"; export interface DocumentOptions { x?: number; @@ -137,7 +134,7 @@ export namespace Documents { { x: 0, y: 0, width: 300, height: 300, layoutKeys: [KeyStore.Data] }); } function GetCollectionPrototype(): Document { - return collProto ? collProto.MakeDelegate() : + return collProto ? collProto : collProto = setupPrototypeOptions(collProtoId, "COLLECTION_PROTO", CollectionView.LayoutString("DataKey"), { panx: 0, pany: 0, scale: 1, width: 500, height: 500, layoutKeys: [KeyStore.Data] }); } diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 4a61220a5..c0abec407 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -123,7 +123,7 @@ export namespace DragManager { // however, PDF's have a thumbnail field that contains an image of their canvas. // So we replace the pdf's canvas with the image thumbnail const docView: DocumentView = dragData["documentView"]; - const doc: Document = docView ? docView.props.Document : dragData["document"]; + const doc: Document = dragData["document"]; if (doc) { var pdfBox = dragElement.getElementsByClassName("pdfBox-cont")[0] as HTMLElement; diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index cf9bf9b92..808a22a5d 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -79,20 +79,11 @@ export class CollectionFreeFormView extends CollectionViewBase { let screenX = de.x - (de.data["xOffset"] as number || 0); let screenY = de.y - (de.data["yOffset"] as number || 0); const [x, y] = this.getTransform().transformPoint(screenX, screenY); - if (!de.data["alias"]) { - const docView: DocumentView = de.data["documentView"]; - let doc: Document = docView ? docView.props.Document : de.data["document"]; - if (doc) { - doc.SetNumber(KeyStore.X, x); - doc.SetNumber(KeyStore.Y, y); - this.bringToFront(doc); - } - } - else { - let newDoc: Document = de.data["newDoc"] - newDoc.SetNumber(KeyStore.X, x) - newDoc.SetNumber(KeyStore.Y, y) - this.bringToFront(newDoc) + let doc: Document = de.data["document"]; + if (doc) { + doc.SetNumber(KeyStore.X, x); + doc.SetNumber(KeyStore.Y, y); + this.bringToFront(doc); } } diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 6725fc2d1..304c44788 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -46,34 +46,30 @@ export class CollectionViewBase extends React.Component @undoBatch @action protected drop(e: Event, de: DragManager.DropEvent) { - const docView: DocumentView = de.data["documentView"] - const doc: Document = de.data["document"] - if (de.data["alias"]) { - let newDoc = docView ? docView.props.Document.CreateAlias() : doc.CreateAlias() - de.data["newDoc"] = newDoc - let oldDoc = docView ? docView.props.Document : doc + let dropDoc: Document = de.data["document"]; + if (de.data["alias"] && dropDoc) { + let oldDoc = dropDoc; + de.data["document"] = dropDoc = oldDoc.CreateAlias(); oldDoc.GetTAsync(KeyStore.Width, NumberField, (f: Opt) => { if (f) { - newDoc.SetNumber(KeyStore.Width, f.Data) + dropDoc.SetNumber(KeyStore.Width, f.Data) } }) oldDoc.GetTAsync(KeyStore.Height, NumberField, (f: Opt) => { if (f) { - newDoc.SetNumber(KeyStore.Height, f.Data) + dropDoc.SetNumber(KeyStore.Height, f.Data) } }) - } - - if (docView && docView.props.ContainingCollectionView && docView.props.ContainingCollectionView !== this.props.CollectionView) { - if (docView.props.RemoveDocument && !de.data["alias"]) { - docView.props.RemoveDocument(docView.props.Document) + } else { + const docView: DocumentView = de.data["documentView"]; + if (docView && docView.props.RemoveDocument && docView.props.ContainingCollectionView !== this.props.CollectionView) { + docView.props.RemoveDocument(dropDoc); + } else if (dropDoc) { + this.props.removeDocument(dropDoc); } - this.props.addDocument(de.data["alias"] ? de.data["newDoc"] : docView.props.Document) - } else if (doc) { - if (!de.data["alias"]) { - this.props.removeDocument(doc) - } - this.props.addDocument(de.data["alias"] ? de.data["newDoc"] : doc) + } + if (dropDoc) { + this.props.addDocument(dropDoc); } e.stopPropagation(); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ec9db765a..981cabe71 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -160,20 +160,20 @@ export class DocumentView extends React.Component { } } - startDragging(x: number, y: number, ctrlPressed: boolean) { + startDragging(x: number, y: number, dropAliasOfDraggedDoc: boolean) { if (this._mainCont.current) { const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); let dragData: { [id: string]: any } = {}; dragData["documentView"] = this; - dragData["document"] = this.props.Document + dragData["document"] = this.props.Document; dragData["xOffset"] = x - left; dragData["yOffset"] = y - top; - dragData["alias"] = ctrlPressed + dragData["alias"] = dropAliasOfDraggedDoc; DragManager.StartDrag(this._mainCont.current, dragData, { handlers: { dragComplete: action(() => { }), }, - hideSource: !ctrlPressed + hideSource: !dropAliasOfDraggedDoc }) } } -- cgit v1.2.3-70-g09d2 From 5d4b103402900abb43e78787a3c781f220d6ea97 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 18 Mar 2019 01:45:15 -0400 Subject: updated drag drop --- .../views/collections/CollectionViewBase.tsx | 29 +++++++++++----------- src/client/views/nodes/DocumentView.tsx | 3 +-- 2 files changed, 15 insertions(+), 17 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 37ec203b5..3a6d1c141 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -46,27 +46,26 @@ export class CollectionViewBase extends React.Component @undoBatch @action protected drop(e: Event, de: DragManager.DropEvent) { - let dropDoc: Document = de.data["document"]; - if (de.data["alias"] && dropDoc) { - let oldDoc = dropDoc; - de.data["document"] = dropDoc = oldDoc.CreateAlias(); + let docToAlias = de.data["documentToAlias"]; + let docView = de.data["documentView"]; + let doc = docToAlias ? docToAlias.CreateAlias() : de.data["document"]; + if (docToAlias) { [KeyStore.Width, KeyStore.Height].map(key => - oldDoc.GetTAsync(key, NumberField, (f: Opt) => { + docToAlias.GetTAsync(key, NumberField, (f: Opt) => { if (f) { - dropDoc.SetNumber(key, f.Data) + doc.SetNumber(key, f.Data) } }) ); - } else { - const docView: DocumentView = de.data["documentView"]; - if (docView && docView.props.RemoveDocument && docView.props.ContainingCollectionView !== this.props.CollectionView) { - docView.props.RemoveDocument(dropDoc); - } else if (dropDoc) { - this.props.removeDocument(dropDoc); + this.props.addDocument(doc); + } else if (docView) { + if (doc && docView.props.RemoveDocument && docView.props.ContainingCollectionView !== this.props.CollectionView) { + docView.props.RemoveDocument(doc); + this.props.addDocument(doc); } - } - if (dropDoc) { - this.props.addDocument(dropDoc); + } else if (doc) { + // this.props.removeDocument(doc); bcz: causes an exception + this.props.addDocument(doc); } e.stopPropagation(); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 981cabe71..5d2f6293d 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -165,10 +165,9 @@ export class DocumentView extends React.Component { const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); let dragData: { [id: string]: any } = {}; dragData["documentView"] = this; - dragData["document"] = this.props.Document; + dragData[dropAliasOfDraggedDoc ? "documentToAlias" : "document"] = this.props.Document; dragData["xOffset"] = x - left; dragData["yOffset"] = y - top; - dragData["alias"] = dropAliasOfDraggedDoc; DragManager.StartDrag(this._mainCont.current, dragData, { handlers: { dragComplete: action(() => { }), -- cgit v1.2.3-70-g09d2

+ { return this.props.Document.Title; @@ -165,7 +173,8 @@ export class CollectionTreeView extends CollectionViewBase { this.props.Document.SetData(KeyStore.Title, value, TextField); return true; }} /> -

+
{ return this.props.Document.Title; @@ -165,7 +173,8 @@ export class CollectionTreeView extends CollectionViewBase { this.props.Document.SetData(KeyStore.Title, value, TextField); return true; }} /> -