Vue.js / how to create and maintain a clone of a dom element?

Question

JavaScript

there is a div.scene, inside of which there are many elements, dragged, added, removed
how to make a minimap of this block, i.e. the same scene, only on a scale so that it is updated when the original block changes?
I tried to save to a picture and work with it - it doesn't work, the elements inside have absolute positioning and the scene is centered with dimensions of 0x0px

Answer 1

There firefoxis such a non-standard feature as -moz-element, which is ideal for the task:
Alas, it will never become standard, and sooner or later it can be cut out of ff.
Otherwise, there are actually two solutions:
1. Make the entire workspace on your own canvasengine (you can try something like this ), and then just get a copy of the canvas on a smaller one canvas. This is more optimal but requires rewriting everything and the complexity of the main work.
2. Keep two identical components sharing the same state (for example, through the outer Vue.observable\ reactiveor vuex), one of which is reduced with transform: scale().
html2canvas, suggested above, has a very limited scope and is unlikely to work here, but you can try
PS There is another option: for any update (here it can be either very simple or very difficult to catch an update, depending on your architecture), make the upper component stupid and put the resulting copy in the right place with the same , but this can slow down quite a lot in depending on the number of elements and refresh rate. this.$el.cloneNode(true)transform: scale()