I would like to add a direction handle to [some] geoman leaflet markers. There are packages out there already like leaflet-editable-marker that add things like direction/transformation rulers etc to leaflet.
I want [some] outline markers for my polylines to have a direction, and I want to set this direction using those "direction handles" rulers. The rulers should look like an arrow of sorts - a short line and a head.
To set directions, I am thinking about handling dragstart, drag and dragend events.
When users click on such a marker, the editor would show the direction handle; a subsequent click will hide this handle again. Initially, my thinking was to do something like the below:
marker.on('click', (e) => {
const latlng = marker._latlng;
const directionHandleMarker = new L.circleMarker(latlng, {
draggable: true,
radius: 20,
img: {
url: 'icon.png', //image link
size: [40, 40], //image size ( default [40, 40] )
rotate: 10, //image base rotate ( default 0 )
offset: { x: 0, y: 0 }, //image offset ( default { x: 0, y: 0 } )
}
});
...
map.addLayer(directionHandleMarker);
});
The circleMarker is from 'leaflet-canvas-markers' package. It is also pretty trivial to build this arrow marker functionality without a plugin, and there are multiple reference implementations.
However, this won't give me what I want, will it? Since it is a marker, I could not drag it to adjust the angle, or could I? The geoman rotate mixin kind of does it, using cursor position to calculate the angle and using that to place the marker, rather the placing marker based on the cursor position. Would I need to drag the end of an arrow and recompute offset?
Should I add a two-point LineString and fix one point on the marker and use the other end for dragging, or is there a way to make markers [without a polyline] work?
Related
I have a graph generated using JointJs and it uses Dagre Layout provided by jointjs. Currently, the graph gets aligned from Top To Bottom which is the correct way but then the complete graph gets aligned to the left of the paper.
I need the graph to be aligned in the middle of the Paper Horizontally.
Current configuration used is this:
joint.layout.DirectedGraph.layout(graph,
{
rankDir: "TB",
marginX: 30,
marginY: 30,
clusterPadding: {
top: 10,
left: 10,
right: 10,
bottom: 10
}
}
I see that the option to make graph flow from Top to bottom is given rankDir: "TB". Is there any similar option which can align it horizontally to the middle instead of left which is by default? or any other way which can do so.
After calling directedGraph.layout you can then use Paper class to center the diagram.
const paper = new joint.dia.Paper({
height: 1000,
width: 1000,
...
});
const paperArea = paper.getArea();
const contentArea = paper.getContentArea();
paper.translate((paperArea.width - contentArea.width) / 2, (paperArea.height - contentArea.height) / 2);
This will effectively center the diagram, although care should be taken to avoid the content being larger than the paper size.
I am looking for a way to space (and move in general) objects inside a group regardless of their transformation.
In the small example i have made below, you will see 2 circles and I am attempting to space them by a certain factor.
It is ok until I rotate or resize the group and it is still ok the very first time the coordinates are changed after a transformation but calling the same function twice while the spacing is still correct, the group starts jumping all over the places..
I am using Fabric JS version: 1.7.7
Here is a sample:
https://jsfiddle.net/u0patgck/
console.clear();
var canvas = new fabric.Canvas('root');
var circles = [];
circles.push(new fabric.Circle({id: "circle1", radius: 20, fill: 'green', left: 150, top: 100}));
circles.push(new fabric.Circle({id: "circle2", radius: 20, fill: 'green', left: 200, top: 100}));
g = new fabric.Group(circles);
//once circles are added to group their coordinates change so I store their new original base coordinates in custom variables
g.forEachObject(function(obj){
obj.originalLeft = obj.getLeft();
obj.originalTop = obj.getTop();
}, g);
canvas.add(g);
canvas.renderAll();
function moveCircles(){
var space = parseFloat(document.getElementById("spacingPixels").value);
g.forEachObject(function(obj){
switch (obj.id){
case "circle1":
obj.setLeft(obj.originalLeft - space)
break;
case "circle2":
obj.setLeft(obj.originalLeft + space)
break;
default:
}
})
g.addWithUpdate();
canvas.renderAll()
}
Steps to Reproduce:
Test 1 (ok):
Click the "Move Circles" button as many times you want (circles coordinates are recalculated and the group is not "misbehaving".
Test 2 (ok first time but not second time):
Rotate the group first.
Click the move circles button ONE time (all is still good)
Click the move circles button another time (you will see the group starts moving by itself around the canvas).
Expected Behaviour:
The group should not move around or change the order of the objects inside.
The group moves erratically.
At the moment I am caching the transformations manually and restoring them after changing the coordinates (like below)
https://jsfiddle.net/0tdg1dof/
var a = {scaleX: g.getScaleX(), scaleY: g.getScaleY(), skewX: g.getSkewX(), skewY: g.getSkewY(), flipX: g.getFlipX(), flipY:g.getFlipX(), angle: g.getAngle()};
fabric.util.resetObjectTransform(g);
g.addWithUpdate();
g.setScaleX(a.scaleX);
g.setScaleY(a.scaleY);
g.setSkewX(a.skewX);
g.setSkewY(a.skewY);
g.setFlipX(a.flipX);
g.setFlipY(a.flipY);
g.setAngle(a.angle);
Is there a better way to do this?
Thank you.
AlessandroDM, I believe you did right solution, because you are manipulating just only group object. If you will not manipulate (restore) group objects (parent) you will need to do manipulation each child inside the group like angle, scale, etc. Also, you have one minor bug, if you will rotate group, and after that resize it (not diagonal controls, scaleX should not be equal to scaleY) and then click "Move Circles" your group will behave as you described in Test 2. In order to fix that you will need to set scaleX and scaleY values after all your values which you want to set:
var a = {scaleX: g.getScaleX(), scaleY: g.getScaleY(), skewX: g.getSkewX(), skewY: g.getSkewY(), flipX: g.getFlipX(), flipY:g.getFlipX(), angle: g.getAngle()};
fabric.util.resetObjectTransform(g);
g.addWithUpdate();
g.setSkewX(a.skewX);
g.setSkewY(a.skewY);
g.setFlipX(a.flipX);
g.setFlipY(a.flipY);
g.setAngle(a.angle);
g.setScaleX(a.scaleX);
g.setScaleY(a.scaleY);
It is not a fabricjs bug setting scale after all manipulations, even native HTML5 canvas required scaling after all manipulations.
I am new to using KineticJS and am using it to develop a simple 2D game which involves sprites, collision detection etc.
I need to access various properties of my sprite object (let's call it spriteObj here).
I can get to the sprite coordinates using spriteObj.getX() and spriteObj.getY() and this works perfectly.
Now I need to also retrieve the other properties of the sprite, such as height and width, but there does not seem to be a way to do it. Specifically if I have an animation within my sprite, how can I retrieve the current frame and/or the x, y, height, width of that animation frame.
What I really need is something like spriteObj.getWidth() and spriteObj.getHeight() but these do not exist. Any suggestions please? I can see nothing on the html5 tutorials page for this (see here)
Thanks,
Owen
The methods you are looking for do exist, check the KineticJS Sprite API
Here is the KineticJS Sprite Tutorial
Here are the functions you asked for:
Sprite.getX()
Sprite.getY()
Sprite.getWidth()
Sprite.getHeight()
Sprite.getIndex()
Based off of that tutorial I added some code to fit your needs, check the console.log to see the methods in action. For the width and height, although it is not necessary, you have to specify a width and height property on your spriteObj or else it will just return 0.
var blob = new Kinetic.Sprite({
x: 250,
y: 40,
image: imageObj,
animation: 'idle',
animations: animations,
frameRate: 7,
index: 0,
width: 80,
height: 100
});
And a new button to test the getIndex() function:
// stop animation
document.getElementById('stop').addEventListener('click', function () {
alert(blob.getIndex());
}, false);
jsfiddle
I've got two series in an Highchart graph. Both are handling event like mousemove (to show tooltip) and mouse click.
Unfortunatly one of those series is an area serie which block any event to be triggered by the other one.
Let's say I've got those series with those plot options :
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert ('Category: '+ this.category +', value: '+ this.y);
}
}
}
}
},
series: [{
color:'red',
data: [29.9, 51.5, 16.4, 19.2, 44.0, 16.0, 35.6, 48.5, 26.4, 4.1, 9.6, 54.4]
},
{
type:'area',
data: [39.9, 75.5, 120.4, 150.2, 130.0, 120.0, 140.6, 158.5, 216.4, 194.1, 95.6, 54.4]}
]
}
as seen in this JSFiddle
I can never click or see the tooltip on the red series points.
What I could do is to change the order of the series so the red one is over the blue one.
( like this). But I've got situations where I've got several area graphs over each other like that. In this case, change the order won't help.
Is there a way I can handle events through the fill area?
Ok I found a way that suit my need : manimulating SVG element order as indicated in this topic :
SVG re-ordering z-index (Raphael optional)
I'm using this code in the redraw event of the chart :
redraw : function(){
//get a reference on the first series svg element.
var svgSeriesParent = document.querySelectorAll('.highcharts-series')[0];
//loop on all the path drawn by highchart
var pathArray = document.querySelectorAll('path');
for (var pathIndex = 0; pathIndex < pathArray.length; pathIndex++) {
var pathObj = pathArray[pathIndex];
//if attribute fill is not "none", this is an area path.
if ($(pathObj).attr('fill') !== "none") {
//move the current fill path before the first series svg element.
svgSeriesParent.insertBefore(pathObj, svgSeriesParent.firstChild);
}
}
}
See the result in this JSFiddle
Limitation :
The fill area doesn't have the same svg group anymore thus, hidding / showing the series is broken : all the fill area are considered being part of the first series. (click in the legend to see it).
In my case I don't need to hide series so I'll go on with this solution.
The svg order manipulation is not complicated that's why I would expect highchart to manage this case : add a fillZIndex parametter doesn't seem difficult and could be pretty usefull...
Only what comes to my mind is using 4 series, 2 area and 2 lines and use index.
http://jsfiddle.net/j8qYK/3/
I can't get rid of vertical line in the end of graph.
I have replicated problem here:
http://jsfiddle.net/63BPw/4/
Color of grid lines is darkred and it's setted only in this part of js code:
grid: {
aboveData: false,
hoverable: true,
clickable: true,
color: "darkred",
borderWidth: {
top: 0,
bottom: 1,
left: 0,
right: 0
}
}
Console do not throw any errors. I don't use any margins from inside javascript file or external css files.
I think this is probably a bug.
The problem isn't in your grid setup, but in the drawing of each axis. Specifically, you setup 2 y-axes, one on the left and one on the right. Deep in the flot code, it decides whether to draw a "bar" to attach the ticks to based on whether the axis is the "innermost" or not. When you have 2 yaxes, it is incorrectly deciding that your right-positioned yaxis is not innermost, and therefore drawing a tick bar.
Relevant code, both bits are called per-axis:
In allocateAxisBoxFirstPhase:
/*note this is only called for axes that have tickLength set
but later it is checked as true/false, not undefined
(which is what you'd get if you set your yaxis tickLength = 0) */
var sameDirection = $.grep(all, function (a) {
return a && a.reserveSpace;
});
innermost = $.inArray(axis, sameDirection) == 0;
In drawGrid:
if (!axis.innermost) {
//in here it draws the tick bar
}
Workaround:
Find that !axis.innermost bit and change it to axis.innermost == false. Set tickLength = 0 in your 2nd yaxis. That's it.
I've implemented those two changes here: http://jsfiddle.net/63BPw/5/
Also, FYI I filed a bug about this: https://github.com/flot/flot/issues/1056