@radix-solid-js/rect 0.1.0

package/dist/index.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+// src/observe-element-rect.ts
+function observeElementRect(elementToObserve, callback) {
+  const observedData = observedElements.get(elementToObserve);
+  if (observedData === void 0) {
+    observedElements.set(elementToObserve, {
+      rect: {},
+      callbacks: [callback]
+    });
+    if (observedElements.size === 1) {
+      rafId = requestAnimationFrame(runLoop);
+    }
+  } else {
+    observedData.callbacks.push(callback);
+    callback(elementToObserve.getBoundingClientRect());
+  }
+  return () => {
+    const observedData2 = observedElements.get(elementToObserve);
+    if (observedData2 === void 0) return;
+    const index = observedData2.callbacks.indexOf(callback);
+    if (index > -1) {
+      observedData2.callbacks.splice(index, 1);
+    }
+    if (observedData2.callbacks.length === 0) {
+      observedElements.delete(elementToObserve);
+      if (observedElements.size === 0) {
+        cancelAnimationFrame(rafId);
+      }
+    }
+  };
+}
+var rafId;
+var observedElements = /* @__PURE__ */ new Map();
+function runLoop() {
+  const changedRectsData = [];
+  observedElements.forEach((data, element) => {
+    const newRect = element.getBoundingClientRect();
+    if (!rectEquals(data.rect, newRect)) {
+      data.rect = newRect;
+      changedRectsData.push(data);
+    }
+  });
+  changedRectsData.forEach((data) => {
+    data.callbacks.forEach((callback) => callback(data.rect));
+  });
+  rafId = requestAnimationFrame(runLoop);
+}
+function rectEquals(rect1, rect2) {
+  return rect1.width === rect2.width && rect1.height === rect2.height && rect1.top === rect2.top && rect1.right === rect2.right && rect1.bottom === rect2.bottom && rect1.left === rect2.left;
+}
+
+exports.observeElementRect = observeElementRect;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/observe-element-rect.ts"],"names":["observedData"],"mappings":";;;AAUA,SAAS,kBAAA,CAEP,kBAEA,QAAA,EACA;AACA,EAAA,MAAM,YAAA,GAAe,gBAAA,CAAiB,GAAA,CAAI,gBAAgB,CAAA;AAE1D,EAAA,IAAI,iBAAiB,MAAA,EAAW;AAC9B,IAAA,gBAAA,CAAiB,IAAI,gBAAA,EAAkB;AAAA,MACrC,MAAM,EAAC;AAAA,MACP,SAAA,EAAW,CAAC,QAAQ;AAAA,KACrB,CAAA;AAED,IAAA,IAAI,gBAAA,CAAiB,SAAS,CAAA,EAAG;AAC/B,MAAA,KAAA,GAAQ,sBAAsB,OAAO,CAAA;AAAA,IACvC;AAAA,EACF,CAAA,MAAO;AACL,IAAA,YAAA,CAAa,SAAA,CAAU,KAAK,QAAQ,CAAA;AACpC,IAAA,QAAA,CAAS,gBAAA,CAAiB,uBAAuB,CAAA;AAAA,EACnD;AAEA,EAAA,OAAO,MAAM;AACX,IAAA,MAAMA,aAAAA,GAAe,gBAAA,CAAiB,GAAA,CAAI,gBAAgB,CAAA;AAC1D,IAAA,IAAIA,kBAAiB,MAAA,EAAW;AAEhC,IAAA,MAAM,KAAA,GAAQA,aAAAA,CAAa,SAAA,CAAU,OAAA,CAAQ,QAAQ,CAAA;AACrD,IAAA,IAAI,QAAQ,EAAA,EAAI;AACd,MAAAA,aAAAA,CAAa,SAAA,CAAU,MAAA,CAAO,KAAA,EAAO,CAAC,CAAA;AAAA,IACxC;AAEA,IAAA,IAAIA,aAAAA,CAAa,SAAA,CAAU,MAAA,KAAW,CAAA,EAAG;AACvC,MAAA,gBAAA,CAAiB,OAAO,gBAAgB,CAAA;AAExC,MAAA,IAAI,gBAAA,CAAiB,SAAS,CAAA,EAAG;AAC/B,QAAA,oBAAA,CAAqB,KAAK,CAAA;AAAA,MAC5B;AAAA,IACF;AAAA,EACF,CAAA;AACF;AAYA,IAAI,KAAA;AACJ,IAAM,gBAAA,uBAAsD,GAAA,EAAI;AAEhE,SAAS,OAAA,GAAU;AACjB,EAAA,MAAM,mBAAwC,EAAC;AAE/C,EAAA,gBAAA,CAAiB,OAAA,CAAQ,CAAC,IAAA,EAAM,OAAA,KAAY;AAC1C,IAAA,MAAM,OAAA,GAAU,QAAQ,qBAAA,EAAsB;AAE9C,IAAA,IAAI,CAAC,UAAA,CAAW,IAAA,CAAK,IAAA,EAAM,OAAO,CAAA,EAAG;AACnC,MAAA,IAAA,CAAK,IAAA,GAAO,OAAA;AACZ,MAAA,gBAAA,CAAiB,KAAK,IAAI,CAAA;AAAA,IAC5B;AAAA,EACF,CAAC,CAAA;AAED,EAAA,gBAAA,CAAiB,OAAA,CAAQ,CAAC,IAAA,KAAS;AACjC,IAAA,IAAA,CAAK,UAAU,OAAA,CAAQ,CAAC,aAAa,QAAA,CAAS,IAAA,CAAK,IAAI,CAAC,CAAA;AAAA,EAC1D,CAAC,CAAA;AAED,EAAA,KAAA,GAAQ,sBAAsB,OAAO,CAAA;AACvC;AAEA,SAAS,UAAA,CAAW,OAAgB,KAAA,EAAgB;AAClD,EAAA,OACE,KAAA,CAAM,UAAU,KAAA,CAAM,KAAA,IACtB,MAAM,MAAA,KAAW,KAAA,CAAM,MAAA,IACvB,KAAA,CAAM,GAAA,KAAQ,KAAA,CAAM,OACpB,KAAA,CAAM,KAAA,KAAU,MAAM,KAAA,IACtB,KAAA,CAAM,WAAW,KAAA,CAAM,MAAA,IACvB,KAAA,CAAM,IAAA,KAAS,KAAA,CAAM,IAAA;AAEzB","file":"index.cjs","sourcesContent":["// Adapted from https://github.com/reach/observe-rect/tree\n// MIT license, React Training\n\ntype Measurable = { getBoundingClientRect(): DOMRect };\n\n/**\n * Observes an element's rectangle on screen (getBoundingClientRect)\n * This is useful to track elements on the screen and attach other elements\n * that might be in different layers, etc.\n */\nfunction observeElementRect(\n  /** The element whose rect to observe */\n  elementToObserve: Measurable,\n  /** The callback which will be called when the rect changes */\n  callback: CallbackFn\n) {\n  const observedData = observedElements.get(elementToObserve);\n\n  if (observedData === undefined) {\n    observedElements.set(elementToObserve, {\n      rect: {} as DOMRect,\n      callbacks: [callback],\n    });\n\n    if (observedElements.size === 1) {\n      rafId = requestAnimationFrame(runLoop);\n    }\n  } else {\n    observedData.callbacks.push(callback);\n    callback(elementToObserve.getBoundingClientRect());\n  }\n\n  return () => {\n    const observedData = observedElements.get(elementToObserve);\n    if (observedData === undefined) return;\n\n    const index = observedData.callbacks.indexOf(callback);\n    if (index > -1) {\n      observedData.callbacks.splice(index, 1);\n    }\n\n    if (observedData.callbacks.length === 0) {\n      observedElements.delete(elementToObserve);\n\n      if (observedElements.size === 0) {\n        cancelAnimationFrame(rafId);\n      }\n    }\n  };\n}\n\n// ========================================================================\n// module internals\n\ntype CallbackFn = (rect: DOMRect) => void;\n\ntype ObservedData = {\n  rect: DOMRect;\n  callbacks: Array<CallbackFn>;\n};\n\nlet rafId: number;\nconst observedElements: Map<Measurable, ObservedData> = new Map();\n\nfunction runLoop() {\n  const changedRectsData: Array<ObservedData> = [];\n\n  observedElements.forEach((data, element) => {\n    const newRect = element.getBoundingClientRect();\n\n    if (!rectEquals(data.rect, newRect)) {\n      data.rect = newRect;\n      changedRectsData.push(data);\n    }\n  });\n\n  changedRectsData.forEach((data) => {\n    data.callbacks.forEach((callback) => callback(data.rect));\n  });\n\n  rafId = requestAnimationFrame(runLoop);\n}\n\nfunction rectEquals(rect1: DOMRect, rect2: DOMRect) {\n  return (\n    rect1.width === rect2.width &&\n    rect1.height === rect2.height &&\n    rect1.top === rect2.top &&\n    rect1.right === rect2.right &&\n    rect1.bottom === rect2.bottom &&\n    rect1.left === rect2.left\n  );\n}\n\nexport { observeElementRect };\nexport type { Measurable };\n"]}

package/dist/index.d.cts

@@ -0,0 +1,16 @@
+type Measurable = {
+    getBoundingClientRect(): DOMRect;
+};
+/**
+ * Observes an element's rectangle on screen (getBoundingClientRect)
+ * This is useful to track elements on the screen and attach other elements
+ * that might be in different layers, etc.
+ */
+declare function observeElementRect(
+/** The element whose rect to observe */
+elementToObserve: Measurable, 
+/** The callback which will be called when the rect changes */
+callback: CallbackFn): () => void;
+type CallbackFn = (rect: DOMRect) => void;
+
+export { type Measurable, observeElementRect };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+type Measurable = {
+    getBoundingClientRect(): DOMRect;
+};
+/**
+ * Observes an element's rectangle on screen (getBoundingClientRect)
+ * This is useful to track elements on the screen and attach other elements
+ * that might be in different layers, etc.
+ */
+declare function observeElementRect(
+/** The element whose rect to observe */
+elementToObserve: Measurable, 
+/** The callback which will be called when the rect changes */
+callback: CallbackFn): () => void;
+type CallbackFn = (rect: DOMRect) => void;
+
+export { type Measurable, observeElementRect };

package/dist/index.js

@@ -0,0 +1,53 @@
+// src/observe-element-rect.ts
+function observeElementRect(elementToObserve, callback) {
+  const observedData = observedElements.get(elementToObserve);
+  if (observedData === void 0) {
+    observedElements.set(elementToObserve, {
+      rect: {},
+      callbacks: [callback]
+    });
+    if (observedElements.size === 1) {
+      rafId = requestAnimationFrame(runLoop);
+    }
+  } else {
+    observedData.callbacks.push(callback);
+    callback(elementToObserve.getBoundingClientRect());
+  }
+  return () => {
+    const observedData2 = observedElements.get(elementToObserve);
+    if (observedData2 === void 0) return;
+    const index = observedData2.callbacks.indexOf(callback);
+    if (index > -1) {
+      observedData2.callbacks.splice(index, 1);
+    }
+    if (observedData2.callbacks.length === 0) {
+      observedElements.delete(elementToObserve);
+      if (observedElements.size === 0) {
+        cancelAnimationFrame(rafId);
+      }
+    }
+  };
+}
+var rafId;
+var observedElements = /* @__PURE__ */ new Map();
+function runLoop() {
+  const changedRectsData = [];
+  observedElements.forEach((data, element) => {
+    const newRect = element.getBoundingClientRect();
+    if (!rectEquals(data.rect, newRect)) {
+      data.rect = newRect;
+      changedRectsData.push(data);
+    }
+  });
+  changedRectsData.forEach((data) => {
+    data.callbacks.forEach((callback) => callback(data.rect));
+  });
+  rafId = requestAnimationFrame(runLoop);
+}
+function rectEquals(rect1, rect2) {
+  return rect1.width === rect2.width && rect1.height === rect2.height && rect1.top === rect2.top && rect1.right === rect2.right && rect1.bottom === rect2.bottom && rect1.left === rect2.left;
+}
+
+export { observeElementRect };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/observe-element-rect.ts"],"names":["observedData"],"mappings":";AAUA,SAAS,kBAAA,CAEP,kBAEA,QAAA,EACA;AACA,EAAA,MAAM,YAAA,GAAe,gBAAA,CAAiB,GAAA,CAAI,gBAAgB,CAAA;AAE1D,EAAA,IAAI,iBAAiB,MAAA,EAAW;AAC9B,IAAA,gBAAA,CAAiB,IAAI,gBAAA,EAAkB;AAAA,MACrC,MAAM,EAAC;AAAA,MACP,SAAA,EAAW,CAAC,QAAQ;AAAA,KACrB,CAAA;AAED,IAAA,IAAI,gBAAA,CAAiB,SAAS,CAAA,EAAG;AAC/B,MAAA,KAAA,GAAQ,sBAAsB,OAAO,CAAA;AAAA,IACvC;AAAA,EACF,CAAA,MAAO;AACL,IAAA,YAAA,CAAa,SAAA,CAAU,KAAK,QAAQ,CAAA;AACpC,IAAA,QAAA,CAAS,gBAAA,CAAiB,uBAAuB,CAAA;AAAA,EACnD;AAEA,EAAA,OAAO,MAAM;AACX,IAAA,MAAMA,aAAAA,GAAe,gBAAA,CAAiB,GAAA,CAAI,gBAAgB,CAAA;AAC1D,IAAA,IAAIA,kBAAiB,MAAA,EAAW;AAEhC,IAAA,MAAM,KAAA,GAAQA,aAAAA,CAAa,SAAA,CAAU,OAAA,CAAQ,QAAQ,CAAA;AACrD,IAAA,IAAI,QAAQ,EAAA,EAAI;AACd,MAAAA,aAAAA,CAAa,SAAA,CAAU,MAAA,CAAO,KAAA,EAAO,CAAC,CAAA;AAAA,IACxC;AAEA,IAAA,IAAIA,aAAAA,CAAa,SAAA,CAAU,MAAA,KAAW,CAAA,EAAG;AACvC,MAAA,gBAAA,CAAiB,OAAO,gBAAgB,CAAA;AAExC,MAAA,IAAI,gBAAA,CAAiB,SAAS,CAAA,EAAG;AAC/B,QAAA,oBAAA,CAAqB,KAAK,CAAA;AAAA,MAC5B;AAAA,IACF;AAAA,EACF,CAAA;AACF;AAYA,IAAI,KAAA;AACJ,IAAM,gBAAA,uBAAsD,GAAA,EAAI;AAEhE,SAAS,OAAA,GAAU;AACjB,EAAA,MAAM,mBAAwC,EAAC;AAE/C,EAAA,gBAAA,CAAiB,OAAA,CAAQ,CAAC,IAAA,EAAM,OAAA,KAAY;AAC1C,IAAA,MAAM,OAAA,GAAU,QAAQ,qBAAA,EAAsB;AAE9C,IAAA,IAAI,CAAC,UAAA,CAAW,IAAA,CAAK,IAAA,EAAM,OAAO,CAAA,EAAG;AACnC,MAAA,IAAA,CAAK,IAAA,GAAO,OAAA;AACZ,MAAA,gBAAA,CAAiB,KAAK,IAAI,CAAA;AAAA,IAC5B;AAAA,EACF,CAAC,CAAA;AAED,EAAA,gBAAA,CAAiB,OAAA,CAAQ,CAAC,IAAA,KAAS;AACjC,IAAA,IAAA,CAAK,UAAU,OAAA,CAAQ,CAAC,aAAa,QAAA,CAAS,IAAA,CAAK,IAAI,CAAC,CAAA;AAAA,EAC1D,CAAC,CAAA;AAED,EAAA,KAAA,GAAQ,sBAAsB,OAAO,CAAA;AACvC;AAEA,SAAS,UAAA,CAAW,OAAgB,KAAA,EAAgB;AAClD,EAAA,OACE,KAAA,CAAM,UAAU,KAAA,CAAM,KAAA,IACtB,MAAM,MAAA,KAAW,KAAA,CAAM,MAAA,IACvB,KAAA,CAAM,GAAA,KAAQ,KAAA,CAAM,OACpB,KAAA,CAAM,KAAA,KAAU,MAAM,KAAA,IACtB,KAAA,CAAM,WAAW,KAAA,CAAM,MAAA,IACvB,KAAA,CAAM,IAAA,KAAS,KAAA,CAAM,IAAA;AAEzB","file":"index.js","sourcesContent":["// Adapted from https://github.com/reach/observe-rect/tree\n// MIT license, React Training\n\ntype Measurable = { getBoundingClientRect(): DOMRect };\n\n/**\n * Observes an element's rectangle on screen (getBoundingClientRect)\n * This is useful to track elements on the screen and attach other elements\n * that might be in different layers, etc.\n */\nfunction observeElementRect(\n  /** The element whose rect to observe */\n  elementToObserve: Measurable,\n  /** The callback which will be called when the rect changes */\n  callback: CallbackFn\n) {\n  const observedData = observedElements.get(elementToObserve);\n\n  if (observedData === undefined) {\n    observedElements.set(elementToObserve, {\n      rect: {} as DOMRect,\n      callbacks: [callback],\n    });\n\n    if (observedElements.size === 1) {\n      rafId = requestAnimationFrame(runLoop);\n    }\n  } else {\n    observedData.callbacks.push(callback);\n    callback(elementToObserve.getBoundingClientRect());\n  }\n\n  return () => {\n    const observedData = observedElements.get(elementToObserve);\n    if (observedData === undefined) return;\n\n    const index = observedData.callbacks.indexOf(callback);\n    if (index > -1) {\n      observedData.callbacks.splice(index, 1);\n    }\n\n    if (observedData.callbacks.length === 0) {\n      observedElements.delete(elementToObserve);\n\n      if (observedElements.size === 0) {\n        cancelAnimationFrame(rafId);\n      }\n    }\n  };\n}\n\n// ========================================================================\n// module internals\n\ntype CallbackFn = (rect: DOMRect) => void;\n\ntype ObservedData = {\n  rect: DOMRect;\n  callbacks: Array<CallbackFn>;\n};\n\nlet rafId: number;\nconst observedElements: Map<Measurable, ObservedData> = new Map();\n\nfunction runLoop() {\n  const changedRectsData: Array<ObservedData> = [];\n\n  observedElements.forEach((data, element) => {\n    const newRect = element.getBoundingClientRect();\n\n    if (!rectEquals(data.rect, newRect)) {\n      data.rect = newRect;\n      changedRectsData.push(data);\n    }\n  });\n\n  changedRectsData.forEach((data) => {\n    data.callbacks.forEach((callback) => callback(data.rect));\n  });\n\n  rafId = requestAnimationFrame(runLoop);\n}\n\nfunction rectEquals(rect1: DOMRect, rect2: DOMRect) {\n  return (\n    rect1.width === rect2.width &&\n    rect1.height === rect2.height &&\n    rect1.top === rect2.top &&\n    rect1.right === rect2.right &&\n    rect1.bottom === rect2.bottom &&\n    rect1.left === rect2.left\n  );\n}\n\nexport { observeElementRect };\nexport type { Measurable };\n"]}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@radix-solid-js/rect",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@repo/tsconfig": "workspace:*",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ljho01/shadcn-solid-js.git",
+    "directory": "packages/core/rect"
+  }
+}