infinite-viewer
infinite-viewer copied to clipboard
daybrush
Infinite - Viewer ，when the form component is selected Will automatically scroll, centering the current component
component: infinite-viewer
version: ^0.14.3
Infinite - Viewer ，when the form component is selected
Will automatically scroll, centering the current component
The version is : ngx-infinite-viewer ^0.14.3 What should I do to avoid this behavior???
infiniteDragStart(e) {
console.log('infiniteDragStart');
const target = e.inputEvent.target;
}
infiniteDragEnd(e) {
console.log('infiniteDragStart');
if (!e.isDrag) {
this.selecto.clickTarget(e.inputEvent);
}
}
infiniteAbortPinch(e) {
console.log('infiniteAbortPinch');
this.selecto.triggerDragStart(e.inputEvent);
}
infiniteDrag(e) {
console.log('infiniteDrag');
}
// 画布滚轮变化，标尺跟着变动
infiniteScroll(e) {
console.log('infiniteScroll');
this.horizontalGuides.scroll(e.scrollLeft);
this.horizontalGuides.scrollGuides(e.scrollTop);
this.verticalGuides.scroll(e.scrollTop);
this.verticalGuides.scrollGuides(e.scrollLeft);
}
infinitePinch(e) {
console.log('infinitePinch');
}
@taoqingfeng
I think it can be handled in selecto. Code where the target of moveable is changed
It should check the input at dragStart time. If tagName is select or input, preventDefault must be called.
my code is below: (for vanilla)
Options
{
selectByClick: true,
selectFromInside: false,
}
Events
// selecto
onSelectEnd = e => {
// change target
this.targets = e.selected;
if (e.isDragStart) {
e.inputEvent.preventDefault();
setTimeout(() => {
moveable.dragStart(e.inputEvent);
});
}
}
Thank you very much !!! here is the demo. https://stackblitz.com/edit/angular-ivy-yjtzrx?file=src/app/app.component.html.
and another question.
How do I reset the Infinite Viewer when the width and height of an internal box change dynamically?
as the picture , the box is 19200px,but the guides is the initial 1920px, and the Infinite Viewer Scroll rolling range is still going to be 0~1920。
so，how should i do to reset the Infinite Viewer.
I try to the api resize。 but the NgxInfiniteViewerComponent has no property 'resize'
@taoqingfeng
Use stopPropagation to true in ngx-moveable
<ngx-moveable
...
[stopPropagation]="true"
/>
@taoqingfeng [email protected] is released.
resize method is added And useResizeObserver prop is added.
Use either one.
I upgraded the ngx-infinite-viewer version 015.0, try to use the useResizeObserver and resize method. but it's not resolve my
question. The scroll bar is still in the 0-1920 range, not change the value to 0-19200.
ngx-moveable add the [stopPropagation]="true" props. but The problem remains
@taoqingfeng
ngx-infinite-viewer's new version is released. Check it again.
ngx-moveable add the [stopPropagation]="true" props. but The problem remains
On my screen it looks like this:
can i know your screen gif?
@taoqingfeng
Use selecto option preventClickEventOnDragStart to true
<ngx-selecto
#selecto
dragContainer=".scena-viewer"
[selectableTargets]="['.select']"
[hitRate]="0"
[selectByClick]="true"
[selectFromInside]="false"
[toggleContinueSelect]="['shift']"
[preventDefault]="true"
[preventClickEventOnDragStart]="true"
[ratio]="0"
(dragStart)="onDragStart($event)"
(drag)="onSelecttoDrag($event)"
(selectEnd)="onSelectEnd($event)"
></ngx-selecto>
Thank you, this problem is solved by using preventClickEventOnDragStart properties.
<ngx-infinite-viewer
#InfiniteViewer
class="scena-viewer"
[zoom]="eds.scale_val / 100"
[rangeX]="[0, 0]"
[rangeY]="[0, 0]"
[threshold]="0"
[useWheelPinch]="false"
(scroll)="infiniteScroll($event)"
(dragStart)="infiniteDragStart($event)"
(dragEnd)="infiniteDragEnd($event)"
>
<div
[style]="{
width: viewport_Width + 'px',
height: viewport_Hight + 'px'
}"
class="view-box"
(drop)="handleDrop($event)"
(dragover)="handleOver($event)"
>
<app-json-parse
[previewJson]="json"
[useType]="'preview'"
*ngIf="json"
></app-json-parse>
<ngx-moveable
#moveable
[draggable]="draggable"
[resizable]="resizable"
[target]="targets"
[snappable]="true"
[snapGap]="true"
[snapThreshold]="5"
[isDisplaySnapDigit]="true"
[snapDigit]="0"
[stopPropagation]="true"
[snapDirections]="{
top: true,
right: true,
bottom: true,
left: true,
center: true,
middle: true
}"
[elementSnapDirections]="{
top: true,
right: true,
bottom: true,
left: true
}"
[verticalGuidelines]="verticalSnapGuides"
[horizontalGuidelines]="horizontalSnapGuides"
[elementGuidelines]="elementGuidelines"
[origin]="false"
(resizeStart)="onResizeStart($event)"
(resize)="onResize($event)"
(resizeEnd)="onResizeEnd($event)"
(dragStart)="move_onDragStart($event)"
(drag)="onDrag($event)"
(dragEnd)="onDragEnd($event)"
>
</ngx-moveable>
</div>
</ngx-infinite-viewer>
this.eds.screenSize_handler.subscribe((res) => {
this.viewport_Width = res.width;
this.viewport_Hight = res.height;
this.horizontalGuides.resize();
this.verticalGuides.resize();
this.InfiniteViewer.resize();
});
The NGx-infinite Viewer has a box inside it, and I dynamically control its width and height by viewport_Width and viewport_Hight. However, the scroll bar of NGX-Infinite Viewer does not change when I change viewport_Width or viewport_Hight. It must wait until the next time the viewport_Width value changes to update the last view.
@taoqingfeng
Perhaps an update has been made in this regard. Try installing the new version.
I have upgraded NGX-Infinite-Viewer to version 0.15.2, but the problem still persists