Patch: reduced bundle size by 300kb

Author: Akalanka47000

src/components/workspace/crosshairs.tsx

@@ -1,5 +1,5 @@
 import { memo, useEffect, useState } from "react";
-import * as d3 from "d3";
+import { pointer } from "d3";
 import { ids } from "@/constants";
 
 export const Crosshairs = ({ render }) => {
@@ -8,9 +8,9 @@ export const Crosshairs = ({ render }) => {
   const [enabled, setEnabled] = useState(false);
 
   const move = (e: Event) => {
-    const pointer = d3.pointer(e);
-    setX(pointer[0]);
-    setY(pointer[1]);
+    const ptr = pointer(e);
+    setX(ptr[0]);
+    setY(ptr[1]);
   };
 
   useEffect(() => {

src/components/workspace/cursor.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import * as d3 from "d3";
+import { pointer } from "d3";
 import { ids } from "@/constants";
 import { resizeCursors } from "@/hooks/interactions";
 import { isWithinBounds } from "@/utils";
@@ -16,9 +16,9 @@ export const Cursor = () => {
   const Cursor = useSelector((state: any) => state.editor.cursor);
 
   const move = (e) => {
-    const pointer = d3.pointer(e);
-    const x = pointer[0];
-    const y = pointer[1];
+    const ptr = pointer(e);
+    const x = ptr[0];
+    const y = ptr[1];
     const workspace = document.getElementById(ids.workspace)?.getBoundingClientRect();
     const zoomControls = document.getElementById(ids.zoomControls)?.getBoundingClientRect();
     const panControls = document.getElementById(ids.panControls)?.getBoundingClientRect();

src/components/workspace/elements/index.tsx

@@ -1,5 +1,5 @@
 import { memo, useEffect, useMemo, useRef } from "react";
-import * as d3 from "d3";
+import { select } from "d3";
 import { default as isEqual } from "lodash/isEqual";
 import { twMerge } from "tailwind-merge";
 import { dataAttributes } from "@/constants";
@@ -41,7 +41,7 @@ export const Element: React.FC<IElementProps> = ({
 
   useEffect(() => {
     if (!ref.current || consumer.mode !== "designer") return;
-    const node = d3.select(ref.current);
+    const node = select(ref.current);
     if (type === ElementType.Seat) {
       handleSeatDrag(node);
     } else if (type === ElementType.Text) {

src/components/workspace/elements/utils.ts

@@ -1,4 +1,4 @@
-import * as d3 from "d3";
+import { drag, select } from "d3";
 import { dataAttributes } from "@/constants";
 import { resizeCursors } from "@/hooks/interactions";
 import { IPopulatedSeat } from "@/types";
@@ -28,8 +28,8 @@ export const elements = {
   [ElementType.Image]: Image
 };
 
-export const handleDrag = d3.drag().on("drag", function (event) {
-  const me = d3.select(this);
+export const handleDrag = drag().on("drag", function (event) {
+  const me = select(this);
   const controls = d3Extended.selectById(`${me.attr("id")}-controls`);
   const x = +me.attr("x") + event.dx;
   const y = +me.attr("y") + event.dy;
@@ -40,8 +40,8 @@ export const handleDrag = d3.drag().on("drag", function (event) {
   controls.attr("cy", center.y);
 });
 
-export const handleSeatDrag = d3.drag().on("drag", function (event) {
-  const me = d3.select(this);
+export const handleSeatDrag = drag().on("drag", function (event) {
+  const me = select(this);
 
   const x = +me.attr("cx") + event.dx;
   const y = +me.attr("cy") + event.dy;
@@ -58,23 +58,23 @@ export const handleSeatDrag = d3.drag().on("drag", function (event) {
   label.attr("y", +label.attr("y") + event.dy);
 });
 
-export const handleTextDrag = d3.drag().on("drag", function (event) {
-  const me = d3.select(this);
+export const handleTextDrag = drag().on("drag", function (event) {
+  const me = select(this);
   me.attr("x", +me.attr("x") + event.dx);
   me.attr("y", +me.attr("y") + event.dy);
 });
 
-export const handleShapeDrag = d3.drag().on("drag", function (event) {
-  const me = d3.select(this);
+export const handleShapeDrag = drag().on("drag", function (event) {
+  const me = select(this);
   if (resizeCursors.includes(me.style("cursor"))) return;
   const x = +me.attr("x") + event.dx;
   const y = +me.attr("y") + event.dy;
   me.attr("x", x);
   me.attr("y", y);
 });
 
-export const handlePolylineDrag = d3.drag().on("drag", function (event) {
-  const me = d3.select(this);
+export const handlePolylineDrag = drag().on("drag", function (event) {
+  const me = select(this);
   const points = me
     .attr("points")
     .split(" ")

src/utils/d3.ts

@@ -1,4 +1,4 @@
-import * as d3 from "d3";
+import { pointer, select, selectAll, selection, zoom, zoomIdentity, zoomTransform } from "d3";
 
 declare module "d3" {
   interface Selection<GElement extends d3.BaseType, Datum, PElement extends d3.BaseType, PDatum> {
@@ -9,13 +9,13 @@ declare module "d3" {
   }
 }
 
-d3.selection.prototype.moveToFront = function () {
+selection.prototype.moveToFront = function () {
   return this.each(function () {
     this.parentNode.appendChild(this);
   });
 };
 
-d3.selection.prototype.moveToBack = function () {
+selection.prototype.moveToBack = function () {
   return this.each(function () {
     const firstChild = this.parentNode.firstChild;
     if (firstChild) {
@@ -24,24 +24,29 @@ d3.selection.prototype.moveToBack = function () {
   });
 };
 
-d3.selection.prototype.map = function (callback) {
+selection.prototype.map = function (callback) {
   const results = [];
   this.each(function (_, i) {
-    results.push(callback(d3.select(this), i));
+    results.push(callback(select(this), i));
   });
   return results;
 };
 
-d3.selection.prototype.forEach = function (callback) {
+selection.prototype.forEach = function (callback) {
   this.each(function (_, i) {
-    callback(d3.select(this), i);
+    callback(select(this), i);
   });
 };
 
 export const d3Extended = {
-  ...d3,
+  pointer,
+  select,
+  selectAll,
+  zoom,
+  zoomIdentity,
+  zoomTransform,
   selectById(id: string): d3.Selection<Element, {}, HTMLElement, any> {
-    return d3.select(`[id='${id}']`);
+    return select(`[id='${id}']`);
   },
   getNodeCenter(node: any) {
     if (node.attr("cx")) {

src/utils/index.ts

@@ -1,4 +1,4 @@
-import * as d3 from "d3";
+import { zoomTransform } from "d3";
 import { ids, selectors } from "@/constants";
 
 export * from "./d3";
@@ -35,7 +35,7 @@ export const getRelativeWorkspaceClickCoords = (e: any) => {
 
 export const getRelativeClickCoordsWithTransform = (e: any) => {
   const coords = getRelativeWorkspaceClickCoords(e);
-  const transform = d3.zoomTransform(document.querySelector(selectors.workspaceGroup));
+  const transform = zoomTransform(document.querySelector(selectors.workspaceGroup));
   return {
     x: (coords.x - transform.x) / transform.k,
     y: (coords.y - transform.y) / transform.k