VueJS & fabric.js: как добиться реактивности?

Question

[thehighhomie]

Я добавил библиотеку fabric.js в VueJS и инициализировал ее в компоненте AppCanvas, в хуке mounted.

Добавил для теста добавления кнопку "Добавить элемент".

Добивал состояние "elems" и мутацию "addElems" в Vuex и использовал их в компоненте, однако реактивности нет - сама мутация отрабатывается, но цикл в хуке mounted не обновляется, то есть элементы не добавляются.

То же самое происходит, если я вместо хранилища использую пропсы.

Вот песочница

Подскажите пожалуйста как добиться реактивности?

Answer 1

[Василий Варюхин]

Если я правильно понял, то вы забыли перерисовать канвас. (По watch: elements), например)
Upd: Не, это я не увидел. Минутку.

Дык все работает)

Comments

[thehighhomie]

где работает?)

[Василий Варюхин]

thehighhomie, У вас. Реактивность есть. Вы не обновляете канвас.

[Василий Варюхин]

thehighhomie, Например, так.

[thehighhomie]

Круто) спасибо) можно еще тогда спросить на счет производительности? Я вижу, что цикл в методе "render" вызывается каждый раз при добавлении элемента, хоть элемент добавляется 1, но цикл же все равно проходит как я понимаю? Если элементов около 200 (не больше), будут проблемы?

[Василий Варюхин]

thehighhomie, Ну проблемы то нет пока. Я не работал с фабрик, но вижу что он не дублирует объекты при повторном добавлении. Это первое. И второе. Я просто скопировал ваш код в функцию, а вам нужно немного изменить его. Я бы сделал watch, который следит за изменением массива объектов и синхронизирует это с fabric. Как то так.

[thehighhomie]

Василий Варюхин, ну я только что разобрал пример ваш, реактивность в нем вообще не используется - массив elems не изменяется, вы просто убрали мутацию... можете примерно набросать как вотч описать?

[Василий Варюхин]

thehighhomie, стоп. Как это не изменяется? Как вы отслеживаете?

[Василий Варюхин]

thehighhomie, а ну точно да) недокопировал. секунду

[thehighhomie]

Василий Варюхин, :D

[Василий Варюхин]

thehighhomie, Посмотрите

[Василий Варюхин]

thehighhomie, Теперь нужно переписать функцию рендер что бы синхронизировал элементы фабрик и вью. С фабрик не работал поэтому дальше без меня)

[Василий Варюхин]

thehighhomie, Помог? :)

[thehighhomie]

Василий Варюхин, да) спасибо вам) я благодарен очень) ниже 0xD34F дал самый короткий вариант)

Answer 2

[imhuman]

Сделай canvas отдельным компонентом с логикой отрисовки. А в родительском компоненте оставь логику добавления картинок и цикл с новым компонентом, в каждый из которых будешь передавать объект через props.
Типа такого

<template>
  <div>
    <CCanvas v-for="(item, index) in elems" :key="index" :t="item" />
    <span @click="onClick">Добавить элемент</span>
  </div>
</template>

Тогда и реактивность сохранится

на скорую руку https://codesandbox.io/s/3qrkqw17l5

Comments

[thehighhomie]

Понял что вы имеете ввиду, кроме того, что каждый раз, когда добавляется элемент, должен добавляться и новый канвас, но он не добавляется, это как? Я знаю, что vue оптимизирует DOM, но это по сути рендер списка, и канвас должен каждый раз добавляться новый, еще и ключ у каждого элемента списка разный (index).

Может просто в песочнице криво отображается, а на самом деле не в песочнице будет много элементов канваса?

[imhuman]

https://3qrkqw17l5.codesandbox.io/ Я ж дал ссылку, понажимайте на кнопку, каждый раз добавляется canvas. Только с размерами беда, но это не относится к задаче

[thehighhomie]

imhuman, это плохое решение, вы же видели у меня есть цельный канвас, который содержит внутри себя элементы. я вот что нашел https://github.com/sunyatasattva/vue-fabric что можете сказать о этой реализации?

Answer 3

[0xD34F]

Делать watch на elems. Код создания картинок вынести в метод, который дёргать в mounted и в watcher'е. Как-то так.

Comments

[thehighhomie]

круто, спасибо)

[thehighhomie]

можно еще у вас спросить по поводу компонентов, я видел такие решения и подобные https://github.com/purestart/vue-fabric

имеет ли смысл так заморачиваться?

[0xD34F]

thehighhomie, не знаю. Это вам решать - надо "заморачиваться" или нет.

[thehighhomie]

Здравствуйте! Вы не могли бы помочь мне в этом вопросе Удерживать один прямоугольник в границах другого, с одинаковым углом поворота?