how I can add a html -element to my mxGraph object?
I imagine some thing like:
const newDiv = document.createElement('div');
const newContent = document.createTextNode('The new div element!');
newDiv.appendChild(newContent);
drawIoUi.editor.graph.addMyNewHtmlElement(newDiv);
Thanks for help!
Frank
Examples are here and here. The list of all examples is here.
const newDiv = document.createElement('div');
const parent = drawIoUi.editor.graph.getDefaultParent();
drawIoUi.editor.graph.getModel().beginUpdate();
try {
const cell: any = drawIoUi.editor.graph.insertVertex(parent, null, newDiv, 40, 140, 300, 200);
} finally {
drawIoUi.editor.graph.getModel().endUpdate();
drawIoUi.editor.graph.refresh();
drawIoUi.editor.graph.container.focus();
}
Related
I'm trying to get snapshot of the table and generate a pdf using html2canvas and jsPDF in React. But the isssue is only the part of table that is visible gets generated where as horizontal and vertical scrollable part of table which is invisible is not getting in the pdf. Any help to this issue is highly appreciated. Thanks in advance.
html2canvas($("#canvas"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
Since I dont know exactly the page you are working with but I hope my code in old project can help you. Your problem may come from the width and heigh is not defined.
processPdf = () => {
const foo = document.getElementById('canvas');
html2canvas(foo)
.then((canvas) => {
var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
const handledImage = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'px', 'a4');
pdf.addImage(handledImage, 'JPEG', 0, 0, width, height);
pdf.save("test.pdf");
});
};
If you need to export table on a pdf file you shouldn't use html2canvas for that purpose. I think its better to use jsPDF and jspdf-autotable for exporting table to pdf.
example : Export to PDF in React-Table
I am working on the example from Custom models in Forge Viewer blog by Petr Broz. I am facing issue in updating the color of sphere objects dynamically. I am getting the value of sphere's color from a json file like this "color": "#FF0000". I have created 3 spheres and I am getting the color of first sphere for the rest also. Why the color is not updating for the other spheres? If the problem is on using same material then I tried giving the sphereMaterial in array also as shown below. Is that wrong or how can i update the color?
var spherecolor='';
var sphereMaterial = [];
const button = document.getElementById('button-geometry');
button.addEventListener('click', async function () {
const sceneBuilder = await viewer.loadExtension('Autodesk.Viewing.SceneBuilder');
const modelBuilder = await sceneBuilder.addNewModel({ conserveMemory: true, modelNameOverride: 'My Custom Model' });
for (var i = 0; i < numOfSphere;i++) {
addGeometry(modelBuilder, jsonGeomConfig.geom[i].dbId, i);
}
});
function addGeometry(modelBuilder, dbId, i) {
const sphereGeometry = new THREE.BufferGeometry().fromGeometry(new THREE.SphereGeometry(0.05, 8, 10));
//Getting spherecolor from json file
spherecolor = jsonGeomConfig.geom[i].color;
sphereMaterial[i] = new THREE.MeshPhongMaterial({ color: spherecolor });
const sphereTransform = new THREE.Matrix4().compose(
new THREE.Vector3(jsonGeomConfig.geom[i].Position.posX, jsonGeomConfig.geom[i].Position.posY, jsonGeomConfig.geom[i].Position.posZ),
new THREE.Quaternion(0, 0, 0, 1),
new THREE.Vector3(2,2,2)
);
modelBuilder.addMaterial('MyCustomMaterial', sphereMaterial[i]);
const sphereGeomId = modelBuilder.addGeometry(sphereGeometry);
const sphereFragId = modelBuilder.addFragment(sphereGeomId, 'MyCustomMaterial', sphereTransform);
modelBuilder.changeFragmentsDbId(sphereFragId, dbId);
}
Be sure to give the materials with different colors different names ... otherwise it'd get overridden - see this live environment:
modelBuilder.addMaterial('MyCustomMaterial'+i, sphereMaterial[i]);
const sphereGeomId = modelBuilder.addGeometry(sphereGeometry);
const sphereFragId = modelBuilder.addFragment(sphereGeomId, 'MyCustomMaterial'+i, sphereTransform);
I have a very lengthy form in angular and i need to convert it into pdf. Since it is a very lengthy form i have to divide it into smaller chunks and show it in multiple pages in pdf. How can i achieve it. And i also need to add header and footer for every page.
I am using jsPDF and dom-to-image packages for pfd conversion.
Following is the code i wrote for pdf conversion:
exportPdf(){
var doc = new jsPDF('potrait','px','a4');
let imageData= new Image();
imageData.src='../../assets/images/testimg.png';
var filename="application";
var options={};
var img;
var newImage;
var node = document.getElementById('formContent');
var numRowsToCut=3;
var imagePieces=[];
domtoimage.toPng(node, { }).then(function(dataUrl)
{
img = new Image();
img.src = dataUrl;
newImage = img.src;
img.onload = function(){
var pdfWidth = img.width;
console.log("image width "+pdfWidth);
var pdfHeight = (img.height)/3;
var width = doc.internal.pageSize.getWidth();
console.log("width "+width);
var height = doc.internal.pageSize.getHeight();
for(var y = 0; y < numRowsToCut; ++y) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(newImage, 0, y *pdfHeight, pdfWidth,pdfHeight, 0, 0,pdfWidth,pdfHeight);
imagePieces.push(canvas.toDataURL());
}
var docDefinition = {
content: [{
image: imagePieces[0],
width: 500,
pagebreak:'after'
},
{
image: imagePieces[1],
width: 500,
pagebreak:'after'
},
{
image: imagePieces[0],
width: 500,
pagebreak:'after'
}],
pageBreakBefore: function(currentNode) {
return currentNode.style && currentNode.style.indexOf('myDivClass') > -1;
}
};
pdfMake.createPdf(docDefinition).download(filename);
};
})
.catch(function(error) {
// Error Handling
console.log(error);
});
}
Any help will be appreciated.
I got the solution from a tutorial. Posting it here since it may help someone else.
Generate Multipage PDF using Single Canvas of HTML Document using jsPDF
How to Create Multipage PDF from HTML Using jsPDF and html2Canvas
const googleDiv = function(){
const container = document.createElement('div');
const btnEle = document.createElement('button');
btnEle.type = "button";
btnEle.className = "link-btn";
btnEle.appendChild(document.createTextNode("(Unlink)"));
btnEle.onclick = "unlinkGoogle()";
container.appendChild(btnEle);
container.id = "google-linked-container";
return container;
};
When I create a button via this method, the button appears in the DOM no problem and the button type and classes are as expected, but there is no onclick attribute. Why?
P.S.
btnEle.addEventListener("click", () => { console.log("clicked!"); }); doesn't work either.
Update
I have replicated it on JSFiddle: https://jsfiddle.net/fs1xhgnm/2/
You should assign your handler as a function, instead of string. Also, try to assign onclick handler after the element is appended.
container.appendChild(btnEle);
btnEle.onclick = unlinkGoogle;
You need to pass a reference to the function, either with the onclick, or the better addEventListener
const googleDiv = function() {
const container = document.createElement('div');
const btnEle = document.createElement('button');
btnEle.type = "button";
btnEle.className = "link-btn";
btnEle.appendChild(document.createTextNode("(Unlink)"));
btnEle.addEventListener('click', unlinkGoogle);
container.appendChild(btnEle);
container.id = "google-linked-container";
return container;
};
function unlinkGoogle() {
console.log('clicked');
}
document.body.appendChild(googleDiv());
You are assigning a string as the function. You can use addEventListener.
Here is a JSFiddle to explain what I mean.
Now I have a form field:
<input id="my_img_field" type="file"/>
After I select the image in the browser, I want to render the selected image file on the target img tag:
<img id="image_preview" />
But I want to do this after the $('#my_img_field').change event, i.e. I may want this done when I click some button later.
I heard that this could be done using HTML5 technique. Can someone teach me how?
the code in vanilla js
var file = document.getElementById('my_img_field').files[0]
var fr = new FileReader()
fr.readAsDataURL(file)
fr.onload = function(e) {
var img = document.getElementById('image_preview')
img.src = this.result
}
The following approach will work:
var file = $('#my_img_field')[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var img = $('#image_preview');
img.attr('src', this.result);
}
It can be like this
const file = document.getElementById('my_img_field').files[0]
const link = window.URL.createObjectURL(file)