Итак, я строю организационную диаграмму и пытаюсь реализовать масштабирование диаграммы таким образом, чтобы при прокрутке пользователь удерживал точку под мышкой под мышкой.
Вот мой 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:
Как видите, я пытался вычесть смещение из три разных элемента для правильного увеличения, но все же что-то не так. Любая помощь в устранении неполадок будет оценена!