I'm using jointjs to draw graphs.
I'm wondering how to listen to the mouse click event on an element?
I found on http://www.jointjs.com/api#joint.dia.Element, there is only change:position option but no onclick option lol.
There's only cell:pointerclick option on the whole paper instead of the single element.
How can I achieve only listen to mouse click element on the single element? (Say I want to resize the paper after the click)
Thanks!
You can use the pointerclick event to capture the click events on elements. The view is passed as a parameter to the function and you can obtain the model of the view through cellView.model
paper.on('cell:pointerclick', function (cellView) {
// your logic goes here
);
A way to do that it's using classes and javascript events, look:
First, you assign a class to the joint js element via markup , for example a class called 'myclass' in this case:
var rect1 = new joint.shapes.basic.Rect({
markup: '<g class="rotatable"><g class="scalable"><image id="myrect1" class="myclass"/></g><text/></g>',
size: { width: 30, height: 73.2 },
attrs: {
rect: { fill: bgcolor1,'stroke-width': 0 },
}
});
Then, you capture the click event on that class objects via javascript, not in the canvas but in the document :
$(document).on('click', '.myclass', function () {
//alert('yayy!');
});
Hope it helps !
you need to listen on view not on the model. Trace all caught events on the element:
var a = new joint.shapes.basic.Rect({
size: { width: 100, height: 100 },
position: { x: 300, y: 300 }
}).addTo(graph);
paper.findViewByModel(a).on('all', function() {
console.log(arguments);
});
https://jsfiddle.net/vtalas/0z6jyq70/
Related
This question already has answers here:
How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?
(6 answers)
Closed last year.
I'm trying to puzzle out the event dispatching in Javascript.
The example below uses Fabricjs library.
AS IS: if we mouseover the redBox, it becomes black.
TO BE: I'm trying to invoke the redBox mouseover event from greyBox mouseover event.
So if we mouseover the greyBox, it must work as if we mousever the redBox.
As a result the redBox must become black.
But I don't understand what to write instead of interrogation mark.
var greyBox = new fabric.Rect({
fill: 'grey',
width: 100,
height: 100
});
var redBox = new fabric.Rect({
left:300,
top:300,
fill: 'red',
width: 100,
height: 100
});
function createCanvas(id){
canvas = new fabric.Canvas(id);
canvas.add(greyBox);
canvas.add(redBox);
redBox.on("mouseover", function(e){
redBox.set({fill: 'black'});
})
greyBox.on("mouseover", function(e){
// ????
})
return canvas;
}
You could move the logic to a separate function and invoke it when necessary:
const makeRedBoxBlack = () => redBox.set({fill: 'black'});
redBox.on("mouseover", makeRedBoxBlack);
greyBox.on("mouseover", makeRedBoxBlack);
You only have to add that red box set statement, so it should something like :-
greyBox.on("mouseover", function(e){
redBox.set({fill: 'black'});
})
While using konva I am using a button to add a shape multiple times on to my Stage
using something similar to
document.getElementById('Rect').addEventListener( "click" , function () {
let layer = new Konva.Layer();
let item = new Konva.Rect({
x: 20,
y: 20,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true,
});
This appends a rectangle shape, if clicked multiple times it also appends extra shapes
I want to provide user with an option of deleting a particular shape that he wishes to delete with a button.
I tried to use context Menu tutorial available at Konva Tutorials but when implementing the delete function available there
document.getElementById('delete-button').addEventListener('click', () => {
currentShape.destroy();
layer.draw();
});
It is unable to delete the transformer layer added to the shape
document.getElementById('delete-button').addEventListener('click', () => {
tr.detach();
currentShape.destroy();
layer.draw();
});
I tried to detach the transformer / hide it but it removes it from all available instances of the shape
How can I solve this problem, Thanks a lot !!
You are adding a new click event listener for the "delete" button INSIDE click event of "add" button. That means every time you click on "delete" ALL listeners will be triggered. That removes all transformers.
Instead, you need just add a click listener once and find active Transformer manually to delete it.
document.getElementById('delete-button').addEventListener('click', () => {
const tr = layer.find('Transformer').toArray().find(tr => tr.nodes()[0] === currentShape);
tr.destroy();
currentShape.destroy();
layer.draw();
});
https://codepen.io/lavrton/pen/VweKqrp?editors=0010
I've been using JointJS for a while now and I'm trying to create an HTML template for my elements. So I've been using the tutorial but it didn't quit do it for me.
The thing I'm trying to accomplish is to adjust the color of the HTML element when an action has been performed, like double clicking the element. I did notice the way that the text is changed in the tutorial, but there is no example of changing any colors.
Edit
I've tried this to get a starting color on the element:
joint.shapes.html = {};
joint.shapes.html.OdinElement = joint.shapes.basic.Rect.extend({
defaults: joint.util.deepSupplement({
type: 'html.Element',
attrs: {
rect: { stroke: 'none', 'fill-opacity': 0 }
}
}, joint.shapes.basic.Rect.prototype.defaults)
});
// Create a custom view for that element that displays an HTML div above it.
// -------------------------------------------------------------------------
joint.shapes.html.OdinElementView = joint.dia.ElementView.extend({
template: [
'<div class="html-element">',
'<button class="delete">x</button>',
'<label></label>',
'<span></span>', '<br/>',
'</div>'
].join(''),
initialize: function() {
_.bindAll(this, 'updateBox');
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
this.$box = $(_.template(this.template)());
this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
// Update the box position whenever the underlying model changes.
this.model.on('change', this.updateBox, this);
// Remove the box when the model gets removed from the graph.
this.model.on('remove', this.removeBox, this);
this.updateBox();
},
render: function() {
joint.dia.ElementView.prototype.render.apply(this, arguments);
this.paper.$el.prepend(this.$box);
this.updateBox();
return this;
},
updateBox: function() {
// Set the position and dimension of the box so that it covers the JointJS element.
var bbox = this.model.getBBox();
// Example of updating the HTML with a data stored in the cell model.
this.$box.find('label').text(this.model.get('label'));
this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)', background: this.model.get('color')}); // I've tried to add it like a background
},
removeBox: function(evt) {
this.$box.remove();
}
});
//add a new element like this
new joint.shapes.html.OdinElement({
position: { x: 80, y: 80 },
size: { width: 200, height: 50 },
label: 'label',
color: '#ff0000'
});
I've also tried to set it like the text is set in the label, but I've no idea if there is a function for that.
Does anyone have any idea how to do this?
Thanks a lot!
Tim
I found the answer myself!
Apparently it is not allowed to create a different element in the html variable than the given Element. So I had to change the joint.shapes.html.OdinElement to joint.shapes.html.Element and the joint.shapes.html.OdinElementView to joint.shapes.html.ElementView
Now it works all fine :)
Thanks for your help!
We are working with software supplied by a third party, and we are not allowed to modify it, can use only overrides.
I would like to create a new button and overlay it on top of a text input so that they are close together.
I'm having trouble getting the overlay to align, instead it appears top left on the screen. So of course it doesn't align to the text input. Sample code is below, in this case implemented in the view initComponent override after this.callParent([]); is called.
var viewport = Ext.ComponentQuery.query('viewport')[0];
var overlay = viewport.add({
xtype: 'panel',
fullscreen: true,
left: 0,
top: 0,
width: 120,
height: 40,
items:[{
xtype: 'button',
text: 'Find Address',
handler: function() {
alert('Got it!');
}
}],
styleHtmlContent: true
});
var textField = this.query('*[itemId=textField]')[0];
overlay.showBy(textField, 'c-c?');
I've tried using floating: true and lots of other approaches.
Once I get it to position properly, is there a way to have the button respond to tab order correctly? That is, tab out of the text field, then have the button get focus?
As I understand from your question, you have trouble with setting position to a component. If it is the problem, you can set xy coordinate. Look at this fiddle:
https://fiddle.sencha.com/#fiddle/tpl
viewport.down('#idOverlay').setXY([150, 140]);
Edit:
Ext.define('OverriddenViewport', {
override: 'ExampleViewPort',
initComponent: function() {
// Set up first
this.callParent([]);
this.add(overlay);
this.addListener('afterrender', function(viewport) {
viewport.down('#idOverlay').setXY([220,50]);
viewport.down('#idButton').addListener('blur', function(button) {
viewport.down('#idTextfield').focus();
console.log('textfield is focussed');
});
viewport.down('#idTextfield').addListener('blur', function(button) {
viewport.down('#idButton').focus();
console.log('button is focussed');
});
});
}
});
If you can access the source (just to look around) you maybe can create an override of the corresponding class. Create a override, and copy all of the code of the class (form?) into your override.
Here some additional info about creating overrides in ExtJs:
http://moduscreate.com/writing-ext-js-overrides/
https://sencha.guru/2014/12/04/abstract-vs-override/
In your override create a trigger (on the field you want to expand) with your functionality:
{
fieldLabel: 'My Custom Field',
triggers: {
foo: {
cls: 'my-foo-trigger',
handler: function() {
console.log('foo trigger clicked');
}
}
}
}
I have worked with JointJS now for a while, managing to create elements with HTML in them.
However, I am stuck with another problem, is it possible to place HTML code, like
href, img etc, on a JointJS link and how do I do this?
For example, if I have this link, how do I modify it to contain HTML:
var link = new joint.dia.Link({
source: { id: sourceId },
target: { id: targetId },
attrs: {
'.connection': { 'stroke-width': 3, stroke: '#000000' }
}
});
Thank you!
JointJS doesn't have a direct support for HTML in links. However, it is possible to do with a little bit of JointJS trickery:
// Update position of our HTML whenever source/target or vertices of our link change:
link.on('change:source change:target change:vertices', function() { updateHTMLPosition(link, $html) });
// Update position of our HTML whenever a position of an element in the graph changes:
graph.on('change:position', function() { updateHTMLPosition(link, $html) });
var $html = $('<ul><li>one</li><li>two</li></ul>');
$html.css({ position: 'absolute' }).appendTo(paper.el);
// Function for updating position of our HTML list.
function updateHTMLPosition(link, $html) {
var linkView = paper.findViewByModel(link);
var connectionEl = linkView.$('.connection')[0];
var connectionLength = connectionEl.getTotalLength();
// Position our HTML to the middle of the link.
var position = connectionEl.getPointAtLength(connectionLength/2);
$html.css({ left: position.x, top: position.y });
}
Bit of an old question, but thought I'd add some more ideas. You can add extra svg markup to the label in a link if you like by extending the link object and then setting attributes where needed. For example:
joint.shapes.custom.Link = joint.dia.Link.extend({
labelMarkup: '<g class="label"><rect /><text /></g>'
});
This code overrides the markup for the label, so you can add extra elements in there. You can also update attributes on these elements by:
link.attr('text/text', "new text");
However hyperlinks won't work (at least I haven't got them working in Chrome) and I believe this is because Jointjs listens for all events in the model. So what you should do is use inbuilt events in Jointjs to listen for connection clicks:
paper.on('cell:pointerclick', function(cellView, evt, x, y){
console.log(cellView);
});