Develop Reference

How to create a line connection mxGraph

I am trying to create a line connection on click an image icon, I have tried the same using the wires.html example. But it is not working. I am using react with mxGraph. How to implement this. Is there any way to achieve this.
mxEvent.addGestureListeners(
img,
mxUtils.bind(this, function(evt) {
mxConnectionHandler.prototype.isStartEvent = function(me) {
console.log("Here we have to start the line connection");
};
})
);
I have to start the line connection inside the bind event. Is there anyway to fix this. I have tried but none of them is working.
I really need help.
In the image Arrow Connection (Multiple points are not supported. Used for directly connecting source to target) is working properly. But need to implement Line Connection (Multiple points are supported. Starting from source we can click any where to create multiple points till the target connection).
Please check the below URL for example
Demo URL: http://jithin.com/javascript/examples/contexticons.html
Source Code URL: https://jsfiddle.net/fs1ox2kt/
In the Demo URL, when click on a cell 4 icons will be displaying (Delete, Resize, Move, Connect). I have replaced Delete with Line Connection and Resize with Arrow Connection. Please have a look.

I am not sure I understand your question correctly, so I am answering to some possible ones:
I found the hello world example very helpful for understanding how to write code which allows to create and modify nodes and connections using mxGraph.
Your tags suggest that you are using React. Interestingly, you are not mentioning Redux-Saga as library. If you are not using it yet, you might want to have a look at the concept of reducers.
Your question might also be about the specific behavior of a mxGraph line connection:
when I click on the line connection hover icon it does not start from the cell.
When looking at the workflow example, I do not see any hover icon when I want to draw a line or connection from a task box to another. I remember vividly that it took me a while to figure out that you have to click on the source box, hold, and drag onto the target box.
If your question is more about hover icons, you have already another (unanswered) question on that: adding connection handler on click hover icon not working mxGraph
EDIT: I finally understood that the icons in your figure are the hover icons, so there is a 5th interpretation of your question:
Problem description: The user clicks on the orange box with the microchip-icon then some pop-up menu (your hover-icons) appear, and then the user should choose a line type by clicking on on of the items. The endpoint of the respective line should still be the task box the user selected initially.
Solution sketch: Already in the initial onClick-event, you should populate a variable final_vertex with the coordinates of the box with the micro-chip icon containing the coordinates of the click, or the respective vertex - your box. When drawing the chosen connection, you have to make sure to choose this final_vertex as end-point, and the box with the lambda-icon as initial vertex. In other words, you need at least two events - the initial onClick and an onHoverItemClick. I am not too familiar with mxGraph, but I assume you cannot solve the issue with a single event-handler.

SlickGrid, copy text from Tooltip using AutoTooltips plugin

I use objects as the data for my grid. These objects contain a text value as well as an arbitrary amount of issues.
The text is displayed in the cell and the issue-messages are displayed as a tooltip via the AutoTooltips plugin for each cell. This works fine so far.
My problem: I want to copy text from the tooltip. However: the tooltip disappears as soon as the mouse leaves the cell and I can't figure out how to keep the tooltip 'active' long enough (e.g. as long as the mouse moves towards it) to enter the tooltip and copy text from it. Is there a way to achieve this using the AutoTooltips plugin?

The AutoTooltips plugin only adds the property title. You have to either change the code behind or add another library/scripts that generate tooltip and allows to copy text.
Check http://jquerytools.github.io/demos/tooltip/index.html.
To implement it, just add the code $(grid_container).tooltip() after the grid/rows are rendered.

Making ng-donut clickable AngularJs

I am pretty new to this. I am using https://github.com/Wildhoney/ngDonut to create donut on my website. I am able to get it up and running now my next step is to make it clickable. Lets take this example http://ng-donut.herokuapp.com/
Suppose if I want to make it in a way when a user click on the donut partition the it becomes highlighted with corresponding row on the left hand side pane. I am not sure how to achieve it.
Can anyone throw some light on it?
Thanks in advance.

If you don't want to fork and modify the project they have https://github.com/Wildhoney/ngDonut#mouse-events
Using the click handler and the model object I imagine you can find the corresponding row and set a property on it that causes it to be highlighted (ng-class). For the pie itself to highlight you may be able to make use of the colours property mentioned in the README.md there.
If that doesn't work out would need to fork the project and take a look at where it's using those colours to draw the pie with D3 and have it modify them based on the last one that was clicked on.

Change tiered list item color without disabling javascript?

For a resume project, I made a tiered list to display various items. I found some JavaScript code that allows me to click on the top item of the list and it expands and collapses the list. To make it more easily seen, I tried to create a hover property so that it would change colors, but the only way to do this that I could find is to make a around the text that I wanted to change, rather than using the because it would change the color of EVERYTHING in the list. By doing it with the tags, it disabled my JavaScript and the list items didn't expand or contract anymore. The only thing that I can do now is simply change the overall color but that isn't what I want. Please help!
The code with the links changed colors and the JavaScript works: http://pages.iu.edu/~dandfox/HELP/p1-final-h5c2.html
The code with the links hovering, but JavaScript doesn't work: http://pages.iu.edu/~dandfox/HELP/p1-final-h5c3.html
I wish to make the hovering links work WITH the JavaScript. Thank you!

Writing first Chrome extension and trying to perfom action based on selected text

I'm learning how to write a Chrome extension and have implemented a simple plugin described at : http://developer.chrome.com/extensions/getstarted
The plugin I'm attempting to write needs to perform provide an option to perform based on text the user has highlighted within the page. Can point me in the direction of how to achieve this as I cannot seem to find documentation. So for example in below screen shot the selected text by user (the text is selected by using mouse to drag over text) is greyed out :
So if user right clicks on selected text an extra option is displayed which performs an action based on selected text.
Can provide tutorials/or any points on how to implement this functionality ?

Take a look at this answer for an example of how to get text selection back to your background page, https://stackoverflow.com/a/2645306/897414

Here goes the related API you wanted: https://developer.chrome.com/extensions/contextMenus