waltz-ng/client/logical-flow/components/source-and-target-graph/source-and-target-graph.js
/**
 * Note: it is v. important the $element is an element with some width,
 * simply placing this in a element like a waltz-section will cause it
 * to render with 0x0...
 * @param $element
 * @param $window
 * @param serviceBroker
 */
it is v. important the $element is an element with some width,
simply placing this in a element like a waltz-section will cause it
to render with 0x0
@param $element
@param $window
@param serviceBroker
it is v . important the $element is an element with some width simply placing this in a element like a waltz - section will cause it to render with 0x0 @param $element @param $window @param serviceBroker
function controller($element, $window, serviceBroker) {
    const vm = initialiseData(this, initialState);
    const svgDomElem = $element.find("svg")[0];
    const svg = select(svgDomElem);
    const svgSections = prepareGraph(svg);
    const render = () => {
        if (! vm.entityRef) { return; }
        baseDimensions.graph.width = $element
            .parent()[0]
            .clientWidth;
        const tweakers = _.defaultsDeep(vm.tweakers, dfltTweakers);
        serviceBroker
            .loadAppData(CORE_API.DataTypeStore.findAll)
            .then(r => {
                const types = r.data;
                const data = {
                    logicalFlows: vm.logicalFlows || [],
                    decorators: vm.decorators || [],
                    entityRef: vm.entityRef,
                    allTypes: types
                };
                const model = mkModel(data);
                update(svgSections, model, tweakers, vm.flowClassificationsByCode);
            });
    };
    const debouncedRender = _.debounce(render, 100);
    vm.$onChanges = (changes) => {
        if(changes.changeUnits) {
            vm.changeUnitsByPhysicalFlowId = _.chain(vm.changeUnits)
                .filter(cu => cu.subjectEntity.kind === "PHYSICAL_FLOW")
                .keyBy(cu => cu.subjectEntity.id)
                .value();
        }
        debouncedRender();
    };
    let sidebarListenerUnregisterFn = null;
    vm.$onInit = () => {
        angular
            .element($window)
            .on("resize", debouncedRender);
        sidebarListenerUnregisterFn = sidebarExpanded.subscribe(debouncedRender);
    };
    vm.$onDestroy = () => {
        angular
            .element($window)
            .off("resize", debouncedRender);
        if (sidebarListenerUnregisterFn) {
            sidebarListenerUnregisterFn();
        }
    };
}
function controller ( $element , $window , serviceBroker ) { const vm = initialiseData ( this , initialState ) ; const svgDomElem = $element . find ( "svg" ) [ 0 ] ; const svg = select ( svgDomElem ) ; const svgSections = prepareGraph ( svg ) ; const render = ( ) => { if ( ! vm . entityRef ) { return ; } baseDimensions . graph . width = $element . parent ( ) [ 0 ] . clientWidth ; const tweakers = _ . defaultsDeep ( vm . tweakers , dfltTweakers ) ; serviceBroker . loadAppData ( CORE_API . DataTypeStore . findAll ) . then ( r => { const types = r . data ; const data = { logicalFlows : vm . logicalFlows || [ ] , decorators : vm . decorators || [ ] , entityRef : vm . entityRef , allTypes : types } ; const model = mkModel ( data ) ; update ( svgSections , model , tweakers , vm . flowClassificationsByCode ) ; } ) ; } ; const debouncedRender = _ . debounce ( render , 100 ) ; vm . $onChanges = ( changes ) => { if ( changes . changeUnits ) { vm . changeUnitsByPhysicalFlowId = _ . chain ( vm . changeUnits ) . filter ( cu => cu . subjectEntity . kind === "PHYSICAL_FLOW" ) . keyBy ( cu => cu . subjectEntity . id ) . value ( ) ; } debouncedRender ( ) ; } ; let sidebarListenerUnregisterFn = null ; vm . $onInit = ( ) => { angular . element ( $window ) . on ( "resize" , debouncedRender ) ; sidebarListenerUnregisterFn = sidebarExpanded . subscribe ( debouncedRender ) ; } ; vm . $onDestroy = ( ) => { angular . element ( $window ) . off ( "resize" , debouncedRender ) ; if ( sidebarListenerUnregisterFn ) { sidebarListenerUnregisterFn ( ) ; } } ; }
Note: it is v. important the $element is an element with some width,
 simply placing this in a element like a waltz-section will cause it
 to render with 0x0...
 @param $element
 @param $window
 @param serviceBroker
Note : it is v . important the $element is an element with some width simply placing this in a element like a waltz - section will cause it to render with 0x0 ... @param $element @param $window @param serviceBroker