I want to create a "select and group" functionality for my KonvaJS application.
For the select functionality, I'm using this example that works well:
selecting by drawing a box around objects in konva
But the group function is not working as I expect. This is what's happening:
Example
First I create an empty group like this:
selectGroup = new Konva.Group({
x: 50,
y: 50,
draggable: true
});
When a shape is hit I add it like this:
selectGroup.add(shapeObject);
And when I finish the selection I call the Transform functionality like this:
var tr = new Konva.Transformer();
layer.add(tr);
tr.attachTo(selectGroup);
layer.draw();
I don't why when I add a shape it disappears. And when I finish and I call the transform functionality it doesn't seem to be working.
Any ideas?
Thanks to lavrton I saw that the problem was that I didn't add the selectGroup to the layer.
Right now is working fine. Problem fixed.
Related
Please have a look at
www.jsbin.com/wigokojina/1/edit?html,css,js,output
I've added custom svg icons to the konva transformer, but the middle rotator icon is draggable even if i set draggable to false. The two other icons are fine and as expected, as far as dragging is concerned.
My questions are:
How do i disable the dragging for the rotator anchor, so that the icon doesnt move?
How do i disable all event handlers for an anchor, and add one click event? Ive tried shape.off('dragmove') etc. The only thing that helps is setting listening to false, but then im prevented from adding a new event listener. I want to disable all event handlers for the top right anchor, and add one onclick listener afterwards.
Is it possible to add the icons to the shape itself using fillPatternImage? Instead of adding the icon as a new shape like im doing. If its possible, please provide an example using the jsbin.
Thanks very much :-)
At the current moment konva#4.0.16 doesn't support fully customized Konva.Transformer. But you are making a good attempt.
How do i disable the dragging for the rotator anchor, so that the icon doesn't move at all?
You can reset the position in transform event (almost as you do it). But at the current moment, for performance reasons, inside transform events all anchors has "old" positions. So you see dragging of the icon from rotater anchor. To fix the issue we can force update a transformer:
circle.on('transform', function(){
transformer.update();
for (var button in buttons) {
var selector = button.replace('_', '-');
var shape = transformer.findOne('.' + selector);
var icon = transformer.findOne('.' + selector + '-icon');
icon.position(shape.position());
icon.x(icon.x() - 5.25); icon.y(icon.y() - 5.25);
layer.batchDraw();
}
});
How do I disable all event handlers for an anchor, and add one-click event
It can be something like this:
shape.listening(false);
icon.on('click', () => {
alert('delete');
});
Demo: https://jsbin.com/galetahara/4/edit?js,output
How can I adjust the position of Select2 container so that the search box is position right over the original select element like in this website
http://www.jobnisit.com/en
It look cleaner in terms of UI in my opinion.
Ps. sorry, I can't post the image now.
There is 2 ways to do this.
1) With css:
.select2-dropdown--below {
top: -2.8rem; /*your input height*/
}
This will not affect a container (.select2-container), but will move dropdown and search field, so you will have a desired effect.
2) With js:
$('select').select2().on('select2:open', function() {
var container = .$('.select2-container').last();
/*Add some css-class to container or reposition it*/
});
This code attaches a handler to 'select2:open' event, which will be fired every time when user opens a dropdown. This method is better if you have more than one select on page.
Tested with select2 4.0.0
The proper way of positioning the dropdown is using the core feature provided by select2 plugin.
It provides us with 'dropdownParent' property to place to dropdown inside the particular element
select field: #edit-field-job-skillsets-tid
parent item: div.form-item-field-job-skillsets-tid
jQuery("#edit-field-job-skillsets-tid").select2(
{dropdownParent: jQuery('div.form-item-field-job-skillsets-tid')}
);
I am using the jQueryUI resizable widget, and have a bunch of resizable boxes on a page. When the document loads, I initialize the widget, like so:
$('.ui-draggable').resizable({
minHeight: 10, // 10 is actually the default
minWidth: 10, // 10 is actually the default
resize: function() {
showProperties(this);
},
});
However, at some point I want only some of those elements to change resize options. What I'm trying to do is this:
if (type == 'sometype')
{
console.log($('#'+elementID).resizable('option', 'handles'));
$('#'+elementID).resizable('option', 'handles', 'e,w');
console.log($('#'+elementID).resizable('option', 'handles'));
}
This indeed outputs:
e,s,se
e,w
in the console, so the event is triggered and the selector is correct, but the code doesn't actually work: in fact, the handles remain the same, namely e, s, se.
Is this because I'm using a different selector from the original init? If so, how can I change the resize options only on a subset of originally-resizable elements? And if not, what could be the problem?
Handles are actually divs added to the element on which resizable is applied. It seems that changing the option doesn't refresh these handles. Maybe there's a way to apply the changes on specific subset and refresh, but I'm not sure how.
But one quick workaround would be to hide the handles you don't want instead of changing the handle option. You would have to set handle option to all the handles you'll need, and then hide those not wanted. Like this to remove se handle for example:
$('#'+elementID).find('.ui-resizable-se').hide();
I have a draggable connected to a sortable:
$("#panelTarget").sortable({
distance: '15'
});
var element = $('<li>Hello</li>');
element.appendTo('#panelSource');
element.draggable();
element.draggable("option", "connectToSortable", '#panelTarget');
at some point, I want to make it impossible for the user to drop items onto the sortable panel (panelTarget). I'm trying this:
$('#panelTarget').sortable( "disable" );
but I can still drop elements onto it, am I not interpreting the docs correctly?:
http://jqueryui.com/demos/sortable/#method-disable
how can I block the user from dropping stuff on the panel?
Thanks
This event/action comes from the .draggable() side, so you need to disable it there, like this:
element.draggable("option", "connectToSortable", false);
In sproutcore I'm trying to change the border thickness of a div when a user mouses over it. All the other code is working but I can't find how to either access the css properties directly or attach a new classname to the div.
borderDiv: SC.View.design({
layout:{top:60, left:60, width: 400, height: 525},
classNames:"panel",
mouseEntered: function(evt) {
alert("this is working");
//
// No idea what to put here to change css properties
//
return YES
}
})
I think you can do something like
this.$().addClass()
to add any class you want.
Not exactly what I was looking for but what mostly gets the job done is using css pseudo-classes. :hover, :active, and :focus cover most bases for my use.