paperjs - React コンポーネントでの togetherjs と paperjs

Question

paperjs キャンバスとのコラボレーションのために togetherjs を統合しようとしています。以下は、paperjs と togetherjs を設定するためのコードです (グローバル オブジェクトとして に追加されますwindow) 。

componentDidMount() {
    this.canvas = ReactDOM.findDOMNode(this.refs.canvasContainer);
    this.paper = new paperjs.PaperScope();
    this.paper.setup(this.canvas);
    this.view = this.paper.view;
    this.tool = new this.paper.Tool();
    this.tool.minDistance = 5;
    this.tool.onMouseDown = this.onMouseDown;
    this.tool.onMouseDrag = this.onDrag;
    this.tool.onMouseUp = this.onMouseUp;
    this.raster = new this.paper.Raster({
      source: null,
      position: this.view.center
    });
    this.raster.scale(0.4);
    this.raster.size = this.paper.view.size;
    this.view.draw();
    this.project = this.paper.project;
    this.drawingLayer = new this.paper.Layer();
    this.drawingLayer.activate();
  }

togetherjsイベントはコンストラクターで以下のように追加されます。

window.TogetherJS.hub.on('draw', this.collabDraw);
window.TogetherJS.hub.on('drawstart', this.collabDrawStart);
window.TogetherJS.hub.on('drawend', this.collabDrawFinish);

ただし、コラボレーション モードがオンの場合、新しいパスの描画は機能しません。プロパティは、ピアから送信されたパス データを保持するものであり、イベント、、および(上記のように) としてthis.colabPathトリガーされます。drawstartdrawdrawend

  setCollabUserName() {
    return this.props.profileName;
  }

  newCollabPathStart(point, width, color) {
    this.collabPath = new this.paper.Path();
    this.collabPath.strokeWidth = width;
    this.collabPath.strokeColor = color;
    this.collabPath.add(point);
    this.pathArray.push(this.collabPath);
    return;
  }

  newCollabPathDraw(point) {
    this.collabPath.add(point);
    return;
  }

  newCollabPathFinish() {
    this.collabPath.simplify();
    return;
  }

  collabDrawStart(msg) {
    if (!msg.sameUrl) {
      return;
    }
    this.newCollabPathStart(msg.point, msg.color, msg.width);
    this.view.draw();
    return;
  }

  collabDraw(msg) {
    if (!msg.sameUrl) {
      return;
    }
    this.newCollabPathDraw(msg.point);
    this.view.draw();
    return;
  }

  collabDrawFinish(msg) {
    if (!msg.sameUrl) {
      return;
    }
    this.newCollabPathFinish(msg.event);
    this.view.draw();
    return;
  }

  onMouseUp(event) {
    event.preventDefault();
    if (!this.props.panStatus) {
      this.path.simplify();
      if (window.TogetherJS.running) {
        window.TogetherJS.send({
          type: 'drawend'
        });
      }
    } else {
      // check for collab status
      this.canvas.style.cursor = 'grab';
      this.canvas.style.cursor = '-moz-grab';
      this.canvas.style.cursor = '-webkit-grab';
      this.lastX = event.point.x;
      this.lastY = event.point.y;
    }
    this.view.draw();
    threedrUtils.exportJSON(this.project.activeLayer).then(
      (jsonString) => {
        this.props.addAnnotation(jsonString);
      }
    );
  }

  onMouseDown(event) {
    event.preventDefault();
    if (this.props.importAnnotation) {
      this.project.activeLayer.clear();
      this.props.clearImport(null);
    }
    if (!this.props.isStrokeOpen) {
      this.props.toggleStrokeWindow();
    }
    if (!this.props.panStatus) {
      this.canvas.style.cursor = 'default';
      this.path = new this.paper.Path();
      this.path.strokeWidth = this.props.strokeWidth;
      this.path.strokeColor = this.props.strokeColor;
      this.path.add(event.point);
      this.pathArray.push(this.path);
      if (window.TogetherJS.running) {
        window.TogetherJS.send({
          type: 'drawstart',
          point: event.point,
          color: this.props.strokeColor,
          width: this.props.strokeWidth
        });
      }
    } else {
      // check for collab status
      this.canvas.style.cursor = 'grab';
      this.canvas.style.cursor = '-moz-grab';
      this.canvas.style.cursor = '-webkit-grab';
      this.lastX = event.point.x;
      this.lastY = event.point.y;
    }
    this.view.draw();
  }
  onDrag(event) {
    event.preventDefault();
    if (!this.props.panStatus) {
      this.path.add(event.point);
      if (window.TogetherJS.running) {
        window.TogetherJS.send({
          type: 'draw',
          point: event.point
        });
      }
    } else {
      // check collab status
      event.tool.minDistance = 1;
      this.canvas.style.cursor = 'grabbing';
      this.canvas.style.cursor = '-moz-grabbing';
      this.canvas.style.cursor = '-webkit-grabbing';
      const deltax =  this.lastX -  Math.ceil(event.point.x);
      const deltay =  this.lastY -  Math.ceil(event.point.y);
      this.project.view.scrollBy(deltax, deltay);
    }
    this.view.draw();
  }

これは大量のコードですが、この問題を説明する方法は他にありません :|