How to add new property to a custom Edge shape - mxgraph

I need to add a new property to a custom Edge shape (which extends mxConnector) to change color of the Edge, basing on that property value.
Example is below:
function ExecutorEdge()
{
mxConnector.call(this);
};
mxUtils.extend(ExecutorEdge, mxConnector);
ExecutorEdge.prototype.customProperties = [
{name: 'trxSort', dispName: 'Transaction Sort', type: 'enum', defVal:'orig',
enumList:[
{val:'orig', dispName:'Original'},
{val:'info', dispName:'Informational'},
{val:'doc', dispName:'Documental'}
]}
];
mxCellRenderer.registerShape('executorEdge', ExecutorEdge);
I managed to do the same thing for custom shape which extends mxEllipse but with Edge the property doesn't even occur on properties table.

My bad, I was setting my new shape to endArrow property not shape. Using the code in question description and creating Edge template as below works fine. New custom property is addedd successfully.
this.createEdgeTemplateEntry('shape=executorEdge;html=1;', 50, 50, '', 'Executor Link', null, tags)

Related

Cesium model loading from GLB/GLTF not loading material

I've generated a generated a GLB file using khronos's SharpGLTF libraries and have got the model loading in cesium, the model appears correctly. The problem is the material for the model does not show. I have tested the generated GLB in other viewers and the material does show.
I'm using the following code in cesium:
var entity = viewer.entities.add({
name : 'url_here',
position : center,
orientation : orientation,
model : {
uri : 'url_here',
minimumPixelSize : 128,
maximumScale : 20000,
}
});
also tried
var model = scene.primitives.add(Cesium.Model.fromGltf({
id: 'here',
url: 'url here'
modelMatrix : modelMatrix,
scale : 1.0,
}));
I've tried using the color modifiers for cesium and the only option that responds is "color" which doesn't help as it doesn't apply any lighting to the color.
Below is a picture of what cesium is outputting. However there should be more effects to the material than just red. It seems to respect only KnownChannel.BaseColor and that's it.
Any ideas?

Tablesorter Zebra not working after deleting a row

$(function() {
// NOTE: $.tablesorter.theme.bootstrap is ALREADY INCLUDED in the jquery.tablesorter.widgets.js
// file; it is included here to show how you can modify the default classes
$.tablesorter.themes.bootstrap = {
// these classes are added to the table. To see other table classes available,
// look here: http://getbootstrap.com/css/#tables
table : 'table table-bordered table-striped',
caption : 'caption',
// header class names
header : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
sortNone : '',
sortAsc : '',
sortDesc : '',
active : '', // applied when column is sorted
hover : '', // custom css required - a defined bootstrap style may not override other classes
// icon class names
icons : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
iconSortAsc : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
filterRow : '', // filter row class; use widgetOptions.filter_cssFilter for the input/select element
footerRow : '',
footerCells : '',
even : '', // even row zebra striping
odd : '', // odd row zebra striping
sortMultiSortKey: 'shiftKey',
};
$('#resetsort').click(function(e) {
$("#receipts").trigger('sortReset').trigger('applyWidgets');
return false;
});
// call the tablesorter plugin and apply the uitheme widget
$("#receipts").tablesorter({
// this will apply the bootstrap theme if "uitheme" widget is included
// the widgetOptions.uitheme is no longer required to be set
theme : "blue",
widthFixed: true,
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
// widget code contained in the jquery.tablesorter.widgets.js file
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
widgets : [ "uitheme", "filter", "zebra" ],
widgetOptions : {
// using the default zebra striping class name, so it actually isn't included in the theme variable above
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
zebra : ["even", "odd"],
// reset filters button
filter_reset : ".reset",
// extra css class name (string or array) added to the filter element (input or select)
filter_cssFilter: "form-control",
// set the uitheme widget to use the bootstrap theme class names
// this is no longer required, if theme is set
// ,uitheme : "bootstrap"
}
})
.tablesorterPager({
// target the pager markup - see the HTML block below
container: $(".ts-pager"),
// target the pager page select dropdown - choose a page
cssGoto : ".pagenum",
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
removeRows: false,
// output string - default is '{page}/{totalPages}';
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
});
});
function yeah() {
return confirm('Are you sue you want to delete?');
$("#receipts").trigger('applyWidgets');
return false;
}
Hi,
Newbie here running Tablesorter also with Filter & Sort. Everything working perfectly (including reset buttons). As a bit of background, Im using a DotNet Nuke site with a module that delivers the rows of data.
Part of each row is a hyperlink that fires deleting a row. It also includes a section where I can insert some JavaScript.
Problem is when I delete a row, the zebra widget doesn't work. (All rows are white)
Other part of pressing the delete hyperlink is that Are you sure message come up.
My understanding is best approach here is to create a function since 2 actions need to be performed.
Function Yeah is my attempt. The page also has a resetsort button which works fine.
Ive tried putting my function just below the resetsort button but that didnt have any effect.
Thanks in advance for any assistance in getting this function going.
The sortReset method should update the widgets automatically after being applied, so I'm not sure why it isn't happening in this case.
Anyway, when a "sortReset" is triggered, some processing needs to occur, so using "applyWidgets" immediately after won't works because there needs to be a delay.
The "sortReset" trigger does include a callback, so try this code:
$("#receipts").trigger('sortReset', [function(){
$('#receipts').trigger('applyWidgets');
}]);
I'll try to figure out why this isn't happening internally when I get some free time.

How to set width to SimplePolylineGeometry primitive in CesiumJS

I have this code, which adds polyline primitive to scene.
function createPolyline(startPosition, endPosition) {
Cesium.SimplePolylineGeometry({
positions : [startPosition, endPosition]
});
var geometry = Cesium.SimplePolylineGeometry.createGeometry(polyline);
return scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : geometry,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.SPRINGGREEN)
}
}),
appearance : new Cesium.PerInstanceColorAppearance()
}));
}
How do I set width of this polyline?
The recommended way to add a polyline is with the Entity API, like this
var greenLine = viewer.entities.add({
polyline : {
positions : [startPosition, endPosition],
width : 5,
material : Cesium.Color.SPRINGGREEN
}
});
But, if you want to skip the Entity layer and use the Primitive Graphics layer directly, you can do that too. Your sample code above has some issues. First, you're calling the Cesium.SimplePolylineGeometry constructor without the new keyword, and without saving the result, and this is not the correct use pattern for this kind of code. Second, the SimplePolylineGeometry class itself does not support line widths greater than what the WebGL implementation supports, which on Windows machines running ANGLE, is only 1 pixel wide. To get around this limitation, use the normal (non-simple) polylines, like this:
var polylines = scene.primitives.add(new Cesium.PolylineCollection());
var polyline = polylines.add({
positions : Cesium.PolylinePipeline.generateCartesianArc({
positions : [startPosition, endPosition]
}),
material : Cesium.Material.fromType('Color', {
color : Cesium.Color.SPRINGGREEN
}),
width: 5
});
SimplePolylineGeometry does not support line width. You need to use PolylineGeometry instead and pass the "width" options to the constructor. Also, you should be using PolylineColorAppearance as your appearance, not PerInstanceColorAppearance.

In OL3, vector data layer not visible after map setCenter or zoom

Migrating a map to use OL3. When I call map.getView().setCenter or map.getView().zoom on the map, the map behaves correctly, but my vector data layer is no longer visible. I have to do a MouseWheelZoom interaction on the map and then the data layer shows up. This is similar to the issue found in this unanswered Stackoverflow post (How to reload WMTS Tiles after progromattically changing the map center and zoom?) except my map tiles render properly, it is my vector layer that is not visible.
I am creating the WMS tiles layer and map with this:
div = #get 'element'
layers = [ new (ol.layer.Tile)(
title: 'Imagery'
source: new (ol.source.TileWMS)(
url: WMS_VMAP_MAP_SERVER_URL
name: 'VMAP'
params:
LAYERS: 'basic'
FORMAT: 'image/png'
TRANSPARENT: true)) ]
map = new (ol.Map)(
interactions: ol.interaction.defaults().extend([ new (ol.interaction.Select)(style: selectedIconStyle) ])
controls: ol.control.defaults().extend([ new (ol.control.ScaleLine)(units: 'nautical') ])
layers: layers
target: div
view: new (ol.View)(
projection: 'EPSG:4326'
center: [
0
0
]
zoom: 1
maxResolution: 0.703125))
an individual feature is created using this:
feature = new ol.Feature({
geometry: new ol.geom.Point([lng, lat], 'XY'),
title: 'some title'
latitude: lat
longitude: lng
})
vectorSource.addFeature feature
the vector layer is add using this:
vectorLayer = new (ol.layer.Vector)(
source: vectorSource #new (ol.source.Vector)({})
style: circleIconStyle #my defined icon style
id: 'MYDATA'
)
map.addLayer vectorLayer
and when the following event fires...
map.on('singleclick', (e) ->
map.forEachFeatureAtPixel(e.pixel, ((feature, layer) ->
...
)
)
...as part of the event handler I am doing this:
map.getView().setCenter [
feature.get('longitude')
feature.get('latitude')
]
map.getView().setZoom 3
The map centers and zooms correctly, but my vector layer data does not show up by default. Is there something else I am not doing or calling in order to refresh the data layers after setCenter or zoom on the view? or is it something else I have incorrect in how I am setting this up?
thanx
Fixed. The issue was the coordinates were being treated as strings for the Geometry and not numbers. The fix is to ensure that where coordinates are being set, that they are explicitly treated as a number to remove ambiguity from the equation. So everywhere I set a lat/lon (or latitude/longitude) in the map code, I used Number(lat) and Number(lon) instead.
Props to Eric Lemoine for his answering of another issue located at http://comments.gmane.org/gmane.comp.gis.openlayers.devel.ol3/4773 as that is where I saw his solution to that marker display problem and thought it might address mine as well. And it did.

Save canvas to image with all its object and back to canvas with all objects back for editing them

I am using fabrics JS for adding objects on canvas and then saving it in form of image. Now i want bring the image back to edit mode inside canvas.
You can get detailed idea about it at http://www.13thandmars.com/logo_studio/builder.html?project_id=17b36372c43c04044dd804454dfdf6e8
Add text will add an object to tshirt in above link.
You can save canvas as JSON and then can load it back from JSON
var myJson = JSON.stringify(canvas.toJSON(['left', 'top', 'lockMovementX', 'lockMovementY']));
canvas.loadFromJSON(myJson, function () {
//render the canvas
canvas.renderAll();
});
if i am not mistaken you say that the font property is missing?
if this is you problem please take a look ,
fabric DOES NOT convert all the object properties to Json when you convert the canvas with canvas.toJSON() , so when you are going to get back your canvas , the objects will not be complete (your custom properties will missing),
for example : myObj.material , myObj.size, myObj.clotheType etc.
you have to say to the prototype toObject function which properties you want to be converted also with canvas.toJSON(), in your code, the following is a snippet of my code:
fabric.Object.prototype.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
objectId: this.objectId,//my custom property
_controlsVisibility:this._getControlsVisibility(),//i want to keep controlsVisibility for my reasons
typeTable:this.typeTable,//my custom property
txtType:this.txtType, //my custom property
customOptions:this.customOptions//my custom object property
});
};
i hope that helps.