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.

ForeignObject Support

See original GitHub issue

As the title suggest Foreign object support should be made possible. I have developed this piece of code to make elements inside foreign object movable By using a rect inside a g and then using the data from rect, apply that data on the foreign object elements. but its like in an ups and down state and buggy.

HTML:

<g x="100" y="100">
  <foreignObject x="100" y="100" width="200" height="200">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <video xmlns="http://www.w3.org/1999/xhtml" src="myvideo.mp4" width="100%" height="100%"></video>
    </body>
  </foreignObject>
  <rect id="id" data-original-id="myid" type="video" class="drag-svg" x="100" y="100" width="200" height="200" fill="red" fill-opacity="0"></rect>
</g>

JS:

// Subjx - additional draggable,resizable and rotatable functionality
function makeDraggableSubjx(element, controls, event, type = false, width = false, height = false) {
    let elm, x, y, rotate, trnf, controls_transform;
    if (type) {
        elm = $(element).prev();
    } else {
        elm = $(element).prev();
    }

    switch (event) {
        case 'init':
            trnf = $(controls).attr('transform');
            x = $(controls).find('rect').attr('x');
            y = $(controls).find('rect').attr('y');

            elm.attr({x: x, y: y, transform: trnf});
            break;
        case 'move':
            trnf = $(controls).attr('transform');
            x = $(controls).find('rect').attr('x');
            y = $(controls).find('rect').attr('y');

            // Set x & y position
            elm.attr({x: x, y: y, transform: trnf});
            break;

        case 'resize':
            trnf = $(controls).attr('transform');
            x = $(controls).find('rect').attr('x');
            y = $(controls).find('rect').attr('y');

            elm.attr({x: x, y: y, transform: trnf, width: width, height: height});
            break;

        case 'rotate':
            trnf = $(controls).attr('transform');
            x = $(controls).find('rect').attr('x');
            y = $(controls).find('rect').attr('y');

            let controls_rotate = SVG(controls).transform('rotate');
            elm.attr({x: x, y: y, transform: trnf, angle: controls_rotate});
            break;

        case 'drop':
            trnf = $(controls).attr('transform');
            x = $(controls).find('rect').attr('x');
            y = $(controls).find('rect').attr('y');

            // Set x & y position
            elm.attr({x: x, y: y, transform: trnf});
            break;
    }

    elm, x, y, rotate, trnf, controls_transform = null;
}

Registering the function inside move,edit,rotate etc.

  onInit(el) {
      switch ($(el).attr("type")) {
          case 'video':
              makeDraggableSubjx(el, this.controls, 'init');
              break;
      }
  },
  onMove({clientX, clientY, dx, dy, transform}) {
      switch ($(this.el).attr("type")) {
          case 'video':
              makeDraggableSubjx(this.el, this.controls, 'move');
              break;
      }
  },
  onResize({clientX, clientY, dx, dy, width, height}) {
      switch ($(this.el).attr("type")) {
          case 'video':
              makeDraggableSubjx(this.el, this.controls, 'resize', false, width, height);
              break;
      }
  },
  onRotate({clientX, clientY, delta, transform}) {
      switch ($(this.el).attr("type")) {
          case 'video':
              makeDraggableSubjx(this.el, this.controls, 'rotate');
              break;
      }
  },
  onDrop({clientX, clientY}) {
      switch ($(this.el).attr("type")) {
          case 'video':
              makeDraggableSubjx(this.el, this.controls, 'drop');
              break;
      }
  },

Looking for better implementation. Thanks for this beautiful plugin.

PLUS: using SVG.js plugin up there (for an aid to manuplate svg easily)

Issue Analytics

State:
Created 3 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

MR-AMDEVcommented, Mar 9, 2021

Thanks man for this support. Its working fine but there seems to be some bugs about that: The width and height of the rect and the foreign object doesn’t seems to fit in the svg-wrapper. It fits only when we resize the object to left.

But isn’t there any support for the foreignObject element directly? Like instead of creating a g and then creating inside of that foreignobject and a rect to aid?

1reaction

nichollascartercommented, Mar 9, 2021

@Abdulmanan0315 , please check this example .

Is this close to your expectations about foreign object support?