diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/.DS_Store | bin | 6148 -> 6148 bytes | |||
-rw-r--r-- | src/client/util/DragManager.ts | 1 | ||||
-rw-r--r-- | src/client/views/.DS_Store | bin | 0 -> 6148 bytes | |||
-rw-r--r-- | src/client/views/DocumentDecorations.scss | 11 | ||||
-rw-r--r-- | src/client/views/DocumentDecorations.tsx | 64 | ||||
-rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 3 | ||||
-rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 51 | ||||
-rw-r--r-- | src/client/views/nodes/LinkBox.scss | 0 | ||||
-rw-r--r-- | src/client/views/nodes/LinkBox.tsx | 0 | ||||
-rw-r--r-- | src/client/views/nodes/LinkMenu.scss | 20 | ||||
-rw-r--r-- | src/client/views/nodes/LinkMenu.tsx | 41 | ||||
-rw-r--r-- | src/fields/KeyStore.ts | 2 |
12 files changed, 190 insertions, 3 deletions
diff --git a/src/.DS_Store b/src/.DS_Store Binary files differindex 4d6acb95a..f20f36d63 100644 --- a/src/.DS_Store +++ b/src/.DS_Store diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 60910a40b..95bf44560 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -95,7 +95,6 @@ export namespace DragManager { } export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options?: DragOptions) { - DocumentDecorations.Instance.Hidden = true; if (!dragDiv) { dragDiv = document.createElement("div"); DragManager.Root().appendChild(dragDiv); diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store Binary files differnew file mode 100644 index 000000000..6bd614c8b --- /dev/null +++ b/src/client/views/.DS_Store diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index e8b93a18b..f88bf9c14 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -2,7 +2,7 @@ position: absolute; display: grid; z-index: 1000; - grid-template-rows: 20px 1fr 20px; + grid-template-rows: 20px 1fr 20px 0px; grid-template-columns: 20px 1fr 20px; pointer-events: none; #documentDecorations-centerCont { @@ -29,4 +29,13 @@ #documentDecorations-rightResizer { cursor: ew-resize; } + #linkButton { + height: 20px; + width: 20px; + margin-top: 10px; + border-radius: 50%; + opacity: 0.6; + pointer-events: auto; + background-color: #2B6091; + } }
\ No newline at end of file diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 9fd73a33b..29a4bbcf1 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -5,12 +5,19 @@ import { observer } from "mobx-react"; import './DocumentDecorations.scss' import { KeyStore } from '../../fields/KeyStore' import { NumberField } from "../../fields/NumberField"; +import { props } from "bluebird"; +import { DragManager } from "../util/DragManager"; +import { LinkMenu } from "./nodes/LinkMenu"; +const higflyout = require("@hig/flyout"); +const { anchorPoints } = higflyout; +const Flyout = higflyout.default; @observer export class DocumentDecorations extends React.Component { static Instance: DocumentDecorations private _resizer = "" private _isPointerDown = false; + private _linkButton = React.createRef<HTMLDivElement>(); @observable private _hidden = false; constructor(props: Readonly<{}>) { @@ -52,6 +59,46 @@ export class DocumentDecorations extends React.Component { } } + onLinkButtonDown = (e: React.PointerEvent): void => { + // if () + // let linkMenu = new LinkMenu(SelectionManager.SelectedDocuments()[0]); + // linkMenu.Hidden = false; + console.log("down"); + + e.stopPropagation(); + document.removeEventListener("pointermove", this.onLinkButtonMoved) + document.addEventListener("pointermove", this.onLinkButtonMoved); + document.removeEventListener("pointerup", this.onLinkButtonUp) + document.addEventListener("pointerup", this.onLinkButtonUp); + + } + + onLinkButtonUp = (e: PointerEvent): void => { + console.log("up"); + document.removeEventListener("pointermove", this.onLinkButtonMoved) + document.removeEventListener("pointerup", this.onLinkButtonUp) + e.stopPropagation(); + } + + + onLinkButtonMoved = (e: PointerEvent): void => { + console.log("moved"); + let dragData: { [id: string]: any } = {}; + dragData["linkSourceDoc"] = SelectionManager.SelectedDocuments()[0]; + if (this._linkButton.current != null) { + DragManager.StartDrag(this._linkButton.current, dragData, { + handlers: { + dragComplete: action(() => { }), + }, + hideSource: false + }) + } + document.removeEventListener("pointermove", this.onLinkButtonMoved) + document.removeEventListener("pointerup", this.onLinkButtonUp) + e.stopPropagation(); + } + + onPointerMove = (e: PointerEvent): void => { e.stopPropagation(); e.preventDefault(); @@ -137,6 +184,9 @@ export class DocumentDecorations extends React.Component { document.removeEventListener("pointerup", this.onPointerUp); } } + // buttonOnPointerUp = (e: React.PointerEvent): void => { + // e.stopPropagation(); + // } render() { var bounds = this.Bounds; @@ -163,7 +213,19 @@ export class DocumentDecorations extends React.Component { <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div> <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div> <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div> - </div> + + <Flyout + anchorPoint={anchorPoints.RIGHT_TOP} + content={ + <LinkMenu docView={SelectionManager.SelectedDocuments()[0]}> + </LinkMenu> + } + + > + <div id="linkButton" onPointerDown={this.onLinkButtonDown} ref={this._linkButton}></div> + </Flyout> + + </div > ) } }
\ No newline at end of file diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index f71f2791c..bc2c1c68d 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -53,6 +53,9 @@ export class CollectionFreeFormView extends CollectionViewBase { @undoBatch @action drop = (e: Event, de: DragManager.DropEvent) => { + if (!("documentView" in de.data)) { + return; + } super.drop(e, de); const docView: DocumentView = de.data["documentView"]; let doc: Document = docView ? docView.props.Document : de.data["document"]; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index e01e1d4cd..d31441399 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -109,6 +109,36 @@ export class DocumentView extends React.Component<DocumentViewProps> { } } } +<<<<<<< HEAD + + private dropDisposer?: DragManager.DragDropDisposer; + protected createDropTarget = (ele: HTMLDivElement) => { + + } + + componentDidMount() { + if (this._mainCont.current) { + this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, { handlers: { drop: this.drop.bind(this) } }); + } + } + + componentDidUpdate() { + if (this.dropDisposer) { + this.dropDisposer(); + } + if (this._mainCont.current) { + this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, { handlers: { drop: this.drop.bind(this) } }); + } + } + + componentWillUnmount() { + if (this.dropDisposer) { + this.dropDisposer(); + } + } + +======= +>>>>>>> bb1d3120f11a47e9d493202c1003dae52bf6667f onPointerMove = (e: PointerEvent): void => { if (e.cancelBubble) { return; @@ -168,6 +198,27 @@ export class DocumentView extends React.Component<DocumentViewProps> { } @action + drop = (e: Event, de: DragManager.DropEvent) => { + console.log("drop"); + const sourceDocView: DocumentView = de.data["linkSourceDoc"]; + if (!sourceDocView) { + return; + } + let sourceDoc: Document = sourceDocView.props.Document; + let destDoc: Document = this.props.Document; + let linkDoc: Document = new Document(); + + sourceDoc.GetOrCreateAsync(KeyStore.LinkedToDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) }); + linkDoc.GetOrCreateAsync(KeyStore.LinkedToDocs, ListField, field => { (field as ListField<Document>).Data.push(destDoc) }); + destDoc.GetOrCreateAsync(KeyStore.LinkedFromDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) }); + linkDoc.GetOrCreateAsync(KeyStore.LinkedFromDocs, ListField, field => { (field as ListField<Document>).Data.push(sourceDoc) }); + + + + e.stopPropagation(); + } + + @action onContextMenu = (e: React.MouseEvent): void => { e.stopPropagation(); let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3; diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/src/client/views/nodes/LinkBox.scss diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/src/client/views/nodes/LinkBox.tsx diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss new file mode 100644 index 000000000..fac6ba2b5 --- /dev/null +++ b/src/client/views/nodes/LinkMenu.scss @@ -0,0 +1,20 @@ +#menu-container { + width: 100%; + height: auto; + display: flex; + flex-direction: column; +} + +#search-bar { + width: 100%; + padding: 5px; + margin-bottom: 10px; + font-size: 12px; +} + +#link-list { + width: 100%; + height: 100px; + overflow-y: scroll; + background: black; +}
\ No newline at end of file diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx new file mode 100644 index 000000000..9e01de4cd --- /dev/null +++ b/src/client/views/nodes/LinkMenu.tsx @@ -0,0 +1,41 @@ +import { observable, computed, action } from "mobx"; +import React = require("react"); +import { SelectionManager } from "../../util/SelectionManager"; +import { observer } from "mobx-react"; +import './LinkMenu.scss' +import { KeyStore } from '../../../fields/KeyStore' +import { NumberField } from "../../../fields/NumberField"; +import { props } from "bluebird"; +import { DragManager } from "../../util/DragManager"; +import { DocumentView } from "./DocumentView"; +import { Document } from "../../../fields/Document"; + +interface Props { + docView: DocumentView | undefined; +} + +@observer +export class LinkMenu extends React.Component<Props> { + // @observable private _hidden = true; + + // @computed + // public get Hidden() { return this._hidden; } + // public set Hidden(value: boolean) { this._hidden = value; } + + render() { + // if (this.Hidden) { + // return (null); + // } + + return ( + <div id="menu-container"> + <input id="search-bar" type="text" placeholder="Search..."></input> + <div id="link-list"> + + </div> + + </div> + ) + } + +}
\ No newline at end of file diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index a3b39735d..9c3dab6de 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -26,4 +26,6 @@ export namespace KeyStore { export const Caption = new Key("Caption"); export const ActiveFrame = new Key("ActiveFrame"); export const DocumentText = new Key("DocumentText"); + export const LinkedToDocs = new Key("LinkedToDocs"); + export const LinkedFromDocs = new Key("LinkedFromDocs"); } |