It is an example whose title is "images-breadthfirst-layout" in cytoscape js
(https://github.com/cytoscape/cytoscape.js/blob/unstable/documentation/demos/images-breadthfirst-layout/code.js)
cy.on('tap', 'node', function(){
var nodes = this;
var tapped = nodes;
var food = [];
nodes.addClass('eater');
for(;;){
var connectedEdges = nodes.connectedEdges(function(el){ <-- here
return !el.target().anySame( nodes );
});
When i run this example, I have this error in chrome:
code.js:106 Uncaught TypeError: el.target is not a function
at a.<anonymous> (code.js:106)
at s.filter (cytoscape.min.js:18)
at a.connectedEdges (cytoscape.min.js:18)
at a.<anonymous> (code.js:105)
at u.<anonymous> (cytoscape.min.js:19)
at a.<anonymous> (cytoscape.min.js:19)
at t (cytoscape.min.js:21)
at cytoscape.min.js:21
how can i solve this problem?
Make sure to download Cytoscape only from the master branch or from npm. Similarly, make sure to use the demo code only from the master branch.
The docs link only to the master branch.
Related
I am currently working on a Vuejs3 application with the fabricjs library added.
Now I am trying to add an external library called fabricPublisherTools in the application. But the method/function "_registerSnaps" that is being called is somehow "undefined".
The external library gives me the following working example.
<script type="module">
import {fabricAddSnapper,fabricAddSmartGuides} from 'https://cdn.jsdelivr.net/gh/mtrudw/fabricPublisherTools/dist/fabricPublisherTools.min.js';
fabricAddSnapper();
fabricAddSmartGuides();
var canvas = new fabric.Canvas('c4');
var rect = new fabric.Rect({left: 100,top:100,width:150,height:100,fill:'blue'});
var rect2 = new fabric.Rect({left: 500,top:500,width:150,height:100,fill:'green'});
var rect3 = new fabric.Rect({left: 400,top:200,width:150,height:100,fill:'yellow'});
canvas._registerSnaps(canvas._getSmartGuides.bind(canvas));
rect.doesSnap();
rect2.doesSnap();
rect3.doesSnap();
canvas.add(rect,rect2,rect3);
</script>
The way I implemented in Vuejs3 is as follows:
<script setup>
import { onMounted } from "vue"
import { fabric } from 'fabric';
import {fabricAddSmartGuides,fabricAddSnapper,fabricAddUndoRedo} from 'https://cdn.jsdelivr.net/gh/mtrudw/fabricPublisherTools/dist/fabricPublisherTools.min.js';
let canvas;
const setupEditor = () => {
fabricAddSnapper();
fabricAddSmartGuides();
canvas = new fabric.Canvas('canvas');
canvas.setHeight(500);
canvas.setWidth(500);
canvas.backgroundColor = "#f00";
canvas.setDimensions({width: 500, height: 500});
var rect = new fabric.Rect({left: 100,top:100,width:150,height:100,fill:'blue'});
var rect2 = new fabric.Rect({left: 500,top:500,width:150,height:100,fill:'green'});
var rect3 = new fabric.Rect({left: 400,top:200,width:150,height:100,fill:'yellow'});
canvas._registerSnaps(canvas._getSmartGuides.bind(canvas));
rect.doesSnap();
rect2.doesSnap();
rect3.doesSnap();
canvas.add(rect,rect2,rect3);
canvas.renderAll();
}
onMounted(() => {
setupEditor()
})
</script>
It gives me the following error when I try to run it:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'bind')
And its about this line:
canvas._registerSnaps(canvas._getSmartGuides.bind(canvas));
When I console log "_registerSnaps" I see it's undefined which means something has not been appended/added by the library.
I just don't know if I did something wrong when I imported the library that caused the problem.
What exactly am I doing wrong?
Thank you in advance.
If bind is what's undefined, have you checked if your problem is with _getSmartGuides since that is what calls the bind() function?
You'll need to call fabricAddSmartGuides();
purely from reading the (fabricPublisherTools) source: _getSmartGuides is created in fabricAddSmartGuides(). Do you / where do you call fabricAddSmartGuides ?
I would like to ask for some help with my javascript code.
When my trigger is an tag and plain text inside it, it works. But for structural reasons I had to use a tag inside my , and that way I'm getting an error, "Uncaught (in promise) TypeError: src is undefined".
Here's the part of the JS code that the error is referring to:
// destructure values
const { link, src, artist, title, moodcover } = e.target.dataset;
const peaksSrc = src.replace('.mp3', '.json');
const res = await fetch(peaksSrc);
const { data: peaks } = await res.json();
wavesurfer.load(src, peaks);
document.body.scrollTop = 0;
What would be the solution for this problem?
Thanks in advance!
I've tried using or instead of , but that didn't help.
I was using VueJS in browser mode and am now trying to switch my code to a VueJS SPA and vue-router. I've been stuck for hours with a $refs not working anymore.
To interact with my Google Charts, I was using an absolute reference to the graph (this.$refs.villesChart) to get selected data like that:
computed: {
eventsprox() {
let eventsprox = {
select: () => {
var selection = "";
if (this.$refs.villesChart) selection = this.$refs.villesChart1.chartObject.getSelection();
if (selection.length) {
var row = selection0[0].row + 1;
this.code_commune = this.dataprox[row][4];
this.changerville(this.code_commune, this.dataprox[row][0]);
}
return false;
},
};
return eventsprox;
}
HTML code for graph:
<GChart type="BarChart" id="villesChart" ref="villesChart" :data="dataprox" :options="optionsprox" :events="eventsprox"/>
I don't know why, but in browser mode, this.$refs.villesChart is a component:
[1]: https://i.stack.imgur.com/xJ8pV.png
but now it is a proxy object, and lost its chartObject attribute:
[2]: https://i.stack.imgur.com/JyXrL.png
I'm really confused. Do you have an idea why?
And if I use the proxy object, then I get a Vue warning "Avoid app logic that relies on enumerating keys on a component instance" and it is not working in production environment.
Thanks a lot for your help!!
After hours of testing different solutions, I finally found a solution working with Vue3 and Vue-google-chart 1.1.0.
I got rid of "refs" and put the events definition and code in the data section of my Vue 3 app (instead of computed) and accessed the chart data through a component variable I used to populate it.
Here is my event code where this.dataprox is my data table for the chart:
eventsprox: {
'click': (e) => {
const barselect = parseInt(e.targetID.split('#')[2]) + 1;
this.code_commune = this.dataprox[barselect][4];
this.nom_commune = this.dataprox[barselect][0];
this.changerville(this.code_commune, this.nom_commune);
}
},
My Gchart html code:
<GChart type="AreaChart" :data="datag" :options="optionsg" :events="eventsprox"/>
I hope it can help!
I want to disable tippy when on mobile. For this I have the following script. I use it like explained in the documentation of tippy:
const mytippies = tippy('[data-tippy-content]', {
plugins: [hideOnEsc],
});
mytippies.disable();
Doing this I get error Uncaught TypeError: (0 , o.default)(...).disable is not a function what am I doing wrong?
The problem here is that the instance mytippies is an array of instances. The disable method only works on a single instance. So using a for loop I can disable Tippy for all my instances:
for (let i = 0; i < mytippies.length; i++) {
mytippies[i].disable();
}
Strange problem with Q and durandal 2.1
When i follow the instructions in Durandal docs and insert
system.defer = function (action) {
var deferred = Q.defer();
action.call(deferred, deferred);
var promise = deferred.promise;
deferred.promise = function() {
return promise;
};
return deferred;
};
When i click on a link that uses the router it freaks out:
[Q] Unhandled rejection reasons (should be empty):
["TypeError: undefined is not a function↵ at Obje…lhost:9020/Scripts/knockout-2.3.0.debug.js:954:38"]
0: "TypeError: undefined is not a function↵
at Object.composition.executeStrategy
(http://localhost:9020/Scripts/durandal/composition.js:593:39)↵
at Object.composition.inject
(http://localhost:9020/Scripts/durandal/composition.js:622:22)↵
at Object.composition.compose (http://localhost:9020/Scripts/durandal/composition.js:681:29)↵
at ko.bindingHandlers.router.update (http://localhost:9020/Scripts/durandal/plugins/router.js:1122:29)↵
at http://localhost:9020/Scripts/knockout-2.3.0.debug.js:2155:33↵
at Object.ko.utils.objectForEach (http://localhost:9020/Scripts/knockout-2.3.0.debug.js:54:17)↵
at ko.dependentObservable.disposeWhenNodeIsRemoved (http://localhost:9020/Scripts/knockout-2.3.0.debug.js:2151:34)↵
at evaluateImmediate (http://localhost:9020/Scripts/knockout-2.3.0.debug.js:1270:41)↵
at evaluatePossiblyAsync [as callback] (http://localhost:9020/Scripts/knockout-2.3.0.debug.js:1236:13)↵
at http://localhost:9020/Scripts/knockout-2.3.0.debug.js:954:38"
length: 1
__proto__: Array[0]
I am not sure what is causing the problem but if i comment out the [Q] patch it works perfectly. Is this a durandal 2.1 issue?