fixed bugs making the library crash on mobile browsers

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.0.0 (2024-11-02)
+
+- Fix: customElement bug on mobile browsers
+- Fix: bugs on mobile browsers that caused so many parts of the codebase to be reimplemented
+- Added: dropshadow option for the default and landscape chart heads
+
 ## 0.0.2 (2024-10-26)
 
 - Fix: Typescript not resolving module error, and typos in the README doc.

package.json

@@ -1,14 +1,14 @@
 {
   "name": "treespider",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "An organization structure chart library for displaying organization structure in style",
   "main": "./dist/es/treeSpider.bundle.min.js",
   "author": "Abayomi Amusa",
   "types": "./dist/types/core/treeSpider.d.ts",
   "scripts": {
     "test": "NODE_OPTIONS=--experimental-vm-modules npx jest",
     "rollup": "rollup -c",
-    "rollup-watch": "rollup -w",
+    "rollup-watch": "rollup -c='./rollup.config.mjs' -w",
     "sass": "sass scss/treeSpider.scss:dist/css/treeSpider.css -w",
     "sass-c": "sass scss/treeSpider.scss:dist/css/treeSpider.css",
     "tsw": "tsc -w",

scss/treeSpider.scss

@@ -11,10 +11,6 @@
     --root-cont-height: 500px;
 }
 
-$root-gray: rgb(95, 95, 95); // useless
-$root-light-gray: rgb(187, 186, 186); // useless
-$circle-fill: rgb(170, 170, 170); // useless
-$line-gray: #545454; // useless
 $vertical-space: var(--vertical-space-var);
 
 .ts-root-wrapper-element * {
@@ -91,15 +87,13 @@ $vertical-space: var(--vertical-space-var);
 }
 
 .main-svg-el {
-    background-color: white;
     overflow: visible;
-    border-radius: 16px;
     margin: 0px !important;
-    transition: background-color .3s linear;
+    background-color: transparent;
+}
 
-    box-shadow: -1px 2px 14px 3px rgba(91, 91, 91, 0.19);
-    -webkit-box-shadow: -1px 2px 14px 3px rgba(91,91,91,0.19);
-    -moz-box-shadow: -1px 2px 14px 3px rgba(91,91,91,0.19);
+.main-svg-el g rect {
+    transition: fill .3s linear;
 }
 
 .main-svg-el.rounded-head {
@@ -114,7 +108,6 @@ $vertical-space: var(--vertical-space-var);
 }
 
 .main-svg-el .linker-line {
-    // stroke: $line-gray;
     pointer-events: none;
 }
 
@@ -155,7 +148,7 @@ $vertical-space: var(--vertical-space-var);
     flex-direction: column !important;
 }
 
-.ts-v-spider-head-wrapper > div {
+.ts-v-spider-head-wrapper > ts-element {
     display: flex;
     flex-wrap: nowrap;
     justify-content: center;
@@ -165,16 +158,16 @@ $vertical-space: var(--vertical-space-var);
     flex-shrink: 0;
 }
 
-.ts-v-spider-head-wrapper > div:first-child {
+.ts-v-spider-head-wrapper > ts-element:first-child {
     align-items: flex-end !important;
 }
 
-.ts-v-spider-head-wrapper > div:nth-child(2) {
+.ts-v-spider-head-wrapper > ts-element:nth-child(2) {
     align-items: center !important;
     padding-top: calc($vertical-space);
 }
 
-.ts-v-spider-head-wrapper > div:nth-child(2) > div {
+.ts-v-spider-head-wrapper > ts-element:nth-child(2) > ts-element {
     margin-bottom: $vertical-space/2 !important;
 }
 

src/core/treeSpider.ts

@@ -1,22 +1,23 @@
-import { IChartHead, ITreeSpiderMain, TChartHeadType, TLinkType } from "../types/MainTypes";
-import TSRootContainer from "../utils/ts-root-container.js";
-import TSElement from "../utils/ts-element.js";
-import { TElementCenterPositions, TEventType, THeadImageShape, TLinkerCircleColor, TLinkerShape } from "../types/utils.js";
-import RandomDataGenerator from "../helpers/randomDataGenerator.js";
-import ChartMainHelper from "../helpers/chart-helper.js";
+import { IChartHead, ITreeSpiderMain } from "../types/MainTypes";
+import { TChartHeadType, TDropShadow, TLinkType } from "../types/utils";
+import TSRootContainer from "../utils/ts-root-container";
+import TSElement from "../utils/ts-element";
+import { TElementCenterPositions, TEventType, THeadImageShape, TLinkerCircleColor, TLinkerShape } from "../types/utils";
+import RandomDataGenerator from "../helpers/randomDataGenerator";
+import ChartMainHelper from "../helpers/chart-helper";
 
 // color handler
-import ColorHandler from "../helpers/colorHandler.js";
+import ColorHandler from "../helpers/colorHandler";
 
 // trees
-import DefaultTree from "../trees/default.tree.js";
-import VerticalSpiderWalkTree from "../trees/vSpiderWalk.tree.js";
-import HorizontalTreeSpider from "../trees/hSpider.tree.js";
-import HorizontalSpiderWalkTree from "../trees/hSpiderWalk.tree.js";
-import CellarTreeSpider from "../trees/cellarSpider.tree.js";
-import GoldenRodSpider from "../trees/goldenRodSpider.tree.js";
-import RadialSpiderLeg from "../trees/radialSpiderLeg.tree.js";
-import UITools from "../utils/ui-tools.js";
+import DefaultTree from "../trees/default.tree";
+import VerticalSpiderWalkTree from "../trees/vSpiderWalk.tree";
+import HorizontalTreeSpider from "../trees/hSpider.tree";
+import HorizontalSpiderWalkTree from "../trees/hSpiderWalk.tree";
+import CellarTreeSpider from "../trees/cellarSpider.tree";
+import GoldenRodSpider from "../trees/goldenRodSpider.tree";
+import RadialSpiderLeg from "../trees/radialSpiderLeg.tree";
+import UITools from "../utils/ui-tools";
 import * as d3 from "d3"
 
 
@@ -48,7 +49,7 @@ class TreeSpider extends EventTarget {
      */
     protected options: ITreeSpiderMain = {
         targetContainer: '',
-        width: '900px',
+        width: '100%',
         height: '500px',
         placeEl: 'override',
         tree_data: undefined,
@@ -92,6 +93,16 @@ class TreeSpider extends EventTarget {
         verticalSpace: '120px',
         font_link: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap",
         font_name: "Lato",
+        dropshadow: {
+            x: "-50%",
+            y: "-50%",
+            width: "200%",
+            height: "200%",
+            dx: 1,
+            dy: 1,
+            stdDeviation: 4,
+            floodColor: "rgba(91, 91, 91, 0.19)",
+        }
     }
 
     constructor (options: ITreeSpiderMain) {
@@ -121,7 +132,7 @@ class TreeSpider extends EventTarget {
      * Method to programatically initialize TreeSpider
      */
     public initialize() {
-        this.targetRootContainer = document.querySelector(this.options.targetContainer);
+        this.targetRootContainer = d3.select(this.options.targetContainer).node() as HTMLElement;
         if (this.targetRootContainer === null) throw new Error(this.libraryName + ": target container not found");
         this.targetRootContainer.setAttribute('data-tree-spider-initialized', this.instance_unique_id);
 
@@ -174,9 +185,9 @@ class TreeSpider extends EventTarget {
             .attr("rel", "stylesheet");
         }
 
-        preconnect != undefined && document.head.appendChild(preconnect.node() as HTMLLinkElement);
-        crossorgin_preconnect != undefined && document.head.appendChild(crossorgin_preconnect.node() as HTMLLinkElement);
-        fontLink != undefined && document.head.appendChild(fontLink.node() as HTMLLinkElement);
+        preconnect != undefined && (d3.select('head').node() as HTMLHeadElement).appendChild(preconnect.node() as HTMLLinkElement);
+        crossorgin_preconnect != undefined && (d3.select('head').node() as HTMLHeadElement).appendChild(crossorgin_preconnect.node() as HTMLLinkElement);
+        fontLink != undefined && (d3.select('head').node() as HTMLHeadElement).appendChild(fontLink.node() as HTMLLinkElement);
     }
 
     protected setObjectValue (objectParent: Object, value: Object) {
@@ -217,6 +228,7 @@ class TreeSpider extends EventTarget {
         this.chartHelper.auto_display_tree_in_step = this.options.auto_display_tree_in_step as boolean;
         this.chartHelper.tree_level_step = this.options.tree_level_step as number;
         this.chartHelper.tree_link_type = this.options.tree_link_type as TLinkType;
+        this.chartHelper.dropshadow = this.options.dropshadow as TDropShadow;
         this.chartHelper.emitEvent = this.emitEvent.bind(this);
 
         this.colorHandler = new ColorHandler({
@@ -238,7 +250,7 @@ class TreeSpider extends EventTarget {
      * The method to reset the zoom to the default zoom state
      */
     public resetZoom() {
-        const first_svg_el = (d3.select(`[data-ts-unique-id='${this.instance_unique_id}'] .root-svg-el > g`)!.node() as SVGSVGElement)!.getBoundingClientRect()
+        const first_svg_el = (d3.select(`[data-ts-unique-id='${this.instance_unique_id}'] .root-svg-el > g`)!.node() as SVGSVGElement)!.getBoundingClientRect();
         this.center_elem(first_svg_el as DOMRect, this.tree_default_point_position)
     }
 
@@ -331,6 +343,7 @@ class TreeSpider extends EventTarget {
     private bindPanning () {
         const root_cont_rect = this.rootWrapperContainer?.getBoundingClientRect();
 
+        // zoom filter removed because of issue on mobile browsers
         const zoomFilter = (event: any) => {
             event.preventDefault();
             return (!event.ctrlKey || event.type === 'wheel') && !event.button;
@@ -347,21 +360,20 @@ class TreeSpider extends EventTarget {
         }
 
         this.zoom_instace = d3.zoom()
-            .filter(zoomFilter)
+            // .filter(zoomFilter) // filter removed because of issue on mobile browsers
             .extent([[0, 0], [root_cont_rect!.width, root_cont_rect!.height]])
             .on("zoom", zoomed)
             .on('end', (e: any) => {
                 this.rootWrapperContainer!.style.setProperty('--ts-root-container-cursor', 'grab')
             })
 
-
         root_container_el.call(this.zoom_instace).on("dblclick.zoom", (e: any) => null);
     }
 
-    private center_elem (rect: DOMRect, position: TElementCenterPositions = 'center') {
+    private center_elem (rect: DOMRect, position?: TElementCenterPositions) {
         const root_container_el = d3?.select(`[data-ts-unique-id='${this.instance_unique_id}']`) as any;
 
-        this.tree_default_point_position == '' as TElementCenterPositions && (this.tree_default_point_position = position);
+        (this.tree_default_point_position == '' as TElementCenterPositions && position != undefined) && (this.tree_default_point_position = position);
 
         const root_cont_rect = root_container_el.node()?.getBoundingClientRect();
         const inner_cont_rect = this.tsInnerContainer?.getBoundingClientRect();
@@ -375,20 +387,20 @@ class TreeSpider extends EventTarget {
         let moveX = 0;
         let moveY = 0;
 
-        if (position == 'center') {
+        if ((position || this.tree_default_point_position) == 'center') {
             moveX = rel_posX - offsetMoveX;
             moveY = rel_posY - offsetMoveY;
-        }else if (position == 'top') {
+        }else if ((position || this.tree_default_point_position) == 'top') {
             moveX = rel_posX - offsetMoveX;
             moveY = rel_posY - 10;            
-        }else if (position == 'bottom') {
+        }else if ((position || this.tree_default_point_position) == 'bottom') {
             moveX = rel_posX - offsetMoveX;
             const el_chunk_sizes_y = (root_cont_rect.height / 2) - (rect.height/2)
             moveY = (rel_posY - (offsetMoveY + el_chunk_sizes_y)) + 10;            
-        }else if (position == 'left') {
+        }else if ((position || this.tree_default_point_position) == 'left') {
             moveX = rel_posX - 10;
             moveY = rel_posY - offsetMoveY;
-        }else if (position == 'right') {
+        }else if ((position || this.tree_default_point_position) == 'right') {
             const el_chunk_sizes_x = (root_cont_rect.width / 2) - (rect.width/2)
             moveX = (rel_posX - (offsetMoveX + el_chunk_sizes_x)) + 10;
             moveY = rel_posY - offsetMoveY;
@@ -410,15 +422,10 @@ class TreeSpider extends EventTarget {
      * @param color - The color value to set the chart heads to, you can pass any CSS color values to it
      */
     public updateChartHeadBg(color: string) {
-        if (this.options.tree_type == 'goldenRod' || this.options.tree_type == 'radialSpiderLeg') {
-            this.rootWrapperContainer?.querySelectorAll('.main-svg-el').forEach(el => (el.querySelector('rect') as SVGRectElement).style.fill = color);
-            this.addEventListener('chart_head.expanded', () => 
-                this.rootWrapperContainer?.querySelectorAll('.main-svg-el').forEach(el => (el.querySelector('rect') as SVGRectElement).style.fill = color));
-        }else{
-            this.rootWrapperContainer?.querySelectorAll('.main-svg-el').forEach(el => (el as SVGSVGElement).style.backgroundColor = color);
-            this.addEventListener('chart_head.expanded', () => 
-                this.rootWrapperContainer?.querySelectorAll('.main-svg-el').forEach(el => (el as SVGSVGElement).style.backgroundColor = color));
-        }
+        if(this.options.chart_head_type == 'rounded') return;
+        this.rootWrapperContainer?.querySelectorAll('.main-svg-el').forEach(el => (el.querySelector('rect') as SVGRectElement).style.fill = color);
+        this.addEventListener('chart_head.expanded', () => 
+            this.rootWrapperContainer?.querySelectorAll('.main-svg-el').forEach(el => (el.querySelector('rect') as SVGRectElement).style.fill = color));
     }
 
     /**
@@ -450,31 +457,27 @@ class TreeSpider extends EventTarget {
      * The method to start rotating the chart clockwisely
      */
     public startStopRotateCW() {
-        // once=false, anti=false
         this.currentChartUI?.animate_chat()
     }
 
     /**
      * The method to start rotating the chart anti-clockwisely
      */
     public startStopRotateACW() {
-        // once=false, anti=false
         this.currentChartUI?.animate_chat(false, true)
     }
 
     /**
      * The method to rotate the chart once clockwisely
      */
     public rotateOnceCW() {
-        // once=false, anti=false
         this.currentChartUI?.animate_chat(true)
     }
 
     /**
      * The method to rotate the chart once clockwisely
      */
     public rotateOnceACW() {
-        // once=false, anti=false
         this.currentChartUI?.animate_chat(true, true)
     }