I have a surface with some shapes. I use
dojox.gfx.utils.toJson(surface)
to generate a json from it, and then
dojox.gfx.utils.fromJson(surface, json)
to get the data and append it to the surface.
The problem comes when I create a moveable node. After saving it to json and then appending it to the surface, the node is no longer moveable. I found no way of making the node moveable again. Is there a way to do this?
I want to be able to save and load svg data in my page and after load, move the elements around. Using dojo seemed easy enough before i stumbled on this problem. If I can't do this easy, is there a better library I can use, to achieve my goal?
Edit: here is the actual code: http://pastebin.com/2qLCTw8B
I found the answer to my problem.
First of all, when you require a dojo module it is good to assign it to a variable, which i didn't know. This way when assigning the on module, you can use the on function, used to add event listener, anywhere in the code. From there it is easy to create a moveable node, when you click on it.
It seemed though that this is a useless operation, as you could just iterate over the surface - children array, and make every node moveable.
Here is the improved code: http://pastebin.com/wAvSnZpN
The code needed, if you decide to use events anyway:
function HandleMouseDown(e) {
var foo = new dojox.gfx.Moveable(e.gfxTarget);
}
on(surface, 'mousedown', HandleMouseDown);
Related
Recently I was looking for an framework that I can use together with jointjs. So far I tried react/angular/angular2.
I do wanna try out it with Cycle.js. But putting them together so 'old' stuff (jointjs) and cycle.js just overheads me. I know that I should create a driver to interact with jointjs. If someone can help me to get starter with simple example of joint(e.g.: http://www.jointjs.com/tutorial#hello-world) + cycle, that would be amazing.
Basic points that need to be included is:
JointJS required an container NODE element
Whenever users makes some changes (drag&drops elements around or resize them) it will broadcast an event. Something like this:
graph.on('all', function(eventName, cell) {
console.log(arguments);
});
A line graph is necessary for the purpose of my extension in an web game online.
I want to do something like this:
The intention is that this graph should be OUTSIDE of the DOM/browser, because if I put this inside the game document, they will know that this line has been put into the DOM with a simple call $("#rareLineGraph").length > 0 and they will detect it, and they should not know.
I tried it with frames, but are very uncomfortable (windows)
Some suggestions please ?. Thank you very much
You can in principle draw outside the browser with a separate program operated via Native Messaging, but that would be quite difficult and over-complicated. That is, however, the only approach that fully corresponds to your requirements.
As a suggestion, you can hide your graph from such a simple inspection by using a random ID, or even skipping using an ID and just keeping a reference to the created element in a variable. Also, inserting your node into random places in the document structure and using absolute positioning will obfuscate it further. It will be harder (but not impossible) to detect.
Other than that, I don't think there are many ideas that can help. Chrome renderer looks only at the DOM, and there's no API to create any kind of overlay. DOM can be hidden from the outer document with Shadow DOM techniques, but as far as I know the shadow root element will still be visible to the page.
I'm looking at Rangy (http://code.google.com/p/rangy/) and it seems it has a bunch of DOM utilities but I don't understand them without examples. So I'm turning to SO with my ideas and hopefully you guys can show me how this can be done:
What I need to do with Rangy is use it to find the position and dimensions of the selection. I want to get the frame or Rect of the selection, whether relative to the document or parent element. Then I can position my callout accordingly.
I believe the demo that comes with Rangy already illustrates what you want. specifically http://rangy.googlecode.com/svn/trunk/demos/position.html inside showSelectionPosition function
Considering the fact that selection may be spread across multiple elements, it'd be best to use the coordinates of either startSelEl or endSelEl to anchor your callout to the beginning or end of a selection.
There is an embryonic, unreleased Rangy module I wrote for getting pixel coordinates of a selection or range. Unfortunately the difficulty of getting this working properly in all browsers and all situations has put me off completing it and I have essentially abandoned it. However, if you add a bit more detail about what you're trying to do I may be able to suggest something.
I have some objects inside of svg that can be clicked by user.
Is there any way to:
- send information about object (id) that was clicked by user to the 'main html document'?
- draw from outside document in the svg file.
Probably, my description is unclear,... I want to implement something like this:
user click on any object inside of svg-image;
main document will receive id of the clicked object and:
display some information about that object;
draw additional object inside of the svg-image.
Questions: how to communication from svg to document and from document to svg?
Thanks a lot, any thoughts are welcome!
P.S. Probably SVG is not the best way do that? What is better then?
EDIT: I saw recommendation regarding use of Raphael,.. but I would like to see 'native' options. (For now I'm analyzing Raphaels implementation to see that, but don't think it is doing exactly what I need).
See this example for how to get the DOM of a referenced svg from the parent document.
And here's an example of how you can call from an svg file to the parent document.
SVG is very well suited for doing what you describe.
I'd suggest using a library like Raphaël to support your SVG building. You can attach events to DOM objects that you can get through the node property of an image component.
Raphaël.js is indeed a good solution if you want to stick to SVG / VML. Now you can use canvas (new HTML 5 functionality) as well. Canvas is a new html tag (that can have id, events, ...) that allows you to draw free shapes a bit like SVG does. IE doesn't support canvas natively, of course, and you will need "excanvas.js" (this one or another, but this one works pretty well...) to make it IE compatible.
Only one restriction I know of regarding canvas: using background images makes IE be very slow. I would use Raphaël.js if it was something you'd consider doing.
Good luck
Nobody suggested, but accidentally I've found that svg is already supported by jQuery!
http://plugins.jquery.com/project/svg
Probably that is not the best approach, but I will try to work with svg using jquery. And actually, that seems like reasonable
First off, I use the term "classes" to mean functions with prototypes that might be in a separate file from the main initializing file for what I'm working on.
Now for my question/issue:
I'm working on building something in JavaScript/HTML5, and trying to program it "properly" (ie. using prototypes with formats that are, I hope, standard). In my main JavaScript file, I have methods that have create use an instance (basically the root instance of my OOP/prototype based script) that sets up the canvas.
I also have another file that is loaded which contains a 'class' for creating clickable buttons. As of right now, I'm just trying to get the buttons to draw on the canvas, however, I can't access the instance of the canvas because I believe the instance is out of scope (which is fine, I don't want everything I do to contain a long dot-notation for referencing instances). However, this is giving me trouble when trying to draw a rectangle on the canvas, considering the 'class' the button is in, isn't able to reference the context outside of it.
I found a way around this by using something along the lines of:
function CreateButton(btn_x, btn_y, btn_width, btn_height, btn_txt) {
// ... (check and define parameters)
CreateButton.prototype.custom_canvas = document.getElementById('root_canvas');
CreateButton.prototype.ctxt = this.custom_canvas.getContext('2d');
CreateButton.prototype.ctxt.fillStyle = '#666666';
CreateButton.prototype.ctxt.fillRect(this.x, this.y, this.width, this.height);
}
Basically, it's writing on top of the canvas with a canvas of the same name? I'd assume that I can still manipulate the regular canvas afterwards and it would just act as if it was a single canvas element. I worried that redrawing on the canvas might use up a lot of memory when many things are added, however, no matter the method, writing on top of the canvas can't be avoided (even when in the same scope).
Any suggestions, or help? Or is my method of using the same canvas within a different class acceptable?
Thanks for any feedback.
[UPDATE]
Hmm, maybe I should try passing the context as a parameter and just using that.
...Or should I just make the canvas a global object? Any suggestions?
I guess you could try to implement some sort of "WidgetManager" that retains reference to canvas and your widgets. It will use a callback mechanism to render widgets. Each widget (ie. in this case Button) will have certain kind of rendering states (pressed, released) and some kind of internal state. Other widgets might have more complicated states.
Note that "WidgetManager" should probably keep track of widget "z" and user presses (which widget was hit). Based on this it should be able to trigger handlers bound to widgets. In a way you have to reinvent what basic UI libs do already. :)
I think you are better off by working out your design this way before moving into the implementation phase. A lot depends on what you really want to with it. :)
Note that you can simplify rendering and checks a lot by using multiple canvasii instead of just one. In this case you'll have to deal with z-index and absolute positioning but at least you get to piggyback on some of the existing stuff without having to implement it yourself.