etudes 2.5.0 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/lib/Accordion.d.ts +2 -2
  2. package/lib/Accordion.js.map +1 -1
  3. package/lib/BurgerButton.d.ts +2 -2
  4. package/lib/BurgerButton.js +1 -1
  5. package/lib/BurgerButton.js.map +1 -1
  6. package/lib/Conditional.d.ts +1 -1
  7. package/lib/Conditional.js.map +1 -1
  8. package/lib/DebugConsole.d.ts +1 -1
  9. package/lib/DebugConsole.js.map +1 -1
  10. package/lib/Dial.d.ts +1 -1
  11. package/lib/Dial.js.map +1 -1
  12. package/lib/Dropdown.d.ts +2 -2
  13. package/lib/Dropdown.js +1 -1
  14. package/lib/Dropdown.js.map +1 -1
  15. package/lib/Each.d.ts +1 -1
  16. package/lib/Each.js.map +1 -1
  17. package/lib/ExtractChild.d.ts +1 -1
  18. package/lib/ExtractChild.js.map +1 -1
  19. package/lib/ExtractChildren.d.ts +1 -1
  20. package/lib/ExtractChildren.js.map +1 -1
  21. package/lib/FlatSVG.d.ts +1 -1
  22. package/lib/FlatSVG.js.map +1 -1
  23. package/lib/List.d.ts +1 -1
  24. package/lib/List.js.map +1 -1
  25. package/lib/MasonryGrid.d.ts +1 -1
  26. package/lib/MasonryGrid.js +10 -10
  27. package/lib/MasonryGrid.js.map +1 -1
  28. package/lib/Panorama.d.ts +15 -15
  29. package/lib/Panorama.js.map +1 -1
  30. package/lib/PanoramaSlider.d.ts +8 -8
  31. package/lib/PanoramaSlider.js +6 -6
  32. package/lib/PanoramaSlider.js.map +1 -1
  33. package/lib/RangeSlider.d.ts +1 -1
  34. package/lib/RangeSlider.js.map +1 -1
  35. package/lib/Repeat.d.ts +1 -1
  36. package/lib/Repeat.js.map +1 -1
  37. package/lib/RotatingGallery.d.ts +5 -5
  38. package/lib/RotatingGallery.js +2 -2
  39. package/lib/RotatingGallery.js.map +1 -1
  40. package/lib/SelectableButton.d.ts +1 -1
  41. package/lib/SelectableButton.js.map +1 -1
  42. package/lib/Slider.d.ts +11 -11
  43. package/lib/Slider.js +4 -4
  44. package/lib/Slider.js.map +1 -1
  45. package/lib/StepwiseSlider.d.ts +18 -18
  46. package/lib/StepwiseSlider.js +9 -9
  47. package/lib/StepwiseSlider.js.map +1 -1
  48. package/lib/SwipeContainer.d.ts +1 -1
  49. package/lib/SwipeContainer.js.map +1 -1
  50. package/lib/TextField.d.ts +1 -1
  51. package/lib/TextField.js.map +1 -1
  52. package/lib/Video.d.ts +1 -1
  53. package/lib/Video.js.map +1 -1
  54. package/lib/WithTooltip.d.ts +1 -1
  55. package/lib/WithTooltip.js.map +1 -1
  56. package/lib/hooks/useDragEffect.d.ts +15 -15
  57. package/lib/hooks/useDragEffect.js +6 -6
  58. package/lib/hooks/useDragEffect.js.map +1 -1
  59. package/lib/hooks/useElementRect.d.ts +2 -2
  60. package/lib/hooks/useElementRect.js +1 -1
  61. package/lib/hooks/useElementRect.js.map +1 -1
  62. package/lib/hooks/useInterval.d.ts +5 -5
  63. package/lib/hooks/useInterval.js +4 -4
  64. package/lib/hooks/useInterval.js.map +1 -1
  65. package/lib/hooks/useLoadImageEffect.d.ts +6 -6
  66. package/lib/hooks/useLoadImageEffect.js +3 -3
  67. package/lib/hooks/useLoadImageEffect.js.map +1 -1
  68. package/lib/hooks/usePrevious.d.ts +1 -1
  69. package/lib/hooks/usePrevious.js +1 -1
  70. package/lib/hooks/usePrevious.js.map +1 -1
  71. package/lib/hooks/useResizeEffect.d.ts +5 -5
  72. package/lib/hooks/useResizeEffect.js +3 -3
  73. package/lib/hooks/useResizeEffect.js.map +1 -1
  74. package/lib/hooks/useSearchParamState.d.ts +7 -7
  75. package/lib/hooks/useSearchParamState.js +3 -3
  76. package/lib/hooks/useSearchParamState.js.map +1 -1
  77. package/lib/providers/ScrollPositionProvider.d.ts +1 -1
  78. package/lib/providers/ScrollPositionProvider.js.map +1 -1
  79. package/lib/utils/asComponentDict.d.ts +1 -1
  80. package/lib/utils/asComponentDict.js.map +1 -1
  81. package/lib/utils/asStyleDict.d.ts +1 -1
  82. package/lib/utils/asStyleDict.js.map +1 -1
  83. package/lib/utils/cloneStyledElement.d.ts +6 -6
  84. package/lib/utils/cloneStyledElement.js.map +1 -1
  85. package/lib/utils/styles.d.ts +1 -1
  86. package/lib/utils/styles.js.map +1 -1
  87. package/package.json +4 -4
@@ -240,9 +240,9 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
240
240
  * Computes the index and current length of the next available section for a
241
241
  * specific base value, based on a provided array of existing section lengths.
242
242
  *
243
- * @param currentSectionLengths - An array of the current section lengths.
244
- * @param base - The base value of the item to be inserted into the grid, and to
245
- * be used to evaluate the next available section.
243
+ * @param currentSectionLengths An array of the current section lengths.
244
+ * @param base The base value of the item to be inserted into the grid, and to
245
+ * be used to evaluate the next available section.
246
246
  *
247
247
  * @returns An array consiting of the computed section index and its to-be
248
248
  * length if a new item were to be placed in it.
@@ -277,11 +277,11 @@ function computeNextAvailableSectionAndLengthByBase(currentSectionLengths, base)
277
277
  * A helper function that computes the max section length of an array of section
278
278
  * lengths. Only the first n = `base` sections are inspected.
279
279
  *
280
- * @param currentSectionLengths - An array of section lengths.
281
- * @param base - The number representing the first n sections to inspect. Any
282
- * non-numerical values will be ignored and return value will be
283
- * based on all sections. A `base` value will be clamped between 1
284
- * and the maximum length of the array of section lengths.
280
+ * @param currentSectionLengths An array of section lengths.
281
+ * @param base The number representing the first n sections to inspect. Any
282
+ * non-numerical values will be ignored and return value will be
283
+ * based on all sections. A `base` value will be clamped between 1
284
+ * and the maximum length of the array of section lengths.
285
285
  *
286
286
  * @returns The max section length.
287
287
  */
@@ -295,8 +295,8 @@ function computeMaxLength(currentSectionLengths, base) {
295
295
  /**
296
296
  * Computes the base value of an element from its classes.
297
297
  *
298
- * @param element - The HTML element.
299
- * @param numSections - Total number of sections.
298
+ * @param element The HTML element.
299
+ * @param numSections Total number of sections.
300
300
  *
301
301
  * @returns The computed base value that is clamped between 1 and max number of
302
302
  * sections.
@@ -1 +1 @@
1
- {"version":3,"file":"MasonryGrid.js","sourceRoot":"/","sources":["MasonryGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport useDebug from './utils/useDebug'\n\nconst debug = useDebug('masonry')\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type MasonryGridProps = HTMLAttributes<HTMLDivElement> & {\n areSectionsAligned?: boolean\n horizontalSpacing?: number\n isReversed?: boolean\n orientation?: Orientation\n sections?: number\n verticalSpacing?: number\n}\n\nconst BASE_MODIFIER_CLASS_PREFIX = 'base-'\n\n/**\n * This is a React component that arranges all of its immediate children in a\n * masonry grid. Refrain from assigning CSS styles to it via `className` or\n * `style` property, though they are still handled if absolutely necessary.\n * Customize the grid via its supported properties. The grid can be in either\n * vertical or horizontal orientation. The length of every child element\n * *parallel to the direction of the orientation* is automatically set according\n * to the number of sections specified for the grid. This means that in an\n * horizontally oriented grid, the *width* of each child element is\n * automatically set, whereas in a vertically oriented grid the *height* of each\n * child element is automatically set. Additionally, the *number of sections*\n * corresponds to the maximum the number of child elements present in the\n * direction that is parallel to the orientation of the grid. Hence, in a\n * vertically oriented grid, *number of secitons* refers to the *number of\n * rows*, whereas in a horizontally oriented grid, *number of sections* refers\n * to the *number of columns*.\n */\nexport default forwardRef<HTMLDivElement, MasonryGridProps>(({\n areSectionsAligned = false,\n children,\n className,\n horizontalSpacing = 0,\n isReversed = false,\n orientation = 'vertical',\n sections = 3,\n verticalSpacing = 0,\n ...props\n}, ref) => {\n const bodyRef = useRef<HTMLDivElement>(null)\n\n const [minWidth, setMinWidth] = useState(NaN)\n const [minHeight, setMinHeight] = useState(NaN)\n const [maxWidth, setMaxWidth] = useState(NaN)\n const [maxHeight, setMaxHeight] = useState(NaN)\n\n const getCurrentWidth = () => Rect.from(bodyRef.current)?.width ?? 0\n\n const getCurrentHeight = () => Rect.from(bodyRef.current)?.height ?? 0\n\n const repositionChildren = () => {\n const rootNode = bodyRef.current\n\n if (!rootNode) return\n\n debug('Repositioning children... OK')\n\n const nodes = rootNode.children\n const numSections = sections\n\n if (numSections <= 0) throw new Error('You must specifiy a minimum of 1 section(s) (a.k.a. row(s) for horizontal orientation, column(s) for vertical orientation) for a MasonryGrid instance')\n\n if (orientation === 'vertical') {\n const sectionHeights: number[] = [...new Array(numSections)].map(() => 0)\n\n for (let i = 0; i < nodes.length; i++) {\n const child = nodes[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const base = computeBaseFromElement(child, sections)\n const [colIdx, y] = computeNextAvailableSectionAndLengthByBase(sectionHeights, base)\n\n child.style.position = 'absolute'\n child.style.width = `calc(${100 / numSections * base}% - ${horizontalSpacing * (numSections - 1) / numSections * base}px + ${horizontalSpacing * (base - 1)}px)`\n child.style.height = ''\n child.style.left = `calc(${100 / numSections * colIdx}% - ${horizontalSpacing * (numSections - 1) / numSections * colIdx}px + ${horizontalSpacing * colIdx}px)`\n child.style.top = `${y + (y === 0 ? 0 : verticalSpacing)}px`\n\n for (let j = 0; j < base; j++) {\n sectionHeights[colIdx + j] = y + (y === 0 ? 0 : verticalSpacing) + (Rect.from(child)?.height ?? 0)\n }\n\n if (areSectionsAligned && colIdx + base === numSections) {\n const m = computeMaxLength(sectionHeights)\n\n for (let j = 0; j < numSections; j++) {\n sectionHeights[j] = m\n }\n }\n }\n\n const w = getCurrentWidth()\n const h = computeMaxLength(sectionHeights, numSections)\n\n setMinWidth(w)\n setMinHeight(h)\n\n if (!isNaN(h)) rootNode.style.height = `${h}px`\n\n if (isReversed) {\n for (let i = 0; i < nodes.length; i++) {\n const child = nodes[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const x = parseFloat(child.style.left)\n\n child.style.left = `${w - x - parseFloat(child.style.width)}px`\n }\n }\n }\n else {\n const sectionWidths: number[] = [...new Array(numSections)].map(() => 0)\n\n for (let i = 0; i < nodes.length; i++) {\n const child = nodes[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const base = computeBaseFromElement(child, sections)\n const [rowIdx, x] = computeNextAvailableSectionAndLengthByBase(sectionWidths, base)\n\n child.style.position = 'absolute'\n child.style.width = ''\n child.style.height = `calc(${100 / numSections * base}% - ${verticalSpacing * (numSections - 1) / numSections * base}px + ${verticalSpacing * (base - 1)}px)`\n child.style.top = `calc(${100 / numSections * rowIdx}% - ${verticalSpacing * (numSections - 1) / numSections * rowIdx}px + ${verticalSpacing * rowIdx}px)`\n child.style.left = `${x + (x === 0 ? 0 : horizontalSpacing)}px`\n\n for (let j = 0; j < base; j++) {\n sectionWidths[rowIdx + j] = x + (x === 0 ? 0 : horizontalSpacing) + (Rect.from(child)?.width ?? 0)\n }\n\n if (areSectionsAligned && rowIdx + base === numSections) {\n const m = computeMaxLength(sectionWidths)\n\n for (let j = 0; j < numSections; j++) {\n sectionWidths[j] = m\n }\n }\n }\n\n const h = getCurrentHeight()\n const w = computeMaxLength(sectionWidths, numSections)\n\n setMinHeight(h)\n setMinWidth(w)\n\n if (!isNaN(w)) rootNode.style.width = `${w}px`\n\n if (isReversed) {\n for (let i = 0; i < nodes.length; i++) {\n const child = nodes[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const y = parseFloat(child.style.top)\n\n child.style.top = `${h - y - parseFloat(child.style.height)}px`\n }\n }\n }\n }\n\n useResizeEffect(bodyRef, {\n onResize: maxSize => {\n const currWidth = getCurrentWidth()\n const currHeight = getCurrentHeight()\n\n if (minWidth !== currWidth || minHeight !== currHeight || maxSize.width !== maxWidth || maxSize.height !== maxHeight) {\n repositionChildren()\n setMaxWidth(maxSize.width)\n setMaxHeight(maxSize.height)\n }\n },\n }, [areSectionsAligned, horizontalSpacing, isReversed, sections, verticalSpacing])\n\n useEffect(() => {\n const imageSources = getAllImageSources(bodyRef.current?.innerHTML)\n\n if (imageSources.length === 0) return repositionChildren()\n\n const numImages = imageSources.length\n\n for (let i = 0; i < numImages; i++) {\n const src = imageSources[i]\n const image = new Image()\n image.src = src\n image.onload = () => repositionChildren()\n }\n }, [children])\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n body: {\n height: orientation === 'horizontal' ? '100%' : 'auto',\n minHeight: orientation === 'vertical' && !isNaN(minHeight) ? `${minHeight}px` : '',\n minWidth: orientation === 'horizontal' && !isNaN(minWidth) ? `${minWidth}px` : '',\n padding: '0',\n width: orientation === 'horizontal' ? 'auto' : '100%',\n },\n })\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n >\n <div ref={bodyRef} style={fixedStyles.body}>\n {children}\n </div>\n </div>\n )\n})\n\n/**\n * Computes the index and current length of the next available section for a\n * specific base value, based on a provided array of existing section lengths.\n *\n * @param currentSectionLengths - An array of the current section lengths.\n * @param base - The base value of the item to be inserted into the grid, and to\n * be used to evaluate the next available section.\n *\n * @returns An array consiting of the computed section index and its to-be\n * length if a new item were to be placed in it.\n */\nfunction computeNextAvailableSectionAndLengthByBase(currentSectionLengths: number[], base: number): [number, number] {\n const numSections = currentSectionLengths.length\n\n let sectionIdx = NaN\n let minLength = Infinity\n\n for (let i = 0; i < numSections; i++) {\n const length = currentSectionLengths[i]\n const isShorter = length < minLength\n const isEligibleSection = i + base <= numSections\n let hasRoomInSubsequentSections = true\n\n for (let j = 1; j < base; j++) {\n if (currentSectionLengths[i + j] > length) {\n hasRoomInSubsequentSections = false\n }\n }\n\n if (isShorter && isEligibleSection && hasRoomInSubsequentSections) {\n sectionIdx = i\n minLength = length\n }\n }\n\n if (isNaN(sectionIdx)) {\n return [0, computeMaxLength(currentSectionLengths, base)]\n }\n else {\n return [sectionIdx, minLength]\n }\n}\n\n/**\n * A helper function that computes the max section length of an array of section\n * lengths. Only the first n = `base` sections are inspected.\n *\n * @param currentSectionLengths - An array of section lengths.\n * @param base - The number representing the first n sections to inspect. Any\n * non-numerical values will be ignored and return value will be\n * based on all sections. A `base` value will be clamped between 1\n * and the maximum length of the array of section lengths.\n *\n * @returns The max section length.\n */\nfunction computeMaxLength(currentSectionLengths: number[], base?: number): number {\n let arr = currentSectionLengths\n\n if (base !== undefined && base !== null && !isNaN(base)) {\n arr = arr.slice(0, Math.max(1, Math.min(base, currentSectionLengths.length)))\n }\n\n return arr.reduce((out, curr, i) => curr > out ? curr : out, 0)\n}\n\n/**\n * Computes the base value of an element from its classes.\n *\n * @param element - The HTML element.\n * @param numSections - Total number of sections.\n *\n * @returns The computed base value that is clamped between 1 and max number of\n * sections.\n */\nfunction computeBaseFromElement(element: HTMLElement, numSections: number): number {\n const classList = element.classList\n\n for (let i = 0; i < classList.length; i++) {\n const c = classList[i]\n\n if (c.startsWith(BASE_MODIFIER_CLASS_PREFIX)) {\n const base = parseFloat(c.replace(BASE_MODIFIER_CLASS_PREFIX, ''))\n if (!isNaN(base)) return Math.min(Math.max(base, 1), numSections)\n }\n }\n\n return 1\n}\n\n/**\n * Scans an HTML string and returns all the image sources.\n *\n * @param htmlString The HTML string.\n *\n * @returns The image sources.\n */\nfunction getAllImageSources(htmlString?: string): string[] {\n if (!htmlString) return []\n\n const regexImg = /<img.*?src=(\"|')(.*?)(\"|')/g\n const regexSrc = /<img.*?src=(\"|')(.*?)(\"|')/\n const imageTags = htmlString.match(regexImg) ?? []\n\n const out: string[] = []\n\n for (let i = 0; i < imageTags.length; i++) {\n const tag = imageTags[i]\n const src = tag.match(regexSrc)?.[2]\n\n if (!src) continue\n\n out.push(src)\n }\n\n return out\n}\n"]}
1
+ {"version":3,"file":"MasonryGrid.js","sourceRoot":"/","sources":["MasonryGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAA2F;AAC3F,+BAA4B;AAC5B,4EAAqD;AACrD,4EAAqD;AACrD,oEAA6C;AAC7C,8DAAuC;AAEvC,IAAM,KAAK,GAAG,IAAA,kBAAQ,EAAC,SAAS,CAAC,CAAA;AAajC,IAAM,0BAA0B,GAAG,OAAO,CAAA;AAE1C;;;;;;;;;;;;;;;;GAgBG;AACH,kBAAe,IAAA,kBAAU,EAAmC,UAAC,EAU5D,EAAE,GAAG;IATJ,IAAA,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,yBAAqB,EAArB,iBAAiB,mBAAG,CAAC,KAAA,EACrB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,mBAAwB,EAAxB,WAAW,mBAAG,UAAU,KAAA,EACxB,gBAAY,EAAZ,QAAQ,mBAAG,CAAC,KAAA,EACZ,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,KAAA,EAChB,KAAK,cATmD,gIAU5D,CADS;IAER,IAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAA;IAEtC,IAAA,KAAA,OAA0B,IAAA,gBAAQ,EAAC,GAAG,CAAC,IAAA,EAAtC,QAAQ,QAAA,EAAE,WAAW,QAAiB,CAAA;IACvC,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAC,GAAG,CAAC,IAAA,EAAxC,SAAS,QAAA,EAAE,YAAY,QAAiB,CAAA;IACzC,IAAA,KAAA,OAA0B,IAAA,gBAAQ,EAAC,GAAG,CAAC,IAAA,EAAtC,QAAQ,QAAA,EAAE,WAAW,QAAiB,CAAA;IACvC,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAC,GAAG,CAAC,IAAA,EAAxC,SAAS,QAAA,EAAE,YAAY,QAAiB,CAAA;IAE/C,IAAM,eAAe,GAAG,0BAAM,OAAA,MAAA,MAAA,YAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,0CAAE,KAAK,mCAAI,CAAC,CAAA,EAAA,CAAA;IAEpE,IAAM,gBAAgB,GAAG,0BAAM,OAAA,MAAA,MAAA,YAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,0CAAE,MAAM,mCAAI,CAAC,CAAA,EAAA,CAAA;IAEtE,IAAM,kBAAkB,GAAG;;QACzB,IAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAA;QAEhC,IAAI,CAAC,QAAQ;YAAE,OAAM;QAErB,KAAK,CAAC,8BAA8B,CAAC,CAAA;QAErC,IAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAA;QAC/B,IAAM,WAAW,GAAG,QAAQ,CAAA;QAE5B,IAAI,WAAW,IAAI,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,uJAAuJ,CAAC,CAAA;QAE9L,IAAI,WAAW,KAAK,UAAU,EAAE;YAC9B,IAAM,cAAc,GAAa,yBAAI,IAAI,KAAK,CAAC,WAAW,CAAC,UAAE,GAAG,CAAC,cAAM,OAAA,CAAC,EAAD,CAAC,CAAC,CAAA;YAEzE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACrC,IAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;gBAEtB,IAAI,CAAC,CAAC,KAAK,YAAY,WAAW,CAAC;oBAAE,SAAQ;gBAE7C,IAAM,IAAI,GAAG,sBAAsB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;gBAC9C,IAAA,KAAA,OAAc,0CAA0C,CAAC,cAAc,EAAE,IAAI,CAAC,IAAA,EAA7E,MAAM,QAAA,EAAE,CAAC,QAAoE,CAAA;gBAEpF,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAA;gBACjC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,eAAQ,GAAG,GAAG,WAAW,GAAG,IAAI,iBAAO,iBAAiB,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,IAAI,kBAAQ,iBAAiB,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,QAAK,CAAA;gBAChK,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAA;gBACvB,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,eAAQ,GAAG,GAAG,WAAW,GAAG,MAAM,iBAAO,iBAAiB,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,MAAM,kBAAQ,iBAAiB,GAAG,MAAM,QAAK,CAAA;gBAC/J,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,UAAG,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,OAAI,CAAA;gBAE5D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE;oBAC7B,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,MAAA,MAAA,YAAI,CAAC,IAAI,CAAC,KAAK,CAAC,0CAAE,MAAM,mCAAI,CAAC,CAAC,CAAA;iBACnG;gBAED,IAAI,kBAAkB,IAAI,MAAM,GAAG,IAAI,KAAK,WAAW,EAAE;oBACvD,IAAM,CAAC,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAA;oBAE1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,EAAE,CAAC,EAAE,EAAE;wBACpC,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;qBACtB;iBACF;aACF;YAED,IAAM,CAAC,GAAG,eAAe,EAAE,CAAA;YAC3B,IAAM,CAAC,GAAG,gBAAgB,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;YAEvD,WAAW,CAAC,CAAC,CAAC,CAAA;YACd,YAAY,CAAC,CAAC,CAAC,CAAA;YAEf,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,UAAG,CAAC,OAAI,CAAA;YAE/C,IAAI,UAAU,EAAE;gBACd,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACrC,IAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;oBAEtB,IAAI,CAAC,CAAC,KAAK,YAAY,WAAW,CAAC;wBAAE,SAAQ;oBAE7C,IAAM,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;oBAEtC,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,UAAG,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAI,CAAA;iBAChE;aACF;SACF;aACI;YACH,IAAM,aAAa,GAAa,yBAAI,IAAI,KAAK,CAAC,WAAW,CAAC,UAAE,GAAG,CAAC,cAAM,OAAA,CAAC,EAAD,CAAC,CAAC,CAAA;YAExE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACrC,IAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;gBAEtB,IAAI,CAAC,CAAC,KAAK,YAAY,WAAW,CAAC;oBAAE,SAAQ;gBAE7C,IAAM,IAAI,GAAG,sBAAsB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;gBAC9C,IAAA,KAAA,OAAc,0CAA0C,CAAC,aAAa,EAAE,IAAI,CAAC,IAAA,EAA5E,MAAM,QAAA,EAAE,CAAC,QAAmE,CAAA;gBAEnF,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAA;gBACjC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;gBACtB,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,eAAQ,GAAG,GAAG,WAAW,GAAG,IAAI,iBAAO,eAAe,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,IAAI,kBAAQ,eAAe,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,QAAK,CAAA;gBAC7J,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,eAAQ,GAAG,GAAG,WAAW,GAAG,MAAM,iBAAO,eAAe,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,MAAM,kBAAQ,eAAe,GAAG,MAAM,QAAK,CAAA;gBAC1J,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,UAAG,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,OAAI,CAAA;gBAE/D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE;oBAC7B,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,GAAG,CAAC,MAAA,MAAA,YAAI,CAAC,IAAI,CAAC,KAAK,CAAC,0CAAE,KAAK,mCAAI,CAAC,CAAC,CAAA;iBACnG;gBAED,IAAI,kBAAkB,IAAI,MAAM,GAAG,IAAI,KAAK,WAAW,EAAE;oBACvD,IAAM,CAAC,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAA;oBAEzC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,EAAE,CAAC,EAAE,EAAE;wBACpC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;qBACrB;iBACF;aACF;YAED,IAAM,CAAC,GAAG,gBAAgB,EAAE,CAAA;YAC5B,IAAM,CAAC,GAAG,gBAAgB,CAAC,aAAa,EAAE,WAAW,CAAC,CAAA;YAEtD,YAAY,CAAC,CAAC,CAAC,CAAA;YACf,WAAW,CAAC,CAAC,CAAC,CAAA;YAEd,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBAAE,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,UAAG,CAAC,OAAI,CAAA;YAE9C,IAAI,UAAU,EAAE;gBACd,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACrC,IAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;oBAEtB,IAAI,CAAC,CAAC,KAAK,YAAY,WAAW,CAAC;wBAAE,SAAQ;oBAE7C,IAAM,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;oBAErC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,UAAG,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAI,CAAA;iBAChE;aACF;SACF;IACH,CAAC,CAAA;IAED,IAAA,yBAAe,EAAC,OAAO,EAAE;QACvB,QAAQ,EAAE,UAAA,OAAO;YACf,IAAM,SAAS,GAAG,eAAe,EAAE,CAAA;YACnC,IAAM,UAAU,GAAG,gBAAgB,EAAE,CAAA;YAErC,IAAI,QAAQ,KAAK,SAAS,IAAI,SAAS,KAAK,UAAU,IAAI,OAAO,CAAC,KAAK,KAAK,QAAQ,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS,EAAE;gBACpH,kBAAkB,EAAE,CAAA;gBACpB,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;gBAC1B,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;aAC7B;QACH,CAAC;KACF,EAAE,CAAC,kBAAkB,EAAE,iBAAiB,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAA;IAElF,IAAA,iBAAS,EAAC;;QACR,IAAM,YAAY,GAAG,kBAAkB,CAAC,MAAA,OAAO,CAAC,OAAO,0CAAE,SAAS,CAAC,CAAA;QAEnE,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,kBAAkB,EAAE,CAAA;QAE1D,IAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAA;QAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE;YAClC,IAAM,GAAG,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;YAC3B,IAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAA;YACzB,KAAK,CAAC,GAAG,GAAG,GAAG,CAAA;YACf,KAAK,CAAC,MAAM,GAAG,cAAM,OAAA,kBAAkB,EAAE,EAApB,CAAoB,CAAA;SAC1C;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAM,eAAe,GAAG,IAAA,yBAAe,EAAC;QACtC,IAAI,EAAE,IAAA,oBAAU,EAAC,WAAW,CAAC;KAC9B,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,IAAA,qBAAW,EAAC;QAC9B,IAAI,EAAE;YACJ,MAAM,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YACtD,SAAS,EAAE,WAAW,KAAK,UAAU,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,UAAG,SAAS,OAAI,CAAC,CAAC,CAAC,EAAE;YAClF,QAAQ,EAAE,WAAW,KAAK,YAAY,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,UAAG,QAAQ,OAAI,CAAC,CAAC,CAAC,EAAE;YACjF,OAAO,EAAE,GAAG;YACZ,KAAK,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SACtD;KACF,CAAC,CAAA;IAEF,OAAO,CACL,kDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC;QAEtD,uCAAK,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,IACvC,QAAQ,CACL,CACF,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF;;;;;;;;;;GAUG;AACH,SAAS,0CAA0C,CAAC,qBAA+B,EAAE,IAAY;IAC/F,IAAM,WAAW,GAAG,qBAAqB,CAAC,MAAM,CAAA;IAEhD,IAAI,UAAU,GAAG,GAAG,CAAA;IACpB,IAAI,SAAS,GAAG,QAAQ,CAAA;IAExB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,EAAE,CAAC,EAAE,EAAE;QACpC,IAAM,QAAM,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;QACvC,IAAM,SAAS,GAAG,QAAM,GAAG,SAAS,CAAA;QACpC,IAAM,iBAAiB,GAAG,CAAC,GAAG,IAAI,IAAI,WAAW,CAAA;QACjD,IAAI,2BAA2B,GAAG,IAAI,CAAA;QAEtC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE;YAC7B,IAAI,qBAAqB,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,QAAM,EAAE;gBACzC,2BAA2B,GAAG,KAAK,CAAA;aACpC;SACF;QAED,IAAI,SAAS,IAAI,iBAAiB,IAAI,2BAA2B,EAAE;YACjE,UAAU,GAAG,CAAC,CAAA;YACd,SAAS,GAAG,QAAM,CAAA;SACnB;KACF;IAED,IAAI,KAAK,CAAC,UAAU,CAAC,EAAE;QACrB,OAAO,CAAC,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC,CAAA;KAC1D;SACI;QACH,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,CAAA;KAC/B;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,SAAS,gBAAgB,CAAC,qBAA+B,EAAE,IAAa;IACtE,IAAI,GAAG,GAAG,qBAAqB,CAAA;IAE/B,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;QACvD,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;KAC9E;IAED,OAAO,GAAG,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,IAAI,EAAE,CAAC,IAAK,OAAA,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAvB,CAAuB,EAAE,CAAC,CAAC,CAAA;AACjE,CAAC;AAED;;;;;;;;GAQG;AACH,SAAS,sBAAsB,CAAC,OAAoB,EAAE,WAAmB;IACvE,IAAM,SAAS,GAAG,OAAO,CAAC,SAAS,CAAA;IAEnC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACzC,IAAM,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;QAEtB,IAAI,CAAC,CAAC,UAAU,CAAC,0BAA0B,CAAC,EAAE;YAC5C,IAAM,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAAC,CAAA;YAClE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;gBAAE,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,CAAA;SAClE;KACF;IAED,OAAO,CAAC,CAAA;AACV,CAAC;AAED;;;;;;GAMG;AACH,SAAS,kBAAkB,CAAC,UAAmB;;IAC7C,IAAI,CAAC,UAAU;QAAE,OAAO,EAAE,CAAA;IAE1B,IAAM,QAAQ,GAAG,6BAA6B,CAAA;IAC9C,IAAM,QAAQ,GAAG,4BAA4B,CAAA;IAC7C,IAAM,SAAS,GAAG,MAAA,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,mCAAI,EAAE,CAAA;IAElD,IAAM,GAAG,GAAa,EAAE,CAAA;IAExB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACzC,IAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;QACxB,IAAM,GAAG,GAAG,MAAA,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,0CAAG,CAAC,CAAC,CAAA;QAEpC,IAAI,CAAC,GAAG;YAAE,SAAQ;QAElB,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;KACd;IAED,OAAO,GAAG,CAAA;AACZ,CAAC","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes } from 'react'\nimport { Rect } from 'spase'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport useDebug from './utils/useDebug'\n\nconst debug = useDebug('masonry')\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type MasonryGridProps = HTMLAttributes<HTMLDivElement> & {\n areSectionsAligned?: boolean\n horizontalSpacing?: number\n isReversed?: boolean\n orientation?: Orientation\n sections?: number\n verticalSpacing?: number\n}\n\nconst BASE_MODIFIER_CLASS_PREFIX = 'base-'\n\n/**\n * This is a React component that arranges all of its immediate children in a\n * masonry grid. Refrain from assigning CSS styles to it via `className` or\n * `style` property, though they are still handled if absolutely necessary.\n * Customize the grid via its supported properties. The grid can be in either\n * vertical or horizontal orientation. The length of every child element\n * *parallel to the direction of the orientation* is automatically set according\n * to the number of sections specified for the grid. This means that in an\n * horizontally oriented grid, the *width* of each child element is\n * automatically set, whereas in a vertically oriented grid the *height* of each\n * child element is automatically set. Additionally, the *number of sections*\n * corresponds to the maximum the number of child elements present in the\n * direction that is parallel to the orientation of the grid. Hence, in a\n * vertically oriented grid, *number of secitons* refers to the *number of\n * rows*, whereas in a horizontally oriented grid, *number of sections* refers\n * to the *number of columns*.\n */\nexport default forwardRef<HTMLDivElement, MasonryGridProps>(({\n areSectionsAligned = false,\n children,\n className,\n horizontalSpacing = 0,\n isReversed = false,\n orientation = 'vertical',\n sections = 3,\n verticalSpacing = 0,\n ...props\n}, ref) => {\n const bodyRef = useRef<HTMLDivElement>(null)\n\n const [minWidth, setMinWidth] = useState(NaN)\n const [minHeight, setMinHeight] = useState(NaN)\n const [maxWidth, setMaxWidth] = useState(NaN)\n const [maxHeight, setMaxHeight] = useState(NaN)\n\n const getCurrentWidth = () => Rect.from(bodyRef.current)?.width ?? 0\n\n const getCurrentHeight = () => Rect.from(bodyRef.current)?.height ?? 0\n\n const repositionChildren = () => {\n const rootNode = bodyRef.current\n\n if (!rootNode) return\n\n debug('Repositioning children... OK')\n\n const nodes = rootNode.children\n const numSections = sections\n\n if (numSections <= 0) throw new Error('You must specifiy a minimum of 1 section(s) (a.k.a. row(s) for horizontal orientation, column(s) for vertical orientation) for a MasonryGrid instance')\n\n if (orientation === 'vertical') {\n const sectionHeights: number[] = [...new Array(numSections)].map(() => 0)\n\n for (let i = 0; i < nodes.length; i++) {\n const child = nodes[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const base = computeBaseFromElement(child, sections)\n const [colIdx, y] = computeNextAvailableSectionAndLengthByBase(sectionHeights, base)\n\n child.style.position = 'absolute'\n child.style.width = `calc(${100 / numSections * base}% - ${horizontalSpacing * (numSections - 1) / numSections * base}px + ${horizontalSpacing * (base - 1)}px)`\n child.style.height = ''\n child.style.left = `calc(${100 / numSections * colIdx}% - ${horizontalSpacing * (numSections - 1) / numSections * colIdx}px + ${horizontalSpacing * colIdx}px)`\n child.style.top = `${y + (y === 0 ? 0 : verticalSpacing)}px`\n\n for (let j = 0; j < base; j++) {\n sectionHeights[colIdx + j] = y + (y === 0 ? 0 : verticalSpacing) + (Rect.from(child)?.height ?? 0)\n }\n\n if (areSectionsAligned && colIdx + base === numSections) {\n const m = computeMaxLength(sectionHeights)\n\n for (let j = 0; j < numSections; j++) {\n sectionHeights[j] = m\n }\n }\n }\n\n const w = getCurrentWidth()\n const h = computeMaxLength(sectionHeights, numSections)\n\n setMinWidth(w)\n setMinHeight(h)\n\n if (!isNaN(h)) rootNode.style.height = `${h}px`\n\n if (isReversed) {\n for (let i = 0; i < nodes.length; i++) {\n const child = nodes[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const x = parseFloat(child.style.left)\n\n child.style.left = `${w - x - parseFloat(child.style.width)}px`\n }\n }\n }\n else {\n const sectionWidths: number[] = [...new Array(numSections)].map(() => 0)\n\n for (let i = 0; i < nodes.length; i++) {\n const child = nodes[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const base = computeBaseFromElement(child, sections)\n const [rowIdx, x] = computeNextAvailableSectionAndLengthByBase(sectionWidths, base)\n\n child.style.position = 'absolute'\n child.style.width = ''\n child.style.height = `calc(${100 / numSections * base}% - ${verticalSpacing * (numSections - 1) / numSections * base}px + ${verticalSpacing * (base - 1)}px)`\n child.style.top = `calc(${100 / numSections * rowIdx}% - ${verticalSpacing * (numSections - 1) / numSections * rowIdx}px + ${verticalSpacing * rowIdx}px)`\n child.style.left = `${x + (x === 0 ? 0 : horizontalSpacing)}px`\n\n for (let j = 0; j < base; j++) {\n sectionWidths[rowIdx + j] = x + (x === 0 ? 0 : horizontalSpacing) + (Rect.from(child)?.width ?? 0)\n }\n\n if (areSectionsAligned && rowIdx + base === numSections) {\n const m = computeMaxLength(sectionWidths)\n\n for (let j = 0; j < numSections; j++) {\n sectionWidths[j] = m\n }\n }\n }\n\n const h = getCurrentHeight()\n const w = computeMaxLength(sectionWidths, numSections)\n\n setMinHeight(h)\n setMinWidth(w)\n\n if (!isNaN(w)) rootNode.style.width = `${w}px`\n\n if (isReversed) {\n for (let i = 0; i < nodes.length; i++) {\n const child = nodes[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const y = parseFloat(child.style.top)\n\n child.style.top = `${h - y - parseFloat(child.style.height)}px`\n }\n }\n }\n }\n\n useResizeEffect(bodyRef, {\n onResize: maxSize => {\n const currWidth = getCurrentWidth()\n const currHeight = getCurrentHeight()\n\n if (minWidth !== currWidth || minHeight !== currHeight || maxSize.width !== maxWidth || maxSize.height !== maxHeight) {\n repositionChildren()\n setMaxWidth(maxSize.width)\n setMaxHeight(maxSize.height)\n }\n },\n }, [areSectionsAligned, horizontalSpacing, isReversed, sections, verticalSpacing])\n\n useEffect(() => {\n const imageSources = getAllImageSources(bodyRef.current?.innerHTML)\n\n if (imageSources.length === 0) return repositionChildren()\n\n const numImages = imageSources.length\n\n for (let i = 0; i < numImages; i++) {\n const src = imageSources[i]\n const image = new Image()\n image.src = src\n image.onload = () => repositionChildren()\n }\n }, [children])\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n body: {\n height: orientation === 'horizontal' ? '100%' : 'auto',\n minHeight: orientation === 'vertical' && !isNaN(minHeight) ? `${minHeight}px` : '',\n minWidth: orientation === 'horizontal' && !isNaN(minWidth) ? `${minWidth}px` : '',\n padding: '0',\n width: orientation === 'horizontal' ? 'auto' : '100%',\n },\n })\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n >\n <div ref={bodyRef} style={fixedStyles.body}>\n {children}\n </div>\n </div>\n )\n})\n\n/**\n * Computes the index and current length of the next available section for a\n * specific base value, based on a provided array of existing section lengths.\n *\n * @param currentSectionLengths An array of the current section lengths.\n * @param base The base value of the item to be inserted into the grid, and to\n * be used to evaluate the next available section.\n *\n * @returns An array consiting of the computed section index and its to-be\n * length if a new item were to be placed in it.\n */\nfunction computeNextAvailableSectionAndLengthByBase(currentSectionLengths: number[], base: number): [number, number] {\n const numSections = currentSectionLengths.length\n\n let sectionIdx = NaN\n let minLength = Infinity\n\n for (let i = 0; i < numSections; i++) {\n const length = currentSectionLengths[i]\n const isShorter = length < minLength\n const isEligibleSection = i + base <= numSections\n let hasRoomInSubsequentSections = true\n\n for (let j = 1; j < base; j++) {\n if (currentSectionLengths[i + j] > length) {\n hasRoomInSubsequentSections = false\n }\n }\n\n if (isShorter && isEligibleSection && hasRoomInSubsequentSections) {\n sectionIdx = i\n minLength = length\n }\n }\n\n if (isNaN(sectionIdx)) {\n return [0, computeMaxLength(currentSectionLengths, base)]\n }\n else {\n return [sectionIdx, minLength]\n }\n}\n\n/**\n * A helper function that computes the max section length of an array of section\n * lengths. Only the first n = `base` sections are inspected.\n *\n * @param currentSectionLengths An array of section lengths.\n * @param base The number representing the first n sections to inspect. Any\n * non-numerical values will be ignored and return value will be\n * based on all sections. A `base` value will be clamped between 1\n * and the maximum length of the array of section lengths.\n *\n * @returns The max section length.\n */\nfunction computeMaxLength(currentSectionLengths: number[], base?: number): number {\n let arr = currentSectionLengths\n\n if (base !== undefined && base !== null && !isNaN(base)) {\n arr = arr.slice(0, Math.max(1, Math.min(base, currentSectionLengths.length)))\n }\n\n return arr.reduce((out, curr, i) => curr > out ? curr : out, 0)\n}\n\n/**\n * Computes the base value of an element from its classes.\n *\n * @param element The HTML element.\n * @param numSections Total number of sections.\n *\n * @returns The computed base value that is clamped between 1 and max number of\n * sections.\n */\nfunction computeBaseFromElement(element: HTMLElement, numSections: number): number {\n const classList = element.classList\n\n for (let i = 0; i < classList.length; i++) {\n const c = classList[i]\n\n if (c.startsWith(BASE_MODIFIER_CLASS_PREFIX)) {\n const base = parseFloat(c.replace(BASE_MODIFIER_CLASS_PREFIX, ''))\n if (!isNaN(base)) return Math.min(Math.max(base, 1), numSections)\n }\n }\n\n return 1\n}\n\n/**\n * Scans an HTML string and returns all the image sources.\n *\n * @param htmlString The HTML string.\n *\n * @returns The image sources.\n */\nfunction getAllImageSources(htmlString?: string): string[] {\n if (!htmlString) return []\n\n const regexImg = /<img.*?src=(\"|')(.*?)(\"|')/g\n const regexSrc = /<img.*?src=(\"|')(.*?)(\"|')/\n const imageTags = htmlString.match(regexImg) ?? []\n\n const out: string[] = []\n\n for (let i = 0; i < imageTags.length; i++) {\n const tag = imageTags[i]\n const src = tag.match(regexSrc)?.[2]\n\n if (!src) continue\n\n out.push(src)\n }\n\n return out\n}\n"]}
package/lib/Panorama.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { HTMLAttributes } from 'react';
1
+ import React, { type HTMLAttributes } from 'react';
2
2
  import { Size } from 'spase';
3
3
  export type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {
4
4
  /**
@@ -26,8 +26,8 @@ export type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {
26
26
  * Handler invoked when the positionchanges. This can either be invoked from
27
27
  * the `angle` prop being changed or from the image being dragged.
28
28
  *
29
- * @param position - The current position.
30
- * @param isDragging - Specifies if the position change is due to dragging.
29
+ * @param position The current position.
30
+ * @param isDragging Specifies if the position change is due to dragging.
31
31
  */
32
32
  onPositionChange?: (position: number, isDragging: boolean) => void;
33
33
  /**
@@ -36,8 +36,8 @@ export type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {
36
36
  * being double-binded, ensure that the value is only being set by this
37
37
  * handler when `isDragging` is `true` to avoid potential update overflow.
38
38
  *
39
- * @param angle - The current angle.
40
- * @param isDragging - Specifies if the angle change is due to dragging.
39
+ * @param angle The current angle.
40
+ * @param isDragging Specifies if the angle change is due to dragging.
41
41
  */
42
42
  onAngleChange?: (angle: number, isDragging: boolean) => void;
43
43
  /**
@@ -55,7 +55,7 @@ export type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {
55
55
  /**
56
56
  * Handler invoked when the image is done loading.
57
57
  *
58
- * @param imageElement - The loaded image element.
58
+ * @param imageElement The loaded image element.
59
59
  */
60
60
  onImageLoadComplete?: (imageElement: HTMLImageElement) => void;
61
61
  /**
@@ -66,14 +66,14 @@ export type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {
66
66
  * Handler invoked when the image size changes. This is the actual size of the
67
67
  * loaded image. When no images are loaded yet, the size is `undefined`.
68
68
  *
69
- * @param size - The actual size of the loaded iamge. If no images are loaded
69
+ * @param size The actual size of the loaded iamge. If no images are loaded
70
70
  * yet, the size is `undefined`.
71
71
  */
72
72
  onImageSizeChange?: (size?: Size) => void;
73
73
  /**
74
74
  * Handler invoked when the size of this component changes.
75
75
  *
76
- * @param size - The size of this component.
76
+ * @param size The size of this component.
77
77
  */
78
78
  onResize?: (size: Size) => void;
79
79
  };
@@ -107,8 +107,8 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
107
107
  * Handler invoked when the positionchanges. This can either be invoked from
108
108
  * the `angle` prop being changed or from the image being dragged.
109
109
  *
110
- * @param position - The current position.
111
- * @param isDragging - Specifies if the position change is due to dragging.
110
+ * @param position The current position.
111
+ * @param isDragging Specifies if the position change is due to dragging.
112
112
  */
113
113
  onPositionChange?: ((position: number, isDragging: boolean) => void) | undefined;
114
114
  /**
@@ -117,8 +117,8 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
117
117
  * being double-binded, ensure that the value is only being set by this
118
118
  * handler when `isDragging` is `true` to avoid potential update overflow.
119
119
  *
120
- * @param angle - The current angle.
121
- * @param isDragging - Specifies if the angle change is due to dragging.
120
+ * @param angle The current angle.
121
+ * @param isDragging Specifies if the angle change is due to dragging.
122
122
  */
123
123
  onAngleChange?: ((angle: number, isDragging: boolean) => void) | undefined;
124
124
  /**
@@ -136,7 +136,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
136
136
  /**
137
137
  * Handler invoked when the image is done loading.
138
138
  *
139
- * @param imageElement - The loaded image element.
139
+ * @param imageElement The loaded image element.
140
140
  */
141
141
  onImageLoadComplete?: ((imageElement: HTMLImageElement) => void) | undefined;
142
142
  /**
@@ -147,14 +147,14 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
147
147
  * Handler invoked when the image size changes. This is the actual size of the
148
148
  * loaded image. When no images are loaded yet, the size is `undefined`.
149
149
  *
150
- * @param size - The actual size of the loaded iamge. If no images are loaded
150
+ * @param size The actual size of the loaded iamge. If no images are loaded
151
151
  * yet, the size is `undefined`.
152
152
  */
153
153
  onImageSizeChange?: ((size?: Size | undefined) => void) | undefined;
154
154
  /**
155
155
  * Handler invoked when the size of this component changes.
156
156
  *
157
- * @param size - The size of this component.
157
+ * @param size The size of this component.
158
158
  */
159
159
  onResize?: ((size: Size) => void) | undefined;
160
160
  } & React.RefAttributes<HTMLDivElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"Panorama.js","sourceRoot":"/","sources":["Panorama.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport useDragEffect from './hooks/useDragEffect'\nimport useLoadImageEffect from './hooks/useLoadImageEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asStyleDict from './utils/asStyleDict'\n\nexport type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {\n /**\n * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or\n * 360, the left bound of the image is at the center of the component.\n */\n angle?: number\n\n /**\n * The panning speed. This is a multiplier to the number of pixels dragged,\n * i.e. when set to 1, the image will shift the same amount of pixels that\n * were dragged.\n */\n speed?: number\n\n /**\n * The source URL of the image.\n */\n src?: string\n\n /**\n * A decimal percentage of the component width indicating where 0° should be,\n * i.e. if `zeroAnchor` is `0`, the `angle` would be 0° when the left edge of\n * the image is at the left edge of the component.\n */\n zeroAnchor?: number\n\n /**\n * Handler invoked when the positionchanges. This can either be invoked from\n * the `angle` prop being changed or from the image being dragged.\n *\n * @param position - The current position.\n * @param isDragging - Specifies if the position change is due to dragging.\n */\n onPositionChange?: (position: number, isDragging: boolean) => void\n\n /**\n * Handler invoked when the angle changes. This can either be invoked from the\n * `angle` prop being changed or from the image being dragged. When `angle` is\n * being double-binded, ensure that the value is only being set by this\n * handler when `isDragging` is `true` to avoid potential update overflow.\n *\n * @param angle - The current angle.\n * @param isDragging - Specifies if the angle change is due to dragging.\n */\n onAngleChange?: (angle: number, isDragging: boolean) => void\n\n /**\n * Handler invoked when dragging starts.\n */\n onDragStart?: () => void\n\n /**\n * Handler invoked when dragging ends.\n */\n onDragEnd?: () => void\n\n /**\n * Handler invoked when the image begins loading.\n */\n onImageLoadStart?: () => void\n\n /**\n * Handler invoked when the image is done loading.\n *\n * @param imageElement - The loaded image element.\n */\n onImageLoadComplete?: (imageElement: HTMLImageElement) => void\n\n /**\n * Handler invoked when there is an error loading the image.\n */\n onImageLoadError?: () => void\n\n /**\n * Handler invoked when the image size changes. This is the actual size of the\n * loaded image. When no images are loaded yet, the size is `undefined`.\n *\n * @param size - The actual size of the loaded iamge. If no images are loaded\n * yet, the size is `undefined`.\n */\n onImageSizeChange?: (size?: Size) => void\n\n /**\n * Handler invoked when the size of this component changes.\n *\n * @param size - The size of this component.\n */\n onResize?: (size: Size) => void\n}\n\n/**\n * A component containing a pannable 360° panorama image. The angle supports\n * two-way binding.\n */\nexport default forwardRef<HTMLDivElement, PanoramaProps>(({\n angle: externalAngle = 0,\n speed = 1,\n src,\n zeroAnchor = 0,\n onAngleChange,\n onPositionChange,\n onDragStart,\n onDragEnd,\n onImageLoadStart,\n onImageLoadComplete,\n onImageLoadError,\n onImageSizeChange,\n onResize,\n ...props\n}, ref) => {\n const mapDragPositionToDisplacement = (currentPosition: number, dx: number, dy: number): number => {\n const newDisplacement = currentPosition - dx * speed\n\n return newDisplacement\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const [size] = useResizeEffect(bodyRef, { onResize })\n const [angle, setAngle] = useState(externalAngle)\n\n const { isLoading: [isLoading], imageSize: [imageSize] } = useLoadImageEffect(src, {\n onImageLoadComplete,\n onImageLoadError,\n onImageSizeChange,\n })\n\n const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragEffect(bodyRef, {\n initialValue: 0,\n transform: mapDragPositionToDisplacement,\n onDragStart,\n onDragEnd,\n })\n\n useEffect(() => {\n if (isDragging || isLoading || !imageSize) return\n\n const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, size, zeroAnchor)\n\n if (newDisplacement !== displacement) {\n setDisplacement(newDisplacement)\n }\n\n if (externalAngle !== angle) {\n setAngle(externalAngle)\n }\n }, [externalAngle, isLoading, imageSize, size, zeroAnchor])\n\n useEffect(() => {\n if (!isDragging || !imageSize) return\n\n const newAngle = getAngleFromDisplacement(displacement, imageSize, size, zeroAnchor)\n\n if (angle !== newAngle) {\n setAngle(newAngle)\n }\n }, [displacement, imageSize, size, zeroAnchor])\n\n useEffect(() => {\n onAngleChange?.(angle, isDragging)\n onPositionChange?.(angle / 360, isDragging)\n }, [angle])\n\n const fixedStyles = asStyleDict({\n body: {\n backgroundImage: `url(${src})`,\n backgroundPositionX: `${-displacement}px`,\n backgroundRepeat: 'repeat',\n backgroundSize: 'auto 100%',\n height: '100%',\n touchAction: 'none',\n width: '100%',\n },\n })\n\n return (\n <div {...props} ref={ref}>\n <div ref={bodyRef} style={fixedStyles.body}/>\n </div>\n )\n})\n\nfunction getFilledImageSize(originalSize: Size, sizeToFill: Size): Size {\n const { width: originalWidth, height: originalHeight } = originalSize\n const { height: filledHeignt } = sizeToFill\n\n if (originalHeight <= 0) return new Size()\n\n const aspectRatio = filledHeignt / originalHeight\n const filledWidth = aspectRatio * originalWidth\n\n return new Size([filledWidth, filledHeignt])\n}\n\nfunction getDisplacementFromAngle(angle: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n const { width: componentWidth } = componentSize\n const offset = componentWidth * zeroAnchor\n\n return angle / 360 * imageWidth - offset\n}\n\nfunction getAngleFromDisplacement(displacement: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n const { width: componentWidth } = componentSize\n const offset = componentWidth * zeroAnchor\n\n let angle = (displacement + offset) % imageWidth / imageWidth * 360\n while (angle < 0) angle += 360\n\n return angle\n}\n"]}
1
+ {"version":3,"file":"Panorama.js","sourceRoot":"/","sources":["Panorama.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA2F;AAC3F,+BAA4B;AAC5B,wEAAiD;AACjD,kFAA2D;AAC3D,4EAAqD;AACrD,oEAA6C;AA4F7C;;;GAGG;AACH,kBAAe,IAAA,kBAAU,EAAgC,UAAC,EAezD,EAAE,GAAG;IAdJ,IAAA,aAAwB,EAAjB,aAAa,mBAAG,CAAC,KAAA,EACxB,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,GAAG,SAAA,EACH,kBAAc,EAAd,UAAU,mBAAG,CAAC,KAAA,EACd,aAAa,mBAAA,EACb,gBAAgB,sBAAA,EAChB,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,gBAAgB,sBAAA,EAChB,mBAAmB,yBAAA,EACnB,gBAAgB,sBAAA,EAChB,iBAAiB,uBAAA,EACjB,QAAQ,cAAA,EACL,KAAK,cAdgD,wMAezD,CADS;IAER,IAAM,6BAA6B,GAAG,UAAC,eAAuB,EAAE,EAAU,EAAE,EAAU;QACpF,IAAM,eAAe,GAAG,eAAe,GAAG,EAAE,GAAG,KAAK,CAAA;QAEpD,OAAO,eAAe,CAAA;IACxB,CAAC,CAAA;IAED,IAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAA;IACtC,IAAA,KAAA,OAAS,IAAA,yBAAe,EAAC,OAAO,EAAE,EAAE,QAAQ,UAAA,EAAE,CAAC,IAAA,EAA9C,IAAI,QAA0C,CAAA;IAC/C,IAAA,KAAA,OAAoB,IAAA,gBAAQ,EAAC,aAAa,CAAC,IAAA,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAA;IAE3C,IAAA,KAAqD,IAAA,4BAAkB,EAAC,GAAG,EAAE;QACjF,mBAAmB,qBAAA;QACnB,gBAAgB,kBAAA;QAChB,iBAAiB,mBAAA;KAClB,CAAC,EAJM,KAAA,uBAAsB,EAAV,SAAS,QAAA,EAAG,KAAA,uBAAsB,EAAV,SAAS,QAInD,CAAA;IAEI,IAAA,KAAuE,IAAA,uBAAa,EAAC,OAAO,EAAE;QAClG,YAAY,EAAE,CAAC;QACf,SAAS,EAAE,6BAA6B;QACxC,WAAW,aAAA;QACX,SAAS,WAAA;KACV,CAAC,EALM,KAAA,wBAAwB,EAAX,UAAU,QAAA,EAAG,KAAA,mBAAsC,EAA9B,YAAY,QAAA,EAAE,eAAe,QAKrE,CAAA;IAEF,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU,IAAI,SAAS,IAAI,CAAC,SAAS;YAAE,OAAM;QAEjD,IAAM,eAAe,GAAG,wBAAwB,CAAC,aAAa,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,CAAC,CAAA;QAE5F,IAAI,eAAe,KAAK,YAAY,EAAE;YACpC,eAAe,CAAC,eAAe,CAAC,CAAA;SACjC;QAED,IAAI,aAAa,KAAK,KAAK,EAAE;YAC3B,QAAQ,CAAC,aAAa,CAAC,CAAA;SACxB;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAA;IAE3D,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,UAAU,IAAI,CAAC,SAAS;YAAE,OAAM;QAErC,IAAM,QAAQ,GAAG,wBAAwB,CAAC,YAAY,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,CAAC,CAAA;QAEpF,IAAI,KAAK,KAAK,QAAQ,EAAE;YACtB,QAAQ,CAAC,QAAQ,CAAC,CAAA;SACnB;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAA;IAE/C,IAAA,iBAAS,EAAC;QACR,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,EAAE,UAAU,CAAC,CAAA;QAClC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,KAAK,GAAG,GAAG,EAAE,UAAU,CAAC,CAAA;IAC7C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,IAAM,WAAW,GAAG,IAAA,qBAAW,EAAC;QAC9B,IAAI,EAAE;YACJ,eAAe,EAAE,cAAO,GAAG,MAAG;YAC9B,mBAAmB,EAAE,UAAG,CAAC,YAAY,OAAI;YACzC,gBAAgB,EAAE,QAAQ;YAC1B,cAAc,EAAE,WAAW;YAC3B,MAAM,EAAE,MAAM;YACd,WAAW,EAAE,MAAM;YACnB,KAAK,EAAE,MAAM;SACd;KACF,CAAC,CAAA;IAEF,OAAO,CACL,kDAAS,KAAK,IAAE,GAAG,EAAE,GAAG;QACtB,uCAAK,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,GAAG,CACzC,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,kBAAkB,CAAC,YAAkB,EAAE,UAAgB;IACtD,IAAO,aAAa,GAA6B,YAAY,MAAzC,EAAU,cAAc,GAAK,YAAY,OAAjB,CAAiB;IAC7D,IAAQ,YAAY,GAAK,UAAU,OAAf,CAAe;IAE3C,IAAI,cAAc,IAAI,CAAC;QAAE,OAAO,IAAI,YAAI,EAAE,CAAA;IAE1C,IAAM,WAAW,GAAG,YAAY,GAAG,cAAc,CAAA;IACjD,IAAM,WAAW,GAAG,WAAW,GAAG,aAAa,CAAA;IAE/C,OAAO,IAAI,YAAI,CAAC,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAA;AAC9C,CAAC;AAED,SAAS,wBAAwB,CAAC,KAAa,EAAE,iBAAuB,EAAE,aAAmB,EAAE,UAAkB;IACvG,IAAO,UAAU,GAAK,kBAAkB,CAAC,iBAAiB,EAAE,aAAa,CAAC,MAAzD,CAAyD;IAC1E,IAAO,cAAc,GAAK,aAAa,MAAlB,CAAkB;IAC/C,IAAM,MAAM,GAAG,cAAc,GAAG,UAAU,CAAA;IAE1C,OAAO,KAAK,GAAG,GAAG,GAAG,UAAU,GAAG,MAAM,CAAA;AAC1C,CAAC;AAED,SAAS,wBAAwB,CAAC,YAAoB,EAAE,iBAAuB,EAAE,aAAmB,EAAE,UAAkB;IAC9G,IAAO,UAAU,GAAK,kBAAkB,CAAC,iBAAiB,EAAE,aAAa,CAAC,MAAzD,CAAyD;IAC1E,IAAO,cAAc,GAAK,aAAa,MAAlB,CAAkB;IAC/C,IAAM,MAAM,GAAG,cAAc,GAAG,UAAU,CAAA;IAE1C,IAAI,KAAK,GAAG,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,UAAU,GAAG,UAAU,GAAG,GAAG,CAAA;IACnE,OAAO,KAAK,GAAG,CAAC;QAAE,KAAK,IAAI,GAAG,CAAA;IAE9B,OAAO,KAAK,CAAA;AACd,CAAC","sourcesContent":["import React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes } from 'react'\nimport { Size } from 'spase'\nimport useDragEffect from './hooks/useDragEffect'\nimport useLoadImageEffect from './hooks/useLoadImageEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asStyleDict from './utils/asStyleDict'\n\nexport type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {\n /**\n * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or\n * 360, the left bound of the image is at the center of the component.\n */\n angle?: number\n\n /**\n * The panning speed. This is a multiplier to the number of pixels dragged,\n * i.e. when set to 1, the image will shift the same amount of pixels that\n * were dragged.\n */\n speed?: number\n\n /**\n * The source URL of the image.\n */\n src?: string\n\n /**\n * A decimal percentage of the component width indicating where 0° should be,\n * i.e. if `zeroAnchor` is `0`, the `angle` would be 0° when the left edge of\n * the image is at the left edge of the component.\n */\n zeroAnchor?: number\n\n /**\n * Handler invoked when the positionchanges. This can either be invoked from\n * the `angle` prop being changed or from the image being dragged.\n *\n * @param position The current position.\n * @param isDragging Specifies if the position change is due to dragging.\n */\n onPositionChange?: (position: number, isDragging: boolean) => void\n\n /**\n * Handler invoked when the angle changes. This can either be invoked from the\n * `angle` prop being changed or from the image being dragged. When `angle` is\n * being double-binded, ensure that the value is only being set by this\n * handler when `isDragging` is `true` to avoid potential update overflow.\n *\n * @param angle The current angle.\n * @param isDragging Specifies if the angle change is due to dragging.\n */\n onAngleChange?: (angle: number, isDragging: boolean) => void\n\n /**\n * Handler invoked when dragging starts.\n */\n onDragStart?: () => void\n\n /**\n * Handler invoked when dragging ends.\n */\n onDragEnd?: () => void\n\n /**\n * Handler invoked when the image begins loading.\n */\n onImageLoadStart?: () => void\n\n /**\n * Handler invoked when the image is done loading.\n *\n * @param imageElement The loaded image element.\n */\n onImageLoadComplete?: (imageElement: HTMLImageElement) => void\n\n /**\n * Handler invoked when there is an error loading the image.\n */\n onImageLoadError?: () => void\n\n /**\n * Handler invoked when the image size changes. This is the actual size of the\n * loaded image. When no images are loaded yet, the size is `undefined`.\n *\n * @param size The actual size of the loaded iamge. If no images are loaded\n * yet, the size is `undefined`.\n */\n onImageSizeChange?: (size?: Size) => void\n\n /**\n * Handler invoked when the size of this component changes.\n *\n * @param size The size of this component.\n */\n onResize?: (size: Size) => void\n}\n\n/**\n * A component containing a pannable 360° panorama image. The angle supports\n * two-way binding.\n */\nexport default forwardRef<HTMLDivElement, PanoramaProps>(({\n angle: externalAngle = 0,\n speed = 1,\n src,\n zeroAnchor = 0,\n onAngleChange,\n onPositionChange,\n onDragStart,\n onDragEnd,\n onImageLoadStart,\n onImageLoadComplete,\n onImageLoadError,\n onImageSizeChange,\n onResize,\n ...props\n}, ref) => {\n const mapDragPositionToDisplacement = (currentPosition: number, dx: number, dy: number): number => {\n const newDisplacement = currentPosition - dx * speed\n\n return newDisplacement\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const [size] = useResizeEffect(bodyRef, { onResize })\n const [angle, setAngle] = useState(externalAngle)\n\n const { isLoading: [isLoading], imageSize: [imageSize] } = useLoadImageEffect(src, {\n onImageLoadComplete,\n onImageLoadError,\n onImageSizeChange,\n })\n\n const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragEffect(bodyRef, {\n initialValue: 0,\n transform: mapDragPositionToDisplacement,\n onDragStart,\n onDragEnd,\n })\n\n useEffect(() => {\n if (isDragging || isLoading || !imageSize) return\n\n const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, size, zeroAnchor)\n\n if (newDisplacement !== displacement) {\n setDisplacement(newDisplacement)\n }\n\n if (externalAngle !== angle) {\n setAngle(externalAngle)\n }\n }, [externalAngle, isLoading, imageSize, size, zeroAnchor])\n\n useEffect(() => {\n if (!isDragging || !imageSize) return\n\n const newAngle = getAngleFromDisplacement(displacement, imageSize, size, zeroAnchor)\n\n if (angle !== newAngle) {\n setAngle(newAngle)\n }\n }, [displacement, imageSize, size, zeroAnchor])\n\n useEffect(() => {\n onAngleChange?.(angle, isDragging)\n onPositionChange?.(angle / 360, isDragging)\n }, [angle])\n\n const fixedStyles = asStyleDict({\n body: {\n backgroundImage: `url(${src})`,\n backgroundPositionX: `${-displacement}px`,\n backgroundRepeat: 'repeat',\n backgroundSize: 'auto 100%',\n height: '100%',\n touchAction: 'none',\n width: '100%',\n },\n })\n\n return (\n <div {...props} ref={ref}>\n <div ref={bodyRef} style={fixedStyles.body}/>\n </div>\n )\n})\n\nfunction getFilledImageSize(originalSize: Size, sizeToFill: Size): Size {\n const { width: originalWidth, height: originalHeight } = originalSize\n const { height: filledHeignt } = sizeToFill\n\n if (originalHeight <= 0) return new Size()\n\n const aspectRatio = filledHeignt / originalHeight\n const filledWidth = aspectRatio * originalWidth\n\n return new Size([filledWidth, filledHeignt])\n}\n\nfunction getDisplacementFromAngle(angle: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n const { width: componentWidth } = componentSize\n const offset = componentWidth * zeroAnchor\n\n return angle / 360 * imageWidth - offset\n}\n\nfunction getAngleFromDisplacement(displacement: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n const { width: componentWidth } = componentSize\n const offset = componentWidth * zeroAnchor\n\n let angle = (displacement + offset) % imageWidth / imageWidth * 360\n while (angle < 0) angle += 360\n\n return angle\n}\n"]}
@@ -1,6 +1,6 @@
1
- import React, { HTMLAttributes, PropsWithChildren } from 'react';
2
- import { Size } from 'spase';
3
- import { PanoramaProps } from './Panorama';
1
+ import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
2
+ import { type Size } from 'spase';
3
+ import { type PanoramaProps } from './Panorama';
4
4
  export type PanoramaSliderProps = HTMLAttributes<HTMLDivElement> & PanoramaProps & PropsWithChildren<{
5
5
  /**
6
6
  * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of
@@ -27,11 +27,11 @@ export type PanoramaSliderProps = HTMLAttributes<HTMLDivElement> & PanoramaProps
27
27
  /**
28
28
  * A slider for a {@link Panorama} component.
29
29
  *
30
- * @exports PanoramaSliderIndicator - The indicator that appears when the slider
31
- * is being dragged.
32
- * @exports PanoramaSliderReticle - The reticle that indicates the FOV of the
33
- * backing {@link Panorama}.
34
- * @exports PanoramaSliderTrack - The slide track.
30
+ * @exports PanoramaSliderIndicator The indicator that appears when the slider
31
+ * is being dragged.
32
+ * @exports PanoramaSliderReticle The reticle that indicates the FOV of the
33
+ * backing {@link Panorama}.
34
+ * @exports PanoramaSliderTrack The slide track.
35
35
  */
36
36
  declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Omit<React.HTMLAttributes<HTMLDivElement>, "onResize"> & {
37
37
  angle?: number | undefined;
@@ -67,8 +67,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
67
67
  exports.PanoramaSliderIndicator = exports.PanoramaSliderReticle = exports.PanoramaSliderTrack = void 0;
68
68
  var classnames_1 = __importDefault(require("classnames"));
69
69
  var react_1 = __importStar(require("react"));
70
- var useResizeEffect_1 = __importDefault(require("./hooks/useResizeEffect"));
71
70
  var Panorama_1 = __importDefault(require("./Panorama"));
71
+ var useResizeEffect_1 = __importDefault(require("./hooks/useResizeEffect"));
72
72
  var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
73
73
  var asComponentDict_1 = __importDefault(require("./utils/asComponentDict"));
74
74
  var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
@@ -77,11 +77,11 @@ var styles_1 = __importDefault(require("./utils/styles"));
77
77
  /**
78
78
  * A slider for a {@link Panorama} component.
79
79
  *
80
- * @exports PanoramaSliderIndicator - The indicator that appears when the slider
81
- * is being dragged.
82
- * @exports PanoramaSliderReticle - The reticle that indicates the FOV of the
83
- * backing {@link Panorama}.
84
- * @exports PanoramaSliderTrack - The slide track.
80
+ * @exports PanoramaSliderIndicator The indicator that appears when the slider
81
+ * is being dragged.
82
+ * @exports PanoramaSliderReticle The reticle that indicates the FOV of the
83
+ * backing {@link Panorama}.
84
+ * @exports PanoramaSliderTrack The slide track.
85
85
  */
86
86
  exports.default = (0, react_1.forwardRef)(function (_a, ref) {
87
87
  var _b, _c, _d, _e;
@@ -1 +1 @@
1
- {"version":3,"file":"PanoramaSlider.js","sourceRoot":"/","sources":["PanoramaSlider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAA8F;AAE9F,4EAAqD;AACrD,wDAAoD;AACpD,4EAAqD;AACrD,4EAAqD;AACrD,oEAA6C;AAC7C,kFAA2D;AAC3D,0DAAmC;AA4BnC;;;;;;;;GAQG;AACH,kBAAe,IAAA,kBAAU,EAAsC,UAAC,EAqB/D,EAAE,GAAG;;IApBJ,IAAA,SAAS,eAAA,EACT,KAAK,WAAA,EACL,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,qBAAuB,EAAvB,aAAa,mBAAG,OAAO,KAAA,EACvB,QAAQ,cAAA,EACR,GAAG,SAAA,EACH,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,GAAG,SAAA,EACH,YAAY,kBAAA,EACZ,kBAAc,EAAd,UAAU,mBAAG,CAAC,KAAA,EACd,aAAa,mBAAA,EACb,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,mBAAmB,yBAAA,EACnB,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,iBAAiB,uBAAA,EACjB,gBAAgB,sBAAA,EAChB,QAAQ,cAAA,EACL,KAAK,cApBsD,kRAqB/D,CADS;IAER,IAAM,cAAc,GAAG;QACrB,IAAI,CAAC,SAAS;YAAE,OAAO,CAAC,CAAA;QAChB,IAAA,KAAK,GAAa,SAAS,MAAtB,EAAE,MAAM,GAAK,SAAS,OAAd,CAAc;QACnC,IAAI,MAAM,KAAK,CAAC;YAAE,OAAO,CAAC,CAAA;QAE1B,OAAO,KAAK,GAAG,MAAM,CAAA;IACvB,CAAC,CAAA;IAED,IAAM,eAAe,GAAG;QACtB,IAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,GAAG,CAAC,YAAY,CAAC,MAAM,GAAG,WAAW,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAElI,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;IACjC,CAAC,CAAA;IAED,IAAM,qBAAqB,GAAG;QAC5B,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC;YAAE,OAAO,UAAU,CAAA;QAEtC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,GAAG,GAAG,GAAG,UAAU,GAAG,YAAY,CAAC,GAAG,IAAI,CAAC,KAAK,CAAA;IACrF,CAAC,CAAA;IAED,IAAM,gBAAgB,GAAG;QACvB,aAAa,CAAC,IAAI,CAAC,CAAA;QACnB,WAAW,aAAX,WAAW,uBAAX,WAAW,EAAI,CAAA;IACjB,CAAC,CAAA;IAED,IAAM,cAAc,GAAG;QACrB,aAAa,CAAC,KAAK,CAAC,CAAA;QACpB,SAAS,aAAT,SAAS,uBAAT,SAAS,EAAI,CAAA;IACf,CAAC,CAAA;IAED,IAAM,WAAW,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAA;IAE1C,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAmB,SAAS,CAAC,IAAA,EAAhE,SAAS,QAAA,EAAE,YAAY,QAAyC,CAAA;IACjE,IAAA,KAAA,OAA8B,IAAA,gBAAQ,EAAC,KAAK,CAAC,IAAA,EAA5C,UAAU,QAAA,EAAE,aAAa,QAAmB,CAAA;IAE7C,IAAA,KAAA,OAAS,IAAA,yBAAe,EAAC,WAAW,EAAE,EAAE,QAAQ,UAAA,EAAE,CAAC,IAAA,EAAlD,IAAI,QAA8C,CAAA;IAEzD,IAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IACpC,IAAM,YAAY,GAAG,eAAe,EAAE,CAAA;IACtC,IAAM,kBAAkB,GAAG,qBAAqB,EAAE,CAAA;IAElD,IAAM,UAAU,GAAG,IAAA,yBAAe,EAAC,QAAQ,EAAE;QAC3C,KAAK,EAAE,2BAAmB;QAC1B,OAAO,EAAE,6BAAqB;QAC9B,SAAS,EAAE,+BAAuB;KACnC,CAAC,CAAA;IAEF,IAAM,eAAe,GAAG,IAAA,yBAAe,EAAC;QACtC,IAAI,EAAE,IAAA,oBAAU,EAAC;YACf,QAAQ,EAAE,UAAU;SACrB,CAAC;QACF,KAAK,EAAE,IAAA,oBAAU,EAAC;YAChB,QAAQ,EAAE,UAAU;SACrB,CAAC;QACF,OAAO,EAAE,IAAA,oBAAU,EAAC;YAClB,QAAQ,EAAE,UAAU;SACrB,CAAC;QACF,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,QAAQ,EAAE,UAAU;SACrB,CAAC;KACH,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,IAAA,qBAAW,EAAC;QAC9B,IAAI,eACC,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC;YAC7B,KAAK,EAAE,UAAG,IAAI,CAAC,MAAM,GAAG,WAAW,OAAI;SACxC,CAAC,CAAC,CAAC;YACF,MAAM,EAAE,UAAG,IAAI,CAAC,KAAK,GAAG,WAAW,OAAI;SACxC,CACF;QACD,IAAI,EAAE;YACJ,MAAM,EAAE,MAAM;YACd,IAAI,EAAE,GAAG;YACT,QAAQ,EAAE,QAAQ;YAClB,aAAa,EAAE,MAAM;YACrB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,MAAM;SACd;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;QACD,QAAQ,EAAE;YACR,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,MAAM;YACd,cAAc,EAAE,YAAY;YAC5B,IAAI,EAAE,GAAG;YACT,QAAQ,EAAE,SAAS;YACnB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,MAAM;SACd;QACD,KAAK,EAAE;YACL,IAAI,EAAE,UAAU;SACjB;QACD,OAAO,EAAE;YACP,KAAK,EAAE,UAAG,YAAY,OAAI;SAC3B;QACD,SAAS,EAAE;YACT,KAAK,EAAE,UAAG,YAAY,OAAI;SAC3B;KACF,CAAC,CAAA;IAEF,IAAM,aAAa,GAAG,IAAA,qBAAW,EAAC;QAChC,KAAK,EAAE;YACL,UAAU,EAAE,mBAAmB;YAC/B,MAAM,EAAE,MAAM;SACf;QACD,OAAO,EAAE;YACP,UAAU,EAAE,wBAAiB,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAG;YACpD,IAAI,EAAE,UAAU;YAChB,MAAM,EAAE,MAAM;YACd,kBAAkB,EAAE,OAAO;YAC3B,kBAAkB,EAAE,YAAY;YAChC,wBAAwB,EAAE,UAAU;SACrC;QACD,SAAS,EAAE;YACT,UAAU,EAAE,MAAM;YAClB,YAAY,EAAE,KAAK;YACnB,MAAM,EAAE,OAAO;YACf,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE,OAAO;YAChB,MAAM,EAAE,KAAK;YACb,IAAI,EAAE,GAAG;YACT,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3B,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,GAAG;YACV,UAAU,EAAE,sBAAsB;SACnC;KACF,CAAC,CAAA;IAEF,OAAO,CACL,kDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EACtD,KAAK,EAAE,IAAA,gBAAM,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC;QAEtC,8BAAC,kBAAQ,IACP,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,WAAW,CAAC,QAAQ,EAC3B,UAAU,EAAE,kBAAkB,EAC9B,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,gBAAgB,EAC7B,mBAAmB,EAAE,mBAAmB,EACxC,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAClC,iBAAiB,EAAE,YAAY,EAC/B,gBAAgB,EAAE,gBAAgB,GAClC;QACF,uCAAK,KAAK,EAAE,WAAW,CAAC,IAAI;YAC1B,uCAAK,KAAK,EAAE,WAAW,CAAC,QAAQ;gBAC7B,IAAA,4BAAkB,EAAC,MAAA,UAAU,CAAC,KAAK,mCAAI,8BAAC,2BAAmB,IAAC,KAAK,EAAE,aAAa,CAAC,KAAK,GAAG,EAAE;oBAC1F,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,CAAC,KAAK,CAAC;oBAC5C,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,KAAK,CAAC;iBACjC,CAAC;gBACD,IAAA,4BAAkB,EAAC,MAAA,UAAU,CAAC,OAAO,mCAAI,8BAAC,6BAAqB,IAAC,KAAK,EAAE,aAAa,CAAC,OAAO,GAAG,EAAE;oBAChG,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,CAAC,OAAO,CAAC;oBAC9C,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,OAAO,CAAC;iBACnC,CAAC;gBACD,IAAA,4BAAkB,EAAC,MAAA,UAAU,CAAC,KAAK,mCAAI,8BAAC,2BAAmB,IAAC,KAAK,EAAE,aAAa,CAAC,KAAK,GAAG,EAAE;oBAC1F,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,CAAC,KAAK,CAAC;oBAC5C,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,KAAK,CAAC;iBACjC,CAAC,CACE,CACF;QACL,IAAA,4BAAkB,EAAC,MAAA,UAAU,CAAC,SAAS,mCAAI,8BAAC,+BAAuB,IAAC,KAAK,EAAE,aAAa,CAAC,SAAS,GAAG,EAAE;YACtG,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,CAAC,SAAS,CAAC;YAChD,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,SAAS,CAAC;SACrC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEK,IAAM,mBAAmB,GAAG,UAAC,EAA4C;QAAvC,KAAK,cAAV,EAAY,CAAF;IAAuC,OAAA,kDAAS,KAAK,EAAG,CAAA;CAAA,CAAA;AAAzF,QAAA,mBAAmB,uBAAsE;AAE/F,IAAM,qBAAqB,GAAG,UAAC,EAA4C;QAAvC,KAAK,cAAV,EAAY,CAAF;IAAuC,OAAA,kDAAS,KAAK,EAAG,CAAA;CAAA,CAAA;AAA3F,QAAA,qBAAqB,yBAAsE;AAEjG,IAAM,uBAAuB,GAAG,UAAC,EAA4C;QAAvC,KAAK,cAAV,EAAY,CAAF;IAAuC,OAAA,kDAAS,KAAK,EAAG,CAAA;CAAA,CAAA;AAA7F,QAAA,uBAAuB,2BAAsE","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, HTMLAttributes, PropsWithChildren, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport Panorama, { PanoramaProps } from './Panorama'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type PanoramaSliderProps = HTMLAttributes<HTMLDivElement> & PanoramaProps & PropsWithChildren<{\n /**\n * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of\n * the reticle. 360 indicates the reticle covers the entire image. If this is\n * unspecified, the component will attempt to automatically calculate the FOV\n * using the `viewportSize` prop.\n */\n fov?: number\n\n /**\n * Specifies which length (width or height) should be automatically\n * calculated. The counterpart must be known (if `width` is specified here,\n * the component's height must be known, i.e. it is specified in the CSS).\n * Defaults to `width`.\n */\n autoDimension?: 'width' | 'height'\n\n /**\n * Size of the viewport that this component is controlling. A viewport can be\n * thought of as a DOM element containing an aspect-filled image. This is used\n * to automatically calculate the FOV if `fov` prop is not specified. If it\n * is, this prop is ignored.\n */\n viewportSize?: Size\n}>\n\n/**\n * A slider for a {@link Panorama} component.\n *\n * @exports PanoramaSliderIndicator - The indicator that appears when the slider\n * is being dragged.\n * @exports PanoramaSliderReticle - The reticle that indicates the FOV of the\n * backing {@link Panorama}.\n * @exports PanoramaSliderTrack - The slide track.\n */\nexport default forwardRef<HTMLDivElement, PanoramaSliderProps>(({\n className,\n style,\n angle = 0,\n autoDimension = 'width',\n children,\n fov,\n speed = 1,\n src,\n viewportSize,\n zeroAnchor = 0,\n onAngleChange,\n onDragEnd,\n onDragStart,\n onImageLoadComplete,\n onImageLoadError,\n onImageLoadStart,\n onImageSizeChange,\n onPositionChange,\n onResize,\n ...props\n}, ref) => {\n const getAspectRatio = () => {\n if (!imageSize) return 0\n const { width, height } = imageSize\n if (height === 0) return 0\n\n return width / height\n }\n\n const getReticleWidth = () => {\n const deg = Math.min(360, Math.max(0, fov ?? (viewportSize ? viewportSize.width / (viewportSize.height * aspectRatio) * 360 : 0)))\n\n return size.width * (deg / 360)\n }\n\n const getAdjustedZeroAnchor = () => {\n if (size.width <= 0) return zeroAnchor\n\n return ((size.width - reticleWidth) * 0.5 + zeroAnchor * reticleWidth) / size.width\n }\n\n const dragStartHandler = () => {\n setIsDragging(true)\n onDragStart?.()\n }\n\n const dragEndHandler = () => {\n setIsDragging(false)\n onDragEnd?.()\n }\n\n const panoramaRef = useRef<HTMLDivElement>(null)\n\n const [imageSize, setImageSize] = useState<Size | undefined>(undefined)\n const [isDragging, setIsDragging] = useState(false)\n\n const [size] = useResizeEffect(panoramaRef, { onResize })\n\n const aspectRatio = getAspectRatio()\n const reticleWidth = getReticleWidth()\n const adjustedZeroAnchor = getAdjustedZeroAnchor()\n\n const components = asComponentDict(children, {\n track: PanoramaSliderTrack,\n reticle: PanoramaSliderReticle,\n indicator: PanoramaSliderIndicator,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames({\n dragging: isDragging,\n }),\n track: classNames({\n dragging: isDragging,\n }),\n reticle: classNames({\n dragging: isDragging,\n }),\n indicator: classNames({\n dragging: isDragging,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n ...autoDimension === 'width' ? {\n width: `${size.height * aspectRatio}px`,\n } : {\n height: `${size.width / aspectRatio}px`,\n },\n },\n body: {\n height: '100%',\n left: '0',\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n top: '0',\n width: '100%',\n },\n panorama: {\n height: '100%',\n width: '100%',\n },\n controls: {\n alignItems: 'center',\n display: 'flex',\n height: '100%',\n justifyContent: 'flex-start',\n left: '0',\n overflow: 'visible',\n position: 'absolute',\n top: '0',\n width: '100%',\n },\n track: {\n flex: '1 0 auto',\n },\n reticle: {\n width: `${reticleWidth}px`,\n },\n indicator: {\n width: `${reticleWidth}px`,\n },\n })\n\n const defaultStyles = asStyleDict({\n track: {\n background: 'rgba(0, 0, 0, .7)',\n height: '100%',\n },\n reticle: {\n background: `rgba(0, 0, 0, ${isDragging ? 0 : 0.3})`,\n flex: '0 0 auto',\n height: '100%',\n transitionDuration: '100ms',\n transitionProperty: 'background',\n transitionTimingFunction: 'ease-out',\n },\n indicator: {\n background: '#fff',\n borderRadius: '2px',\n bottom: '-10px',\n boxSizing: 'border-box',\n display: 'block',\n height: '2px',\n left: '0',\n margin: '0 auto',\n opacity: isDragging ? 1 : 0,\n position: 'absolute',\n right: '0',\n transition: 'opacity .3s ease-out',\n },\n })\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <Panorama\n angle={angle}\n ref={panoramaRef}\n speed={speed}\n src={src}\n style={fixedStyles.panorama}\n zeroAnchor={adjustedZeroAnchor}\n onAngleChange={onAngleChange}\n onDragEnd={dragEndHandler}\n onDragStart={dragStartHandler}\n onImageLoadComplete={onImageLoadComplete}\n onImageLoadError={onImageLoadError}\n onImageLoadStart={onImageLoadStart}\n onImageSizeChange={setImageSize}\n onPositionChange={onPositionChange}\n />\n <div style={fixedStyles.body}>\n <div style={fixedStyles.controls}>\n {cloneStyledElement(components.track ?? <PanoramaSliderTrack style={defaultStyles.track}/>, {\n className: classNames(fixedClassNames.track),\n style: styles(fixedStyles.track),\n })}\n {cloneStyledElement(components.reticle ?? <PanoramaSliderReticle style={defaultStyles.reticle}/>, {\n className: classNames(fixedClassNames.reticle),\n style: styles(fixedStyles.reticle),\n })}\n {cloneStyledElement(components.track ?? <PanoramaSliderTrack style={defaultStyles.track}/>, {\n className: classNames(fixedClassNames.track),\n style: styles(fixedStyles.track),\n })}\n </div>\n </div>\n {cloneStyledElement(components.indicator ?? <PanoramaSliderIndicator style={defaultStyles.indicator}/>, {\n className: classNames(fixedClassNames.indicator),\n style: styles(fixedStyles.indicator),\n })}\n </div>\n )\n})\n\nexport const PanoramaSliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const PanoramaSliderReticle = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const PanoramaSliderIndicator = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}
1
+ {"version":3,"file":"PanoramaSlider.js","sourceRoot":"/","sources":["PanoramaSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useRef, useState, type HTMLAttributes, type PropsWithChildren } from 'react'\nimport { type Size } from 'spase'\nimport Panorama, { type PanoramaProps } from './Panorama'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type PanoramaSliderProps = HTMLAttributes<HTMLDivElement> & PanoramaProps & PropsWithChildren<{\n /**\n * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of\n * the reticle. 360 indicates the reticle covers the entire image. If this is\n * unspecified, the component will attempt to automatically calculate the FOV\n * using the `viewportSize` prop.\n */\n fov?: number\n\n /**\n * Specifies which length (width or height) should be automatically\n * calculated. The counterpart must be known (if `width` is specified here,\n * the component's height must be known, i.e. it is specified in the CSS).\n * Defaults to `width`.\n */\n autoDimension?: 'width' | 'height'\n\n /**\n * Size of the viewport that this component is controlling. A viewport can be\n * thought of as a DOM element containing an aspect-filled image. This is used\n * to automatically calculate the FOV if `fov` prop is not specified. If it\n * is, this prop is ignored.\n */\n viewportSize?: Size\n}>\n\n/**\n * A slider for a {@link Panorama} component.\n *\n * @exports PanoramaSliderIndicator The indicator that appears when the slider\n * is being dragged.\n * @exports PanoramaSliderReticle The reticle that indicates the FOV of the\n * backing {@link Panorama}.\n * @exports PanoramaSliderTrack The slide track.\n */\nexport default forwardRef<HTMLDivElement, PanoramaSliderProps>(({\n className,\n style,\n angle = 0,\n autoDimension = 'width',\n children,\n fov,\n speed = 1,\n src,\n viewportSize,\n zeroAnchor = 0,\n onAngleChange,\n onDragEnd,\n onDragStart,\n onImageLoadComplete,\n onImageLoadError,\n onImageLoadStart,\n onImageSizeChange,\n onPositionChange,\n onResize,\n ...props\n}, ref) => {\n const getAspectRatio = () => {\n if (!imageSize) return 0\n const { width, height } = imageSize\n if (height === 0) return 0\n\n return width / height\n }\n\n const getReticleWidth = () => {\n const deg = Math.min(360, Math.max(0, fov ?? (viewportSize ? viewportSize.width / (viewportSize.height * aspectRatio) * 360 : 0)))\n\n return size.width * (deg / 360)\n }\n\n const getAdjustedZeroAnchor = () => {\n if (size.width <= 0) return zeroAnchor\n\n return ((size.width - reticleWidth) * 0.5 + zeroAnchor * reticleWidth) / size.width\n }\n\n const dragStartHandler = () => {\n setIsDragging(true)\n onDragStart?.()\n }\n\n const dragEndHandler = () => {\n setIsDragging(false)\n onDragEnd?.()\n }\n\n const panoramaRef = useRef<HTMLDivElement>(null)\n\n const [imageSize, setImageSize] = useState<Size | undefined>(undefined)\n const [isDragging, setIsDragging] = useState(false)\n\n const [size] = useResizeEffect(panoramaRef, { onResize })\n\n const aspectRatio = getAspectRatio()\n const reticleWidth = getReticleWidth()\n const adjustedZeroAnchor = getAdjustedZeroAnchor()\n\n const components = asComponentDict(children, {\n track: PanoramaSliderTrack,\n reticle: PanoramaSliderReticle,\n indicator: PanoramaSliderIndicator,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames({\n dragging: isDragging,\n }),\n track: classNames({\n dragging: isDragging,\n }),\n reticle: classNames({\n dragging: isDragging,\n }),\n indicator: classNames({\n dragging: isDragging,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n ...autoDimension === 'width' ? {\n width: `${size.height * aspectRatio}px`,\n } : {\n height: `${size.width / aspectRatio}px`,\n },\n },\n body: {\n height: '100%',\n left: '0',\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n top: '0',\n width: '100%',\n },\n panorama: {\n height: '100%',\n width: '100%',\n },\n controls: {\n alignItems: 'center',\n display: 'flex',\n height: '100%',\n justifyContent: 'flex-start',\n left: '0',\n overflow: 'visible',\n position: 'absolute',\n top: '0',\n width: '100%',\n },\n track: {\n flex: '1 0 auto',\n },\n reticle: {\n width: `${reticleWidth}px`,\n },\n indicator: {\n width: `${reticleWidth}px`,\n },\n })\n\n const defaultStyles = asStyleDict({\n track: {\n background: 'rgba(0, 0, 0, .7)',\n height: '100%',\n },\n reticle: {\n background: `rgba(0, 0, 0, ${isDragging ? 0 : 0.3})`,\n flex: '0 0 auto',\n height: '100%',\n transitionDuration: '100ms',\n transitionProperty: 'background',\n transitionTimingFunction: 'ease-out',\n },\n indicator: {\n background: '#fff',\n borderRadius: '2px',\n bottom: '-10px',\n boxSizing: 'border-box',\n display: 'block',\n height: '2px',\n left: '0',\n margin: '0 auto',\n opacity: isDragging ? 1 : 0,\n position: 'absolute',\n right: '0',\n transition: 'opacity .3s ease-out',\n },\n })\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <Panorama\n angle={angle}\n ref={panoramaRef}\n speed={speed}\n src={src}\n style={fixedStyles.panorama}\n zeroAnchor={adjustedZeroAnchor}\n onAngleChange={onAngleChange}\n onDragEnd={dragEndHandler}\n onDragStart={dragStartHandler}\n onImageLoadComplete={onImageLoadComplete}\n onImageLoadError={onImageLoadError}\n onImageLoadStart={onImageLoadStart}\n onImageSizeChange={setImageSize}\n onPositionChange={onPositionChange}\n />\n <div style={fixedStyles.body}>\n <div style={fixedStyles.controls}>\n {cloneStyledElement(components.track ?? <PanoramaSliderTrack style={defaultStyles.track}/>, {\n className: classNames(fixedClassNames.track),\n style: styles(fixedStyles.track),\n })}\n {cloneStyledElement(components.reticle ?? <PanoramaSliderReticle style={defaultStyles.reticle}/>, {\n className: classNames(fixedClassNames.reticle),\n style: styles(fixedStyles.reticle),\n })}\n {cloneStyledElement(components.track ?? <PanoramaSliderTrack style={defaultStyles.track}/>, {\n className: classNames(fixedClassNames.track),\n style: styles(fixedStyles.track),\n })}\n </div>\n </div>\n {cloneStyledElement(components.indicator ?? <PanoramaSliderIndicator style={defaultStyles.indicator}/>, {\n className: classNames(fixedClassNames.indicator),\n style: styles(fixedStyles.indicator),\n })}\n </div>\n )\n})\n\nexport const PanoramaSliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const PanoramaSliderReticle = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const PanoramaSliderIndicator = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}
@@ -1,4 +1,4 @@
1
- import React, { HTMLAttributes, PropsWithChildren } from 'react';
1
+ import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
2
2
  type Orientation = 'horizontal' | 'vertical';
3
3
  type Range = [number, number];
4
4
  export type RangeSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
@@ -1 +1 @@
1
- {"version":3,"file":"RangeSlider.js","sourceRoot":"/","sources":["RangeSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, HTMLAttributes, PropsWithChildren, useEffect, useRef, useState } from 'react'\nimport useDragEffect from './hooks/useDragEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\ntype Range = [number, number]\n\nexport type RangeSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n areLabelsVisible?: boolean\n decimalPlaces?: number\n knobPadding?: number\n max: number\n min: number\n orientation?: Orientation\n range?: Range\n steps?: number\n onRangeChange?: (range: Range) => void\n}>\n\nexport default forwardRef<HTMLDivElement, RangeSliderProps>(({\n children,\n className,\n areLabelsVisible = true,\n decimalPlaces = 2,\n knobPadding = 20,\n max: maxValue,\n min: minValue,\n orientation = 'vertical',\n range: externalRange,\n steps = -1,\n onRangeChange,\n ...props\n}, ref) => {\n const getPositionByValue = (value: number) => (value - minValue) / (maxValue - minValue)\n const getPositionByDisplacement = (displacement: number) => displacement / (orientation === 'horizontal' ? size.width : size.height)\n const getValueByPosition = (position: number) => position * (maxValue - minValue) + minValue\n const getValueByDisplacement = (displacement: number) => getValueByPosition(getPositionByDisplacement(displacement))\n const getDisplacementByPosition = (position: number) => position * (orientation === 'horizontal' ? size.width : size.height)\n const getDisplacementByValue = (value: number) => getDisplacementByPosition(getPositionByValue(value))\n\n const getClosestSteppedValue = (value: number) => {\n const n = breakpoints.length\n let idx = 0\n let diff = Infinity\n\n for (let i = 0; i < n; i++) {\n const t = breakpoints[i]\n const d = Math.abs(value - t)\n\n if (d < diff) {\n diff = d\n idx = i\n }\n }\n\n return breakpoints[idx]\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const startKnobRef = useRef<HTMLDivElement>(null)\n const endKnobRef = useRef<HTMLDivElement>(null)\n\n const [size] = useResizeEffect(bodyRef)\n\n const [range, setRange] = useState<Range>(externalRange ?? [minValue, maxValue])\n\n const { isDragging: [isDraggingStartKnob], isReleasing: [isReleasingStartKnob], value: [startValue, setStartValue] } = useDragEffect(startKnobRef, {\n initialValue: externalRange?.[0] ?? minValue,\n transform: (value: number, dx: number, dy: number) => {\n const delta = orientation === 'horizontal' ? dx : dy\n const dMin = getDisplacementByValue(minValue)\n const dMax = getDisplacementByValue(range[1])\n const dCurr = getDisplacementByValue(value) + delta\n\n return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)))\n },\n }, [minValue, orientation, size, range[1]])\n\n const { isDragging: [isDraggingEndKnob], isReleasing: [isReleasingEndKnob], value: [endValue, setEndValue] } = useDragEffect(endKnobRef, {\n initialValue: externalRange?.[1] ?? maxValue,\n transform: (value: number, dx: number, dy: number) => {\n const delta = orientation === 'horizontal' ? dx : dy\n const dMin = getDisplacementByValue(range[0])\n const dMax = getDisplacementByValue(maxValue)\n const dCurr = getDisplacementByValue(value) + delta\n\n return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)))\n },\n }, [maxValue, orientation, size, range[0]])\n\n const breakpoints = [minValue, ...[...Array(steps)].map((v, i) => minValue + (i + 1) * (maxValue - minValue) / (1 + steps)), maxValue]\n const [start, end] = range.map(getDisplacementByValue)\n const highlightLength = end - start\n\n useEffect(() => {\n if (range[0] === startValue) return\n setRange([startValue, range[1]])\n onRangeChange?.(range)\n }, [startValue])\n\n useEffect(() => {\n if (range[1] === endValue) return\n setRange([range[0], endValue])\n onRangeChange?.(range)\n }, [endValue])\n\n useEffect(() => {\n if (isDraggingStartKnob || isDraggingEndKnob || isEqual(externalRange, range)) return\n setRange(externalRange ?? [minValue, maxValue])\n }, [externalRange])\n\n useEffect(() => {\n if (steps < 0) return\n setStartValue(getClosestSteppedValue(startValue))\n }, [isReleasingStartKnob])\n\n useEffect(() => {\n if (steps < 0 || !isReleasingEndKnob) return\n setEndValue(getClosestSteppedValue(endValue))\n }, [isReleasingEndKnob])\n\n const components = asComponentDict(children, {\n gutter: RangeSliderGutter,\n highlight: RangeSliderHighlight,\n knob: RangeSliderKnob,\n label: RangeSliderLabel,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n gutter: classNames(orientation),\n highlight: classNames(orientation),\n knob: classNames(orientation),\n label: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n body: {\n height: '100%',\n width: '100%',\n },\n gutter: {\n display: 'block',\n top: '0',\n left: '0',\n position: 'absolute',\n width: '100%',\n height: '100%',\n },\n highlight: {\n height: '100%',\n left: '0',\n position: 'absolute',\n top: '0',\n ...orientation === 'horizontal' ? {\n width: `${highlightLength}px`,\n transform: `translate3d(${start}px, 0, 0)`,\n } : {\n height: `${highlightLength}px`,\n transform: `translate3d(0, ${start}px, 0)`,\n },\n },\n knob: {\n bottom: '0',\n left: '0',\n margin: 'auto',\n position: 'absolute',\n right: '0',\n top: '0',\n touchAction: 'none',\n zIndex: '1',\n },\n knobHitbox: {\n background: 'transparent',\n height: `calc(100% + ${knobPadding * 2}px)`,\n left: `-${knobPadding}px`,\n padding: `${knobPadding}px`,\n position: 'absolute',\n top: `-${knobPadding}px`,\n width: `calc(100% + ${knobPadding * 2}px)`,\n },\n label: {\n pointerEvents: 'none',\n position: 'relative',\n userSelect: 'none',\n },\n })\n\n const defaultStyles = asStyleDict({\n gutter: {\n background: 'rgba(255, 255, 255, .2)',\n },\n highlight: {\n background: '#fff',\n transitionDuration: '100ms',\n transitionProperty: (isReleasingStartKnob ? !isReleasingEndKnob : isReleasingEndKnob) ? 'opacity, width, transform' : 'opacity',\n transitionTimingFunction: 'ease-out',\n },\n knob: {\n alignItems: 'center',\n background: '#fff',\n borderRadius: '10px',\n boxSizing: 'border-box',\n display: 'flex',\n height: '20px',\n justifyContent: 'center',\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n width: '20px',\n },\n label: {\n background: 'transparent',\n color: '#fff',\n textAlign: 'center',\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'horizontal' ? {\n top: 'calc(100% + 10px)',\n } : {\n left: 'calc(100% + 10px)',\n },\n },\n })\n\n return (\n <div {...props} ref={ref} className={classNames(className, fixedClassNames.root)}>\n <div ref={bodyRef} style={fixedStyles.body}>\n {cloneStyledElement(components.gutter ?? <RangeSliderGutter style={defaultStyles.gutter}/>, {\n className: classNames(fixedClassNames.gutter),\n style: styles(fixedStyles.gutter),\n })}\n {cloneStyledElement(components.highlight ?? <RangeSliderHighlight style={defaultStyles.highlight}/>, {\n className: classNames(fixedClassNames.highlight),\n style: styles(fixedStyles.highlight),\n })}\n {cloneStyledElement(components.knob ?? <RangeSliderKnob style={styles(defaultStyles.knob, {\n transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n ref: startKnobRef,\n disabled: isEqual([startValue, endValue], [maxValue, maxValue]),\n className: classNames(fixedClassNames.knob, {\n dragging: isDraggingStartKnob,\n releasing: isReleasingStartKnob,\n }),\n style: styles(fixedStyles.knob, {\n pointerEvents: isEqual([startValue, endValue], [minValue, minValue]) ? 'none' : 'auto',\n }, orientation === 'horizontal' ? {\n marginLeft: `${start}px`,\n } : {\n marginTop: `${start}px`,\n }),\n }, <div style={fixedStyles.knobHitbox}/>, areLabelsVisible &&\n cloneStyledElement(components.label ?? <RangeSliderLabel style={styles(defaultStyles.label, {\n transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n className: classNames(fixedClassNames.label, {\n dragging: isDraggingStartKnob || isDraggingEndKnob,\n releasing: isReleasingStartKnob || isReleasingEndKnob,\n }),\n style: styles(fixedStyles.label),\n }, Number(startValue.toFixed(decimalPlaces)).toLocaleString())\n )}\n {cloneStyledElement(components.knob ?? <RangeSliderKnob style={styles(defaultStyles.knob, {\n transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n ref: endKnobRef,\n disabled: isEqual([startValue, endValue], [maxValue, maxValue]),\n className: classNames(fixedClassNames.knob, {\n dragging: isDraggingEndKnob,\n releasing: isDraggingEndKnob,\n }),\n style: styles(fixedStyles.knob, {\n pointerEvents: isEqual([startValue, endValue], [maxValue, maxValue]) ? 'none' : 'auto',\n }, orientation === 'horizontal' ? {\n marginLeft: `${end}px`,\n } : {\n marginTop: `${end}px`,\n }),\n }, <div style={fixedStyles.knobHitbox}/>, areLabelsVisible &&\n cloneStyledElement(components.label ?? <RangeSliderLabel style={styles(defaultStyles.label, {\n transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n className: classNames(fixedClassNames.label, {\n dragging: isDraggingEndKnob,\n releasing: isReleasingEndKnob,\n }),\n style: styles(fixedStyles.label),\n }, Number(endValue.toFixed(decimalPlaces)).toLocaleString())\n )}\n </div>\n </div>\n )\n})\n\nexport const RangeSliderGutter = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderHighlight = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderKnob = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ ...props }, ref) => <div {...props} ref={ref}/>)\n"]}
1
+ {"version":3,"file":"RangeSlider.js","sourceRoot":"/","sources":["RangeSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes, type PropsWithChildren } from 'react'\nimport useDragEffect from './hooks/useDragEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\ntype Range = [number, number]\n\nexport type RangeSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n areLabelsVisible?: boolean\n decimalPlaces?: number\n knobPadding?: number\n max: number\n min: number\n orientation?: Orientation\n range?: Range\n steps?: number\n onRangeChange?: (range: Range) => void\n}>\n\nexport default forwardRef<HTMLDivElement, RangeSliderProps>(({\n children,\n className,\n areLabelsVisible = true,\n decimalPlaces = 2,\n knobPadding = 20,\n max: maxValue,\n min: minValue,\n orientation = 'vertical',\n range: externalRange,\n steps = -1,\n onRangeChange,\n ...props\n}, ref) => {\n const getPositionByValue = (value: number) => (value - minValue) / (maxValue - minValue)\n const getPositionByDisplacement = (displacement: number) => displacement / (orientation === 'horizontal' ? size.width : size.height)\n const getValueByPosition = (position: number) => position * (maxValue - minValue) + minValue\n const getValueByDisplacement = (displacement: number) => getValueByPosition(getPositionByDisplacement(displacement))\n const getDisplacementByPosition = (position: number) => position * (orientation === 'horizontal' ? size.width : size.height)\n const getDisplacementByValue = (value: number) => getDisplacementByPosition(getPositionByValue(value))\n\n const getClosestSteppedValue = (value: number) => {\n const n = breakpoints.length\n let idx = 0\n let diff = Infinity\n\n for (let i = 0; i < n; i++) {\n const t = breakpoints[i]\n const d = Math.abs(value - t)\n\n if (d < diff) {\n diff = d\n idx = i\n }\n }\n\n return breakpoints[idx]\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const startKnobRef = useRef<HTMLDivElement>(null)\n const endKnobRef = useRef<HTMLDivElement>(null)\n\n const [size] = useResizeEffect(bodyRef)\n\n const [range, setRange] = useState<Range>(externalRange ?? [minValue, maxValue])\n\n const { isDragging: [isDraggingStartKnob], isReleasing: [isReleasingStartKnob], value: [startValue, setStartValue] } = useDragEffect(startKnobRef, {\n initialValue: externalRange?.[0] ?? minValue,\n transform: (value: number, dx: number, dy: number) => {\n const delta = orientation === 'horizontal' ? dx : dy\n const dMin = getDisplacementByValue(minValue)\n const dMax = getDisplacementByValue(range[1])\n const dCurr = getDisplacementByValue(value) + delta\n\n return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)))\n },\n }, [minValue, orientation, size, range[1]])\n\n const { isDragging: [isDraggingEndKnob], isReleasing: [isReleasingEndKnob], value: [endValue, setEndValue] } = useDragEffect(endKnobRef, {\n initialValue: externalRange?.[1] ?? maxValue,\n transform: (value: number, dx: number, dy: number) => {\n const delta = orientation === 'horizontal' ? dx : dy\n const dMin = getDisplacementByValue(range[0])\n const dMax = getDisplacementByValue(maxValue)\n const dCurr = getDisplacementByValue(value) + delta\n\n return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)))\n },\n }, [maxValue, orientation, size, range[0]])\n\n const breakpoints = [minValue, ...[...Array(steps)].map((v, i) => minValue + (i + 1) * (maxValue - minValue) / (1 + steps)), maxValue]\n const [start, end] = range.map(getDisplacementByValue)\n const highlightLength = end - start\n\n useEffect(() => {\n if (range[0] === startValue) return\n setRange([startValue, range[1]])\n onRangeChange?.(range)\n }, [startValue])\n\n useEffect(() => {\n if (range[1] === endValue) return\n setRange([range[0], endValue])\n onRangeChange?.(range)\n }, [endValue])\n\n useEffect(() => {\n if (isDraggingStartKnob || isDraggingEndKnob || isEqual(externalRange, range)) return\n setRange(externalRange ?? [minValue, maxValue])\n }, [externalRange])\n\n useEffect(() => {\n if (steps < 0) return\n setStartValue(getClosestSteppedValue(startValue))\n }, [isReleasingStartKnob])\n\n useEffect(() => {\n if (steps < 0 || !isReleasingEndKnob) return\n setEndValue(getClosestSteppedValue(endValue))\n }, [isReleasingEndKnob])\n\n const components = asComponentDict(children, {\n gutter: RangeSliderGutter,\n highlight: RangeSliderHighlight,\n knob: RangeSliderKnob,\n label: RangeSliderLabel,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n gutter: classNames(orientation),\n highlight: classNames(orientation),\n knob: classNames(orientation),\n label: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n body: {\n height: '100%',\n width: '100%',\n },\n gutter: {\n display: 'block',\n top: '0',\n left: '0',\n position: 'absolute',\n width: '100%',\n height: '100%',\n },\n highlight: {\n height: '100%',\n left: '0',\n position: 'absolute',\n top: '0',\n ...orientation === 'horizontal' ? {\n width: `${highlightLength}px`,\n transform: `translate3d(${start}px, 0, 0)`,\n } : {\n height: `${highlightLength}px`,\n transform: `translate3d(0, ${start}px, 0)`,\n },\n },\n knob: {\n bottom: '0',\n left: '0',\n margin: 'auto',\n position: 'absolute',\n right: '0',\n top: '0',\n touchAction: 'none',\n zIndex: '1',\n },\n knobHitbox: {\n background: 'transparent',\n height: `calc(100% + ${knobPadding * 2}px)`,\n left: `-${knobPadding}px`,\n padding: `${knobPadding}px`,\n position: 'absolute',\n top: `-${knobPadding}px`,\n width: `calc(100% + ${knobPadding * 2}px)`,\n },\n label: {\n pointerEvents: 'none',\n position: 'relative',\n userSelect: 'none',\n },\n })\n\n const defaultStyles = asStyleDict({\n gutter: {\n background: 'rgba(255, 255, 255, .2)',\n },\n highlight: {\n background: '#fff',\n transitionDuration: '100ms',\n transitionProperty: (isReleasingStartKnob ? !isReleasingEndKnob : isReleasingEndKnob) ? 'opacity, width, transform' : 'opacity',\n transitionTimingFunction: 'ease-out',\n },\n knob: {\n alignItems: 'center',\n background: '#fff',\n borderRadius: '10px',\n boxSizing: 'border-box',\n display: 'flex',\n height: '20px',\n justifyContent: 'center',\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n width: '20px',\n },\n label: {\n background: 'transparent',\n color: '#fff',\n textAlign: 'center',\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'horizontal' ? {\n top: 'calc(100% + 10px)',\n } : {\n left: 'calc(100% + 10px)',\n },\n },\n })\n\n return (\n <div {...props} ref={ref} className={classNames(className, fixedClassNames.root)}>\n <div ref={bodyRef} style={fixedStyles.body}>\n {cloneStyledElement(components.gutter ?? <RangeSliderGutter style={defaultStyles.gutter}/>, {\n className: classNames(fixedClassNames.gutter),\n style: styles(fixedStyles.gutter),\n })}\n {cloneStyledElement(components.highlight ?? <RangeSliderHighlight style={defaultStyles.highlight}/>, {\n className: classNames(fixedClassNames.highlight),\n style: styles(fixedStyles.highlight),\n })}\n {cloneStyledElement(components.knob ?? <RangeSliderKnob style={styles(defaultStyles.knob, {\n transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n ref: startKnobRef,\n disabled: isEqual([startValue, endValue], [maxValue, maxValue]),\n className: classNames(fixedClassNames.knob, {\n dragging: isDraggingStartKnob,\n releasing: isReleasingStartKnob,\n }),\n style: styles(fixedStyles.knob, {\n pointerEvents: isEqual([startValue, endValue], [minValue, minValue]) ? 'none' : 'auto',\n }, orientation === 'horizontal' ? {\n marginLeft: `${start}px`,\n } : {\n marginTop: `${start}px`,\n }),\n }, <div style={fixedStyles.knobHitbox}/>, areLabelsVisible &&\n cloneStyledElement(components.label ?? <RangeSliderLabel style={styles(defaultStyles.label, {\n transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n className: classNames(fixedClassNames.label, {\n dragging: isDraggingStartKnob || isDraggingEndKnob,\n releasing: isReleasingStartKnob || isReleasingEndKnob,\n }),\n style: styles(fixedStyles.label),\n }, Number(startValue.toFixed(decimalPlaces)).toLocaleString())\n )}\n {cloneStyledElement(components.knob ?? <RangeSliderKnob style={styles(defaultStyles.knob, {\n transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n ref: endKnobRef,\n disabled: isEqual([startValue, endValue], [maxValue, maxValue]),\n className: classNames(fixedClassNames.knob, {\n dragging: isDraggingEndKnob,\n releasing: isDraggingEndKnob,\n }),\n style: styles(fixedStyles.knob, {\n pointerEvents: isEqual([startValue, endValue], [maxValue, maxValue]) ? 'none' : 'auto',\n }, orientation === 'horizontal' ? {\n marginLeft: `${end}px`,\n } : {\n marginTop: `${end}px`,\n }),\n }, <div style={fixedStyles.knobHitbox}/>, areLabelsVisible &&\n cloneStyledElement(components.label ?? <RangeSliderLabel style={styles(defaultStyles.label, {\n transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',\n })}/>, {\n className: classNames(fixedClassNames.label, {\n dragging: isDraggingEndKnob,\n releasing: isReleasingEndKnob,\n }),\n style: styles(fixedStyles.label),\n }, Number(endValue.toFixed(decimalPlaces)).toLocaleString())\n )}\n </div>\n </div>\n )\n})\n\nexport const RangeSliderGutter = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderHighlight = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderKnob = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ ...props }, ref) => <div {...props} ref={ref}/>)\n"]}
package/lib/Repeat.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { ReactNode } from 'react';
1
+ import React, { type ReactNode } from 'react';
2
2
  export type RepeatProps = {
3
3
  children?: ReactNode | ((index: number) => ReactNode);
4
4
  count?: number;
package/lib/Repeat.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Repeat.js","sourceRoot":"/","sources":["Repeat.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkD;AAQlD;;;GAGG;AACH,SAAwB,MAAM,CAAC,EAIjB;QAHZ,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,QAAQ,cAAA,EACR,MAAM,YAAA;IAEN,OAAO,CACL,8DACG,yBAAI,KAAK,CAAC,KAAK,CAAC,UAAE,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAC/B,8BAAC,gBAAQ,IAAC,GAAG,EAAE,kBAAW,CAAC,CAAE,IAC1B,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CACpE,CACZ,EAJgC,CAIhC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAdD,yBAcC","sourcesContent":["import React, { Fragment, ReactNode } from 'react'\n\nexport type RepeatProps = {\n children?: ReactNode | ((index: number) => ReactNode)\n count?: number\n render?: (index: number) => ReactNode\n}\n\n/**\n * A tag-less component that repeats its children, automatically assigning each\n * a unique key.\n */\nexport default function Repeat({\n count = 1,\n children,\n render,\n}: RepeatProps) {\n return (\n <>\n {[...Array(count)].map((v, i) => (\n <Fragment key={`element-${i}`}>\n {render ? render(i) : typeof children === 'function' ? children(i) : children}\n </Fragment>\n ))}\n </>\n )\n}\n"]}
1
+ {"version":3,"file":"Repeat.js","sourceRoot":"/","sources":["Repeat.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuD;AAQvD;;;GAGG;AACH,SAAwB,MAAM,CAAC,EAIjB;QAHZ,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,QAAQ,cAAA,EACR,MAAM,YAAA;IAEN,OAAO,CACL,8DACG,yBAAI,KAAK,CAAC,KAAK,CAAC,UAAE,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAC/B,8BAAC,gBAAQ,IAAC,GAAG,EAAE,kBAAW,CAAC,CAAE,IAC1B,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CACpE,CACZ,EAJgC,CAIhC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAdD,yBAcC","sourcesContent":["import React, { Fragment, type ReactNode } from 'react'\n\nexport type RepeatProps = {\n children?: ReactNode | ((index: number) => ReactNode)\n count?: number\n render?: (index: number) => ReactNode\n}\n\n/**\n * A tag-less component that repeats its children, automatically assigning each\n * a unique key.\n */\nexport default function Repeat({\n count = 1,\n children,\n render,\n}: RepeatProps) {\n return (\n <>\n {[...Array(count)].map((v, i) => (\n <Fragment key={`element-${i}`}>\n {render ? render(i) : typeof children === 'function' ? children(i) : children}\n </Fragment>\n ))}\n </>\n )\n}\n"]}
@@ -1,4 +1,4 @@
1
- import React, { HTMLAttributes, PropsWithChildren } from 'react';
1
+ import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
2
2
  export type RotatingGalleryProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
3
3
  /**
4
4
  * Current image index. An error is thrown if the index is invalid (must be
@@ -23,15 +23,15 @@ export type RotatingGalleryProps = HTMLAttributes<HTMLDivElement> & PropsWithChi
23
23
  /**
24
24
  * Handler invoked when the image index changes.
25
25
  *
26
- * @param index - The current image index.
26
+ * @param index The current image index.
27
27
  */
28
28
  onIndexChange?: (index: number) => void;
29
29
  }>;
30
30
  /**
31
31
  * A component displaying rotating images.
32
32
  *
33
- * @exports RotatingGalleryImage - Component for each rotating image, classes:
34
- * `entering`, `entered`, `exiting`, `exited`.
33
+ * @exports RotatingGalleryImage Component for each rotating image, classes:
34
+ * `entering`, `entered`, `exiting`, `exited`.
35
35
  */
36
36
  declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
37
37
  /**
@@ -57,7 +57,7 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
57
57
  /**
58
58
  * Handler invoked when the image index changes.
59
59
  *
60
- * @param index - The current image index.
60
+ * @param index The current image index.
61
61
  */
62
62
  onIndexChange?: ((index: number) => void) | undefined;
63
63
  } & {
@@ -77,8 +77,8 @@ var styles_1 = __importDefault(require("./utils/styles"));
77
77
  /**
78
78
  * A component displaying rotating images.
79
79
  *
80
- * @exports RotatingGalleryImage - Component for each rotating image, classes:
81
- * `entering`, `entered`, `exiting`, `exited`.
80
+ * @exports RotatingGalleryImage Component for each rotating image, classes:
81
+ * `entering`, `entered`, `exiting`, `exited`.
82
82
  */
83
83
  exports.default = (0, react_1.forwardRef)(function (_a, ref) {
84
84
  var children = _a.children, _b = _a.index, externalIndex = _b === void 0 ? 0 : _b, rotationDuration = _a.rotationDuration, _c = _a.srcs, srcs = _c === void 0 ? [] : _c, _d = _a.transitionDuration, transitionDuration = _d === void 0 ? 500 : _d, onIndexChange = _a.onIndexChange, props = __rest(_a, ["children", "index", "rotationDuration", "srcs", "transitionDuration", "onIndexChange"]);