So I'm toying around with KineticJS and I'm having some problems with a button I'm making. All I want it to do is reset the positions of my objects when I click it.
I've created the button, set up the onclick handler to point to my function that I've created (and included in the HTML, along with my CSS), and I've gone through the KineticJS documentation for changing the position of it's objects, and have tried the following options:
object.setX(200);
object.setY(50);
object.setPosition(200,50);
All with no luck. I've attached a screenshot with all my relevant code (This is my first time playing as a web dev, please don't tear me up too much). The rest of the code in the middle column is just end tags for body/html/etc.
NOTE: I know the values are not what they were originally. I just threw in arbitrary numbers (still within the bounds of my canvas) to see if they'd change at all.
Thank you for any help!
Fullsize: http://i.imgur.com/aKbiI.png
You need to add layer.draw(); at the end of resetXY function
Related
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.
I'm projecting a calendar and, although a little bit familiar with PHP for the backend, I'm struggling with the front end which will be in Javascript.
I'm trying to keep things simple as I'm still in the learning process, so basically, the table is created using bootstrap/CSS and it shows the present weekdays from Monday to Sunday.
I'd like now to add some front end in order to draw the boxes when I click/drag the mouse over the cells. When done the script will save the start date/ end hour in a MySQL database.
The problem is, how can I draw those boxes?
Ways I was thinking how to do that:
Keep things simple: basically, I will not draw any boxes but simply color the background and the line of those cells selected on the even .onmousedown
Try the hard way: try something harder and better looking and explore better the world of libraries in JS. I was looking in JCanvas thing, but for my level, I still have to understand better how it works.
The problem then is how to pass the parameter of these boxes to a backend script that saves the start/end hour. Of course, I was thinking to give to every cell a specifical id with hour/date, so I think it'd be easy to recall them both for drawing the calendar event with the mouse and also to draw all the present events on the database when the table is loaded.
What can approach do you suggest me to take? Any input would be great!
Thank in advance
Luca!
PS: I'm not expecting full code or whatever, just doing some projects in order to learn more!
I think the first option will work great. Adding the background color and border on the selected cell will help in highlighting.
You'll also need some of the things listed below:
AJAX: To communicate with the back end script.
Events - Bubbling and Capturing: You don't really have to put the event on every cell but the whole table, you could capture the event target with event.target.
I'll try to describe what I'd like to have.
At the moment, I have custom control Desk with:
an Accordion Container (dojo)
several Accordion Panes, of which
one contains custom control Agenda
In custom control Agenda, there's nothing really special, expect for
custom control Tiles
In custom control Tiles, I display meeting info in a nice way, as tiles. There can be multiple tiles on one row. In order to make things looking perfect, I have to spread these tiles over the full line, justified, using CSS (that part works, 99%). What doesn't work is that when the accordion is hidden when the page loads, I have no details on the size of each tile so I can't do my calculations (i.e. offsetWidth==0).
So I have to delay the calculations to when the accordion is activated and onShow is triggered. But how to pass this on downwards, all the way to the custom control Tiles?
Tiles is used in other places too, so it cannot be a fixed reference. It doesn't even know that it's inside an accordion...
Question:
How can I call/trigger a function that's inside the Tiles custom control from the top custom control, Desk, in a transparent way?
NB A code example, even an illustrative one, would be very complicated to make (I think).
Could someone give me a push into the right direction? Events and triggers maybe? Pass accordion id down to the Tiles cc and then do something brilliant?
Thanks!!
I have a solution right now, but it isn't exactly a beautiful and transparent one.
I gave the Tiles a styleClass="Tiles", and then I can find these Tiles using getElementsByClassName. It's not the proper way, but it's a way, the pragmatic one.
I loaded individual STL structures into my 3-D viewer using three.js and I want to be able to click on individual structures in my 3-D viewer and a name tag appears onMouseClick or onMouseOver for that specific structure.
I think it has something to do with a coordinate point of that specific object or maybe just the total surface area of that object and then use a onMouseClick eventHandler to create a window but I'm not sure.
Is there any sample or open source code I can take a look at?
Thanks!!
Check any of the collision detection examples in the examples folder. Probably webgl_interactive_cubes.html is what you're after:
http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html
This will show you how to find which element is behind the mouse.
I also wrote a tutorial on picking objects with three.js if you want to know a bit more about how the thing works internally:
http://soledadpenades.com/articles/three-js-tutorials/object-picking/
Then --you already know where the mouse is from the mousemove or mouseclick event-- just create a span or something similar, and place it in that position with css's left and top properties, for example
I'm using x3d scene in a web page. In this page, I have an indexedfaceset which works fine.
I'm adding a <Color color="..."></Color> and it's working fine as well.
Now what I'm trying to do is to change the content of the Color using javascript once the scene is already drawn. Unfortunately the modifications aren't taken into account.
Do I have to force a redraw of the scene or something like that? I saw nothing on the runtime api of x3d.
Thanks
through x3dom?
if so check out my answer here. shows how to set attributes through both tag and id on js mouse events
i know your trying to change index face set color attribute but i think the below should give u a starting point. let me know if you need a more concise example
attaching attribute to x3dom object