From fe9017c3cdc2481f4bcce40dcc1514a6f7af37dc Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 2 Aug 2019 18:21:23 -0400 Subject: improvements to grouping with backgrounds --- .../views/collections/CollectionBaseView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 68 ++++++++++++---------- src/client/views/nodes/DocumentView.tsx | 9 ++- 3 files changed, 44 insertions(+), 35 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index c595a4c56..6801b94fd 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -147,7 +147,7 @@ export class CollectionBaseView extends React.Component {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 232ac22c9..bc1aee159 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -108,6 +108,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { private addDocument = (newBox: Doc, allowDuplicates: boolean) => { this.props.addDocument(newBox, false); this.bringToFront(newBox); + this.updateClusters(); return true; } private selectDocuments = (docs: Doc[]) => { @@ -175,34 +176,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { this.bringToFront(d); }); - let sets: (Doc[])[] = [] - this.childDocs.map(c => { - let included = [] - for (let i = 0; i < sets.length; i++) { - for (let j = 0; j < sets[i].length; j++) { - if (this.bounsdSelect(c, sets[i][j])) { - included.push(i); - break; - } - } - } - if (included.length === 0) - sets.push([c]); - else if (included.length === 1) - sets[included[0]].push(c); - else { - sets[included[0]].push(c); - for (let s = 1; s < included.length; s++) { - sets[included[0]].push(...sets[included[s]]); - sets[included[s]].length = 0; - } - } - }); - for (let s = 0; s < sets.length; s++) { - for (let i = 0; i < sets[s].length; i++) { - Doc.GetProto(sets[s][i]).cluster = s; - } - } + this.updateClusters(); } } else if (de.data instanceof DragManager.AnnotationDragData) { @@ -223,6 +197,38 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { return false; } + @action + updateClusters() { + let sets: (Doc[])[] = [] + this.childDocs.map(c => { + let included = [] + for (let i = 0; i < sets.length; i++) { + for (let j = 0; j < sets[i].length; j++) { + if (this.bounsdSelect(c, sets[i][j])) { + included.push(i); + break; + } + } + } + if (included.length === 0) + sets.push([c]); + else if (included.length === 1) + sets[included[0]].push(c); + else { + sets[included[0]].push(c); + for (let s = 1; s < included.length; s++) { + sets[included[0]].push(...sets[included[s]]); + sets[included[s]].length = 0; + } + } + }); + for (let s = 0; s < sets.length; s++) { + for (let i = 0; i < sets[s].length; i++) { + Doc.GetProto(sets[s][i]).cluster = s; + } + } + } + @action onPointerDown = (e: React.PointerEvent): void => { if (e.button === 0 && !e.shiftKey && !e.altKey && (!this.isAnnotationOverlay || this.zoomScaling() !== 1) && this.props.active()) { @@ -247,8 +253,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { let cluster = this.childDocs.reduce((cluster, cd) => { let cx = NumCast(cd.x) - this._groupingBorder; let cy = NumCast(cd.y) - this._groupingBorder; - let cw = NumCast(cd.width) + this._groupingBorder; - let ch = NumCast(cd.height) + this._groupingBorder; + let cw = NumCast(cd.width) + 2 * this._groupingBorder; + let ch = NumCast(cd.height) + 2 * this._groupingBorder; if (this.intersectRect({ left: cx, top: cy, width: cw, height: ch }, { left: probe[0], top: probe[1], width: 1, height: 1 })) return NumCast(cd.cluster); return cluster; @@ -392,7 +398,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { } bringToFront = (doc: Doc, sendToBack?: boolean) => { - if (sendToBack) { + if (sendToBack || doc.isBackground) { doc.zIndex = 0; return; } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d79b58a7b..16ae5471d 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -695,7 +695,8 @@ export class DocumentView extends DocComponent(Docu }); } let showTextTitle = showTitle && StrCast(this.layoutDoc.layout).startsWith("(Docu color: foregroundColor, outlineColor: "maroon", outlineStyle: "dashed", - boxShadow: `${colors[NumCast(this.props.Document.cluster) % colors.length]} ${StrCast(this.props.Document.boxShadow, `0vw 0vw ${50 / this.props.ContentScaling()}px`)}`, + boxShadow: this.layoutDoc.isBackground ? + `0px 0px 50px 50px ${groupCol}` : + `${groupCol} ${StrCast(this.props.Document.boxShadow, `0vw 0vw ${50 / this.props.ContentScaling()}px`)}`, outlineWidth: BoolCast(this.layoutDoc.libraryBrush) && !StrCast(Doc.GetProto(this.props.Document).borderRounding) ? `${this.props.ScreenToLocalTransform().Scale}px` : "0px", marginLeft: BoolCast(this.layoutDoc.libraryBrush) && StrCast(Doc.GetProto(this.props.Document).borderRounding) ? @@ -714,7 +717,7 @@ export class DocumentView extends DocComponent(Docu border: BoolCast(this.layoutDoc.libraryBrush) && StrCast(Doc.GetProto(this.props.Document).borderRounding) ? `dashed maroon ${this.props.ScreenToLocalTransform().Scale}px` : undefined, borderRadius: "inherit", - background: backgroundColor, + background: this.layoutDoc.isBackground ? groupCol : backgroundColor, width: nativeWidth, height: nativeHeight, transform: `scale(${this.props.ContentScaling()})`, -- cgit v1.2.3-70-g09d2