After upgrading from jsPlumb 1.4.1 to 1.7.10, the endpoints are far away from the nodes, but they do move with the node.
To fix it, I tried:
jsPlumbInstance = jsPlumb.getInstance({
DragOptions: {cursor: 'pointer', zIndex: 1000},
Container: $("#idContainer")
});
and in addition:
var inputEndpoint = jsPlumbInstance.addEndpoint($('#' + parent.attr('id')), {
anchor:[ 0.01 - xPadOffset, increment, -1, 0 ],
endpoint:"Rectangle",
paintStyle:{ width: padWidth, height:padAndLabelHeight/2, fillStyle:'#822' },
isTarget:true,
maxConnections: -1,
cssClass: 'inputEndpointClass',
overlays:[[ "Label", { label: name, location: [0.5, -0.32], cssClass: 'labelClass' } ]]
});
This displays the endpoints perfectly, but now they do not move with the node.
Can anyone be so kind to put me on the right track? Thank you.
This is fixed now. There were a number of problems. I work out the size of the node according to the container size and there was a problem with the calculation. Also my nodes were relative in a relative container, which caused problems. The container had a minimum height that caused a problem too.
Related
When i use CoreUI ChartBar,
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'GitHub Commits',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
},
],
}} type={'bar'} />
I am getting an error.
**
chart.esm.js:5354
Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.
at new Chart (chart.esm.js:5354:1)
at renderChart (CChart.tsx:160:1)
at CChart.tsx:242:1
at commitHookEffectListMount (react-dom.development.js:23049:1)
at invokePassiveEffectMountInDEV (react-dom.development.js:25044:1)
at invokeEffectsInDev (react-dom.development.js:27304:1)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27283:1)
at flushPassiveEffectsImpl (react-dom.development.js:27007:1)
at flushPassiveEffects (react-dom.development.js:26935:1)
at commitRootImpl (react-dom.development.js:26886:1)
**
There are no changes to the code.
It looks like core-ui is using react-chartjs-2 under the hood. It's a known issue, but I'm having trouble reproducing the error. Please check out this thread in react-chartjs-2' issues. Specifically MartinP-C's comment.
If you could provide a reproduction that would be greatly appreciated.
I was getting this error (again with React 18.0.1, in Strict Mode)
Removing Strict Mode stops the error (because Strict Mode double-invokes lifecycle functions when in dev mode? Hence re-use of canvas? https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects)
However! Strict Mode wasn't the problem itself.
I had not registered a Chart.JS component and the error being thrown ('"arc" is not a registered element') must have caused React to double-invoke and try to re-use the canvas.
Fixing the registered element error also stopped "Canvas already in use" error.
(Registering components: https://react-chartjs-2.js.org/docs/migration-to-v4#tree-shaking)
I have a slightly peculiar problem with loading my tree structure into Ember.
My models are:
book.js
- parts: DS.hasMany('part', {inverse: 'book', async: true})
part.js
- subparts: DS.hasMany('part', {inverse: 'parent_part', async: true}),
With the following API responses:
GET /api/books:
{
books: [
{id: 1, links: {parts: "/api/books/1/parts"}},
...
]
}
GET /api/books/1/parts:
{
parts: [
{
id: 1,
subparts: [10, 11]
},
{
id: 2,
subparts: []
}
]
}
The problem is in the tree nature of the parts: The book only has direct descendants id 1 and 2, but these have sub-parts on their own.
The structure as it is works but results in multiple sub-queries for each part that was not included in the /books/1/parts result. I want to avoid these queries, not only because of performance reasons but also because I will need additional query parameters which would get lost at this step... I know about coalesceFindRequests but it introduces new problems.
To rephrase the problem, Ember Data thinks that every part that is included in the /books/1/parts response should be added directly to the book:parts property. How can I still load all records of the parts tree at the same time?
I tried renaming the fields, but Ember Data assigns the records based on the model name, not the field name.
I fear that some creative adapter overriding will be necessary here. Any idea appreciated. The backend is completely under my control, so I could change things on that end, too.
You need to use a process called sideloading, which should work as you expect (I've had issues in the past with sideloading data). As mentioned in this issue, you want to split your parts into two separate arrays.
{
// These are the direct children
"parts": [{...}, {...}],
// These are the extra records
"_parts": [{...}, {...}]
}
all new jsfiddle: http://jsfiddle.net/vJxvc/2/
Currently, i query an api that will return JSON like this. The API cannot be changed for now, which is why I need to work around that.
[
{"timestamp":1406111961, "values":[1236.181, 1157.695, 698.231]},
{"timestamp":1406111970, "values":[1273.455, 1153.577, 693.591]}
]
(could be a lot more lines, of course)
As you can see, each line has a timestamp and then an array of values. My problem is, that i would actually like to transpose that. Looking at the first line alone:
{"timestamp":1406111961, "values":[1236.181, 1157.695, 698.231]}
It contains a few measurements taken at the same time. This would need to become this in my ember project:
{
"sensor_id": 1, // can be derived from the array index
"timestamp": 1406111961,
"value": 1236.181
},
{
"sensor_id": 2,
"timestamp": 1406111961,
"value": 1157.695
},
{
"sensor_id": 3,
"timestamp": 1406111961,
"value": 698.231
}
And those values would have to be pushed into the respective sensor models.
The transformation itself is trivial, but i have no idea where i would put it in ember and how i could alter many ember models at the same time.
you could make your model an array and override the normalize method on your adapter. The normalize method is where you do the transformation, and since your json is an array, an Ember.Array as a model would work.
I am not a ember pro but looking at the manual I would think of something like this:
a = [
{"timestamp":1406111961, "values":[1236.181, 1157.695, 698.231]},
{"timestamp":1406111970, "values":[1273.455, 1153.577, 693.591]}
];
b = [];
a.forEach(function(item) {
item.values.forEach(function(value, sensor_id) {
b.push({
sensor_id: sensor_id,
timestamp: item.timestamp,
value: value
});
});
});
console.log(b);
Example http://jsfiddle.net/kRUV4/
Update
Just saw your jsfiddle... You can geht the store like this: How to get Ember Data's "store" from anywhere in the application so that I can do store.find()?
I have a 3 listItems and when I click one of them I want the green bar to animate from the right to the left.
But it doesn't behave properly.. When you click nothing happens, when you click a second time (optionaly on an other row) thing just get funky.
Is there a proper solution for this?
http://jsfiddle.net/joopmicroop/6GJs4/
enyo.kind({
name:'main',
classes: "enyo-fit",
components:[
{name:'list', kind:'enyo.List', count:'3', onSetupItem:'itemSetup', components:[
{name:'listItem', kind:'listItem', ontap:'itemTapped'},
]},
],
itemTapped:function(s,e){
console.log('itemTapped',e.rowIndex);
this.$.list.prepareRow(e.rowIndex);
this.$.list.performOnRow(e.rowIndex, function(){ this.animate(); }, this.$.listItem);
this.$.list.lockRow();
this.$.list.renderRow(e.rowIndex);
},
itemSetup:function(s,e){ this.$.listItem.setText('item'+e.index); }
});
enyo.kind({
name:'listItem',
classes:'listItem',
published:{text:''},
create:function(){
this.inherited(arguments);
this.animator = new enyo.Animator({
onStep:enyo.bind(this, function(animObj){
this.$.backBar.applyStyle('width',animObj.value+'%');
}),duration:1000
});
},
components:[
{name:'backBar', classes:'animBar'},
{name:'itemContent', content:''},
],
animate:function(){
if(!this.animator.isAnimating()) this.animator.play({startValue:10, endValue:100});
},
textChanged:function(oldVal){ this.$.itemContent.setContent(this.text); },
});
(new main()).renderInto(document.body);
The biggest problem you have here is that the row ceases to have a node after the call to performOnRow(). The extra call to lockRow() isn't necessary since it's locked automatically. If you want this to work you'll need to use a different method after preparing the row or you'll need to cache the node and operate directly on the node. It's possible you could do it with some CSS animations as you would only need the node long enough to set the new value once and let the browser do the animation.
Forgot to add: Nodes are not actually created until the control is rendered. If you want to perform operations only after a node exists, overload rendered().
I have a problem with customization of Orbit from newest Foundation. From the docs:
Orbit options can only be passed in during initialization at this time.
{
timer_speed: 10000,
animation_speed: 500,
bullets: true,
stack_on_small: true,
container_class: 'orbit-container',
stack_on_small_class: 'orbit-stack-on-small',
next_class: 'orbit-next',
prev_class: 'orbit-prev',
timer_container_class: 'orbit-timer',
timer_paused_class: 'paused',
timer_progress_class: 'orbit-progress',
slides_container_class: 'orbit-slides-container',
bullets_container_class: 'orbit-bullets',
bullets_active_class: 'active',
slide_number_class: 'orbit-slide-number',
caption_class: 'orbit-caption',
active_slide_class: 'active',
orbit_transition_class: 'orbit-transitioning'
}
Mhm, great. But how to apply it? I tried
$('#slider').orbit({...});
---
$(document).foundation().orbit({...});
But nothing works. I know it's silly, but how to do it?
"Starting in 4.0.7 you can also use the data-options attribute to pass configuration settings to Orbit."
source: foundation.zurb.com/docs/components/orbit.html
Treat it like a style property:
<ul data-orbit data-options="timer_speed:2500; bullets:false;">
...
</ul>
$(document).foundation('orbit', {bullets:false});