У меня есть элемент canvas в моем угловом компоненте. Одной из основных функций является перетаскивание окна выбора на холсте.
Я отслеживаю несколько мест мыши:
handleMouseMove() отслеживает движение на холсте,что я на самом деле использую в компоненте. - Обработчик
wrapper mousemove (встроенный в шаблон) отслеживает движение мыши по всему компоненту, просто чтобы увидеть, что мышь распознается. - В моем
ngOnInit() я также прикрепляю слушателя к window дорожке screenLocation.
Бывают случаи, когда я нажимаю и перетаскиваю на холст, чтоуказатель мыши превращается в not-allowed, и я не могу понять, почему. Я знаю, что когда он находится в этом состоянии, все отслеживание мыши останавливается. Если я перетаскиваю выделение, то при отпускании мыши указатель возвращается к нормальному состоянию, но mouseup не зарегистрирован, что портит мой выбор.
Любые подсказки относительно того, почему это такпроисходит?
Я включил шаблон здесь.
<div
#wrapper
id="wrapper"
[style.cursor]="this.startOfPan ? 'grabbing' : isInPanningMode ? 'grab' : 'default'"
(mousemove)="canvasLocation = [$event.clientX, $event.clientY]"
>
<canvas
#outerCanvas id="outer-canvas"
></canvas>
<div
id="graph-wrapper"
[ngStyle]="{
'top.px': graphDrawer.config.lastValueYMargin,
'left.px': graphDrawer.origin[0]
}"
>
<div id="chart-title">{{chart.title}} - {{shortGuid}}</div>
<canvas
#innerCanvas id="inner-canvas"
(mousemove)="handleMouseMove($event, Regions.graph)"
(mousedown)="handleMouseDown()"
(mousewheel)="handleMouseWheel($event)"
[ngStyle]="{
'border-left-width.px': !config.drawAxes ? 0 : !chart.yAxisRight ? config.axisWidth : 0,
'border-right-width.px': !config.drawAxes ? 0 : chart.yAxisRight ? config.axisWidth : 0,
'border-bottom-width.px': !config.drawAxes ? 0 : chart.xAxisTop ? 0 : config.axisWidth,
'border-top-width.px': !config.drawAxes ? 0 : !chart.xAxisTop ? 0 : config.axisWidth
}"
></canvas>
<div
id="selection" *ngIf="!!selection"
[ngStyle]="{
'top.px': selectionRect.y,
'left.px': selectionRect.x,
'height.px': selectionRect.height,
'width.px': selectionRect.width
}"
></div>
</div>
<div
id="x-axis-hover" class="axis-hover"
(mousemove)="handleMouseMove($event, Regions.xGutter)"
(mouseleave)="didLeaveGutter()"
(mousedown)="handleMouseDown()"
(mousewheel)="handleMouseWheel($event)"
[ngStyle]="{
'top.px': graphDrawer.graphHeight,
'left.px': !chart.yAxisRight ? graphDrawer.yAxisGutterWidth : graphDrawer.config.lastValueXMargin,
'height.px': graphDrawer.xAxisGutterHeight,
'width.px': config.drawAxes ? graphDrawer.graphWidth : graphDrawer.plottableWidth + 1,
'backgroundColor': mouseLocation.region === 'xGutter' ? 'rgb(105,105,105,0.3)' : 'transparent'
}"
></div>
<div
id="y-axis-hover" class="axis-hover"
(mousemove)="handleMouseMove($event, Regions.yGutter)"
(mouseout)="didLeaveGutter()"
(mousedown)="handleMouseDown()"
(mousewheel)="handleMouseWheel($event)"
[ngStyle]="{
'top.px': config.drawAxes ? 0 : graphDrawer.config.lastValueYMargin - 1,
'left.px': !chart.yAxisRight ? 0 : graphDrawer.plottableWidth + graphDrawer.config.lastValueXMargin,
'height.px': config.drawAxes ? graphDrawer.graphHeight + config.axisWidth : graphDrawer.plottableHeight + 2,
'width.px': graphDrawer.yAxisGutterWidth,
'backgroundColor': mouseLocation.region === 'yGutter' ? 'rgb(105,105,105,0.3)' : 'transparent'
}"
></div>
</div>