jointjs | 易学教程

Text area in svg shapes

阅读更多关于 Text area in svg shapes

问题 Created a text area in svg using joint js. However, I am not able to enter any text in the text area. How to make the text area editable? Code: var graph = new joint.dia.Graph; var paper = new joint.dia.Paper({ el: $('#myholder'), width: 1500, height: 700, model: graph }); // Create a custom element. // ------------------------ joint.shapes.html = {}; joint.shapes.html.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, { markup: '<g class=

Joint.js add custom ports with path class. for custom elements

阅读更多关于 Joint.js add custom ports with path class. for custom elements

问题 What I am trying to do is make a element with custom class for ports and path so that I can add an element with custom path and my own markup for ports.This way when I create an element I will pass dynamic path for its shape just like elements of path class behave and as I have also extended from PortsModelInterface I will also have my own markup for ports. This whole effort is to make svg scalable for zomming. Previously I was using html custom element with my custom ports which was working

Error while fetching json from database

阅读更多关于 Error while fetching json from database

I am able to send data to db using the following: $("#set").click(function () { var cells = graph.getCell(); var StateObject = graph.toJSON(); var SavedState = JSON.stringify(StateObject); console.log("Here is the state object " + StateObject); console.log("Here is the saved state: " + SavedState); $.ajax({ url: 'JsonProcessor.do', type: 'post', dataType: 'json', data: { test: StateObject } }); }); But while fetching I get error in chrome console like this: Uncaught Error: Graph JSON must contain cells array Code to fetch data: $("#get").click(function () { $.ajax({ url: 'JsonProcessor.do',

How to give JointJS elements a remove tool?

阅读更多关于 How to give JointJS elements a remove tool?

In JointJS, links come with a handy responsive tool for removing links (when you hover over the link, an "x" appears, and clicking it removes the link). Elements, on the other hand, have a remove() method in the API, but don't have the UI "x" to expose that method to users. Is there a straightforward way to give users the ability to delete elements in the UI? In my project I define a custom shape - toolElement - that encapsulates this behaviour and then extend this with other custom shapes as required. Full disclosure: This technique leans heavily on the jointjs code for links - I just adapted

Error while fetching json from database

阅读更多关于 Error while fetching json from database

问题 I am able to send data to db using the following: $("#set").click(function () { var cells = graph.getCell(); var StateObject = graph.toJSON(); var SavedState = JSON.stringify(StateObject); console.log("Here is the state object " + StateObject); console.log("Here is the saved state: " + SavedState); $.ajax({ url: 'JsonProcessor.do', type: 'post', dataType: 'json', data: { test: StateObject } }); }); But while fetching I get error in chrome console like this: Uncaught Error: Graph JSON must

How to give JointJS elements a remove tool?

阅读更多关于 How to give JointJS elements a remove tool?

问题 In JointJS, links come with a handy responsive tool for removing links (when you hover over the link, an "x" appears, and clicking it removes the link). Elements, on the other hand, have a remove() method in the API, but don't have the UI "x" to expose that method to users. Is there a straightforward way to give users the ability to delete elements in the UI? 回答1: In my project I define a custom shape - toolElement - that encapsulates this behaviour and then extend this with other custom