Infinite - Viewer ，when the form component is selected Will automatically scroll, centering the current component

[taoqingfeng]

component: infinite-viewer version: ^0.14.3 Infinite - Viewer ，when the form component is selected Will automatically scroll, centering the current component

[taoqingfeng]

The version is : ngx-infinite-viewer ^0.14.3 What should I do to avoid this behavior???

[daybrush]

@taoqingfeng

What options are you using for ngx-infinite-viewer?

[taoqingfeng]

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'); }

[daybrush]

@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);
            });
    }
}

[daybrush]

@taoqingfeng

if things are different

Can you provide me a demo?

[taoqingfeng]

[taoqingfeng]

Thank you very much !!! here is the demo. https://stackblitz.com/edit/angular-ivy-yjtzrx?file=src/app/app.component.html.

[taoqingfeng]

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'

[daybrush]

@taoqingfeng

Use stopPropagation to true in ngx-moveable

<ngx-moveable
      ...
     [stopPropagation]="true"
     />

[daybrush]

@taoqingfeng ngx-infinite-viewer@0.15.0 is released.

resize method is added And useResizeObserver prop is added.

Use either one.

[taoqingfeng]

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.

[taoqingfeng]

ngx-moveable add the [stopPropagation]="true" props. but The problem remains

[daybrush]

@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]

Here's a GIF of the first problem figure

[daybrush]

@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>

[taoqingfeng]

Thank you, this problem is solved by using preventClickEventOnDragStartproperties.

[taoqingfeng]

<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]

This is my other question.

[daybrush]

@taoqingfeng

Perhaps an update has been made in this regard. Try installing the new version.

[taoqingfeng]

I have upgraded NGX-Infinite-Viewer to version 0.15.2, but the problem still persists

[daybrush]

@taoqingfeng

0.15.3 is released. Check it agian.

[taoqingfeng]

Thank you very much. Problem solved