Make foreign object HTML elements draggable in the editor

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create an upload extension and upload a video file
2. After the upload, it will be saved in the DB
3. It will be showed in the svgcanvas

What is the expected output? What do you see instead?
- The HTML5 video tag will appear in the svgcanvas and become draggable.

In what browser did you experience this problem? (ALL, Firefox, Opera 10
Alpha, etc)
- All

Please provide any additional information below.
- I'm creating an authoring tool using the svgcanvas and adding an upload video 
functionality and make it draggable in the div svgcanvas. I can create a PHP 
code for uploading videos, save it in DB and I will use HTML5 as a video player.

But my problem is I can't make it draggable. Is there a function to make a div 
draggable with HTML5 video tag inside it?

Thanks in advance :)

Original issue reported on code.google.com by markn...@gmail.com on 15 Jun 2010 at 6:10

[GoogleCodeExporter]

Is this possible in version 2.5?

Original comment by markn...@gmail.com on 18 Jun 2010 at 9:48

[GoogleCodeExporter]

There is a foreignObject tool (an optional extension for 2.5) for inserting 
"foreign" content (HTML or MathML) in SVG. <foreignObject>s are draggable, 
rotatable etc,

Original comment by jacques....@gmail.com on 18 Jun 2010 at 1:00

[GoogleCodeExporter]

Ok thanks a lot jacques. I will try it :)

Original comment by markn...@gmail.com on 22 Jun 2010 at 3:37

[GoogleCodeExporter]

I tried the foreignObject extension but the borders when I click the element is 
not properly positioned in the created element.

How can I align it? Try it for yourself and see if it will align. Thanks :)

See the screenshot: http://i.imgur.com/NYKqL.jpg

Original comment by markn...@gmail.com on 22 Jun 2010 at 7:41

Attachments:

• svg_foreignObj.jpg

[GoogleCodeExporter]

What happens in Firefox?

I think what you are seeing is (at least in part) a webkit bug.

Original comment by jacques....@gmail.com on 22 Jun 2010 at 1:19

[GoogleCodeExporter]

The browser in the screenshot is Firefox. So it is a bug in webkit? Um is there 
a work around to fix that bug? Thanks for your reply jacques :)

Original comment by markn...@gmail.com on 23 Jun 2010 at 4:21

[GoogleCodeExporter]

Hi I updated to the latest version for firefox and the border in the 
foreignObject is correct now. However, I can't add a sample hard coded div. I 
opened the ext-foreignobject.js and in line 225 I added this to test if it will 
create a div:
mi.textContent = '<div style="border:1px solid red;padding:5px;">test div 
ito</div>';

But its not working and it inserted it as a text. How can I make it a div?

Thanks

Original comment by markn...@gmail.com on 2 Jul 2010 at 7:12

[GoogleCodeExporter]

I solved my problem by changing the code of the extension foreign object and 
doing jquery html() function. My only problem now is resizing the svgcanvas div 
in order for it to make smaller but I can't do it. Something is overiding the 
sizes and xy position.

Original comment by markn...@gmail.com on 13 Jul 2010 at 5:22

[GoogleCodeExporter]

marknt15 - Could you attach your modified extension so I can take a look at it?

Original comment by adeve...@gmail.com on 20 Jul 2010 at 2:05

• Changed title: Make foreign object HTML elements draggable in the editor
• Changed state: Accepted

[GoogleCodeExporter]

Hi adeveria. Sorry for the late reply. I attached my edited ext-foreignobject.js

There are some comments in code that I haven't cleaned up.

this code is found in the test_svg.php (the main file/editor code)

function do_me2() {
    $("#spirit").append($('<div></div>')
        .attr({ style : "border:1px solid red;" })
        .addClass("text")
//        .html('<img 
src="http://www.qlickcafe.com/blogs/wp-content/uploads/2010/01/slark.gif">')
        .html('<video src="html5_ogv.ogv" controls="true" />')
    );
}

Original comment by markn...@gmail.com on 27 Jul 2010 at 9:06

Attachments:

• ext-foreignobject.js

[GoogleCodeExporter]

I think this should be pretty easy to fix, just one question: How would you 
like the video to appear in the box that is drawn in the editor? Should it be a 
specific size or fill the box, regardless of how it's drawn? Or maybe keep the 
width and maintain its aspect ratio?

Original comment by adeve...@gmail.com on 27 Jul 2010 at 8:19

[GoogleCodeExporter]

Thanks for the reply. I would like to see it with a specific size. The video 
will be in HTML 5 video tag with .ogg or .mp4 source but I compared it in 
different browsers and it is not showing up in firefox. In google chrome the 
video tag runs fine.

But if I set a specific size to the video tag then what will happen if the user 
tries to resize it using its resizable border of the ext-foreignobject. I guess 
I will need to test it out.

Original comment by markn...@gmail.com on 29 Jul 2010 at 3:43

[GoogleCodeExporter]

could this be used to make floating, scalable tool boxes as well?

Original comment by dezigns...@gmail.com on 29 Jul 2010 at 4:34

[GoogleCodeExporter]

@dezigns333: What do you mean by tool boxes? Tool boxes inside the svgcanvas 
div?

Original comment by markn...@gmail.com on 29 Jul 2010 at 9:01

[GoogleCodeExporter]

marknt15 - If you'd prefer not to let the user be able to resize the element, 
you could have the selection box not include the resize grips. Let me see if I 
can get your extension to do something like that.

dezigns333 - I assume you're talking about making parts of the editor's 
interface draggable, that's quite different from what we're talking about here 
(which refers to an element in the actual document).

Original comment by adeve...@gmail.com on 29 Jul 2010 at 12:32

[GoogleCodeExporter]

understood - i'll start a new issue for that :)

Original comment by dezigns...@gmail.com on 29 Jul 2010 at 2:09

[GoogleCodeExporter]

Has the extension been fixed? This bug ought to really widen possibilities not 
only with video, but any canvas-like solution (not HTML5 canvas, I just mean 
the word generically where absolute positioning allowed flexible positioning of 
HTML). 

Could the outer document be allowed to be HTML and allow this to be implemented 
as draggable divs, so that older browsers could also benefit from such a tool? 

Some people might like HTML to be the root tag anyways, and although one might 
not be able to take advantage of most of the editor tools if limiting oneself 
for the sake of older browsers, the ability to drag text or other HTML anywhere 
around the page ought to come in handy as an alternative or complementary 
approach to the CKEditor normal text flow approach.

Original comment by bret...@gmail.com on 26 Apr 2011 at 2:30

[GoogleCodeExporter]

Has this issue been resolved? It's now 2013, and I am having the same problem 
with foreignObject being used to show MathJax. (The selection box displaying in 
the wrong place that is)

Original comment by gavin.si...@gmail.com on 21 Feb 2013 at 2:09