Copy/paste for multiple selected shapes

[uginy]

Hi guys!

Soon i must implement a feature for multiple shapes' selection and copy/paste them.
Could you advice an approach how to do this better?

Is it ok that I will do that this way:

1. Each selected (with shift + mouse click) shape will lead to adding an attribute to the rect, for example selectedShape = "true". Deselecting a shape will change the attribute to "false". Outside click will change all selectedShape attributes to "false"
2. CTRL+C will fire COPY_SHAPE event, then CTRL+V fires startDraw() and this.pasteBox({...}) method that will be executed in shapes.forEach... where shapes = Array.from(this.canvas.node.getElementsByClassName('cvat_canvas_shape'))
3. in that forEach i will check that the const isSelected = !!shape.getAttribute('shapeSelected');
4. And there i will execute moveShape(instance, shape.x?.baseVal?.value, shape.y?.baseVal?.value );

The problem:

• drag and drop multiple shapes.
• getting correct BBox props for each selected shape. Now I think to use shape.x?.baseVal?.value, ....
• possible performance issues
• not clear implementation.

I would be appreciated for any kind of help or advice.

[bsekachev]

Hi @uginy

They are great news! Just my thoughts:

Each selected (with shift + mouse click) shape will lead to adding an attribute to the rect, for example selectedShape = "true". Deselecting a shape will change the attribute to "false". Outside click will change all selectedShape attributes to "false"

From a user point of view, sounds ok. From development point of view, where will you store this flag? I can suggest storing it in Redux storage.. Maybe update concept of activated objects, allowing multiple activated objects. Anyway, changes are necessary in both cvat-ui and cvat-canvas.

CTRL+C will fire COPY_SHAPE event, then CTRL+V fires startDraw() and this.pasteBox({...}) method that will be executed in shapes.forEach... where shapes = Array.from(this.canvas.node.getElementsByClassName('cvat_canvas_shape'))

I think we should update copyShape action creator to be able to copy a lot of shapes at the same time (I don't see significant issues here). But I am not sure that pasting shapes one by one is what users expect when they copy/paste objects. Better when you paste objects, I think they all should be visible (with mouse cursor in the center). So, when you move cursor, all the shapes are moved in the way which left cursor in the center (allow initialState to be an array of objects in cvat-canvas (method draw), and update it's implementation correspondingly.

drag and drop multiple shapes.

I think when several objects selected and we move one of them, centers of other selected objects should be moved the same way (implementation in cvat-canvas module). I do not expect difficulties here. Also I believe if we change label/attribute/occluded/locked/pinned/visible of one of selected shapes, value should be applied to others. The same about propagation, changing orientation and resetting perspective, changing z order (to background, to foreground) features, delete and others. So, there are a lot of features and generally it is huge, but amazing feature. Of course, we do not expect everything from you side. To achieve the best, we should go step by step. Even feature of multiple copy/paste and dragging would be interesting for the first step.

One more question is about resizing, probably we should resize all selected shapes when a user expects it (for example when several bounding boxes selected). But again, I am not sure. Maybe somebody has other thoughts.

[uginy]

Hi! Thanks a lot for such detailed answer. I have already done that stuff, except moving and resizing multiple shapes. When I paste them, it pastes just with x, y offset and that is quite enough.

[Alonm89]

Hi, this is a great idea!
did you implemented this feature already?
can you please share your results?
Thanks!

[bsekachev]

Hi, there weren't related pull requests yet from the community.