Estoy tratando de personalizar el CanvasRenderer de cytoscape estándar y me enfrento a un problema.
Cuando intento extender CanvasRenderer y luego registrarlo como extensión, cytoscape lanza una advertencia y no registra el renderizador:
cytoscape.cjs.js:844 No se puede registrar
myRendererpararendererporqueclientFunctionsya existe en el prototipo y no se puede anular
Si elimino todos los métodos que "ya existen" (según el código fuente, son todos los métodos de BaseRenderer ), el renderizador se registra correctamente, pero luego no se inicializa con otro error:
TypeError: this.init no es una función en Renderer.BaseRenderer (cytoscape.cjs.js:26770)
Bien, traigamos el init de vuelta. Pero ahora volvemos al problema original:
cytoscape.cjs.js:844 No se puede registrar
myRendererpararendererporqueinitya existe en el prototipo y no se puede anular
Así es como lo hago:
let CanvasRenderer = cytoscape('renderer', 'canvas') let MyRenderer = function (options) { CanvasRenderer.call(this, options) } MyRenderer.prototype = Object.create(CanvasRenderer.prototype) cytoscape('renderer', 'myRenderer', MyRenderer) //<- here I got the warnings and the renderer is not added.Así es como elimino las propiedades que 'ya existen':
let BaseRenderer = cytoscape('renderer', 'base'); Object.keys(BaseRenderer.prototype).forEach(function(key) { MyRenderer.prototype[key] = null });La única forma en que pude hacer que todo funcionara es alterando el código fuente de cytoscape.js eliminando la lógica que verifica la existencia de propiedades:
Desde cytoscape.js/src/extension.js :
... for (var pName in bProto) { var pVal = bProto[pName]; var existsInR = rProto[pName] != null; if (existsInR) { //when I comment this 'if' block, everything works as expected. return overrideErr(pName); } proto[pName] = pVal; // take impl from base } ...Pero eso anula el propósito de las extensiones.
Entonces, ¿cómo extender correctamente CanvasRenderer para crear un renderizador personalizado basado en él?
Estoy buscando anular métodos relacionados con dibujar bordes como findEdgeControlPoints , drawEdgePath y posiblemente algunos más.