change automatic positioning of ports - jointjs

With Rappid 1.6 trial I used getPortattrs to change the position of the ports.
Instead of attrs[portSelector] = { ref: '.body', 'ref-y': (index + 0.5) * (1 / total) };, I use my own rule.
But with Rappid V2 this is not working any more and I can’t figure out how to do it.
Any hints?

There is completely new approach to ports since JointJS 1.0 (it's part of the Rappid V2). It should be compatible with shapes from the older versions, however it's recommended to use the new port api instead.
ports in jointjs 1.0:
can be added to any shape (introduced new api on shapes)
pre-defined layouting functions for port positions and port labels
better performance
for more information about api visit http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#dia.Element.ports
layouting and port positions: http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#dia.Element.ports

Related

DOm.Rect with Chrome DevTools Protocol?

What are some specific uses of dom. Rect or what can it be used for?
I want to use this API to select nodes in the DOM...DOM.Rect
It's just a type that is used in the DOM to represent a rectangular region. It's not much used - you can see a list of places it is referenced in Chrome APIs here: https://vanilla.aslushnikov.com/?DOM.Rect. As you can see, it's not much. And you can't use it to select nodes.

How can I adjust the obfuscation of the Azure indoor map?

How can I adjust the obfuscation of an Azure indoor map?
As per tutorial (https://learn.microsoft.com/en-us/azure/azure-maps/how-to-use-indoor-module), the zoom level on load HTML is defined as:
new atlas.Map("map-id", {....
... zoom: 19,
});
The indoor map will only show on zoomlevel 19 or a higher value.
If I scroll (zoom out) of the map or change the base zoomlevel value in the HTML,
the building details are immediately no longer visible, only an outline remains.
Thanks for the help!
Currently it only shows details at zoom levels 19+. I don't believe their is an option to change this currently, but it is being looked into.
Curious about the need here. Does your building cover a very large area?
Do you want to be able to zoom in past level 22? Is so add maxZoom: 24 to the map options when loading.

Display Ports Dynamically in JointJs

Is it possible to show ports programmatically in JoinJS? This is what I want to do.
Using RappidJs.
Would like to not show ports in Stencil.
Show the ports after dropping cell on paper.
I see API for addPort and removePort but don't see anything around hide / display.
Please try setting the port opacity attribute to show ports only after dropping to paper.
attrs: {
'.port-body': {
opacity: 1 // or 0
}

Replacing port circle with custom image, devs.Model

I am new to jointjs. I am working with shapes as instances of joint.shapes.devs.Model and am trying to replace the circle, representing an in/out port with a custom image. I would like to keep the current functionality where it is possible to create a new arrow by dragging the circle, snaplinks, and the rest of the great functionality offered by JointJs. The only thing I would like to do is to replace the magnet/inPort/circle with an image. Is this possible? If so, how?
Regards
It is indeed possible. The best way would be to look at how the joint.shapes.devs.Model is defined here: https://raw.githubusercontent.com/clientIO/joint/master/plugins/shapes/joint.shapes.devs.js and create your own custom shape that has the SVG <image> element in the ports instead of the current <circle>.

Best web technology for building dynamic charts

I need to build a custom designed bar chart that displays some simple data. Below are my requirements. Can anyone suggest the best web technology for my requirements.
high browser compatibility
ability to draw shapes
ability to fill shapes with gradients
ability to have onclick and onmouseover events for the different shapes (bars in the chart).
Thanks guys. I was thinking of using svg but looking for suggestions.
How about Raphaël - it's SVG/VML.
It says:
Browser compatibility:
Raphaël currently supports Firefox
3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
Ability to draw shapes
circle, rect, ellipse, image, text, path
Ability to fill shapes with gradients
yes
Ability to have onclick and onmouseover events
yes:
... every graphical object you
create is also a DOM object, so you
can attach JavaScript event handlers
or modify them later.
Everything in the reference
On top of that, there's a plugin called gRaphael which makes the creation of charts easier.
Simple data - Google Charts API or Google Visualization API may suit you.
Details for all features of image charts can be found on the Chart feature list
You may also take a look at the comparison of the Charts API and the Visualization API.
Another candidate of course is JQuery SVG - if you're already familiar with jquery you may prefer this one.
There's a comparison of JQuery SVG and Raphaël on SO:
jQuery SVG vs. Raphael
I recommend using Adobe Flex. Below is an example of how easy pie chart creation can be in Flex:
<mx:Panel title="Pie Chart">
<mx:PieChart id="myChart"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:series>
<mx:PieSeries
field="Amount"
nameField="Expense"
labelPosition="callout"
/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{myChart}"/>
Based on your criteria:
high browser compatibility: Flex is used on more than 95% of all browsers and behaves the same in all browsers. No more need to check if your web app is running in ie, firefox, chrome, etc... because any browser that has a flash player is compatible.
ability to draw shapes: Flash's greatest strength is the ability to draw. Charts are completely customizable and skinnable to achieve the look you need.
Ability to fill shapes with gradients - done easily by setting style attributes or a custom skin.
ability to have onclick and onmouseover events for the different shapes - see this link for some easy ways to create user interactions with charts.
Hi i hope this link may help you i found it while searching for a solution similar to what you're looking for:
http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart
i'm trying gRaphael, i'm having difficulties on finding documentation though. you have to read the code and use the exploded instead of the min.js
I would like to share jquery.jqplot.js. It has lots of jQuery options, but depends on other plugins such as syntaxhighliter etc.

Resources