Disable pan and zoom individually

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kateter-platform/graphica",
-  "version": "1.0.87",
+  "version": "1.0.88",
   "source": "./src/index.ts",
   "description": "A tool for advanced graphing and visualization",
   "repository": {

src/Components/Derived/Node.ts

@@ -6,11 +6,13 @@ import Text from "../Text";
 
 export type NodeOptions = CircleOptions & {
   label?: string;
+  color?: number;
 };
 
 const defaultNodeOptions: NodeOptions = {
   ...defaultShapeOptions,
   label: "",
+  color: 0xfaa307,
 };
 
 type Edge = {
@@ -19,6 +21,18 @@ type Edge = {
   weight?: number;
 };
 
+type ConnectOptions = {
+  directed: boolean;
+  value: number | undefined;
+  color: number;
+};
+
+const defaultConnectOptions: ConnectOptions = {
+  directed: false,
+  value: undefined,
+  color: 0x080007,
+};
+
 class Node extends Circle {
   adjacencyList: Edge[];
   label?: Text;
@@ -75,7 +89,9 @@ class Node extends Circle {
    * @param directed - Booleean for whether the edge is directed (directed edges will also have curve)
    * @param value - Number for eeight/value of the edge
    */
-  connectTo(other: Node, directed = false, value?: number): void {
+  connectTo(other: Node, options?: ConnectOptions): void {
+    const { directed, value, color } = { ...defaultConnectOptions, ...options };
+
     if (!this.isAdjacentTo(other) && !(!directed && other.isAdjacentTo(this))) {
       const dx = other.position.x - this.position.x;
       const dy = other.position.y - this.position.y;
@@ -95,7 +111,8 @@ class Node extends Circle {
           {
             arrowhead: directed,
             curve: directed ? 2 : 0,
-            label: value !== undefined ? value.toString() : "",
+            label: value?.toString() ?? "",
+            color: color,
           }
         );
         this.adjacencyList.push({ node: other, line: line, weight: value });
@@ -154,7 +171,11 @@ class Node extends Circle {
       }
 
       if (!directed) {
-        other.connectTo(this, false);
+        other.connectTo(this, {
+          directed: false,
+          value: undefined,
+          color: 0x080007,
+        });
       }
     }
   }

src/Components/LegendText.ts

@@ -5,7 +5,6 @@ type LegendTextOptions = {
 };
 
 const defaultLegendTextOptions = {
-
   shape: "circle",
   color: "#faa307",
   useStates: false,

src/Core.ts

@@ -28,6 +28,8 @@ const ORBIT_CONTROL_OPTIONS = {
 type GraphicaOptions = {
   root: HTMLElement;
   disableControls: boolean;
+  disableZoom: boolean;
+  disablePan: boolean;
   defaultZoom: number;
   defaultPosition: InputPosition;
   minZoom: number;
@@ -38,6 +40,8 @@ type GraphicaOptions = {
 const defaultGraphicaOptions: GraphicaOptions = {
   root: document.body,
   disableControls: false,
+  disableZoom: false,
+  disablePan: false,
   defaultZoom: 50,
   defaultPosition: [0, 0],
   minZoom: 1,
@@ -68,6 +72,8 @@ class Core {
     const {
       root,
       disableControls,
+      disableZoom,
+      disablePan,
       defaultZoom,
       minZoom,
       maxZoom,
@@ -111,7 +117,8 @@ class Core {
 
     const controls = new OrbitControls(this.camera, this.renderer.domElement);
     controls.enableRotate = false;
-    controls.enablePan = true;
+    controls.enablePan = !disablePan;
+    controls.enableZoom = !disableZoom;
     controls.mouseButtons = ORBIT_CONTROL_OPTIONS;
     controls.minZoom = minZoom;
     controls.maxZoom = maxZoom;