Cytoscape.js指令不会在调整容器大小时使尺寸无效

Question

I have a cytoscape.js graph inside an angular.js directive listening (watching) for it's container div width. when I'm collapsing a side panel in my app, the container div takes the whole width of the screen, then a $watch should run, and do a cy.resize() , however it's not done as I hoped it would.

in my link function i'm calling the container

var container = angular.element(document.querySelector('#cy'));

it works, i'm getting the container, and setting up the graph and it's showing fine.

then later, when container div width changes

scope.$watch(function () {
        return document.querySelectorAll("#cy")[0].clientWidth;
    }, function (newVal, oldVal) {
        if (newVal !== oldVal) {
            if (typeof cy.resize === 'function') {
                cy.resize();
            }
        }
    });

the $watch runs as it should, the div does get wider but the container just moves aside to the newly clear area. the map isn't invalidated on .resize() , what I get is that the mouse position is calculated wrong. when I re-size the browser window it does resize properly (as the docs mention).

how can I force a resize in my case ?

Answer 1

It's very likely that your listener set up through Angular isn't working as you expect. Angular is not a reliable way to set up listeners, unless everything you're listening to lives in Angular's model and updates in sync with Angular's update cycle. That's a lot of restrictions, and I don't think Angular will work for what you want here.

Bind to proper events instead, or call cy.resize() in each of your functions that resizes the div.

Answer 2

After a long try and miss streak, we ended up doing this process

1. in the controller we hooked up to the window.onresize() event. because we used controllerAs we had to define a scope an object to watch a boolean that went true when the window got sized to a larger width, using a getter and a setter, like so

    Object.defineProperty(vm, "toggleNav", { get: function () { return navToggled; }, set: function (newValue) { navToggled = newValue; if (angular.isFunction(vm.resizeControl.onresize)) { vm.resizeControl.onresize(); } }}); vm.resizeControl = {}; 

2. in the directive we watched for the scope property ( resizeControl ) change

    scope.resizeControl.onresize = function () { if (angular.isObject(cy) && angular.isFunction(cy.resize)) { $timeout(function () { cy.resize(); }); } };