холст для совместной работы с angular и firestore

Question

Я пытаюсь создать совместный холст в реальном времени для ионных / угловых + fabri c .js + firestore. У меня есть холст, я сериализую его в json, сохраняю его (и обновляю от разных пользователей), но мне не удается обновить sh холсты каждого пользователя. Как я могу выполнить sh это?

Прежде всего, я подключаюсь к коллекции:

this.imageCollection = database.collection<MyImage>("images");
this.drawing = this.imageCollection.doc(this.chatId).valueChanges();
this.writeCanvas();

Затем у меня есть эта функция, которая вызывается при каждом "подъеме мыши" :

loadOnCanvas(){
    var json = JSON.stringify(this.f_canvas);
    this.us.addCanvastoDB(json, this.chatId);
    this. writeCanvas();
   }

И следующая функция - это то, где я пытаюсь записать на общий холст (который на самом деле не является общим), потому что он не обновляется чертежами разных пользователей. Эта функция вызывается в начале класса (ngOnInit) и после каждого loadOnCanvas (см. Выше):

writeCanvas(){
    let that = this;
    this.drawing.pipe(take(1)).subscribe(data=>{
      that.read_json = data[0]['canvas'];
      if(that.read_json){
        this.f_canvas.clear();
        console.log("data loaded", that.read_json);
      that.f_canvas.loadFromJSON(that.read_json, that.f_canvas.renderAll.bind(that.f_canvas));
      }
    });

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

Это функция, которая сохраняет данные в базе данных. Это в сервисе:

addCanvastoDB(canvas: any, chatId:string) {
    //Create an ID for document
    const id = this.database.createId();
    console.log("chat id: ", chatId);
    //Set document id with value in database
    this.imageCollection
      .doc(chatId)
      .set({canvas: canvas, chatid: chatId},
        { merge: true })
      .then(resp => {
        console.log("resp", resp);
      })
      .catch(error => {
        console.log("error " + error);
      });
  }

И это весь соответствующий код из моего компонента:

    export class DrawComponent implements OnInit {
  @Input() chatId: string;
  @Input() typeOfImg: string;
  @Input() userId: string;

  @Output() passEntry: EventEmitter<any> = new EventEmitter();

 @ViewChild('my_canvas', {static: false}) my_canvas: ElementRef;

  images: Observable<MyImage[]>;
  private imageCollection: AngularFirestoreCollection<MyImage>;

  private f_canvas:any;
  private read_json: any;
  drawing: any;

  constructor(
     public popoverCtrl: PopoverController,
    public cs: ChatService,
    public us: UploadService,
    private modalController: ModalController,
    private database: AngularFirestore,
    public events: Events,

  ) {
    this.availableColours = ["#dd0000", "#000000", "#00dd00", "#ffdd00"];
    //Set collection where our documents/ images info will save
    this.imageCollection = database.collection("images");  
  }

  ngOnInit() {
    this.f_canvas = new fabric.Canvas('my_canvas', {selection: true});
    this.f_canvas.setHeight(window.innerHeight);
    this.f_canvas.setWidth(window.innerWidth);
    this.f_canvas.selection = true;
    this.currentColour = '#000000';
    this.f_canvas.freeDrawingBrush.width = 3; // size of the drawing brush
    this.tool_selected = "selection_tool";
    this.background_visible = false;
    this.load_background();
    let that = this;
    this.f_canvas.on("mouse:down", function(o) {
      that.mousedown(o);
    });
    this.f_canvas.on("mouse:move", function(e) {
      that.mousemove(e);
    });
    this.f_canvas.on("mouse:up", function(e) {
      that.mouseup(e);
    });
    console.log("chatid en draw", this.chatId);
    this.drawing = this.imageCollection.doc(this.chatId).valueChanges();
  }
  ionViewDidLoad() {
    this. writeCanvas();
  }
  ngAfterViewInit(){

  }
  //save canvas in firestore
  loadOnCanvas(){
    var json = JSON.stringify(this.f_canvas);
    console.log("chat id sent to store canvas");
    this.us.addCanvastoDB(json, this.chatId);
    this. writeCanvas();
   }
//draw the canvas with the data from firestore  
   writeCanvas(){
    let that = this;
    console.log("writing canvas");
      this.drawing.pipe(tap(data=>{
        console.log(data);
        if(data[0]['canvas']){
          that.read_json = data[0]['canvas'];
          if(that.read_json){
            this.f_canvas.clear();
            console.log("data loaded", that.read_json);
          that.f_canvas.loadFromJSON(that.read_json, that.f_canvas.renderAll.bind(that.f_canvas));
          }
        }
      }));
   }

Любые идеи будут оценены. Большое спасибо заранее !!!

Answer 1

Я не знаю точно, почему, но у меня получилось, когда я изменил способ чтения из базы данных. Вместо использования tap я использую take(1). Новый блок выглядит так:

this.drawing.pipe(take(1)).subscribe(data=>{
  //OLD WAY: this.drawing.pipe(tap(data=>{

    if(data.canvas){
      that.read_json = data.canvas;
      if(that.read_json){
        this.f_canvas.clear();
      that.f_canvas.loadFromJSON(that.read_json, that.f_canvas.renderAll.bind(that.f_canvas));
      }
    }
  });

Большое спасибо за помощь в любом случае!