Vue.js / как создать и поддерживать клон dom элемента?

Question

[tenaro]

есть div.scene, внутри которого много элементов, перетаскиваются, добавляются, удаляются
как сделать minimap этого блока, т.е ту же сцену, только в масштабе, чтобы она обновлялась при изменении оригинального блока?
пытался сохранить в картинку и работать с ней - не получается, у элементов внутри абсолютное позиционирование и сцена центруется с размерами 0x0px

Comments

[Антон Шаманов]

ты имеешь ввиду как сделать что-то вроде скриншота блока? или просто его уменьшенную копию?

Answer 1

[Aetae]

В firefox есть такая нестандартная фича как -moz-element, которая идеально подходит под задачу:
Увы, она никогда не станет стандартной, да и из ff её могут рано или поздно выпилить.

В остальном, решения, собственно, два:
1. Делать всю рабочую область на собственном canvas движке(можно попробовать что-то такое), и тогда просто получать копию холста на меньший canvas. Это более оптимально но требует переписывание всего и сложности основной работы.
2. Держать два идентичных компонента делящих одно состояние(на пример через внешний Vue.observable\reactive или vuex), один из которых уменьшать с помощью transform: scale().

html2canvas, предложенный выше, имеет очень ограниченную область применения и вряд ли тут сработает, но можете попробовать

P.S. Есть ещё один вариант: на любое обновление(тут поймать обновление в зависимости от вашей архитектуры может быть либо очень просто, либо очень сложно) делать верхнему компоненту тупо this.$el.cloneNode(true) и класть полученную копию в нужное место с тем же transform: scale(), но это может весьма сильно тормозить в зависимости от количества элементов и частоты обновления.

Comments

[tenaro]

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

[Aetae]

tenaro, ну тут многое зависит от модели всего этого добра. Если можно как-то её просеять и выкинуть из обработки всё что в результате размером будет меньше пикселя - это может помочь.
Ещё можно состояние второго компонента обновлять с троттлингом, если риалтайм там не критичен...

А так да, всё печально.

[Aetae]

tenaro, понимаю, что давно не актуально:), но для будущих поколений напишу(случайно мимо проходил и пришёл тут в голову ещё один вариант): использовать svg фильтр, накладывая его на всю рабочую область и рисуя с помощью него minimap через scale feDisplacementMap и feOffset. Вот накидал POC: Но он, увы, очень хрупкий, надо будет глубоко зарываться в спеки svg фильтров, чтоб потенциально заставить это работать как надо и всё равно контролировать позицию рисуемой миниатюры через js...