ISSUE-297: D3JS once v/s Jquery Once fix + small supporting code fixes

js/d3viz_strawberryfield.js

@@ -1,11 +1,11 @@
-(function ($, Drupal, drupalSettings, d3, d3plus) {
+(function ($, Drupal, drupalSettings, d3, d3plus, once) {
     {
         'use strict';
 
         Drupal.strawberryfield_collapsible_tree = function(data, selector) {
 
             const root = d3.hierarchy(data);
-            const margin = {top: 40, right: 100, bottom: 40, left: 100};
+            const margin = {top: 40, right: 100, bottom: 40, left: 120};
             const width = 940 - margin.right - margin.left;
             const height = 1024 - margin.top - margin.bottom;
             const dx = 10;
@@ -36,7 +36,7 @@
 
             const svg = d3.select(selector).append("svg")
                 .attr("viewBox", [0, 0, width, height])
-                .style("font", "0.45em sans-serif")
+                .style("font", "0.37em sans-serif")
                 .style("user-select", "none");
 
             var columns = svg.append("g").attr("transform", "translate(40,40)");
@@ -188,7 +188,7 @@
                         lines = lines.length > 0 ? lines : [text.text()];
                         var line = [],
                         lineNumber = 0,
-                        lineHeight = 1.1, // ems
+                        lineHeight = 1.2, // ems
                         x = text.attr("x"),
                         y = text.attr("y"),
                         dy = parseFloat(text.attr("dy"));
@@ -217,20 +217,25 @@
         }
 
         Drupal.behaviors.d3viz = {
-            attach: function (context, settings) {
-                $('#visualized').once('d3viz')
-                    .each(function (index, value) {
-                        var element_id = $(this).attr("id");
-                        console.log(drupalSettings.strawberry_keyname_provider);
-                        const data = JSON.parse(drupalSettings.strawberry_keyname_provider);
-                        return new Promise(function() {
-                            $('#visualized').empty();
-                            d3.collapsible_tree(data, '#visualized');
-                        });
-                    })
+          attach: function (context, settings) {
+            const visualizedtoAttach = once('sbf_d3viz', '#visualized');
+            $(visualizedtoAttach).each(function (index, value) {
+              var element_id = $(this).attr("id");
+              const data = JSON.parse(drupalSettings.strawberry_keyname_provider);
+              return new Promise(function () {
+                $('#visualized').empty();
+                d3.collapsible_tree(data, '#visualized');
+              });
+            })
+          },
+          detach: function detach(context, settings, trigger) {
+            // Thanks debugger, if not i would have ended using "unload"
+            if (trigger === 'serialize') {
+              const visualizedtoDeattach = once.remove('sbf_d3viz', '#visualized');
             }
+          }
         }
     }
-})(jQuery, Drupal, drupalSettings, d3, d3plus);
+})(jQuery, Drupal, drupalSettings, d3, d3plus, once);
 
 

src/Form/keyNameProviderOverviewForm.php

@@ -152,10 +152,6 @@ public function ajaxSimulate(array &$form, FormStateInterface $form_state) {
 
       $response = new AjaxResponse();
 
-      // Remove the .once() added flag so we can reload our Tree via 3DJS.
-      // @See js/d3viz_strawberryfield.js -> Drupal.behaviors.d3viz
-      $response->addCommand(new InvokeCommand('#visualized', 'removeOnce', ['d3viz']));
-
       $settings['strawberry_keyname_provider'] = json_encode($this->generatePopulatedTree($preview_node));
       $response->addCommand(new SettingsCommand(['strawberry_keyname_provider' => []], TRUE));
       $response->addCommand(new SettingsCommand($settings, TRUE));
@@ -429,4 +425,4 @@ protected function generatePopulatedTree(ContentEntityInterface $entity): array
     }
     return $node;
   }
-}
+}

strawberryfield.libraries.yml

@@ -17,7 +17,8 @@ strawberryfield.d3viz:
   dependencies:
     - core/jquery
     - core/drupal
+    - core/once
     - core/drupalSettings
     - strawberryfield/d3js
     - strawberryfield/d3jsplus
-    - core/drupal.form
+    - core/drupal.form