Skip to content

Commit

Permalink
Merge pull request #59 from jeff-phillips-18/d3-upgrade
Browse files Browse the repository at this point in the history 
feature: Update version of D3
  • Loading branch information
@jeff-phillips-18
jeff-phillips-18 committed Jun 2, 2023
2 parents a3d5e19 + 5b83ef8 commit 80c5ce3
Show file tree
Hide file tree
Showing 6 changed files with 439 additions and 449 deletions.
4 changes: 2 additions & 2 deletions packages/module/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@
"@patternfly/react-core": "5.0.0-alpha.51",
"@patternfly/react-icons": "5.0.0-alpha.7",
"@patternfly/react-styles": "5.0.0-alpha.5",
"@types/d3": "^5.7.2",
"@types/d3": "^7.4.0",
"@types/d3-force": "^1.2.1",
"@types/dagre": "0.7.42",
"@types/react-measure": "^2.0.6",
"d3": "^5.16.0",
"d3": "^7.8.0",
"dagre": "0.8.2",
"lodash": "^4.17.19",
"mobx": "^5.15.4",
Expand Down
58 changes: 0 additions & 58 deletions packages/module/src/behavior/useAddBendpoint.tsx.bak
View file

This file was deleted.

6 changes: 3 additions & 3 deletions packages/module/src/behavior/useBendpoint.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,9 @@ export const useBendpoint = <DropResult, CollectedProps, Props = {}>(
node => {
d3.select(node).on(
'click',
action(() => {
if (d3.event.shiftKey) {
d3.event.stopPropagation();
action((event: MouseEvent) => {
if (event.shiftKey) {
event.stopPropagation();
elementRef.current.removeBendpoint(pointRef.current);
}
})
Expand Down
33 changes: 17 additions & 16 deletions packages/module/src/behavior/useDndDrag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import * as d3 from 'd3';
import { action, computed, comparer, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import { canUseDOM } from '@patternfly/react-core/dist/esm/helpers/util';
import { canUseDOM } from '@patternfly/react-core';
import ElementContext from '../utils/ElementContext';
import useCallbackRef from '../utils/useCallbackRef';
import {
Expand Down Expand Up @@ -49,15 +49,16 @@ const getModifiers = (event: MouseEvent | TouchEvent | KeyboardEvent): number =>
};

const getOperation = (
operation: DragSpecOperationType<DragOperationWithType> | undefined
operation: DragSpecOperationType<DragOperationWithType> | undefined,
event: MouseEvent | TouchEvent | KeyboardEvent
): DragOperationWithType | undefined => {
if (!operation) {
return undefined;
}
if (operation.hasOwnProperty('type')) {
return operation as DragOperationWithType;
}
return operation[getModifiers((d3.event && d3.event.sourceEvent) || d3.event)] || operation[Modifiers.DEFAULT];
return operation[getModifiers(event)] || operation[Modifiers.DEFAULT];
};

const hasOperation = (operation: DragSpecOperationType<DragOperationWithType> | undefined): boolean =>
Expand Down Expand Up @@ -156,14 +157,14 @@ export const useDndDrag = <
typeof specRef.current.operation === 'function'
? specRef.current.operation(monitor, propsRef.current)
: specRef.current.operation;
const updateOperation = action(async () => {
const updateOperation = action(async (event: KeyboardEvent) => {
if (operation && idRef.current) {
const op = getOperation(operation);
const op = getOperation(operation, event);
if (dndManager.getOperation() !== op) {
// restart the drag with the new operation
if (dndManager.isDragging()) {
// copy the event otherwise it will be mutated by #cancel()
const event = { ...(dndManager.getDragEvent() as DragEvent) };
const event = { ...dndManager.getDragEvent() };
const cancelled = dndManager.cancel();
operationChangeEvents = {
begin: [
Expand All @@ -189,33 +190,33 @@ export const useDndDrag = <
d3.select(ownerDocument)
.on(
createKeyHandlerId('keydown'),
action(() => {
const e = d3.event as KeyboardEvent;
if (e.key === 'Escape') {
action((event: KeyboardEvent) => {
if (event.key === 'Escape') {
if (dndManager.isDragging() && dndManager.cancel()) {
operationChangeEvents = undefined;
d3.select(d3.event.view).on('.drag', null);
d3.select(event.view).on('.drag', null);
d3.select(ownerDocument).on(createKeyHandlerId(), null);
dndManager.endDrag();
}
} else {
updateOperation();
updateOperation(event);
}
})
)
.on(createKeyHandlerId('keyup'), updateOperation);
})
.on(
'drag',
action(() => {
const { pageX, pageY } = d3.event.sourceEvent;
const { x, y } = d3.event;
action((event: d3.D3DragEvent<Element, any, any>) => {
const { pageX, pageY } = event.sourceEvent instanceof MouseEvent ?
event.sourceEvent : { pageX: 0, pageY: 0 };
const { x, y } = event;
if (dndManager.isDragging()) {
dndManager.drag(x, y, pageX, pageY);
} else if (operationChangeEvents) {
operationChangeEvents.drag = [x, y, pageX, pageY];
} else {
const op = getOperation(operation);
const op = getOperation(operation, event.sourceEvent);
if (op || !hasOperation(operation)) {
if (idRef.current) {
dndManager.beginDrag(idRef.current, op, x, y, pageX, pageY);
Expand All @@ -241,7 +242,7 @@ export const useDndDrag = <
}
})
)
.filter(() => !d3.event.ctrlKey && !d3.event.button && dndManager.canDragSource(idRef.current))
.filter((event: MouseEvent) => !event.ctrlKey && !event.button && dndManager.canDragSource(idRef.current))
);
}
return () => {
Expand Down
16 changes: 8 additions & 8 deletions packages/module/src/behavior/usePanZoom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,20 +37,20 @@ export const usePanZoom = (): PanZoomRef => {
.scaleExtent(elementRef.current.getScaleExtent())
.on(
'zoom',
action(() => {
elementRef.current.setPosition(new Point(d3.event.transform.x, d3.event.transform.y));
elementRef.current.setScale(d3.event.transform.k);
action((event: d3.D3ZoomEvent<any, any>) => {
elementRef.current.setPosition(new Point(event.transform.x, event.transform.y));
elementRef.current.setScale(event.transform.k);
})
)
.filter(() => {
if (d3.event.ctrlKey || d3.event.button) {
.filter((event: React.MouseEvent) => {
if (event.ctrlKey || event.button) {
return false;
}
// only allow zoom from double clicking the graph directly
if (d3.event.type === 'dblclick') {
if (event.type === 'dblclick') {
// check if target is not within a node or edge
const svg = node.ownerSVGElement;
let p: Node | null = d3.event.target;
let p = event.target;
while (p && p !== svg) {
if (p instanceof Element) {
const kind = p.getAttribute(ATTR_DATA_KIND);
Expand All @@ -61,7 +61,7 @@ export const usePanZoom = (): PanZoomRef => {
break;
}
}
p = p.parentNode;
p = p instanceof Node ? p.parentNode : undefined;
}
}
return true;
Expand Down

0 comments on commit 80c5ce3

Please sign in to comment.