I created a hyperlink element by jointjs. Now, I want to call a function from this element.
My Code is here:
new joint.shapes.custom.ElementLabelLink({
id: node.id.toString(),
size: { width: width, height: height },
attrs: {
a: { 'xlink:href': 'https://www.google.co.in', 'xlink:show': 'new', cursor: 'pointer''},
text: {
text: formattedNodeName,
'font-size': letterSize,
'font-family': 'Inspira',
'x-alignment': 'middle'},
rect: {
width: width, height: height,
rx: 5, ry: 5,
stroke: '#555',
fill: 'lightgreen'
}
}
});
In this code, what I have to add or there is some other way.
What I am trying to do, this is feasible or not?
I got a solution for my query. I am posting answer here; by which someone can get help. No need to do anything with Element or Link.
Just executed an event on paper div.
Here is the code:
paper.on('cell:pointerdblclick',function(cellView, evt, x, y) {
demo();
});
function demo(){
alert("1");
}
I am doing too many things inside pointerdblclick event call. Here is the idea by which some one can get help.
Related
I’m developing an app that creates pdfs automatically. Using the pdfmake, I can create the pdf easily but I can’t find anywhere how to put a background on the pdf. I found how to put images as a background but I can’t find how to put a solid color.
var docDefinition = {
pageSize: 'A3',
content: [{
text: $globals.mural.name,
style: 'header'
}, {
image: uri,
width: size.width,
height: size.height,
margin: size.margin,
alignment: 'center',
}],
styles: {
header: {
alignment: 'center',
fontSize: '70',
font: 'LaneNarrow',
color: $globals.mural.layout.textColor
}
}
};
As of now pdfMake doesn't seem to support directly adding background color to main content. For this one approach is to use the canvas method.
In doc defination you need to add
background: function () {
return {
canvas: PdfOrderUtilities.getCanvas()
};
},
//The actual function
public static getCanvas() {
return [
{
type: 'rect',
x: 0, y: 0, w: 600, h: 840,
//The background color
color: '#F4F6F9'
}
]
}
So I recently found a neat tool called Patternizer (maybe you've heard of it) which has an easy to use interface that creates patterns, which you can then instantly get the code for and use along with their js library.
So to properly use the library and the given code it requires a canvas element, so to make things easy I took their example element and id: <canvas id="bgCanvas"></canvas> and put that right after my header end tag.
The javascript for the simple pattern I created is:
bgCanvas.patternizer({
stripes : [
{
color: '#000000',
rotation: 315,
opacity: 50,
mode: 'normal',
width: 3,
gap: 98,
offset: 123
},
{
color: '#000000',
rotation: 45,
opacity: 50,
mode: 'normal',
width: 3,
gap: 98,
offset: 123
},
{
color: '#0d050a',
rotation: 25,
opacity: 60,
mode: 'normal',
width: 100,
gap: 100,
offset: 156
},
{
color: '#0d050a',
rotation: 335,
opacity: 60,
mode: 'normal',
width: 100,
gap: 100,
offset: 156
}
],
bg : '#231d1d'
});
Now. It works, however I noticed the canvas element is extremely small:
As you can see, the canvas (in the top left) is much too small. So my first instinct was to change it's CSS to: canvas {width: 100%; height: 100%; to which I further added: z-index: -1;position:absolute;}
however heres what I got next:
As you can see the canvas is much bigger, however, the pattern has simply blown up and loses it's previous scale and quality. Is there a simple fix to this in CSS I'm missing? Please help!
Thanks,
-- micoxion
I think you need to specify the canvas height and width in the html of the element like stated on the patternizer docs.
https://info.patternizer.com/docs/
If what you need is a nice simple pattern i would recommend using a CSS only solution like the one found on http://lea.verou.me/css3patterns/
Using js and a canvas for this is too much trouble.
EDIT: If you are using those patterns i recommend passing the code through https://autoprefixer.github.io so it has the correct prefixes and works in all browsers.
You can learn more about css patterns and techniques at https://css-tricks.com/stripes-css/
it's me again with a new noobish question. I have the following Blessed for NodeJS variable:
var box = blessed.box({
width: '100%',
height: 1,
content: someContent,
tags: true,
style: {
fg: 'white',
bg: 'magenta',
hover: {
bg: 'green'
}
}
});
I will be creating multiple of these, and it wouldn't be optimal to declare each one, so I think a class would be perfect. What confuses me is the blessed.box thing. I don't know how to implement it into a class.
How can I create a reusable class with the above parameters? Thanks.
EDIT:
Okay, I figured out how to reuse the above variable - it's just a matter of adding it in a function:
function createBox (content, top) {
var box = blessed.box({
width: '100%',
height: 1,
top: top,
content: content,
tags: true,
style: {
fg: 'white',
bg: 'magenta',
hover: {
bg: 'green'
}
}
});
screen.append(box);
box.on('click', function(data) {
box.setContent('{center}Some different {red-fg}content{/red-fg}.{/center}');
screen.render();
});
};
This function can then be called any number of times:
createBox('someContent', 1);
createBox('someContent', 2);
Sorry for asking before thinking it through. Turned out to be easy.
I am not 100% sure I understand your question. It feels like you want to know how to implement above in a class syntax. Which in any case is just syntactic sugar from es15. Hope this helps. I am using the spread operator for passed options.
class Blessed {
constructor(...options) {
this.width = options.width;
//... the rest of your properties here
}
}
const box = new Blessed({
width: '100%',
height: 1,
content: someContent,
tags: true,
style: {
fg: 'white',
bg: 'magenta',
hover: {
bg: 'green'
}
}
});
I am using jointJS for my academic project, I have such a question, How an element accesses position, inPorts, outPorts?
For example, we create an element like this,
var m1 = new joint.shapes.devs.Model({
position: { x: 50, y: 50 },
size: { width: 90, height: 90 },
inPorts: ['in1','in2'],
outPorts: ['out'],
attrs: {
'.label': { text: 'Model', 'ref-x': .4, 'ref-y': .2 },
rect: { fill: '#2ECC71' },
'.inPorts circle': { fill: '#16A085' },
'.outPorts circle': { fill: '#E74C3C' }
}
});
graph.addCell(m1);
I want to get position and inPorts from m1, I have tried m1( 'position' )
and m1.position()
, but it didn't work.
Can someone solve this problem? Thank you in advance.
You can use m1.get('position') and m1.get('inPorts'). You could also use m1.prop('position') and m1.prop('inPorts'). The difference is that get(property) is only for accessing flat properties while prop(path) is able to get nested properties as well (e.g. m1.prop('attrs/rect/fill').
I have a button in my highcharts chart that uses the following code:
exporting: {
buttons: {
backButton: {
_titleKey: 'backTitle',
enabled: theChart.buttonOn,
x: 0,
y: 300,
onclick: function () {
$(this).parents(".chart").data('chart', $(this).parents(".chart").data('mainChart'));
$(this).parents(".chart").trigger('redoChart');
},
text: 'Click to return to full graph',
width:200,
theme: {
'stroke-width': 1,
stroke: 'black',
fill: '#cccccc',
states: {
hover: {
'stroke-width': 1,
stroke: 'black',
fill: '#cccccc'
},
select: {
'stroke-width': 1,
stroke: 'black',
fill: '#cccccc'
}
}
}
}
}
}
When I click on this button, nothing happens. I've determined that it is because $(this).parents(".chart") is not appropriately identifying the container div for my chart (which does have the class "chart"). If I replace $(this).parents(".chart") with $("#thechart"), everything is fine.
Use:
$(this.container).parents('.chart').hide();
In the button handler this is a highcharts object. this.container is the highcharts created div within your div. So, to hide the whole thing, you're looking up to the parent that you added a chart class to.