select and move multiple components

[badiuciprian]

Hi guys, is there a way to achieve this? I tried to implement a different approach but successfully failed:

1. select multiple components on click + ctrl
2. create a temporary div/component that can be moved and will append the selected components
3. on mouse release remove the temp div and drop the components inside to the new location on canvas
   i think this approach can be also used for grouping components.

I'm not a programmer so I tried putting pieces together and so far I have this, but obviously it is crap.

const selectedComponents = [];
let isDragging = false;
let offsetX, offsetY;
let wrapperComponent = null;
editor.on('component:selected', (component) => {
if (!selectedComponents.includes(component)) {
selectedComponents.push(component);
component.addStyle({ border: '2px solid blue' });
}
});
editor.on('component:deselected', (component) => {
const index = selectedComponents.indexOf(component);
if (index !== -1) {
selectedComponents.splice(index, 1);
component.addStyle({ border: 'none' });
}
});
editor.Canvas.getBody().addEventListener('mousedown', (event) => {
if (event.shiftKey) {
const clickedComponent = editor.getSelected();
if (clickedComponent && !selectedComponents.includes(clickedComponent)) {
selectedComponents.push(clickedComponent);
clickedComponent.addStyle({ border: '2px solid blue' });
}
isDragging = true;
offsetX = event.clientX;
offsetY = event.clientY;
}
});
editor.Canvas.getBody().addEventListener('mousemove', (event) => {
if (isDragging) {
if (!wrapperComponent) {
wrapperComponent = editor.DomComponents.addComponent({
tagName: 'div',
style: {
position: 'absolute',
left: ${selectedComponents[0].get('style').left},
top: ${selectedComponents[0].get('style').top},
},
});
selectedComponents.forEach((component) => {
wrapperComponent.get('components').add(component);
});
editor.getContainer().appendChild(wrapperComponent.view.el);
}
const dx = event.clientX - offsetX;
const dy = event.clientY - offsetY;
wrapperComponent.set('style', {
left: ${parseInt(wrapperComponent.getStyle().left) + dx}px,
top: ${parseInt(wrapperComponent.getStyle().top) + dy}px,
});
offsetX = event.clientX;
offsetY = event.clientY;
}
});
editor.Canvas.getBody().addEventListener('mouseup', () => {
isDragging = false;
if (wrapperComponent) {
wrapperComponent.remove();
wrapperComponent = null;
selectedComponents.forEach((component) => {
const componentStyle = component.get('style');
editor.setStyle(component, {
left: componentStyle.left,
top: componentStyle.top,
});
});
}
});

[lexoyo]

Hello
I don't read all your code but I think it does not make use of grapesjs api
What you are trying to do is quite simple but you need to use grapesjs api, not the browser api
You need to listen to selection change with editor.on (check the docs) and the create a component with editor too

[artf]

Not sure why you're reimplementing this, what is wrong with the current multiple selection?

[badiuciprian]

Hi Art, I'm using version 0.21.4, inside a rc-dock v 3.2.10 on Mac with dragMode absolute and multipleSelection: true, but multiple selection doesn't work completely. I see that if more components are clicked while holding ctrl(command) or shift the gjs-selected class is added to them but only the last one gets the tools and resize handlers on, and when dragging it from the move button in the tools all the selected components get the opacity:0.5 as if they are draggable, but only the last one moves.
I found little info about multiple selection in dragmode absolute so I assumed it is not working, and also I was trying to achieve by this a grouping behavior without using some predefind wrapper components. But obviously I failed.

[artf]

Yeah absolute drag mode was never released as a stable feature (that's why it was never documented) indeed here is the related issue.