I've been trying to use the arbor layout. I've tried
layout: {
name:"arbor"
}
and
layout: {
name:"arbor",
liveUpdate: true,
ready: undefined,
maxSimulationTime: 4000,
fit: true,
padding: [ 50, 50, 50, 50 ],
ungrabifyWhileSimulating: true,
repulsion: undefined,
stiffness: undefined,
friction: undefined,
gravity: true,
fps: undefined,
precision: undefined,
nodeMass: undefined,
edgeLength: undefined,
stepSize: 1,
stableEnergy: function( energy ){
var e = energy;
return (e.max <= 7) || (e.mean <= 5);
}
}
In both cases the firebug console reports
arbor is not defined
http://localhost/WS/BioJS/biojs/src/main/resources/dependencies/cytoscape/jquery.cytoscapeweb.layout.arbor.js
Line 76
I'm I missing something?
is there a working example of the arbor layout usage?
You need to include arbor.js in a script tag in your HTML. The file jquery.cytoscapeweb.layout.arbor.js just interfaces arbor with Cytoscape Web. Make sure you use the version of arbor.js bundled in the Cytoscape Web ZIP if you need IE support -- arbor doesn't provide this out of the box.
The reason why arbor.js isn't embedded in jquery.cytoscapeweb.layout.arbor.js is because arbor.js needs to be in its own script tag in order for web workers to work properly. If you concatenate and minify arbor.js with your app's other scripts, arbor's path finding can break or arbor's webworkers could conflict with other webworkers in your app.
Related
I'm using version 2.15 of jsplumb in an Angular project and am trying to create straight connections between the elements. The code below initiates the instance
ngAfterViewInit() {
this.jsPlumbInstance = jsPlumb.getInstance({
Container: '.diagram'
});
// can I add other defaults here?
}
I create the connection like this
this.jsPlumbInstance.connect({
source,
target,
anchors: ['Bottom', 'Top'],
detachable: false,
endpoint: 'Dot'
});
which results in curvy lines between anchors. I tried to add a 'connector' property above setting it to 'straight' or ['straight'], but that leads to the 'unknown connector type 'straight' error. The docs here do not specify the syntax and the link to it is broken.
i had to set the connector on the instance
this.jsPlumbInstance = jsPlumb.getInstance({
Container: '.diagram',
Connector: 'Straight',
Endpoints: [
['Dot', { radius: 3 }],
['Dot', { radius: 3 }]
],
ConnectionsDetachable: true,
Anchors: ['Bottom', 'Top']
});
anyone knows how to make all elements draggable in the community edition?
I am trying to use the w-2/3 class from Tailwind CSS with HAML in a Rails .html.haml file. The forward slash is causing Rails (or HAML) to throw an exception and I don't know how to format it so it's accepted.
Is there a way to use the w-2/3 etc classes or will I have to go back to using .html.erb?
You will have to explicitly add the class, something like
%div{:class => "w-2/3"}
Note you can combine this with the shorthand syntax for classes if you want, e.g.
.foo{:class => "w-2/3"}
The class names used in Tailwind can be overwritten. This might help if you tend to use these classes frequently and don't want to write the extended version (%div{class: 'w-1/2'} or %div(class="w-1/2").
To overwrite the width classes to use _ instead of /, use the following configuration in your tailwind.config.js:
module.exports = {
theme: {
extend: {},
width: (theme) => ({
auto: 'auto',
...theme('spacing'),
'1_2': '50%',
'1_3': '33.333333%',
'2_3': '66.666667%',
'1_4': '25%',
'2_4': '50%',
'3_4': '75%',
'1_5': '20%',
'2_5': '40%',
'3_5': '60%',
'4_5': '80%',
'1_6': '16.666667%',
'2_6': '33.333333%',
'3_6': '50%',
'4_6': '66.666667%',
'5_6': '83.333333%',
'1_12': '8.333333%',
'2_12': '16.666667%',
'3_12': '25%',
'4_12': '33.333333%',
'5_12': '41.666667%',
'6_12': '50%',
'7_12': '58.333333%',
'8_12': '66.666667%',
'9_12': '75%',
'10_12': '83.333333%',
'11_12': '91.666667%',
full: '100%',
screen: '100vw',
}),
}
}
Obviously, this duplicates information from Tailwind and might make framework upgrades more cumbersome.
On attempting to integrate PhotoEditorSDK into an angular app for the first time, I'm seeing this error in the console.
My config is:
const container = document.getElementById('editor');
const editor = new $window.PhotoEditorSDK.UI.DesktopUI({
container: container,
license: '{ .. }',
assets: {
baseUrl: '/js/pesdk/assets' // <-- This should be the absolute path to your `assets` directory
},
editor: {
image: 'https://www.photoeditorsdk.com/assets/images/new/landingpage/platform_html5-4c8765e5.png',
},
style: {
width: 500,
height: 500,
},
});
The editor begins to load, the license call completes successfully, then I see:
react-dom.production.min.js:162 TypeError: t.addEventListener is not a function
at e._loadSource (PhotoEditorSDK.js:6)
at new e (PhotoEditorSDK.js:6)
at e.setImage (PhotoEditorSDK.js:73)
at e._setImage (PhotoEditorSDK.UI.DesktopUI.js:14)
at c (PhotoEditorSDK.UI.DesktopUI.js:14)
at e.setImage (PhotoEditorSDK.UI.DesktopUI.js:14)
at e.componentDidMount (PhotoEditorSDK.UI.DesktopUI.js:27)
at commitLifeCycles (react-dom.production.min.js:148)
at b (react-dom.production.min.js:156)
at t (react-dom.production.min.js:167)
The non-minified "development" react-dom file looks minified also, so this is a pain to debug.
Right now the image option must be an actual image object, not a string URL, that's the source of the error. So you need to first load the image, pass is it as an option and load the editor.
There is an angular demo project if you'd like to checkout:
https://github.com/imgly/pesdk-angular-demo
I am building a Rails 3.2.11 app with Flot. I want to render my Flot charts in PDFs using Prawn. My Flot charts render in the browser fine. I can create Prawn PDFs fine (though not with chart images yet).
I want to use the Flot canvas plugin to render my axes, etc. on the canvas so they are included when I Ajax the image data to the server using the .getCanvas() and .toDataURL() methods, but I can’t seem to get it to work.
I am using jquery.flot.min.js 0.8.0 and jquery.flot.canvas.min.js (no version indicated). In the Chrome console I see that both are loading.
My Coffeescript looks like this:
temp_plot = $.plot $("#barchart"), [
data: $("#barchart").data("bardata")
bars:
show: true
barWidth: (365/12)*24*60*60*1000*0.8
align: 'center'
],
xaxis:
mode: "time"
timeformat: "%b"
tickSize: [1, "month"]
yaxis:
position: 'right'
labelWidth: '40'
reserveSpace: true
canvas: true
barchart_canvas = temp_plot.getCanvas()
I am able to see the Ajax payload and it is indeed the Flot chart canvas, just without the axes, etc. I appreciate any advice. Thanks!
Just to be extra clear, code as Javascript looks like this:
var barchart_canvas, temp_plot;
temp_plot = $.plot($("#barchart"), [
{
data: $("#barchart").data("bardata"),
bars: {
show: true,
barWidth: (365 / 12) * 24 * 60 * 60 * 1000 * 0.8,
align: 'center'
}
}
], {
xaxis: {
mode: "time",
timeformat: "%b",
tickSize: [1, "month"]
},
yaxis: {
position: 'right',
labelWidth: '40',
reserveSpace: true
},
canvas: true
});
barchart_canvas = temp_plot.getCanvas();
UPDATE - SUCCESS
I updated Flot to 0.8.1 and included the jquery.flot.canvas.js file that came in the 0.8.1 .zip archive. (I was getting some strange rendering behavior using plugins from Flot 0.8.0 with jquery.flot.js 0.8.1, so watch out for that.)
Now my axes render on the canvas. Great! My thanks to the Flot gods!
Your options look okay, assuming (I'm not familiar with CoffeeScript) that last bit is supposed to be missing curly braces.
Your Flot version can't be 1.1, though; the latest is 0.8.1, and jquery.flot.canvas.min.js was introduced in 0.8.0. So you're using either the wrong version, or some Flot-derivative that may not support the canvas plugin.
Note that the canvas plugin currently only affects the axes; the legend is still rendered in HTML. Complete support for rendering everything on canvas will come in 0.9.
To compress Javascript and CSS files I am using Yahoo for a solution. Net (http://yuicompressor.codeplex.com/)
I have an object:
defaults = {
html: "",
opacity: 0.6,
loadOnDemand: true,
showEffect: "fade",
hideEffect: "fade"
};
Note the value 0.6
Result after compression:
defaults = {
html : "",
opacity : 0,
6,
loadOnDemand : true,
showEffect : "fade",
hideEffect : "fade"
};
I am using the task (MSBuild) for Visual Studio to compress my JS.
The following XML code:
<CompressorTask
CssFiles="#(CssFiles)"
CssOutputFile="$(cssFile)"
CssCompressionType="YuiStockCompression"
PreserveCssComments="false"
JavaScriptFiles="#(JavaScriptFiles)"
ObfuscateJavaScript="false"
PreserveAllSemicolons="true"
DisableOptimizations="Nope"
JavaScriptOutputFile="$(jsFile)"
LoggingType="ALittleBit"
IsEvalIgnored="false" />
Full code in: https://gist.github.com/1817326
looking for an answer, found this thread: http://yuicompressor.codeplex.com/discussions/243522
But did not help me much