I’m trying to use jsComponent.I’ve done everything like it is said in manual. But the result is that mouseevents not work immediately. What can it be? I mean possible problem?
Hi,
Could you please attach a small demo project that reproduces the problem or at least post code snippets? Without details, it’s hard to say what went wrong.
Gleb
- Console.log kinda shows that we are already in the init function.
- Strange for me but thereis a plethora of messages in console.log which generated not by me.
- Clicking on the area for a long time do nothing.
Code in the ui
<tab id="svgTS" caption="Технологическая схема">
<jsComponent id="svg"
initFunctionName="initSvg"
height="1600px"
width="1600px">
<dependencies>
<dependency path="vaadin://connector.js"/>
</dependencies>
</jsComponent>
</tab>Code in the screen controller
@Subscribe
protected void onInit(InitEvent event) {
StateData data = new StateData();
data.smth = "some data";
svg.addFunction("testFunc", javaScriptCallbackEvent -> {
String value = javaScriptCallbackEvent.getArguments().getString(0);
notifications.create()
.withCaption(value)
.withPosition(Notifications.Position.BOTTOM_RIGHT)
.show();
});
svg.setState(data);
}
public class StateData implements Serializable {
public String smth;
}initSvg = function () {
console.log(“SVG on the way!”);
var connector = this;
var element = connector.getElement();
element.innerHTML = " background Layer 1 9 10 11 19 7 8 1 18 16 15 14 13 5 4 3 22 21 20 Показать последние данные";
var dtm = this.getState().data.smth;
console.log(this.getState().data);
var show = false;
var mysvg = document.getElementById("svg");
if (element) {
var svg_btn = document.getElementById("svg_button");
if (svg_btn){
svg_btn.addEventListener("mousedown", function(e){
if (!show){
show = true;
svg_btn.setAttributeNS(null,"fill","#8ae9d8");
var myTextElement = document.createElementNS("http://www.w3.org/2000/svg", "text");
var myText = document.createTextNode("V = 20M3");
myTextElement.setAttribute("id", "information");
myTextElement.setAttribute("x", 170);
myTextElement.setAttribute("y", 77);
myTextElement.setAttribute("fill", "blue");
myTextElement.setAttribute("font-family", "Verdana");
myTextElement.setAttribute("font-size", "12");
myTextElement.appendChild(myText);
var svgNS = "http://www.w3.org/2000/svg";
var details = document.createElementNS(svgNS,"rect");
details.setAttribute("id","currentItemDetailsV");
details.setAttribute("x",160);
details.setAttribute("y",55);
details.setAttribute("height","30");
details.setAttribute("width","100");
details.setAttribute("fill","lightpink");
details.setAttribute("stroke","#000000");
details.setAttribute("stroke-width","1");
var myTextElement2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
var myText2 = document.createTextNode("p = 10 кПа");
myTextElement2.setAttribute("id", "information2");
myTextElement2.setAttribute("x", 250);
myTextElement2.setAttribute("y", 144);
myTextElement2.setAttribute("fill", "blue");
myTextElement2.setAttribute("font-family", "Verdana");
myTextElement2.setAttribute("font-size", "12");
myTextElement2.appendChild(myText2);
var details2 = document.createElementNS(svgNS,"rect");
details2.setAttribute("id","currentItemDetailsP");
details2.setAttribute("x",240);
details2.setAttribute("y",125);
details2.setAttribute("height","30");
details2.setAttribute("width","100");
details2.setAttribute("fill","lightyellow");
details2.setAttribute("stroke","#000000");
details2.setAttribute("stroke-width","1");
mysvg.appendChild(details);
mysvg.appendChild(details2);
mysvg.appendChild(myTextElement);
mysvg.appendChild(myTextElement2);
} else {
show = false;
svg_btn.setAttributeNS(null,"fill","#ffffff");
mysvg.removeChild(document.getElementById('information'));
mysvg.removeChild(document.getElementById('information2'));
mysvg.removeChild(document.getElementById('currentItemDetailsV'));
mysvg.removeChild(document.getElementById('currentItemDetailsP'));
}
});
}
}
};
How can I send you sources correctly? The page doesn’t render my code correctly!
Forum posts support Markdown. Also there are toolbar buttons for formatting
Connector.js (ugly draft):
initSvg = function () {
console.log(“SVG on the way!”);
var connector = this;
var element = connector.getElement();
element.innerHTML = “<svg id=‘svg’ width=‘598’ height=‘205’ xmlns=’http://www.w3.org/2000/svg‘> <g> <title>background</title> <rect fill=’#ffffff’ id=‘canvas_background’ height=‘207’ width=‘420’ y=’-1’ x=’-1’/> <g display=‘none’ overflow=‘visible’ y=‘0’ x=‘0’ height=‘100%’ width=‘100%’ id=‘canvasGrid’> <rect fill=‘url(#gridpattern)’ stroke-width=‘0’ y=‘0’ x=‘0’ height=‘100%’ width=‘100%’/> </g> </g> <g> <title>Layer 1</title> <g id=‘svg_3’> <path stroke=’#000’ transform=‘rotate(89.2265396118164 54.192668914794915,87.84767150878905) ’ id=‘svg_1’ d=‘m48.692676,95.726981l5.5,-15.758622l5.5,15.758622l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-89.78652954101562 70.0328140258789,87.83474731445312) ’ id=‘svg_2’ d=‘m64.532822,95.704161l5.5,-15.738829l5.5,15.738829l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <g id=‘svg_6’> <path stroke=’#000’ transform=‘rotate(89.2265396118164 130.29074096679688,87.84767150878906) ’ id=‘svg_4’ d=‘m124.790236,95.726985l5.5,-15.75863l5.5,15.75863l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-89.78652954101562 146.13088989257812,87.83474731445312) ’ id=‘svg_5’ d=‘m140.630386,95.704165l5.5,-15.73883l5.5,15.73883l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <g id=‘svg_9’> <path stroke=’#000’ transform=‘rotate(89.2265396118164 130.29074096679685,109.31123352050781) ’ id=‘svg_7’ d=‘m124.790235,117.1904l5.5,-15.75863l5.5,15.75863l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-89.78652954101562 146.1308898925781,109.29830932617186) ’ id=‘svg_8’ d=‘m140.630385,117.16758l5.5,-15.73883l5.5,15.73883l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <g id=‘svg_12’> <path stroke=’#000’ transform=‘rotate(89.2265396118164 101.51006317138673,52.72547912597655) ’ id=‘svg_10’ d=‘m96.009747,60.605033l5.5,-15.75863l5.5,15.75863l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-89.78652954101562 117.35020446777345,52.712554931640625) ’ id=‘svg_11’ d=‘m111.849897,60.582213l5.5,-15.73883l5.5,15.73883l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <g id=‘svg_15’> <path stroke=’#000’ transform=‘rotate(89.2265396118164 223.46200561523438,87.84767150878906) ’ id=‘svg_13’ d=‘m217.960968,95.726985l5.5,-15.75863l5.5,15.75863l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-89.78652954101562 239.30200195312503,87.83474731445314) ’ id=‘svg_14’ d=‘m233.801118,95.704165l5.5,-15.73883l5.5,15.73883l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <g id=‘svg_18’> <path stroke=’#000’ transform=‘rotate(89.2265396118164 161.99830627441406,189.31149291992188) ’ id=‘svg_16’ d=‘m156.497551,197.190402l5.5,-15.75863l5.5,15.75863l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-89.78652954101562 177.8384552001953,189.29855346679688) ’ id=‘svg_17’ d=‘m172.337701,197.167582l5.5,-15.73883l5.5,15.73883l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <g id=‘svg_21’> <path stroke=’#000’ transform=‘rotate(89.2265396118164 372.7281799316407,87.84765625000001) ’ id=‘svg_19’ d=‘m367.229263,95.726985l5.5,-15.75863l5.5,15.75863l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-89.78652954101562 388.56784057617193,87.83473205566409) ’ id=‘svg_20’ d=‘m383.069413,95.704165l5.5,-15.73883l5.5,15.73883l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <g id=‘svg_24’> <path stroke=’#000’ transform=‘rotate(89.2265396118164 351.7532043457031,189.79931640624994) ’ id=‘svg_22’ d=‘m346.253652,197.678206l5.5,-15.75863l5.5,15.75863l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-89.78652954101562 367.5928649902344,189.786376953125) ’ id=‘svg_23’ d=‘m362.093802,197.655386l5.5,-15.73883l5.5,15.73883l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <g transform=‘rotate(-89.86668395996094 145.9842529296875,28.82226562500001) ’ id=‘svg_30’> <path stroke=’#000’ transform=‘rotate(89.2265396118164 138.09567260742188,28.822875976562504) ’ id=‘svg_28’ d=‘m132.59511,36.702596l5.5,-15.75863l5.5,15.75863l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-89.78652954101562 153.93582153320312,28.80995178222657) ’ id=‘svg_29’ d=‘m148.43526,36.679776l5.5,-15.73883l5.5,15.73883l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <g transform=‘rotate(-89.86668395996094 169.88685607910156,28.822265625000004) ’ id=‘svg_33’> <path stroke=’#000’ transform=‘rotate(89.2265396118164 161.99827575683594,28.822875976562504) ’ id=‘svg_31’ d=‘m156.497553,36.702595l5.5,-15.75863l5.5,15.75863l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-89.78652954101562 177.8384246826172,28.809951782226577) ’ id=‘svg_32’ d=‘m172.337703,36.679775l5.5,-15.73883l5.5,15.73883l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <g transform=‘rotate(-89.86668395996094 271.8370666503906,59.06637573242187) ’ id=‘svg_36’> <path stroke=’#000’ transform=‘rotate(89.2265396118164 263.94873046874994,59.06698608398439) ’ id=‘svg_34’ d=‘m258.448775,66.946498l5.5,-15.75863l5.5,15.75863l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-89.78652954101562 279.78839111328125,59.054061889648416) ’ id=‘svg_35’ d=‘m274.288925,66.923678l5.5,-15.73883l5.5,15.73883l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <g transform=‘rotate(-89.86668395996094 295.2511291503906,59.06637573242188) ’ id=‘svg_39’> <path stroke=’#000’ transform=‘rotate(89.2265396118164 287.36279296875,59.066986083984375) ’ id=‘svg_37’ d=‘m281.863407,66.946495l5.5,-15.75863l5.5,15.75863l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-89.78652954101562 303.2024536132813,59.05406188964843) ’ id=‘svg_38’ d=‘m297.703557,66.923675l5.5,-15.73883l5.5,15.73883l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <g transform=‘rotate(-89.86668395996094 342.56756591796875,58.578582763671854) ’ id=‘svg_42’> <path stroke=’#000’ transform=‘rotate(89.2265396118164 334.6792297363281,58.57919311523435) ’ id=‘svg_40’ d=‘m329.180481,66.45869l5.5,-15.75863l5.5,15.75863l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-89.78652954101562 350.5188903808594,58.566268920898445) ’ id=‘svg_41’ d=‘m345.020631,66.43587l5.5,-15.73883l5.5,15.73883l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <g transform=‘rotate(178.88169860839844 228.8925323486328,164.9080810546875) ’ id=‘svg_45’> <path stroke=’#000’ transform=‘rotate(-0.6401443481445312 228.89358520508063,172.8084106445292) ’ id=‘svg_43’ d=‘m223.392525,180.687857l5.5,-15.75863l5.5,15.75863l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-179.65321350097656 228.91757202148438,156.9692687988281) ’ id=‘svg_44’ d=‘m223.417945,164.838062l5.5,-15.73883l5.5,15.73883l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <g transform=‘rotate(-89.86668395996094 286.9579162597656,165.89633178710938) ’ id=‘svg_48’> <path stroke=’#000’ transform=‘rotate(89.2265396118164 279.069580078125,165.89694213867185) ’ id=‘svg_46’ d=‘m273.570719,173.775762l5.5,-15.75863l5.5,15.75863l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> <path stroke=’#000’ transform=‘rotate(-89.78652954101562 294.9092407226562,165.88400268554685) ’ id=‘svg_47’ d=‘m289.410869,173.752942l5.5,-15.73883l5.5,15.73883l-11,0z’ stroke-width=‘1.5’ fill=’#fff’/> </g> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_49’ y2=‘88.067069’ x2=‘45.853657’ y1=‘88.067069’ x1=‘33.17073’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_50’ y2=‘88.067069’ x2=‘122.439023’ y1=‘88.067069’ x1=‘78.536584’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <rect stroke=’#000’ id=‘svg_51’ height=‘19.512195’ width=‘24.878049’ y=‘77.823169’ x=‘171.219507’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <g id=‘svg_55’> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_52’ y2=‘87.091463’ x2=‘196.585361’ y1=‘78.79878’ x1=‘171.707312’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_54’ y2=‘88.067073’ x2=‘195.609751’ y1=‘96.847561’ x1=‘171.707312’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> </g> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_56’ y2=‘88.067069’ x2=‘171.219511’ y1=‘88.067069’ x1=‘153.658535’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_57’ y2=‘88.067069’ x2=‘214.634145’ y1=‘88.067069’ x1=‘196.09756’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_58’ y2=‘110.506094’ x2=‘39.512196’ y1=‘88.067071’ x1=‘39.512192’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_60’ y2=‘110.506088’ x2=‘121.463409’ y1=‘110.5061’ x1=‘38.536588’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_61’ y2=‘110.018289’ x2=‘231.707317’ y1=‘110.018295’ x1=‘154.634145’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_62’ y2=‘80.749996’ x2=‘231.219511’ y1=‘110.018289’ x1=‘231.219511’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_63’ y2=‘51.969508’ x2=‘41.951218’ y1=‘88.067069’ x1=‘41.951218’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_64’ y2=‘52.457313’ x2=‘41.463413’ y1=‘52.457313’ x1=‘93.17073’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_65’ y2=‘53.432923’ x2=‘171.219511’ y1=‘53.432923’ x1=‘125.853657’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_66’ y2=‘43.676824’ x2=‘146.341462’ y1=‘52.945124’ x1=‘146.341462’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_67’ y2=‘45.140242’ x2=‘170.243901’ y1=‘52.945121’ x1=‘170.243901’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_68’ y2=‘0.749996’ x2=‘169.756096’ y1=‘11.969508’ x1=‘169.756096’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_69’ y2=‘81.237801’ x2=‘233.17073’ y1=‘81.237801’ x1=‘228.780486’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_70’ y2=‘87.579269’ x2=‘303.414631’ y1=‘87.579257’ x1=‘247.317071’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_71’ y2=‘75.384143’ x2=‘272.195121’ y1=‘87.09146’ x1=‘272.195121’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <rect stroke=’#000’ transform=‘rotate(45.84443664550781 317.19314575195307,87.63946533203125) ’ id=‘svg_72’ height=‘18.871298’ width=‘19.24386’ y=‘78.203814’ x=‘307.57122’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_73’ y2=‘99.286581’ x2=‘317.073154’ y1=‘76.359752’ x1=‘317.073161’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_74’ y2=‘88.067069’ x2=‘363.902438’ y1=‘88.067069’ x1=‘331.219511’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_75’ y2=‘74.896338’ x2=‘295.609755’ y1=‘87.09146’ x1=‘295.609755’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_76’ y2=‘74.896338’ x2=‘342.926829’ y1=‘87.09146’ x1=‘342.926841’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_77’ y2=‘189.042679’ x2=‘110.731706’ y1=‘88.554874’ x1=‘110.243901’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_78’ y2=‘189.530482’ x2=‘109.756095’ y1=‘189.530494’ x1=‘153.17073’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_79’ y2=‘189.530483’ x2=‘343.902436’ y1=‘189.530487’ x1=‘186.341461’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_80’ y2=‘181.725604’ x2=‘229.268272’ y1=‘188.554875’ x1=‘229.268321’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_81’ y2=‘181.725604’ x2=‘287.317054’ y1=‘188.554875’ x1=‘287.317103’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_82’ y2=‘2.213411’ x2=‘286.341468’ y1=‘150.018289’ x1=‘286.82926’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_83’ y=‘82.701216’ x=‘60.487803’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>9</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_84’ y=‘44.652435’ x=‘104.878048’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>10</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_85’ y=‘30.506094’ x=‘131.707315’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>11</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_86’ y=‘26.603655’ x=‘174.634145’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>19</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_87’ y=‘83.189021’ x=‘137.073169’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>7</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_88’ y=‘105.628045’ x=‘136.585364’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>8</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_89’ y=‘74.896337’ x=‘182.926828’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>1</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_90’ y=‘77.823167’ x=‘226.341462’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>18</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_91’ y=‘183.676825’ x=‘163.902437’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>16</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_92’ y=‘168.06707’ x=‘231.707316’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>15</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_93’ y=‘167.579265’ x=‘290.731706’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>14</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_94’ y=‘183.676825’ x=‘353.658535’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>13</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_95’ y=‘61.725606’ x=‘301.951218’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>5</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_96’ y=‘60.749997’ x=‘348.292682’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>4</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_97’ y=‘81.725606’ x=‘378.048779’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>3</text> <line stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_98’ y2=‘88.067069’ x2=‘404.878047’ y1=‘88.067069’ x1=‘396.585364’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ stroke=’#000’ fill=‘none’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_99’ y2=‘190.018292’ x2=‘407.317072’ y1=‘190.01828’ x1=‘375.609755’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <path id=‘svg_123’ d=‘m-0.000001,131.481704’ opacity=‘0.5’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘null’ stroke=‘null’ fill=‘null’/> <ellipse stroke=’#000’ ry=‘8.536585’ rx=‘9.02439’ id=‘svg_128’ cy=‘138.109755’ cx=‘228.512187’ stroke-width=‘NaN’ fill=’#ffffff’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_129’ y2=‘132.987804’ x2=‘233.634139’ y1=‘145.182928’ x1=‘222.902432’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘NaN’ fill=‘none’/> <ellipse stroke=’#000’ ry=‘8.536585’ rx=‘9.02439’ id=‘svg_130’ cy=‘31.768293’ cx=‘299.243892’ stroke-width=‘NaN’ fill=’#ffffff’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_131’ y2=‘26.646343’ x2=‘304.365844’ y1=‘38.841467’ x1=‘293.634137’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘NaN’ fill=‘none’/> <ellipse stroke=’#000’ ry=‘8.536585’ rx=‘9.02439’ id=‘svg_132’ cy=‘31.768293’ cx=‘341.682917’ stroke-width=‘NaN’ fill=’#ffffff’/> <line stroke=’#000’ stroke-linecap=‘null’ stroke-linejoin=‘null’ id=‘svg_133’ y2=‘26.646343’ x2=‘346.804869’ y1=‘38.841467’ x1=‘336.073162’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘NaN’ fill=‘none’/> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_134’ y=‘31.036585’ x=‘310.219505’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>22</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_135’ y=‘30.060976’ x=‘353.634139’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>21</text> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘8’ id=‘svg_136’ y=‘132.987805’ x=‘239.487797’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>20</text> <rect stroke=’#000’ id=‘svg_button’ height=‘20’ width=‘150’ y=‘10’ x=‘400’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘1.5’ fill=‘none’/> <text font-weight=‘bold’ xml:space=‘preserve’ text-anchor=‘start’ font-family=‘Helvetica, Arial, sans-serif’ font-size=‘10’ id=‘svg_buttontext’ y=‘25’ x=‘404’ fill-opacity=‘null’ stroke-opacity=‘null’ stroke-width=‘0’ stroke=’#000’ fill=’#000000’>Показать последние данные</text></g></svg>”;
var dtm = this.getState().data.smth;
console.log(this.getState().data);
var show = false; var mysvg = document.getElementById("svg"); if (element) { var svg_btn = document.getElementById("svg_button"); if (svg_btn){ svg_btn.addEventListener("mousedown", function(e){ if (!show){ show = true; svg_btn.setAttributeNS(null,"fill","#8ae9d8"); var myTextElement = document.createElementNS("http://www.w3.org/2000/svg", "text"); var myText = document.createTextNode("V = 20M3"); myTextElement.setAttribute("id", "information"); myTextElement.setAttribute("x", 170); myTextElement.setAttribute("y", 77); myTextElement.setAttribute("fill", "blue"); myTextElement.setAttribute("font-family", "Verdana"); myTextElement.setAttribute("font-size", "12"); myTextElement.appendChild(myText);var svgNS = "http://www.w3.org/2000/svg"; var details = document.createElementNS(svgNS,"rect"); details.setAttribute("id","currentItemDetailsV"); details.setAttribute("x",160); details.setAttribute("y",55); details.setAttribute("height","30"); details.setAttribute("width","100"); details.setAttribute("fill","lightpink"); details.setAttribute("stroke","#000000"); details.setAttribute("stroke-width","1"); var myTextElement2 = document.createElementNS("http://www.w3.org/2000/svg", "text"); var myText2 = document.createTextNode("p = 10 кПа"); myTextElement2.setAttribute("id", "information2"); myTextElement2.setAttribute("x", 250); myTextElement2.setAttribute("y", 144); myTextElement2.setAttribute("fill", "blue"); myTextElement2.setAttribute("font-family", "Verdana"); myTextElement2.setAttribute("font-size", "12"); myTextElement2.appendChild(myText2); var details2 = document.createElementNS(svgNS,"rect"); details2.setAttribute("id","currentItemDetailsP"); details2.setAttribute("x",240); details2.setAttribute("y",125); details2.setAttribute("height","30"); details2.setAttribute("width","100"); details2.setAttribute("fill","lightyellow"); details2.setAttribute("stroke","#000000"); details2.setAttribute("stroke-width","1"); mysvg.appendChild(details); mysvg.appendChild(details2); mysvg.appendChild(myTextElement); mysvg.appendChild(myTextElement2); } else { show = false; svg_btn.setAttributeNS(null,"fill","#ffffff"); mysvg.removeChild(document.getElementById('information')); mysvg.removeChild(document.getElementById('information2')); mysvg.removeChild(document.getElementById('currentItemDetailsV')); mysvg.removeChild(document.getElementById('currentItemDetailsP')); } }); }
}
};
I’ve post it as reply to this topic.
There is nothing wrong with <jsComponent/> component. Seems that SVG markup causes the problems, for example button text overlaps the button itself, so clicking on it has no effect, you only need to click near the top, i.e. button’s not overlapped area.
1 Like
Ok.
And then how I can pass some data to my connector.js?
svg.addFunction(“testFunc”, javaScriptCallbackEvent -> {
…
});
svg.setState(data);
I want that data passes when testFunc is called. Not on Init. How can I do that?
You can invoke a named function that the JavaScript connector has added, e.g.:
connector.js
...
this.showNotification = function (text) {
alert(text);
};
...
Screen controller
jsComponent.callFunction("showNotification", "test");
Gleb
The thing is I want to put some logic to function which can be called on client button click. It must get some data and draw it on element.
Unfortunately, I don’t get the problem. Generic JavaScript component allows you to invoke functions from server-side to trigger some logic on client-side (i.e. javascript) and vice versa, both with possible arguments, as well as use state to pass data. For example, you can pass data from the screen controller to the javascript connector using callFunction method and handle it whatever you need.
Gleb
And one more question. How can I pass data from my js to java-controller?
Register a function that can be called from the JavaScript using the provided name, for example:
jsComponent.addFunction("valueChanged", callbackEvent -> {
JsonArray arguments = callbackEvent.getArguments();
notifications.create()
.withCaption(StringUtils.join(arguments, ", "))
.show();
});
Use it in JS connector:
this.valueChanged(values);
Gleb
1 Like
Thank you very much for your answer! One more question to finish my design: How can I make a toggle button? Not in js.
Hi,
Since this question isn’t related to the theme of this topic, could you please create a separate topic?
Gleb