How to use the paper.view function in paper

function updateSelectionState() {
  clearSelectionBounds();
  selectionBounds = getSelectionBounds();
  if (selectionBounds !== undefined) {
    const rect = new paper.Path.Rectangle(selectionBounds);
    // var color = paper.project.activeLayer.getSelectedColor();
    rect.strokeColor = 'rgba(0,0,0,0)'; // color ? color : '#009dec';
    rect.strokeWidth = 1 / paper.view.zoom;
    // rect._boundsSelected = true;
    rect.selected = true;
    (rect as any).setFullySelected(true);
    (rect as any).guide = true;
    rect.visible = drawSelectionBounds > 0;
    // rect.transformContent = false;
    selectionBoundsShape = rect;
  }
}

private onMouseDrag(event: paper.ToolEvent) {
    // TODO: need to handle the case where the last point may be nil
    if (!event.modifiers.space) {
      return;
    }
    Cursors.add(Cursor.Grabbing);

    // In order to have coordinate changes not mess up the
    // dragging, we need to convert coordinates to view space,
    // and then back to project space after the view space has
    // changed.
    const point = paper.view.projectToView(event.point);
    const last = paper.view.viewToProject(this.lastPoint);
    paper.view.scrollBy(last.subtract(event.point));
    this.lastPoint = point;
  }

private onMouseDrag(event: paper.ToolEvent) {
    this.isDragging = false;
    this.updateCursorType(event);

    if (!event.modifiers.space) {
      return;
    }

    // In order to have coordinate changes not mess up the dragging, we need to
    // convert coordinates to view space, and then back to project space after
    // the view has been scrolled.
    const projPoint = event.point;
    const viewPoint = paper.view.projectToView(projPoint);
    const { tx, ty } = paper.view.matrix
      .clone()
      .translate(projPoint.subtract(paper.view.viewToProject(this.viewLastPoint)));
    this.setZoomPanInfo(paper.view.zoom, tx, ty);
    this.viewLastPoint = viewPoint;
  }

paper.view.center = paper.view.center.add(
                zoomCenter.multiply(moveFactor / zoomFactor),
              );
            } else if (event.modifiers.command && event.modifiers.option) {
              paper.view.zoom /= zoomFactor;
              paper.view.center = paper.view.center.subtract(zoomCenter.multiply(moveFactor));
            }
            break;
          }
          case Mode.ZoomRect: {
            const start = paper.view.center.add(lastMousePoint);
            const end = event.point;
            paper.view.center = start.add(end).multiply(0.5);
            const dx = paper.view.bounds.width / Math.abs(end.x - start.x);
            const dy = paper.view.bounds.height / Math.abs(end.y - start.y);
            paper.view.zoom = Math.min(dx, dy) * paper.view.zoom;
            break;
          }
        }
        this.hitTest(event);
        mode = Mode.None;
      },
      keydown: (event: paper.KeyEvent) => this.hitTest(event),

private onMouseDown(event: paper.ToolEvent) {
    const hitResult = paper.project.hitTest(event.point, {
      segments: true,
      stroke: true,
      curves: true,
      tolerance: 5 / paper.view.zoom,
    });
    const lastHitResult =
      hitResult && hitResult.item && hitResult.item.selected ? hitResult : undefined;

    if (this.currSegment) {
      this.currSegment.selected = false;
    }
    this.mode = Mode.None;
    this.type = undefined;
    this.currSegment = undefined;

    if (!this.currPath) {
      Selections.deselectAll();
      this.currPath = new paper.Path();
      this.currPath.fillColor = 'blue';
      this.currPath.strokeColor = 'black';

export function clearHoveredItem() {
  if (hoveredItem) {
    hoveredItem.remove();
    hoveredItem = undefined;
  }
  paper.view.update();
}

viewDown(event) {
        this.downPoint = Paper.view.projectToView(event.point);
        this.downCenter = Paper.view.center;
    }

__loadDXFData(text) {
        let parser = new DXFParser();
        let dxfdata = parser.parseSync(text);
        let dxfobjects = [];
        for(let i in dxfdata.entities){
            let entity = dxfdata.entities[i];
            dxfobjects.push(new DXFObject(entity));
        }

        this.dxfData = dxfobjects;
        let render = DXFRenderer.renderDXFObjects(this.dxfData);
        this.__currentRenderSVG = render.exportSVG();
        let bounds = render.bounds;
        let zoom = this.__computeOptimalZoom(bounds.width, bounds.height);
        paper.view.zoom = zoom;
        paper.view.center = bounds.center;
    }

viewDown(event) {
        this.downPoint = Paper.view.projectToView(event.point);
        this.downCenter = Paper.view.center;
    }

mouseup: (event: paper.MouseEvent) => {
        if (this.mode === 'zoom') {
          const zoomCenter = event.point.subtract(paper.view.center);
          const moveFactor = this.zoomFactor - 1.0;
          if (event.modifiers.command && !event.modifiers.option) {
            paper.view.zoom *= this.zoomFactor;
            paper.view.center = paper.view.center.add(
              zoomCenter.multiply(moveFactor / this.zoomFactor),
            );
          } else if (event.modifiers.command && event.modifiers.option) {
            paper.view.zoom /= this.zoomFactor;
            paper.view.center = paper.view.center.subtract(zoomCenter.multiply(moveFactor));
          }
        } else if (this.mode === 'zoom-rect') {
          const start = paper.view.center.add(this.mouseStartPos);
          const end = event.point;
          paper.view.center = start.add(end).multiply(0.5);
          const dx = paper.view.bounds.width / Math.abs(end.x - start.x);
          const dy = paper.view.bounds.height / Math.abs(end.y - start.y);
          paper.view.zoom = Math.min(dx, dy) * paper.view.zoom;
        }
        this.hitTest(event);
        this.mode = '';