diff --git a/client/src/app/shared/components/sorting-tree/sorting-tree.component.html b/client/src/app/shared/components/sorting-tree/sorting-tree.component.html index f1cbe3584..6959158f9 100644 --- a/client/src/app/shared/components/sorting-tree/sorting-tree.component.html +++ b/client/src/app/shared/components/sorting-tree/sorting-tree.component.html @@ -1,47 +1,47 @@ - - - -
- - - -
-
-
-
+ + +
+ + drag_indicator + + + + +
+
+
+
diff --git a/client/src/app/shared/components/sorting-tree/sorting-tree.component.scss b/client/src/app/shared/components/sorting-tree/sorting-tree.component.scss index 9f13ad79b..ca9b078df 100644 --- a/client/src/app/shared/components/sorting-tree/sorting-tree.component.scss +++ b/client/src/app/shared/components/sorting-tree/sorting-tree.component.scss @@ -8,7 +8,6 @@ margin: 3px 0; display: flex; align-items: center; - cursor: pointer; div { display: inherit; @@ -21,13 +20,22 @@ } } + // Overwrite the handler + .cdk-drag-handle { + display: flex; + cursor: move; + width: 50px; + align-items: center; + justify-content: center; + } + // Overwrite the preview .cdk-drag-preview { box-shadow: none !important; background-color: unset !important; border-radius: 6px !important; - div { + div.backgroundColorLight { box-sizing: border-box; background-color: mat-color($background, background); border-radius: 4px; diff --git a/client/src/app/shared/components/sorting-tree/sorting-tree.component.ts b/client/src/app/shared/components/sorting-tree/sorting-tree.component.ts index 02ee7954c..f9d12b32c 100644 --- a/client/src/app/shared/components/sorting-tree/sorting-tree.component.ts +++ b/client/src/app/shared/components/sorting-tree/sorting-tree.component.ts @@ -480,22 +480,38 @@ export class SortingTreeComponent implemen this.calcNextPosition(); } + /** + * Initializes the `this.pointer` with the x- and y-coordinates, + * where the user starts the dragging. + * + * @param x The value of the x-position on screen. + * @param y The value of the y-position on screen. + */ + private initPointer(x: number, y: number): void { + this.pointer = { + position: { + x, + y + }, + currentPosition: { + x, + y + } + }; + } + /** * Function to set the cursor position immediately if the user starts dragging a node. * * @param event The mouse event which emits the event. */ public mouseDown(event: MouseEvent): void { - this.pointer = { - position: { - x: event.x, - y: event.y - }, - currentPosition: { - x: event.x, - y: event.y - } - }; + this.initPointer(event.x, event.y); + } + + public touchStart(event: TouchEvent): void { + const { clientX, clientY }: { clientX: number; clientY: number } = event.touches[0]; + this.initPointer(Math.round(clientX), Math.round(clientY)); } /** @@ -551,16 +567,22 @@ export class SortingTreeComponent implemen */ private getDirection(): Movement { const movement = new Movement(); - movement.verticalMove = - this.nextNode.startPosition < this.nextNode.nextPosition - ? Direction.DOWNWARDS - : this.nextNode.startPosition > this.nextNode.nextPosition - ? Direction.UPWARDS - : Direction.NOWAY; + if (this.nextNode.startPosition < this.nextNode.nextPosition) { + movement.verticalMove = Direction.DOWNWARDS; + } else if (this.nextNode.startPosition > this.nextNode.nextPosition) { + movement.verticalMove = Direction.UPWARDS; + } else { + movement.verticalMove = Direction.NOWAY; + } const deltaX = this.pointer.currentPosition.x - this.pointer.position.x; movement.steps = Math.trunc(deltaX / 40); - movement.horizontalMove = - movement.steps > 0 ? Direction.RIGHT : movement.steps < 0 ? Direction.LEFT : Direction.NOWAY; + if (movement.steps > 0) { + movement.horizontalMove = Direction.RIGHT; + } else if (movement.steps < 0) { + movement.horizontalMove = Direction.LEFT; + } else { + movement.horizontalMove = Direction.NOWAY; + } return movement; }