Correções e melhorias

format.php

@@ -104,7 +104,7 @@ if (!empty($displaysection)) {
             $renderer->print_graph_teacher_view($course, null, null, null, null);  
         }
     } else {
-        $renderer->print_multiple_section_page($course, null, null, null, null);  
+        $renderer->print_graph_teacher_view($course, null, null, null, null); 
     }
 }
 

renderer.php

@@ -112,63 +112,341 @@ class format_competencegraph_renderer extends format_section_renderer_base {
             $active = 'tab_graph';
             print_tabs( array($maintabs), $active );
 
-            echo $this->get_js_dependencies_sigma_graph();
-            $this->print_test_graph($course, $sections, $mods, $modnames, $modnamesused);
+            //echo $this->get_js_dependencies_sigma_graph();
+            //$this->print_test_graph($course, $sections, $mods, $modnames, $modnamesused);
+
+            echo '<script src="https://d3js.org/d3.v4.min.js"></script>';
+            $this->print_nodes_graph($course, $sections, $mods, $modnames, $modnamesused);
+        } else {
+            echo '<script src="https://d3js.org/d3.v4.min.js"></script>';
+            $this->print_nodes_graph($course, $sections, $mods, $modnames, $modnamesused);
         }
     }
 
     public function print_nodes_graph($course, $sections, $mods, $modnames, $modnamesused) {
+        echo '<script>';
+
+        echo 'var svgContainer = d3.select("#region-main").append("svg")
+                .attr("width", 800)
+                .attr("height", 1000);';
+
+        echo 'svgContainer.append("svg:defs").append("svg:marker")
+                .attr("id", "triangle")
+                .attr("refX", 36)
+                .attr("refY", 6)
+                .attr("markerWidth", 30)
+                .attr("markerHeight", 30)
+                .attr("markerUnits","userSpaceOnUse")
+                .attr("orient", "auto")
+                .append("path")
+                .attr("d", "M 0 0 12 6 0 12 3 6")
+                .style("fill", "#9e9e9f");';
+
+        echo 'var jsonCircles = [';
 
         $context = context_course::instance($course->id);
 
         $colors = ['#617db4', '#668f3c', '#c6583e', '#b956af', '#fcba03', '#03fcf0', '#fc0339', '#a6ffc8', '#000000'];
 
-        if (has_capability('moodle/course:update', $context)) {
 
-            // Print the competencies as name section:
-            $list_competencies = course_competency::list_course_competencies($course->id);
+        // Print the competencies as name section:
+        $list_competencies = course_competency::list_course_competencies($course->id);
 
-            $all_mod_info_printed = array();
-            $modinfo = get_fast_modinfo($course);
+        $all_mod_info_printed = array();
+        $modinfo = get_fast_modinfo($course);
+
+        $count = 0;
+        $atual_competence = 0;
+        $vet_id = 0;
+        
+        $distancia_quadrantes = 100;
+        $tamanho_quadrante = 250;
+        $quadrante_da_vez = 1;
+        
+        $para_y = 0;
+        $para_x = 0;
 
-            $count = 0;
+        $arestas = [];
 
-            foreach ($list_competencies as $competence) {
-                $idcompetence = $competence->get('competencyid');
-                api::read_competency($idcompetence)->get('shortname');
+        foreach ($list_competencies as $competence) {
+            $idcompetence = $competence->get('competencyid');
+            api::read_competency($idcompetence)->get('shortname');
 
-                $list_modules = course_module_competency::list_course_modules($idcompetence, $course->id);
+            $list_modules = course_module_competency::list_course_modules($idcompetence, $course->id);
 
-                foreach ($list_modules as $item) {
-                    array_push($all_mod_info_printed, $item);
-                }
+            foreach ($list_modules as $item) {
+                array_push($all_mod_info_printed, $item);
+            }
 
-                foreach ($list_modules as $modnumber) {
             
-                    $mod = $modinfo->cms[$modnumber];
+            if ($quadrante_da_vez % 2 != 0) {
+                $para_y = $quadrante_da_vez / 2 * ($distancia_quadrantes + $tamanho_quadrante) - 100;
+                $para_x = 0;
+            } else {
+                $para_y -= 00;
+                $para_x = $distancia_quadrantes + $tamanho_quadrante;
+            }
 
-                    echo "g.nodes.push({
-                        id: 'n".($mod->id . $count)."',
-                        label: '".$mod->name."',
-                        x: Math.random(),
-                        y: Math.random(),
-                        size: 1,
-                        color: '".$colors[$count]."'
-                      });\n";
+            $para_x = intval($para_x);
+            $para_y = intval($para_y);
 
+            $linha = 1;
+            $contPorLinha = 1;
+            $contItens = 1;
+
+            $andou = 0;
+            
+            foreach ($list_modules as $modnumber) {
+                $andou ++;
+
+                $mod = $modinfo->cms[$modnumber];
+                
+                
+                $teste = new moodle_url($mod->url);
+                
+                if ($contPorLinha == 4) {
+                    $contPorLinha = 1;
+                    $linha ++;
                 }
-                $count++;
-            }
 
-            $list_mod_without_competences = array();
-            foreach ($modinfo->cms as $tempmod) {
-                if (!in_array($tempmod->id, $all_mod_info_printed)) {
-                    array_push($list_mod_without_competences, $tempmod->id);
+                $xx = -500;
+                $yy = -500;
+                switch ($contItens) {
+                    case 1: 
+                        $xx = 100;
+                        $yy = 100;
+                        break;
+                    case 2: 
+                        $xx = 180;
+                        $yy = 10;
+                        break;
+                    case 3: 
+                        $xx = 305;
+                        $yy = 45;
+                        break;
+                    case 4: 
+                        $xx = 280;
+                        $yy = 150;
+                        break;
+                    case 5: 
+                        $xx = 175;
+                        $yy = 170;
+                        break;
+                    case 6: 
+                        $xx = 80;
+                        $yy = 250;
+                        break;
+                    case 7: 
+                        $xx = 240;
+                        $yy = 260;
+                        break;
+                }
+
+                echo '
+                { "vet_id": '.$vet_id.', "cm_id": '.$mod->id.', "x_axis": ' . ($para_x + ($xx)) . ', "y_axis": ' . ($para_y + ($yy)) .', "radius": 25, "color" : "'.$colors[$count].'", "name": "'.$mod->name.'", "icon": "'.$mod->get_icon_url().'", "url": "'.$mod->url.'" },';
+                
+                
+                if ($mod->availability) {
+                    
+                    $temp = json_decode($mod->availability);
+
+                    for ($k = 0; $k < count($temp->c); $k++) {
+                        array_push($arestas, [$temp->c[$k]->cm, $mod->id]);
+                    }
+                    
                 }
+
+
+                $contPorLinha ++;
+                $contItens ++;
+                $vet_id ++;
+                
+
+            }
+
+            if ($andou != 0) {
+                $count ++;
+                $quadrante_da_vez ++;
+            }
+            
+        }
+
+        $list_mod_without_competences = array();
+        foreach ($modinfo->cms as $tempmod) {
+            if (!in_array($tempmod->id, $all_mod_info_printed)) {
+                array_push($list_mod_without_competences, $tempmod->id);
             }
+        }
+
+        echo '];';
+
+        echo "var tempCircles = jsonCircles;";
+
+
+        for ($i = 0; $i < count($arestas); $i++) {
+            /*print '
+            ' . $arestas[$i][0];*/
+            // $arestas[$i][0] -> dependência
+            // $arestas[$i][1] -> recurso que depende do [0]
+
+            echo "var dependencia = " . $arestas[$i][1] . ";";
+            echo "var depende = " . $arestas[$i][0] . ";";
+            echo "var x1 = 0; var x2 = 0; var y1 = 0; var y2 = 0;";
+            echo '
+                for (i = 0; i < tempCircles.length; i++) {
+                    if (tempCircles[i].cm_id == depende) {
+                        x1 = tempCircles[i].x_axis;
+                        y1 = tempCircles[i].y_axis;
+                        break;
+                    }
+                }
+
+                for (i = 0; i < tempCircles.length; i++) {
+                    if (tempCircles[i].cm_id == dependencia) {
+                        x2 = tempCircles[i].x_axis;
+                        y2 = tempCircles[i].y_axis;
+                        break;
+                    }
+                }
+            ';
+            
 
+            echo 'svgContainer.append("line")
+                    .attr("x1", x1)
+                    .attr("y1", y1)
+                    .attr("x2", x2)
+                    .attr("y2", y2)
+                    .attr("stroke-width", 2)
+                    .attr("stroke", "#9e9e9e")
+                    .attr("marker-end", "url(#triangle)");';
+
+                    
 
         }
+        
+        echo 'var circles = svgContainer.selectAll("circle")
+        .data(jsonCircles)
+        .enter()
+        .append("circle");';
+
+        echo 'var circleAttributes = circles
+            .attr("cx", function (d) { return d.x_axis; })
+            .attr("cy", function (d) { return d.y_axis; })
+            .attr("r", function (d) { return d.radius; })
+            .style("fill", function(d) { return d.color; })
+            .on("click", function(d) {
+                openId(d.vet_id);
+                console.log(d.url);
+            });';
+        
+        echo "for (var i = 0; i < tempCircles.length; i++) {
+            var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
+            svgimg.setAttributeNS(null,'height','25');
+            svgimg.setAttributeNS(null,'width','35');
+            svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href', tempCircles[i].icon);
+            svgimg.setAttributeNS(null,'x', tempCircles[i].x_axis - 18);
+            svgimg.setAttributeNS(null,'y', tempCircles[i].y_axis - 12);
+            svgimg.setAttributeNS(null, 'visibility', 'visible');
+            svgimg.setAttributeNS(null, 'id', tempCircles[i].vet_id);
+            svgimg.onclick = function (e) {
+                openId(e.originalTarget.id);
+            };
+        
+            document.getElementsByTagName('svg')[0].append(svgimg);
+        }";
+
+        echo "
+        function openId(vet_id) {
+            $('#janela').remove();
+            $('#sup_janela').append($(\"<iframe src='\" + tempCircles[vet_id].url + \"' id='janela'>\"  ));
+           modal.style.display = 'block';
+           
+        }";
+
+        print ''; 
+
+        print "</script>";
+
+        print '<button id="modal-btn"> click me, I make a modal</button><div class="modal">
+        <div class="modal-content">
+          <div class="close-btn">&times;</div>
+          <div id="sup_janela"><iframe src="" id="janela"></iframe></div>
+        </div>
+      </div>';
+
+    print '<style>
+    svg circle, svg image {
+        cursor: pointer;
+    }
+    .modal {
+        display: none;
+        position: fixed; 
+        padding-top: 50px;
+        left: 0; 
+        top: 0;
+        width: 100%;
+        height: 100%; 
+        background-color: rgb(0, 0, 0);
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+      #modal-btn  {
+          display: none;
+      }
+      #janela {
+        height: 100%;
+        border: none;
+        width: 100%;
+      }
+      #sup_janela {
+        height: 100%;
+        width: 100% !important;
+      }
+
+      .modal-content {
+        position: relative; 
+        background-color: white;
+        padding: 20px; 
+        margin: auto; 
+        width: 85%;
+        height: 90%;  
+        -webkit-animation-name: animatetop;
+        -webkit-animation-duration: 0.4s;
+        animation-name: animatetop;
+        animation-duration: 0.4s
+      }.close-btn {
+        float: right; 
+        color: lightgray;  
+        font-weight: bold;
+        text-align: right;
+        font-size: 2em;
+        margin-top: -20px;
+        margin-right: -5px;
+        cursor: pointer;
+      }.close-btn:hover {
+        color: darkgray;
+      }@-webkit-keyframes animatetop {
+        from {top:-300px; opacity:0} 
+        to {top:0; opacity:1}
+      }@keyframes animatetop {
+        from {top:-300px; opacity:0}
+        to {top:0; opacity:1}
+      }</style>';
+
+      print '<script>
+      var modalBtn = document.getElementById("modal-btn") ;
+      var  modal = document.querySelector(".modal");
+      var  closeBtn = document.querySelector(".close-btn");
+      modalBtn.onclick = function(){
+        
+      }
+      closeBtn.onclick = function(){
+        modal.style.display = "none";
+      }
+      window.onclick = function(e){
+        if(e.target == modal){
+          modal.style.display = "none";
+        }
+      }</script>';
 
     }
 
@@ -273,9 +551,10 @@ class format_competencegraph_renderer extends format_section_renderer_base {
             
             $mod = $modinfo->cms[$modnumber];
 
-            if ($mod->availability)
-            echo $modnumber . ':: ';
-            print_r($mod->availability);
+            /*if ($mod->availability) {
+                echo $modnumber . ':: ';
+                print_r($mod->availability);
+            }*/
 
             if ($ismoving and $mod->id == $USER->activitycopy) {
                 // do not display moving mod
@@ -500,17 +779,16 @@ class format_competencegraph_renderer extends format_section_renderer_base {
         echo '<div id="container">
         <style>
           #graph-container {
-            top: 0;
+            top: 4em;
             bottom: 0;
             left: 0;
             right: 0;
-            position: absolute;
+            border: 1px solid red;
           }
         </style>
         <div id="graph-container"></div>
       </div>';
       echo "<script>
-      // generate a random graph
       var i,
           s,
           img,
@@ -545,11 +823,8 @@ class format_competencegraph_renderer extends format_section_renderer_base {
       s = new sigma({
         graph: g,
         renderer: {
-          // IMPORTANT:
-          // This works only with the canvas renderer, so the
-          // renderer type set as canvas is necessary here.
           container: document.getElementById('graph-container'),
-          type: 'canvas'
+          type: 'svg'
         },
         settings: {
           minNodeSize: 1,
@@ -557,7 +832,9 @@ class format_competencegraph_renderer extends format_section_renderer_base {
           minEdgeSize: 0.1,
           maxEdgeSize: 2,
           enableEdgeHovering: true,
-          edgeHoverSizeRatio: 2
+          edgeHoverSizeRatio: 2,
+          sideMargin: 0,
+          enableCamera: false
         }
       });
       </script>