From dbe95611c72eece3767f80543c921e4afaeaf294 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Fri, 5 Apr 2019 02:30:07 -0400 Subject: upgraded typescript and fixed compile errors --- src/client/views/nodes/PDFBox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index f9f5bc8f8..7039b0c41 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -153,7 +153,7 @@ export class PDFBox extends React.Component { */ makeEditableAndHighlight = (colour: string) => { var range, sel = window.getSelection(); - if (sel.rangeCount && sel.getRangeAt) { + if (sel && sel.rangeCount && sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on"; @@ -161,7 +161,7 @@ export class PDFBox extends React.Component { document.execCommand("HiliteColor", false, colour); } - if (range) { + if (range && sel) { sel.removeAllRanges(); sel.addRange(range); -- cgit v1.2.3-70-g09d2 From 39ab550efc4eedeb7a9295a68c0d23e54ad086f2 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 5 Apr 2019 08:48:16 -0400 Subject: fixed doc decorations min width --- src/client/views/DocumentDecorations.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client/views') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index d7137d7a2..c4e4aed8e 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -60,6 +60,7 @@ cursor: ew-resize; } .title{ + width:100%; background: lightblue; grid-column-start:3; grid-column-end: 4; -- cgit v1.2.3-70-g09d2 From 25d56d2f490ca6c8ea685b832332605a7fc6042a Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 5 Apr 2019 09:56:48 -0400 Subject: fixed exception w/ brushing. added undo for dragging items into workspace. --- src/client/util/DragManager.ts | 6 +++--- src/client/views/Main.tsx | 14 ++++++++++++-- .../collectionFreeForm/CollectionFreeFormLinksView.tsx | 2 +- 3 files changed, 16 insertions(+), 6 deletions(-) (limited to 'src/client/views') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index e8f8cce7c..cc47c57e0 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -1,10 +1,10 @@ -import { DocumentDecorations } from "../views/DocumentDecorations"; -import { CollectionDockingView } from "../views/collections/CollectionDockingView"; -import { Document } from "../../fields/Document"; import { action } from "mobx"; +import { Document } from "../../fields/Document"; import { ImageField } from "../../fields/ImageField"; import { KeyStore } from "../../fields/KeyStore"; +import { CollectionDockingView } from "../views/collections/CollectionDockingView"; import { CollectionView } from "../views/collections/CollectionView"; +import { DocumentDecorations } from "../views/DocumentDecorations"; import { DocumentView } from "../views/nodes/DocumentView"; export function setupDrag( diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 6f66f8f38..a324421ac 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -13,7 +13,7 @@ import { Documents } from '../documents/Documents'; import { Server } from '../Server'; import { setupDrag } from '../util/DragManager'; import { Transform } from '../util/Transform'; -import { UndoManager } from '../util/UndoManager'; +import { UndoManager, undoBatch } from '../util/UndoManager'; import { WorkspacesMenu } from '../../server/authentication/controllers/WorkspacesMenu'; import { CollectionDockingView } from './collections/CollectionDockingView'; import { ContextMenu } from './ContextMenu'; @@ -51,6 +51,7 @@ import '../northstar/utils/Extensions' import { HistogramOperation } from '../northstar/operations/HistogramOperation'; import { AttributeTransformationModel } from '../northstar/core/attribute/AttributeTransformationModel'; import { ColumnAttributeModel } from '../northstar/core/attribute/AttributeModel'; +import { CollectionView } from './collections/CollectionView'; @observer export class Main extends React.Component { @@ -234,6 +235,15 @@ export class Main extends React.Component { ContainingCollectionView={undefined} /> } + @undoBatch + @action + prepareDrag = ( + _reference: React.RefObject, + docFunc: () => Document, + removeFunc: (containingCollection: CollectionView) => void = () => { }) => { + return setupDrag(_reference, docFunc, removeFunc); + } + /* for the expandable add nodes menu. Not included with the miscbuttons because once it expands it expands the whole div with it, making canvas interactions limited. */ @computed get nodesMenu() { @@ -273,7 +283,7 @@ export class Main extends React.Component {
    {btns.map(btn =>
  • -
    • )} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx index eb20b3100..35fa6f99f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx @@ -36,7 +36,7 @@ export class CollectionFreeFormLinksView extends React.Component) => field.Data.findIndex(brush => { - let bdocs = brush.GetList(KeyStore.BrushingDocs, [] as Document[]); + let bdocs = brush ? brush.GetList(KeyStore.BrushingDocs, [] as Document[]) : []; return (bdocs.length == 0 || (bdocs[0] == dstTarg && bdocs[1] == srcTarg) || (bdocs[0] == srcTarg && bdocs[1] == dstTarg)) }); let brushAction = (field: ListField) => { -- cgit v1.2.3-70-g09d2 From f873d620e9a3804d5a6783d7ea335b27d59b4612 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 5 Apr 2019 13:03:21 -0400 Subject: fixed dragging misalignment --- src/client/util/DragManager.ts | 53 ++++++++++++---------- src/client/views/DocumentDecorations.tsx | 18 ++++---- .../views/collections/CollectionDockingView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 4 +- 4 files changed, 43 insertions(+), 34 deletions(-) (limited to 'src/client/views') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index cc47c57e0..043932de5 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -21,7 +21,7 @@ export function setupDrag( document.removeEventListener("pointerup", onRowUp); var dragData = new DragManager.DocumentDragData([docFunc()]); dragData.removeDocument = removeFunc; - DragManager.StartDocumentDrag([_reference.current!], dragData); + DragManager.StartDocumentDrag([_reference.current!], dragData, e.x, e.y); } ); let onRowUp = action( @@ -132,11 +132,14 @@ export namespace DragManager { export function StartDocumentDrag( eles: HTMLElement[], dragData: DocumentDragData, + downX: number, + downY: number, options?: DragOptions ) { StartDrag( eles, dragData, + downX, downY, options, (dropData: { [id: string]: any }) => (dropData.droppedDocuments = dragData.aliasOnDrop @@ -156,13 +159,15 @@ export namespace DragManager { export function StartLinkDrag( ele: HTMLElement, dragData: LinkDragData, + downX: number, downY: number, options?: DragOptions ) { - StartDrag([ele], dragData, options); + StartDrag([ele], dragData, downX, downY, options); } function StartDrag( eles: HTMLElement[], dragData: { [id: string]: any }, + downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: { [id: string]: any }) => void ) { @@ -204,23 +209,22 @@ export namespace DragManager { dragElement.style.width = `${rect.width / scaleX}px`; dragElement.style.height = `${rect.height / scaleY}px`; - // bcz: PDFs don't show up if you clone them because they contain a canvas. + // bcz: if PDFs are rendered with svg's, then this code isn't needed + // bcz: PDFs don't show up if you clone them when rendered using a canvas. // 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 - if (docs.length) { - var pdfBox = dragElement.getElementsByClassName( - "pdfBox-cont" - )[0] as HTMLElement; - let thumbnail = docs[0].GetT(KeyStore.Thumbnail, ImageField); - if (pdfBox && pdfBox.childElementCount && thumbnail) { - let img = new Image(); - img!.src = thumbnail.toString(); - img!.style.position = "absolute"; - img!.style.width = `${rect.width / scaleX}px`; - img!.style.height = `${rect.height / scaleY}px`; - pdfBox.replaceChild(img!, pdfBox.children[0]); - } - } + // if (docs.length) { + // var pdfBox = dragElement.getElementsByClassName("pdfBox-cont")[0] as HTMLElement; + // let thumbnail = docs[0].GetT(KeyStore.Thumbnail, ImageField); + // if (pdfBox && pdfBox.childElementCount && thumbnail) { + // let img = new Image(); + // img!.src = thumbnail.toString(); + // img!.style.position = "absolute"; + // img!.style.width = `${rect.width / scaleX}px`; + // img!.style.height = `${rect.height / scaleY}px`; + // pdfBox.replaceChild(img!, pdfBox.children[0]); + // } + // } dragDiv.appendChild(dragElement); return dragElement; @@ -236,6 +240,8 @@ export namespace DragManager { } eles.map(ele => (ele.hidden = hideSource)); + let lastX = downX; + let lastY = downY; const moveHandler = (e: PointerEvent) => { e.stopPropagation(); e.preventDefault(); @@ -250,12 +256,13 @@ export namespace DragManager { button: 0 }); } - dragElements.map( - (dragElement, i) => - (dragElement.style.transform = `translate(${(xs[i] += - e.movementX)}px, ${(ys[i] += e.movementY)}px) scale(${ - scaleXs[i] - }, ${scaleYs[i]})`) + let moveX = e.pageX - lastX; + let moveY = e.pageY - lastY; + lastX = e.pageX; + lastY = e.pageY; + dragElements.map((dragElement, i) => (dragElement.style.transform = + `translate(${(xs[i] += moveX)}px, ${(ys[i] += moveY)}px) + scale(${scaleXs[i]}, ${scaleYs[i]})`) ); }; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 8bf1a42d1..c7e4a269a 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -126,12 +126,14 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> this._dragging = true; document.removeEventListener("pointermove", this.onBackgroundMove); document.removeEventListener("pointerup", this.onBackgroundUp); - DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(docView => (docView as any)._mainCont!.current!), dragData, { - handlers: { - dragComplete: action(() => this._dragging = false), - }, - hideSource: true - }) + DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(docView => (docView as any)._mainCont!.current!), dragData, + e.x, e.y, + { + handlers: { + dragComplete: action(() => this._dragging = false), + }, + hideSource: true + }) e.stopPropagation(); } @@ -219,7 +221,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> document.removeEventListener("pointermove", this.onLinkerButtonMoved) document.removeEventListener("pointerup", this.onLinkerButtonUp) let dragData = new DragManager.LinkDragData(SelectionManager.SelectedDocuments()[0]); - DragManager.StartLinkDrag(this._linkerButton.current, dragData, { + DragManager.StartLinkDrag(this._linkerButton.current, dragData, e.pageX, e.pageY, { handlers: { dragComplete: action(() => { }), }, @@ -265,7 +267,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> moddrag.push(doc); } let dragData = new DragManager.DocumentDragData(moddrag); - DragManager.StartDocumentDrag([this._linkButton.current], dragData, { + DragManager.StartDocumentDrag([this._linkButton.current], dragData, e.x, e.y, { handlers: { dragComplete: action(() => { }), }, diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 39e0dd989..921ee4591 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -200,7 +200,7 @@ export class CollectionDockingView extends React.Component) => { if (f instanceof Document) - DragManager.StartDocumentDrag([tab], new DragManager.DocumentDragData([f as Document]), + DragManager.StartDocumentDrag([tab], new DragManager.DocumentDragData([f as Document]), e.pageX, e.pageY, { handlers: { dragComplete: action(() => { }), diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index b9329f269..7514e782d 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -219,7 +219,7 @@ export class DocumentView extends React.Component { this.props.RemoveDocument(this.props.Document); } }; - DragManager.StartDocumentDrag([this._mainCont.current], dragData, { + DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { handlers: { dragComplete: action(() => { }) }, @@ -239,7 +239,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 || e.altKey); + this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey); } } e.stopPropagation(); -- cgit v1.2.3-70-g09d2 From 1dd49a9659df6d4f449193eb7dbffeb56e5063b8 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 5 Apr 2019 15:19:23 -0400 Subject: cleaned up histogram render transform. fixed brushing --- src/client/northstar/dash-nodes/HistogramBox.tsx | 2 +- .../CollectionFreeFormLinksView.tsx | 55 ++++++++++++---------- 2 files changed, 31 insertions(+), 26 deletions(-) (limited to 'src/client/views') diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx index 49ebe5ebc..dd6e09900 100644 --- a/src/client/northstar/dash-nodes/HistogramBox.tsx +++ b/src/client/northstar/dash-nodes/HistogramBox.tsx @@ -148,7 +148,7 @@ export class HistogramBox extends React.Component { return ( runInAction(() => { this.PanelWidth = r.entry.width; this.PanelHeight = r.entry.height })}> {({ measureRef }) => -
    +
    {labelY} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx index 35fa6f99f..d4809ac1c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx @@ -12,6 +12,7 @@ import "./CollectionFreeFormLinksView.scss"; import { CollectionFreeFormLinkView } from "./CollectionFreeFormLinkView"; import React = require("react"); import v5 = require("uuid/v5"); +import { find } from "async"; @observer export class CollectionFreeFormLinksView extends React.Component { @@ -22,40 +23,44 @@ export class CollectionFreeFormLinksView extends React.Component { let views = DocumentManager.Instance.getAllDocumentViews(this.props.Document); for (let i = 0; i < views.length; i++) { - for (let j = i + 1; j < views.length; j++) { + for (let j = 0; j < views.length; j++) { let srcDoc = views[j].props.Document; let dstDoc = views[i].props.Document; let x1 = srcDoc.GetNumber(KeyStore.X, 0); let x1w = srcDoc.GetNumber(KeyStore.Width, -1); let x2 = dstDoc.GetNumber(KeyStore.X, 0); let x2w = dstDoc.GetNumber(KeyStore.Width, -1); - if (x1w < 0 || x2w < 0) + if (x1w < 0 || x2w < 0 || i == j) continue; - dstDoc.GetTAsync(KeyStore.Prototype, Document).then((protoDest) => - srcDoc.GetTAsync(KeyStore.Prototype, Document).then((protoSrc) => runInAction(() => { - let dstTarg = (protoDest ? protoDest : dstDoc); - let srcTarg = (protoSrc ? protoSrc : srcDoc); - let findBrush = (field: ListField) => field.Data.findIndex(brush => { - let bdocs = brush ? brush.GetList(KeyStore.BrushingDocs, [] as Document[]) : []; - return (bdocs.length == 0 || (bdocs[0] == dstTarg && bdocs[1] == srcTarg) || (bdocs[0] == srcTarg && bdocs[1] == dstTarg)) - }); - let brushAction = (field: ListField) => { - let found = findBrush(field); - if (found != -1) - field.Data.splice(found, 1); - }; - if (Math.abs(x1 + x1w - x2) < 20 || Math.abs(x2 + x2w - x1) < 20) { - let linkDoc: Document = new Document(); - linkDoc.SetText(KeyStore.Title, "Histogram Brush"); - linkDoc.SetText(KeyStore.LinkDescription, "Brush between " + srcTarg.Title + " and " + dstTarg.Title); - linkDoc.SetData(KeyStore.BrushingDocs, [dstTarg, srcTarg], ListField); + let dstTarg = dstDoc; + let srcTarg = srcDoc; + let findBrush = (field: ListField) => field.Data.findIndex(brush => { + let bdocs = brush ? brush.GetList(KeyStore.BrushingDocs, [] as Document[]) : []; + return (bdocs.length && ((bdocs[0] == dstTarg && bdocs[1] == srcTarg)) ? true : false) + }); + let brushAction = (field: ListField) => { + let found = findBrush(field); + if (found != -1) { + console.log("REMOVE BRUSH " + srcTarg.Title + " " + dstTarg.Title); + field.Data.splice(found, 1); + } + }; + if (Math.abs(x1 + x1w - x2) < 20) { + let linkDoc: Document = new Document(); + linkDoc.SetText(KeyStore.Title, "Histogram Brush"); + linkDoc.SetText(KeyStore.LinkDescription, "Brush between " + srcTarg.Title + " and " + dstTarg.Title); + linkDoc.SetData(KeyStore.BrushingDocs, [dstTarg, srcTarg], ListField); - brushAction = brushAction = (field: ListField) => (findBrush(field) == -1) && field.Data.push(linkDoc); + brushAction = brushAction = (field: ListField) => { + if (findBrush(field) == -1) { + console.log("ADD BRUSH " + srcTarg.Title + " " + dstTarg.Title); + (findBrush(field) == -1) && field.Data.push(linkDoc); } - dstTarg.GetOrCreateAsync(KeyStore.BrushingDocs, ListField, brushAction); - srcTarg.GetOrCreateAsync(KeyStore.BrushingDocs, ListField, brushAction); - } - ))) + }; + } + dstTarg.GetOrCreateAsync(KeyStore.BrushingDocs, ListField, brushAction); + srcTarg.GetOrCreateAsync(KeyStore.BrushingDocs, ListField, brushAction); + } } }) -- cgit v1.2.3-70-g09d2