увеличить курсор мыши на div внутри div - PullRequest
0 голосов
/ 25 февраля 2020

Итак, я строю организационную диаграмму и пытаюсь реализовать масштабирование диаграммы таким образом, чтобы при прокрутке пользователь удерживал точку под мышкой под мышкой.

Вот мой html:

<div class="orgchart-container" id="orgchartcontainer" [ngClass]="containerClass" (wheel)="zoom ? zoomHandler($event) : true"
 (mouseup)="pan && panning ? panEndHandler() : true">
    <div class="zoomers">
        <button class="zoomersFaIcon" (click)="zoomHelper(1, false)"><fa-icon  [icon]="faMinus"></fa-icon></button>
        <input class="zoomersSlider" type="range" #zoomer min="0.8" max="3.5" step="0.1" value="1.4" (change)="zoomHelper(zoomer.value, true)">
        <button (click)="zoomHelper(-1, false)"> <fa-icon [icon]="faPlus"></fa-icon></button>
    </div>
    <div class="orgchart" id="orgchart" [ngClass]="chartClass" [ngStyle]="{'transform': transformVal, 'cursor': cursorVal}"
     (mousedown)="pan ? panStartHandler($event) : true" (mousemove)="pan && panning ? panHandler($event) : true"
     (click)="onClickChart($event)">
        <jhi-org-chart-node [datasource]="datasource" id="orgchartnode" [nodeHeading]="nodeHeading" [nodeContent]="nodeContent" [nodeContent2]="nodeContent2"
                   [nodeTemplate]="nodeTemplate" [groupScale]="groupScale" [select]="select" (nodeClick)="onNodeClick($event)"></jhi-org-chart-node>
    </div>
</div>

, а вот мой javascript:

Как видите, я пытался вычесть смещение из три разных элемента для правильного увеличения, но все же что-то не так. Любая помощь в устранении неполадок будет оценена!

...