I need to display HTML form in SVG to edit related data. I use Snap.svg library. As I found I need foreignObject tag to embed HTML form there (html code is got by Ajax request).
How can I create such object and embed it to my SVG?
===== EDITED ======
I managed to create foreignObject but I can not put there html
var test = editor.el('foreignObject', {
x: '20',
y: '500',
width: '150',
height: '200'
});
success: function (html)
{
var wrapper = editor.el('foreignObject', {
x: '20',
y: '500',
width: '150',
height: '200',
class: 'heatNet'
});
$('.heatNet').html(html);
}
Related
Is there a way to concat the result of an an html page converted with wkhtmltopdf-node inside a document page created with pdfkit in node.js, instead of just creating a pdf file from html?
const doc = new PDFDocument({
bufferPages:true,
toc: true,
margins: {
top: 125,
bottom: 50,
left: 50,
right: 50
}
});
doc.pipe(fs.createWriteStream('output.pdf'));
doc.addPage();
doc.text("HTML Content ")
// concat the result of this conversion inside doc instead of out.pdf
wkhtmltopdf(params.content, { pageSize: 'letter' }).pipe(fs.createWriteStream('out.pdf'));
Something like
doc.concat(wkhtmltopdf(params.content, { pageSize: 'letter' }));
Is there way to customize padding / position... of the burger button.
In the doc, i just can find the drawerImage parameter to override the burger image...
Saddly no option without forking. You can check the code here:
https://github.com/aksonov/react-native-router-flux/blob/master/src/NavBar.js. Padding and position is fixed.
Actually there's a parameter for it : leftButtonStyle
in my case I use react-native-vector-icons getImageSource for the burger icon
componentWillMount() {
Promise.all([Icon.getImageSource('bars', 16, 'black')])
.then((values) => {
this.setState({
menuIcon: values[0],
});
});
}
then you do something like this:
const menuIcon = {
uri: this.state.menuIcon.uri,
height: 20,
width: 20,
resizeMode: 'stretch',
color: 'white',
};
then in your tabs scene
<Scene
key="main"
type="replace"
initial
drawerImage={menuIcon}
tabs
style={{ backgroundColor: theme.navColor, justifyContent: 'center' }}
>
I am generating pdf in nodejs using phantomjs. However, when I try to generate a large pdf (more than 1 A4 size page), it generates only two page pdf. One of the page contains all the matter and the other similar sized (very large) page is blank.
I am using the following code to generate the pdf:
phantom.create("--web-security=no", "--ignore-ssl-errors=yes",function(ph) {
return ph.createPage(function(page) {
return page.open(htmlfilepath, function(status) {
page.paperSize = { format: 'A4', orientation: 'portrait', border: '1cm' };
page.render(pdffilepath, function(){
ph.exit();
});
});
});
});
Can anyone tell the correct method to format pdf in phantomjs. Thanks.
Got it. Even though I did exactly according to many articles and tutorial online, I had to use change the following piece to code:
page.paperSize = { format: 'A4', orientation: 'portrait', border: '1cm' };
to this:
page.set('paperSize', { format: 'A4', orientation: 'portrait', border: '1cm'});
This may be because of the change in version from 1.x.x to 2.x.x.
var el1 = new joint.shapes.custom.ElementLink({
position: { x: 80, y: 80 },
size: { width: 170, height: 100 },
attrs: {
rect: { fill: '#E67E22', stroke: '#D35400', 'stroke-width': 5 },
a: { 'xlink:href': 'http://jointjs.com', 'xlink:show': 'new', cursor: 'pointer' },
text: { text: 'Element as a link:\nhttp://jointjs.com', fill: 'white' }
}
});
I want a handler for anchor tag where I can call any event from my viewmodel
It depends what you want exactly. If you're using the joint.shapes.custom.ElementLink from this tutorial: http://jointjs.com/tutorial/hyperlinks, then this shape is defined so that it is totally wrapped in the <a> anchor tag and so clicking anywhere inside the element will follow the link. However, you can catch the click event and, for example, based on the target of the event or some other condition decide whether you want to follow the link or do other things:
paper.on('cell:pointerclick', function(cellView, evt, x, y) {
// evt.target contains the SVG subelement that was the target of the click
// cellView is the view for the joint.shapes.custom.ElementLink cell model
// cellView.model is the cell model
if (someCondition) {
// This is how you can prevent the default browser action which is
// following the <a> link.
evt.preventDefault();
}
})
I am using google maps api and for the marker I am trying to use an svg file
var marker = new google.maps.Marker({
position: coords, map: map, icon: '/assets/pin/pin.svg'
});
The image actually is been displayed but I am getting a console error.
GET http://localhost:3000/assets/pin.svg 406 (Not Acceptable)
The request headers
Accept:image/webp,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Typically, the icon requres a url
e.g.
var myIcon={
url: 'pin.svg',
size: new google.maps.Size(10, 10),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(5, 5)
};
Then,
var myMarker= new google.maps.Marker(
{
position: location,
map: MyMap,
icon: myIcon
});