From 83d282a6b5e607e3c7dae4b5e5d37a8b458f81cc Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Sun, 24 May 2020 10:36:31 +0530 Subject: Added chrome to grid view and modified grid mechanism --- src/client/views/nodes/DocumentView.tsx | 1 + 1 file changed, 1 insertion(+) (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 340fa06a8..95af52f13 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -96,6 +96,7 @@ export interface DocumentViewProps { dontRegisterView?: boolean; layoutKey?: string; radialMenu?: String[]; + display?: string; } @observer -- cgit v1.2.3-70-g09d2 From ae552bf33e197bf18989a821f726f2d5670f6647 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 27 May 2020 13:53:18 -0400 Subject: fixed ineracting with documents selected in GridView --- src/client/views/collections/collectionGrid/CollectionGridView.tsx | 3 ++- src/client/views/collections/collectionGrid/Grid.tsx | 3 +++ src/client/views/nodes/DocumentView.tsx | 3 ++- 3 files changed, 7 insertions(+), 2 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index bc554e2c2..a55d5a8ac 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -240,7 +240,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { style={{ marginLeft: NumCast(this.props.Document._xMargin), marginRight: NumCast(this.props.Document._xMargin), marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin), - pointerEvents: !this.props.isSelected() && !this.props.ContainingCollectionView?._isChildActive && !SnappingManager.GetIsDragging() ? "none" : undefined + pointerEvents: !this.props.isSelected() && this.props.renderDepth !== 0 && !this.props.ContainingCollectionView?._isChildActive && !SnappingManager.GetIsDragging() ? "none" : undefined }} ref={this.createDashEventsTarget} onPointerDown={e => e.stopPropagation()} @@ -249,6 +249,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { width={this.props.PanelWidth()} nodeList={contents} layout={layout} + transformScale={this.props.ScreenToLocalTransform().Scale} numCols={this.props.Document.numCols as number} rowHeight={this.props.Document.rowHeight as number} setLayout={(layout: Layout[]) => this.setLayout(layout)} diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index a5f5c724a..9c66d1e33 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -18,6 +18,7 @@ interface GridProps { numCols: number; rowHeight: number; setLayout: Function; + transformScale: number; } /** @@ -35,6 +36,7 @@ export default class Grid extends React.Component { this.props.setLayout(layout); } + Scale = 2 render() { console.log("In grid layout prop received value= " + this.props.layout?.[0]?.w); return ( @@ -45,6 +47,7 @@ export default class Grid extends React.Component { width={this.props.width} compactType={null} isDroppable={true} + useCSSTransforms={true} margin={[10, 10]} onLayoutChange={layout => this.onLayoutChange(layout)} > diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index b5de0af12..79b560118 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -517,6 +517,7 @@ export class DocumentView extends DocComponent(Docu if (!(InteractionUtils.IsType(e, InteractionUtils.MOUSETYPE) || InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) { if (!InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) { e.stopPropagation(); + e.preventDefault(); // TODO: check here for panning/inking } return; @@ -531,7 +532,7 @@ export class DocumentView extends DocComponent(Docu (e.button === 0 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) && !this.Document.inOverlay) { e.stopPropagation(); // events stop at the lowest document that is active. if right dragging, we let it go through though to allow for context menu clicks. PointerMove callbacks should remove themselves if the move event gets stopPropagated by a lower-level handler (e.g, marquee drag); - + e.preventDefault(); } document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); -- cgit v1.2.3-70-g09d2 From efaa44cacf9cf8506209c9bf1437e36828132eea Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 27 May 2020 15:17:01 -0400 Subject: fixed layout and interactions of grid view --- .../collectionGrid/CollectionGridView.scss | 13 ++++---- .../collectionGrid/CollectionGridView.tsx | 37 ++++++++++------------ src/client/views/nodes/DocumentView.tsx | 6 ++-- 3 files changed, 26 insertions(+), 30 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 8f12c1a24..c0a2cbc22 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -4,11 +4,10 @@ width: 100%; height: 100%; flex-direction: column; - - .document-wrapper { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - } +} +.collectionGridView_contents .document-wrapper { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; } \ No newline at end of file diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index a55d5a8ac..03ba9d004 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -94,25 +94,22 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { - return
- -
; + return ; } @@ -243,7 +240,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { pointerEvents: !this.props.isSelected() && this.props.renderDepth !== 0 && !this.props.ContainingCollectionView?._isChildActive && !SnappingManager.GetIsDragging() ? "none" : undefined }} ref={this.createDashEventsTarget} - onPointerDown={e => e.stopPropagation()} + onPointerDown={e => { ((e.target as any)?.className.includes("react-resizable-handle")) && e.stopPropagation(); }} > (Docu if (!(InteractionUtils.IsType(e, InteractionUtils.MOUSETYPE) || InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) { if (!InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) { e.stopPropagation(); - e.preventDefault(); + if (SelectionManager.IsSelected(this, true) && this.props.Document._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it // TODO: check here for panning/inking } return; @@ -531,8 +531,8 @@ export class DocumentView extends DocComponent(Docu !e.ctrlKey && (e.button === 0 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) && !this.Document.inOverlay) { - e.stopPropagation(); // events stop at the lowest document that is active. if right dragging, we let it go through though to allow for context menu clicks. PointerMove callbacks should remove themselves if the move event gets stopPropagated by a lower-level handler (e.g, marquee drag); - e.preventDefault(); + e.stopPropagation(); + if (SelectionManager.IsSelected(this, true) && this.props.Document._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it } document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); -- cgit v1.2.3-70-g09d2