I'm looking for a way to snap the users min and max extremes to existing points when they use the navigator slider. Is this something i can accomplish with existing options or has anyone else accomplished this? The ultimate goal here would be if i set two points in a series, for example (1365444905, 1) and (1365444919, 10) when the user slides the bar i should only ever get back 1365444905 or 1365444919.
Thanks.
Unfortunately it's not possible to do this using existing options. I think that it requires some modification in navigator mouseMoveHandler method. You can find it here: https://github.com/highslide-software/highcharts.com/blob/5b1f3b0bc492252bbe0e283ec698480dbc179ba5/js/parts/Scroller.js#L651
Here's the part of function you should take a look at:
// drag left handle
if (scroller.grabbedLeft) {
hasDragged = true;
scroller.render(0, 0, chartX - navigatorLeft, scroller.otherHandlePos);
// drag right handle
} else if (scroller.grabbedRight) {
hasDragged = true;
scroller.render(0, 0, scroller.otherHandlePos, chartX - navigatorLeft);
// drag scrollbar or open area in navigator
} else if (scroller.grabbedCenter) {
hasDragged = true;
if (chartX < dragOffset) { // outside left
chartX = dragOffset;
} else if (chartX > navigatorWidth + dragOffset - range) { // outside right
chartX = navigatorWidth + dragOffset - range;
}
scroller.render(0, 0, chartX - dragOffset, chartX - dragOffset + range);
}
Related
I'm developing a basic window frame configurator. I splitted glasses in function below. I want to change color when i clicked and get the position of clicked glass to draw openin direction lines.
I tried to understand and implement Lavrton's method(https://codesandbox.io/s/0xj7zml2zl?file=/src/index.js) but i couldn't succeed.
function glassDraw(piece, frameWidth, frameHeight) {
var glassGroup = new Konva.Group();
for (i = 0; i <piece; i++) {
var glass = new Konva.Rect({
name: 'Rect',
x: padding + (frameWidth / piece) * i,
y: padding,
width: frameWidth / piece,
height: frameHeight - padding * 2,
fill: 'lightblue',
id: 'glass'+i,
});
glassGroup.add(glass);
}
glassGroup.find("Rect").on('click', function (e) {
// get id of the cube i drag
var clickedId = e.target.attrs.id;
$('#theId').html(clickedId);
})
return glassGroup;
}
When i use getelementbyid method with id of konva element("glass"+i), it returns null. I think i need to get as a konva element.
You have to create a click listener for all of your rectangles.
for (let rect of glassGroup.children) {
rect.on('click', () => {
console.log(rect.x(), rect.y()); // current position of the object
console.log(rect.id()); // log id of the object
rect.fill('green'); // set color to green
layer.batchDraw(); // update layer (batchDraw just for better performance .draw() would work to)
})
}
Make sure you always update the stage by either call stage.draw() or layer.draw() (or batchDraw() for better performance) after changing something, otherwise your stage will not show anything of what you do.
If something with this code don't work feel free to ask.
Have a nice day.
I use the following code to move the cursor position to 5 characters from the beginning of a UITextField:
txtView.selectedRange = NSMakeRange(5, 0);
Now, if I have a cursor at an arbitrary position as shown in the image below, how can I move the cursor up, down, left and right?
Left and right should be more or less easy. I guess the tricky part is top and bottom. I would try the following.
You can use caretRect method to find the current "frame" of the cursor:
if let cursorPosition = answerTextView.selectedTextRange?.start {
let caretPositionRect = answerTextView.caretRect(for: cursorPosition)
}
Then to go up or down, I would use that frame to calculate estimated position in UITextView coordinates using characterRange(at:) (or maybe closestPosition(to:)), e.g. for up:
let yMiddle = caretPositionRect.origin.y + (caretPositionRect.height / 2)
let lineHeight = answerTextView.font?.lineHeight ?? caretPositionRect.height // default to caretPositionRect.height
// x does not change
let estimatedUpPoint = CGPoint(x: caretPositionRect.origin.x, y: yMiddle - lineHeight)
if let newSelection = answerTextView.characterRange(at: estimatedUpPoint) {
// we have a new Range, lets just make sure it is not a selection
newSelection.end = newSelection.start
// and set it
answerTextView.selectedTextRange = newSelection
} else {
// I guess this happens if we go outside of the textView
}
I haven't really done it before, so take this just as a general direction that should work for you.
Documentation to the methods used is here.
I'm using the I'm currently using the tooltip formatter function to control the look of the tooltip, including adding some custom css to create an arrow on the side of the tooltip box facing the mouse. I am also using the positioner callback to not only determine the placement of the tooltip, but when it changes from one side of the mouse to the other I'm updating the formatter callback to switch the side of the tooltip the arrow lies on (see code below). Everything works fine, except for the very first point which causes the tooltip to switch sides of the mouse. Its clear that a tooltip's "formatter" function is called before the tooltips "positioner" function ( for reasons that are probably obvious ). However, it prevents me from correctly drawing the tooltip when it changes sides. What I really need to be able to do in the positioner callback is to update the formatter function, and then redraw the tooltip. Is that possible?
positioner: function (boxWidth, boxHeight, point) {
// Set up the variables
var chart = this.chart;
var plotLeft = chart.plotLeft;
var plotTop = chart.plotTop;
var plotWidth = chart.plotWidth;
var plotHeight = chart.plotHeight;
var distance = 40;
var pointX = point.plotX;
var pointY = point.plotY;
// Determine if we need to flip the tooltip from following on the left to
// following on the right
if ((pointX - boxWidth - distance) < plotLeft) {
x = pointX + distance;
chart.tooltip.options.formatter = function () {
// UPATE THE TOOLTIP FORMATTER HERE
};
}
}
Here is a js fiddle example of the issue
http://jsfiddle.net/bteWs/
If you go slowly, and notice the very first point where the switch happens the arrow will be point the wrong direction. After that it corrects ( as described in my post ). Just looking for a solution to get the correct behavior in this case.
You can always have enabled both classes for tooltip, and just remove inproper in positioner, see: http://jsfiddle.net/bteWs/3/
Default formatter:
formatter: function () {
var s = '<div id="custom-tooltip" class="tooltip-left tooltip-right">';
var chart = null;
s += "<div style='padding:5px;color:white'>Some Tooltip</div></div>";
return s;
},
And removing:
if ((pointX - boxWidth - distance) < plotLeft) {
x = pointX + 60;
$("#custom-tooltip").removeClass('tooltip-right');
}
else {
x = Math.max(plotLeft, pointX - boxWidth - 10);
$("#custom-tooltip").removeClass('tooltip-left');
}
I had the same issue. The problem is that positioner is begin called after the formatter. I made a fix to your jsfiddle. It's a huge hack but you can see how you can overcome your problem.
In the fix, I made use of a global. You don't need to but I hacked your fiddle in a hurry. I also got rid of some of your duplicate code.
The trick is to force a refresh on the tooltip after the tooltip switch sides.
positioner: function (boxWidth, boxHeight, point) {
// Set up the variables
var chart = this.chart;
var plotLeft = chart.plotLeft;
var plotTop = chart.plotTop;
var plotWidth = chart.plotWidth;
var plotHeight = chart.plotHeight;
var distance = 40;
var pointX = point.plotX;
var pointY = point.plotY;
var refreshTooltip = false;
var previousAlign = chart.align;
if ((pointX - boxWidth - distance) < plotLeft) {
x = pointX + 60;
chart.align = "left";
}
else {
x = Math.max(plotLeft, pointX - boxWidth - 10);
chart.align = "right";
}
y = Math.min(plotTop + plotHeight - boxHeight, Math.max(plotTop, pointY - boxHeight + plotTop + boxHeight / 2));
if (previousAlign != null && chart.align != previousAlign) {
chart.tooltip.refresh(activePoint);
}
return { x: x, y: y };
}
See the complete fiddle here:
http://jsfiddle.net/anber500/bteWs/1/
Hoping someone can help me with this... I'm following examples seen here for CCMenuAdvanced but am ending up with a weird result, I see my menu and it scrolls but using the boundaryRect property I can't seem to get it to hide part of the menu and show what I want.
Here's my code:
// Setup Menu Alignment
[menuA alignItemsVerticallyWithPadding:0 bottomToTop:NO]; //< also sets contentSize and keyBindings on Mac
menuA.isRelativeAnchorPoint = YES;
menuA.boundaryRect = CGRectMake(0, 100, 230, 200);
[menuA fixPosition];
[self addChild:menuA];
I'm able to scroll and view my entire list which is good, but I can't set up an area to view only part of the menu at a time, which is what boundaryRect should do. Has anyone used this before and can give me some advice?!?
Thanks!
Well, not from the same class, but a home grown scrolling menu. I use the visibility and transparencies of the menuItems themselves. When scrolling up, if a menu label approaches the rectangle's edge, i start fading it out to 0. When the anchor point of the menuItem is outside the rectangle, i set its visibility to NO (thus cant be clicked). Same going down. Clamping is tricky. You have to set these properties when the list of menuItems changes, in case it grows shorter than the height of the boundary rectangle, or grows again greater than the rectangle. Something like this (edited, not actual code ... dont know if it compiles :) ):
-(void) fixMenuItemOpacity:(CCMenuItemLabel*) mi{
float theY = mi.position.y ;
if (fadeOutZoneHeight_<4.0f) {
if (theY> self.boundaryRect.origin.y+self.boundaryRect.size.height/2 - fadeOutZoneHeight_) {
mi.visible=NO;
} else if( theY < self.boundaryRect.origin.y-self.boundaryRect.size.height/2 + fadeOutZoneHeight_) {
mi.visible=NO;
} else {
mi.visible=YES;
}
return;
}
float delta;
float percentOpacity;
float topWindow;
float bottomWindow;
float top;
float bottom;
/*
not visible
--------------------------- top
visible, variable opacity
--------------------------- top window
opacity 100%
-------------------------- bottomWindow
visible, variable opacity
------------------------- bottom
*/
top = self.boundaryRect.origin.y + self.boundaryRect.size.height/2;
topWindow = top - fadeOutZoneHeight_;
bottom = self.boundaryRect.origin.y - self.boundaryRect.size.height/2;
bottomWindow=bottom+ fadeOutZoneHeight_;
if (theY> top ) {
mi.visible=NO;
} else if ( (theY > topWindow) && (theY < top)) {
mi.visible=YES;
delta = abs((int)top - (int)theY);
percentOpacity=delta/fadeOutZoneHeight_;
mi.opacity=(GLubyte )(255.0f*percentOpacity);
} else if( (theY <= topWindow ) && (theY >= bottomWindow ) ){
mi.opacity=255;
mi.visible=YES;
} else if ( (theY < bottomWindow) && (theY >= bottom) ){
mi.visible=YES;
delta= abs((int)bottom - (int)theY);
percentOpacity = delta/fadeOutZoneHeight_;
mi.opacity=(GLubyte ) (255.0*percentOpacity);
} else {
mi.visible=NO;
}
}
I'm trying to catch a JSON object with a mouse click event. I use ray to identify the object, but for some reason, the objects are not always identified. I suspect that it is related to the fact that I move the camera, because when I click nearby the object, i is identified.
Can you help me figure out how to set the ray correctly, in accordance with the camera move?
Here is the code :
this is the part of the mouse down event *
document.addEventListener("mousemove", onDocumentMouseMove, false);
document.addEventListener("mouseup", onDocumentMouseUp, false);
document.addEventListener("mouseout", onDocumentMouseOut, false);
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
var ray, intersections;
_vector.set((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0);
projector.unprojectVector(_vector, camera);
ray = new THREE.Ray(camera.position, _vector.subSelf(camera.position).normalize());
intersections = ray.intersectObjects(furniture);
if (intersections.length > 0) {
selected_block = intersections[0].object;
_vector.set(0, 0, 0);
selected_block.setAngularFactor(_vector);
selected_block.setAngularVelocity(_vector);
selected_block.setLinearFactor(_vector);
selected_block.setLinearVelocity(_vector);
mouse_position.copy(intersections[0].point);
block_offset.sub(selected_block.position, mouse_position);
intersect_plane.position.y = mouse_position.y;
}
}
this is the part of the camera move *
camera.position.x = (Math.cos(timer) * 10);
camera.position.z = (Math.sin(timer) * 10);
camera.lookAt(scene.position);
Hmmm, It is hard to say what your problem might be without seeing some kind of demonstration of how your program is actually acting. I would suggest looking at my demo that I have been working on today. I handle my camera, controls, and rays. I am using a JSON as well.
First you can view my demo: here to get an idea of what it is doing, what your describing sounds similar. You should be able to adapt my code if you can understand it.
--If you would like a direct link to the source code: main.js
I also have another you might find useful where I use rays and mouse collisions to spin a cube. --Source code: main.js
Finally I'll post the guts of my mouse events and how I handle it with the trackball camera in the first demo, hopefully some of this will lead you to a solution:
/** Event fired when the mouse button is pressed down */
function onDocumentMouseDown(event) {
event.preventDefault();
/** Calculate mouse position and project vector through camera and mouse3D */
mouse3D.x = mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse3D.y = mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1;
mouse3D.z = 0.5;
projector.unprojectVector(mouse3D, camera);
var ray = new THREE.Ray(camera.position, mouse3D.subSelf(camera.position).normalize());
var intersects = ray.intersectObject(maskMesh);
if (intersects.length > 0) {
SELECTED = intersects[0].object;
var intersects = ray.intersectObject(plane);
offset.copy(intersects[0].point).subSelf(plane.position);
killControls = true;
}
else if (controls.enabled == false)
controls.enabled = true;
}
/** This event handler is only fired after the mouse down event and
before the mouse up event and only when the mouse moves */
function onDocumentMouseMove(event) {
event.preventDefault();
/** Calculate mouse position and project through camera and mouse3D */
mouse3D.x = mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse3D.y = mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1;
mouse3D.z = 0.5;
projector.unprojectVector(mouse3D, camera);
var ray = new THREE.Ray(camera.position, mouse3D.subSelf(camera.position).normalize());
if (SELECTED) {
var intersects = ray.intersectObject(plane);
SELECTED.position.copy(intersects[0].point.subSelf(offset));
killControls = true;
return;
}
var intersects = ray.intersectObject(maskMesh);
if (intersects.length > 0) {
if (INTERSECTED != intersects[0].object) {
INTERSECTED = intersects[0].object;
INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
plane.position.copy(INTERSECTED.position);
}
}
else {
INTERSECTED = null;
}
}
/** Removes event listeners when the mouse button is let go */
function onDocumentMouseUp(event) {
event.preventDefault();
if (INTERSECTED) {
plane.position.copy(INTERSECTED.position);
SELECTED = null;
killControls = false;
}
}
/** Removes event listeners if the mouse runs off the renderer */
function onDocumentMouseOut(event) {
event.preventDefault();
if (INTERSECTED) {
plane.position.copy(INTERSECTED.position);
SELECTED = null;
}
}
And in order to get the desired effect shown in my first demo that I wanted, I had to add this to my animation loop in order to use the killControls flag to selectively turn on and off the trackball camera controls based on the mouse collisions:
if (!killControls) controls.update(delta);
else controls.enabled = false;