@servicetitan/anvil2 2.7.1 → 2.9.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.
- package/CHANGELOG.md +73 -1
- package/dist/{floating-ui.react-aKYfs-aw.js → AiMark-DR-w6Nbm.js} +767 -5
- package/dist/AiMark-DR-w6Nbm.js.map +1 -0
- package/dist/AiMark.css +260 -0
- package/dist/AiMark.d.ts +2 -0
- package/dist/AiMark.js +2 -0
- package/dist/AiMark.js.map +1 -0
- package/dist/{Alert-C_o2f78C.js → Alert-Dj61Bq8h.js} +27 -13
- package/dist/Alert-Dj61Bq8h.js.map +1 -0
- package/dist/Alert.css +23 -15
- package/dist/Alert.js +1 -1
- package/dist/{Announcement-CyrTvgP4.js → Announcement-B9zm-_1S.js} +2 -2
- package/dist/{Announcement-CyrTvgP4.js.map → Announcement-B9zm-_1S.js.map} +1 -1
- package/dist/Announcement.js +1 -1
- package/dist/{AnvilProvider-ClfmLl_6.js → AnvilProvider-DUPYyMc7.js} +2 -2
- package/dist/{AnvilProvider-ClfmLl_6.js.map → AnvilProvider-DUPYyMc7.js.map} +1 -1
- package/dist/AnvilProvider.js +1 -1
- package/dist/{Breadcrumbs-C_WK9Yul.js → Breadcrumbs-ojgYVZwe.js} +3 -3
- package/dist/{Breadcrumbs-C_WK9Yul.js.map → Breadcrumbs-ojgYVZwe.js.map} +1 -1
- package/dist/Breadcrumbs.js +1 -1
- package/dist/Button-BdrrhBTI.js +2185 -0
- package/dist/Button-BdrrhBTI.js.map +1 -0
- package/dist/Button.js +1 -1
- package/dist/{ButtonToggle-DaYJWso_.js → ButtonToggle-DaFQ3DBG.js} +2 -2
- package/dist/{ButtonToggle-DaYJWso_.js.map → ButtonToggle-DaFQ3DBG.js.map} +1 -1
- package/dist/ButtonToggle.js +1 -1
- package/dist/{Calendar-BTStJPV1.js → Calendar-Cka4unyi.js} +2 -2
- package/dist/{Calendar-BTStJPV1.js.map → Calendar-Cka4unyi.js.map} +1 -1
- package/dist/{Calendar-Frpv5rRY.js → Calendar-Dxl9QnfP.js} +3 -3
- package/dist/{Calendar-Frpv5rRY.js.map → Calendar-Dxl9QnfP.js.map} +1 -1
- package/dist/Calendar.js +2 -2
- package/dist/Card-wz71dEVA.js.map +1 -1
- package/dist/{Checkbox-Drgai_lS.js → Checkbox-B-XTVPbX.js} +24 -13
- package/dist/Checkbox-B-XTVPbX.js.map +1 -0
- package/dist/{Checkbox-CTZdZym4.js → Checkbox-Cw1-KFvq.js} +2 -2
- package/dist/{Checkbox-CTZdZym4.js.map → Checkbox-Cw1-KFvq.js.map} +1 -1
- package/dist/Checkbox.js +1 -1
- package/dist/{Chip-CVyEctAz.js → Chip-Ce0WGKAc.js} +42 -12
- package/dist/Chip-Ce0WGKAc.js.map +1 -0
- package/dist/Chip.css +44 -28
- package/dist/Chip.js +1 -1
- package/dist/{Combobox-BRtfrYyZ.js → Combobox-CNQUROyr.js} +4 -4
- package/dist/{Combobox-BRtfrYyZ.js.map → Combobox-CNQUROyr.js.map} +1 -1
- package/dist/Combobox.js +1 -1
- package/dist/{DataTable-BmVPjMMg.js → DataTable-BCV_mtSy.js} +572 -98
- package/dist/DataTable-BCV_mtSy.js.map +1 -0
- package/dist/DataTable.css +148 -103
- package/dist/{DateFieldRange-D9DtlkSQ.js → DateFieldRange-D2hnF50O.js} +6 -6
- package/dist/{DateFieldRange-D9DtlkSQ.js.map → DateFieldRange-D2hnF50O.js.map} +1 -1
- package/dist/DateFieldRange.js +1 -1
- package/dist/{DateFieldSingle-CkdeCUJv.js → DateFieldSingle-BuaB7RDr.js} +6 -6
- package/dist/{DateFieldSingle-CkdeCUJv.js.map → DateFieldSingle-BuaB7RDr.js.map} +1 -1
- package/dist/DateFieldSingle.js +1 -1
- package/dist/{DateFieldYearless-b81ZcYdp.js → DateFieldYearless-DLeMEutt.js} +22 -6
- package/dist/DateFieldYearless-DLeMEutt.js.map +1 -0
- package/dist/DateFieldYearless.js +1 -1
- package/dist/{DateFieldYearlessRange-ClAFzIDD.js → DateFieldYearlessRange-BfPuYKKC.js} +3 -3
- package/dist/DateFieldYearlessRange-BfPuYKKC.js.map +1 -0
- package/dist/DateFieldYearlessRange.js +1 -1
- package/dist/{DaysOfTheWeek-2Zeh79oR.js → DaysOfTheWeek-BW1T8sTU.js} +4 -4
- package/dist/{DaysOfTheWeek-2Zeh79oR.js.map → DaysOfTheWeek-BW1T8sTU.js.map} +1 -1
- package/dist/DaysOfTheWeek.js +1 -1
- package/dist/{Dialog-CloZWa1Q.js → Dialog-Cewu2pd_.js} +38 -10
- package/dist/Dialog-Cewu2pd_.js.map +1 -0
- package/dist/Dialog.js +1 -1
- package/dist/{DialogCancelButton-DQDMzGeT.js → DialogCancelButton-Czz4Wpse.js} +2 -2
- package/dist/{DialogCancelButton-DQDMzGeT.js.map → DialogCancelButton-Czz4Wpse.js.map} +1 -1
- package/dist/{Drawer-CfkoH081.js → Drawer-Cb5asXWf.js} +38 -10
- package/dist/Drawer-Cb5asXWf.js.map +1 -0
- package/dist/Drawer.js +1 -1
- package/dist/DrillDown.js +1 -1
- package/dist/DrillDown.module-C8VOhzaF.js.map +1 -1
- package/dist/{EditCard-CLN0GBN_.js → EditCard-DlJE3LXN.js} +3 -3
- package/dist/{EditCard-CLN0GBN_.js.map → EditCard-DlJE3LXN.js.map} +1 -1
- package/dist/EditCard.js +1 -1
- package/dist/FieldLabel-HO2VP-4B.js +180 -0
- package/dist/FieldLabel-HO2VP-4B.js.map +1 -0
- package/dist/FieldLabel.css +33 -73
- package/dist/FieldLabel.js +1 -1
- package/dist/{InputMask-CI4Q5UwG.js → InputMask-CLLTehFI.js} +3 -3
- package/dist/{InputMask-CI4Q5UwG.js.map → InputMask-CLLTehFI.js.map} +1 -1
- package/dist/InputMask.js +1 -1
- package/dist/{ListView-DAbBuss4.js → ListView-CPi-qG2w.js} +2 -2
- package/dist/{ListView-DAbBuss4.js.map → ListView-CPi-qG2w.js.map} +1 -1
- package/dist/ListView.js +1 -1
- package/dist/{Listbox-D_T55BFX.js → Listbox-Bp4hqIpH.js} +2 -2
- package/dist/{Listbox-D_T55BFX.js.map → Listbox-Bp4hqIpH.js.map} +1 -1
- package/dist/Listbox.js +1 -1
- package/dist/{Menu-CRoJYJ53.js → Menu-CCavGohP.js} +92 -95
- package/dist/Menu-CCavGohP.js.map +1 -0
- package/dist/Menu.js +1 -1
- package/dist/MultiSelectField.js +1 -1
- package/dist/{MultiSelectFieldSync-CSOitvtu.js → MultiSelectFieldSync-ChZCW4M9.js} +32 -19
- package/dist/MultiSelectFieldSync-ChZCW4M9.js.map +1 -0
- package/dist/MultiSelectMenu.js +1 -1
- package/dist/{MultiSelectMenuSync-62OeGmkz.js → MultiSelectMenuSync-7C1wW4oO.js} +3 -3
- package/dist/{MultiSelectMenuSync-62OeGmkz.js.map → MultiSelectMenuSync-7C1wW4oO.js.map} +1 -1
- package/dist/{NumberField-CHBXBMSj.js → NumberField-CZSTHBeO.js} +16 -5
- package/dist/NumberField-CZSTHBeO.js.map +1 -0
- package/dist/NumberField.js +1 -1
- package/dist/{Page-DtSjnBJL.js → Page-BHdvTlfE.js} +116 -63
- package/dist/Page-BHdvTlfE.js.map +1 -0
- package/dist/Page.css +76 -76
- package/dist/Page.js +1 -1
- package/dist/{Pagination-CbBte3GQ.js → Pagination-DecGSuW4.js} +5 -5
- package/dist/{Pagination-CbBte3GQ.js.map → Pagination-DecGSuW4.js.map} +1 -1
- package/dist/Pagination.js +1 -1
- package/dist/{Popover-Rha0q-Pv.js → Popover-BbqTZw-1.js} +4 -6
- package/dist/{Popover-Rha0q-Pv.js.map → Popover-BbqTZw-1.js.map} +1 -1
- package/dist/Popover.js +1 -1
- package/dist/{ProgressBar-DEaMqbM-.js → ProgressBar-CZcxkdX6.js} +2 -2
- package/dist/{ProgressBar-DEaMqbM-.js.map → ProgressBar-CZcxkdX6.js.map} +1 -1
- package/dist/ProgressBar.js +1 -1
- package/dist/{Radio-CCvu8mbI.js → Radio-BFr8AdHc.js} +2 -2
- package/dist/{Radio-CCvu8mbI.js.map → Radio-BFr8AdHc.js.map} +1 -1
- package/dist/{Radio-Bw2LDl9G.js → Radio-DJZVMCv0.js} +24 -13
- package/dist/Radio-DJZVMCv0.js.map +1 -0
- package/dist/Radio.js +1 -1
- package/dist/{SegmentedControl-BAi4pnFe.js → SegmentedControl-B9NWUF7s.js} +3 -3
- package/dist/{SegmentedControl-BAi4pnFe.js.map → SegmentedControl-B9NWUF7s.js.map} +1 -1
- package/dist/SegmentedControl.js +1 -1
- package/dist/{SelectCard-ZaAD0wR1.js → SelectCard-DVcWJRbX.js} +51 -24
- package/dist/SelectCard-DVcWJRbX.js.map +1 -0
- package/dist/SelectCard.js +1 -1
- package/dist/SelectField.js +1 -1
- package/dist/{SelectFieldLabel-EJCXA02B.js → SelectFieldLabel-kEBS8L4l.js} +5 -4
- package/dist/SelectFieldLabel-kEBS8L4l.js.map +1 -0
- package/dist/{SelectFieldSync-DA54WXOk.js → SelectFieldSync-o1Cp9UYC.js} +14 -14
- package/dist/SelectFieldSync-o1Cp9UYC.js.map +1 -0
- package/dist/SelectMenu.js +1 -1
- package/dist/{SelectMenuSync-BQaSTcaN.js → SelectMenuSync-DXrwecFt.js} +3 -3
- package/dist/{SelectMenuSync-BQaSTcaN.js.map → SelectMenuSync-DXrwecFt.js.map} +1 -1
- package/dist/{SelectOptions-D-DzWmKE.js → SelectOptions-Dy2OWqxn.js} +2 -2
- package/dist/{SelectOptions-D-DzWmKE.js.map → SelectOptions-Dy2OWqxn.js.map} +1 -1
- package/dist/{SelectTrigger-DWyRndmY.js → SelectTrigger-DhKYzEAr.js} +7 -5
- package/dist/SelectTrigger-DhKYzEAr.js.map +1 -0
- package/dist/SelectTrigger.js +1 -1
- package/dist/{SelectTriggerBase-B6aZd2a6.js → SelectTriggerBase-Ni8WqeUx.js} +76 -63
- package/dist/SelectTriggerBase-Ni8WqeUx.js.map +1 -0
- package/dist/SelectTriggerBase.css +83 -66
- package/dist/SelectTriggerBase.module-CKoq6qzX.js +38 -0
- package/dist/SelectTriggerBase.module-CKoq6qzX.js.map +1 -0
- package/dist/{SideNav-CxHemV3H.js → SideNav-CrxYExjh.js} +11 -11
- package/dist/{SideNav-CxHemV3H.js.map → SideNav-CrxYExjh.js.map} +1 -1
- package/dist/SideNav.css +72 -55
- package/dist/SideNav.js +1 -1
- package/dist/Skeleton.css +18 -12
- package/dist/Skeleton.js +24 -11
- package/dist/Skeleton.js.map +1 -1
- package/dist/{Stepper-CQUXV6P4.js → Stepper-Dt2xAXth.js} +3 -3
- package/dist/{Stepper-CQUXV6P4.js.map → Stepper-Dt2xAXth.js.map} +1 -1
- package/dist/Stepper.js +1 -1
- package/dist/{Switch-DpPHr3G3.js → Switch-C84MBChG.js} +14 -2
- package/dist/Switch-C84MBChG.js.map +1 -0
- package/dist/Switch.js +1 -1
- package/dist/{Tab-BGGNcz9S.js → Tab-BZpTCG0i.js} +3 -3
- package/dist/{Tab-BGGNcz9S.js.map → Tab-BZpTCG0i.js.map} +1 -1
- package/dist/Tab.js +1 -1
- package/dist/Table.js +1 -1
- package/dist/{Text-BJo4oMI2.js → Text-WiS8UZkY.js} +30 -12
- package/dist/Text-WiS8UZkY.js.map +1 -0
- package/dist/Text.css +37 -20
- package/dist/Text.js +1 -1
- package/dist/{TextField-o8zvVFDk.js → TextField-Bul_uln5.js} +21 -5
- package/dist/TextField-Bul_uln5.js.map +1 -0
- package/dist/{TextField-CMv9CpBq.js → TextField-OznkTx4e.js} +2 -2
- package/dist/{TextField-CMv9CpBq.js.map → TextField-OznkTx4e.js.map} +1 -1
- package/dist/TextField.js +1 -1
- package/dist/{Textarea-B4bBvO8c.js → Textarea-CCYLsJ1x.js} +21 -5
- package/dist/Textarea-CCYLsJ1x.js.map +1 -0
- package/dist/Textarea.js +1 -1
- package/dist/{TimeField-BEgnjk4R.js → TimeField-BPvPbD8H.js} +6 -5
- package/dist/{TimeField-BEgnjk4R.js.map → TimeField-BPvPbD8H.js.map} +1 -1
- package/dist/TimeField.js +1 -1
- package/dist/Toast.js +2 -2
- package/dist/{Toaster-B38WlKC7.js → Toaster-CIaIvwH6.js} +2 -2
- package/dist/{Toaster-B38WlKC7.js.map → Toaster-CIaIvwH6.js.map} +1 -1
- package/dist/{Toaster-6_LVKok2.js → Toaster-DYJm06Vb.js} +5 -5
- package/dist/Toaster-DYJm06Vb.js.map +1 -0
- package/dist/{Toolbar-0EKhrvZN.js → Toolbar-ByyI7SqG.js} +15 -15
- package/dist/{Toolbar-0EKhrvZN.js.map → Toolbar-ByyI7SqG.js.map} +1 -1
- package/dist/Toolbar.js +1 -1
- package/dist/{Tooltip-BHwSTwsv.js → Tooltip-C1PBRnJv.js} +2 -3
- package/dist/{Tooltip-BHwSTwsv.js.map → Tooltip-C1PBRnJv.js.map} +1 -1
- package/dist/Tooltip.js +1 -1
- package/dist/{YearlessDateInputWithPicker-BC4lRuny.js → YearlessDateInputWithPicker-C_twiQW5.js} +2 -3
- package/dist/{YearlessDateInputWithPicker-BC4lRuny.js.map → YearlessDateInputWithPicker-C_twiQW5.js.map} +1 -1
- package/dist/assets/icons/st/ai_mark_gradient.svg +1 -1
- package/dist/beta/components/MultiSelectField/internal/MultiSelectFieldComboboxMode.d.ts +1 -1
- package/dist/beta/components/MultiSelectField/internal/MultiSelectFieldInput.d.ts +3 -2
- package/dist/beta/components/MultiSelectField/internal/MultiSelectFieldSelectMode.d.ts +1 -1
- package/dist/beta/components/MultiSelectField/internal/MultiSelectFieldTrigger.d.ts +3 -2
- package/dist/beta/components/MultiSelectField/internal/types.d.ts +4 -3
- package/dist/beta/components/MultiSelectField/types.d.ts +28 -7
- package/dist/beta/components/SelectField/internal/SelectFieldComboboxMode.d.ts +1 -1
- package/dist/beta/components/SelectField/internal/SelectFieldLabel.d.ts +4 -4
- package/dist/beta/components/SelectField/internal/SelectFieldSelectMode.d.ts +1 -1
- package/dist/beta/components/SelectField/types.d.ts +5 -5
- package/dist/beta/components/Table/DataTable/DataTable.d.ts +8 -5
- package/dist/beta/components/Table/DataTable/internal/DataTableFooter.d.ts +5 -5
- package/dist/beta/components/Table/DataTable/internal/cells/DataTableHeaderCell.d.ts +4 -4
- package/dist/beta/components/Table/DataTable/internal/usePageDataCache.d.ts +29 -0
- package/dist/beta/components/Table/DataTable/internal/util/getTanStackColumnDef.d.ts +13 -2
- package/dist/beta/components/Table/DataTable/types.d.ts +30 -0
- package/dist/beta/components/Table/base/cells/TableHeaderCell.d.ts +4 -0
- package/dist/beta/components/Table/createColumnHelper.d.ts +17 -10
- package/dist/beta/components/Table/formatters/htmlFormatter.d.ts +13 -0
- package/dist/beta/components/Table/formatters/htmlToMarkdown.d.ts +11 -0
- package/dist/beta/components/Table/formatters/index.d.ts +2 -0
- package/dist/beta/components/Table/formatters/markdownFormatter.d.ts +11 -0
- package/dist/beta/components/Table/types.d.ts +41 -8
- package/dist/beta/components/Toolbar/Toolbar.d.ts +10 -6
- package/dist/beta/components/Toolbar/ToolbarSelect.d.ts +5 -3
- package/dist/beta.js +9 -9
- package/dist/components/AiMark/AiMark.d.ts +87 -0
- package/dist/components/AiMark/index.d.ts +1 -0
- package/dist/components/AiMark/internal/AiMarkIconAnimated.d.ts +30 -0
- package/dist/components/AiMark/internal/AiMarkInteractive.d.ts +10 -0
- package/dist/components/AiMark/stories/aiMarkStoryArgTypes.d.ts +16 -0
- package/dist/components/Alert/Alert.d.ts +12 -0
- package/dist/components/Button/Button.d.ts +14 -6
- package/dist/components/Button/internal/buttonAiMarkUtils.d.ts +18 -0
- package/dist/components/Button/internal/index.d.ts +1 -0
- package/dist/components/Card/Card.d.ts +6 -1
- package/dist/components/Checkbox/Checkbox.d.ts +2 -0
- package/dist/components/Checkbox/CheckboxGroup.d.ts +27 -6
- package/dist/components/Chip/Chip.d.ts +10 -1
- package/dist/components/Chip/internal/Chip.d.ts +4 -0
- package/dist/components/DateFieldRange/internal/MaskedDateRangeInput.d.ts +1 -1
- package/dist/components/DateFieldRange/internal/useDateFieldRangeConversion.d.ts +1 -1
- package/dist/components/DateFieldSingle/internal/MaskedDateInput.d.ts +1 -1
- package/dist/components/DateFieldYearless/DateFieldYearless.d.ts +8 -1
- package/dist/components/DateFieldYearless/internal/YearlessDateInput.d.ts +1 -1
- package/dist/components/DateFieldYearless/internal/YearlessDateInputWithPicker.d.ts +1 -1
- package/dist/components/DateFieldYearlessRange/DateFieldYearlessRange.d.ts +7 -0
- package/dist/components/DrillDown/internal/DrillDownContext.d.ts +4 -0
- package/dist/components/DrillDown/internal/useDrillDownContextState.d.ts +4 -0
- package/dist/components/FieldLabel/FieldLabel.d.ts +2 -1
- package/dist/components/FieldLabel/internal/FieldLabelButton.d.ts +3 -2
- package/dist/components/NumberField/NumberField.d.ts +29 -2
- package/dist/components/Radio/Radio.d.ts +2 -0
- package/dist/components/Radio/RadioGroup.d.ts +27 -6
- package/dist/components/SelectCard/SelectCard.d.ts +1 -1
- package/dist/components/SelectCard/SelectCardGroup.d.ts +18 -1
- package/dist/components/SelectCard/internal/SelectCardContext.d.ts +11 -0
- package/dist/components/SelectCard/internal/SelectCardProvider.d.ts +11 -1
- package/dist/components/Skeleton/SkeletonCircle.d.ts +8 -0
- package/dist/components/Skeleton/SkeletonPill.d.ts +8 -0
- package/dist/components/Skeleton/SkeletonRectangle.d.ts +8 -0
- package/dist/components/Skeleton/SkeletonText.d.ts +6 -1
- package/dist/components/Skeleton/index.d.ts +3 -0
- package/dist/components/Switch/Switch.d.ts +11 -1
- package/dist/components/Text/types.d.ts +9 -0
- package/dist/components/TextField/internal/TextField.d.ts +11 -0
- package/dist/components/Textarea/Textarea.d.ts +9 -2
- package/dist/components/Toast/internal/Toast.d.ts +5 -0
- package/dist/components/Toast/toast.d.ts +1 -1
- package/dist/components/Toolbar/Toolbar.d.ts +5 -3
- package/dist/components/Toolbar/ToolbarSelect.d.ts +5 -3
- package/dist/components/index.d.ts +1 -0
- package/dist/{floating-ui.react-dom-imrk9N49.js → floating-ui.react-dom-CHrYz13o.js} +17 -2
- package/dist/floating-ui.react-dom-CHrYz13o.js.map +1 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/usePrefersReducedMotion/index.d.ts +1 -0
- package/dist/hooks/usePrefersReducedMotion/usePrefersReducedMotion.d.ts +15 -0
- package/dist/index.js +48 -47
- package/dist/index.js.map +1 -1
- package/dist/internal/components/InlineMarkdown/InlineMarkdown.d.ts +23 -0
- package/dist/internal/components/InlineMarkdown/index.d.ts +1 -0
- package/dist/internal/components/Label/Label.d.ts +1 -1
- package/dist/internal/components/Popover/Popover.d.ts +3 -1
- package/dist/internal/components/index.d.ts +2 -1
- package/dist/internal/flubber/a2c.d.ts +16 -0
- package/dist/internal/flubber/add.d.ts +3 -0
- package/dist/internal/flubber/arc.d.ts +26 -0
- package/dist/internal/flubber/bezier.d.ts +32 -0
- package/dist/internal/flubber/errors.d.ts +5 -0
- package/dist/internal/flubber/index.d.ts +6 -0
- package/dist/internal/flubber/interpolate.d.ts +7 -0
- package/dist/internal/flubber/linear.d.ts +27 -0
- package/dist/internal/flubber/math.d.ts +10 -0
- package/dist/internal/flubber/normalize.d.ts +4 -0
- package/dist/internal/flubber/parse.d.ts +7 -0
- package/dist/internal/flubber/path-properties.d.ts +23 -0
- package/dist/internal/flubber/rotate.d.ts +2 -0
- package/dist/internal/flubber/svg.d.ts +9 -0
- package/dist/internal/functions/index.d.ts +2 -0
- package/dist/internal/functions/inlineMarkdown.d.ts +20 -0
- package/dist/internal/functions/stripInlineMarkdown.d.ts +8 -0
- package/dist/internal/index.d.ts +1 -0
- package/dist/internal/types/props.d.ts +2 -1
- package/dist/internal/types/selectFieldInternalTypes.d.ts +2 -2
- package/dist/internal/utils/index.d.ts +1 -0
- package/dist/internal/utils/inlineMarkdownRegex.d.ts +5 -0
- package/dist/{proxy-BbFHSE6L.js → proxy-DEehATlA.js} +8 -2
- package/dist/{proxy-BbFHSE6L.js.map → proxy-DEehATlA.js.map} +1 -1
- package/dist/stripInlineMarkdown-Cg1qlNwL.js +25 -0
- package/dist/stripInlineMarkdown-Cg1qlNwL.js.map +1 -0
- package/dist/{syncFilterUtils-B03Pc941.js → syncFilterUtils-UR5Vgqkh.js} +8 -9
- package/dist/{syncFilterUtils-B03Pc941.js.map → syncFilterUtils-UR5Vgqkh.js.map} +1 -1
- package/dist/types/ai-marks.d.ts +72 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/{use-reduced-motion-DSpxmqyT.js → use-reduced-motion-CqjZZ5QB.js} +2 -2
- package/dist/{use-reduced-motion-DSpxmqyT.js.map → use-reduced-motion-CqjZZ5QB.js.map} +1 -1
- package/dist/{useDrilldown-BW2XkUcK.js → useDrilldown-D6VZNSCX.js} +46 -20
- package/dist/{useDrilldown-BW2XkUcK.js.map → useDrilldown-D6VZNSCX.js.map} +1 -1
- package/dist/{useInitialFocus-BRRbylek.js → useInitialFocus-BUxEDMEG.js} +65 -24
- package/dist/useInitialFocus-BUxEDMEG.js.map +1 -0
- package/dist/{index.esm-K9kxJhLx.js → usePopoverTransitionStates-CDXCdyKa.js} +88 -2
- package/dist/usePopoverTransitionStates-CDXCdyKa.js.map +1 -0
- package/dist/usePrefersReducedMotion-DR9B_D6w.js +37 -0
- package/dist/usePrefersReducedMotion-DR9B_D6w.js.map +1 -0
- package/dist/usePrefersReducedMotion.d.ts +2 -0
- package/dist/usePrefersReducedMotion.js +2 -0
- package/dist/usePrefersReducedMotion.js.map +1 -0
- package/dist/{useToggleSelection-Dip0eimQ.js → useToggleSelection-BBdrIVWs.js} +2 -2
- package/dist/{useToggleSelection-Dip0eimQ.js.map → useToggleSelection-BBdrIVWs.js.map} +1 -1
- package/package.json +2 -2
- package/dist/Alert-C_o2f78C.js.map +0 -1
- package/dist/Button-CVsGhVJz.js +0 -113
- package/dist/Button-CVsGhVJz.js.map +0 -1
- package/dist/Checkbox-Drgai_lS.js.map +0 -1
- package/dist/Chip-CVyEctAz.js.map +0 -1
- package/dist/DataTable-BmVPjMMg.js.map +0 -1
- package/dist/DateFieldYearless-b81ZcYdp.js.map +0 -1
- package/dist/DateFieldYearlessRange-ClAFzIDD.js.map +0 -1
- package/dist/Dialog-CloZWa1Q.js.map +0 -1
- package/dist/Drawer-CfkoH081.js.map +0 -1
- package/dist/FieldLabel-CQ5QGTVq.js +0 -125
- package/dist/FieldLabel-CQ5QGTVq.js.map +0 -1
- package/dist/Menu-CRoJYJ53.js.map +0 -1
- package/dist/MultiSelectFieldSync-CSOitvtu.js.map +0 -1
- package/dist/NumberField-CHBXBMSj.js.map +0 -1
- package/dist/Page-DtSjnBJL.js.map +0 -1
- package/dist/Popover-CQhLSNYR.js +0 -537
- package/dist/Popover-CQhLSNYR.js.map +0 -1
- package/dist/Popover2.css +0 -68
- package/dist/Radio-Bw2LDl9G.js.map +0 -1
- package/dist/SelectCard-ZaAD0wR1.js.map +0 -1
- package/dist/SelectFieldLabel-EJCXA02B.js.map +0 -1
- package/dist/SelectFieldSync-DA54WXOk.js.map +0 -1
- package/dist/SelectTrigger-DWyRndmY.js.map +0 -1
- package/dist/SelectTriggerBase-B6aZd2a6.js.map +0 -1
- package/dist/SelectTriggerBase.module-B0NFRlQP.js +0 -36
- package/dist/SelectTriggerBase.module-B0NFRlQP.js.map +0 -1
- package/dist/Switch-DpPHr3G3.js.map +0 -1
- package/dist/Text-BJo4oMI2.js.map +0 -1
- package/dist/TextField-o8zvVFDk.js.map +0 -1
- package/dist/Textarea-B4bBvO8c.js.map +0 -1
- package/dist/Toaster-6_LVKok2.js.map +0 -1
- package/dist/floating-ui.react-aKYfs-aw.js.map +0 -1
- package/dist/floating-ui.react-dom-imrk9N49.js.map +0 -1
- package/dist/index.esm-K9kxJhLx.js.map +0 -1
- package/dist/safePopover-BDso-xSH.js +0 -17
- package/dist/safePopover-BDso-xSH.js.map +0 -1
- package/dist/useInitialFocus-BRRbylek.js.map +0 -1
- package/dist/useOpenCloseTransitionStates-CiTYrLGi.js +0 -68
- package/dist/useOpenCloseTransitionStates-CiTYrLGi.js.map +0 -1
- package/dist/usePopoverTransitionStates-CDIoNUuf.js +0 -24
- package/dist/usePopoverTransitionStates-CDIoNUuf.js.map +0 -1
- /package/dist/{anvil-fonts.css → AnvilProvider.css} +0 -0
|
@@ -0,0 +1,2185 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { useContext, useState, useEffect, useMemo, memo, forwardRef, useCallback } from 'react';
|
|
4
|
+
import { I as Icon } from './Icon-DuIlne4x.js';
|
|
5
|
+
import { S as Spinner } from './Spinner-BqmcE2pb.js';
|
|
6
|
+
import { w as warnOnce } from './warnOnce-Y9PRHcU4.js';
|
|
7
|
+
import { u as usePrefersReducedMotion } from './usePrefersReducedMotion-DR9B_D6w.js';
|
|
8
|
+
import { u as useTheme } from './useTheme-B4i6a3bM.js';
|
|
9
|
+
import { d as isEasingArray, e as interpolate$1, u as useConstant, f as motionValue, M as MotionConfigContext, c as useIsomorphicLayoutEffect, g as frame, j as cancelFrame, k as collectMotionValues, r as resolveElements, l as mixNumber, n as removeItem, o as isMotionValue, q as defaultOffset, s as createGeneratorEasing, t as fillOffset, v as isGenerator, x as secondsToMilliseconds, y as invariant, z as progress, V as VisualElement, A as createBox, B as isSVGElement, C as isSVGSVGElement, S as SVGVisualElement, H as HTMLVisualElement, D as visualElementStore, E as animateSingleValue, F as animateTarget, G as spring, m as motion } from './proxy-DEehATlA.js';
|
|
10
|
+
import { c as cx } from './index-De1g9FRV.js';
|
|
11
|
+
import { s as styles } from './Button.module-wCtFYGVD.js';
|
|
12
|
+
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
|
|
13
|
+
import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
|
|
14
|
+
import { useTrackingId } from './useTrackingId.js';
|
|
15
|
+
|
|
16
|
+
const wrap = (min, max, v) => {
|
|
17
|
+
const rangeSize = max - min;
|
|
18
|
+
return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
function getEasingForSegment(easing, i) {
|
|
22
|
+
return isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
class GroupAnimation {
|
|
26
|
+
constructor(animations) {
|
|
27
|
+
// Bound to accomadate common `return animation.stop` pattern
|
|
28
|
+
this.stop = () => this.runAll("stop");
|
|
29
|
+
this.animations = animations.filter(Boolean);
|
|
30
|
+
}
|
|
31
|
+
get finished() {
|
|
32
|
+
return Promise.all(this.animations.map((animation) => animation.finished));
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* TODO: Filter out cancelled or stopped animations before returning
|
|
36
|
+
*/
|
|
37
|
+
getAll(propName) {
|
|
38
|
+
return this.animations[0][propName];
|
|
39
|
+
}
|
|
40
|
+
setAll(propName, newValue) {
|
|
41
|
+
for (let i = 0; i < this.animations.length; i++) {
|
|
42
|
+
this.animations[i][propName] = newValue;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
attachTimeline(timeline) {
|
|
46
|
+
const subscriptions = this.animations.map((animation) => animation.attachTimeline(timeline));
|
|
47
|
+
return () => {
|
|
48
|
+
subscriptions.forEach((cancel, i) => {
|
|
49
|
+
cancel && cancel();
|
|
50
|
+
this.animations[i].stop();
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
get time() {
|
|
55
|
+
return this.getAll("time");
|
|
56
|
+
}
|
|
57
|
+
set time(time) {
|
|
58
|
+
this.setAll("time", time);
|
|
59
|
+
}
|
|
60
|
+
get speed() {
|
|
61
|
+
return this.getAll("speed");
|
|
62
|
+
}
|
|
63
|
+
set speed(speed) {
|
|
64
|
+
this.setAll("speed", speed);
|
|
65
|
+
}
|
|
66
|
+
get state() {
|
|
67
|
+
return this.getAll("state");
|
|
68
|
+
}
|
|
69
|
+
get startTime() {
|
|
70
|
+
return this.getAll("startTime");
|
|
71
|
+
}
|
|
72
|
+
get duration() {
|
|
73
|
+
let max = 0;
|
|
74
|
+
for (let i = 0; i < this.animations.length; i++) {
|
|
75
|
+
max = Math.max(max, this.animations[i].duration);
|
|
76
|
+
}
|
|
77
|
+
return max;
|
|
78
|
+
}
|
|
79
|
+
runAll(methodName) {
|
|
80
|
+
this.animations.forEach((controls) => controls[methodName]());
|
|
81
|
+
}
|
|
82
|
+
play() {
|
|
83
|
+
this.runAll("play");
|
|
84
|
+
}
|
|
85
|
+
pause() {
|
|
86
|
+
this.runAll("pause");
|
|
87
|
+
}
|
|
88
|
+
cancel() {
|
|
89
|
+
this.runAll("cancel");
|
|
90
|
+
}
|
|
91
|
+
complete() {
|
|
92
|
+
this.runAll("complete");
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
class GroupAnimationWithThen extends GroupAnimation {
|
|
97
|
+
then(onResolve, _onReject) {
|
|
98
|
+
return this.finished.finally(onResolve).then(() => { });
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
function transform(...args) {
|
|
103
|
+
const useImmediate = !Array.isArray(args[0]);
|
|
104
|
+
const argOffset = useImmediate ? 0 : -1;
|
|
105
|
+
const inputValue = args[0 + argOffset];
|
|
106
|
+
const inputRange = args[1 + argOffset];
|
|
107
|
+
const outputRange = args[2 + argOffset];
|
|
108
|
+
const options = args[3 + argOffset];
|
|
109
|
+
const interpolator = interpolate$1(inputRange, outputRange, options);
|
|
110
|
+
return useImmediate ? interpolator(inputValue) : interpolator;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* Creates a `MotionValue` to track the state and velocity of a value.
|
|
115
|
+
*
|
|
116
|
+
* Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
|
|
117
|
+
*
|
|
118
|
+
* ```jsx
|
|
119
|
+
* export const MyComponent = () => {
|
|
120
|
+
* const scale = useMotionValue(1)
|
|
121
|
+
*
|
|
122
|
+
* return <motion.div style={{ scale }} />
|
|
123
|
+
* }
|
|
124
|
+
* ```
|
|
125
|
+
*
|
|
126
|
+
* @param initial - The initial state.
|
|
127
|
+
*
|
|
128
|
+
* @public
|
|
129
|
+
*/
|
|
130
|
+
function useMotionValue(initial) {
|
|
131
|
+
const value = useConstant(() => motionValue(initial));
|
|
132
|
+
/**
|
|
133
|
+
* If this motion value is being used in static mode, like on
|
|
134
|
+
* the Framer canvas, force components to rerender when the motion
|
|
135
|
+
* value is updated.
|
|
136
|
+
*/
|
|
137
|
+
const { isStatic } = useContext(MotionConfigContext);
|
|
138
|
+
if (isStatic) {
|
|
139
|
+
const [, setLatest] = useState(initial);
|
|
140
|
+
useEffect(() => value.on("change", setLatest), []);
|
|
141
|
+
}
|
|
142
|
+
return value;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
function useCombineMotionValues(values, combineValues) {
|
|
146
|
+
/**
|
|
147
|
+
* Initialise the returned motion value. This remains the same between renders.
|
|
148
|
+
*/
|
|
149
|
+
const value = useMotionValue(combineValues());
|
|
150
|
+
/**
|
|
151
|
+
* Create a function that will update the template motion value with the latest values.
|
|
152
|
+
* This is pre-bound so whenever a motion value updates it can schedule its
|
|
153
|
+
* execution in Framesync. If it's already been scheduled it won't be fired twice
|
|
154
|
+
* in a single frame.
|
|
155
|
+
*/
|
|
156
|
+
const updateValue = () => value.set(combineValues());
|
|
157
|
+
/**
|
|
158
|
+
* Synchronously update the motion value with the latest values during the render.
|
|
159
|
+
* This ensures that within a React render, the styles applied to the DOM are up-to-date.
|
|
160
|
+
*/
|
|
161
|
+
updateValue();
|
|
162
|
+
/**
|
|
163
|
+
* Subscribe to all motion values found within the template. Whenever any of them change,
|
|
164
|
+
* schedule an update.
|
|
165
|
+
*/
|
|
166
|
+
useIsomorphicLayoutEffect(() => {
|
|
167
|
+
const scheduleUpdate = () => frame.preRender(updateValue, false, true);
|
|
168
|
+
const subscriptions = values.map((v) => v.on("change", scheduleUpdate));
|
|
169
|
+
return () => {
|
|
170
|
+
subscriptions.forEach((unsubscribe) => unsubscribe());
|
|
171
|
+
cancelFrame(updateValue);
|
|
172
|
+
};
|
|
173
|
+
});
|
|
174
|
+
return value;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
function useComputed(compute) {
|
|
178
|
+
/**
|
|
179
|
+
* Open session of collectMotionValues. Any MotionValue that calls get()
|
|
180
|
+
* will be saved into this array.
|
|
181
|
+
*/
|
|
182
|
+
collectMotionValues.current = [];
|
|
183
|
+
compute();
|
|
184
|
+
const value = useCombineMotionValues(collectMotionValues.current, compute);
|
|
185
|
+
/**
|
|
186
|
+
* Synchronously close session of collectMotionValues.
|
|
187
|
+
*/
|
|
188
|
+
collectMotionValues.current = undefined;
|
|
189
|
+
return value;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
function useTransform(input, inputRangeOrTransformer, outputRange, options) {
|
|
193
|
+
if (typeof input === "function") {
|
|
194
|
+
return useComputed(input);
|
|
195
|
+
}
|
|
196
|
+
const transformer = typeof inputRangeOrTransformer === "function"
|
|
197
|
+
? inputRangeOrTransformer
|
|
198
|
+
: transform(inputRangeOrTransformer, outputRange, options);
|
|
199
|
+
return Array.isArray(input)
|
|
200
|
+
? useListTransform(input, transformer)
|
|
201
|
+
: useListTransform([input], ([latest]) => transformer(latest));
|
|
202
|
+
}
|
|
203
|
+
function useListTransform(values, transformer) {
|
|
204
|
+
const latest = useConstant(() => []);
|
|
205
|
+
return useCombineMotionValues(values, () => {
|
|
206
|
+
latest.length = 0;
|
|
207
|
+
const numValues = values.length;
|
|
208
|
+
for (let i = 0; i < numValues; i++) {
|
|
209
|
+
latest[i] = values[i].get();
|
|
210
|
+
}
|
|
211
|
+
return transformer(latest);
|
|
212
|
+
});
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
function isDOMKeyframes(keyframes) {
|
|
216
|
+
return typeof keyframes === "object" && !Array.isArray(keyframes);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
function resolveSubjects(subject, keyframes, scope, selectorCache) {
|
|
220
|
+
if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
|
|
221
|
+
return resolveElements(subject, scope, selectorCache);
|
|
222
|
+
}
|
|
223
|
+
else if (subject instanceof NodeList) {
|
|
224
|
+
return Array.from(subject);
|
|
225
|
+
}
|
|
226
|
+
else if (Array.isArray(subject)) {
|
|
227
|
+
return subject;
|
|
228
|
+
}
|
|
229
|
+
else {
|
|
230
|
+
return [subject];
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
function calculateRepeatDuration(duration, repeat, _repeatDelay) {
|
|
235
|
+
return duration * (repeat + 1);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
/**
|
|
239
|
+
* Given a absolute or relative time definition and current/prev time state of the sequence,
|
|
240
|
+
* calculate an absolute time for the next keyframes.
|
|
241
|
+
*/
|
|
242
|
+
function calcNextTime(current, next, prev, labels) {
|
|
243
|
+
if (typeof next === "number") {
|
|
244
|
+
return next;
|
|
245
|
+
}
|
|
246
|
+
else if (next.startsWith("-") || next.startsWith("+")) {
|
|
247
|
+
return Math.max(0, current + parseFloat(next));
|
|
248
|
+
}
|
|
249
|
+
else if (next === "<") {
|
|
250
|
+
return prev;
|
|
251
|
+
}
|
|
252
|
+
else if (next.startsWith("<")) {
|
|
253
|
+
return Math.max(0, prev + parseFloat(next.slice(1)));
|
|
254
|
+
}
|
|
255
|
+
else {
|
|
256
|
+
return labels.get(next) ?? current;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
function eraseKeyframes(sequence, startTime, endTime) {
|
|
261
|
+
for (let i = 0; i < sequence.length; i++) {
|
|
262
|
+
const keyframe = sequence[i];
|
|
263
|
+
if (keyframe.at > startTime && keyframe.at < endTime) {
|
|
264
|
+
removeItem(sequence, keyframe);
|
|
265
|
+
// If we remove this item we have to push the pointer back one
|
|
266
|
+
i--;
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
|
|
271
|
+
/**
|
|
272
|
+
* Erase every existing value between currentTime and targetTime,
|
|
273
|
+
* this will essentially splice this timeline into any currently
|
|
274
|
+
* defined ones.
|
|
275
|
+
*/
|
|
276
|
+
eraseKeyframes(sequence, startTime, endTime);
|
|
277
|
+
for (let i = 0; i < keyframes.length; i++) {
|
|
278
|
+
sequence.push({
|
|
279
|
+
value: keyframes[i],
|
|
280
|
+
at: mixNumber(startTime, endTime, offset[i]),
|
|
281
|
+
easing: getEasingForSegment(easing, i),
|
|
282
|
+
});
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
/**
|
|
287
|
+
* Take an array of times that represent repeated keyframes. For instance
|
|
288
|
+
* if we have original times of [0, 0.5, 1] then our repeated times will
|
|
289
|
+
* be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back
|
|
290
|
+
* down to a 0-1 scale.
|
|
291
|
+
*/
|
|
292
|
+
function normalizeTimes(times, repeat) {
|
|
293
|
+
for (let i = 0; i < times.length; i++) {
|
|
294
|
+
times[i] = times[i] / (repeat + 1);
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
function compareByTime(a, b) {
|
|
299
|
+
if (a.at === b.at) {
|
|
300
|
+
if (a.value === null)
|
|
301
|
+
return 1;
|
|
302
|
+
if (b.value === null)
|
|
303
|
+
return -1;
|
|
304
|
+
return 0;
|
|
305
|
+
}
|
|
306
|
+
else {
|
|
307
|
+
return a.at - b.at;
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
const defaultSegmentEasing = "easeInOut";
|
|
312
|
+
const MAX_REPEAT = 20;
|
|
313
|
+
function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators) {
|
|
314
|
+
const defaultDuration = defaultTransition.duration || 0.3;
|
|
315
|
+
const animationDefinitions = new Map();
|
|
316
|
+
const sequences = new Map();
|
|
317
|
+
const elementCache = {};
|
|
318
|
+
const timeLabels = new Map();
|
|
319
|
+
let prevTime = 0;
|
|
320
|
+
let currentTime = 0;
|
|
321
|
+
let totalDuration = 0;
|
|
322
|
+
/**
|
|
323
|
+
* Build the timeline by mapping over the sequence array and converting
|
|
324
|
+
* the definitions into keyframes and offsets with absolute time values.
|
|
325
|
+
* These will later get converted into relative offsets in a second pass.
|
|
326
|
+
*/
|
|
327
|
+
for (let i = 0; i < sequence.length; i++) {
|
|
328
|
+
const segment = sequence[i];
|
|
329
|
+
/**
|
|
330
|
+
* If this is a timeline label, mark it and skip the rest of this iteration.
|
|
331
|
+
*/
|
|
332
|
+
if (typeof segment === "string") {
|
|
333
|
+
timeLabels.set(segment, currentTime);
|
|
334
|
+
continue;
|
|
335
|
+
}
|
|
336
|
+
else if (!Array.isArray(segment)) {
|
|
337
|
+
timeLabels.set(segment.name, calcNextTime(currentTime, segment.at, prevTime, timeLabels));
|
|
338
|
+
continue;
|
|
339
|
+
}
|
|
340
|
+
let [subject, keyframes, transition = {}] = segment;
|
|
341
|
+
/**
|
|
342
|
+
* If a relative or absolute time value has been specified we need to resolve
|
|
343
|
+
* it in relation to the currentTime.
|
|
344
|
+
*/
|
|
345
|
+
if (transition.at !== undefined) {
|
|
346
|
+
currentTime = calcNextTime(currentTime, transition.at, prevTime, timeLabels);
|
|
347
|
+
}
|
|
348
|
+
/**
|
|
349
|
+
* Keep track of the maximum duration in this definition. This will be
|
|
350
|
+
* applied to currentTime once the definition has been parsed.
|
|
351
|
+
*/
|
|
352
|
+
let maxDuration = 0;
|
|
353
|
+
const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
|
|
354
|
+
const valueKeyframesAsList = keyframesAsList(valueKeyframes);
|
|
355
|
+
const { delay = 0, times = defaultOffset(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
|
|
356
|
+
let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
|
|
357
|
+
/**
|
|
358
|
+
* Resolve stagger() if defined.
|
|
359
|
+
*/
|
|
360
|
+
const calculatedDelay = typeof delay === "function"
|
|
361
|
+
? delay(elementIndex, numSubjects)
|
|
362
|
+
: delay;
|
|
363
|
+
/**
|
|
364
|
+
* If this animation should and can use a spring, generate a spring easing function.
|
|
365
|
+
*/
|
|
366
|
+
const numKeyframes = valueKeyframesAsList.length;
|
|
367
|
+
const createGenerator = isGenerator(type)
|
|
368
|
+
? type
|
|
369
|
+
: generators?.[type || "keyframes"];
|
|
370
|
+
if (numKeyframes <= 2 && createGenerator) {
|
|
371
|
+
/**
|
|
372
|
+
* As we're creating an easing function from a spring,
|
|
373
|
+
* ideally we want to generate it using the real distance
|
|
374
|
+
* between the two keyframes. However this isn't always
|
|
375
|
+
* possible - in these situations we use 0-100.
|
|
376
|
+
*/
|
|
377
|
+
let absoluteDelta = 100;
|
|
378
|
+
if (numKeyframes === 2 &&
|
|
379
|
+
isNumberKeyframesArray(valueKeyframesAsList)) {
|
|
380
|
+
const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
|
|
381
|
+
absoluteDelta = Math.abs(delta);
|
|
382
|
+
}
|
|
383
|
+
const springTransition = { ...remainingTransition };
|
|
384
|
+
if (duration !== undefined) {
|
|
385
|
+
springTransition.duration = secondsToMilliseconds(duration);
|
|
386
|
+
}
|
|
387
|
+
const springEasing = createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
|
|
388
|
+
ease = springEasing.ease;
|
|
389
|
+
duration = springEasing.duration;
|
|
390
|
+
}
|
|
391
|
+
duration ?? (duration = defaultDuration);
|
|
392
|
+
const startTime = currentTime + calculatedDelay;
|
|
393
|
+
/**
|
|
394
|
+
* If there's only one time offset of 0, fill in a second with length 1
|
|
395
|
+
*/
|
|
396
|
+
if (times.length === 1 && times[0] === 0) {
|
|
397
|
+
times[1] = 1;
|
|
398
|
+
}
|
|
399
|
+
/**
|
|
400
|
+
* Fill out if offset if fewer offsets than keyframes
|
|
401
|
+
*/
|
|
402
|
+
const remainder = times.length - valueKeyframesAsList.length;
|
|
403
|
+
remainder > 0 && fillOffset(times, remainder);
|
|
404
|
+
/**
|
|
405
|
+
* If only one value has been set, ie [1], push a null to the start of
|
|
406
|
+
* the keyframe array. This will let us mark a keyframe at this point
|
|
407
|
+
* that will later be hydrated with the previous value.
|
|
408
|
+
*/
|
|
409
|
+
valueKeyframesAsList.length === 1 &&
|
|
410
|
+
valueKeyframesAsList.unshift(null);
|
|
411
|
+
/**
|
|
412
|
+
* Handle repeat options
|
|
413
|
+
*/
|
|
414
|
+
if (repeat) {
|
|
415
|
+
invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
|
|
416
|
+
duration = calculateRepeatDuration(duration, repeat);
|
|
417
|
+
const originalKeyframes = [...valueKeyframesAsList];
|
|
418
|
+
const originalTimes = [...times];
|
|
419
|
+
ease = Array.isArray(ease) ? [...ease] : [ease];
|
|
420
|
+
const originalEase = [...ease];
|
|
421
|
+
for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
|
|
422
|
+
valueKeyframesAsList.push(...originalKeyframes);
|
|
423
|
+
for (let keyframeIndex = 0; keyframeIndex < originalKeyframes.length; keyframeIndex++) {
|
|
424
|
+
times.push(originalTimes[keyframeIndex] + (repeatIndex + 1));
|
|
425
|
+
ease.push(keyframeIndex === 0
|
|
426
|
+
? "linear"
|
|
427
|
+
: getEasingForSegment(originalEase, keyframeIndex - 1));
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
normalizeTimes(times, repeat);
|
|
431
|
+
}
|
|
432
|
+
const targetTime = startTime + duration;
|
|
433
|
+
/**
|
|
434
|
+
* Add keyframes, mapping offsets to absolute time.
|
|
435
|
+
*/
|
|
436
|
+
addKeyframes(valueSequence, valueKeyframesAsList, ease, times, startTime, targetTime);
|
|
437
|
+
maxDuration = Math.max(calculatedDelay + duration, maxDuration);
|
|
438
|
+
totalDuration = Math.max(targetTime, totalDuration);
|
|
439
|
+
};
|
|
440
|
+
if (isMotionValue(subject)) {
|
|
441
|
+
const subjectSequence = getSubjectSequence(subject, sequences);
|
|
442
|
+
resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
|
|
443
|
+
}
|
|
444
|
+
else {
|
|
445
|
+
const subjects = resolveSubjects(subject, keyframes, scope, elementCache);
|
|
446
|
+
const numSubjects = subjects.length;
|
|
447
|
+
/**
|
|
448
|
+
* For every element in this segment, process the defined values.
|
|
449
|
+
*/
|
|
450
|
+
for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
|
|
451
|
+
/**
|
|
452
|
+
* Cast necessary, but we know these are of this type
|
|
453
|
+
*/
|
|
454
|
+
keyframes = keyframes;
|
|
455
|
+
transition = transition;
|
|
456
|
+
const thisSubject = subjects[subjectIndex];
|
|
457
|
+
const subjectSequence = getSubjectSequence(thisSubject, sequences);
|
|
458
|
+
for (const key in keyframes) {
|
|
459
|
+
resolveValueSequence(keyframes[key], getValueTransition(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
prevTime = currentTime;
|
|
464
|
+
currentTime += maxDuration;
|
|
465
|
+
}
|
|
466
|
+
/**
|
|
467
|
+
* For every element and value combination create a new animation.
|
|
468
|
+
*/
|
|
469
|
+
sequences.forEach((valueSequences, element) => {
|
|
470
|
+
for (const key in valueSequences) {
|
|
471
|
+
const valueSequence = valueSequences[key];
|
|
472
|
+
/**
|
|
473
|
+
* Arrange all the keyframes in ascending time order.
|
|
474
|
+
*/
|
|
475
|
+
valueSequence.sort(compareByTime);
|
|
476
|
+
const keyframes = [];
|
|
477
|
+
const valueOffset = [];
|
|
478
|
+
const valueEasing = [];
|
|
479
|
+
/**
|
|
480
|
+
* For each keyframe, translate absolute times into
|
|
481
|
+
* relative offsets based on the total duration of the timeline.
|
|
482
|
+
*/
|
|
483
|
+
for (let i = 0; i < valueSequence.length; i++) {
|
|
484
|
+
const { at, value, easing } = valueSequence[i];
|
|
485
|
+
keyframes.push(value);
|
|
486
|
+
valueOffset.push(progress(0, totalDuration, at));
|
|
487
|
+
valueEasing.push(easing || "easeOut");
|
|
488
|
+
}
|
|
489
|
+
/**
|
|
490
|
+
* If the first keyframe doesn't land on offset: 0
|
|
491
|
+
* provide one by duplicating the initial keyframe. This ensures
|
|
492
|
+
* it snaps to the first keyframe when the animation starts.
|
|
493
|
+
*/
|
|
494
|
+
if (valueOffset[0] !== 0) {
|
|
495
|
+
valueOffset.unshift(0);
|
|
496
|
+
keyframes.unshift(keyframes[0]);
|
|
497
|
+
valueEasing.unshift(defaultSegmentEasing);
|
|
498
|
+
}
|
|
499
|
+
/**
|
|
500
|
+
* If the last keyframe doesn't land on offset: 1
|
|
501
|
+
* provide one with a null wildcard value. This will ensure it
|
|
502
|
+
* stays static until the end of the animation.
|
|
503
|
+
*/
|
|
504
|
+
if (valueOffset[valueOffset.length - 1] !== 1) {
|
|
505
|
+
valueOffset.push(1);
|
|
506
|
+
keyframes.push(null);
|
|
507
|
+
}
|
|
508
|
+
if (!animationDefinitions.has(element)) {
|
|
509
|
+
animationDefinitions.set(element, {
|
|
510
|
+
keyframes: {},
|
|
511
|
+
transition: {},
|
|
512
|
+
});
|
|
513
|
+
}
|
|
514
|
+
const definition = animationDefinitions.get(element);
|
|
515
|
+
definition.keyframes[key] = keyframes;
|
|
516
|
+
definition.transition[key] = {
|
|
517
|
+
...defaultTransition,
|
|
518
|
+
duration: totalDuration,
|
|
519
|
+
ease: valueEasing,
|
|
520
|
+
times: valueOffset,
|
|
521
|
+
...sequenceTransition,
|
|
522
|
+
};
|
|
523
|
+
}
|
|
524
|
+
});
|
|
525
|
+
return animationDefinitions;
|
|
526
|
+
}
|
|
527
|
+
function getSubjectSequence(subject, sequences) {
|
|
528
|
+
!sequences.has(subject) && sequences.set(subject, {});
|
|
529
|
+
return sequences.get(subject);
|
|
530
|
+
}
|
|
531
|
+
function getValueSequence(name, sequences) {
|
|
532
|
+
if (!sequences[name])
|
|
533
|
+
sequences[name] = [];
|
|
534
|
+
return sequences[name];
|
|
535
|
+
}
|
|
536
|
+
function keyframesAsList(keyframes) {
|
|
537
|
+
return Array.isArray(keyframes) ? keyframes : [keyframes];
|
|
538
|
+
}
|
|
539
|
+
function getValueTransition(transition, key) {
|
|
540
|
+
return transition && transition[key]
|
|
541
|
+
? {
|
|
542
|
+
...transition,
|
|
543
|
+
...transition[key],
|
|
544
|
+
}
|
|
545
|
+
: { ...transition };
|
|
546
|
+
}
|
|
547
|
+
const isNumber = (keyframe) => typeof keyframe === "number";
|
|
548
|
+
const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
|
|
549
|
+
|
|
550
|
+
function isObjectKey(key, object) {
|
|
551
|
+
return key in object;
|
|
552
|
+
}
|
|
553
|
+
class ObjectVisualElement extends VisualElement {
|
|
554
|
+
constructor() {
|
|
555
|
+
super(...arguments);
|
|
556
|
+
this.type = "object";
|
|
557
|
+
}
|
|
558
|
+
readValueFromInstance(instance, key) {
|
|
559
|
+
if (isObjectKey(key, instance)) {
|
|
560
|
+
const value = instance[key];
|
|
561
|
+
if (typeof value === "string" || typeof value === "number") {
|
|
562
|
+
return value;
|
|
563
|
+
}
|
|
564
|
+
}
|
|
565
|
+
return undefined;
|
|
566
|
+
}
|
|
567
|
+
getBaseTargetFromProps() {
|
|
568
|
+
return undefined;
|
|
569
|
+
}
|
|
570
|
+
removeValueFromRenderState(key, renderState) {
|
|
571
|
+
delete renderState.output[key];
|
|
572
|
+
}
|
|
573
|
+
measureInstanceViewportBox() {
|
|
574
|
+
return createBox();
|
|
575
|
+
}
|
|
576
|
+
build(renderState, latestValues) {
|
|
577
|
+
Object.assign(renderState.output, latestValues);
|
|
578
|
+
}
|
|
579
|
+
renderInstance(instance, { output }) {
|
|
580
|
+
Object.assign(instance, output);
|
|
581
|
+
}
|
|
582
|
+
sortInstanceNodePosition() {
|
|
583
|
+
return 0;
|
|
584
|
+
}
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
function createDOMVisualElement(element) {
|
|
588
|
+
const options = {
|
|
589
|
+
presenceContext: null,
|
|
590
|
+
props: {},
|
|
591
|
+
visualState: {
|
|
592
|
+
renderState: {
|
|
593
|
+
transform: {},
|
|
594
|
+
transformOrigin: {},
|
|
595
|
+
style: {},
|
|
596
|
+
vars: {},
|
|
597
|
+
attrs: {},
|
|
598
|
+
},
|
|
599
|
+
latestValues: {},
|
|
600
|
+
},
|
|
601
|
+
};
|
|
602
|
+
const node = isSVGElement(element) && !isSVGSVGElement(element)
|
|
603
|
+
? new SVGVisualElement(options)
|
|
604
|
+
: new HTMLVisualElement(options);
|
|
605
|
+
node.mount(element);
|
|
606
|
+
visualElementStore.set(element, node);
|
|
607
|
+
}
|
|
608
|
+
function createObjectVisualElement(subject) {
|
|
609
|
+
const options = {
|
|
610
|
+
presenceContext: null,
|
|
611
|
+
props: {},
|
|
612
|
+
visualState: {
|
|
613
|
+
renderState: {
|
|
614
|
+
output: {},
|
|
615
|
+
},
|
|
616
|
+
latestValues: {},
|
|
617
|
+
},
|
|
618
|
+
};
|
|
619
|
+
const node = new ObjectVisualElement(options);
|
|
620
|
+
node.mount(subject);
|
|
621
|
+
visualElementStore.set(subject, node);
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
function isSingleValue(subject, keyframes) {
|
|
625
|
+
return (isMotionValue(subject) ||
|
|
626
|
+
typeof subject === "number" ||
|
|
627
|
+
(typeof subject === "string" && !isDOMKeyframes(keyframes)));
|
|
628
|
+
}
|
|
629
|
+
/**
|
|
630
|
+
* Implementation
|
|
631
|
+
*/
|
|
632
|
+
function animateSubject(subject, keyframes, options, scope) {
|
|
633
|
+
const animations = [];
|
|
634
|
+
if (isSingleValue(subject, keyframes)) {
|
|
635
|
+
animations.push(animateSingleValue(subject, isDOMKeyframes(keyframes)
|
|
636
|
+
? keyframes.default || keyframes
|
|
637
|
+
: keyframes, options ? options.default || options : options));
|
|
638
|
+
}
|
|
639
|
+
else {
|
|
640
|
+
const subjects = resolveSubjects(subject, keyframes, scope);
|
|
641
|
+
const numSubjects = subjects.length;
|
|
642
|
+
invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
|
|
643
|
+
for (let i = 0; i < numSubjects; i++) {
|
|
644
|
+
const thisSubject = subjects[i];
|
|
645
|
+
invariant(thisSubject !== null, "You're trying to perform an animation on null. Ensure that selectors are correctly finding elements and refs are correctly hydrated.", "animate-null");
|
|
646
|
+
const createVisualElement = thisSubject instanceof Element
|
|
647
|
+
? createDOMVisualElement
|
|
648
|
+
: createObjectVisualElement;
|
|
649
|
+
if (!visualElementStore.has(thisSubject)) {
|
|
650
|
+
createVisualElement(thisSubject);
|
|
651
|
+
}
|
|
652
|
+
const visualElement = visualElementStore.get(thisSubject);
|
|
653
|
+
const transition = { ...options };
|
|
654
|
+
/**
|
|
655
|
+
* Resolve stagger function if provided.
|
|
656
|
+
*/
|
|
657
|
+
if ("delay" in transition &&
|
|
658
|
+
typeof transition.delay === "function") {
|
|
659
|
+
transition.delay = transition.delay(i, numSubjects);
|
|
660
|
+
}
|
|
661
|
+
animations.push(...animateTarget(visualElement, { ...keyframes, transition }, {}));
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
return animations;
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
function animateSequence(sequence, options, scope) {
|
|
668
|
+
const animations = [];
|
|
669
|
+
const animationDefinitions = createAnimationsFromSequence(sequence, options, scope, { spring });
|
|
670
|
+
animationDefinitions.forEach(({ keyframes, transition }, subject) => {
|
|
671
|
+
animations.push(...animateSubject(subject, keyframes, transition));
|
|
672
|
+
});
|
|
673
|
+
return animations;
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
function isSequence(value) {
|
|
677
|
+
return Array.isArray(value) && value.some(Array.isArray);
|
|
678
|
+
}
|
|
679
|
+
/**
|
|
680
|
+
* Creates an animation function that is optionally scoped
|
|
681
|
+
* to a specific element.
|
|
682
|
+
*/
|
|
683
|
+
function createScopedAnimate(scope) {
|
|
684
|
+
/**
|
|
685
|
+
* Implementation
|
|
686
|
+
*/
|
|
687
|
+
function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
|
|
688
|
+
let animations = [];
|
|
689
|
+
if (isSequence(subjectOrSequence)) {
|
|
690
|
+
animations = animateSequence(subjectOrSequence, optionsOrKeyframes, scope);
|
|
691
|
+
}
|
|
692
|
+
else {
|
|
693
|
+
animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
|
|
694
|
+
}
|
|
695
|
+
const animation = new GroupAnimationWithThen(animations);
|
|
696
|
+
return animation;
|
|
697
|
+
}
|
|
698
|
+
return scopedAnimate;
|
|
699
|
+
}
|
|
700
|
+
const animate = createScopedAnimate();
|
|
701
|
+
|
|
702
|
+
const NUMBER = /-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi;
|
|
703
|
+
const SEGMENT = /([astvzqmhlc])([^astvzqmhlc]*)/gi;
|
|
704
|
+
const LENGTH = {
|
|
705
|
+
a: 7,
|
|
706
|
+
c: 6,
|
|
707
|
+
h: 1,
|
|
708
|
+
l: 2,
|
|
709
|
+
m: 2,
|
|
710
|
+
q: 4,
|
|
711
|
+
s: 4,
|
|
712
|
+
t: 2,
|
|
713
|
+
v: 1,
|
|
714
|
+
z: 0
|
|
715
|
+
};
|
|
716
|
+
function parseValues(args) {
|
|
717
|
+
const numbers = args.match(NUMBER);
|
|
718
|
+
return numbers ? numbers.map(Number) : [];
|
|
719
|
+
}
|
|
720
|
+
function parse(path) {
|
|
721
|
+
const data = [];
|
|
722
|
+
path.replace(SEGMENT, (_, commandArg, argsArg) => {
|
|
723
|
+
let command = commandArg;
|
|
724
|
+
const args = parseValues(argsArg);
|
|
725
|
+
let type = command.toLowerCase();
|
|
726
|
+
if (type === "m" && args.length > 2) {
|
|
727
|
+
data.push([command, ...args.splice(0, 2)]);
|
|
728
|
+
type = "l";
|
|
729
|
+
command = command === "m" ? "l" : "L";
|
|
730
|
+
}
|
|
731
|
+
const expectedLength = LENGTH[type];
|
|
732
|
+
if (expectedLength === 0) {
|
|
733
|
+
if (args.length > 0) {
|
|
734
|
+
throw new Error("malformed path data");
|
|
735
|
+
}
|
|
736
|
+
data.push([command]);
|
|
737
|
+
return "";
|
|
738
|
+
}
|
|
739
|
+
while (args.length > 0) {
|
|
740
|
+
if (args.length === expectedLength) {
|
|
741
|
+
data.push([command, ...args]);
|
|
742
|
+
return "";
|
|
743
|
+
}
|
|
744
|
+
if (args.length < expectedLength) {
|
|
745
|
+
throw new Error("malformed path data");
|
|
746
|
+
}
|
|
747
|
+
data.push([command, ...args.splice(0, expectedLength)]);
|
|
748
|
+
}
|
|
749
|
+
throw new Error("malformed path data");
|
|
750
|
+
});
|
|
751
|
+
return data;
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
const T_VALUES = [
|
|
755
|
+
-0.06405689286260562,
|
|
756
|
+
0.06405689286260562,
|
|
757
|
+
-0.1911188674736163,
|
|
758
|
+
0.1911188674736163,
|
|
759
|
+
-0.315042679696163,
|
|
760
|
+
0.315042679696163,
|
|
761
|
+
-0.433793507626045,
|
|
762
|
+
0.433793507626045,
|
|
763
|
+
-0.545421471388839,
|
|
764
|
+
0.545421471388839,
|
|
765
|
+
-0.648093651936975,
|
|
766
|
+
0.648093651936975,
|
|
767
|
+
-0.740124191578554,
|
|
768
|
+
0.740124191578554,
|
|
769
|
+
-0.820001985973902,
|
|
770
|
+
0.820001985973902,
|
|
771
|
+
-0.886415527004401,
|
|
772
|
+
0.886415527004401,
|
|
773
|
+
-0.938274552002732,
|
|
774
|
+
0.938274552002732,
|
|
775
|
+
-0.974728555971309,
|
|
776
|
+
0.974728555971309,
|
|
777
|
+
-0.995187219997021,
|
|
778
|
+
0.995187219997021
|
|
779
|
+
];
|
|
780
|
+
const C_VALUES = [
|
|
781
|
+
0.127938195346752,
|
|
782
|
+
0.127938195346752,
|
|
783
|
+
0.125837456346828,
|
|
784
|
+
0.125837456346828,
|
|
785
|
+
0.121670472927803,
|
|
786
|
+
0.121670472927803,
|
|
787
|
+
0.115505668053725,
|
|
788
|
+
0.115505668053725,
|
|
789
|
+
0.107444270115965,
|
|
790
|
+
0.107444270115965,
|
|
791
|
+
0.0976186521041138,
|
|
792
|
+
0.0976186521041138,
|
|
793
|
+
0.0861901615319532,
|
|
794
|
+
0.0861901615319532,
|
|
795
|
+
0.0733464814110803,
|
|
796
|
+
0.0733464814110803,
|
|
797
|
+
0.0592985849154367,
|
|
798
|
+
0.0592985849154367,
|
|
799
|
+
0.0442774388174198,
|
|
800
|
+
0.0442774388174198,
|
|
801
|
+
0.0285313886289336,
|
|
802
|
+
0.0285313886289336,
|
|
803
|
+
0.0123412297999871,
|
|
804
|
+
0.0123412297999871
|
|
805
|
+
];
|
|
806
|
+
function quadraticDerivative(xs, ys, t) {
|
|
807
|
+
return {
|
|
808
|
+
x: (1 - t) * 2 * (xs[1] - xs[0]) + t * 2 * (xs[2] - xs[1]),
|
|
809
|
+
y: (1 - t) * 2 * (ys[1] - ys[0]) + t * 2 * (ys[2] - ys[1])
|
|
810
|
+
};
|
|
811
|
+
}
|
|
812
|
+
function cubicDerivative(xs, ys, t) {
|
|
813
|
+
return quadraticPoint(
|
|
814
|
+
[3 * (xs[1] - xs[0]), 3 * (xs[2] - xs[1]), 3 * (xs[3] - xs[2])],
|
|
815
|
+
[3 * (ys[1] - ys[0]), 3 * (ys[2] - ys[1]), 3 * (ys[3] - ys[2])],
|
|
816
|
+
t
|
|
817
|
+
);
|
|
818
|
+
}
|
|
819
|
+
function t2length(length, totalLength, func, xs, ys) {
|
|
820
|
+
let error = 1;
|
|
821
|
+
let t = length / totalLength;
|
|
822
|
+
let step = (length - func(xs, ys, t)) / totalLength;
|
|
823
|
+
while (error > 1e-3) {
|
|
824
|
+
const increasedTLength = func(xs, ys, t + step);
|
|
825
|
+
const decreasedTLength = func(xs, ys, t - step);
|
|
826
|
+
const increasedTError = Math.abs(length - increasedTLength) / totalLength;
|
|
827
|
+
const decreasedTError = Math.abs(length - decreasedTLength) / totalLength;
|
|
828
|
+
if (increasedTError < error) {
|
|
829
|
+
error = increasedTError;
|
|
830
|
+
t += step;
|
|
831
|
+
} else if (decreasedTError < error) {
|
|
832
|
+
error = decreasedTError;
|
|
833
|
+
t -= step;
|
|
834
|
+
} else {
|
|
835
|
+
step /= 2;
|
|
836
|
+
}
|
|
837
|
+
}
|
|
838
|
+
return t;
|
|
839
|
+
}
|
|
840
|
+
function quadraticPoint(xs, ys, t) {
|
|
841
|
+
return {
|
|
842
|
+
x: (1 - t) * (1 - t) * xs[0] + 2 * (1 - t) * t * xs[1] + t * t * xs[2],
|
|
843
|
+
y: (1 - t) * (1 - t) * ys[0] + 2 * (1 - t) * t * ys[1] + t * t * ys[2]
|
|
844
|
+
};
|
|
845
|
+
}
|
|
846
|
+
function cubicPoint(xs, ys, t) {
|
|
847
|
+
return {
|
|
848
|
+
x: (1 - t) * (1 - t) * (1 - t) * xs[0] + 3 * (1 - t) * (1 - t) * t * xs[1] + 3 * (1 - t) * t * t * xs[2] + t * t * t * xs[3],
|
|
849
|
+
y: (1 - t) * (1 - t) * (1 - t) * ys[0] + 3 * (1 - t) * (1 - t) * t * ys[1] + 3 * (1 - t) * t * t * ys[2] + t * t * t * ys[3]
|
|
850
|
+
};
|
|
851
|
+
}
|
|
852
|
+
function getQuadraticArcLength(xs, ys, t = 1) {
|
|
853
|
+
const ax = xs[0] - 2 * xs[1] + xs[2];
|
|
854
|
+
const ay = ys[0] - 2 * ys[1] + ys[2];
|
|
855
|
+
const bx = 2 * xs[1] - 2 * xs[0];
|
|
856
|
+
const by = 2 * ys[1] - 2 * ys[0];
|
|
857
|
+
const A = 4 * (ax * ax + ay * ay);
|
|
858
|
+
const B = 4 * (ax * bx + ay * by);
|
|
859
|
+
const C = bx * bx + by * by;
|
|
860
|
+
if (A === 0) {
|
|
861
|
+
return t * Math.sqrt((xs[2] - xs[0]) ** 2 + (ys[2] - ys[0]) ** 2);
|
|
862
|
+
}
|
|
863
|
+
const b = B / (2 * A);
|
|
864
|
+
const c = C / A;
|
|
865
|
+
const u = t + b;
|
|
866
|
+
const k = c - b * b;
|
|
867
|
+
return Math.sqrt(A) / 2 * (u * Math.sqrt(u * u + k) - b * Math.sqrt(b * b + k) + k * Math.log(
|
|
868
|
+
Math.abs((u + Math.sqrt(u * u + k)) / (b + Math.sqrt(b * b + k)))
|
|
869
|
+
));
|
|
870
|
+
}
|
|
871
|
+
function getCubicArcLength(xs, ys, t = 1) {
|
|
872
|
+
const z = t / 2;
|
|
873
|
+
let sum = 0;
|
|
874
|
+
for (let index = 0; index < 20; index += 1) {
|
|
875
|
+
const correctedT = z * T_VALUES[index] + z;
|
|
876
|
+
const derivative = cubicDerivative(
|
|
877
|
+
xs,
|
|
878
|
+
ys,
|
|
879
|
+
correctedT
|
|
880
|
+
);
|
|
881
|
+
sum += C_VALUES[index] * Math.sqrt(derivative.x * derivative.x + derivative.y * derivative.y);
|
|
882
|
+
}
|
|
883
|
+
return z * sum;
|
|
884
|
+
}
|
|
885
|
+
class Bezier {
|
|
886
|
+
a;
|
|
887
|
+
b;
|
|
888
|
+
c;
|
|
889
|
+
d;
|
|
890
|
+
getArcLength;
|
|
891
|
+
getPoint;
|
|
892
|
+
getDerivative;
|
|
893
|
+
length;
|
|
894
|
+
constructor(ax, ay, bx, by, cx, cy, dx, dy) {
|
|
895
|
+
this.a = { x: ax, y: ay };
|
|
896
|
+
this.b = { x: bx, y: by };
|
|
897
|
+
this.c = { x: cx, y: cy };
|
|
898
|
+
this.d = { x: dx ?? 0, y: dy ?? 0 };
|
|
899
|
+
if (dx !== null && dx !== void 0 && dy !== null && dy !== void 0) {
|
|
900
|
+
this.getArcLength = getCubicArcLength;
|
|
901
|
+
this.getPoint = cubicPoint;
|
|
902
|
+
this.getDerivative = cubicDerivative;
|
|
903
|
+
} else {
|
|
904
|
+
this.getArcLength = getQuadraticArcLength;
|
|
905
|
+
this.getPoint = quadraticPoint;
|
|
906
|
+
this.getDerivative = quadraticDerivative;
|
|
907
|
+
}
|
|
908
|
+
this.length = 0;
|
|
909
|
+
this.init();
|
|
910
|
+
}
|
|
911
|
+
init() {
|
|
912
|
+
this.length = this.getArcLength(
|
|
913
|
+
[this.a.x, this.b.x, this.c.x, this.d.x],
|
|
914
|
+
[this.a.y, this.b.y, this.c.y, this.d.y]
|
|
915
|
+
);
|
|
916
|
+
}
|
|
917
|
+
getTotalLength() {
|
|
918
|
+
return this.length;
|
|
919
|
+
}
|
|
920
|
+
getPointAtLength(length) {
|
|
921
|
+
const t = t2length(
|
|
922
|
+
length,
|
|
923
|
+
this.length,
|
|
924
|
+
this.getArcLength,
|
|
925
|
+
[this.a.x, this.b.x, this.c.x, this.d.x],
|
|
926
|
+
[this.a.y, this.b.y, this.c.y, this.d.y]
|
|
927
|
+
);
|
|
928
|
+
return this.getPoint(
|
|
929
|
+
[this.a.x, this.b.x, this.c.x, this.d.x],
|
|
930
|
+
[this.a.y, this.b.y, this.c.y, this.d.y],
|
|
931
|
+
t
|
|
932
|
+
);
|
|
933
|
+
}
|
|
934
|
+
getTangentAtLength(length) {
|
|
935
|
+
const t = t2length(
|
|
936
|
+
length,
|
|
937
|
+
this.length,
|
|
938
|
+
this.getArcLength,
|
|
939
|
+
[this.a.x, this.b.x, this.c.x, this.d.x],
|
|
940
|
+
[this.a.y, this.b.y, this.c.y, this.d.y]
|
|
941
|
+
);
|
|
942
|
+
const derivative = this.getDerivative(
|
|
943
|
+
[this.a.x, this.b.x, this.c.x, this.d.x],
|
|
944
|
+
[this.a.y, this.b.y, this.c.y, this.d.y],
|
|
945
|
+
t
|
|
946
|
+
);
|
|
947
|
+
const mdl = Math.sqrt(
|
|
948
|
+
derivative.x * derivative.x + derivative.y * derivative.y
|
|
949
|
+
);
|
|
950
|
+
return mdl > 0 ? { x: derivative.x / mdl, y: derivative.y / mdl } : { x: 0, y: 0 };
|
|
951
|
+
}
|
|
952
|
+
getPropertiesAtLength(length) {
|
|
953
|
+
const tangent = this.getTangentAtLength(length);
|
|
954
|
+
const point = this.getPointAtLength(length);
|
|
955
|
+
return { x: point.x, y: point.y, tangentX: tangent.x, tangentY: tangent.y };
|
|
956
|
+
}
|
|
957
|
+
}
|
|
958
|
+
function createBezier(ax, ay, bx, by, cx, cy, dx, dy) {
|
|
959
|
+
return new Bezier(ax, ay, bx, by, cx, cy, dx, dy);
|
|
960
|
+
}
|
|
961
|
+
|
|
962
|
+
const TAU = Math.PI * 2;
|
|
963
|
+
function unitVectorAngle(ux, uy, vx, vy) {
|
|
964
|
+
const sign = ux * vy - uy * vx < 0 ? -1 : 1;
|
|
965
|
+
let dot = ux * vx + uy * vy;
|
|
966
|
+
if (dot > 1) {
|
|
967
|
+
dot = 1;
|
|
968
|
+
}
|
|
969
|
+
if (dot < -1) {
|
|
970
|
+
dot = -1;
|
|
971
|
+
}
|
|
972
|
+
return sign * Math.acos(dot);
|
|
973
|
+
}
|
|
974
|
+
function getArcCenter(x1, y1, x2, y2, fa, fs, rx, ry, sinPhi, cosPhi) {
|
|
975
|
+
const x1p = cosPhi * (x1 - x2) / 2 + sinPhi * (y1 - y2) / 2;
|
|
976
|
+
const y1p = -sinPhi * (x1 - x2) / 2 + cosPhi * (y1 - y2) / 2;
|
|
977
|
+
const rxSq = rx * rx;
|
|
978
|
+
const rySq = ry * ry;
|
|
979
|
+
const x1pSq = x1p * x1p;
|
|
980
|
+
const y1pSq = y1p * y1p;
|
|
981
|
+
let radicant = rxSq * rySq - rxSq * y1pSq - rySq * x1pSq;
|
|
982
|
+
if (radicant < 0) {
|
|
983
|
+
radicant = 0;
|
|
984
|
+
}
|
|
985
|
+
radicant /= rxSq * y1pSq + rySq * x1pSq;
|
|
986
|
+
radicant = Math.sqrt(radicant) * (fa === fs ? -1 : 1);
|
|
987
|
+
const cxp = radicant * rx * y1p / ry;
|
|
988
|
+
const cyp = -radicant * ry * x1p / rx;
|
|
989
|
+
const cx = cosPhi * cxp - sinPhi * cyp + (x1 + x2) / 2;
|
|
990
|
+
const cy = sinPhi * cxp + cosPhi * cyp + (y1 + y2) / 2;
|
|
991
|
+
const v1x = (x1p - cxp) / rx;
|
|
992
|
+
const v1y = (y1p - cyp) / ry;
|
|
993
|
+
const v2x = (-x1p - cxp) / rx;
|
|
994
|
+
const v2y = (-y1p - cyp) / ry;
|
|
995
|
+
const theta1 = unitVectorAngle(1, 0, v1x, v1y);
|
|
996
|
+
let deltaTheta = unitVectorAngle(v1x, v1y, v2x, v2y);
|
|
997
|
+
if (fs === 0 && deltaTheta > 0) {
|
|
998
|
+
deltaTheta -= TAU;
|
|
999
|
+
}
|
|
1000
|
+
if (fs === 1 && deltaTheta < 0) {
|
|
1001
|
+
deltaTheta += TAU;
|
|
1002
|
+
}
|
|
1003
|
+
return [cx, cy, theta1, deltaTheta];
|
|
1004
|
+
}
|
|
1005
|
+
function approximateUnitArc(theta1, deltaTheta) {
|
|
1006
|
+
const alpha = 4 / 3 * Math.tan(deltaTheta / 4);
|
|
1007
|
+
const x1 = Math.cos(theta1);
|
|
1008
|
+
const y1 = Math.sin(theta1);
|
|
1009
|
+
const x2 = Math.cos(theta1 + deltaTheta);
|
|
1010
|
+
const y2 = Math.sin(theta1 + deltaTheta);
|
|
1011
|
+
return [
|
|
1012
|
+
x1,
|
|
1013
|
+
y1,
|
|
1014
|
+
x1 - y1 * alpha,
|
|
1015
|
+
y1 + x1 * alpha,
|
|
1016
|
+
x2 + y2 * alpha,
|
|
1017
|
+
y2 - x2 * alpha,
|
|
1018
|
+
x2,
|
|
1019
|
+
y2
|
|
1020
|
+
];
|
|
1021
|
+
}
|
|
1022
|
+
function a2c(x1, y1, rx, ry, phi, fa, fs, x2, y2) {
|
|
1023
|
+
const sinPhi = Math.sin(phi * TAU / 360);
|
|
1024
|
+
const cosPhi = Math.cos(phi * TAU / 360);
|
|
1025
|
+
const x1p = cosPhi * (x1 - x2) / 2 + sinPhi * (y1 - y2) / 2;
|
|
1026
|
+
const y1p = -sinPhi * (x1 - x2) / 2 + cosPhi * (y1 - y2) / 2;
|
|
1027
|
+
if (x1p === 0 && y1p === 0) {
|
|
1028
|
+
return [];
|
|
1029
|
+
}
|
|
1030
|
+
if (rx === 0 || ry === 0) {
|
|
1031
|
+
return [];
|
|
1032
|
+
}
|
|
1033
|
+
rx = Math.abs(rx);
|
|
1034
|
+
ry = Math.abs(ry);
|
|
1035
|
+
const lambda = x1p * x1p / (rx * rx) + y1p * y1p / (ry * ry);
|
|
1036
|
+
if (lambda > 1) {
|
|
1037
|
+
rx *= Math.sqrt(lambda);
|
|
1038
|
+
ry *= Math.sqrt(lambda);
|
|
1039
|
+
}
|
|
1040
|
+
const [cx, cy, initialTheta, initialDeltaTheta] = getArcCenter(
|
|
1041
|
+
x1,
|
|
1042
|
+
y1,
|
|
1043
|
+
x2,
|
|
1044
|
+
y2,
|
|
1045
|
+
fa,
|
|
1046
|
+
fs,
|
|
1047
|
+
rx,
|
|
1048
|
+
ry,
|
|
1049
|
+
sinPhi,
|
|
1050
|
+
cosPhi
|
|
1051
|
+
);
|
|
1052
|
+
const result = [];
|
|
1053
|
+
let theta1 = initialTheta;
|
|
1054
|
+
let deltaTheta = initialDeltaTheta;
|
|
1055
|
+
const segments = Math.max(Math.ceil(Math.abs(deltaTheta) / (TAU / 4)), 1);
|
|
1056
|
+
deltaTheta /= segments;
|
|
1057
|
+
for (let index = 0; index < segments; index += 1) {
|
|
1058
|
+
result.push(approximateUnitArc(theta1, deltaTheta));
|
|
1059
|
+
theta1 += deltaTheta;
|
|
1060
|
+
}
|
|
1061
|
+
return result.map((curve) => {
|
|
1062
|
+
for (let index = 0; index < curve.length; index += 2) {
|
|
1063
|
+
let x = curve[index];
|
|
1064
|
+
let y = curve[index + 1];
|
|
1065
|
+
x *= rx;
|
|
1066
|
+
y *= ry;
|
|
1067
|
+
const xp = cosPhi * x - sinPhi * y;
|
|
1068
|
+
const yp = sinPhi * x + cosPhi * y;
|
|
1069
|
+
curve[index] = xp + cx;
|
|
1070
|
+
curve[index + 1] = yp + cy;
|
|
1071
|
+
}
|
|
1072
|
+
return curve;
|
|
1073
|
+
});
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1076
|
+
class Arc {
|
|
1077
|
+
length;
|
|
1078
|
+
partialLengths;
|
|
1079
|
+
curves;
|
|
1080
|
+
constructor(x0, y0, rx, ry, xAxisRotate, largeArcFlag, sweepFlag, x, y) {
|
|
1081
|
+
let length = 0;
|
|
1082
|
+
const partialLengths = [];
|
|
1083
|
+
const curves = [];
|
|
1084
|
+
const result = a2c(
|
|
1085
|
+
x0,
|
|
1086
|
+
y0,
|
|
1087
|
+
rx,
|
|
1088
|
+
ry,
|
|
1089
|
+
xAxisRotate,
|
|
1090
|
+
largeArcFlag,
|
|
1091
|
+
sweepFlag,
|
|
1092
|
+
x,
|
|
1093
|
+
y
|
|
1094
|
+
);
|
|
1095
|
+
result.forEach((curveData) => {
|
|
1096
|
+
const curve = createBezier(
|
|
1097
|
+
curveData[0],
|
|
1098
|
+
curveData[1],
|
|
1099
|
+
curveData[2],
|
|
1100
|
+
curveData[3],
|
|
1101
|
+
curveData[4],
|
|
1102
|
+
curveData[5],
|
|
1103
|
+
curveData[6],
|
|
1104
|
+
curveData[7]
|
|
1105
|
+
);
|
|
1106
|
+
const curveLength = curve.getTotalLength();
|
|
1107
|
+
length += curveLength;
|
|
1108
|
+
partialLengths.push(curveLength);
|
|
1109
|
+
curves.push(curve);
|
|
1110
|
+
});
|
|
1111
|
+
this.length = length;
|
|
1112
|
+
this.partialLengths = partialLengths;
|
|
1113
|
+
this.curves = curves;
|
|
1114
|
+
}
|
|
1115
|
+
getTotalLength() {
|
|
1116
|
+
return this.length;
|
|
1117
|
+
}
|
|
1118
|
+
getPointAtLength(fractionLength) {
|
|
1119
|
+
if (fractionLength < 0) {
|
|
1120
|
+
fractionLength = 0;
|
|
1121
|
+
} else if (fractionLength > this.length) {
|
|
1122
|
+
fractionLength = this.length;
|
|
1123
|
+
}
|
|
1124
|
+
let index = this.partialLengths.length - 1;
|
|
1125
|
+
while (this.partialLengths[index] >= fractionLength && this.partialLengths[index] > 0) {
|
|
1126
|
+
index -= 1;
|
|
1127
|
+
}
|
|
1128
|
+
if (index < this.partialLengths.length - 1) {
|
|
1129
|
+
index += 1;
|
|
1130
|
+
}
|
|
1131
|
+
let lengthOffset = 0;
|
|
1132
|
+
for (let cursor = 0; cursor < index; cursor += 1) {
|
|
1133
|
+
lengthOffset += this.partialLengths[cursor];
|
|
1134
|
+
}
|
|
1135
|
+
return this.curves[index].getPointAtLength(fractionLength - lengthOffset);
|
|
1136
|
+
}
|
|
1137
|
+
getTangentAtLength(fractionLength) {
|
|
1138
|
+
if (fractionLength < 0) {
|
|
1139
|
+
fractionLength = 0;
|
|
1140
|
+
} else if (fractionLength > this.length) {
|
|
1141
|
+
fractionLength = this.length;
|
|
1142
|
+
}
|
|
1143
|
+
let index = this.partialLengths.length - 1;
|
|
1144
|
+
while (this.partialLengths[index] >= fractionLength && this.partialLengths[index] > 0) {
|
|
1145
|
+
index -= 1;
|
|
1146
|
+
}
|
|
1147
|
+
if (index < this.partialLengths.length - 1) {
|
|
1148
|
+
index += 1;
|
|
1149
|
+
}
|
|
1150
|
+
let lengthOffset = 0;
|
|
1151
|
+
for (let cursor = 0; cursor < index; cursor += 1) {
|
|
1152
|
+
lengthOffset += this.partialLengths[cursor];
|
|
1153
|
+
}
|
|
1154
|
+
return this.curves[index].getTangentAtLength(
|
|
1155
|
+
fractionLength - lengthOffset
|
|
1156
|
+
);
|
|
1157
|
+
}
|
|
1158
|
+
getPropertiesAtLength(fractionLength) {
|
|
1159
|
+
const tangent = this.getTangentAtLength(fractionLength);
|
|
1160
|
+
const point = this.getPointAtLength(fractionLength);
|
|
1161
|
+
return { x: point.x, y: point.y, tangentX: tangent.x, tangentY: tangent.y };
|
|
1162
|
+
}
|
|
1163
|
+
}
|
|
1164
|
+
function createArc(x0, y0, rx, ry, xAxisRotate, largeArcFlag, sweepFlag, x, y) {
|
|
1165
|
+
return new Arc(x0, y0, rx, ry, xAxisRotate, largeArcFlag, sweepFlag, x, y);
|
|
1166
|
+
}
|
|
1167
|
+
|
|
1168
|
+
class LinearPosition {
|
|
1169
|
+
x0;
|
|
1170
|
+
x1;
|
|
1171
|
+
y0;
|
|
1172
|
+
y1;
|
|
1173
|
+
constructor(x0, x1, y0, y1) {
|
|
1174
|
+
this.x0 = x0;
|
|
1175
|
+
this.x1 = x1;
|
|
1176
|
+
this.y0 = y0;
|
|
1177
|
+
this.y1 = y1;
|
|
1178
|
+
}
|
|
1179
|
+
getTotalLength() {
|
|
1180
|
+
return Math.sqrt((this.x0 - this.x1) ** 2 + (this.y0 - this.y1) ** 2);
|
|
1181
|
+
}
|
|
1182
|
+
getPointAtLength(pos) {
|
|
1183
|
+
const fraction = pos / Math.sqrt((this.x0 - this.x1) ** 2 + (this.y0 - this.y1) ** 2);
|
|
1184
|
+
const newDeltaX = (this.x1 - this.x0) * fraction;
|
|
1185
|
+
const newDeltaY = (this.y1 - this.y0) * fraction;
|
|
1186
|
+
return { x: this.x0 + newDeltaX, y: this.y0 + newDeltaY };
|
|
1187
|
+
}
|
|
1188
|
+
getTangentAtLength() {
|
|
1189
|
+
const module = Math.sqrt(
|
|
1190
|
+
(this.x1 - this.x0) ** 2 + (this.y1 - this.y0) ** 2
|
|
1191
|
+
);
|
|
1192
|
+
return { x: (this.x1 - this.x0) / module, y: (this.y1 - this.y0) / module };
|
|
1193
|
+
}
|
|
1194
|
+
getPropertiesAtLength(pos) {
|
|
1195
|
+
const point = this.getPointAtLength(pos);
|
|
1196
|
+
const tangent = this.getTangentAtLength();
|
|
1197
|
+
return { x: point.x, y: point.y, tangentX: tangent.x, tangentY: tangent.y };
|
|
1198
|
+
}
|
|
1199
|
+
}
|
|
1200
|
+
function createLinearPosition(x0, x1, y0, y1) {
|
|
1201
|
+
return new LinearPosition(x0, x1, y0, y1);
|
|
1202
|
+
}
|
|
1203
|
+
|
|
1204
|
+
function svgPathProperties(svgString) {
|
|
1205
|
+
let length = 0;
|
|
1206
|
+
const partialLengths = [];
|
|
1207
|
+
const functions = [];
|
|
1208
|
+
let previousCurve = null;
|
|
1209
|
+
const svgProperties = function svgProperties2(string) {
|
|
1210
|
+
if (!string) {
|
|
1211
|
+
return null;
|
|
1212
|
+
}
|
|
1213
|
+
const parsed = parse(string);
|
|
1214
|
+
let cur = [0, 0];
|
|
1215
|
+
let prevPoint = [0, 0];
|
|
1216
|
+
let curve;
|
|
1217
|
+
let ringStart = [0, 0];
|
|
1218
|
+
for (let i = 0; i < parsed.length; i += 1) {
|
|
1219
|
+
if (parsed[i][0] === "M") {
|
|
1220
|
+
cur = [parsed[i][1], parsed[i][2]];
|
|
1221
|
+
ringStart = [cur[0], cur[1]];
|
|
1222
|
+
previousCurve = null;
|
|
1223
|
+
functions.push(null);
|
|
1224
|
+
} else if (parsed[i][0] === "m") {
|
|
1225
|
+
cur = [parsed[i][1] + cur[0], parsed[i][2] + cur[1]];
|
|
1226
|
+
ringStart = [cur[0], cur[1]];
|
|
1227
|
+
previousCurve = null;
|
|
1228
|
+
functions.push(null);
|
|
1229
|
+
} else if (parsed[i][0] === "L") {
|
|
1230
|
+
length += Math.sqrt(
|
|
1231
|
+
(cur[0] - parsed[i][1]) ** 2 + (cur[1] - parsed[i][2]) ** 2
|
|
1232
|
+
);
|
|
1233
|
+
functions.push(
|
|
1234
|
+
createLinearPosition(cur[0], parsed[i][1], cur[1], parsed[i][2])
|
|
1235
|
+
);
|
|
1236
|
+
cur = [parsed[i][1], parsed[i][2]];
|
|
1237
|
+
} else if (parsed[i][0] === "l") {
|
|
1238
|
+
length += Math.sqrt(parsed[i][1] ** 2 + parsed[i][2] ** 2);
|
|
1239
|
+
functions.push(
|
|
1240
|
+
createLinearPosition(
|
|
1241
|
+
cur[0],
|
|
1242
|
+
parsed[i][1] + cur[0],
|
|
1243
|
+
cur[1],
|
|
1244
|
+
parsed[i][2] + cur[1]
|
|
1245
|
+
)
|
|
1246
|
+
);
|
|
1247
|
+
cur = [parsed[i][1] + cur[0], parsed[i][2] + cur[1]];
|
|
1248
|
+
} else if (parsed[i][0] === "H") {
|
|
1249
|
+
length += Math.abs(cur[0] - parsed[i][1]);
|
|
1250
|
+
functions.push(createLinearPosition(cur[0], parsed[i][1], cur[1], cur[1]));
|
|
1251
|
+
cur[0] = parsed[i][1];
|
|
1252
|
+
} else if (parsed[i][0] === "h") {
|
|
1253
|
+
length += Math.abs(parsed[i][1]);
|
|
1254
|
+
functions.push(
|
|
1255
|
+
createLinearPosition(cur[0], cur[0] + parsed[i][1], cur[1], cur[1])
|
|
1256
|
+
);
|
|
1257
|
+
cur[0] = parsed[i][1] + cur[0];
|
|
1258
|
+
} else if (parsed[i][0] === "V") {
|
|
1259
|
+
length += Math.abs(cur[1] - parsed[i][1]);
|
|
1260
|
+
functions.push(createLinearPosition(cur[0], cur[0], cur[1], parsed[i][1]));
|
|
1261
|
+
cur[1] = parsed[i][1];
|
|
1262
|
+
} else if (parsed[i][0] === "v") {
|
|
1263
|
+
length += Math.abs(parsed[i][1]);
|
|
1264
|
+
functions.push(
|
|
1265
|
+
createLinearPosition(cur[0], cur[0], cur[1], cur[1] + parsed[i][1])
|
|
1266
|
+
);
|
|
1267
|
+
cur[1] = parsed[i][1] + cur[1];
|
|
1268
|
+
} else if (parsed[i][0] === "z" || parsed[i][0] === "Z") {
|
|
1269
|
+
length += Math.sqrt(
|
|
1270
|
+
(ringStart[0] - cur[0]) ** 2 + (ringStart[1] - cur[1]) ** 2
|
|
1271
|
+
);
|
|
1272
|
+
functions.push(
|
|
1273
|
+
createLinearPosition(cur[0], ringStart[0], cur[1], ringStart[1])
|
|
1274
|
+
);
|
|
1275
|
+
previousCurve = null;
|
|
1276
|
+
cur = [ringStart[0], ringStart[1]];
|
|
1277
|
+
} else if (parsed[i][0] === "C") {
|
|
1278
|
+
curve = createBezier(
|
|
1279
|
+
cur[0],
|
|
1280
|
+
cur[1],
|
|
1281
|
+
parsed[i][1],
|
|
1282
|
+
parsed[i][2],
|
|
1283
|
+
parsed[i][3],
|
|
1284
|
+
parsed[i][4],
|
|
1285
|
+
parsed[i][5],
|
|
1286
|
+
parsed[i][6]
|
|
1287
|
+
);
|
|
1288
|
+
previousCurve = curve;
|
|
1289
|
+
length += curve.getTotalLength();
|
|
1290
|
+
cur = [parsed[i][5], parsed[i][6]];
|
|
1291
|
+
functions.push(curve);
|
|
1292
|
+
} else if (parsed[i][0] === "c") {
|
|
1293
|
+
curve = createBezier(
|
|
1294
|
+
cur[0],
|
|
1295
|
+
cur[1],
|
|
1296
|
+
cur[0] + parsed[i][1],
|
|
1297
|
+
cur[1] + parsed[i][2],
|
|
1298
|
+
cur[0] + parsed[i][3],
|
|
1299
|
+
cur[1] + parsed[i][4],
|
|
1300
|
+
cur[0] + parsed[i][5],
|
|
1301
|
+
cur[1] + parsed[i][6]
|
|
1302
|
+
);
|
|
1303
|
+
previousCurve = curve;
|
|
1304
|
+
length += curve.getTotalLength();
|
|
1305
|
+
cur = [parsed[i][5] + cur[0], parsed[i][6] + cur[1]];
|
|
1306
|
+
functions.push(curve);
|
|
1307
|
+
} else if (parsed[i][0] === "S") {
|
|
1308
|
+
if (i > 0 && ["C", "c", "S", "s"].includes(parsed[i - 1][0])) {
|
|
1309
|
+
const previousSegment = parsed[i - 1];
|
|
1310
|
+
const reflectedControlX = 2 * cur[0] - previousSegment[previousSegment.length - 4];
|
|
1311
|
+
const reflectedControlY = 2 * cur[1] - previousSegment[previousSegment.length - 3];
|
|
1312
|
+
curve = createBezier(
|
|
1313
|
+
cur[0],
|
|
1314
|
+
cur[1],
|
|
1315
|
+
reflectedControlX,
|
|
1316
|
+
reflectedControlY,
|
|
1317
|
+
parsed[i][1],
|
|
1318
|
+
parsed[i][2],
|
|
1319
|
+
parsed[i][3],
|
|
1320
|
+
parsed[i][4]
|
|
1321
|
+
);
|
|
1322
|
+
} else {
|
|
1323
|
+
curve = createBezier(
|
|
1324
|
+
cur[0],
|
|
1325
|
+
cur[1],
|
|
1326
|
+
cur[0],
|
|
1327
|
+
cur[1],
|
|
1328
|
+
parsed[i][1],
|
|
1329
|
+
parsed[i][2],
|
|
1330
|
+
parsed[i][3],
|
|
1331
|
+
parsed[i][4]
|
|
1332
|
+
);
|
|
1333
|
+
}
|
|
1334
|
+
previousCurve = curve;
|
|
1335
|
+
length += curve.getTotalLength();
|
|
1336
|
+
cur = [parsed[i][3], parsed[i][4]];
|
|
1337
|
+
functions.push(curve);
|
|
1338
|
+
} else if (parsed[i][0] === "s") {
|
|
1339
|
+
if (i > 0 && ["C", "c", "S", "s"].includes(parsed[i - 1][0]) && previousCurve) {
|
|
1340
|
+
curve = createBezier(
|
|
1341
|
+
cur[0],
|
|
1342
|
+
cur[1],
|
|
1343
|
+
cur[0] + previousCurve.d.x - previousCurve.c.x,
|
|
1344
|
+
cur[1] + previousCurve.d.y - previousCurve.c.y,
|
|
1345
|
+
cur[0] + parsed[i][1],
|
|
1346
|
+
cur[1] + parsed[i][2],
|
|
1347
|
+
cur[0] + parsed[i][3],
|
|
1348
|
+
cur[1] + parsed[i][4]
|
|
1349
|
+
);
|
|
1350
|
+
} else {
|
|
1351
|
+
curve = createBezier(
|
|
1352
|
+
cur[0],
|
|
1353
|
+
cur[1],
|
|
1354
|
+
cur[0],
|
|
1355
|
+
cur[1],
|
|
1356
|
+
cur[0] + parsed[i][1],
|
|
1357
|
+
cur[1] + parsed[i][2],
|
|
1358
|
+
cur[0] + parsed[i][3],
|
|
1359
|
+
cur[1] + parsed[i][4]
|
|
1360
|
+
);
|
|
1361
|
+
}
|
|
1362
|
+
previousCurve = curve;
|
|
1363
|
+
length += curve.getTotalLength();
|
|
1364
|
+
cur = [parsed[i][3] + cur[0], parsed[i][4] + cur[1]];
|
|
1365
|
+
functions.push(curve);
|
|
1366
|
+
} else if (parsed[i][0] === "Q") {
|
|
1367
|
+
if (!(cur[0] === parsed[i][1] && cur[1] === parsed[i][2])) {
|
|
1368
|
+
curve = createBezier(
|
|
1369
|
+
cur[0],
|
|
1370
|
+
cur[1],
|
|
1371
|
+
parsed[i][1],
|
|
1372
|
+
parsed[i][2],
|
|
1373
|
+
parsed[i][3],
|
|
1374
|
+
parsed[i][4]
|
|
1375
|
+
);
|
|
1376
|
+
previousCurve = curve;
|
|
1377
|
+
} else {
|
|
1378
|
+
curve = createLinearPosition(
|
|
1379
|
+
parsed[i][1],
|
|
1380
|
+
parsed[i][3],
|
|
1381
|
+
parsed[i][2],
|
|
1382
|
+
parsed[i][4]
|
|
1383
|
+
);
|
|
1384
|
+
previousCurve = null;
|
|
1385
|
+
}
|
|
1386
|
+
length += curve.getTotalLength();
|
|
1387
|
+
functions.push(curve);
|
|
1388
|
+
cur = [parsed[i][3], parsed[i][4]];
|
|
1389
|
+
prevPoint = [parsed[i][1], parsed[i][2]];
|
|
1390
|
+
} else if (parsed[i][0] === "q") {
|
|
1391
|
+
if (!(parsed[i][1] === 0 && parsed[i][2] === 0)) {
|
|
1392
|
+
curve = createBezier(
|
|
1393
|
+
cur[0],
|
|
1394
|
+
cur[1],
|
|
1395
|
+
cur[0] + parsed[i][1],
|
|
1396
|
+
cur[1] + parsed[i][2],
|
|
1397
|
+
cur[0] + parsed[i][3],
|
|
1398
|
+
cur[1] + parsed[i][4]
|
|
1399
|
+
);
|
|
1400
|
+
previousCurve = curve;
|
|
1401
|
+
} else {
|
|
1402
|
+
curve = createLinearPosition(
|
|
1403
|
+
cur[0] + parsed[i][1],
|
|
1404
|
+
cur[0] + parsed[i][3],
|
|
1405
|
+
cur[1] + parsed[i][2],
|
|
1406
|
+
cur[1] + parsed[i][4]
|
|
1407
|
+
);
|
|
1408
|
+
previousCurve = null;
|
|
1409
|
+
}
|
|
1410
|
+
length += curve.getTotalLength();
|
|
1411
|
+
prevPoint = [cur[0] + parsed[i][1], cur[1] + parsed[i][2]];
|
|
1412
|
+
cur = [parsed[i][3] + cur[0], parsed[i][4] + cur[1]];
|
|
1413
|
+
functions.push(curve);
|
|
1414
|
+
} else if (parsed[i][0] === "T") {
|
|
1415
|
+
if (i > 0 && ["Q", "q", "T", "t"].includes(parsed[i - 1][0])) {
|
|
1416
|
+
curve = createBezier(
|
|
1417
|
+
cur[0],
|
|
1418
|
+
cur[1],
|
|
1419
|
+
2 * cur[0] - prevPoint[0],
|
|
1420
|
+
2 * cur[1] - prevPoint[1],
|
|
1421
|
+
parsed[i][1],
|
|
1422
|
+
parsed[i][2]
|
|
1423
|
+
);
|
|
1424
|
+
previousCurve = curve;
|
|
1425
|
+
} else {
|
|
1426
|
+
curve = createLinearPosition(cur[0], parsed[i][1], cur[1], parsed[i][2]);
|
|
1427
|
+
previousCurve = null;
|
|
1428
|
+
}
|
|
1429
|
+
functions.push(curve);
|
|
1430
|
+
length += curve.getTotalLength();
|
|
1431
|
+
prevPoint = [2 * cur[0] - prevPoint[0], 2 * cur[1] - prevPoint[1]];
|
|
1432
|
+
cur = [parsed[i][1], parsed[i][2]];
|
|
1433
|
+
} else if (parsed[i][0] === "t") {
|
|
1434
|
+
if (i > 0 && ["Q", "q", "T", "t"].includes(parsed[i - 1][0])) {
|
|
1435
|
+
curve = createBezier(
|
|
1436
|
+
cur[0],
|
|
1437
|
+
cur[1],
|
|
1438
|
+
2 * cur[0] - prevPoint[0],
|
|
1439
|
+
2 * cur[1] - prevPoint[1],
|
|
1440
|
+
cur[0] + parsed[i][1],
|
|
1441
|
+
cur[1] + parsed[i][2]
|
|
1442
|
+
);
|
|
1443
|
+
previousCurve = curve;
|
|
1444
|
+
} else {
|
|
1445
|
+
curve = createLinearPosition(
|
|
1446
|
+
cur[0],
|
|
1447
|
+
cur[0] + parsed[i][1],
|
|
1448
|
+
cur[1],
|
|
1449
|
+
cur[1] + parsed[i][2]
|
|
1450
|
+
);
|
|
1451
|
+
previousCurve = null;
|
|
1452
|
+
}
|
|
1453
|
+
length += curve.getTotalLength();
|
|
1454
|
+
prevPoint = [2 * cur[0] - prevPoint[0], 2 * cur[1] - prevPoint[1]];
|
|
1455
|
+
cur = [parsed[i][1] + cur[0], parsed[i][2] + cur[1]];
|
|
1456
|
+
functions.push(curve);
|
|
1457
|
+
} else if (parsed[i][0] === "A") {
|
|
1458
|
+
curve = createArc(
|
|
1459
|
+
cur[0],
|
|
1460
|
+
cur[1],
|
|
1461
|
+
parsed[i][1],
|
|
1462
|
+
parsed[i][2],
|
|
1463
|
+
parsed[i][3],
|
|
1464
|
+
parsed[i][4],
|
|
1465
|
+
parsed[i][5],
|
|
1466
|
+
parsed[i][6],
|
|
1467
|
+
parsed[i][7]
|
|
1468
|
+
);
|
|
1469
|
+
previousCurve = null;
|
|
1470
|
+
length += curve.getTotalLength();
|
|
1471
|
+
cur = [parsed[i][6], parsed[i][7]];
|
|
1472
|
+
functions.push(curve);
|
|
1473
|
+
} else if (parsed[i][0] === "a") {
|
|
1474
|
+
curve = createArc(
|
|
1475
|
+
cur[0],
|
|
1476
|
+
cur[1],
|
|
1477
|
+
parsed[i][1],
|
|
1478
|
+
parsed[i][2],
|
|
1479
|
+
parsed[i][3],
|
|
1480
|
+
parsed[i][4],
|
|
1481
|
+
parsed[i][5],
|
|
1482
|
+
cur[0] + parsed[i][6],
|
|
1483
|
+
cur[1] + parsed[i][7]
|
|
1484
|
+
);
|
|
1485
|
+
previousCurve = null;
|
|
1486
|
+
length += curve.getTotalLength();
|
|
1487
|
+
cur = [cur[0] + parsed[i][6], cur[1] + parsed[i][7]];
|
|
1488
|
+
functions.push(curve);
|
|
1489
|
+
}
|
|
1490
|
+
partialLengths.push(length);
|
|
1491
|
+
}
|
|
1492
|
+
return svgProperties2;
|
|
1493
|
+
};
|
|
1494
|
+
svgProperties.getTotalLength = function() {
|
|
1495
|
+
return length;
|
|
1496
|
+
};
|
|
1497
|
+
svgProperties.getPointAtLength = function(fractionLength) {
|
|
1498
|
+
const fractionPart = getPartAtLength(fractionLength);
|
|
1499
|
+
return functions[fractionPart.i].getPointAtLength(fractionPart.fraction);
|
|
1500
|
+
};
|
|
1501
|
+
svgProperties.getTangentAtLength = function(fractionLength) {
|
|
1502
|
+
const fractionPart = getPartAtLength(fractionLength);
|
|
1503
|
+
return functions[fractionPart.i].getTangentAtLength(fractionPart.fraction);
|
|
1504
|
+
};
|
|
1505
|
+
svgProperties.getPropertiesAtLength = function(fractionLength) {
|
|
1506
|
+
const fractionPart = getPartAtLength(fractionLength);
|
|
1507
|
+
return functions[fractionPart.i].getPropertiesAtLength(
|
|
1508
|
+
fractionPart.fraction
|
|
1509
|
+
);
|
|
1510
|
+
};
|
|
1511
|
+
function getPartAtLength(fractionLength) {
|
|
1512
|
+
if (fractionLength < 0) {
|
|
1513
|
+
fractionLength = 0;
|
|
1514
|
+
} else if (fractionLength > length) {
|
|
1515
|
+
fractionLength = length;
|
|
1516
|
+
}
|
|
1517
|
+
let index = partialLengths.length - 1;
|
|
1518
|
+
while (partialLengths[index] >= fractionLength && partialLengths[index] > 0) {
|
|
1519
|
+
index -= 1;
|
|
1520
|
+
}
|
|
1521
|
+
index += 1;
|
|
1522
|
+
return {
|
|
1523
|
+
fraction: fractionLength - (partialLengths[index - 1] ?? 0),
|
|
1524
|
+
i: index
|
|
1525
|
+
};
|
|
1526
|
+
}
|
|
1527
|
+
return svgProperties(svgString);
|
|
1528
|
+
}
|
|
1529
|
+
|
|
1530
|
+
const INVALID_INPUT = `All shapes must be supplied as arrays of [x, y] points or an SVG path string (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d).
|
|
1531
|
+
Example valid ways of supplying a shape would be:
|
|
1532
|
+
[[0, 0], [10, 0], [10, 10]]
|
|
1533
|
+
"M0,0 L10,0 L10,10Z"
|
|
1534
|
+
`;
|
|
1535
|
+
|
|
1536
|
+
function toPathString(ring) {
|
|
1537
|
+
return `M${ring.join("L")}Z`;
|
|
1538
|
+
}
|
|
1539
|
+
function pathStringToRing(str, maxSegmentLength) {
|
|
1540
|
+
const parsed = parse(str);
|
|
1541
|
+
return exactRing(parsed) || approximateRing(str, maxSegmentLength);
|
|
1542
|
+
}
|
|
1543
|
+
function exactRing(segments) {
|
|
1544
|
+
const ring = [];
|
|
1545
|
+
let currentX = 0;
|
|
1546
|
+
let currentY = 0;
|
|
1547
|
+
for (let index = 0; index < segments.length; index += 1) {
|
|
1548
|
+
const [command, ...values] = segments[index];
|
|
1549
|
+
if ((command === "M" || command === "m") && index) {
|
|
1550
|
+
break;
|
|
1551
|
+
}
|
|
1552
|
+
if (command === "Z" || command === "z") {
|
|
1553
|
+
break;
|
|
1554
|
+
}
|
|
1555
|
+
switch (command) {
|
|
1556
|
+
case "M":
|
|
1557
|
+
case "L":
|
|
1558
|
+
currentX = values[0];
|
|
1559
|
+
currentY = values[1];
|
|
1560
|
+
ring.push([currentX, currentY]);
|
|
1561
|
+
break;
|
|
1562
|
+
case "m":
|
|
1563
|
+
case "l":
|
|
1564
|
+
currentX += values[0];
|
|
1565
|
+
currentY += values[1];
|
|
1566
|
+
ring.push([currentX, currentY]);
|
|
1567
|
+
break;
|
|
1568
|
+
case "H":
|
|
1569
|
+
currentX = values[0];
|
|
1570
|
+
ring.push([currentX, currentY]);
|
|
1571
|
+
break;
|
|
1572
|
+
case "h":
|
|
1573
|
+
currentX += values[0];
|
|
1574
|
+
ring.push([currentX, currentY]);
|
|
1575
|
+
break;
|
|
1576
|
+
case "V":
|
|
1577
|
+
currentY = values[0];
|
|
1578
|
+
ring.push([currentX, currentY]);
|
|
1579
|
+
break;
|
|
1580
|
+
case "v":
|
|
1581
|
+
currentY += values[0];
|
|
1582
|
+
ring.push([currentX, currentY]);
|
|
1583
|
+
break;
|
|
1584
|
+
default:
|
|
1585
|
+
return false;
|
|
1586
|
+
}
|
|
1587
|
+
}
|
|
1588
|
+
return ring.length ? { ring } : false;
|
|
1589
|
+
}
|
|
1590
|
+
function approximateRing(str, maxSegmentLength) {
|
|
1591
|
+
if (!str) {
|
|
1592
|
+
throw new TypeError(INVALID_INPUT);
|
|
1593
|
+
}
|
|
1594
|
+
const measure = getMeasure(str);
|
|
1595
|
+
const ring = [];
|
|
1596
|
+
const length = measure.getTotalLength();
|
|
1597
|
+
let numPoints = 3;
|
|
1598
|
+
if (maxSegmentLength && isFiniteNumber(maxSegmentLength) && maxSegmentLength > 0) {
|
|
1599
|
+
numPoints = Math.max(numPoints, Math.ceil(length / maxSegmentLength));
|
|
1600
|
+
}
|
|
1601
|
+
for (let index = 0; index < numPoints; index += 1) {
|
|
1602
|
+
const point = measure.getPointAtLength(length * index / numPoints);
|
|
1603
|
+
ring.push([point.x, point.y]);
|
|
1604
|
+
}
|
|
1605
|
+
return {
|
|
1606
|
+
ring,
|
|
1607
|
+
skipBisect: true
|
|
1608
|
+
};
|
|
1609
|
+
}
|
|
1610
|
+
function getMeasure(d) {
|
|
1611
|
+
if (typeof window !== "undefined" && window?.document) {
|
|
1612
|
+
try {
|
|
1613
|
+
const path = window.document.createElementNS(
|
|
1614
|
+
"http://www.w3.org/2000/svg",
|
|
1615
|
+
"path"
|
|
1616
|
+
);
|
|
1617
|
+
path.setAttributeNS(null, "d", d);
|
|
1618
|
+
if (typeof path.getTotalLength === "function" && typeof path.getPointAtLength === "function") {
|
|
1619
|
+
return path;
|
|
1620
|
+
}
|
|
1621
|
+
} catch {
|
|
1622
|
+
}
|
|
1623
|
+
}
|
|
1624
|
+
const measure = svgPathProperties(d);
|
|
1625
|
+
if (!measure) {
|
|
1626
|
+
throw new TypeError(INVALID_INPUT);
|
|
1627
|
+
}
|
|
1628
|
+
return measure;
|
|
1629
|
+
}
|
|
1630
|
+
|
|
1631
|
+
function distance(a, b) {
|
|
1632
|
+
return Math.sqrt(
|
|
1633
|
+
(a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1])
|
|
1634
|
+
);
|
|
1635
|
+
}
|
|
1636
|
+
function pointAlong(a, b, pct) {
|
|
1637
|
+
return [a[0] + (b[0] - a[0]) * pct, a[1] + (b[1] - a[1]) * pct];
|
|
1638
|
+
}
|
|
1639
|
+
function samePoint(a, b) {
|
|
1640
|
+
return distance(a, b) < 1e-9;
|
|
1641
|
+
}
|
|
1642
|
+
function interpolatePoints(a, b, string) {
|
|
1643
|
+
const interpolators = a.map(
|
|
1644
|
+
(point, index) => interpolatePoint(point, b[index])
|
|
1645
|
+
);
|
|
1646
|
+
return (t) => {
|
|
1647
|
+
const values = interpolators.map((interpolator) => interpolator(t));
|
|
1648
|
+
return string ? toPathString(values) : values;
|
|
1649
|
+
};
|
|
1650
|
+
}
|
|
1651
|
+
function interpolatePoint(a, b) {
|
|
1652
|
+
return (t) => a.map((value, index) => value + t * (b[index] - value));
|
|
1653
|
+
}
|
|
1654
|
+
function isFiniteNumber(value) {
|
|
1655
|
+
return typeof value === "number" && Number.isFinite(value);
|
|
1656
|
+
}
|
|
1657
|
+
function polygonArea(polygon) {
|
|
1658
|
+
let area = 0;
|
|
1659
|
+
let previous = polygon[polygon.length - 1];
|
|
1660
|
+
for (const point of polygon) {
|
|
1661
|
+
area += previous[1] * point[0] - previous[0] * point[1];
|
|
1662
|
+
previous = point;
|
|
1663
|
+
}
|
|
1664
|
+
return area / 2;
|
|
1665
|
+
}
|
|
1666
|
+
function polygonLength(polygon) {
|
|
1667
|
+
let perimeter = 0;
|
|
1668
|
+
let previous = polygon[polygon.length - 1];
|
|
1669
|
+
for (const point of polygon) {
|
|
1670
|
+
perimeter += distance(previous, point);
|
|
1671
|
+
previous = point;
|
|
1672
|
+
}
|
|
1673
|
+
return perimeter;
|
|
1674
|
+
}
|
|
1675
|
+
|
|
1676
|
+
function addPoints(ring, numPoints) {
|
|
1677
|
+
if (!numPoints) {
|
|
1678
|
+
return;
|
|
1679
|
+
}
|
|
1680
|
+
const desiredLength = ring.length + numPoints;
|
|
1681
|
+
const step = polygonLength(ring) / numPoints;
|
|
1682
|
+
let index = 0;
|
|
1683
|
+
let cursor = 0;
|
|
1684
|
+
let insertAt = step / 2;
|
|
1685
|
+
while (ring.length < desiredLength) {
|
|
1686
|
+
const start = ring[index];
|
|
1687
|
+
const end = ring[(index + 1) % ring.length];
|
|
1688
|
+
const segmentLength = distance(start, end);
|
|
1689
|
+
if (insertAt <= cursor + segmentLength) {
|
|
1690
|
+
ring.splice(
|
|
1691
|
+
index + 1,
|
|
1692
|
+
0,
|
|
1693
|
+
segmentLength ? pointAlong(start, end, (insertAt - cursor) / segmentLength) : [...start]
|
|
1694
|
+
);
|
|
1695
|
+
insertAt += step;
|
|
1696
|
+
continue;
|
|
1697
|
+
}
|
|
1698
|
+
cursor += segmentLength;
|
|
1699
|
+
index += 1;
|
|
1700
|
+
}
|
|
1701
|
+
}
|
|
1702
|
+
function bisect(ring, maxSegmentLength = Number.POSITIVE_INFINITY) {
|
|
1703
|
+
for (let index = 0; index < ring.length; index += 1) {
|
|
1704
|
+
const start = ring[index];
|
|
1705
|
+
let end = index === ring.length - 1 ? ring[0] : ring[index + 1];
|
|
1706
|
+
while (distance(start, end) > maxSegmentLength) {
|
|
1707
|
+
end = pointAlong(start, end, 0.5);
|
|
1708
|
+
ring.splice(index + 1, 0, end);
|
|
1709
|
+
}
|
|
1710
|
+
}
|
|
1711
|
+
}
|
|
1712
|
+
|
|
1713
|
+
function normalizeRing(ring, maxSegmentLength) {
|
|
1714
|
+
let skipBisect = false;
|
|
1715
|
+
if (typeof ring === "string") {
|
|
1716
|
+
const converted = pathStringToRing(
|
|
1717
|
+
ring,
|
|
1718
|
+
maxSegmentLength
|
|
1719
|
+
);
|
|
1720
|
+
ring = converted.ring;
|
|
1721
|
+
skipBisect = converted.skipBisect ?? false;
|
|
1722
|
+
} else if (!Array.isArray(ring)) {
|
|
1723
|
+
throw new TypeError(INVALID_INPUT);
|
|
1724
|
+
}
|
|
1725
|
+
const points = ring.slice(0);
|
|
1726
|
+
if (!validRing(points)) {
|
|
1727
|
+
throw new TypeError(INVALID_INPUT);
|
|
1728
|
+
}
|
|
1729
|
+
if (points.length > 1 && samePoint(points[0], points[points.length - 1])) {
|
|
1730
|
+
points.pop();
|
|
1731
|
+
}
|
|
1732
|
+
if (polygonArea(points) > 0) {
|
|
1733
|
+
points.reverse();
|
|
1734
|
+
}
|
|
1735
|
+
if (!skipBisect && maxSegmentLength && isFiniteNumber(maxSegmentLength) && maxSegmentLength > 0) {
|
|
1736
|
+
bisect(points, maxSegmentLength);
|
|
1737
|
+
}
|
|
1738
|
+
return points;
|
|
1739
|
+
}
|
|
1740
|
+
function validRing(ring) {
|
|
1741
|
+
return ring.every(
|
|
1742
|
+
(point) => Array.isArray(point) && point.length >= 2 && isFiniteNumber(point[0]) && isFiniteNumber(point[1])
|
|
1743
|
+
);
|
|
1744
|
+
}
|
|
1745
|
+
|
|
1746
|
+
function rotate(ring, target) {
|
|
1747
|
+
const length = ring.length;
|
|
1748
|
+
let min = Number.POSITIVE_INFINITY;
|
|
1749
|
+
let bestOffset = 0;
|
|
1750
|
+
for (let offset = 0; offset < length; offset += 1) {
|
|
1751
|
+
let sumOfSquares = 0;
|
|
1752
|
+
target.forEach((point, index) => {
|
|
1753
|
+
const delta = distance(ring[(offset + index) % length], point);
|
|
1754
|
+
sumOfSquares += delta * delta;
|
|
1755
|
+
});
|
|
1756
|
+
if (sumOfSquares < min) {
|
|
1757
|
+
min = sumOfSquares;
|
|
1758
|
+
bestOffset = offset;
|
|
1759
|
+
}
|
|
1760
|
+
}
|
|
1761
|
+
if (bestOffset) {
|
|
1762
|
+
const spliced = ring.splice(0, bestOffset);
|
|
1763
|
+
ring.splice(ring.length, 0, ...spliced);
|
|
1764
|
+
}
|
|
1765
|
+
}
|
|
1766
|
+
|
|
1767
|
+
function interpolate(fromShape, toShape, { maxSegmentLength = 10, string = true } = {}) {
|
|
1768
|
+
const fromRing = normalizeRing(fromShape, maxSegmentLength);
|
|
1769
|
+
const toRing = normalizeRing(toShape, maxSegmentLength);
|
|
1770
|
+
const interpolator = interpolateRing(fromRing, toRing, string);
|
|
1771
|
+
if (!string) {
|
|
1772
|
+
return interpolator;
|
|
1773
|
+
}
|
|
1774
|
+
return (t) => {
|
|
1775
|
+
if (t < 1e-4) {
|
|
1776
|
+
return fromShape;
|
|
1777
|
+
}
|
|
1778
|
+
if (1 - t < 1e-4) {
|
|
1779
|
+
return toShape;
|
|
1780
|
+
}
|
|
1781
|
+
return interpolator(t);
|
|
1782
|
+
};
|
|
1783
|
+
}
|
|
1784
|
+
function interpolateRing(fromRing, toRing, string) {
|
|
1785
|
+
const diff = fromRing.length - toRing.length;
|
|
1786
|
+
addPoints(fromRing, diff < 0 ? diff * -1 : 0);
|
|
1787
|
+
addPoints(toRing, diff > 0 ? diff : 0);
|
|
1788
|
+
rotate(fromRing, toRing);
|
|
1789
|
+
return interpolatePoints(fromRing, toRing, string);
|
|
1790
|
+
}
|
|
1791
|
+
|
|
1792
|
+
const SHARP_PATH = "m23 12-8.036-3.23L12.006 0 9.047 8.77 1 12l8.047 3.23L12.006 24l2.958-8.77z";
|
|
1793
|
+
const ROUND_PATH = "M17.425 13.854c1.665-.675 1.665-3.033 0-3.708l-2.73-1.106-.793-2.37c-.609-1.82-3.184-1.82-3.793 0l-.793 2.37-2.734 1.106c-1.666.674-1.666 3.034 0 3.708l2.734 1.106.793 2.37c.609 1.82 3.184 1.82 3.793 0l.793-2.37z";
|
|
1794
|
+
const SVG_STYLE = { width: "100%", height: "100%", display: "block" };
|
|
1795
|
+
const GRADIENT_ID = "ai-mark-gradient";
|
|
1796
|
+
function SVGMorph({ delay, paths, inheritColor = false }) {
|
|
1797
|
+
const [pathIndex, setPathIndex] = useState(0);
|
|
1798
|
+
const progress = useMotionValue(0);
|
|
1799
|
+
const arrayOfIndex = useMemo(() => paths.map((_, i) => i), [paths]);
|
|
1800
|
+
const path = useTransform(progress, arrayOfIndex, paths, {
|
|
1801
|
+
mixer: (a, b) => interpolate(a, b, { maxSegmentLength: 1 })
|
|
1802
|
+
});
|
|
1803
|
+
useEffect(() => {
|
|
1804
|
+
const animation = animate(progress, pathIndex, {
|
|
1805
|
+
duration: 0.8,
|
|
1806
|
+
ease: [0.5, 0, 0.65, 1],
|
|
1807
|
+
delay,
|
|
1808
|
+
onComplete: () => {
|
|
1809
|
+
if (pathIndex === paths.length - 1) {
|
|
1810
|
+
progress.set(0);
|
|
1811
|
+
setPathIndex(1);
|
|
1812
|
+
} else {
|
|
1813
|
+
setPathIndex(pathIndex + 1);
|
|
1814
|
+
}
|
|
1815
|
+
}
|
|
1816
|
+
});
|
|
1817
|
+
return () => {
|
|
1818
|
+
animation.stop();
|
|
1819
|
+
};
|
|
1820
|
+
}, [pathIndex, paths.length, progress, delay]);
|
|
1821
|
+
return /* @__PURE__ */ jsx(
|
|
1822
|
+
motion.path,
|
|
1823
|
+
{
|
|
1824
|
+
fill: inheritColor ? "currentColor" : `url(#${GRADIENT_ID})`,
|
|
1825
|
+
d: path
|
|
1826
|
+
}
|
|
1827
|
+
);
|
|
1828
|
+
}
|
|
1829
|
+
const AiMarkIconAnimatedSegment = memo(
|
|
1830
|
+
({
|
|
1831
|
+
animate: animate2 = false,
|
|
1832
|
+
delay,
|
|
1833
|
+
className,
|
|
1834
|
+
inheritColor = false,
|
|
1835
|
+
spin = false
|
|
1836
|
+
}) => {
|
|
1837
|
+
const fill = inheritColor ? "currentColor" : `url(#${GRADIENT_ID})`;
|
|
1838
|
+
const { mode } = useTheme();
|
|
1839
|
+
const gradientDef = !inheritColor && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
|
|
1840
|
+
"linearGradient",
|
|
1841
|
+
{
|
|
1842
|
+
id: GRADIENT_ID,
|
|
1843
|
+
x1: "0.4962",
|
|
1844
|
+
y1: "0.2483",
|
|
1845
|
+
x2: "-0.0543",
|
|
1846
|
+
y2: "0.4319",
|
|
1847
|
+
gradientUnits: "objectBoundingBox",
|
|
1848
|
+
children: [
|
|
1849
|
+
/* @__PURE__ */ jsx(
|
|
1850
|
+
"stop",
|
|
1851
|
+
{
|
|
1852
|
+
stopColor: mode === "dark" ? "#77C5EA" : "#026EE4",
|
|
1853
|
+
style: {
|
|
1854
|
+
stopColor: mode === "dark" ? "#77C5EA" : "#026EE4",
|
|
1855
|
+
stopOpacity: 1
|
|
1856
|
+
}
|
|
1857
|
+
}
|
|
1858
|
+
),
|
|
1859
|
+
/* @__PURE__ */ jsx(
|
|
1860
|
+
"stop",
|
|
1861
|
+
{
|
|
1862
|
+
offset: "1",
|
|
1863
|
+
stopColor: mode === "dark" ? "#D0D8E1" : "#27AEEE",
|
|
1864
|
+
style: {
|
|
1865
|
+
stopColor: mode === "dark" ? "#D0D8E1" : "#27AEEE",
|
|
1866
|
+
stopOpacity: 1
|
|
1867
|
+
}
|
|
1868
|
+
}
|
|
1869
|
+
)
|
|
1870
|
+
]
|
|
1871
|
+
}
|
|
1872
|
+
) });
|
|
1873
|
+
if (!animate2) {
|
|
1874
|
+
return /* @__PURE__ */ jsxs("svg", { className, style: SVG_STYLE, viewBox: "0 0 24 24", children: [
|
|
1875
|
+
gradientDef,
|
|
1876
|
+
/* @__PURE__ */ jsx("path", { fill, d: SHARP_PATH })
|
|
1877
|
+
] });
|
|
1878
|
+
}
|
|
1879
|
+
return /* @__PURE__ */ jsxs(
|
|
1880
|
+
motion.svg,
|
|
1881
|
+
{
|
|
1882
|
+
className,
|
|
1883
|
+
style: SVG_STYLE,
|
|
1884
|
+
viewBox: "0 0 24 24",
|
|
1885
|
+
animate: spin ? { rotate: 180 } : {},
|
|
1886
|
+
transition: {
|
|
1887
|
+
duration: 2,
|
|
1888
|
+
type: "spring",
|
|
1889
|
+
repeat: 0,
|
|
1890
|
+
repeatType: "loop",
|
|
1891
|
+
repeatDelay: 1.5,
|
|
1892
|
+
delay
|
|
1893
|
+
},
|
|
1894
|
+
children: [
|
|
1895
|
+
gradientDef,
|
|
1896
|
+
/* @__PURE__ */ jsx(
|
|
1897
|
+
SVGMorph,
|
|
1898
|
+
{
|
|
1899
|
+
paths: [SHARP_PATH, ROUND_PATH, SHARP_PATH],
|
|
1900
|
+
delay,
|
|
1901
|
+
inheritColor
|
|
1902
|
+
}
|
|
1903
|
+
)
|
|
1904
|
+
]
|
|
1905
|
+
}
|
|
1906
|
+
);
|
|
1907
|
+
}
|
|
1908
|
+
);
|
|
1909
|
+
AiMarkIconAnimatedSegment.displayName = "AiMarkIconAnimatedSegment";
|
|
1910
|
+
const AiMarkIconAnimated = ({
|
|
1911
|
+
animate: animate2 = false,
|
|
1912
|
+
size = 16,
|
|
1913
|
+
inheritColor = false,
|
|
1914
|
+
spin = false
|
|
1915
|
+
}) => {
|
|
1916
|
+
const { prefersReducedMotion } = usePrefersReducedMotion();
|
|
1917
|
+
const shouldAnimate = animate2 && !prefersReducedMotion;
|
|
1918
|
+
const largeSvgSize = size * 0.75;
|
|
1919
|
+
const smallSvgSize = size * 6 / 16;
|
|
1920
|
+
const containerStyle = useMemo(
|
|
1921
|
+
() => ({ position: "relative", width: size, height: size }),
|
|
1922
|
+
[size]
|
|
1923
|
+
);
|
|
1924
|
+
const largeIconStyle = useMemo(
|
|
1925
|
+
() => ({
|
|
1926
|
+
position: "absolute",
|
|
1927
|
+
bottom: size / 16,
|
|
1928
|
+
left: size / 16,
|
|
1929
|
+
width: largeSvgSize,
|
|
1930
|
+
height: largeSvgSize
|
|
1931
|
+
}),
|
|
1932
|
+
[largeSvgSize, size]
|
|
1933
|
+
);
|
|
1934
|
+
const smallIconStyle = useMemo(
|
|
1935
|
+
() => ({
|
|
1936
|
+
position: "absolute",
|
|
1937
|
+
top: size / 16,
|
|
1938
|
+
right: size / 16,
|
|
1939
|
+
width: smallSvgSize,
|
|
1940
|
+
height: smallSvgSize
|
|
1941
|
+
}),
|
|
1942
|
+
[smallSvgSize, size]
|
|
1943
|
+
);
|
|
1944
|
+
return /* @__PURE__ */ jsxs("div", { style: containerStyle, "data-anv": "ai-mark-icon-animated", children: [
|
|
1945
|
+
/* @__PURE__ */ jsx("div", { style: largeIconStyle, children: /* @__PURE__ */ jsx(
|
|
1946
|
+
AiMarkIconAnimatedSegment,
|
|
1947
|
+
{
|
|
1948
|
+
animate: shouldAnimate,
|
|
1949
|
+
delay: 0.15,
|
|
1950
|
+
inheritColor,
|
|
1951
|
+
spin
|
|
1952
|
+
}
|
|
1953
|
+
) }),
|
|
1954
|
+
/* @__PURE__ */ jsx("div", { style: smallIconStyle, children: /* @__PURE__ */ jsx(
|
|
1955
|
+
AiMarkIconAnimatedSegment,
|
|
1956
|
+
{
|
|
1957
|
+
animate: shouldAnimate,
|
|
1958
|
+
inheritColor,
|
|
1959
|
+
spin
|
|
1960
|
+
}
|
|
1961
|
+
) })
|
|
1962
|
+
] });
|
|
1963
|
+
};
|
|
1964
|
+
|
|
1965
|
+
const SvgAiChat = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M20.488 7.014A1.51 1.51 0 0 1 22 8.513v8.991a1.51 1.51 0 0 1-1.512 1.499H9.9L6.875 22v-9.975l.757-2.763 6.404-2.248zm-9.831 7.493a.756.756 0 0 0-.757.75c0 .412.34.749.757.749h7.562a.755.755 0 0 0 .756-.75.755.755 0 0 0-.756-.749zm0-2.248a.756.756 0 0 0-.757.75c0 .412.34.749.757.749h7.562a.755.755 0 0 0 .756-.75.755.755 0 0 0-.756-.749zm0-2.248a.756.756 0 0 0-.757.75c0 .412.34.749.757.749h7.562a.755.755 0 0 0 .756-.75.755.755 0 0 0-.756-.749z" }), /* @__PURE__ */ React.createElement("path", { d: "m6.56 5.49 3.811 1.36L6.56 8.213l-1.373 3.776L3.81 8.213 0 6.85l3.81-1.36 1.376-3.778zm3.639-3.607 1.9.685-1.9.687-.692 1.883-.692-1.883-1.901-.687 1.9-.685L9.508 0z" }));
|
|
1966
|
+
|
|
1967
|
+
const SvgAiEdit = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M18.655 10.414 7.218 21.844A.5.5 0 0 1 6.85 22H3.666a.52.52 0 0 1-.524-.523V18.29q0-.22.157-.376l11.428-11.43zM6.814 5.756l3.96 1.427-3.96 1.43-1.427 3.958L3.96 8.612 0 7.183l3.959-1.427 1.428-3.96zM18.503 3.14a1.05 1.05 0 0 1 .74.307l2.45 2.45a1.05 1.05 0 0 1 .227 1.14q-.08.19-.227.338l-1.916 1.917-3.928-3.929 1.916-1.916a1.05 1.05 0 0 1 .738-.307m-7.908-1.165 1.975.718-1.975.72-.718 1.975-.72-1.975-1.975-.72 1.975-.718L9.877 0z" }));
|
|
1968
|
+
|
|
1969
|
+
const SvgAiForm = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M22 6c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2v-9.17c0-.53.21-1.04.59-1.41l4.83-4.83c.37-.38.88-.59 1.41-.59zM11 18c-.55 0-1 .45-1 1s.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1zm0-4c-.55 0-1 .45-1 1s.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1zm3-4c-.55 0-1 .45-1 1s.45 1 1 1h5c.55 0 1-.45 1-1s-.45-1-1-1z", clipRule: "evenodd" }), /* @__PURE__ */ React.createElement("path", { d: "m6.505 5.495 3.781 1.363-3.78 1.363L5.142 12 3.78 8.22 0 6.859l3.78-1.363 1.363-3.78zm3.61-3.608L12 2.572l-1.885.686-.687 1.885-.686-1.885-1.885-.686 1.885-.685L9.428 0z" }));
|
|
1970
|
+
|
|
1971
|
+
const SvgAiMic = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M21.513 13.737c.595 0 1.071.554.974 1.17a7.3 7.3 0 0 1-1.958 3.959 6.7 6.7 0 0 1-3.805 1.973v2.134c0 .565-.439 1.027-.975 1.027s-.974-.462-.974-1.027V20.84c-2.945-.441-5.287-2.854-5.765-5.933-.087-.615.381-1.169.976-1.169.232.002.456.09.631.25s.29.38.324.622c.4 2.412 2.4 4.26 4.808 4.26s4.408-1.848 4.808-4.26c.078-.503.479-.872.956-.872" }), /* @__PURE__ */ React.createElement("path", { d: "M15.749 4.5c1.619 0 2.925 1.375 2.925 3.08v6.157c0 1.704-1.306 3.08-2.925 3.08s-2.925-1.376-2.926-3.08V7.58c0-1.703 1.307-3.079 2.926-3.079m-7.743.994 3.78 1.362-3.78 1.364L6.643 12 5.28 8.22 1.5 6.858l3.78-1.362 1.363-3.781zm3.609-3.61 1.885.686-1.885.687-.685 1.885-.688-1.885-1.885-.687 1.885-.686L10.93 0z" }));
|
|
1972
|
+
|
|
1973
|
+
const SvgAiSearch = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M11.757 7.838a6.3 6.3 0 0 1 2.828-.288c2.71.329 4.955 2.476 5.41 5.165a6.28 6.28 0 0 1-1.431 5.165l.27.26h.765l4.104 4.121a1.02 1.02 0 0 1 0 1.442 1.024 1.024 0 0 1-1.443 0l-4.112-4.11v-.765l-.262-.271a6.29 6.29 0 0 1-5.168 1.43c-2.69-.454-4.84-2.698-5.168-5.406a6.29 6.29 0 0 1 4.207-6.743m2.034 1.599a4.35 4.35 0 0 0-4.355 4.352 4.35 4.35 0 0 0 4.355 4.352 4.35 4.35 0 0 0 4.357-4.352 4.35 4.35 0 0 0-4.357-4.352", clipRule: "evenodd" }), /* @__PURE__ */ React.createElement("path", { d: "m6.505 5.495 3.781 1.362-3.78 1.364L5.142 12 3.779 8.22 0 6.858l3.78-1.362 1.363-3.781zm3.61-3.61L12 2.571l-1.885.687-.686 1.885-.687-1.885-1.885-.687 1.885-.686L9.43 0z" }));
|
|
1974
|
+
|
|
1975
|
+
const AI_ICON_MAP = {
|
|
1976
|
+
chat: SvgAiChat,
|
|
1977
|
+
edit: SvgAiEdit,
|
|
1978
|
+
form: SvgAiForm,
|
|
1979
|
+
mic: SvgAiMic,
|
|
1980
|
+
search: SvgAiSearch
|
|
1981
|
+
};
|
|
1982
|
+
const ICON_ONLY_AI_SIZE_PX = {
|
|
1983
|
+
xsmall: 12,
|
|
1984
|
+
small: 14,
|
|
1985
|
+
medium: 24,
|
|
1986
|
+
large: 24
|
|
1987
|
+
};
|
|
1988
|
+
function iconHasLeadingSlot(icon) {
|
|
1989
|
+
if (!icon) {
|
|
1990
|
+
return false;
|
|
1991
|
+
}
|
|
1992
|
+
if (typeof icon !== "object") {
|
|
1993
|
+
return true;
|
|
1994
|
+
}
|
|
1995
|
+
return "before" in icon;
|
|
1996
|
+
}
|
|
1997
|
+
function aiMarkShowsAnimatedMark(aiMark) {
|
|
1998
|
+
return aiMark === true || aiMark === "mark";
|
|
1999
|
+
}
|
|
2000
|
+
|
|
2001
|
+
const Button = forwardRef(
|
|
2002
|
+
(props, ref) => {
|
|
2003
|
+
const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
|
|
2004
|
+
const {
|
|
2005
|
+
aiMark,
|
|
2006
|
+
children,
|
|
2007
|
+
className,
|
|
2008
|
+
appearance = "secondary",
|
|
2009
|
+
size = "medium",
|
|
2010
|
+
icon,
|
|
2011
|
+
loading = false,
|
|
2012
|
+
disabled,
|
|
2013
|
+
style,
|
|
2014
|
+
type = "button",
|
|
2015
|
+
onMouseEnter,
|
|
2016
|
+
onMouseLeave,
|
|
2017
|
+
onFocus,
|
|
2018
|
+
onBlur,
|
|
2019
|
+
...rest
|
|
2020
|
+
} = componentProps;
|
|
2021
|
+
const aiOn = !!aiMark;
|
|
2022
|
+
const isIconOnly = !children;
|
|
2023
|
+
if (aiOn && icon) {
|
|
2024
|
+
if (isIconOnly) {
|
|
2025
|
+
warnOnce(
|
|
2026
|
+
"[Anvil2 Button] The `icon` prop is ignored when `aiMark` is set on an icon-only button. Only the AI icon is rendered."
|
|
2027
|
+
);
|
|
2028
|
+
} else if (iconHasLeadingSlot(icon)) {
|
|
2029
|
+
warnOnce(
|
|
2030
|
+
"[Anvil2 Button] The leading `icon` (plain Svg or `icon.before`) is ignored when `aiMark` is set with button text. Use `icon={{ after: Svg }}` for a trailing icon, or omit `icon`."
|
|
2031
|
+
);
|
|
2032
|
+
}
|
|
2033
|
+
}
|
|
2034
|
+
const data = {
|
|
2035
|
+
children: childrenToString(props.children),
|
|
2036
|
+
appearance,
|
|
2037
|
+
icon,
|
|
2038
|
+
size,
|
|
2039
|
+
type,
|
|
2040
|
+
aiMark
|
|
2041
|
+
};
|
|
2042
|
+
const trackingId = useTrackingId({
|
|
2043
|
+
name: "Button",
|
|
2044
|
+
data,
|
|
2045
|
+
hasOverride: !!props["data-tracking-id"]
|
|
2046
|
+
});
|
|
2047
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
2048
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
2049
|
+
const isAnimated = isHovered || isFocused;
|
|
2050
|
+
const inheritColorForMark = appearance !== "secondary" && appearance !== "ghost";
|
|
2051
|
+
const renderStandardLeading = useCallback(() => {
|
|
2052
|
+
if (typeof icon === "object" && icon !== null && "before" in icon) {
|
|
2053
|
+
return /* @__PURE__ */ jsx(
|
|
2054
|
+
Icon,
|
|
2055
|
+
{
|
|
2056
|
+
className: styles["icon"],
|
|
2057
|
+
inherit: true,
|
|
2058
|
+
"aria-hidden": true,
|
|
2059
|
+
svg: icon.before
|
|
2060
|
+
}
|
|
2061
|
+
);
|
|
2062
|
+
}
|
|
2063
|
+
if (icon && typeof icon !== "object") {
|
|
2064
|
+
return /* @__PURE__ */ jsx(
|
|
2065
|
+
Icon,
|
|
2066
|
+
{
|
|
2067
|
+
className: styles["icon"],
|
|
2068
|
+
inherit: true,
|
|
2069
|
+
"aria-hidden": true,
|
|
2070
|
+
svg: icon,
|
|
2071
|
+
size: !children && !size.includes("small") ? "large" : "medium"
|
|
2072
|
+
}
|
|
2073
|
+
);
|
|
2074
|
+
}
|
|
2075
|
+
return null;
|
|
2076
|
+
}, [icon, children, size]);
|
|
2077
|
+
const renderAiLeading = useCallback(() => {
|
|
2078
|
+
if (aiMarkShowsAnimatedMark(aiMark)) {
|
|
2079
|
+
return /* @__PURE__ */ jsx(
|
|
2080
|
+
AiMarkIconAnimated,
|
|
2081
|
+
{
|
|
2082
|
+
animate: isAnimated,
|
|
2083
|
+
inheritColor: inheritColorForMark,
|
|
2084
|
+
size: isIconOnly ? ICON_ONLY_AI_SIZE_PX[size] : void 0,
|
|
2085
|
+
spin: true
|
|
2086
|
+
}
|
|
2087
|
+
);
|
|
2088
|
+
}
|
|
2089
|
+
const SvgIcon = AI_ICON_MAP[aiMark];
|
|
2090
|
+
return /* @__PURE__ */ jsx(
|
|
2091
|
+
Icon,
|
|
2092
|
+
{
|
|
2093
|
+
className: styles["icon"],
|
|
2094
|
+
inherit: true,
|
|
2095
|
+
"aria-hidden": true,
|
|
2096
|
+
"data-anv": "ai-mark-icon",
|
|
2097
|
+
svg: SvgIcon,
|
|
2098
|
+
size: isIconOnly && !size.includes("small") ? "large" : "medium"
|
|
2099
|
+
}
|
|
2100
|
+
);
|
|
2101
|
+
}, [aiMark, isAnimated, inheritColorForMark, isIconOnly, size]);
|
|
2102
|
+
const leadingContent = useMemo(() => {
|
|
2103
|
+
if (loading) {
|
|
2104
|
+
return /* @__PURE__ */ jsx(Spinner, { inherit: true, size: "small", className: styles["loading-spinner"] });
|
|
2105
|
+
}
|
|
2106
|
+
if (aiOn) {
|
|
2107
|
+
return renderAiLeading();
|
|
2108
|
+
}
|
|
2109
|
+
return renderStandardLeading();
|
|
2110
|
+
}, [aiOn, loading, renderAiLeading, renderStandardLeading]);
|
|
2111
|
+
const trailingAfter = !isIconOnly && typeof icon === "object" && "after" in icon ? /* @__PURE__ */ jsx(Icon, { className: styles["icon"], inherit: true, "aria-hidden": true, svg: icon.after }) : null;
|
|
2112
|
+
const buttonClassNames = cx(className, styles["button"], {
|
|
2113
|
+
[styles["appearance-primary"]]: appearance === "primary",
|
|
2114
|
+
[styles["appearance-secondary"]]: appearance === "secondary",
|
|
2115
|
+
[styles["appearance-ghost"]]: appearance === "ghost",
|
|
2116
|
+
[styles["danger-secondary"]]: appearance === "danger-secondary",
|
|
2117
|
+
[styles["danger-primary"]]: appearance === "danger",
|
|
2118
|
+
[styles["size-xsmall"]]: size === "xsmall",
|
|
2119
|
+
[styles["size-small"]]: size === "small",
|
|
2120
|
+
[styles["size-medium"]]: size === "medium",
|
|
2121
|
+
[styles["size-large"]]: size === "large",
|
|
2122
|
+
[styles["type-icon"]]: isIconOnly,
|
|
2123
|
+
[styles["loading"]]: loading
|
|
2124
|
+
});
|
|
2125
|
+
const styleCombined = {
|
|
2126
|
+
...style,
|
|
2127
|
+
...layoutStyles
|
|
2128
|
+
};
|
|
2129
|
+
const handleMouseEnter = useCallback(
|
|
2130
|
+
(e) => {
|
|
2131
|
+
setIsHovered(true);
|
|
2132
|
+
onMouseEnter?.(e);
|
|
2133
|
+
},
|
|
2134
|
+
[onMouseEnter]
|
|
2135
|
+
);
|
|
2136
|
+
const handleMouseLeave = useCallback(
|
|
2137
|
+
(e) => {
|
|
2138
|
+
setIsHovered(false);
|
|
2139
|
+
onMouseLeave?.(e);
|
|
2140
|
+
},
|
|
2141
|
+
[onMouseLeave]
|
|
2142
|
+
);
|
|
2143
|
+
const handleFocus = useCallback(
|
|
2144
|
+
(e) => {
|
|
2145
|
+
setIsFocused(true);
|
|
2146
|
+
onFocus?.(e);
|
|
2147
|
+
},
|
|
2148
|
+
[onFocus]
|
|
2149
|
+
);
|
|
2150
|
+
const handleBlur = useCallback(
|
|
2151
|
+
(e) => {
|
|
2152
|
+
setIsFocused(false);
|
|
2153
|
+
onBlur?.(e);
|
|
2154
|
+
},
|
|
2155
|
+
[onBlur]
|
|
2156
|
+
);
|
|
2157
|
+
return /* @__PURE__ */ jsxs(
|
|
2158
|
+
"button",
|
|
2159
|
+
{
|
|
2160
|
+
"data-tracking-id": trackingId,
|
|
2161
|
+
className: buttonClassNames,
|
|
2162
|
+
type,
|
|
2163
|
+
disabled: disabled || loading,
|
|
2164
|
+
"aria-busy": loading ? true : void 0,
|
|
2165
|
+
"data-anv": "button",
|
|
2166
|
+
style: styleCombined,
|
|
2167
|
+
ref,
|
|
2168
|
+
onMouseEnter: handleMouseEnter,
|
|
2169
|
+
onMouseLeave: handleMouseLeave,
|
|
2170
|
+
onFocus: handleFocus,
|
|
2171
|
+
onBlur: handleBlur,
|
|
2172
|
+
...rest,
|
|
2173
|
+
children: [
|
|
2174
|
+
leadingContent,
|
|
2175
|
+
children,
|
|
2176
|
+
trailingAfter
|
|
2177
|
+
]
|
|
2178
|
+
}
|
|
2179
|
+
);
|
|
2180
|
+
}
|
|
2181
|
+
);
|
|
2182
|
+
Button.displayName = "Button";
|
|
2183
|
+
|
|
2184
|
+
export { AiMarkIconAnimated as A, Button as B };
|
|
2185
|
+
//# sourceMappingURL=Button-BdrrhBTI.js.map
|