Using dojox gfx to enable a node to be draggable following retrieval of sgv data from a JSON source

Question

Using dojox gfx to enable a node to be draggable following retrieval of sgv data from a JSON source

I have a collection of shapes on a surface that I need to convert to JSON using the dojox.gfx.utils.toJson(surface) method. Once I have the JSON data, I then utilize

dojox.gfx.utils.fromJson(surface, json)

to append it back to the surface. However, I encountered an issue when trying to make a node moveable. Despite saving it to JSON and reappending it to the surface, the node loses its moveable functionality. I've been unable to find a solution to restore the moveability of the node post-loading. Is there a way to achieve this? My goal is to be able to save and load SVG data on my page while still being able to freely move the elements around. While working with Dojo seemed straightforward initially, this particular problem has complicated matters. If achieving this becomes too challenging with Dojo, are there any alternative libraries that could better suit my requirements?

Edit: For reference, here is the actual code snippet: http://pastebin.com/2qLCTw8B

javascript json svg dojo dojox.gfx

Answer 1

Answer №1

After some exploration, I managed to find the solution to my issue.

One key point I discovered is that when requiring a dojo module, it is beneficial to assign it to a variable, a practice I was unaware of before. This allows for easier usage of functions like 'on' which adds event listeners throughout the code. With this knowledge, creating a movable node upon click becomes a simple task.

However, it dawned on me that this process may be redundant since one could simply iterate over the surface's children array and make all nodes moveable.

For those interested, here is the refined version of the code: http://pastebin.com/wAvSnZpN

In case events are still preferred, below is the necessary code snippet:

function HandleMouseDown(e) {
    var foo = new dojox.gfx.Moveable(e.gfxTarget);
}

on(surface, 'mousedown', HandleMouseDown);

Answer 2

After some exploration, I managed to find the solution to my issue.

One key point I discovered is that when requiring a dojo module, it is beneficial to assign it to a variable, a practice I was unaware of before. This allows for easier usage of functions like 'on' which adds event listeners throughout the code. With this knowledge, creating a movable node upon click becomes a simple task.

However, it dawned on me that this process may be redundant since one could simply iterate over the surface's children array and make all nodes moveable.

For those interested, here is the refined version of the code: http://pastebin.com/wAvSnZpN

In case events are still preferred, below is the necessary code snippet:

function HandleMouseDown(e) {
    var foo = new dojox.gfx.Moveable(e.gfxTarget);
}

on(surface, 'mousedown', HandleMouseDown);

Using dojox gfx to enable a node to be draggable following retrieval of sgv data from a JSON source

Answer №1

Similar questions

Creating an array using Vue.js

Combining several files into a single variable to encode

JavaScript code that exhibits a sandwich pattern

What is the reason for the hotel's Object _id not being saved in MongoDB?

Ways to dynamically incorporate input fields into a form

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

Having trouble incorporating Duo Web SDK into angular application

Retrieve information using server-side rendering

The isInvalid property fails to apply red highlighting to the input box in a react-bootstrap form

What is the best way to pass multiple variables to PHP through an AngularJS Ajax request?

Synchronize all series in Highcharts charts simultaneously

Unable to modify variable to play audio

What is the process for saving the selected value from a radio button into the database?

Displaying Stats.js inside a different canvas using ThreeJS

Running an API and transferring Json data to S3, all the while transforming it into Avro format

Issue: Unhandled rejection TypeError: Unable to access properties of an undefined variable (retrieving 'data')

Every initial test with Protractor ends in failure

Why is there an error when trying to assign Type '{}' in generics typescript?

When using the HTML5 input type time in Chrome and the value is set to 00:00:00, it may not be fully completed

alter the JSON by removing certain data from its contents