Can anyone please help me understand how to add tooltip to the stencil shapes.
I can't find a way how to achieve this. I would love to give dynamic text if it allows.
You can define the tooltip when you define the shape through the '.' reference, example:
joint.shapes.devs.Model.define('app.MyShape', {
attrs: {
'.': {
'data-tooltip': 'My Shape',
'data-tooltip-position': 'bottom',
'data-tooltip-position-selector': '.joint-stencil'
},
// other properties ...
}
}
Related
I want to give my dropdown items to use the text themeColor. How can I achieve this? Below is my code:
const dropdownStyles: Partial<IDropdownStyles> = {
dropdown: { width: "50%" },
dropdownItem: {
backgroundColor:"$themePrimary",
color:"$ms-color-themePrimary"
}
};
<Dropdown label='Select your List' styles={ dropdownStyles} placeholder='---Select an Option---' options={this.state.listNames}></Dropdown>
The above does not work. The dropdown items dont use the Primary color which is #a200ff.
As far as I know the "$ms-Bla--bla-bla" notation is only working for (statically) pre-processed fabric-ui files, there is no run-time processing of these variables in spfx. So, you may need to use the theme directly. For example, you could make your dropdownStyles a function instead of a constant. You receive the current theme in parameters then:
const dropdownStyles = (styleProps: IDropdownStyleProps): Partial<IDropdownStyles> => {
return {
dropdown: { width: "50%" },
dropdownItem: {
backgroundColor: styleProps.theme.palette.themePrimary,
color: styleProps.theme.palette.themePrimary
}
}
};
There are other options as well, like using <ThemeProvider> / useTheme pair for example, using "magic" scss rules like [theme: themePrimary, default: #0078d7] (which are pre-processed at runtime) , using window.__themeState__.theme variable
I have a custom shape composed of a body (a SVG path) and a label.
I want my links from one shape to another to be connected to the center of the body sub-element, and not the center of the bbox of the shape.
I tried to set a connectionPoint with a selector to the body, but it does not work. My best approach is to add sticky: true to force the link to point to the body, but this is not satisfying.
You can see in this CodePen with the source shape having sticky: true and the target shape having sticky: false.
Any help to make my link point to the center of my body element would be really appreciated.
You can use the magnetSelector attribute seen in the docs.
magnetSelector designates a sub-element as the target for the cell's magnet.
The following seems to work well in your codepen:
const shape1 = new Shape();
shape1.position(100, 100);
shape1.attr({ label: { text: "Shape 1" } });
shape1.addTo(graph);
const shape2 = new Shape();
shape2.position(500, 100);
shape2.attr({ label: { text: "Shape 2" } });
shape2.addTo(graph);
shape1.attr(['root','magnetSelector'], 'body');
shape2.attr(['root','magnetSelector'], 'body');
Can anyone tell me how to wrap lengthy text inside rectangle in JointJS.
Thanks in advance
You can use either "TextBlock" or if you trying to create a custom element you can write like this
joint.shapes.devs.testModel = joint.shapes.basic.TextBlock.extend( {
markup: ['<g class="rotatable"><g class="scalable"><rect class="body"/><rect class="leftthick"/></g>',
joint.env.test('svgforeignobject') ? '<foreignObject class="fobj"><body xmlns="http://www.w3.org/1999/xhtml"><div class="content"/></body></foreignObject>' : '<text class="content"/>',
'<image/><text class="label"/><g class="inPorts"/><g class="outPorts"/>',
'</g>'].join(''),
defaults: joint.util.deepSupplement({
can you help me to place a Highchart inside a SVG element instead of an HTML . Cascaded elements work fine. I have already done it with the jquery SVG plot. But Highchart throws an error 13. What can i do?
Kind regards
Markus Breitinger
You can generate chart in div, which will have negative margin. Then use getSVG() function and paste it ot svg element.
http://api.highcharts.com/highcharts#Chart.getSVG()
Unfortunately it is not suppored, highcharts renders the chart in additional divs and adds elements like labels/datalabels as html objects.
But you can copy the SVG of highstock in you SVG. But you will lose all attached events.
Like drag and drop, click ....
Here an Example of it.
http://jsfiddle.net/L6SA4/10/
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create a hidden and not attached div container.
var div = $('<div>This is an hidden unatached container.</div>');
// Create the chart
div.highcharts('StockChart', {
chart: {
width: 480,
height: 400,
events: {
load: function () {
// If hidden div was generated, take the svg content and put it into svg.
var stockSvg = $('svg', this.container);
var svgObj = $('#mySvg').svg();
// Force position of highstock
stockSvg.attr('x', 20);
stockSvg.attr('y', 30);
// Replace ugly rect with highstock
$('#container', svgObj).replaceWith(stockSvg);
}
}
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
I want to position Dojo's Dijit Dialog relative to one of my html element. is it Possible?
If yes. How?
currently it always shows dialog in middle of viewport.
Can any one help me regarding the matter?
Thanks.
amar4kintu
Another way that I do this (not great because I override a private method but it gives me the flexibility I want):
var d = new Dialog({
title:"Your Dialog",
_position:function(){
if(this.refNode){
p = Geo.position(this.refNode);
Style.set(this.domNode,{left:p.x + "px", top:p.y + "px"});
}
},
showAround:function(node){
this.refNode = node;
this.show();
}
});
d.showAround(dojo.byId("someNode"));
This example uses "dojo/dom-style" as Style and "dojo/dom-geometry" as Geo.
I did that by adjusting default absolute position of dijit.dialog using dojo..
I used following code to readjust absolute position of dialog to what I want..
dijit.byId('dialog').show();
dojo.style('dialog','background-color','#AAAAAA');
var co = dojo.coords('period'); // element below which I want to display dialog
dojo.style('md1','top',(co.y + 25)+'px');
dojo.style('md1','left', co.x+'px');
Hopefully this will help someone..
Thanks.
amar4kintu
I think dijit.TooltipDialog is what you need.
var dialog = new dijit.Dialog({
title: myTitle,
content: myDialogContent,
style: "width: 300px;",
onShow: function() { dojo.style(this.containerNode.parentNode,'visibility','hidden'); },
onLoad: function() { dojo.style(this.containerNode.parentNode,{top:'100px', visibility:'visible'}); }
});
Instead top:'100px' you can use also top:'20%' but not tested well. My dojo is 1.7.1.