отменить повтор в fabri cjs полигоне? - PullRequest
0 голосов
/ 18 февраля 2020

Я нашел это решение: https://codepen.io/durga598/pen/gXQjdw

, которое я считаю хорошим, но я пытался реализовать отмену повторения с полигоном безуспешно. Я просто не могу обернуть голову, как это сделать.

У меня есть этот код для обработки отмены / повтора на основных c вещах, но полигон более сложный, и я не могу заставить его работать:

save = (
    type: TransactionType,
    canvasJSON?: any,
    _isWorkarea: boolean = true
  ) => {
    if (!this.handler.keyEvent.transaction) {
      return;
    }
    try {
      if (this.state) {
        const json = JSON.stringify(this.state);
        this.redos = [];
        this.undos.push({
          type,
          json
        });
      }
      const { objects }: { objects: FabricObject[] } =
        canvasJSON ||
        this.handler.canvas.toJSON(this.handler.propertiesToInclude);
      this.state = objects.filter(obj => {
        if (obj.id === 'workarea') {
          return false;
        } else if (obj.id === 'grid') {
          return false;
        } else if (obj.superType === 'port') {
          return false;
        }
        return true;
      });
    } catch (error) {
      console.error(error);
    }
  };

  /**
   * @description Undo transaction
   * @returns
   */
  undo = throttle(() => {
    const undo = this.undos.pop();
    if (!undo) {
      return;
    }
    this.redos.push({
      type: 'redo',
      json: JSON.stringify(this.state)
    });
    this.replay(undo);
  }, 100);

  /**
   * @description Redo transaction
   * @returns
   */
  redo = throttle(() => {
    const redo = this.redos.pop();
    if (!redo) {
      return;
    }
    this.undos.push({
      type: 'undo',
      json: JSON.stringify(this.state)
    });
    this.replay(redo);
  }, 100);

  /**
   * @description Replay transaction
   */
  replay = (transaction: TransactionEvent) => {
    const objects = JSON.parse(transaction.json) as FabricObject[];
    this.state = objects;
    this.active = true;
    this.handler.canvas.renderOnAddRemove = false;
    this.handler.clear();
    this.handler.canvas.discardActiveObject();
    fabric.util.enlivenObjects(
      objects,
      (enlivenObjects: FabricObject[]) => {
        enlivenObjects.forEach(obj => {
          const targetIndex = this.handler.canvas._objects.length;
          if (obj.superType === 'node') {
            this.handler.canvas.insertAt(obj, targetIndex, false);
            this.handler.portHandler.create(obj as NodeObject);
          } else if (obj.superType === 'link') {
            const link = obj as LinkObject;
            this.handler.objects = this.handler.getObjects();
            this.handler.linkHandler.create({
              type: 'curvedLink',
              fromNode: link.fromNode.id,
              fromPort: link.fromPort.id,
              toNode: link.toNode.id,
              toPort: link.toPort.id
            });
          } else {
            this.handler.canvas.insertAt(obj, targetIndex, false);
          }
        });
        this.handler.canvas.renderOnAddRemove = true;
        this.active = false;
        this.handler.canvas.selection = false;
        this.handler.canvas.renderAndReset();
        this.handler.objects = this.handler.getObjects();
        if (this.handler.onTransaction) {
          this.handler.onTransaction(transaction);
        }
      },
      null
    );
  };

Я, например, попытался осмотреться, но не могу, и этот вопрос так трудно решить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...