Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

moveable-control-box misplaced when used with SVG elements

See original GitHub issue

Environments

Framework name: Angular
Framework version: 8.2.14
Moveable Component version: ngx-moveable 0.18.1

Description

I’m using MoveableJS to manipulate (translate, scale, rotate, …) SVG elements (path, text, rect …) in Angular project The problem is that the surrounded rectangle provided by moveableJS is misplaced (wrong width, height, and starting point).

Bellow is what I tried to do:

HTML

<div id='canvas' class="canvas mt-4 text-center align-self-center" (click)="canvasClicked($event)"
                    style="background-color: white; background-image: url(../../assets/svgs/canva-background.svg);">

    <svg version="1.2" baseProfile="tiny" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" xml:space="preserve">
        <text id="text" transform="matrix(1 0 0 1 31.1271 199.1222)" fill="#561010" font-family="'Roboto-Regular'" font-size="25.3945px">Nom d’entreprise</text>
        <g>
            <path transform="matrix(1 0 0 1 0 0)" fill="#000" d="M51.75,55.77c-0.27-0.39,3.97-5.2,10.38-7.74c1.79-0.71,11.97-4.75,21.31,0.8 c8.61,5.12,11.99,15.71,10.53,24.27c-2.38,13.95-17.76,23.37-22.24,20.72c-0.97-0.57-1.32-2.75-1.99-7.09 c-1.81-11.84-1.68-20.54-1.68-20.54c0.05-3.05,0.19-4.38-0.61-6.25c-1.42-3.32-4.9-6.23-8.62-6.47 C54.84,53.21,51.97,56.08,51.75,55.77z"></path>
        </g>
    </svg>
</div>
    <div class="label" style="z-index: 9999999;" #label></div>
    <ngx-moveable
        #moveable
        [target]="target"
        [draggable]="true"
        [scalable]="true"
        [origin]="true"
        [snappable]="true"
        [throttleResize]="0"
        [keepRatio]="true"
        (dragStart)="onDragStart($event)"
        (drag)="onDrag($event)"
        (scaleStart)="onScaleStart($event)"
        (scale)="onScale($event)"
        (scaleEnd)="onScaleEnd($event)"
    >
    </ngx-moveable>

TypeScript

@ViewChild("target", { static: false }) target;
@ViewChild("label", { static: false }) label: ElementRef;
@ViewChild("moveable", { static: false }) moveable: NgxMoveableComponent;

frame = {
    translate: [0, 0],
    scale: [1, 1],
};

onWindowReisze = () => {
    this.moveable.updateRect();
};

onDragStart({ set }) {
    let matrix = this.menuService.getElementMatrix(this.target);
    this.frame.translate = [Number(matrix.x) * this.alignmentService.rapport, Number(matrix.y) * this.alignmentService.rapport]
    set(this.frame.translate);
}
onDrag({ target, beforeTranslate, clientX, clientY }) {
    this.frame.translate = beforeTranslate;
    target.style.transform
        = `translate(${(beforeTranslate[0]/this.alignmentService.rapport)}px, ${(beforeTranslate[1]/this.alignmentService.rapport)}px)`;
}
onDragEnd({ target, isDrag}) {
    console.log("onDragEnd", target, isDrag);
}

onScaleStart({ set, dragStart }) {
    set(this.frame.scale);

    // If a drag event has already occurred, there is no dragStart.
    dragStart && dragStart.set(this.frame.translate);
}
onScale({ target, scale, drag }) {
  this.frame.scale = scale;
  // get drag event
      this.frame.translate = drag.beforeTranslate;
      target.style.transform
          = `translate(${drag.beforeTranslate[0]}px, ${drag.beforeTranslate[1]}px)`
          + `scale(${scale[0]}, ${scale[1]})`;
  }
onScaleEnd({ target, isDrag, clientX, clientY }) {
    console.log("onScaleEnd", target, isDrag);
}
async ngOnInit() {
    window.addEventListener("resize", this.onWindowReisze);
}

In the image below is a demonstration of the issue (i clicked on the leaf)