diff --git a/libs/shared/lib/data-access/store/querybuilderSlice.ts b/libs/shared/lib/data-access/store/querybuilderSlice.ts
index 877444a06b9ebe70c06a866e9ecc6d28efc001b5..590f532d55a8e385272310410ef4fa28eda111e2 100644
--- a/libs/shared/lib/data-access/store/querybuilderSlice.ts
+++ b/libs/shared/lib/data-access/store/querybuilderSlice.ts
@@ -63,6 +63,7 @@ export const {
/** Select the querybuilder nodes and convert it to a graphology object */
export const selectQuerybuilderNodes = (state: RootState): MultiGraph => {
// This is really weird but for some reason all the attributes appeared as read-only otherwise
+
return MultiGraph.from(
MultiGraph.from(state.querybuilder.graphologySerialized).export()
);
diff --git a/libs/shared/lib/querybuilder/panel/querybuilder.stories.tsx b/libs/shared/lib/querybuilder/panel/querybuilder.stories.tsx
index b6bb2f30266d55e7a3db3f677336867bdde391e8..ca8d975e0fcd3b7cb094c744f8fb747bba1ab55b 100644
--- a/libs/shared/lib/querybuilder/panel/querybuilder.stories.tsx
+++ b/libs/shared/lib/querybuilder/panel/querybuilder.stories.tsx
@@ -39,7 +39,13 @@ addPill('0', { type: 'entity', x: 100, y: 100, name: 'Entity Pill' }, graph);
// graph.addNode('0', { type: 'entity', x: 100, y: 100, name: 'Entity Pill' });
addPill(
'1',
- { type: 'relation', x: 140, y: 140, name: 'Relation Pill' },
+ {
+ type: 'relation',
+ x: 140,
+ y: 140,
+ name: 'Relation Pill',
+ depth: { min: 0, max: 1 },
+ },
graph
);
addPill(
@@ -52,6 +58,7 @@ addPill(
datatype: 'string',
operator: 'EQ',
value: 'mark',
+ depth: { min: 0, max: 1 },
},
graph
);
@@ -64,6 +71,7 @@ addPill(
name: 'Attr number',
datatype: 'float',
operator: 'EQ',
+ depth: { min: 0, max: 1 },
},
graph
);
@@ -77,6 +85,7 @@ addPill(
datatype: 'bool',
operator: 'EQ',
value: 'true',
+ depth: { min: 0, max: 1 },
},
graph
);
diff --git a/libs/shared/lib/querybuilder/panel/querybuilder.tsx b/libs/shared/lib/querybuilder/panel/querybuilder.tsx
index 05699d342faa91bc8142d354d72ba334ce9180d7..c3c8de1014f844986f14c6b2d9dcc1578ceb1a3c 100644
--- a/libs/shared/lib/querybuilder/panel/querybuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/querybuilder.tsx
@@ -1,6 +1,6 @@
import {
createReactFlowElements,
- dragPill,
+ movePillTo,
dragPillStarted,
dragPillStopped,
} from '@graphpolaris/shared/lib/querybuilder/usecases';
@@ -44,7 +44,7 @@ export const QueryBuilder = (props: any) => {
const nodes = useQuerybuilderNodes();
const dispatch = useAppDispatch();
const isDraggingPill = useRef(false);
- console.log('inputnodes', nodes);
+ // console.log('inputnodes', nodes);
const elements = useMemo(() => createReactFlowElements(nodes), [nodes]);
@@ -66,7 +66,7 @@ export const QueryBuilder = (props: any) => {
}
// Call the drag usecase
- dragPill(node.id, nodes, dx, dy, node.position);
+ movePillTo(node.id, nodes, dx, dy, node.position);
// Dispatch the new graphology object, so reactflow will get rerendered
dispatch(setQuerybuilderNodes(nodes.export()));
@@ -84,7 +84,7 @@ export const QueryBuilder = (props: any) => {
dispatch(setQuerybuilderNodes(nodes.export()));
};
- console.log(elements);
+ // console.log(elements);
return (
<div
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/attributepill/attributepill.module.scss.d.ts b/libs/shared/lib/querybuilder/pills/customFlowPills/attributepill/attributepill.module.scss.d.ts
index 9baaa385eba39f8895ec2d2ccb333b55bc8b1eee..d44a6b42fca61b196da056f690d2db24b92a2e0d 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/attributepill/attributepill.module.scss.d.ts
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/attributepill/attributepill.module.scss.d.ts
@@ -1,4 +1,10 @@
declare const classNames: {
+ readonly 'react-flow__node': 'react-flow__node';
+ readonly selected: 'selected';
+ readonly entityWrapper: 'entityWrapper';
+ readonly hidden: 'hidden';
+ readonly 'react-flow__edges': 'react-flow__edges';
+ readonly 'react-flow__edge-default': 'react-flow__edge-default';
readonly handleConnectedFill: 'handleConnectedFill';
readonly handleConnectedBorderRight: 'handleConnectedBorderRight';
readonly handleConnectedBorderLeft: 'handleConnectedBorderLeft';
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss.d.ts b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss.d.ts
index fc1bd3d831dfc9009f55ab1d7c8fc11355b75b71..4463ed1a30528ff02976d4e75d8a2788103922b5 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss.d.ts
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss.d.ts
@@ -1,4 +1,10 @@
declare const classNames: {
+ readonly 'react-flow__node': 'react-flow__node';
+ readonly selected: 'selected';
+ readonly entityWrapper: 'entityWrapper';
+ readonly hidden: 'hidden';
+ readonly 'react-flow__edges': 'react-flow__edges';
+ readonly 'react-flow__edge-default': 'react-flow__edge-default';
readonly handleConnectedFill: 'handleConnectedFill';
readonly handleConnectedBorderRight: 'handleConnectedBorderRight';
readonly handleConnectedBorderLeft: 'handleConnectedBorderLeft';
@@ -6,14 +12,10 @@ declare const classNames: {
readonly entity: 'entity';
readonly highlighted: 'highlighted';
readonly handleLeft: 'handleLeft';
- readonly 'react-flow__edges': 'react-flow__edges';
- readonly 'react-flow__edge-default': 'react-flow__edge-default';
- readonly selected: 'selected';
readonly contentWrapper: 'contentWrapper';
readonly entityFade: 'entityFade';
readonly entityHandleLeft: 'entityHandleLeft';
readonly entityHandleBottom: 'entityHandleBottom';
- readonly entityWrapper: 'entityWrapper';
readonly entitySpan: 'entitySpan';
readonly handleFunctionEntity: 'handleFunctionEntity';
};
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx
index 1f12b493a8543fd981b8c94a32091ad579507acd..0aa8a88a92a157f1f213c8a9dcb89cbf98019700 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx
@@ -13,7 +13,7 @@ import { Handles } from '../../../structures/Handles';
export const EntityFlowElement = React.memo(({ data }: EntityNode) => {
const theme = useTheme();
- // console.log('EntityRFPill', data);
+ console.log('EntityRFPill', data);
// TODO: Change flow element width when text overflows
const animation = data.fadeIn ? styles.entityFade : '';
@@ -21,11 +21,7 @@ export const EntityFlowElement = React.memo(({ data }: EntityNode) => {
return (
<div
className={`${styles.entity} ${animation} query_builder-entity`}
- style={{
- backgroundColor: theme.palette.custom.nodesBase[0],
- borderTop: `4px solid ${theme.palette.custom.nodesBase[0]}`,
- borderBottom: `6px solid ${theme.palette.custom.elements.entityBase[0]}`,
- }}
+ style={{ backgroundColor: theme.palette.custom.elements.entityBase[0] }}
>
<Handle
id={Handles.ToRelation}
@@ -54,11 +50,10 @@ export const EntityFlowElement = React.memo(({ data }: EntityNode) => {
className={
styles.handleFunction +
' ' +
- styles.handleFunctionEntity +
- ' ' +
(false ? styles.handleConnectedFill : '')
}
/>
+
<div className={styles.entityWrapper}>
<span className={styles.entitySpan}>{data.name}</span>
</div>
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss
index e7dd844ff495b98f1ff9ceebf1e57b41dc9fede0..1cfa7a09dd324db222d5edcc13aa19b6187442c0 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss
@@ -114,121 +114,89 @@ $height: 10px;
border-left: $height solid;
}
+$width: 325;
// Relation element
.relation {
- height: 36;
- min-width: 240px;
+ position: relative;
display: flex;
+ width: $width + px;
+ background: transparent;
text-align: center;
+ text-decoration: none;
color: black;
+ box-sizing: border-box;
line-height: 20px;
font-family: monospace;
font-weight: bold;
font-size: 11px;
}
-
+.relationTop {
+ position: absolute;
+ content: '';
+ width: inherit;
+ left: 0px;
+ height: $height + px;
+ z-index: -1;
+ background-color: #1fa2a2;
+ transform: perspective(15px) rotateX(5deg);
+ border-bottom: none;
+}
+.relationBottom {
+ position: absolute;
+ content: '';
+ width: inherit;
+ left: 0px;
+ height: $height + px;
+ z-index: -1;
+ background-color: #1fa2a2;
+ top: $height + px;
+ transform: perspective(15px) rotateX(-5deg);
+ border-top: none;
+}
.relationWrapper {
display: inherit;
+ width: inherit;
align-items: center;
justify-content: space-between;
}
-
-.relationNodeTriangleGeneral {
- position: absolute;
- width: 0;
- height: 0;
- margin: auto 0;
- border-style: solid;
- border-color: transparent;
-}
-
-.relationNodeTriangleLeft {
- transform: translateX(-100%);
- top: 0px;
- border-width: 18px 24px 18px 0;
-}
-
-.relationNodeSmallTriangleLeft {
- transform: translateX(-100%);
- top: 30px;
- border-width: 0 8px 6px 0;
-}
-
-.relationNodeTriangleRight {
- right: -24px;
- top: 0px;
- border-width: 18px 0 18px 24px;
-}
-
-.relationNodeSmallTriangleRight {
- right: -8px;
- top: 30px;
- border-width: 0 0 6px 8px;
-}
-
.relationHandleFiller {
- display: block;
+ flex: 1 1 0;
}
-
.relationHandleLeft {
position: absolute;
- top: 50%;
- margin-left: 15px;
+ top: 25%;
border-style: solid;
- border-width: 8px 12px 8px 0;
+ border-width: 6px 12px 6px 0;
border-radius: 0px;
left: unset;
border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
background: transparent;
+ margin: $width + px;
&::before {
content: '';
border-style: solid;
- border-width: 6px 8px 6px 0;
+ border-width: 4px 8px 4px 0;
border-color: transparent rgba(255, 255, 255, 0.6) transparent transparent;
+ margin-top: 0.5;
background: transparent;
z-index: -1;
display: inline-block;
position: absolute;
- top: -0.5em;
+ top: -0.4em;
left: 0.25em;
}
}
-
-.relationHandleRight {
- position: absolute;
- margin-right: 19px;
- border-style: solid;
- border-width: 8px 0 8px 12px;
- border-radius: 0px;
- left: unset;
- border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
- background: transparent;
- &::before {
- content: '';
- border-style: solid;
- border-width: 6px 0 6px 8px;
- border-color: transparent transparent transparent rgba(255, 255, 255, 0.6);
- background: transparent;
- z-index: -1;
- display: inline-block;
- position: absolute;
- top: -0.5em;
- right: 0.25em;
- }
-}
-
.relationHandleBottom {
border: 0;
border-radius: 0;
width: 8;
height: 8;
left: unset;
- margin-bottom: 18;
- margin-left: 40;
+ margin-bottom: 10;
background: rgba(0, 0, 0, 0.3);
transform: rotate(-45deg);
transform-origin: center;
- margin: 5px;
+ margin: $width + px;
&::before {
content: '';
width: 6;
@@ -243,16 +211,35 @@ $height: 10px;
position: fixed;
}
}
-
-.relationDataWrapper {
- margin-left: 80;
+.relationHandleRight {
+ position: absolute;
+ top: -5%;
+ bottom: -4px;
+ transform: translate(-50%);
+ border-style: solid;
+ border-width: 6px 0 6px 12px;
+ border-radius: 0px;
+ left: unset;
+ border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
+ background: transparent;
+ margin: $width + px;
+ &::before {
+ content: '';
+ border-style: solid;
+ border-width: 4px 0 4px 8px;
+ border-color: transparent transparent transparent rgba(255, 255, 255, 0.6);
+ margin-top: 0.5;
+ background: transparent;
+ z-index: -1;
+ display: inline-block;
+ position: absolute;
+ top: -0.4em;
+ right: 0.25em;
+ }
}
-
-.relationSpan {
- float: left;
- margin-left: 5;
+.relationHandleFunction {
+ margin-left: 40;
}
-
.relationInputHolder {
display: flex;
float: right;
@@ -265,7 +252,6 @@ $height: 10px;
align-items: center;
max-height: 12px;
}
-
.relationInput {
z-index: 1;
cursor: text;
@@ -290,15 +276,17 @@ $height: 10px;
font-style: italic;
}
}
-
.relationReadonly {
cursor: grab !important;
color: #181520 !important;
user-select: none;
font-style: normal !important;
}
+.relationSpan {
+ float: left;
+ margin-left: 5;
+}
-.relationHandleFunction {
- margin-left: 20;
- margin-bottom: 18px !important;
+.relationDataWrapper {
+ display: block;
}
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss.d.ts b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss.d.ts
index 9ec187ab76211a2fa289ee1f05d69bf67c7d0385..6c853cb0e9a0e47ae837108048613ac30a223336 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss.d.ts
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss.d.ts
@@ -1,4 +1,10 @@
declare const classNames: {
+ readonly 'react-flow__node': 'react-flow__node';
+ readonly selected: 'selected';
+ readonly entityWrapper: 'entityWrapper';
+ readonly hidden: 'hidden';
+ readonly 'react-flow__edges': 'react-flow__edges';
+ readonly 'react-flow__edge-default': 'react-flow__edge-default';
readonly handleConnectedFill: 'handleConnectedFill';
readonly handleConnectedBorderRight: 'handleConnectedBorderRight';
readonly handleConnectedBorderLeft: 'handleConnectedBorderLeft';
@@ -11,21 +17,18 @@ declare const classNames: {
readonly handleRight: 'handleRight';
readonly arrowLeft: 'arrowLeft';
readonly arrowRight: 'arrowRight';
+ readonly relationTop: 'relationTop';
+ readonly relationBottom: 'relationBottom';
readonly relationWrapper: 'relationWrapper';
- readonly relationNodeTriangleGeneral: 'relationNodeTriangleGeneral';
- readonly relationNodeTriangleLeft: 'relationNodeTriangleLeft';
- readonly relationNodeSmallTriangleLeft: 'relationNodeSmallTriangleLeft';
- readonly relationNodeTriangleRight: 'relationNodeTriangleRight';
- readonly relationNodeSmallTriangleRight: 'relationNodeSmallTriangleRight';
readonly relationHandleFiller: 'relationHandleFiller';
readonly relationHandleLeft: 'relationHandleLeft';
- readonly relationHandleRight: 'relationHandleRight';
readonly relationHandleBottom: 'relationHandleBottom';
- readonly relationDataWrapper: 'relationDataWrapper';
- readonly relationSpan: 'relationSpan';
+ readonly relationHandleRight: 'relationHandleRight';
+ readonly relationHandleFunction: 'relationHandleFunction';
readonly relationInputHolder: 'relationInputHolder';
readonly relationInput: 'relationInput';
readonly relationReadonly: 'relationReadonly';
- readonly relationHandleFunction: 'relationHandleFunction';
+ readonly relationSpan: 'relationSpan';
+ readonly relationDataWrapper: 'relationDataWrapper';
};
export = classNames;
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.tsx
index 354836f4187b1b17bb21f0094faeb688a1597b1e..cd912b2befbeeddae42c7d65c383f069ee6a3994 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.tsx
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.tsx
@@ -69,74 +69,28 @@ export const RelationPill = memo(({ data }: RelationNode) => {
};
return (
- <div
- className={styles.relation}
- style={{
- background: theme.palette.custom.nodesBase[0],
- borderTop: `4px solid ${theme.palette.custom.nodesBase[0]}`,
- borderBottom: `6px solid ${theme.palette.custom.elements.relationBase[0]}`,
- }}
- >
+ <div className={styles.relation}>
+ <span
+ className={styles.relationTop}
+ style={{ backgroundColor: theme.palette.custom.elements.relation[0] }}
+ ></span>
+ <span
+ className={styles.relationBottom}
+ style={{ backgroundColor: theme.palette.custom.elements.relation[0] }}
+ ></span>
<div className={styles.relationWrapper}>
- <div
- className={[
- styles.relationNodeTriangleGeneral,
- styles.relationNodeTriangleLeft,
- ].join(' ')}
- style={{ borderRightColor: theme.palette.custom.nodesBase[0] }}
- >
- <span className={styles.relationHandleFiller}>
- <Handle
- id={Handles.RelationLeft}
- type="target"
- position={Position.Left}
- className={
- styles.relationHandleLeft +
- ' ' +
- (false ? styles.handleConnectedBorderLeft : '')
- }
- />
- </span>
- </div>
- <div
- className={[
- styles.relationNodeTriangleGeneral,
- styles.relationNodeSmallTriangleLeft,
- ].join(' ')}
- style={{
- borderRightColor: theme.palette.custom.elements.relationBase[0],
- }}
- ></div>
- <div
- className={[
- styles.relationNodeTriangleGeneral,
- styles.relationNodeTriangleRight,
- ].join(' ')}
- style={{ borderLeftColor: theme.palette.custom.nodesBase[0] }}
- >
- <span className={styles.relationHandleFiller}>
- <Handle
- id={Handles.RelationRight}
- type="target"
- position={Position.Right}
- className={
- styles.relationHandleRight +
- ' ' +
- (false ? styles.handleConnectedBorderRight : '')
- }
- />
- </span>
- </div>
- <div
- className={[
- styles.relationNodeTriangleGeneral,
- styles.relationNodeSmallTriangleRight,
- ].join(' ')}
- style={{
- borderLeftColor: theme.palette.custom.elements.relationBase[0],
- }}
- ></div>
-
+ <span className={styles.relationHandleFiller}>
+ <Handle
+ id={Handles.RelationLeft}
+ type="target"
+ position={Position.Left}
+ className={
+ styles.relationHandleLeft +
+ ' ' +
+ (false ? styles.handleConnectedBorderLeft : '')
+ }
+ />
+ </span>
<span className={styles.relationHandleFiller}>
<Handle
id={Handles.ToAttributeHandle}
@@ -221,6 +175,18 @@ export const RelationPill = memo(({ data }: RelationNode) => {
<span>]</span>
</span>
</div>
+ <span className={styles.relationHandleFiller}>
+ <Handle
+ id={Handles.RelationRight}
+ type="target"
+ position={Position.Right}
+ className={
+ styles.relationHandleRight +
+ ' ' +
+ (false ? styles.handleConnectedBorderRight : '')
+ }
+ />
+ </span>
<Handle
id={Handles.ReceiveFunction}
type="target"
diff --git a/libs/shared/lib/querybuilder/pills/querypills.module.scss b/libs/shared/lib/querybuilder/pills/querypills.module.scss
index 9e716a61793c115860ab6595b2f2e97fbfda5c21..2a278db4c6abf0715017fbc73b601f6d748e06ec 100644
--- a/libs/shared/lib/querybuilder/pills/querypills.module.scss
+++ b/libs/shared/lib/querybuilder/pills/querypills.module.scss
@@ -1,3 +1,26 @@
+.react-flow__node {
+ &.selected {
+ border: #000 solid 1px;
+ }
+}
+
+.entityWrapper {
+ &.hidden {
+ display: none;
+ }
+}
+
+.react-flow__edges {
+ zindex: '3';
+}
+.react-flow__nodes {
+}
+.react-flow__pane {
+}
+.react-flow__edge-default .selected {
+ stroke: 'gray !important';
+}
+
// This is used to override the previous color of the handle, for that to work it has to be on the bottom of the file
.handleConnectedFill {
&::before {
diff --git a/libs/shared/lib/querybuilder/pills/querypills.module.scss.d.ts b/libs/shared/lib/querybuilder/pills/querypills.module.scss.d.ts
index 5fc8829cc55093ac225af1acd319611c23d9ac9f..a040b2068e5b80b1df7cfa195509c11c47e175ad 100644
--- a/libs/shared/lib/querybuilder/pills/querypills.module.scss.d.ts
+++ b/libs/shared/lib/querybuilder/pills/querypills.module.scss.d.ts
@@ -1,2 +1,13 @@
-declare const classNames: {};
+declare const classNames: {
+ readonly 'react-flow__node': 'react-flow__node';
+ readonly selected: 'selected';
+ readonly entityWrapper: 'entityWrapper';
+ readonly hidden: 'hidden';
+ readonly 'react-flow__edges': 'react-flow__edges';
+ readonly 'react-flow__edge-default': 'react-flow__edge-default';
+ readonly handleConnectedFill: 'handleConnectedFill';
+ readonly handleConnectedBorderRight: 'handleConnectedBorderRight';
+ readonly handleConnectedBorderLeft: 'handleConnectedBorderLeft';
+ readonly handleFunction: 'handleFunction';
+};
export = classNames;
diff --git a/libs/shared/lib/querybuilder/usecases/createReactFlowElements.ts b/libs/shared/lib/querybuilder/usecases/createReactFlowElements.ts
index 9b288187a4c8daa39507a879ac07f87572c1e2b7..3fd693e6f4977ecc8529a03979f3b40facf12a05 100644
--- a/libs/shared/lib/querybuilder/usecases/createReactFlowElements.ts
+++ b/libs/shared/lib/querybuilder/usecases/createReactFlowElements.ts
@@ -54,9 +54,8 @@ export function createReactFlowElements(graph: Graph): {
}
// Each pill should have a name and type
data = {
+ ...attributes,
...data,
- name: attributes.name,
- suggestedForConnection: attributes.suggestedForConnection, // Highlights the pill, with shadow or something
};
const RFNode: Node = {
diff --git a/libs/shared/lib/querybuilder/usecases/dragging/dragPill.ts b/libs/shared/lib/querybuilder/usecases/dragging/dragPill.ts
index 1a7ae7dc97567751b86f69db05f1049712ed8d26..728c5f0e34473fa14fda287b9fa3728da6547936 100644
--- a/libs/shared/lib/querybuilder/usecases/dragging/dragPill.ts
+++ b/libs/shared/lib/querybuilder/usecases/dragging/dragPill.ts
@@ -37,9 +37,9 @@ export function dragPillStarted(id: string, nodes: MultiGraph) {
* @param nodes The graphology query builder nodes object
* @param dx Delta x
* @param dy Delta y
- * @param position The already updated positiong (dx dy are already applied)
+ * @param position The already updated positioning (dx dy are already applied)
*/
-export function dragPill(
+export function movePillTo(
id: string,
nodes: MultiGraph,
dx: number,