Реализация отменить / повторить в Фабри cjs с несколькими холстами - PullRequest
Новая
       52

Реализация отменить / повторить в Фабри cjs с несколькими холстами

0 голосов
/ 26 апреля 2020

Я новичок ie в vue и Фабри cjs и в настоящее время работаю над сложным приложением, которое работает с большим объемом данных. У меня есть несколько полотен с различными объектами, которые могут меняться в зависимости от взаимодействия с пользователем. Все изменения / объекты хранятся в массиве объектов

Демо: https://prkos.csb.app/ enter image description here

Я пытаюсь реализовать отменить / повторить в моем приложении. Мне трудно понять подход fabri cjs отменить / повторить в ответе ниже (ссылка)

Функция отмены-возврата в Fabri c. js

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

Я испробовал нижеприведенный подход не-fabri c, где отмена, повтор работает с индексом истории, который будет изменяться на основе при отмене (указатель приращения), концепция повторения (указатель приращения).

Основываясь на этом подходе, я называю мутацию, в которой 

apply(state,actiontype){
if(actiontype==undo){
           remove the respective objects
           pop(data) //pops the data out of other places in the application not the history
           historyindex++;
}else if(actiontype==redo){
           get the data from history
           unshift(data);
           historyindex–-;
}
}

Я чувствую, что это не самый эффективный способ выполнения отменить / повторить операции, так как она включает в себя клонирование объектов и даже должна обрабатывать огромные наборы данных. Что может привести к зависанию приложения. Любые предложения будут очень полезны.

Код: (несколько полотен) https://codesandbox.io/s/test-project-prkos?file= / src / components / App. vue

Отредактировано: я обновил пример с функциями отмены / повторения, использованной библиотекой истории fabri c, все еще пытающейся найти лучший подход.

...