JointJS - Using router on links behaves weird - javascript

As long as I don't use any routers or the attribute smooth on my links, everything is drawn correctly.
Now I wanted to use the manhattan router and things started to get weird. Every link is drawn as a filled element instead of a simple line.
It seems to me that something else does modifications on the links which somehow interferes.
Furthermore attributes like link.attr({'.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' }}) are completely ignored. The black arrow heads are still shown.
Any ideas?

JointJS library core files are joint.js and joint.css. Please make sure that none of them is missing.
JointJS + dependencies (jQuery, lodash, backbone)
<link rel="stylesheet" type="text/css" href="joint.css" />
<script src="jquery.min.js"></script>
<script src="lodash.min.js"></script>
<script src="backbone-min.js"></script>
<script src="joint.js"></script>

I had to add fill:none to both .connection-wrap and .connection to clean up.

I am using joint.js library in react.js application and I encountered the same issue.
Indeed the problem was with the missing styles.
In my package.json the joint.js library is declared just like that:
"jointjs": "^2.2.1",
In order to add styles, I had to add the following line to import styles: import "../../node_modules/jointjs/css/layout.css";

I have added display: none; to .link-tools and it worked for me.

Related

Babylon.js Loading Screen Change Image

I am trying to change the loading logo of babylon js however all the tutorials and documentation I found on the official website are not working for me.
I am using a basic babylon viewer using
<babylon id="babylon-viewer" model="mymodel.gltf" templates.main.params.fill-screen="true" observers.on-scene-init="globalSceneInitCallback"></babylon>
and some other javascript to control the camera.
I believe there is a simple way how to just change the loading-image, but cannot figure it out!
Regards and thanks
To change the default values of the babylon viewer's loading screen, you will need to modify the loading screen's template.
The configuration object looks like this:
loadingScreen: {
html: loadingScreen,
params: {
backgroundColor: "#000000",
loadingImage: images.loading,
staticLoadingImage: images.staticLoading
}
},
Just as you changed the fillScreen's parameter of the main template, you can change on of those 3 parameters - background color, loading image, and (better - OR) static loading image. Something along the lines of this:
<babylon id="babylon-viewer" model="mymodel.gltf" templates.loading-screen.params.loadingImage="http://LINK-TO-IMAGE" templates.main.params.fill-screen="true" observers.on-scene-init="globalSceneInitCallback"></babylon>
or:
<babylon id="babylon-viewer" model="mymodel.gltf" observers.on-scene-init="globalSceneInitCallback">
<templates>
<loading-screen>
<params loadingImage="IMAGEURL">
</params>
</loading-screen>
</templates>
</babylon>

How to fix FontAwesome icons being huge on page load in React

After a lot of searching, I can't seem to find a solution for this.
I'm using forawesome icons on my main page, and on load they are huge for a short period of time.
here is an example: https://makeyka.herokuapp.com/
I've tried
import {config} from "#fortawesome/fontawesome-svg-core";
config.autoAddCss = false;
then trying to add the css with no luck
Turn off autoAddCss:
import { config } from '#fortawesome/fontawesome-svg-core'
config.autoAddCss = false
Load in CSS directly in SCSS file:
#import 'node_modules/#fortawesome/fontawesome-svg-core/styles'
And in your style put this:
<style jsx global>{`
...
#import url('https://fonts.googleapis.com/css?family=Didact+Gothic');
${dom.css()}
...
`}</style>
please follow the link: https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering
Basically this question is abut React.js. However I was stumbling over the very same issue in context of Vue.js. This solution of mine is basically meant to work with Vue.js in context of single-file components.
Insert this code in your entry code file:
import { config } from "#fortawesome/fontawesome-svg-core";
config.autoAddCss = false;
Now, prepend another block addressing the required file to any existing <style> block in your root element's component:
<style src="#fortawesome/fontawesome-svg-core/styles.css"></style>
class .hero-section-content-intro(container for all font Icons) has width: 300;
until CSS file for Icon is not loaded all icons takes width : 300 (of parent)
you need to handle this case to resolve issue.
add font-size for icons.

D3.js: SVG clip-path is not applied when user is on Safari browser [duplicate]

I've run into a problem while attempting to use SVG marker elements in an SVG based visualization. I'm adding my changes to a web application which happens to include a base tag on every page, so that any references to CSS files, javascript files, etc can be relative.
I have some example code below which reproduces the issue. There is a line element, and a marker element defined. The marker element is referenced by the line in its 'marker-end' attribute, via uri and id of marker. Without the base tag, the arrow displays fine. With the base tag, it is not shown. The reason is because the base tag changes the way the browser resolves urls.. even for the simple id based url specified in the marker-end attribute of the line.
Is there any way I can get around this problem without having to remove the base tag?
I can't really remove it because the use of it is fairly ingrained in the product I'm working on. I need to support Firefox, Chrome and IE9+ for my webapp. Firefox and chrome both produce this problem. IE works fine (ie. arrow marker displays).
<html>
<head>
<base href=".">
<style>
.link { stroke: #999; stroke-opacity: .6; }
marker#arrow { fill: black; }
</style>
</head>
<body>
<svg width="100%" height="100%">
<defs>
<marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto">
<path d="M0,-5L10,0L0,5"></path>
</marker>
</defs>
<line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"></line>
</svg>
</body>
</html>
The HTML <base> element is used to say "resolve all relative URLs relative not to this page, but to a new location". In your case, you've told it to resolve relative to the directory with the HTML page.
The SVG marker-mid="url(…)" attribute is a FuncIRI Reference. When you use a value like url(#foo) that relative IRI is normally resolved relative to the current page, finding the element with the foo id. But, when you use <base>, you change where it looks.
To solve this problem, use a better value. Since your base reference is the current directory, you can simply use the name of the current file:
<line … marker-mid="url(this_page_name.html#arrow)" />
If you have a different <base> href, than what you've shown, like:
<base href="http://other.site.com/whee/" />
then you will need to use an absolute href, e.g.
<line … marker-mid="url(http://my.site.com/this_page_name.html#arrow)" />
Try with javascript:
<line id="something" />
With native:
document.getElementById('something').setAttribute('marker-mid', 'url(' + location.href + '#arrow)');
With jQuery:
$('#something').attr('marker-mid', 'url(' + location.href + '#arrow)');
It just works.
In the context of a rich web app like one built on Angular, where you need to set the <base> tag to make HTML5-style navigation work, it can get messy to try to fix that in a permanent way.
In my case, the app I was working on was showing a SVG-based interactive diagram builder that would change the app url as I selected elements therein.
What I did was to add a global event handler that would fix all url(#...) inline styles in any <path> element found in the page:
$rootScope.$on 'fixSVGReference', ->
$('path').each ->
$path = $ this
if (style = $path.attr 'style')?
$path.attr 'style', style.replace /url\([^)#]*#/g, "url(#{location.href}\#"
Then trigger this handler in key places, like when the app state changes (I'm using ui-router)
$rootScope.$on '$stateChangeSuccess', ->
$timeout (-> $rootScope.$emit 'fixSVGReference'), 5
As well as anywhere where I know there'd be new/updated paths like these. Here, the $timeout thing is to account for the fact that the DOM nodes really are changed asynchronously sometime after the $stateChangeSuccess event is triggered.
In Angular 2+, you can inject the base path in your app module instead of using the <base> tag. This resolved the issue in Edge and Firefox for me.
import { APP_BASE_HREF } from '#angular/common';
#NgModule({
providers: [{
provide: APP_BASE_HREF,
useValue: '/'
}]
})
export class AppModule { }
https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html
Ember 2.7 will replace the <base> tag with rootURL which should fix this issue.
In the meantime in my d3 for gradients I'm using the following:
.attr('fill', `url(${Ember.$(location).attr('href')}#my-gradient)`);
If you don't do this, the item you are targeting will seem to be transparent.
On Windows currently (04-2017) all Browsers behave as expected ( mask=url("#svgmask") ). Chrome, Firefox, even IE 11!! - but Edge comes up with an error.
So for Microsoft Edge you still need to give the absolute path ( mask="url(path/to/this-document.htm#svgmask)" ) for your mask ID´s when you are using a base tag in your document:
<svg viewBox="0 0 600 600" >
<defs>
<mask id="svgmask">
<image width="100%" height="100%" xlink:href="path/to/mask.svg" ></image>
</mask>
</defs>
<image mask="url(path/to/this-document.htm#svgmask)" width="600" height="600" xlink:href="path/to/image.jpg"></image>
</svg>
If you do not want want to modify / animate the svg there is a simpler solution than changing the url() parameter.
Include the svg as image:
<img src="yourpath/image.svg">
You can archive it with:
$("[marker-mid]").attr("marker-mid", function () {
return $(this).attr("marker-mid").replace("url(", "url(" + location.href);
});

Can't display any graph with Sigma.js

I want to visualize a large network graph on a web interface. After a few days of search, I decided to use Sigma.js because it looks simple and it's HTML5 compatible.
The problem is that I can't display any graph example from Sigma.js web page, even when I use the minimal code that the author has on Sigma.js's homepage. I even copy-pasted entire web pages, with right click-view code, but in vain (like this). I have pasted all the necessary files in the same folder that the simple .html file is located (css files, js files and even the .gexf file that the example needs) but I only get a page with a black rectangle and nothing more. The graph isn't displayed. What am I doing wrong?
Do I need to first build the sigma.js file, as the author mentions in the code repository of the library in GitHub? I need this tool to visualize the graph (I'm going to feed the graph with data on the fly) but I can't even experiment with some simple code! I even followed that "guide" and did every step but I can't anything working.
Webstudio: Microsoft Expression Web 4 and OS: Windows 8 Pro (I tried opening the web pages in IE10, FF17 and Chrome 23).
The div you want to have your graph has to be absolute positioned. I think it's a canvas issue.
so the html
<!DOCTYPE html>
<html>
<head>
<script src="http://sigmajs.org/js/sigma.min.js"></script>
<script src="/js/sigmatest.js"></script>
<link rel="stylesheet" href="/css/sigma.css">
</head>
<body>
<div id="sigma-parent">
<div id="sigma-example">
</div>
</div>
</body>
</html>
the css
#sigma-parent {
width: 500px;
height: 500px;
position: relative;
}
#sigma-example {
position: absolute;
width: 100%;
height: 100%;
}
the js in sigmatest.js
function init() {
var sigRoot = document.getElementById('sigma-example');
var sigInst = sigma.init(sigRoot);
sigInst.addNode('hello',{
label: 'Hello',
x: 10,
y: 10,
size: 5,
color: '#ff0000'
}).addNode('world',{
label: 'World !',
x: 20,
y: 20,
size: 3,
color: '#00ff00'
}).addEdge('hello_world','hello','world').draw();
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', init, false);
} else {
window.onload = init;
}
This probably won't help as many people, but in my case it was simply that I didn't specify x or y properties for each node. I was trying to use the forceAtlas2 algorithm to automatically "place" my nodes, not realizing they had to be drawn in some position first in order for the layout to then apply.
Make sure you have downloaded this file http://sigmajs.org/data/arctic.gexf
and refered the path properly in the code
Sigma js has browser compatibilty issue. Try updating the bowser or use some other browser.
I work with firefox and it works fine.

prettyphoto not working

I can't get it working anyone out there can help
I use this in the head
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
I use this for photos
rel="prettyPhoto[pp_gal]"><
I use this before the closing body tag
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'normal', /* fast/slow/normal */
padding: 40, /* padding for each side of the picture */
opacity: 0.35, /* Value betwee 0 and 1 */
showTitle: true, /* true/false */
allowresize: true, /* true/false */
counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
theme: 'light_rounded' /* light_rounded / dark_rounded / light_square / dark_square */
});
});
</script>
I linked the prettphoto CSS to my document
What do I do with the jquery.js and the jquery-1.3.2.min.js folders?
Make sure the js and css folders are positioned relative to your current page. For example, if you are working on http://localhost/photogallery/index.html, make sure the 3 folders included with your prettyPhoto download get extracted to http://localhost/photogallery/, and not the root of your server.
Make sure you have the prettyPhoto "images" folder. It includes a number of themes and other resources necessary for prettyPhoto to look right.
A conflicting library or version of jQuery may be stopping prettyPhoto from loading. Try running prettyPhoto on a blank page with just the necessary scripts and CSS included, and a couple image links with rel="prettyPhoto[pp_gal]". If this works, and when you bring the code back in to your page it doesn't work, you can know that something is conflicting on the page with prettyPhoto or jQuery.
Check for any errors on the page. Internet Explorer has the Developer Tools. Firefox has Firebug. Chrome has Developer tools. Search online for how to use the one particular to your favorite browser.
Like Dawson said in his number 4 answer, check to make sure you don't have any javascript errors on your page that would be stopping prettyPhoto from loading correctly.
I was banging my head against my keyboard for 2 hours b/c it wasn't working for me. In Firefox, I used Tools > Web Developer > Error Console to see that I had a JavaScript code from another widget I'm using throwing an error. I commented out that line and it worked correctly.
Check check, and check again.

Categories