[
  {
    "path": ".editorconfig",
    "content": "# http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_style = space\nindent_size = 4\ninsert_final_newline = true\nmax_line_length = 120\ntrim_trailing_whitespace = true\n\n[{package.json,.travis.yml}]\nindent_style = space\nindent_size = 4\n\n[*.svelte]\nindent_style = space\nindent_size = 2\n"
  },
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\ngithub: daybrush # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]\npatreon: # Replace with a single Patreon username\nopen_collective: moveable # Replace with a single Open Collective username\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\notechie: # Replace with a single Otechie username\ncustom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE.md",
    "content": "## Environments\n* Framework name:\n* Framework version:\n* Moveable Component version:\n* Testable Address(optional):\n\n## Description\n<!-- Let me know your situation -->\n"
  },
  {
    "path": ".github/workflows/run-e2e.yml",
    "content": "name: Storybook Tests\non: [push, pull_request]\njobs:\n  test:\n    timeout-minutes: 60\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n            node-version: '16'\n            cache: 'yarn'\n      - name: restore lerna\n        uses: actions/cache@v3\n        id: cache-lerna\n        with:\n          path: |\n            **/node_modules\n            ~/.cache/ms-playwright\n          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}\n      - name: Install dependencies\n        if: steps.cache-lerna.outputs.cache-hit != 'true'\n        run: yarn --frozen-lockfile\n      - name: Run Storybook tests\n        run: yarn test:ci\n        working-directory: ./packages/react-moveable\n      - name: Run Original Storybok\n        if: ${{ failure() }}\n        run: yarn test:fail-ci\n        working-directory: ./packages/react-moveable\n      - name: Archive Failed Artifact\n        if: ${{ failure() }}\n        uses: actions/upload-artifact@v2\n        with:\n          name: failed snapshot\n          path: packages/react-moveable/__snapshots__\n\n\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules/\n*.DS_Store\n.DS_Store\ndoc/\n\ndemo/dist/\npackages/*/dist/\nrelease/\nnpm-debug.log*\ncoverage/\njsdoc/\ndoc/\noutjs/\ndeclaration/\nbuild/\n.vscode/\nrollup-plugin-visualizer/\nstatistics/\n.scene_cache\n*.mp4\nlerna-debug.log\ndemo/storybook\ndemo/storybook2\ndist/\n*.lerna_backup\ntest.js\n"
  },
  {
    "path": ".yarnrc",
    "content": "workspaces-experimental true\n"
  },
  {
    "path": "CHANGELOG-1.0.0.md",
    "content": "\n## [1.0.0] - 2022\n* `moveable` 1.0.0\n* `react-moveable` 1.0.0\n* `preact-moveable` 1.0.0\n* `ngx-moveable` 1.0.0\n* `svelte-moveable` 1.0.0\n\n### Added\n* Support Original Transform\n* Add `onBeforeRenderStart`, `onBeforeRender`, `onBeforeRenderEnd` events.\n* Add `onBeforeRenderGroupStart`, `onBeforeRenderGroup`, `onBeforeRenderGroupEnd` events.\n* Add `setTransform`, `setTransformIndex` event properties.\n* Expand the functions of `translate` and `rotate` properties.\n\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [0.53.0](https://github.com/daybrush/moveable/compare/0.52.0...0.53.0) (2023-12-03)\n### :sparkles: Packages\n* `croact-moveable` 0.9.0\n* `@moveable/helper` 0.1.3\n* `lit-moveable` 0.30.0\n* `moveable` 0.53.0\n* `preact-moveable` 0.55.0\n* `react-moveable` 0.56.0\n* `svelte-moveable` 0.45.0\n* `vue-moveable` 2.0.0-beta.87\n* `vue3-moveable` 0.28.0\n* `ngx-moveable` 0.50.0\n\n\n### :rocket: New Features\n\n* `react-moveable`, `ngx-moveable`\n    * expose gesto preventRightClick and preventWheelClick props (#1040) ([9f4c9f4](https://github.com/daybrush/moveable/commit/9f4c9f452470026ecea3f7a0b1aff91c22444868))\n* `react-moveable`\n    * add snapHorizontalThreshold, snapVerticalThreshold #1044 ([6cd5114](https://github.com/daybrush/moveable/commit/6cd51145ec81b3294c0ba9968d6530748ae46beb))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix dragTarget in control box #1054 ([f4e3232](https://github.com/daybrush/moveable/commit/f4e3232c787f50f9a9947c45307870e5ad5c87ef))\n    * fix names ([7722add](https://github.com/daybrush/moveable/commit/7722addf758da09480808f1e03c5b9e3061f855b))\n    * fix svg origin for viewbox and foreignbox #1048 ([6c27742](https://github.com/daybrush/moveable/commit/6c2774205077fa982bf140a413fdef1b6f2f8a7a))\n    * updateSelector's update #1055 ([fc9da03](https://github.com/daybrush/moveable/commit/fc9da032daa1c721cf47e3c97434f698849137ad))\n\n\n### :house: Code Refactoring\n\n* `react-moveable`, `moveable`\n    * let the target be passed into dragStart (#1050) ([786fc0c](https://github.com/daybrush/moveable/commit/786fc0cd4cb3f3f67719740aa953231b7d410815))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([f9a0eed](https://github.com/daybrush/moveable/commit/f9a0eed9db93c1fa3522138e9c7604287f0ce21f))\n* `react-moveable`, `croact-moveable`\n    * update gesto version ([4d12e48](https://github.com/daybrush/moveable/commit/4d12e484ea08bc1630c6a301b86c34a5d7a023c2))\n\n\n\n## [0.52.0](https://github.com/daybrush/moveable/compare/0.51.2...0.52.0) (2023-10-28)\n### :sparkles: Packages\n* `croact-moveable` 0.8.0\n* `@moveable/helper` 0.1.3\n* `lit-moveable` 0.29.0\n* `moveable` 0.52.0\n* `preact-moveable` 0.54.0\n* `react-moveable` 0.55.0\n* `svelte-moveable` 0.44.0\n* `vue-moveable` 2.0.0-beta.86\n* `vue3-moveable` 0.27.0\n* `ngx-moveable` 0.49.0\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add snapGridAll prop #990 ([7ecd0d0](https://github.com/daybrush/moveable/commit/7ecd0d04595b72b882a1a69a4676dc140bb9eb21))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix line break #1001 ([5f68143](https://github.com/daybrush/moveable/commit/5f68143289bd25c505d40684662a071b39417727))\n    * fix nested svg #1011 ([33366b5](https://github.com/daybrush/moveable/commit/33366b53c4871b1b7676c234168d1ef0cb0ba3c3))\n    * fix throttleDrag for group ([5f6d392](https://github.com/daybrush/moveable/commit/5f6d392f4731a4728b7e04e856d4a4805f7ac89b))\n    * fix width scale for keepRatio #1020 ([8dd5c36](https://github.com/daybrush/moveable/commit/8dd5c3613faac796021a6057d4a54ce660eac329))\n    * remove console.log ([56f99ea](https://github.com/daybrush/moveable/commit/56f99ea6652f23becfd88596d84194fcbaec2277))\n* `vue-moveable`\n    * fix vue-moveable exports #1028 ([809073d](https://github.com/daybrush/moveable/commit/809073d279d8ae33b430fff2f34097403510c7ca))\n* `svelte-moveable`\n    * support svelte 4.x #981 ([90e3f7f](https://github.com/daybrush/moveable/commit/90e3f7ff41cc7cffd44c792c2e6a7bffcfc19785))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([1a65454](https://github.com/daybrush/moveable/commit/1a654540f1390648d7e4db910d0673acff190007))\n\n\n\n## [0.51.2](https://github.com/daybrush/moveable/compare/0.51.1...0.51.2) (2023-09-19)\n### :sparkles: Packages\n* `croact-moveable` 0.7.2\n* `@moveable/helper` 0.1.3\n* `lit-moveable` 0.28.2\n* `moveable` 0.51.2\n* `preact-moveable` 0.53.2\n* `react-moveable` 0.54.2\n* `svelte-moveable` 0.43.3\n* `vue-moveable` 2.0.0-beta.85\n* `vue3-moveable` 0.26.2\n* `ngx-moveable` 0.48.2\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `moveable`\n    * fix roundable shadow condition ([adb09b7](https://github.com/daybrush/moveable/commit/adb09b7396271e7de7031c1d621d1232f3751a9b))\n* `svelte-moveable`\n    * add svelte 4 as a compatible dependency (#1005) ([266872c](https://github.com/daybrush/moveable/commit/266872c641dce8d2a2c06e50ac972e116099285a))\n* `react-moveable`\n    * fix scrollable infinite loop #1015 ([b725981](https://github.com/daybrush/moveable/commit/b725981982ceed7914b14be8e5ee7908d5ab6e22))\n    * support transform-box: fill-box (#1012) ([7a0ed4d](https://github.com/daybrush/moveable/commit/7a0ed4d8dd5463a85298860d6924b3bd132be8a6))\n* `vue-moveable`\n    * fix vue-moveable rollup verseion #1013 ([5d81006](https://github.com/daybrush/moveable/commit/5d81006a003b4c39811263144b110eb9d960a965))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([ecf15ab](https://github.com/daybrush/moveable/commit/ecf15ab399bb4d9f6752cb84b0d6b06d15e5c426))\n* `svelte-moveable`\n    * update svelte-moveable version ([377f618](https://github.com/daybrush/moveable/commit/377f6186c9478c294a05cf830d7a0930eec0436a))\n\n\n\n## [0.51.1](https://github.com/daybrush/moveable/compare/0.51.0...0.51.1) (2023-07-11)\n### :sparkles: Packages\n* `croact-moveable` 0.7.1\n* `@moveable/helper` 0.1.3\n* `lit-moveable` 0.28.1\n* `moveable` 0.51.1\n* `preact-moveable` 0.53.1\n* `react-moveable` 0.54.1\n* `svelte-moveable` 0.43.1\n* `vue-moveable` 2.0.0-beta.83\n* `vue3-moveable` 0.26.1\n* `ngx-moveable` 0.48.1\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix individual transforms for 2d #969 ([7e205f4](https://github.com/daybrush/moveable/commit/7e205f47c239993029de250d7848fc198261a5e3))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([27bda8e](https://github.com/daybrush/moveable/commit/27bda8ea3d9751847fc073519a832b3464242d3c))\n\n\n\n## [0.51.0](https://github.com/daybrush/moveable/compare/0.50.2...0.51.0) (2023-07-09)\n### :sparkles: Packages\n* `croact-moveable` 0.7.0\n* `@moveable/helper` 0.1.3\n* `lit-moveable` 0.28.0\n* `moveable` 0.51.0\n* `preact-moveable` 0.53.0\n* `react-moveable` 0.54.0\n* `svelte-moveable` 0.43.0\n* `vue-moveable` 2.0.0-beta.82\n* `vue3-moveable` 0.26.0\n* `ngx-moveable` 0.48.0\n\n\n### :rocket: New Features\n\n* `react-moveable`, `moveable`\n    * add `onBound` event #970 ([c9db51f](https://github.com/daybrush/moveable/commit/c9db51f8ef5f7a0d262323e381ec25ad5bfc391d))\n* `react-moveable`\n    * add dragTargetSelf prop #972 ([4537dfe](https://github.com/daybrush/moveable/commit/4537dfea5ba1652188b026b6bffead4737c36572))\n    * add elementDirection property in guideline #949 ([1073ebc](https://github.com/daybrush/moveable/commit/1073ebcf1302259ce3c54ee744a76b1e85c88f1f))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix watchValue ([644f19c](https://github.com/daybrush/moveable/commit/644f19cb640415ee11072cfecbea4811ff2de327))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([25cae7f](https://github.com/daybrush/moveable/commit/25cae7f46aa28dcb948a8690fd6062b7e15d72ff))\n\n\n\n## [0.50.2](https://github.com/daybrush/moveable/compare/0.50.1...0.50.2) (2023-07-04)\n### :sparkles: Packages\n* `croact-moveable` 0.6.2\n* `@moveable/helper` 0.1.3\n* `lit-moveable` 0.27.2\n* `moveable` 0.50.2\n* `preact-moveable` 0.52.2\n* `react-moveable` 0.53.2\n* `svelte-moveable` 0.42.2\n* `vue-moveable` 2.0.0-beta.81\n* `vue3-moveable` 0.25.2\n* `ngx-moveable` 0.47.2\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * support individual transform #969 ([1b58541](https://github.com/daybrush/moveable/commit/1b585412ea1c909bfbdcf094ecdde21024d895a0))\n    * support react18 strict mode #962 ([710f019](https://github.com/daybrush/moveable/commit/710f0190bd072804a224e715e353ff55e3427095))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([9467cf4](https://github.com/daybrush/moveable/commit/9467cf45fd2871573df8886eb134c67a8b0f916d))\n\n\n\n## [0.50.1](https://github.com/daybrush/moveable/compare/0.49.1...0.50.1) (2023-07-02)\n### :sparkles: Packages\n* `croact-moveable` 0.6.1\n* `@moveable/helper` 0.1.3\n* `lit-moveable` 0.27.1\n* `moveable` 0.50.1\n* `preact-moveable` 0.52.1\n* `react-moveable` 0.53.1\n* `svelte-moveable` 0.42.1\n* `vue-moveable` 2.0.0-beta.80\n* `vue3-moveable` 0.25.1\n* `ngx-moveable` 0.47.1\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add `getMoveables` with request #940 ([b926985](https://github.com/daybrush/moveable/commit/b92698522e1b6f20e40ba7d82560d00d3c6a6a97))\n    * support dragStart with individualGroupable #967 ([d470f64](https://github.com/daybrush/moveable/commit/d470f64a45362a8183d2f1ab572a50bc4d9f2b5e))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `moveable`\n    * fix choppy reisze #961 ([c8f9637](https://github.com/daybrush/moveable/commit/c8f9637ae319870cc6d4e9bf68eb98820f27f25e))\n    * fix group's dragTargetRef #953 ([85d17d7](https://github.com/daybrush/moveable/commit/85d17d77751d474db88b7238dd39baccd6b7a78d))\n* `react-moveable`\n    * fix translate(-50%, -50%) #963 ([6577ee9](https://github.com/daybrush/moveable/commit/6577ee9707246eb0f59e1bb685d96277f8feaa6d))\n    * individualGroupable request #967 ([daf6008](https://github.com/daybrush/moveable/commit/daf60087a82858d18ee260645e96ebb363b073de))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([5697e80](https://github.com/daybrush/moveable/commit/5697e8050f486a83ea409b856d1f670759ba6910))\n    * publish packages ([5e76998](https://github.com/daybrush/moveable/commit/5e76998ba0a90efcbb0c2e4fe8030ca47a1842d4))\n\n\n\n## [0.49.1](https://github.com/daybrush/moveable/compare/0.49.0...0.49.1) (2023-06-28)\n### :sparkles: Packages\n* `croact-moveable` 0.5.1\n* `@moveable/helper` 0.1.3\n* `lit-moveable` 0.26.1\n* `moveable` 0.49.1\n* `preact-moveable` 0.51.1\n* `react-moveable` 0.52.1\n* `svelte-moveable` 0.41.1\n* `vue-moveable` 2.0.0-beta.78\n* `vue3-moveable` 0.24.1\n* `ngx-moveable` 0.46.1\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `moveable`\n    * fix dragTarget's unset #960 ([8e60b38](https://github.com/daybrush/moveable/commit/8e60b385b8931a3aab953b315618ec15f9360611))\n* `react-moveable`\n    * fix helper alias ([ee5bf0b](https://github.com/daybrush/moveable/commit/ee5bf0b958a49694e4eed111755d1ef5ba5c6dc9))\n\n\n### :memo: Documentation\n\n* update CHANGELOG.md (#959) ([145d5a3](https://github.com/daybrush/moveable/commit/145d5a3abfc2e6e1823a889eba528c77cb761afa))\n\n\n### :house: Code Refactoring\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`\n    * change rollup to vite ([213f346](https://github.com/daybrush/moveable/commit/213f346257289eaec6f3f6f618e8fba33859c384))\n* `ngx-moveable`\n    * update angular 15 version, use standalone ([226ea64](https://github.com/daybrush/moveable/commit/226ea643cb5c12315fc96e334a4bfa920f78d8aa))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`, `@moveable/helper`\n    * fix update modules ([bb608dc](https://github.com/daybrush/moveable/commit/bb608dc0d1d9eb13e538d1026c05809d89757b1d))\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([510d7cd](https://github.com/daybrush/moveable/commit/510d7cdf76eef4a17cc75d95634ebcb6d9688f8e))\n* `react-moveable`\n    * fix ts-loader version ([429ae5f](https://github.com/daybrush/moveable/commit/429ae5faa48fa9bedfc2463c1aaaebc58575bf80))\n\n\n\n## [0.49.0](https://github.com/daybrush/moveable/compare/0.48.0...0.49.0) (2023-06-25)\n### :sparkles: Packages\n* `croact-moveable` 0.5.0\n* `@moveable/helper` 0.1.3\n* `lit-moveable` 0.26.0\n* `moveable` 0.49.0\n* `preact-moveable` 0.51.0\n* `react-moveable` 0.52.0\n* `svelte-moveable` 0.41.0\n* `vue-moveable` 2.0.0-beta.77\n* `vue3-moveable` 0.24.0\n* `ngx-moveable` 0.46.0\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add direction on snap event #949 ([69312fd](https://github.com/daybrush/moveable/commit/69312fd6eb0c3ca48f446bcc680f91abab189dfd))\n    * export matrixes in getElementInfo ([c1aad6a](https://github.com/daybrush/moveable/commit/c1aad6a0aa19c9f5060fe9d9c3277c95a0ad2c5f))\n    * setMin, setMax scale size in onScaleStart ([ea4cd95](https://github.com/daybrush/moveable/commit/ea4cd9527cd599fec9f211f0713dbccb9e2ec343))\n    * support multiple dragTarget type #953 ([4a347d2](https://github.com/daybrush/moveable/commit/4a347d2b7f36570ba882cfe7894207210650d3ec))\n    * support snappable in request #954 ([863ad42](https://github.com/daybrush/moveable/commit/863ad42876e08c0e1cea6324e241dba0d6842946))\n* `@moveable/helper`\n    * add group, ungroup in helper ([8434ed1](https://github.com/daybrush/moveable/commit/8434ed19853a158739b3e9b936d63825c6824c96))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `ngx-moveable`\n    * fix props and event types missing #941 ([bd91b08](https://github.com/daybrush/moveable/commit/bd91b08ba04a50644e3d1ed91729563260b5a01b))\n    * fix typo (degress => degrees) #928 ([835be5b](https://github.com/daybrush/moveable/commit/835be5be701c8b3740ff9dfc16101a9b9ed60cbb))\n* `react-moveable`\n    * bump react-selecto version ([c3eb9c7](https://github.com/daybrush/moveable/commit/c3eb9c7e52e7144f7accdd8298cd44e00b092d0f))\n    * fix isRequest naming ([fb90fbd](https://github.com/daybrush/moveable/commit/fb90fbddc94698cf9c88b1e9d8b54a8182f03d88))\n    * fix max scale size ([9cd9761](https://github.com/daybrush/moveable/commit/9cd9761ad109bd941ef474d7af940dbc086251a2))\n    * fix padding for scalized target #951 ([70d938f](https://github.com/daybrush/moveable/commit/70d938fe3255ae5f4cc875c9213412ad5ad09740))\n    * fix ResizeObserver, MutationObserver contexts ([71152cb](https://github.com/daybrush/moveable/commit/71152cbb055b0148ebf501d9156b9af6a542fc69))\n    * fix scalable group's negative scale dist #950 ([f4bb504](https://github.com/daybrush/moveable/commit/f4bb504d7f7f537d63f44f74a90f0cbe59886a16))\n    * support useMutationObserver in Group ([def4db3](https://github.com/daybrush/moveable/commit/def4db354db052379789cfc7e342d36f7b781699))\n* `croact-moveable`\n    * fix croact peerDependencies  #937 ([6554cc7](https://github.com/daybrush/moveable/commit/6554cc7828a5ed5f883d0f9bc35ecd913795dd84))\n* `@moveable/helper`\n    * fix helper rollup config ([c8ee6a7](https://github.com/daybrush/moveable/commit/c8ee6a7b78f7bbb4606b997d1fdae2ebc2d8ff21))\n* `ngx-moveable`\n    * **ngx-moveable:** reduce change detection cycles (#939) ([b8ff60c](https://github.com/daybrush/moveable/commit/b8ff60cfda90aac4a5420c3620f798a8a184cdb9))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([f893cca](https://github.com/daybrush/moveable/commit/f893ccaa176d31ef9ddb241d2cd4a1fb098cdae0))\n* `react-moveable`\n    * bump croffle version ([0a0cb93](https://github.com/daybrush/moveable/commit/0a0cb931bff2d4cdb7809351212f83cd59fd047c))\n\n\n\n## [0.48.0](https://github.com/daybrush/moveable/compare/0.47.9...0.48.0) (2023-06-04)\n### :sparkles: Packages\n* `croact-moveable` 0.4.0\n* `@moveable/helper` 0.1.2\n* `lit-moveable` 0.25.0\n* `moveable` 0.48.0\n* `preact-moveable` 0.50.0\n* `react-moveable` 0.51.0\n* `svelte-moveable` 0.40.0\n* `vue-moveable` 2.0.0-beta.76\n* `vue3-moveable` 0.23.0\n* `ngx-moveable` 0.45.0\n\n\n### :rocket: New Features\n\n* `react-moveable`, `moveable`, `croact-moveable`\n    * support drag api #920 ([8f1a839](https://github.com/daybrush/moveable/commit/8f1a8396c429cf108da5417bc36cccd3ef46013c))\n* `react-moveable`, `ngx-moveable`\n    * add useDefaultGroupRotate prop #929 ([5846e50](https://github.com/daybrush/moveable/commit/5846e50c18dc2e1aa628e41a8d235ee4851325db))\n* `react-moveable`\n    * add hideThrottleDragRotateLine prop #923 ([e091d39](https://github.com/daybrush/moveable/commit/e091d396f2436ef0ad8d8dfa8922dcd86ec08bfd))\n    * add isDisplayGridGuidelines prop #935 ([589bb9d](https://github.com/daybrush/moveable/commit/589bb9d888b99768be153a8c0a8dc89ec3fe238a))\n    * add snapRotationThreshold, snapRotationDegress #928 ([d63283c](https://github.com/daybrush/moveable/commit/d63283c604d3aea9e4f60f8c72f64c2fa2cde0e9))\n    * add transformObject property in render events #933 ([317ddde](https://github.com/daybrush/moveable/commit/317ddde1e65a2104b0c05ec331d5f468a85fb0b8))\n* `svelte-moveable`\n    * support svelte type ([2022d49](https://github.com/daybrush/moveable/commit/2022d49ae2ebf5daaf21edb4043a557ff3f6eac5))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`, `@moveable/helper`\n    * support iframe context #932 ([3e87cc7](https://github.com/daybrush/moveable/commit/3e87cc7fed43160ca342630fed2f413876f8a518))\n* `react-moveable`, `preact-moveable`, `croact-moveable`\n    * fix ownerDocument css #932 ([76a852a](https://github.com/daybrush/moveable/commit/76a852ade3ffb41a1b246649945994f50e52b1f0))\n* `react-moveable`, `lit-moveable`, `croact-moveable`\n    * support iframe #932 ([15abedb](https://github.com/daybrush/moveable/commit/15abedb5f5770b8380d0b6ebedbc4ab7834cb9e8))\n* `react-moveable`\n    * add defense code for `.stopDrag` #930 ([be743bc](https://github.com/daybrush/moveable/commit/be743bcb1ab211a647da4d53f7d34570e25ac4be))\n    * fix bounds keepRatio sign #924 ([8ccc8fd](https://github.com/daybrush/moveable/commit/8ccc8fdfbf71079417194f1b1dbef9a797726788))\n    * fix keepRatio for zero scale #927 ([7b936ac](https://github.com/daybrush/moveable/commit/7b936ac77eb8e48d1f736e2a4dd0141946d3d968))\n    * support iframe #932 ([7b4cbad](https://github.com/daybrush/moveable/commit/7b4cbad8548e717f6ec31c14f939cbdfaffb650c))\n* `vue-moveable`\n    * fix vue prerelease ([ad7ea7c](https://github.com/daybrush/moveable/commit/ad7ea7ce85c79f6283b668228eb68358a05c4f3e))\n* `ngx-moveable`\n    * support angular 16 ([d41af9c](https://github.com/daybrush/moveable/commit/d41af9c141785c272eb4148270feb8dc11e5d46c))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * update packages ([8d65572](https://github.com/daybrush/moveable/commit/8d65572384ae0fdff288fe78fbeb5d249b070eb7))\n* `svelte-moveable`, `ngx-moveable`\n    * update packages ([9e137aa](https://github.com/daybrush/moveable/commit/9e137aa7455fdf85766ca1ff77dd3d8ea2a4c1c9))\n\n\n\n## [0.47.9](https://github.com/daybrush/moveable/compare/0.47.8...0.47.9) (2023-05-16)\n### :sparkles: Packages\n* `croact-moveable` 0.3.8\n* `@moveable/helper` 0.1.2\n* `lit-moveable` 0.24.9\n* `moveable` 0.47.9\n* `preact-moveable` 0.49.7\n* `react-moveable` 0.50.7\n* `svelte-moveable` 0.39.9\n* `vue-moveable` 2.0.0-beta.75\n* `vue3-moveable` 0.22.9\n* `ngx-moveable` 0.44.9\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `preact-moveable`, `croact-moveable`\n    * fix css-styled version #916 ([875fc19](https://github.com/daybrush/moveable/commit/875fc19fa7fac50cbbb3166dfaa512b18f7c790d))\n* `react-moveable`\n    * occur unset for idle state #917 ([a9d1de8](https://github.com/daybrush/moveable/commit/a9d1de80fd7f48957fd730d577105d64c5a54fe3))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([5bd22bb](https://github.com/daybrush/moveable/commit/5bd22bb009e10a4f8032f35c2ae3b490f4d94e5b))\n\n\n\n## [0.47.8](https://github.com/daybrush/moveable/compare/0.47.7...0.47.8) (2023-05-15)\n### :sparkles: Packages\n* `croact-moveable` 0.3.7\n* `@moveable/helper` 0.1.2\n* `lit-moveable` 0.24.8\n* `moveable` 0.47.8\n* `preact-moveable` 0.49.6\n* `react-moveable` 0.50.6\n* `svelte-moveable` 0.39.8\n* `vue-moveable` 2.0.0-beta.74\n* `vue3-moveable` 0.22.8\n* `ngx-moveable` 0.44.8\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add drag api demo ([7c46df1](https://github.com/daybrush/moveable/commit/7c46df1c3026b5d836bc082e5e1dc2cdd093b77c))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `preact-moveable`, `moveable`, `croact-moveable`\n    * update croact, css-styled version #916 ([b517b64](https://github.com/daybrush/moveable/commit/b517b6498a612c072eadc9354d6383363771ea6d))\n* `react-moveable`\n    * add defense logic for added element on dragStart #917 ([ef37c3b](https://github.com/daybrush/moveable/commit/ef37c3b6775fdfc8baa365bc793fe264c5a79764))\n    * fix controlPadding  #918 ([685c459](https://github.com/daybrush/moveable/commit/685c4598deff805e0e952a1095ab3305a39a22c8))\n    * fix initial gestos ([84afabb](https://github.com/daybrush/moveable/commit/84afabb1af183a231b6b70b5b6a2904cd981706e))\n    * fix line, control padding appearing #919 ([63b9ecd](https://github.com/daybrush/moveable/commit/63b9ecd6fc83314216f1d29c57c22ded27d8098e))\n    * fix not initialized target #917 ([f291bf3](https://github.com/daybrush/moveable/commit/f291bf3f615e6daedb5da01ff16a42f43a39d441))\n    * unset gesto when target changed #917 ([9d6c0d7](https://github.com/daybrush/moveable/commit/9d6c0d7c7f4b24b936d3ea9fa996dc536c84f816))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([91aa8bc](https://github.com/daybrush/moveable/commit/91aa8bc1bdefc65cde8c032f1c7ba13ca54ad2fa))\n\n\n\n## [0.47.7](https://github.com/daybrush/moveable/compare/0.47.6...0.47.7) (2023-05-09)\n### :sparkles: Packages\n* `croact-moveable` 0.3.6\n* `@moveable/helper` 0.1.2\n* `lit-moveable` 0.24.7\n* `moveable` 0.47.7\n* `preact-moveable` 0.49.5\n* `react-moveable` 0.50.5\n* `svelte-moveable` 0.39.7\n* `vue-moveable` 2.0.0-beta.73\n* `vue3-moveable` 0.22.7\n* `ngx-moveable` 0.44.7\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `moveable`\n    * fix missing type #911 ([0f26c75](https://github.com/daybrush/moveable/commit/0f26c75261fe8996f8b1317ec2da473a9feb57d0))\n* `react-moveable`\n    * fix svg group #914 ([9be5170](https://github.com/daybrush/moveable/commit/9be5170b14215bf76e29830136046cb358461f17))\n\n\n### :memo: Documentation\n\n* `react-moveable`\n    * fix README #913 ([337e36a](https://github.com/daybrush/moveable/commit/337e36a422fa1e2d5f96c0426957f6be401e8248))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([40dd902](https://github.com/daybrush/moveable/commit/40dd9022c41244ab009d621861ddc2ac63768748))\n\n\n\n## [0.47.6](https://github.com/daybrush/moveable/compare/0.47.0...0.47.6) (2023-05-08)\n### :sparkles: Packages\n* `croact-moveable` 0.3.5\n* `@moveable/helper` 0.1.2\n* `lit-moveable` 0.24.6\n* `moveable` 0.47.6\n* `preact-moveable` 0.49.4\n* `react-moveable` 0.50.4\n* `svelte-moveable` 0.39.6\n* `vue-moveable` 2.0.0-beta.72\n* `vue3-moveable` 0.22.6\n* `ngx-moveable` 0.44.6\n\n\n### :rocket: New Features\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * update croact version #902 ([e328e21](https://github.com/daybrush/moveable/commit/e328e2170438fe27f60f307ae976183fbfb5e96e))\n\n\n### :bug: Bug Fix\n\n* All\n    * fix files filed #910 #909 #907 ([a4995ab](https://github.com/daybrush/moveable/commit/a4995ab1acb3a34974e1d5a20d17fb2ee17ddc0c))\n* `react-moveable`, `croact-moveable`\n    * fix dragFocusedInput #896 ([94cb92d](https://github.com/daybrush/moveable/commit/94cb92d239846ef7a45c0ea2f4ceec0ec2e3b4ac))\n* `react-moveable`\n    * add dragFcousedInput prop ([e96f9fc](https://github.com/daybrush/moveable/commit/e96f9fc80493696fdbb94047e9375a8d991da05b))\n\n\n### :memo: Documentation\n\n* `react-moveable`\n    * fix dragFcousedInput story ([2b78a4e](https://github.com/daybrush/moveable/commit/2b78a4e276000ab017396a94d1502a4c94b8ef70))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([d0f0532](https://github.com/daybrush/moveable/commit/d0f0532bfb42fe98ee95748839a639fddbe4b9d6))\n    * publish packages ([e1e86a9](https://github.com/daybrush/moveable/commit/e1e86a95ebff9d18ad7a5ebede3bd5bd66465b5d))\n    * publish packages ([60a747e](https://github.com/daybrush/moveable/commit/60a747ee3c373f83fb759a8482e2365e77dcb5e8))\n\n\n\n## [0.47.0](https://github.com/daybrush/moveable/compare/0.46.1...0.47.0) (2023-05-01)\n### :sparkles: Packages\n* `croact-moveable` 0.3.0\n* `@moveable/helper` 0.1.2\n* `lit-moveable` 0.24.0\n* `moveable` 0.47.0\n* `preact-moveable` 0.49.0\n* `react-moveable` 0.50.0\n* `svelte-moveable` 0.39.0\n* `vue-moveable` 2.0.0-beta.66\n* `vue3-moveable` 0.22.0\n* `ngx-moveable` 0.44.0\n\n\n### :rocket: New Features\n\n* `react-moveable`, `croact-moveable`\n    * add dragFocusedInput prop #896 ([a29c9de](https://github.com/daybrush/moveable/commit/a29c9de3d9371a3cd7406432dcdd437168d42fdb))\n* `react-moveable`\n    * add svgOrigin prop #894 ([619d57d](https://github.com/daybrush/moveable/commit/619d57dc00c96c50fba77709526e6d3f48c0654a))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix element guidelines for group #900 ([d42c032](https://github.com/daybrush/moveable/commit/d42c0325d78150f18d07b33b6a20c02d98ee4b97))\n    * fix fixedOffset ([a00ab2a](https://github.com/daybrush/moveable/commit/a00ab2ae05b802aeb8850b4b9a87e6600f17b8fb))\n    * fix invidualGroup's mount code #905 ([d2388e5](https://github.com/daybrush/moveable/commit/d2388e54e75ae3e2de5896b8f7018b4e2a5a0963))\n    * fix snapGrid's offset #897 ([97d89de](https://github.com/daybrush/moveable/commit/97d89de0ee14ecc7d4f9b8d1c750fbb5db91730e))\n    * prevent multitouch for target and control #898 ([0b4d328](https://github.com/daybrush/moveable/commit/0b4d3287de5da268132fdcd0bf0781a3f8d0902f))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([24934e3](https://github.com/daybrush/moveable/commit/24934e317de2e5ff622bd9ab0dec8d75a7c05c48))\n* `moveable`, `croact-moveable`\n    * update croact 1.0.1 #902 ([34433f3](https://github.com/daybrush/moveable/commit/34433f3ab1266fff29f1f74bf6a5176d238348b6))\n\n\n\n## [0.46.1](https://github.com/daybrush/moveable/compare/0.46.0...0.46.1) (2023-04-16)\n### :sparkles: Packages\n* `croact-moveable` 0.2.1\n* `@moveable/helper` 0.1.2\n* `lit-moveable` 0.23.1\n* `moveable` 0.46.1\n* `preact-moveable` 0.48.1\n* `react-moveable` 0.49.2\n* `svelte-moveable` 0.38.1\n* `vue-moveable` 2.0.0-beta.65\n* `vue3-moveable` 0.21.1\n* `ngx-moveable` 0.43.1\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `croact-moveable`\n    * fix pinchable's operation #892 ([f4d8df3](https://github.com/daybrush/moveable/commit/f4d8df3f81f69f0c00e2b865e6f3368ee9795b01))\n* `react-moveable`\n    * fix 0.2 guideline offset delta  #888 ([d85c041](https://github.com/daybrush/moveable/commit/d85c0414d55e08b3669e3f88bb10c301cc99c59c))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([a623eda](https://github.com/daybrush/moveable/commit/a623eda2702067397159742dd0c6ed16b99bbe22))\n\n\n\n## [0.46.0](https://github.com/daybrush/moveable/compare/0.45.0...0.46.0) (2023-04-13)\n### :sparkles: Packages\n* `croact-moveable` 0.2.0\n* `@moveable/helper` 0.1.2\n* `lit-moveable` 0.23.0\n* `moveable` 0.46.0\n* `preact-moveable` 0.48.0\n* `react-moveable` 0.49.0\n* `svelte-moveable` 0.38.0\n* `vue-moveable` 2.0.0-beta.64\n* `vue3-moveable` 0.21.0\n* `ngx-moveable` 0.43.0\n\n\n### :rocket: New Features\n\n* `react-moveable`, `preact-moveable`, `moveable`, `croact-moveable`\n    * add croact ([b94c41c](https://github.com/daybrush/moveable/commit/b94c41c50cdf37da0136bd4d04f2237529253f45))\n    * add croact compat ([233c6d0](https://github.com/daybrush/moveable/commit/233c6d0a905953b51c3fd5df1f7c58e7b1d03432))\n* `react-moveable`\n    * add string guideline pos #884 ([2036328](https://github.com/daybrush/moveable/commit/20363284f0ab6b7a38c042283cd55e7cbc528809))\n    * support scale css property #891 ([28c4226](https://github.com/daybrush/moveable/commit/28c4226e9566067c14399a59d728babf692fcfc8))\n\n\n### :bug: Bug Fix\n\n* `vue-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `@moveable/helper`\n    * fix warpSelf ([8c86a3f](https://github.com/daybrush/moveable/commit/8c86a3f95e5d0b8832b1d9b65bf72f598eb8d0cb))\n* `react-moveable`\n    * fix delta offset for element guidelines #888 ([526bec1](https://github.com/daybrush/moveable/commit/526bec100ab5b45a61a88a50fa2931cf7c2841a2))\n    * fix github workflow ([0fd81b8](https://github.com/daybrush/moveable/commit/0fd81b8e43dca21086c9f00a5c3a9ac13eabf410))\n    * fix Scalable's keepRatio calculation #887 ([680c161](https://github.com/daybrush/moveable/commit/680c16181791b4764e7c31a14684c83575f8ab6b))\n    * fix vertical guidelines ([1abcc37](https://github.com/daybrush/moveable/commit/1abcc3785caf0db184649508eb63f14bde7291c4))\n    * resolve transform matrix ([090e1b2](https://github.com/daybrush/moveable/commit/090e1b26c1e2d9ff742c50f9e8e901378e5969f9))\n* `svelte-moveable`\n    * fix svelte main field #886 ([e5a5f25](https://github.com/daybrush/moveable/commit/e5a5f254e3d053f7f26d46cffeac970b98636b01))\n* `vue3-moveable`\n    * fix vue3 type ([d980b35](https://github.com/daybrush/moveable/commit/d980b3579572d150b27736e81ca7ba2580ee0a8a))\n* Other\n    * fix cache ([b9b9446](https://github.com/daybrush/moveable/commit/b9b9446be66fba48a142489fbe500613cb528570))\n    * fix github cache workflow ([b0357d7](https://github.com/daybrush/moveable/commit/b0357d7044003522ddfe90cd2b1145300040610c))\n    * fix github workflow ([78918ad](https://github.com/daybrush/moveable/commit/78918adc54ae9c8f4c5f03af1955132e2dc4c4f6))\n    * fix github workflow ([8bc059e](https://github.com/daybrush/moveable/commit/8bc059e68086132f1d0dea659de3ebc39caa6b87))\n    * fix github workflow ([ee8a78b](https://github.com/daybrush/moveable/commit/ee8a78b7faaff1c3e1007dba99f2340e62738513))\n    * fix playwright cache ([d132c57](https://github.com/daybrush/moveable/commit/d132c57db65612f3c7bb990805a3197043c8ba95))\n    * fix typo ([ca36eda](https://github.com/daybrush/moveable/commit/ca36eda8289bda7b7d3201746db50a120c6aafa2))\n    * fix workflow ([a0de6d9](https://github.com/daybrush/moveable/commit/a0de6d9fce6c6c1f9711709a642cc718860717cc))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`, `croact-moveable`\n    * publish packages ([1177427](https://github.com/daybrush/moveable/commit/11774277bafd9c60e9cef3c9a6fa38a3e1c4077d))\n\n\n\n## [0.45.0](https://github.com/daybrush/moveable/compare/0.44.4...0.45.0) (2023-03-26)\n### :sparkles: Packages\n* `@moveable/helper` 0.1.2\n* `lit-moveable` 0.22.0\n* `moveable` 0.45.0\n* `preact-moveable` 0.47.0\n* `react-compat-moveable` 0.33.0\n* `react-moveable` 0.48.0\n* `svelte-moveable` 0.37.0\n* `vue-moveable` 2.0.0-beta.63\n* `vue3-moveable` 0.20.0\n* `ngx-moveable` 0.42.0\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add useMutationObserver prop #869 ([f3a9ee4](https://github.com/daybrush/moveable/commit/f3a9ee46144bfe0e0be37b7c8a086d70a9ffb5db))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix individualGroupable #867 ([6d98f76](https://github.com/daybrush/moveable/commit/6d98f76bdb3bdc94ce99495c5729ebb706038e6c))\n\n\n### :memo: Documentation\n\n* `react-moveable`\n    * fix container docs ([295d905](https://github.com/daybrush/moveable/commit/295d905cac0db04b6fa9301573c99ce1366a16ae))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([7580d27](https://github.com/daybrush/moveable/commit/7580d272fe857aadfbdbc9df264e0a413dd56588))\n\n\n\n## [0.44.4](https://github.com/daybrush/moveable/compare/0.44.3...0.44.4) (2023-03-21)\n### :sparkles: Packages\n* `@moveable/helper` 0.1.2\n* `lit-moveable` 0.21.4\n* `moveable` 0.44.4\n* `preact-moveable` 0.46.3\n* `react-compat-moveable` 0.32.4\n* `react-moveable` 0.47.3\n* `svelte-moveable` 0.36.4\n* `vue-moveable` 2.0.0-beta.62\n* `vue3-moveable` 0.19.4\n* `ngx-moveable` 0.41.4\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix infinite loop (#873) ([179f950](https://github.com/daybrush/moveable/commit/179f95047d1aeae8d7bb2275ea0ab980feded486))\n* `lit-moveable`\n    * update lit version ([32db849](https://github.com/daybrush/moveable/commit/32db8497e3548daa4226aa56aae4e051ab2884b3))\n\n\n### :memo: Documentation\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`\n    * fix README ([7426492](https://github.com/daybrush/moveable/commit/7426492de210ab6f38d411d96e6d843d7423f555))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([ae54ef4](https://github.com/daybrush/moveable/commit/ae54ef4c660ae789867e4286990f234cc808a379))\n* Other\n    * fix github workflow build step ([3a70df4](https://github.com/daybrush/moveable/commit/3a70df4367b87166fd51345255490b09cc64373b))\n    * fix github workflows ([faf0a40](https://github.com/daybrush/moveable/commit/faf0a40ba74316e4515a8a69c6bef84947e2696a))\n\n\n\n## [0.44.3](https://github.com/daybrush/moveable/compare/0.44.2...0.44.3) (2023-03-14)\n### :sparkles: Packages\n* `@moveable/helper` 0.1.2\n* `lit-moveable` 0.21.3\n* `moveable` 0.44.3\n* `preact-moveable` 0.46.2\n* `react-compat-moveable` 0.32.3\n* `react-moveable` 0.47.2\n* `svelte-moveable` 0.36.3\n* `vue-moveable` 2.0.0-beta.61\n* `vue3-moveable` 0.19.3\n* `ngx-moveable` 0.41.3\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix chromium agent (#864) ([04ffe64](https://github.com/daybrush/moveable/commit/04ffe641c5383e2c992c06196d454967bdbd1e8a))\n    * fix groupable moveables' calculation ([cd9970e](https://github.com/daybrush/moveable/commit/cd9970e9a9bf3d942bc76182e40121399346894e))\n\n\n### :memo: Documentation\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`\n    * fix story url ([8977306](https://github.com/daybrush/moveable/commit/897730620480d8e830c4b53401a28d03b42b9a5f))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * update packages ([5b03d09](https://github.com/daybrush/moveable/commit/5b03d09a0cd298d47597fc8c8c9c6fdd4cd5a267))\n* `react-moveable`\n    * fix ga id ([b034af5](https://github.com/daybrush/moveable/commit/b034af5f04d45c9ff3035451265773cac1334222))\n    * fix test  runner config ([6f6e585](https://github.com/daybrush/moveable/commit/6f6e5856773bccfb681dade0a2297e59338b8787))\n* Other\n    * fix github actions workflow ([fd9b213](https://github.com/daybrush/moveable/commit/fd9b213c7bdc0a9c36db4ccd47b7b038f9718cb4))\n\n\n\n## [0.44.2](https://github.com/daybrush/moveable/compare/0.44.0...0.44.2) (2023-03-10)\n### :sparkles: Packages\n* `@moveable/helper` 0.1.2\n* `lit-moveable` 0.21.2\n* `moveable` 0.44.2\n* `preact-moveable` 0.46.1\n* `react-compat-moveable` 0.32.2\n* `react-moveable` 0.47.1\n* `svelte-moveable` 0.36.2\n* `vue-moveable` 2.0.0-beta.60\n* `vue3-moveable` 0.19.2\n* `ngx-moveable` 0.41.2\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix chromium agent #847 ([f6a703b](https://github.com/daybrush/moveable/commit/f6a703b8286b25ec88e397f3363db6c69777fd72))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([5589402](https://github.com/daybrush/moveable/commit/55894029a463f96a1f42827330b092be3fb63bf2))\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-compat-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * update packages #856 #847 ([a78c8e3](https://github.com/daybrush/moveable/commit/a78c8e3c7ff8c3eb347a7617ddc76c807b57633e))\n\n\n\n## [0.44.0](https://github.com/daybrush/moveable/compare/0.43.1...0.44.0) (2023-03-08)\n### :sparkles: Packages\n* `@moveable/helper` 0.1.2\n* `lit-moveable` 0.21.0\n* `moveable` 0.44.0\n* `preact-moveable` 0.46.0\n* `react-compat-moveable` 0.32.0\n* `react-moveable` 0.47.0\n* `svelte-moveable` 0.36.0\n* `vue-moveable` 2.0.0-beta.58\n* `vue3-moveable` 0.19.0\n* `ngx-moveable` 0.41.0\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add `preventDefault` prop #821 ([b599e32](https://github.com/daybrush/moveable/commit/b599e32aee6f3dfe10fec348c200bb1b4a0983d2))\n    * add displayAroundControls, controlPadding #837 ([9ee0c72](https://github.com/daybrush/moveable/commit/9ee0c7251daae929e5ec71a9cd5c61a473c44496))\n    * add individualGroupableProps props #848 ([079e752](https://github.com/daybrush/moveable/commit/079e75261de5cf8163ced482e1f7171ae8705823))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * custom element offset with chrome 109 or higher #847 ([af20f7e](https://github.com/daybrush/moveable/commit/af20f7e04a692e192bb6b27e4478c9d0cb0cfd29))\n    * fix requestStyle #856 ([88c9ec2](https://github.com/daybrush/moveable/commit/88c9ec2ce2b06e592f6548af2221989b7109456d))\n    * fix zoomed font size #855 ([172f6d4](https://github.com/daybrush/moveable/commit/172f6d448e9c855e8aaeefb0b83516548d127e83))\n\n\n### :memo: Documentation\n\n* `react-moveable`\n    * fix story tag ([706c41c](https://github.com/daybrush/moveable/commit/706c41c9bd44378e4c3571661d4a90d4b12ab3af))\n* Other\n    * fix README with vue3 link (#861) ([bc193ba](https://github.com/daybrush/moveable/commit/bc193bab557ce7c98c2bf8730a10a1f506701661))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([645e290](https://github.com/daybrush/moveable/commit/645e290a53b477b468042e05447e2f8f8aea6ed0))\n* `react-moveable`\n    * update croffle ([9017260](https://github.com/daybrush/moveable/commit/901726035ba4122e048cdd1d0a0d3806c3c4809a))\n\n\n\n## [0.43.1](https://github.com/daybrush/moveable/compare/0.42.2...0.43.1) (2023-01-29)\n### :sparkles: Packages\n* `@moveable/helper` 0.1.2\n* `lit-moveable` 0.20.1\n* `moveable` 0.43.1\n* `preact-moveable` 0.45.1\n* `react-compat-moveable` 0.31.1\n* `react-moveable` 0.46.1\n* `svelte-moveable` 0.35.1\n* `vue-moveable` 2.0.0-beta.57\n* `vue3-moveable` 0.18.1\n* `ngx-moveable` 0.40.1\n\n\n### :rocket: New Features\n\n* `react-moveable`, `react-compat-moveable`\n    * add isTrusted event property ([256c40c](https://github.com/daybrush/moveable/commit/256c40cf2a51277af5414a9bab07be321a586157))\n    * add scrollOptions #841 ([a6dfc21](https://github.com/daybrush/moveable/commit/a6dfc2152ef9a06c6714c219b3ea057f0b6b8504))\n* `react-moveable`\n    * add `linePadding` prop #837 ([af818ab](https://github.com/daybrush/moveable/commit/af818abc467608e76f8bb15175b184fa440fddfb))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `@moveable/helper`\n    * fix TargetList ([008116c](https://github.com/daybrush/moveable/commit/008116cd0b6624b95c179a6eeed3e897de6e488c))\n* `react-moveable`\n    * fix changed defaultGroupOrigin ([8d0ed9b](https://github.com/daybrush/moveable/commit/8d0ed9b85c44091f65e1f4f233ce56ea91dbf10f))\n    * support able requester types ([c26e5a9](https://github.com/daybrush/moveable/commit/c26e5a94ca27b6b1739d3e6bf5d2882d22e06e3a))\n* `@moveable/helper`\n    * fix selectCompletedChilds ([1274030](https://github.com/daybrush/moveable/commit/127403091afe221411dd8c2fa4ba072638bf0688))\n\n\n### :memo: Documentation\n\n* fix typo (#820) ([1267b45](https://github.com/daybrush/moveable/commit/1267b451731c5e8d5018986f9f862432e4beb179))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([24c9567](https://github.com/daybrush/moveable/commit/24c9567e2ec00392d2d445298031c39de0331eae))\n    * publish packages ([0e0a03d](https://github.com/daybrush/moveable/commit/0e0a03dd6c234ded050db8206e585c5fa2da1848))\n\n\n\n## [0.42.2](https://github.com/daybrush/moveable/compare/0.42.1...0.42.2) (2022-12-16)\n### :sparkles: Packages\n* `@moveable/helper` 0.1.0\n* `lit-moveable` 0.19.1\n* `moveable` 0.42.2\n* `preact-moveable` 0.44.1\n* `react-compat-moveable` 0.30.2\n* `react-moveable` 0.45.1\n* `svelte-moveable` 0.34.1\n* `vue-moveable` 2.0.0-beta.55\n* `vue3-moveable` 0.17.1\n* `ngx-moveable` 0.39.1\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `@moveable/helper`\n    * fix helper's methods ([4bc6ef5](https://github.com/daybrush/moveable/commit/4bc6ef511f7652966e1a87cd7d0a53e6687a1707))\n* `react-moveable`\n    * fix snap rendering for first drag #810 ([170eaec](https://github.com/daybrush/moveable/commit/170eaeccb43ce051f34661a337fb7870e3e8b5d9))\n    * fix targetGroups' compare condition ([21622f2](https://github.com/daybrush/moveable/commit/21622f2f25d912f69b70ba5193b909bf7244db80))\n    * fix targetGroups' compare condition ([959a9f0](https://github.com/daybrush/moveable/commit/959a9f0abd3fa592aa7645096efc3df95477494a))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([d088ad9](https://github.com/daybrush/moveable/commit/d088ad9ed64889f4fd6143b89410f5d5e372105f))\n\n\n\n## [0.42.1](https://github.com/daybrush/moveable/compare/0.41.1...0.42.1) (2022-12-10)\n### :sparkles: Packages\n* `@moveable/helper` 0.0.4\n* `lit-moveable` 0.19.0\n* `moveable` 0.42.1\n* `preact-moveable` 0.44.0\n* `react-compat-moveable` 0.30.1\n* `react-moveable` 0.45.0\n* `svelte-moveable` 0.34.0\n* `vue-moveable` 2.0.0-beta.54\n* `vue3-moveable` 0.17.0\n* `ngx-moveable` 0.39.0\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add `checkResizableError` prop #808 ([cb70b3b](https://github.com/daybrush/moveable/commit/cb70b3b99f5da269a19ded412ac7cd0366cb7996))\n    * add `stopAble` property ([c05ba1f](https://github.com/daybrush/moveable/commit/c05ba1feed36c8a4bc6107a713fb11208e685777))\n    * add OrginDraggable, Warpable css object #807 ([32ba0ce](https://github.com/daybrush/moveable/commit/32ba0cee2a44bfcdc91cf3748282cccdfca37512))\n    * add useAccuratePosition prop  #164 ([5c3898f](https://github.com/daybrush/moveable/commit/5c3898fc88704c5638133a35111767cd27a77808))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix request with bounds #809 ([43e08d1](https://github.com/daybrush/moveable/commit/43e08d102827ba0f4437ce1d8883282566f3f86b))\n    * fix useAccuratePosition for group ([e1b3ae7](https://github.com/daybrush/moveable/commit/e1b3ae78cb1d137ea85cf17afd51aa816e65aa87))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([ab42598](https://github.com/daybrush/moveable/commit/ab42598cb7a6175450125c5e55093cf891a33692))\n\n\n\n## [0.41.1](https://github.com/daybrush/moveable/compare/0.41.0...0.41.1) (2022-12-05)\n### :sparkles: Packages\n* `@moveable/helper` 0.0.4\n* `lit-moveable` 0.18.1\n* `moveable` 0.41.1\n* `preact-moveable` 0.43.1\n* `react-compat-moveable` 0.29.1\n* `react-moveable` 0.44.1\n* `svelte-moveable` 0.33.1\n* `vue-moveable` 2.0.0-beta.53\n* `vue3-moveable` 0.16.1\n* `ngx-moveable` 0.38.1\n\n\n### :bug: Bug Fix\n\n* `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`\n    * move react-moveable path ([ec8e162](https://github.com/daybrush/moveable/commit/ec8e1620e05f1d5a1a45ecccec7481c2ea8a4f57))\n* `react-moveable`\n    * fix tangent's tiny x value #806 ([e45b92a](https://github.com/daybrush/moveable/commit/e45b92a5880475d27c2318d2e1489996ad465e1c))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([9ee9bc9](https://github.com/daybrush/moveable/commit/9ee9bc9c76f6c4b317548470b5b4894c6a462be1))\n\n\n\n## [0.41.0](https://github.com/daybrush/moveable/compare/0.40.1...0.41.0) (2022-12-03)\n### :sparkles: Packages\n* `@moveable/helper` 0.0.4\n* `lit-moveable` 0.18.0\n* `moveable` 0.41.0\n* `preact-moveable` 0.43.0\n* `react-compat-moveable` 0.29.0\n* `react-moveable` 0.44.0\n* `svelte-moveable` 0.33.0\n* `vue-moveable` 2.0.0-beta.52\n* `vue3-moveable` 0.16.0\n* `ngx-moveable` 0.38.0\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add borderRadius style state #804 ([57bae32](https://github.com/daybrush/moveable/commit/57bae3227dc77667314d900631765836b77a66cc))\n    * add groupableProp #798 ([58d9d22](https://github.com/daybrush/moveable/commit/58d9d2231954c52821b4ec666e14703506c0840a))\n    * add scrollThrottleTime prop ([b53924e](https://github.com/daybrush/moveable/commit/b53924ecbb6be2805bd3da368822a41638bbcea5))\n    * Support roundable group #798 ([90a9c1a](https://github.com/daybrush/moveable/commit/90a9c1a062661906d0b1777839db794dbc2ad370))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix first render for individual groupable ([74dc11a](https://github.com/daybrush/moveable/commit/74dc11a4dec363746457046ecbde52f0b53955f3))\n    * fix position relative with zoom #800 ([2efdc35](https://github.com/daybrush/moveable/commit/2efdc353465974acec59e59c2a3d8fcf29284eac))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([4739df4](https://github.com/daybrush/moveable/commit/4739df488cdf3c32cb4ca4e024063c5c44fbaf0c))\n\n\n\n## [0.40.1](https://github.com/daybrush/moveable/compare/0.40.0...0.40.1) (2022-11-28)\n### :sparkles: Packages\n* `@moveable/helper` 0.0.4\n* `lit-moveable` 0.17.1\n* `moveable` 0.40.1\n* `preact-moveable` 0.42.1\n* `react-compat-moveable` 0.28.1\n* `react-moveable` 0.43.1\n* `svelte-moveable` 0.32.1\n* `vue-moveable` 2.0.0-beta.51\n* `vue3-moveable` 0.15.1\n* `ngx-moveable` 0.37.1\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix body rect #800 ([8976985](https://github.com/daybrush/moveable/commit/8976985422fd30cd9e6e85e41ba73473dca05d41))\n    * fix TRS order ([aff4b28](https://github.com/daybrush/moveable/commit/aff4b281e697bd9a550d21d1f26739fb0c5e4903))\n    * fix zero line height #801 ([99547ca](https://github.com/daybrush/moveable/commit/99547cace2be52de99eceb021cc7a75f54bc16da))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([746c40b](https://github.com/daybrush/moveable/commit/746c40b2a2f31f2f371f9110018c89e64c08a525))\n* `react-moveable`, `moveable`\n    * update jsdoc, template ([11408ca](https://github.com/daybrush/moveable/commit/11408caea15925a42165aa2080a7327e77a22ea8))\n\n\n\n## [0.40.0](https://github.com/daybrush/moveable/compare/0.39.0...0.40.0) (2022-11-27)\n### :sparkles: Packages\n* `@moveable/helper` 0.0.4\n* `lit-moveable` 0.17.0\n* `moveable` 0.40.0\n* `preact-moveable` 0.42.0\n* `react-compat-moveable` 0.28.0\n* `react-moveable` 0.43.0\n* `svelte-moveable` 0.32.0\n* `vue-moveable` 2.0.0-beta.50\n* `vue3-moveable` 0.15.0\n* `ngx-moveable` 0.37.0\n\n\n### :rocket: New Features\n\n* `react-moveable`, `react-compat-moveable`\n    * add isFirstDrag property on drag event #796 ([7ade6a2](https://github.com/daybrush/moveable/commit/7ade6a23e9003d9ed4119a035ccad01b01c13ed7))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix snap size for position fixed #791 ([b02c82b](https://github.com/daybrush/moveable/commit/b02c82ba5012fdfdf534a6dad1dcc1aea76e420e))\n    * support css zoom #800 ([fa3de6b](https://github.com/daybrush/moveable/commit/fa3de6bd52de2509bf76b1d4a001b31f4a6b6ed4))\n\n\n### :memo: Documentation\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * fix README ([3a153c8](https://github.com/daybrush/moveable/commit/3a153c849b7279ec5fd603167117c88f25a7149c))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([3d5ac5a](https://github.com/daybrush/moveable/commit/3d5ac5ad855d98a2f555174cc46ec09c148d6a20))\n    * publish packages ([92eb72d](https://github.com/daybrush/moveable/commit/92eb72df6110eb40a66b4726740240acb43e9745))\n* `react-moveable`\n    * update croffle ([5714b2e](https://github.com/daybrush/moveable/commit/5714b2ecc219ec06ebc008c3ab1c9cad219a95e6))\n\n\n\n## [0.39.0](https://github.com/daybrush/moveable/compare/0.38.1...0.39.0) (2022-11-13)\n### :sparkles: Packages\n* `@moveable/helper` 0.0.4\n* `lit-moveable` 0.16.0\n* `moveable` 0.39.0\n* `preact-moveable` 0.41.0\n* `react-compat-moveable` 0.27.0\n* `react-moveable` 0.42.0\n* `svelte-moveable` 0.31.0\n* `vue-moveable` 2.0.0-beta.48\n* `vue3-moveable` 0.14.0\n* `ngx-moveable` 0.36.0\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add `stopDrag` method #787 ([1c1d54d](https://github.com/daybrush/moveable/commit/1c1d54d7b6c3baff62bac34b439244c20a18c3c0))\n    * add cssText on clip event ([90e5397](https://github.com/daybrush/moveable/commit/90e539751a5e505257702dba6a09c96cd71d3f50))\n    * support group persist #780 ([40a23db](https://github.com/daybrush/moveable/commit/40a23dbc31d08ac22a85e5dc807ccb16e0604b4c))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `react-compat-moveable`\n    * update gesto, dragscroll dependencies ([0f33358](https://github.com/daybrush/moveable/commit/0f333589574f509d1e3058b77ec9df6b18d7fee6))\n* `react-moveable`\n    * fix edgeDraggable #695 ([9ebfae5](https://github.com/daybrush/moveable/commit/9ebfae559c978d5354ba5244ada6e22d20cdc83a))\n    * fix persist group ([d1c9e2c](https://github.com/daybrush/moveable/commit/d1c9e2cab1183b89f346daac5c02dbf531bb53e8))\n    * fix snap bug for rotated group #786 ([3ac47da](https://github.com/daybrush/moveable/commit/3ac47da798cb655d37903ea9a8574ae62d1a7844))\n    * fix snap for fixed position #791 ([05f6f22](https://github.com/daybrush/moveable/commit/05f6f221fbdc971ca21b7bf27b24c91b1e722057))\n    * fix throttleDrag #789 ([8f4659e](https://github.com/daybrush/moveable/commit/8f4659e2531d9cdba9593509c87f0c2915a28ae9))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([0780d7a](https://github.com/daybrush/moveable/commit/0780d7a204e5f1fa13070d4fa3ca657dfe3ee4af))\n\n\n\n## [0.38.1](https://github.com/daybrush/moveable/compare/0.38.0...0.38.1) (2022-11-06)\n### :sparkles: Packages\n* `@moveable/helper` 0.0.4\n* `lit-moveable` 0.15.1\n* `moveable` 0.38.1\n* `preact-moveable` 0.40.1\n* `react-compat-moveable` 0.26.1\n* `react-moveable` 0.41.1\n* `svelte-moveable` 0.30.1\n* `vue-moveable` 2.0.0-beta.47\n* `vue3-moveable` 0.13.1\n* `ngx-moveable` 0.35.1\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix group rotation delta ([ef0c591](https://github.com/daybrush/moveable/commit/ef0c591d7b0c86aed6847c476f17a82f6b80c8fc))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([64e846b](https://github.com/daybrush/moveable/commit/64e846bb0e606756bc0b87c92b2b1052b458b9f7))\n\n\n\n## [0.38.0](https://github.com/daybrush/moveable/compare/0.37.0...0.38.0) (2022-11-04)\n### :sparkles: Packages\n* `@moveable/helper` 0.0.4\n* `lit-moveable` 0.15.0\n* `moveable` 0.38.0\n* `preact-moveable` 0.40.0\n* `react-compat-moveable` 0.26.0\n* `react-moveable` 0.41.0\n* `svelte-moveable` 0.30.0\n* `vue-moveable` 2.0.0-beta.46\n* `vue3-moveable` 0.13.0\n* `ngx-moveable` 0.35.0\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add ableName-view-dragging in viewContainer #751 ([90c5c34](https://github.com/daybrush/moveable/commit/90c5c34960615f57807d7c8d9895fc04231951e0))\n    * add persistData prop for restore data #780 #777 ([599df9b](https://github.com/daybrush/moveable/commit/599df9bfe1249665c4d76f44f3b771d347284d5a))\n    * add snapThreshold prop #774 ([1bf05b3](https://github.com/daybrush/moveable/commit/1bf05b3bf5221e8ee1a1ffadbcae93a885630819))\n    * support rotationPosition array type #783 ([80653c3](https://github.com/daybrush/moveable/commit/80653c3235ecaef5112414f8b859bedeba196dda))\n    * support stopDrag on drag  #775 ([d950472](https://github.com/daybrush/moveable/commit/d95047250708d7d2e08988c3e6e4b66b99f53cc7))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `lit-moveable`\n    * fix changing snapContainer #773 ([c3ee847](https://github.com/daybrush/moveable/commit/c3ee8473765ee6bbb8a27e4865372edac7b3b6fe))\n* `react-moveable`, `moveable`\n    * fix no relative snapContainer's size #773 ([1db881f](https://github.com/daybrush/moveable/commit/1db881f4d63fe59ffa22b00428419cfb0e4e2827))\n* `react-moveable`\n    * fix document element #782 ([b9194d7](https://github.com/daybrush/moveable/commit/b9194d72869c50f96976354ec0dd2cbb24788533))\n    * fix rotate dist #778 ([7ac47ca](https://github.com/daybrush/moveable/commit/7ac47ca99402e811faef0f6cdfeede18e14c9ae2))\n* Other\n    * fix nohoist modules ([20f5e97](https://github.com/daybrush/moveable/commit/20f5e975ac9a1a8a86d75dee75411a8e15d53aa6))\n\n\n### :memo: Documentation\n\n* `react-moveable`\n    * fix hitTest doc ([d4b7648](https://github.com/daybrush/moveable/commit/d4b764899bf4e9044028399f28991e1003195d9c))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([b6896b3](https://github.com/daybrush/moveable/commit/b6896b340dd1f78777bd63c48e8545895df9aa5e))\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `ngx-moveable`, `lit-moveable`\n    * update packages ([1ba698e](https://github.com/daybrush/moveable/commit/1ba698e996efe9c7c487823fe513ef43592cd6e9))\n* `react-compat-moveable`, `preact-moveable`, `moveable`\n    * update packages #760 ([5c77cf3](https://github.com/daybrush/moveable/commit/5c77cf3986fa319a170d8bd90b6cd720601b5172))\n\n\n\n## [0.37.0](https://github.com/daybrush/moveable/compare/0.36.4...0.37.0) (2022-10-17)\n### :sparkles: Packages\n* `@moveable/helper` 0.0.4\n* `lit-moveable` 0.14.0\n* `moveable` 0.37.0\n* `preact-moveable` 0.39.0\n* `react-compat-moveable` 0.25.0\n* `react-moveable` 0.40.0\n* `svelte-moveable` 0.29.0\n* `vue-moveable` 2.0.0-beta.44\n* `vue3-moveable` 0.12.0\n* `ngx-moveable` 0.34.0\n\n\n### :rocket: New Features\n\n* `react-moveable`, `react-compat-moveable`\n    * add `viewContainer` prop #753 ([352073c](https://github.com/daybrush/moveable/commit/352073c5c5c765aca707236abdff9dded7988343))\n* `react-moveable`\n    * add getTargets method #751 ([16f1061](https://github.com/daybrush/moveable/commit/16f1061ac616081c1d9dd40e00105e8a2a93e1d2))\n    * add roundPadding, isDisplayShadowRoundControls #761 #762 ([68be2e8](https://github.com/daybrush/moveable/commit/68be2e879cc5dbba6d4566cf96d343216710e0c9))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `ngx-moveable`, `moveable`\n    * fix flash of single, group toggling #760 ([5578030](https://github.com/daybrush/moveable/commit/557803012e21d2e78e3c0577aa9a238d9ee3a8dd))\n* `react-moveable`, `moveable`\n    * support cache for group #760 ([4661320](https://github.com/daybrush/moveable/commit/46613207e47279e72bdfc656ae35548a3f07474d))\n* `react-moveable`\n    * fix border radius for line #761 ([803f0b6](https://github.com/daybrush/moveable/commit/803f0b6c2210653a7cdb17f51a828c4e3f6db641))\n    * fix cache condition #760 ([03e2789](https://github.com/daybrush/moveable/commit/03e2789db951f95087f918d32fa32cdd70fba533))\n    * fix first visibility #760 ([38ba047](https://github.com/daybrush/moveable/commit/38ba04792925b0c32e85258046f5285133f92dc1))\n    * fix max-width percentage #763 ([f1ad4af](https://github.com/daybrush/moveable/commit/f1ad4affba14d86f3d0145f08e08c647bd0b4f08))\n    * fix roundable control index #762 ([1b29ecd](https://github.com/daybrush/moveable/commit/1b29ecdfb0d1d4df6c348e78852d1325aa727aaf))\n    * Fixing bad type causing type conflict (#767) ([c63c1d3](https://github.com/daybrush/moveable/commit/c63c1d30067e52b4115f09c6a78639177b443226))\n* `vue3-moveable`\n    * fix vue3 type #766 ([294e6f5](https://github.com/daybrush/moveable/commit/294e6f530f508dc603544cfc3ced219b450cbe5c))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([75db134](https://github.com/daybrush/moveable/commit/75db1345ab1119dd9a5270c7c11de455888c2627))\n    * publish packages ([47f5335](https://github.com/daybrush/moveable/commit/47f53351792bf5264c6d66745088e0571cedc3aa))\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `moveable`\n    * update packages ([61730d5](https://github.com/daybrush/moveable/commit/61730d5c143d4027c55a714c764efe77bbebe5bf))\n\n\n\n## [0.36.4](https://github.com/daybrush/moveable/compare/0.36.1...0.36.4) (2022-10-10)\n### :sparkles: Packages\n* `@moveable/helper` 0.0.4\n* `lit-moveable` 0.13.4\n* `moveable` 0.36.4\n* `preact-moveable` 0.38.4\n* `react-compat-moveable` 0.24.4\n* `react-moveable` 0.39.4\n* `svelte-moveable` 0.28.4\n* `vue-moveable` 2.0.0-beta.41\n* `vue3-moveable` 0.11.4\n* `ngx-moveable` 0.33.4\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `react-compat-moveable`\n    * fix click event #746 ([41809c1](https://github.com/daybrush/moveable/commit/41809c10646b91586f74332b74ad2f83ab9a4b2d))\n* `react-moveable`\n    * enhance updateSelectors #760 ([e72b119](https://github.com/daybrush/moveable/commit/e72b119fd7d413df1af231607db2aeee1f20e467))\n    * fix drag start edge #745 ([105bb1c](https://github.com/daybrush/moveable/commit/105bb1ce073e349c77f6a0c4dd8d3d259a03aabe))\n    * fix index attr for roundable ([92932d7](https://github.com/daybrush/moveable/commit/92932d7c35f58d365d2b2294d4735fced9416214))\n    * fix onScaleGroupEnd param #755 ([ce7d855](https://github.com/daybrush/moveable/commit/ce7d855da4fe4042163c7fdca59b87b3060cfd88))\n    * fix roundable line index #756 ([83d5232](https://github.com/daybrush/moveable/commit/83d523288757e0276a1ffe9a6f4903fc86a7f19a))\n\n\n### :memo: Documentation\n\n* fix README ([7cfadae](https://github.com/daybrush/moveable/commit/7cfadae4f61339a2e16f9f5fc8b1e55bf47e1580))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([9e3ee2f](https://github.com/daybrush/moveable/commit/9e3ee2ff44dea473e7aa73e4d501c2d23062f40d))\n    * publish packages ([16b2516](https://github.com/daybrush/moveable/commit/16b251618307faad8f8f3fc5433b27ed1466311c))\n\n\n\n## [0.36.1](https://github.com/daybrush/moveable/compare/0.36.0...0.36.1) (2022-09-19)\n### :sparkles: Packages\n* `@moveable/helper` 0.0.4\n* `lit-moveable` 0.13.1\n* `moveable` 0.36.1\n* `preact-moveable` 0.38.1\n* `react-compat-moveable` 0.24.1\n* `react-moveable` 0.39.1\n* `svelte-moveable` 0.28.1\n* `vue-moveable` 2.0.0-beta.38\n* `vue3-moveable` 0.11.1\n* `ngx-moveable` 0.33.1\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix updateSelectors method #740 ([f9abb0f](https://github.com/daybrush/moveable/commit/f9abb0f32212222bccadc3459f4d721977032aba))\n\n\n### :memo: Documentation\n\n* include InitialMoveable docs #740 ([1140ea9](https://github.com/daybrush/moveable/commit/1140ea9de40f778acfa3216b7e685cfac2c57c2e))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * publish packages ([2954e37](https://github.com/daybrush/moveable/commit/2954e37b9a4e2100a8a55c0d49d279e7f994fd94))\n\n\n\n## [0.36.0](https://github.com/daybrush/moveable/compare/0.35.4...0.36.0) (2022-09-15)\n### :sparkles: Packages\n* `@moveable/helper` 0.0.4\n* `lit-moveable` 0.13.0\n* `moveable` 0.36.0\n* `preact-moveable` 0.38.0\n* `react-compat-moveable` 0.24.0\n* `react-moveable` 0.39.0\n* `svelte-moveable` 0.28.0\n* `vue-moveable` 2.0.0-beta.37\n* `vue3-moveable` 0.11.0\n* `ngx-moveable` 0.33.0\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add `moveableTarget` property in click event ([ee3d9f2](https://github.com/daybrush/moveable/commit/ee3d9f2153ad70f86548f73412fad9d255d80760))\n    * add `updateSelectors` method ([90f40e2](https://github.com/daybrush/moveable/commit/90f40e2b500bce6564f878294e1a0aaf27dd5b69))\n    * support multiple group #566 #731 ([0bb7977](https://github.com/daybrush/moveable/commit/0bb79772fc956f5f38ed540f4de9382d8e5567fd))\n* `@moveable/helper`\n    * add helper package ([0ade16e](https://github.com/daybrush/moveable/commit/0ade16e9f0dd3adfe41a0ea92d2eb4a81d5aaade))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `react-compat-moveable`, `preact-moveable`\n    * fix shadow dom css #729 ([7581afc](https://github.com/daybrush/moveable/commit/7581afc13a7c5f9f749b22d7bd3160de0972d112))\n* `react-moveable`\n    * fix defaultGroupRotate action ([1f6709a](https://github.com/daybrush/moveable/commit/1f6709a9ddbdd5fe8cc6381cc7c0dac68ab42a70))\n    * fix dragtarget #468 ([c662cca](https://github.com/daybrush/moveable/commit/c662cca73f6f64a6df38936ce97d756e5197d55e))\n    * fix multiple group ([20af5c1](https://github.com/daybrush/moveable/commit/20af5c113fb6b250be27dd427c3fa6a4146bf958))\n    * fix overflow auto target #730 ([1e0ae91](https://github.com/daybrush/moveable/commit/1e0ae91df7baed8a7ae11e96c29a3f3f4cb9b8c6))\n    * fix rotatable throttling ([b18f16a](https://github.com/daybrush/moveable/commit/b18f16a93d853621f3883da16bfc3e6d0cd6db94))\n    * fix rotate group origin #733 ([3e9e8e5](https://github.com/daybrush/moveable/commit/3e9e8e5f59ca65584e3c709544c1d43734086d82))\n* `svelte-moveable`\n    * fix moveable container #732 ([d2fec43](https://github.com/daybrush/moveable/commit/d2fec43aeed2e935a9315003f2876b7b99a46ac4))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * update packages ([e5774a9](https://github.com/daybrush/moveable/commit/e5774a9becd500d154e8d354017dcbd80505ba13))\n\n\n\n## [0.35.4](https://github.com/daybrush/moveable/compare/0.35.3...0.35.4) (2022-08-24)\n### :sparkles: Packages\n* `lit-moveable` 0.12.4\n* `moveable` 0.35.4\n* `preact-moveable` 0.37.4\n* `react-compat-moveable` 0.23.4\n* `react-moveable` 0.38.4\n* `svelte-moveable` 0.27.4\n* `vue-moveable` 2.0.0-beta.36\n* `vue3-moveable` 0.10.4\n* `ngx-moveable` 0.32.4\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * ignore document for firefox ([db0c730](https://github.com/daybrush/moveable/commit/db0c730be90c00d8d187445db26e0e42a08cedb2))\n\n\n### :mega: Other\n\n* All\n    * publish packages ([d57ebb1](https://github.com/daybrush/moveable/commit/d57ebb130006c47e3a687d2b417fe3fe7f30149a))\n\n\n\n## [0.35.3](https://github.com/daybrush/moveable/compare/0.35.1...0.35.3) (2022-08-23)\n### :sparkles: Packages\n* `lit-moveable` 0.12.3\n* `moveable` 0.35.3\n* `preact-moveable` 0.37.3\n* `react-compat-moveable` 0.23.3\n* `react-moveable` 0.38.3\n* `svelte-moveable` 0.27.3\n* `vue-moveable` 2.0.0-beta.35\n* `vue3-moveable` 0.10.3\n* `ngx-moveable` 0.32.3\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix custom element offsetPos for firefox ([6e05812](https://github.com/daybrush/moveable/commit/6e05812c649098c6330678289cd83d9abaa6df1d))\n    * fix svg group's offset pos #722 ([167d277](https://github.com/daybrush/moveable/commit/167d277abe7f58d0b203867eb8df25addba2172a))\n    * fix waitToChangeTarget method #714 ([fc9847b](https://github.com/daybrush/moveable/commit/fc9847b4d2fa78eb057259bb5d4a2a187a663bf1))\n    * stop event if no use ables #724 ([2a90842](https://github.com/daybrush/moveable/commit/2a90842e4ff937af6b39bbc4e147a7a7acbb0acf))\n\n\n### :mega: Other\n\n* All\n    * publish packages ([3597bc5](https://github.com/daybrush/moveable/commit/3597bc5fd58cdec56fd4ff8916380a6f3709f7f5))\n* `react-moveable`, `react-compat-moveable`, `moveable`\n    * fix cjs configs ([ce8cbb1](https://github.com/daybrush/moveable/commit/ce8cbb18563e34234f7e9d83a0b3f024870314a8))\n\n\n\n## [0.35.1](https://github.com/daybrush/moveable/compare/0.35.0...0.35.1) (2022-08-12)\n### :sparkles: Packages\n* `lit-moveable` 0.12.1\n* `moveable` 0.35.1\n* `preact-moveable` 0.37.1\n* `react-compat-moveable` 0.23.1\n* `react-moveable` 0.38.1\n* `svelte-moveable` 0.27.1\n* `vue-moveable` 2.0.0-beta.33\n* `vue3-moveable` 0.10.1\n* `ngx-moveable` 0.32.1\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `react-compat-moveable`\n    * export event-emitter ([937d83e](https://github.com/daybrush/moveable/commit/937d83e221d7080abdb699bc088eff9ca89caaa4))\n    * fix click event for mobile #720 ([ce6bced](https://github.com/daybrush/moveable/commit/ce6bced55ca6e32981215ebd91a57fe04a789f4e))\n* `react-moveable`, `moveable`\n    * fix that dragStart method cannot fire #718 ([5ea9fc3](https://github.com/daybrush/moveable/commit/5ea9fc362534e8a56976ad87053700ee06a14e0d))\n\n\n### :mega: Other\n\n* All\n    * publish packages ([6be7e81](https://github.com/daybrush/moveable/commit/6be7e8122b8edd2e323a039cdbb73381de74e14f))\n\n\n\n## [0.35.0](https://github.com/daybrush/moveable/compare/0.34.3...0.35.0) (2022-08-06)\n### :sparkles: Packages\n* `lit-moveable` 0.12.0\n* `moveable` 0.35.0\n* `preact-moveable` 0.37.0\n* `react-compat-moveable` 0.23.0\n* `react-moveable` 0.38.0\n* `svelte-moveable` 0.27.0\n* `vue-moveable` 2.0.0-beta.32\n* `vue3-moveable` 0.10.0\n* `ngx-moveable` 0.32.0\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add maxSnapElementGapDistance prop #707 ([5f71c30](https://github.com/daybrush/moveable/commit/5f71c304192764cd8c9261daec56f1594f13e3df))\n    * add stopDrag event property #665 ([70f49ee](https://github.com/daybrush/moveable/commit/70f49ee4dabade6366e37fa3408421ee7d1d4931))\n    * add waitToChangeTarget method #714 ([8e6c534](https://github.com/daybrush/moveable/commit/8e6c534010689c0c0a2a821f8ab7e3d6cf63f240))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `react-compat-moveable`\n    * prevent click when drag & click control #713 ([2071c0d](https://github.com/daybrush/moveable/commit/2071c0dd68503d920fe9c26e53ec8c17627bee2b))\n* `react-moveable`\n    * render only shortest gap guidelines #707 ([176c1b3](https://github.com/daybrush/moveable/commit/176c1b31b6c8cc3359d44474225a35014fba42d4))\n* Other\n    * update type script ([106c416](https://github.com/daybrush/moveable/commit/106c4162bf388b5bf35c3e38515bebc361721cec))\n\n\n### :mega: Other\n\n* All\n    * publish packages ([80005ba](https://github.com/daybrush/moveable/commit/80005bada5651afd0c5487a193ab321b22ab1b55))\n\n\n\n## [0.34.3](https://github.com/daybrush/moveable/compare/0.34.2...0.34.3) (2022-08-03)\n### :sparkles: Packages\n* `lit-moveable` 0.11.3\n* `moveable` 0.34.3\n* `preact-moveable` 0.36.3\n* `react-compat-moveable` 0.22.3\n* `react-moveable` 0.37.3\n* `svelte-moveable` 0.26.3\n* `vue-moveable` 2.0.0-beta.31\n* `vue3-moveable` 0.9.3\n* `ngx-moveable` 0.31.3\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `react-compat-moveable`\n    * fix click event by gesto update #713 ([3a3c762](https://github.com/daybrush/moveable/commit/3a3c762fc20cf682c3d8fda21f28244a3ecf36bd))\n* `react-moveable`\n    * fix offsetParent with willChange #711 ([cd1de86](https://github.com/daybrush/moveable/commit/cd1de864191fc39b04065ada89d6e600f02ad0a1))\n\n\n### :mega: Other\n\n* All\n    * publish packages ([5468ff7](https://github.com/daybrush/moveable/commit/5468ff763bfa3f30e637ce8f504af09152b22c5c))\n* Other\n    * fix angular type script ([4f04200](https://github.com/daybrush/moveable/commit/4f042003a31ae6ff13936ab6e64cdfc8a91e3125))\n    * Update FUNDING.yml ([4cd7af1](https://github.com/daybrush/moveable/commit/4cd7af1096bbd23244b62db744fb6a92deb03165))\n\n\n\n## [0.34.2](https://github.com/daybrush/moveable/compare/0.33.0...0.34.2) (2022-08-01)\n### :sparkles: Packages\n* `lit-moveable` 0.11.2\n* `moveable` 0.34.2\n* `preact-moveable` 0.36.2\n* `react-compat-moveable` 0.22.2\n* `react-moveable` 0.37.2\n* `svelte-moveable` 0.26.2\n* `vue-moveable` 2.0.0-beta.30\n* `vue3-moveable` 0.9.2\n* `ngx-moveable` 0.31.2\n\n\n### :rocket: New Features\n\n* `react-moveable`, `react-compat-moveable`\n    * add preventClickEventOnDrag prop ([281b2b7](https://github.com/daybrush/moveable/commit/281b2b7aa5dba3bdc4c3f478e115a0de8fd2359e))\n* `react-moveable`\n    * add CSSObject on render ([e2f462a](https://github.com/daybrush/moveable/commit/e2f462aecd10d076ef874a6ba2af97a2e59841d1))\n    * add maxSnapElementGuidelineDistance #707 ([171b027](https://github.com/daybrush/moveable/commit/171b02708e6343656655cf403744e1a0fbfa2324))\n    * add startFixedDirection property on before event ([c838c9c](https://github.com/daybrush/moveable/commit/c838c9cc13305eb10ba85b75bcfcd7daa52047f1))\n    * add stopPropagation prop ([3ce54e0](https://github.com/daybrush/moveable/commit/3ce54e09972962f69f2b697dc52e0b507b2aad9a))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix cssText, style on drag ([aed807e](https://github.com/daybrush/moveable/commit/aed807ef7a04b25101cef8fbad38d94a1e7482ff))\n    * fix drag undefined on Rotate Group #710 ([db80e7d](https://github.com/daybrush/moveable/commit/db80e7d92bee3be684c74a9cb20bc62680f4e0a4))\n    * fix getElementInfo's NaN type value #709 ([e99d94f](https://github.com/daybrush/moveable/commit/e99d94f5c3302fd3c851aa942e99daa75346479c))\n    * fix rotate position #710 ([d269d1f](https://github.com/daybrush/moveable/commit/d269d1f3c095a0930359597d894d3cdb631b3ee2))\n\n\n### :memo: Documentation\n\n* `react-moveable`, `moveable`\n    * fix README ([5ded1c1](https://github.com/daybrush/moveable/commit/5ded1c19b77fe2c3974bcf1f1ac1356d2924991d))\n\n\n### :mega: Other\n\n* All\n    * publish packages ([0076577](https://github.com/daybrush/moveable/commit/00765776ba92b5ca691c1aefd1c20687952373d9))\n    * publish packages ([ffa0c18](https://github.com/daybrush/moveable/commit/ffa0c18bb6970d6f8d88a49db23b11620e704618))\n    * publish packages ([958ebac](https://github.com/daybrush/moveable/commit/958ebace6032eafb17f1ce366394b440671b45b3))\n\n\n\n## [0.33.0](https://github.com/daybrush/moveable/compare/0.32.0...0.33.0) (2022-07-25)\n### :sparkles: Packages\n* `lit-moveable` 0.10.0\n* `moveable` 0.33.0\n* `preact-moveable` 0.35.0\n* `react-compat-moveable` 0.21.0\n* `react-moveable` 0.36.0\n* `svelte-moveable` 0.25.0\n* `vue-moveable` 2.0.0-beta.27\n* `vue3-moveable` 0.8.0\n* `ngx-moveable` 0.30.0\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add `cssText`, `style` property on events ([7a9012e](https://github.com/daybrush/moveable/commit/7a9012e4fcdc9a37bb2096bcf37e8e4d25310a8b))\n    * add `rotateAroundControls` prop ([d473ffa](https://github.com/daybrush/moveable/commit/d473ffa76a5c390945c320ee8ee8b6f671a0fbed))\n    * add style, cssText, afterTransform properties ([68b4a92](https://github.com/daybrush/moveable/commit/68b4a925b75f599924628425b4da5cfd5424ad71))\n    * support pos guideline info #707 ([1cd1b81](https://github.com/daybrush/moveable/commit/1cd1b8134419df88b16ffb9aaa412ebb9048b379))\n    * Support rotate and resize together #467 ([24482a6](https://github.com/daybrush/moveable/commit/24482a68ac2611507e2fa9e6673f969bc1c65cff))\n    * use edge at the same tiem #706 ([c273703](https://github.com/daybrush/moveable/commit/c273703e5b62ea41ec9df441158a77cb0bf835c1))\n\n\n### :bug: Bug Fix\n\n* `vue3-moveable`, `vue-moveable`, `react-moveable`\n    * remove wrong react types #703 ([25dced4](https://github.com/daybrush/moveable/commit/25dced4f1531cc46d77601f71674031aa58fdf0b))\n\n\n### :memo: Documentation\n\n* `vue3-moveable`\n    * Update Vue3-moveable code example (#704) ([21c7629](https://github.com/daybrush/moveable/commit/21c76295808454d158a36fb74028b3dbe7b3466f))\n\n\n### :mega: Other\n\n* All\n    * publish packages ([63e03d1](https://github.com/daybrush/moveable/commit/63e03d1d5f69e56c7df6d357c58d7acd06932e80))\n* `react-moveable`, `react-compat-moveable`\n    * update dragscroll module version ([e9b5864](https://github.com/daybrush/moveable/commit/e9b5864c83853578c4190e792543019e30b017eb))\n\n\n\n## [0.32.0](https://github.com/daybrush/moveable/compare/0.31.2...0.32.0) (2022-07-21)\n### :sparkles: Packages\n* `lit-moveable` 0.9.0\n* `moveable` 0.32.0\n* `preact-moveable` 0.34.0\n* `react-compat-moveable` 0.20.0\n* `react-moveable` 0.35.0\n* `svelte-moveable` 0.24.0\n* `vue-moveable` 2.0.0-beta.26\n* `vue3-moveable` 0.7.0\n* `ngx-moveable` 0.29.0\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add `keepRatioFinally` prop #698 ([bf29635](https://github.com/daybrush/moveable/commit/bf29635ab8a160c9e938213b2477cfec73e8401d))\n    * add move cursor style with edgeDraggable #703 ([9901deb](https://github.com/daybrush/moveable/commit/9901deb3dd51f449edcd75e4f147b9fa671d951e))\n    * support object self type #701 ([99967c2](https://github.com/daybrush/moveable/commit/99967c28f9f0f09ef1891ea1ece4b16a6c10ef43))\n\n\n### :bug: Bug Fix\n\n* `vue3-moveable`, `vue-moveable`\n    * fix files field in package.json #700 ([5130109](https://github.com/daybrush/moveable/commit/51301099b5a9a9764500c09ce61e4bf65c7c60ef))\n* `react-moveable`\n    * calculate size more accurately #698 ([4dd4038](https://github.com/daybrush/moveable/commit/4dd4038c82c9dff272226e3911549249743dff50))\n    * enhance bounds accuracy #699 ([9aee6bd](https://github.com/daybrush/moveable/commit/9aee6bdf0cd9105ef3ef653e18363e21ad4c4b3f))\n    * support shadow root #684 ([8502d07](https://github.com/daybrush/moveable/commit/8502d0795c903e7894d0fad9a6a130cbc543f301))\n\n\n### :mega: Other\n\n* All\n    * publish packages ([da24696](https://github.com/daybrush/moveable/commit/da24696977c24b6ea54a433192d15bb7ecbc62e9))\n* `vue3-moveable`, `react-moveable`, `react-compat-moveable`, `moveable`\n    * update `react-compat-moveable` ([712ae6f](https://github.com/daybrush/moveable/commit/712ae6fb49dec3f4e40a3cd664f63625d7cd5669))\n\n\n\n## [0.31.2](https://github.com/daybrush/moveable/compare/0.31.0...0.31.2) (2022-07-17)\n### :sparkles: Packages\n* `lit-moveable` 0.8.2\n* `moveable` 0.31.2\n* `preact-moveable` 0.33.2\n* `react-compat-moveable` 0.19.2\n* `react-moveable` 0.34.2\n* `svelte-moveable` 0.23.2\n* `vue-moveable` 2.0.0-beta.24\n* `vue3-moveable` 0.6.2\n* `ngx-moveable` 0.28.2\n\n\n### :bug: Bug Fix\n\n* All\n    * fix files field in package.json #700 ([48ce548](https://github.com/daybrush/moveable/commit/48ce548438dd0a7da9f544730b2fc3ab65073775))\n\n\n### :mega: Other\n\n* All\n    * publish packages ([5d89af5](https://github.com/daybrush/moveable/commit/5d89af521d1a288d4d9ca7923e0e9654e8f97d53))\n\n\n\n## [0.31.0](https://github.com/daybrush/moveable/compare/0.30.0...0.31.0) (2022-07-17)\n### :sparkles: Packages\n* `lit-moveable` 0.8.0\n* `moveable` 0.31.0\n* `preact-moveable` 0.33.0\n* `react-compat-moveable` 0.19.0\n* `react-moveable` 0.34.0\n* `svelte-moveable` 0.23.0\n* `vue-moveable` 2.0.0-beta.22\n* `vue3-moveable` 0.6.0\n* `ngx-moveable` 0.28.0\n\n\n### :rocket: New Features\n\n* `react-moveable`\n    * add hideChildMoveableDefaultLines prop #692 ([c691403](https://github.com/daybrush/moveable/commit/c6914031e75712eef6a574d6aaf04645535f59d3))\n    * add setFixedDirection on rotateStart #670 ([093d0b1](https://github.com/daybrush/moveable/commit/093d0b1303c9742a79f73071470ec73306ff2de6))\n    * support edge prop's object type #695 ([699997d](https://github.com/daybrush/moveable/commit/699997d7426110cb199094cd7ac56682723d1cae))\n* Other\n    * add Snappable ([c7bbd98](https://github.com/daybrush/moveable/commit/c7bbd98393f1e8f45219a5dab9e1337187366ab5))\n\n\n### :bug: Bug Fix\n\n* `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `lit-moveable`\n    * fix floating point for min limit size ([766561c](https://github.com/daybrush/moveable/commit/766561c0e785098720c5a0ae6d9da1e2d9d7b879))\n* `svelte-moveable`\n    * change dependencies #680 ([7c01017](https://github.com/daybrush/moveable/commit/7c010170642f68b2ec52cf0ea8e2b569fcd2b634))\n* `react-moveable`\n    * fix guidelines for edgeDraggable #694 ([80f2b44](https://github.com/daybrush/moveable/commit/80f2b44643a0d804df6a65f72583c4d7f6d8ddf7))\n    * fix safari 15 consts ([a140e5b](https://github.com/daybrush/moveable/commit/a140e5b77f623973cf6d27d0ff8ab12e63901004))\n    * fix transform behavior in safari 15 #696 ([eb0a71c](https://github.com/daybrush/moveable/commit/eb0a71cb8aa11c100a3cf2f85e007d6fdb45a2d7))\n    * stop propagation for click control #690 ([1a8f697](https://github.com/daybrush/moveable/commit/1a8f6978ba267632282049b61753bc062d69266f))\n\n\n### :memo: Documentation\n\n* `react-moveable`\n    * add hideChildMoveableDefaultLines docs ([9e02faa](https://github.com/daybrush/moveable/commit/9e02faa5cbd4f5e529a1a58647afd519b0672d3b))\n    * fix typo #685 ([c591b1d](https://github.com/daybrush/moveable/commit/c591b1d8a410a3fa6115fcec51ae21d4027aeaa7))\n\n\n### :mega: Other\n\n* All\n    * publish packages ([2a4940f](https://github.com/daybrush/moveable/commit/2a4940f74997fae24c7d77c553a6bc6be1301d40))\n* `react-moveable`, `react-compat-moveable`\n    * update overlap-area ([be8c4dc](https://github.com/daybrush/moveable/commit/be8c4dc19dbd6d6d7f782c73272cb9878ca21982))\n\n\n\n## [0.30.0](https://github.com/daybrush/moveable/compare/0.29.9...0.30.0) (2022-06-09)\n### :sparkles: Packages\n* `lit-moveable` 0.7.0\n* `moveable` 0.30.0\n* `preact-moveable` 0.32.0\n* `react-compat-moveable` 0.18.0\n* `react-moveable` 0.33.0\n* `svelte-moveable` 0.22.0\n* `vue-moveable` 2.0.0-beta.21\n* `vue3-moveable` 0.5.0\n* `ngx-moveable` 0.27.0\n\n\n### :rocket: New Features\n\n* `react-moveable`, `lit-moveable`\n    * add snap direction foramt (#669) ([52406cc](https://github.com/daybrush/moveable/commit/52406cc8c2a77dc2446dc935681aa9885661b77b))\n* `react-moveable`\n    * add `preventClickDefault` option #671 ([17da69f](https://github.com/daybrush/moveable/commit/17da69ff71c6abe4788603dc729b6bc9dd8f27bc))\n    * add flushSync prop #668 ([068c174](https://github.com/daybrush/moveable/commit/068c174706338f3eedfa3c93beb967b7399e6daa))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `react-compat-moveable`, `moveable`\n    * prevent wheel drag #674 ([e9bea04](https://github.com/daybrush/moveable/commit/e9bea04aec00bd3a2a06918b539c9b02b2a589d5))\n* `react-moveable`\n    * fix groups' setMin, setMax and ratio ([0e2abf1](https://github.com/daybrush/moveable/commit/0e2abf1ae8504334a7118b9e2b6e9cab9c90c91b))\n    * remove peerDependencies ([0aa9869](https://github.com/daybrush/moveable/commit/0aa986952e096cd75def5e0afe9c9b1ac9d4216e))\n\n\n### :mega: Other\n\n* All\n    * publish packages ([b432247](https://github.com/daybrush/moveable/commit/b4322470bcd3bb05fc67d2c89eedd737f8b4b67a))\n\n\n\n## [0.29.9](https://github.com/daybrush/moveable/compare/0.29.8...0.29.9) (2022-06-07)\n### :sparkles: Packages\n* `lit-moveable` 0.6.9\n* `moveable` 0.29.9\n* `preact-moveable` 0.31.9\n* `react-compat-moveable` 0.17.9\n* `react-moveable` 0.32.9\n* `svelte-moveable` 0.21.9\n* `vue-moveable` 2.0.0-beta.20\n* `vue3-moveable` 0.4.9\n* `ngx-moveable` 0.26.9\n\n\n### :rocket: New Features\n\n* `vue-moveable`, `react-moveable`\n    * add clippable keepRatio ([37da849](https://github.com/daybrush/moveable/commit/37da849e81454ea17be4510a81beeef852cfda9f))\n* Other\n    * add snappable package ([aec29c6](https://github.com/daybrush/moveable/commit/aec29c67d8314b9ede95e4320ff29d6c0dac87eb))\n\n\n### :bug: Bug Fix\n\n* `react-moveable`, `react-compat-moveable`, `lit-moveable`\n    * fix minSize for zero size ([c34f298](https://github.com/daybrush/moveable/commit/c34f29803a487098f36f45991ea6dff03bd2750a))\n* `vue3-moveable`, `vue-moveable`\n    * fix commonjs import bug #650 ([15403ce](https://github.com/daybrush/moveable/commit/15403cee70d3f4bf0b9e1311d3bc3086742d7090))\n    * fix vue methods' return value ([cc0cb79](https://github.com/daybrush/moveable/commit/cc0cb7981e90c3973763c4fdde2c9cb03168a300))\n* `react-moveable`\n    * fix [1, 1] direction's bounds #624 ([5108bc3](https://github.com/daybrush/moveable/commit/5108bc33cf9e098cd051e4b7d63b2ac3dc06bf09))\n    * fix changed target getos #657 ([54ef5a0](https://github.com/daybrush/moveable/commit/54ef5a03a781e706293699d1ae25141e215044c9))\n    * fix clippable bounds #659 ([b3986de](https://github.com/daybrush/moveable/commit/b3986de338b2d38e42288c9d2cafe2a2a7da7705))\n    * fix group drag condition ([35c194a](https://github.com/daybrush/moveable/commit/35c194a8fb2aa5051e7f46092418c35821e61890))\n    * fix group gestos for strict mode #656 ([311c931](https://github.com/daybrush/moveable/commit/311c93137f9b8aa53b040cda05e94bbae08e313b))\n    * fix innerBounds for no width, height ([42fe6f3](https://github.com/daybrush/moveable/commit/42fe6f3d45662c2e46280d4d5a6eed0cc9a05e66))\n    * fix svg matrixes #643 ([525ad70](https://github.com/daybrush/moveable/commit/525ad70e2593500188e2a81d2759e726d4277049))\n    * support keepRatio for Clippable ([a934512](https://github.com/daybrush/moveable/commit/a934512d2fc38e4a2fee6b6c5834df1b4f6e503e))\n* `vue-moveable`\n    * fix commonjs issue #650 ([89a5fb6](https://github.com/daybrush/moveable/commit/89a5fb6b4b2c04360db4d341d27668079016a579))\n\n\n### :memo: Documentation\n\n* update handbook.md (#675) ([dfc428b](https://github.com/daybrush/moveable/commit/dfc428bb2526138856de8ed437183993ba6ffeaa))\n\n\n### :house: Code Refactoring\n\n* All\n    * use yarn workspace ([73da295](https://github.com/daybrush/moveable/commit/73da295064845a3791782c1777a9c555272a0af0))\n\n\n### :mega: Other\n\n* All\n    * publish packages ([3530f05](https://github.com/daybrush/moveable/commit/3530f0526081b0c010e6c964265b466713f0212e))\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`\n    * update demo configuration ([917123c](https://github.com/daybrush/moveable/commit/917123cdea2830e8e8f4a8d7b2a99654f16682ef))\n* `react-moveable`\n    * fix types dependencies ([b4a3ee6](https://github.com/daybrush/moveable/commit/b4a3ee6486a81ca14a7c23284818628471369fe0))\n* `moveable`\n    * update dependencies ([9ad9efa](https://github.com/daybrush/moveable/commit/9ad9efa2a180c087cd68c1491f19a6226610567b))\n* Other\n    * fix lerna scripts ([6b6c210](https://github.com/daybrush/moveable/commit/6b6c21005ea028647534e6d11917e1bf8093946e))\n    * update release module ([f00caf5](https://github.com/daybrush/moveable/commit/f00caf55c7913a1b1c007489be5d84a8d6b36fd4))\n\n\n\n## [0.29.8](https://github.com/daybrush/moveable/compare/0.29.6...0.29.8) (2022-05-01)\n### :sparkles: Packages\n* `lit-moveable` 0.6.8\n* `moveable` 0.29.8\n* `preact-moveable` 0.31.8\n* `react-compat-moveable` 0.17.8\n* `react-moveable` 0.32.7\n* `svelte-moveable` 0.21.8\n* `vue-moveable` 2.0.0-beta.15\n* `vue3-moveable` 0.4.8\n* `ngx-moveable` 0.26.8\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix coordinate for position: fixed #653 ([87ba56c](https://github.com/daybrush/moveable/commit/87ba56c5728203b6f4bf2cf0f4f004aee009a625))\n    * skip beforeEvent set to lastEvent #654 ([5ab31c7](https://github.com/daybrush/moveable/commit/5ab31c749c8a331b40a564b365c75223be0736c2))\n\n\n### :mega: Other\n\n* All\n    * update packages versions ([169c484](https://github.com/daybrush/moveable/commit/169c48417bb4bc07c59e227c545e379dbf43d15b))\n* Other\n    * update lerna scripts ([6968e1b](https://github.com/daybrush/moveable/commit/6968e1bd004a29e06deebcca87d132082ac7e2c7))\n\n\n\n## [0.29.6](https://github.com/daybrush/moveable/compare/0.29.5...0.29.6) (2022-04-27)\n### :sparkles: Packages\n* `lit-moveable` 0.6.6\n* `moveable` 0.29.6\n* `preact-moveable` 0.31.6\n* `react-compat-moveable` 0.17.6\n* `react-moveable` 0.32.5\n* `svelte-moveable` 0.21.6\n* `vue-moveable` 2.0.0-beta.13\n* `vue3-moveable` 0.4.6\n* `ngx-moveable` 0.26.6\n\n\n### :mega: Other\n\n* All\n     * update packages versions ([585094f](https://github.com/daybrush/moveable/commit/585094f76ec6e1556159ac357d6ac83ebab953ae))\n\n\n\n## [0.29.5](https://github.com/daybrush/moveable/compare/0.29.4...0.29.5) (2022-04-27)\n### :sparkles: Packages\n* `lit-moveable` 0.6.5\n* `moveable` 0.29.5\n* `preact-moveable` 0.31.5\n* `react-compat-moveable` 0.17.5\n* `react-moveable` 0.32.4\n* `svelte-moveable` 0.21.5\n* `vue-moveable` 2.0.0-beta.12\n* `vue3-moveable` 0.4.5\n* `ngx-moveable` 0.26.5\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix clip bug with draggable, snappable ([b5477ee](https://github.com/daybrush/moveable/commit/b5477ee6a05067a3506bfefac30c36839b264c83))\n* `react-compat-moveable`\n    * fix rollup config #650 ([72c9f99](https://github.com/daybrush/moveable/commit/72c9f99a2d82ebdbc9de6a99ea6ede817a2c1773))\n    * fix rollup config #650 ([b8d1bc7](https://github.com/daybrush/moveable/commit/b8d1bc79ff484e57fcdec43f25c043d8d9b7e7df))\n\n\n### :memo: Documentation\n\n* fix README ([b56937c](https://github.com/daybrush/moveable/commit/b56937c50054d1b30a038cb29f7290b3e7ca8e8f))\n\n\n### :mega: Other\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `react-compat-moveable`, `preact-moveable`, `ngx-moveable`, `moveable`, `lit-moveable`\n    * update packages versions ([5cd2398](https://github.com/daybrush/moveable/commit/5cd2398dbb4dbbda24032641fe5bf111780b75fc))\n* `vue-moveable`\n    * fix lerna-helper field ([faff016](https://github.com/daybrush/moveable/commit/faff016bbaf2da46b4e5633a0a883c2da99b106b))\n* Other\n    * fix lerna scripts ([f7840c4](https://github.com/daybrush/moveable/commit/f7840c422ff2c627d357ca6cbfaf244f8e6d64c1))\n\n\n\n## [0.29.4](https://github.com/daybrush/moveable/compare/0.29.3...0.29.4) (2022-04-26)\n### :sparkles: Packages\n* `lit-moveable` 0.6.4\n* `moveable` 0.29.4\n* `preact-moveable` 0.31.4\n* `react-compat-moveable` 0.17.4\n* `react-moveable` 0.32.4\n* `svelte-moveable` 0.21.4\n* `vue-moveable` 2.0.0-beta.11\n* `vue3-moveable` 0.4.4\n* `ngx-moveable` 0.26.4\n\n\n### :bug: Bug Fix\n\n* `react-moveable`\n    * fix svg transform #643 ([82233ca](https://github.com/daybrush/moveable/commit/82233ca351c4600dea58c6558ccfeaca6a1e8295))\n\n\n### :memo: Documentation\n\n* fix CHANGELOG ([f6886d6](https://github.com/daybrush/moveable/commit/f6886d6dfc52c6d46cb51289862293d6ac3fd50d))\n\n\n### :house: Code Refactoring\n\n* `vue3-moveable`, `vue-moveable`, `svelte-moveable`, `preact-moveable`, `moveable`, `lit-moveable`\n    * apply `lerna` ([a06c1e2](https://github.com/daybrush/moveable/commit/a06c1e20d11a9e01cef1afebc3dcedfcd243fd79))\n* `react-moveable`, `react-compat-moveable`, `ngx-moveable`, `moveable`\n    * move core, storybook packages ([2bc3409](https://github.com/daybrush/moveable/commit/2bc340992c5b414ac887b6a1a90e2a3b4949833e))\n\n\n### :mega: Other\n\n* All\n    * update packages versions ([a62ee58](https://github.com/daybrush/moveable/commit/a62ee58b9bc32f06edc95d55ea28b60c20881ac4))\n* `vue-moveable`, `svelte-moveable`, `react-moveable`, `react-compat-moveable`, `preact-moveable`, `lit-moveable`\n    * upgrade storybook and typescript ([eff23fd](https://github.com/daybrush/moveable/commit/eff23fd7340964ed0e3e6f5930e56558c4d91d18))\n* `vue-moveable`\n    * fix lerna scripts ([8041d2b](https://github.com/daybrush/moveable/commit/8041d2b20f542681bf5abd4792c95531e53b741d))\n* `react-moveable`\n    * update typescript version ([a63ee9f](https://github.com/daybrush/moveable/commit/a63ee9f575d701f24748d48ac92484f6c259577f))\n* Other\n    * fix lerna scripts ([c348e99](https://github.com/daybrush/moveable/commit/c348e9998f471a475a36e884bf2f73b26ca58e64))\n    * fix release script ([2de407a](https://github.com/daybrush/moveable/commit/2de407a1e5aca0c196bc545c47f1fce721f5a77f))\n    * Release 0.29.3 ([657c900](https://github.com/daybrush/moveable/commit/657c90008181d1ba1567cfcb119bbda51b395130))\n    * update lerna module ([0c87482](https://github.com/daybrush/moveable/commit/0c8748245e5735bdfe2a7c141782c07b940755a1))\n\n\n\n\n## [0.29.3] - 2022-04-19\n* `moveable` 0.29.3\n* `react-moveable` 0.32.3\n* `preact-moveable` 0.31.3\n* `ngx-moveable` 0.25.3\n* `svelte-moveable` 0.19.3\n* `lit-moveable` 0.6.3\n* `vue-moveable` 2.0.0-beta.10\n* `vue3-moveable` 0.4.3\n\n### Fixed\n* fix fixed direction for scalable #624\n* Support concurrent mode #640\n\n## [0.29.2] - 2022-04-18\n* `moveable` 0.29.2\n* `react-moveable` 0.32.2\n* `preact-moveable` 0.31.2\n* `ngx-moveable` 0.25.2\n* `svelte-moveable` 0.19.2\n* `lit-moveable` 0.6.2\n* `vue-moveable` 2.0.0-beta.9\n* `vue3-moveable` 0.4.2\n\n### Fixed\n* fix `setFixedDirection` for group #624\n* fix `dist` for group #639\n\n## [0.29.1] - 2022-04-16\n* `moveable` 0.29.1\n* `react-moveable` 0.32.1\n* `preact-moveable` 0.31.1\n* `ngx-moveable` 0.25.1\n* `svelte-moveable` 0.19.1\n* `lit-moveable` 0.6.1\n* `vue-moveable` 2.0.0-beta.8\n* `vue3-moveable` 0.4.1\n\n### Fixed\n* fix `resizeFormat`\n\n## [0.29.0] - 2022-04-15\n* `moveable` 0.29.0\n* `react-moveable` 0.32.0\n* `preact-moveable` 0.31.0\n* `ngx-moveable` 0.25.0\n* `svelte-moveable` 0.19.0\n* `lit-moveable` 0.6.0\n* `vue-moveable` 2.0.0-beta.7\n* `vue3-moveable` 0.4.0\n\n### Added\n* add `keepRatio` in `Resizable`, `Scalable` request #638\n* add `beforeScale`, `beforeResize` events #623 #624\n* add `resizeFormat` option #624\n* add `beforeRotate`, `beforeRoateGroup` events\n\n### Fixed\n* fix dragArea is null #636\n* fix dragStart method #629\n* fix fixedDirection #624\n* fix form element select #631\n* fix forceUpdate types\n* remove useless param\n\n## [0.28.0] - 2022-03-14\n* `moveable` 0.28.0\n* `react-moveable` 0.31.1\n* `preact-moveable` 0.30.0\n* `ngx-moveable` 0.24.0\n* `svelte-moveable` 0.18.0\n* `lit-moveable` 0.5.0\n* `vue-moveable` 2.0.0-beta.6\n* `vue3-moveable` 0.3.0\n\n### Added\n* add `events` property for groupEnd events #610\n* add `useResizeObserver` prop #603\n* add `forceUpdate` method #568\n* add `transform` property on render events\n\n### Fixed\n* fix ngx-moveable's inputs, outputs\n* fix clippable transform #608\n* fix svg matrix #602\n* prevent click event #600\n* optimize the update #568\n* fix custom ables' class name #583\n* fix zoomed cursor #589 #591\n* fix scaled container for frameworks #578\n* fix className is null and crushing clippable with svg without classes (#584)\n* fix svelt ssr #513\n* fix Clippable's rotationRad\n* fix rotation for custom defined handlers\n\n\n\n## [0.27.2] - 2021-11-16\n* `moveable` 0.27.2\n* `react-moveable` 0.30.2\n* `preact-moveable` 0.29.2\n* `ngx-moveable` 0.23.2\n* `svelte-moveable` 0.18.2\n* `lit-moveable` 0.4.2\n* `vue-moveable` 2.0.0-beta.5\n* `vue3-moveable` 0.2.2\n\n\n### Fixed\n* fix dependencies #553\n* fix elementGuidelines #555\n* fix vue types #557\n\n\n## [0.27.1] - 2021-11-10\n* `moveable` 0.27.1\n* `react-moveable` 0.30.1\n* `preact-moveable` 0.29.1\n* `ngx-moveable` 0.23.1\n* `svelte-moveable` 0.18.1\n* `lit-moveable` 0.4.1\n* `vue-moveable` 2.0.0-beta.3\n* `vue3-moveable` 0.2.1\n\n\n### Fixed\n* fix group matrix #545\n* fix start element rects #548\n\n\n## [0.27.0] - 2021-11-09\n* `moveable` 0.27.0\n* `react-moveable` 0.30.0\n* `preact-moveable` 0.29.0\n* `ngx-moveable` 0.23.0\n* `svelte-moveable` 0.18.0\n* `lit-moveable` 0.4.0\n* `vue-moveable` 2.0.0-beta.2\n* `vue3-moveable` 0.2.0\n\n### Added\n* add `hideDefaultLines` prop #521\n* add `snapDirections`, `elementSnapDirections` #511\n\n### Fixed\n* fix `throttleDrag` for group #542\n* fix property order #540\n* fix target transform #533\n* trigger click event #543\n* `clipTargetBounds` ignores `dragWithClip` #520\n* fix zoom matrix #519\n\n### Removed\n* Remove `snapCenter`, `snapHorizontal`, `snapVertical`, `snapElement` (Use `snapDirections`, `elementSnapDirections`)\n    * `snapCenter: true` same as `snapDirections: { center: true, middle: true }`, `elementSnapDirections: { center: true, middle: true }`\n    * `snapHorizontal: true` same as `snapDirections: { top: true, bottom: true }`,\n    * `snapVertical: true` same as `snapDirections: { left: true, right: true }`,\n\n\n## [0.26.0] - 2021-07-11\n* `moveable` 0.26.0\n* `react-moveable` 0.29.0\n* `preact-moveable` 0.28.0\n* `ngx-moveable` 0.22.0\n* `svelte-moveable` 0.17.0\n* `lit-moveable` 0.3.0\n* `vue-moveable` 2.0.0-beta.0\n* `vue3-moveable` 0.1.0\n\n### Added\n* Add `vue-moveable` package\n* Add `vue3-moveable` package\n* Support multi state\n\n### Fixed\n* Fix svg matrix #498\n* prevent click event for capturing #490\n* Fix types\n\n\n## [0.25.3] - 2021-06-18\n* `moveable` 0.25.3\n* `react-moveable` 0.28.3\n* `preact-moveable` 0.27.3\n* `ngx-moveable` 0.21.3\n* `svelte-moveable` 0.16.3\n* `lit-moveable` 0.2.3\n\n### Fixed\n* Fix snap to grid (bottom) #491\n* Prevent click event #490\n* Fix Native Event for dragArea or group\n* Fix start original transform\n\n\n## [0.25.2] - 2021-06-16\n* `moveable` 0.25.2\n* `react-moveable` 0.28.2\n* `preact-moveable` 0.27.2\n* `ngx-moveable` 0.21.2\n* `svelte-moveable` 0.16.2\n* `lit-moveable` 0.2.2\n\n### Fixed\n* Fixed the problem that left and top dashed guidelines were not visible\n\n\n## [0.25.1] - 2021-06-16\n* `moveable` 0.25.1\n* `react-moveable` 0.28.1\n* `preact-moveable` 0.27.1\n* `ngx-moveable` 0.21.1\n* `svelte-moveable` 0.16.1\n* `lit-moveable` 0.2.1\n\n### Added\n* Add `snapContainer` prop #487\n* Add `snapGridWidth`, `snapGridHeight` props #482\n* Add `isDisplayInnerSnapDigit` prop #456\n\n\n### Fixed\n* Support svg able #462\n* Support start transform for 1.0.0\n* Remove overlapping guidelines\n\n\n## [0.24.6] - 2021-04-21\n* `moveable` 0.24.6\n* `react-moveable` 0.27.7\n* `preact-moveable` 0.26.5\n* `ngx-moveable` 0.20.6\n* `svelte-moveable` 0.15.\n* `lit-moveable` 0.1.6\n\n### Fixed\n* Fix svg transform container #446\n* Fix onRoundEnd event #440\n\n## [0.24.5] - 2021-03-30\n* `moveable` 0.24.5\n* `react-moveable` 0.27.5\n* `preact-moveable` 0.26.4\n* `ngx-moveable` 0.20.5\n* `svelte-moveable` 0.15.5\n* `lit-moveable` 0.1.5\n\n### Fixed\n* Update `@scena/dragscroll` #435\n\n\n## [0.24.4] - 2021-03-22\n* `moveable` 0.24.4\n* `react-moveable` 0.27.4\n* `preact-moveable` 0.26.3\n* `ngx-moveable` 0.20.4\n* `svelte-moveable` 0.15.4\n* `lit-moveable` 0.1.4\n\n### Fixed\n* remove console.log #430\n\n\n\n\n## [0.24.3] - 2021-03-20\n* `moveable` 0.24.3\n* `react-moveable` 0.27.2\n* `preact-moveable` 0.26.2\n* `ngx-moveable` 0.20.3\n* `svelte-moveable` 0.15.3\n* `lit-moveable` 0.1.3\n\n### Fixed\n* Resizable not working if the immediate parent of the target has 'display:flex' #430\n\n\n\n\n## [0.24.2] - 2021-03-20\n* `moveable` 0.24.2\n* `react-moveable` 0.27.1\n* `preact-moveable` 0.26.1\n* `ngx-moveable` 0.20.2\n* `svelte-moveable` 0.15.2\n* `lit-moveable` 0.1.2\n\n### Fixed\n* Change Moveable control box to use translate3d for z-index support in Safari #433\n* groups request(\"resizable\") TypeError: Cannot read property 'target' of undefined #432\n* Fix resizable ratio\n\n\n\n## [0.24.1] - 2021-03-15\n* `moveable` 0.24.1\n* `react-moveable` 0.27.0\n* `preact-moveable` 0.26.0\n* `ngx-moveable` 0.20.1\n* `svelte-moveable` 0.15.1\n* `lit-moveable` 0.1.1\n\n### Added\n* add setRatio function property on scaleStart\n\n### Fixed\n* can't resize more than 100px if max-width/height set to 100% #430\n* Cannot assign to 'x' because it is a read-only property. #429\n* If the container is scaled, call Moveable.request(\"draggable\") translate error React #428\n* Scale is not accurately following the cursor when aspect ratio is fixed and the target isn't scaled 1:1 #426\n\n\n## [0.23.1] - 2021-02-14\n* `moveable` 0.23.1\n* `react-moveable` 0.26.2\n* `preact-moveable` 0.25.2\n* `ngx-moveable` 0.19.1\n* `svelte-moveable` 0.14.1\n\n### Fixed\n* Snap guideline disappear after left changed #415 #416\n\n\n## [0.23.0] - 2021-01-28\n* `moveable` 0.23.0\n* `react-moveable` 0.26.0\n* `preact-moveable` 0.25.0\n* `ngx-moveable` 0.19.0\n* `svelte-moveable` 0.14.0\n\n### Added\n* Add `rotationTarget` prop #381\n* Add `portalContainer` prop #391\n* Add `className` property in elementGuidelines #397\n\n### Fixed\n* Support svg's `g` tag #407\n* Fix rotation cursor #406\n* Update element guidelines during drag #404\n\n## [0.22.2] - 2021-01-08\n* `moveable` 0.22.2\n* `react-moveable` 0.25.1\n* `preact-moveable` 0.24.1\n* `ngx-moveable` 0.18.2\n* `svelte-moveable` 0.13.2\n\n### Fixed\n* Fix SVG position #390\n* Fix Warpable matrix\n\n\n## [0.22.1] - 2021-01-04\n* `moveable` 0.22.1\n* `react-moveable` 0.25.0\n* `preact-moveable` 0.24.0\n* `ngx-moveable` 0.18.1\n* `svelte-moveable` 0.13.1\n\n### Fixed\n* Fix number type rendering #386\n\n\n## [0.22.0] - 2020-12-22\n* `moveable` 0.22.0\n* `react-moveable` 0.25.0\n* `preact-moveable` 0.24.0\n* `ngx-moveable` 0.18.0\n* `svelte-moveable` 0.13.0\n\n### Added\n* Support Custom Able\n* Support Tree Shaking (React)\n* Support live element guidelines #317\n* Support partial element guidelines #357\n* Add `setFixedDirection`, `setRatio` properties in Resizable, Scalable #355 #362\n* Add `absoluteDist`, `absoluteDelta`, `absoluteRotate` properties #377\n* Support function element type\n\n### Fixed\n* Fix SVG deletion #359\n* Fix Group's dragTarget #373\n* Fix Groups' updateTarget #366\n* Fix floating point issue  #376\n* Fix snapCenter caculation\n* Fix guideline scale #380\n\n## [0.21.1] - 2020-11-16\n* `moveable` 0.21.1\n* `react-moveable` 0.24.1\n* `preact-moveable` 0.23.1\n* `ngx-moveable` 0.17.1\n* `svelte-moveable` 0.12.1\n\n### Fixed\n* Fix rotataionPosition's calculation #353\n* Fix zoom pixel cracking problem\n\n\n## [0.21.0] - 2020-11-08\n* `moveable` 0.21.0\n* `react-moveable` 0.24.0\n* `preact-moveable` 0.23.0\n* `ngx-moveable` 0.17.0\n* `svelte-moveable` 0.12.0\n\n### Added\n* Add `individualGroupable` prop\n* Add `getManager` method\n* Add `mouseEnter`, `mouseLeave` events #342\n* Add `props` prop for custom ables\n\n### Fixed\n* Fix `edgeDraggable` prop #330\n* Change `hitTest`, `isInside` algorithm.\n\n## [0.20.0] - 2020-10-28\n* `moveable` 0.20.0\n* `react-moveable` 0.23.0\n* `preact-moveable` 0.22.0\n* `ngx-moveable` 0.16.0\n* `svelte-moveable` 0.11.0\n\n## [0.20.1] - 2020-10-31\n* `moveable` 0.20.1\n* `react-moveable` 0.23.1\n* `preact-moveable` 0.22.1\n* `ngx-moveable` 0.16.1\n* `svelte-moveable` 0.11.1\n\n### Fixed\n* fix typo #343\n\n## [0.20.0] - 2020-10-28\n* `moveable` 0.20.0\n* `react-moveable` 0.23.0\n* `preact-moveable` 0.22.0\n* `ngx-moveable` 0.16.0\n* `svelte-moveable` 0.11.0\n\n### Added\n* Add `minRoundControls`, `maxRoundControls`, `roundClickable` props for roundable #338\n* Add `edgeDraggable` prop #330\n\n### Fixed\n* Fix rotation direction #332\n* Fix svg transform origin in safari #334\n* Fix svg className #337\n* when rotate to 90/180/270 deg, resize bug. #333\n\n\n## [0.19.4] - 2020-10-10\n* `moveable` 0.19.4\n* `react-moveable` 0.22.6\n* `preact-moveable` 0.21.6\n* `ngx-moveable` 0.15.4\n* `svelte-moveable` 0.10.5\n\n### Fixed\n* remove console.log for npm #329\n\n\n## [0.19.3] - 2020-09-19\n* `moveable` 0.19.3\n* `react-moveable` 0.22.6\n* `preact-moveable` 0.21.5\n* `ngx-moveable` 0.15.3\n* `svelte-moveable` 0.10.4\n\n### Fixed\n* Fix svelte-moveable types #320\n* Fix rootContainer is not worked #318\n\n## [0.19.2] - 2020-09-16\n* `moveable` 0.19.2\n* `react-moveable` 0.22.5\n* `preact-moveable` 0.21.4\n* `ngx-moveable` 0.15.2\n* `svelte-moveable` 0.10.2\n\n### Fixed\n* Fix dragging a control and dragging does not occur on the target\n\n## [0.19.1] - 2020-09-15\n* `moveable` 0.19.1\n* `react-moveable` 0.22.3\n* `preact-moveable` 0.21.3\n* `ngx-moveable` 0.15.1\n* `svelte-moveable` 0.10.1\n\n### Added\n* Export `getElementInfo` function (moveable, react-moveable)\n* Add `translateZ` prop. #302\n* Support `click`, `clickGroup` event for no `dragArea` #309\n* Add `passDragArea` prop #309\n* Add `clipVerticalGuidelines`, `clipHorizontalGuidelines`, `clipTargetBounds`, `clipSnapThreshold` props #292\n* Support target's string, React.RefObject type #275 #290\n\n### Fixed\n* Support Tree Shaking #15\n* Change `Dragger` to `gesto`\n* Fix agent issue #310\n* resizable request is not worked #312\n\n\n## [0.18.5] - 2020-07-17\n* `moveable` 0.18.5\n* `react-moveable` 0.21.6\n* `preact-moveable` 0.20.7\n* `ngx-moveable` 0.14.3\n* `svelte-moveable` 0.9.3\n\n### Fixed\n* Fix Safari Offset Calculation #285\n* Fix SVG Transform Origin Calculation #286\n* Fix SVG ClientSize Calculation #288\n\n\n## [0.18.4] - 2020-07-15\n* `moveable` 0.18.4\n* `react-moveable` 0.21.5\n* `preact-moveable` 0.20.6\n* `ngx-moveable` 0.14.2\n* `svelte-moveable` 0.9.2\n\n### Fixed\n* Remove react types #273 #284\n\n\n\n## [0.18.3] - 2020-07-14\n* `moveable` 0.18.3\n* `react-moveable` 0.21.4\n* `preact-moveable` 0.20.5\n* `ngx-moveable` 0.14.1\n* `svelte-moveable` 0.9.1\n\n### Fixed\n* Remove react types #284\n\n## [0.18.2] - 2020-07-13\n* `moveable` 0.18.2\n* `react-moveable` 0.21.3\n* `preact-moveable` 0.20.4\n* `ngx-moveable` 0.14.0\n* `svelte-moveable` 0.9.0\n\n### Added\n* Add `roundable` props\n* Add `originDraggable` props #169\n* Add `clippable` props\n* Add `cspNonce` props #279\n* Add `setMin`, `setMax` property in resizable event #231 #256\n* Add `top-left`, `top-right`, ...etc 8 direction value for rotatable #259\n* Add `moveable-dragging` className #268\n* Add `lastEvent` property #262\n\n### Fixed\n* Fix angular dependecies #274\n* Fix `@daybrush/utils` types #273\n* Fix zero dist issue #264\n* Fix that innerBounds not works and change bounds color\n\n## [0.17.10] - 2020-06-08\n* `moveable` 0.17.10\n* `react-moveable` 0.20.10\n* `preact-moveable` 0.19.10\n* `ngx-moveable` 0.13.11\n* `svelte-moveable` 0.8.11\n\n\n### Fixed\n* resize could go outside the configured boundaries #253\n\n\n## [0.17.9] - 2020-06-05\n* `moveable` 0.17.9\n* `react-moveable` 0.20.9\n* `preact-moveable` 0.19.9\n* `ngx-moveable` 0.13.10\n* `svelte-moveable` 0.8.10\n\n\n### Fixed\n* Fix Resize issue when container has keepRatio + rotated + with snapGuideLines #235 #251 #253\n* Fix contextmenu issue #252\n\n\n\n## [0.17.8] - 2020-05-31\n* `moveable` 0.17.8\n* `ngx-moveable` 0.13.9\n* `svelte-moveable` 0.8.9\n\n### Fixed\n* Fix CSS's camelized name issue #243\n\n\n\n## [0.17.7] - 2020-05-30\n* `moveable` 0.17.7\n* `react-moveable` 0.20.8\n* `preact-moveable` 0.19.8\n* `ngx-moveable` 0.13.8\n* `svelte-moveable` 0.8.8\n\n### Fixed\n* Fix CSS's camelized name issue #243\n* Fix wrong maxWidth, maxHeight calculation issue for `innerBounds` and `bounds`  #221 #245 #241 #235\n* Remove `@types/react` , `@types/react-dom` #240\n* Fix `@daybrush/drag`'s version issue #239\n\n\n## [0.17.6] - 2020-05-18\n* `moveable` 0.17.6\n* `react-moveable` 0.20.7\n* `preact-moveable` 0.19.7\n* `ngx-moveable` 0.13.7\n* `svelte-moveable` 0.8.7\n\n### Fixed\n* Fix firefox's getBoundingClientRect issue #234\n* Fix that zoom is not working\n\n## [0.17.5] - 2020-05-07\n* `moveable` 0.17.5\n* `react-moveable` 0.20.6\n* `preact-moveable` 0.19.6\n* `ngx-moveable` 0.13.6\n* `svelte-moveable` 0.8.6\n\n### Fixed\n* Fix client position #220\n* Calculate min, max size for Resizable #231\n\n## [0.17.4] - 2020-05-05\n* `moveable` 0.17.4\n* `react-moveable` 0.20.5\n* `preact-moveable` 0.19.5\n* `ngx-moveable` 0.13.5\n* `svelte-moveable` 0.8.5\n\n### Fixed\n* Fix that getElement() is not a function #228\n\n## [0.17.3] - 2020-05-05\n* `moveable` 0.17.3\n* `react-moveable` 0.20.4\n* `preact-moveable` 0.19.4\n* `ngx-moveable` 0.13.4\n* `svelte-moveable` 0.8.4\n\n### Fixed\n* Fix duplicated drag are and padding area.\n* Fix that click event is not fired. #228\n\n## [0.17.2] - 2020-05-03\n* `moveable` 0.17.2\n* `react-moveable` 0.20.3\n* `preact-moveable` 0.19.3\n* `ngx-moveable` 0.13.2\n* `svelte-moveable` 0.8.2\n\n### Fixed\n* Fix padding's background color\n* Fix first rendering issue\n\n## [0.17.1] - 2020-05-03\n* `moveable` 0.17.1\n* `react-moveable` 0.20.1\n* `preact-moveable` 0.19.1\n* `ngx-moveable` 0.13.1\n* `svelte-moveable` 0.8.1\n\n### Added\n* Add `padding`, `dragTarget` props #148 #127 #156 #217\n* Add `snapDistFormat` props #222 #209 #229\n* Add `pinchOutside` props  #139\n* Add `hitTest` method #226\n\n### Fixed\n* Error: @Output click not initialized in 'NgxMoveableComponent' #228\n* In main demo, if the keyboard arrow is held down, drag feature eventually breaks #225\n* Moveable.request does not work in groupable #220\n* Element Guidelines when parent is scaled #219\n\n\n## [0.16.3] - 2020-04-04\n* `moveable` 0.16.3\n* `react-moveable` 0.19.2\n* `preact-moveable` 0.18.2\n* `ngx-moveable` 0.12.2\n* `svelte-moveable` 0.7.2\n\n### Fixed\n* isPinch is undefined during onDrag (when actually pinching on mobile) #212, #213\n* Pinch Central Problem #139\n\n\n## [0.16.2] - 2020-04-01\n* `moveable` 0.16.2\n* `react-moveable` 0.19.1\n* `preact-moveable` 0.18.1\n* `ngx-moveable` 0.12.1\n* `svelte-moveable` 0.7.1\n\n### Fixed\n* Fix SVG Firefox Issue #211\n* when isDisplaySnapDigit={false} the number is displayed but set to 0 #200\n\n\n## [0.16.1] - 2020-03-31\n* `moveable` 0.16.1\n* `react-moveable` 0.19.0\n* `preact-moveable` 0.18.0\n* `ngx-moveable` 0.12.0\n* `svelte-moveable` 0.7.0\n\n### Added\n* Add `snapGap` props #200\n* Add `onSnap` event #204\n* Add `triggerAblesSimultaneously` props #207\n* Add `isDragging` method\n\n### Fixed\n* scrollGroup is not working #208\n* Race condition when react-moveable is unmounted bug #197\n* Resizing diagonal corners didn't snap.\n\n## [0.15.2] - 2020-03-05\n* `moveable` 0.15.2\n* `react-moveable` 0.18.1\n* `preact-moveable` 0.17.1\n* `ngx-moveable` 0.11.1\n* `svelte-moveable` 0.6.1\n\n\n### Fixed\n* Fix rootContainer for 2d transform #137\n\n## [0.15.1] - 2020-03-05\nhttps://github.com/daybrush/moveable/milestone/8\n\n* `moveable` 0.15.1\n* `react-moveable` 0.18.0\n* `preact-moveable` 0.17.0\n* `ngx-moveable` 0.11.0\n* `svelte-moveable` 0.6.0\n\n### Added\n* Support `scrollable`, `onScroll` for resizable, scalable #180\n* Add `zoom` props #158\n* Add `rootContainer` props with Absolute Container Matrix(SVG, elementGuidelines is not supported) #137 #163\n* Add `snapDigit` props #173\n* Add `isDisplaySnapDigit` props #186\n* Add `innerBounds` props #172\n* Add `request` method (Draggable, Resizable, Rotatable, Scalable) #141\n\n### Fixed\n* Fix Portal issue #187\n\n## [0.14.1] - 2020-02-05\n* `moveable` 0.14.1\n* `ngx-moveable` 0.10.1\n* `svelte-moveable` 0.5.1\n\n### Fixed\n* Update `react-simple-compat` 0.1.2.\n* When I set the property target of moveable to array, it will not work！ #171\n\n## [0.14.0] - 2020-02-03\n* `moveable` 0.14.0\n* `react-moveable` 0.17.0\n* `preact-moveable` 0.16.0\n* `ngx-moveable` 0.10.0\n* `svelte-moveable` 0.5.0\n\n### Added\n* Add `throttleDragRotate` #145\n* Support for displaying snap distances in elementGuidelines #142\n* Support bounds for a rotated system #106 #163\n\n### Fixed\n* Change `preact` to `react-simple-compat` #129\n* Change Rotation handle CSS #167\n* Fixed an issue where the origin was reset when the `resizable` option was toggled #168\n* Change the scrollable behavior to `@scnea/dragscroll`\n\n## [0.13.4] - 2020-01-12\n* `moveable` 0.13.4\n* `react-moveable` 0.16.6\n* `preact-moveable` 0.15.5\n* `ngx-moveable` 0.9.4\n* `svelte-moveable` 0.4.4\n\n### Fixed\n* Fixed that control points rotation is wrong bug #151\n* Fixed that Scrollable isn't working. (wrong calculation) #150\n* Fixed that Crash of ngx-moveable when using --prod on angular bug #129\n\n## [0.13.3] - 2019-12-30\n* `moveable` 0.13.3\n* `react-moveable` 0.16.4\n* `preact-moveable` 0.15.3\n* `ngx-moveable` 0.9.3\n* `svelte-moveable` 0.4.3\n\n### Fixed\n* Fixed the problem that resize and scale occur simultaneously\n* Change CSS Module (css-styler => css-styled)\n* Update @moveable/matrix #128\n\n## [0.13.2] - 2019-12-26\n* `moveable` 0.13.2\n* `react-moveable` 0.16.3\n* `preact-moveable` 0.15.2\n* `ngx-moveable` 0.9.2\n* `svelte-moveable` 0.4.2\n\n### Fixed\n* Fixed error that warp event does not occur in warpable.\n* Fixed minor differences in Snappable #121\n* Fixed a problem where the scale of a group was only keepRatio. #124\n* Fixed pinchable not working.\n* Fixed snappable not working. #127\n* Update @moveable/matrix #128\n\n## [0.13.1] - 2019-12-13\n### Fixed\n* Fix Snappable for dymaic guidelines (vertical, horizontal) #119\n* Element snaps with elementGuideline and verticalGuideline at the same posiiton #121\n\n## [0.13.0] - 2019-12-12\n* `moveable` 0.13.0\n* `react-moveable` 0.16.1\n* `preact-moveable` 0.15.0\n* `ngx-moveable` 0.9.0\n* `svelte-movable` 0.4.0\n\n### Added\n* Add `snapVertical`, `snapHorizontal`, `snapElement` props. #119\n* Add `set` method on rotateGroup event. #107\n* Add dashed line in element guidelines. #120\n\n### Fixed\n* moveable-control is abnormally rotated. #115\n* Element snaps with elementGuideline and verticalGuideline at the same posiiton #121\n* Huge width value on resizing rotated element on guidelines #122\n* Weird snapping with rotated groupables #112\n* Input box failed to get focus #110\n* Snappable with Scalable does not work. #108\n\n## [0.12.0] - 2019-11-28\n### Added\n* Add `defaultGroupRotate` props. #102\n\n### Fixed\n* Fix that `clickGroup` does not trigger after rotating #103\n* Fix that at certain angles, moveable-control handle gets cut #104\n* Fix that Element \"sliding\" when resizing #104\n\n## [0.11.1] - 2019-11-23\n### Fixed\n* Fix Resizable's base direction calculation\n\n## [0.11.0] - 2019-11-23\n### Added\n* Add `baseDirection` props.\n* Add `offsetWidth`, `offsetHeight` in `getRect`'s method return value. #99\n\n### Fixed\n* Fix Resizable's wrong position calculation #99\n* Fixed the problem that resize can't snap\n\n\n## [0.10.8] - 2019-11-21\n### Fixed\n* Fix Resizable's wrong position calculation\n* Fixes incorrect import issue in Preact.\n\n\n## [0.10.5] - 2019-11-15\n### Fixed\n* Fixed calculation of client, offset position considering borderWidth.\n* Fixed zero scale\n\n\n## [0.10.4] - 2019-11-15\n### Fixed\n* Fixes incorrect calculation when parent element is static in safari.\n\n## [0.10.2] - 2019-11-12\n### Fixed\n* Fix that scale or resize with `keepRatio`, snap is wrong.\n\n## [0.10.1] - 2019-11-12\n### Fixed\n* Fix that guidelines do not appear when dragging.\n\n## [0.10.0] - 2019-11-09\n### Added\n* Add `scrollable` props. #39\n    * Add `onScroll`, `onScrollGroup` event\n    * Add `scrollContainer` props\n    * Add `getScrollPosition` props\n* Add `currentTarget` and `inputEvent` on all events #74 #86\n* Add `setState` method #82\n* Add `getRect` method #71\n* Add `renderDirection` props #63\n* Add `className` props #53 #63\n* Add `onClick` event\n* Add `onRenderStart`, `onRender`, `onRenderEnd` events #52\n* Add `onRenderGroupStart`, `onRenderGroup`, `onRenderGroupEnd` events #52\n* Add `warp` in top, right, bottom and left directions.\n\n### Fixed\n* Fix target's boundingRect matrix calculation with scroll position\n* Fix problem where the ratio is not maintained with keepRatio #70\n* Fix that `el is undefined` #73\n* Fix `dragArea`'s calculation\n* Fix that `dragStart` method is not work with group\n* Fix that `clickGroup` event occurs when `dragStart` a mousedown target\n* Fix that Moveable is deleted when a single target is changed to multiple targets\n\n## [0.9.8] - 2019-10-26\n### Fixed\n* Fix that miscalculate static parent's offset position\n* Fix dragArea's transformOrigin\n\n## [0.9.7] - 2019-10-16\n### Fixed\n* Fix typo that `elemenGuildelines` to `elementGuidelines` #62\n\n\n## [0.9.6] - 2019-10-14\n### Fixed\n* Update PreactX\n* fix that setState is not a function #56\n\n## [0.9.5] - 2019-10-02\n### Fixed\n* fix that parent drag event occur snap.\n\n## [0.9.4] - 2019-10-02\n### Fixed\n* fix that resizing north, west direction occur decimal point issue.\n* Disable pinchable with snappable.\n* Fix offset calculation for Webkit\n\n## [0.9.3] - 2019-10-01\n### Fixed\n* fix that keepRatio want to behave like sketches and illustrators. #47\n* fix keepRatio default false\n\n\n## [0.9.2] - 2019-10-01\n### Fixed\n* fix that bounds don't apply when snap\n\n## [0.9.1] - 2019-09-30\n### Fixed\n* remove console.log\n\n## [0.9.0] - 2019-09-29\n### Added\n* Add Snappable (Drag, Resize, Scale, Warp) (#6)\n* Add `horizontalGuidelines` & `verticalGuidelines` & `elementGuidelines` (#6)\n* Add `bounds` option (boundaries) (#23, #24)\n* Add `rotationPositoin` option for rotation handle position (#40)\n* Add `dragArea` option (#38)\n* Add `dragStart` event on `resizeStart`, `scaleStart`. (#9)\n* Add `drag` event on `resize`, `scale`. (#9)\n* Add `set` parameter function on `warpStart`.\n\n\n### Fixed\n* north and west controls want to behave like photoshop (#9)\n* Fix offset calculation for Webkit\n\n\n## [0.8.0] - 2019-08-28\n### Added\n- Add `pinchThreshold` option that set minimum distance to pinch easily.\n- Add `events` parameter for all `groupStart` event. (such as `onDragGroupStart`, `onScaleGroupStart`, ...etc)\n- Add `clickGroup` event to find clicked target in the group\n- Add `set` event method for all `start` event for absolute value. (such as `onDragStart`, `onScaleStart`, ...etc) #16\n- Add `dragStart` method for external mouse, touch event.\n- Add `isInside` method that the coordinates are inside Moveable\n\n\n### Fixed\n- Update @daybrush/drag@0.9.1\n- Fix the way dist is used in `onScale` event\n\n## [0.7.5] - 2019-08-24\n### Fixed\n- Update @daybrush/drag@0.8.2\n\n## [0.7.4] - 2019-08-24\n### Fixed\n- Fix that pinch does not occur when pressed at the same time.\n- Fix that scrolls and drags occur simultaneously and racks occur. #27\n- Fix that mis-calculating when a static element is a parent.1 #28\n- Fix that destroy() error #30\n\n## [0.7.3] - 2019-08-23\n### Fixed\n- Fix infinite loop issue.\n\n## [0.7.2] - 2019-08-21\n### Fixed\n- Remove react types.\n\n## [0.7.1] - 2019-08-20\n### Fixed\n- Remove unnecessary code.\n\n## [0.7.0] - 2019-08-20\n### Added\n- Add [Groupable](https://github.com/daybrush/moveable/blob/master/groupable.md)\n- Add edge option\n\n### Fixed\n- fix that do not call `resizeEnd` #19\n\n\n## [0.6.4] - 2019-08-07\n### Fixed\n- fix ESM config\n\n## [0.6.3] - 2019-08-07\n### Fixed\n- fix missing throttleScale\n\n## [0.6.2] - 2019-08-07\n### Fixed\n- Update framework-utils and It reduced sizes by 2 kb based on min file.\n\n## [0.6.1] - 2019-08-06\n### Fixed\n- fix destroy method for property release issue. #18\n\n## [0.6.0] - 2019-08-06\n### Added\n- Support SVG Elements #13\n- Support SVG Transform Origin in Safari, iOS #13\n- Add datas parameter to send data #12\n- Add pinchable option and events #11\n\n### Fixed\n* The default value of `container` option is fixed to `parentElement`.\n* Fix Rotatable for distorted axis.\n\n## [0.5.0] - 2019-07-31\n### Added\n- Add destroy method. #14\n\n### Fixed\n- Fix that the getter method gets incorrect values.\n\n## [0.4.1] - 2019-07-29\n### Fixed\n- Fix that the `warpEnd` event didn't call\n\n## [0.4.0] - 2019-07-29\n### Added\n- Add Warpable and option, events\n- Support SVG Offset (Only SVG Tag)\n- Support 3d transform(matrix) (`perspective` is not yet supported.)\n\n### Fixed\n- Fix right mouse click issue #7\n- Synchronize target's shape. (Previously, it worked independently of target's shape.)\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
  },
  {
    "path": "README.md",
    "content": "<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/logo.png\"/></p>\n<h2 align=\"middle\">Moveable</h2>\n<p align=\"middle\">\n<a href=\"https://opencollective.com/moveable\" alt=\"Financial Contributors on Open Collective\"><img src=\"https://opencollective.com/moveable/all/badge.svg?label=financial+contributors\" /></a>\n <a href=\"https://www.npmjs.com/package/moveable\" target=\"_blank\"><img src=\"https://img.shields.io/npm/v/moveable.svg?style=flat-square&color=007acc&label=version\" alt=\"npm version\" /></a>\n <a href=\"https://github.com/daybrush/moveable/actions\" target=\"_blank\"><img alt=\"Github actions\" src=\"https://img.shields.io/github/actions/workflow/status/daybrush/moveable/run-e2e.yml?branch=master&style=flat-square\" /></a>\n <img src=\"https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square\"/>\n <a href=\"https://github.com/daybrush/moveable/blob/master/LICENSE\" target=\"_blank\"><img src=\"https://img.shields.io/github/license/daybrush/moveable.svg?style=flat-square&label=license&color=08CE5D\"/></a>\n <a href=\"https://github.com/daybrush/moveable/tree/master/packages/react-moveable\" target=\"_blank\"> <img alt=\"React\" src=\"https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb\" /></a>\n <a href=\"https://github.com/daybrush/moveable/tree/master/packages/preact-moveable\" target=\"_blank\"><img alt=\"Preact\" src=\"https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8\" /></a>\n <a href=\"https://github.com/daybrush/moveable/tree/master/packages/ngx-moveable\" target=\"_blank\"><img alt=\"Angular\" src=\"https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38\" /></a>\n <a href=\"https://github.com/daybrush/moveable/tree/master/packages/vue-moveable\" target=\"_blank\"><img\n    alt=\"Vue\"\n    src=\"https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984\" /></a>\n <a href=\"https://github.com/daybrush/moveable/tree/master/packages/vue3-moveable\" target=\"_blank\"><img\n    alt=\"Vue 3\"\n    src=\"https://img.shields.io/static/v1.svg?label=&message=Vue%203&style=flat-square&color=3fb984\" /></a>\n <a href=\"https://github.com/daybrush/moveable/tree/master/packages/svelte-moveable\" target=\"_blank\"><img alt=\"Svelte\" src=\"https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38\" /></a>\n <a href=\"https://github.com/daybrush/moveable/tree/master/packages/lit-moveable\" target=\"_blank\"><img alt=\"Lit\" src=\"https://img.shields.io/static/v1.svg?label=&message=Lit&style=flat-square&color=61daeb\" /></a>\n</p>\n<p align=\"middle\">Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable</p>\n<p align=\"middle\">\n    <a href=\"https://github.com/daybrush/moveable\" target=\"_blank\"><strong>Github</strong></a> /\n    <a href=\"https://daybrush.com/moveable\" target=\"_blank\"><strong>Demo</strong></a> /\n    <a href=\"https://daybrush.com/moveable/storybook/\" target=\"_blank\"><strong>Storybook</strong></a> /\n    <a href=\"https://daybrush.com/moveable/release/latest/doc/\" target=\"_blank\"><strong>API</strong></a> /\n    <a href=\"https://github.com/daybrush/scena\" target=\"_blank\"><strong>Main Project</strong></a>\n</p>\n\n<table width=\"100%\" align=\"center\">\n<tr>\n<th colspan=\"4\">Moveable</th>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-draggable\"><strong>Draggable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-resizable\"><strong>Resizable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-scalable\"><strong>Scalable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-rotatable\"><strong>Rotatable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/draggable.gif\" />\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/resizable.gif\" />\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/scalable.gif\" />\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/rotatable.gif\" />\n</td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-warpable\"><strong>Warpable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html\"><strong>Pinchable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/group--group-draggable-resizable-rotatable\"><strong>Groupable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/snap-bound--snap-guidelines\"><strong>Snappable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/warpable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/pinchable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/groupable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/snappable.gif\"/></td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-clippable\"><strong>Clippable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-roundable\"><strong>Roundable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-origin-draggable\"><strong>OriginDraggable</strong></a></td>\n<td align=\"center\"><a href=\"https://github.com/daybrush/selecto\"><strong>Selecto</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/clippable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/roundable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/origindraggable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/selecto.gif\"/></td>\n</tr>\n</table>\n\n\n## 🔥 Features\n* **Draggable** refers to the ability to drag and move targets.\n* **Resizable** indicates whether the target's width and height can be increased or decreased.\n* **Scalable** indicates whether the target's x and y can be scale of transform.\n* **Rotatable** indicates whether the target can be rotated.\n* **Warpable** indicates whether the target can be warped (distorted, bented).\n* **Pinchable** indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.\n* **Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.\n* **Snappable** indicates whether to snap to the guideline.\n* **OriginDraggable*** indicates Whether to drag origin.\n* **Clippable** indicates Whether to clip the target.\n* **Roundable** indicates Whether to show and drag or double click border-radius.\n* Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)\n* Support Major Browsers\n* Support 3d Transform\n\n\n## ⚙️ Installation\n### npm\n```sh\n$ npm i moveable\n```\n\n### scripts\n```html\n<script src=\"//daybrush.com/moveable/release/latest/dist/moveable.min.js\"></script>\n```\n\n## 📄 Documents\n\n* [**Moveable Handbook**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md)\n* [**How to use Group**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-group)\n* [**How to use custom CSS**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-custom-css)\n* [**How to make custom able**](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/src/ables/README.md)\n* [API Documentation](https://daybrush.com/moveable/release/latest/doc/)\n\n## 🚀 How to use\n* All classes of moveable control box and able elements have a `moveable-` prefix. So please don't put `moveable-` class name in target.\n```ts\nimport Moveable from \"moveable\";\n\nconst moveable = new Moveable(document.body, {\n    target: document.querySelector(\".target\"),\n    // If the container is null, the position is fixed. (default: parentElement(document.body))\n    container: document.body,\n    draggable: true,\n    resizable: true,\n    scalable: true,\n    rotatable: true,\n    warpable: true,\n    // Enabling pinchable lets you use events that\n    // can be used in draggable, resizable, scalable, and rotateable.\n    pinchable: true, // [\"resizable\", \"scalable\", \"rotatable\"]\n    origin: true,\n    keepRatio: true,\n    // Resize, Scale Events at edges.\n    edge: false,\n    throttleDrag: 0,\n    throttleResize: 0,\n    throttleScale: 0,\n    throttleRotate: 0,\n});\n/* draggable */\nmoveable.on(\"dragStart\", ({ target, clientX, clientY }) => {\n    console.log(\"onDragStart\", target);\n}).on(\"drag\", ({\n    target, transform,\n    left, top, right, bottom,\n    beforeDelta, beforeDist, delta, dist,\n    clientX, clientY,\n}) => {\n    console.log(\"onDrag left, top\", left, top);\n    target!.style.left = `${left}px`;\n    target!.style.top = `${top}px`;\n    // console.log(\"onDrag translate\", dist);\n    // target!.style.transform = transform;\n}).on(\"dragEnd\", ({ target, isDrag, clientX, clientY }) => {\n    console.log(\"onDragEnd\", target, isDrag);\n});\n\n/* resizable */\nmoveable.on(\"resizeStart\", ({ target, clientX, clientY }) => {\n    console.log(\"onResizeStart\", target);\n}).on(\"resize\", ({ target, width, height, dist, delta, clientX, clientY }) => {\n    console.log(\"onResize\", target);\n    delta[0] && (target!.style.width = `${width}px`);\n    delta[1] && (target!.style.height = `${height}px`);\n}).on(\"resizeEnd\", ({ target, isDrag, clientX, clientY }) => {\n    console.log(\"onResizeEnd\", target, isDrag);\n});\n\n/* scalable */\nmoveable.on(\"scaleStart\", ({ target, clientX, clientY }) => {\n    console.log(\"onScaleStart\", target);\n}).on(\"scale\", ({\n    target, scale, dist, delta, transform, clientX, clientY,\n}: OnScale) => {\n    console.log(\"onScale scale\", scale);\n    target!.style.transform = transform;\n}).on(\"scaleEnd\", ({ target, isDrag, clientX, clientY }) => {\n    console.log(\"onScaleEnd\", target, isDrag);\n});\n\n/* rotatable */\nmoveable.on(\"rotateStart\", ({ target, clientX, clientY }) => {\n    console.log(\"onRotateStart\", target);\n}).on(\"rotate\", ({ target, beforeDelta, delta, dist, transform, clientX, clientY }) => {\n    console.log(\"onRotate\", dist);\n    target!.style.transform = transform;\n}).on(\"rotateEnd\", ({ target, isDrag, clientX, clientY }) => {\n    console.log(\"onRotateEnd\", target, isDrag);\n});\n\n/* warpable */\nthis.matrix = [\n    1, 0, 0, 0,\n    0, 1, 0, 0,\n    0, 0, 1, 0,\n    0, 0, 0, 1,\n];\nmoveable.on(\"warpStart\", ({ target, clientX, clientY }) => {\n    console.log(\"onWarpStart\", target);\n}).on(\"warp\", ({\n    target,\n    clientX,\n    clientY,\n    delta,\n    dist,\n    multiply,\n    transform,\n}) => {\n    console.log(\"onWarp\", target);\n    // target.style.transform = transform;\n    this.matrix = multiply(this.matrix, delta);\n    target.style.transform = `matrix3d(${this.matrix.join(\",\")})`;\n}).on(\"warpEnd\", ({ target, isDrag, clientX, clientY }) => {\n    console.log(\"onWarpEnd\", target, isDrag);\n});\n\n/* pinchable */\n// Enabling pinchable lets you use events that\n// can be used in draggable, resizable, scalable, and rotateable.\nmoveable.on(\"pinchStart\", ({ target, clientX, clientY }) => {\n    // pinchStart event occur before dragStart, rotateStart, scaleStart, resizeStart\n    console.log(\"onPinchStart\");\n}).on(\"pinch\", ({ target, clientX, clientY, datas }) => {\n    // pinch event occur before drag, rotate, scale, resize\n    console.log(\"onPinch\");\n}).on(\"pinchEnd\", ({ isDrag, target, clientX, clientY, datas }) => {\n    // pinchEnd event occur before dragEnd, rotateEnd, scaleEnd, resizeEnd\n    console.log(\"onPinchEnd\");\n});\n```\n\n\n## 📦 Packages\n* [**moveable**](https://github.com/daybrush/moveable/blob/master/packages/moveable): A Vanilla Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n* [**react-moveable**](https://github.com/daybrush/moveable/blob/master/packages/react-moveable): A React Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n* [**preact-moveable**](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable): A Preact Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n* [**ngx-moveable**](https://github.com/daybrush/moveable/blob/master/packages/ngx-moveable): An Angular Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n* [**svelte-moveable**](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable): A Svelte Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n* [**lit-moveable**](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable): A Lit Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n* [**vue-moveable**](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable): A Vue Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n* [**vue3-moveable**](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable): A Vue 3 Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n\n## ⚙️ Developments\nThe `moveable` repo is managed as a [monorepo](https://github.com/lerna/lerna) with `yarn`.\n\n```sh\nyarn config set registry https://registry.npmjs.org/\n```\n\nThe main project was made with `react` and I used [`croact`](https://github.com/daybrush/croact) to make it lighter with umd.\n\nFor development and testing, check in [packages/react-moveable](https://github.com/daybrush/moveable/blob/master/packages/react-moveable).\n\n### `npm run storybook`\n\n```\n$ yarn\n$ npm run packages:build\n$ npm run storybook\n```\n\nRuns the app in the development mode.<br/>\nOpen [http://localhost:6006](http://localhost:6006) to view it in the browser.\n\nThe page will reload if you make edits.<br/>\nYou will also see any lint errors in the console.\n\n\n## ⭐️ Show Your Support\nPlease give a ⭐️ if this project helped you!\n\n\n## 👏 Contributing\n\nIf you have any questions or requests or want to contribute to `moveable` or other packages, please write the [issue](https://github.com/daybrush/moveable/issues) or give me a Pull Request freely.\n\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\n<a href=\"https://github.com/daybrush/moveable/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=daybrush/moveable\" />\n</a>\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/moveable/issues) on GitHub.\n\n## Sponsors\n<p align=\"center\">\n\t<a href=\"https://daybrush.com/sponsors/sponsors.svg\">\n\t\t<img src=\"https://daybrush.com/sponsors/sponsors.svg\"/>\n\t</a>\n</p>\n\n\n### Open Collective Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/moveable/contribute)]\n\n#### Individuals\n\n<a href=\"https://opencollective.com/moveable\"><img src=\"https://opencollective.com/moveable/individuals.svg?width=890\" /></a>\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/moveable/contribute)]\n\n<a href=\"https://opencollective.com/moveable/organization/0/website\"><img src=\"https://opencollective.com/moveable/organization/0/avatar.svg\"/></a>\n<a href=\"https://opencollective.com/moveable/organization/1/website\"><img src=\"https://opencollective.com/moveable/organization/1/avatar.svg\"/></a>\n<a href=\"https://opencollective.com/moveable/organization/2/website\"><img src=\"https://opencollective.com/moveable/organization/2/avatar.svg\"/></a>\n<a href=\"https://opencollective.com/moveable/organization/3/website\"><img src=\"https://opencollective.com/moveable/organization/3/avatar.svg\"/></a>\n<a href=\"https://opencollective.com/moveable/organization/4/website\"><img src=\"https://opencollective.com/moveable/organization/4/avatar.svg\"/></a>\n<a href=\"https://opencollective.com/moveable/organization/5/website\"><img src=\"https://opencollective.com/moveable/organization/5/avatar.svg\"/></a>\n<a href=\"https://opencollective.com/moveable/organization/6/website\"><img src=\"https://opencollective.com/moveable/organization/6/avatar.svg\"/></a>\n<a href=\"https://opencollective.com/moveable/organization/7/website\"><img src=\"https://opencollective.com/moveable/organization/7/avatar.svg\"/></a>\n<a href=\"https://opencollective.com/moveable/organization/8/website\"><img src=\"https://opencollective.com/moveable/organization/8/avatar.svg\"/></a>\n<a href=\"https://opencollective.com/moveable/organization/9/website\"><img src=\"https://opencollective.com/moveable/organization/9/avatar.svg\"/></a>\n\n## 📝 License\n\nThis project is [MIT](https://github.com/daybrush/moveable/blob/master/LICENSE) licensed.\n\n```\nMIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n"
  },
  {
    "path": "config/update-type-consts.js",
    "content": "const path = require(\"path\");\nconst { convertProperties } = require(\"@daybrush/release/angular\");\nconst { MOVEABLE_PROPS, MOVEABLE_EVENTS } = require(\"../packages/react-moveable/dist/moveable.cjs\");\n\nconvertProperties(\n    {\n        \"ANGULAR_MOVEABLE_INPUTS\": MOVEABLE_PROPS,\n        \"ANGULAR_MOVEABLE_OUTPUTS\": MOVEABLE_EVENTS,\n    },\n    [\n        path.resolve(__dirname, \"../packages/ngx-moveable/projects/ngx-moveable/src/public-api.ts\"),\n    ],\n);\n"
  },
  {
    "path": "custom_css.md",
    "content": "# ✨ How to use custom CSS\n\nIf you want to custom CSS, use **`!important`**.\n\n```css\n.moveable-control {\n    width: 20px!important;\n    height: 20px!important;\n    margin-top: -10px!important;\n    margin-left: -10px!important;\n}\n```\n\n## Classes used in moveable\n### moveable-line\n\n```css\n.moveable-line {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    background: #4af;\n    transform-origin: 0px 0.5px;\n}\n```\n\n![](./demo/images/line.png)\n\n\n```css\n.moveable-line.moveable-rotation-line {\n    height: 40px;\n    width: 1px;\n    transform-origin: 0.5px 39.5px;\n}\n```\n### moveable-control\n\n```css\n.moveable-control {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    border: 2px solid #fff;\n    box-sizing: border-box;\n    background: #4af;\n    margin-top: -7px;\n    margin-left: -7px;\n    z-index: 10;\n}\n```\n\n![](./demo/images/control.png)\n\n#### moveable-rotataion\n\n```css\n/* moveable-rotation */\n.moveable-line.moveable-rotation-line .moveable-control {\n    border-color: #4af;\n    background:#fff;\n    cursor: alias;\n}\n```\n\n#### moveable-origin\n```css\n.moveable-control.moveable-origin {\n    border-color: #f55;\n    background: #fff;\n    width: 12px;\n    height: 12px;\n    margin-top: -6px;\n    margin-left: -6px;\n    pointer-events: none;\n}\n```\n\n#### moveable-direction\n\n```css\n.moveable-direction.moveable-e, .moveable-direction.moveable-w {\n    cursor: ew-resize;\n}\n.moveable-direction.moveable-s, .moveable-direction.moveable-n {\n    cursor: ns-resize;\n}\n.moveable-direction.moveable-nw, .moveable-direction.moveable-se, .moveable-reverse .moveable-direction.moveable-ne, .moveable-reverse .moveable-direction.moveable-sw {\n    cursor: nwse-resize;\n}\n.moveable-direction.moveable-ne, .moveable-direction.moveable-sw, .rCSckyn7i.moveable-reverse .moveable-direction.moveable-nw, moveable-reverse .moveable-direction.moveable-se {\n    cursor: nesw-resize;\n}\n```\n\n\n## Default CSS\n\n```css\n.rCSckyn7i {\n    position: fixed;\n    width: 0;\n    height: 0;\n    left: 0;\n    top: 0;\n    z-index: 3000;\n}\n.rCSckyn7i .moveable-control-box {\n    z-index: 0;\n}\n.rCSckyn7i .moveable-line, .rCSckyn7i .moveable-control {\n    left: 0;\n    top: 0;\n}\n.rCSckyn7i .moveable-control {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    border: 2px solid #fff;\n    box-sizing: border-box;\n    background: #4af;\n    margin-top: -7px;\n    margin-left: -7px;\n    z-index: 10;\n}\n.rCSckyn7i .moveable-line {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    background: #4af;\n    transform-origin: 0px 0.5px;\n}\n.rCSckyn7i .moveable-line.moveable-rotation-line {\n    height: 40px;\n    width: 1px;\n    transform-origin: 0.5px 39.5px;\n}\n.rCSckyn7i .moveable-line.moveable-rotation-line .moveable-control {\n    border-color: #4af;\n    background:#fff;\n    cursor: alias;\n}\n.rCSckyn7i .moveable-control.moveable-origin {\n    border-color: #f55;\n    background: #fff;\n    width: 12px;\n    height: 12px;\n    margin-top: -6px;\n    margin-left: -6px;\n    pointer-events: none;\n}\n.rCSckyn7i .moveable-direction.moveable-e, .rCSckyn7i .moveable-direction.moveable-w {\n    cursor: ew-resize;\n}\n.rCSckyn7i .moveable-direction.moveable-s, .rCSckyn7i .moveable-direction.moveable-n {\n    cursor: ns-resize;\n}\n.rCSckyn7i .moveable-direction.moveable-nw, .rCSckyn7i .moveable-direction.moveable-se, .rCSckyn7i.moveable-reverse .moveable-direction.moveable-ne, .rCSckyn7i.moveable-reverse .moveable-direction.moveable-sw {\n    cursor: nwse-resize;\n}\n.rCSckyn7i .moveable-direction.moveable-ne, .rCSckyn7i .moveable-direction.moveable-sw, .rCSckyn7i.moveable-reverse .moveable-direction.moveable-nw, .rCSckyn7i.moveable-reverse .moveable-direction.moveable-se {\n    cursor: nesw-resize;\n}\n.rCSckyn7i .moveable-group {\n    z-index: -1;\n}\n```\n"
  },
  {
    "path": "demo/index.html",
    "content": "<!doctype html><html lang=\"en\"><head><meta charset=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\"><meta name=\"description\" content=\"Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable!\"/><meta property=\"og:title\" content=\"Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable!\"><meta property=\"og:url\" content=\"https://daybrush.com/moveable\"><meta property=\"og:image\" content=\"https://daybrush.com/moveable/images/moveable1920x1080.png\"><meta property=\"og:description\" content=\"Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable!\"><meta name=\"twitter:card\" content=\"summary\"><meta name=\"twitter:title\" content=\"Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable!\"><meta name=\"twitter:url\" content=\"https://daybrush.com/moveable\"><meta name=\"twitter:image\" content=\"https://daybrush.com/moveable/images/moveable1920x1080.png\"><meta name=\"twitter:description\" content=\"Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable!\"><meta name=\"theme-color\" content=\"#333333\"><title>Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable!</title><link href=\"./static/css/main.5b0258e1.chunk.css\" rel=\"stylesheet\"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id=\"root\"></div><script>!function(e){function r(r){for(var n,a,i=r[0],l=r[1],c=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var l=t[i];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){\"undefined\"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:\"Module\"}),Object.defineProperty(e,\"__esModule\",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&\"object\"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,\"default\",{enumerable:!0,value:e}),2&r&&\"string\"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,\"a\",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p=\"./\";var i=this[\"webpackJsonp@scena/react-editor\"]=this[\"webpackJsonp@scena/react-editor\"]||[],l=i.push.bind(i);i.push=r,i=i.slice();for(var c=0;c<i.length;c++)r(i[c]);var f=l;t()}([])</script><script src=\"./static/js/2.8e0d6703.chunk.js\"></script><script src=\"./static/js/main.4efc5ba5.chunk.js\"></script></body></html>"
  },
  {
    "path": "demo/static/css/main.5b0258e1.chunk.css",
    "content": "@import url(https://fonts.googleapis.com/css?family=Roboto:100&display=swap);body{margin:0;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,\"Courier New\",monospace}#root,.app,.editor,body,html{position:relative;width:100%;height:100%;-ms-scroll-chaining:none;overscroll-behavior:none}.bottom{position:absolute;bottom:20px;left:50%;transform:translate(-50%);padding:5px;background:#222;text-align:center}.bottom,.bottom a{box-sizing:border-box}.bottom a{position:relative;display:inline-block;color:#fff;font-weight:700;font-size:13px;padding:15px 20px}.badges img{padding:2px}.badgets a{margin:2px}\n/*# sourceMappingURL=main.5b0258e1.chunk.css.map */"
  },
  {
    "path": "demo/static/js/2.8e0d6703.chunk.js",
    "content": "/*! For license information please see 2.8e0d6703.chunk.js.LICENSE.txt */\n(this[\"webpackJsonp@scena/react-editor\"]=this[\"webpackJsonp@scena/react-editor\"]||[]).push([[2],[function(e,t,n){\"use strict\";n.d(t,\"l\",(function(){return r})),n.d(t,\"d\",(function(){return i})),n.d(t,\"f\",(function(){return o})),n.d(t,\"k\",(function(){return a})),n.d(t,\"c\",(function(){return A})),n.d(t,\"j\",(function(){return s})),n.d(t,\"m\",(function(){return l})),n.d(t,\"i\",(function(){return u})),n.d(t,\"g\",(function(){return c})),n.d(t,\"o\",(function(){return h})),n.d(t,\"e\",(function(){return g})),n.d(t,\"b\",(function(){return v})),n.d(t,\"h\",(function(){return B})),n.d(t,\"n\",(function(){return b})),n.d(t,\"X\",(function(){return te})),n.d(t,\"y\",(function(){return E})),n.d(t,\"M\",(function(){return y})),n.d(t,\"K\",(function(){return C})),n.d(t,\"H\",(function(){return Q})),n.d(t,\"L\",(function(){return x})),n.d(t,\"J\",(function(){return F})),n.d(t,\"I\",(function(){return U})),n.d(t,\"V\",(function(){return O})),n.d(t,\"U\",(function(){return H})),n.d(t,\"T\",(function(){return T})),n.d(t,\"S\",(function(){return N})),n.d(t,\"W\",(function(){return _})),n.d(t,\"u\",(function(){return M})),n.d(t,\"x\",(function(){return R})),n.d(t,\"Z\",(function(){return D})),n.d(t,\"N\",(function(){return P})),n.d(t,\"A\",(function(){return k})),n.d(t,\"z\",(function(){return I})),n.d(t,\"Q\",(function(){return K})),n.d(t,\"v\",(function(){return L})),n.d(t,\"D\",(function(){return z})),n.d(t,\"R\",(function(){return j})),n.d(t,\"w\",(function(){return X})),n.d(t,\"s\",(function(){return G})),n.d(t,\"Y\",(function(){return V})),n.d(t,\"t\",(function(){return W})),n.d(t,\"r\",(function(){return J})),n.d(t,\"E\",(function(){return q})),n.d(t,\"F\",(function(){return Z})),n.d(t,\"C\",(function(){return $})),n.d(t,\"a\",(function(){return ne})),n.d(t,\"G\",(function(){return re})),n.d(t,\"p\",(function(){return ie})),n.d(t,\"O\",(function(){return oe})),n.d(t,\"B\",(function(){return ae})),n.d(t,\"q\",(function(){return Ae})),n.d(t,\"P\",(function(){return se}));var r=\"rgba\",i=[\"rgb\",r,\"hsl\",\"hsla\"],o=\"function\",a=\"property\",A=\"array\",s=\"object\",l=\"string\",u=\"number\",c=\"undefined\"!==typeof window,f=\"undefined\"!==typeof document&&document,d=[\"webkit\",\"ms\",\"moz\",\"o\"],p=function(e){if(!f)return\"\";var t=(f.body||f.documentElement).style,n=d.length;if(\"undefined\"!==typeof t[e])return e;for(var r=0;r<n;++r){var i=\"-\"+d[r]+\"-\"+e;if(\"undefined\"!==typeof t[i])return i}return\"\"},h=p(\"transform\"),g=p(\"filter\"),v=p(\"animation\"),B=v.replace(\"animation\",\"keyframes\"),m=['\"',\"'\",'\\\\\"',\"\\\\'\"],b=1e-7,w={cm:function(e){return 96*e/2.54},mm:function(e){return 96*e/254},in:function(e){return 96*e},pt:function(e){return 96*e/72},pc:function(e){return 96*e/6},\"%\":function(e,t){return e*t/100},vw:function(e,t){return void 0===t&&(t=window.innerWidth),e/100*t},vh:function(e,t){return void 0===t&&(t=window.innerHeight),e/100*t},vmax:function(e,t){return void 0===t&&(t=Math.max(window.innerWidth,window.innerHeight)),e/100*t},vmin:function(e,t){return void 0===t&&(t=Math.min(window.innerWidth,window.innerHeight)),e/100*t}};function E(e,t,n,r){return(e*r+t*n)/(n+r)}function y(e){return\"undefined\"===typeof e}function C(e){return e&&typeof e===s}function Q(e){return Array.isArray(e)}function x(e){return typeof e===l}function F(e){return typeof e===u}function U(e){return typeof e===o}function S(e,t,n,r){for(var i=n;i<r;++i){var o=t[i].trim();if(o===e)return i;var a=i;if(\"(\"===o?a=S(\")\",t,i+1,r):m.indexOf(o)>-1&&(a=S(o,t,i+1,r)),-1===a)break;i=a}return-1}function O(e,t){for(var n=new RegExp(\"(\\\\s*\"+(t||\",\")+\"\\\\s*|\\\\(|\\\\)|\\\"|'|\\\\\\\\\\\"|\\\\\\\\'|\\\\s+)\",\"g\"),r=e.split(n).filter(Boolean),i=r.length,o=[],a=[],A=0;A<i;++A){var s=r[A].trim(),l=A;if(\"(\"===s)l=S(\")\",r,A+1,i);else{if(\")\"===s)throw new Error(\"invalid format\");if(m.indexOf(s)>-1)l=S(s,r,A+1,i);else if(s===t){a.length&&(o.push(a.join(\"\")),a=[]);continue}}-1===l&&(l=i-1),a.push(r.slice(A,l+1).join(\"\")),A=l}return a.length&&o.push(a.join(\"\")),o}function H(e){return O(e,\"\")}function T(e){return O(e,\",\")}function N(e){var t=/([^(]*)\\(([\\s\\S]*)\\)([\\s\\S]*)/g.exec(e);return!t||t.length<4?{}:{prefix:t[1],value:t[2],suffix:t[3]}}function _(e){var t=/^([^\\d|e|\\-|\\+]*)((?:\\d|\\.|-|e-|e\\+)+)(\\S*)$/g.exec(e);if(!t)return{prefix:\"\",unit:\"\",value:NaN};var n=t[1],r=t[2];return{prefix:n,unit:t[3],value:parseFloat(r)}}function M(e){return e.replace(/[\\s-_]([a-z])/g,(function(e,t){return t.toUpperCase()}))}function R(e,t){return void 0===t&&(t=\"-\"),e.replace(/([a-z])([A-Z])/g,(function(e,n,r){return\"\"+n+t+r.toLowerCase()}))}function D(e){return[].slice.call(e)}function P(){return Date.now?Date.now():(new Date).getTime()}function k(e,t,n){void 0===n&&(n=-1);for(var r=e.length,i=0;i<r;++i)if(t(e[i],i,e))return i;return n}function I(e,t,n){var r=k(e,t);return r>-1?e[r]:n}var K=function(){var e=P(),t=c&&(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame);return t?t.bind(window):function(t){var n=P();return window.setTimeout((function(){t(n-e)}),1e3/60)}}(),L=function(){var e=c&&(window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.msCancelAnimationFrame);return e?e.bind(window):function(e){clearTimeout(e)}}();function z(e){if(Object.keys)return Object.keys(e);var t=[];for(var n in t)t.push(n);return t}function j(e,t){void 0===t&&(t=[]),e.sort((function(e,n){var r=t.indexOf(e),i=t.indexOf(n);return-1===i&&-1===r?0:-1===r?1:-1===i?-1:r-i}))}function X(e,t){var n=_(e),r=n.value,i=n.unit;if(C(t)){var o=t[i];if(o){if(U(o))return o(r);if(w[i])return w[i](r,o)}}else if(\"%\"===i)return r*t/100;return w[i]?w[i](r):r}function G(e,t,n){return Math.max(t,Math.min(e,n))}function V(e,t){return t?Math.round(e/t)*t:e}function Y(e,t,n){return[[V(t[0],b),V(t[0]*e[1]/e[0],b)],[V(t[1]*e[0]/e[1],b),V(t[1],b)]].filter((function(e){return e.every((function(e,r){return n?e<=t[r]:e>=t[r]}))}))[0]||e}function W(e,t,n,r){if(!r)return e.map((function(e,r){return G(e,t[r],n[r])}));var i=e[0],o=e[1],a=Y(e,t,!1),A=a[0],s=a[1],l=Y(e,n,!0),u=l[0],c=l[1];return i<A||o<s?(i=A,o=s):(i>u||o>c)&&(i=u,o=c),[i,o]}function J(e){for(var t=e.length,n=0,r=t-1;r>=0;--r)n+=e[r];return t?n/t:0}function q(e,t){var n=t[0]-e[0],r=t[1]-e[1],i=Math.atan2(r,n);return i>=0?i:i+2*Math.PI}function Z(e){var t=function(e){return[0,1].map((function(t){return J(e.map((function(e){return e[t]})))}))}(e),n=q(t,e[0]),r=q(t,e[1]);return n<r&&r-n<Math.PI||n>r&&r-n<-Math.PI?1:-1}function $(e,t){return Math.sqrt(Math.pow((t?t[0]:0)-e[0],2)+Math.pow((t?t[1]:0)-e[1],2))}function ee(e){var t=function(e){return e.replace(\"#\",\"\")}(e),n=parseInt(t.substring(0,2),16),r=parseInt(t.substring(2,4),16),i=parseInt(t.substring(4,6),16),o=parseInt(t.substring(6,8),16)/255;return isNaN(o)&&(o=1),[n,r,i,o]}function te(e){if(\"#\"===e.charAt(0))return 4===e.length||5===e.length?ee(function(e){var t=e.charAt(1),n=e.charAt(2),r=e.charAt(3),i=e.charAt(4);return[\"#\",t,t,n,n,r,r,i,i].join(\"\")}(e)):ee(e);if(-1!==e.indexOf(\"(\")){var t=N(e),n=t.prefix,i=t.value;if(!n||!i)return;var o=T(i),a=[0,0,0,1],A=o.length;switch(n){case\"rgb\":case r:for(var s=0;s<A;++s)a[s]=parseFloat(o[s]);return a;case\"hsl\":case\"hsla\":for(s=0;s<A;++s)-1!==o[s].indexOf(\"%\")?a[s]=parseFloat(o[s])/100:a[s]=parseFloat(o[s]);return function(e){var t,n=e[0],r=e[1],i=e[2];n<0&&(n+=360*Math.floor((Math.abs(n)+360)/360)),n%=360;var o,a=(1-Math.abs(2*i-1))*r,A=a*(1-Math.abs(n/60%2-1)),s=i-a/2;return o=n<60?[a,A,0]:n<120?[A,a,0]:n<180?[0,a,A]:n<240?[0,A,a]:n<300?[A,0,a]:n<360?[a,0,A]:[0,0,0],[Math.round(255*(o[0]+s)),Math.round(255*(o[1]+s)),Math.round(255*(o[2]+s)),null!==(t=e[3])&&void 0!==t?t:1]}(a)}}}function ne(e,t){return t?f.querySelectorAll(e):f.querySelector(e)}function re(e,t){return e.classList?e.classList.contains(t):!!e.className.match(new RegExp(\"(\\\\s|^)\"+t+\"(\\\\s|$)\"))}function ie(e,t){e.classList?e.classList.add(t):e.className+=\" \"+t}function oe(e,t){if(e.classList)e.classList.remove(t);else{var n=new RegExp(\"(\\\\s|^)\"+t+\"(\\\\s|$)\");e.className=e.className.replace(n,\" \")}}function ae(e,t){if(!e||!t||!t.length)return{};var n;if(e instanceof Element)n=e;else{if(!e.length)return{};n=e[0]}for(var r={},i=window.getComputedStyle(n),o=t.length,a=0;a<o;++a)r[t[a]]=i[t[a]];return r}function Ae(e,t,n,r){e.addEventListener(t,n,r)}function se(e,t,n){e.removeEventListener(t,n)}},function(e,t,n){\"use strict\";e.exports=n(121)},,function(e,t,n){\"use strict\";function r(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}n.d(t,\"a\",(function(){return r}))},function(e,t,n){\"use strict\";function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,\"value\"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function i(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}n.d(t,\"a\",(function(){return i}))},function(e,t,n){\"use strict\";function r(e){return(r=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function i(){if(\"undefined\"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if(\"function\"===typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function o(e){return(o=\"function\"===typeof Symbol&&\"symbol\"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&\"function\"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?\"symbol\":typeof e})(e)}n.d(t,\"a\",(function(){return s}));var a=n(41);function A(e,t){return!t||\"object\"!==o(t)&&\"function\"!==typeof t?Object(a.a)(e):t}function s(e){return function(){var t,n=r(e);if(i()){var o=r(this).constructor;t=Reflect.construct(n,arguments,o)}else t=n.apply(this,arguments);return A(this,t)}}},function(e,t,n){\"use strict\";function r(e,t){return(r=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function i(e,t){if(\"function\"!==typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function\");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&r(e,t)}n.d(t,\"a\",(function(){return i}))},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.ReactCSS=t.loop=t.handleActive=t.handleHover=t.hover=void 0;var r=l(n(129)),i=l(n(201)),o=l(n(221)),a=l(n(222)),A=l(n(223)),s=l(n(224));function l(e){return e&&e.__esModule?e:{default:e}}t.hover=a.default,t.handleHover=a.default,t.handleActive=A.default,t.loop=s.default;var u=t.ReactCSS=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];var A=(0,r.default)(n),s=(0,i.default)(e,A);return(0,o.default)(s)};t.default=u},function(e,t,n){\"use strict\";n.d(t,\"a\",(function(){return l})),n.d(t,\"b\",(function(){return A})),n.d(t,\"c\",(function(){return a})),n.d(t,\"d\",(function(){return h})),n.d(t,\"e\",(function(){return u})),n.d(t,\"f\",(function(){return c})),n.d(t,\"g\",(function(){return f})),n.d(t,\"h\",(function(){return d})),n.d(t,\"i\",(function(){return p}));n(0);function r(e,t,n,r,i,o){for(var a=0;a<i;++a){var A=n+a*i,s=r+a*i;e[A]+=e[s]*o,t[A]+=t[s]*o}}function i(e,t,n,r,i){for(var o=0;o<i;++o){var a=n+o*i,A=r+o*i,s=e[a],l=t[a];e[a]=e[A],e[A]=s,t[a]=t[A],t[A]=l}}function o(e,t,n,r,i){for(var o=0;o<r;++o){var a=n+o*r;e[a]/=i,t[a]/=i}}function a(e,t){void 0===t&&(t=Math.sqrt(e.length));for(var n=e.slice(),a=v(t),A=0;A<t;++A){var s=t*A+A;if(0===n[s])for(var l=A+1;l<t;++l)if(n[t*A+l]){i(n,a,A,l,t);break}if(!n[s])return[];o(n,a,A,t,n[s]);for(l=0;l<t;++l){var u=l,c=n[l+A*t];0!==c&&A!==l&&r(n,a,u,A,t,-c)}}return a}function A(e,t){for(var n=v(t),r=0;r<t-1;++r)n[t*(t-1)+r]=e[r]||0;return n}function s(e,t,n){void 0===n&&(n=Math.sqrt(e.length));var r=[],i=e.length/n,o=t.length/i;if(!i)return t;if(!o)return e;for(var a=0;a<n;++a)for(var A=0;A<o;++A){r[A*n+a]=0;for(var s=0;s<i;++s)r[A*n+a]+=e[s*n+a]*t[A*i+s]}return r}function l(e,t,n){void 0===n&&(n=t.length);var r=s(e,t,n),i=r[n-1];return r.map((function(e){return e/i}))}function u(e,t){return s(e,[1,0,0,0,0,Math.cos(t),Math.sin(t),0,0,-Math.sin(t),Math.cos(t),0,0,0,0,1],4)}function c(e,t){return s(e,[Math.cos(t),0,-Math.sin(t),0,0,1,0,0,Math.sin(t),0,Math.cos(t),0,0,0,0,1],4)}function f(e,t){return s(e,g(t,4))}function d(e,t){var n=t[0],r=void 0===n?1:n,i=t[1],o=void 0===i?1:i,a=t[2];return s(e,[r,0,0,0,0,o,0,0,0,0,void 0===a?1:a,0,0,0,0,1],4)}function p(e,t){var n=t[0],r=void 0===n?0:n,i=t[1],o=void 0===i?0:i,a=t[2];return s(e,[1,0,0,0,0,1,0,0,0,0,1,0,r,o,void 0===a?0:a,1],4)}function h(e,t){return s(e,t,4)}function g(e,t){var n=Math.cos(e),r=Math.sin(e),i=v(t);return i[0]=n,i[1]=r,i[t]=-r,i[t+1]=n,i}function v(e){for(var t=e*e,n=[],r=0;r<t;++r)n[r]=r%(e+1)?0:1;return n}},function(e,t,n){\"use strict\";var r=n(24),i=n(1);var o=function(e,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function a(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var A=function(){return(A=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};var s=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.injectResult=null,t.tag=\"div\",t}a(t,e);var n=t.prototype;return n.render=function(){var e,t,n=this.props,r=n.className,o=void 0===r?\"\":r,a=(n.cspNonce,n.portalContainer),s=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&\"function\"===typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n}(n,[\"className\",\"cspNonce\",\"portalContainer\"]),l=this.injector.className,u=this.tag,c={};return(i.version||\"\").indexOf(\"simple\")>-1&&a&&(c={portalContainer:a}),Object(i.createElement)(u,A({ref:(e=this,t=\"element\",function(n){n&&(e[t]=n)}),\"data-styled-id\":l,className:o+\" \"+l},c,s))},n.componentDidMount=function(){this.injectResult=this.injector.inject(this.element,{nonce:this.props.cspNonce})},n.componentWillUnmount=function(){this.injectResult.destroy(),this.injectResult=null},n.getElement=function(){return this.element},t}(i.Component);t.a=function(e,t){var n=Object(r.a)(t);return function(t){function r(){var r=null!==t&&t.apply(this,arguments)||this;return r.injector=n,r.tag=e,r}return a(r,t),r}(s)}},function(e,t,n){\"use strict\";function r(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];return t.map((function(t){return t.split(\" \").map((function(t){return t?\"\"+e+t:\"\"})).join(\" \")})).join(\" \")}function i(e,t){return t.replace(/([^}{]*){/gm,(function(t,n){return n.replace(/\\.([^{,\\s\\d.]+)/g,\".\"+e+\"$1\")+\"{\"}))}function o(e,t){return function(n){n&&(e[t]=n)}}function a(e,t,n){return function(r){r&&(e[t][n]=r)}}function A(e,t){return void 0===t&&(t={}),function(n,r){e.forEach((function(e){var i=t[e]||e;i in n||(n[i]=function(){for(var t,n=[],i=0;i<arguments.length;i++)n[i]=arguments[i];var o=(t=this[r])[e].apply(t,n);return o===this[r]?this:o})}))}}n.d(t,\"a\",(function(){return i})),n.d(t,\"b\",(function(){return r})),n.d(t,\"c\",(function(){return o})),n.d(t,\"d\",(function(){return a})),n.d(t,\"e\",(function(){return A}))},,function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0});var r=n(225);Object.defineProperty(t,\"Alpha\",{enumerable:!0,get:function(){return c(r).default}});var i=n(75);Object.defineProperty(t,\"Checkboard\",{enumerable:!0,get:function(){return c(i).default}});var o=n(228);Object.defineProperty(t,\"EditableInput\",{enumerable:!0,get:function(){return c(o).default}});var a=n(229);Object.defineProperty(t,\"Hue\",{enumerable:!0,get:function(){return c(a).default}});var A=n(231);Object.defineProperty(t,\"Raised\",{enumerable:!0,get:function(){return c(A).default}});var s=n(247);Object.defineProperty(t,\"Saturation\",{enumerable:!0,get:function(){return c(s).default}});var l=n(111);Object.defineProperty(t,\"ColorWrap\",{enumerable:!0,get:function(){return c(l).default}});var u=n(255);function c(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,\"Swatch\",{enumerable:!0,get:function(){return c(u).default}})},function(e,t,n){\"use strict\";n.d(t,\"a\",(function(){return o}));var r=n(43);var i=n(56);function o(e){return function(e){if(Array.isArray(e))return Object(r.a)(e)}(e)||function(e){if(\"undefined\"!==typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||Object(i.a)(e)||function(){throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\")}()}},function(e,t,n){\"use strict\";n.d(t,\"a\",(function(){return o}));var r=n(33);function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){Object(r.a)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}},function(e,t,n){\"use strict\";\"undefined\"!==typeof document&&document;function r(e){return e&&\"object\"===typeof e}function i(e,t,n){void 0===n&&(n=-1);for(var r=e.length,i=0;i<r;++i)if(t(e[i],i,e))return i;return n}var o=function(){return(o=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};var a=function(){function e(){this._events={}}var t=e.prototype;return t.on=function(e,t){if(r(e))for(var n in e)this.on(n,e[n]);else this._addEvent(e,t,{});return this},t.off=function(e,t){if(e)if(r(e))for(var n in e)this.off(n);else if(t){var o=this._events[e];if(o){var a=i(o,(function(e){return e.listener===t}));a>-1&&o.splice(a,1)}}else this._events[e]=[];else this._events={};return this},t.once=function(e,t){var n=this;return t&&this._addEvent(e,t,{once:!0}),new Promise((function(t){n._addEvent(e,t,{once:!0})}))},t.emit=function(e,t){var n=this;void 0===t&&(t={});var r=this._events[e];if(!e||!r)return!0;var i=!1;return t.eventType=e,t.stop=function(){i=!0},t.currentTarget=this,function(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),i=0;for(t=0;t<n;t++)for(var o=arguments[t],a=0,A=o.length;a<A;a++,i++)r[i]=o[a];return r}(r).forEach((function(r){r.listener(t),r.once&&n.off(e,r.listener)})),!i},t.trigger=function(e,t){return void 0===t&&(t={}),this.emit(e,t)},t._addEvent=function(e,t,n){var r=this._events;r[e]=r[e]||[],r[e].push(o({listener:t},n))},e}();t.a=a},function(e,t,n){\"use strict\";n.d(t,\"a\",(function(){return s})),n.d(t,\"b\",(function(){return A})),n.d(t,\"c\",(function(){return l})),n.d(t,\"d\",(function(){return h})),n.d(t,\"e\",(function(){return g})),n.d(t,\"f\",(function(){return u}));\"undefined\"!==typeof document&&document;function r(e,t,n){void 0===n&&(n=-1);for(var r=e.length,i=0;i<r;++i)if(t(e[i],i,e))return i;return n}function i(e,t){var n=t[0]-e[0],r=t[1]-e[1],i=Math.atan2(r,n);return i>=0?i:i+2*Math.PI}function o(e){var t=function(e){return[0,1].map((function(t){return function(e){for(var t=e.length,n=0,r=t-1;r>=0;--r)n+=e[r];return t?n/t:0}(e.map((function(e){return e[t]})))}))}(e),n=i(t,e[0]),r=i(t,e[1]);return n<r&&r-n<Math.PI||n>r&&r-n<-Math.PI?1:-1}function a(e,t){return Math.sqrt(Math.pow((t?t[0]:0)-e[0],2)+Math.pow((t?t[1]:0)-e[1],2))}function A(e){return e.length<3?0:Math.abs(function(e){for(var t=0,n=e.length-1;n>=0;--n)t+=e[n];return t}(e.map((function(t,n){var r=e[n+1]||e[0];return t[0]*r[1]-r[0]*t[1]}))))/2}function s(e,t){var n=t.width,r=t.height,i=t.left,o=t.top,a=l(e),A=a.minX,s=a.minY,u=a.maxX,c=a.maxY,f=n/(u-A),d=r/(c-s);return e.map((function(e){return[i+(e[0]-A)*f,o+(e[1]-s)*d]}))}function l(e){var t=e.map((function(e){return e[0]})),n=e.map((function(e){return e[1]}));return{minX:Math.min.apply(Math,t),minY:Math.min.apply(Math,n),maxX:Math.max.apply(Math,t),maxY:Math.max.apply(Math,n)}}function u(e,t,n){var i=e[0],o=e[1],a=l(t),A=a.minX,s=a.minY,u=a.maxX,h=a.maxY,g=[[A,o],[u,o]],v=[[i,s],[i,h]],B=c(g[0],g[1]),m=c(v[0],v[1]),b=p(t),w=[],E=[];return b.forEach((function(e){var t=c(e[0],e[1]),n=d(f(B,t),[g,e]),r=d(f(m,t),[v,e]);1===n.length&&e[0][1]===o||w.push.apply(w,n),1===r.length&&e[0][0]===i||E.push.apply(E,r),t[0]||w.push.apply(w,n),t[1]||E.push.apply(E,r)})),!n&&(r(w,(function(e){return e[0]===i}))>-1||r(E,(function(e){return e[1]===o}))>-1)||!!(w.filter((function(e){return e[0]>i})).length%2&&E.filter((function(e){return e[1]>o})).length%2)}function c(e,t){var n=e[0],r=e[1],i=t[0],o=t[1];if(n===i&&r===o)return[0,0,0];if(n===i)return[1,0,-n];if(r===o)return[0,1,-r];var a=(i-n)/(r-o);return[1,a,-n-a*r]}function f(e,t){var n,r,i=e[0],o=e[1],a=e[2],A=t[0],s=t[1],l=t[2],u=0===i&&0===A,c=0===o&&0===s;if(u&&c)return[];if(u){var f=-a/o;return f!==-l/s?[]:[[-1/0,f],[1/0,f]]}if(c){var d=-a/i;return d!==-l/A?[]:[[d,-1/0],[d,1/0]]}return 0===i?[[n=-(s*(r=-a/o)+l)/A,r]]:0===A?[[n=-(o*(r=-l/s)+a)/i,r]]:0===o?[[n=-a/i,r=-(A*n+l)/s]]:0===s?[[n=-l/A,r=-(i*n+a)/o]]:[[n=(o*l-s*a)/(s*i-o*A),r=-(i*n+a)/o]]}function d(e,t){var n=t.map((function(e){return[0,1].map((function(t){return[Math.min(e[0][t],e[1][t]),Math.max(e[0][t],e[1][t])]}))}));if(2===e.length){var r=e[0],i=r[0],o=r[1];if(i===e[1][0]){var a=Math.max.apply(Math,n.map((function(e){return e[1][0]}))),A=Math.min.apply(Math,n.map((function(e){return e[1][1]})));return a>A?[]:[[i,a],[i,A]]}if(o===e[1][1]){var s=Math.max.apply(Math,n.map((function(e){return e[0][0]}))),l=Math.min.apply(Math,n.map((function(e){return e[0][1]})));return s>l?[]:[[s,o],[l,o]]}}return e.filter((function(e){return n.every((function(t){return t[0][0]<=e[0]&&e[0]<=t[0][1]&&t[1][0]<=e[1]&&e[1]<=t[1][1]}))}))}function p(e){return function(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),i=0;for(t=0;t<n;t++)for(var o=arguments[t],a=0,A=o.length;a<A;a++,i++)r[i]=o[a];return r}(e.slice(1),[e[0]]).map((function(t,n){return[e[n],t]}))}function h(e,t){var n=e.slice(),i=t.slice();-1===o(n)&&n.reverse(),-1===o(i)&&i.reverse();var A=p(n),s=p(i),l=A.map((function(e){return c(e[0],e[1])})),h=s.map((function(e){return c(e[0],e[1])})),g=[];l.forEach((function(e,t){var n=A[t],r=[];h.forEach((function(i,o){var a=d(f(e,i),[n,s[o]]);r.push.apply(r,a.map((function(e){return{index1:t,index2:o,pos:e}})))})),r.sort((function(e,t){return a(n[0],e.pos)-a(n[0],t.pos)})),g.push.apply(g,r),u(n[1],i)&&g.push({index1:t,index2:-1,pos:n[1]})})),s.forEach((function(e,t){if(u(e[1],n)){var i=!1,o=r(g,(function(e){return e.index2===t?(i=!0,!1):!!i}));-1===o&&(i=!1,o=r(g,(function(e){var n=e.index1,r=e.index2;return-1===n&&r+1===t?(i=!0,!1):!!i}))),-1===o?g.push({index1:-1,index2:t,pos:e[1]}):g.splice(o,0,{index1:-1,index2:t,pos:e[1]})}}));var v=g.map((function(e){return e.pos})),B={};return v.filter((function(e){var t=e[0]+\"x\"+e[1];return!B[t]&&(B[t]=!0,!0)}))}function g(e,t){return A(h(e,t))}},function(e,t){var n=Array.isArray;e.exports=n},function(e,t,n){e.exports=n(232)()},function(e,t,n){var r=n(234),i=n(238)((function(e,t,n){r(e,t,n)}));e.exports=i},function(e,t){e.exports=function(e){var t=typeof e;return null!=e&&(\"object\"==t||\"function\"==t)}},function(e,t,n){var r=n(79),i=\"object\"==typeof self&&self&&self.Object===Object&&self,o=r||i||Function(\"return this\")();e.exports=o},function(e,t){e.exports=function(e){return null!=e&&\"object\"==typeof e}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.red=t.getContrastingColor=t.isValidHex=t.toState=t.simpleCheckForValidColor=void 0;var r=o(n(252)),i=o(n(254));function o(e){return e&&e.__esModule?e:{default:e}}t.simpleCheckForValidColor=function(e){var t=0,n=0;return(0,r.default)([\"r\",\"g\",\"b\",\"a\",\"h\",\"s\",\"l\",\"v\"],(function(r){if(e[r]&&(t+=1,isNaN(e[r])||(n+=1),\"s\"===r||\"l\"===r)){/^\\d+%$/.test(e[r])&&(n+=1)}})),t===n&&e};var a=t.toState=function(e,t){var n=e.hex?(0,i.default)(e.hex):(0,i.default)(e),r=n.toHsl(),o=n.toHsv(),a=n.toRgb(),A=n.toHex();return 0===r.s&&(r.h=t||0,o.h=t||0),{hsl:r,hex:\"000000\"===A&&0===a.a?\"transparent\":\"#\"+A,rgb:a,hsv:o,oldHue:e.h||t||r.h,source:e.source}};t.isValidHex=function(e){var t=\"#\"===String(e).charAt(0)?1:0;return e.length!==4+t&&e.length<7+t&&(0,i.default)(e).isValid()},t.getContrastingColor=function(e){if(!e)return\"#fff\";var t=a(e);return\"transparent\"===t.hex?\"rgba(0,0,0,0.4)\":(299*t.rgb.r+587*t.rgb.g+114*t.rgb.b)/1e3>=128?\"#000\":\"#fff\"},t.red={hsl:{a:1,h:0,l:.5,s:1},hex:\"#ff0000\",rgb:{r:255,g:0,b:0,a:1},hsv:{h:0,s:1,v:1,a:1}};t.default=t},function(e,t,n){\"use strict\";var r=n(0);var i=function(e){for(var t=5381,n=e.length;n;)t=33*t^e.charCodeAt(--n);return t>>>0};function o(e,t,n,i){var o=document.createElement(\"style\");return o.setAttribute(\"type\",\"text/css\"),o.setAttribute(\"data-styled-id\",e),n.nonce&&o.setAttribute(\"nonce\",n.nonce),o.innerHTML=function(e,t,n){return n.original?t:t.replace(/([^};{\\s}][^};{]*|^\\s*){/gm,(function(t,n){var i=n.trim();return(i?Object(r.T)(i):[\"\"]).map((function(t){var n=t.trim();return 0===n.indexOf(\"@\")?n:n.indexOf(\":global\")>-1?n.replace(/\\:global/g,\"\"):n.indexOf(\":host\")>-1?\"\"+n.replace(/\\:host/g,\".\"+e):n?\".\"+e+\" \"+n:\".\"+e})).join(\", \")+\" {\"}))}(e,t,n),(i||document.head||document.body).appendChild(o),o}t.a=function(e){var t,n=\"rCS\"+i(e).toString(36),r=0;return{className:n,inject:function(i,a){void 0===a&&(a={});var A,s=function(e){if(e&&e.getRootNode){var t=e.getRootNode();if(11===t.nodeType)return t}}(i),l=0===r;return(s||l)&&(A=o(n,e,a,s)),l&&(t=A),s||++r,{destroy:function(){s?(i.removeChild(A),A=null):(r>0&&--r,0===r&&t&&(t.parentNode.removeChild(t),t=null))}}}}}},function(e,t,n){\"use strict\";n.d(t,\"b\",(function(){return v})),n.d(t,\"c\",(function(){return g}));var r=function(e,t){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function i(e){return e&&\"object\"===typeof e}function o(e){return Array.isArray(e)}function a(e){return\"string\"===typeof e}function A(e,t,n,r){e.addEventListener(t,n,r)}function s(e,t,n){e.removeEventListener(t,n)}var l=function(){return(l=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};var u=function(){function e(){this._events={}}var t=e.prototype;return t.on=function(e,t){if(i(e))for(var n in e)this.on(n,e[n]);else this._addEvent(e,t,{});return this},t.off=function(e,t){if(e)if(i(e))for(var n in e)this.off(n);else if(t){var r=this._events[e];if(r){var o=function(e,t,n){void 0===n&&(n=-1);for(var r=e.length,i=0;i<r;++i)if(t(e[i],i,e))return i;return n}(r,(function(e){return e.listener===t}));o>-1&&r.splice(o,1)}}else this._events[e]=[];else this._events={};return this},t.once=function(e,t){var n=this;return t&&this._addEvent(e,t,{once:!0}),new Promise((function(t){n._addEvent(e,t,{once:!0})}))},t.emit=function(e,t){var n=this;void 0===t&&(t={});var r=this._events[e];if(!e||!r)return!0;var i=!1;return t.eventType=e,t.stop=function(){i=!0},t.currentTarget=this,function(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),i=0;for(t=0;t<n;t++)for(var o=arguments[t],a=0,A=o.length;a<A;a++,i++)r[i]=o[a];return r}(r).forEach((function(r){r.listener(t),r.once&&n.off(e,r.listener)})),!i},t.trigger=function(e,t){return void 0===t&&(t={}),this.emit(e,t)},t._addEvent=function(e,t,n){var r=this._events;r[e]=r[e]||[],r[e].push(l({listener:t},n))},e}();var c,f=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e,t){function n(e){if(e&&\"object\"===typeof e){var t=e.which||e.keyCode||e.charCode;t&&(e=t)}if(\"number\"===typeof e)return a[e];var n,o=String(e);return(n=r[o.toLowerCase()])?n:(n=i[o.toLowerCase()])||(1===o.length?o.charCodeAt(0):void 0)}n.isEventKey=function(e,t){if(e&&\"object\"===typeof e){var n=e.which||e.keyCode||e.charCode;if(null===n||void 0===n)return!1;if(\"string\"===typeof t){var o;if(o=r[t.toLowerCase()])return o===n;if(o=i[t.toLowerCase()])return o===n}else if(\"number\"===typeof t)return t===n;return!1}};var r=(t=e.exports=n).code=t.codes={backspace:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,\"pause/break\":19,\"caps lock\":20,esc:27,space:32,\"page up\":33,\"page down\":34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,command:91,\"left command\":91,\"right command\":93,\"numpad *\":106,\"numpad +\":107,\"numpad -\":109,\"numpad .\":110,\"numpad /\":111,\"num lock\":144,\"scroll lock\":145,\"my computer\":182,\"my calculator\":183,\";\":186,\"=\":187,\",\":188,\"-\":189,\".\":190,\"/\":191,\"`\":192,\"[\":219,\"\\\\\":220,\"]\":221,\"'\":222},i=t.aliases={windows:91,\"\\u21e7\":16,\"\\u2325\":18,\"\\u2303\":17,\"\\u2318\":91,ctl:17,control:17,option:18,pause:19,break:19,caps:20,return:13,escape:27,spc:32,spacebar:32,pgup:33,pgdn:34,ins:45,del:46,cmd:91};for(o=97;o<123;o++)r[String.fromCharCode(o)]=o-32;for(var o=48;o<58;o++)r[o-48]=o;for(o=1;o<13;o++)r[\"f\"+o]=o+111;for(o=0;o<10;o++)r[\"numpad \"+o]=o+96;var a=t.names=t.title={};for(o in r)a[r[o]]=o;for(var A in i)r[A]=i[A]})),d=(f.code,f.codes,f.aliases,f.names),p=(f.title,{\"+\":\"plus\",\"left command\":\"meta\",\"right command\":\"meta\"}),h={shift:1,ctrl:2,alt:3,meta:4};function g(e){var t=d[e]||\"\";for(var n in p)t=t.replace(n,p[n]);return t.replace(/\\s/g,\"\")}function v(e,t){void 0===t&&(t=g(e.keyCode));var n=function(e){return[e.shiftKey&&\"shift\",e.ctrlKey&&\"ctrl\",e.altKey&&\"alt\",e.metaKey&&\"meta\"].filter(Boolean)}(e);return-1===n.indexOf(t)&&n.push(t),n.filter(Boolean)}function B(e){var t=e.slice();return t.sort((function(e,t){return(h[e]||5)-(h[t]||5)})),t}var m=function(e){function t(t){void 0===t&&(t=window);var n=e.call(this)||this;return n.container=t,n.ctrlKey=!1,n.altKey=!1,n.shiftKey=!1,n.metaKey=!1,n.clear=function(){return n.ctrlKey=!1,n.altKey=!1,n.shiftKey=!1,n.metaKey=!1,n},n.keydownEvent=function(e){n.triggerEvent(\"keydown\",e)},n.keyupEvent=function(e){n.triggerEvent(\"keyup\",e)},n.blur=function(){n.clear(),n.trigger(\"blur\")},A(t,\"blur\",n.blur),A(t,\"keydown\",n.keydownEvent),A(t,\"keyup\",n.keyupEvent),n}!function(e,t){function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e);var n=t.prototype;return Object.defineProperty(t,\"global\",{get:function(){return c||(c=new t)},enumerable:!1,configurable:!0}),t.setGlobal=function(){return this.global},n.destroy=function(){var e=this.container;this.clear(),this.off(),s(e,\"blur\",this.blur),s(e,\"keydown\",this.keydownEvent),s(e,\"keyup\",this.keyupEvent)},n.keydown=function(e,t){return this.addEvent(\"keydown\",e,t)},n.offKeydown=function(e,t){return this.removeEvent(\"keydown\",e,t)},n.offKeyup=function(e,t){return this.removeEvent(\"keyup\",e,t)},n.keyup=function(e,t){return this.addEvent(\"keyup\",e,t)},n.addEvent=function(e,t,n){return o(t)?this.on(e+\".\"+B(t).join(\".\"),n):a(t)?this.on(e+\".\"+t,n):this.on(e,t),this},n.removeEvent=function(e,t,n){return o(t)?this.off(e+\".\"+B(t).join(\".\"),n):a(t)?this.off(e+\".\"+t,n):this.off(e,t),this},n.triggerEvent=function(e,t){this.ctrlKey=t.ctrlKey,this.shiftKey=t.shiftKey,this.altKey=t.altKey,this.metaKey=t.metaKey;var n=g(t.keyCode),r={key:n,isToggle:\"ctrl\"===n||\"shift\"===n||\"meta\"===n||\"alt\"===n,inputEvent:t,keyCode:t.keyCode,ctrlKey:t.ctrlKey,altKey:t.altKey,shiftKey:t.shiftKey,metaKey:t.metaKey};this.trigger(e,r),this.trigger(e+\".\"+n,r);var i=v(t,n);i.length>1&&this.trigger(e+\".\"+i.join(\".\"),r)},t}(u);t.a=m},function(e,t,n){var r=n(86),i=n(141),o=n(199),a=n(17);e.exports=function(e,t){return(a(e)?r:o)(e,i(t,3))}},function(e,t,n){e.exports=n(127)},function(e,t,n){\"use strict\";n.d(t,\"b\",(function(){return A}));var r=n(44),i=function(e,t){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};var o=\"function\"===typeof Map?void 0:function(){var e=0;return function(t){return t.__DIFF_KEY__||(t.__DIFF_KEY__=++e)}}(),a=function(e){function t(t){return void 0===t&&(t=[]),e.call(this,t,o)||this}return function(e,t){function n(){this.constructor=e}i(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e),t}(r.a);function A(e,t){return Object(r.b)(e,t,o)}t.a=a},function(e,t,n){var r=n(36),i=n(132),o=n(133),a=r?r.toStringTag:void 0;e.exports=function(e){return null==e?void 0===e?\"[object Undefined]\":\"[object Null]\":a&&a in Object(e)?i(e):o(e)}},function(e,t,n){var r=n(154),i=n(157);e.exports=function(e,t){var n=i(e,t);return r(n)?n:void 0}},function(e,t,n){\"use strict\";n.d(t,\"b\",(function(){return ce}));var r=n(34),i=n(10),o=n(0);function a(e,t,n,r,i,o){for(var a=0;a<i;++a){var A=n+a*i,s=r+a*i;e[A]+=e[s]*o,t[A]+=t[s]*o}}function A(e,t,n,r,i){for(var o=0;o<i;++o){var a=n+o*i,A=r+o*i,s=e[a],l=t[a];e[a]=e[A],e[A]=s,t[a]=t[A],t[A]=l}}function s(e,t,n,r,i){for(var o=0;o<r;++o){var a=n+o*r;e[a]/=i,t[a]/=i}}function l(e,t,n){void 0===n&&(n=Math.sqrt(e.length));for(var r=e.slice(),i=0;i<n;++i)r[i*n+t-1]=0,r[(t-1)*n+i]=0;return r[(t-1)*(n+1)]=1,r}function u(e,t){void 0===t&&(t=Math.sqrt(e.length));for(var n=e.slice(),r=w(t),i=0;i<t;++i){var l=t*i+i;if(!Object(o.Y)(n[l],o.n))for(var u=i+1;u<t;++u)if(n[t*i+u]){A(n,r,i,u,t);break}if(!Object(o.Y)(n[l],o.n))return[];s(n,r,i,t,n[l]);for(u=0;u<t;++u){var c=u,f=n[u+i*t];Object(o.Y)(f,o.n)&&i!==u&&a(n,r,c,i,t,-f)}}return r}function c(e,t){for(var n=e.slice(),r=e.length;r<t-1;++r)n[r]=0;return n[t-1]=1,n}function f(e,t,n){if(void 0===t&&(t=Math.sqrt(e.length)),t===n)return e;for(var r=w(n),i=Math.min(t,n),o=0;o<i-1;++o){for(var a=0;a<i-1;++a)r[o*n+a]=e[o*t+a];r[(o+1)*n-1]=e[(o+1)*t-1],r[(n-1)*n+o]=e[(t-1)*t+o]}return r[n*n-1]=e[t*t-1],r}function d(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];var r=w(e);return t.forEach((function(t){r=p(r,t,e)})),r}function p(e,t,n){void 0===n&&(n=Math.sqrt(e.length));var r=[],i=e.length/n,o=t.length/i;if(!i)return t;if(!o)return e;for(var a=0;a<n;++a)for(var A=0;A<o;++A){r[A*n+a]=0;for(var s=0;s<i;++s)r[A*n+a]+=e[s*n+a]*t[A*i+s]}return r}function h(e,t){for(var n=Math.min(e.length,t.length),r=e.slice(),i=0;i<n;++i)r[i]=r[i]+t[i];return r}function g(e,t){for(var n=Math.min(e.length,t.length),r=e.slice(),i=0;i<n;++i)r[i]=r[i]-t[i];return r}function v(e,t){return void 0===t&&(t=9===e.length),t?[e[0],e[1],e[3],e[4],e[6],e[7]]:e}function B(e,t,n){void 0===n&&(n=t.length);var r=p(e,t,n),i=r[n-1];return r.map((function(e){return e/i}))}function m(e,t){return B(b(t,3),c(e,3))}function b(e,t){var n=Math.cos(e),r=Math.sin(e),i=w(t);return i[0]=n,i[1]=r,i[t]=-r,i[t+1]=n,i}function w(e){for(var t=e*e,n=[],r=0;r<t;++r)n[r]=r%(e+1)?0:1;return n}function E(e,t){for(var n=w(t),r=Math.min(e.length,t-1),i=0;i<r;++i)n[(t+1)*i]=e[i];return n}function y(e,t){for(var n=w(t),r=Math.min(e.length,t-1),i=0;i<r;++i)n[t*(t-1)+i]=e[i];return n}function C(e,t,n,r,i,o,a,A){var s=e[0],l=e[1],c=t[0],d=t[1],h=n[0],g=n[1],v=r[0],B=r[1],m=i[0],b=i[1],w=o[0],E=o[1],y=a[0],C=a[1],Q=A[0],x=A[1],F=u([s,0,c,0,h,0,v,0,l,0,d,0,g,0,B,0,1,0,1,0,1,0,1,0,0,s,0,c,0,h,0,v,0,l,0,d,0,g,0,B,0,1,0,1,0,1,0,1,-m*s,-b*s,-w*c,-E*c,-y*h,-C*h,-Q*v,-x*v,-m*l,-b*l,-w*d,-E*d,-y*g,-C*g,-Q*B,-x*B],8);if(!F.length)return[];var U=p(F,[m,b,w,E,y,C,Q,x],8);return U[8]=1,f(function(e,t){void 0===t&&(t=Math.sqrt(e.length));for(var n=[],r=0;r<t;++r)for(var i=0;i<t;++i)n[i*t+r]=e[t*r+i];return n}(U),3,4)}var Q=n(8);function x(e){return F(U(e))}function F(e){var t=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];return e.forEach((function(e){var n=e.matrixFunction,r=e.functionValue;n&&(t=n(t,r))})),t}function U(e){return(Object(o.H)(e)?e:Object(o.U)(e)).map((function(e){var t=Object(o.S)(e),n=t.prefix,r=t.value,i=null,a=n,A=\"\";if(\"translate\"===n||\"translateX\"===n||\"translate3d\"===n){var s=Object(o.T)(r).map((function(e){return parseFloat(e)})),l=s[0],u=s[1],c=void 0===u?0:u,f=s[2],d=void 0===f?0:f;i=Q.i,A=[l,c,d]}else if(\"translateY\"===n){c=parseFloat(r);i=Q.i,A=[0,c,0]}else if(\"translateZ\"===n){d=parseFloat(r);i=Q.i,A=[0,0,d]}else if(\"scale\"===n||\"scale3d\"===n){var p=Object(o.T)(r).map((function(e){return parseFloat(e)})),h=p[0],g=p[1],v=void 0===g?h:g,B=p[2],m=void 0===B?1:B;i=Q.h,A=[h,v,m]}else if(\"scaleX\"===n){h=parseFloat(r);i=Q.h,A=[h,1,1]}else if(\"scaleY\"===n){v=parseFloat(r);i=Q.h,A=[1,v,1]}else if(\"scaleZ\"===n){m=parseFloat(r);i=Q.h,A=[1,1,m]}else if(\"rotate\"===n||\"rotateZ\"===n||\"rotateX\"===n||\"rotateY\"===n){var b=Object(o.W)(r),w=b.unit,E=b.value,y=\"rad\"===w?E:E*Math.PI/180;\"rotate\"===n||\"rotateZ\"===n?(a=\"rotateZ\",i=Q.g):\"rotateX\"===n?i=Q.e:\"rotateY\"===n&&(i=Q.f),A=y}else if(\"matrix3d\"===n)i=Q.d,A=Object(o.T)(r).map((function(e){return parseFloat(e)}));else if(\"matrix\"===n){var C=Object(o.T)(r).map((function(e){return parseFloat(e)}));i=Q.d,A=[C[0],C[1],0,0,C[2],C[3],0,0,0,0,1,0,C[4],C[5],0,1]}else a=\"\";return{name:n,functionName:a,value:r,matrixFunction:i,functionValue:A}}))}var S=n(16),O=n(28),H=n(15),T=function(e,t){return(T=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function N(e){var t=e.container;return[t.scrollLeft,t.scrollTop]}var _=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.startRect=null,t.startPos=[],t.prevTime=0,t.timer=0,t}!function(e,t){function n(){this.constructor=e}T(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e);var n=t.prototype;return n.dragStart=function(e,t){var n=t.container,r=0,i=0,o=0,a=0;if(n===document.body)o=window.innerWidth,a=window.innerHeight;else{var A=n.getBoundingClientRect();r=A.top,i=A.left,o=A.width,a=A.height}this.startPos=[e.clientX,e.clientY],this.startRect={top:r,left:i,width:o,height:a}},n.drag=function(e,t){var n=this,r=e.clientX,i=e.clientY,a=t.container,A=t.threshold,s=void 0===A?0:A,l=t.throttleTime,u=void 0===l?0:l,c=t.getScrollPosition,f=void 0===c?N:c,d=this.startRect,p=this.startPos,h=Object(o.N)(),g=Math.max(u+this.prevTime-h,0),v=[0,0];if(d.top>i-s?(p[1]>d.top||i<p[1])&&(v[1]=-1):d.top+d.height<i+s&&(p[1]<d.top+d.height||i>p[1])&&(v[1]=1),d.left>r-s?(p[0]>d.left||r<p[0])&&(v[0]=-1):d.left+d.width<r+s&&(p[0]<d.left+d.width||r>p[0])&&(v[0]=1),clearTimeout(this.timer),!v[0]&&!v[1])return!1;if(g>0)return this.timer=window.setTimeout((function(){n.drag(e,t)}),g),!1;this.prevTime=h;var B=f({container:a,direction:v});this.trigger(\"scroll\",{container:a,direction:v,inputEvent:e});var m=f({container:a,direction:v}),b=m[0]-B[0],w=m[1]-B[1];return!(!b&&!w)&&(this.trigger(\"move\",{offsetX:v[0]?b:0,offsetY:v[1]?w:0,inputEvent:e}),u&&(this.timer=window.setTimeout((function(){n.drag(e,t)}),u)),!0)},n.dragEnd=function(){clearTimeout(this.timer)},t}(H.a),M=n(1),R=n(57),D=n(9),P=function(e,t){return(P=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function k(e,t){function n(){this.constructor=e}P(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var I=function(){return(I=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function K(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),i=0;for(t=0;t<n;t++)for(var o=arguments[t],a=0,A=o.length;a<A;a++,i++)r[i]=o[a];return r}function L(e,t){var n;return I({events:{},props:(n={},n[e]=Boolean,n),name:e},t)}function z(e,t){return'data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"'+32*e+'px\" height=\"'+32*e+'px\" viewBox=\"0 0 32 32\" ><path d=\"M 16,5 L 12,10 L 14.5,10 L 14.5,22 L 12,22 L 16,27 L 20,22 L 17.5,22 L 17.5,10 L 20, 10 L 16,5 Z\" stroke-linejoin=\"round\" stroke-width=\"1.2\" fill=\"black\" stroke=\"white\" style=\"transform:rotate('+t+'deg);transform-origin: 16px 16px\"></path></svg>'}var j=Object(r.a)().browser.webkit,X=j&&function(){var e=/applewebkit\\/([^\\s]+)/g.exec(navigator.userAgent.toLowerCase());return!!e&&parseFloat(e[1])<605}(),G=\"moveable-\",V=\"\\n{\\n\\tposition: absolute;\\n\\twidth: 1px;\\n\\theight: 1px;\\n\\tleft: 0;\\n\\ttop: 0;\\n    z-index: 3000;\\n    --moveable-color: #4af;\\n    --zoom: 1;\\n    --zoompx: 1px;\\n    will-change: transform;\\n}\\n.control-box {\\n    z-index: 0;\\n}\\n.line, .control {\\n    position: absolute;\\n\\tleft: 0;\\n    top: 0;\\n    will-change: transform;\\n}\\n.control {\\n\\twidth: 14px;\\n\\theight: 14px;\\n\\tborder-radius: 50%;\\n\\tborder: 2px solid #fff;\\n\\tbox-sizing: border-box;\\n    background: #4af;\\n    background: var(--moveable-color);\\n\\tmargin-top: -7px;\\n    margin-left: -7px;\\n    border: 2px solid #fff;\\n    z-index: 10;\\n}\\n.padding {\\n    position: absolute;\\n    top: 0px;\\n    left: 0px;\\n    width: 100px;\\n    height: 100px;\\n    transform-origin: 0 0;\\n}\\n.line {\\n\\twidth: 1px;\\n    height: 1px;\\n    background: #4af;\\n    background: var(--moveable-color);\\n\\ttransform-origin: 0px 50%;\\n}\\n.line.dashed {\\n    box-sizing: border-box;\\n    background: transparent;\\n}\\n.line.dashed.horizontal {\\n    border-top: 1px dashed #4af;\\n    border-top-color: #4af;\\n    border-top-color: var(--moveable-color);\\n}\\n.line.dashed.vertical {\\n    border-left: 1px dashed #4af;\\n    border-left-color: #4af;\\n    border-left-color: var(--moveable-color);\\n}\\n.line.vertical {\\n    transform: translateX(-50%);\\n}\\n.line.horizontal {\\n    transform: translateY(-50%);\\n}\\n.line.vertical.bold {\\n    width: 2px;\\n}\\n.line.horizontal.bold {\\n    height: 2px;\\n}\\n\\n.control.origin {\\n\\tborder-color: #f55;\\n\\tbackground: #fff;\\n\\twidth: 12px;\\n\\theight: 12px;\\n\\tmargin-top: -6px;\\n    margin-left: -6px;\\n\\tpointer-events: none;\\n}\\n\"+[0,15,30,45,60,75,90,105,120,135,150,165].map((function(e){return'\\n.direction[data-rotation=\"'+e+'\"] {\\n\\t'+function(e){var t=z(1,e),n=z(2,e),r=45*Math.round(e/45)%180,i=\"ns-resize\";return 135===r?i=\"nwse-resize\":45===r?i=\"nesw-resize\":90===r&&(i=\"ew-resize\"),\"cursor:\"+i+\";cursor: url('\"+t+\"') 16 16, \"+i+\";cursor: -webkit-image-set(url('\"+t+\"') 1x, url('\"+n+\"') 2x) 16 16, \"+i+\";\"}(e)+\"\\n}\\n\"})).join(\"\\n\")+\"\\n.group {\\n    z-index: -1;\\n}\\n.area {\\n    position: absolute;\\n}\\n.area-pieces {\\n    position: absolute;\\n    top: 0;\\n    left: 0;\\n    display: none;\\n}\\n.area.avoid, .area.pass {\\n    pointer-events: none;\\n}\\n.area.avoid+.area-pieces {\\n    display: block;\\n}\\n.area-piece {\\n    position: absolute;\\n}\\n\\n\"+(X?':global svg *:before {\\n\\tcontent:\"\";\\n\\ttransform-origin: inherit;\\n}':\"\")+\"\\n\",Y=[[0,1,2],[1,0,3],[2,0,3],[3,1,2]],W=Math.pow(10,10),J=-W,q=[\"n\",\"w\",\"s\",\"e\",\"nw\",\"ne\",\"sw\",\"se\"],Z={n:[0,1],s:[2,3],w:[2,0],e:[1,3],nw:[0],ne:[1],sw:[2],se:[3]},$={n:0,s:180,w:270,e:90,nw:315,ne:45,sw:225,se:135},ee=[\"isMoveableElement\",\"updateRect\",\"updateTarget\",\"destroy\",\"dragStart\",\"isInside\",\"hitTest\",\"setState\",\"getRect\",\"request\",\"isDragging\",\"getManager\"];function te(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return i.b.apply(void 0,K([G],e))}function ne(e,t,n){return d(t,y(n,t),e,y(n.map((function(e){return-e})),t))}function re(e){return ie(De(e,\":before\")).map((function(t,n){var r=Object(o.W)(t),i=r.value,a=r.unit;return i*function(e,t,n){return\"%\"===t?de(e.ownerSVGElement)[n?\"width\":\"height\"]/100:1}(e,a,0===n)}))}function ie(e){var t=e.transformOrigin;return t?t.split(\" \"):[\"0\",\"0\"]}function oe(e,t,n){for(var r=document.body,i=!e||n?e:e.parentElement,o=e===t||i===t,a=\"relative\";i&&i!==r;){t===i&&(o=!0);var A=De(i),s=A.transform;if(a=A.position,\"svg\"===i.tagName.toLowerCase()||\"static\"!==a||s&&\"none\"!==s)break;i=i.parentElement,a=\"relative\"}return{isStatic:\"static\"===a,isEnd:o||!i||i===r,offsetParent:i||r}}function ae(e,t,n,r){var i,a=e.tagName.toLowerCase(),A=e.offsetLeft,s=e.offsetTop;if(r){var l=(t||document.documentElement).getBoundingClientRect();A-=l.left,s-=l.top}var u,c,f=Object(o.M)(A),d=!f;return d||\"svg\"===a?c=(u=ie(n).map((function(e){return parseFloat(e)}))).slice():(c=(u=X?re(e):ie(n).map((function(e){return parseFloat(e)}))).slice(),d=!0,A=(i=function(e,t){if(!e.getBBox)return[0,0];var n=e.getBBox(),r=de(e.ownerSVGElement),i=n.x-r.x,o=n.y-r.y;return[i,o,t[0]-i,t[1]-o]}(e,u))[0],s=i[1],u[0]=i[2],u[1]=i[3]),{tagName:a,isSVG:f,hasOffset:d,offset:[A||0,s||0],origin:u,targetOrigin:c}}function Ae(e,t,n){void 0===n&&(n=window.getComputedStyle(e));var r=window.getComputedStyle(document.body),i=r.position;if(!t&&(!i||\"static\"===i))return[0,0];var o=parseInt(r.marginLeft,10),a=parseInt(r.marginTop,10);return\"absolute\"===n.position&&(\"auto\"===n.top&&\"auto\"===n.bottom||(a=0),\"auto\"===n.left&&\"auto\"===n.right||(o=0)),[o,a]}function se(e){e.forEach((function(e){var t=e.matrix;t&&(e.matrix=f(t,3,4))}))}function le(e,t){for(var n,r,i,a,A,s,l=e,u=[],c=!1,d=!1,p=3,h=oe(t,t,!0).offsetParent;l&&!c;){var g=De(l),v=g.position,B=\"fixed\"===v,m=(s=g.transform,a=s&&\"none\"!==s?Object(o.K)(s)?s:Object(o.S)(s).value.split(/s*,\\s*/g).map((function(e){return parseFloat(e)})):[1,0,0,1,0,0],void 0===(A=void 0)&&(A=6===a.length),A?[a[0],a[1],0,a[2],a[3],0,a[4],a[5],1]:a),b=m.length;d||16!==b||(d=!0,p=4,se(u)),d&&9===b&&(m=f(m,3,4));var E=ae(l,t,g,B),C=E.tagName,Q=E.hasOffset,x=E.isSVG,F=E.origin,U=E.targetOrigin,S=E.offset,O=S[0],H=S[1];\"svg\"===C&&i?(u.push({type:\"target\",target:l,matrix:pe(l,p)}),u.push({type:\"offset\",target:l,matrix:w(p)})):\"g\"===C&&e!==l&&(O=0,H=0);var T=oe(l,t),N=T.offsetParent,_=T.isEnd,M=T.isStatic;j&&Q&&!x&&M&&(\"relative\"===v||\"static\"===v)&&(O-=N.offsetLeft,H-=N.offsetTop,c=c||_);var R=0,D=0;if(Q&&h!==N&&(R=N.clientLeft,D=N.clientTop),Q&&N===document.body){var P=Ae(l,!1,g);O+=P[0],H+=P[1]}if(u.push({type:\"target\",target:l,matrix:ne(m,p,F)}),Q?u.push({type:\"offset\",target:l,matrix:y([O-l.scrollLeft+R,H-l.scrollTop+D],p)}):u.push({type:\"offset\",target:l,origin:F}),i||(i=m),n||(n=F),r||(r=U),c||B)break;l=N,c=_}return i||(i=w(p)),n||(n=[0,0]),r||(r=[0,0]),{offsetContainer:h,matrixes:u,targetMatrix:i,transformOrigin:n,targetOrigin:r,is3d:d}}function ue(e,t,n,r){var i;void 0===n&&(n=t);var a=0,A=0,s=0,c={};if(e){var h=De(e);a=e.offsetWidth,A=e.offsetHeight,Object(o.M)(a)&&(a=(i=Ce(e,h,!0))[0],A=i[1])}if(e){var v=function(e,t,n,r){void 0===n&&(n=t);var i=le(e,t),o=i.matrixes,a=i.is3d,A=i.targetMatrix,s=i.transformOrigin,c=i.targetOrigin,h=le(i.offsetContainer,n),v=h.matrixes,B=h.is3d,m=r||B||a,b=m?4:3,E=\"svg\"!==e.tagName.toLowerCase()&&\"ownerSVGElement\"in e,C=t||document.body,Q=A,x=w(b),F=w(b),U=w(b),S=w(b),O=o.length,H=oe(C,C,!0).offsetParent;v.reverse(),o.reverse(),!a&&m&&(Q=f(Q,3,4),se(o));!B&&m&&se(v);v.forEach((function(e){F=p(F,e.matrix,b)})),o.forEach((function(e,t){if(O-2===t&&(U=x.slice()),O-1===t&&(S=x.slice()),!e.matrix){var n=function(e,t,n,r,i){var o,a=e.target,A=e.origin,s=t.matrix,l=Ce(a,void 0,!0),c=l[0],f=l[1],p=n.getBoundingClientRect(),h=[0,0];n===document.body&&(h=Ae(a,!0));var v=a.getBoundingClientRect(),B=v.left-p.left+n.scrollLeft-(n.clientLeft||0)+h[0],m=v.top-p.top+n.scrollTop-(n.clientTop||0)+h[1],b=v.width,w=v.height,E=d(r,i,s),C=Be(E,c,f,r),Q=C.left,x=C.top,F=C.width,U=C.height,S=he(E,A,r),O=g(S,[Q,x]),H=[B+O[0]*b/F,m+O[1]*w/U],T=[0,0],N=0;for(;++N<10;){var _=u(i,r);o=g(he(_,H,r),he(_,S,r)),T[0]=o[0],T[1]=o[1];var M=Be(d(r,i,y(T,r),s),c,f,r),R=M.left,D=M.top,P=R-B,k=D-m;if(Math.abs(P)<2&&Math.abs(k)<2)break;H[0]-=P,H[1]-=k}return T.map((function(e){return Math.round(e)}))}(e,o[t+1],H,b,p(F,x,b));e.matrix=y(n,b)}x=p(x,e.matrix,b)}));var T=!E&&a;Q||(Q=w(T?4:3));var N=fe(E&&16===Q.length?f(Q,4,3):Q,T);return{rootMatrix:F=l(F,b,b),beforeMatrix:U,offsetMatrix:S,allMatrix:x,targetMatrix:Q,targetTransform:N,transformOrigin:s,targetOrigin:c,is3d:m}}(e,t,n,r),B=me(v.allMatrix,v.transformOrigin,a,A);c=I(I({},v),B);var m=me(v.allMatrix,[50,50],100,100);s=Qe([m.pos1,m.pos2],m.direction)}var b=r?4:3;return I({width:a,height:A,rotation:s,rootMatrix:w(b),beforeMatrix:w(b),offsetMatrix:w(b),allMatrix:w(b),targetMatrix:w(b),targetTransform:\"\",transformOrigin:[0,0],targetOrigin:[0,0],is3d:!!r,left:0,top:0,right:0,bottom:0,origin:[0,0],pos1:[0,0],pos2:[0,0],pos3:[0,0],pos4:[0,0],direction:1},c)}function ce(e,t,n){return void 0===n&&(n=t),ue(e,t,n,!0)}function fe(e,t){return void 0===t&&(t=e.length>9),(t?\"matrix3d\":\"matrix\")+\"(\"+v(e,!t).join(\",\")+\")\"}function de(e){var t=e.clientWidth,n=e.clientHeight;if(!e)return{x:0,y:0,width:0,height:0,clientWidth:t,clientHeight:n};var r=e.viewBox,i=r&&r.baseVal||{x:0,y:0,width:0,height:0};return{x:i.x,y:i.y,width:i.width||t,height:i.height||n,clientWidth:t,clientHeight:n}}function pe(e,t){var n=de(e),r=n.width,i=n.height,o=n.clientWidth,a=n.clientHeight,A=o/r,s=a/i,l=e.preserveAspectRatio.baseVal,u=l.align,c=l.meetOrSlice,f=[0,0],d=[A,s],p=[0,0];if(1!==u){var h=(u-2)%3,g=Math.floor((u-2)/3);f[0]=r*h/2,f[1]=i*g/2;var v=2===c?Math.max(s,A):Math.min(A,s);d[0]=v,d[1]=v,p[0]=(o-r)/2*h,p[1]=(a-i)/2*g}var B=E(d,t);return B[t*(t-1)]=p[0],B[t*(t-1)+1]=p[1],ne(B,t,f)}function he(e,t,n){return B(e,c(t,n),n)}function ge(e,t,n,r){return[[0,0],[t,0],[0,n],[t,n]].map((function(t){return he(e,t,r)}))}function ve(e){var t=e.map((function(e){return e[0]})),n=e.map((function(e){return e[1]})),r=Math.min.apply(Math,t),i=Math.min.apply(Math,n),o=Math.max.apply(Math,t),a=Math.max.apply(Math,n);return{left:r,top:i,right:o,bottom:a,width:o-r,height:a-i}}function Be(e,t,n,r){return ve(ge(e,t,n,r))}function me(e,t,n,r){var i=16===e.length?4:3,a=ge(e,n,r,i),A=a[0],s=A[0],l=A[1],u=a[1],c=u[0],f=u[1],d=a[2],p=d[0],h=d[1],g=a[3],v=g[0],B=g[1],m=he(e,t,i),b=m[0],w=m[1],E=Math.min(s,c,p,v),y=Math.min(l,f,h,B),C=Math.max(s,c,p,v);return s=s-E||0,{left:E,top:y,right:C,bottom:Math.max(l,f,h,B),origin:[b=b-E||0,w=w-y||0],pos1:[s,l=l-y||0],pos2:[c=c-E||0,f=f-y||0],pos3:[p=p-E||0,h=h-y||0],pos4:[v=v-E||0,B=B-y||0],direction:Object(o.F)(a)}}function be(e){return Math.sqrt(e[0]*e[0]+e[1]*e[1])}function we(e,t){return be([t[0]-e[0],t[1]-e[1]])}function Ee(e,t,n,r){void 0===n&&(n=1),void 0===r&&(r=Object(o.E)(e,t));var i=we(e,t);return{transform:\"translateY(-50%) translate(\"+e[0]+\"px, \"+e[1]+\"px) rotate(\"+r+\"rad) scaleY(\"+n+\")\",width:i+\"px\"}}function ye(e,t){for(var n=[],r=2;r<arguments.length;r++)n[r-2]=arguments[r];var i=n.length,o=n.reduce((function(e,t){return e+t[0]}),0)/i,a=n.reduce((function(e,t){return e+t[1]}),0)/i;return{transform:\"translateZ(0px) translate(\"+o+\"px, \"+a+\"px) rotate(\"+e+\"rad) scale(\"+t+\")\"}}function Ce(e,t,n,r){void 0===t&&(t=window.getComputedStyle(e)),void 0===r&&(r=n||\"border-box\"===t.boxSizing);var i=e.offsetWidth,a=e.offsetHeight,A=!Object(o.M)(i);if((n||r)&&A)return[i,a];if(!A&&\"svg\"!==e.tagName.toLowerCase()){var s=e.getBBox();return[s.width,s.height]}return i=e.clientWidth,a=e.clientHeight,n||r?[i+(parseFloat(t.borderLeftWidth)||0)+(parseFloat(t.borderRightWidth)||0),a+(parseFloat(t.borderTopWidth)||0)+(parseFloat(t.borderBottomWidth)||0)]:[i-(parseFloat(t.paddingLeft)||0)-(parseFloat(t.paddingRight)||0),a-(parseFloat(t.paddingTop)||0)-(parseFloat(t.paddingBottom)||0)]}function Qe(e,t){return Object(o.E)(t>0?e[0]:e[1],t>0?e[1]:e[0])}function xe(e,t,n,r,i){var o=1,a=[0,0],A={left:0,right:0,top:0,bottom:0,width:0,height:0,clientLeft:0,clientTop:0,clientWidth:0,clientHeight:0,scrollWidth:0,scrollHeight:0},s={left:0,right:0,top:0,bottom:0,width:0,height:0,clientLeft:0,clientTop:0,clientWidth:0,clientHeight:0,scrollWidth:0,scrollHeight:0},l={left:0,right:0,top:0,bottom:0,width:0,height:0,clientLeft:0,clientTop:0,clientWidth:0,clientHeight:0,scrollWidth:0,scrollHeight:0},u=ue(t,n,i,!1);if(t){var c=u.is3d?4:3,f=me(u.offsetMatrix,h(u.transformOrigin,function(e,t){void 0===t&&(t=Math.sqrt(e.length));for(var n=[],r=e[t*t-1],i=0;i<t-1;++i)n[i]=e[t*(t-1)+i]/r;return n[t-1]=0,n}(u.targetMatrix,c)),u.width,u.height);o=f.direction,a=h(f.origin,[f.left-u.left,f.top-u.top]),A=Fe(t),s=Fe(oe(r,r,!0).offsetParent||document.body,!0),e&&(l=Fe(e))}return I({targetClientRect:A,containerClientRect:s,moveableClientRect:l,beforeDirection:o,beforeOrigin:a,originalBeforeOrigin:a,target:t},u)}function Fe(e,t){var n=0,r=0,i=0,o=0;if(e===document.body||e===document.documentElement)i=window.innerWidth,o=window.innerHeight,n=-(document.documentElement.scrollLeft||document.body.scrollLeft),r=-(document.documentElement.scrollTop||document.body.scrollTop);else{var a=e.getBoundingClientRect();n=a.left,r=a.top,i=a.width,o=a.height}var A={left:n,right:n+i,top:r,bottom:r+o,width:i,height:o};return t&&(A.clientLeft=e.clientLeft,A.clientTop=e.clientTop,A.clientWidth=e.clientWidth,A.clientHeight=e.clientHeight,A.scrollWidth=e.scrollWidth,A.scrollHeight=e.scrollHeight,A.overflow=\"visible\"!==De(e).overflow),A}function Ue(e){if(e){var t=e.getAttribute(\"data-direction\");if(t){var n=[0,0];return t.indexOf(\"w\")>-1&&(n[0]=-1),t.indexOf(\"e\")>-1&&(n[0]=1),t.indexOf(\"n\")>-1&&(n[1]=-1),t.indexOf(\"s\")>-1&&(n[1]=1),n}}}function Se(e,t){return[h(t,e[0]),h(t,e[1]),h(t,e[2]),h(t,e[3])]}function Oe(e){var t=e.left,n=e.top;return Se([e.pos1,e.pos2,e.pos3,e.pos4],[t,n])}function He(e,t){return t?Math.round(e/t)*t:e}function Te(e,t){return e.forEach((function(n,r){e[r]=He(e[r],t)})),e}function Ne(e,t){e[t]&&(e[t].unset(),e[t]=null)}function _e(e,t,n){var r=t.datas;r.datas||(r.datas={});var i=I(I({},n),{target:e.state.target,clientX:t.clientX,clientY:t.clientY,inputEvent:t.inputEvent,currentTarget:e,moveable:e,datas:r.datas});return r.isStartEvent?r.lastEvent=i:r.isStartEvent=!0,i}function Me(e,t,n){var r=t.datas,i=\"isDrag\"in n?n.isDrag:t.isDrag;return r.datas||(r.datas={}),I(I({isDrag:i},n),{moveable:e,target:e.state.target,clientX:t.clientX,clientY:t.clientY,inputEvent:t.inputEvent,currentTarget:e,lastEvent:r.lastEvent,isDouble:t.isDouble,datas:r.datas})}function Re(e,t,n,r){return e.triggerEvent(t,n,r)}function De(e,t){return window.getComputedStyle(e,t)}function Pe(e,t,n){var r={},i={};return e.filter((function(e){var o=e.name;if(r[o]||!t.some((function(t){return e[t]})))return!1;if(!n&&e.ableGroup){if(i[e.ableGroup])return!1;i[e.ableGroup]=!0}return r[o]=!0,!0}))}function ke(e,t){return e===t||null==e&&null==t}function Ie(e,t){var n=[],r=[];return e.forEach((function(i,o){var a=t(i,o,e),A=r.indexOf(a),s=n[A]||[];-1===A&&(r.push(a),n.push(s)),s.push(i)})),n}function Ke(e){return e.reduce((function(e,t){return e.concat(t)}),[])}function Le(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return e.sort((function(e,t){return Math.abs(t)-Math.abs(e)})),e[0]}function ze(e,t,n){return B(u(e,n),c(t,n),n)}function je(e,t){var n,r=e.is3d?4:3;return n=ze(e.rootMatrix,[t.distX,t.distY],r),t.distX=n[0],t.distY=n[1],t}function Xe(e,t,n,r,i){return g(he(e,h(n,t),i),r)}function Ge(e,t,n){return n?e/t*100+\"%\":e+\"px\"}function Ve(e){return Math.abs(e)<=1e-7?0:e}function Ye(e,t){return t.isRequest?(\"resizable\"===t.requestAble||\"scalable\"===t.requestAble)&&t.parentDirection:Object(o.G)(t.inputEvent.target,te(\"direction\"))}function We(e){var t={};for(var n in e)t[e[n]]=n;return t}function Je(e,t){return e?Object(o.L)(e)?t?document.querySelector(e):e:Object(o.I)(e)?e():\"current\"in e?e.current:e:null}function qe(e,t){return e?((n=e)&&Object(o.K)(n)&&(Object(o.H)(n)||\"length\"in n)?[].slice.call(e):[e]).reduce((function(e,n){return Object(o.L)(n)&&t?K(e,[].slice.call(document.querySelectorAll(n))):(e.push(Je(n,t)),e)}),[]):[];var n}function Ze(e,t){var n=e.rootMatrix,r=e.is3d,i=u(n,r?4:3);return r||(i=f(i,3,4)),i[12]=0,i[13]=0,i[14]=0,function(e,t){var n=Object(Q.a)(e,[t[0],t[1]||0,t[2]||0,1],4),r=n[3]||1;return[n[0]/r,n[1]/r,n[2]/r]}(i,t)}var $e=L(\"pinchable\",{events:{onPinchStart:\"pinchStart\",onPinch:\"pinch\",onPinchEnd:\"pinchEnd\",onPinchGroupStart:\"pinchGroupStart\",onPinchGroup:\"pinchGroup\",onPinchGroupEnd:\"pinchGroupEnd\"},dragStart:function(){return!0},pinchStart:function(e,t){var n=t.datas,r=t.targets,i=t.angle,o=t.originalDatas,a=e.props,A=a.pinchable,s=a.ables;if(!A)return!1;var l=\"onPinch\"+(r?\"Group\":\"\")+\"Start\",u=\"drag\"+(r?\"Group\":\"\")+\"ControlStart\",c=(!0===A?e.controlAbles:s.filter((function(e){return A.indexOf(e.name)>-1}))).filter((function(e){return e.canPinch&&e[u]})),f=_e(e,t,{});r&&(f.targets=r);var d=Re(e,l,f);n.isPinch=!1!==d,n.ables=c;var p=n.isPinch;return!!p&&(c.forEach((function(n){if(o[n.name]=o[n.name]||{},n[u]){var r=I(I({},t),{datas:o[n.name],parentRotate:i,isPinch:!0});n[u](e,r)}})),e.state.snapRenderInfo={request:t.isRequest,direction:[0,0]},p)},pinch:function(e,t){var n=t.datas,r=t.scale,i=t.distance,o=t.originalDatas,a=t.inputEvent,A=t.targets,s=t.angle;if(n.isPinch){var l=i*(1-1/r),u=_e(e,t,{});A&&(u.targets=A),Re(e,\"onPinch\"+(A?\"Group\":\"\"),u);var c=n.ables,f=\"drag\"+(A?\"Group\":\"\")+\"Control\";return c.forEach((function(n){n[f]&&n[f](e,I(I({},t),{datas:o[n.name],inputEvent:a,parentDistance:l,parentRotate:s,isPinch:!0}))})),u}},pinchEnd:function(e,t){var n=t.datas,r=t.isPinch,i=t.inputEvent,o=t.targets,a=t.originalDatas;if(n.isPinch){var A=\"onPinch\"+(o?\"Group\":\"\")+\"End\",s=Me(e,t,{isDrag:r});o&&(s.targets=o),Re(e,A,s);var l=n.ables,u=\"drag\"+(o?\"Group\":\"\")+\"ControlEnd\";return l.forEach((function(n){n[u]&&n[u](e,I(I({},t),{isDrag:r,datas:a[n.name],inputEvent:i,isPinch:!0}))})),r}},pinchGroupStart:function(e,t){return this.pinchStart(e,I(I({},t),{targets:e.props.targets}))},pinchGroup:function(e,t){return this.pinch(e,I(I({},t),{targets:e.props.targets}))},pinchGroupEnd:function(e,t){return this.pinchEnd(e,I(I({},t),{targets:e.props.targets}))}});function et(e,t,n,r,i){var o=t.gesto.move(n,e.inputEvent),a=o.originalDatas||o.datas,A=a.draggable||(a.draggable={});return I(I({},i?je(t,o):o),{isDrag:!0,isPinch:!!r,parentEvent:!0,datas:A,originalDatas:e.originalDatas})}var tt=function(){function e(){this.prevX=0,this.prevY=0,this.startX=0,this.startY=0,this.isDrag=!1,this.isFlag=!1,this.datas={draggable:{}}}var t=e.prototype;return t.dragStart=function(e,t){this.isDrag=!1,this.isFlag=!1;var n=t.originalDatas;return this.datas=n,n.draggable||(n.draggable={}),I(I({},this.move(e,t.inputEvent)),{type:\"dragstart\"})},t.drag=function(e,t){return this.move([e[0]-this.prevX,e[1]-this.prevY],t)},t.move=function(e,t){var n,r;return this.isFlag?(n=this.prevX+e[0],r=this.prevY+e[1],this.isDrag=!0):(this.prevX=e[0],this.prevY=e[1],this.startX=e[0],this.startY=e[1],n=e[0],r=e[1],this.isFlag=!0),this.prevX=n,this.prevY=r,{type:\"drag\",clientX:n,clientY:r,inputEvent:t,isDrag:this.isDrag,distX:n-this.startX,distY:r-this.startY,deltaX:e[0],deltaY:e[1],datas:this.datas.draggable,originalDatas:this.datas,parentEvent:!0,parentGesto:this}},e}();function nt(e,t,n){var r=n.originalDatas;r.groupable=r.groupable||{};var i=r.groupable;i.childDatas=i.childDatas||[];var o=i.childDatas;return e.moveables.map((function(e,r){return o[r]=o[r]||{},o[r][t]=o[r][t]||{},I(I({},n),{datas:o[r][t],originalDatas:o[r]})}))}function rt(e,t,n,r,i,o){var a=!!n.match(/Start$/g),A=!!n.match(/End$/g),s=i.isPinch,l=i.datas,u=nt(e,t.name,i),c=e.moveables,f=u.map((function(e,i){var u=c[i],f=e;a?f=(new tt).dragStart(r,e):(u.state.gesto||(u.state.gesto=l.childGestos[i]),f=et(e,u.state,r,s,o));var d=t[n](u,I(I({},f),{parentFlag:!0}));return A&&(u.state.gesto=null),d}));return a&&(l.childGestos=c.map((function(e){return e.state.gesto}))),f}function it(e,t,n,r,i,o){void 0===i&&(i=function(e,t){return t});var a=!!n.match(/End$/g),A=nt(e,t.name,r),s=e.moveables;return A.map((function(e,r){var A,l=s[r];A=i(l,e);var u=t[n](l,I(I({},A),{parentFlag:!0}));return u&&o&&o(l,e,u,r),a&&(l.state.gesto=null),u}))}function ot(e,t){var n=t.clientX,r=t.clientY,i=t.datas,o=e.state,a=o.moveableClientRect,A=o.rootMatrix,s=o.is3d,l=o.pos1,u=g(ze(A,[n-a.left,r-a.top],s?4:3),l),c=ft({datas:i,distX:u[0],distY:u[1]});return[c[0],c[1]]}function at(e,t){var n=t.datas,r=e.state,i=r.allMatrix,o=r.beforeMatrix,a=r.is3d,A=r.left,s=r.top,l=r.origin,f=r.offsetMatrix,d=r.targetMatrix,p=r.transformOrigin,g=a?4:3;n.is3d=a,n.matrix=i,n.targetMatrix=d,n.beforeMatrix=o,n.offsetMatrix=f,n.transformOrigin=p,n.inverseMatrix=u(i,g),n.inverseBeforeMatrix=u(o,g),n.absoluteOrigin=c(h([A,s],l),g),n.startDragBeforeDist=B(n.inverseBeforeMatrix,n.absoluteOrigin,g),n.startDragDist=B(n.inverseMatrix,n.absoluteOrigin,g)}function At(e,t){var n=e.datas,r=e.originalDatas.beforeRenderable,i=n.transformIndex,o=r.nextTransforms,a=r.nextTransformAppendedIndexes,A=-1===i?o.length:i+a.filter((function(e){return e<i})).length,s=function(e,t){var n=e.slice(0,t<0?void 0:t),r=e.slice(0,t<0?void 0:t+1),i=e[t]||\"\",o=t<0?[]:e.slice(t),a=t<0?[]:e.slice(t+1),A=U(n),s=U(r),l=U([i]),u=U(o),c=U(a),f=F(A),d=F(s),h=F(u),g=F(c),v=p(f,h,4);return{transforms:e,beforeFunctionMatrix:f,beforeFunctionMatrix2:d,targetFunctionMatrix:F(l),afterFunctionMatrix:h,afterFunctionMatrix2:g,allFunctionMatrix:v,beforeFunctions:A,beforeFunctions2:s,targetFunction:l[0],afterFunctions:u,afterFunctions2:c,beforeFunctionTexts:n,beforeFunctionTexts2:r,targetFunctionText:i,afterFunctionTexts:o,afterFunctionTexts2:a}}(o,A),l=s.targetFunction,u=\"rotate\"===t?\"rotateZ\":t;n.beforeFunctionTexts=s.beforeFunctionTexts,n.afterFunctionTexts=s.afterFunctionTexts,n.beforeTransform=s.beforeFunctionMatrix,n.beforeTransform2=s.beforeFunctionMatrix2,n.targetTansform=s.targetFunctionMatrix,n.afterTransform=s.afterFunctionMatrix,n.afterTransform2=s.afterFunctionMatrix2,n.targetAllTransform=s.allFunctionMatrix,l.functionName===u?(n.afterFunctionTexts.splice(0,1),n.isAppendTransform=!1):(n.isAppendTransform=!0,r.nextTransformAppendedIndexes=K(a,[A]))}function st(e,t,n){return e.beforeFunctionTexts.join(\" \")+\" \"+(e.isAppendTransform?n:t)+\" \"+e.afterFunctionTexts.join(\" \")}function lt(e){var t=e.datas,n=ct({datas:t,distX:e.distX,distY:e.distY});return B(ut(t,function(e,t){for(var n=w(t),r=0;r<t-1;++r)n[t*(t-1)+r]=e[r]||0;return n}([n[0],n[1]],4)),c([0,0,0],4),4)}function ut(e,t,n){var r=e.beforeTransform,i=e.afterTransform,o=e.beforeTransform2,a=e.afterTransform2,A=e.targetAllTransform,s=n?p(A,t,4):p(t,A,4),l=p(u(n?o:r,4),s,4);return p(l,u(n?a:i,4),4)}function ct(e){var t=e.datas,n=e.distX,r=e.distY,i=t.inverseBeforeMatrix,o=t.is3d,a=t.startDragBeforeDist,A=o?4:3;return g(B(i,h(t.absoluteOrigin,[n,r]),A),a)}function ft(e,t){var n=e.datas,r=e.distX,i=e.distY,o=n.inverseBeforeMatrix,a=n.inverseMatrix,A=n.is3d,s=n.startDragBeforeDist,l=n.startDragDist,u=A?4:3;return g(B(t?o:a,h(n.absoluteOrigin,[r,i]),u),t?s:l)}function dt(e){var t=[];return e[1]>=0&&(e[0]>=0&&t.push(3),e[0]<=0&&t.push(2)),e[1]<=0&&(e[0]>=0&&t.push(1),e[0]<=0&&t.push(0)),t}function pt(e,t){return dt(t).map((function(t){return e[t]}))}function ht(e,t){var n=pt(e,t);return[Object(o.r)(n.map((function(e){return e[0]}))),Object(o.r)(n.map((function(e){return e[1]})))]}function gt(e,t,n,r){return p(e,ne(t,r,n),r)}function vt(e){var t=e.originalDatas.beforeRenderable;return{setTransform:function(n,r){void 0===r&&(r=-1),t.startTransforms=Object(o.H)(n)?n:Object(o.U)(n),mt(e,r)},setTransformIndex:function(t){mt(e,t)}}}function Bt(e,t){var n=e.originalDatas.beforeRenderable.startTransforms;mt(e,Object(o.A)(n,(function(e){return 0===e.indexOf(t+\"(\")})))}function mt(e,t){var n=e.originalDatas.beforeRenderable,r=e.datas;if(r.transformIndex=t,-1!==t){var i=n.startTransforms[t];if(i){var o=U([i]);r.startValue=o[0].functionValue}}}function bt(e,t){e.originalDatas.beforeRenderable.nextTransforms=Object(o.U)(t)}function wt(e,t,n,r,i){return bt(i,t),{transform:t,drag:Sn.drag(e,et(i,e.state,n,r,!1))}}function Et(e,t,n,r,i){var o=e.state,a=o.left,A=o.top,s=e.props.groupable,l=s?a:0,u=s?A:0,c=g(r,Ct(e,n,function(e,t,n){var r=e.transformOrigin,i=e.offsetMatrix,o=e.is3d,a=t.beforeTransform,A=t.afterTransform,s=o?4:3;return gt(i,f(p(p(a,x([n]),4),A,4),4,s),r,s)}(e.state,i,t)));return g(c,[l,u])}function yt(e){var t=e.state,n=t.width,r=t.height,i=t.transformOrigin;return[i[0]/(n/2)-1,i[1]/(r/2)-1]}function Ct(e,t,n){void 0===n&&(n=e.state.allMatrix);var r=e.state,i=r.width,o=r.height,a=r.is3d?4:3;return he(n,[i/2*(1+t[0]),o/2*(1+t[1])],a)}function Qt(e,t,n,r,i,a){var A=e.props.groupable,s=e.state,l=s.transformOrigin,u=s.targetMatrix,c=s.offsetMatrix,f=s.is3d,d=s.width,p=s.height,h=s.left,v=s.top,B=f?4:3,m=A?h:0,b=A?v:0;return g(function(e,t,n,r,i,o){var a=ht(ge(t,n,r,i),o);return[e[0]-a[0],e[1]-a[1]]}(i,gt(c,u,function(e,t,n,r,i,a){return void 0===r&&(r=t),void 0===i&&(i=n),void 0===a&&(a=[0,0]),e?e.map((function(e,A){var s=Object(o.W)(e),l=s.value,u=s.unit,c=A?i:r,f=A?n:t;return\"%\"===e||isNaN(l)?f*(c?a[A]/c:0):\"%\"!==u?l:f*l/100})):a}(a,t,n,d,p,l),B),t,n,B,r),[m,b])}function xt(e,t){return ht(Oe(e.state),t)}function Ft(e,t,n){var r=he(e,[t.clientLeft,t.clientTop],n);return[t.left+r[0],t.top+r[1]]}function Ut(e,t,n,r,i,o){var a=i[0],A=i[1],s=o[0],l=o[1],u=[],c=r?0:1,f=\"vertical\"===t?\"horizontal\":\"vertical\",d=Ie(e.filter((function(e){return e.type===t})),(function(e){return e.element})).map((function(e){return e[0]})).filter((function(e){var t=e.pos,n=e.sizes;return t[c]<=l&&s<=t[c]+n[c]}));return d.forEach((function(e){var t=e.pos[r],i=t+e.sizes[r];d.forEach((function(e){var o=e.pos,s=e.sizes,l=e.element,c=e.className,p=o[r],h=p+s[r],g=0,v=0,B=!0;if(i<=p)a<(g=h-(v=i-p))-n&&(B=!1);else{if(!(h<=t))return;A>(g=p-(v=t-h))+n&&(B=!1)}if(B&&u.push({pos:\"vertical\"===f?[g,o[1]]:[o[0],g],element:l,sizes:s,size:0,type:f,gap:v,className:c,gapGuidelines:d}),i<=a&&A<=p){var m=(p+i-(A-a))/2;He(a-(m-n),.1)>=0&&u.push({pos:\"vertical\"===f?[m,o[1]]:[o[0],m],className:c,element:l,sizes:s,size:0,type:f,gap:i-a,gapGuidelines:d})}}))})),u}function St(e,t,n,r,i,o,a){void 0===i&&(i=0),void 0===o&&(o=0),void 0===a&&(a={left:0,top:0,right:0,bottom:0});var A=[],s=a.left,l=a.top,u=a.bottom,c=n+a.right-s,f=r+u-l;return e&&e.forEach((function(e){A.push({type:\"horizontal\",pos:[s,He(e-o+l,.1)],size:c})})),t&&t.forEach((function(e){A.push({type:\"vertical\",pos:[He(e-i+s,.1),l],size:f})})),A}function Ot(e,t){var n=[];if(!t.length)return n;var r=e.state,i=e.props.snapCenter,o=r.containerClientRect,a=r.targetClientRect,A=a.top,s=a.left,l=r.rootMatrix,u=r.is3d?4:3,c=Ft(l,o,u),f=c[0],d=c[1],p=Oe(r),h=Object(S.c)(p),v=g([h.minX,h.minY],ze(l,[s-f,A-d],u)).map((function(e){return t=e,Math.round(t%1===-.5?t-1:t);var t})),B=v[0],m=v[1];return t.forEach((function(e){var t=e.element,r=e.top,o=e.left,a=e.right,A=e.bottom,s=e.className,c=t.getBoundingClientRect(),p=c.left-f,h=c.top-d,g=h+c.height,v=p+c.width,b=ze(l,[p,h],u),w=b[0],E=b[1],y=ze(l,[v,g],u),C=y[0],Q=y[1],x=C-w,F=Q-E,U=[x,F];!1!==r&&n.push({type:\"vertical\",element:t,pos:[He(w+B,.1),E],size:F,sizes:U,className:s}),!1!==A&&n.push({type:\"vertical\",element:t,pos:[He(C+B,.1),E],size:F,sizes:U,className:s}),!1!==o&&n.push({type:\"horizontal\",element:t,pos:[w,He(E+m,.1)],size:x,sizes:U,className:s}),!1!==a&&n.push({type:\"horizontal\",element:t,pos:[w,He(Q+m,.1)],size:x,sizes:U,className:s}),i&&(n.push({type:\"vertical\",element:t,pos:[He((w+C)/2+B,.1),E],size:F,sizes:U,center:!0,className:s}),n.push({type:\"horizontal\",element:t,pos:[w,He((E+Q)/2+m,.1)],size:x,sizes:U,center:!0,className:s}))})),n}function Ht(e,t,n){void 0===n&&(n=[]);var r=[],i=e.state;if(t&&i.guidelines&&i.guidelines.length)return r;var a=e.props.elementGuidelines,A=void 0===a?[]:a;if(!A.length)return r;var s=i.elementGuidelineValues||[],l=A.map((function(e){return Object(o.K)(e)&&\"element\"in e?e:{element:Je(e,!0)}})).filter((function(e){return e.element}));i.elementGuidelineValues=l;var u=Object(O.b)(s.map((function(e){return e.element})),l.map((function(e){return e.element}))),c=u.added,f=u.removed.map((function(e){return s[e].element})),d=Ot(e,c.map((function(e){return l[e]})).filter((function(e){return e.refresh&&t||!e.refresh&&!t})));return K(n.filter((function(e){return-1===f.indexOf(e.element)})),d)}function Tt(e){var t=e.state,n=t.snapOffset,r=t.staticGuidelines,i=t.containerClientRect,o=i.overflow,a=i.scrollHeight,A=i.scrollWidth,s=i.clientHeight,l=i.clientWidth,u=i.clientLeft,c=i.clientTop,f=e.props,d=f.snapHorizontal,p=void 0===d||d,h=f.snapVertical,g=void 0===h||h,v=f.snapGap,B=void 0===v||v,m=f.verticalGuidelines,b=f.horizontalGuidelines,w=f.snapThreshold,E=void 0===w?5:w,y=f.snapGridWidth,C=void 0===y?0:y,Q=f.snapGridHeight,x=void 0===Q?0:Q,F=K(r,Ht(e,!0));if(B){var U=ve(Oe(e.state)),S=U.top,O=U.left,H=U.bottom,T=U.right,N=r.filter((function(e){return e.element}));F.push.apply(F,K(Ut(N,\"horizontal\",E,0,[O,T],[S,H]),Ut(N,\"vertical\",E,1,[S,H],[O,T])))}return F.push.apply(F,function(e,t,n,r,i,o){void 0===i&&(i=0);void 0===o&&(o=0);var a=[];if(t)for(var A=0;A<r;A+=t)a.push({type:\"horizontal\",pos:[0,He(A-o,.1)],size:n,hide:!0});if(e)for(A=0;A<=n;A+=e)a.push({type:\"vertical\",pos:[He(A-i,.1),0],size:r,hide:!0});return a}(C,x,o?A:l,o?a:s,u,c)),F.push.apply(F,St(p&&b||!1,g&&m||!1,o?A:l,o?a:s,u,c,n)),F}function Nt(e,t,n,r,i){var a=e.props,A=a.snapElement,s=void 0===A||A,l=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var n=e.length-1,r=0;r<n;++r){var i=e[r];if(!Object(o.M)(i))return i}return e[n]}(i,a.snapThreshold,5);return _t(e.state.guidelines,t,n,{snapThreshold:l,snapCenter:r,snapElement:s})}function _t(e,t,n,r){return{vertical:Dt(e,\"vertical\",t,r),horizontal:Dt(e,\"horizontal\",n,r)}}function Mt(e,t,n,r){var i=e.props.snapCenter&&n,o=[\"left\",\"right\"],a=[\"top\",\"bottom\"];return i&&(o.push(\"center\"),a.push(\"middle\")),o=o.filter((function(e){return e in t})),a=a.filter((function(e){return e in t})),Nt(e,o.map((function(e){return t[e]})),a.map((function(e){return t[e]})),i,r)}function Rt(e){var t=e.isSnap;if(!t)return{isSnap:!1,offset:0,dist:-1,pos:0,guideline:null};var n=e.posInfos[0],r=n.guidelineInfos[0],i=r.offset,o=r.dist,a=r.guideline;return{isSnap:t,offset:i,dist:o,pos:n.pos,guideline:a}}function Dt(e,t,n,r){var i=void 0===r?{}:r,o=i.snapThreshold,a=void 0===o?5:o,A=i.snapElement,s=i.snapCenter;if(!e||!e.length)return{isSnap:!1,index:-1,posInfos:[]};var l=\"vertical\"===t?0:1,u=n.map((function(n,r){var i=e.map((function(e){var t=e.pos,r=n-t[l];return{offset:r,dist:Math.abs(r),guideline:e}})).filter((function(e){var n=e.guideline,r=e.dist,i=n.type,o=n.center,l=n.element;return!(!A&&l||!s&&o||i!==t||r>a)})).sort((function(e,t){return e.dist-t.dist}));return{pos:n,index:r,guidelineInfos:i}})).filter((function(e){return e.guidelineInfos.length>0})).sort((function(e,t){return e.guidelineInfos[0].dist-t.guidelineInfos[0].dist})),c=u.length>0;return{isSnap:c,index:c?u[0].index:-1,posInfos:u}}function Pt(e,t){var n=Math.abs(e.offset),r=Math.abs(t.offset);return e.isBound&&t.isBound?r-n:e.isBound?-1:t.isBound?1:e.isSnap&&t.isSnap?r-n:e.isSnap?-1:t.isSnap||n<1e-7?1:r<1e-7?-1:n-r}function kt(e,t){return e.slice().sort((function(e,n){var r=e.sign[t],i=n.sign[t],o=e.offset[t],a=n.offset[t];return r?i?Pt({isBound:e.isBound,isSnap:e.isSnap,offset:o},{isBound:n.isBound,isSnap:n.isSnap,offset:a}):-1:1}))[0]}function It(e,t){var n=Object(o.r)([t[0][0],t[1][0]]),r=Object(o.r)([t[0][1],t[1][1]]);return{vertical:n<=e[0],horizontal:r<=e[1]}}function Kt(e,t){var n,r,i=t[0],o=t[1],a=o[0]-i[0],A=o[1]-i[1];if(Math.abs(a)<1e-7&&(a=0),Math.abs(A)<1e-7&&(A=0),a)if(A){n=A/a*(e[0]-i[0])+i[1],r=e[1]}else n=i[1],r=e[1];else n=i[0],r=e[0];return n-r}function Lt(e,t,n){void 0===n&&(n=1e-7);var r=Kt(e[0],t)<=0;return e.slice(1).every((function(e){var i=Kt(e,t);return i<=0===r||Math.abs(i)<=n}))}function zt(e,t,n,r,i){return void 0===i&&(i=0),r&&t-i<=e||!r&&e<=n+i?{isBound:!0,offset:r?t-e:n-e}:{isBound:!1,offset:0}}function jt(e,t,n,r,i){var o=e[0],a=e[1],A=t[0],s=t[1],l=Ve(a[1]-o[1]),u=Ve(a[0]-o[0]),c=Ve(s[1]-A[1]);if(!Ve(s[0]-A[0])){if(i&&!l)return{isBound:!1,offset:0};if(u)return zt(l/u*(A[0]-o[0])+o[1],A[1],s[1],n,r);var f=A[0]-o[0];return{isBound:d=Math.abs(f)<=(r||0),offset:d?f:0}}if(!c){if(i&&!u)return{isBound:!1,offset:0};if(l)return zt((A[1]-o[1])/(l/u)+o[0],A[0],s[0],n,r);var d;f=A[1]-o[1];return{isBound:d=Math.abs(f)<=(r||0),offset:d?f:0}}return{isBound:!1,offset:0}}function Xt(e,t,n,r){return t.map((function(t){var i=t[0],o=t[1],a=t[2],A=function(e,t,n){var r=e.props.innerBounds;if(!r)return{isAllBound:!1,isBound:!1,isVerticalBound:!1,isHorizontalBound:!1,offset:[0,0]};var i=r.left,o=r.top,a=r.width,A=r.height,s=[[i,o],[i,o+A]],l=[[i,o],[i+a,o]],u=[[i+a,o],[i+a,o+A]],c=[[i,o+A],[i+a,o+A]],f=It(n,t),d=f.horizontal,p=f.vertical;if(Lt([n,[i,o],[i+a,o],[i,o+A],[i+a,o+A]],t))return{isAllBound:!1,isBound:!1,isVerticalBound:!1,isHorizontalBound:!1,offset:[0,0]};var h=jt(t,l,p),g=jt(t,c,p),v=jt(t,s,d),B=jt(t,u,d),m=h.isBound&&g.isBound,b=h.isBound||g.isBound,w=v.isBound&&B.isBound,E=v.isBound||B.isBound,y=Le(h.offset,g.offset),C=Le(v.offset,B.offset),Q=[0,0],x=!1,F=!1;return Math.abs(C)<Math.abs(y)?(Q=[y,0],x=b,F=m):(Q=[0,C],x=E,F=w),{isAllBound:F,isVerticalBound:b,isHorizontalBound:E,isBound:x,offset:Q}}(e,[o,a],n),s=A.isBound,l=A.offset,u=A.isVerticalBound,c=A.isHorizontalBound,f=ft({datas:r,distX:l[0],distY:l[1]}).map((function(e,t){return e*(i[t]?2/i[t]:0)}));return{sign:i,isBound:s,isVerticalBound:u,isHorizontalBound:c,isSnap:!1,offset:f}}))}function Gt(e,t,n){var r,i=Xt(e,Vt(t,[0,0],!1).map((function(e){var t=e[0],n=e[1],r=e[2];return[t.map((function(e){return 2*Math.abs(e)})),n,r]})),ht(t,[0,0]),n),o=kt(i,0),a=kt(i,1),A=0,s=0,l=o.isVerticalBound||a.isVerticalBound,u=o.isHorizontalBound||a.isHorizontalBound;return(l||u)&&(A=(r=function(e,t){var n=e.datas,r=e.distX,i=e.distY,o=n.beforeMatrix,a=n.matrix,A=n.is3d,s=n.startDragBeforeDist,l=n.startDragDist,u=n.absoluteOrigin,c=A?4:3;return g(B(t?o:a,h(t?s:l,[r,i]),c),u)}({datas:n,distX:-o.offset[0],distY:-a.offset[1]}))[0],s=r[1]),{vertical:{isBound:l,offset:A},horizontal:{isBound:u,offset:s}}}function Vt(e,t,n){return function(e,t){var n=[],r=e[0],i=e[1];return r&&i?n.push([[0,2*i],e,[-r,i]],[[2*r,0],e,[r,-i]]):r?(n.push([[2*r,0],[r,1],[r,-1]]),t&&n.push([[0,-1],[r,-1],[-r,-1]],[[0,1],[r,1],[-r,1]])):i?(n.push([[0,2*i],[1,i],[-1,i]]),t&&n.push([[-1,0],[-1,i],[-1,-i]],[[1,0],[1,i],[1,-i]])):n.push([[-1,0],[-1,-1],[-1,1]],[[1,0],[1,-1],[1,1]],[[0,-1],[-1,-1],[1,-1]],[[0,1],[-1,1],[1,1]]),n}(t,n).map((function(t){var n=t[0],r=t[1],i=t[2];return[n,ht(e,r),ht(e,i)]}))}function Yt(e,t,n,r){var i=r?e.map((function(e){return m(e,r)})):e,o=K([n],t);return[[i[0],i[1]],[i[1],i[3]],[i[3],i[2]],[i[2],i[0]]].some((function(e){return!Lt(o,e)}))}function Wt(e,t,n,r,i){var a=e.props.innerBounds,A=i*Math.PI/180;if(!a)return[];var s=a.left,l=a.top,u=a.width,c=a.height,f=s-r[0],d=s+u-r[0],p=l-r[1],h=l+c-r[1],g=[[f,p],[d,p],[f,h],[d,h]],v=ht(n,[0,0]);if(!Yt(n,g,v,0))return[];var B=[],m=g.map((function(e){return[be(e),Object(o.E)([0,0],e)]}));return[[n[0],n[1]],[n[1],n[3]],[n[3],n[2]],[n[2],n[0]]].forEach((function(e){var n=Object(o.E)([0,0],function(e){var t=e[0],n=e[1],r=n[0]-t[0],i=n[1]-t[1];if(!r)return[t[0],0];if(!i)return[0,t[1]];var o=i/r,a=-o*t[0]+t[1];return[-a/(o+1/o),a/(o*o+1)]}(e)),r=function(e){var t=e[0],n=e[1],r=n[0]-t[0],i=n[1]-t[1];if(!r)return Math.abs(t[0]);if(!i)return Math.abs(t[1]);var o=i/r;return Math.abs((-o*t[0]+t[1])/Math.sqrt(Math.pow(o,2)+1))}(e);B.push.apply(B,m.filter((function(e){var t=e[0];return t&&r<=t})).map((function(e){var t=e[0],i=e[1],o=Math.acos(t?r/t:0);return[A+(i+o)-n,A+(i-o)-n]})).reduce((function(e,t){return e.push.apply(e,t),e}),[]).filter((function(e){return!Yt(t,g,v,e)})).map((function(e){return He(180*e/Math.PI,1e-7)})))})),B}function Jt(e,t,n){var r=e||{},i=r.position,o=void 0===i?\"client\":i,a=r.left,A=void 0===a?-1/0:a,s=r.top,l=void 0===s?-1/0:s,u=r.right,c=void 0===u?1/0:u,f=r.bottom,d={position:o,left:A,top:l,right:c,bottom:void 0===f?1/0:f};return{vertical:Zt(d,t,!0),horizontal:Zt(d,n,!1)}}function qt(e,t){var n=e.state,r=n.containerClientRect,i=r.clientHeight,o=r.clientWidth,a=r.clientLeft,A=r.clientTop,s=n.snapOffset,l=s.left,u=s.top,c=s.right,f=s.bottom,d=t||e.props.bounds||{},p=\"css\"===(d.position||\"client\"),h=d.left,g=void 0===h?-1/0:h,v=d.top,B=void 0===v?-1/0:v,m=d.right,b=void 0===m?p?-1/0:1/0:m,w=d.bottom,E=void 0===w?p?-1/0:1/0:w;return p&&(b=o+c-l-b,E=i+f-u-E),{left:g+l-a,right:b+l-a,top:B+u-A,bottom:E+u-A}}function Zt(e,t,n){var r=e[n?\"left\":\"top\"],i=e[n?\"right\":\"bottom\"],o=Math.min.apply(Math,t),a=Math.max.apply(Math,t),A=[];return r+1>o&&A.push({isBound:!0,offset:o-r,pos:r}),i-1<a&&A.push({isBound:!0,offset:a-i,pos:i}),A.length||A.push({isBound:!1,offset:0,pos:0}),A.sort((function(e,t){return Math.abs(t.offset)-Math.abs(e.offset)}))}function $t(e,t,n){return(n?e.map((function(e){return m(e,n)})):e).some((function(e){return e[0]<t.left&&Math.abs(e[0]-t.left)>.1||e[0]>t.right&&Math.abs(e[0]-t.right)>.1||e[1]<t.top&&Math.abs(e[1]-t.top)>.1||e[1]>t.bottom&&Math.abs(e[1]-t.bottom)>.1}))}function en(e,t,n,r,i){if(!e.props.bounds)return[];var a=i*Math.PI/180,A=qt(e),s=A.left,l=A.top,u=A.right,c=A.bottom,f=s-r[0],d=u-r[0],p=l-r[1],h=c-r[1],g={left:f,top:p,right:d,bottom:h};if(!$t(n,g,0))return[];var v=[];return[[f,0],[d,0],[p,1],[h,1]].forEach((function(e){var r=e[0],i=e[1];n.forEach((function(e){var n=Object(o.E)([0,0],e);v.push.apply(v,function(e,t,n){var r=be(e),i=Math.sqrt(r*r-t*t)||0;return[i,-i].sort((function(t,r){return Math.abs(t-e[n?0:1])-Math.abs(r-e[n?0:1])})).map((function(e){return Object(o.E)([0,0],n?[e,t]:[t,e])}))}(e,r,i).map((function(e){return a+e-n})).filter((function(e){return!$t(t,g,e)})).map((function(e){return He(180*e/Math.PI,1e-7)})))}))})),v}var tn={horizontal:[\"left\",\"top\",\"width\",\"Y\",\"X\"],vertical:[\"top\",\"left\",\"height\",\"X\",\"Y\"]};function nn(e,t,n,r){var i=e-n,o=i<0?i+t:r;return{size:(i<0?0:i)-o,pos:o}}function rn(e,t){return function(e,t){var n,r=e.direction,i=e.classNames,o=e.size,a=e.pos,A=e.zoom,s=e.key,l=\"horizontal\"===r,u=l?\"Y\":\"X\";return t.createElement(\"div\",{key:s,className:i.join(\" \"),style:(n={},n[l?\"width\":\"height\"]=\"\"+o,n.transform=\"translate(\"+a[0]+\", \"+a[1]+\") translate\"+u+\"(-50%) scale\"+u+\"(\"+A+\")\",n)})}(I(I({},e),{classNames:K([te(\"line\",\"guideline\",e.direction)],e.classNames).filter((function(e){return e})),size:e.size||e.sizeValue+\"px\",pos:e.pos||e.posValue.map((function(e){return He(e,.1)+\"px\"}))}),t)}function on(e,t,n,r,i,o,a,A,s,l,u,c){var f=e.props,d=f.zoom,p=f.isDisplaySnapDigit,h=void 0===p||p,g=tn[t],v=g[0],B=g[1],m=g[2],b=g[4];return Ke(n.map((function(e,n){var f=!0;return e.map((function(e,p){var g,w=e.pos,E=e.size,y=nn(w[l],E,i,o),C=y.pos,Q=y.size;if(Q<A)return null;var x=f;f=!1;var F=h&&x?parseFloat(Q.toFixed(s)):0;return c.createElement(\"div\",{key:t+\"LinkGuideline\"+n+\"-\"+p,className:te(\"guideline-group\",t),style:(g={},g[v]=r+C+\"px\",g[B]=-a+w[l?0:1]+\"px\",g[m]=Q+\"px\",g)},rn({direction:t,classNames:[te(\"dashed\")],size:\"100%\",posValue:[0,0],sizeValue:Q,zoom:d},c),c.createElement(\"div\",{className:te(\"size-value\"),style:{transform:\"translate\"+b+\"(-50%) scale(\"+d+\")\"}},F>0?u(F):\"\"))}))})))}function an(e,t,n,r,i,o,a,A){var s=e.props.zoom;return n.map((function(e,n){var l=e.type,u=e.pos,c=[0,0];return c[a]=r,c[a?0:1]=-i+u,rn({key:t+\"TargetGuideline\"+n,classNames:[te(\"target\",\"bold\",l)],posValue:c,sizeValue:o,zoom:s,direction:t},A)}))}function An(e,t,n,r,i,a){var A=e.props.isDisplayInnerSnapDigit,s=n?0:1,l=r[n],u=a[n],c=[],f=t.filter((function(e){var t=e.element,i=e.pos,o=e.size;if(A&&t&&i[n]<l&&l+u<i[n]+o){var a=i[n]-l,f=i[s]-r[s];return c.push(I(I({},e),{inner:!0,gap:a,renderPos:n?[f,a]:[a,f]})),c.push(I(I({},e),{inner:!0,gap:i[n]+o-l-u,renderPos:n?[f,u]:[u,f]})),!1}return!0})),d=function(e,t,n,r){var i=[],a=Ie(e.filter((function(e){var t=e.element,n=e.gap;return t&&!n})),(function(e){var n=e.element,a=e.pos,A=a[r],s=(Math.min(0,A-t)<0?-1:1)+\"_\"+a[r?0:1],l=Object(o.z)(i,(function(e){var t=e[0],r=e[1];return n===t&&A===r}));return l?l[2]:(i.push([n,A,s]),s)}));return a.forEach((function(e){e.sort((function(e,i){return nn(e.pos[r],e.size,t,n).size-nn(i.pos[r],e.size,t,n).size||e.pos[r?0:1]-i.pos[r?0:1]}))})),a}(f=f.filter((function(e){var t=e.element,r=e.pos,i=e.size,o=r[n];return!t||f.every((function(t){var r=t.element,a=t.pos,A=t.size,s=a[n];return!r||e===t||(o+i<=s||s+A<=o||o<s&&s+A<o+i)}))})),i[n],u,n);return c=c.filter((function(e){var t=e.gap,r=e.pos[s];return d.every((function(e){return e.every((function(e){var i=e.pos,o=-l+i[n];return i[s]!==r||!(t<0&&o<0)&&!(t>0&&o>a[n])}))}))})),{guidelines:f,groups:d,gapGuidelines:c}}function sn(e,t,n,r,i){var o=e.props.zoom;return n.filter((function(e){return!e.hide})).map((function(e,n){var a=e.pos,A=e.size,s=e.element,l=[-r[0]+a[0],-r[1]+a[1]];return rn({key:t+\"Guideline\"+n,classNames:s?[te(\"bold\")]:[],direction:t,posValue:l,sizeValue:A,zoom:o},i)}))}function ln(e,t,n,r,i){var o=e.props,a=o.snapDigit,A=void 0===a?0:a,s=o.isDisplaySnapDigit,l=void 0===s||s,u=o.zoom,c=\"horizontal\"===t?\"X\":\"Y\",f=\"horizontal\"===t?\"width\":\"height\";return n.map((function(e,n){var o,a=e.renderPos,s=e.gap,d=e.className,p=e.inner,h=Math.abs(s),g=l?parseFloat(h.toFixed(A)):0;return i.createElement(\"div\",{key:t+\"GapGuideline\"+n,className:te(\"guideline-group\",t),style:(o={left:a[0]+\"px\",top:a[1]+\"px\"},o[f]=h+\"px\",o)},rn({direction:t,classNames:[te(p?\"dashed\":\"gap\"),d],size:\"100%\",posValue:[0,0],sizeValue:h,zoom:u},i),i.createElement(\"div\",{className:te(\"size-value\",\"gap\"),style:{transform:\"translate\"+c+\"(-50%) scale(\"+u+\")\"}},g>0?r(g):\"\"))}))}function un(e){var t=e.state;if(!t.guidelines||!t.guidelines.length){var n=e.state.container,r=e.props.snapContainer||n,i=t.containerClientRect,o={left:0,top:0,bottom:0,right:0};if(n!==r){var a=Je(r,!0);if(a){var A=Fe(a),s=Ze(t,[A.left-i.left,A.top-i.top]),l=Ze(t,[A.right-i.right,A.bottom-i.bottom]);o.left=He(s[0],.1),o.top=He(s[1],.1),o.right=He(l[0],.1),o.bottom=He(l[1],.1)}}t.snapOffset=o,t.elementGuidelineValues=[],t.staticGuidelines=Ht(e,!1),t.guidelines=Tt(e),t.enableSnap=!0}}function cn(e,t){var n=e.props,r=n.snappable,i=n.bounds,o=n.innerBounds,a=n.verticalGuidelines,A=n.horizontalGuidelines,s=n.snapGridWidth,l=n.snapGridHeight,u=e.state,c=u.guidelines,f=u.enableSnap;return!(!r||!f||t&&!0!==r&&r.indexOf(t)<0)&&!!(s||l||i||o||c&&c.length||a&&a.length||A&&A.length)}function fn(e,t,n,r,i){var a=function(e,t,n,r){var i=t[0]-e[0],o=t[1]-e[1];Math.abs(i)<1e-7&&(i=0);Math.abs(o)<1e-7&&(o=0);if(!i)return r?[0,0]:[0,n];if(!o)return r?[n,0]:[0,0];var a=o/i,A=e[1]-a*e[0];if(r){var s=a*(t[0]+n)+A;return[n,s-t[1]]}return[(t[1]+n-A)/a-t[0],n]}(e,t,n,r);if(!a)return{isOutside:!1,offset:[0,0]};var A=Object(o.C)(e,t),s=Object(o.C)(a,e),l=Object(o.C)(a,t),u=s>A||l>A,c=ft({datas:i,distX:a[0],distY:a[1]});return{offset:[c[0],c[1]],isOutside:u}}function dn(e,t,n,r,i,o){var a=ge(e,t,n,o?4:3);return Se(a,g(r,function(e,t){return ht(e,t.map((function(e){return-e})))}(a,i)))}function pn(e,t){return e.isBound?e.offset:t.isSnap?t.offset:0}function hn(e,t){return e.isBound?e.offset:t.isSnap?Rt(t).offset:0}function gn(e,t,n,r){var i=function(e,t,n){var r=qt(e),i=r.left,o=r.top,a=r.right,A=r.bottom,s=n[0],l=n[1],u=g(n,t),c=u[0],f=u[1];Math.abs(c)<1e-7&&(c=0),Math.abs(f)<1e-7&&(f=0);var d=f>0,p=c>0,h={isBound:!1,offset:0,pos:0},v={isBound:!1,offset:0,pos:0};if(0===c&&0===f)return{vertical:h,horizontal:v};if(0===c)d?A<l&&(v.pos=A,v.offset=l-A):o>l&&(v.pos=o,v.offset=l-o);else if(0===f)p?a<s&&(h.pos=a,h.offset=s-a):i>s&&(h.pos=i,h.offset=s-i);else{var B=f/c,m=n[1]-B*s,b=0,w=0,E=!1;p&&a<=s?(b=B*a+m,w=a,E=!0):!p&&s<=i&&(b=B*i+m,w=i,E=!0),E&&(b<o||b>A)&&(E=!1),E||(d&&A<=l?(w=((b=A)-m)/B,E=!0):!d&&l<=o&&(w=((b=o)-m)/B,E=!0)),E&&(h.isBound=!0,h.pos=w,h.offset=s-w,v.isBound=!0,v.pos=b,v.offset=l-b)}return{vertical:h,horizontal:v}}(e,t,n),o=i.horizontal,a=i.vertical,A=r?{horizontal:{isSnap:!1},vertical:{isSnap:!1}}:function(e,t,n){var r=n[0],i=n[1],o=t[0],a=t[1],A=g(n,t),s=A[0],l=A[1],u=l>0,c=s>0;s=Ve(s),l=Ve(l);var f={isSnap:!1,offset:0,pos:0},d={isSnap:!1,offset:0,pos:0};if(0===s&&0===l)return{vertical:f,horizontal:d};var p=Nt(e,s?[r]:[],l?[i]:[]),h=p.vertical,v=p.horizontal;h.posInfos.filter((function(e){var t=e.pos;return c?t>=o:t<=o})),v.posInfos.filter((function(e){var t=e.pos;return u?t>=a:t<=a})),h.isSnap=h.posInfos.length>0,v.isSnap=v.posInfos.length>0;var B=Rt(h),m=B.isSnap,b=B.guideline,w=Rt(v),E=w.isSnap,y=w.guideline,C=E?y.pos[1]:0,Q=m?b.pos[0]:0;if(0===s)E&&(d.isSnap=!0,d.pos=y.pos[1],d.offset=i-d.pos);else if(0===l)m&&(f.isSnap=!0,f.pos=Q,f.offset=r-Q);else{var x=l/s,F=n[1]-x*r,U=0,S=0,O=!1;m?(U=x*(S=Q)+F,O=!0):E&&(S=((U=C)-F)/x,O=!0),O&&(f.isSnap=!0,f.pos=S,f.offset=r-S,d.isSnap=!0,d.pos=U,d.offset=i-U)}return{vertical:f,horizontal:d}}(e,t,n),s=A.horizontal,l=A.vertical,u=pn(o,s),c=pn(a,l),f=Math.abs(u),d=Math.abs(c);return{horizontal:{isBound:o.isBound,isSnap:s.isSnap,offset:u,dist:f},vertical:{isBound:a.isBound,isSnap:l.isSnap,offset:c,dist:d}}}function vn(e,t,n,r){void 0===r&&(r=n);var i=Jt(qt(e),r.map((function(e){return e[0]})),r.map((function(e){return e[1]}))),o=i.horizontal,a=i.vertical,A=t?{horizontal:{isSnap:!1,index:-1},vertical:{isSnap:!1,index:-1}}:Nt(e,n.map((function(e){return e[0]})),n.map((function(e){return e[1]})),e.props.snapCenter),s=A.horizontal,l=A.vertical,u=hn(o[0],s),c=hn(a[0],l),f=Math.abs(u),d=Math.abs(c);return{horizontal:{isBound:o[0].isBound,isSnap:s.isSnap,snapIndex:s.index,offset:u,dist:f,bounds:o,snap:s},vertical:{isBound:a[0].isBound,isSnap:l.isSnap,snapIndex:l.index,offset:c,dist:d,bounds:a,snap:l}}}function Bn(e,t,n,r,i){void 0===i&&(i={});var o=Jt(t,n,r),a=o.horizontal,A=o.vertical,s=i.isRequest?{horizontal:{isSnap:!1,index:-1},vertical:{isSnap:!1,index:-1}}:_t(e,n,r,i),l=s.horizontal,u=s.vertical,c=hn(a[0],l),f=hn(A[0],u),d=Math.abs(c),p=Math.abs(f);return{horizontal:{isBound:a[0].isBound,isSnap:l.isSnap,snapIndex:l.index,offset:c,dist:d,bounds:a,snap:l},vertical:{isBound:A[0].isBound,isSnap:u.isSnap,snapIndex:u.index,offset:f,dist:p,bounds:A,snap:u}}}function mn(e,t,n,r,i,a){return n.map((function(n){var A=n[0],s=n[1],l=ht(t,A),u=ht(t,s),c=r?gn(e,l,u,i):vn(e,i,[u]),f=c.horizontal,d=f.offset,p=f.isBound,h=f.isSnap,v=c.vertical,B=v.offset,m=v.isBound,b=v.isSnap,w=g(s,A);if(!B&&!d)return{isBound:m||p,isSnap:b||h,sign:w,offset:[0,0]};var E=function(e,t,n,r){var i=Object(o.E)(e,t)/Math.PI*180,a=n.vertical,A=a.isBound,s=a.isSnap,l=a.dist,u=n.horizontal,c=u.isBound,f=u.isSnap,d=i%180,p=d<3||d>177,h=d>87&&d<93;return u.dist<l&&(A||s&&!h&&(!r||!p))?\"vertical\":!c&&(!f||p||r&&h)?\"\":\"horizontal\"}(l,u,c,r);if(!E)return{sign:w,isBound:!1,isSnap:!1,offset:[0,0]};var y=\"vertical\"===E,C=fn(l,u,-(y?B:d),y,a).offset.map((function(e,t){return e*(w[t]?2/w[t]:0)}));return{sign:w,isBound:y?m:p,isSnap:y?b:h,offset:C}}))}function bn(e,t,n,r,i,o){var a=function(e,t){var n=[],r=[-e[0],-e[1]];return e[0]&&e[1]?(n.push([r,[e[0],-e[1]]],[r,[-e[0],e[1]]]),t&&n.push([r,e])):e[0]?t?n.push([r,[r[0],-1]],[r,[r[0],1]],[r,[e[0],-1]],[r,e],[r,[e[0],1]]):n.push([[r[0],-1],[e[0],-1]],[[r[0],0],[e[0],0]],[[r[0],1],[e[0],1]]):e[1]?t?n.push([r,[-1,r[1]]],[r,[1,r[1]]],[r,[-1,e[1]]],[r,[1,e[1]]],[r,e]):n.push([[-1,r[1]],[-1,e[1]]],[[0,r[1]],[0,e[1]]],[[1,r[1]],[1,e[1]]]):n.push([r,[1,0]],[r,[-1,0]],[r,[0,-1]],[r,[0,1]],[[1,0],[1,-1]],[[1,0],[1,1]],[[0,1],[1,1]],[[0,1],[-1,1]],[[-1,0],[-1,-1]],[[-1,0],[-1,1]],[[0,-1],[1,-1]],[[0,-1],[-1,-1]]),n}(n,r),A=Vt(t,n,r),s=K(mn(e,t,a,r,i,o),Xt(e,A,ht(t,[0,0]),o)),l=kt(s,0),u=kt(s,1);return{width:{isBound:l.isBound,offset:l.offset[0]},height:{isBound:u.isBound,offset:u.offset[1]}}}function wn(e,t,n,r,i,a,A,s){for(var l=Oe(e.state),u=e.props.keepRatio,c=0,f=0,d=0;d<2;++d){var p=bn(e,t(c,f),i,u,A,s),h=p.width,g=p.height,v=h.isBound,B=g.isBound,m=h.offset,b=g.offset;if(1===d&&(v||(m=0),B||(b=0)),0===d&&A&&!v&&!B)return[0,0];if(u){var w=Math.abs(m)*(n?1/n:1),E=Math.abs(b)*(r?1/r:1);(v&&B?w<E:B||!v&&w<E)?m=n*b/r:b=r*m/n}c+=m,f+=b}if(i[0]&&i[1]){var y=function(e,t,n,r,i){var a=[-n[0],-n[1]],A=e.state,s=A.width,l=A.height,u=e.props.bounds,c=1/0,f=1/0;if(u){var d=[[n[0],-n[1]],[-n[0],n[1]]],p=u.left,h=void 0===p?-1/0:p,g=u.top,v=void 0===g?-1/0:g,B=u.right,m=void 0===B?1/0:B,b=u.bottom,w=void 0===b?1/0:b;d.forEach((function(e){var n=e[0]!==a[0],A=e[1]!==a[1],u=ht(t,e),d=360*Object(o.E)(r,u)/Math.PI;if(A){var p=u.slice();(Math.abs(d-360)<2||Math.abs(d-180)<2)&&(p[1]=r[1]);var g=fn(r,p,(r[1]<u[1]?w:v)-u[1],!1,i),B=g.offset[1],b=g.isOutside;isNaN(B)||(f=l+(b?1:-1)*Math.abs(B))}if(n){p=u.slice();(Math.abs(d-90)<2||Math.abs(d-270)<2)&&(p[0]=r[0]);var E=fn(r,p,(r[0]<u[0]?m:h)-u[0],!0,i),y=E.offset[0],C=E.isOutside;isNaN(y)||(c=s+(C?1:-1)*Math.abs(y))}}))}return{maxWidth:c,maxHeight:f}}(e,l,i,a,s),C=y.maxWidth,Q=y.maxHeight,x=function(e,t,n,r,i,o,a,A,s){var l=vn(e,A,[ht(t,a)]),u=l.horizontal.offset,c=l.vertical.offset;if(c||u){var f=ft({datas:s,distX:-c,distY:-u}),d=f[0],p=f[1];return[Math.min(i||1/0,n+a[0]*d)-n,Math.min(o||1/0,r+a[1]*p)-r]}return[0,0]}(e,t(c,f).map((function(e){return e.map((function(e){return He(e,1e-4)}))})),n+c,r+f,C,Q,i,A,s);c+=m=x[0],f+=b=x[1]}return[c,f]}function En(e,t,n,r){if(!cn(e,\"rotatable\"))return r;var i=t.pos1,o=t.pos2,a=t.pos3,A=t.pos4,s=r*Math.PI/180,l=[i,o,a,A].map((function(e){return g(e,n)})),u=l.map((function(e){return m(e,s)})),c=K(en(e,l,u,n,r),Wt(e,l,u,n,r));return c.sort((function(e,t){return Math.abs(e-r)-Math.abs(t-r)})),c.length?c[0]:r}function yn(e,t,n,r,i){var o=i.width,a=i.height,A=i.fixedPosition;if(!cn(e,\"scalable\"))return[0,0];var s=i.is3d,l=wn(e,(function(e,r){return dn(function(e,t){var n=e.transformOrigin,r=e.offsetMatrix,i=e.is3d?4:3;return gt(r,p(e.targetMatrix,E(t,i),i),n,i)}(i,h(t,[e/o,r/a])),o,a,A,n,s)}),o,a,n,A,r,i);return[l[0]/o,l[1]/a]}function Cn(e,t,n,r,i,o){if(!cn(e,\"draggable\"))return[{isSnap:!1,isBound:!1,offset:0},{isSnap:!1,isBound:!1,offset:0}];var a=Se(o.absolutePoses,[t,n]),A=ve(a),s=A.left,l=A.right,u=A.top,c=A.bottom,f=[[s,u],[l,u],[s,c],[l,c]];e.props.snapCenter&&f.push([(s+l)/2,(u+c)/2]);var d=vn(e,i,f,a),p=d.vertical,h=d.horizontal,v=Gt(e,a,o),B=v.vertical,m=v.horizontal,b=p.isSnap,w=h.isSnap,E=p.isBound||B.isBound,y=h.isBound||m.isBound,C=function(e,t,n,r,i){var o=t[0],a=t[1],A=n[0],s=n[1],l=r[0],u=r[1],c=i[0],f=i[1],d=-c,p=-f;if(e&&o&&a){d=0,p=0;var h=[];if(A&&s?h.push([0,f],[c,0]):A?h.push([c,0]):s?h.push([0,f]):l&&u?h.push([0,f],[c,0]):l?h.push([c,0]):u&&h.push([0,f]),h.length){h.sort((function(e,t){return be(g([o,a],e))-be(g([o,a],t))}));var v=h[0];if(v[0]&&Math.abs(o)>1e-7)d=-v[0],p=a*Math.abs(o+d)/Math.abs(o)-a;else if(v[1]&&Math.abs(a)>1e-7){var B=a;p=-v[1],d=o*Math.abs(a+p)/Math.abs(B)-o}if(e&&s&&A)if(Math.abs(d)>1e-7&&Math.abs(d)<Math.abs(c))d*=m=Math.abs(c)/Math.abs(d),p*=m;else if(Math.abs(p)>1e-7&&Math.abs(p)<Math.abs(f)){var m;d*=m=Math.abs(f)/Math.abs(p),p*=m}else d=Le(-c,d),p=Le(-f,p)}}else d=o||A?-c:0,p=a||s?-f:0;return[d,p]}(r,[t,n],[E,y],[b,w],[Le(p.offset,B.offset),Le(h.offset,m.offset)]);return[{isBound:E,isSnap:b,offset:C[0]},{isBound:y,isSnap:w,offset:C[1]}]}function Qn(e){var t=[];return e.forEach((function(e){e.guidelineInfos.forEach((function(e){var n=e.guideline;t.indexOf(n)>-1||t.push(n)}))})),t}function xn(e,t,n,r){var i=e.filter((function(e){var n=e.element,r=e.gap,i=e.type;return n&&r&&i===t})),o=\"vertical\"===t?[0,1]:[1,0],a=o[0],A=o[1];return Ke(i.map((function(e){var t=e.pos,i=e.gap,o=e.gapGuidelines,s=e.sizes,l=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return e.sort((function(e,t){return Math.abs(e)-Math.abs(t)})),e[0]}(t[A]+s[A]-n[A],t[A]-n[A]-r[A]),u=Math.min(s[A],r[A]);if(l>0&&l>u?l=2*(l-u/2):l<0&&l<-u&&(l=2*(l+u/2)),0===l)return[];var c=(l>0?0:r[A])+l/2;return K(function(e,t,n,r,i,o,a){var A=Math.abs(o),s=i[t]+(o>0?r[0]:0);return e.filter((function(e){return e.pos[t]<=n[t]})).sort((function(e,n){var r=e.pos;return n.pos[t]-r[t]})).filter((function(e){var n=e.pos,r=e.sizes,i=n[t];return He(i+r[t],1e-4)===He(s-A,1e-4)&&(s=i,!0)})).map((function(e){var r=-n[t]+e.pos[t]+e.sizes[t];return I(I({},e),{gap:o,renderPos:t?[a,r]:[r,a]})}))}(o,a,n,r,t,i,c),function(e,t,n,r,i,o,a){var A=Math.abs(o),s=i[t]+(o<0?r[t]:0);return e.filter((function(e){return e.pos[t]>n[t]})).sort((function(e,n){var r=e.pos,i=n.pos;return r[t]-i[t]})).filter((function(e){var n=e.pos,r=e.sizes,i=n[t];return He(i,1e-4)===He(s+A,1e-4)&&(s=i+r[t],!0)})).map((function(e){var r=-n[t]+e.pos[t]-A;return I(I({},e),{gap:o,renderPos:t?[a,r]:[r,a]})}))}(o,a,n,r,t,i,c))})))}function Fn(e,t,n,r,i,a){var A=Jt(qt(e,a),t,n),s=A.vertical,l=A.horizontal;s.forEach((function(e){e.isBound&&r.push({type:\"bounds\",pos:e.pos})})),l.forEach((function(e){e.isBound&&i.push({type:\"bounds\",pos:e.pos})}));var u=function(e){var t=e.props.innerBounds;if(!t)return{vertical:[],horizontal:[]};var n=e.getRect(),r=n.pos1,i=n.pos2,o=n.pos3,a=n.pos4,A=ht([r,i,o,a],[0,0]),s=t.left,l=t.top,u=t.width,c=t.height,f=[[s,l],[s,l+c]],d=[[s,l],[s+u,l]],p=[[s+u,l],[s+u,l+c]],h=[[s,l+c],[s+u,l+c]],g=[],v=[],B={top:!1,bottom:!1,left:!1,right:!1};return[[r,i],[i,a],[a,o],[o,r]].forEach((function(e){var t=It(A,e),n=t.horizontal,r=t.vertical,i=jt(e,d,r,1,!0),o=jt(e,h,r,1,!0),a=jt(e,f,n,1,!0),m=jt(e,p,n,1,!0);i.isBound&&!B.top&&(g.push(l),B.top=!0),o.isBound&&!B.bottom&&(g.push(l+c),B.bottom=!0),a.isBound&&!B.left&&(v.push(s),B.left=!0),m.isBound&&!B.right&&(v.push(s+u),B.right=!0)})),{horizontal:g,vertical:v}}(e),c=u.vertical,f=u.horizontal;c.forEach((function(e){Object(o.A)(r,(function(t){var n=t.type,r=t.pos;return\"bounds\"===n&&r===e}))>=0||r.push({type:\"bounds\",pos:e})})),f.forEach((function(e){Object(o.A)(i,(function(t){var n=t.type,r=t.pos;return\"bounds\"===n&&r===e}))>=0||i.push({type:\"bounds\",pos:e})}))}var Un={name:\"snappable\",props:{snappable:[Boolean,Array],snapContainer:Object,snapCenter:Boolean,snapHorizontal:Boolean,snapVertical:Boolean,snapElement:Boolean,snapGap:Boolean,snapGridWidth:Number,snapGridHeight:Number,isDisplaySnapDigit:Boolean,isDisplayInnerSnapDigit:Boolean,snapDigit:Number,snapThreshold:Number,horizontalGuidelines:Array,verticalGuidelines:Array,elementGuidelines:Array,bounds:Object,innerBounds:Object,snapDistFormat:Function},events:{onSnap:\"snap\"},css:[\":host {\\n    --bounds-color: #d66;\\n}\\n.guideline {\\n    pointer-events: none;\\n    z-index: 2;\\n}\\n.guideline.bounds {\\n    background: #d66;\\n    background: var(--bounds-color);\\n}\\n.guideline-group {\\n    position: absolute;\\n    top: 0;\\n    left: 0;\\n}\\n.guideline-group .size-value {\\n    position: absolute;\\n    color: #f55;\\n    font-size: 12px;\\n    font-weight: bold;\\n}\\n.guideline-group.horizontal .size-value {\\n    transform-origin: 50% 100%;\\n    transform: translateX(-50%);\\n    left: 50%;\\n    bottom: 5px;\\n}\\n.guideline-group.vertical .size-value {\\n    transform-origin: 0% 50%;\\n    top: 50%;\\n    transform: translateY(-50%);\\n    left: 5px;\\n}\\n.guideline.gap {\\n    background: #f55;\\n}\\n.size-value.gap {\\n    color: #f55;\\n}\\n\"],render:function(e,t){var n=e.state,r=n.top,i=n.left,o=n.pos1,a=n.pos2,A=n.pos3,s=n.pos4,l=n.snapRenderInfo,u=n.targetClientRect,c=n.containerClientRect,f=n.is3d,d=n.rootMatrix;if(!l||!cn(e,\"\"))return[];n.staticGuidelines=Ht(e,!1,n.staticGuidelines),n.guidelines=Tt(e);var p=f?4:3,h=Math.min(o[0],a[0],A[0],s[0]),g=Math.min(o[1],a[1],A[1],s[1]),v=Ft(d,c,p),B=ze(d,[u.left-v[0],u.top-v[1]],p),m=B[0],b=B[1],w=e.props,E=w.snapThreshold,y=void 0===E?5:E,C=w.snapDigit,Q=void 0===C?0:C,x=w.snapDistFormat,F=void 0===x?function(e){return e}:x,U=l.externalPoses||[],S=Oe(e.state),O=[],H=[],T=[],N=[],_=[],M=ve(S),R=M.width,D=M.height,P=M.top,k=M.left,I=M.bottom,L=M.right,z=U.length>0,j=z?ve(U):{};if(!l.request){if(l.direction&&_.push(function(e,t,n){var r=[];if(n[0]&&n[1])r=[n,[-n[0],n[1]],[n[0],-n[1]]].map((function(e){return ht(t,e)}));else if(n[0]||n[1])e.props.keepRatio?r=[[-1,-1],[-1,1],[1,-1],[1,1],n].map((function(e){return ht(t,e)})):(r=pt(t,n)).length>1&&r.push([(r[0][0]+r[1][0])/2,(r[0][1]+r[1][1])/2]);else for(var i=[t[0],t[1],t[3],t[2],t[0]],o=0;o<4;++o)r.push(i[o]),r.push([(i[o][0]+i[o+1][0])/2,(i[o][1]+i[o+1][1])/2]);return Nt(e,r.map((function(e){return e[0]})),r.map((function(e){return e[1]})),!0,1)}(e,S,l.direction)),l.snap){var X=ve(S);l.center&&(X.middle=(X.top+X.bottom)/2,X.center=(X.left+X.right)/2),_.push(Mt(e,X,!0,1))}z&&(l.center&&(j.middle=(j.top+j.bottom)/2,j.center=(j.left+j.right)/2),_.push(Mt(e,j,!0,1))),_.forEach((function(e){var t=e.vertical.posInfos,n=e.horizontal.posInfos;O.push.apply(O,t.filter((function(e){return e.guidelineInfos.some((function(e){return!e.guideline.hide}))})).map((function(e){return{type:\"snap\",pos:e.pos}}))),H.push.apply(H,n.filter((function(e){return e.guidelineInfos.some((function(e){return!e.guideline.hide}))})).map((function(e){return{type:\"snap\",pos:e.pos}}))),T.push.apply(T,Qn(t)),N.push.apply(N,Qn(n))}))}Fn(e,[k,L],[P,I],O,H),z&&Fn(e,[j.left,j.right],[j.top,j.bottom],O,H,l.externalBounds);var G=xn(T,\"vertical\",[i,r],[R,D]),V=xn(N,\"horizontal\",[i,r],[R,D]),Y=K(T,N);Re(e,\"onSnap\",{guidelines:Y.filter((function(e){return!e.element})),elements:Ie(Y.filter((function(e){return e.element})),(function(e){return e.element})),gaps:K(V,G)},!0);var W=An(e,N,0,[i,r],[m,b],[R,D]),J=W.guidelines,q=W.groups,Z=W.gapGuidelines,$=An(e,T,1,[i,r],[m,b],[R,D]),ee=$.guidelines,te=$.groups;return K(ln(e,\"vertical\",K(V,$.gapGuidelines),F,t),ln(e,\"horizontal\",K(G,Z),F,t),on(e,\"horizontal\",q,h,m,R,r,y,Q,0,F,t),on(e,\"vertical\",te,g,b,D,i,y,Q,1,F,t),sn(e,\"horizontal\",J,[i,r],t),sn(e,\"vertical\",ee,[i,r],t),an(e,\"horizontal\",H,h,r,R,0,t),an(e,\"vertical\",O,g,i,D,1,t))},dragStart:function(e,t){e.state.snapRenderInfo={request:t.isRequest,snap:!0,center:!0},un(e)},drag:function(e){var t=e.state;t.staticGuidelines=Ht(e,!1,t.staticGuidelines),t.guidelines=Tt(e)},pinchStart:function(e){this.unset(e)},dragEnd:function(e){this.unset(e)},dragControlCondition:function(e,t){return!(!Ye(0,t)&&!Pn(e,t))||(!t.isRequest&&t.inputEvent?Object(o.G)(t.inputEvent.target,te(\"snap-control\")):void 0)},dragControlStart:function(e){e.state.snapRenderInfo=null,un(e)},dragControl:function(e){this.drag(e)},dragControlEnd:function(e){this.unset(e)},dragGroupStart:function(e,t){this.dragStart(e,t)},dragGroup:function(e){this.drag(e)},dragGroupEnd:function(e){this.unset(e)},dragGroupControlStart:function(e){e.state.snapRenderInfo=null,un(e)},dragGroupControl:function(e){this.drag(e)},dragGroupControlEnd:function(e){this.unset(e)},unset:function(e){var t=e.state;t.enableSnap=!1,t.staticGuidelines=[],t.guidelines=[],t.snapRenderInfo=null}},Sn={name:\"draggable\",props:{draggable:Boolean,throttleDrag:Number,throttleDragRotate:Number,startDragRotate:Number,edgeDraggable:Boolean},events:{onDragStart:\"dragStart\",onDrag:\"drag\",onDragEnd:\"dragEnd\",onDragGroupStart:\"dragGroupStart\",onDragGroup:\"dragGroup\",onDragGroupEnd:\"dragGroupEnd\"},render:function(e,t){var n=e.props,r=n.throttleDragRotate,i=n.zoom,a=e.state,A=a.dragInfo,s=a.beforeOrigin;if(!r||!A)return[];var l=A.dist;if(!l[0]&&!l[1])return[];var u=be(l),c=Object(o.E)(l,[0,0]);return[t.createElement(\"div\",{className:te(\"line\",\"horizontal\",\"dragline\",\"dashed\"),key:\"dragRotateGuideline\",style:{width:u+\"px\",transform:\"translate(\"+s[0]+\"px, \"+s[1]+\"px) rotate(\"+c+\"rad) scaleY(\"+i+\")\"}})]},dragStart:function(e,t){var n=t.datas,r=t.parentEvent,i=t.parentGesto,o=e.state,a=o.target;if(o.gesto)return!1;o.gesto=i||e.targetGesto;var A=window.getComputedStyle(a);n.datas={},n.left=parseFloat(A.left||\"\")||0,n.top=parseFloat(A.top||\"\")||0,n.bottom=parseFloat(A.bottom||\"\")||0,n.right=parseFloat(A.right||\"\")||0,n.startValue=[0,0],at(e,t),Bt(t,\"translate\"),function(e,t){t.absolutePoses=Oe(e.state)}(e,n),n.prevDist=[0,0],n.prevBeforeDist=[0,0],n.isDrag=!1;var s=_e(e,t,I({set:function(e){n.startValue=e}},vt(t)));return!1!==(r||Re(e,\"onDragStart\",s))?(n.isDrag=!0,e.state.dragInfo={startRect:e.getRect(),dist:[0,0]}):(o.gesto=null,n.isPinch=!1),!!n.isDrag&&s},drag:function(e,t){At(t,\"translate\");var n=t.datas,r=t.parentEvent,i=t.parentFlag,a=t.isPinch,A=t.isRequest,s=t.distX,l=t.distY,u=n.isDrag,c=n.prevDist,f=n.prevBeforeDist,d=n.startValue;if(u){var p=e.props,v=p.parentMoveable,B=r?0:p.throttleDrag||0,m=r?0:p.throttleDragRotate||0,b=!1,w=0;if(!r&&m>0&&(s||l)){var E=p.startDragRotate||0,y=He(E+180*Object(o.E)([0,0],[s,l])/Math.PI,m)-E,C=l*Math.abs(Math.cos((y-90)/180*Math.PI)),Q=be([s*Math.abs(Math.cos(y/180*Math.PI)),C]);w=y*Math.PI/180,s=Q*Math.cos(w),l=Q*Math.sin(w)}if(!a&&!r&&!i&&(!m||s||l)){var x=Cn(e,s,l,m,A,n),F=x[0],U=x[1],S=F.isSnap,O=F.isBound,H=F.offset,T=U.isSnap,N=U.isBound;b=S||T||O||N,s+=H,l+=U.offset}n.passDeltaX=s-(n.passDistX||0),n.passDeltaY=l-(n.passDistY||0),n.passDistX=s,n.passDistY=l;var _=h(ct({datas:n,distX:s,distY:l}),d),M=h(lt({datas:n,distX:s,distY:l}),d);m||b||(Te(M,B),Te(_,B));var R=g(_,d),D=g(M,d),P=g(D,c),k=g(R,f);n.prevDist=D,n.prevBeforeDist=R;var I=n.left+R[0],K=n.top+R[1],L=n.right-R[0],z=n.bottom-R[1],j=st(n,\"translate(\"+M[0]+\"px, \"+M[1]+\"px)\",\"translate(\"+D[0]+\"px, \"+D[1]+\"px)\");if(e.state.dragInfo.dist=r?[0,0]:D,r||v||!P.every((function(e){return!e}))||!k.some((function(e){return!e}))){var X=e.state,G=_e(e,t,{transform:j,dist:D,delta:P,translate:M,beforeDist:R,beforeDelta:k,beforeTranslate:_,left:I,top:K,right:L,bottom:z,width:X.width,height:X.height,isPinch:a});return!r&&Re(e,\"onDrag\",G),G}}},dragEnd:function(e,t){var n=t.parentEvent,r=t.datas,i=t.isDrag;if(e.state.gesto=null,e.state.dragInfo=null,r.isDrag)return r.isDrag=!1,!n&&Re(e,\"onDragEnd\",Me(e,t,{})),i},dragGroupStart:function(e,t){var n=t.datas,r=t.clientX,i=t.clientY,o=this.dragStart(e,t);if(!o)return!1;var a=rt(e,this,\"dragStart\",[r||0,i||0],t,!1),A=Re(e,\"onDragGroupStart\",I(I({},o),{targets:e.props.targets,events:a}));return n.isDrag=!1!==A,!!n.isDrag&&o},dragGroup:function(e,t){if(t.datas.isDrag){var n=this.drag(e,t),r=t.datas,i=rt(e,this,\"drag\",[r.passDeltaX,r.passDeltaY],t,!1);if(n){var o=I({targets:e.props.targets,events:i},n);return Re(e,\"onDragGroup\",o),o}}},dragGroupEnd:function(e,t){var n=t.isDrag;if(t.datas.isDrag)return this.dragEnd(e,t),rt(e,this,\"dragEnd\",[0,0],t,!1),Re(e,\"onDragGroupEnd\",Me(e,t,{targets:e.props.targets})),n},request:function(e){var t={},n=e.getRect(),r=0,i=0;return{isControl:!1,requestStart:function(){return{datas:t}},request:function(e){return\"x\"in e?r=e.x-n.left:\"deltaX\"in e&&(r+=e.deltaX),\"y\"in e?i=e.y-n.top:\"deltaY\"in e&&(i+=e.deltaY),{datas:t,distX:r,distY:i}},requestEnd:function(){return{datas:t,isDrag:!0}}}},unset:function(e){e.state.dragInfo=null}};function On(e,t,n,r){void 0===r&&(r=\"\");var i=e.state,o=i.renderPoses,a=i.rotation,A=i.direction,s=e.props,l=s.renderDirections,u=void 0===l?t:l,c=s.zoom,f={};if(!u)return[];var d=A>0?1:-1,p=!0===u?q:u,h=a/Math.PI*180;return p.forEach((function(e){f[e]=!0})),p.map((function(e){var t=Z[e];if(!t||!f[e])return null;var i=(He(h,15)+d*$[e]+720)%180;return n.createElement(\"div\",{className:te(\"control\",\"direction\",e,r),\"data-rotation\":i,\"data-direction\":e,key:\"direction-\"+e,style:ye.apply(void 0,K([a,c],t.map((function(e){return o[e]}))))})}))}function Hn(e,t,n,r,i,a){for(var A=[],s=6;s<arguments.length;s++)A[s-6]=arguments[s];var l=Object(o.E)(n,r),u=t?He(l/Math.PI*180,15)%180:-1;return e.createElement(\"div\",{key:\"line\"+a,className:te.apply(void 0,K([\"line\",\"direction\",t],A)),\"data-rotation\":u,\"data-line-index\":a,\"data-direction\":t,style:Ee(n,r,i,l)})}function Tn(e,t){return On(e,q,t)}function Nn(e,t){return On(e,[\"nw\",\"ne\",\"sw\",\"se\"],t)}function _n(e,t,n,r,i,a){var A=e.state.is3d?4:3,s=he(e.state.rootMatrix,i,A),l=h([a.left,a.top],s);t.startAbsoluteOrigin=l,t.prevDeg=Object(o.E)(l,[n,r])/Math.PI*180,t.prevSnapDeg=t.prevDeg,t.startDeg=t.prevDeg,t.loop=0}function Mn(e,t,n,r,i,o){var a=n.prevDeg,A=En(e,t,n.origin,r);return n.prevDeg=A,[A-a,A,o+A]}function Rn(e,t,n,r,i,o,a,A){var s=n.prevDeg,l=n.prevSnapDeg,u=n.startDeg,c=n.loop;s>r&&s>270&&r<90?++n.loop:s<r&&s<90&&r>270&&--n.loop;var f=n.loop,d=360*c+l-u+o,p=360*f+r-u+o;n.prevDeg=p-360*f+u-o;var h=i*((p=He(p,a))-o);return A&&(p=(h=En(e,t,n.origin,h))/i+o),n.prevSnapDeg=p-360*f+u-o,[i*(p-d),h,o+h]}function Dn(e,t,n,r,i,a,A,s){return Rn(e,t,n,Object(o.E)(n.startAbsoluteOrigin,[i,a])/Math.PI*180,r,A,s,!0)}function Pn(e,t){if(t.isRequest)return\"rotatable\"===t.requestAble;var n=t.inputEvent.target;if(Object(o.G)(n,te(\"rotation-control\")))return!0;var r=e.props.rotationTarget;return!!r&&qe(r,!0).some((function(e){return!!e&&(n===e||n.contains(e))}))}var kn={name:\"rotatable\",canPinch:!0,props:{rotatable:Boolean,rotationPosition:String,throttleRotate:Number,renderDirections:Object,rotationTarget:Object},events:{onRotateStart:\"rotateStart\",onRotate:\"rotate\",onRotateEnd:\"rotateEnd\",onRotateGroupStart:\"rotateGroupStart\",onRotateGroup:\"rotateGroup\",onRotateGroupEnd:\"rotateGroupEnd\"},css:[\".rotation {\\n            position: absolute;\\n            height: 40px;\\n            width: 1px;\\n            transform-origin: 50% 100%;\\n            height: calc(40px * var(--zoom));\\n            top: auto;\\n            left: 0;\\n            bottom: 100%;\\n            will-change: transform;\\n        }\\n        .rotation .rotation-line {\\n            display: block;\\n            width: 100%;\\n            height: 100%;\\n            transform-origin: 50% 50%;\\n        }\\n        .rotation .rotation-control {\\n            border-color: #4af;\\n            border-color: var(--moveable-color);\\n            background:#fff;\\n            cursor: alias;\\n        }\"],render:function(e,t){var n=e.props,r=n.rotatable,i=n.rotationPosition,o=n.zoom,a=n.renderDirections,A=e.state,s=A.renderPoses,l=A.direction;if(!r)return null;var u=function(e,t,n){var r=t[0],i=t[1],o=t[2],a=t[3];if(\"none\"!==e){var A=(e||\"top\").split(\"-\"),s=A[0],l=A[1],u=[r,i];\"left\"===s?u=[o,r]:\"right\"===s?u=[i,a]:\"bottom\"===s&&(u=[a,o]);var c=[(u[0][0]+u[1][0])/2,(u[0][1]+u[1][1])/2],f=Qe(u,n);if(l){var d=\"top\"===l||\"left\"===l,p=\"bottom\"===s||\"left\"===s;c=u[d&&!p||!d&&p?0:1]}return[c,f]}}(i,s,l),c=[];if(u){var f=u[0],d=u[1];c.push(t.createElement(\"div\",{key:\"rotation\",className:te(\"rotation\"),style:{transform:\"translate(-50%) translate(\"+f[0]+\"px, \"+f[1]+\"px) rotate(\"+d+\"rad)\"}},t.createElement(\"div\",{className:te(\"line rotation-line\"),style:{transform:\"scaleX(\"+o+\")\"}}),t.createElement(\"div\",{className:te(\"control rotation-control\"),style:{transform:\"translate(0.5px) scale(\"+o+\")\"}})))}return a&&c.push.apply(c,On(e,[],t)),c},dragControlCondition:Pn,dragControlStart:function(e,t){var n=t.datas,r=t.clientX,i=t.clientY,o=t.parentRotate,a=t.parentFlag,A=t.isPinch,s=t.isRequest,l=e.state,u=l.target,c=l.left,f=l.top,d=l.origin,p=l.beforeOrigin,h=l.direction,g=l.beforeDirection,v=l.targetTransform,B=l.moveableClientRect;if(!s&&!u)return!1;var m=e.getRect();if(n.rect=m,n.transform=v,n.left=c,n.top=f,n.fixedPosition=Ct(e,yt(e)),n.absoluteInfo={origin:m.origin,startValue:m.rotation},_n(e,n.absoluteInfo,r,i,d,B),s||A||a){var b=o||0;n.beforeInfo={origin:m.beforeOrigin,prevDeg:b,startDeg:b,prevSnapDeg:b,loop:0},n.afterInfo={origin:m.origin,prevDeg:b,startDeg:b,prevSnapDeg:b,loop:0}}else n.beforeInfo={origin:m.beforeOrigin},n.afterInfo={origin:m.origin},_n(e,n.beforeInfo,r,i,p,B),_n(e,n.afterInfo,r,i,d,B);n.direction=h,n.beforeDirection=g,n.startValue=0,n.datas={},Bt(t,\"rotate\");var w=_e(e,t,I(I({set:function(e){n.startValue=e*Math.PI/180}},vt(t)),{dragStart:Sn.dragStart(e,(new tt).dragStart([0,0],t))})),E=Re(e,\"onRotateStart\",w);return n.isRotate=!1!==E,e.state.snapRenderInfo={request:t.isRequest},!!n.isRotate&&w},dragControl:function(e,t){var n,r,i,o,a,A,s,l,u,c=t.datas,f=t.clientX,d=t.clientY,p=t.parentRotate,v=t.parentFlag,B=t.isPinch,m=t.groupDelta,b=c.beforeDirection,w=c.beforeInfo,E=c.afterInfo,y=c.absoluteInfo,C=c.isRotate,Q=c.startValue,x=c.rect;if(C){At(t,\"rotate\");var F,U,S,O,H,T,N,_,M,R=b*function(e){return me(e.datas.beforeTransform,[50,50],100,100).direction}(t),D=e.props,P=D.throttleRotate,k=void 0===P?0:P,K=D.parentMoveable,L=180/Math.PI*Q,z=y.startValue;if(!v&&\"parentDist\"in t){var j=t.parentDist;F=(n=Mn(e,x,E,j,0,L))[0],U=n[1],S=n[2],O=(r=Mn(e,x,w,j,0,L))[0],H=r[1],T=r[2],N=(i=Mn(e,x,y,j,0,z))[0],_=i[1],M=i[2]}else B||v?(F=(o=Rn(e,x,E,p,R,L,k))[0],U=o[1],S=o[2],O=(a=Rn(e,x,w,p,b,L,k))[0],H=a[1],T=a[2],N=(A=Rn(e,x,y,p,R,z,k))[0],_=A[1],M=A[2]):(F=(s=Dn(e,x,E,R,f,d,L,k))[0],U=s[1],S=s[2],O=(l=Dn(e,x,w,b,f,d,L,k))[0],H=l[1],T=l[2],N=(u=Dn(e,x,y,R,f,d,z,k))[0],_=u[1],M=u[2]);if(N||F||O||K){var X=st(c,\"rotate(\"+S+\"deg)\",\"rotate(\"+U+\"deg)\"),G=function(e,t,n,r){return Et(e,\"rotate(\"+t+\"deg)\",yt(e),n,r)}(e,U,c.fixedPosition,c),V=g(h(m||[0,0],G),c.prevInverseDist||[0,0]);c.prevInverseDist=G;var Y=_e(e,t,I({delta:F,dist:U,rotate:S,beforeDist:H,beforeDelta:O,beforeRotate:T,absoluteDist:_,absoluteDelta:N,absoluteRotate:M,isPinch:!!B},wt(e,X,V,B,t)));return Re(e,\"onRotate\",Y),Y}}},dragControlEnd:function(e,t){var n=t.datas,r=t.isDrag;return!!n.isRotate&&(n.isRotate=!1,Re(e,\"onRotateEnd\",Me(e,t,{})),r)},dragGroupControlCondition:Pn,dragGroupControlStart:function(e,t){var n=t.datas,r=e.state,i=r.left,o=r.top,a=r.beforeOrigin,A=this.dragControlStart(e,t);if(!A)return!1;A.set(n.beforeDirection*e.rotation);var s=it(e,this,\"dragControlStart\",t,(function(e,t){var n=e.state,r=n.left,A=n.top,s=n.beforeOrigin,l=h(g([r,A],[i,o]),g(s,a));return t.datas.groupClient=l,I(I({},t),{parentRotate:0})})),l=Re(e,\"onRotateGroupStart\",I(I({},A),{targets:e.props.targets,events:s}));return n.isRotate=!1!==l,!!n.isRotate&&A},dragGroupControl:function(e,t){var n=t.datas;if(n.isRotate){var r=this.dragControl(e,t);if(r){var i=n.beforeDirection,o=r.beforeDist,a=r.beforeDelta/180*Math.PI,A=it(e,this,\"dragControl\",t,(function(e,t){var n=t.datas.groupClient,r=n[0],A=n[1],s=m([r,A],a*i),l=s[0],u=s[1],c=[l-r,u-A];return t.datas.groupClient=[l,u],I(I({},t),{parentRotate:o,groupDelta:c})}));e.rotation=i*r.beforeRotate;var s=I({targets:e.props.targets,events:A,set:function(t){e.rotation=t}},r);return Re(e,\"onRotateGroup\",s),s}}},dragGroupControlEnd:function(e,t){var n=t.isDrag;if(t.datas.isRotate)return this.dragControlEnd(e,t),it(e,this,\"dragControlEnd\",t),Re(e,\"onRotateGroupEnd\",Me(e,t,{targets:e.props.targets})),n},request:function(e){var t={},n=0,r=e.getRotation();return{isControl:!0,requestStart:function(){return{datas:t}},request:function(e){return\"deltaRotate\"in e?n+=e.deltaRotate:\"rotate\"in e&&(n=e.rotate-r),{datas:t,parentDist:n}},requestEnd:function(){return{datas:t,isDrag:!0}}}}},In={name:\"resizable\",ableGroup:\"size\",canPinch:!0,props:{resizable:Boolean,throttleResize:Number,renderDirections:Array,keepRatio:Boolean},events:{onResizeStart:\"resizeStart\",onResize:\"resize\",onResizeEnd:\"resizeEnd\",onResizeGroupStart:\"resizeGroupStart\",onResizeGroup:\"resizeGroup\",onResizeGroupEnd:\"resizeGroupEnd\"},render:function(e,t){var n=e.props,r=n.resizable,i=n.edge;if(r)return i?Nn(e,t):Tn(e,t)},dragControlCondition:Ye,dragControlStart:function(e,t){var n,r=t.inputEvent,i=t.isPinch,a=t.parentDirection,A=t.datas,s=t.parentFlag,l=a||(i?[0,0]:Ue(r.target)),u=e.state,c=u.target,f=u.width,d=u.height;if(!l||!c)return!1;!i&&at(e,t),A.datas={},A.direction=l,A.startOffsetWidth=f,A.startOffsetHeight=d,A.prevWidth=0,A.prevHeight=0,n=function(e){var t=window.getComputedStyle(e);return[parseFloat(t.width),parseFloat(t.height)]}(c),A.startWidth=n[0],A.startHeight=n[1];var p=[Math.max(0,f-A.startWidth),Math.max(0,d-A.startHeight)];if(A.minSize=p,A.maxSize=[1/0,1/0],!s){var g=window.getComputedStyle(c),v=g.position,B=g.minWidth,m=g.minHeight,b=g.maxWidth,w=g.maxHeight,E=\"static\"===v||\"relative\"===v,y=E?c.parentElement:c.offsetParent,C=f,Q=d;if(y&&(C=y.clientWidth,Q=y.clientHeight,E)){var x=window.getComputedStyle(y);C-=parseFloat(x.paddingLeft)||0,Q-=parseFloat(x.paddingTop)||0}A.minSize=h([Object(o.w)(B,C)||0,Object(o.w)(m,Q)||0],p),A.maxSize=h([Object(o.w)(b,C)||1/0,Object(o.w)(w,Q)||1/0],p)}var F=e.props.transformOrigin||\"% %\";function U(e){A.ratio=e&&isFinite(e)?e:0}function S(t){A.fixedDirection=t,A.fixedPosition=xt(e,t)}A.transformOrigin=F&&Object(o.L)(F)?F.split(\" \"):F,A.isWidth=!l[0]&&!l[1]||l[0]||!l[1],U(f/d),S([-l[0],-l[1]]);var O=_e(e,t,{direction:l,set:function(e){var t=e[0],n=e[1];A.startWidth=t,A.startHeight=n},setMin:function(e){A.minSize=e},setMax:function(e){A.maxSize=[e[0]||1/0,e[1]||1/0]},setRatio:U,setFixedDirection:S,setOrigin:function(e){A.transformOrigin=e},dragStart:Sn.dragStart(e,(new tt).dragStart([0,0],t))});return!1!==Re(e,\"onResizeStart\",O)&&(A.isResize=!0,e.state.snapRenderInfo={request:t.isRequest,direction:l}),!!A.isResize&&O},dragControl:function(e,t){var n,r=t.datas,i=t.distX,a=t.distY,A=t.parentFlag,s=t.isPinch,l=t.parentDistance,u=t.parentScale,c=t.parentKeepRatio,f=t.dragClient,d=t.parentDist,p=t.isRequest,h=r.isResize,g=r.transformOrigin,v=r.fixedDirection,B=r.startWidth,m=r.startHeight,b=r.prevWidth,w=r.prevHeight,E=r.minSize,y=r.maxSize,C=r.ratio,Q=r.isWidth,x=r.startOffsetWidth,F=r.startOffsetHeight;if(h){var U=e.props,S=U.throttleResize,O=void 0===S?0:S,H=U.parentMoveable,T=U.snapThreshold,N=void 0===T?5:T,_=r.direction,M=_,R=0,D=0;_[0]||_[1]||(M=[1,1]);var P=C&&(e.props.keepRatio||c),k=f;if(f||(k=!A&&s?xt(e,[0,0]):r.fixedPosition),d)R=d[0],D=d[1],P&&(R?D||(D=R/C):R=D*C);else if(u)R=(u[0]-1)*x,D=(u[1]-1)*F;else if(s)l&&(R=l,D=l*F/x);else{var I=ft({datas:r,distX:i,distY:a});if(R=M[0]*I[0],D=M[1]*I[1],P&&x&&F){var L=Object(o.E)([0,0],I),z=Object(o.E)([0,0],M),j=be([R,D]),X=Math.cos(L-z)*j;if(M[0])if(M[1]){var G=2*M[0]*x,V=2*M[1]*F,Y=be([G+I[0],V+I[1]])-be([G,V]),W=Object(o.E)([0,0],[C,1]);R=Math.cos(W)*Y,D=Math.sin(W)*Y}else D=(R=X)*C;else R=(D=X)/C}else if(!P){var J=K(_);x||(I[0]<0?J[0]=-1:I[0]>0&&(J[0]=1)),F||(I[1]<0?J[1]=-1:I[1]>0&&(J[1]=1)),_=J,R=(M=J)[0]*I[0],D=M[1]*I[1]}}var q=M[0]||P?Math.max(x+R,1e-7):x,Z=M[1]||P?Math.max(F+D,1e-7):F;P&&x&&F&&(Q?Z=q/C:q=Z*C);var $=[0,0];if(s||($=function(e,t,n,r,i,o,a){if(!cn(e,\"resizable\"))return[0,0];var A=e.state,s=A.allMatrix,l=A.is3d;return wn(e,(function(e,o){return dn(s,t+e,n+o,i,r,l)}),t,n,r,i,o,a)}(e,q,Z,_,k,p,r)),d&&(!d[0]&&($[0]=0),!d[1]&&($[1]=0)),P){M[0]&&M[1]&&$[0]&&$[1]&&(Math.abs($[0])>Math.abs($[1])?$[1]=0:$[0]=0);var ee=!$[0]&&!$[1];ee&&(Q?q=He(q,O):Z=He(Z,O)),M[0]&&!M[1]||$[0]&&!$[1]||ee&&Q?Z=(q+=$[0])/C:(!M[0]&&M[1]||!$[0]&&$[1]||ee&&!Q)&&(q=(Z+=$[1])*C)}else x+R<-N&&($[0]=0),x+D<-N&&($[1]=0),q+=$[0],Z+=$[1],$[0]||(q=He(q,O)),$[1]||(Z=He(Z,O));q=(n=Object(o.t)([q,Z],E,y,P))[0],Z=n[1];var te=[(R=(q=Math.round(q))-x)-b,(D=(Z=Math.round(Z))-F)-w];r.prevWidth=R,r.prevHeight=D;var ne=Qt(e,q,Z,v,k,g);if(H||!te.every((function(e){return!e}))||!ne.every((function(e){return!e}))){var re=_e(e,t,{width:B+R,height:m+D,offsetWidth:q,offsetHeight:Z,direction:_,dist:[R,D],delta:te,isPinch:!!s,drag:Sn.drag(e,et(t,e.state,ne,!!s,!1))});return Re(e,\"onResize\",re),re}}},dragControlAfter:function(e,t){var n=t.datas,r=n.isResize,i=n.startOffsetWidth,o=n.startOffsetHeight,a=n.prevWidth,A=n.prevHeight;if(r){var s=e.state,l=s.width-(i+a),u=s.height-(o+A),c=Math.abs(l)>3,f=Math.abs(u)>3;return c&&(n.startWidth+=l,n.startOffsetWidth+=l,n.prevWidth+=l),f&&(n.startHeight+=u,n.startOffsetHeight+=u,n.prevHeight+=u),c||f?(this.dragControl(e,t),!0):void 0}},dragControlEnd:function(e,t){var n=t.datas,r=t.isDrag;return!!n.isResize&&(n.isResize=!1,Re(e,\"onResizeEnd\",Me(e,t,{})),r)},dragGroupControlCondition:Ye,dragGroupControlStart:function(e,t){var n=t.datas,r=this.dragControlStart(e,t);if(!r)return!1;var i=nt(e,\"resizable\",t);function o(t,r){var i=n.fixedDirection,o=n.fixedPosition,a=xt(t,i),A=B(b(-e.rotation/180*Math.PI,3),[a[0]-o[0],a[1]-o[1],1],3),s=A[0],l=A[1];return r.datas.originalX=s,r.datas.originalY=l,r}var a=it(e,this,\"dragControlStart\",t,(function(e,t){return o(e,t)})),A=I(I({},r),{targets:e.props.targets,events:a,setFixedDirection:function(t){r.setFixedDirection(t),a.forEach((function(n,r){n.setFixedDirection(t),o(e.moveables[r],i[r])}))}}),s=Re(e,\"onResizeGroupStart\",A);return n.isResize=!1!==s,!!n.isResize&&r},dragGroupControl:function(e,t){var n=t.datas;if(n.isResize){var r=this.dragControl(e,t);if(r){var i=r.offsetWidth,o=r.offsetHeight,a=r.dist,A=e.props.keepRatio,s=[i/(i-a[0]),o/(o-a[1])],l=n.fixedPosition,u=it(e,this,\"dragControl\",t,(function(t,n){var r=B(b(e.rotation/180*Math.PI,3),[n.datas.originalX*s[0],n.datas.originalY*s[1],1],3),i=r[0],o=r[1];return I(I({},n),{parentDist:null,parentScale:s,dragClient:h(l,[i,o]),parentKeepRatio:A})})),c=I({targets:e.props.targets,events:u},r);return Re(e,\"onResizeGroup\",c),c}}},dragGroupControlEnd:function(e,t){var n=t.isDrag;if(t.datas.isResize)return this.dragControlEnd(e,t),it(e,this,\"dragControlEnd\",t),Re(e,\"onResizeGroupEnd\",Me(e,t,{targets:e.props.targets})),n},request:function(e){var t={},n=0,r=0,i=e.getRect();return{isControl:!0,requestStart:function(e){return{datas:t,parentDirection:e.direction||[1,1]}},request:function(e){return\"offsetWidth\"in e?n=e.offsetWidth-i.offsetWidth:\"deltaWidth\"in e&&(n+=e.deltaWidth),\"offsetHeight\"in e?r=e.offsetHeight-i.offsetHeight:\"deltaHeight\"in e&&(r+=e.deltaHeight),{datas:t,parentDist:[n,r]}},requestEnd:function(){return{datas:t,isDrag:!0}}}}},Kn={name:\"scalable\",ableGroup:\"size\",canPinch:!0,props:{scalable:Boolean,throttleScale:Number,renderDirections:String,keepRatio:Boolean},events:{onScaleStart:\"scaleStart\",onScale:\"scale\",onScaleEnd:\"scaleEnd\",onScaleGroupStart:\"scaleGroupStart\",onScaleGroup:\"scaleGroup\",onScaleGroupEnd:\"scaleGroupEnd\"},render:function(e,t){var n=e.props,r=n.resizable,i=n.scalable,o=n.edge;if(!r&&i)return o?Nn(e,t):Tn(e,t)},dragControlCondition:Ye,dragControlStart:function(e,t){var n=t.datas,r=t.isPinch,i=t.inputEvent,a=t.parentDirection||(r?[0,0]:Ue(i.target)),A=e.state,s=A.width,l=A.height,u=A.targetTransform,c=A.target,f=A.pos1,d=A.pos2,p=A.pos4;if(!a||!c)return!1;r||at(e,t),n.datas={},n.transform=u,n.prevDist=[1,1],n.direction=a,n.width=s,n.height=l,n.startValue=[1,1];var h=Object(o.C)(f,d),g=Object(o.C)(d,p),v=!a[0]&&!a[1]||a[0]||!a[1];function B(e){n.ratio=e&&isFinite(e)?e:0}function m(t){n.fixedDirection=t,n.fixedPosition=xt(e,t)}n.scaleWidth=h,n.scaleHeight=g,n.scaleXRatio=h/s,n.scaleYRatio=g/l,Bt(t,\"scale\"),n.isWidth=v,B(Object(o.C)(f,d)/Object(o.C)(d,p)),m([-a[0],-a[1]]);var b=_e(e,t,I(I({direction:a,set:function(e){n.startValue=e},setRatio:B,setFixedDirection:m},vt(t)),{dragStart:Sn.dragStart(e,(new tt).dragStart([0,0],t))}));return!1!==Re(e,\"onScaleStart\",b)&&(n.isScale=!0,e.state.snapRenderInfo={request:t.isRequest,direction:a}),!!n.isScale&&b},dragControl:function(e,t){At(t,\"scale\");var n=t.datas,r=t.distX,i=t.distY,a=t.parentScale,A=t.parentDistance,s=t.parentKeepRatio,l=t.parentFlag,u=t.isPinch,c=t.dragClient,f=t.parentDist,d=t.isRequest,p=n.prevDist,h=n.direction,v=n.width,B=n.height,m=n.isScale,b=n.startValue,w=n.isWidth,E=n.ratio,y=n.fixedDirection,C=n.scaleXRatio,Q=n.scaleYRatio;if(!m)return!1;var x=e.props,F=x.throttleScale,U=x.parentMoveable,S=h;h[0]||h[1]||(S=[1,1]);var O=E&&(e.props.keepRatio||s),H=e.state,T=1,N=1,_=c;if(c||(_=!l&&u?xt(e,[0,0]):n.fixedPosition),f)T=(v+f[0])/v,N=(B+f[1])/B;else if(a)T=a[0],N=a[1];else if(u)A&&(T=(v+A)/v,N=(B+A*B/v)/B);else{var M=ft({datas:n,distX:r,distY:i}),R=S[0]*M[0]*C,D=S[1]*M[1]*Q;if(O&&v&&B)if(S[0])if(S[1]){var P=be([R,D]),k=Object(o.E)([0,0],M),K=Object(o.E)([0,0],S),L=Math.cos(k-K)*P,z=Object(o.E)([0,0],[E,1]);R=Math.cos(z)*L,D=Math.sin(z)*L}else D=R/E;else R=D*E;T=(v+R/C)/v,N=(B+D/Q)/B}T=S[0]||O?T*b[0]:b[0],N=S[1]||O?N*b[1]:b[1],0===T&&(T=1e-9*(p[0]>0?1:-1)),0===N&&(N=1e-9*(p[1]>0?1:-1));var j=[T/b[0],N/b[1]],X=[T,N];if(!u&&e.props.groupable){var G=(H.snapRenderInfo||{}).direction;Object(o.H)(G)&&(G[0]||G[1])&&(H.snapRenderInfo={direction:h,request:t.isRequest})}var V=[0,0];if(u||(V=yn(e,j,h,d,n)),O){S[0]&&S[1]&&V[0]&&V[1]&&(Math.abs(V[0]*v)>Math.abs(V[1]*B)?V[1]=0:V[0]=0);var Y=!V[0]&&!V[1];if(Y&&(w?j[0]=He(j[0]*b[0],F)/b[0]:j[1]=He(j[1]*b[1],F)/b[1]),S[0]&&!S[1]||V[0]&&!V[1]||Y&&w){j[0]+=V[0];var W=v*j[0]*b[0]/E;j[1]=W/B/b[1]}else if(!S[0]&&S[1]||!V[0]&&V[1]||Y&&!w){j[1]+=V[1];var J=B*j[1]*b[1]*E;j[0]=J/v/b[0]}}else j[0]+=V[0],j[1]+=V[1],V[0]||(j[0]=He(j[0]*b[0],F)/b[0]),V[1]||(j[1]=He(j[1]*b[1],F)/b[1]);0===j[0]&&(j[0]=1e-9*(p[0]>0?1:-1)),0===j[1]&&(j[1]=1e-9*(p[1]>0?1:-1));var q,Z,$=[j[0]/p[0],j[1]/p[1]];Z=b,X=[(q=j)[0]*Z[0],q[1]*Z[1]];var ee=function(e,t,n,r,i){return Et(e,\"scale(\"+t.join(\", \")+\")\",n,r,i)}(e,j,y,_,n),te=g(ee,n.prevInverseDist||[0,0]);if(n.prevDist=j,n.prevInverseDist=ee,T===p[0]&&N===p[1]&&te.every((function(e){return!e}))&&!U)return!1;var ne=st(n,\"scale(\"+X.join(\", \")+\")\",\"scale(\"+j.join(\", \")+\")\"),re=_e(e,t,I({offsetWidth:v,offsetHeight:B,direction:h,scale:X,dist:j,delta:$,isPinch:!!u},wt(e,ne,te,u,t)));return Re(e,\"onScale\",re),re},dragControlEnd:function(e,t){var n=t.datas,r=t.isDrag;return!!n.isScale&&(n.isScale=!1,Re(e,\"onScaleEnd\",Me(e,t,{})),r)},dragGroupControlCondition:Ye,dragGroupControlStart:function(e,t){var n=t.datas,r=this.dragControlStart(e,t);if(!r)return!1;var i=nt(e,\"resizable\",t);function o(t,r){var i=n.fixedDirection,o=n.fixedPosition,a=xt(t,i),A=B(b(-e.rotation/180*Math.PI,3),[a[0]-o[0],a[1]-o[1],1],3),s=A[0],l=A[1];return r.datas.originalX=s,r.datas.originalY=l,r}n.moveableScale=e.scale;var a=it(e,this,\"dragControlStart\",t,(function(e,t){return o(e,t)})),A=I(I({},r),{targets:e.props.targets,events:a,setFixedDirection:function(t){r.setFixedDirection(t),a.forEach((function(n,r){n.setFixedDirection(t),o(e.moveables[r],i[r])}))}}),s=Re(e,\"onScaleGroupStart\",A);return n.isScale=!1!==s,!!n.isScale&&A},dragGroupControl:function(e,t){var n=t.datas;if(n.isScale){var r=this.dragControl(e,t);if(r){var i=n.moveableScale;e.scale=[r.scale[0]*i[0],r.scale[1]*i[1]];var o=e.props.keepRatio,a=r.dist,A=r.scale,s=n.fixedPosition,l=it(e,this,\"dragControl\",t,(function(t,n){var r=B(b(e.rotation/180*Math.PI,3),[n.datas.originalX*a[0],n.datas.originalY*a[1],1],3),i=r[0],l=r[1];return I(I({},n),{parentDist:null,parentScale:A,parentKeepRatio:o,dragClient:h(s,[i,l])})})),u=I({targets:e.props.targets,events:l},r);return Re(e,\"onScaleGroup\",u),u}}},dragGroupControlEnd:function(e,t){var n=t.isDrag;if(t.datas.isScale)return this.dragControlEnd(e,t),it(e,this,\"dragControlEnd\",t),Re(e,\"onScaleGroupEnd\",Me(e,t,{targets:e.props.targets})),n},request:function(){var e={},t=0,n=0;return{isControl:!0,requestStart:function(t){return{datas:e,parentDirection:t.direction||[1,1]}},request:function(r){return t+=r.deltaWidth,n+=r.deltaHeight,{datas:e,parentDist:[t,n]}},requestEnd:function(){return{datas:e,isDrag:!0}}}}};function Ln(e,t){return e.map((function(e,n){return Object(o.y)(e,t[n],1,2)}))}function zn(e,t,n){var r=Object(o.E)(e,t),i=Object(o.E)(e,n)-r;return i>=0?i:i+2*Math.PI}var jn={name:\"warpable\",ableGroup:\"size\",props:{warpable:Boolean,renderDirections:Array},events:{onWarpStart:\"warpStart\",onWarp:\"warp\",onWarpEnd:\"warpEnd\"},render:function(e,t){var n=e.props,r=n.resizable,i=n.scalable,o=n.warpable,a=n.zoom;if(r||i||!o)return[];var A=e.state,s=A.pos1,l=A.pos2,u=A.pos3,c=A.pos4,f=Ln(s,l),d=Ln(l,s),p=Ln(s,u),h=Ln(u,s),g=Ln(u,c),v=Ln(c,u),B=Ln(l,c),m=Ln(c,l);return K([t.createElement(\"div\",{className:te(\"line\"),key:\"middeLine1\",style:Ee(f,g,a)}),t.createElement(\"div\",{className:te(\"line\"),key:\"middeLine2\",style:Ee(d,v,a)}),t.createElement(\"div\",{className:te(\"line\"),key:\"middeLine3\",style:Ee(p,B,a)}),t.createElement(\"div\",{className:te(\"line\"),key:\"middeLine4\",style:Ee(h,m,a)})],Tn(e,t))},dragControlCondition:function(e,t){return!t.isRequest&&Object(o.G)(t.inputEvent.target,te(\"direction\"))},dragControlStart:function(e,t){var n=t.datas,r=t.inputEvent,i=e.props.target,o=Ue(r.target);if(!o||!i)return!1;var a=e.state,A=a.transformOrigin,s=a.is3d,c=a.targetTransform,d=a.targetMatrix,p=a.width,h=a.height,v=a.left,m=a.top;return n.datas={},n.targetTransform=c,n.warpTargetMatrix=s?d:f(d,3,4),n.targetInverseMatrix=l(u(n.warpTargetMatrix,4),3,4),n.direction=o,n.left=v,n.top=m,n.poses=[[0,0],[p,0],[0,h],[p,h]].map((function(e){return g(e,A)})),n.nextPoses=n.poses.map((function(e){var t=e[0],r=e[1];return B(n.warpTargetMatrix,[t,r,0,1],4)})),n.startValue=w(4),n.prevMatrix=w(4),n.absolutePoses=Oe(a),n.posIndexes=dt(o),at(e,t),Bt(t,\"matrix3d\"),a.snapRenderInfo={request:t.isRequest,direction:o},!1!==Re(e,\"onWarpStart\",_e(e,t,I({set:function(e){n.startValue=e}},vt(t))))&&(n.isWarp=!0),n.isWarp},dragControl:function(e,t){var n=t.datas,r=t.isRequest,i=t.distX,o=t.distY,a=n.targetInverseMatrix,A=n.prevMatrix,s=n.isWarp,l=n.startValue,c=n.poses,f=n.posIndexes,d=n.absolutePoses;if(!s)return!1;if(At(t,\"matrix3d\"),cn(e,\"warpable\")){var g=f.map((function(e){return d[e]}));g.length>1&&g.push([(g[0][0]+g[1][0])/2,(g[0][1]+g[1][1])/2]);var v=vn(e,r,g.map((function(e){return[e[0]+i,e[1]+o]}))),B=v.horizontal,m=v.vertical;o-=B.offset,i-=m.offset}var b=ft({datas:n,distX:i,distY:o},!0),w=n.nextPoses.slice();if(f.forEach((function(e){w[e]=h(w[e],b)})),!Y.every((function(e){return function(e,t){var n=zn(e[0],e[1],e[2]),r=zn(t[0],t[1],t[2]),i=Math.PI;return!(n>=i&&r<=i||n<=i&&r>=i)}(e.map((function(e){return c[e]})),e.map((function(e){return w[e]})))})))return!1;var E=C(c[0],c[2],c[1],c[3],w[0],w[2],w[1],w[3]);if(!E.length)return!1;var y=ut(n,p(a,E,4),!0),Q=p(u(A,4),y,4);n.prevMatrix=y;var x=p(l,y,4),F=st(n,\"matrix3d(\"+x.join(\", \")+\")\",\"matrix3d(\"+y.join(\", \")+\")\");return bt(t,F),Re(e,\"onWarp\",_e(e,t,{delta:Q,matrix:x,dist:y,multiply:p,transform:F})),!0},dragControlEnd:function(e,t){var n=t.datas,r=t.isDrag;return!!n.isWarp&&(n.isWarp=!1,Re(e,\"onWarpEnd\",Me(e,t,{})),r)}},Xn=te(\"area-pieces\"),Gn=te(\"area-piece\"),Vn=te(\"avoid\");function Yn(e){var t=e.areaElement,n=e.state,r=n.width,i=n.height;Object(o.O)(t,Vn),t.style.cssText+=\"left: 0px; top: 0px; width: \"+r+\"px; height: \"+i+\"px\"}function Wn(e){return e.createElement(\"div\",{key:\"area_pieces\",className:Xn},e.createElement(\"div\",{className:Gn}),e.createElement(\"div\",{className:Gn}),e.createElement(\"div\",{className:Gn}),e.createElement(\"div\",{className:Gn}))}var Jn={name:\"dragArea\",props:{dragArea:Boolean,passDragArea:Boolean},events:{onClick:\"click\",onClickGroup:\"clickGroup\"},render:function(e,t){var n=e.props,r=n.target,o=n.dragArea,a=n.groupable,A=n.passDragArea,s=e.state,l=s.width,u=s.height,c=s.renderPoses,f=A?te(\"area\",\"pass\"):te(\"area\");if(a)return[t.createElement(\"div\",{key:\"area\",ref:Object(i.c)(e,\"areaElement\"),className:f}),Wn(t)];if(!r||!o)return[];var d=C([0,0],[l,0],[0,u],[l,u],c[0],c[1],c[2],c[3]),p=d.length?fe(d,!0):\"none\";return[t.createElement(\"div\",{key:\"area\",ref:Object(i.c)(e,\"areaElement\"),className:f,style:{top:\"0px\",left:\"0px\",width:l+\"px\",height:u+\"px\",transformOrigin:\"0 0\",transform:p}}),Wn(t)]},dragStart:function(e,t){var n=t.datas,r=t.clientX,i=t.clientY;if(!t.inputEvent)return!1;n.isDragArea=!1;var a=e.areaElement,A=e.state,s=A.moveableClientRect,l=A.renderPoses,u=A.rootMatrix,c=A.is3d,f=s.left,d=s.top,p=ve(l),h=p.left,g=p.top,v=p.width,B=p.height,m=ze(u,[r-f,i-d],c?4:3),b=m[0],w=m[1],E=[{left:h,top:g,width:v,height:(w-=g)-10},{left:h,top:g,width:(b-=h)-10,height:B},{left:h,top:g+w+10,width:v,height:B-w-10},{left:h+b+10,top:g,width:v-b-10,height:B}],y=[].slice.call(a.nextElementSibling.children);E.forEach((function(e,t){y[t].style.cssText=\"left: \"+e.left+\"px;top: \"+e.top+\"px; width: \"+e.width+\"px; height: \"+e.height+\"px;\"})),Object(o.p)(a,Vn)},drag:function(e,t){var n=t.datas;if(!t.inputEvent)return!1;n.isDragArea||(n.isDragArea=!0,Yn(e))},dragEnd:function(e,t){var n=t.inputEvent,r=t.datas;if(!n)return!1;r.isDragArea||Yn(e)},dragGroupStart:function(e,t){return this.dragStart(e,t)},dragGroup:function(e,t){return this.drag(e,t)},dragGroupEnd:function(e,t){return this.dragEnd(e,t)},unset:function(e){Yn(e)}},qn=L(\"origin\",{render:function(e,t){var n=e.props.zoom,r=e.state,i=r.beforeOrigin,o=r.rotation;return[t.createElement(\"div\",{className:te(\"control\",\"origin\"),style:ye(o,n,i),key:\"beforeOrigin\"})]}});function Zn(e){var t=e.scrollContainer;return[t.scrollLeft,t.scrollTop]}var $n={name:\"scrollable\",canPinch:!0,props:{scrollable:Boolean,scrollContainer:Object,scrollThreshold:Number,getScrollPosition:Function},events:{onScroll:\"scroll\",onScrollGroup:\"scrollGroup\"},dragStart:function(e,t){var n=e.props.scrollContainer,r=void 0===n?e.getContainer():n,i=new _,o=Je(r,!0);t.datas.dragScroll=i;var a=t.isControl?\"controlGesto\":\"targetGesto\",A=t.targets;i.on(\"scroll\",(function(n){var r=n.container,i=n.direction,o=_e(e,t,{scrollContainer:r,direction:i}),a=A?\"onScrollGroup\":\"onScroll\";A&&(o.targets=A),Re(e,a,o)})).on(\"move\",(function(n){var r=n.offsetX,i=n.offsetY;e[a].scrollBy(r,i,t.inputEvent,!1)})),i.dragStart(t,{container:o})},checkScroll:function(e,t){var n=t.datas.dragScroll;if(n){var r=e.props,i=r.scrollContainer,o=void 0===i?e.getContainer():i,a=r.scrollThreshold,A=void 0===a?0:a,s=r.getScrollPosition,l=void 0===s?Zn:s;return n.drag(t,{container:o,threshold:A,getScrollPosition:function(e){return l({scrollContainer:e.container,direction:e.direction})}}),!0}},drag:function(e,t){return this.checkScroll(e,t)},dragEnd:function(e,t){t.datas.dragScroll.dragEnd(),t.datas.dragScroll=null},dragControlStart:function(e,t){return this.dragStart(e,I(I({},t),{isControl:!0}))},dragControl:function(e,t){return this.drag(e,t)},dragControlEnd:function(e,t){return this.dragEnd(e,t)},dragGroupStart:function(e,t){return this.dragStart(e,I(I({},t),{targets:e.props.targets}))},dragGroup:function(e,t){return this.drag(e,I(I({},t),{targets:e.props.targets}))},dragGroupEnd:function(e,t){return this.dragEnd(e,I(I({},t),{targets:e.props.targets}))},dragGroupControlStart:function(e,t){return this.dragStart(e,I(I({},t),{targets:e.props.targets,isControl:!0}))},dragGroupContro:function(e,t){return this.drag(e,I(I({},t),{targets:e.props.targets}))},dragGroupControEnd:function(e,t){return this.dragEnd(e,I(I({},t),{targets:e.props.targets}))}},er={name:\"\",props:{target:Object,dragTarget:Object,container:Object,portalContainer:Object,rootContainer:Object,zoom:Number,transformOrigin:Array,edge:Boolean,ables:Array,className:String,pinchThreshold:Number,pinchOutside:Boolean,triggerAblesSimultaneously:Boolean,checkInput:Boolean,cspNonce:String,translateZ:Number,props:Object},events:{}},tr=L(\"padding\",{render:function(e,t){var n=e.props;if(n.dragArea)return[];var r=n.padding||{},i=r.left,o=void 0===i?0:i,a=r.top,A=void 0===a?0:a,s=r.right,l=void 0===s?0:s,u=r.bottom,c=void 0===u?0:u,f=e.state,d=f.renderPoses,p=[f.pos1,f.pos2,f.pos3,f.pos4],h=[];return o>0&&h.push([0,2]),A>0&&h.push([0,1]),l>0&&h.push([1,3]),c>0&&h.push([2,3]),h.map((function(e,n){var r=e[0],i=e[1],o=C([0,0],[100,0],[0,100],[100,100],p[r],p[i],d[r],d[i]);if(o.length)return t.createElement(\"div\",{key:\"padding\"+n,className:te(\"padding\"),style:{transform:fe(o,!0)}})}))}}),nr=[\"nw\",\"ne\",\"se\",\"sw\"];function rr(e,t){var n=e[0]+e[1],r=n>t?t/n:1;return e[0]*=r,e[1]=t-e[1]*r,e}var ir=[1,2,5,6],or=[0,3,4,7],ar=[1,-1,-1,1],Ar=[1,1,-1,-1];function sr(e,t,n,r,i,o,a,A,s){void 0===o&&(o=0),void 0===a&&(a=0),void 0===A&&(A=r),void 0===s&&(s=i);var l=[],u=!1,c=e.map((function(e,c){var f=t[c],d=f.horizontal,p=f.vertical;if(p&&!u&&(u=!0,l.push(\"/\")),u){var h=Math.max(0,1===p?e[1]-a:s-e[1]);return l.push(Ge(h,i,n)),h}h=Math.max(0,1===d?e[0]-o:A-e[0]);return l.push(Ge(h,r,n)),h}));return{styles:l,raws:c}}function lr(e){for(var t=[0,0],n=[0,0],r=e.length,i=0;i<r;++i){var o=e[i];o.sub&&(o.horizontal&&(0===t[1]&&(t[0]=i),t[1]=i-t[0]+1,n[0]=i+1),o.vertical&&(0===n[1]&&(n[0]=i),n[1]=i-n[0]+1))}return{horizontalRange:t,verticalRange:n}}function ur(e,t,n,r,i,a){var A,s,l,u;void 0===a&&(a=[0,0]);var c=e.indexOf(\"/\"),f=(c>-1?e.slice(0,c):e).length,d=e.slice(0,f),p=e.slice(f+1),h=d[0],g=void 0===h?\"0px\":h,v=d[1],B=void 0===v?g:v,m=d[2],b=void 0===m?g:m,w=d[3],E=void 0===w?B:w,y=p[0],C=void 0===y?g:y,Q=p[1],x=void 0===Q?C:Q,F=p[2],U=void 0===F?C:F,S=p[3],O=void 0===S?x:S,H=[g,B,b,E].map((function(e){return Object(o.w)(e,t)})),T=[C,x,U,O].map((function(e){return Object(o.w)(e,n)})),N=H.slice(),_=T.slice();A=rr([N[0],N[1]],t),N[0]=A[0],N[1]=A[1],s=rr([N[3],N[2]],t),N[3]=s[0],N[2]=s[1],l=rr([_[0],_[3]],n),_[0]=l[0],_[3]=l[1],u=rr([_[1],_[2]],n),_[1]=u[0],_[2]=u[1];var M=N.slice(0,Math.max(a[0],d.length)),R=_.slice(0,Math.max(a[1],p.length));return K(M.map((function(e,t){var o=nr[t];return{horizontal:ar[t],vertical:0,pos:[r+e,i+(-1===Ar[t]?n:0)],sub:!0,raw:H[t],direction:o}})),R.map((function(e,n){var o=nr[n];return{horizontal:0,vertical:Ar[n],pos:[r+(-1===ar[n]?t:0),i+e],sub:!0,raw:T[n],direction:o}})))}function cr(e,t,n,r,i){void 0===i&&(i=t.length);var o=lr(e.slice(r)),a=o.horizontalRange,A=o.verticalRange,s=n-r,l=0;if(0===s)l=i;else if(s>0&&s<a[1])l=a[1]-s;else{if(!(s>=A[0]))return;l=A[0]+A[1]-s}e.splice(n,l),t.splice(n,l)}function fr(e,t,n,r,i,o,a,A,s,l,u){void 0===l&&(l=0),void 0===u&&(u=0);var c=lr(e.slice(n)),f=c.horizontalRange,d=c.verticalRange;if(r>-1)for(var p=1===ar[r]?o-l:A-o,h=f[1];h<=r;++h){var g=1===Ar[h]?u:s,v=0;if(r===h?v=o:0===h?v=l+p:-1===ar[h]&&(v=A-(t[n][0]-l)),e.splice(n+h,0,{horizontal:ar[h],vertical:0,pos:[v,g]}),t.splice(n+h,0,[v,g]),0===h)break}else if(i>-1){var B=1===Ar[i]?a-u:s-a;if(0===f[1]&&0===d[1]){var m=[l+B,u];e.push({horizontal:ar[0],vertical:0,pos:m}),t.push(m)}var b=d[0];for(h=d[1];h<=i;++h){v=1===ar[h]?l:A,g=0;if(i===h?g=a:0===h?g=u+B:1===Ar[h]?g=t[n+b][1]:-1===Ar[h]&&(g=s-(t[n+b][1]-u)),e.push({horizontal:0,vertical:Ar[h],pos:[v,g]}),t.push([v,g]),0===h)break}}}function dr(e,t){return void 0===t&&(t=e.map((function(e){return e.raw}))),{horizontals:e.map((function(e,n){return e.horizontal?t[n]:null})).filter((function(e){return null!=e})),verticals:e.map((function(e,n){return e.vertical?t[n]:null})).filter((function(e){return null!=e}))}}var pr=[[0,-1,\"n\"],[1,0,\"e\"]],hr=[[-1,-1,\"nw\"],[0,-1,\"n\"],[1,-1,\"ne\"],[1,0,\"e\"],[1,1,\"se\"],[0,1,\"s\"],[-1,1,\"sw\"],[-1,0,\"w\"]];function gr(e,t,n){var r=e.props.clipRelative,i=e.state,o=i.width,a=i.height,A=t,s=A.type,l=A.poses,u=\"rect\"===s,c=\"circle\"===s;if(\"polygon\"===s)return n.map((function(e){return Ge(e[0],o,r)+\" \"+Ge(e[1],a,r)}));if(u||\"inset\"===s){var f=n[1][1],d=n[3][0],p=n[7][0],h=n[5][1];if(u)return[f,d,h,p].map((function(e){return e+\"px\"}));var v=[f,o-d,a-h,p].map((function(e,t){return Ge(e,t%2?o:a,r)}));if(n.length>8){var B=g(n[4],n[0]),m=B[0],b=B[1];v.push.apply(v,K([\"round\"],sr(n.slice(8),l.slice(8),r,m,b,p,f,d,h).styles))}return v}if(c||\"ellipse\"===s){var w=n[0],E=Ge(Math.abs(n[1][1]-w[1]),c?Math.sqrt((o*o+a*a)/2):a,r);return(v=c?[E]:[Ge(Math.abs(n[2][0]-w[0]),o,r),E]).push(\"at\",Ge(w[0],o,r),Ge(w[1],a,r)),v}}function vr(e,t,n,r){var i=[r,(r+t)/2,t],o=[e,(e+n)/2,n];return hr.map((function(e){var t=e[0],n=e[1],r=e[2],a=i[t+1],A=o[n+1];return{vertical:Math.abs(n),horizontal:Math.abs(t),direction:r,pos:[a,A]}}))}function Br(e,t,n,r,i){var a,A,s,l,u,c,f,d=i;if(!d){var p=getComputedStyle(e),h=p.clipPath;d=\"none\"!==h?h:p.clip}if(d&&\"none\"!==d&&\"auto\"!==d||(d=r)){var g=Object(o.S)(d),v=g.prefix,B=void 0===v?d:v,m=g.value,b=void 0===m?\"\":m,w=\"circle\"===B,E=\" \";if(\"polygon\"===B)return E=\",\",{type:B,clipText:d,poses:T=(F=Object(o.T)(b||\"0% 0%, 100% 0%, 100% 100%, 0% 100%\")).map((function(e){var r=e.split(\" \"),i=r[0],a=r[1];return{vertical:1,horizontal:1,pos:[Object(o.w)(i,t),Object(o.w)(a,n)]}})),splitter:E};if(w||\"ellipse\"===B){var y=\"\",C=\"\",Q=0,x=0,F=Object(o.U)(b);if(w){var U;U=void 0===(a=F[0])?\"50%\":a,y=void 0===(A=F[2])?\"50%\":A,C=void 0===(s=F[3])?\"50%\":s,Q=Object(o.w)(U,Math.sqrt((t*t+n*n)/2)),x=Q}else{var S,O;S=void 0===(l=F[0])?\"50%\":l,O=void 0===(u=F[1])?\"50%\":u,y=void 0===(c=F[3])?\"50%\":c,C=void 0===(f=F[4])?\"50%\":f,Q=Object(o.w)(S,t),x=Object(o.w)(O,n)}var H=[Object(o.w)(y,t),Object(o.w)(C,n)],T=K([{vertical:1,horizontal:1,pos:H,direction:\"nesw\"}],pr.slice(0,w?1:2).map((function(e){return{vertical:Math.abs(e[1]),horizontal:e[0],direction:e[2],sub:!0,pos:[H[0]+e[0]*Q,H[1]+e[1]*x]}})));return{type:B,clipText:d,radiusX:Q,radiusY:x,left:H[0]-Q,top:H[1]-x,poses:T,splitter:E}}if(\"inset\"===B){var N=(F=Object(o.U)(b||\"0 0 0 0\")).indexOf(\"round\"),_=(N>-1?F.slice(0,N):F).length,M=F.slice(_+1),R=F.slice(0,_),D=R[0],P=R[1],k=void 0===P?D:P,I=R[2],L=void 0===I?D:I,z=R[3],j=void 0===z?k:z,X=[D,L].map((function(e){return Object(o.w)(e,n)})),G=X[0],V=X[1],Y=[j,k].map((function(e){return Object(o.w)(e,t)})),W=Y[0],J=Y[1],q=t-J,Z=n-V,$=ur(M,q-W,Z-G,W,G);return{type:\"inset\",clipText:d,poses:T=K(vr(G,q,Z,W),$),top:G,left:W,right:q,bottom:Z,radius:M,splitter:E}}if(\"rect\"===B){E=\",\";var ee=(F=Object(o.T)(b||\"0px, \"+t+\"px, \"+n+\"px, 0px\")).map((function(e){return Object(o.W)(e).value}));return{type:\"rect\",clipText:d,poses:T=vr(G=ee[0],J=ee[1],V=ee[2],W=ee[3]),top:G,right:J,bottom:V,left:W,values:F,splitter:E}}}}var mr={name:\"clippable\",props:{clippable:Boolean,defaultClipPath:String,customClipPath:String,clipRelative:Boolean,clipArea:Boolean,dragWithClip:Boolean,clipTargetBounds:Boolean,clipVerticalGuidelines:Array,clipHorizontalGuidelines:Array,clipSnapThreshold:Boolean},events:{onClipStart:\"clipStart\",onClip:\"clip\",onClipEnd:\"clipEnd\"},css:[\".control.clip-control {\\n    background: #6d6;\\n    cursor: pointer;\\n}\\n.control.clip-control.clip-radius {\\n    background: #d66;\\n}\\n.line.clip-line {\\n    background: #6e6;\\n    cursor: move;\\n    z-index: 1;\\n}\\n.clip-area {\\n    position: absolute;\\n    top: 0;\\n    left: 0;\\n}\\n.clip-ellipse {\\n    position: absolute;\\n    cursor: move;\\n    border: 1px solid #6d6;\\n    border: var(--zoompx) solid #6d6;\\n    border-radius: 50%;\\n    transform-origin: 0px 0px;\\n}\",\":host {\\n    --bounds-color: #d66;\\n}\",\".guideline {\\n    pointer-events: none;\\n    z-index: 2;\\n}\",\".line.guideline.bounds {\\n    background: #d66;\\n    background: var(--bounds-color);\\n}\"],render:function(e,t){var n=e.props,r=n.customClipPath,i=n.defaultClipPath,a=n.clipArea,A=n.zoom,s=e.state,l=s.target,u=s.width,c=s.height,f=s.allMatrix,d=s.is3d,p=s.left,h=s.top,v=s.pos1,B=s.pos2,m=s.pos3,b=s.pos4,w=s.clipPathState,E=s.snapBoundInfos;if(!l)return[];var y=Br(l,u,c,i||\"inset\",w||r);if(!y)return[];var C=d?4:3,Q=y.type,x=y.poses.map((function(e){var t=he(f,e.pos,C);return[t[0]-p,t[1]-h]})),F=[],U=[],S=\"rect\"===Q,O=\"inset\"===Q,H=\"polygon\"===Q;if(S||O||H){var T=O?x.slice(0,8):x;U=T.map((function(e,n){var r=0===n?T[T.length-1]:T[n-1],i=Object(o.E)(r,e),a=we(r,e);return t.createElement(\"div\",{key:\"clipLine\"+n,className:te(\"line\",\"clip-line\",\"snap-control\"),\"data-clip-index\":n,style:{width:a+\"px\",transform:\"translate(\"+r[0]+\"px, \"+r[1]+\"px) rotate(\"+i+\"rad) scaleY(\"+A+\")\"}})}))}if(F=x.map((function(e,n){return t.createElement(\"div\",{key:\"clipControl\"+n,className:te(\"control\",\"clip-control\",\"snap-control\"),\"data-clip-index\":n,style:{transform:\"translate(\"+e[0]+\"px, \"+e[1]+\"px) scale(\"+A+\")\"}})})),O&&F.push.apply(F,x.slice(8).map((function(e,n){return t.createElement(\"div\",{key:\"clipRadiusControl\"+n,className:te(\"control\",\"clip-control\",\"clip-radius\",\"snap-control\"),\"data-clip-index\":8+n,style:{transform:\"translate(\"+e[0]+\"px, \"+e[1]+\"px) scale(\"+A+\")\"}})}))),\"circle\"===Q||\"ellipse\"===Q){var N=y.left,_=y.top,M=y.radiusX,R=y.radiusY,D=g(he(f,[N,_],C),he(f,[0,0],C)),P=D[0],k=D[1],I=\"none\";if(!a){for(var L=Math.max(10,M/5,R/5),z=[],j=0;j<=L;++j){var X=2*Math.PI/L*j;z.push([M+(M-A)*Math.cos(X),R+(R-A)*Math.sin(X)])}z.push([M,-2]),z.push([-2,-2]),z.push([-2,2*R+2]),z.push([2*M+2,2*R+2]),z.push([2*M+2,-2]),z.push([M,-2]),I=\"polygon(\"+z.map((function(e){return e[0]+\"px \"+e[1]+\"px\"})).join(\", \")+\")\"}F.push(t.createElement(\"div\",{key:\"clipEllipse\",className:te(\"clip-ellipse\",\"snap-control\"),style:{width:2*M+\"px\",height:2*R+\"px\",clipPath:I,transform:\"translate(\"+(-p+P)+\"px, \"+(-h+k)+\"px) \"+fe(f)}}))}if(a){var G=ve(K([v,B,m,b],x)),V=G.width,Y=G.height,W=G.left,J=G.top;if(H||S||O){z=O?x.slice(0,8):x;F.push(t.createElement(\"div\",{key:\"clipArea\",className:te(\"clip-area\",\"snap-control\"),style:{width:V+\"px\",height:Y+\"px\",transform:\"translate(\"+W+\"px, \"+J+\"px)\",clipPath:\"polygon(\"+z.map((function(e){return e[0]-W+\"px \"+(e[1]-J)+\"px\"})).join(\", \")+\")\"}}))}}return E&&[\"vertical\",\"horizontal\"].forEach((function(e){var n=E[e],r=\"horizontal\"===e;n.isSnap&&U.push.apply(U,n.snap.posInfos.map((function(n,i){var o=n.pos,a=g(he(f,r?[0,o]:[o,0],C),[p,h]),s=g(he(f,r?[u,o]:[o,c],C),[p,h]);return Hn(t,\"\",a,s,A,\"clip\"+e+\"snap\"+i,\"guideline\")}))),n.isBound&&U.push.apply(U,n.bounds.map((function(n,i){var o=n.pos,a=g(he(f,r?[0,o]:[o,0],C),[p,h]),s=g(he(f,r?[u,o]:[o,c],C),[p,h]);return Hn(t,\"\",a,s,A,\"clip\"+e+\"bounds\"+i,\"guideline\",\"bounds\",\"bold\")})))})),K(F,U)},dragControlCondition:function(e,t){return t.inputEvent&&(t.inputEvent.target.getAttribute(\"class\")||\"\").indexOf(\"clip\")>-1},dragStart:function(e,t){var n=e.props.dragWithClip;return!(void 0===n||n)&&this.dragControlStart(e,t)},drag:function(e,t){return this.dragControl(e,t)},dragEnd:function(e,t){return this.dragControlEnd(e,t)},dragControlStart:function(e,t){var n=e.state,r=e.props,i=r.defaultClipPath,o=r.customClipPath,a=n.target,A=n.width,s=n.height,l=t.inputEvent?t.inputEvent.target:null,u=l?l.getAttribute(\"class\"):\"\",c=t.datas,f=Br(a,A,s,i||\"inset\",o);if(!f)return!1;var d=f.clipText;return!1===Re(e,\"onClipStart\",_e(e,t,{clipType:f.type,clipStyle:d,poses:f.poses.map((function(e){return e.pos}))}))?(c.isClipStart=!1,!1):(c.isControl=u.indexOf(\"clip-control\")>-1,c.isLine=u.indexOf(\"clip-line\")>-1,c.isArea=u.indexOf(\"clip-area\")>-1||u.indexOf(\"clip-ellipse\")>-1,c.index=l?parseInt(l.getAttribute(\"data-clip-index\"),10):-1,c.clipPath=f,c.isClipStart=!0,n.clipPathState=d,at(e,t),!0)},dragControl:function(e,t){var n=t.datas,r=t.originalDatas;if(!n.isClipStart)return!1;var i=r&&r.draggable||{},a=n,A=a.isControl,s=a.isLine,l=a.isArea,u=a.index,c=a.clipPath;if(!c)return!1;var f=i.isDrag?i.prevDist:ft(t),d=f[0],p=f[1],g=e.props,v=e.state,B=v.width,m=v.height,b=!l&&!A&&!s,w=c.type,E=c.poses,y=c.splitter,C=E.map((function(e){return e.pos}));b&&(d=-d,p=-p);var Q=!A||\"nesw\"===E[u].direction,x=\"inset\"===w||\"rect\"===w,F=E.map((function(){return[0,0]}));if(A&&!Q){var U=E[u],S=U.horizontal,O=U.vertical,H=[d*Math.abs(S),p*Math.abs(O)];F=function(e,t,n,r){var i=e[t],o=i.direction,a=i.sub,A=e.map((function(){return[0,0]})),s=o?o.split(\"\"):[];if(r&&t<8){var l=s.filter((function(e){return\"w\"===e||\"e\"===e}))[0],u=s.filter((function(e){return\"n\"===e||\"s\"===e}))[0];A[t]=n,e.forEach((function(e,t){var r=e.direction;r&&(r.indexOf(l)>-1&&(A[t][0]=n[0]),r.indexOf(u)>-1&&(A[t][1]=n[1]))})),l&&(A[1][0]=n[0]/2,A[5][0]=n[0]/2),u&&(A[3][1]=n[1]/2,A[7][1]=n[1]/2)}else o&&!a?s.forEach((function(t){var r=\"n\"===t||\"s\"===t;e.forEach((function(e,i){var o=e.direction,a=e.horizontal,s=e.vertical;o&&-1!==o.indexOf(t)&&(A[i]=[r||!a?0:n[0],r&&s?n[1]:0])}))})):A[t]=n;return A}(E,u,H,x)}else Q&&(F=C.map((function(){return[d,p]})));var T=C.map((function(e,t){return h(e,F[t])})),N=K(T);v.snapBoundInfos=null;var _=\"circle\"===c.type,M=\"ellipse\"===c.type;if(_||M){var R=ve(T),D=Math.abs(R.bottom-R.top),P=Math.abs(M?R.right-R.left:D),k=T[0][1]+D,I=T[0][0]-P,L=T[0][0]+P;_&&(N.push([L,R.bottom]),F.push([1,0])),N.push([R.left,k]),F.push([0,1]),N.push([I,R.bottom]),F.push([1,0])}var z=St((g.clipHorizontalGuidelines||[]).map((function(e){return Object(o.w)(\"\"+e,m)})),(g.clipVerticalGuidelines||[]).map((function(e){return Object(o.w)(\"\"+e,B)})),B,m),j=[],X=[];if(_||M)j=[N[4][0],N[2][0]],X=[N[1][1],N[3][1]];else if(x){var G=[N[0],N[2],N[4],N[6]],V=[F[0],F[2],F[4],F[6]];j=G.filter((function(e,t){return V[t][0]})).map((function(e){return e[0]})),X=G.filter((function(e,t){return V[t][1]})).map((function(e){return e[1]}))}else j=N.filter((function(e,t){return F[t][0]})).map((function(e){return e[0]})),X=N.filter((function(e,t){return F[t][1]})).map((function(e){return e[1]}));for(var Y=function(e){var t=Bn(z,g.clipTargetBounds&&{left:0,top:0,right:B,bottom:m},j,X,{snapThreshold:5}),n=t.horizontal,r=t.vertical,i=n.offset,o=r.offset;if(!M&&!_||0!==F[0][0]||0!==F[0][1])return N.forEach((function(e,t){var n=F[t];n[0]&&(e[0]-=o),n[1]&&(e[1]-=i)})),\"break\";var a=ve(T),A=a.bottom-a.top,s=M?a.right-a.left:A;s-=r.isBound?Math.abs(o):0===r.snapIndex?-o:o,A-=n.isBound?Math.abs(i):0===n.snapIndex?-i:i,_&&(s=A=Pt(r,n)>0?A:s);var l=N[0];N[1][1]=l[1]-A,N[2][0]=l[0]+s,N[3][1]=l[1]+A,N[4][0]=l[0]-s},W=0;W<2;++W){if(\"break\"===Y())break}var J=gr(e,c,T),q=w+\"(\"+J.join(y)+\")\";if(v.clipPathState=q,_||M)j=[N[4][0],N[2][0]],X=[N[1][1],N[3][1]];else if(x){G=[N[0],N[2],N[4],N[6]];j=G.map((function(e){return e[0]})),X=G.map((function(e){return e[1]}))}else j=N.map((function(e){return e[0]})),X=N.map((function(e){return e[1]}));return v.snapBoundInfos=Bn(z,g.clipTargetBounds&&{left:0,top:0,right:B,bottom:m},j,X,{snapThreshold:1}),Re(e,\"onClip\",_e(e,t,{clipEventType:\"changed\",clipType:w,poses:T,clipStyle:q,clipStyles:J,distX:d,distY:p})),!0},dragControlEnd:function(e,t){this.unset(e);var n=t.isDrag,r=t.datas,i=t.isDouble,o=r.isLine,a=r.isClipStart,A=r.isControl;return!!a&&(Re(e,\"onClipEnd\",Me(e,t,{})),i&&(A?function(e,t){var n=t.datas,r=n.clipPath,i=n.index,o=r,a=o.type,A=o.poses,s=o.splitter,l=A.map((function(e){return e.pos})),u=l.length;if(\"polygon\"===a)A.splice(i,1),l.splice(i,1);else{if(\"inset\"!==a)return;if(i<8)return;if(cr(A,l,i,8,u),u===A.length)return}var c=gr(e,r,l);Re(e,\"onClip\",_e(e,t,{clipEventType:\"removed\",clipType:a,poses:l,clipStyles:c,clipStyle:a+\"(\"+c.join(s)+\")\",distX:0,distY:0}))}(e,t):o&&function(e,t){var n=ot(e,t),r=n[0],i=n[1],o=t.datas,a=o.clipPath,A=o.index,s=a,l=s.type,u=s.poses,c=s.splitter,f=u.map((function(e){return e.pos}));if(\"polygon\"===l)f.splice(A,0,[r,i]);else{if(\"inset\"!==l)return;var d=ir.indexOf(A),p=or.indexOf(A),h=u.length;if(fr(u,f,8,d,p,r,i,f[4][0],f[4][1],f[0][0],f[0][1]),h===u.length)return}var g=gr(e,a,f);Re(e,\"onClip\",_e(e,t,{clipEventType:\"added\",clipType:l,poses:f,clipStyles:g,clipStyle:l+\"(\"+g.join(c)+\")\",distX:0,distY:0}))}(e,t)),i||n)},unset:function(e){e.state.clipPathState=\"\",e.state.snapBoundInfos=null}},br={name:\"originDraggable\",props:{originDraggable:Boolean,originRelative:Boolean},events:{onDragOriginStart:\"dragOriginStart\",onDragOrigin:\"dragOrigin\",onDragOriginEnd:\"dragOriginEnd\"},css:[\":host[data-able-origindraggable] .control.origin {\\n    pointer-events: auto;\\n}\"],dragControlCondition:function(e,t){return t.isRequest?\"originDraggable\"===t.requestAble:Object(o.G)(t.inputEvent.target,te(\"origin\"))},dragControlStart:function(e,t){var n=t.datas;at(e,t);var r=_e(e,t,{dragStart:Sn.dragStart(e,(new tt).dragStart([0,0],t))}),i=Re(e,\"onDragOriginStart\",r);return n.startOrigin=e.state.transformOrigin,n.startTargetOrigin=e.state.targetOrigin,n.prevOrigin=[0,0],n.isDragOrigin=!0,!1===i?(n.isDragOrigin=!1,!1):r},dragControl:function(e,t){var n=t.datas,r=t.isPinch,i=t.isRequest;if(!n.isDragOrigin)return!1;var o=ft(t),a=o[0],A=o[1],s=e.state,l=s.width,u=s.height,c=s.offsetMatrix,f=s.targetMatrix,d=s.is3d,p=e.props.originRelative,v=void 0===p||p,B=d?4:3,m=[a,A];if(i){var b=t.distOrigin;(b[0]||b[1])&&(m=b)}var w=h(n.startOrigin,m),E=h(n.startTargetOrigin,m),y=g(m,n.prevOrigin),C=gt(c,f,w,B),Q=e.getRect(),x=ve(ge(C,l,u,B)),F=[Q.left-x.left,Q.top-x.top];n.prevOrigin=m;var U=_e(e,t,{width:l,height:u,origin:w,dist:m,delta:y,transformOrigin:[Ge(E[0],l,v),Ge(E[1],u,v)].join(\" \"),drag:Sn.drag(e,et(t,e.state,F,!!r,!1))});return Re(e,\"onDragOrigin\",U),U},dragControlEnd:function(e,t){return!!t.datas.isDragOrigin&&(Re(e,\"onDragOriginEnd\",Me(e,t,{})),!0)},dragGroupControlCondition:function(e,t){return this.dragControlCondition(e,t)},dragGroupControlStart:function(e,t){return!!this.dragControlStart(e,t)},dragGroupControl:function(e,t){var n=this.dragControl(e,t);return!!n&&(e.transformOrigin=n.transformOrigin,!0)},request:function(e){var t={},n=e.getRect(),r=0,i=0,o=n.transformOrigin,a=[0,0];return{isControl:!0,requestStart:function(){return{datas:t}},request:function(e){return\"deltaOrigin\"in e?(a[0]+=e.deltaOrigin[0],a[1]+=e.deltaOrigin[1]):\"origin\"in e?(a[0]=e.origin[0]-o[0],a[1]=e.origin[1]-o[1]):(\"x\"in e?r=e.x-n.left:\"deltaX\"in e&&(r+=e.deltaX),\"y\"in e?i=e.y-n.top:\"deltaY\"in e&&(i+=e.deltaY)),{datas:t,distX:r,distY:i,distOrigin:a}},requestEnd:function(){return{datas:t,isDrag:!0}}}}};function wr(e,t,n,r,i){var a;void 0===r&&(r=[0,0]);if(i)a=i;else{var A=window.getComputedStyle(e);a=A&&A.borderRadius||\"\"}return ur(!a||!i&&\"0px\"===a?[]:Object(o.U)(a),t,n,0,0,r)}function Er(e,t,n,r,i,o){var a=e.state,A=a.width,s=a.height,l=sr(o,i,e.props.roundRelative,A,s),u=l.raws,c=l.styles,f=dr(i,u),d=f.horizontals,p=f.verticals,h=c.join(\" \");a.borderRadiusState=h,Re(e,\"onRound\",_e(e,t,{horizontals:d,verticals:p,borderRadius:h,width:A,height:s,delta:r,dist:n}))}var yr={name:\"roundable\",props:{roundable:Boolean,roundRelative:Boolean,minRoundControls:Array,maxRoundControls:Array,roundClickable:Boolean},events:{onRoundStart:\"roundStart\",onRound:\"round\",onRoundEnd:\"roundEnd\"},css:[\".control.border-radius {\\n    background: #d66;\\n    cursor: pointer;\\n}\",\":host[data-able-roundable] .line.direction {\\n    cursor: pointer;\\n}\"],render:function(e,t){var n=e.state,r=n.target,i=n.width,o=n.height,a=n.allMatrix,A=n.is3d,s=n.left,l=n.top,u=n.borderRadiusState,c=e.props,f=c.minRoundControls,d=void 0===f?[0,0]:f,p=c.maxRoundControls,h=void 0===p?[4,4]:p,v=c.zoom;if(!r)return null;var B=A?4:3,m=wr(r,i,o,d,u);if(!m)return null;var b=0,w=0;return m.map((function(e,n){w+=Math.abs(e.horizontal),b+=Math.abs(e.vertical);var r=g(he(a,e.pos,B),[s,l]),i=e.vertical?b<=h[1]:w<=h[0];return t.createElement(\"div\",{key:\"borderRadiusControl\"+n,className:te(\"control\",\"border-radius\"),\"data-radius-index\":n,style:{display:i?\"block\":\"none\",transform:\"translate(\"+r[0]+\"px, \"+r[1]+\"px) scale(\"+v+\")\"}})}))},dragControlCondition:function(e,t){if(!t.inputEvent||t.isRequest)return!1;var n=t.inputEvent.target.getAttribute(\"class\")||\"\";return n.indexOf(\"border-radius\")>-1||n.indexOf(\"moveable-line\")>-1&&n.indexOf(\"moveable-direction\")>-1},dragControlStart:function(e,t){var n=t.inputEvent,r=t.datas,i=n.target,o=i.getAttribute(\"class\")||\"\",a=o.indexOf(\"border-radius\")>-1,A=o.indexOf(\"moveable-line\")>-1&&o.indexOf(\"moveable-direction\")>-1,s=a?parseInt(i.getAttribute(\"data-radius-index\"),10):-1,l=A?parseInt(i.getAttribute(\"data-line-index\"),10):-1;if(!a&&!A)return!1;if(!1===Re(e,\"onRoundStart\",_e(e,t,{})))return!1;r.lineIndex=l,r.controlIndex=s,r.isControl=a,r.isLine=A,at(e,t);var u=e.props,c=u.roundRelative,f=u.minRoundControls,d=void 0===f?[0,0]:f,p=e.state,h=p.target,g=p.width,v=p.height;r.isRound=!0,r.prevDist=[0,0];var B=wr(h,g,v,d)||[];return r.controlPoses=B,p.borderRadiusState=sr(B.map((function(e){return e.pos})),B,c,g,v).styles.join(\" \"),!0},dragControl:function(e,t){var n=t.datas;if(!n.isRound||!n.isControl||!n.controlPoses.length)return!1;var r=n.controlIndex,i=n.controlPoses,o=ft(t),a=o[0],A=o[1],s=[a,A],l=g(s,n.prevDist),u=e.props.maxRoundControls,c=void 0===u?[4,4]:u,f=e.state,d=f.width,p=f.height,v=i[r],B=v.vertical,m=v.horizontal,b=i.map((function(e){var t=e.horizontal,n=e.vertical,r=[t*m*s[0],n*B*s[1]];if(t){if(1===c[0])return r;if(c[0]<4&&t!==m)return r}else{if(0===c[1])return r[1]=n*m*s[0]/d*p,r;if(B){if(1===c[1])return r;if(c[1]<4&&n!==B)return r}}return[0,0]}));b[r]=s;var w=i.map((function(e,t){return h(e.pos,b[t])}));return n.prevDist=[a,A],Er(e,t,s,l,i,w),!0},dragControlEnd:function(e,t){var n=e.state;n.borderRadiusState=\"\";var r=t.datas,i=t.isDouble;if(!r.isRound)return!1;var o=n.width,a=n.height,A=r.isControl,s=r.controlIndex,l=r.isLine,u=r.lineIndex,c=r.controlPoses,f=c.map((function(e){return e.pos})),d=f.length,p=e.props.roundClickable;if(i&&(void 0===p||p)){if(A)cr(c,f,s,0);else if(l){var h=ot(e,t);!function(e,t,n,r,i,o,a){var A=dr(e),s=A.horizontals,l=A.verticals,u=s.length,c=l.length,f=-1,d=-1;0===n?0===u?f=0:1===u&&(f=1):3===n&&(u<=2?f=2:u<=3&&(f=3)),2===n?0===c?d=0:c<4&&(d=3):1===n&&(c<=1?d=1:c<=2&&(d=2)),fr(e,t,0,f,d,r,i,o,a)}(c,f,u,h[0],h[1],o,a)}d!==c.length&&Er(e,t,[0,0],[0,0],c,f)}return Re(e,\"onRoundEnd\",Me(e,t,{})),n.borderRadiusState=\"\",!0},unset:function(e){e.state.borderRadiusState=\"\"}},Cr={isPinch:!0,name:\"beforeRenderable\",props:{},events:{onBeforeRenderStart:\"beforeRenderStart\",onBeforeRender:\"beforeRender\",onBeforeRenderEnd:\"beforeRenderEnd\",onBeforeRenderGroupStart:\"beforeRenderGroupStart\",onBeforeRenderGroup:\"beforeRenderGroup\",onBeforeRenderGroupEnd:\"beforeRenderGroupEnd\"},setTransform:function(e,t){var n=e.state,r=n.is3d,i=n.targetMatrix,o=r?\"matrix3d(\"+i.join(\",\")+\")\":\"matrix(\"+v(i,!0)+\")\";t.datas.startTransforms=[o]},resetTransform:function(e,t){t.datas.nextTransforms=t.datas.startTransforms,t.datas.nextTransformAppendedIndexes=[]},fillDragStartParams:function(e,t){return _e(e,t,{setTransform:function(e){t.datas.startTransforms=Object(o.H)(e)?e:Object(o.U)(e)},isPinch:!!t.isPinch})},fillDragParams:function(e,t){return _e(e,t,{isPinch:!!t.isPinch})},dragStart:function(e,t){this.setTransform(e,t),Re(e,\"onBeforeRenderStart\",this.fillDragStartParams(e,t))},drag:function(e,t){this.resetTransform(e,t),Re(e,\"onBeforeRender\",_e(e,t,{isPinch:!!t.isPinch}))},dragEnd:function(e,t){Re(e,\"onBeforeRenderEnd\",_e(e,t,{isPinch:!!t.isPinch,isDrag:t.isDrag}))},dragGroupStart:function(e,t){var n=this;this.dragStart(e,t);var r=nt(e,\"beforeRenderable\",t),i=e.moveables,o=r.map((function(e,t){var r=i[t];return n.setTransform(r,e),n.fillDragStartParams(r,e)}));Re(e,\"onBeforeRenderGroupStart\",_e(e,t,{isPinch:!!t.isPinch,targets:e.props.targets,setTransform:function(){},events:o}))},dragGroup:function(e,t){var n=this;this.drag(e,t);var r=nt(e,\"beforeRenderable\",t),i=e.moveables,o=r.map((function(e,t){var r=i[t];return n.resetTransform(r,e),n.fillDragParams(r,e)}));Re(e,\"onBeforeRenderGroup\",_e(e,t,{isPinch:!!t.isPinch,targets:e.props.targets,events:o}))},dragGroupEnd:function(e,t){this.dragEnd(e,t),Re(e,\"onBeforeRenderGroupEnd\",_e(e,t,{isPinch:!!t.isPinch,isDrag:t.isDrag,targets:e.props.targets}))},dragControlStart:function(e,t){return this.dragStart(e,t)},dragControl:function(e,t){return this.drag(e,t)},dragControlEnd:function(e,t){return this.dragEnd(e,t)},dragGroupControlStart:function(e,t){return this.dragGroupStart(e,t)},dragGroupControl:function(e,t){return this.dragGroup(e,t)},dragGroupControlEnd:function(e,t){return this.dragGroupEnd(e,t)}},Qr={name:\"renderable\",props:{},events:{onRenderStart:\"renderStart\",onRender:\"render\",onRenderEnd:\"renderEnd\",onRenderGroupStart:\"renderGroupStart\",onRenderGroup:\"renderGroup\",onRenderGroupEnd:\"renderGroupEnd\"},dragStart:function(e,t){Re(e,\"onRenderStart\",_e(e,t,{isPinch:!!t.isPinch}))},drag:function(e,t){Re(e,\"onRender\",_e(e,t,{isPinch:!!t.isPinch}))},dragEnd:function(e,t){Re(e,\"onRenderEnd\",_e(e,t,{isPinch:!!t.isPinch,isDrag:t.isDrag}))},dragGroupStart:function(e,t){Re(e,\"onRenderGroupStart\",_e(e,t,{isPinch:!!t.isPinch,targets:e.props.targets}))},dragGroup:function(e,t){Re(e,\"onRenderGroup\",_e(e,t,{isPinch:!!t.isPinch,targets:e.props.targets}))},dragGroupEnd:function(e,t){Re(e,\"onRenderGroupEnd\",_e(e,t,{isPinch:!!t.isPinch,isDrag:t.isDrag,targets:e.props.targets}))},dragControlStart:function(e,t){return this.dragStart(e,t)},dragControl:function(e,t){return this.drag(e,t)},dragControlEnd:function(e,t){return this.dragEnd(e,t)},dragGroupControlStart:function(e,t){return this.dragGroupStart(e,t)},dragGroupControl:function(e,t){return this.dragGroup(e,t)},dragGroupControlEnd:function(e,t){return this.dragGroupEnd(e,t)}};function xr(e,t,n,r,i,o,a){var A=\"Start\"===i,s=e.state.target,l=o.isRequest;if(!s||A&&r.indexOf(\"Control\")>-1&&!l&&e.areaElement===o.inputEvent.target)return!1;var u=\"\"+n+r+i,c=\"\"+n+r+\"Condition\",f=\"End\"===i,d=i.indexOf(\"After\")>-1,p=A&&(!e.targetGesto||!e.controlGesto||!e.targetGesto.isFlag()||!e.controlGesto.isFlag());p&&e.updateRect(i,!0,!1),\"\"!==i||d||l||je(e.state,o);var h=K([Cr],e[t].slice(),[Qr]);if(l){var g=o.requestAble;h.some((function(e){return e.name===g}))||h.push.apply(h,e.props.ables.filter((function(e){return e.name===g})))}if(!h.length)return!1;var v=h.filter((function(e){return e[u]})),B=o.datas;p&&v.forEach((function(t){t.unset&&t.unset(e)}));var m,b=o.inputEvent;f&&b&&(m=document.elementFromPoint(o.clientX,o.clientY)||b.target);var w=v.filter((function(t){var n=t.name,r=B[n]||(B[n]={});return A&&(r.isEventStart=!t[c]||t[c](e,o)),!!r.isEventStart&&t[u](e,I(I({},o),{datas:r,originalDatas:B,inputTarget:m}))})).length,E=A&&v.length&&!w;return(f||E)&&(e.state.gesto=null,e.moveables&&e.moveables.forEach((function(e){e.state.gesto=null}))),p&&E&&v.forEach((function(t){t.unset&&t.unset(e)})),!e.isUnmounted&&!E&&((!A&&w&&!a||f)&&(e.updateRect(i,!0,!1),e.forceUpdate()),A||f||d||!w||a||xr(e,t,n,r,i+\"After\",o),!0)}function Fr(e,t,n){var r=e.controlBox.getElement(),i=[];i.push(r),e.props.dragArea&&!e.props.dragTarget||i.push(t);var a=function(t){var n=t.inputEvent.target;return n===e.areaElement||!e.isMoveableElement(n)||Object(o.G)(n,\"moveable-area\")||Object(o.G)(n,\"moveable-padding\")};return Ur(e,i,\"targetAbles\",n,{dragStart:a,pinchStart:a})}function Ur(e,t,n,r,i){void 0===i&&(i={});var o=e.props,a=o.pinchOutside,A=o.pinchThreshold,s={container:window,pinchThreshold:A,pinchOutside:a},l=new R.a(t,s);return[\"drag\",\"pinch\"].forEach((function(t){[\"Start\",\"\",\"End\"].forEach((function(o){l.on(\"\"+t+o,(function(a){var A=a.eventType;!i[A]||i[A](a)?xr(e,n,t,r,o,a)||a.stop():a.stop()}))}))})),l}var Sr=function(){function e(e,t,n){var r=this;this.target=e,this.moveable=t,this.eventName=n,this.ables=[],this.onEvent=function(e){var t=r.eventName,n=r.moveable;r.ables.forEach((function(r){r[t]({inputEvent:e},n)}))},this.target.addEventListener(this.eventName.toLowerCase(),this.onEvent)}var t=e.prototype;return t.setAbles=function(e){this.ables=e},t.destroy=function(){this.target.removeEventListener(this.eventName.toLowerCase(),this.onEvent),this.target=null,this.moveable=null},e}(),Or=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state=I({container:null,target:null,gesto:null,renderPoses:[[0,0],[0,0],[0,0],[0,0]]},xe(null)),t.enabledAbles=[],t.targetAbles=[],t.controlAbles=[],t.rotation=0,t.scale=[1,1],t.isUnmounted=!1,t.events={mouseEnter:null,mouseLeave:null},t}k(t,e);var n=t.prototype;return n.render=function(){var e=this.props,t=this.state,n=e.edge,r=e.parentPosition,o=e.className,a=e.target,A=e.zoom,s=e.cspNonce,l=e.translateZ,u=e.cssStyled,c=e.portalContainer;this.checkUpdate(),this.updateRenderPoses();var f=r||{left:0,top:0},d=f.left,p=f.top,h=t.left,g=t.top,v=t.target,B=t.direction,m=t.renderPoses,b=e.targets,w=(b&&b.length||a)&&v,E=this.isDragging(),y={},C={createElement:M.createElement};return this.getEnabledAbles().forEach((function(e){y[\"data-able-\"+e.name.toLowerCase()]=!0})),Object(M.createElement)(u,I({cspNonce:s,ref:Object(i.c)(this,\"controlBox\"),className:te(\"control-box\",-1===B?\"reverse\":\"\",E?\"dragging\":\"\")+\" \"+o},y,{portalContainer:c,style:{position:\"absolute\",display:w?\"block\":\"none\",transform:\"translate3d(\"+(h-d)+\"px, \"+(g-p)+\"px, \"+l+\")\",\"--zoom\":A,\"--zoompx\":A+\"px\"}}),this.renderAbles(),Hn(C,n?\"n\":\"\",m[0],m[1],A,0),Hn(C,n?\"e\":\"\",m[1],m[3],A,1),Hn(C,n?\"w\":\"\",m[0],m[2],A,2),Hn(C,n?\"s\":\"\",m[2],m[3],A,3))},n.componentDidMount=function(){this.controlBox.getElement();var e=this.props,t=e.parentMoveable,n=e.container,r=e.wrapperMoveable;this.updateEvent(e),this.updateNativeEvents(e),n||t||r||this.updateRect(\"\",!1,!0),this.updateCheckInput()},n.componentDidUpdate=function(e){this.updateNativeEvents(e),this.updateEvent(e),this.updateCheckInput()},n.componentWillUnmount=function(){this.isUnmounted=!0,Ne(this,\"targetGesto\"),Ne(this,\"controlGesto\");var e=this.events;for(var t in e){var n=e[t];n&&n.destroy()}},n.getContainer=function(){var e=this.props,t=e.parentMoveable,n=e.wrapperMoveable;return e.container||n&&n.getContainer()||t&&t.getContainer()||this.controlBox.getElement().parentElement},n.isMoveableElement=function(e){return e&&(e.getAttribute(\"class\")||\"\").indexOf(G)>-1},n.dragStart=function(e){return this.targetGesto&&this.targetGesto.triggerDragStart(e),this},n.hitTest=function(e){var t,n=this.state,r=n.target,i=n.pos1,o=n.pos2,a=n.pos3,A=n.pos4,s=n.targetClientRect;if(!r)return 0;if(e instanceof Element){var l=e.getBoundingClientRect();t={left:l.left,top:l.top,width:l.width,height:l.height}}else t=I({width:0,height:0},e);var u=t.left,c=t.top,f=t.width,d=t.height,p=Object(S.a)([i,o,A,a],s),h=Object(S.e)(p,[[u,c],[u+f,c],[u+f,c+d],[u,c+d]]),g=Object(S.b)(p);return h&&g?Math.min(100,h/g*100):0},n.isInside=function(e,t){var n=this.state,r=n.target,i=n.pos1,o=n.pos2,a=n.pos3,A=n.pos4,s=n.targetClientRect;return!!r&&Object(S.f)([e,t],Object(S.a)([i,o,A,a],s))},n.updateRect=function(e,t,n){void 0===n&&(n=!0);var r=this.props,i=r.parentMoveable,o=this.state.target||this.props.target,a=this.getContainer(),A=i?i.props.rootContainer:r.rootContainer;this.updateState(xe(this.controlBox&&this.controlBox.getElement(),o,a,a,A||a),!i&&n)},n.isTargetChanged=function(e,t){var n=this.props,r=n.dragTarget||n.target,i=e.dragTarget||e.target,o=n.dragArea,a=e.dragArea;return!o&&i!==r||(t||o)&&a!==o},n.updateNativeEvents=function(e){var t=this,n=this.props.dragArea?this.areaElement:this.state.target,r=this.events,i=Object(o.D)(r);if(this.isTargetChanged(e))for(var a in r){var A=r[a];A&&A.destroy(),r[a]=null}if(n){var s=this.enabledAbles;i.forEach((function(e){var i=Pe(s,[e]),o=i.length>0,a=r[e];o?(a||(a=new Sr(n,t,e),r[e]=a),a.setAbles(i)):a&&(a.destroy(),r[e]=null)}))}},n.updateEvent=function(e){var t=this.controlBox.getElement(),n=this.targetAbles.length,r=this.controlAbles.length,i=this.props,o=i.dragTarget||i.target,a=this.isTargetChanged(e,!0),A=!n&&this.targetGesto||a;A&&(Ne(this,\"targetGesto\"),this.updateState({gesto:null})),r||Ne(this,\"controlGesto\"),o&&n&&!this.targetGesto&&(this.targetGesto=Fr(this,o,\"\")),!this.controlGesto&&r&&(this.controlGesto=Ur(this,t,\"controlAbles\",\"Control\")),A&&this.unsetAbles()},n.isDragging=function(){return!!this.targetGesto&&this.targetGesto.isFlag()||!!this.controlGesto&&this.controlGesto.isFlag()},n.updateTarget=function(e){this.updateRect(e,!0)},n.getRect=function(){var e=this.state,t=Oe(this.state),n=t[0],r=t[1],i=t[2],o=t[3],a=ve(t),A=e.width,s=e.height,l=a.width,u=a.height,c=a.left,f=a.top,d=[e.left,e.top],p=h(d,e.origin);return{width:l,height:u,left:c,top:f,pos1:n,pos2:r,pos3:i,pos4:o,offsetWidth:A,offsetHeight:s,beforeOrigin:h(d,e.beforeOrigin),origin:p,transformOrigin:e.transformOrigin,rotation:this.getRotation()}},n.getManager=function(){return this},n.getRotation=function(){var e=this.state;return function(e,t,n){var r=Object(o.E)(e,t)/Math.PI*180;return r=(r=n>=0?r:180-r)>=0?r:360+r}(e.pos1,e.pos2,e.direction)},n.request=function(e,t,n){void 0===t&&(t={});var r=this.props,i=r.ables,o=r.groupable,a=i.filter((function(t){return t.name===e}))[0];if(this.isDragging()||!a||!a.request)return{request:function(){return this},requestEnd:function(){return this}};var A=this,s=a.request(this),l=n||t.isInstant,u=s.isControl?\"controlAbles\":\"targetAbles\",c=(o?\"Group\":\"\")+(s.isControl?\"Control\":\"\"),f={request:function(t){return xr(A,u,\"drag\",c,\"\",I(I({},s.request(t)),{requestAble:e,isRequest:!0}),l),this},requestEnd:function(){return xr(A,u,\"drag\",c,\"End\",I(I({},s.requestEnd()),{requestAble:e,isRequest:!0}),l),this}};return xr(A,u,\"drag\",c,\"Start\",I(I({},s.requestStart(t)),{requestAble:e,isRequest:!0}),l),l?f.request(t).requestEnd():f},n.destroy=function(){this.componentWillUnmount()},n.updateRenderPoses=function(){var e=this.state,t=this.props,n=e.originalBeforeOrigin,r=e.transformOrigin,i=e.allMatrix,o=e.is3d,a=e.pos1,A=e.pos2,s=e.pos3,l=e.pos4,u=e.left,c=e.top,f=t.padding||{},d=f.left,p=void 0===d?0:d,g=f.top,v=void 0===g?0:g,B=f.bottom,m=void 0===B?0:B,b=f.right,w=void 0===b?0:b,E=o?4:3,y=t.groupable?n:h(n,[u,c]);e.renderPoses=[h(a,Xe(i,[-p,-v],r,y,E)),h(A,Xe(i,[w,-v],r,y,E)),h(s,Xe(i,[-p,m],r,y,E)),h(l,Xe(i,[w,m],r,y,E))]},n.checkUpdate=function(){var e=this.props,t=e.target,n=e.container,r=e.parentMoveable,i=this.state,o=i.target,a=i.container;(o||t)&&(this.updateAbles(),(!ke(o,t)||!ke(a,n))&&(this.updateState({target:t,container:n}),r||!n&&!this.controlBox||this.updateRect(\"End\",!1,!1)))},n.triggerEvent=function(e,t){var n=this.props[e];return n&&n(t)},n.useCSS=function(e,t){var n=this.props.customStyledMap,r=e+t;return n[r]||(n[r]=Object(D.a)(e,t)),n[r]},n.unsetAbles=function(){var e=this;this.targetAbles.filter((function(t){return!!t.unset&&(t.unset(e),!0)})).length&&this.forceUpdate()},n.updateAbles=function(e,t){void 0===e&&(e=this.props.ables),void 0===t&&(t=\"\");var n=this.props,r=n.triggerAblesSimultaneously,i=e.filter((function(e){return e&&(e.always||n[e.name])})),o=\"drag\"+t+\"ControlStart\",a=Pe(i,[\"drag\"+t+\"Start\",\"pinch\"+t+\"Start\"],r),A=Pe(i,[o],r);this.enabledAbles=i,this.targetAbles=a,this.controlAbles=A},n.updateState=function(e,t){if(t)this.setState(e);else{var n=this.state;for(var r in e)n[r]=e[r]}},n.getEnabledAbles=function(){var e=this.props;return e.ables.filter((function(t){return t&&e[t.name]}))},n.renderAbles=function(){var e=this,t=this.props.triggerAblesSimultaneously,n={createElement:M.createElement};return function(e,t){var n=[],r={};return e.forEach((function(i,o){var a=t(i,o,e),A=r[a];A||(A=[],r[a]=A,n.push(A)),A.push(i)})),n}(Ke(Pe(this.getEnabledAbles(),[\"render\"],t).map((function(t){return(0,t.render)(e,n)||[]}))).filter((function(e){return e})),(function(e){return e.key})).map((function(e){return e[0]}))},n.updateCheckInput=function(){this.targetGesto&&(this.targetGesto.options.checkInput=this.props.checkInput)},t.defaultProps={target:null,dragTarget:null,container:null,rootContainer:null,origin:!0,edge:!1,parentMoveable:null,wrapperMoveable:null,parentPosition:null,portalContainer:null,ables:[],pinchThreshold:20,dragArea:!1,passDragArea:!1,transformOrigin:\"\",className:\"\",zoom:1,triggerAblesSimultaneously:!1,padding:{},pinchOutside:!0,checkInput:!1,groupable:!1,cspNonce:\"\",translateZ:0,cssStyled:null,customStyledMap:{},props:{}},t}(M.PureComponent),Hr={name:\"groupable\",props:{defaultGroupRotate:Number,defaultGroupOrigin:String,groupable:Boolean},events:{},render:function(e,t){var n=e.props.targets||[];e.moveables=[];var r=e.state,o={left:r.left,top:r.top};return n.map((function(n,r){return t.createElement(Or,{key:\"moveable\"+r,ref:Object(i.d)(e,\"moveables\",r),target:n,origin:!1,cssStyled:e.props.cssStyled,customStyledMap:e.props.customStyledMap,parentMoveable:e,parentPosition:o})}))}},Tr=L(\"clickable\",{props:{},events:{onClick:\"click\",onClickGroup:\"clickGroup\"},always:!0,dragStart:function(){},dragGroupStart:function(e,t){t.datas.inputTarget=t.inputEvent&&t.inputEvent.target},dragEnd:function(e,t){var n=e.state.target,r=t.inputEvent,i=t.inputTarget;if(r&&i&&!t.isDrag&&!e.isMoveableElement(i)){var o=n.contains(i);Re(e,\"onClick\",_e(e,t,{isDouble:t.isDouble,inputTarget:i,isTarget:n===i,containsTarget:o}))}},dragGroupEnd:function(e,t){var n=t.inputEvent,r=t.inputTarget;if(n&&r&&!t.isDrag&&!e.isMoveableElement(r)&&t.datas.inputTarget!==r){var i=e.props.targets,a=i.indexOf(r),A=a>-1,s=!1;-1===a&&(s=(a=Object(o.A)(i,(function(e){return e.contains(r)})))>-1),Re(e,\"onClickGroup\",_e(e,t,{isDouble:t.isDouble,targets:i,inputTarget:r,targetIndex:a,isTarget:A,containsTarget:s}))}}});function Nr(e){var t=e.originalDatas.draggable;return t||(e.originalDatas.draggable={},t=e.originalDatas.draggable),I(I({},e),{datas:t})}var _r=L(\"edgeDraggable\",{dragControlCondition:function(e,t){if(!e.props.edgeDraggable||!t.inputEvent)return!1;var n=t.inputEvent.target;return Object(o.G)(n,te(\"direction\"))&&Object(o.G)(n,te(\"line\"))},dragControlStart:function(e,t){return Sn.dragStart(e,Nr(t))},dragControl:function(e,t){return Sn.drag(e,Nr(t))},dragControlEnd:function(e,t){return Sn.dragEnd(e,Nr(t))},dragGroupControlCondition:function(e,t){if(!e.props.edgeDraggable||!t.inputEvent)return!1;var n=t.inputEvent.target;return Object(o.G)(n,te(\"direction\"))&&Object(o.G)(n,te(\"line\"))},dragGroupControlStart:function(e,t){return Sn.dragGroupStart(e,Nr(t))},dragGroupControl:function(e,t){return Sn.dragGroup(e,Nr(t))},dragGroupControlEnd:function(e,t){return Sn.dragGroupEnd(e,Nr(t))},unset:function(e){e.state.dragInfo=null}}),Mr={name:\"individualGroupable\",props:{individualGroupable:Boolean},events:{}},Rr=[Cr,er,Un,$e,Sn,_r,kn,In,Kn,jn,$n,tr,qn,br,mr,yr,Hr,Mr,Tr,Jn,Qr],Dr=Rr.reduce((function(e,t){return I(I({},e),\"events\"in t?t.events:{})}),{}),Pr=Rr.reduce((function(e,t){return I(I({},e),t.props)}),{}),kr=We(Dr);Object.keys(kr),Object.keys(Pr);function Ir(e,t){return Math.max.apply(Math,e.map((function(e){var n=e[0],r=e[1],i=e[2],o=e[3];return Math.max(n[t],r[t],i[t],o[t])})))}function Kr(e,t){return Math.min.apply(Math,e.map((function(e){var n=e[0],r=e[1],i=e[2],o=e[3];return Math.min(n[t],r[t],i[t],o[t])})))}var Lr=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.differ=new O.a,t.moveables=[],t.transformOrigin=\"50% 50%\",t}k(t,e);var n=t.prototype;return n.updateEvent=function(e){var t=this.state,n=this.props,r=e.dragTarget||t.target,i=n.dragTarget||this.areaElement;r!==i&&(Ne(this,\"targetGesto\"),Ne(this,\"controlGesto\"),t.target=null),t.target||(t.target=this.areaElement,this.controlBox.getElement().style.display=\"block\",this.targetGesto=Fr(this,i,\"Group\"),this.controlGesto=Ur(this,this.controlBox.getElement(),\"controlAbles\",\"GroupControl\"));var o=!ke(e.container,n.container);o&&(t.container=n.container);var a=this.differ.update(n.targets),A=a.added,s=a.changed,l=a.removed;(o||A.length||s.length||l.length)&&this.updateRect()},n.checkUpdate=function(){this.updateAbles()},n.updateRect=function(e,t,n){if(void 0===n&&(n=!0),this.controlBox){this.moveables.forEach((function(t){t.updateRect(e,!1,!1)}));var r=this.state,i=this.props,o=r.target||i.target;(!t||\"\"!==e&&i.updateGroup)&&(this.rotation=i.defaultGroupRotate,this.transformOrigin=i.defaultGroupOrigin||\"50% 50%\",this.scale=[1,1]);var a=this.rotation,A=this.scale,s=function(e,t){if(!e.length)return[0,0,0,0];var n=e.map((function(e){return Oe(e.state)})),r=W,i=W,o=0,a=0,A=He(t,1e-7);if(A%90){var s=A/180*Math.PI,l=Math.tan(s),u=-1/l,c=[J,W],f=[J,W];n.forEach((function(e){e.forEach((function(e){var t=e[1]-l*e[0],n=e[1]-u*e[0];c[0]=Math.max(c[0],t),c[1]=Math.min(c[1],t),f[0]=Math.max(f[0],n),f[1]=Math.min(f[1],n)}))})),c.forEach((function(e){f.forEach((function(t){var n=(t-e)/(l-u),o=l*n+e;r=Math.min(r,n),i=Math.min(i,o)}))}));var d=n.map((function(e){var t=e[0],n=e[1],r=e[2],i=e[3];return[m(t,-s),m(n,-s),m(r,-s),m(i,-s)]}));o=Ir(d,0)-Kr(d,0),a=Ir(d,1)-Kr(d,1)}else if(r=Kr(n,0),i=Kr(n,1),o=Ir(n,0)-r,a=Ir(n,1)-i,A%180){var p=o;o=a,a=p}return[r,i,o,a]}(this.moveables,a),l=s[0],u=s[1],c=s[2],f=s[3],d=\"rotate(\"+a+\"deg) scale(\"+(A[0]>=0?1:-1)+\", \"+(A[1]>=0?1:-1)+\")\";o.style.cssText+=\"left:0px;top:0px; transform-origin: \"+this.transformOrigin+\"; width:\"+c+\"px; height:\"+f+\"px;transform:\"+d,r.width=c,r.height=f;var p=this.getContainer(),v=xe(this.controlBox.getElement(),o,this.controlBox.getElement(),this.getContainer(),this.props.rootContainer||p),B=[v.left,v.top],b=Oe(v),w=b[0],E=b[1],y=b[2],C=b[3],Q=Object(S.c)([w,E,y,C]),x=[Q.minX,Q.minY];v.pos1=g(w,x),v.pos2=g(E,x),v.pos3=g(y,x),v.pos4=g(C,x),v.left=l-v.left+x[0],v.top=u-v.top+x[1],v.origin=g(h(B,v.origin),x),v.beforeOrigin=g(h(B,v.beforeOrigin),x),v.originalBeforeOrigin=h(B,v.originalBeforeOrigin);var F=v.targetClientRect,U=A[0]*A[1]>0?1:-1;F.top+=v.top-r.top,F.left+=v.left-r.left,o.style.transform=\"translate(\"+-x[0]+\"px, \"+-x[1]+\"px) \"+d,this.updateState(I(I({},v),{direction:U,beforeDirection:U}),n)}},n.getRect=function(){return I(I({},e.prototype.getRect.call(this)),{children:this.moveables.map((function(e){return e.getRect()}))})},n.triggerEvent=function(t,n,r){if(r||t.indexOf(\"Group\")>-1)return e.prototype.triggerEvent.call(this,t,n)},n.updateAbles=function(){e.prototype.updateAbles.call(this,K(this.props.ables,[Hr]),\"Group\")},t.defaultProps=I(I({},Or.defaultProps),{transformOrigin:[\"50%\",\"50%\"],groupable:!0,dragArea:!0,keepRatio:!0,targets:[],defaultGroupRotate:0,defaultGroupOrigin:\"50% 50%\"}),t}(Or),zr=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.moveables=[],t}k(t,e);var n=t.prototype;return n.render=function(){var e=this,t=this.props,n=t.cspNonce,r=t.cssStyled,o=t.targets;return Object(M.createElement)(r,{cspNonce:n,ref:Object(i.c)(this,\"controlBox\"),className:te(\"control-box\")},o.map((function(t,n){return Object(M.createElement)(Or,I({key:\"moveable\"+n,ref:Object(i.d)(e,\"moveables\",n)},e.props,{target:t,wrapperMoveable:e}))})))},n.componentDidUpdate=function(){},n.updateRect=function(e,t,n){void 0===n&&(n=!0),this.moveables.forEach((function(r){r.updateRect(e,t,n)}))},n.getRect=function(){return I(I({},e.prototype.getRect.call(this)),{children:this.moveables.map((function(e){return e.getRect()}))})},n.request=function(){return{request:function(){return this},requestEnd:function(){return this}}},n.dragStart=function(){return this},n.hitTest=function(){return 0},n.isInside=function(){return!1},n.isDragging=function(){return!1},n.updateRenderPoses=function(){},n.updateEvent=function(){},n.checkUpdate=function(){},n.triggerEvent=function(){},n.updateAbles=function(){},t}(Or),jr=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.refTargets=[],t.selectorMap={},t}k(t,e);var n=t.prototype;return t.makeStyled=function(){var e={};this.getTotalAbles().forEach((function(t){var n=t.css;n&&n.forEach((function(t){e[t]=!0}))}));var t=Object(o.D)(e).join(\"\\n\");this.defaultStyled=Object(D.a)(\"div\",Object(i.a)(G,V+t))},t.getTotalAbles=function(){return K([er,Hr,Mr,Jn],this.defaultAbles)},n.render=function(){var e=this.constructor;e.defaultStyled||e.makeStyled();var t=this.props,n=t.ables,r=t.props,a=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&\"function\"===typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n}(t,[\"ables\",\"props\"]),A=qe(a.target||a.targets),s=function(e,t){var n=[];return e.forEach((function(e){e&&(Object(o.L)(e)?t[e]&&n.push.apply(n,t[e]):n.push(e))})),n}(A,this.selectorMap);this.refTargets=A;var l=s.length>1,u=K(e.getTotalAbles(),n||[]),c=I(I(I({},a),r||{}),{ables:u,cssStyled:e.defaultStyled,customStyledMap:e.customStyledMap});return l?a.individualGroupable?Object(M.createElement)(zr,I({key:\"individual-group\",ref:Object(i.c)(this,\"moveable\")},c,{target:null,targets:s})):Object(M.createElement)(Lr,I({key:\"group\",ref:Object(i.c)(this,\"moveable\")},c,{target:null,targets:s})):Object(M.createElement)(Or,I({key:\"single\",ref:Object(i.c)(this,\"moveable\")},c,{target:s[0]}))},n.componentDidMount=function(){this.updateRefs()},n.componentDidUpdate=function(){this.updateRefs()},n.updateRefs=function(e){var t=qe(this.props.target||this.props.targets),n=this.refTargets.some((function(e,n){var r=t[n];return!(!e&&!r)&&e!==r})),r=e?{}:this.selectorMap,i={};this.refTargets.forEach((function(e){Object(o.L)(e)&&(r[e]?i[e]=r[e]:(n=!0,i[e]=[].slice.call(document.querySelectorAll(e))))})),this.selectorMap=i,n&&this.forceUpdate()},n.getManager=function(){return this.moveable},t.defaultAbles=[],t.customStyledMap={},t.defaultStyled=null,function(e,t,n,r){var i,o=arguments.length,a=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if(\"object\"===typeof Reflect&&\"function\"===typeof Reflect.decorate)a=Reflect.decorate(e,t,n,r);else for(var A=e.length-1;A>=0;A--)(i=e[A])&&(a=(o<3?i(a):o>3?i(t,n,a):i(t,n))||a);o>3&&a&&Object.defineProperty(t,n,a)}([Object(i.e)(ee)],t.prototype,\"moveable\",void 0),t}(M.PureComponent),Xr=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return k(t,e),t.defaultAbles=Rr,t}(jr);t.a=Xr},function(e,t,n){var r=n(67),i=n(63);e.exports=function(e){return null!=e&&i(e.length)&&!r(e)}},function(e,t,n){\"use strict\";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}n.d(t,\"a\",(function(){return r}))},function(e,t,n){\"use strict\";function r(e,t){for(var n=e.length,r=0;r<n;++r)if(t(e[r],r))return!0;return!1}function i(e,t){for(var n=e.length,r=0;r<n;++r)if(t(e[r],r))return e[r];return null}function o(e,t){try{return new RegExp(e,\"g\").exec(t)}catch(n){return null}}function a(){if(\"undefined\"===typeof navigator||!navigator||!navigator.userAgentData)return!1;var e=navigator.userAgentData,t=e.brands||e.uaList;return!(!t||!t.length)}function A(e){return e.replace(/_/g,\".\")}function s(e,t){var n=null,i=\"-1\";return r(e,(function(e){var r=o(\"(\"+e.test+\")((?:\\\\/|\\\\s|:)([0-9|\\\\.|_]+))?\",t);return!(!r||e.brand)&&(n=e,i=r[3]||\"-1\",e.versionAlias?i=e.versionAlias:e.versionTest&&(i=function(e,t){var n=o(\"(\"+e+\")((?:\\\\/|\\\\s|:)([0-9|\\\\.|_]+))?\",t);return n?n[3]:\"\"}(e.versionTest.toLowerCase(),t)||i),i=A(i),!0)})),{preset:n,version:i}}function l(e,t){return i(e,(function(e){var n=e.brand;return o(\"\"+t.test,n.toLowerCase())}))}n.d(t,\"b\",(function(){return v}));var u=[{test:\"phantomjs\",id:\"phantomjs\"},{test:\"whale\",id:\"whale\"},{test:\"edgios|edge|edg\",id:\"edge\"},{test:\"msie|trident|windows phone\",id:\"ie\",versionTest:\"iemobile|msie|rv\"},{test:\"miuibrowser\",id:\"miui browser\"},{test:\"samsungbrowser\",id:\"samsung internet\"},{test:\"samsung\",id:\"samsung internet\",versionTest:\"version\"},{test:\"chrome|crios\",id:\"chrome\"},{test:\"firefox|fxios\",id:\"firefox\"},{test:\"android\",id:\"android browser\",versionTest:\"version\"},{test:\"safari|iphone|ipad|ipod\",id:\"safari\",versionTest:\"version\"}],c=[{test:\"(?=.*applewebkit/(53[0-7]|5[0-2]|[0-4]))(?=.*\\\\schrome)\",id:\"chrome\"},{test:\"chromium\",id:\"chrome\"},{test:\"whale\",id:\"chrome\",brand:!0}],f=[{test:\"applewebkit\",id:\"webkit\"}],d=[{test:\"(?=(iphone|ipad))(?!(.*version))\",id:\"webview\"},{test:\"(?=(android|iphone|ipad))(?=.*(naver|daum|; wv))\",id:\"webview\"},{test:\"webview\",id:\"webview\"}],p=[{test:\"windows phone\",id:\"windows phone\"},{test:\"windows 2000\",id:\"window\",versionAlias:\"5.0\"},{test:\"windows nt\",id:\"window\"},{test:\"iphone|ipad|ipod\",id:\"ios\",versionTest:\"iphone os|cpu os\"},{test:\"mac os x\",id:\"mac\"},{test:\"android\",id:\"android\"},{test:\"tizen\",id:\"tizen\"},{test:\"webos|web0s\",id:\"webos\"}];function h(e){var t=navigator.userAgentData,n=(t.uaList||t.brands).slice(),o=t.mobile||!1,a=n[0],s={name:a.brand,version:a.version,majorVersion:-1,webkit:!1,webview:r(d,(function(e){return l(n,e)})),chromium:r(c,(function(e){return l(n,e)}))},h={name:\"unknown\",version:\"-1\",majorVersion:-1};if(s.webkit=!s.chromium&&r(f,(function(e){return l(n,e)})),e){var g=e.platform.toLowerCase(),v=i(p,(function(e){return new RegExp(\"\"+e.test,\"g\").exec(g)}));h.name=v?v.id:g,h.version=e.platformVersion}return r(u,(function(t){var r=l(n,t);return!!r&&(s.name=t.id,s.version=e?e.uaFullVersion:r.version,!0)})),\"Linux armv8l\"===navigator.platform?h.name=\"android\":s.webkit&&(h.name=o?\"ios\":\"mac\"),\"ios\"===h.name&&s.webview&&(s.version=\"-1\"),h.version=A(h.version),s.version=A(s.version),h.majorVersion=parseInt(h.version,10),s.majorVersion=parseInt(s.version,10),{browser:s,os:h,isMobile:o,isHints:!0}}function g(e){var t=function(e){var t=e;if(\"undefined\"===typeof t){if(\"undefined\"===typeof navigator||!navigator)return\"\";t=navigator.userAgent||\"\"}return t.toLowerCase()}(e),n=!!/mobi/g.exec(t),r={name:\"unknown\",version:\"-1\",majorVersion:-1,webview:!!s(d,t).preset,chromium:!!s(c,t).preset,webkit:!1},i={name:\"unknown\",version:\"-1\",majorVersion:-1},o=s(u,t),a=o.preset,A=o.version,l=s(p,t),h=l.preset,g=l.version;return r.webkit=!r.chromium&&!!s(f,t).preset,h&&(i.name=h.id,i.version=g,i.majorVersion=parseInt(g,10)),a&&(r.name=a.id,r.version=A,r.webview&&\"ios\"===i.name&&\"safari\"!==r.name&&(r.webview=!1)),r.majorVersion=parseInt(r.version,10),{browser:r,os:i,isMobile:n,isHints:!1}}function v(e){return a()?navigator.userAgentData.getHighEntropyValues([\"architecture\",\"model\",\"platform\",\"platformVersion\",\"uaFullVersion\"]).then((function(t){var n=h(t);return e&&e(n),n})):(e&&e(B()),\"undefined\"!==typeof Promise&&Promise?Promise.resolve(B()):null)}function B(e){return\"undefined\"===typeof e&&a()?h():g(e)}t.a=B},function(e,t,n){\"use strict\";n.d(t,\"a\",(function(){return i}));var r=n(56);function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(\"undefined\"!==typeof Symbol&&Symbol.iterator in Object(e)){var n=[],r=!0,i=!1,o=void 0;try{for(var a,A=e[Symbol.iterator]();!(r=(a=A.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(s){i=!0,o=s}finally{try{r||null==A.return||A.return()}finally{if(i)throw o}}return n}}(e,t)||Object(r.a)(e,t)||function(){throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\")}()}},function(e,t,n){var r=n(21).Symbol;e.exports=r},function(e,t,n){var r=n(82),i=n(139),o=n(32);e.exports=function(e){return o(e)?r(e):i(e)}},function(e,t){e.exports=function(e,t){return e===t||e!==e&&t!==t}},function(e,t,n){var r=n(101),i=n(73);e.exports=function(e,t,n,o){var a=!n;n||(n={});for(var A=-1,s=t.length;++A<s;){var l=t[A],u=o?o(n[l],e[l],l,n,e):void 0;void 0===u&&(u=e[l]),a?i(n,l,u):r(n,l,u)}return n}},function(e,t,n){var r=n(82),i=n(206),o=n(32);e.exports=function(e){return o(e)?r(e,!0):i(e)}},function(e,t,n){\"use strict\";function r(e){if(void 0===e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return e}n.d(t,\"a\",(function(){return r}))},function(e,t,n){\"use strict\";function r(e,t,n,r,i,o,a){try{var A=e[o](a),s=A.value}catch(l){return void n(l)}A.done?t(s):Promise.resolve(s).then(r,i)}function i(e){return function(){var t=this,n=arguments;return new Promise((function(i,o){var a=e.apply(t,n);function A(e){r(a,i,o,A,s,\"next\",e)}function s(e){r(a,i,o,A,s,\"throw\",e)}A(void 0)}))}}n.d(t,\"a\",(function(){return i}))},function(e,t,n){\"use strict\";function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}n.d(t,\"a\",(function(){return r}))},function(e,t,n){\"use strict\";n.d(t,\"b\",(function(){return s}));var r=function(){function e(){this.keys=[],this.values=[]}var t=e.prototype;return t.get=function(e){return this.values[this.keys.indexOf(e)]},t.set=function(e,t){var n=this.keys,r=this.values,i=n.indexOf(e),o=-1===i?n.length:i;n[o]=e,r[o]=t},e}(),i=function(){function e(){this.object={}}var t=e.prototype;return t.get=function(e){return this.object[e]},t.set=function(e,t){this.object[e]=t},e}(),o=\"function\"===typeof Map,a=function(){function e(){}var t=e.prototype;return t.connect=function(e,t){this.prev=e,this.next=t,e&&(e.next=this),t&&(t.prev=this)},t.disconnect=function(){var e=this.prev,t=this.next;e&&(e.next=t),t&&(t.prev=e)},t.getIndex=function(){for(var e=this,t=-1;e;)e=e.prev,++t;return t},e}();var A=function(){function e(e,t,n,r,i,o,a,A){this.prevList=e,this.list=t,this.added=n,this.removed=r,this.changed=i,this.maintained=o,this.changedBeforeAdded=a,this.fixed=A}var t=e.prototype;return Object.defineProperty(t,\"ordered\",{get:function(){return this.cacheOrdered||this.caculateOrdered(),this.cacheOrdered},enumerable:!0,configurable:!0}),Object.defineProperty(t,\"pureChanged\",{get:function(){return this.cachePureChanged||this.caculateOrdered(),this.cachePureChanged},enumerable:!0,configurable:!0}),t.caculateOrdered=function(){var e=function(e,t){var n=[],r=[];return e.forEach((function(e){var t=e[0],i=e[1],o=new a;n[t]=o,r[i]=o})),n.forEach((function(e,t){e.connect(n[t-1])})),e.filter((function(e,n){return!t[n]})).map((function(e,t){var i=e[0],o=e[1];if(i===o)return[0,0];var a=n[i],A=r[o-1],s=a.getIndex();return a.disconnect(),A?a.connect(A,A.next):a.connect(void 0,n[0]),[s,a.getIndex()]}))}(this.changedBeforeAdded,this.fixed),t=this.changed,n=[];this.cacheOrdered=e.filter((function(e,r){var i=e[0],o=e[1],a=t[r],A=a[0],s=a[1];if(i!==o)return n.push([A,s]),!0})),this.cachePureChanged=n},e}();function s(e,t,n){var a=o?Map:n?i:r,s=n||function(e){return e},l=[],u=[],c=[],f=e.map(s),d=t.map(s),p=new a,h=new a,g=[],v=[],B={},m=[],b=0,w=0;return f.forEach((function(e,t){p.set(e,t)})),d.forEach((function(e,t){h.set(e,t)})),f.forEach((function(e,t){var n=h.get(e);\"undefined\"===typeof n?(++w,u.push(t)):B[n]=w})),d.forEach((function(e,t){var n=p.get(e);\"undefined\"===typeof n?(l.push(t),++b):(c.push([n,t]),w=B[t]||0,g.push([n-w,t-b]),v.push(t===n),n!==t&&m.push([n,t]))})),u.reverse(),new A(e,t,l,u,m,c,g,v)}var l=function(){function e(e,t){void 0===e&&(e=[]),this.findKeyCallback=t,this.list=[].slice.call(e)}return e.prototype.update=function(e){var t=[].slice.call(e),n=s(this.list,t,this.findKeyCallback);return this.list=t,n},e}();t.a=l},function(e,t,n){(function(e){var r=n(21),i=n(137),o=t&&!t.nodeType&&t,a=o&&\"object\"==typeof e&&e&&!e.nodeType&&e,A=a&&a.exports===o?r.Buffer:void 0,s=(A?A.isBuffer:void 0)||i;e.exports=s}).call(this,n(60)(e))},function(e,t){e.exports=function(e){return e}},function(e,t,n){var r=n(48),i=n(149),o=n(150),a=n(151),A=n(152),s=n(153);function l(e){var t=this.__data__=new r(e);this.size=t.size}l.prototype.clear=i,l.prototype.delete=o,l.prototype.get=a,l.prototype.has=A,l.prototype.set=s,e.exports=l},function(e,t,n){var r=n(144),i=n(145),o=n(146),a=n(147),A=n(148);function s(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}s.prototype.clear=r,s.prototype.delete=i,s.prototype.get=o,s.prototype.has=a,s.prototype.set=A,e.exports=s},function(e,t,n){var r=n(38);e.exports=function(e,t){for(var n=e.length;n--;)if(r(e[n][0],t))return n;return-1}},function(e,t,n){var r=n(30)(Object,\"create\");e.exports=r},function(e,t,n){var r=n(166);e.exports=function(e,t){var n=e.__data__;return r(t)?n[\"string\"==typeof t?\"string\":\"hash\"]:n.map}},function(e,t,n){var r=n(181),i=n(69),o=n(182),a=n(183),A=n(184),s=n(29),l=n(87),u=l(r),c=l(i),f=l(o),d=l(a),p=l(A),h=s;(r&&\"[object DataView]\"!=h(new r(new ArrayBuffer(1)))||i&&\"[object Map]\"!=h(new i)||o&&\"[object Promise]\"!=h(o.resolve())||a&&\"[object Set]\"!=h(new a)||A&&\"[object WeakMap]\"!=h(new A))&&(h=function(e){var t=s(e),n=\"[object Object]\"==t?e.constructor:void 0,r=n?l(n):\"\";if(r)switch(r){case u:return\"[object DataView]\";case c:return\"[object Map]\";case f:return\"[object Promise]\";case d:return\"[object Set]\";case p:return\"[object WeakMap]\"}return t}),e.exports=h},function(e,t,n){var r=n(29),i=n(22);e.exports=function(e){return\"symbol\"==typeof e||i(e)&&\"[object Symbol]\"==r(e)}},function(e,t,n){var r=n(53);e.exports=function(e){if(\"string\"==typeof e||r(e))return e;var t=e+\"\";return\"0\"==t&&1/e==-1/0?\"-0\":t}},function(e,t,n){\"use strict\";!function e(){if(\"undefined\"!==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&\"function\"===typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE){0;try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(t){console.error(t)}}}(),e.exports=n(122)},function(e,t,n){\"use strict\";n.d(t,\"a\",(function(){return i}));var r=n(43);function i(e,t){if(e){if(\"string\"===typeof e)return Object(r.a)(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return\"Object\"===n&&e.constructor&&(n=e.constructor.name),\"Map\"===n||\"Set\"===n?Array.from(n):\"Arguments\"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Object(r.a)(e,t):void 0}}},function(e,t,n){\"use strict\";var r=n(15),i=n(0),o=function(e,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};var a=function(){return(a=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function A(e){return function(e,t){var n=t[0]-e[0],r=t[1]-e[1],i=Math.atan2(r,n);return i>=0?i:i+2*Math.PI}([e[0].clientX,e[0].clientY],[e[1].clientX,e[1].clientY])/Math.PI*180}function s(e){return e.touches?function(e){for(var t=Math.min(e.length,2),n=[],r=0;r<t;++r)n.push(c(e[r]));return n}(e.touches):[c(e)]}function l(e,t,n){var r=n.length,i=f(e,r),o=i.clientX,a=i.clientY,A=i.originalClientX,s=i.originalClientY,l=f(t,r),u=l.clientX,c=l.clientY,d=f(n,r);return{clientX:A,clientY:s,deltaX:o-u,deltaY:a-c,distX:o-d.clientX,distY:a-d.clientY}}function u(e){return Math.sqrt(Math.pow(e[0].clientX-e[1].clientX,2)+Math.pow(e[0].clientY-e[1].clientY,2))}function c(e){return{clientX:e.clientX,clientY:e.clientY}}function f(e,t){void 0===t&&(t=e.length);for(var n={clientX:0,clientY:0,originalClientX:0,originalClientY:0},r=0;r<t;++r){var i=e[r];n.originalClientX+=\"originalClientX\"in i?i.originalClientX:i.clientX,n.originalClientY+=\"originalClientY\"in i?i.originalClientY:i.clientY,n.clientX+=i.clientX,n.clientY+=i.clientY}return t?{clientX:n.clientX/t,clientY:n.clientY/t,originalClientX:n.originalClientX/t,originalClientY:n.originalClientY/t}:n}var d=function(){function e(e){this.prevClients=[],this.startClients=[],this.movement=0,this.length=0,this.startClients=e,this.prevClients=e,this.length=e.length}var t=e.prototype;return t.addClients=function(e){void 0===e&&(e=this.prevClients);var t=this.getPosition(e),n=t.deltaX,r=t.deltaY;return this.movement+=Math.sqrt(n*n+r*r),this.prevClients=e,t},t.getAngle=function(e){return void 0===e&&(e=this.prevClients),A(e)},t.getRotation=function(e){return void 0===e&&(e=this.prevClients),A(e)-A(this.startClients)},t.getPosition=function(e){return l(e||this.prevClients,this.prevClients,this.startClients)},t.getPositions=function(e){void 0===e&&(e=this.prevClients);var t=this.prevClients;return this.startClients.map((function(n,r){return l([e[r]],[t[r]],[n])}))},t.getMovement=function(e){var t=this.movement;if(!e)return t;var n=f(e,this.length),r=f(this.prevClients,this.length),i=n.clientX-r.clientX,o=n.clientY-r.clientY;return Math.sqrt(i*i+o*o)+t},t.getDistance=function(e){return void 0===e&&(e=this.prevClients),u(e)},t.getScale=function(e){return void 0===e&&(e=this.prevClients),u(e)/u(this.startClients)},t.move=function(e,t){this.startClients.forEach((function(n){n.clientX-=e,n.clientY-=t})),this.prevClients.forEach((function(n){n.clientX-=e,n.clientY-=t}))},e}(),p=[\"textarea\",\"input\"],h=function(e){function t(t,n){void 0===n&&(n={});var r=e.call(this)||this;r.options={},r.flag=!1,r.pinchFlag=!1,r.datas={},r.isDrag=!1,r.isPinch=!1,r.isMouse=!1,r.isTouch=!1,r.clientStores=[],r.targets=[],r.prevTime=0,r.isDouble=!1,r.onDragStart=function(e,t){if(void 0===t&&(t=!0),r.flag||!1!==e.cancelable){var n=r.options,o=n.container,A=n.pinchOutside,l=n.preventRightClick,u=n.preventDefault,c=n.checkInput,f=r.isTouch,h=!r.flag;if(h){var g=document.activeElement,v=e.target,B=v.tagName.toLowerCase(),m=p.indexOf(B)>-1,b=v.isContentEditable;if(m||b){if(c||g===v)return!1;if(g&&b&&g.isContentEditable&&g.contains(v))return!1}else if((u||\"touchstart\"===e.type)&&g){var w=g.tagName;(g.isContentEditable||p.indexOf(w)>-1)&&g.blur()}if(r.clientStores=[new d(s(e))],r.flag=!0,r.isDrag=!1,r.datas={},l&&(3===e.which||2===e.button))return r.initDrag(),!1;!1===r.emit(\"dragStart\",a({datas:r.datas,inputEvent:e,isTrusted:t},r.getCurrentStore().getPosition()))&&r.initDrag(),r.isDouble=Object(i.N)()-r.prevTime<200,r.flag&&u&&e.preventDefault()}if(!r.flag)return!1;var E=0;if(h&&f&&A&&(E=setTimeout((function(){Object(i.q)(o,\"touchstart\",r.onDragStart,{passive:!1})}))),!h&&f&&A&&Object(i.P)(o,\"touchstart\",r.onDragStart),r.flag&&function(e){return e.touches&&e.touches.length>=2}(e)){if(clearTimeout(E),h&&e.touches.length!==e.changedTouches.length)return;r.pinchFlag||r.onPinchStart(e)}}},r.onDrag=function(e,t){if(r.flag){var n=s(e),i=r.moveClients(n,e,!1);(r.pinchFlag||i.deltaX||i.deltaY)&&r.emit(\"drag\",a({},i,{isScroll:!!t,inputEvent:e})),r.pinchFlag&&r.onPinch(e,n),r.getCurrentStore().addClients(n)}},r.onDragEnd=function(e){if(r.flag){var t=r.options,n=t.pinchOutside,o=t.container;r.isTouch&&n&&Object(i.P)(o,\"touchstart\",r.onDragStart),r.flag=!1;var A=r.getCurrentStore().getPosition(),s=Object(i.N)(),l=!r.isDrag&&r.isDouble;r.prevTime=r.isDrag||l?0:s,r.emit(\"dragEnd\",a({datas:r.datas,isDouble:l,isDrag:r.isDrag,inputEvent:e},A)),r.pinchFlag&&r.onPinchEnd(e),r.clientStores=[]}},r.onBlur=function(){r.onDragEnd()};var o=[].concat(t);r.options=a({checkInput:!1,container:o.length>1?window:o[0],preventRightClick:!0,preventDefault:!0,checkWindowBlur:!1,pinchThreshold:0,events:[\"touch\",\"mouse\"]},n);var A=r.options,l=A.container,u=A.events,c=A.checkWindowBlur;if(r.isTouch=u.indexOf(\"touch\")>-1,r.isMouse=u.indexOf(\"mouse\")>-1,r.targets=o,r.isMouse&&(o.forEach((function(e){Object(i.q)(e,\"mousedown\",r.onDragStart)})),Object(i.q)(l,\"mousemove\",r.onDrag),Object(i.q)(l,\"mouseup\",r.onDragEnd),Object(i.q)(l,\"contextmenu\",r.onDragEnd)),c&&Object(i.q)(window,\"blur\",r.onBlur),r.isTouch){var f={passive:!1};o.forEach((function(e){Object(i.q)(e,\"touchstart\",r.onDragStart,f)})),Object(i.q)(l,\"touchmove\",r.onDrag,f),Object(i.q)(l,\"touchend\",r.onDragEnd,f),Object(i.q)(l,\"touchcancel\",r.onDragEnd,f)}return r}!function(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e);var n=t.prototype;return n.getMovement=function(e){return this.getCurrentStore().getMovement(e)+this.clientStores.slice(1).reduce((function(e,t){return e+t.movement}),0)},n.isDragging=function(){return this.isDrag},n.isFlag=function(){return this.flag},n.isPinchFlag=function(){return this.pinchFlag},n.isPinching=function(){return this.isPinch},n.scrollBy=function(e,t,n,r){void 0===r&&(r=!0),this.flag&&(this.clientStores[0].move(e,t),r&&this.onDrag(n,!0))},n.move=function(e,t){var n=e[0],r=e[1],i=this.getCurrentStore().prevClients;return this.moveClients(i.map((function(e){var t=e.clientX,i=e.clientY;return{clientX:t+n,clientY:i+r,originalClientX:t,originalClientY:i}})),t,!0)},n.triggerDragStart=function(e){this.onDragStart(e,!1)},n.setEventDatas=function(e){var t=this.datas;for(var n in e)t[n]=e[n];return this},n.getEventDatas=function(){return this.datas},n.unset=function(){var e=this,t=this.targets,n=this.options.container;this.off(),Object(i.P)(window,\"blur\",this.onBlur),this.isMouse&&(t.forEach((function(t){Object(i.P)(t,\"mousedown\",e.onDragStart)})),Object(i.P)(n,\"mousemove\",this.onDrag),Object(i.P)(n,\"mouseup\",this.onDragEnd),Object(i.P)(n,\"contextmenu\",this.onDragEnd)),this.isTouch&&(t.forEach((function(t){Object(i.P)(t,\"touchstart\",e.onDragStart)})),Object(i.P)(n,\"touchstart\",this.onDragStart),Object(i.P)(n,\"touchmove\",this.onDrag),Object(i.P)(n,\"touchend\",this.onDragEnd),Object(i.P)(n,\"touchcancel\",this.onDragEnd))},n.onPinchStart=function(e){var t=this.options.pinchThreshold;if(!(this.isDrag&&this.getMovement()>t)){var n=new d(s(e));this.pinchFlag=!0,this.clientStores.splice(0,0,n),!1===this.emit(\"pinchStart\",a({datas:this.datas,angle:n.getAngle(),touches:this.getCurrentStore().getPositions()},n.getPosition(),{inputEvent:e}))&&(this.pinchFlag=!1)}},n.onPinch=function(e,t){if(this.flag&&this.pinchFlag&&!(t.length<2)){var n=this.getCurrentStore();this.isPinch=!0,this.emit(\"pinch\",a({datas:this.datas,movement:this.getMovement(t),angle:n.getAngle(t),rotation:n.getRotation(t),touches:n.getPositions(t),scale:n.getScale(t),distance:n.getDistance(t)},n.getPosition(t),{inputEvent:e}))}},n.onPinchEnd=function(e){if(this.pinchFlag){var t=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var n=this.getCurrentStore();this.emit(\"pinchEnd\",a({datas:this.datas,isPinch:t,touches:n.getPositions()},n.getPosition(),{inputEvent:e})),this.isPinch=!1,this.pinchFlag=!1}},n.initDrag=function(){this.clientStores=[],this.pinchFlag=!1,this.flag=!1},n.getCurrentStore=function(){return this.clientStores[0]},n.moveClients=function(e,t,n){var r=this.getCurrentStore()[n?\"addClients\":\"getPosition\"](e);return this.isDrag=!0,a({datas:this.datas},r,{movement:this.getMovement(e),isDrag:this.isDrag,isPinch:this.isPinch,isScroll:!1,inputEvent:t})},t}(r.a);t.a=h},function(e,t,n){var r=n(80),i=n(84);e.exports=function(e,t){return e&&r(e,i(t))}},function(e,t,n){var r=n(136),i=n(22),o=Object.prototype,a=o.hasOwnProperty,A=o.propertyIsEnumerable,s=r(function(){return arguments}())?r:function(e){return i(e)&&a.call(e,\"callee\")&&!A.call(e,\"callee\")};e.exports=s},function(e,t){e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children||(e.children=[]),Object.defineProperty(e,\"loaded\",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,\"id\",{enumerable:!0,get:function(){return e.i}}),e.webpackPolyfill=1),e}},function(e,t){var n=/^(?:0|[1-9]\\d*)$/;e.exports=function(e,t){var r=typeof e;return!!(t=null==t?9007199254740991:t)&&(\"number\"==r||\"symbol\"!=r&&n.test(e))&&e>-1&&e%1==0&&e<t}},function(e,t,n){var r=n(138),i=n(64),o=n(65),a=o&&o.isTypedArray,A=a?i(a):r;e.exports=A},function(e,t){e.exports=function(e){return\"number\"==typeof e&&e>-1&&e%1==0&&e<=9007199254740991}},function(e,t){e.exports=function(e){return function(t){return e(t)}}},function(e,t,n){(function(e){var r=n(79),i=t&&!t.nodeType&&t,o=i&&\"object\"==typeof e&&e&&!e.nodeType&&e,a=o&&o.exports===i&&r.process,A=function(){try{var e=o&&o.require&&o.require(\"util\").types;return e||a&&a.binding&&a.binding(\"util\")}catch(t){}}();e.exports=A}).call(this,n(60)(e))},function(e,t){var n=Object.prototype;e.exports=function(e){var t=e&&e.constructor;return e===(\"function\"==typeof t&&t.prototype||n)}},function(e,t,n){var r=n(29),i=n(20);e.exports=function(e){if(!i(e))return!1;var t=r(e);return\"[object Function]\"==t||\"[object GeneratorFunction]\"==t||\"[object AsyncFunction]\"==t||\"[object Proxy]\"==t}},function(e,t,n){var r=n(83)(Object.getPrototypeOf,Object);e.exports=r},function(e,t,n){var r=n(30)(n(21),\"Map\");e.exports=r},function(e,t,n){var r=n(158),i=n(165),o=n(167),a=n(168),A=n(169);function s(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}s.prototype.clear=r,s.prototype.delete=i,s.prototype.get=o,s.prototype.has=a,s.prototype.set=A,e.exports=s},function(e,t,n){var r=n(180),i=n(94),o=Object.prototype.propertyIsEnumerable,a=Object.getOwnPropertySymbols,A=a?function(e){return null==e?[]:(e=Object(e),r(a(e),(function(t){return o.call(e,t)})))}:i;e.exports=A},function(e,t,n){var r=n(17),i=n(53),o=/\\.|\\[(?:[^[\\]]*|([\"'])(?:(?!\\1)[^\\\\]|\\\\.)*?\\1)\\]/,a=/^\\w*$/;e.exports=function(e,t){if(r(e))return!1;var n=typeof e;return!(\"number\"!=n&&\"symbol\"!=n&&\"boolean\"!=n&&null!=e&&!i(e))||(a.test(e)||!o.test(e)||null!=t&&e in Object(t))}},function(e,t,n){var r=n(102);e.exports=function(e,t,n){\"__proto__\"==t&&r?r(e,t,{configurable:!0,enumerable:!0,value:n,writable:!0}):e[t]=n}},function(e,t,n){var r=n(90);e.exports=function(e){var t=new e.constructor(e.byteLength);return new r(t).set(new r(e)),t}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Checkboard=void 0;var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=n(1),o=s(i),a=s(n(7)),A=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}(n(227));function s(e){return e&&e.__esModule?e:{default:e}}var l=t.Checkboard=function(e){var t=e.white,n=e.grey,s=e.size,l=e.renderers,u=e.borderRadius,c=e.boxShadow,f=e.children,d=(0,a.default)({default:{grid:{borderRadius:u,boxShadow:c,absolute:\"0px 0px 0px 0px\",background:\"url(\"+A.get(t,n,s,l.canvas)+\") center left\"}}});return(0,i.isValidElement)(f)?o.default.cloneElement(f,r({},f.props,{style:r({},f.props.style,d.grid)})):o.default.createElement(\"div\",{style:d.grid})};l.defaultProps={size:8,white:\"transparent\",grey:\"rgba(0,0,0,.08)\",renderers:{}},t.default=l},,function(e,t,n){\"use strict\";var r=n(1);var i=function(e,t){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};var o=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={scrollPos:0},t.width=0,t.height=0,t}!function(e,t){function n(){this.constructor=e}i(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e);var n=t.prototype;return n.render=function(){return Object(r.createElement)(\"canvas\",{ref:(e=this,t=\"canvasElement\",function(n){n&&(e[t]=n)}),style:this.props.style});var e,t},n.componentDidMount=function(){var e=this.canvasElement.getContext(\"2d\");this.canvasContext=e,this.resize()},n.componentDidUpdate=function(){this.resize()},n.scroll=function(e){this.draw(e)},n.resize=function(){var e=this.canvasElement,t=this.props,n=t.width,r=t.height,i=t.scrollPos;this.width=n||e.offsetWidth,this.height=r||e.offsetHeight,e.width=2*this.width,e.height=2*this.height,this.draw(i)},n.draw=function(e){void 0===e&&(e=this.state.scrollPos);var t=this.props,n=t.unit,r=t.zoom,i=t.type,o=t.backgroundColor,a=t.lineColor,A=t.textColor,s=t.direction,l=t.textFormat,u=this.width,c=this.height;this.state.scrollPos=e;var f=this.canvasContext,d=\"horizontal\"===i,p=\"start\"===s;\"transparent\"===o?f.clearRect(0,0,2*u,2*c):(f.rect(0,0,2*u,2*c),f.fillStyle=o,f.fill()),f.save(),f.scale(2,2),f.strokeStyle=a,f.lineWidth=1,f.font=\"10px sans-serif\",f.fillStyle=A,p&&(f.textBaseline=\"top\"),f.translate(.5,0),f.beginPath();for(var h=d?u:c,g=r*n,v=Math.floor(e*r/g),B=Math.ceil((e*r+h)/g)-v,m=0;m<B;++m){var b=((m+v)*n-e)*r;if(b>=-g&&b<h){var w=d?[b+3,p?17:c-17]:[p?17:u-17,b-4],E=w[0],y=w[1],C=\"\"+(m+v)*n;l&&(C=l((m+v)*n)),d?f.fillText(C,E,y):(f.save(),f.translate(E,y),f.rotate(-Math.PI/2),f.fillText(C,0,0),f.restore())}for(var Q=0;Q<10;++Q){var x=b+Q/10*g;if(!(x<0||x>=h)){var F=0===Q?d?c:u:Q%2===0?10:7,U=d?[x,p?0:c-F]:[p?0:u-F,x],S=U[0],O=U[1],H=d?[S,O+F]:[S+F,O],T=H[0],N=H[1];f.moveTo(S,O),f.lineTo(T,N)}}}f.stroke(),f.restore()},t.defaultProps={type:\"horizontal\",zoom:1,width:0,height:0,unit:50,direction:\"end\",style:{width:\"100%\",height:\"100%\"},backgroundColor:\"#333333\",textColor:\"#ffffff\",lineColor:\"#777777\"},t}(r.PureComponent);function a(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];return t.map((function(t){return t.split(\" \").map((function(t){return t?\"\"+e+t:\"\"})).join(\" \")})).join(\" \")}function A(e,t){return function(n){n&&(e[t]=n)}}function s(e,t,n){return function(r){r&&(e[t][n]=r)}}var l=n(15),u=(\"undefined\"!==typeof document&&document,['\"',\"'\",'\\\\\"',\"\\\\'\"]);function c(e,t,n,r){for(var i=n;i<r;++i){var o=t[i].trim();if(o===e)return i;var a=i;if(\"(\"===o?a=c(\")\",t,i+1,r):u.indexOf(o)>-1&&(a=c(o,t,i+1,r)),-1===a)break;i=a}return-1}function f(e,t){for(var n=new RegExp(\"(\\\\s*\"+(t||\",\")+\"\\\\s*|\\\\(|\\\\)|\\\"|'|\\\\\\\\\\\"|\\\\\\\\'|\\\\s+)\",\"g\"),r=e.split(n).filter(Boolean),i=r.length,o=[],a=[],A=0;A<i;++A){var s=r[A].trim(),l=A;if(\"(\"===s)l=c(\")\",r,A+1,i);else{if(\")\"===s)throw new Error(\"invalid format\");if(u.indexOf(s)>-1)l=c(s,r,A+1,i);else if(s===t){a.length&&(o.push(a.join(\"\")),a=[]);continue}}-1===l&&(l=i-1),a.push(r.slice(A,l+1).join(\"\")),A=l}return a.length&&o.push(a.join(\"\")),o}function d(e){return f(e,\",\")}function p(e){var t=/([^(]*)\\(([\\s\\S]*)\\)([\\s\\S]*)/g.exec(e);return!t||t.length<4?{}:{prefix:t[1],value:t[2],suffix:t[3]}}function h(e){var t=/^([^\\d|e|\\-|\\+]*)((?:\\d|\\.|-|e-|e\\+)+)(\\S*)$/g.exec(e);if(!t)return{prefix:\"\",unit:\"\",value:NaN};var n=t[1],r=t[2];return{prefix:n,unit:t[3],value:parseFloat(r)}}function g(){return Date.now?Date.now():(new Date).getTime()}function v(e,t){e.classList?e.classList.add(t):e.className+=\" \"+t}function B(e,t){if(e.classList)e.classList.remove(t);else{var n=new RegExp(\"(\\\\s|^)\"+t+\"(\\\\s|$)\");e.className=e.className.replace(n,\" \")}}function m(e,t,n,r){e.addEventListener(t,n,r)}function b(e,t,n){e.removeEventListener(t,n)}var w=function(e,t){return(w=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};var E=function(){return(E=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function y(e){return function(e,t){var n=t[0]-e[0],r=t[1]-e[1],i=Math.atan2(r,n);return i>=0?i:i+2*Math.PI}([e[0].clientX,e[0].clientY],[e[1].clientX,e[1].clientY])/Math.PI*180}function C(e){return e.touches?function(e){for(var t=Math.min(e.length,2),n=[],r=0;r<t;++r)n.push(F(e[r]));return n}(e.touches):[F(e)]}function Q(e,t,n){var r=n.length,i=U(e,r),o=i.clientX,a=i.clientY,A=i.originalClientX,s=i.originalClientY,l=U(t,r),u=l.clientX,c=l.clientY,f=U(n,r);return{clientX:A,clientY:s,deltaX:o-u,deltaY:a-c,distX:o-f.clientX,distY:a-f.clientY}}function x(e){return Math.sqrt(Math.pow(e[0].clientX-e[1].clientX,2)+Math.pow(e[0].clientY-e[1].clientY,2))}function F(e){return{clientX:e.clientX,clientY:e.clientY}}function U(e,t){void 0===t&&(t=e.length);for(var n={clientX:0,clientY:0,originalClientX:0,originalClientY:0},r=0;r<t;++r){var i=e[r];n.originalClientX+=\"originalClientX\"in i?i.originalClientX:i.clientX,n.originalClientY+=\"originalClientY\"in i?i.originalClientY:i.clientY,n.clientX+=i.clientX,n.clientY+=i.clientY}return t?{clientX:n.clientX/t,clientY:n.clientY/t,originalClientX:n.originalClientX/t,originalClientY:n.originalClientY/t}:n}var S=function(){function e(e){this.prevClients=[],this.startClients=[],this.movement=0,this.length=0,this.startClients=e,this.prevClients=e,this.length=e.length}var t=e.prototype;return t.addClients=function(e){void 0===e&&(e=this.prevClients);var t=this.getPosition(e),n=t.deltaX,r=t.deltaY;return this.movement+=Math.sqrt(n*n+r*r),this.prevClients=e,t},t.getAngle=function(e){return void 0===e&&(e=this.prevClients),y(e)},t.getRotation=function(e){return void 0===e&&(e=this.prevClients),y(e)-y(this.startClients)},t.getPosition=function(e){return Q(e||this.prevClients,this.prevClients,this.startClients)},t.getPositions=function(e){void 0===e&&(e=this.prevClients);var t=this.prevClients;return this.startClients.map((function(n,r){return Q([e[r]],[t[r]],[n])}))},t.getMovement=function(e){var t=this.movement;if(!e)return t;var n=U(e,this.length),r=U(this.prevClients,this.length),i=n.clientX-r.clientX,o=n.clientY-r.clientY;return Math.sqrt(i*i+o*o)+t},t.getDistance=function(e){return void 0===e&&(e=this.prevClients),x(e)},t.getScale=function(e){return void 0===e&&(e=this.prevClients),x(e)/x(this.startClients)},t.move=function(e,t){this.startClients.forEach((function(n){n.clientX-=e,n.clientY-=t})),this.prevClients.forEach((function(n){n.clientX-=e,n.clientY-=t}))},e}(),O=[\"textarea\",\"input\"],H=function(e){function t(t,n){void 0===n&&(n={});var r=e.call(this)||this;r.options={},r.flag=!1,r.pinchFlag=!1,r.datas={},r.isDrag=!1,r.isPinch=!1,r.isMouse=!1,r.isTouch=!1,r.clientStores=[],r.targets=[],r.prevTime=0,r.isDouble=!1,r.onDragStart=function(e,t){if(void 0===t&&(t=!0),r.flag||!1!==e.cancelable){var n=r.options,i=n.container,o=n.pinchOutside,a=n.preventRightClick,A=n.preventDefault,s=n.checkInput,l=r.isTouch,u=!r.flag;if(u){var c=document.activeElement,f=e.target,d=f.tagName.toLowerCase(),p=O.indexOf(d)>-1,h=f.isContentEditable;if(p||h){if(s||c===f)return!1;if(c&&h&&c.isContentEditable&&c.contains(f))return!1}else if((A||\"touchstart\"===e.type)&&c){var v=c.tagName;(c.isContentEditable||O.indexOf(v)>-1)&&c.blur()}if(r.clientStores=[new S(C(e))],r.flag=!0,r.isDrag=!1,r.datas={},a&&(3===e.which||2===e.button))return r.initDrag(),!1;!1===r.emit(\"dragStart\",E({datas:r.datas,inputEvent:e,isTrusted:t},r.getCurrentStore().getPosition()))&&r.initDrag(),r.isDouble=g()-r.prevTime<200,r.flag&&A&&e.preventDefault()}if(!r.flag)return!1;var B=0;if(u&&l&&o&&(B=setTimeout((function(){m(i,\"touchstart\",r.onDragStart,{passive:!1})}))),!u&&l&&o&&b(i,\"touchstart\",r.onDragStart),r.flag&&function(e){return e.touches&&e.touches.length>=2}(e)){if(clearTimeout(B),u&&e.touches.length!==e.changedTouches.length)return;r.pinchFlag||r.onPinchStart(e)}}},r.onDrag=function(e,t){if(r.flag){var n=C(e),i=r.moveClients(n,e,!1);(r.pinchFlag||i.deltaX||i.deltaY)&&r.emit(\"drag\",E({},i,{isScroll:!!t,inputEvent:e})),r.pinchFlag&&r.onPinch(e,n),r.getCurrentStore().addClients(n)}},r.onDragEnd=function(e){if(r.flag){var t=r.options,n=t.pinchOutside,i=t.container;r.isTouch&&n&&b(i,\"touchstart\",r.onDragStart),r.flag=!1;var o=r.getCurrentStore().getPosition(),a=g(),A=!r.isDrag&&r.isDouble;r.prevTime=r.isDrag||A?0:a,r.emit(\"dragEnd\",E({datas:r.datas,isDouble:A,isDrag:r.isDrag,inputEvent:e},o)),r.pinchFlag&&r.onPinchEnd(e),r.clientStores=[]}},r.onBlur=function(){r.onDragEnd()};var i=[].concat(t);r.options=E({checkInput:!1,container:i.length>1?window:i[0],preventRightClick:!0,preventDefault:!0,checkWindowBlur:!1,pinchThreshold:0,events:[\"touch\",\"mouse\"]},n);var o=r.options,a=o.container,A=o.events,s=o.checkWindowBlur;if(r.isTouch=A.indexOf(\"touch\")>-1,r.isMouse=A.indexOf(\"mouse\")>-1,r.targets=i,r.isMouse&&(i.forEach((function(e){m(e,\"mousedown\",r.onDragStart)})),m(a,\"mousemove\",r.onDrag),m(a,\"mouseup\",r.onDragEnd),m(a,\"contextmenu\",r.onDragEnd)),s&&m(window,\"blur\",r.onBlur),r.isTouch){var l={passive:!1};i.forEach((function(e){m(e,\"touchstart\",r.onDragStart,l)})),m(a,\"touchmove\",r.onDrag,l),m(a,\"touchend\",r.onDragEnd,l),m(a,\"touchcancel\",r.onDragEnd,l)}return r}!function(e,t){function n(){this.constructor=e}w(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e);var n=t.prototype;return n.getMovement=function(e){return this.getCurrentStore().getMovement(e)+this.clientStores.slice(1).reduce((function(e,t){return e+t.movement}),0)},n.isDragging=function(){return this.isDrag},n.isFlag=function(){return this.flag},n.isPinchFlag=function(){return this.pinchFlag},n.isPinching=function(){return this.isPinch},n.scrollBy=function(e,t,n,r){void 0===r&&(r=!0),this.flag&&(this.clientStores[0].move(e,t),r&&this.onDrag(n,!0))},n.move=function(e,t){var n=e[0],r=e[1],i=this.getCurrentStore().prevClients;return this.moveClients(i.map((function(e){var t=e.clientX,i=e.clientY;return{clientX:t+n,clientY:i+r,originalClientX:t,originalClientY:i}})),t,!0)},n.triggerDragStart=function(e){this.onDragStart(e,!1)},n.setEventDatas=function(e){var t=this.datas;for(var n in e)t[n]=e[n];return this},n.getEventDatas=function(){return this.datas},n.unset=function(){var e=this,t=this.targets,n=this.options.container;this.off(),b(window,\"blur\",this.onBlur),this.isMouse&&(t.forEach((function(t){b(t,\"mousedown\",e.onDragStart)})),b(n,\"mousemove\",this.onDrag),b(n,\"mouseup\",this.onDragEnd),b(n,\"contextmenu\",this.onDragEnd)),this.isTouch&&(t.forEach((function(t){b(t,\"touchstart\",e.onDragStart)})),b(n,\"touchstart\",this.onDragStart),b(n,\"touchmove\",this.onDrag),b(n,\"touchend\",this.onDragEnd),b(n,\"touchcancel\",this.onDragEnd))},n.onPinchStart=function(e){var t=this.options.pinchThreshold;if(!(this.isDrag&&this.getMovement()>t)){var n=new S(C(e));this.pinchFlag=!0,this.clientStores.splice(0,0,n),!1===this.emit(\"pinchStart\",E({datas:this.datas,angle:n.getAngle(),touches:this.getCurrentStore().getPositions()},n.getPosition(),{inputEvent:e}))&&(this.pinchFlag=!1)}},n.onPinch=function(e,t){if(this.flag&&this.pinchFlag&&!(t.length<2)){var n=this.getCurrentStore();this.isPinch=!0,this.emit(\"pinch\",E({datas:this.datas,movement:this.getMovement(t),angle:n.getAngle(t),rotation:n.getRotation(t),touches:n.getPositions(t),scale:n.getScale(t),distance:n.getDistance(t)},n.getPosition(t),{inputEvent:e}))}},n.onPinchEnd=function(e){if(this.pinchFlag){var t=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var n=this.getCurrentStore();this.emit(\"pinchEnd\",E({datas:this.datas,isPinch:t,touches:n.getPositions()},n.getPosition(),{inputEvent:e})),this.isPinch=!1,this.pinchFlag=!1}},n.initDrag=function(){this.clientStores=[],this.pinchFlag=!1,this.flag=!1},n.getCurrentStore=function(){return this.clientStores[0]},n.moveClients=function(e,t,n){var r=this.getCurrentStore()[n?\"addClients\":\"getPosition\"](e);return this.isDrag=!0,E({datas:this.datas},r,{movement:this.getMovement(e),isDrag:this.isDrag,isPinch:this.isPinch,isScroll:!1,inputEvent:t})},t}(l.a),T=n(9),N=n(8);function _(e){return function(e){var t=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];return e.forEach((function(e){var n=e.matrixFunction,r=e.functionValue;n&&(t=n(t,r))})),t}(function(e){return(n=e,Array.isArray(n)?e:(t=e,f(t,\"\"))).map((function(e){var t=p(e),n=t.prefix,r=t.value,i=null,o=n,a=\"\";if(\"translate\"===n||\"translateX\"===n||\"translate3d\"===n){var A=d(r).map((function(e){return parseFloat(e)})),s=A[0],l=A[1],u=void 0===l?0:l,c=A[2],f=void 0===c?0:c;i=N.i,a=[s,u,f]}else if(\"translateY\"===n){u=parseFloat(r);i=N.i,a=[0,u,0]}else if(\"translateZ\"===n){f=parseFloat(r);i=N.i,a=[0,0,f]}else if(\"scale\"===n||\"scale3d\"===n){var g=d(r).map((function(e){return parseFloat(e)})),v=g[0],B=g[1],m=void 0===B?v:B,b=g[2],w=void 0===b?1:b;i=N.h,a=[v,m,w]}else if(\"scaleX\"===n){v=parseFloat(r);i=N.h,a=[v,1,1]}else if(\"scaleY\"===n){m=parseFloat(r);i=N.h,a=[1,m,1]}else if(\"scaleZ\"===n){w=parseFloat(r);i=N.h,a=[1,1,w]}else if(\"rotate\"===n||\"rotateZ\"===n||\"rotateX\"===n||\"rotateY\"===n){var E=h(r),y=E.unit,C=E.value,Q=\"rad\"===y?C:C*Math.PI/180;\"rotate\"===n||\"rotateZ\"===n?(o=\"rotateZ\",i=N.g):\"rotateX\"===n?i=N.e:\"rotateY\"===n&&(i=N.f),a=Q}else if(\"matrix3d\"===n)i=N.d,a=d(r).map((function(e){return parseFloat(e)}));else if(\"matrix\"===n){var x=d(r).map((function(e){return parseFloat(e)}));i=N.d,a=[x[0],x[1],0,0,x[2],x[3],0,0,0,0,1,0,x[4],x[5],0,1]}else o=\"\";return{name:n,functionName:o,value:r,matrixFunction:i,functionValue:a}}));var t;var n}(e))}function M(e,t){var n=Object(N.a)(e,[t[0],t[1]||0,t[2]||0,1],4),r=n[3]||1;return[n[0]/r,n[1]/r,n[2]/r]}var R=function(e,t){return(R=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};var D=function(){return(D=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function P(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return a.apply(void 0,[\"scena-\"].concat(e))}P(\"ruler\");var k=P(\"guide\",\"adder\"),I=P(\"guides\"),K=P(\"guide\"),L=P(\"dragging\"),z=P(\"display-drag\"),j=function(e,t){return t.replace(/([^}{]*){/gm,(function(t,n){return n.replace(/\\.([^{,\\s\\d.]+)/g,\".\"+e+\"$1\")+\"{\"}))}(\"scena-\",'\\n{\\n    position: relative;\\n}\\ncanvas {\\n    position: relative;\\n}\\n.guide-origin {\\n    position: absolute;\\n    width: 1px;\\n    height: 1px;\\n    top: 0;\\n    left: 0;\\n    opacity: 0;\\n}\\n.guides {\\n    position: absolute;\\n    top: 0;\\n    left: 0;\\n    will-change: transform;\\n    z-index: 2000;\\n}\\n.display-drag {\\n    position: absolute;\\n    will-change: transform;\\n    z-index: 2000;\\n    font-weight: bold;\\n    font-size: 12px;\\n    display: none;\\n    left: 20px;\\n    top: -20px;\\n    color: #f33;\\n}\\n:host.horizontal .guides {\\n    width: 100%;\\n    height: 0;\\n    top: 30px;\\n}\\n:host.vertical .guides {\\n    height: 100%;\\n    width: 0;\\n    left: 30px;\\n}\\n.guide {\\n    position: absolute;\\n    background: #f33;\\n    z-index: 2;\\n}\\n.guide.dragging:before {\\n    position: absolute;\\n    content: \"\";\\n    width: 100%;\\n    height: 100%;\\n    top: 50%;\\n    left: 50%;\\n    transform: translate(-50%, -50%);\\n}\\n:host.horizontal .guide {\\n    width: 100%;\\n    height: 1px;\\n    cursor: row-resize;\\n}\\n:host.vertical .guide {\\n    width: 1px;\\n    height: 100%;\\n    cursor: col-resize;\\n}\\n.mobile :host.horizontal .guide {\\n    transform: scale(1, 2);\\n}\\n.mobile :host.vertical .guide {\\n    transform: scale(2, 1);\\n}\\n:host.horizontal .guide:before {\\n    height: 20px;\\n}\\n:host.vertical .guide:before {\\n    width: 20px;\\n}\\n.adder {\\n    display: none;\\n}\\n.adder.dragging {\\n    display: block;\\n}\\n'),X=Object(T.a)(\"div\",j),G=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={guides:[]},t.scrollPos=0,t.guideElements=[],t.onDragStart=function(e){var n=e.datas,r=e.inputEvent,i=t.props.onDragStart;v(n.target,L),t.onDrag(e),i(D({},e,{dragElement:n.target})),r.stopPropagation(),r.preventDefault()},t.onDrag=function(e){var n=t.movePos(e);return t.props.onDrag(D({},e,{dragElement:e.datas.target})),n},t.onDragEnd=function(e){var n=e.datas,r=e.isDouble,i=e.distX,o=e.distY,a=t.movePos(e),A=t.state.guides,s=t.props,l=s.setGuides,u=s.onChangeGuides,c=s.zoom,f=s.displayDragPos,d=Math.round(a/c);if(f&&(t.displayElement.style.cssText+=\"display: none;\"),B(n.target,L),t.props.onDragEnd(D({},e,{dragElement:n.target})),n.fromRuler)a>=t.scrollPos&&A.indexOf(d)<0&&t.setState({guides:A.concat([d])},(function(){u({guides:t.state.guides,distX:i,distY:o}),l(t.state.guides)}));else{var p=n.target.getAttribute(\"data-index\");if(r||d<t.scrollPos)A.splice(p,1);else{if(A.indexOf(d)>-1)return;A[p]=d}t.setState({guides:A.slice()},(function(){var e=t.state.guides;l(e),u({distX:i,distY:o,guides:e})}))}},t}!function(e,t){function n(){this.constructor=e}R(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e);var n=t.prototype;return n.render=function(){var e=this.props,t=e.className,n=e.type,i=e.width,a=e.height,s=e.unit,l=e.zoom,u=e.style,c=e.rulerStyle,f=e.backgroundColor,d=e.lineColor,p=e.textColor,h=e.direction,g=e.textFormat,v=e.displayDragPos,B=e.cspNonce,m=this.getTranslateName();return Object(r.createElement)(X,{ref:A(this,\"manager\"),cspNonce:B,className:P(\"manager\",n)+\" \"+t,style:u},Object(r.createElement)(\"div\",{className:P(\"guide-origin\"),ref:A(this,\"originElement\")}),Object(r.createElement)(o,{ref:A(this,\"ruler\"),type:n,width:i,height:a,unit:s,zoom:l,backgroundColor:f,lineColor:d,style:c,textColor:p,direction:h,textFormat:g}),Object(r.createElement)(\"div\",{className:I,ref:A(this,\"guidesElement\"),style:{transform:m+\"(\"+-this.scrollPos*l+\"px)\"}},v&&Object(r.createElement)(\"div\",{className:z,ref:A(this,\"displayElement\")}),Object(r.createElement)(\"div\",{className:k,ref:A(this,\"adderElement\")}),this.renderGuides()))},n.renderGuides=function(){var e=this,t=this.props,n=t.type,i=t.zoom,o=t.showGuides,a=this.getTranslateName(),A=this.state.guides;if(this.guideElements=[],o)return A.map((function(t,o){return Object(r.createElement)(\"div\",{className:P(\"guide\",n),ref:s(e,\"guideElements\",o),key:o,\"data-index\":o,\"data-pos\":t,style:{transform:a+\"(\"+t*i+\"px)\"}})}))},n.componentDidMount=function(){var e=this;this.gesto=new H(this.manager.getElement(),{container:document.body}).on(\"dragStart\",(function(t){var n,r,i=t.inputEvent.target,o=t.datas,a=e.ruler.canvasElement,A=e.guidesElement,s=\"horizontal\"===e.props.type,l=e.originElement.getBoundingClientRect(),u=function(e,t){void 0===t&&(t=document.body);for(var n=e,r=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];n;){var i=getComputedStyle(n).transform;if(r=Object(N.d)(_(i),r),n===t)break;n=n.parentElement}return(r=Object(N.c)(r,4))[12]=0,r[13]=0,r[14]=0,r}(e.manager.getElement()),c=M(u,[t.clientX-l.left,t.clientY-l.top]);if(c[0]-=A.offsetLeft,c[1]-=A.offsetTop,c[s?1:0]+=e.scrollPos*e.props.zoom,o.offsetPos=c,o.matrix=u,i===a)o.fromRuler=!0,o.target=e.adderElement;else{if(r=K,!((n=i).classList?n.classList.contains(r):n.className.match(new RegExp(\"(\\\\s|^)\"+r+\"(\\\\s|$)\"))))return t.stop(),!1;o.target=i}e.onDragStart(t)})).on(\"drag\",this.onDrag).on(\"dragEnd\",this.onDragEnd),this.setState({guides:this.props.defaultGuides||[]})},n.componentWillUnmount=function(){this.gesto.unset()},n.componentDidUpdate=function(e){e.defaultGuides!==this.props.defaultGuides&&this.setState({guides:this.props.defaultGuides||[]})},n.loadGuides=function(e){this.setState({guides:e})},n.getGuides=function(){return this.state.guides},n.scrollGuides=function(e){var t=this.props.zoom,n=this.guidesElement;this.scrollPos=e,n.style.transform=this.getTranslateName()+\"(\"+-e*t+\"px)\";var r=this.state.guides;this.guideElements.forEach((function(t,n){t&&(t.style.display=-e+r[n]<0?\"none\":\"block\")}))},n.resize=function(){this.ruler.resize()},n.scroll=function(e){this.ruler.scroll(e)},n.movePos=function(e){var t=e.datas,n=e.distX,r=e.distY,i=this.props,o=i.type,a=i.zoom,A=i.snaps,s=i.snapThreshold,l=i.displayDragPos,u=i.dragPosFormat,c=\"horizontal\"===o,f=M(t.matrix,[n,r]),d=t.offsetPos,p=f[0]+d[0],h=f[1]+d[1],g=Math.round(c?h:p),v=Math.round(g/a),B=A.slice().sort((function(e,t){return Math.abs(v-e)-Math.abs(v-t)}));if(B.length&&Math.abs(B[0]-v)<s&&(g=(v=B[0])*a),l){var m=\"horizontal\"===o?[p,g]:[g,h];this.displayElement.style.cssText+=\"display: block;transform: translate(-50%, -50%) translate(\"+m.map((function(e){return e+\"px\"})).join(\", \")+\")\",this.displayElement.innerHTML=\"\"+u(v)}return t.target.setAttribute(\"data-pos\",v),t.target.style.transform=this.getTranslateName()+\"(\"+g+\"px)\",g},n.getTranslateName=function(){return\"horizontal\"===this.props.type?\"translateY\":\"translateX\"},t.defaultProps={className:\"\",type:\"horizontal\",setGuides:function(){},zoom:1,style:{width:\"100%\",height:\"100%\"},snapThreshold:5,snaps:[],onChangeGuides:function(){},onDragStart:function(){},onDrag:function(){},onDragEnd:function(){},displayDragPos:!1,dragPosFormat:function(e){return e},defaultGuides:[],showGuides:!0},t}(r.PureComponent);t.a=G},function(e,t,n){\"use strict\";var r=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;function a(e){if(null===e||void 0===e)throw new TypeError(\"Object.assign cannot be called with null or undefined\");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String(\"abc\");if(e[5]=\"de\",\"5\"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t[\"_\"+String.fromCharCode(n)]=n;if(\"0123456789\"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(\"\"))return!1;var r={};return\"abcdefghijklmnopqrst\".split(\"\").forEach((function(e){r[e]=e})),\"abcdefghijklmnopqrst\"===Object.keys(Object.assign({},r)).join(\"\")}catch(i){return!1}}()?Object.assign:function(e,t){for(var n,A,s=a(e),l=1;l<arguments.length;l++){for(var u in n=Object(arguments[l]))i.call(n,u)&&(s[u]=n[u]);if(r){A=r(n);for(var c=0;c<A.length;c++)o.call(n,A[c])&&(s[A[c]]=n[A[c]])}}return s}},function(e,t,n){(function(t){var n=\"object\"==typeof t&&t&&t.Object===Object&&t;e.exports=n}).call(this,n(131))},function(e,t,n){var r=n(81),i=n(37);e.exports=function(e,t){return e&&r(e,t,i)}},function(e,t,n){var r=n(134)();e.exports=r},function(e,t,n){var r=n(135),i=n(59),o=n(17),a=n(45),A=n(61),s=n(62),l=Object.prototype.hasOwnProperty;e.exports=function(e,t){var n=o(e),u=!n&&i(e),c=!n&&!u&&a(e),f=!n&&!u&&!c&&s(e),d=n||u||c||f,p=d?r(e.length,String):[],h=p.length;for(var g in e)!t&&!l.call(e,g)||d&&(\"length\"==g||c&&(\"offset\"==g||\"parent\"==g)||f&&(\"buffer\"==g||\"byteLength\"==g||\"byteOffset\"==g)||A(g,h))||p.push(g);return p}},function(e,t){e.exports=function(e,t){return function(n){return e(t(n))}}},function(e,t,n){var r=n(46);e.exports=function(e){return\"function\"==typeof e?e:r}},function(e,t,n){var r=n(29),i=n(68),o=n(22),a=Function.prototype,A=Object.prototype,s=a.toString,l=A.hasOwnProperty,u=s.call(Object);e.exports=function(e){if(!o(e)||\"[object Object]\"!=r(e))return!1;var t=i(e);if(null===t)return!0;var n=l.call(t,\"constructor\")&&t.constructor;return\"function\"==typeof n&&n instanceof n&&s.call(n)==u}},function(e,t){e.exports=function(e,t){for(var n=-1,r=null==e?0:e.length,i=Array(r);++n<r;)i[n]=t(e[n],n,e);return i}},function(e,t){var n=Function.prototype.toString;e.exports=function(e){if(null!=e){try{return n.call(e)}catch(t){}try{return e+\"\"}catch(t){}}return\"\"}},function(e,t,n){var r=n(170),i=n(22);e.exports=function e(t,n,o,a,A){return t===n||(null==t||null==n||!i(t)&&!i(n)?t!==t&&n!==n:r(t,n,o,a,e,A))}},function(e,t,n){var r=n(171),i=n(174),o=n(175);e.exports=function(e,t,n,a,A,s){var l=1&n,u=e.length,c=t.length;if(u!=c&&!(l&&c>u))return!1;var f=s.get(e),d=s.get(t);if(f&&d)return f==t&&d==e;var p=-1,h=!0,g=2&n?new r:void 0;for(s.set(e,t),s.set(t,e);++p<u;){var v=e[p],B=t[p];if(a)var m=l?a(B,v,p,t,e,s):a(v,B,p,e,t,s);if(void 0!==m){if(m)continue;h=!1;break}if(g){if(!i(t,(function(e,t){if(!o(g,t)&&(v===e||A(v,e,n,a,s)))return g.push(t)}))){h=!1;break}}else if(v!==B&&!A(v,B,n,a,s)){h=!1;break}}return s.delete(e),s.delete(t),h}},function(e,t,n){var r=n(21).Uint8Array;e.exports=r},function(e,t,n){var r=n(92),i=n(71),o=n(37);e.exports=function(e){return r(e,o,i)}},function(e,t,n){var r=n(93),i=n(17);e.exports=function(e,t,n){var o=t(e);return i(e)?o:r(o,n(e))}},function(e,t){e.exports=function(e,t){for(var n=-1,r=t.length,i=e.length;++n<r;)e[i+n]=t[n];return e}},function(e,t){e.exports=function(){return[]}},function(e,t,n){var r=n(20);e.exports=function(e){return e===e&&!r(e)}},function(e,t){e.exports=function(e,t){return function(n){return null!=n&&(n[e]===t&&(void 0!==t||e in Object(n)))}}},function(e,t,n){var r=n(98),i=n(54);e.exports=function(e,t){for(var n=0,o=(t=r(t,e)).length;null!=e&&n<o;)e=e[i(t[n++])];return n&&n==o?e:void 0}},function(e,t,n){var r=n(17),i=n(72),o=n(188),a=n(191);e.exports=function(e,t){return r(e)?e:i(e,t)?[e]:o(a(e))}},function(e,t,n){var r=n(80),i=n(200)(r);e.exports=i},function(e,t){e.exports=function(e,t){for(var n=-1,r=null==e?0:e.length;++n<r&&!1!==t(e[n],n,e););return e}},function(e,t,n){var r=n(73),i=n(38),o=Object.prototype.hasOwnProperty;e.exports=function(e,t,n){var a=e[t];o.call(e,t)&&i(a,n)&&(void 0!==n||t in e)||r(e,t,n)}},function(e,t,n){var r=n(30),i=function(){try{var e=r(Object,\"defineProperty\");return e({},\"\",{}),e}catch(t){}}();e.exports=i},function(e,t,n){(function(e){var r=n(21),i=t&&!t.nodeType&&t,o=i&&\"object\"==typeof e&&e&&!e.nodeType&&e,a=o&&o.exports===i?r.Buffer:void 0,A=a?a.allocUnsafe:void 0;e.exports=function(e,t){if(t)return e.slice();var n=e.length,r=A?A(n):new e.constructor(n);return e.copy(r),r}}).call(this,n(60)(e))},function(e,t){e.exports=function(e,t){var n=-1,r=e.length;for(t||(t=Array(r));++n<r;)t[n]=e[n];return t}},function(e,t,n){var r=n(93),i=n(68),o=n(71),a=n(94),A=Object.getOwnPropertySymbols?function(e){for(var t=[];e;)r(t,o(e)),e=i(e);return t}:a;e.exports=A},function(e,t,n){var r=n(74);e.exports=function(e,t){var n=t?r(e.buffer):e.buffer;return new e.constructor(n,e.byteOffset,e.length)}},function(e,t,n){var r=n(216),i=n(68),o=n(66);e.exports=function(e){return\"function\"!=typeof e.constructor||o(e)?{}:r(i(e))}},function(e,t,n){var r=n(73),i=n(38);e.exports=function(e,t,n){(void 0!==n&&!i(e[t],n)||void 0===n&&!(t in e))&&r(e,t,n)}},function(e,t){e.exports=function(e,t){if((\"constructor\"!==t||\"function\"!==typeof e[t])&&\"__proto__\"!=t)return e[t]}},function(e,t,n){var r=n(20),i=n(249),o=n(250),a=Math.max,A=Math.min;e.exports=function(e,t,n){var s,l,u,c,f,d,p=0,h=!1,g=!1,v=!0;if(\"function\"!=typeof e)throw new TypeError(\"Expected a function\");function B(t){var n=s,r=l;return s=l=void 0,p=t,c=e.apply(r,n)}function m(e){return p=e,f=setTimeout(w,t),h?B(e):c}function b(e){var n=e-d;return void 0===d||n>=t||n<0||g&&e-p>=u}function w(){var e=i();if(b(e))return E(e);f=setTimeout(w,function(e){var n=t-(e-d);return g?A(n,u-(e-p)):n}(e))}function E(e){return f=void 0,v&&s?B(e):(s=l=void 0,c)}function y(){var e=i(),n=b(e);if(s=arguments,l=this,d=e,n){if(void 0===f)return m(d);if(g)return clearTimeout(f),f=setTimeout(w,t),B(d)}return void 0===f&&(f=setTimeout(w,t)),c}return t=o(t)||0,r(n)&&(h=!!n.leading,u=(g=\"maxWait\"in n)?a(o(n.maxWait)||0,t):u,v=\"trailing\"in n?!!n.trailing:v),y.cancel=function(){void 0!==f&&clearTimeout(f),p=0,s=d=l=f=void 0},y.flush=function(){return void 0===f?c:E(i())},y}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.ColorWrap=void 0;var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,\"value\"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=n(1),a=l(o),A=l(n(110)),s=l(n(23));function l(e){return e&&e.__esModule?e:{default:e}}var u=t.ColorWrap=function(e){var t=function(t){function n(e){!function(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}(this,n);var t=function(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!==typeof t&&\"function\"!==typeof t?e:t}(this,(n.__proto__||Object.getPrototypeOf(n)).call(this));return t.handleChange=function(e,n){if(s.default.simpleCheckForValidColor(e)){var r=s.default.toState(e,e.h||t.state.oldHue);t.setState(r),t.props.onChangeComplete&&t.debounce(t.props.onChangeComplete,r,n),t.props.onChange&&t.props.onChange(r,n)}},t.handleSwatchHover=function(e,n){if(s.default.simpleCheckForValidColor(e)){var r=s.default.toState(e,e.h||t.state.oldHue);t.props.onSwatchHover&&t.props.onSwatchHover(r,n)}},t.state=r({},s.default.toState(e.color,0)),t.debounce=(0,A.default)((function(e,t,n){e(t,n)}),100),t}return function(e,t){if(\"function\"!==typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(n,t),i(n,[{key:\"render\",value:function(){var t={};return this.props.onSwatchHover&&(t.onSwatchHover=this.handleSwatchHover),a.default.createElement(e,r({},this.props,this.state,{onChange:this.handleChange},t))}}],[{key:\"getDerivedStateFromProps\",value:function(e,t){return r({},s.default.toState(e.color,t.oldHue))}}]),n}(o.PureComponent||o.Component);return t.propTypes=r({},e.propTypes),t.defaultProps=r({},e.defaultProps,{color:{h:250,s:.5,l:.2,a:1}}),t};t.default=u},function(e,t,n){\"use strict\";n.r(t),n.d(t,\"red\",(function(){return r})),n.d(t,\"pink\",(function(){return i})),n.d(t,\"purple\",(function(){return o})),n.d(t,\"deepPurple\",(function(){return a})),n.d(t,\"indigo\",(function(){return A})),n.d(t,\"blue\",(function(){return s})),n.d(t,\"lightBlue\",(function(){return l})),n.d(t,\"cyan\",(function(){return u})),n.d(t,\"teal\",(function(){return c})),n.d(t,\"green\",(function(){return f})),n.d(t,\"lightGreen\",(function(){return d})),n.d(t,\"lime\",(function(){return p})),n.d(t,\"yellow\",(function(){return h})),n.d(t,\"amber\",(function(){return g})),n.d(t,\"orange\",(function(){return v})),n.d(t,\"deepOrange\",(function(){return B})),n.d(t,\"brown\",(function(){return m})),n.d(t,\"grey\",(function(){return b})),n.d(t,\"blueGrey\",(function(){return w})),n.d(t,\"darkText\",(function(){return E})),n.d(t,\"lightText\",(function(){return y})),n.d(t,\"darkIcons\",(function(){return C})),n.d(t,\"lightIcons\",(function(){return Q})),n.d(t,\"white\",(function(){return x})),n.d(t,\"black\",(function(){return F}));var r={50:\"#ffebee\",100:\"#ffcdd2\",200:\"#ef9a9a\",300:\"#e57373\",400:\"#ef5350\",500:\"#f44336\",600:\"#e53935\",700:\"#d32f2f\",800:\"#c62828\",900:\"#b71c1c\",a100:\"#ff8a80\",a200:\"#ff5252\",a400:\"#ff1744\",a700:\"#d50000\"},i={50:\"#fce4ec\",100:\"#f8bbd0\",200:\"#f48fb1\",300:\"#f06292\",400:\"#ec407a\",500:\"#e91e63\",600:\"#d81b60\",700:\"#c2185b\",800:\"#ad1457\",900:\"#880e4f\",a100:\"#ff80ab\",a200:\"#ff4081\",a400:\"#f50057\",a700:\"#c51162\"},o={50:\"#f3e5f5\",100:\"#e1bee7\",200:\"#ce93d8\",300:\"#ba68c8\",400:\"#ab47bc\",500:\"#9c27b0\",600:\"#8e24aa\",700:\"#7b1fa2\",800:\"#6a1b9a\",900:\"#4a148c\",a100:\"#ea80fc\",a200:\"#e040fb\",a400:\"#d500f9\",a700:\"#aa00ff\"},a={50:\"#ede7f6\",100:\"#d1c4e9\",200:\"#b39ddb\",300:\"#9575cd\",400:\"#7e57c2\",500:\"#673ab7\",600:\"#5e35b1\",700:\"#512da8\",800:\"#4527a0\",900:\"#311b92\",a100:\"#b388ff\",a200:\"#7c4dff\",a400:\"#651fff\",a700:\"#6200ea\"},A={50:\"#e8eaf6\",100:\"#c5cae9\",200:\"#9fa8da\",300:\"#7986cb\",400:\"#5c6bc0\",500:\"#3f51b5\",600:\"#3949ab\",700:\"#303f9f\",800:\"#283593\",900:\"#1a237e\",a100:\"#8c9eff\",a200:\"#536dfe\",a400:\"#3d5afe\",a700:\"#304ffe\"},s={50:\"#e3f2fd\",100:\"#bbdefb\",200:\"#90caf9\",300:\"#64b5f6\",400:\"#42a5f5\",500:\"#2196f3\",600:\"#1e88e5\",700:\"#1976d2\",800:\"#1565c0\",900:\"#0d47a1\",a100:\"#82b1ff\",a200:\"#448aff\",a400:\"#2979ff\",a700:\"#2962ff\"},l={50:\"#e1f5fe\",100:\"#b3e5fc\",200:\"#81d4fa\",300:\"#4fc3f7\",400:\"#29b6f6\",500:\"#03a9f4\",600:\"#039be5\",700:\"#0288d1\",800:\"#0277bd\",900:\"#01579b\",a100:\"#80d8ff\",a200:\"#40c4ff\",a400:\"#00b0ff\",a700:\"#0091ea\"},u={50:\"#e0f7fa\",100:\"#b2ebf2\",200:\"#80deea\",300:\"#4dd0e1\",400:\"#26c6da\",500:\"#00bcd4\",600:\"#00acc1\",700:\"#0097a7\",800:\"#00838f\",900:\"#006064\",a100:\"#84ffff\",a200:\"#18ffff\",a400:\"#00e5ff\",a700:\"#00b8d4\"},c={50:\"#e0f2f1\",100:\"#b2dfdb\",200:\"#80cbc4\",300:\"#4db6ac\",400:\"#26a69a\",500:\"#009688\",600:\"#00897b\",700:\"#00796b\",800:\"#00695c\",900:\"#004d40\",a100:\"#a7ffeb\",a200:\"#64ffda\",a400:\"#1de9b6\",a700:\"#00bfa5\"},f={50:\"#e8f5e9\",100:\"#c8e6c9\",200:\"#a5d6a7\",300:\"#81c784\",400:\"#66bb6a\",500:\"#4caf50\",600:\"#43a047\",700:\"#388e3c\",800:\"#2e7d32\",900:\"#1b5e20\",a100:\"#b9f6ca\",a200:\"#69f0ae\",a400:\"#00e676\",a700:\"#00c853\"},d={50:\"#f1f8e9\",100:\"#dcedc8\",200:\"#c5e1a5\",300:\"#aed581\",400:\"#9ccc65\",500:\"#8bc34a\",600:\"#7cb342\",700:\"#689f38\",800:\"#558b2f\",900:\"#33691e\",a100:\"#ccff90\",a200:\"#b2ff59\",a400:\"#76ff03\",a700:\"#64dd17\"},p={50:\"#f9fbe7\",100:\"#f0f4c3\",200:\"#e6ee9c\",300:\"#dce775\",400:\"#d4e157\",500:\"#cddc39\",600:\"#c0ca33\",700:\"#afb42b\",800:\"#9e9d24\",900:\"#827717\",a100:\"#f4ff81\",a200:\"#eeff41\",a400:\"#c6ff00\",a700:\"#aeea00\"},h={50:\"#fffde7\",100:\"#fff9c4\",200:\"#fff59d\",300:\"#fff176\",400:\"#ffee58\",500:\"#ffeb3b\",600:\"#fdd835\",700:\"#fbc02d\",800:\"#f9a825\",900:\"#f57f17\",a100:\"#ffff8d\",a200:\"#ffff00\",a400:\"#ffea00\",a700:\"#ffd600\"},g={50:\"#fff8e1\",100:\"#ffecb3\",200:\"#ffe082\",300:\"#ffd54f\",400:\"#ffca28\",500:\"#ffc107\",600:\"#ffb300\",700:\"#ffa000\",800:\"#ff8f00\",900:\"#ff6f00\",a100:\"#ffe57f\",a200:\"#ffd740\",a400:\"#ffc400\",a700:\"#ffab00\"},v={50:\"#fff3e0\",100:\"#ffe0b2\",200:\"#ffcc80\",300:\"#ffb74d\",400:\"#ffa726\",500:\"#ff9800\",600:\"#fb8c00\",700:\"#f57c00\",800:\"#ef6c00\",900:\"#e65100\",a100:\"#ffd180\",a200:\"#ffab40\",a400:\"#ff9100\",a700:\"#ff6d00\"},B={50:\"#fbe9e7\",100:\"#ffccbc\",200:\"#ffab91\",300:\"#ff8a65\",400:\"#ff7043\",500:\"#ff5722\",600:\"#f4511e\",700:\"#e64a19\",800:\"#d84315\",900:\"#bf360c\",a100:\"#ff9e80\",a200:\"#ff6e40\",a400:\"#ff3d00\",a700:\"#dd2c00\"},m={50:\"#efebe9\",100:\"#d7ccc8\",200:\"#bcaaa4\",300:\"#a1887f\",400:\"#8d6e63\",500:\"#795548\",600:\"#6d4c41\",700:\"#5d4037\",800:\"#4e342e\",900:\"#3e2723\"},b={50:\"#fafafa\",100:\"#f5f5f5\",200:\"#eeeeee\",300:\"#e0e0e0\",400:\"#bdbdbd\",500:\"#9e9e9e\",600:\"#757575\",700:\"#616161\",800:\"#424242\",900:\"#212121\"},w={50:\"#eceff1\",100:\"#cfd8dc\",200:\"#b0bec5\",300:\"#90a4ae\",400:\"#78909c\",500:\"#607d8b\",600:\"#546e7a\",700:\"#455a64\",800:\"#37474f\",900:\"#263238\"},E={primary:\"rgba(0, 0, 0, 0.87)\",secondary:\"rgba(0, 0, 0, 0.54)\",disabled:\"rgba(0, 0, 0, 0.38)\",dividers:\"rgba(0, 0, 0, 0.12)\"},y={primary:\"rgba(255, 255, 255, 1)\",secondary:\"rgba(255, 255, 255, 0.7)\",disabled:\"rgba(255, 255, 255, 0.5)\",dividers:\"rgba(255, 255, 255, 0.12)\"},C={active:\"rgba(0, 0, 0, 0.54)\",inactive:\"rgba(0, 0, 0, 0.38)\"},Q={active:\"rgba(255, 255, 255, 1)\",inactive:\"rgba(255, 255, 255, 0.5)\"},x=\"#ffffff\",F=\"#000000\";t.default={red:r,pink:i,purple:o,deepPurple:a,indigo:A,blue:s,lightBlue:l,cyan:u,teal:c,green:f,lightGreen:d,lime:p,yellow:h,amber:g,orange:v,deepOrange:B,brown:m,grey:b,blueGrey:w,darkText:E,lightText:y,darkIcons:C,lightIcons:Q,white:x,black:F}},,function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.CustomPicker=t.TwitterPicker=t.SwatchesPicker=t.SliderPicker=t.SketchPicker=t.PhotoshopPicker=t.MaterialPicker=t.HuePicker=t.GithubPicker=t.CompactPicker=t.ChromePicker=t.default=t.CirclePicker=t.BlockPicker=t.AlphaPicker=void 0;var r=n(128);Object.defineProperty(t,\"AlphaPicker\",{enumerable:!0,get:function(){return B(r).default}});var i=n(258);Object.defineProperty(t,\"BlockPicker\",{enumerable:!0,get:function(){return B(i).default}});var o=n(260);Object.defineProperty(t,\"CirclePicker\",{enumerable:!0,get:function(){return B(o).default}});var a=n(262);Object.defineProperty(t,\"ChromePicker\",{enumerable:!0,get:function(){return B(a).default}});var A=n(268);Object.defineProperty(t,\"CompactPicker\",{enumerable:!0,get:function(){return B(A).default}});var s=n(271);Object.defineProperty(t,\"GithubPicker\",{enumerable:!0,get:function(){return B(s).default}});var l=n(273);Object.defineProperty(t,\"HuePicker\",{enumerable:!0,get:function(){return B(l).default}});var u=n(275);Object.defineProperty(t,\"MaterialPicker\",{enumerable:!0,get:function(){return B(u).default}});var c=n(276);Object.defineProperty(t,\"PhotoshopPicker\",{enumerable:!0,get:function(){return B(c).default}});var f=n(282);Object.defineProperty(t,\"SketchPicker\",{enumerable:!0,get:function(){return B(f).default}});var d=n(285);Object.defineProperty(t,\"SliderPicker\",{enumerable:!0,get:function(){return B(d).default}});var p=n(289);Object.defineProperty(t,\"SwatchesPicker\",{enumerable:!0,get:function(){return B(p).default}});var h=n(293);Object.defineProperty(t,\"TwitterPicker\",{enumerable:!0,get:function(){return B(h).default}});var g=n(111);Object.defineProperty(t,\"CustomPicker\",{enumerable:!0,get:function(){return B(g).default}});var v=B(a);function B(e){return e&&e.__esModule?e:{default:e}}t.default=v.default},function(e,t,n){e.exports=function(){\"use strict\";var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(t,n)};function t(t,n){function r(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}var n=function(){return(n=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function r(e,t,n,r){return new(n||(n=Promise))((function(i,o){function a(e){try{s(r.next(e))}catch(t){o(t)}}function A(e){try{s(r.throw(e))}catch(t){o(t)}}function s(e){e.done?i(e.value):new n((function(t){t(e.value)})).then(a,A)}s((r=r.apply(e,t||[])).next())}))}function i(e,t){var n,r,i,o,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:A(0),throw:A(1),return:A(2)},\"function\"===typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function A(o){return function(A){return function(o){if(n)throw new TypeError(\"Generator is already executing.\");for(;a;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(i=(i=a.trys).length>0&&i[i.length-1])&&(6===o[0]||2===o[0])){a=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){a.label=o[1];break}if(6===o[0]&&a.label<i[1]){a.label=i[1],i=o;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(o);break}i[2]&&a.ops.pop(),a.trys.pop();continue}o=t.call(e,a)}catch(A){o=[6,A],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,A])}}}for(var o=function(){function e(e,t,n,r){this.left=e,this.top=t,this.width=n,this.height=r}return e.prototype.add=function(t,n,r,i){return new e(this.left+t,this.top+n,this.width+r,this.height+i)},e.fromClientRect=function(t){return new e(t.left,t.top,t.width,t.height)},e}(),a=function(e){return o.fromClientRect(e.getBoundingClientRect())},A=function(e){for(var t=[],n=0,r=e.length;n<r;){var i=e.charCodeAt(n++);if(i>=55296&&i<=56319&&n<r){var o=e.charCodeAt(n++);56320===(64512&o)?t.push(((1023&i)<<10)+(1023&o)+65536):(t.push(i),n--)}else t.push(i)}return t},s=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];if(String.fromCodePoint)return String.fromCodePoint.apply(String,e);var n=e.length;if(!n)return\"\";for(var r=[],i=-1,o=\"\";++i<n;){var a=e[i];a<=65535?r.push(a):(a-=65536,r.push(55296+(a>>10),a%1024+56320)),(i+1===n||r.length>16384)&&(o+=String.fromCharCode.apply(String,r),r.length=0)}return o},l=\"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/\",u=\"undefined\"===typeof Uint8Array?[]:new Uint8Array(256),c=0;c<l.length;c++)u[l.charCodeAt(c)]=c;var f,d=function(e,t,n){return e.slice?e.slice(t,n):new Uint16Array(Array.prototype.slice.call(e,t,n))},p=function(){function e(e,t,n,r,i,o){this.initialValue=e,this.errorValue=t,this.highStart=n,this.highValueIndex=r,this.index=i,this.data=o}return e.prototype.get=function(e){var t;if(e>=0){if(e<55296||e>56319&&e<=65535)return t=((t=this.index[e>>5])<<2)+(31&e),this.data[t];if(e<=65535)return t=((t=this.index[2048+(e-55296>>5)])<<2)+(31&e),this.data[t];if(e<this.highStart)return t=2080+(e>>11),t=this.index[t],t+=e>>5&63,t=((t=this.index[t])<<2)+(31&e),this.data[t];if(e<=1114111)return this.data[this.highValueIndex]}return this.errorValue},e}(),h=10,g=13,v=15,B=17,m=18,b=19,w=20,E=21,y=22,C=24,Q=25,x=26,F=27,U=28,S=30,O=32,H=33,T=34,N=35,_=37,M=38,R=39,D=40,P=42,k=function(e){var t,n,r,i=function(e){var t,n,r,i,o,a=.75*e.length,A=e.length,s=0;\"=\"===e[e.length-1]&&(a--,\"=\"===e[e.length-2]&&a--);var l=\"undefined\"!==typeof ArrayBuffer&&\"undefined\"!==typeof Uint8Array&&\"undefined\"!==typeof Uint8Array.prototype.slice?new ArrayBuffer(a):new Array(a),c=Array.isArray(l)?l:new Uint8Array(l);for(t=0;t<A;t+=4)n=u[e.charCodeAt(t)],r=u[e.charCodeAt(t+1)],i=u[e.charCodeAt(t+2)],o=u[e.charCodeAt(t+3)],c[s++]=n<<2|r>>4,c[s++]=(15&r)<<4|i>>2,c[s++]=(3&i)<<6|63&o;return l}(e),o=Array.isArray(i)?function(e){for(var t=e.length,n=[],r=0;r<t;r+=4)n.push(e[r+3]<<24|e[r+2]<<16|e[r+1]<<8|e[r]);return n}(i):new Uint32Array(i),a=Array.isArray(i)?function(e){for(var t=e.length,n=[],r=0;r<t;r+=2)n.push(e[r+1]<<8|e[r]);return n}(i):new Uint16Array(i),A=d(a,12,o[4]/2),s=2===o[5]?d(a,(24+o[4])/2):(t=o,n=Math.ceil((24+o[4])/4),t.slice?t.slice(n,r):new Uint32Array(Array.prototype.slice.call(t,n,r)));return new p(o[0],o[1],o[2],o[3],A,s)}(\"KwAAAAAAAAAACA4AIDoAAPAfAAACAAAAAAAIABAAGABAAEgAUABYAF4AZgBeAGYAYABoAHAAeABeAGYAfACEAIAAiACQAJgAoACoAK0AtQC9AMUAXgBmAF4AZgBeAGYAzQDVAF4AZgDRANkA3gDmAOwA9AD8AAQBDAEUARoBIgGAAIgAJwEvATcBPwFFAU0BTAFUAVwBZAFsAXMBewGDATAAiwGTAZsBogGkAawBtAG8AcIBygHSAdoB4AHoAfAB+AH+AQYCDgIWAv4BHgImAi4CNgI+AkUCTQJTAlsCYwJrAnECeQKBAk0CiQKRApkCoQKoArACuALAAsQCzAIwANQC3ALkAjAA7AL0AvwCAQMJAxADGAMwACADJgMuAzYDPgOAAEYDSgNSA1IDUgNaA1oDYANiA2IDgACAAGoDgAByA3YDfgOAAIQDgACKA5IDmgOAAIAAogOqA4AAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAK8DtwOAAIAAvwPHA88D1wPfAyAD5wPsA/QD/AOAAIAABAQMBBIEgAAWBB4EJgQuBDMEIAM7BEEEXgBJBCADUQRZBGEEaQQwADAAcQQ+AXkEgQSJBJEEgACYBIAAoASoBK8EtwQwAL8ExQSAAIAAgACAAIAAgACgAM0EXgBeAF4AXgBeAF4AXgBeANUEXgDZBOEEXgDpBPEE+QQBBQkFEQUZBSEFKQUxBTUFPQVFBUwFVAVcBV4AYwVeAGsFcwV7BYMFiwWSBV4AmgWgBacFXgBeAF4AXgBeAKsFXgCyBbEFugW7BcIFwgXIBcIFwgXQBdQF3AXkBesF8wX7BQMGCwYTBhsGIwYrBjMGOwZeAD8GRwZNBl4AVAZbBl4AXgBeAF4AXgBeAF4AXgBeAF4AXgBeAGMGXgBqBnEGXgBeAF4AXgBeAF4AXgBeAF4AXgB5BoAG4wSGBo4GkwaAAIADHgR5AF4AXgBeAJsGgABGA4AAowarBrMGswagALsGwwbLBjAA0wbaBtoG3QbaBtoG2gbaBtoG2gblBusG8wb7BgMHCwcTBxsHCwcjBysHMAc1BzUHOgdCB9oGSgdSB1oHYAfaBloHaAfaBlIH2gbaBtoG2gbaBtoG2gbaBjUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHbQdeAF4ANQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQd1B30HNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1B4MH2gaKB68EgACAAIAAgACAAIAAgACAAI8HlwdeAJ8HpweAAIAArwe3B14AXgC/B8UHygcwANAH2AfgB4AA6AfwBz4B+AcACFwBCAgPCBcIogEYAR8IJwiAAC8INwg/CCADRwhPCFcIXwhnCEoDGgSAAIAAgABvCHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIfQh3CHgIeQh6CHsIfAh9CHcIeAh5CHoIewh8CH0Idwh4CHkIegh7CHwIhAiLCI4IMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwAJYIlgiWCJYIlgiWCJYIlgiWCJYIlgiWCJYIlgiWCJYIlgiWCJYIlgiWCJYIlgiWCJYIlgiWCJYIlgiWCJYIlggwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAANQc1BzUHNQc1BzUHNQc1BzUHNQc1B54INQc1B6II2gaqCLIIugiAAIAAvgjGCIAAgACAAIAAgACAAIAAgACAAIAAywiHAYAA0wiAANkI3QjlCO0I9Aj8CIAAgACAAAIJCgkSCRoJIgknCTYHLwk3CZYIlgiWCJYIlgiWCJYIlgiWCJYIlgiWCJYIlgiWCJYIlgiWCJYIlgiWCJYIlgiWCJYIlgiWCJYIlgiWCJYIlgiAAIAAAAFAAXgBeAGAAcABeAHwAQACQAKAArQC9AJ4AXgBeAE0A3gBRAN4A7AD8AMwBGgEAAKcBNwEFAUwBXAF4QkhCmEKnArcCgAHHAsABz4LAAcABwAHAAd+C6ABoAG+C/4LAAcABwAHAAc+DF4MAAcAB54M3gweDV4Nng3eDaABoAGgAaABoAGgAaABoAGgAaABoAGgAaABoAGgAaABoAGgAaABoAEeDqABVg6WDqABoQ6gAaABoAHXDvcONw/3DvcO9w73DvcO9w73DvcO9w73DvcO9w73DvcO9w73DvcO9w73DvcO9w73DvcO9w73DvcO9w73DvcO9w73DncPAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcABwAHAAcAB7cPPwlGCU4JMACAAIAAgABWCV4JYQmAAGkJcAl4CXwJgAkwADAAMAAwAIgJgACLCZMJgACZCZ8JowmrCYAAswkwAF4AXgB8AIAAuwkABMMJyQmAAM4JgADVCTAAMAAwADAAgACAAIAAgACAAIAAgACAAIAAqwYWBNkIMAAwADAAMADdCeAJ6AnuCR4E9gkwAP4JBQoNCjAAMACAABUK0wiAAB0KJAosCjQKgAAwADwKQwqAAEsKvQmdCVMKWwowADAAgACAALcEMACAAGMKgABrCjAAMAAwADAAMAAwADAAMAAwADAAMAAeBDAAMAAwADAAMAAwADAAMAAwADAAMAAwAIkEPQFzCnoKiQSCCooKkAqJBJgKoAqkCokEGAGsCrQKvArBCjAAMADJCtEKFQHZCuEK/gHpCvEKMAAwADAAMACAAIwE+QowAIAAPwEBCzAAMAAwADAAMACAAAkLEQswAIAAPwEZCyELgAAOCCkLMAAxCzkLMAAwADAAMAAwADAAXgBeAEELMAAwADAAMAAwADAAMAAwAEkLTQtVC4AAXAtkC4AAiQkwADAAMAAwADAAMAAwADAAbAtxC3kLgAuFC4sLMAAwAJMLlwufCzAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAApwswADAAMACAAIAAgACvC4AAgACAAIAAgACAALcLMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAvwuAAMcLgACAAIAAgACAAIAAyguAAIAAgACAAIAA0QswADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAANkLgACAAIAA4AswADAAMAAwADAAMAAwADAAMAAwADAAMAAwAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACJCR4E6AswADAAhwHwC4AA+AsADAgMEAwwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMACAAIAAGAwdDCUMMAAwAC0MNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQw1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHPQwwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADUHNQc1BzUHNQc1BzUHNQc2BzAAMAA5DDUHNQc1BzUHNQc1BzUHNQc1BzUHNQdFDDAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAgACAAIAATQxSDFoMMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwAF4AXgBeAF4AXgBeAF4AYgxeAGoMXgBxDHkMfwxeAIUMXgBeAI0MMAAwADAAMAAwAF4AXgCVDJ0MMAAwADAAMABeAF4ApQxeAKsMswy7DF4Awgy9DMoMXgBeAF4AXgBeAF4AXgBeAF4AXgDRDNkMeQBqCeAM3Ax8AOYM7Az0DPgMXgBeAF4AXgBeAF4AXgBeAF4AXgBeAF4AXgBeAF4AXgCgAAANoAAHDQ4NFg0wADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAeDSYNMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwAIAAgACAAIAAgACAAC4NMABeAF4ANg0wADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwAD4NRg1ODVYNXg1mDTAAbQ0wADAAMAAwADAAMAAwADAA2gbaBtoG2gbaBtoG2gbaBnUNeg3CBYANwgWFDdoGjA3aBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gaUDZwNpA2oDdoG2gawDbcNvw3HDdoG2gbPDdYN3A3fDeYN2gbsDfMN2gbaBvoN/g3aBgYODg7aBl4AXgBeABYOXgBeACUG2gYeDl4AJA5eACwO2w3aBtoGMQ45DtoG2gbaBtoGQQ7aBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gZJDjUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1B1EO2gY1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQdZDjUHNQc1BzUHNQc1B2EONQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHaA41BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1B3AO2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gY1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1BzUHNQc1B2EO2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gZJDtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBtoG2gbaBkkOeA6gAKAAoAAwADAAMAAwAKAAoACgAKAAoACgAKAAgA4wADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAAwADAAMAD//wQABAAEAAQABAAEAAQABAAEAA0AAwABAAEAAgAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAKABMAFwAeABsAGgAeABcAFgASAB4AGwAYAA8AGAAcAEsASwBLAEsASwBLAEsASwBLAEsAGAAYAB4AHgAeABMAHgBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAFgAbABIAHgAeAB4AUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQABYADQARAB4ABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsABAAEAAQABAAEAAUABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAkAFgAaABsAGwAbAB4AHQAdAB4ATwAXAB4ADQAeAB4AGgAbAE8ATwAOAFAAHQAdAB0ATwBPABcATwBPAE8AFgBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAHQAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB0AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgBQAB4AHgAeAB4AUABQAFAAUAAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAeAB4AHgAeAFAATwBAAE8ATwBPAEAATwBQAFAATwBQAB4AHgAeAB4AHgAeAB0AHQAdAB0AHgAdAB4ADgBQAFAAUABQAFAAHgAeAB4AHgAeAB4AHgBQAB4AUAAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4ABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAJAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAkACQAJAAkACQAJAAkABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAeAB4AHgAeAFAAHgAeAB4AKwArAFAAUABQAFAAGABQACsAKwArACsAHgAeAFAAHgBQAFAAUAArAFAAKwAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AKwAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4ABAAEAAQABAAEAAQABAAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAUAAeAB4AHgAeAB4AHgArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwAYAA0AKwArAB4AHgAbACsABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQADQAEAB4ABAAEAB4ABAAEABMABAArACsAKwArACsAKwArACsAVgBWAFYAVgBWAFYAVgBWAFYAVgBWAFYAVgBWAFYAVgBWAFYAVgBWAFYAVgBWAFYAVgBWAFYAKwArACsAKwArAFYAVgBWAB4AHgArACsAKwArACsAKwArACsAKwArACsAHgAeAB4AHgAeAB4AHgAeAB4AGgAaABoAGAAYAB4AHgAEAAQABAAEAAQABAAEAAQABAAEAAQAEwAEACsAEwATAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABABLAEsASwBLAEsASwBLAEsASwBLABoAGQAZAB4AUABQAAQAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQABMAUAAEAAQABAAEAAQABAAEAB4AHgAEAAQABAAEAAQABABQAFAABAAEAB4ABAAEAAQABABQAFAASwBLAEsASwBLAEsASwBLAEsASwBQAFAAUAAeAB4AUAAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AKwAeAFAABABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAABAAEAAQABAAEAAQABAAEAAQABAAEAFAAKwArACsAKwArACsAKwArACsAKwArACsAKwArAEsASwBLAEsASwBLAEsASwBLAEsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAABAAEAAQABAAEAAQABAAEAAQAUABQAB4AHgAYABMAUAArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABAAEAFAABAAEAAQABAAEAFAABAAEAAQAUAAEAAQABAAEAAQAKwArAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABAArACsAHgArAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArAFAAUABQAFAAUABQAFAAUAArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAeAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABABQAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAFAABAAEAAQABAAEAAQABABQAFAAUABQAFAAUABQAFAAUABQAAQABAANAA0ASwBLAEsASwBLAEsASwBLAEsASwAeAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAABAAEAAQAKwBQAFAAUABQAFAAUABQAFAAKwArAFAAUAArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAUABQAFAAUABQAFAAUAArAFAAKwArACsAUABQAFAAUAArACsABABQAAQABAAEAAQABAAEAAQAKwArAAQABAArACsABAAEAAQAUAArACsAKwArACsAKwArACsABAArACsAKwArAFAAUAArAFAAUABQAAQABAArACsASwBLAEsASwBLAEsASwBLAEsASwBQAFAAGgAaAFAAUABQAFAAUABMAB4AGwBQAB4AKwArACsABAAEAAQAKwBQAFAAUABQAFAAUAArACsAKwArAFAAUAArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAUABQAFAAUABQAFAAUAArAFAAUAArAFAAUAArAFAAUAArACsABAArAAQABAAEAAQABAArACsAKwArAAQABAArACsABAAEAAQAKwArACsABAArACsAKwArACsAKwArAFAAUABQAFAAKwBQACsAKwArACsAKwArACsASwBLAEsASwBLAEsASwBLAEsASwAEAAQAUABQAFAABAArACsAKwArACsAKwArACsAKwArACsABAAEAAQAKwBQAFAAUABQAFAAUABQAFAAUAArAFAAUABQACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAUABQAFAAUABQAFAAUAArAFAAUAArAFAAUABQAFAAUAArACsABABQAAQABAAEAAQABAAEAAQABAArAAQABAAEACsABAAEAAQAKwArAFAAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAUABQAAQABAArACsASwBLAEsASwBLAEsASwBLAEsASwAeABsAKwArACsAKwArACsAKwBQAAQABAAEAAQABAAEACsABAAEAAQAKwBQAFAAUABQAFAAUABQAFAAKwArAFAAUAArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABAAEAAQAKwArAAQABAArACsABAAEAAQAKwArACsAKwArACsAKwArAAQABAArACsAKwArAFAAUAArAFAAUABQAAQABAArACsASwBLAEsASwBLAEsASwBLAEsASwAeAFAAUABQAFAAUABQAFAAKwArACsAKwArACsAKwArACsAKwAEAFAAKwBQAFAAUABQAFAAUAArACsAKwBQAFAAUAArAFAAUABQAFAAKwArACsAUABQACsAUAArAFAAUAArACsAKwBQAFAAKwArACsAUABQAFAAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAKwAEAAQABAAEAAQAKwArACsABAAEAAQAKwAEAAQABAAEACsAKwBQACsAKwArACsAKwArAAQAKwArACsAKwArACsAKwArACsAKwBLAEsASwBLAEsASwBLAEsASwBLAFAAUABQAB4AHgAeAB4AHgAeABsAHgArACsAKwArACsABAAEAAQABAArAFAAUABQAFAAUABQAFAAUAArAFAAUABQACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAKwArAFAABAAEAAQABAAEAAQABAArAAQABAAEACsABAAEAAQABAArACsAKwArACsAKwArAAQABAArAFAAUABQACsAKwArACsAKwBQAFAABAAEACsAKwBLAEsASwBLAEsASwBLAEsASwBLACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAUABQAB4AUAAEAAQABAArAFAAUABQAFAAUABQAFAAUAArAFAAUABQACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwBQAFAAUABQAFAAUABQAFAAUABQACsAUABQAFAAUABQACsAKwAEAFAABAAEAAQABAAEAAQABAArAAQABAAEACsABAAEAAQABAArACsAKwArACsAKwArAAQABAArACsAKwArACsAKwArAFAAKwBQAFAABAAEACsAKwBLAEsASwBLAEsASwBLAEsASwBLACsAUABQACsAKwArACsAKwArACsAKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAABAAEAFAABAAEAAQABAAEAAQABAArAAQABAAEACsABAAEAAQABABQAB4AKwArACsAKwBQAFAAUAAEAFAAUABQAFAAUABQAFAAUABQAFAABAAEACsAKwBLAEsASwBLAEsASwBLAEsASwBLAFAAUABQAFAAUABQAFAAUABQABoAUABQAFAAUABQAFAAKwArAAQABAArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArAFAAUABQAFAAUABQAFAAUABQACsAUAArACsAUABQAFAAUABQAFAAUAArACsAKwAEACsAKwArACsABAAEAAQABAAEAAQAKwAEACsABAAEAAQABAAEAAQABAAEACsAKwArACsAKwArAEsASwBLAEsASwBLAEsASwBLAEsAKwArAAQABAAeACsAKwArACsAKwArACsAKwArACsAKwArAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXAAqAFwAXAAqACoAKgAqACoAKgAqACsAKwArACsAGwBcAFwAXABcAFwAXABcACoAKgAqACoAKgAqACoAKgAeAEsASwBLAEsASwBLAEsASwBLAEsADQANACsAKwArACsAKwBcAFwAKwBcACsAKwBcAFwAKwBcACsAKwBcACsAKwArACsAKwArAFwAXABcAFwAKwBcAFwAXABcAFwAXABcACsAXABcAFwAKwBcACsAXAArACsAXABcACsAXABcAFwAXAAqAFwAXAAqACoAKgAqACoAKgArACoAKgBcACsAKwBcAFwAXABcAFwAKwBcACsAKgAqACoAKgAqACoAKwArAEsASwBLAEsASwBLAEsASwBLAEsAKwArAFwAXABcAFwAUAAOAA4ADgAOAB4ADgAOAAkADgAOAA0ACQATABMAEwATABMACQAeABMAHgAeAB4ABAAEAB4AHgAeAB4AHgAeAEsASwBLAEsASwBLAEsASwBLAEsAUABQAFAAUABQAFAAUABQAFAAUAANAAQAHgAEAB4ABAAWABEAFgARAAQABABQAFAAUABQAFAAUABQAFAAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwArAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAANAAQABAAEAAQABAANAAQABABQAFAAUABQAFAABAAEAAQABAAEAAQABAAEAAQABAAEACsABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEACsADQANAB4AHgAeAB4AHgAeAAQAHgAeAB4AHgAeAB4AKwAeAB4ADgAOAA0ADgAeAB4AHgAeAB4ACQAJACsAKwArACsAKwBcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAKgAqACoAKgAqACoAKgAqACoAKgAqACoAKgAqACoAKgAqACoAKgAqAFwASwBLAEsASwBLAEsASwBLAEsASwANAA0AHgAeAB4AHgBcAFwAXABcAFwAXAAqACoAKgAqAFwAXABcAFwAKgAqACoAXAAqACoAKgBcAFwAKgAqACoAKgAqACoAKgBcAFwAXAAqACoAKgAqAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAKgAqACoAKgAqACoAKgAqACoAKgAqACoAXAAqAEsASwBLAEsASwBLAEsASwBLAEsAKgAqACoAKgAqACoAUABQAFAAUABQAFAAKwBQACsAKwArACsAKwBQACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAeAFAAUABQAFAAWABYAFgAWABYAFgAWABYAFgAWABYAFgAWABYAFgAWABYAFgAWABYAFgAWABYAFgAWABYAFgAWABYAFgAWABYAFkAWQBZAFkAWQBZAFkAWQBZAFkAWQBZAFkAWQBZAFkAWQBZAFkAWQBZAFkAWQBZAFkAWQBZAFkAWQBZAFkAWQBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAUABQAFAAUABQAFAAUABQAFAAKwBQAFAAUABQACsAKwBQAFAAUABQAFAAUABQACsAUAArAFAAUABQAFAAKwArAFAAUABQAFAAUABQAFAAUABQACsAUABQAFAAUAArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAUABQAFAAUAArACsAUABQAFAAUABQAFAAUAArAFAAKwBQAFAAUABQACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArAFAAUABQAFAAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAKwAEAAQABAAeAA0AHgAeAB4AHgAeAB4AHgBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAeAB4AHgAeAB4AHgAeAB4AHgAeACsAKwArACsAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArAFAAUABQAFAAUABQACsAKwANAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAeAB4AUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAA0AUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQABYAEQArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAADQANAA0AUABQAFAAUABQAFAAUABQAFAAUABQACsAKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArAFAAUABQAFAABAAEAAQAKwArACsAKwArACsAKwArACsAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAAQABAAEAA0ADQArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQAKwArACsAKwArACsAKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArAFAAUABQACsABAAEACsAKwArACsAKwArACsAKwArACsAKwArAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXAAqACoAKgAqACoAKgAqACoAKgAqACoAKgAqACoAKgAqACoAKgAqACoADQANABUAXAANAB4ADQAbAFwAKgArACsASwBLAEsASwBLAEsASwBLAEsASwArACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQACsAKwArACsAKwArAB4AHgATABMADQANAA4AHgATABMAHgAEAAQABAAJACsASwBLAEsASwBLAEsASwBLAEsASwArACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwArACsAKwArACsAUABQAFAAUABQAAQABABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAABABQACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAKwArACsAKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArAAQABAAEAAQABAAEAAQABAAEAAQABAAEACsAKwArACsABAAEAAQABAAEAAQABAAEAAQABAAEAAQAKwArACsAKwAeACsAKwArABMAEwBLAEsASwBLAEsASwBLAEsASwBLAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcACsAKwBcAFwAXABcAFwAKwArACsAKwArACsAKwArACsAKwArAFwAXABcAFwAXABcAFwAXABcAFwAXABcACsAKwArACsAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAKwArACsAKwArACsASwBLAEsASwBLAEsASwBLAEsASwBcACsAKwArACoAKgBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAABAAEAAQABAAEACsAKwAeAB4AXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAKgAqACoAKgAqACoAKgAqACoAKgArACoAKgAqACoAKgAqACoAKgAqACoAKgAqACoAKgAqACoAKgAqACoAKgAqACoAKgAqACoAKgAqACoAKgArACsABABLAEsASwBLAEsASwBLAEsASwBLACsAKwArACsAKwArAEsASwBLAEsASwBLAEsASwBLAEsAKwArACsAKwArACsAKgAqACoAKgAqACoAKgBcACoAKgAqACoAKgAqACsAKwAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAArAAQABAAEAAQABABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABAAEAAQAUABQAFAAUABQAFAAUAArACsAKwArAEsASwBLAEsASwBLAEsASwBLAEsADQANAB4ADQANAA0ADQAeAB4AHgAeAB4AHgAeAB4AHgAeAAQABAAEAAQABAAEAAQABAAEAB4AHgAeAB4AHgAeAB4AHgAeACsAKwArAAQABAAEAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQAUABQAEsASwBLAEsASwBLAEsASwBLAEsAUABQAFAAUABQAFAAUABQAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAArACsAKwArACsAKwArACsAHgAeAB4AHgBQAFAAUABQAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAArACsAKwANAA0ADQANAA0ASwBLAEsASwBLAEsASwBLAEsASwArACsAKwBQAFAAUABLAEsASwBLAEsASwBLAEsASwBLAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAANAA0AUABQAFAAUABQAFAAUABQAFAAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArAB4AHgAeAB4AHgAeAB4AHgArACsAKwArACsAKwArACsABAAEAAQAHgAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAFAAUABQAFAABABQAFAAUABQAAQABAAEAFAAUAAEAAQABAArACsAKwArACsAKwAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQAKwAEAAQABAAEAAQAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgArACsAUABQAFAAUABQAFAAKwArAFAAUABQAFAAUABQAFAAUAArAFAAKwBQACsAUAArAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AKwArAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeACsAHgAeAB4AHgAeAB4AHgAeAFAAHgAeAB4AUABQAFAAKwAeAB4AHgAeAB4AHgAeAB4AHgAeAFAAUABQAFAAKwArAB4AHgAeAB4AHgAeACsAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgArACsAUABQAFAAKwAeAB4AHgAeAB4AHgAeAA4AHgArAA0ADQANAA0ADQANAA0ACQANAA0ADQAIAAQACwAEAAQADQAJAA0ADQAMAB0AHQAeABcAFwAWABcAFwAXABYAFwAdAB0AHgAeABQAFAAUAA0AAQABAAQABAAEAAQABAAJABoAGgAaABoAGgAaABoAGgAeABcAFwAdABUAFQAeAB4AHgAeAB4AHgAYABYAEQAVABUAFQAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgANAB4ADQANAA0ADQAeAA0ADQANAAcAHgAeAB4AHgArAAQABAAEAAQABAAEAAQABAAEAAQAUABQACsAKwBPAFAAUABQAFAAUAAeAB4AHgAWABEATwBQAE8ATwBPAE8AUABQAFAAUABQAB4AHgAeABYAEQArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAGwAbABsAGwAbABsAGwAaABsAGwAbABsAGwAbABsAGwAbABsAGwAbABsAGwAaABsAGwAbABsAGgAbABsAGgAbABsAGwAbABsAGwAbABsAGwAbABsAGwAbABsAGwAbABsABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArAB4AHgBQABoAHgAdAB4AUAAeABoAHgAeAB4AHgAeAB4AHgAeAB4ATwAeAFAAGwAeAB4AUABQAFAAUABQAB4AHgAeAB0AHQAeAFAAHgBQAB4AUAAeAFAATwBQAFAAHgAeAB4AHgAeAB4AHgBQAFAAUABQAFAAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgBQAB4AUABQAFAAUABPAE8AUABQAFAAUABQAE8AUABQAE8AUABPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBQAFAAUABQAE8ATwBPAE8ATwBPAE8ATwBPAE8AUABQAFAAUABQAFAAUABQAFAAHgAeAFAAUABQAFAATwAeAB4AKwArACsAKwAdAB0AHQAdAB0AHQAdAB0AHQAdAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAdAB4AHQAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHQAeAB0AHQAeAB4AHgAdAB0AHgAeAB0AHgAeAB4AHQAeAB0AGwAbAB4AHQAeAB4AHgAeAB0AHgAeAB0AHQAdAB0AHgAeAB0AHgAdAB4AHQAdAB0AHQAdAB0AHgAdAB4AHgAeAB4AHgAdAB0AHQAdAB4AHgAeAB4AHQAdAB4AHgAeAB4AHgAeAB4AHgAeAB4AHQAeAB4AHgAdAB4AHgAeAB4AHgAdAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHQAdAB4AHgAdAB0AHQAdAB4AHgAdAB0AHgAeAB0AHQAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAdAB0AHgAeAB0AHQAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB0AHgAeAB4AHQAeAB4AHgAeAB4AHgAeAB0AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAdAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeABQAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAWABEAFgARAB4AHgAeAB4AHgAeAB0AHgAeAB4AHgAeAB4AHgAlACUAHgAeAB4AHgAeAB4AHgAeAB4AFgARAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeACUAJQAlACUAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBQAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB4AHgAeAB4AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHgAeAB0AHQAdAB0AHgAeAB4AHgAeAB4AHgAeAB4AHgAdAB0AHgAdAB0AHQAdAB0AHQAdAB4AHgAeAB4AHgAeAB4AHgAdAB0AHgAeAB0AHQAeAB4AHgAeAB0AHQAeAB4AHgAeAB0AHQAdAB4AHgAdAB4AHgAdAB0AHQAdAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHQAdAB0AHQAeAB4AHgAeAB4AHgAeAB4AHgAdAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AJQAlACUAJQAeAB0AHQAeAB4AHQAeAB4AHgAeAB0AHQAeAB4AHgAeACUAJQAdAB0AJQAeACUAJQAlACAAJQAlAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AJQAlACUAHgAeAB4AHgAdAB4AHQAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHQAdAB4AHQAdAB0AHgAdACUAHQAdAB4AHQAdAB4AHQAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAlAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB0AHQAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AJQAlACUAJQAlACUAJQAlACUAJQAlACUAHQAdAB0AHQAlAB4AJQAlACUAHQAlACUAHQAdAB0AJQAlAB0AHQAlAB0AHQAlACUAJQAeAB0AHgAeAB4AHgAdAB0AJQAdAB0AHQAdAB0AHQAlACUAJQAlACUAHQAlACUAIAAlAB0AHQAlACUAJQAlACUAJQAlACUAHgAeAB4AJQAlACAAIAAgACAAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAdAB4AHgAeABcAFwAXABcAFwAXAB4AEwATACUAHgAeAB4AFgARABYAEQAWABEAFgARABYAEQAWABEAFgARAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAWABEAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AFgARABYAEQAWABEAFgARABYAEQAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeABYAEQAWABEAFgARABYAEQAWABEAFgARABYAEQAWABEAFgARABYAEQAWABEAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AFgARABYAEQAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeABYAEQAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHQAdAB0AHQAdAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AKwArAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AKwArACsAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AKwAeAB4AHgAeAB4AHgAeAB4AHgArACsAKwArACsAKwArACsAKwArACsAKwArAB4AHgAeAB4AKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAEAAQABAAeAB4AKwArACsAKwArABMADQANAA0AUAATAA0AUABQAFAAUABQAFAAUABQACsAKwArACsAKwArACsAUAANACsAKwArACsAKwArACsAKwArACsAKwArACsAKwAEAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAUABQACsAUABQAFAAUABQAFAAUAArAFAAUABQAFAAUABQAFAAKwBQAFAAUABQAFAAUABQACsAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXAA0ADQANAA0ADQANAA0ADQAeAA0AFgANAB4AHgAXABcAHgAeABcAFwAWABEAFgARABYAEQAWABEADQANAA0ADQATAFAADQANAB4ADQANAB4AHgAeAB4AHgAMAAwADQANAA0AHgANAA0AFgANAA0ADQANAA0ADQANACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACsAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAKwArACsAKwArACsAKwArACsAKwArACsAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwAlACUAJQAlACUAJQAlACUAJQAlACUAJQArACsAKwArAA0AEQARACUAJQBHAFcAVwAWABEAFgARABYAEQAWABEAFgARACUAJQAWABEAFgARABYAEQAWABEAFQAWABEAEQAlAFcAVwBXAFcAVwBXAFcAVwBXAAQABAAEAAQABAAEACUAVwBXAFcAVwA2ACUAJQBXAFcAVwBHAEcAJQAlACUAKwBRAFcAUQBXAFEAVwBRAFcAUQBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFEAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBRAFcAUQBXAFEAVwBXAFcAVwBXAFcAUQBXAFcAVwBXAFcAVwBRAFEAKwArAAQABAAVABUARwBHAFcAFQBRAFcAUQBXAFEAVwBRAFcAUQBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFEAVwBRAFcAUQBXAFcAVwBXAFcAVwBRAFcAVwBXAFcAVwBXAFEAUQBXAFcAVwBXABUAUQBHAEcAVwArACsAKwArACsAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAKwArAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwArACUAJQBXAFcAVwBXACUAJQAlACUAJQAlACUAJQAlACUAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAKwArACsAKwArACUAJQAlACUAKwArACsAKwArACsAKwArACsAKwArACsAUQBRAFEAUQBRAFEAUQBRAFEAUQBRAFEAUQBRAFEAUQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACsAVwBXAFcAVwBXAFcAVwBXAFcAVwAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlAE8ATwBPAE8ATwBPAE8ATwAlAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXACUAJQAlACUAJQAlACUAJQAlACUAVwBXAFcAVwBXAFcAVwBXAFcAVwBXACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAEcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAKwArACsAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAADQATAA0AUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABLAEsASwBLAEsASwBLAEsASwBLAFAAUAArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAFAABAAEAAQABAAeAAQABAAEAAQABAAEAAQABAAEAAQAHgBQAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AUABQAAQABABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAAQABAAeAA0ADQANAA0ADQArACsAKwArACsAKwArACsAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAFAAUABQAFAAUABQAFAAUABQAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AUAAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgBQAB4AHgAeAB4AHgAeAFAAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgArAB4AHgAeAB4AHgAeAB4AHgArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAAQAUABQAFAABABQAFAAUABQAAQAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAAQABAAEAAQABAAeAB4AHgAeACsAKwArACsAUABQAFAAUABQAFAAHgAeABoAHgArACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAADgAOABMAEwArACsAKwArACsAKwArACsABAAEAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAAQABAAEAAQABAAEACsAKwArACsAKwArACsAKwANAA0ASwBLAEsASwBLAEsASwBLAEsASwArACsAKwArACsAKwAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABABQAFAAUABQAFAAUAAeAB4AHgBQAA4AUAArACsAUABQAFAAUABQAFAABAAEAAQABAAEAAQABAAEAA0ADQBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQAKwArACsAKwArACsAKwArACsAKwArAB4AWABYAFgAWABYAFgAWABYAFgAWABYAFgAWABYAFgAWABYAFgAWABYAFgAWABYAFgAWABYAFgAWABYACsAKwArAAQAHgAeAB4AHgAeAB4ADQANAA0AHgAeAB4AHgArAFAASwBLAEsASwBLAEsASwBLAEsASwArACsAKwArAB4AHgBcAFwAXABcAFwAKgBcAFwAXABcAFwAXABcAFwAXABcAEsASwBLAEsASwBLAEsASwBLAEsAXABcAFwAXABcACsAUABQAFAAUABQAFAAUABQAFAABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEACsAKwArACsAKwArACsAKwArAFAAUABQAAQAUABQAFAAUABQAFAAUABQAAQABAArACsASwBLAEsASwBLAEsASwBLAEsASwArACsAHgANAA0ADQBcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAKgAqACoAXAAqACoAKgBcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXAAqAFwAKgAqACoAXABcACoAKgBcAFwAXABcAFwAKgAqAFwAKgBcACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArAFwAXABcACoAKgBQAFAAUABQAFAAUABQAFAAUABQAFAABAAEAAQABAAEAA0ADQBQAFAAUAAEAAQAKwArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAUAArACsAUABQAFAAUABQAFAAKwArAFAAUABQAFAAUABQACsAKwArACsAKwArACsAKwArAFAAUABQAFAAUABQAFAAKwBQAFAAUABQAFAAUABQACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABAAEAAQABAAEAAQADQAEAAQAKwArAEsASwBLAEsASwBLAEsASwBLAEsAKwArACsAKwArACsAVABVAFUAVQBVAFUAVQBVAFUAVQBVAFUAVQBVAFUAVQBVAFUAVQBVAFUAVQBVAFUAVQBVAFUAVQBUAFUAVQBVAFUAVQBVAFUAVQBVAFUAVQBVAFUAVQBVAFUAVQBVAFUAVQBVAFUAVQBVAFUAVQBVACsAKwArACsAKwArACsAKwArACsAKwArAFkAWQBZAFkAWQBZAFkAWQBZAFkAWQBZAFkAWQBZAFkAWQBZAFkAKwArACsAKwBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAWgBaAFoAKwArACsAKwAGAAYABgAGAAYABgAGAAYABgAGAAYABgAGAAYABgAGAAYABgAGAAYABgAGAAYABgAGAAYABgAGAAYABgAGAAYAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXACUAJQBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAJQAlACUAJQAlACUAUABQAFAAUABQAFAAUAArACsAKwArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAKwArACsAKwArAFYABABWAFYAVgBWAFYAVgBWAFYAVgBWAB4AVgBWAFYAVgBWAFYAVgBWAFYAVgBWAFYAVgArAFYAVgBWAFYAVgArAFYAKwBWAFYAKwBWAFYAKwBWAFYAVgBWAFYAVgBWAFYAVgBWAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAEQAWAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUAAaAB4AKwArAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQAGAARABEAGAAYABMAEwAWABEAFAArACsAKwArACsAKwAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEACUAJQAlACUAJQAWABEAFgARABYAEQAWABEAFgARABYAEQAlACUAFgARACUAJQAlACUAJQAlACUAEQAlABEAKwAVABUAEwATACUAFgARABYAEQAWABEAJQAlACUAJQAlACUAJQAlACsAJQAbABoAJQArACsAKwArAFAAUABQAFAAUAArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArAAcAKwATACUAJQAbABoAJQAlABYAEQAlACUAEQAlABEAJQBXAFcAVwBXAFcAVwBXAFcAVwBXABUAFQAlACUAJQATACUAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXABYAJQARACUAJQAlAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwAWACUAEQAlABYAEQARABYAEQARABUAVwBRAFEAUQBRAFEAUQBRAFEAUQBRAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAEcARwArACsAVwBXAFcAVwBXAFcAKwArAFcAVwBXAFcAVwBXACsAKwBXAFcAVwBXAFcAVwArACsAVwBXAFcAKwArACsAGgAbACUAJQAlABsAGwArAB4AHgAeAB4AHgAeAB4AKwArACsAKwArACsAKwArACsAKwAEAAQABAAQAB0AKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwBQAFAAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwArACsADQANAA0AKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAKwArAB4AHgAeAB4AHgAeAB4AHgAeAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgBQAFAAHgAeAB4AKwAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgArACsAKwArAB4AKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4ABAArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArAAQAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABAAEAAQAKwArACsAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsADQBQAFAAUABQACsAKwArACsAUABQAFAAUABQAFAAUABQAA0AUABQAFAAUABQACsAKwArACsAKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAKwArACsAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAKwArACsAKwArACsAKwArAB4AKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAUAArACsAUAArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAUABQACsAKwArAFAAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArAA0AUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAB4AHgBQAFAAUABQAFAAUABQACsAKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAUABQACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsADQBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAKwArAB4AUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAKwBQAFAAUABQAFAABAAEAAQAKwAEAAQAKwArACsAKwArAAQABAAEAAQAUABQAFAAUAArAFAAUABQACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAKwArACsABAAEAAQAKwArACsAKwAEAFAAUABQAFAAUABQAFAAUAArACsAKwArACsAKwArACsADQANAA0ADQANAA0ADQANAB4AKwArACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAB4AUABQAFAAUABQAFAAUABQAB4AUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAABAAEACsAKwArACsAUABQAFAAUABQAA0ADQANAA0ADQANABQAKwArACsAKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwANAA0ADQANAA0ADQANAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAKwArACsAKwArACsAHgAeAB4AHgArACsAKwArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAUABQACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwArACsAKwArACsAKwArACsAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAKwArACsAKwBQAFAAUABQAFAAUAAEAAQABAAEAAQABAAEAA0ADQAeAB4AHgAeAB4AKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAEsASwBLAEsASwBLAEsASwBLAEsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsABABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAAQABAAEAAQABAAEAAQABAAEAAQABAAeAB4AHgANAA0ADQANACsAKwArACsAKwArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAKwArACsAKwBLAEsASwBLAEsASwBLAEsASwBLACsAKwArACsAKwArAFAAUABQAFAAUABQAFAABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEACsASwBLAEsASwBLAEsASwBLAEsASwANAA0ADQANACsAKwArACsAKwArACsAKwArACsAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAABAAeAA4AUAArACsAKwArACsAKwArACsAKwAEAFAAUABQAFAADQANAB4ADQAeAAQABAAEAB4AKwArAEsASwBLAEsASwBLAEsASwBLAEsAUAAOAFAADQANAA0AKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAKwArACsAKwArACsAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABAAEAAQABAAEAAQABAAEAAQABAANAA0AHgANAA0AHgAEACsAUABQAFAAUABQAFAAUAArAFAAKwBQAFAAUABQACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwBQAFAAUABQAFAAUABQAFAAUABQAA0AKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABAAEAAQABAAEAAQABAAEAAQAKwArACsAKwArAEsASwBLAEsASwBLAEsASwBLAEsAKwArACsAKwArACsABAAEAAQABAArAFAAUABQAFAAUABQAFAAUAArACsAUABQACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAAQABAAEAAQABAArACsABAAEACsAKwAEAAQABAArACsAUAArACsAKwArACsAKwAEACsAKwArACsAKwBQAFAAUABQAFAABAAEACsAKwAEAAQABAAEAAQABAAEACsAKwArAAQABAAEAAQABAArACsAKwArACsAKwArACsAKwArACsABAAEAAQABAAEAAQABABQAFAAUABQAA0ADQANAA0AHgBLAEsASwBLAEsASwBLAEsASwBLACsADQArAB4AKwArAAQABAAEAAQAUABQAB4AUAArACsAKwArACsAKwArACsASwBLAEsASwBLAEsASwBLAEsASwArACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABAAEAAQABAAEACsAKwAEAAQABAAEAAQABAAEAAQABAAOAA0ADQATABMAHgAeAB4ADQANAA0ADQANAA0ADQANAA0ADQANAA0ADQANAA0AUABQAFAAUAAEAAQAKwArAAQADQANAB4AUAArACsAKwArACsAKwArACsAKwArACsASwBLAEsASwBLAEsASwBLAEsASwArACsAKwArACsAKwAOAA4ADgAOAA4ADgAOAA4ADgAOAA4ADgAOACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsASwBLAEsASwBLAEsASwBLAEsASwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXABcAFwAXAArACsAKwAqACoAKgAqACoAKgAqACoAKgAqACoAKgAqACoAKgArACsAKwArAEsASwBLAEsASwBLAEsASwBLAEsAXABcAA0ADQANACoASwBLAEsASwBLAEsASwBLAEsASwBQAFAAUABQAFAAUABQAFAAUAArACsAKwArACsAKwArACsAKwArACsAKwBQAFAABAAEAAQABAAEAAQABAAEAAQABABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABAAEAAQABAAEAFAABAAEAAQABAAOAB4ADQANAA0ADQAOAB4ABAArACsAKwArACsAKwArACsAUAAEAAQABAAEAAQABAAEAAQABAAEAAQAUABQAFAAUAArACsAUABQAFAAUAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAA0ADQANACsADgAOAA4ADQANACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUAArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAABAAEAAQABAAEAAQABAAEACsABAAEAAQABAAEAAQABAAEAFAADQANAA0ADQANACsAKwArACsAKwArACsAKwArACsASwBLAEsASwBLAEsASwBLAEsASwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwAOABMAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAArAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAUABQACsAUABQACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABAAEAAQABAArACsAKwAEACsABAAEACsABAAEAAQABAAEAAQABABQAAQAKwArACsAKwArACsAKwArAEsASwBLAEsASwBLAEsASwBLAEsAKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAKwArACsAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsADQANAA0ADQANACsAKwArACsAKwArACsAKwArACsAKwBQAFAAUABQACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAASABIAEgAQwBDAEMAUABQAFAAUABDAFAAUABQAEgAQwBIAEMAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAASABDAEMAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABIAEMAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArAEsASwBLAEsASwBLAEsASwBLAEsAKwArACsAKwANAA0AKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArAAQABAAEAAQABAANACsAKwArACsAKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAEAAQABAAEAAQABAAEAA0ADQANAB4AHgAeAB4AHgAeAFAAUABQAFAADQAeACsAKwArACsAKwArACsAKwArACsASwBLAEsASwBLAEsASwBLAEsASwArAFAAUABQAFAAUABQAFAAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArAFAAUABQAFAAUAArACsAKwArACsAKwArACsAKwArACsAUAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsABAAEAAQABABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAEcARwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwArACsAKwArACsAKwArACsAKwArACsAKwArAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAKwArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAKwArACsAKwBQAFAAUABQAFAAUABQAFAAUABQACsAKwAeAAQABAANAAQABAAEAAQAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeACsAKwArACsAKwArACsAKwArACsAHgAeAB4AHgAeAB4AHgArACsAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4ABAAEAAQABAAEAB4AHgAeAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQAHgAeAAQABAAEAAQABAAEAAQAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAEAAQABAAEAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArAB4AHgAEAAQABAAeACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AKwArACsAKwArACsAKwArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAKwArACsAKwArACsAKwArACsAKwArACsAKwArAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeACsAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgArAFAAUAArACsAUAArACsAUABQACsAKwBQAFAAUABQACsAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AKwBQACsAUABQAFAAUABQAFAAUAArAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgArAFAAUABQAFAAKwArAFAAUABQAFAAUABQAFAAUAArAFAAUABQAFAAUABQAFAAKwAeAB4AUABQAFAAUABQACsAUAArACsAKwBQAFAAUABQAFAAUABQACsAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgArACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAAeAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAFAAUABQAFAAUABQAFAAUABQAFAAUAAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAHgAeAB4AHgAeAB4AHgAeAB4AKwArAEsASwBLAEsASwBLAEsASwBLAEsASwBLAEsASwBLAEsASwBLAEsASwBLAEsASwBLAEsASwBLAEsASwBLAEsASwBLAEsABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAB4AHgAeAB4ABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAB4AHgAeAB4AHgAeAB4AHgAEAB4AHgAeAB4AHgAeAB4AHgAeAB4ABAAeAB4ADQANAA0ADQAeACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArAAQABAAEAAQABAArAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsABAAEAAQABAAEAAQABAArAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAArACsABAAEAAQABAAEAAQABAArAAQABAArAAQABAAEAAQABAArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwBQAFAAUABQAFAAKwArAFAAUABQAFAAUABQAFAAUABQAAQABAAEAAQABAAEAAQAKwArACsAKwArACsAKwArACsAHgAeAB4AHgAEAAQABAAEAAQABAAEACsAKwArACsAKwBLAEsASwBLAEsASwBLAEsASwBLACsAKwArACsAFgAWAFAAUABQAFAAKwBQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArAFAAUAArAFAAKwArAFAAKwBQAFAAUABQAFAAUABQAFAAUABQACsAUABQAFAAUAArAFAAKwBQACsAKwArACsAKwArAFAAKwArACsAKwBQACsAUAArAFAAKwBQAFAAUAArAFAAUAArAFAAKwArAFAAKwBQACsAUAArAFAAKwBQACsAUABQACsAUAArACsAUABQAFAAUAArAFAAUABQAFAAUABQAFAAKwBQAFAAUABQACsAUABQAFAAUAArAFAAKwBQAFAAUABQAFAAUABQAFAAUABQACsAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQACsAKwArACsAKwBQAFAAUAArAFAAUABQAFAAUAArAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUABQAFAAUAArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArAB4AHgArACsAKwArACsAKwArACsAKwArACsAKwArACsATwBPAE8ATwBPAE8ATwBPAE8ATwBPAE8ATwAlACUAJQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAeACUAHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHgAeACUAJQAlACUAHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdAB0AHQAdACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACkAKQApACkAKQApACkAKQApACkAKQApACkAKQApACkAKQApACkAKQApACkAKQApACkAKQAlACUAJQAlACUAIAAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlAB4AHgAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAHgAeACUAJQAlACUAJQAeACUAJQAlACUAJQAgACAAIAAlACUAIAAlACUAIAAgACAAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAIQAhACEAIQAhACUAJQAgACAAJQAlACAAIAAgACAAIAAgACAAIAAgACAAIAAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAIAAgACAAIAAlACUAJQAlACAAJQAgACAAIAAgACAAIAAgACAAIAAlACUAJQAgACUAJQAlACUAIAAgACAAJQAgACAAIAAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAeACUAHgAlAB4AJQAlACUAJQAlACAAJQAlACUAJQAeACUAHgAeACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAHgAeAB4AHgAeAB4AHgAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlAB4AHgAeAB4AHgAeAB4AHgAeAB4AJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAIAAgACUAJQAlACUAIAAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAIAAlACUAJQAlACAAIAAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAeAB4AHgAeAB4AHgAeAB4AJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlAB4AHgAeAB4AHgAeACUAJQAlACUAJQAlACUAIAAgACAAJQAlACUAIAAgACAAIAAgAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AFwAXABcAFQAVABUAHgAeAB4AHgAlACUAJQAgACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAIAAgACAAJQAlACUAJQAlACUAJQAlACUAIAAlACUAJQAlACUAJQAlACUAJQAlACUAIAAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAlACUAJQAlACUAJQAlACUAJQAlACUAJQAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAlACUAJQAlAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AJQAlACUAJQAlACUAJQAlAB4AHgAeAB4AHgAeAB4AHgAeAB4AJQAlACUAJQAlACUAHgAeAB4AHgAeAB4AHgAeACUAJQAlACUAJQAlACUAJQAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeAB4AHgAeACUAJQAlACUAJQAlACUAJQAlACUAJQAlACAAIAAgACAAIAAlACAAIAAlACUAJQAlACUAJQAgACUAJQAlACUAJQAlACUAJQAlACAAIAAgACAAIAAgACAAIAAgACAAJQAlACUAIAAgACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACsAKwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAJQAlACUAJQAlACUAJQAlACUAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAJQAlACUAJQAlACUAJQAlACUAJQAlAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAVwBXAFcAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQAlACUAJQArAAQAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAAEAAQABAArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsAKwArACsA\"),I=[S,36],K=[1,2,3,5],L=[h,8],z=[F,x],j=K.concat(L),X=[M,R,D,T,N],G=[v,g],V=function(e,t,n,r){var i=r[n];if(Array.isArray(e)?-1!==e.indexOf(i):e===i)for(var o=n;o<=r.length;){if((s=r[++o])===t)return!0;if(s!==h)break}if(i===h)for(o=n;o>0;){var a=r[--o];if(Array.isArray(e)?-1!==e.indexOf(a):e===a)for(var A=n;A<=r.length;){var s;if((s=r[++A])===t)return!0;if(s!==h)break}if(a!==h)break}return!1},Y=function(e,t){for(var n=e;n>=0;){var r=t[n];if(r!==h)return r;n--}return 0},W=function(e,t,n,r,i){if(0===n[r])return\"\\xd7\";var o=r-1;if(Array.isArray(i)&&!0===i[o])return\"\\xd7\";var a=o-1,A=o+1,s=t[o],l=a>=0?t[a]:0,u=t[A];if(2===s&&3===u)return\"\\xd7\";if(-1!==K.indexOf(s))return\"!\";if(-1!==K.indexOf(u))return\"\\xd7\";if(-1!==L.indexOf(u))return\"\\xd7\";if(8===Y(o,t))return\"\\xf7\";if(11===k.get(e[o])&&(u===_||u===O||u===H))return\"\\xd7\";if(7===s||7===u)return\"\\xd7\";if(9===s)return\"\\xd7\";if(-1===[h,g,v].indexOf(s)&&9===u)return\"\\xd7\";if(-1!==[B,m,b,C,U].indexOf(u))return\"\\xd7\";if(Y(o,t)===y)return\"\\xd7\";if(V(23,y,o,t))return\"\\xd7\";if(V([B,m],E,o,t))return\"\\xd7\";if(V(12,12,o,t))return\"\\xd7\";if(s===h)return\"\\xf7\";if(23===s||23===u)return\"\\xd7\";if(16===u||16===s)return\"\\xf7\";if(-1!==[g,v,E].indexOf(u)||14===s)return\"\\xd7\";if(36===l&&-1!==G.indexOf(s))return\"\\xd7\";if(s===U&&36===u)return\"\\xd7\";if(u===w&&-1!==I.concat(w,b,Q,_,O,H).indexOf(s))return\"\\xd7\";if(-1!==I.indexOf(u)&&s===Q||-1!==I.indexOf(s)&&u===Q)return\"\\xd7\";if(s===F&&-1!==[_,O,H].indexOf(u)||-1!==[_,O,H].indexOf(s)&&u===x)return\"\\xd7\";if(-1!==I.indexOf(s)&&-1!==z.indexOf(u)||-1!==z.indexOf(s)&&-1!==I.indexOf(u))return\"\\xd7\";if(-1!==[F,x].indexOf(s)&&(u===Q||-1!==[y,v].indexOf(u)&&t[A+1]===Q)||-1!==[y,v].indexOf(s)&&u===Q||s===Q&&-1!==[Q,U,C].indexOf(u))return\"\\xd7\";if(-1!==[Q,U,C,B,m].indexOf(u))for(var c=o;c>=0;){if((f=t[c])===Q)return\"\\xd7\";if(-1===[U,C].indexOf(f))break;c--}if(-1!==[F,x].indexOf(u))for(c=-1!==[B,m].indexOf(s)?a:o;c>=0;){var f;if((f=t[c])===Q)return\"\\xd7\";if(-1===[U,C].indexOf(f))break;c--}if(M===s&&-1!==[M,R,T,N].indexOf(u)||-1!==[R,T].indexOf(s)&&-1!==[R,D].indexOf(u)||-1!==[D,N].indexOf(s)&&u===D)return\"\\xd7\";if(-1!==X.indexOf(s)&&-1!==[w,x].indexOf(u)||-1!==X.indexOf(u)&&s===F)return\"\\xd7\";if(-1!==I.indexOf(s)&&-1!==I.indexOf(u))return\"\\xd7\";if(s===C&&-1!==I.indexOf(u))return\"\\xd7\";if(-1!==I.concat(Q).indexOf(s)&&u===y||-1!==I.concat(Q).indexOf(u)&&s===m)return\"\\xd7\";if(41===s&&41===u){for(var d=n[o],p=1;d>0&&41===t[--d];)p++;if(p%2!==0)return\"\\xd7\"}return s===O&&u===H?\"\\xd7\":\"\\xf7\"},J=function(e,t){t||(t={lineBreak:\"normal\",wordBreak:\"normal\"});var n=function(e,t){void 0===t&&(t=\"strict\");var n=[],r=[],i=[];return e.forEach((function(e,o){var a=k.get(e);if(a>50?(i.push(!0),a-=50):i.push(!1),-1!==[\"normal\",\"auto\",\"loose\"].indexOf(t)&&-1!==[8208,8211,12316,12448].indexOf(e))return r.push(o),n.push(16);if(4===a||11===a){if(0===o)return r.push(o),n.push(S);var A=n[o-1];return-1===j.indexOf(A)?(r.push(r[o-1]),n.push(A)):(r.push(o),n.push(S))}return r.push(o),31===a?n.push(\"strict\"===t?E:_):a===P||29===a?n.push(S):43===a?e>=131072&&e<=196605||e>=196608&&e<=262141?n.push(_):n.push(S):void n.push(a)})),[r,n,i]}(e,t.lineBreak),r=n[0],i=n[1],o=n[2];return\"break-all\"!==t.wordBreak&&\"break-word\"!==t.wordBreak||(i=i.map((function(e){return-1!==[Q,S,P].indexOf(e)?_:e}))),[r,i,\"keep-all\"===t.wordBreak?o.map((function(t,n){return t&&e[n]>=19968&&e[n]<=40959})):void 0]},q=function(){function e(e,t,n,r){this.codePoints=e,this.required=\"!\"===t,this.start=n,this.end=r}return e.prototype.slice=function(){return s.apply(void 0,this.codePoints.slice(this.start,this.end))},e}();!function(e){e[e.STRING_TOKEN=0]=\"STRING_TOKEN\",e[e.BAD_STRING_TOKEN=1]=\"BAD_STRING_TOKEN\",e[e.LEFT_PARENTHESIS_TOKEN=2]=\"LEFT_PARENTHESIS_TOKEN\",e[e.RIGHT_PARENTHESIS_TOKEN=3]=\"RIGHT_PARENTHESIS_TOKEN\",e[e.COMMA_TOKEN=4]=\"COMMA_TOKEN\",e[e.HASH_TOKEN=5]=\"HASH_TOKEN\",e[e.DELIM_TOKEN=6]=\"DELIM_TOKEN\",e[e.AT_KEYWORD_TOKEN=7]=\"AT_KEYWORD_TOKEN\",e[e.PREFIX_MATCH_TOKEN=8]=\"PREFIX_MATCH_TOKEN\",e[e.DASH_MATCH_TOKEN=9]=\"DASH_MATCH_TOKEN\",e[e.INCLUDE_MATCH_TOKEN=10]=\"INCLUDE_MATCH_TOKEN\",e[e.LEFT_CURLY_BRACKET_TOKEN=11]=\"LEFT_CURLY_BRACKET_TOKEN\",e[e.RIGHT_CURLY_BRACKET_TOKEN=12]=\"RIGHT_CURLY_BRACKET_TOKEN\",e[e.SUFFIX_MATCH_TOKEN=13]=\"SUFFIX_MATCH_TOKEN\",e[e.SUBSTRING_MATCH_TOKEN=14]=\"SUBSTRING_MATCH_TOKEN\",e[e.DIMENSION_TOKEN=15]=\"DIMENSION_TOKEN\",e[e.PERCENTAGE_TOKEN=16]=\"PERCENTAGE_TOKEN\",e[e.NUMBER_TOKEN=17]=\"NUMBER_TOKEN\",e[e.FUNCTION=18]=\"FUNCTION\",e[e.FUNCTION_TOKEN=19]=\"FUNCTION_TOKEN\",e[e.IDENT_TOKEN=20]=\"IDENT_TOKEN\",e[e.COLUMN_TOKEN=21]=\"COLUMN_TOKEN\",e[e.URL_TOKEN=22]=\"URL_TOKEN\",e[e.BAD_URL_TOKEN=23]=\"BAD_URL_TOKEN\",e[e.CDC_TOKEN=24]=\"CDC_TOKEN\",e[e.CDO_TOKEN=25]=\"CDO_TOKEN\",e[e.COLON_TOKEN=26]=\"COLON_TOKEN\",e[e.SEMICOLON_TOKEN=27]=\"SEMICOLON_TOKEN\",e[e.LEFT_SQUARE_BRACKET_TOKEN=28]=\"LEFT_SQUARE_BRACKET_TOKEN\",e[e.RIGHT_SQUARE_BRACKET_TOKEN=29]=\"RIGHT_SQUARE_BRACKET_TOKEN\",e[e.UNICODE_RANGE_TOKEN=30]=\"UNICODE_RANGE_TOKEN\",e[e.WHITESPACE_TOKEN=31]=\"WHITESPACE_TOKEN\",e[e.EOF_TOKEN=32]=\"EOF_TOKEN\"}(f||(f={}));var Z=function(e){return e>=48&&e<=57},$=function(e){return Z(e)||e>=65&&e<=70||e>=97&&e<=102},ee=function(e){return 10===e||9===e||32===e},te=function(e){return function(e){return function(e){return e>=97&&e<=122}(e)||function(e){return e>=65&&e<=90}(e)}(e)||function(e){return e>=128}(e)||95===e},ne=function(e){return te(e)||Z(e)||45===e},re=function(e){return e>=0&&e<=8||11===e||e>=14&&e<=31||127===e},ie=function(e,t){return 92===e&&10!==t},oe=function(e,t,n){return 45===e?te(t)||ie(t,n):!!te(e)||!(92!==e||!ie(e,t))},ae=function(e,t,n){return 43===e||45===e?!!Z(t)||46===t&&Z(n):Z(46===e?t:e)},Ae=function(e){var t=0,n=1;43!==e[t]&&45!==e[t]||(45===e[t]&&(n=-1),t++);for(var r=[];Z(e[t]);)r.push(e[t++]);var i=r.length?parseInt(s.apply(void 0,r),10):0;46===e[t]&&t++;for(var o=[];Z(e[t]);)o.push(e[t++]);var a=o.length,A=a?parseInt(s.apply(void 0,o),10):0;69!==e[t]&&101!==e[t]||t++;var l=1;43!==e[t]&&45!==e[t]||(45===e[t]&&(l=-1),t++);for(var u=[];Z(e[t]);)u.push(e[t++]);var c=u.length?parseInt(s.apply(void 0,u),10):0;return n*(i+A*Math.pow(10,-a))*Math.pow(10,l*c)},se={type:f.LEFT_PARENTHESIS_TOKEN},le={type:f.RIGHT_PARENTHESIS_TOKEN},ue={type:f.COMMA_TOKEN},ce={type:f.SUFFIX_MATCH_TOKEN},fe={type:f.PREFIX_MATCH_TOKEN},de={type:f.COLUMN_TOKEN},pe={type:f.DASH_MATCH_TOKEN},he={type:f.INCLUDE_MATCH_TOKEN},ge={type:f.LEFT_CURLY_BRACKET_TOKEN},ve={type:f.RIGHT_CURLY_BRACKET_TOKEN},Be={type:f.SUBSTRING_MATCH_TOKEN},me={type:f.BAD_URL_TOKEN},be={type:f.BAD_STRING_TOKEN},we={type:f.CDO_TOKEN},Ee={type:f.CDC_TOKEN},ye={type:f.COLON_TOKEN},Ce={type:f.SEMICOLON_TOKEN},Qe={type:f.LEFT_SQUARE_BRACKET_TOKEN},xe={type:f.RIGHT_SQUARE_BRACKET_TOKEN},Fe={type:f.WHITESPACE_TOKEN},Ue={type:f.EOF_TOKEN},Se=function(){function e(){this._value=[]}return e.prototype.write=function(e){this._value=this._value.concat(A(e))},e.prototype.read=function(){for(var e=[],t=this.consumeToken();t!==Ue;)e.push(t),t=this.consumeToken();return e},e.prototype.consumeToken=function(){var e=this.consumeCodePoint();switch(e){case 34:return this.consumeStringToken(34);case 35:var t=this.peekCodePoint(0),n=this.peekCodePoint(1),r=this.peekCodePoint(2);if(ne(t)||ie(n,r)){var i=oe(t,n,r)?2:1,o=this.consumeName();return{type:f.HASH_TOKEN,value:o,flags:i}}break;case 36:if(61===this.peekCodePoint(0))return this.consumeCodePoint(),ce;break;case 39:return this.consumeStringToken(39);case 40:return se;case 41:return le;case 42:if(61===this.peekCodePoint(0))return this.consumeCodePoint(),Be;break;case 43:if(ae(e,this.peekCodePoint(0),this.peekCodePoint(1)))return this.reconsumeCodePoint(e),this.consumeNumericToken();break;case 44:return ue;case 45:var a=e,A=this.peekCodePoint(0),l=this.peekCodePoint(1);if(ae(a,A,l))return this.reconsumeCodePoint(e),this.consumeNumericToken();if(oe(a,A,l))return this.reconsumeCodePoint(e),this.consumeIdentLikeToken();if(45===A&&62===l)return this.consumeCodePoint(),this.consumeCodePoint(),Ee;break;case 46:if(ae(e,this.peekCodePoint(0),this.peekCodePoint(1)))return this.reconsumeCodePoint(e),this.consumeNumericToken();break;case 47:if(42===this.peekCodePoint(0))for(this.consumeCodePoint();;){var u=this.consumeCodePoint();if(42===u&&47===(u=this.consumeCodePoint()))return this.consumeToken();if(-1===u)return this.consumeToken()}break;case 58:return ye;case 59:return Ce;case 60:if(33===this.peekCodePoint(0)&&45===this.peekCodePoint(1)&&45===this.peekCodePoint(2))return this.consumeCodePoint(),this.consumeCodePoint(),we;break;case 64:var c=this.peekCodePoint(0),d=this.peekCodePoint(1),p=this.peekCodePoint(2);if(oe(c,d,p))return o=this.consumeName(),{type:f.AT_KEYWORD_TOKEN,value:o};break;case 91:return Qe;case 92:if(ie(e,this.peekCodePoint(0)))return this.reconsumeCodePoint(e),this.consumeIdentLikeToken();break;case 93:return xe;case 61:if(61===this.peekCodePoint(0))return this.consumeCodePoint(),fe;break;case 123:return ge;case 125:return ve;case 117:case 85:var h=this.peekCodePoint(0),g=this.peekCodePoint(1);return 43!==h||!$(g)&&63!==g||(this.consumeCodePoint(),this.consumeUnicodeRangeToken()),this.reconsumeCodePoint(e),this.consumeIdentLikeToken();case 124:if(61===this.peekCodePoint(0))return this.consumeCodePoint(),pe;if(124===this.peekCodePoint(0))return this.consumeCodePoint(),de;break;case 126:if(61===this.peekCodePoint(0))return this.consumeCodePoint(),he;break;case-1:return Ue}return ee(e)?(this.consumeWhiteSpace(),Fe):Z(e)?(this.reconsumeCodePoint(e),this.consumeNumericToken()):te(e)?(this.reconsumeCodePoint(e),this.consumeIdentLikeToken()):{type:f.DELIM_TOKEN,value:s(e)}},e.prototype.consumeCodePoint=function(){var e=this._value.shift();return\"undefined\"===typeof e?-1:e},e.prototype.reconsumeCodePoint=function(e){this._value.unshift(e)},e.prototype.peekCodePoint=function(e){return e>=this._value.length?-1:this._value[e]},e.prototype.consumeUnicodeRangeToken=function(){for(var e=[],t=this.consumeCodePoint();$(t)&&e.length<6;)e.push(t),t=this.consumeCodePoint();for(var n=!1;63===t&&e.length<6;)e.push(t),t=this.consumeCodePoint(),n=!0;if(n){var r=parseInt(s.apply(void 0,e.map((function(e){return 63===e?48:e}))),16),i=parseInt(s.apply(void 0,e.map((function(e){return 63===e?70:e}))),16);return{type:f.UNICODE_RANGE_TOKEN,start:r,end:i}}var o=parseInt(s.apply(void 0,e),16);if(45===this.peekCodePoint(0)&&$(this.peekCodePoint(1))){this.consumeCodePoint(),t=this.consumeCodePoint();for(var a=[];$(t)&&a.length<6;)a.push(t),t=this.consumeCodePoint();return i=parseInt(s.apply(void 0,a),16),{type:f.UNICODE_RANGE_TOKEN,start:o,end:i}}return{type:f.UNICODE_RANGE_TOKEN,start:o,end:o}},e.prototype.consumeIdentLikeToken=function(){var e=this.consumeName();return\"url\"===e.toLowerCase()&&40===this.peekCodePoint(0)?(this.consumeCodePoint(),this.consumeUrlToken()):40===this.peekCodePoint(0)?(this.consumeCodePoint(),{type:f.FUNCTION_TOKEN,value:e}):{type:f.IDENT_TOKEN,value:e}},e.prototype.consumeUrlToken=function(){var e=[];if(this.consumeWhiteSpace(),-1===this.peekCodePoint(0))return{type:f.URL_TOKEN,value:\"\"};var t=this.peekCodePoint(0);if(39===t||34===t){var n=this.consumeStringToken(this.consumeCodePoint());return n.type===f.STRING_TOKEN&&(this.consumeWhiteSpace(),-1===this.peekCodePoint(0)||41===this.peekCodePoint(0))?(this.consumeCodePoint(),{type:f.URL_TOKEN,value:n.value}):(this.consumeBadUrlRemnants(),me)}for(;;){var r=this.consumeCodePoint();if(-1===r||41===r)return{type:f.URL_TOKEN,value:s.apply(void 0,e)};if(ee(r))return this.consumeWhiteSpace(),-1===this.peekCodePoint(0)||41===this.peekCodePoint(0)?(this.consumeCodePoint(),{type:f.URL_TOKEN,value:s.apply(void 0,e)}):(this.consumeBadUrlRemnants(),me);if(34===r||39===r||40===r||re(r))return this.consumeBadUrlRemnants(),me;if(92===r){if(!ie(r,this.peekCodePoint(0)))return this.consumeBadUrlRemnants(),me;e.push(this.consumeEscapedCodePoint())}else e.push(r)}},e.prototype.consumeWhiteSpace=function(){for(;ee(this.peekCodePoint(0));)this.consumeCodePoint()},e.prototype.consumeBadUrlRemnants=function(){for(;;){var e=this.consumeCodePoint();if(41===e||-1===e)return;ie(e,this.peekCodePoint(0))&&this.consumeEscapedCodePoint()}},e.prototype.consumeStringSlice=function(e){for(var t=\"\";e>0;){var n=Math.min(6e4,e);t+=s.apply(void 0,this._value.splice(0,n)),e-=n}return this._value.shift(),t},e.prototype.consumeStringToken=function(e){for(var t=\"\",n=0;;){var r=this._value[n];if(-1===r||void 0===r||r===e)return t+=this.consumeStringSlice(n),{type:f.STRING_TOKEN,value:t};if(10===r)return this._value.splice(0,n),be;if(92===r){var i=this._value[n+1];-1!==i&&void 0!==i&&(10===i?(t+=this.consumeStringSlice(n),n=-1,this._value.shift()):ie(r,i)&&(t+=this.consumeStringSlice(n),t+=s(this.consumeEscapedCodePoint()),n=-1))}n++}},e.prototype.consumeNumber=function(){var e=[],t=4,n=this.peekCodePoint(0);for(43!==n&&45!==n||e.push(this.consumeCodePoint());Z(this.peekCodePoint(0));)e.push(this.consumeCodePoint());n=this.peekCodePoint(0);var r=this.peekCodePoint(1);if(46===n&&Z(r))for(e.push(this.consumeCodePoint(),this.consumeCodePoint()),t=8;Z(this.peekCodePoint(0));)e.push(this.consumeCodePoint());n=this.peekCodePoint(0),r=this.peekCodePoint(1);var i=this.peekCodePoint(2);if((69===n||101===n)&&((43===r||45===r)&&Z(i)||Z(r)))for(e.push(this.consumeCodePoint(),this.consumeCodePoint()),t=8;Z(this.peekCodePoint(0));)e.push(this.consumeCodePoint());return[Ae(e),t]},e.prototype.consumeNumericToken=function(){var e=this.consumeNumber(),t=e[0],n=e[1],r=this.peekCodePoint(0),i=this.peekCodePoint(1),o=this.peekCodePoint(2);if(oe(r,i,o)){var a=this.consumeName();return{type:f.DIMENSION_TOKEN,number:t,flags:n,unit:a}}return 37===r?(this.consumeCodePoint(),{type:f.PERCENTAGE_TOKEN,number:t,flags:n}):{type:f.NUMBER_TOKEN,number:t,flags:n}},e.prototype.consumeEscapedCodePoint=function(){var e=this.consumeCodePoint();if($(e)){for(var t=s(e);$(this.peekCodePoint(0))&&t.length<6;)t+=s(this.consumeCodePoint());ee(this.peekCodePoint(0))&&this.consumeCodePoint();var n=parseInt(t,16);return 0===n||function(e){return e>=55296&&e<=57343}(n)||n>1114111?65533:n}return-1===e?65533:e},e.prototype.consumeName=function(){for(var e=\"\";;){var t=this.consumeCodePoint();if(ne(t))e+=s(t);else{if(!ie(t,this.peekCodePoint(0)))return this.reconsumeCodePoint(t),e;e+=s(this.consumeEscapedCodePoint())}}},e}(),Oe=function(){function e(e){this._tokens=e}return e.create=function(t){var n=new Se;return n.write(t),new e(n.read())},e.parseValue=function(t){return e.create(t).parseComponentValue()},e.parseValues=function(t){return e.create(t).parseComponentValues()},e.prototype.parseComponentValue=function(){for(var e=this.consumeToken();e.type===f.WHITESPACE_TOKEN;)e=this.consumeToken();if(e.type===f.EOF_TOKEN)throw new SyntaxError(\"Error parsing CSS component value, unexpected EOF\");this.reconsumeToken(e);var t=this.consumeComponentValue();do{e=this.consumeToken()}while(e.type===f.WHITESPACE_TOKEN);if(e.type===f.EOF_TOKEN)return t;throw new SyntaxError(\"Error parsing CSS component value, multiple values found when expecting only one\")},e.prototype.parseComponentValues=function(){for(var e=[];;){var t=this.consumeComponentValue();if(t.type===f.EOF_TOKEN)return e;e.push(t),e.push()}},e.prototype.consumeComponentValue=function(){var e=this.consumeToken();switch(e.type){case f.LEFT_CURLY_BRACKET_TOKEN:case f.LEFT_SQUARE_BRACKET_TOKEN:case f.LEFT_PARENTHESIS_TOKEN:return this.consumeSimpleBlock(e.type);case f.FUNCTION_TOKEN:return this.consumeFunction(e)}return e},e.prototype.consumeSimpleBlock=function(e){for(var t={type:e,values:[]},n=this.consumeToken();;){if(n.type===f.EOF_TOKEN||ke(n,e))return t;this.reconsumeToken(n),t.values.push(this.consumeComponentValue()),n=this.consumeToken()}},e.prototype.consumeFunction=function(e){for(var t={name:e.value,values:[],type:f.FUNCTION};;){var n=this.consumeToken();if(n.type===f.EOF_TOKEN||n.type===f.RIGHT_PARENTHESIS_TOKEN)return t;this.reconsumeToken(n),t.values.push(this.consumeComponentValue())}},e.prototype.consumeToken=function(){var e=this._tokens.shift();return\"undefined\"===typeof e?Ue:e},e.prototype.reconsumeToken=function(e){this._tokens.unshift(e)},e}(),He=function(e){return e.type===f.DIMENSION_TOKEN},Te=function(e){return e.type===f.NUMBER_TOKEN},Ne=function(e){return e.type===f.IDENT_TOKEN},_e=function(e){return e.type===f.STRING_TOKEN},Me=function(e,t){return Ne(e)&&e.value===t},Re=function(e){return e.type!==f.WHITESPACE_TOKEN},De=function(e){return e.type!==f.WHITESPACE_TOKEN&&e.type!==f.COMMA_TOKEN},Pe=function(e){var t=[],n=[];return e.forEach((function(e){if(e.type===f.COMMA_TOKEN){if(0===n.length)throw new Error(\"Error parsing function args, zero tokens for arg\");return t.push(n),void(n=[])}e.type!==f.WHITESPACE_TOKEN&&n.push(e)})),n.length&&t.push(n),t},ke=function(e,t){return t===f.LEFT_CURLY_BRACKET_TOKEN&&e.type===f.RIGHT_CURLY_BRACKET_TOKEN||t===f.LEFT_SQUARE_BRACKET_TOKEN&&e.type===f.RIGHT_SQUARE_BRACKET_TOKEN||t===f.LEFT_PARENTHESIS_TOKEN&&e.type===f.RIGHT_PARENTHESIS_TOKEN},Ie=function(e){return e.type===f.NUMBER_TOKEN||e.type===f.DIMENSION_TOKEN},Ke=function(e){return e.type===f.PERCENTAGE_TOKEN||Ie(e)},Le=function(e){return e.length>1?[e[0],e[1]]:[e[0]]},ze={type:f.NUMBER_TOKEN,number:0,flags:4},je={type:f.PERCENTAGE_TOKEN,number:50,flags:4},Xe={type:f.PERCENTAGE_TOKEN,number:100,flags:4},Ge=function(e,t,n){var r=e[0],i=e[1];return[Ve(r,t),Ve(\"undefined\"!==typeof i?i:r,n)]},Ve=function(e,t){if(e.type===f.PERCENTAGE_TOKEN)return e.number/100*t;if(He(e))switch(e.unit){case\"rem\":case\"em\":return 16*e.number;case\"px\":default:return e.number}return e.number},Ye=function(e){if(e.type===f.DIMENSION_TOKEN)switch(e.unit){case\"deg\":return Math.PI*e.number/180;case\"grad\":return Math.PI/200*e.number;case\"rad\":return e.number;case\"turn\":return 2*Math.PI*e.number}throw new Error(\"Unsupported angle type\")},We=function(e){return e.type===f.DIMENSION_TOKEN&&(\"deg\"===e.unit||\"grad\"===e.unit||\"rad\"===e.unit||\"turn\"===e.unit)},Je=function(e){switch(e.filter(Ne).map((function(e){return e.value})).join(\" \")){case\"to bottom right\":case\"to right bottom\":case\"left top\":case\"top left\":return[ze,ze];case\"to top\":case\"bottom\":return qe(0);case\"to bottom left\":case\"to left bottom\":case\"right top\":case\"top right\":return[ze,Xe];case\"to right\":case\"left\":return qe(90);case\"to top left\":case\"to left top\":case\"right bottom\":case\"bottom right\":return[Xe,Xe];case\"to bottom\":case\"top\":return qe(180);case\"to top right\":case\"to right top\":case\"left bottom\":case\"bottom left\":return[Xe,ze];case\"to left\":case\"right\":return qe(270)}return 0},qe=function(e){return Math.PI*e/180},Ze=function(e){if(e.type===f.FUNCTION){var t=st[e.name];if(\"undefined\"===typeof t)throw new Error('Attempting to parse an unsupported color function \"'+e.name+'\"');return t(e.values)}if(e.type===f.HASH_TOKEN){if(3===e.value.length){var n=e.value.substring(0,1),r=e.value.substring(1,2),i=e.value.substring(2,3);return tt(parseInt(n+n,16),parseInt(r+r,16),parseInt(i+i,16),1)}if(4===e.value.length){n=e.value.substring(0,1),r=e.value.substring(1,2),i=e.value.substring(2,3);var o=e.value.substring(3,4);return tt(parseInt(n+n,16),parseInt(r+r,16),parseInt(i+i,16),parseInt(o+o,16)/255)}if(6===e.value.length)return n=e.value.substring(0,2),r=e.value.substring(2,4),i=e.value.substring(4,6),tt(parseInt(n,16),parseInt(r,16),parseInt(i,16),1);if(8===e.value.length)return n=e.value.substring(0,2),r=e.value.substring(2,4),i=e.value.substring(4,6),o=e.value.substring(6,8),tt(parseInt(n,16),parseInt(r,16),parseInt(i,16),parseInt(o,16)/255)}if(e.type===f.IDENT_TOKEN){var a=lt[e.value.toUpperCase()];if(\"undefined\"!==typeof a)return a}return lt.TRANSPARENT},$e=function(e){return 0===(255&e)},et=function(e){var t=255&e,n=255&e>>8,r=255&e>>16,i=255&e>>24;return t<255?\"rgba(\"+i+\",\"+r+\",\"+n+\",\"+t/255+\")\":\"rgb(\"+i+\",\"+r+\",\"+n+\")\"},tt=function(e,t,n,r){return(e<<24|t<<16|n<<8|Math.round(255*r)<<0)>>>0},nt=function(e,t){if(e.type===f.NUMBER_TOKEN)return e.number;if(e.type===f.PERCENTAGE_TOKEN){var n=3===t?1:255;return 3===t?e.number/100*n:Math.round(e.number/100*n)}return 0},rt=function(e){var t=e.filter(De);if(3===t.length){var n=t.map(nt),r=n[0],i=n[1],o=n[2];return tt(r,i,o,1)}if(4===t.length){var a=t.map(nt),A=(r=a[0],i=a[1],o=a[2],a[3]);return tt(r,i,o,A)}return 0};function it(e,t,n){return n<0&&(n+=1),n>=1&&(n-=1),n<1/6?(t-e)*n*6+e:n<.5?t:n<2/3?6*(t-e)*(2/3-n)+e:e}var ot,at,At=function(e){var t=e.filter(De),n=t[0],r=t[1],i=t[2],o=t[3],a=(n.type===f.NUMBER_TOKEN?qe(n.number):Ye(n))/(2*Math.PI),A=Ke(r)?r.number/100:0,s=Ke(i)?i.number/100:0,l=\"undefined\"!==typeof o&&Ke(o)?Ve(o,1):1;if(0===A)return tt(255*s,255*s,255*s,1);var u=s<=.5?s*(A+1):s+A-s*A,c=2*s-u,d=it(c,u,a+1/3),p=it(c,u,a),h=it(c,u,a-1/3);return tt(255*d,255*p,255*h,l)},st={hsl:At,hsla:At,rgb:rt,rgba:rt},lt={ALICEBLUE:4042850303,ANTIQUEWHITE:4209760255,AQUA:16777215,AQUAMARINE:2147472639,AZURE:4043309055,BEIGE:4126530815,BISQUE:4293182719,BLACK:255,BLANCHEDALMOND:4293643775,BLUE:65535,BLUEVIOLET:2318131967,BROWN:2771004159,BURLYWOOD:3736635391,CADETBLUE:1604231423,CHARTREUSE:2147418367,CHOCOLATE:3530104575,CORAL:4286533887,CORNFLOWERBLUE:1687547391,CORNSILK:4294499583,CRIMSON:3692313855,CYAN:16777215,DARKBLUE:35839,DARKCYAN:9145343,DARKGOLDENROD:3095837695,DARKGRAY:2846468607,DARKGREEN:6553855,DARKGREY:2846468607,DARKKHAKI:3182914559,DARKMAGENTA:2332068863,DARKOLIVEGREEN:1433087999,DARKORANGE:4287365375,DARKORCHID:2570243327,DARKRED:2332033279,DARKSALMON:3918953215,DARKSEAGREEN:2411499519,DARKSLATEBLUE:1211993087,DARKSLATEGRAY:793726975,DARKSLATEGREY:793726975,DARKTURQUOISE:13554175,DARKVIOLET:2483082239,DEEPPINK:4279538687,DEEPSKYBLUE:12582911,DIMGRAY:1768516095,DIMGREY:1768516095,DODGERBLUE:512819199,FIREBRICK:2988581631,FLORALWHITE:4294635775,FORESTGREEN:579543807,FUCHSIA:4278255615,GAINSBORO:3705462015,GHOSTWHITE:4177068031,GOLD:4292280575,GOLDENROD:3668254975,GRAY:2155905279,GREEN:8388863,GREENYELLOW:2919182335,GREY:2155905279,HONEYDEW:4043305215,HOTPINK:4285117695,INDIANRED:3445382399,INDIGO:1258324735,IVORY:4294963455,KHAKI:4041641215,LAVENDER:3873897215,LAVENDERBLUSH:4293981695,LAWNGREEN:2096890111,LEMONCHIFFON:4294626815,LIGHTBLUE:2916673279,LIGHTCORAL:4034953471,LIGHTCYAN:3774873599,LIGHTGOLDENRODYELLOW:4210742015,LIGHTGRAY:3553874943,LIGHTGREEN:2431553791,LIGHTGREY:3553874943,LIGHTPINK:4290167295,LIGHTSALMON:4288707327,LIGHTSEAGREEN:548580095,LIGHTSKYBLUE:2278488831,LIGHTSLATEGRAY:2005441023,LIGHTSLATEGREY:2005441023,LIGHTSTEELBLUE:2965692159,LIGHTYELLOW:4294959359,LIME:16711935,LIMEGREEN:852308735,LINEN:4210091775,MAGENTA:4278255615,MAROON:2147483903,MEDIUMAQUAMARINE:1724754687,MEDIUMBLUE:52735,MEDIUMORCHID:3126187007,MEDIUMPURPLE:2473647103,MEDIUMSEAGREEN:1018393087,MEDIUMSLATEBLUE:2070474495,MEDIUMSPRINGGREEN:16423679,MEDIUMTURQUOISE:1221709055,MEDIUMVIOLETRED:3340076543,MIDNIGHTBLUE:421097727,MINTCREAM:4127193855,MISTYROSE:4293190143,MOCCASIN:4293178879,NAVAJOWHITE:4292783615,NAVY:33023,OLDLACE:4260751103,OLIVE:2155872511,OLIVEDRAB:1804477439,ORANGE:4289003775,ORANGERED:4282712319,ORCHID:3664828159,PALEGOLDENROD:4008225535,PALEGREEN:2566625535,PALETURQUOISE:2951671551,PALEVIOLETRED:3681588223,PAPAYAWHIP:4293907967,PEACHPUFF:4292524543,PERU:3448061951,PINK:4290825215,PLUM:3718307327,POWDERBLUE:2967529215,PURPLE:2147516671,REBECCAPURPLE:1714657791,RED:4278190335,ROSYBROWN:3163525119,ROYALBLUE:1097458175,SADDLEBROWN:2336560127,SALMON:4202722047,SANDYBROWN:4104413439,SEAGREEN:780883967,SEASHELL:4294307583,SIENNA:2689740287,SILVER:3233857791,SKYBLUE:2278484991,SLATEBLUE:1784335871,SLATEGRAY:1887473919,SLATEGREY:1887473919,SNOW:4294638335,SPRINGGREEN:16744447,STEELBLUE:1182971135,TAN:3535047935,TEAL:8421631,THISTLE:3636451583,TOMATO:4284696575,TRANSPARENT:0,TURQUOISE:1088475391,VIOLET:4001558271,WHEAT:4125012991,WHITE:4294967295,WHITESMOKE:4126537215,YELLOW:4294902015,YELLOWGREEN:2597139199};(function(e){e[e.VALUE=0]=\"VALUE\",e[e.LIST=1]=\"LIST\",e[e.IDENT_VALUE=2]=\"IDENT_VALUE\",e[e.TYPE_VALUE=3]=\"TYPE_VALUE\",e[e.TOKEN_VALUE=4]=\"TOKEN_VALUE\"})(ot||(ot={})),function(e){e[e.BORDER_BOX=0]=\"BORDER_BOX\",e[e.PADDING_BOX=1]=\"PADDING_BOX\",e[e.CONTENT_BOX=2]=\"CONTENT_BOX\"}(at||(at={}));var ut,ct,ft,dt={name:\"background-clip\",initialValue:\"border-box\",prefix:!1,type:ot.LIST,parse:function(e){return e.map((function(e){if(Ne(e))switch(e.value){case\"padding-box\":return at.PADDING_BOX;case\"content-box\":return at.CONTENT_BOX}return at.BORDER_BOX}))}},pt={name:\"background-color\",initialValue:\"transparent\",prefix:!1,type:ot.TYPE_VALUE,format:\"color\"},ht=function(e){var t=Ze(e[0]),n=e[1];return n&&Ke(n)?{color:t,stop:n}:{color:t,stop:null}},gt=function(e,t){var n=e[0],r=e[e.length-1];null===n.stop&&(n.stop=ze),null===r.stop&&(r.stop=Xe);for(var i=[],o=0,a=0;a<e.length;a++){var A=e[a].stop;if(null!==A){var s=Ve(A,t);s>o?i.push(s):i.push(o),o=s}else i.push(null)}var l=null;for(a=0;a<i.length;a++){var u=i[a];if(null===u)null===l&&(l=a);else if(null!==l){for(var c=a-l,f=(u-i[l-1])/(c+1),d=1;d<=c;d++)i[l+d-1]=f*d;l=null}}return e.map((function(e,n){return{color:e.color,stop:Math.max(Math.min(1,i[n]/t),0)}}))},vt=function(e,t,n){var r=\"number\"===typeof e?e:function(e,t,n){var r=t/2,i=n/2,o=Ve(e[0],t)-r,a=i-Ve(e[1],n);return(Math.atan2(a,o)+2*Math.PI)%(2*Math.PI)}(e,t,n),i=Math.abs(t*Math.sin(r))+Math.abs(n*Math.cos(r)),o=t/2,a=n/2,A=i/2,s=Math.sin(r-Math.PI/2)*A,l=Math.cos(r-Math.PI/2)*A;return[i,o-l,o+l,a-s,a+s]},Bt=function(e,t){return Math.sqrt(e*e+t*t)},mt=function(e,t,n,r,i){return[[0,0],[0,t],[e,0],[e,t]].reduce((function(e,t){var o=t[0],a=t[1],A=Bt(n-o,r-a);return(i?A<e.optimumDistance:A>e.optimumDistance)?{optimumCorner:t,optimumDistance:A}:e}),{optimumDistance:i?1/0:-1/0,optimumCorner:null}).optimumCorner},bt=function(e){var t=qe(180),n=[];return Pe(e).forEach((function(e,r){if(0===r){var i=e[0];if(i.type===f.IDENT_TOKEN&&-1!==[\"top\",\"left\",\"right\",\"bottom\"].indexOf(i.value))return void(t=Je(e));if(We(i))return void(t=(Ye(i)+qe(270))%qe(360))}var o=ht(e);n.push(o)})),{angle:t,stops:n,type:ut.LINEAR_GRADIENT}},wt=function(e){return 0===e[0]&&255===e[1]&&0===e[2]&&255===e[3]},Et=function(e,t,n,r,i){var o=\"http://www.w3.org/2000/svg\",a=document.createElementNS(o,\"svg\"),A=document.createElementNS(o,\"foreignObject\");return a.setAttributeNS(null,\"width\",e.toString()),a.setAttributeNS(null,\"height\",t.toString()),A.setAttributeNS(null,\"width\",\"100%\"),A.setAttributeNS(null,\"height\",\"100%\"),A.setAttributeNS(null,\"x\",n.toString()),A.setAttributeNS(null,\"y\",r.toString()),A.setAttributeNS(null,\"externalResourcesRequired\",\"true\"),a.appendChild(A),A.appendChild(i),a},yt=function(e){return new Promise((function(t,n){var r=new Image;r.onload=function(){return t(r)},r.onerror=n,r.src=\"data:image/svg+xml;charset=utf-8,\"+encodeURIComponent((new XMLSerializer).serializeToString(e))}))},Ct={get SUPPORT_RANGE_BOUNDS(){var e=function(e){if(e.createRange){var t=e.createRange();if(t.getBoundingClientRect){var n=e.createElement(\"boundtest\");n.style.height=\"123px\",n.style.display=\"block\",e.body.appendChild(n),t.selectNode(n);var r=t.getBoundingClientRect(),i=Math.round(r.height);if(e.body.removeChild(n),123===i)return!0}}return!1}(document);return Object.defineProperty(Ct,\"SUPPORT_RANGE_BOUNDS\",{value:e}),e},get SUPPORT_SVG_DRAWING(){var e=function(e){var t=new Image,n=e.createElement(\"canvas\"),r=n.getContext(\"2d\");if(!r)return!1;t.src=\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>\";try{r.drawImage(t,0,0),n.toDataURL()}catch(i){return!1}return!0}(document);return Object.defineProperty(Ct,\"SUPPORT_SVG_DRAWING\",{value:e}),e},get SUPPORT_FOREIGNOBJECT_DRAWING(){var e=\"function\"===typeof Array.from&&\"function\"===typeof window.fetch?function(e){var t=e.createElement(\"canvas\");t.width=100,t.height=100;var n=t.getContext(\"2d\");if(!n)return Promise.reject(!1);n.fillStyle=\"rgb(0, 255, 0)\",n.fillRect(0,0,100,100);var r=new Image,i=t.toDataURL();r.src=i;var o=Et(100,100,0,0,r);return n.fillStyle=\"red\",n.fillRect(0,0,100,100),yt(o).then((function(t){n.drawImage(t,0,0);var r=n.getImageData(0,0,100,100).data;n.fillStyle=\"red\",n.fillRect(0,0,100,100);var o=e.createElement(\"div\");return o.style.backgroundImage=\"url(\"+i+\")\",o.style.height=\"100px\",wt(r)?yt(Et(100,100,0,0,o)):Promise.reject(!1)})).then((function(e){return n.drawImage(e,0,0),wt(n.getImageData(0,0,100,100).data)})).catch((function(){return!1}))}(document):Promise.resolve(!1);return Object.defineProperty(Ct,\"SUPPORT_FOREIGNOBJECT_DRAWING\",{value:e}),e},get SUPPORT_CORS_IMAGES(){var e=\"undefined\"!==typeof(new Image).crossOrigin;return Object.defineProperty(Ct,\"SUPPORT_CORS_IMAGES\",{value:e}),e},get SUPPORT_RESPONSE_TYPE(){var e=\"string\"===typeof(new XMLHttpRequest).responseType;return Object.defineProperty(Ct,\"SUPPORT_RESPONSE_TYPE\",{value:e}),e},get SUPPORT_CORS_XHR(){var e=\"withCredentials\"in new XMLHttpRequest;return Object.defineProperty(Ct,\"SUPPORT_CORS_XHR\",{value:e}),e}},Qt=function(){function e(e){var t=e.id,n=e.enabled;this.id=t,this.enabled=n,this.start=Date.now()}return e.prototype.debug=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];this.enabled&&(\"undefined\"!==typeof window&&window.console&&\"function\"===typeof console.debug?console.debug.apply(console,[this.id,this.getTime()+\"ms\"].concat(e)):this.info.apply(this,e))},e.prototype.getTime=function(){return Date.now()-this.start},e.create=function(t){e.instances[t.id]=new e(t)},e.destroy=function(t){delete e.instances[t]},e.getInstance=function(t){var n=e.instances[t];if(\"undefined\"===typeof n)throw new Error(\"No logger instance found with id \"+t);return n},e.prototype.info=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];this.enabled&&\"undefined\"!==typeof window&&window.console&&\"function\"===typeof console.info&&console.info.apply(console,[this.id,this.getTime()+\"ms\"].concat(e))},e.prototype.error=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];this.enabled&&(\"undefined\"!==typeof window&&window.console&&\"function\"===typeof console.error?console.error.apply(console,[this.id,this.getTime()+\"ms\"].concat(e)):this.info.apply(this,e))},e.instances={},e}(),xt=function(){function e(){}return e.create=function(t,n){return e._caches[t]=new Ft(t,n)},e.destroy=function(t){delete e._caches[t]},e.open=function(t){var n=e._caches[t];if(\"undefined\"!==typeof n)return n;throw new Error('Cache with key \"'+t+'\" not found')},e.getOrigin=function(t){var n=e._link;return n?(n.href=t,n.href=n.href,n.protocol+n.hostname+n.port):\"about:blank\"},e.isSameOrigin=function(t){return e.getOrigin(t)===e._origin},e.setContext=function(t){e._link=t.document.createElement(\"a\"),e._origin=e.getOrigin(t.location.href)},e.getInstance=function(){var t=e._current;if(null===t)throw new Error(\"No cache instance attached\");return t},e.attachInstance=function(t){e._current=t},e.detachInstance=function(){e._current=null},e._caches={},e._origin=\"about:blank\",e._current=null,e}(),Ft=function(){function e(e,t){this.id=e,this._options=t,this._cache={}}return e.prototype.addImage=function(e){var t=Promise.resolve();return this.has(e)?t:_t(e)||Ht(e)?(this._cache[e]=this.loadImage(e),t):t},e.prototype.match=function(e){return this._cache[e]},e.prototype.loadImage=function(e){return r(this,void 0,void 0,(function(){var t,n,r,o,a=this;return i(this,(function(i){switch(i.label){case 0:return t=xt.isSameOrigin(e),n=!Tt(e)&&!0===this._options.useCORS&&Ct.SUPPORT_CORS_IMAGES&&!t,r=!Tt(e)&&!t&&\"string\"===typeof this._options.proxy&&Ct.SUPPORT_CORS_XHR&&!n,t||!1!==this._options.allowTaint||Tt(e)||r||n?(o=e,r?[4,this.proxy(o)]:[3,2]):[2];case 1:o=i.sent(),i.label=2;case 2:return Qt.getInstance(this.id).debug(\"Added image \"+e.substring(0,256)),[4,new Promise((function(e,t){var r=new Image;r.onload=function(){return e(r)},r.onerror=t,(Nt(o)||n)&&(r.crossOrigin=\"anonymous\"),r.src=o,!0===r.complete&&setTimeout((function(){return e(r)}),500),a._options.imageTimeout>0&&setTimeout((function(){return t(\"Timed out (\"+a._options.imageTimeout+\"ms) loading image\")}),a._options.imageTimeout)}))];case 3:return[2,i.sent()]}}))}))},e.prototype.has=function(e){return\"undefined\"!==typeof this._cache[e]},e.prototype.keys=function(){return Promise.resolve(Object.keys(this._cache))},e.prototype.proxy=function(e){var t=this,n=this._options.proxy;if(!n)throw new Error(\"No proxy defined\");var r=e.substring(0,256);return new Promise((function(i,o){var a=Ct.SUPPORT_RESPONSE_TYPE?\"blob\":\"text\",A=new XMLHttpRequest;if(A.onload=function(){if(200===A.status)if(\"text\"===a)i(A.response);else{var e=new FileReader;e.addEventListener(\"load\",(function(){return i(e.result)}),!1),e.addEventListener(\"error\",(function(e){return o(e)}),!1),e.readAsDataURL(A.response)}else o(\"Failed to proxy resource \"+r+\" with status code \"+A.status)},A.onerror=o,A.open(\"GET\",n+\"?url=\"+encodeURIComponent(e)+\"&responseType=\"+a),\"text\"!==a&&A instanceof XMLHttpRequest&&(A.responseType=a),t._options.imageTimeout){var s=t._options.imageTimeout;A.timeout=s,A.ontimeout=function(){return o(\"Timed out (\"+s+\"ms) proxying \"+r)}}A.send()}))},e}(),Ut=/^data:image\\/svg\\+xml/i,St=/^data:image\\/.*;base64,/i,Ot=/^data:image\\/.*/i,Ht=function(e){return Ct.SUPPORT_SVG_DRAWING||!Mt(e)},Tt=function(e){return Ot.test(e)},Nt=function(e){return St.test(e)},_t=function(e){return\"blob\"===e.substr(0,4)},Mt=function(e){return\"svg\"===e.substr(-3).toLowerCase()||Ut.test(e)},Rt=function(e){var t=ct.CIRCLE,n=ft.FARTHEST_CORNER,r=[],i=[];return Pe(e).forEach((function(e,o){var a=!0;if(0===o?a=e.reduce((function(e,t){if(Ne(t))switch(t.value){case\"center\":return i.push(je),!1;case\"top\":case\"left\":return i.push(ze),!1;case\"right\":case\"bottom\":return i.push(Xe),!1}else if(Ke(t)||Ie(t))return i.push(t),!1;return e}),a):1===o&&(a=e.reduce((function(e,r){if(Ne(r))switch(r.value){case\"circle\":return t=ct.CIRCLE,!1;case\"ellipse\":return t=ct.ELLIPSE,!1;case\"contain\":case\"closest-side\":return n=ft.CLOSEST_SIDE,!1;case\"farthest-side\":return n=ft.FARTHEST_SIDE,!1;case\"closest-corner\":return n=ft.CLOSEST_CORNER,!1;case\"cover\":case\"farthest-corner\":return n=ft.FARTHEST_CORNER,!1}else if(Ie(r)||Ke(r))return Array.isArray(n)||(n=[]),n.push(r),!1;return e}),a)),a){var A=ht(e);r.push(A)}})),{size:n,shape:t,stops:r,position:i,type:ut.RADIAL_GRADIENT}};!function(e){e[e.URL=0]=\"URL\",e[e.LINEAR_GRADIENT=1]=\"LINEAR_GRADIENT\",e[e.RADIAL_GRADIENT=2]=\"RADIAL_GRADIENT\"}(ut||(ut={})),function(e){e[e.CIRCLE=0]=\"CIRCLE\",e[e.ELLIPSE=1]=\"ELLIPSE\"}(ct||(ct={})),function(e){e[e.CLOSEST_SIDE=0]=\"CLOSEST_SIDE\",e[e.FARTHEST_SIDE=1]=\"FARTHEST_SIDE\",e[e.CLOSEST_CORNER=2]=\"CLOSEST_CORNER\",e[e.FARTHEST_CORNER=3]=\"FARTHEST_CORNER\"}(ft||(ft={}));var Dt,Pt=function(e){if(e.type===f.URL_TOKEN){var t={url:e.value,type:ut.URL};return xt.getInstance().addImage(e.value),t}if(e.type===f.FUNCTION){var n=kt[e.name];if(\"undefined\"===typeof n)throw new Error('Attempting to parse an unsupported image function \"'+e.name+'\"');return n(e.values)}throw new Error(\"Unsupported image type\")},kt={\"linear-gradient\":function(e){var t=qe(180),n=[];return Pe(e).forEach((function(e,r){if(0===r){var i=e[0];if(i.type===f.IDENT_TOKEN&&\"to\"===i.value)return void(t=Je(e));if(We(i))return void(t=Ye(i))}var o=ht(e);n.push(o)})),{angle:t,stops:n,type:ut.LINEAR_GRADIENT}},\"-moz-linear-gradient\":bt,\"-ms-linear-gradient\":bt,\"-o-linear-gradient\":bt,\"-webkit-linear-gradient\":bt,\"radial-gradient\":function(e){var t=ct.CIRCLE,n=ft.FARTHEST_CORNER,r=[],i=[];return Pe(e).forEach((function(e,o){var a=!0;if(0===o){var A=!1;a=e.reduce((function(e,r){if(A)if(Ne(r))switch(r.value){case\"center\":return i.push(je),e;case\"top\":case\"left\":return i.push(ze),e;case\"right\":case\"bottom\":return i.push(Xe),e}else(Ke(r)||Ie(r))&&i.push(r);else if(Ne(r))switch(r.value){case\"circle\":return t=ct.CIRCLE,!1;case\"ellipse\":return t=ct.ELLIPSE,!1;case\"at\":return A=!0,!1;case\"closest-side\":return n=ft.CLOSEST_SIDE,!1;case\"cover\":case\"farthest-side\":return n=ft.FARTHEST_SIDE,!1;case\"contain\":case\"closest-corner\":return n=ft.CLOSEST_CORNER,!1;case\"farthest-corner\":return n=ft.FARTHEST_CORNER,!1}else if(Ie(r)||Ke(r))return Array.isArray(n)||(n=[]),n.push(r),!1;return e}),a)}if(a){var s=ht(e);r.push(s)}})),{size:n,shape:t,stops:r,position:i,type:ut.RADIAL_GRADIENT}},\"-moz-radial-gradient\":Rt,\"-ms-radial-gradient\":Rt,\"-o-radial-gradient\":Rt,\"-webkit-radial-gradient\":Rt,\"-webkit-gradient\":function(e){var t=qe(180),n=[],r=ut.LINEAR_GRADIENT,i=ct.CIRCLE,o=ft.FARTHEST_CORNER;return Pe(e).forEach((function(e,t){var i=e[0];if(0===t){if(Ne(i)&&\"linear\"===i.value)return void(r=ut.LINEAR_GRADIENT);if(Ne(i)&&\"radial\"===i.value)return void(r=ut.RADIAL_GRADIENT)}if(i.type===f.FUNCTION)if(\"from\"===i.name){var o=Ze(i.values[0]);n.push({stop:ze,color:o})}else if(\"to\"===i.name)o=Ze(i.values[0]),n.push({stop:Xe,color:o});else if(\"color-stop\"===i.name){var a=i.values.filter(De);if(2===a.length){o=Ze(a[1]);var A=a[0];Te(A)&&n.push({stop:{type:f.PERCENTAGE_TOKEN,number:100*A.number,flags:A.flags},color:o})}}})),r===ut.LINEAR_GRADIENT?{angle:(t+qe(180))%qe(360),stops:n,type:r}:{size:o,shape:i,stops:n,position:[],type:r}}},It={name:\"background-image\",initialValue:\"none\",type:ot.LIST,prefix:!1,parse:function(e){if(0===e.length)return[];var t=e[0];return t.type===f.IDENT_TOKEN&&\"none\"===t.value?[]:e.filter((function(e){return De(e)&&function(e){return e.type!==f.FUNCTION||kt[e.name]}(e)})).map(Pt)}},Kt={name:\"background-origin\",initialValue:\"border-box\",prefix:!1,type:ot.LIST,parse:function(e){return e.map((function(e){if(Ne(e))switch(e.value){case\"padding-box\":return 1;case\"content-box\":return 2}return 0}))}},Lt={name:\"background-position\",initialValue:\"0% 0%\",type:ot.LIST,prefix:!1,parse:function(e){return Pe(e).map((function(e){return e.filter(Ke)})).map(Le)}};!function(e){e[e.REPEAT=0]=\"REPEAT\",e[e.NO_REPEAT=1]=\"NO_REPEAT\",e[e.REPEAT_X=2]=\"REPEAT_X\",e[e.REPEAT_Y=3]=\"REPEAT_Y\"}(Dt||(Dt={}));var zt,jt={name:\"background-repeat\",initialValue:\"repeat\",prefix:!1,type:ot.LIST,parse:function(e){return Pe(e).map((function(e){return e.filter(Ne).map((function(e){return e.value})).join(\" \")})).map(Xt)}},Xt=function(e){switch(e){case\"no-repeat\":return Dt.NO_REPEAT;case\"repeat-x\":case\"repeat no-repeat\":return Dt.REPEAT_X;case\"repeat-y\":case\"no-repeat repeat\":return Dt.REPEAT_Y;case\"repeat\":default:return Dt.REPEAT}};!function(e){e.AUTO=\"auto\",e.CONTAIN=\"contain\",e.COVER=\"cover\"}(zt||(zt={}));var Gt,Vt={name:\"background-size\",initialValue:\"0\",prefix:!1,type:ot.LIST,parse:function(e){return Pe(e).map((function(e){return e.filter(Yt)}))}},Yt=function(e){return Ne(e)||Ke(e)},Wt=function(e){return{name:\"border-\"+e+\"-color\",initialValue:\"transparent\",prefix:!1,type:ot.TYPE_VALUE,format:\"color\"}},Jt=Wt(\"top\"),qt=Wt(\"right\"),Zt=Wt(\"bottom\"),$t=Wt(\"left\"),en=function(e){return{name:\"border-radius-\"+e,initialValue:\"0 0\",prefix:!1,type:ot.LIST,parse:function(e){return Le(e.filter(Ke))}}},tn=en(\"top-left\"),nn=en(\"top-right\"),rn=en(\"bottom-right\"),on=en(\"bottom-left\");!function(e){e[e.NONE=0]=\"NONE\",e[e.SOLID=1]=\"SOLID\"}(Gt||(Gt={}));var an,An=function(e){return{name:\"border-\"+e+\"-style\",initialValue:\"solid\",prefix:!1,type:ot.IDENT_VALUE,parse:function(e){switch(e){case\"none\":return Gt.NONE}return Gt.SOLID}}},sn=An(\"top\"),ln=An(\"right\"),un=An(\"bottom\"),cn=An(\"left\"),fn=function(e){return{name:\"border-\"+e+\"-width\",initialValue:\"0\",type:ot.VALUE,prefix:!1,parse:function(e){return He(e)?e.number:0}}},dn=fn(\"top\"),pn=fn(\"right\"),hn=fn(\"bottom\"),gn=fn(\"left\"),vn={name:\"color\",initialValue:\"transparent\",prefix:!1,type:ot.TYPE_VALUE,format:\"color\"},Bn={name:\"display\",initialValue:\"inline-block\",prefix:!1,type:ot.LIST,parse:function(e){return e.filter(Ne).reduce((function(e,t){return e|mn(t.value)}),0)}},mn=function(e){switch(e){case\"block\":return 2;case\"inline\":return 4;case\"run-in\":return 8;case\"flow\":return 16;case\"flow-root\":return 32;case\"table\":return 64;case\"flex\":case\"-webkit-flex\":return 128;case\"grid\":case\"-ms-grid\":return 256;case\"ruby\":return 512;case\"subgrid\":return 1024;case\"list-item\":return 2048;case\"table-row-group\":return 4096;case\"table-header-group\":return 8192;case\"table-footer-group\":return 16384;case\"table-row\":return 32768;case\"table-cell\":return 65536;case\"table-column-group\":return 131072;case\"table-column\":return 262144;case\"table-caption\":return 524288;case\"ruby-base\":return 1048576;case\"ruby-text\":return 2097152;case\"ruby-base-container\":return 4194304;case\"ruby-text-container\":return 8388608;case\"contents\":return 16777216;case\"inline-block\":return 33554432;case\"inline-list-item\":return 67108864;case\"inline-table\":return 134217728;case\"inline-flex\":return 268435456;case\"inline-grid\":return 536870912}return 0};!function(e){e[e.NONE=0]=\"NONE\",e[e.LEFT=1]=\"LEFT\",e[e.RIGHT=2]=\"RIGHT\",e[e.INLINE_START=3]=\"INLINE_START\",e[e.INLINE_END=4]=\"INLINE_END\"}(an||(an={}));var bn,wn={name:\"float\",initialValue:\"none\",prefix:!1,type:ot.IDENT_VALUE,parse:function(e){switch(e){case\"left\":return an.LEFT;case\"right\":return an.RIGHT;case\"inline-start\":return an.INLINE_START;case\"inline-end\":return an.INLINE_END}return an.NONE}},En={name:\"letter-spacing\",initialValue:\"0\",prefix:!1,type:ot.VALUE,parse:function(e){return e.type===f.IDENT_TOKEN&&\"normal\"===e.value?0:e.type===f.NUMBER_TOKEN||e.type===f.DIMENSION_TOKEN?e.number:0}};!function(e){e.NORMAL=\"normal\",e.STRICT=\"strict\"}(bn||(bn={}));var yn,Cn={name:\"line-break\",initialValue:\"normal\",prefix:!1,type:ot.IDENT_VALUE,parse:function(e){switch(e){case\"strict\":return bn.STRICT;case\"normal\":default:return bn.NORMAL}}},Qn={name:\"line-height\",initialValue:\"normal\",prefix:!1,type:ot.TOKEN_VALUE},xn={name:\"list-style-image\",initialValue:\"none\",type:ot.VALUE,prefix:!1,parse:function(e){return e.type===f.IDENT_TOKEN&&\"none\"===e.value?null:Pt(e)}};!function(e){e[e.INSIDE=0]=\"INSIDE\",e[e.OUTSIDE=1]=\"OUTSIDE\"}(yn||(yn={}));var Fn,Un={name:\"list-style-position\",initialValue:\"outside\",prefix:!1,type:ot.IDENT_VALUE,parse:function(e){switch(e){case\"inside\":return yn.INSIDE;case\"outside\":default:return yn.OUTSIDE}}};!function(e){e[e.NONE=-1]=\"NONE\",e[e.DISC=0]=\"DISC\",e[e.CIRCLE=1]=\"CIRCLE\",e[e.SQUARE=2]=\"SQUARE\",e[e.DECIMAL=3]=\"DECIMAL\",e[e.CJK_DECIMAL=4]=\"CJK_DECIMAL\",e[e.DECIMAL_LEADING_ZERO=5]=\"DECIMAL_LEADING_ZERO\",e[e.LOWER_ROMAN=6]=\"LOWER_ROMAN\",e[e.UPPER_ROMAN=7]=\"UPPER_ROMAN\",e[e.LOWER_GREEK=8]=\"LOWER_GREEK\",e[e.LOWER_ALPHA=9]=\"LOWER_ALPHA\",e[e.UPPER_ALPHA=10]=\"UPPER_ALPHA\",e[e.ARABIC_INDIC=11]=\"ARABIC_INDIC\",e[e.ARMENIAN=12]=\"ARMENIAN\",e[e.BENGALI=13]=\"BENGALI\",e[e.CAMBODIAN=14]=\"CAMBODIAN\",e[e.CJK_EARTHLY_BRANCH=15]=\"CJK_EARTHLY_BRANCH\",e[e.CJK_HEAVENLY_STEM=16]=\"CJK_HEAVENLY_STEM\",e[e.CJK_IDEOGRAPHIC=17]=\"CJK_IDEOGRAPHIC\",e[e.DEVANAGARI=18]=\"DEVANAGARI\",e[e.ETHIOPIC_NUMERIC=19]=\"ETHIOPIC_NUMERIC\",e[e.GEORGIAN=20]=\"GEORGIAN\",e[e.GUJARATI=21]=\"GUJARATI\",e[e.GURMUKHI=22]=\"GURMUKHI\",e[e.HEBREW=22]=\"HEBREW\",e[e.HIRAGANA=23]=\"HIRAGANA\",e[e.HIRAGANA_IROHA=24]=\"HIRAGANA_IROHA\",e[e.JAPANESE_FORMAL=25]=\"JAPANESE_FORMAL\",e[e.JAPANESE_INFORMAL=26]=\"JAPANESE_INFORMAL\",e[e.KANNADA=27]=\"KANNADA\",e[e.KATAKANA=28]=\"KATAKANA\",e[e.KATAKANA_IROHA=29]=\"KATAKANA_IROHA\",e[e.KHMER=30]=\"KHMER\",e[e.KOREAN_HANGUL_FORMAL=31]=\"KOREAN_HANGUL_FORMAL\",e[e.KOREAN_HANJA_FORMAL=32]=\"KOREAN_HANJA_FORMAL\",e[e.KOREAN_HANJA_INFORMAL=33]=\"KOREAN_HANJA_INFORMAL\",e[e.LAO=34]=\"LAO\",e[e.LOWER_ARMENIAN=35]=\"LOWER_ARMENIAN\",e[e.MALAYALAM=36]=\"MALAYALAM\",e[e.MONGOLIAN=37]=\"MONGOLIAN\",e[e.MYANMAR=38]=\"MYANMAR\",e[e.ORIYA=39]=\"ORIYA\",e[e.PERSIAN=40]=\"PERSIAN\",e[e.SIMP_CHINESE_FORMAL=41]=\"SIMP_CHINESE_FORMAL\",e[e.SIMP_CHINESE_INFORMAL=42]=\"SIMP_CHINESE_INFORMAL\",e[e.TAMIL=43]=\"TAMIL\",e[e.TELUGU=44]=\"TELUGU\",e[e.THAI=45]=\"THAI\",e[e.TIBETAN=46]=\"TIBETAN\",e[e.TRAD_CHINESE_FORMAL=47]=\"TRAD_CHINESE_FORMAL\",e[e.TRAD_CHINESE_INFORMAL=48]=\"TRAD_CHINESE_INFORMAL\",e[e.UPPER_ARMENIAN=49]=\"UPPER_ARMENIAN\",e[e.DISCLOSURE_OPEN=50]=\"DISCLOSURE_OPEN\",e[e.DISCLOSURE_CLOSED=51]=\"DISCLOSURE_CLOSED\"}(Fn||(Fn={}));var Sn,On={name:\"list-style-type\",initialValue:\"none\",prefix:!1,type:ot.IDENT_VALUE,parse:function(e){switch(e){case\"disc\":return Fn.DISC;case\"circle\":return Fn.CIRCLE;case\"square\":return Fn.SQUARE;case\"decimal\":return Fn.DECIMAL;case\"cjk-decimal\":return Fn.CJK_DECIMAL;case\"decimal-leading-zero\":return Fn.DECIMAL_LEADING_ZERO;case\"lower-roman\":return Fn.LOWER_ROMAN;case\"upper-roman\":return Fn.UPPER_ROMAN;case\"lower-greek\":return Fn.LOWER_GREEK;case\"lower-alpha\":return Fn.LOWER_ALPHA;case\"upper-alpha\":return Fn.UPPER_ALPHA;case\"arabic-indic\":return Fn.ARABIC_INDIC;case\"armenian\":return Fn.ARMENIAN;case\"bengali\":return Fn.BENGALI;case\"cambodian\":return Fn.CAMBODIAN;case\"cjk-earthly-branch\":return Fn.CJK_EARTHLY_BRANCH;case\"cjk-heavenly-stem\":return Fn.CJK_HEAVENLY_STEM;case\"cjk-ideographic\":return Fn.CJK_IDEOGRAPHIC;case\"devanagari\":return Fn.DEVANAGARI;case\"ethiopic-numeric\":return Fn.ETHIOPIC_NUMERIC;case\"georgian\":return Fn.GEORGIAN;case\"gujarati\":return Fn.GUJARATI;case\"gurmukhi\":return Fn.GURMUKHI;case\"hebrew\":return Fn.HEBREW;case\"hiragana\":return Fn.HIRAGANA;case\"hiragana-iroha\":return Fn.HIRAGANA_IROHA;case\"japanese-formal\":return Fn.JAPANESE_FORMAL;case\"japanese-informal\":return Fn.JAPANESE_INFORMAL;case\"kannada\":return Fn.KANNADA;case\"katakana\":return Fn.KATAKANA;case\"katakana-iroha\":return Fn.KATAKANA_IROHA;case\"khmer\":return Fn.KHMER;case\"korean-hangul-formal\":return Fn.KOREAN_HANGUL_FORMAL;case\"korean-hanja-formal\":return Fn.KOREAN_HANJA_FORMAL;case\"korean-hanja-informal\":return Fn.KOREAN_HANJA_INFORMAL;case\"lao\":return Fn.LAO;case\"lower-armenian\":return Fn.LOWER_ARMENIAN;case\"malayalam\":return Fn.MALAYALAM;case\"mongolian\":return Fn.MONGOLIAN;case\"myanmar\":return Fn.MYANMAR;case\"oriya\":return Fn.ORIYA;case\"persian\":return Fn.PERSIAN;case\"simp-chinese-formal\":return Fn.SIMP_CHINESE_FORMAL;case\"simp-chinese-informal\":return Fn.SIMP_CHINESE_INFORMAL;case\"tamil\":return Fn.TAMIL;case\"telugu\":return Fn.TELUGU;case\"thai\":return Fn.THAI;case\"tibetan\":return Fn.TIBETAN;case\"trad-chinese-formal\":return Fn.TRAD_CHINESE_FORMAL;case\"trad-chinese-informal\":return Fn.TRAD_CHINESE_INFORMAL;case\"upper-armenian\":return Fn.UPPER_ARMENIAN;case\"disclosure-open\":return Fn.DISCLOSURE_OPEN;case\"disclosure-closed\":return Fn.DISCLOSURE_CLOSED;case\"none\":default:return Fn.NONE}}},Hn=function(e){return{name:\"margin-\"+e,initialValue:\"0\",prefix:!1,type:ot.TOKEN_VALUE}},Tn=Hn(\"top\"),Nn=Hn(\"right\"),_n=Hn(\"bottom\"),Mn=Hn(\"left\");!function(e){e[e.VISIBLE=0]=\"VISIBLE\",e[e.HIDDEN=1]=\"HIDDEN\",e[e.SCROLL=2]=\"SCROLL\",e[e.AUTO=3]=\"AUTO\"}(Sn||(Sn={}));var Rn,Dn={name:\"overflow\",initialValue:\"visible\",prefix:!1,type:ot.LIST,parse:function(e){return e.filter(Ne).map((function(e){switch(e.value){case\"hidden\":return Sn.HIDDEN;case\"scroll\":return Sn.SCROLL;case\"auto\":return Sn.AUTO;case\"visible\":default:return Sn.VISIBLE}}))}};!function(e){e.NORMAL=\"normal\",e.BREAK_WORD=\"break-word\"}(Rn||(Rn={}));var Pn,kn={name:\"overflow-wrap\",initialValue:\"normal\",prefix:!1,type:ot.IDENT_VALUE,parse:function(e){switch(e){case\"break-word\":return Rn.BREAK_WORD;case\"normal\":default:return Rn.NORMAL}}},In=function(e){return{name:\"padding-\"+e,initialValue:\"0\",prefix:!1,type:ot.TYPE_VALUE,format:\"length-percentage\"}},Kn=In(\"top\"),Ln=In(\"right\"),zn=In(\"bottom\"),jn=In(\"left\");!function(e){e[e.LEFT=0]=\"LEFT\",e[e.CENTER=1]=\"CENTER\",e[e.RIGHT=2]=\"RIGHT\"}(Pn||(Pn={}));var Xn,Gn={name:\"text-align\",initialValue:\"left\",prefix:!1,type:ot.IDENT_VALUE,parse:function(e){switch(e){case\"right\":return Pn.RIGHT;case\"center\":case\"justify\":return Pn.CENTER;case\"left\":default:return Pn.LEFT}}};!function(e){e[e.STATIC=0]=\"STATIC\",e[e.RELATIVE=1]=\"RELATIVE\",e[e.ABSOLUTE=2]=\"ABSOLUTE\",e[e.FIXED=3]=\"FIXED\",e[e.STICKY=4]=\"STICKY\"}(Xn||(Xn={}));var Vn,Yn={name:\"position\",initialValue:\"static\",prefix:!1,type:ot.IDENT_VALUE,parse:function(e){switch(e){case\"relative\":return Xn.RELATIVE;case\"absolute\":return Xn.ABSOLUTE;case\"fixed\":return Xn.FIXED;case\"sticky\":return Xn.STICKY}return Xn.STATIC}},Wn={name:\"text-shadow\",initialValue:\"none\",type:ot.LIST,prefix:!1,parse:function(e){return 1===e.length&&Me(e[0],\"none\")?[]:Pe(e).map((function(e){for(var t={color:lt.TRANSPARENT,offsetX:ze,offsetY:ze,blur:ze},n=0,r=0;r<e.length;r++){var i=e[r];Ie(i)?(0===n?t.offsetX=i:1===n?t.offsetY=i:t.blur=i,n++):t.color=Ze(i)}return t}))}};!function(e){e[e.NONE=0]=\"NONE\",e[e.LOWERCASE=1]=\"LOWERCASE\",e[e.UPPERCASE=2]=\"UPPERCASE\",e[e.CAPITALIZE=3]=\"CAPITALIZE\"}(Vn||(Vn={}));var Jn,qn={name:\"text-transform\",initialValue:\"none\",prefix:!1,type:ot.IDENT_VALUE,parse:function(e){switch(e){case\"uppercase\":return Vn.UPPERCASE;case\"lowercase\":return Vn.LOWERCASE;case\"capitalize\":return Vn.CAPITALIZE}return Vn.NONE}},Zn={name:\"transform\",initialValue:\"none\",prefix:!0,type:ot.VALUE,parse:function(e){if(e.type===f.IDENT_TOKEN&&\"none\"===e.value)return null;if(e.type===f.FUNCTION){var t=$n[e.name];if(\"undefined\"===typeof t)throw new Error('Attempting to parse an unsupported transform function \"'+e.name+'\"');return t(e.values)}return null}},$n={matrix:function(e){var t=e.filter((function(e){return e.type===f.NUMBER_TOKEN})).map((function(e){return e.number}));return 6===t.length?t:null},matrix3d:function(e){var t=e.filter((function(e){return e.type===f.NUMBER_TOKEN})).map((function(e){return e.number})),n=t[0],r=t[1],i=(t[2],t[3],t[4]),o=t[5],a=(t[6],t[7],t[8],t[9],t[10],t[11],t[12]),A=t[13];return t[14],t[15],16===t.length?[n,r,i,o,a,A]:null}},er={type:f.PERCENTAGE_TOKEN,number:50,flags:4},tr=[er,er],nr={name:\"transform-origin\",initialValue:\"50% 50%\",prefix:!0,type:ot.LIST,parse:function(e){var t=e.filter(Ke);return 2!==t.length?tr:[t[0],t[1]]}};!function(e){e[e.VISIBLE=0]=\"VISIBLE\",e[e.HIDDEN=1]=\"HIDDEN\",e[e.COLLAPSE=2]=\"COLLAPSE\"}(Jn||(Jn={}));var rr,ir={name:\"visible\",initialValue:\"none\",prefix:!1,type:ot.IDENT_VALUE,parse:function(e){switch(e){case\"hidden\":return Jn.HIDDEN;case\"collapse\":return Jn.COLLAPSE;case\"visible\":default:return Jn.VISIBLE}}};!function(e){e.NORMAL=\"normal\",e.BREAK_ALL=\"break-all\",e.KEEP_ALL=\"keep-all\"}(rr||(rr={}));var or,ar={name:\"word-break\",initialValue:\"normal\",prefix:!1,type:ot.IDENT_VALUE,parse:function(e){switch(e){case\"break-all\":return rr.BREAK_ALL;case\"keep-all\":return rr.KEEP_ALL;case\"normal\":default:return rr.NORMAL}}},Ar={name:\"z-index\",initialValue:\"auto\",prefix:!1,type:ot.VALUE,parse:function(e){if(e.type===f.IDENT_TOKEN)return{auto:!0,order:0};if(Te(e))return{auto:!1,order:e.number};throw new Error(\"Invalid z-index number parsed\")}},sr={name:\"opacity\",initialValue:\"1\",type:ot.VALUE,prefix:!1,parse:function(e){return Te(e)?e.number:1}},lr={name:\"text-decoration-color\",initialValue:\"transparent\",prefix:!1,type:ot.TYPE_VALUE,format:\"color\"},ur={name:\"text-decoration-line\",initialValue:\"none\",prefix:!1,type:ot.LIST,parse:function(e){return e.filter(Ne).map((function(e){switch(e.value){case\"underline\":return 1;case\"overline\":return 2;case\"line-through\":return 3;case\"none\":return 4}return 0})).filter((function(e){return 0!==e}))}},cr={name:\"font-family\",initialValue:\"\",prefix:!1,type:ot.LIST,parse:function(e){var t=[],n=[];return e.forEach((function(e){switch(e.type){case f.IDENT_TOKEN:case f.STRING_TOKEN:t.push(e.value);break;case f.NUMBER_TOKEN:t.push(e.number.toString());break;case f.COMMA_TOKEN:n.push(t.join(\" \")),t.length=0}})),t.length&&n.push(t.join(\" \")),n.map((function(e){return-1===e.indexOf(\" \")?e:\"'\"+e+\"'\"}))}},fr={name:\"font-size\",initialValue:\"0\",prefix:!1,type:ot.TYPE_VALUE,format:\"length\"},dr={name:\"font-weight\",initialValue:\"normal\",type:ot.VALUE,prefix:!1,parse:function(e){if(Te(e))return e.number;if(Ne(e))switch(e.value){case\"bold\":return 700;case\"normal\":default:return 400}return 400}},pr={name:\"font-variant\",initialValue:\"none\",type:ot.LIST,prefix:!1,parse:function(e){return e.filter(Ne).map((function(e){return e.value}))}};!function(e){e.NORMAL=\"normal\",e.ITALIC=\"italic\",e.OBLIQUE=\"oblique\"}(or||(or={}));var hr,gr={name:\"font-style\",initialValue:\"normal\",prefix:!1,type:ot.IDENT_VALUE,parse:function(e){switch(e){case\"oblique\":return or.OBLIQUE;case\"italic\":return or.ITALIC;case\"normal\":default:return or.NORMAL}}},vr=function(e,t){return 0!==(e&t)},Br={name:\"content\",initialValue:\"none\",type:ot.LIST,prefix:!1,parse:function(e){if(0===e.length)return[];var t=e[0];return t.type===f.IDENT_TOKEN&&\"none\"===t.value?[]:e}},mr={name:\"counter-increment\",initialValue:\"none\",prefix:!0,type:ot.LIST,parse:function(e){if(0===e.length)return null;var t=e[0];if(t.type===f.IDENT_TOKEN&&\"none\"===t.value)return null;for(var n=[],r=e.filter(Re),i=0;i<r.length;i++){var o=r[i],a=r[i+1];if(o.type===f.IDENT_TOKEN){var A=a&&Te(a)?a.number:1;n.push({counter:o.value,increment:A})}}return n}},br={name:\"counter-reset\",initialValue:\"none\",prefix:!0,type:ot.LIST,parse:function(e){if(0===e.length)return[];for(var t=[],n=e.filter(Re),r=0;r<n.length;r++){var i=n[r],o=n[r+1];if(Ne(i)&&\"none\"!==i.value){var a=o&&Te(o)?o.number:0;t.push({counter:i.value,reset:a})}}return t}},wr={name:\"quotes\",initialValue:\"none\",prefix:!0,type:ot.LIST,parse:function(e){if(0===e.length)return null;var t=e[0];if(t.type===f.IDENT_TOKEN&&\"none\"===t.value)return null;var n=[],r=e.filter(_e);if(r.length%2!==0)return null;for(var i=0;i<r.length;i+=2){var o=r[i].value,a=r[i+1].value;n.push({open:o,close:a})}return n}},Er=function(e,t,n){if(!e)return\"\";var r=e[Math.min(t,e.length-1)];return r?n?r.open:r.close:\"\"},yr={name:\"box-shadow\",initialValue:\"none\",type:ot.LIST,prefix:!1,parse:function(e){return 1===e.length&&Me(e[0],\"none\")?[]:Pe(e).map((function(e){for(var t={color:255,offsetX:ze,offsetY:ze,blur:ze,spread:ze,inset:!1},n=0,r=0;r<e.length;r++){var i=e[r];Me(i,\"inset\")?t.inset=!0:Ie(i)?(0===n?t.offsetX=i:1===n?t.offsetY=i:2===n?t.blur=i:t.spread=i,n++):t.color=Ze(i)}return t}))}},Cr=function(){function e(e){this.backgroundClip=Fr(dt,e.backgroundClip),this.backgroundColor=Fr(pt,e.backgroundColor),this.backgroundImage=Fr(It,e.backgroundImage),this.backgroundOrigin=Fr(Kt,e.backgroundOrigin),this.backgroundPosition=Fr(Lt,e.backgroundPosition),this.backgroundRepeat=Fr(jt,e.backgroundRepeat),this.backgroundSize=Fr(Vt,e.backgroundSize),this.borderTopColor=Fr(Jt,e.borderTopColor),this.borderRightColor=Fr(qt,e.borderRightColor),this.borderBottomColor=Fr(Zt,e.borderBottomColor),this.borderLeftColor=Fr($t,e.borderLeftColor),this.borderTopLeftRadius=Fr(tn,e.borderTopLeftRadius),this.borderTopRightRadius=Fr(nn,e.borderTopRightRadius),this.borderBottomRightRadius=Fr(rn,e.borderBottomRightRadius),this.borderBottomLeftRadius=Fr(on,e.borderBottomLeftRadius),this.borderTopStyle=Fr(sn,e.borderTopStyle),this.borderRightStyle=Fr(ln,e.borderRightStyle),this.borderBottomStyle=Fr(un,e.borderBottomStyle),this.borderLeftStyle=Fr(cn,e.borderLeftStyle),this.borderTopWidth=Fr(dn,e.borderTopWidth),this.borderRightWidth=Fr(pn,e.borderRightWidth),this.borderBottomWidth=Fr(hn,e.borderBottomWidth),this.borderLeftWidth=Fr(gn,e.borderLeftWidth),this.boxShadow=Fr(yr,e.boxShadow),this.color=Fr(vn,e.color),this.display=Fr(Bn,e.display),this.float=Fr(wn,e.cssFloat),this.fontFamily=Fr(cr,e.fontFamily),this.fontSize=Fr(fr,e.fontSize),this.fontStyle=Fr(gr,e.fontStyle),this.fontVariant=Fr(pr,e.fontVariant),this.fontWeight=Fr(dr,e.fontWeight),this.letterSpacing=Fr(En,e.letterSpacing),this.lineBreak=Fr(Cn,e.lineBreak),this.lineHeight=Fr(Qn,e.lineHeight),this.listStyleImage=Fr(xn,e.listStyleImage),this.listStylePosition=Fr(Un,e.listStylePosition),this.listStyleType=Fr(On,e.listStyleType),this.marginTop=Fr(Tn,e.marginTop),this.marginRight=Fr(Nn,e.marginRight),this.marginBottom=Fr(_n,e.marginBottom),this.marginLeft=Fr(Mn,e.marginLeft),this.opacity=Fr(sr,e.opacity);var t=Fr(Dn,e.overflow);this.overflowX=t[0],this.overflowY=t[t.length>1?1:0],this.overflowWrap=Fr(kn,e.overflowWrap),this.paddingTop=Fr(Kn,e.paddingTop),this.paddingRight=Fr(Ln,e.paddingRight),this.paddingBottom=Fr(zn,e.paddingBottom),this.paddingLeft=Fr(jn,e.paddingLeft),this.position=Fr(Yn,e.position),this.textAlign=Fr(Gn,e.textAlign),this.textDecorationColor=Fr(lr,e.textDecorationColor||e.color),this.textDecorationLine=Fr(ur,e.textDecorationLine),this.textShadow=Fr(Wn,e.textShadow),this.textTransform=Fr(qn,e.textTransform),this.transform=Fr(Zn,e.transform),this.transformOrigin=Fr(nr,e.transformOrigin),this.visibility=Fr(ir,e.visibility),this.wordBreak=Fr(ar,e.wordBreak),this.zIndex=Fr(Ar,e.zIndex)}return e.prototype.isVisible=function(){return this.display>0&&this.opacity>0&&this.visibility===Jn.VISIBLE},e.prototype.isTransparent=function(){return $e(this.backgroundColor)},e.prototype.isTransformed=function(){return null!==this.transform},e.prototype.isPositioned=function(){return this.position!==Xn.STATIC},e.prototype.isPositionedWithZIndex=function(){return this.isPositioned()&&!this.zIndex.auto},e.prototype.isFloating=function(){return this.float!==an.NONE},e.prototype.isInlineLevel=function(){return vr(this.display,4)||vr(this.display,33554432)||vr(this.display,268435456)||vr(this.display,536870912)||vr(this.display,67108864)||vr(this.display,134217728)},e}(),Qr=function(e){this.content=Fr(Br,e.content),this.quotes=Fr(wr,e.quotes)},xr=function(e){this.counterIncrement=Fr(mr,e.counterIncrement),this.counterReset=Fr(br,e.counterReset)},Fr=function(e,t){var n=new Se,r=null!==t&&\"undefined\"!==typeof t?t.toString():e.initialValue;n.write(r);var i=new Oe(n.read());switch(e.type){case ot.IDENT_VALUE:var o=i.parseComponentValue();return e.parse(Ne(o)?o.value:e.initialValue);case ot.VALUE:return e.parse(i.parseComponentValue());case ot.LIST:return e.parse(i.parseComponentValues());case ot.TOKEN_VALUE:return i.parseComponentValue();case ot.TYPE_VALUE:switch(e.format){case\"angle\":return Ye(i.parseComponentValue());case\"color\":return Ze(i.parseComponentValue());case\"image\":return Pt(i.parseComponentValue());case\"length\":var a=i.parseComponentValue();return Ie(a)?a:ze;case\"length-percentage\":var A=i.parseComponentValue();return Ke(A)?A:ze}}throw new Error(\"Attempting to parse unsupported css format type \"+e.format)},Ur=function(e){this.styles=new Cr(window.getComputedStyle(e,null)),this.textNodes=[],this.elements=[],null!==this.styles.transform&&ii(e)&&(e.style.transform=\"none\"),this.bounds=a(e),this.flags=0},Sr=function(e,t){this.text=e,this.bounds=t},Or=function(e){var t=e.ownerDocument;if(t){var n=t.createElement(\"html2canvaswrapper\");n.appendChild(e.cloneNode(!0));var r=e.parentNode;if(r){r.replaceChild(n,e);var i=a(n);return n.firstChild&&r.replaceChild(n.firstChild,n),i}}return new o(0,0,0,0)},Hr=function(e,t,n){var r=e.ownerDocument;if(!r)throw new Error(\"Node has no owner document\");var i=r.createRange();return i.setStart(e,t),i.setEnd(e,t+n),o.fromClientRect(i.getBoundingClientRect())},Tr=function(e,t){return 0!==t.letterSpacing?A(e).map((function(e){return s(e)})):Nr(e,t)},Nr=function(e,t){for(var n,r=function(e,t){var n=A(e),r=J(n,t),i=r[0],o=r[1],a=r[2],s=n.length,l=0,u=0;return{next:function(){if(u>=s)return{done:!0,value:null};for(var e=\"\\xd7\";u<s&&\"\\xd7\"===(e=W(n,o,i,++u,a)););if(\"\\xd7\"!==e||u===s){var t=new q(n,e,l,u);return l=u,{value:t,done:!1}}return{done:!0,value:null}}}}(e,{lineBreak:t.lineBreak,wordBreak:t.overflowWrap===Rn.BREAK_WORD?\"break-word\":t.wordBreak}),i=[];!(n=r.next()).done;)n.value&&i.push(n.value.slice());return i},_r=function(e,t){this.text=Mr(e.data,t.textTransform),this.textBounds=function(e,t,n){var r=Tr(e,t),i=[],o=0;return r.forEach((function(e){if(t.textDecorationLine.length||e.trim().length>0)if(Ct.SUPPORT_RANGE_BOUNDS)i.push(new Sr(e,Hr(n,o,e.length)));else{var r=n.splitText(e.length);i.push(new Sr(e,Or(n))),n=r}else Ct.SUPPORT_RANGE_BOUNDS||(n=n.splitText(e.length));o+=e.length})),i}(this.text,t,e)},Mr=function(e,t){switch(t){case Vn.LOWERCASE:return e.toLowerCase();case Vn.CAPITALIZE:return e.replace(Rr,Dr);case Vn.UPPERCASE:return e.toUpperCase();default:return e}},Rr=/(^|\\s|:|-|\\(|\\))([a-z])/g,Dr=function(e,t,n){return e.length>0?t+n.toUpperCase():e},Pr=function(e){function n(t){var n=e.call(this,t)||this;return n.src=t.currentSrc||t.src,n.intrinsicWidth=t.naturalWidth,n.intrinsicHeight=t.naturalHeight,xt.getInstance().addImage(n.src),n}return t(n,e),n}(Ur),kr=function(e){function n(t){var n=e.call(this,t)||this;return n.canvas=t,n.intrinsicWidth=t.width,n.intrinsicHeight=t.height,n}return t(n,e),n}(Ur),Ir=function(e){function n(t){var n=e.call(this,t)||this,r=new XMLSerializer;return n.svg=\"data:image/svg+xml,\"+encodeURIComponent(r.serializeToString(t)),n.intrinsicWidth=t.width.baseVal.value,n.intrinsicHeight=t.height.baseVal.value,xt.getInstance().addImage(n.svg),n}return t(n,e),n}(Ur),Kr=function(e){function n(t){var n=e.call(this,t)||this;return n.value=t.value,n}return t(n,e),n}(Ur),Lr=function(e){function n(t){var n=e.call(this,t)||this;return n.start=t.start,n.reversed=\"boolean\"===typeof t.reversed&&!0===t.reversed,n}return t(n,e),n}(Ur),zr=[{type:f.DIMENSION_TOKEN,flags:0,unit:\"px\",number:3}],jr=[{type:f.PERCENTAGE_TOKEN,flags:0,number:50}],Xr=\"password\",Gr=function(e){function n(t){var n,r=e.call(this,t)||this;switch(r.type=t.type.toLowerCase(),r.checked=t.checked,r.value=function(e){var t=e.type===Xr?new Array(e.value.length+1).join(\"\\u2022\"):e.value;return 0===t.length?e.placeholder||\"\":t}(t),\"checkbox\"!==r.type&&\"radio\"!==r.type||(r.styles.backgroundColor=3739148031,r.styles.borderTopColor=r.styles.borderRightColor=r.styles.borderBottomColor=r.styles.borderLeftColor=2779096575,r.styles.borderTopWidth=r.styles.borderRightWidth=r.styles.borderBottomWidth=r.styles.borderLeftWidth=1,r.styles.borderTopStyle=r.styles.borderRightStyle=r.styles.borderBottomStyle=r.styles.borderLeftStyle=Gt.SOLID,r.styles.backgroundClip=[at.BORDER_BOX],r.styles.backgroundOrigin=[0],r.bounds=(n=r.bounds).width>n.height?new o(n.left+(n.width-n.height)/2,n.top,n.height,n.height):n.width<n.height?new o(n.left,n.top+(n.height-n.width)/2,n.width,n.width):n),r.type){case\"checkbox\":r.styles.borderTopRightRadius=r.styles.borderTopLeftRadius=r.styles.borderBottomRightRadius=r.styles.borderBottomLeftRadius=zr;break;case\"radio\":r.styles.borderTopRightRadius=r.styles.borderTopLeftRadius=r.styles.borderBottomRightRadius=r.styles.borderBottomLeftRadius=jr}return r}return t(n,e),n}(Ur),Vr=function(e){function n(t){var n=e.call(this,t)||this,r=t.options[t.selectedIndex||0];return n.value=r&&r.text||\"\",n}return t(n,e),n}(Ur),Yr=function(e){function n(t){var n=e.call(this,t)||this;return n.value=t.value,n}return t(n,e),n}(Ur),Wr=function(e){return Ze(Oe.create(e).parseComponentValue())},Jr=function(e){function n(t){var n=e.call(this,t)||this;n.src=t.src,n.width=parseInt(t.width,10)||0,n.height=parseInt(t.height,10)||0,n.backgroundColor=n.styles.backgroundColor;try{if(t.contentWindow&&t.contentWindow.document&&t.contentWindow.document.documentElement){n.tree=$r(t.contentWindow.document.documentElement);var r=t.contentWindow.document.documentElement?Wr(getComputedStyle(t.contentWindow.document.documentElement).backgroundColor):lt.TRANSPARENT,i=t.contentWindow.document.body?Wr(getComputedStyle(t.contentWindow.document.body).backgroundColor):lt.TRANSPARENT;n.backgroundColor=$e(r)?$e(i)?n.styles.backgroundColor:i:r}}catch(o){}return n}return t(n,e),n}(Ur),qr=[\"OL\",\"UL\",\"MENU\"],Zr=function(e){return fi(e)?new Pr(e):ci(e)?new kr(e):li(e)?new Ir(e):ai(e)?new Kr(e):Ai(e)?new Lr(e):si(e)?new Gr(e):vi(e)?new Vr(e):gi(e)?new Yr(e):di(e)?new Jr(e):new Ur(e)},$r=function(e){var t=Zr(e);return t.flags|=4,function e(t,n,r){for(var i=t.firstChild,o=void 0;i;i=o)if(o=i.nextSibling,ni(i)&&i.data.trim().length>0)n.textNodes.push(new _r(i,n.styles));else if(ri(i)){var a=Zr(i);a.styles.isVisible()&&(ei(i,a,r)?a.flags|=4:ti(a.styles)&&(a.flags|=2),-1!==qr.indexOf(i.tagName)&&(a.flags|=8),n.elements.push(a),gi(i)||li(i)||vi(i)||e(i,a,r))}}(e,t,t),t},ei=function(e,t,n){return t.styles.isPositionedWithZIndex()||t.styles.opacity<1||t.styles.isTransformed()||ui(e)&&n.styles.isTransparent()},ti=function(e){return e.isPositioned()||e.isFloating()},ni=function(e){return e.nodeType===Node.TEXT_NODE},ri=function(e){return e.nodeType===Node.ELEMENT_NODE},ii=function(e){return ri(e)&&\"undefined\"!==typeof e.style&&!oi(e)},oi=function(e){return\"object\"===typeof e.className},ai=function(e){return\"LI\"===e.tagName},Ai=function(e){return\"OL\"===e.tagName},si=function(e){return\"INPUT\"===e.tagName},li=function(e){return\"svg\"===e.tagName},ui=function(e){return\"BODY\"===e.tagName},ci=function(e){return\"CANVAS\"===e.tagName},fi=function(e){return\"IMG\"===e.tagName},di=function(e){return\"IFRAME\"===e.tagName},pi=function(e){return\"STYLE\"===e.tagName},hi=function(e){return\"SCRIPT\"===e.tagName},gi=function(e){return\"TEXTAREA\"===e.tagName},vi=function(e){return\"SELECT\"===e.tagName},Bi=function(){function e(){this.counters={}}return e.prototype.getCounterValue=function(e){var t=this.counters[e];return t&&t.length?t[t.length-1]:1},e.prototype.getCounterValues=function(e){var t=this.counters[e];return t||[]},e.prototype.pop=function(e){var t=this;e.forEach((function(e){return t.counters[e].pop()}))},e.prototype.parse=function(e){var t=this,n=e.counterIncrement,r=e.counterReset,i=!0;null!==n&&n.forEach((function(e){var n=t.counters[e.counter];n&&0!==e.increment&&(i=!1,n[Math.max(0,n.length-1)]+=e.increment)}));var o=[];return i&&r.forEach((function(e){var n=t.counters[e.counter];o.push(e.counter),n||(n=t.counters[e.counter]=[]),n.push(e.reset)})),o},e}(),mi={integers:[1e3,900,500,400,100,90,50,40,10,9,5,4,1],values:[\"M\",\"CM\",\"D\",\"CD\",\"C\",\"XC\",\"L\",\"XL\",\"X\",\"IX\",\"V\",\"IV\",\"I\"]},bi={integers:[9e3,8e3,7e3,6e3,5e3,4e3,3e3,2e3,1e3,900,800,700,600,500,400,300,200,100,90,80,70,60,50,40,30,20,10,9,8,7,6,5,4,3,2,1],values:[\"\\u0554\",\"\\u0553\",\"\\u0552\",\"\\u0551\",\"\\u0550\",\"\\u054f\",\"\\u054e\",\"\\u054d\",\"\\u054c\",\"\\u054b\",\"\\u054a\",\"\\u0549\",\"\\u0548\",\"\\u0547\",\"\\u0546\",\"\\u0545\",\"\\u0544\",\"\\u0543\",\"\\u0542\",\"\\u0541\",\"\\u0540\",\"\\u053f\",\"\\u053e\",\"\\u053d\",\"\\u053c\",\"\\u053b\",\"\\u053a\",\"\\u0539\",\"\\u0538\",\"\\u0537\",\"\\u0536\",\"\\u0535\",\"\\u0534\",\"\\u0533\",\"\\u0532\",\"\\u0531\"]},wi={integers:[1e4,9e3,8e3,7e3,6e3,5e3,4e3,3e3,2e3,1e3,400,300,200,100,90,80,70,60,50,40,30,20,19,18,17,16,15,10,9,8,7,6,5,4,3,2,1],values:[\"\\u05d9\\u05f3\",\"\\u05d8\\u05f3\",\"\\u05d7\\u05f3\",\"\\u05d6\\u05f3\",\"\\u05d5\\u05f3\",\"\\u05d4\\u05f3\",\"\\u05d3\\u05f3\",\"\\u05d2\\u05f3\",\"\\u05d1\\u05f3\",\"\\u05d0\\u05f3\",\"\\u05ea\",\"\\u05e9\",\"\\u05e8\",\"\\u05e7\",\"\\u05e6\",\"\\u05e4\",\"\\u05e2\",\"\\u05e1\",\"\\u05e0\",\"\\u05de\",\"\\u05dc\",\"\\u05db\",\"\\u05d9\\u05d8\",\"\\u05d9\\u05d7\",\"\\u05d9\\u05d6\",\"\\u05d8\\u05d6\",\"\\u05d8\\u05d5\",\"\\u05d9\",\"\\u05d8\",\"\\u05d7\",\"\\u05d6\",\"\\u05d5\",\"\\u05d4\",\"\\u05d3\",\"\\u05d2\",\"\\u05d1\",\"\\u05d0\"]},Ei={integers:[1e4,9e3,8e3,7e3,6e3,5e3,4e3,3e3,2e3,1e3,900,800,700,600,500,400,300,200,100,90,80,70,60,50,40,30,20,10,9,8,7,6,5,4,3,2,1],values:[\"\\u10f5\",\"\\u10f0\",\"\\u10ef\",\"\\u10f4\",\"\\u10ee\",\"\\u10ed\",\"\\u10ec\",\"\\u10eb\",\"\\u10ea\",\"\\u10e9\",\"\\u10e8\",\"\\u10e7\",\"\\u10e6\",\"\\u10e5\",\"\\u10e4\",\"\\u10f3\",\"\\u10e2\",\"\\u10e1\",\"\\u10e0\",\"\\u10df\",\"\\u10de\",\"\\u10dd\",\"\\u10f2\",\"\\u10dc\",\"\\u10db\",\"\\u10da\",\"\\u10d9\",\"\\u10d8\",\"\\u10d7\",\"\\u10f1\",\"\\u10d6\",\"\\u10d5\",\"\\u10d4\",\"\\u10d3\",\"\\u10d2\",\"\\u10d1\",\"\\u10d0\"]},yi=function(e,t,n,r,i,o){return e<t||e>n?Ui(e,i,o.length>0):r.integers.reduce((function(t,n,i){for(;e>=n;)e-=n,t+=r.values[i];return t}),\"\")+o},Ci=function(e,t,n,r){var i=\"\";do{n||e--,i=r(e)+i,e/=t}while(e*t>=t);return i},Qi=function(e,t,n,r,i){var o=n-t+1;return(e<0?\"-\":\"\")+(Ci(Math.abs(e),o,r,(function(e){return s(Math.floor(e%o)+t)}))+i)},xi=function(e,t,n){void 0===n&&(n=\". \");var r=t.length;return Ci(Math.abs(e),r,!1,(function(e){return t[Math.floor(e%r)]}))+n},Fi=function(e,t,n,r,i,o){if(e<-9999||e>9999)return Ui(e,Fn.CJK_DECIMAL,i.length>0);var a=Math.abs(e),A=i;if(0===a)return t[0]+A;for(var s=0;a>0&&s<=4;s++){var l=a%10;0===l&&vr(o,1)&&\"\"!==A?A=t[l]+A:l>1||1===l&&0===s||1===l&&1===s&&vr(o,2)||1===l&&1===s&&vr(o,4)&&e>100||1===l&&s>1&&vr(o,8)?A=t[l]+(s>0?n[s-1]:\"\")+A:1===l&&s>0&&(A=n[s-1]+A),a=Math.floor(a/10)}return(e<0?r:\"\")+A},Ui=function(e,t,n){var r=n?\". \":\"\",i=n?\"\\u3001\":\"\",o=n?\", \":\"\",a=n?\" \":\"\";switch(t){case Fn.DISC:return\"\\u2022\"+a;case Fn.CIRCLE:return\"\\u25e6\"+a;case Fn.SQUARE:return\"\\u25fe\"+a;case Fn.DECIMAL_LEADING_ZERO:var A=Qi(e,48,57,!0,r);return A.length<4?\"0\"+A:A;case Fn.CJK_DECIMAL:return xi(e,\"\\u3007\\u4e00\\u4e8c\\u4e09\\u56db\\u4e94\\u516d\\u4e03\\u516b\\u4e5d\",i);case Fn.LOWER_ROMAN:return yi(e,1,3999,mi,Fn.DECIMAL,r).toLowerCase();case Fn.UPPER_ROMAN:return yi(e,1,3999,mi,Fn.DECIMAL,r);case Fn.LOWER_GREEK:return Qi(e,945,969,!1,r);case Fn.LOWER_ALPHA:return Qi(e,97,122,!1,r);case Fn.UPPER_ALPHA:return Qi(e,65,90,!1,r);case Fn.ARABIC_INDIC:return Qi(e,1632,1641,!0,r);case Fn.ARMENIAN:case Fn.UPPER_ARMENIAN:return yi(e,1,9999,bi,Fn.DECIMAL,r);case Fn.LOWER_ARMENIAN:return yi(e,1,9999,bi,Fn.DECIMAL,r).toLowerCase();case Fn.BENGALI:return Qi(e,2534,2543,!0,r);case Fn.CAMBODIAN:case Fn.KHMER:return Qi(e,6112,6121,!0,r);case Fn.CJK_EARTHLY_BRANCH:return xi(e,\"\\u5b50\\u4e11\\u5bc5\\u536f\\u8fb0\\u5df3\\u5348\\u672a\\u7533\\u9149\\u620c\\u4ea5\",i);case Fn.CJK_HEAVENLY_STEM:return xi(e,\"\\u7532\\u4e59\\u4e19\\u4e01\\u620a\\u5df1\\u5e9a\\u8f9b\\u58ec\\u7678\",i);case Fn.CJK_IDEOGRAPHIC:case Fn.TRAD_CHINESE_INFORMAL:return Fi(e,\"\\u96f6\\u4e00\\u4e8c\\u4e09\\u56db\\u4e94\\u516d\\u4e03\\u516b\\u4e5d\",\"\\u5341\\u767e\\u5343\\u842c\",\"\\u8ca0\",i,14);case Fn.TRAD_CHINESE_FORMAL:return Fi(e,\"\\u96f6\\u58f9\\u8cb3\\u53c3\\u8086\\u4f0d\\u9678\\u67d2\\u634c\\u7396\",\"\\u62fe\\u4f70\\u4edf\\u842c\",\"\\u8ca0\",i,15);case Fn.SIMP_CHINESE_INFORMAL:return Fi(e,\"\\u96f6\\u4e00\\u4e8c\\u4e09\\u56db\\u4e94\\u516d\\u4e03\\u516b\\u4e5d\",\"\\u5341\\u767e\\u5343\\u842c\",\"\\u8d1f\",i,14);case Fn.SIMP_CHINESE_FORMAL:return Fi(e,\"\\u96f6\\u58f9\\u8d30\\u53c1\\u8086\\u4f0d\\u9646\\u67d2\\u634c\\u7396\",\"\\u62fe\\u4f70\\u4edf\\u842c\",\"\\u8d1f\",i,15);case Fn.JAPANESE_INFORMAL:return Fi(e,\"\\u3007\\u4e00\\u4e8c\\u4e09\\u56db\\u4e94\\u516d\\u4e03\\u516b\\u4e5d\",\"\\u5341\\u767e\\u5343\\u4e07\",\"\\u30de\\u30a4\\u30ca\\u30b9\",i,0);case Fn.JAPANESE_FORMAL:return Fi(e,\"\\u96f6\\u58f1\\u5f10\\u53c2\\u56db\\u4f0d\\u516d\\u4e03\\u516b\\u4e5d\",\"\\u62fe\\u767e\\u5343\\u4e07\",\"\\u30de\\u30a4\\u30ca\\u30b9\",i,7);case Fn.KOREAN_HANGUL_FORMAL:return Fi(e,\"\\uc601\\uc77c\\uc774\\uc0bc\\uc0ac\\uc624\\uc721\\uce60\\ud314\\uad6c\",\"\\uc2ed\\ubc31\\ucc9c\\ub9cc\",\"\\ub9c8\\uc774\\ub108\\uc2a4\",o,7);case Fn.KOREAN_HANJA_INFORMAL:return Fi(e,\"\\u96f6\\u4e00\\u4e8c\\u4e09\\u56db\\u4e94\\u516d\\u4e03\\u516b\\u4e5d\",\"\\u5341\\u767e\\u5343\\u842c\",\"\\ub9c8\\uc774\\ub108\\uc2a4\",o,0);case Fn.KOREAN_HANJA_FORMAL:return Fi(e,\"\\u96f6\\u58f9\\u8cb3\\u53c3\\u56db\\u4e94\\u516d\\u4e03\\u516b\\u4e5d\",\"\\u62fe\\u767e\\u5343\",\"\\ub9c8\\uc774\\ub108\\uc2a4\",o,7);case Fn.DEVANAGARI:return Qi(e,2406,2415,!0,r);case Fn.GEORGIAN:return yi(e,1,19999,Ei,Fn.DECIMAL,r);case Fn.GUJARATI:return Qi(e,2790,2799,!0,r);case Fn.GURMUKHI:return Qi(e,2662,2671,!0,r);case Fn.HEBREW:return yi(e,1,10999,wi,Fn.DECIMAL,r);case Fn.HIRAGANA:return xi(e,\"\\u3042\\u3044\\u3046\\u3048\\u304a\\u304b\\u304d\\u304f\\u3051\\u3053\\u3055\\u3057\\u3059\\u305b\\u305d\\u305f\\u3061\\u3064\\u3066\\u3068\\u306a\\u306b\\u306c\\u306d\\u306e\\u306f\\u3072\\u3075\\u3078\\u307b\\u307e\\u307f\\u3080\\u3081\\u3082\\u3084\\u3086\\u3088\\u3089\\u308a\\u308b\\u308c\\u308d\\u308f\\u3090\\u3091\\u3092\\u3093\");case Fn.HIRAGANA_IROHA:return xi(e,\"\\u3044\\u308d\\u306f\\u306b\\u307b\\u3078\\u3068\\u3061\\u308a\\u306c\\u308b\\u3092\\u308f\\u304b\\u3088\\u305f\\u308c\\u305d\\u3064\\u306d\\u306a\\u3089\\u3080\\u3046\\u3090\\u306e\\u304a\\u304f\\u3084\\u307e\\u3051\\u3075\\u3053\\u3048\\u3066\\u3042\\u3055\\u304d\\u3086\\u3081\\u307f\\u3057\\u3091\\u3072\\u3082\\u305b\\u3059\");case Fn.KANNADA:return Qi(e,3302,3311,!0,r);case Fn.KATAKANA:return xi(e,\"\\u30a2\\u30a4\\u30a6\\u30a8\\u30aa\\u30ab\\u30ad\\u30af\\u30b1\\u30b3\\u30b5\\u30b7\\u30b9\\u30bb\\u30bd\\u30bf\\u30c1\\u30c4\\u30c6\\u30c8\\u30ca\\u30cb\\u30cc\\u30cd\\u30ce\\u30cf\\u30d2\\u30d5\\u30d8\\u30db\\u30de\\u30df\\u30e0\\u30e1\\u30e2\\u30e4\\u30e6\\u30e8\\u30e9\\u30ea\\u30eb\\u30ec\\u30ed\\u30ef\\u30f0\\u30f1\\u30f2\\u30f3\",i);case Fn.KATAKANA_IROHA:return xi(e,\"\\u30a4\\u30ed\\u30cf\\u30cb\\u30db\\u30d8\\u30c8\\u30c1\\u30ea\\u30cc\\u30eb\\u30f2\\u30ef\\u30ab\\u30e8\\u30bf\\u30ec\\u30bd\\u30c4\\u30cd\\u30ca\\u30e9\\u30e0\\u30a6\\u30f0\\u30ce\\u30aa\\u30af\\u30e4\\u30de\\u30b1\\u30d5\\u30b3\\u30a8\\u30c6\\u30a2\\u30b5\\u30ad\\u30e6\\u30e1\\u30df\\u30b7\\u30f1\\u30d2\\u30e2\\u30bb\\u30b9\",i);case Fn.LAO:return Qi(e,3792,3801,!0,r);case Fn.MONGOLIAN:return Qi(e,6160,6169,!0,r);case Fn.MYANMAR:return Qi(e,4160,4169,!0,r);case Fn.ORIYA:return Qi(e,2918,2927,!0,r);case Fn.PERSIAN:return Qi(e,1776,1785,!0,r);case Fn.TAMIL:return Qi(e,3046,3055,!0,r);case Fn.TELUGU:return Qi(e,3174,3183,!0,r);case Fn.THAI:return Qi(e,3664,3673,!0,r);case Fn.TIBETAN:return Qi(e,3872,3881,!0,r);case Fn.DECIMAL:default:return Qi(e,48,57,!0,r)}},Si=function(){function e(e,t){if(this.options=t,this.scrolledElements=[],this.referenceElement=e,this.counters=new Bi,this.quoteDepth=0,!e.ownerDocument)throw new Error(\"Cloned element does not have an owner document\");this.documentElement=this.cloneNode(e.ownerDocument.documentElement)}return e.prototype.toIFrame=function(e,t){var n=this,o=Hi(e,t);if(!o.contentWindow)return Promise.reject(\"Unable to find iframe window\");var a=e.defaultView.pageXOffset,A=e.defaultView.pageYOffset,s=o.contentWindow,l=s.document,u=Ti(o).then((function(){return r(n,void 0,void 0,(function(){var e;return i(this,(function(n){switch(n.label){case 0:return this.scrolledElements.forEach(Ri),s&&(s.scrollTo(t.left,t.top),!/(iPad|iPhone|iPod)/g.test(navigator.userAgent)||s.scrollY===t.top&&s.scrollX===t.left||(l.documentElement.style.top=-t.top+\"px\",l.documentElement.style.left=-t.left+\"px\",l.documentElement.style.position=\"absolute\")),e=this.options.onclone,\"undefined\"===typeof this.clonedReferenceElement?[2,Promise.reject(\"Error finding the \"+this.referenceElement.nodeName+\" in the cloned document\")]:l.fonts&&l.fonts.ready?[4,l.fonts.ready]:[3,2];case 1:n.sent(),n.label=2;case 2:return\"function\"===typeof e?[2,Promise.resolve().then((function(){return e(l)})).then((function(){return o}))]:[2,o]}}))}))}));return l.open(),l.write(_i(document.doctype)+\"<html></html>\"),Mi(this.referenceElement.ownerDocument,a,A),l.replaceChild(l.adoptNode(this.documentElement),l.documentElement),l.close(),u},e.prototype.createElementClone=function(e){if(ci(e))return this.createCanvasClone(e);if(pi(e))return this.createStyleClone(e);var t=e.cloneNode(!1);return fi(t)&&\"lazy\"===t.loading&&(t.loading=\"eager\"),t},e.prototype.createStyleClone=function(e){try{var t=e.sheet;if(t&&t.cssRules){var n=[].slice.call(t.cssRules,0).reduce((function(e,t){return t&&\"string\"===typeof t.cssText?e+t.cssText:e}),\"\"),r=e.cloneNode(!1);return r.textContent=n,r}}catch(i){if(Qt.getInstance(this.options.id).error(\"Unable to access cssRules property\",i),\"SecurityError\"!==i.name)throw i}return e.cloneNode(!1)},e.prototype.createCanvasClone=function(e){if(this.options.inlineImages&&e.ownerDocument){var t=e.ownerDocument.createElement(\"img\");try{return t.src=e.toDataURL(),t}catch(o){Qt.getInstance(this.options.id).info(\"Unable to clone canvas contents, canvas is tainted\")}}var n=e.cloneNode(!1);try{n.width=e.width,n.height=e.height;var r=e.getContext(\"2d\"),i=n.getContext(\"2d\");return i&&(r?i.putImageData(r.getImageData(0,0,e.width,e.height),0,0):i.drawImage(e,0,0)),n}catch(o){}return n},e.prototype.cloneNode=function(e){if(ni(e))return document.createTextNode(e.data);if(!e.ownerDocument)return e.cloneNode(!1);var t=e.ownerDocument.defaultView;if(t&&ri(e)&&(ii(e)||oi(e))){var n=this.createElementClone(e),r=t.getComputedStyle(e),i=t.getComputedStyle(e,\":before\"),o=t.getComputedStyle(e,\":after\");this.referenceElement===e&&ii(n)&&(this.clonedReferenceElement=n),ui(n)&&ki(n);for(var a=this.counters.parse(new xr(r)),A=this.resolvePseudoContent(e,n,i,hr.BEFORE),s=e.firstChild;s;s=s.nextSibling)ri(s)&&(hi(s)||s.hasAttribute(\"data-html2canvas-ignore\")||\"function\"===typeof this.options.ignoreElements&&this.options.ignoreElements(s))||this.options.copyStyles&&ri(s)&&pi(s)||n.appendChild(this.cloneNode(s));A&&n.insertBefore(A,n.firstChild);var l=this.resolvePseudoContent(e,n,o,hr.AFTER);return l&&n.appendChild(l),this.counters.pop(a),r&&(this.options.copyStyles||oi(e))&&!di(e)&&Ni(r,n),0===e.scrollTop&&0===e.scrollLeft||this.scrolledElements.push([n,e.scrollLeft,e.scrollTop]),(gi(e)||vi(e))&&(gi(n)||vi(n))&&(n.value=e.value),n}return e.cloneNode(!1)},e.prototype.resolvePseudoContent=function(e,t,n,r){var i=this;if(n){var o=n.content,a=t.ownerDocument;if(a&&o&&\"none\"!==o&&\"-moz-alt-content\"!==o&&\"none\"!==n.display){this.counters.parse(new xr(n));var A=new Qr(n),s=a.createElement(\"html2canvaspseudoelement\");Ni(n,s),A.content.forEach((function(t){if(t.type===f.STRING_TOKEN)s.appendChild(a.createTextNode(t.value));else if(t.type===f.URL_TOKEN){var n=a.createElement(\"img\");n.src=t.value,n.style.opacity=\"1\",s.appendChild(n)}else if(t.type===f.FUNCTION){if(\"attr\"===t.name){var r=t.values.filter(Ne);r.length&&s.appendChild(a.createTextNode(e.getAttribute(r[0].value)||\"\"))}else if(\"counter\"===t.name){var o=t.values.filter(De),l=o[0],u=o[1];if(l&&Ne(l)){var c=i.counters.getCounterValue(l.value),d=u&&Ne(u)?On.parse(u.value):Fn.DECIMAL;s.appendChild(a.createTextNode(Ui(c,d,!1)))}}else if(\"counters\"===t.name){var p=t.values.filter(De),h=(l=p[0],p[1]);if(u=p[2],l&&Ne(l)){var g=i.counters.getCounterValues(l.value),v=u&&Ne(u)?On.parse(u.value):Fn.DECIMAL,B=h&&h.type===f.STRING_TOKEN?h.value:\"\",m=g.map((function(e){return Ui(e,v,!1)})).join(B);s.appendChild(a.createTextNode(m))}}}else if(t.type===f.IDENT_TOKEN)switch(t.value){case\"open-quote\":s.appendChild(a.createTextNode(Er(A.quotes,i.quoteDepth++,!0)));break;case\"close-quote\":s.appendChild(a.createTextNode(Er(A.quotes,--i.quoteDepth,!1)));break;default:s.appendChild(a.createTextNode(t.value))}})),s.className=Di+\" \"+Pi;var l=r===hr.BEFORE?\" \"+Di:\" \"+Pi;return oi(t)?t.className.baseValue+=l:t.className+=l,s}}},e.destroy=function(e){return!!e.parentNode&&(e.parentNode.removeChild(e),!0)},e}();!function(e){e[e.BEFORE=0]=\"BEFORE\",e[e.AFTER=1]=\"AFTER\"}(hr||(hr={}));var Oi,Hi=function(e,t){var n=e.createElement(\"iframe\");return n.className=\"html2canvas-container\",n.style.visibility=\"hidden\",n.style.position=\"fixed\",n.style.left=\"-10000px\",n.style.top=\"0px\",n.style.border=\"0\",n.width=t.width.toString(),n.height=t.height.toString(),n.scrolling=\"no\",n.setAttribute(\"data-html2canvas-ignore\",\"true\"),e.body.appendChild(n),n},Ti=function(e){return new Promise((function(t,n){var r=e.contentWindow;if(!r)return n(\"No window assigned for iframe\");var i=r.document;r.onload=e.onload=i.onreadystatechange=function(){r.onload=e.onload=i.onreadystatechange=null;var n=setInterval((function(){i.body.childNodes.length>0&&\"complete\"===i.readyState&&(clearInterval(n),t(e))}),50)}}))},Ni=function(e,t){for(var n=e.length-1;n>=0;n--){var r=e.item(n);\"content\"!==r&&t.style.setProperty(r,e.getPropertyValue(r))}return t},_i=function(e){var t=\"\";return e&&(t+=\"<!DOCTYPE \",e.name&&(t+=e.name),e.internalSubset&&(t+=e.internalSubset),e.publicId&&(t+='\"'+e.publicId+'\"'),e.systemId&&(t+='\"'+e.systemId+'\"'),t+=\">\"),t},Mi=function(e,t,n){e&&e.defaultView&&(t!==e.defaultView.pageXOffset||n!==e.defaultView.pageYOffset)&&e.defaultView.scrollTo(t,n)},Ri=function(e){var t=e[0],n=e[1],r=e[2];t.scrollLeft=n,t.scrollTop=r},Di=\"___html2canvas___pseudoelement_before\",Pi=\"___html2canvas___pseudoelement_after\",ki=function(e){Ii(e,\".\"+Di+':before{\\n    content: \"\" !important;\\n    display: none !important;\\n}\\n         .'+Pi+':after{\\n    content: \"\" !important;\\n    display: none !important;\\n}')},Ii=function(e,t){var n=e.ownerDocument;if(n){var r=n.createElement(\"style\");r.textContent=t,e.appendChild(r)}};!function(e){e[e.VECTOR=0]=\"VECTOR\",e[e.BEZIER_CURVE=1]=\"BEZIER_CURVE\"}(Oi||(Oi={}));var Ki,Li=function(e,t){return e.length===t.length&&e.some((function(e,n){return e===t[n]}))},zi=function(){function e(e,t){this.type=Oi.VECTOR,this.x=e,this.y=t}return e.prototype.add=function(t,n){return new e(this.x+t,this.y+n)},e}(),ji=function(e,t,n){return new zi(e.x+(t.x-e.x)*n,e.y+(t.y-e.y)*n)},Xi=function(){function e(e,t,n,r){this.type=Oi.BEZIER_CURVE,this.start=e,this.startControl=t,this.endControl=n,this.end=r}return e.prototype.subdivide=function(t,n){var r=ji(this.start,this.startControl,t),i=ji(this.startControl,this.endControl,t),o=ji(this.endControl,this.end,t),a=ji(r,i,t),A=ji(i,o,t),s=ji(a,A,t);return n?new e(this.start,r,a,s):new e(s,A,o,this.end)},e.prototype.add=function(t,n){return new e(this.start.add(t,n),this.startControl.add(t,n),this.endControl.add(t,n),this.end.add(t,n))},e.prototype.reverse=function(){return new e(this.end,this.endControl,this.startControl,this.start)},e}(),Gi=function(e){return e.type===Oi.BEZIER_CURVE},Vi=function(e){var t=e.styles,n=e.bounds,r=Ge(t.borderTopLeftRadius,n.width,n.height),i=r[0],o=r[1],a=Ge(t.borderTopRightRadius,n.width,n.height),A=a[0],s=a[1],l=Ge(t.borderBottomRightRadius,n.width,n.height),u=l[0],c=l[1],f=Ge(t.borderBottomLeftRadius,n.width,n.height),d=f[0],p=f[1],h=[];h.push((i+A)/n.width),h.push((d+u)/n.width),h.push((o+p)/n.height),h.push((s+c)/n.height);var g=Math.max.apply(Math,h);g>1&&(i/=g,o/=g,A/=g,s/=g,u/=g,c/=g,d/=g,p/=g);var v=n.width-A,B=n.height-c,m=n.width-u,b=n.height-p,w=t.borderTopWidth,E=t.borderRightWidth,y=t.borderBottomWidth,C=t.borderLeftWidth,Q=Ve(t.paddingTop,e.bounds.width),x=Ve(t.paddingRight,e.bounds.width),F=Ve(t.paddingBottom,e.bounds.width),U=Ve(t.paddingLeft,e.bounds.width);this.topLeftBorderBox=i>0||o>0?Yi(n.left,n.top,i,o,Ki.TOP_LEFT):new zi(n.left,n.top),this.topRightBorderBox=A>0||s>0?Yi(n.left+v,n.top,A,s,Ki.TOP_RIGHT):new zi(n.left+n.width,n.top),this.bottomRightBorderBox=u>0||c>0?Yi(n.left+m,n.top+B,u,c,Ki.BOTTOM_RIGHT):new zi(n.left+n.width,n.top+n.height),this.bottomLeftBorderBox=d>0||p>0?Yi(n.left,n.top+b,d,p,Ki.BOTTOM_LEFT):new zi(n.left,n.top+n.height),this.topLeftPaddingBox=i>0||o>0?Yi(n.left+C,n.top+w,Math.max(0,i-C),Math.max(0,o-w),Ki.TOP_LEFT):new zi(n.left+C,n.top+w),this.topRightPaddingBox=A>0||s>0?Yi(n.left+Math.min(v,n.width+C),n.top+w,v>n.width+C?0:A-C,s-w,Ki.TOP_RIGHT):new zi(n.left+n.width-E,n.top+w),this.bottomRightPaddingBox=u>0||c>0?Yi(n.left+Math.min(m,n.width-C),n.top+Math.min(B,n.height+w),Math.max(0,u-E),c-y,Ki.BOTTOM_RIGHT):new zi(n.left+n.width-E,n.top+n.height-y),this.bottomLeftPaddingBox=d>0||p>0?Yi(n.left+C,n.top+b,Math.max(0,d-C),p-y,Ki.BOTTOM_LEFT):new zi(n.left+C,n.top+n.height-y),this.topLeftContentBox=i>0||o>0?Yi(n.left+C+U,n.top+w+Q,Math.max(0,i-(C+U)),Math.max(0,o-(w+Q)),Ki.TOP_LEFT):new zi(n.left+C+U,n.top+w+Q),this.topRightContentBox=A>0||s>0?Yi(n.left+Math.min(v,n.width+C+U),n.top+w+Q,v>n.width+C+U?0:A-C+U,s-(w+Q),Ki.TOP_RIGHT):new zi(n.left+n.width-(E+x),n.top+w+Q),this.bottomRightContentBox=u>0||c>0?Yi(n.left+Math.min(m,n.width-(C+U)),n.top+Math.min(B,n.height+w+Q),Math.max(0,u-(E+x)),c-(y+F),Ki.BOTTOM_RIGHT):new zi(n.left+n.width-(E+x),n.top+n.height-(y+F)),this.bottomLeftContentBox=d>0||p>0?Yi(n.left+C+U,n.top+b,Math.max(0,d-(C+U)),p-(y+F),Ki.BOTTOM_LEFT):new zi(n.left+C+U,n.top+n.height-(y+F))};!function(e){e[e.TOP_LEFT=0]=\"TOP_LEFT\",e[e.TOP_RIGHT=1]=\"TOP_RIGHT\",e[e.BOTTOM_RIGHT=2]=\"BOTTOM_RIGHT\",e[e.BOTTOM_LEFT=3]=\"BOTTOM_LEFT\"}(Ki||(Ki={}));var Yi=function(e,t,n,r,i){var o=(Math.sqrt(2)-1)/3*4,a=n*o,A=r*o,s=e+n,l=t+r;switch(i){case Ki.TOP_LEFT:return new Xi(new zi(e,l),new zi(e,l-A),new zi(s-a,t),new zi(s,t));case Ki.TOP_RIGHT:return new Xi(new zi(e,t),new zi(e+a,t),new zi(s,l-A),new zi(s,l));case Ki.BOTTOM_RIGHT:return new Xi(new zi(s,t),new zi(s,t+A),new zi(e+a,l),new zi(e,l));case Ki.BOTTOM_LEFT:default:return new Xi(new zi(s,l),new zi(s-a,l),new zi(e,t+A),new zi(e,t))}},Wi=function(e){return[e.topLeftBorderBox,e.topRightBorderBox,e.bottomRightBorderBox,e.bottomLeftBorderBox]},Ji=function(e){return[e.topLeftPaddingBox,e.topRightPaddingBox,e.bottomRightPaddingBox,e.bottomLeftPaddingBox]},qi=function(e,t,n){this.type=0,this.offsetX=e,this.offsetY=t,this.matrix=n,this.target=6},Zi=function(e,t){this.type=1,this.target=t,this.path=e},$i=function(e){this.element=e,this.inlineLevel=[],this.nonInlineLevel=[],this.negativeZIndex=[],this.zeroOrAutoZIndexOrTransformedOrOpacity=[],this.positiveZIndex=[],this.nonPositionedFloats=[],this.nonPositionedInlineLevel=[]},eo=function(){function e(e,t){if(this.container=e,this.effects=t.slice(0),this.curves=new Vi(e),null!==e.styles.transform){var n=e.bounds.left+e.styles.transformOrigin[0].number,r=e.bounds.top+e.styles.transformOrigin[1].number,i=e.styles.transform;this.effects.push(new qi(n,r,i))}if(e.styles.overflowX!==Sn.VISIBLE){var o=Wi(this.curves),a=Ji(this.curves);Li(o,a)?this.effects.push(new Zi(o,6)):(this.effects.push(new Zi(o,2)),this.effects.push(new Zi(a,4)))}}return e.prototype.getParentEffects=function(){var e=this.effects.slice(0);if(this.container.styles.overflowX!==Sn.VISIBLE){var t=Wi(this.curves),n=Ji(this.curves);Li(t,n)||e.push(new Zi(n,6))}return e},e}(),to=function(e,t){for(var n=e instanceof Lr?e.start:1,r=e instanceof Lr&&e.reversed,i=0;i<t.length;i++){var o=t[i];o.container instanceof Kr&&\"number\"===typeof o.container.value&&0!==o.container.value&&(n=o.container.value),o.listValue=Ui(n,o.container.styles.listStyleType,!0),n+=r?-1:1}},no=function(e){var t=new eo(e,[]),n=new $i(t),r=[];return function e(t,n,r,i){t.container.elements.forEach((function(o){var a=vr(o.flags,4),A=vr(o.flags,2),s=new eo(o,t.getParentEffects());vr(o.styles.display,2048)&&i.push(s);var l=vr(o.flags,8)?[]:i;if(a||A){var u=a||o.styles.isPositioned()?r:n,c=new $i(s);if(o.styles.isPositioned()||o.styles.opacity<1||o.styles.isTransformed()){var f=o.styles.zIndex.order;if(f<0){var d=0;u.negativeZIndex.some((function(e,t){return f>e.element.container.styles.zIndex.order?(d=t,!1):d>0})),u.negativeZIndex.splice(d,0,c)}else if(f>0){var p=0;u.positiveZIndex.some((function(e,t){return f>=e.element.container.styles.zIndex.order?(p=t+1,!1):p>0})),u.positiveZIndex.splice(p,0,c)}else u.zeroOrAutoZIndexOrTransformedOrOpacity.push(c)}else o.styles.isFloating()?u.nonPositionedFloats.push(c):u.nonPositionedInlineLevel.push(c);e(s,c,a?c:r,l)}else o.styles.isInlineLevel()?n.inlineLevel.push(s):n.nonInlineLevel.push(s),e(s,n,r,l);vr(o.flags,8)&&to(o,l)}))}(t,n,n,r),to(t.container,r),n},ro=function(e,t,n,r){var i=[];return Gi(e)?i.push(e.subdivide(.5,!1)):i.push(e),Gi(n)?i.push(n.subdivide(.5,!0)):i.push(n),Gi(r)?i.push(r.subdivide(.5,!0).reverse()):i.push(r),Gi(t)?i.push(t.subdivide(.5,!1).reverse()):i.push(t),i},io=function(e){var t=e.bounds,n=e.styles;return t.add(n.borderLeftWidth,n.borderTopWidth,-(n.borderRightWidth+n.borderLeftWidth),-(n.borderTopWidth+n.borderBottomWidth))},oo=function(e){var t=e.styles,n=e.bounds,r=Ve(t.paddingLeft,n.width),i=Ve(t.paddingRight,n.width),o=Ve(t.paddingTop,n.width),a=Ve(t.paddingBottom,n.width);return n.add(r+t.borderLeftWidth,o+t.borderTopWidth,-(t.borderRightWidth+t.borderLeftWidth+r+i),-(t.borderTopWidth+t.borderBottomWidth+o+a))},ao=function(e,t,n){var r=function(e,t){return 0===e?t.bounds:2===e?oo(t):io(t)}(uo(e.styles.backgroundOrigin,t),e),i=function(e,t){return e===at.BORDER_BOX?t.bounds:e===at.CONTENT_BOX?oo(t):io(t)}(uo(e.styles.backgroundClip,t),e),o=lo(uo(e.styles.backgroundSize,t),n,r),a=o[0],A=o[1],s=Ge(uo(e.styles.backgroundPosition,t),r.width-a,r.height-A);return[co(uo(e.styles.backgroundRepeat,t),s,o,r,i),Math.round(r.left+s[0]),Math.round(r.top+s[1]),a,A]},Ao=function(e){return Ne(e)&&e.value===zt.AUTO},so=function(e){return\"number\"===typeof e},lo=function(e,t,n){var r=t[0],i=t[1],o=t[2],a=e[0],A=e[1];if(Ke(a)&&A&&Ke(A))return[Ve(a,n.width),Ve(A,n.height)];var s=so(o);if(Ne(a)&&(a.value===zt.CONTAIN||a.value===zt.COVER))return so(o)?n.width/n.height<o!==(a.value===zt.COVER)?[n.width,n.width/o]:[n.height*o,n.height]:[n.width,n.height];var l=so(r),u=so(i),c=l||u;if(Ao(a)&&(!A||Ao(A)))return l&&u?[r,i]:s||c?c&&s?[l?r:i*o,u?i:r/o]:[l?r:n.width,u?i:n.height]:[n.width,n.height];if(s){var f=0,d=0;return Ke(a)?f=Ve(a,n.width):Ke(A)&&(d=Ve(A,n.height)),Ao(a)?f=d*o:A&&!Ao(A)||(d=f/o),[f,d]}var p=null,h=null;if(Ke(a)?p=Ve(a,n.width):A&&Ke(A)&&(h=Ve(A,n.height)),null===p||A&&!Ao(A)||(h=l&&u?p/r*i:n.height),null!==h&&Ao(a)&&(p=l&&u?h/i*r:n.width),null!==p&&null!==h)return[p,h];throw new Error(\"Unable to calculate background-size for element\")},uo=function(e,t){var n=e[t];return\"undefined\"===typeof n?e[0]:n},co=function(e,t,n,r,i){var o=t[0],a=t[1],A=n[0],s=n[1];switch(e){case Dt.REPEAT_X:return[new zi(Math.round(r.left),Math.round(r.top+a)),new zi(Math.round(r.left+r.width),Math.round(r.top+a)),new zi(Math.round(r.left+r.width),Math.round(s+r.top+a)),new zi(Math.round(r.left),Math.round(s+r.top+a))];case Dt.REPEAT_Y:return[new zi(Math.round(r.left+o),Math.round(r.top)),new zi(Math.round(r.left+o+A),Math.round(r.top)),new zi(Math.round(r.left+o+A),Math.round(r.height+r.top)),new zi(Math.round(r.left+o),Math.round(r.height+r.top))];case Dt.NO_REPEAT:return[new zi(Math.round(r.left+o),Math.round(r.top+a)),new zi(Math.round(r.left+o+A),Math.round(r.top+a)),new zi(Math.round(r.left+o+A),Math.round(r.top+a+s)),new zi(Math.round(r.left+o),Math.round(r.top+a+s))];default:return[new zi(Math.round(i.left),Math.round(i.top)),new zi(Math.round(i.left+i.width),Math.round(i.top)),new zi(Math.round(i.left+i.width),Math.round(i.height+i.top)),new zi(Math.round(i.left),Math.round(i.height+i.top))]}},fo=function(){function e(e){this._data={},this._document=e}return e.prototype.parseMetrics=function(e,t){var n=this._document.createElement(\"div\"),r=this._document.createElement(\"img\"),i=this._document.createElement(\"span\"),o=this._document.body;n.style.visibility=\"hidden\",n.style.fontFamily=e,n.style.fontSize=t,n.style.margin=\"0\",n.style.padding=\"0\",o.appendChild(n),r.src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",r.width=1,r.height=1,r.style.margin=\"0\",r.style.padding=\"0\",r.style.verticalAlign=\"baseline\",i.style.fontFamily=e,i.style.fontSize=t,i.style.margin=\"0\",i.style.padding=\"0\",i.appendChild(this._document.createTextNode(\"Hidden Text\")),n.appendChild(i),n.appendChild(r);var a=r.offsetTop-i.offsetTop+2;n.removeChild(i),n.appendChild(this._document.createTextNode(\"Hidden Text\")),n.style.lineHeight=\"normal\",r.style.verticalAlign=\"super\";var A=r.offsetTop-n.offsetTop+2;return o.removeChild(n),{baseline:a,middle:A}},e.prototype.getMetrics=function(e,t){var n=e+\" \"+t;return\"undefined\"===typeof this._data[n]&&(this._data[n]=this.parseMetrics(e,t)),this._data[n]},e}(),po=function(){function e(e){this._activeEffects=[],this.canvas=e.canvas?e.canvas:document.createElement(\"canvas\"),this.ctx=this.canvas.getContext(\"2d\"),this.options=e,e.canvas||(this.canvas.width=Math.floor(e.width*e.scale),this.canvas.height=Math.floor(e.height*e.scale),this.canvas.style.width=e.width+\"px\",this.canvas.style.height=e.height+\"px\"),this.fontMetrics=new fo(document),this.ctx.scale(this.options.scale,this.options.scale),this.ctx.translate(-e.x+e.scrollX,-e.y+e.scrollY),this.ctx.textBaseline=\"bottom\",this._activeEffects=[],Qt.getInstance(e.id).debug(\"Canvas renderer initialized (\"+e.width+\"x\"+e.height+\" at \"+e.x+\",\"+e.y+\") with scale \"+e.scale)}return e.prototype.applyEffects=function(e,t){for(var n=this;this._activeEffects.length;)this.popEffect();e.filter((function(e){return vr(e.target,t)})).forEach((function(e){return n.applyEffect(e)}))},e.prototype.applyEffect=function(e){this.ctx.save(),function(e){return 0===e.type}(e)&&(this.ctx.translate(e.offsetX,e.offsetY),this.ctx.transform(e.matrix[0],e.matrix[1],e.matrix[2],e.matrix[3],e.matrix[4],e.matrix[5]),this.ctx.translate(-e.offsetX,-e.offsetY)),function(e){return 1===e.type}(e)&&(this.path(e.path),this.ctx.clip()),this._activeEffects.push(e)},e.prototype.popEffect=function(){this._activeEffects.pop(),this.ctx.restore()},e.prototype.renderStack=function(e){return r(this,void 0,void 0,(function(){var t;return i(this,(function(n){switch(n.label){case 0:return(t=e.element.container.styles).isVisible()?(this.ctx.globalAlpha=t.opacity,[4,this.renderStackContent(e)]):[3,2];case 1:n.sent(),n.label=2;case 2:return[2]}}))}))},e.prototype.renderNode=function(e){return r(this,void 0,void 0,(function(){return i(this,(function(t){switch(t.label){case 0:return e.container.styles.isVisible()?[4,this.renderNodeBackgroundAndBorders(e)]:[3,3];case 1:return t.sent(),[4,this.renderNodeContent(e)];case 2:t.sent(),t.label=3;case 3:return[2]}}))}))},e.prototype.renderTextWithLetterSpacing=function(e,t){var n=this;0===t?this.ctx.fillText(e.text,e.bounds.left,e.bounds.top+e.bounds.height):A(e.text).map((function(e){return s(e)})).reduce((function(t,r){return n.ctx.fillText(r,t,e.bounds.top+e.bounds.height),t+n.ctx.measureText(r).width}),e.bounds.left)},e.prototype.createFontStyle=function(e){var t=e.fontVariant.filter((function(e){return\"normal\"===e||\"small-caps\"===e})).join(\"\"),n=e.fontFamily.join(\", \"),r=He(e.fontSize)?\"\"+e.fontSize.number+e.fontSize.unit:e.fontSize.number+\"px\";return[[e.fontStyle,t,e.fontWeight,r,n].join(\" \"),n,r]},e.prototype.renderTextNode=function(e,t){return r(this,void 0,void 0,(function(){var n,r,o,a,A=this;return i(this,(function(i){return n=this.createFontStyle(t),r=n[0],o=n[1],a=n[2],this.ctx.font=r,e.textBounds.forEach((function(e){A.ctx.fillStyle=et(t.color),A.renderTextWithLetterSpacing(e,t.letterSpacing);var n=t.textShadow;n.length&&e.text.trim().length&&(n.slice(0).reverse().forEach((function(t){A.ctx.shadowColor=et(t.color),A.ctx.shadowOffsetX=t.offsetX.number*A.options.scale,A.ctx.shadowOffsetY=t.offsetY.number*A.options.scale,A.ctx.shadowBlur=t.blur.number,A.ctx.fillText(e.text,e.bounds.left,e.bounds.top+e.bounds.height)})),A.ctx.shadowColor=\"\",A.ctx.shadowOffsetX=0,A.ctx.shadowOffsetY=0,A.ctx.shadowBlur=0),t.textDecorationLine.length&&(A.ctx.fillStyle=et(t.textDecorationColor||t.color),t.textDecorationLine.forEach((function(t){switch(t){case 1:var n=A.fontMetrics.getMetrics(o,a).baseline;A.ctx.fillRect(e.bounds.left,Math.round(e.bounds.top+n),e.bounds.width,1);break;case 2:A.ctx.fillRect(e.bounds.left,Math.round(e.bounds.top),e.bounds.width,1);break;case 3:var r=A.fontMetrics.getMetrics(o,a).middle;A.ctx.fillRect(e.bounds.left,Math.ceil(e.bounds.top+r),e.bounds.width,1)}})))})),[2]}))}))},e.prototype.renderReplacedElement=function(e,t,n){if(n&&e.intrinsicWidth>0&&e.intrinsicHeight>0){var r=oo(e),i=Ji(t);this.path(i),this.ctx.save(),this.ctx.clip(),this.ctx.drawImage(n,0,0,e.intrinsicWidth,e.intrinsicHeight,r.left,r.top,r.width,r.height),this.ctx.restore()}},e.prototype.renderNodeContent=function(t){return r(this,void 0,void 0,(function(){var n,r,a,A,s,l,u,c,d,p,h,g,v,B;return i(this,(function(i){switch(i.label){case 0:this.applyEffects(t.effects,4),n=t.container,r=t.curves,a=n.styles,A=0,s=n.textNodes,i.label=1;case 1:return A<s.length?(l=s[A],[4,this.renderTextNode(l,a)]):[3,4];case 2:i.sent(),i.label=3;case 3:return A++,[3,1];case 4:if(!(n instanceof Pr))return[3,8];i.label=5;case 5:return i.trys.push([5,7,,8]),[4,this.options.cache.match(n.src)];case 6:return g=i.sent(),this.renderReplacedElement(n,r,g),[3,8];case 7:return i.sent(),Qt.getInstance(this.options.id).error(\"Error loading image \"+n.src),[3,8];case 8:if(n instanceof kr&&this.renderReplacedElement(n,r,n.canvas),!(n instanceof Ir))return[3,12];i.label=9;case 9:return i.trys.push([9,11,,12]),[4,this.options.cache.match(n.svg)];case 10:return g=i.sent(),this.renderReplacedElement(n,r,g),[3,12];case 11:return i.sent(),Qt.getInstance(this.options.id).error(\"Error loading svg \"+n.svg.substring(0,255)),[3,12];case 12:return n instanceof Jr&&n.tree?[4,new e({id:this.options.id,scale:this.options.scale,backgroundColor:n.backgroundColor,x:0,y:0,scrollX:0,scrollY:0,width:n.width,height:n.height,cache:this.options.cache,windowWidth:n.width,windowHeight:n.height}).render(n.tree)]:[3,14];case 13:u=i.sent(),n.width&&n.height&&this.ctx.drawImage(u,0,0,n.width,n.height,n.bounds.left,n.bounds.top,n.bounds.width,n.bounds.height),i.label=14;case 14:if(n instanceof Gr&&(c=Math.min(n.bounds.width,n.bounds.height),\"checkbox\"===n.type?n.checked&&(this.ctx.save(),this.path([new zi(n.bounds.left+.39363*c,n.bounds.top+.79*c),new zi(n.bounds.left+.16*c,n.bounds.top+.5549*c),new zi(n.bounds.left+.27347*c,n.bounds.top+.44071*c),new zi(n.bounds.left+.39694*c,n.bounds.top+.5649*c),new zi(n.bounds.left+.72983*c,n.bounds.top+.23*c),new zi(n.bounds.left+.84*c,n.bounds.top+.34085*c),new zi(n.bounds.left+.39363*c,n.bounds.top+.79*c)]),this.ctx.fillStyle=et(707406591),this.ctx.fill(),this.ctx.restore()):\"radio\"===n.type&&n.checked&&(this.ctx.save(),this.ctx.beginPath(),this.ctx.arc(n.bounds.left+c/2,n.bounds.top+c/2,c/4,0,2*Math.PI,!0),this.ctx.fillStyle=et(707406591),this.ctx.fill(),this.ctx.restore())),ho(n)&&n.value.length){switch(this.ctx.font=this.createFontStyle(a)[0],this.ctx.fillStyle=et(a.color),this.ctx.textBaseline=\"middle\",this.ctx.textAlign=vo(n.styles.textAlign),B=oo(n),d=0,n.styles.textAlign){case Pn.CENTER:d+=B.width/2;break;case Pn.RIGHT:d+=B.width}p=B.add(d,0,0,-B.height/2+1),this.ctx.save(),this.path([new zi(B.left,B.top),new zi(B.left+B.width,B.top),new zi(B.left+B.width,B.top+B.height),new zi(B.left,B.top+B.height)]),this.ctx.clip(),this.renderTextWithLetterSpacing(new Sr(n.value,p),a.letterSpacing),this.ctx.restore(),this.ctx.textBaseline=\"bottom\",this.ctx.textAlign=\"left\"}if(!vr(n.styles.display,2048))return[3,20];if(null===n.styles.listStyleImage)return[3,19];if((h=n.styles.listStyleImage).type!==ut.URL)return[3,18];g=void 0,v=h.url,i.label=15;case 15:return i.trys.push([15,17,,18]),[4,this.options.cache.match(v)];case 16:return g=i.sent(),this.ctx.drawImage(g,n.bounds.left-(g.width+10),n.bounds.top),[3,18];case 17:return i.sent(),Qt.getInstance(this.options.id).error(\"Error loading list-style-image \"+v),[3,18];case 18:return[3,20];case 19:t.listValue&&n.styles.listStyleType!==Fn.NONE&&(this.ctx.font=this.createFontStyle(a)[0],this.ctx.fillStyle=et(a.color),this.ctx.textBaseline=\"middle\",this.ctx.textAlign=\"right\",B=new o(n.bounds.left,n.bounds.top+Ve(n.styles.paddingTop,n.bounds.width),n.bounds.width,function(e,t){return Ne(e)&&\"normal\"===e.value?1.2*t:e.type===f.NUMBER_TOKEN?t*e.number:Ke(e)?Ve(e,t):t}(a.lineHeight,a.fontSize.number)/2+1),this.renderTextWithLetterSpacing(new Sr(t.listValue,B),a.letterSpacing),this.ctx.textBaseline=\"bottom\",this.ctx.textAlign=\"left\"),i.label=20;case 20:return[2]}}))}))},e.prototype.renderStackContent=function(e){return r(this,void 0,void 0,(function(){var t,n,r,o,a,A,s,l,u,c,f,d,p,h,g;return i(this,(function(i){switch(i.label){case 0:return[4,this.renderNodeBackgroundAndBorders(e.element)];case 1:i.sent(),t=0,n=e.negativeZIndex,i.label=2;case 2:return t<n.length?(g=n[t],[4,this.renderStack(g)]):[3,5];case 3:i.sent(),i.label=4;case 4:return t++,[3,2];case 5:return[4,this.renderNodeContent(e.element)];case 6:i.sent(),r=0,o=e.nonInlineLevel,i.label=7;case 7:return r<o.length?(g=o[r],[4,this.renderNode(g)]):[3,10];case 8:i.sent(),i.label=9;case 9:return r++,[3,7];case 10:a=0,A=e.nonPositionedFloats,i.label=11;case 11:return a<A.length?(g=A[a],[4,this.renderStack(g)]):[3,14];case 12:i.sent(),i.label=13;case 13:return a++,[3,11];case 14:s=0,l=e.nonPositionedInlineLevel,i.label=15;case 15:return s<l.length?(g=l[s],[4,this.renderStack(g)]):[3,18];case 16:i.sent(),i.label=17;case 17:return s++,[3,15];case 18:u=0,c=e.inlineLevel,i.label=19;case 19:return u<c.length?(g=c[u],[4,this.renderNode(g)]):[3,22];case 20:i.sent(),i.label=21;case 21:return u++,[3,19];case 22:f=0,d=e.zeroOrAutoZIndexOrTransformedOrOpacity,i.label=23;case 23:return f<d.length?(g=d[f],[4,this.renderStack(g)]):[3,26];case 24:i.sent(),i.label=25;case 25:return f++,[3,23];case 26:p=0,h=e.positiveZIndex,i.label=27;case 27:return p<h.length?(g=h[p],[4,this.renderStack(g)]):[3,30];case 28:i.sent(),i.label=29;case 29:return p++,[3,27];case 30:return[2]}}))}))},e.prototype.mask=function(e){this.ctx.beginPath(),this.ctx.moveTo(0,0),this.ctx.lineTo(this.canvas.width,0),this.ctx.lineTo(this.canvas.width,this.canvas.height),this.ctx.lineTo(0,this.canvas.height),this.ctx.lineTo(0,0),this.formatPath(e.slice(0).reverse()),this.ctx.closePath()},e.prototype.path=function(e){this.ctx.beginPath(),this.formatPath(e),this.ctx.closePath()},e.prototype.formatPath=function(e){var t=this;e.forEach((function(e,n){var r=Gi(e)?e.start:e;0===n?t.ctx.moveTo(r.x,r.y):t.ctx.lineTo(r.x,r.y),Gi(e)&&t.ctx.bezierCurveTo(e.startControl.x,e.startControl.y,e.endControl.x,e.endControl.y,e.end.x,e.end.y)}))},e.prototype.renderRepeat=function(e,t,n,r){this.path(e),this.ctx.fillStyle=t,this.ctx.translate(n,r),this.ctx.fill(),this.ctx.translate(-n,-r)},e.prototype.resizeImage=function(e,t,n){if(e.width===t&&e.height===n)return e;var r=this.canvas.ownerDocument.createElement(\"canvas\");return r.width=t,r.height=n,r.getContext(\"2d\").drawImage(e,0,0,e.width,e.height,0,0,t,n),r},e.prototype.renderBackgroundImage=function(e){return r(this,void 0,void 0,(function(){var t,n,r,o,a,A;return i(this,(function(s){switch(s.label){case 0:t=e.styles.backgroundImage.length-1,n=function(n){var o,a,A,s,l,u,c,f,d,p,h,g,v,B,m,b,w,E,y,C,Q,x,F,U,S,O,H,T,N,_,M;return i(this,(function(i){switch(i.label){case 0:if(n.type!==ut.URL)return[3,5];o=void 0,a=n.url,i.label=1;case 1:return i.trys.push([1,3,,4]),[4,r.options.cache.match(a)];case 2:return o=i.sent(),[3,4];case 3:return i.sent(),Qt.getInstance(r.options.id).error(\"Error loading background-image \"+a),[3,4];case 4:return o&&(A=ao(e,t,[o.width,o.height,o.width/o.height]),b=A[0],x=A[1],F=A[2],y=A[3],C=A[4],B=r.ctx.createPattern(r.resizeImage(o,y,C),\"repeat\"),r.renderRepeat(b,B,x,F)),[3,6];case 5:n.type===ut.LINEAR_GRADIENT?(s=ao(e,t,[null,null,null]),b=s[0],x=s[1],F=s[2],y=s[3],C=s[4],l=vt(n.angle,y,C),u=l[0],c=l[1],f=l[2],d=l[3],p=l[4],(h=document.createElement(\"canvas\")).width=y,h.height=C,g=h.getContext(\"2d\"),v=g.createLinearGradient(c,d,f,p),gt(n.stops,u).forEach((function(e){return v.addColorStop(e.stop,et(e.color))})),g.fillStyle=v,g.fillRect(0,0,y,C),y>0&&C>0&&(B=r.ctx.createPattern(h,\"repeat\"),r.renderRepeat(b,B,x,F))):function(e){return e.type===ut.RADIAL_GRADIENT}(n)&&(m=ao(e,t,[null,null,null]),b=m[0],w=m[1],E=m[2],y=m[3],C=m[4],Q=0===n.position.length?[je]:n.position,x=Ve(Q[0],y),F=Ve(Q[Q.length-1],C),U=function(e,t,n,r,i){var o=0,a=0;switch(e.size){case ft.CLOSEST_SIDE:e.shape===ct.CIRCLE?o=a=Math.min(Math.abs(t),Math.abs(t-r),Math.abs(n),Math.abs(n-i)):e.shape===ct.ELLIPSE&&(o=Math.min(Math.abs(t),Math.abs(t-r)),a=Math.min(Math.abs(n),Math.abs(n-i)));break;case ft.CLOSEST_CORNER:if(e.shape===ct.CIRCLE)o=a=Math.min(Bt(t,n),Bt(t,n-i),Bt(t-r,n),Bt(t-r,n-i));else if(e.shape===ct.ELLIPSE){var A=Math.min(Math.abs(n),Math.abs(n-i))/Math.min(Math.abs(t),Math.abs(t-r)),s=mt(r,i,t,n,!0),l=s[0],u=s[1];a=A*(o=Bt(l-t,(u-n)/A))}break;case ft.FARTHEST_SIDE:e.shape===ct.CIRCLE?o=a=Math.max(Math.abs(t),Math.abs(t-r),Math.abs(n),Math.abs(n-i)):e.shape===ct.ELLIPSE&&(o=Math.max(Math.abs(t),Math.abs(t-r)),a=Math.max(Math.abs(n),Math.abs(n-i)));break;case ft.FARTHEST_CORNER:if(e.shape===ct.CIRCLE)o=a=Math.max(Bt(t,n),Bt(t,n-i),Bt(t-r,n),Bt(t-r,n-i));else if(e.shape===ct.ELLIPSE){A=Math.max(Math.abs(n),Math.abs(n-i))/Math.max(Math.abs(t),Math.abs(t-r));var c=mt(r,i,t,n,!1);l=c[0],u=c[1],a=A*(o=Bt(l-t,(u-n)/A))}}return Array.isArray(e.size)&&(o=Ve(e.size[0],r),a=2===e.size.length?Ve(e.size[1],i):o),[o,a]}(n,x,F,y,C),S=U[0],O=U[1],S>0&&S>0&&(H=r.ctx.createRadialGradient(w+x,E+F,0,w+x,E+F,S),gt(n.stops,2*S).forEach((function(e){return H.addColorStop(e.stop,et(e.color))})),r.path(b),r.ctx.fillStyle=H,S!==O?(T=e.bounds.left+.5*e.bounds.width,N=e.bounds.top+.5*e.bounds.height,M=1/(_=O/S),r.ctx.save(),r.ctx.translate(T,N),r.ctx.transform(1,0,0,_,0,0),r.ctx.translate(-T,-N),r.ctx.fillRect(w,M*(E-N)+N,y,C*M),r.ctx.restore()):r.ctx.fill())),i.label=6;case 6:return t--,[2]}}))},r=this,o=0,a=e.styles.backgroundImage.slice(0).reverse(),s.label=1;case 1:return o<a.length?(A=a[o],[5,n(A)]):[3,4];case 2:s.sent(),s.label=3;case 3:return o++,[3,1];case 4:return[2]}}))}))},e.prototype.renderBorder=function(e,t,n){return r(this,void 0,void 0,(function(){return i(this,(function(r){return this.path(function(e,t){switch(t){case 0:return ro(e.topLeftBorderBox,e.topLeftPaddingBox,e.topRightBorderBox,e.topRightPaddingBox);case 1:return ro(e.topRightBorderBox,e.topRightPaddingBox,e.bottomRightBorderBox,e.bottomRightPaddingBox);case 2:return ro(e.bottomRightBorderBox,e.bottomRightPaddingBox,e.bottomLeftBorderBox,e.bottomLeftPaddingBox);case 3:default:return ro(e.bottomLeftBorderBox,e.bottomLeftPaddingBox,e.topLeftBorderBox,e.topLeftPaddingBox)}}(n,t)),this.ctx.fillStyle=et(e),this.ctx.fill(),[2]}))}))},e.prototype.renderNodeBackgroundAndBorders=function(e){return r(this,void 0,void 0,(function(){var t,n,r,o,a,A,s,l,u=this;return i(this,(function(i){switch(i.label){case 0:return this.applyEffects(e.effects,2),t=e.container.styles,n=!$e(t.backgroundColor)||t.backgroundImage.length,r=[{style:t.borderTopStyle,color:t.borderTopColor},{style:t.borderRightStyle,color:t.borderRightColor},{style:t.borderBottomStyle,color:t.borderBottomColor},{style:t.borderLeftStyle,color:t.borderLeftColor}],o=go(uo(t.backgroundClip,0),e.curves),n||t.boxShadow.length?(this.ctx.save(),this.path(o),this.ctx.clip(),$e(t.backgroundColor)||(this.ctx.fillStyle=et(t.backgroundColor),this.ctx.fill()),[4,this.renderBackgroundImage(e.container)]):[3,2];case 1:i.sent(),this.ctx.restore(),t.boxShadow.slice(0).reverse().forEach((function(t){u.ctx.save();var n,r,i,o,a,A=Wi(e.curves),s=t.inset?0:1e4,l=(n=A,r=-s+(t.inset?1:-1)*t.spread.number,i=(t.inset?1:-1)*t.spread.number,o=t.spread.number*(t.inset?-2:2),a=t.spread.number*(t.inset?-2:2),n.map((function(e,t){switch(t){case 0:return e.add(r,i);case 1:return e.add(r+o,i);case 2:return e.add(r+o,i+a);case 3:return e.add(r,i+a)}return e})));t.inset?(u.path(A),u.ctx.clip(),u.mask(l)):(u.mask(A),u.ctx.clip(),u.path(l)),u.ctx.shadowOffsetX=t.offsetX.number+s,u.ctx.shadowOffsetY=t.offsetY.number,u.ctx.shadowColor=et(t.color),u.ctx.shadowBlur=t.blur.number,u.ctx.fillStyle=t.inset?et(t.color):\"rgba(0,0,0,1)\",u.ctx.fill(),u.ctx.restore()})),i.label=2;case 2:a=0,A=0,s=r,i.label=3;case 3:return A<s.length?(l=s[A]).style===Gt.NONE||$e(l.color)?[3,5]:[4,this.renderBorder(l.color,a,e.curves)]:[3,7];case 4:i.sent(),i.label=5;case 5:a++,i.label=6;case 6:return A++,[3,3];case 7:return[2]}}))}))},e.prototype.render=function(e){return r(this,void 0,void 0,(function(){var t;return i(this,(function(n){switch(n.label){case 0:return this.options.backgroundColor&&(this.ctx.fillStyle=et(this.options.backgroundColor),this.ctx.fillRect(this.options.x-this.options.scrollX,this.options.y-this.options.scrollY,this.options.width,this.options.height)),t=no(e),[4,this.renderStack(t)];case 1:return n.sent(),this.applyEffects([],2),[2,this.canvas]}}))}))},e}(),ho=function(e){return e instanceof Yr||e instanceof Vr||e instanceof Gr&&\"radio\"!==e.type&&\"checkbox\"!==e.type},go=function(e,t){switch(e){case at.BORDER_BOX:return Wi(t);case at.CONTENT_BOX:return function(e){return[e.topLeftContentBox,e.topRightContentBox,e.bottomRightContentBox,e.bottomLeftContentBox]}(t);case at.PADDING_BOX:default:return Ji(t)}},vo=function(e){switch(e){case Pn.CENTER:return\"center\";case Pn.RIGHT:return\"right\";case Pn.LEFT:default:return\"left\"}},Bo=function(){function e(e){this.canvas=e.canvas?e.canvas:document.createElement(\"canvas\"),this.ctx=this.canvas.getContext(\"2d\"),this.options=e,this.canvas.width=Math.floor(e.width*e.scale),this.canvas.height=Math.floor(e.height*e.scale),this.canvas.style.width=e.width+\"px\",this.canvas.style.height=e.height+\"px\",this.ctx.scale(this.options.scale,this.options.scale),this.ctx.translate(-e.x+e.scrollX,-e.y+e.scrollY),Qt.getInstance(e.id).debug(\"EXPERIMENTAL ForeignObject renderer initialized (\"+e.width+\"x\"+e.height+\" at \"+e.x+\",\"+e.y+\") with scale \"+e.scale)}return e.prototype.render=function(e){return r(this,void 0,void 0,(function(){var t,n;return i(this,(function(r){switch(r.label){case 0:return t=Et(Math.max(this.options.windowWidth,this.options.width)*this.options.scale,Math.max(this.options.windowHeight,this.options.height)*this.options.scale,this.options.scrollX*this.options.scale,this.options.scrollY*this.options.scale,e),[4,mo(t)];case 1:return n=r.sent(),this.options.backgroundColor&&(this.ctx.fillStyle=et(this.options.backgroundColor),this.ctx.fillRect(0,0,this.options.width*this.options.scale,this.options.height*this.options.scale)),this.ctx.drawImage(n,-this.options.x*this.options.scale,-this.options.y*this.options.scale),[2,this.canvas]}}))}))},e}(),mo=function(e){return new Promise((function(t,n){var r=new Image;r.onload=function(){t(r)},r.onerror=n,r.src=\"data:image/svg+xml;charset=utf-8,\"+encodeURIComponent((new XMLSerializer).serializeToString(e))}))},bo=function(e){return Ze(Oe.create(e).parseComponentValue())};\"undefined\"!==typeof window&&xt.setContext(window);var wo=function(e,t){return r(void 0,void 0,void 0,(function(){var r,A,s,l,u,c,f,d,p,h,g,v,B,m,b,w,E,y,C,Q,x,F,U;return i(this,(function(i){switch(i.label){case 0:if(!(r=e.ownerDocument))throw new Error(\"Element is not attached to a Document\");if(!(A=r.defaultView))throw new Error(\"Document is not attached to a Window\");return s=(Math.round(1e3*Math.random())+Date.now()).toString(16),l=ui(e)||\"HTML\"===e.tagName?function(e){var t=e.body,n=e.documentElement;if(!t||!n)throw new Error(\"Unable to get document size\");var r=Math.max(Math.max(t.scrollWidth,n.scrollWidth),Math.max(t.offsetWidth,n.offsetWidth),Math.max(t.clientWidth,n.clientWidth)),i=Math.max(Math.max(t.scrollHeight,n.scrollHeight),Math.max(t.offsetHeight,n.offsetHeight),Math.max(t.clientHeight,n.clientHeight));return new o(0,0,r,i)}(r):a(e),u=l.width,c=l.height,f=l.left,d=l.top,p=n({},{allowTaint:!1,imageTimeout:15e3,proxy:void 0,useCORS:!1},t),h={backgroundColor:\"#ffffff\",cache:t.cache?t.cache:xt.create(s,p),logging:!0,removeContainer:!0,foreignObjectRendering:!1,scale:A.devicePixelRatio||1,windowWidth:A.innerWidth,windowHeight:A.innerHeight,scrollX:A.pageXOffset,scrollY:A.pageYOffset,x:f,y:d,width:Math.ceil(u),height:Math.ceil(c),id:s},g=n({},h,p,t),v=new o(g.scrollX,g.scrollY,g.windowWidth,g.windowHeight),Qt.create({id:s,enabled:g.logging}),Qt.getInstance(s).debug(\"Starting document clone\"),B=new Si(e,{id:s,onclone:g.onclone,ignoreElements:g.ignoreElements,inlineImages:g.foreignObjectRendering,copyStyles:g.foreignObjectRendering}),(m=B.clonedReferenceElement)?[4,B.toIFrame(r,v)]:[2,Promise.reject(\"Unable to find element in cloned iframe\")];case 1:return b=i.sent(),w=r.documentElement?bo(getComputedStyle(r.documentElement).backgroundColor):lt.TRANSPARENT,E=r.body?bo(getComputedStyle(r.body).backgroundColor):lt.TRANSPARENT,y=t.backgroundColor,C=\"string\"===typeof y?bo(y):null===y?lt.TRANSPARENT:4294967295,Q=e===r.documentElement?$e(w)?$e(E)?C:E:w:C,x={id:s,cache:g.cache,canvas:g.canvas,backgroundColor:Q,scale:g.scale,x:g.x,y:g.y,scrollX:g.scrollX,scrollY:g.scrollY,width:g.width,height:g.height,windowWidth:g.windowWidth,windowHeight:g.windowHeight},g.foreignObjectRendering?(Qt.getInstance(s).debug(\"Document cloned, using foreign object rendering\"),[4,new Bo(x).render(m)]):[3,3];case 2:return F=i.sent(),[3,5];case 3:return Qt.getInstance(s).debug(\"Document cloned, using computed rendering\"),xt.attachInstance(g.cache),Qt.getInstance(s).debug(\"Starting DOM parsing\"),U=$r(m),xt.detachInstance(),Q===U.styles.backgroundColor&&(U.styles.backgroundColor=lt.TRANSPARENT),Qt.getInstance(s).debug(\"Starting renderer\"),[4,new po(x).render(U)];case 4:F=i.sent(),i.label=5;case 5:return!0===g.removeContainer&&(Si.destroy(b)||Qt.getInstance(s).error(\"Cannot detach cloned iframe as it is not in the DOM anymore\")),Qt.getInstance(s).debug(\"Finished rendering\"),Qt.destroy(s),xt.destroy(s),[2,F]}}))}))};return function(e,t){return void 0===t&&(t={}),wo(e,t)}}()},,function(e,t,n){\"use strict\";var r=n(1),i=n(0),o=function(){return(o=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};var a=function(){function e(){this._events={}}var t=e.prototype;return t.on=function(e,t){if(Object(i.K)(e))for(var n in e)this.on(n,e[n]);else this._addEvent(e,t,{});return this},t.off=function(e,t){if(e)if(Object(i.K)(e))for(var n in e)this.off(n);else if(t){var r=this._events[e];if(r){var o=Object(i.A)(r,(function(e){return e.listener===t}));o>-1&&r.splice(o,1)}}else this._events[e]=[];else this._events={};return this},t.once=function(e,t){var n=this;return t&&this._addEvent(e,t,{once:!0}),new Promise((function(t){n._addEvent(e,t,{once:!0})}))},t.emit=function(e,t){var n=this;void 0===t&&(t={});var r=this._events[e];if(!e||!r)return!0;var i=!1;return t.eventType=e,t.stop=function(){i=!0},t.currentTarget=this,function(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),i=0;for(t=0;t<n;t++)for(var o=arguments[t],a=0,A=o.length;a<A;a++,i++)r[i]=o[a];return r}(r).forEach((function(r){r.listener(t),r.once&&n.off(e,r.listener)})),!i},t.trigger=function(e,t){return void 0===t&&(t={}),this.emit(e,t)},t._addEvent=function(e,t,n){var r=this._events;r[e]=r[e]||[],r[e].push(o({listener:t},n))},e}(),A=function(e,t){return(A=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};var s=function(){return(s=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function l(e){return function(e,t){var n=t[0]-e[0],r=t[1]-e[1],i=Math.atan2(r,n);return i>=0?i:i+2*Math.PI}([e[0].clientX,e[0].clientY],[e[1].clientX,e[1].clientY])/Math.PI*180}function u(e){return e.touches?function(e){for(var t=Math.min(e.length,2),n=[],r=0;r<t;++r)n.push(d(e[r]));return n}(e.touches):[d(e)]}function c(e,t,n){var r=n.length,i=p(e,r),o=i.clientX,a=i.clientY,A=i.originalClientX,s=i.originalClientY,l=p(t,r),u=l.clientX,c=l.clientY,f=p(n,r);return{clientX:A,clientY:s,deltaX:o-u,deltaY:a-c,distX:o-f.clientX,distY:a-f.clientY}}function f(e){return Math.sqrt(Math.pow(e[0].clientX-e[1].clientX,2)+Math.pow(e[0].clientY-e[1].clientY,2))}function d(e){return{clientX:e.clientX,clientY:e.clientY}}function p(e,t){void 0===t&&(t=e.length);for(var n={clientX:0,clientY:0,originalClientX:0,originalClientY:0},r=0;r<t;++r){var i=e[r];n.originalClientX+=\"originalClientX\"in i?i.originalClientX:i.clientX,n.originalClientY+=\"originalClientY\"in i?i.originalClientY:i.clientY,n.clientX+=i.clientX,n.clientY+=i.clientY}return t?{clientX:n.clientX/t,clientY:n.clientY/t,originalClientX:n.originalClientX/t,originalClientY:n.originalClientY/t}:n}var h=function(){function e(e){this.prevClients=[],this.startClients=[],this.movement=0,this.length=0,this.startClients=e,this.prevClients=e,this.length=e.length}var t=e.prototype;return t.addClients=function(e){void 0===e&&(e=this.prevClients);var t=this.getPosition(e),n=t.deltaX,r=t.deltaY;return this.movement+=Math.sqrt(n*n+r*r),this.prevClients=e,t},t.getAngle=function(e){return void 0===e&&(e=this.prevClients),l(e)},t.getRotation=function(e){return void 0===e&&(e=this.prevClients),l(e)-l(this.startClients)},t.getPosition=function(e){return c(e||this.prevClients,this.prevClients,this.startClients)},t.getPositions=function(e){void 0===e&&(e=this.prevClients);var t=this.prevClients;return this.startClients.map((function(n,r){return c([e[r]],[t[r]],[n])}))},t.getMovement=function(e){var t=this.movement;if(!e)return t;var n=p(e,this.length),r=p(this.prevClients,this.length),i=n.clientX-r.clientX,o=n.clientY-r.clientY;return Math.sqrt(i*i+o*o)+t},t.getDistance=function(e){return void 0===e&&(e=this.prevClients),f(e)},t.getScale=function(e){return void 0===e&&(e=this.prevClients),f(e)/f(this.startClients)},t.move=function(e,t){this.startClients.forEach((function(n){n.clientX-=e,n.clientY-=t})),this.prevClients.forEach((function(n){n.clientX-=e,n.clientY-=t}))},e}(),g=[\"textarea\",\"input\"],v=function(e){function t(t,n){void 0===n&&(n={});var r=e.call(this)||this;r.options={},r.flag=!1,r.pinchFlag=!1,r.datas={},r.isDrag=!1,r.isPinch=!1,r.isMouse=!1,r.isTouch=!1,r.clientStores=[],r.targets=[],r.prevTime=0,r.doubleFlag=!1,r.onDragStart=function(e,t){if(void 0===t&&(t=!0),r.flag||!1!==e.cancelable){var n=r.options,o=n.container,a=n.pinchOutside,A=n.preventRightClick,l=n.preventDefault,c=n.checkInput,f=r.isTouch,d=!r.flag;if(d){var p=document.activeElement,v=e.target,B=v.tagName.toLowerCase(),m=g.indexOf(B)>-1,b=v.isContentEditable;if(m||b){if(c||p===v)return!1;if(p&&b&&p.isContentEditable&&p.contains(v))return!1}else if((l||\"touchstart\"===e.type)&&p){var w=p.tagName;(p.isContentEditable||g.indexOf(w)>-1)&&p.blur()}if(r.clientStores=[new h(u(e))],r.flag=!0,r.isDrag=!1,r.datas={},A&&(3===e.which||2===e.button))return r.initDrag(),!1;r.doubleFlag=Object(i.N)()-r.prevTime<200,!1===r.emit(\"dragStart\",s({datas:r.datas,inputEvent:e,isTrusted:t,isDouble:r.doubleFlag},r.getCurrentStore().getPosition()))&&r.initDrag(),r.flag&&l&&e.preventDefault()}if(!r.flag)return!1;var E=0;if(d&&f&&a&&(E=setTimeout((function(){Object(i.q)(o,\"touchstart\",r.onDragStart,{passive:!1})}))),!d&&f&&a&&Object(i.P)(o,\"touchstart\",r.onDragStart),r.flag&&function(e){return e.touches&&e.touches.length>=2}(e)){if(clearTimeout(E),d&&e.touches.length!==e.changedTouches.length)return;r.pinchFlag||r.onPinchStart(e)}}},r.onDrag=function(e,t){if(r.flag){var n=u(e),i=r.moveClients(n,e,!1);(r.pinchFlag||i.deltaX||i.deltaY)&&r.emit(\"drag\",s({},i,{isScroll:!!t,inputEvent:e})),r.pinchFlag&&r.onPinch(e,n),r.getCurrentStore().addClients(n)}},r.onDragEnd=function(e){if(r.flag){var t=r.options,n=t.pinchOutside,o=t.container;r.isTouch&&n&&Object(i.P)(o,\"touchstart\",r.onDragStart),r.flag=!1;var a=r.getCurrentStore().getPosition(),A=Object(i.N)(),l=!r.isDrag&&r.doubleFlag;r.prevTime=r.isDrag||l?0:A,r.emit(\"dragEnd\",s({datas:r.datas,isDouble:l,isDrag:r.isDrag,inputEvent:e},a)),r.pinchFlag&&r.onPinchEnd(e),r.clientStores=[]}},r.onBlur=function(){r.onDragEnd()};var o=[].concat(t);r.options=s({checkInput:!1,container:o.length>1?window:o[0],preventRightClick:!0,preventDefault:!0,checkWindowBlur:!1,pinchThreshold:0,events:[\"touch\",\"mouse\"]},n);var a=r.options,A=a.container,l=a.events,c=a.checkWindowBlur;if(r.isTouch=l.indexOf(\"touch\")>-1,r.isMouse=l.indexOf(\"mouse\")>-1,r.targets=o,r.isMouse&&(o.forEach((function(e){Object(i.q)(e,\"mousedown\",r.onDragStart)})),Object(i.q)(A,\"mousemove\",r.onDrag),Object(i.q)(A,\"mouseup\",r.onDragEnd),Object(i.q)(A,\"contextmenu\",r.onDragEnd)),c&&Object(i.q)(window,\"blur\",r.onBlur),r.isTouch){var f={passive:!1};o.forEach((function(e){Object(i.q)(e,\"touchstart\",r.onDragStart,f)})),Object(i.q)(A,\"touchmove\",r.onDrag,f),Object(i.q)(A,\"touchend\",r.onDragEnd,f),Object(i.q)(A,\"touchcancel\",r.onDragEnd,f)}return r}!function(e,t){function n(){this.constructor=e}A(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e);var n=t.prototype;return n.getMovement=function(e){return this.getCurrentStore().getMovement(e)+this.clientStores.slice(1).reduce((function(e,t){return e+t.movement}),0)},n.isDragging=function(){return this.isDrag},n.isFlag=function(){return this.flag},n.isPinchFlag=function(){return this.pinchFlag},n.isDoubleFlag=function(){return this.doubleFlag},n.isPinching=function(){return this.isPinch},n.scrollBy=function(e,t,n,r){void 0===r&&(r=!0),this.flag&&(this.clientStores[0].move(e,t),r&&this.onDrag(n,!0))},n.move=function(e,t){var n=e[0],r=e[1],i=this.getCurrentStore().prevClients;return this.moveClients(i.map((function(e){var t=e.clientX,i=e.clientY;return{clientX:t+n,clientY:i+r,originalClientX:t,originalClientY:i}})),t,!0)},n.triggerDragStart=function(e){this.onDragStart(e,!1)},n.setEventDatas=function(e){var t=this.datas;for(var n in e)t[n]=e[n];return this},n.getEventDatas=function(){return this.datas},n.unset=function(){var e=this,t=this.targets,n=this.options.container;this.off(),Object(i.P)(window,\"blur\",this.onBlur),this.isMouse&&(t.forEach((function(t){Object(i.P)(t,\"mousedown\",e.onDragStart)})),Object(i.P)(n,\"mousemove\",this.onDrag),Object(i.P)(n,\"mouseup\",this.onDragEnd),Object(i.P)(n,\"contextmenu\",this.onDragEnd)),this.isTouch&&(t.forEach((function(t){Object(i.P)(t,\"touchstart\",e.onDragStart)})),Object(i.P)(n,\"touchstart\",this.onDragStart),Object(i.P)(n,\"touchmove\",this.onDrag),Object(i.P)(n,\"touchend\",this.onDragEnd),Object(i.P)(n,\"touchcancel\",this.onDragEnd))},n.onPinchStart=function(e){var t=this.options.pinchThreshold;if(!(this.isDrag&&this.getMovement()>t)){var n=new h(u(e));this.pinchFlag=!0,this.clientStores.splice(0,0,n),!1===this.emit(\"pinchStart\",s({datas:this.datas,angle:n.getAngle(),touches:this.getCurrentStore().getPositions()},n.getPosition(),{inputEvent:e}))&&(this.pinchFlag=!1)}},n.onPinch=function(e,t){if(this.flag&&this.pinchFlag&&!(t.length<2)){var n=this.getCurrentStore();this.isPinch=!0,this.emit(\"pinch\",s({datas:this.datas,movement:this.getMovement(t),angle:n.getAngle(t),rotation:n.getRotation(t),touches:n.getPositions(t),scale:n.getScale(t),distance:n.getDistance(t)},n.getPosition(t),{inputEvent:e}))}},n.onPinchEnd=function(e){if(this.pinchFlag){var t=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var n=this.getCurrentStore();this.emit(\"pinchEnd\",s({datas:this.datas,isPinch:t,touches:n.getPositions()},n.getPosition(),{inputEvent:e})),this.isPinch=!1,this.pinchFlag=!1}},n.initDrag=function(){this.clientStores=[],this.pinchFlag=!1,this.doubleFlag=!1,this.prevTime=0,this.flag=!1},n.getCurrentStore=function(){return this.clientStores[0]},n.moveClients=function(e,t,n){var r=this.getCurrentStore()[n?\"addClients\":\"getPosition\"](e);return this.isDrag=!0,s({datas:this.datas},r,{movement:this.getMovement(e),isDrag:this.isDrag,isPinch:this.isPinch,isScroll:!1,inputEvent:t})},t}(a);var B=n(28),m=n(15),b=function(e,t){return(b=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function w(e){var t=e.container;return[t.scrollLeft,t.scrollTop]}var E=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.startRect=null,t.startPos=[],t.prevTime=0,t.timer=0,t}!function(e,t){function n(){this.constructor=e}b(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e);var n=t.prototype;return n.dragStart=function(e,t){var n=t.container.getBoundingClientRect(),r=n.top,i=n.left,o=n.width,a=n.height;this.startPos=[e.clientX,e.clientY],this.startRect={top:r,left:i,width:o,height:a}},n.drag=function(e,t){var n=this,r=e.clientX,o=e.clientY,a=t.container,A=t.threshold,s=void 0===A?0:A,l=t.throttleTime,u=void 0===l?0:l,c=t.getScrollPosition,f=void 0===c?w:c,d=this.startRect,p=this.startPos,h=Object(i.N)(),g=Math.max(u+this.prevTime-h,0),v=[0,0];if(d.top>o-s?(p[1]>d.top||o<p[1])&&(v[1]=-1):d.top+d.height<o+s&&(p[1]<d.top+d.height||o>p[1])&&(v[1]=1),d.left>r-s?(p[0]>d.left||r<p[0])&&(v[0]=-1):d.left+d.width<r+s&&(p[0]<d.left+d.width||r>p[0])&&(v[0]=1),clearTimeout(this.timer),!v[0]&&!v[1])return!1;if(g>0)return this.timer=window.setTimeout((function(){n.drag(e,t)}),g),!1;this.prevTime=h;var B=f({container:a,direction:v});this.trigger(\"scroll\",{container:a,direction:v,inputEvent:e});var m=f({container:a,direction:v}),b=m[0]-B[0],E=m[1]-B[1];return!(!b&&!E)&&(this.trigger(\"move\",{offsetX:v[0]?b:0,offsetY:v[1]?E:0,inputEvent:e}),u&&(this.timer=window.setTimeout((function(){n.drag(e,t)}),u)),!0)},n.dragEnd=function(){clearTimeout(this.timer)},t}(m.a),y=n(25),C=n(16),Q=n(24),x=function(e,t){return(x=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function F(e,t){function n(){this.constructor=e}x(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var U=function(){return(U=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function S(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&\"function\"===typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n}function O(e,t,n){e!==t&&n(e,t)}function H(e,t,n){var r;void 0===n&&(n=e.datas.boundArea);var o=e.distX,a=void 0===o?0:o,A=e.distY,s=void 0===A?0:A,l=e.datas,u=l.startX,c=l.startY;if(t>0){var f=Math.sqrt((a*a+s*s)/(1+t*t));a=(a>=0?1:-1)*(t*f),s=(s>=0?1:-1)*f}var d=Math.abs(a),p=Math.abs(s),h=a<0?u-n.left:n.right-u,g=s<0?c-n.top:n.bottom-c;a=(a>=0?1:-1)*(d=(r=Object(i.t)([d,p],[0,0],[h,g],!!t))[0]),s=(s>=0?1:-1)*(p=r[1]);var v=u+Math.min(0,a),B=c+Math.min(0,s);return{left:v,top:B,right:v+d,bottom:B+p,width:d,height:p}}function T(e){var t=e.getBoundingClientRect(),n=t.left,r=t.top,i=t.width,o=t.height;return{pos1:[n,r],pos2:[n+i,r],pos3:[n,r+o],pos4:[n+i,r+o]}}function N(e,t){var n=Object(B.b)(e,t),r=n.list,i=n.prevList,o=n.added,a=n.removed;return o.map((function(e){return r[e]})).concat(a.map((function(e){return i[e]})))}var _=Object(Q.a)(\"\\n:host {\\n    position: fixed;\\n    display: none;\\n    border: 1px solid #4af;\\n    background: rgba(68, 170, 255, 0.5);\\n    z-index: 100;\\n}\\n\"),M=\"selecto-selection \"+_.className,R=[\"boundContainer\",\"selectableTargets\",\"selectByClick\",\"selectFromInside\",\"continueSelect\",\"toggleContinueSelect\",\"keyContainer\",\"hitRate\",\"scrollOptions\",\"checkInput\",\"preventDefault\",\"ratio\",\"getElementRect\",\"preventDragFromInside\"],D=function(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),i=0;for(t=0;t<n;t++)for(var o=arguments[t],a=0,A=o.length;a<A;a++,i++)r[i]=o[a];return r}([\"dragContainer\",\"cspNonce\"],R),P=(Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,[\"dragStart\",\"drag\",\"dragEnd\",\"selectStart\",\"select\",\"selectEnd\",\"keydown\",\"keyup\",\"scroll\"]),k=[\"clickTarget\",\"setSelectedTargets\",\"getElementPoints\",\"getSelectedTargets\",\"findSelectableTargets\",\"triggerDragStart\"],I=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return F(t,e),t}(function(e){function t(t){void 0===t&&(t={});var n=e.call(this)||this;return n.selectedTargets=[],n.dragScroll=new E,n.onDragStart=function(e,t){var r=e.datas,o=e.clientX,a=e.clientY,A=e.inputEvent,s=n.options,l=s.continueSelect,u=s.selectFromInside,c=s.selectByClick,f=s.boundContainer,d=s.preventDragFromInside,p=void 0===d||d;n.findSelectableTargets(r),r.startSelectedTargets=n.selectedTargets;var h={left:-1/0,top:-1/0,right:1/0,bottom:1/0};if(f){var g=(Object(i.L)(f)?document.querySelector(f):!0===f?n.container:f).getBoundingClientRect();h={left:g.left,top:g.top,right:g.right,bottom:g.bottom}}r.boundArea=h;var v={left:o,top:a,right:o,bottom:a,width:0,height:0},B=[];if(!u||c){for(var m=t||document.elementFromPoint(o,a);m&&!(r.selectableTargets.indexOf(m)>-1);)m=m.parentElement;B=m?[m]:[]}var b=B.length>0,w=!u&&b;if(w&&!c)return e.stop(),!1;var E=A.type,y=\"mousedown\"===E||\"touchstart\"===E;if(!(!(!e.isClick&&y)||n.trigger(\"dragStart\",U({},e))))return e.stop(),!1;if(l?(B=N(n.selectedTargets,B),r.startPassedTargets=n.selectedTargets):r.startPassedTargets=[],n.select(n.selectedTargets,B,v,A,!0),r.startX=o,r.startY=a,r.selectFlag=!1,r.preventDragFromInside=!1,r.boundsArea=n.target.style.cssText+=\"left:0px;top:0px;transform: translate(\"+o+\"px, \"+a+\"px)\",w&&c)A.preventDefault(),p&&(n.selectEnd(r.startSelectedTargets,r.startPassedTargets,v,e),r.preventDragFromInside=!0);else{r.selectFlag=!0,\"touchstart\"===E&&A.preventDefault();var C=n.options.scrollOptions;C&&C.container&&n.dragScroll.dragStart(e,C)}return!0},n.onDrag=function(e){if(e.datas.selectFlag){var t=n.options.scrollOptions;if(t&&t.container&&n.dragScroll.drag(e,t))return}n.check(e)},n.onDragEnd=function(e){var t=e.datas,r=e.inputEvent,i=H(e,n.options.ratio),o=t.selectFlag;r&&!e.isClick&&n.trigger(\"dragEnd\",U(U({isDouble:!!e.isDouble,isDrag:!1,isSelect:o},e),{rect:i})),n.target.style.cssText+=\"display: none;\",o&&(t.selectFlag=!1,n.dragScroll.dragEnd()),t.preventDragFromInside||n.selectEnd(t.startSelectedTargets,t.startPassedTargets,i,e)},n.onKeyDown=function(e){n.sameCombiKey(e)&&(n.continueSelect=!0,n.trigger(\"keydown\",{}))},n.onKeyUp=function(e){n.sameCombiKey(e,!0)&&(n.continueSelect=!1,n.trigger(\"keyup\",{}))},n.onBlur=function(){n.toggleContinueSelect&&n.continueSelect&&(n.continueSelect=!1,n.trigger(\"keyup\",{}))},n.onDocumentSelectStart=function(e){if(n.gesto.isFlag()){var t=n.dragContainer;t===window&&(t=document.documentElement);var r=t instanceof Element?[t]:[].slice.call(t),i=e.target;r.some((function(t){if(t===i||t.contains(i))return e.preventDefault(),!0}))}},n.target=t.target,n.container=t.container||document.body,n.options=U({target:null,container:null,dragContainer:null,selectableTargets:[],selectByClick:!0,selectFromInside:!0,hitRate:100,continueSelect:!1,toggleContinueSelect:null,keyContainer:null,scrollOptions:void 0,checkInput:!1,preventDefault:!1,boundContainer:!1,preventDragFromInside:!0,getElementRect:T,cspNonce:\"\",ratio:0},t),n.initElement(),n.initDragScroll(),n.setKeyController(),n}F(t,e);var n,r,o=t.prototype;return o.setSelectedTargets=function(e){return this.selectedTargets=e,this},o.getSelectedTargets=function(){return this.selectedTargets},o.setKeyContainer=function(e){var t=this,n=this.options;O(n.keyContainer,e,(function(){n.keyContainer=e,t.setKeyController()}))},o.setToggleContinueSelect=function(e){var t=this,n=this.options;O(n.toggleContinueSelect,e,(function(){n.toggleContinueSelect=e,t.setKeyEvent()}))},o.setPreventDefault=function(e){this.gesto.options.preventDefault=e},o.setCheckInput=function(e){this.gesto.options.checkInput=e},o.triggerDragStart=function(e){return this.gesto.triggerDragStart(e),this},o.destroy=function(){this.off(),this.keycon&&this.keycon.destroy(),this.gesto.unset(),this.injectResult.destroy(),Object(i.P)(document,\"selectstart\",this.onDocumentSelectStart),this.keycon=null,this.gesto=null,this.injectResult=null,this.target=null,this.container=null,this.options=null},o.getElementPoints=function(e){var t=this.getElementRect,n=t(e),r=[n.pos1,n.pos2,n.pos4,n.pos3];if(t!==T){var i=e.getBoundingClientRect();return Object(C.a)(r,i)}return r},o.findSelectableTargets=function(e){var t=this;void 0===e&&(e=this.gesto.getEventDatas());var n=this.getSelectableTargets(),r=n.map((function(e){return t.getElementPoints(e)}));e.selectableTargets=n,e.selectablePoints=r},o.clickTarget=function(e,t){var n=function(e){if(\"touches\"in e){var t=e.touches[0]||e.changedTouches[0];return{clientX:t.clientX,clientY:t.clientY}}return{clientX:e.clientX,clientY:e.clientY}}(e),r={datas:{selectFlag:!1},clientX:n.clientX,clientY:n.clientY,inputEvent:e,isClick:!0,stop:function(){return!1}};return this.onDragStart(r,t)&&this.onDragEnd(r),this},o.setKeyController=function(){var e=this.options,t=e.keyContainer,n=e.toggleContinueSelect;this.keycon&&(this.keycon.destroy(),this.keycon=null),n&&(this.keycon=new y.a(t||window),this.keycon.keydown(this.onKeyDown).keyup(this.onKeyUp).on(\"blur\",this.onBlur))},o.setKeyEvent=function(){this.options.toggleContinueSelect&&!this.keycon&&this.setKeyController()},o.initElement=function(){this.target=function e(t,n,r){var o=t.tag,a=t.children,A=t.attributes,s=t.className,l=t.style,u=n||document.createElement(o);for(var c in A)u.setAttribute(c,A[c]);var f=u.children;if(a.forEach((function(t,n){e(t,f[n],u)})),s&&s.split(\" \").forEach((function(e){Object(i.G)(u,e)||Object(i.p)(u,e)})),l){var d=u.style;for(var c in l)d[c]=l[c]}return!n&&r&&r.appendChild(u),u}(function(e,t){for(var n=[],r=2;r<arguments.length;r++)n[r-2]=arguments[r];var i=t||{},o=i.className,a=void 0===o?\"\":o,A=i.style,s=void 0===A?{}:A,l=S(i,[\"className\",\"style\"]);return{tag:e,className:a,style:s,attributes:l,children:n}}(\"div\",{className:M}),this.target,this.container);var e=this.target,t=this.options,n=t.dragContainer,r=t.checkInput,o=t.preventDefault;this.dragContainer=\"string\"===typeof n?[].slice.call(document.querySelectorAll(n)):this.options.dragContainer||this.target.parentNode,this.gesto=new v(this.dragContainer,{checkWindowBlur:!0,container:window,checkInput:r,preventDefault:o}).on({dragStart:this.onDragStart,drag:this.onDrag,dragEnd:this.onDragEnd}),Object(i.q)(document,\"selectstart\",this.onDocumentSelectStart),this.injectResult=_.inject(e,{nonce:this.options.cspNonce})},o.hitTest=function(e,t,n,r,o){var a=this.options,A=a.hitRate,s=a.selectByClick,l=e.left,u=e.top,c=e.right,f=e.bottom,d=[[l,u],[c,u],[c,f],[l,f]];return r.filter((function(e,r){var a=o[r],l=Object(C.f)([t,n],a);if(s&&l)return!0;var u=Object(C.d)(d,a);if(!u.length)return!1;var c=Object(C.b)(u),f=Object(C.b)(a);return Object(i.s)(Math.round(c/f*100),0,100)>=Math.min(100,A)}))},o.initDragScroll=function(){var e=this;this.dragScroll.on(\"scroll\",(function(t){var n=t.container,r=t.direction;e.trigger(\"scroll\",{container:n,direction:r})})).on(\"move\",(function(t){var n=t.offsetX,r=t.offsetY,i=t.inputEvent,o=i.datas;o.startX-=n,o.startY-=r,o.selectablePoints.forEach((function(e){e.forEach((function(e){e[0]-=n,e[1]-=r}))})),e.gesto.scrollBy(n,r,i.inputEvent,!1),i.distX+=n,i.distY+=r,e.check(i)}))},o.getSelectableTargets=function(){var e=[];return this.options.selectableTargets.forEach((function(t){Object(i.K)(t)?e.push(t):[].slice.call(document.querySelectorAll(t)).forEach((function(t){e.push(t)}))})),e},o.select=function(e,t,n,r,i){var o=Object(B.b)(e,t),a=o.added,A=o.removed,s=o.prevList,l=o.list;this.selectedTargets=t,i&&this.trigger(\"selectStart\",{selected:t,added:a.map((function(e){return l[e]})),removed:A.map((function(e){return s[e]})),rect:n,inputEvent:r}),(a.length||A.length)&&this.trigger(\"select\",{selected:t,added:a.map((function(e){return l[e]})),removed:A.map((function(e){return s[e]})),rect:n,inputEvent:r})},o.selectEnd=function(e,t,n,r){var i=r.inputEvent,o=r.isDouble,a=Object(B.b)(e,this.selectedTargets),A=a.added,s=a.removed,l=a.prevList,u=a.list,c=Object(B.b)(t,this.selectedTargets),f=c.added,d=c.removed,p=c.prevList,h=c.list,g=i&&i.type,v=\"mousedown\"===g||\"touchstart\"===g;this.trigger(\"selectEnd\",{selected:this.selectedTargets,added:A.map((function(e){return u[e]})),removed:s.map((function(e){return l[e]})),afterAdded:f.map((function(e){return h[e]})),afterRemoved:d.map((function(e){return p[e]})),isDragStart:v,isDouble:!!o,rect:n,inputEvent:i})},o.check=function(e,t){void 0===t&&(t=H(e,this.options.ratio));var n=e.datas,r=e.inputEvent,i=t.top,o=t.left,a=t.width,A=t.height,s=n.selectFlag,l=[],u=[];if(s){this.target.style.cssText+=\"display: block;left:0px;top:0px;transform: translate(\"+o+\"px, \"+i+\"px);width:\"+a+\"px;height:\"+A+\"px;\";var c=this.hitTest(t,n.startX,n.startY,n.selectableTargets,n.selectablePoints);l=this.selectedTargets,u=N(n.startPassedTargets,c),this.selectedTargets=u}this.trigger(\"drag\",U(U({},e),{isSelect:s,rect:t})),s&&this.select(l,u,t,r)},o.sameCombiKey=function(e,t){var n=[].concat(this.options.toggleContinueSelect),r=Object(y.b)(e.inputEvent,e.key),o=Object(i.H)(n[0])?n:[n];if(t){var a=e.key;return o.some((function(e){return e.some((function(e){return e===a}))}))}return o.some((function(e){return e.every((function(e){return r.indexOf(e)>-1}))}))},t=function(e,t,n,r){var i,o=arguments.length,a=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if(\"object\"===typeof Reflect&&\"function\"===typeof Reflect.decorate)a=Reflect.decorate(e,t,n,r);else for(var A=e.length-1;A>=0;A--)(i=e[A])&&(a=(o<3?i(a):o>3?i(t,n,a):i(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a}([(n=R,r=function(e,t){var n={enumerable:!0,configurable:!0,get:function(){return this.options[t]}},r=Object(i.u)(\"set \"+t);e[r]?n.set=function(e){this[r](e)}:n.set=function(e){this.options[t]=e},Object.defineProperty(e,t,n)},function(e){var t=e.prototype;n.forEach((function(e){r(t,e)}))})],t)}(a)),K=n(10),L=function(e,t){return(L=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};var z=function(){return(z=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};var j=P.map((function(e){return Object(i.u)(\"on \"+e)})),X=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}!function(e,t){function n(){this.constructor=e}L(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e);var n=t.prototype;return n.render=function(){return Object(r.createElement)(\"div\",{className:M,ref:Object(K.c)(this,\"selectionElement\")})},n.componentDidMount=function(){var e=this,t=this.props,n={};D.forEach((function(e){e in t&&(n[e]=t[e])})),this.selecto=new I(z(z({},n),{target:this.selectionElement})),P.forEach((function(t,n){e.selecto.on(t,(function(t){var r=e.props;!1===(r[j[n]]&&r[j[n]](t))&&t.stop()}))}))},n.componentDidUpdate=function(e){var t=this.props,n=this.selecto;R.forEach((function(r){e[r]!==t[r]&&(n[r]=t[r])}))},n.componentWillUnmount=function(){this.selecto.destroy()},function(e,t,n,r){var i,o=arguments.length,a=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if(\"object\"===typeof Reflect&&\"function\"===typeof Reflect.decorate)a=Reflect.decorate(e,t,n,r);else for(var A=e.length-1;A>=0;A--)(i=e[A])&&(a=(o<3?i(a):o>3?i(t,n,a):i(t,n))||a);o>3&&a&&Object.defineProperty(t,n,a)}([Object(K.e)(k)],t.prototype,\"selecto\",void 0),t}(r.PureComponent);t.a=X},function(e,t,n){\"use strict\";var r=n(1),i=n(15),o=n(0),a=function(e,t){return(a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};var A=function(){return(A=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function s(e){return function(e,t){var n=t[0]-e[0],r=t[1]-e[1],i=Math.atan2(r,n);return i>=0?i:i+2*Math.PI}([e[0].clientX,e[0].clientY],[e[1].clientX,e[1].clientY])/Math.PI*180}function l(e){return e.touches?function(e){for(var t=Math.min(e.length,2),n=[],r=0;r<t;++r)n.push(f(e[r]));return n}(e.touches):[f(e)]}function u(e,t,n){var r=n.length,i=d(e,r),o=i.clientX,a=i.clientY,A=i.originalClientX,s=i.originalClientY,l=d(t,r),u=l.clientX,c=l.clientY,f=d(n,r);return{clientX:A,clientY:s,deltaX:o-u,deltaY:a-c,distX:o-f.clientX,distY:a-f.clientY}}function c(e){return Math.sqrt(Math.pow(e[0].clientX-e[1].clientX,2)+Math.pow(e[0].clientY-e[1].clientY,2))}function f(e){return{clientX:e.clientX,clientY:e.clientY}}function d(e,t){void 0===t&&(t=e.length);for(var n={clientX:0,clientY:0,originalClientX:0,originalClientY:0},r=0;r<t;++r){var i=e[r];n.originalClientX+=\"originalClientX\"in i?i.originalClientX:i.clientX,n.originalClientY+=\"originalClientY\"in i?i.originalClientY:i.clientY,n.clientX+=i.clientX,n.clientY+=i.clientY}return t?{clientX:n.clientX/t,clientY:n.clientY/t,originalClientX:n.originalClientX/t,originalClientY:n.originalClientY/t}:n}var p=function(){function e(e){this.prevClients=[],this.startClients=[],this.movement=0,this.length=0,this.startClients=e,this.prevClients=e,this.length=e.length}var t=e.prototype;return t.addClients=function(e){void 0===e&&(e=this.prevClients);var t=this.getPosition(e),n=t.deltaX,r=t.deltaY;return this.movement+=Math.sqrt(n*n+r*r),this.prevClients=e,t},t.getAngle=function(e){return void 0===e&&(e=this.prevClients),s(e)},t.getRotation=function(e){return void 0===e&&(e=this.prevClients),s(e)-s(this.startClients)},t.getPosition=function(e){return u(e||this.prevClients,this.prevClients,this.startClients)},t.getPositions=function(e){void 0===e&&(e=this.prevClients);var t=this.prevClients;return this.startClients.map((function(n,r){return u([e[r]],[t[r]],[n])}))},t.getMovement=function(e){var t=this.movement;if(!e)return t;var n=d(e,this.length),r=d(this.prevClients,this.length),i=n.clientX-r.clientX,o=n.clientY-r.clientY;return Math.sqrt(i*i+o*o)+t},t.getDistance=function(e){return void 0===e&&(e=this.prevClients),c(e)},t.getScale=function(e){return void 0===e&&(e=this.prevClients),c(e)/c(this.startClients)},t.move=function(e,t){this.startClients.forEach((function(n){n.clientX-=e,n.clientY-=t})),this.prevClients.forEach((function(n){n.clientX-=e,n.clientY-=t}))},e}(),h=[\"textarea\",\"input\"],g=function(e){function t(t,n){void 0===n&&(n={});var r=e.call(this)||this;r.options={},r.flag=!1,r.pinchFlag=!1,r.datas={},r.isDrag=!1,r.isPinch=!1,r.isMouse=!1,r.isTouch=!1,r.clientStores=[],r.targets=[],r.prevTime=0,r.doubleFlag=!1,r.onDragStart=function(e,t){if(void 0===t&&(t=!0),r.flag||!1!==e.cancelable){var n=r.options,i=n.container,a=n.pinchOutside,s=n.preventRightClick,u=n.preventDefault,c=n.checkInput,f=r.isTouch,d=!r.flag;if(d){var g=document.activeElement,v=e.target,B=v.tagName.toLowerCase(),m=h.indexOf(B)>-1,b=v.isContentEditable;if(m||b){if(c||g===v)return!1;if(g&&b&&g.isContentEditable&&g.contains(v))return!1}else if((u||\"touchstart\"===e.type)&&g){var w=g.tagName;(g.isContentEditable||h.indexOf(w)>-1)&&g.blur()}if(r.clientStores=[new p(l(e))],r.flag=!0,r.isDrag=!1,r.datas={},s&&(3===e.which||2===e.button))return r.initDrag(),!1;r.doubleFlag=Object(o.N)()-r.prevTime<200,!1===r.emit(\"dragStart\",A({datas:r.datas,inputEvent:e,isTrusted:t,isDouble:r.doubleFlag},r.getCurrentStore().getPosition()))&&r.initDrag(),r.flag&&u&&e.preventDefault()}if(!r.flag)return!1;var E=0;if(d&&f&&a&&(E=setTimeout((function(){Object(o.q)(i,\"touchstart\",r.onDragStart,{passive:!1})}))),!d&&f&&a&&Object(o.P)(i,\"touchstart\",r.onDragStart),r.flag&&function(e){return e.touches&&e.touches.length>=2}(e)){if(clearTimeout(E),d&&e.touches.length!==e.changedTouches.length)return;r.pinchFlag||r.onPinchStart(e)}}},r.onDrag=function(e,t){if(r.flag){var n=l(e),i=r.moveClients(n,e,!1);(r.pinchFlag||i.deltaX||i.deltaY)&&r.emit(\"drag\",A({},i,{isScroll:!!t,inputEvent:e})),r.pinchFlag&&r.onPinch(e,n),r.getCurrentStore().addClients(n)}},r.onDragEnd=function(e){if(r.flag){var t=r.options,n=t.pinchOutside,i=t.container;r.isTouch&&n&&Object(o.P)(i,\"touchstart\",r.onDragStart),r.flag=!1;var a=r.getCurrentStore().getPosition(),s=Object(o.N)(),l=!r.isDrag&&r.doubleFlag;r.prevTime=r.isDrag||l?0:s,r.emit(\"dragEnd\",A({datas:r.datas,isDouble:l,isDrag:r.isDrag,inputEvent:e},a)),r.pinchFlag&&r.onPinchEnd(e),r.clientStores=[]}},r.onBlur=function(){r.onDragEnd()};var i=[].concat(t);r.options=A({checkInput:!1,container:i.length>1?window:i[0],preventRightClick:!0,preventDefault:!0,checkWindowBlur:!1,pinchThreshold:0,events:[\"touch\",\"mouse\"]},n);var a=r.options,s=a.container,u=a.events,c=a.checkWindowBlur;if(r.isTouch=u.indexOf(\"touch\")>-1,r.isMouse=u.indexOf(\"mouse\")>-1,r.targets=i,r.isMouse&&(i.forEach((function(e){Object(o.q)(e,\"mousedown\",r.onDragStart)})),Object(o.q)(s,\"mousemove\",r.onDrag),Object(o.q)(s,\"mouseup\",r.onDragEnd),Object(o.q)(s,\"contextmenu\",r.onDragEnd)),c&&Object(o.q)(window,\"blur\",r.onBlur),r.isTouch){var f={passive:!1};i.forEach((function(e){Object(o.q)(e,\"touchstart\",r.onDragStart,f)})),Object(o.q)(s,\"touchmove\",r.onDrag,f),Object(o.q)(s,\"touchend\",r.onDragEnd,f),Object(o.q)(s,\"touchcancel\",r.onDragEnd,f)}return r}!function(e,t){function n(){this.constructor=e}a(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e);var n=t.prototype;return n.getMovement=function(e){return this.getCurrentStore().getMovement(e)+this.clientStores.slice(1).reduce((function(e,t){return e+t.movement}),0)},n.isDragging=function(){return this.isDrag},n.isFlag=function(){return this.flag},n.isPinchFlag=function(){return this.pinchFlag},n.isDoubleFlag=function(){return this.doubleFlag},n.isPinching=function(){return this.isPinch},n.scrollBy=function(e,t,n,r){void 0===r&&(r=!0),this.flag&&(this.clientStores[0].move(e,t),r&&this.onDrag(n,!0))},n.move=function(e,t){var n=e[0],r=e[1],i=this.getCurrentStore().prevClients;return this.moveClients(i.map((function(e){var t=e.clientX,i=e.clientY;return{clientX:t+n,clientY:i+r,originalClientX:t,originalClientY:i}})),t,!0)},n.triggerDragStart=function(e){this.onDragStart(e,!1)},n.setEventDatas=function(e){var t=this.datas;for(var n in e)t[n]=e[n];return this},n.getEventDatas=function(){return this.datas},n.unset=function(){var e=this,t=this.targets,n=this.options.container;this.off(),Object(o.P)(window,\"blur\",this.onBlur),this.isMouse&&(t.forEach((function(t){Object(o.P)(t,\"mousedown\",e.onDragStart)})),Object(o.P)(n,\"mousemove\",this.onDrag),Object(o.P)(n,\"mouseup\",this.onDragEnd),Object(o.P)(n,\"contextmenu\",this.onDragEnd)),this.isTouch&&(t.forEach((function(t){Object(o.P)(t,\"touchstart\",e.onDragStart)})),Object(o.P)(n,\"touchstart\",this.onDragStart),Object(o.P)(n,\"touchmove\",this.onDrag),Object(o.P)(n,\"touchend\",this.onDragEnd),Object(o.P)(n,\"touchcancel\",this.onDragEnd))},n.onPinchStart=function(e){var t=this.options.pinchThreshold;if(!(this.isDrag&&this.getMovement()>t)){var n=new p(l(e));this.pinchFlag=!0,this.clientStores.splice(0,0,n),!1===this.emit(\"pinchStart\",A({datas:this.datas,angle:n.getAngle(),touches:this.getCurrentStore().getPositions()},n.getPosition(),{inputEvent:e}))&&(this.pinchFlag=!1)}},n.onPinch=function(e,t){if(this.flag&&this.pinchFlag&&!(t.length<2)){var n=this.getCurrentStore();this.isPinch=!0,this.emit(\"pinch\",A({datas:this.datas,movement:this.getMovement(t),angle:n.getAngle(t),rotation:n.getRotation(t),touches:n.getPositions(t),scale:n.getScale(t),distance:n.getDistance(t)},n.getPosition(t),{inputEvent:e}))}},n.onPinchEnd=function(e){if(this.pinchFlag){var t=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var n=this.getCurrentStore();this.emit(\"pinchEnd\",A({datas:this.datas,isPinch:t,touches:n.getPositions()},n.getPosition(),{inputEvent:e})),this.isPinch=!1,this.pinchFlag=!1}},n.initDrag=function(){this.clientStores=[],this.pinchFlag=!1,this.doubleFlag=!1,this.prevTime=0,this.flag=!1},n.getCurrentStore=function(){return this.clientStores[0]},n.moveClients=function(e,t,n){var r=this.getCurrentStore()[n?\"addClients\":\"getPosition\"](e);return this.isDrag=!0,A({datas:this.datas},r,{movement:this.getMovement(e),isDrag:this.isDrag,isPinch:this.isPinch,isScroll:!1,inputEvent:t})},t}(i.a);var v=n(24),B=n(34),m=function(e,t){return(m=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function b(e,t){function n(){this.constructor=e}m(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var w=function(){return(w=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};var E,y=\"safari\"===Object(B.a)().browser.name,C=\"infinite-viewer-\",Q=Object(v.a)((E=C,\"\\n{\\n    position: relative;\\n    overscroll-behavior: none;\\n}\\n.wrapper {\\n    position: absolute;\\n    width: 100%;\\n    height: 100%;\\n    overflow: auto;\\n    top: 0;\\n    left: 0;\\n    will-change: scroll-position;\\n}\\n.wrapper::-webkit-scrollbar {\\n    display: none;\\n}\\n.scroll-area {\\n    position:absolute;\\n    top:0;\\n    left:0;\\n    transform-origin: 0 0;\\n}\\n.scroll-bar {\\n    position:absolute;\\n    width: 10px;\\n    height: 10px;\\n    box-sizing: border-box;\\n    right: 0;\\n    bottom: 0;\\n    overflow: hidden;\\n}\\n.horizontal-scroll-bar {\\n    width: 100%;\\n    height: 14px;\\n}\\n.vertical-scroll-bar {\\n    height: 100%;\\n    width: 14px;\\n}\\n.scroll-thumb {\\n    position:relative;\\n    opacity: 0.7;\\n    background: #333;\\n    border-radius: 3px;\\n    left: 0px;\\n    top: 0px;\\n    z-index: 10;\\n    width: 6px;\\n    height: 6px;\\n    transition: all ease 0.2s;\\n}\\n.horizontal-scroll-bar .scroll-thumb {\\n    margin: 4px 0px;\\n    transition-property: margin, height, border-radius;\\n}\\n.vertical-scroll-bar .scroll-thumb {\\n    margin: 0px 4px;\\n    transition-property: margin, width, border-radius;\\n}\\n.horizontal-scroll-bar:hover .scroll-thumb {\\n    height: 10px;\\n    margin: 2px 0px;\\n    border-radius: 5px;\\n}\\n.vertical-scroll-bar:hover .scroll-thumb {\\n    width: 10px;\\n    margin: 0px 2px;\\n    border-radius: 5px;\\n}\\n\".replace(/([^}{]*){/gm,(function(e,t){return t.replace(/\\.([^{,\\s\\d.]+)/g,\".\"+E+\"$1\")+\"{\"})))),x={margin:500,threshold:100,zoom:1,rangeX:[-1/0,1/0],rangeY:[-1/0,1/0],wrapperElement:null,scrollAreaElement:null,horizontalScrollElement:null,verticalScrollElement:null,usePinch:!1,pinchThreshold:30,cspNonce:\"\",wheelScale:.01,displayHorizontalScroll:!0,displayVerticalScroll:!0,useForceWheel:!1,zoomOffsetX:\"50%\",zoomOffsetY:\"50%\",translateZ:0},F=Q.className,U=[\"margin\",\"threshold\",\"zoomOffsetX\",\"zoomOffsetY\",\"zoom\",\"rangeX\",\"rangeY\",\"usePinch\",\"pinchThreshold\",\"wheelScale\",\"displayVerticalScroll\",\"displayHorizontalScroll\",\"useForceWheel\",\"translateZ\"],S=function(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),i=0;for(t=0;t<n;t++)for(var o=arguments[t],a=0,A=o.length;a<A;a++,i++)r[i]=o[a];return r}(U,[\"cspNonce\",\"wrapperElement\",\"scrollAreaElement\",\"verticalScrollElement\",\"horizontalScrollElement\"]),O=(Boolean,Boolean,Boolean,Boolean,[\"scroll\",\"abortPinch\",\"dragStart\",\"dragEnd\",\"pinchStart\",\"pinch\"]),H=[\"getScrollLeft\",\"getScrollTop\",\"getScrollWidth\",\"getScrollHeight\",\"scrollTo\",\"scrollBy\",\"scrollCenter\",\"getContainer\",\"getViewport\",\"getWrapper\",\"setZoom\",\"getRangeX\",\"getRangeY\"];function T(e,t){var n=Math.sqrt(e[0]*e[0]+e[1]*e[1]);return Math.abs(n/t)}function N(e){return Math.abs(e)}function _(e,t,n,r,i){return[i||isFinite(n[0])?n[0]:Math.min(-1,Math.floor(e/t))*t-r,i||isFinite(n[1])?n[1]:Math.max(1,Math.ceil(e/t))*t+r]}var M=function(e){function t(t,n){var r=e.call(this)||this;r.type=t,r.barElement=n,r.isAppend=!1,r.pos=0,r.size=0,r.scrollSize=0,r.isHorizontal=!1,r.onWheel=function(e){var t=r.isHorizontal?e.deltaX:e.deltaY;t&&e.preventDefault(),r.trigger(\"scroll\",{delta:t})};var i=\"horizontal\"===t;if(r.isHorizontal=i,n)r.thumbElement=n.querySelector(\".infinite-viewer-scroll-thumb\");else{n=document.createElement(\"div\");var a=document.createElement(\"div\");Object(o.p)(n,i?\"infinite-viewer-horizontal-scroll-bar\":\"infinite-viewer-vertical-scroll-bar\"),Object(o.p)(n,\"infinite-viewer-scroll-bar\"),Object(o.p)(a,\"infinite-viewer-scroll-thumb\"),n.insertBefore(a,null),r.barElement=n,r.thumbElement=a,r.isAppend=!0}return r.gesto=new g(r.barElement,{container:window}).on(\"dragStart\",(function(e){var t=e.inputEvent.target,n=e.datas,o=r.thumbElement===t;o||setTimeout((function(){requestAnimationFrame((function(){var t=r.thumbElement.getBoundingClientRect(),n=t[i?\"left\":\"top\"],o=n+t[i?\"width\":\"height\"],a=e[i?\"clientX\":\"clientY\"];if(!(n<=a&&a<=o)){var A=r.size,s=A*A/r.scrollSize;r.scrollBy(n<a?s:-s)}}))}),100),n.isThumb=o,e.inputEvent.stopPropagation(),e.inputEvent.preventDefault()})).on(\"drag\",(function(e){e.datas.isThumb&&r.scrollBy(r.isHorizontal?e.deltaX:e.deltaY)})),Object(o.q)(r.barElement,\"wheel\",r.onWheel,{passive:!1}),r}b(t,e);var n=t.prototype;return n.scrollBy=function(e){var t=e/this.size;this.trigger(\"scroll\",{delta:this.scrollSize*t})},n.render=function(e,t,n,r){this.pos=t,this.size=n,this.scrollSize=r;var i=e&&r>n?\"block\":\"none\",o=this.isHorizontal?[\"X\",\"width\"]:[\"Y\",\"height\"],a=o[0],A=o[1];this.barElement.style.cssText=\"display: \"+i+\";\",this.thumbElement.style.cssText+=A+\": \"+n*n/r+\"px;transform: translate\"+a+\"(\"+t/r*n+\"px)\"},n.destroy=function(){Object(o.P)(this.barElement,\"wheel\",this.onWheel),this.gesto.off(),this.off()},t}(i.a),R=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return b(t,e),t}(function(e){function t(t,n,r){void 0===r&&(r={});var i=e.call(this)||this;return i.containerElement=t,i.viewportElement=n,i.offsetX=0,i.offsetY=0,i.containerWidth=0,i.containerHeight=0,i.viewportWidth=0,i.viewportHeight=0,i.scrollLeft=0,i.scrollTop=0,i.timer=0,i.tempScale=1,i.dragFlag=!1,i.isLoop=!1,i.resize=function(){var e=i.containerElement,t=e.offsetWidth,n=e.offsetHeight,r=i.viewportElement,o=r.offsetWidth,a=r.offsetHeight;i.containerWidth=t,i.containerHeight=n,i.viewportWidth=o,i.viewportHeight=a},i.onScroll=function(){var e=i.wrapperElement,t=e.scrollLeft,n=e.scrollTop,r=i.zoom,o=void 0===r?x.zoom:r,a=t-i.scrollLeft,A=n-i.scrollTop,s=i.getScrollLeft(),l=i.getScrollTop();i.isLoop&&(i.isLoop=!1),i.scrollLeft=t,i.scrollTop=n,i.scrollTo(s+a/o,l+A/o)},i.onWheel=function(e){var t=i.options;if(e.ctrlKey){var n=-e.deltaY,r=Math.max(1+n*(t.wheelScale||.01),1e-6);i.trigger(\"pinch\",{distance:n,scale:r,rotation:0,zoom:i.zoom*r,inputEvent:e})}else{if(!y&&!t.useForceWheel)return;var o=i.zoom,a=e.deltaX,A=e.deltaY;e.shiftKey&&!a&&(a=A,A=0),i.scrollBy(a/o,A/o)}e.preventDefault()},i.onGestureStart=function(e){i.tempScale=i.zoom,e.preventDefault()},i.onGestureChange=function(e){if(e.preventDefault(),!i.gesto.isFlag()&&i.tempScale){var t=e.scale;i.trigger(\"pinch\",{distance:0,scale:t,rotation:e.rotation,zoom:i.tempScale*t,inputEvent:e})}else i.tempScale=0},i.options=w(w({},x),r),i.init(),i}b(t,e);var n,r,i=t.prototype;return i.getContainer=function(){return this.containerElement},i.getViewport=function(){return this.viewportElement},i.getWrapper=function(){return this.wrapperElement},i.destroy=function(){this.off(),this.gesto.unset(),this.verticalScrollbar.destroy(),this.horizontalScrollbar.destroy(),this.injectResult.destroy();var e=this.containerElement;Object(o.P)(window,\"resize\",this.resize),Object(o.P)(this.wrapperElement,\"scroll\",this.onScroll),Object(o.P)(e,\"wheel\",this.onWheel),Object(o.P)(e,\"tgesturestart\",this.onGestureStart),Object(o.P)(e,\"gesturechange\",this.onGestureChange),this.gesto=null,this.injectResult=null,this.containerElement=null,this.viewportElement=null,this.options=null},i.getScrollTop=function(e){return this.scrollTop/this.zoom+this.offsetY+(e?N(this.getRangeY()[0]):0)},i.getScrollLeft=function(e){return this.scrollLeft/this.zoom+this.offsetX+(e?N(this.getRangeX()[0]):0)},i.getScrollWidth=function(e){var t=this.getRangeX(e);return this.containerWidth+N(t[0])+N(t[1])},i.getScrollHeight=function(e){var t=this.getRangeY(e);return this.containerHeight+N(t[0])+N(t[1])},i.scrollCenter=function(){this.resize();var e=this.zoom,t=-(this.containerWidth/e-this.viewportWidth)/2,n=-(this.containerHeight/e-this.viewportHeight)/2;return this.scrollTo(t,n)},i.scrollBy=function(e,t){return this.scrollTo(this.getScrollLeft()+e,this.getScrollTop()+t)},i.scrollTo=function(e,t){var n=this,r=this,i=r.zoom,o=void 0===i?x.zoom:i,a=r.margin,A=void 0===a?x.margin:a,s=r.threshold,l=void 0===s?x.threshold:s,u=r.scrollLeft,c=r.scrollTop,f=this.getRangeX(!0,!0),d=f[0],p=f[1],h=this.getRangeY(!0,!0),g=h[0],v=h[1],B=u,m=c,b=this.getScrollAreaWidth(),w=this.getScrollAreaHeight(),E=e*o,y=t*o;if(E-l<=d){var C=Math.max(0,E-d);B=C,e=(d+C)/o}else if(E+l>=p){var Q=Math.max(0,p-E);B=b-Q,e=(p-Q)/o}else B<l?B+=A:B>b-l&&(B-=A);if(y-l<=g){C=Math.max(0,y-g);m=C,t=(g+C)/o}else if(y+l>=v){Q=Math.max(0,v-y);m=w-Q,t=(v-Q)/o}else m<l?m+=A:m>w-l&&(m-=A);B=Math.round(B),m=Math.round(m),this.scrollLeft=B,this.scrollTop=m,this.offsetX=e-B/o,this.offsetY=t-m/o,this.render();var F=this.getScrollLeft(),U=this.getScrollTop();return this.trigger(\"scroll\",{scrollLeft:F,scrollTop:U}),u===B&&c===m||(this.isLoop=!0,this.move(B,m),requestAnimationFrame((function(){if(n.isLoop){n.isLoop=!1;var e=n.wrapperElement,t=e.scrollLeft,r=e.scrollTop;n.scrollLeft=t,n.scrollTop=r,B===t&&m===r||n.scrollTo(F,U)}})),!1)},i.setZoom=function(e){var t=this,n=t.containerWidth,r=t.containerHeight,i=t.zoomOffsetX,a=void 0===i?x.zoomOffsetX:i,A=t.zoomOffsetY,s=void 0===A?x.zoomOffsetY:A,l=t.zoom,u=this.getScrollLeft(),c=this.getScrollTop();this.options.zoom=e;var f=this.getScrollLeft(),d=this.getScrollTop(),p=Object(o.w)(\"\"+a,n),h=Object(o.w)(\"\"+s,r),g=u+p/l,v=c+h/l,B=f+p/e,m=d+h/e;this.scrollBy(g-B,v-m),this.render()},i.getRangeX=function(e,t){var n=this.rangeX,r=void 0===n?x.rangeX:n,i=this.margin,o=void 0===i?x.margin:i,a=this.zoom,A=void 0===a?x.zoom:a,s=this.threshold,l=_(this.getScrollLeft(),o,r,s,t);return e?[l[0]*A,Math.max(this.viewportWidth*A-this.containerWidth,l[1]*A)]:l},i.getRangeY=function(e,t){var n=this.rangeY,r=void 0===n?x.rangeY:n,i=this.margin,o=void 0===i?x.margin:i,a=this.zoom,A=void 0===a?x.zoom:a,s=this.threshold,l=_(this.getScrollTop(),o,r,s,t);return e?[l[0]*A,Math.max(this.viewportHeight*A-this.containerHeight,l[1]*A)]:l},i.init=function(){var e=this,t=this.containerElement,n=this.options;Object(o.p)(t,F);var r=n.wrapperElement||t.querySelector(\".infinite-viewer-wrapper\"),i=n.scrollAreaElement||t.querySelector(\".infinite-viewer-scroll-area\"),a=n.horizontalScrollElement||t.querySelector(\".infinite-viewer-horizontal-scroll-bar\"),A=n.verticalScrollElement||t.querySelector(\".infinite-viewer-vertical-scroll-bar\");r||(r=document.createElement(\"div\"),Object(o.p)(r,\"infinite-viewer-wrapper\"),r.insertBefore(this.viewportElement,null),t.insertBefore(r,null)),this.wrapperElement=r,i||(i=document.createElement(\"div\"),Object(o.p)(i,\"infinite-viewer-scroll-area\"),r.insertBefore(i,r.firstChild)),this.scrollAreaElement=i,this.horizontalScrollbar=new M(\"horizontal\",a),this.verticalScrollbar=new M(\"vertical\",A),this.horizontalScrollbar.on(\"scroll\",(function(t){e.scrollBy(t.delta/e.zoom,0)})),this.verticalScrollbar.on(\"scroll\",(function(t){e.scrollBy(0,t.delta/e.zoom)})),this.horizontalScrollbar.isAppend&&t.insertBefore(this.horizontalScrollbar.barElement,null),this.verticalScrollbar.isAppend&&t.insertBefore(this.verticalScrollbar.barElement,null),Object(o.p)(t,F),this.injectResult=Q.inject(t,{nonce:this.options.cspNonce}),this.gesto=new g(t,{container:document.body,events:[\"touch\"]}).on(\"dragStart\",(function(t){var n=t.inputEvent,r=t.datas,i=t.stop;e.pauseAnimation(),e.dragFlag=!1,!1!==e.trigger(\"dragStart\",{inputEvent:n})?(n.preventDefault(),r.startEvent=n):i()})).on(\"drag\",(function(t){if(!e.options.usePinch||t.isPinch){e.trigger(\"drag\",{inputEvent:t.inputEvent}),function(e){var t=e.deltaX,n=e.deltaY,r=e.datas,i=Date.now(),o=r.speed;if(!o)return r.speed=[0,0],void(r.time=i);var a=i-r.time;r.speed=[o[0]/2+t/a,o[1]/2+n/a]}(t);var r=e.zoom;e.scrollBy(-t.deltaX/r,-t.deltaY/r)}else!e.dragFlag&&t.movement>n.pinchThreshold&&(e.dragFlag=!0,e.trigger(\"abortPinch\",{inputEvent:t.datas.startEvent||t.inputEvent}))})).on(\"dragEnd\",(function(t){e.trigger(\"dragEnd\",{isDrag:t.isDrag,isDouble:t.isDouble,inputEvent:t.inputEvent}),e.startAnimation(t.datas.speed)})).on(\"pinchStart\",(function(t){var n=t.inputEvent,r=t.datas,i=t.stop;n.preventDefault(),e.pauseAnimation(),r.startZoom=e.zoom,!1===e.trigger(\"pinchStart\",{inputEvent:n})&&i()})).on(\"pinch\",(function(t){e.trigger(\"pinch\",{rotation:t.rotation,distance:t.distance,scale:t.scale,zoom:t.datas.startZoom*t.scale,inputEvent:t.inputEvent})})),Object(o.q)(r,\"scroll\",this.onScroll),Object(o.q)(window,\"resize\",this.resize),Object(o.q)(t,\"wheel\",this.onWheel,{passive:!1}),Object(o.q)(t,\"gesturestart\",this.onGestureStart,{passive:!1}),Object(o.q)(t,\"gesturechange\",this.onGestureChange,{passive:!1}),this.resize(),this.render(),this.scrollTo(0,0)},i.render=function(){var e=this.offsetX,t=this.offsetY,n=this.zoom,r=void 0===n?x.zoom:n,i=this.translateZ,o=void 0===i?0:i,a=-e*r,A=-t*r;this.scrollAreaElement.style.cssText=\"width:calc(100% + \"+this.getScrollAreaWidth()+\"px);height:calc(100% + \"+this.getScrollAreaHeight()+\"px);\",this.viewportElement.style.cssText+=\"transform-origin: 0 0;transform:translate3d(\"+a+\"px, \"+A+\"px, \"+o+\"px) scale(\"+r+\");\",this.renderScroll()},i.renderScroll=function(){var e=this.containerWidth,t=this.containerHeight,n=this.zoom,r=this.getScrollLeft(!0)*n,i=this.getScrollTop(!0)*n,o=this.getScrollWidth(!0),a=this.getScrollHeight(!0);this.horizontalScrollbar.render(this.displayHorizontalScroll,r,e,o),this.verticalScrollbar.render(this.displayVerticalScroll,i,t,a)},i.move=function(e,t){var n=this.wrapperElement;n.scrollLeft=e,n.scrollTop=t},i.startAnimation=function(e){var t=this;if(e&&(e[0]||e[1])){var n=-6e-4,r=function(e){return 1-Math.pow(1-e,3)},i=T(e,n),o=function(e,t){var n=T(e,t);return[e[0]/2*n,e[1]/2*n]}(e,n),a=Date.now(),A=a;this.timer=requestAnimationFrame((function e(){var n=Date.now(),s=n-a;i<s&&(s=i);var l=r(s/i),u=r((A-a)/i);A=n,t.scrollBy(-o[0]*(l-u),-o[1]*(l-u)),s>=i||(t.timer=requestAnimationFrame(e))}))}},i.pauseAnimation=function(){cancelAnimationFrame(this.timer)},i.getScrollAreaWidth=function(){var e=this.getRangeX(!0),t=e[0],n=e[1];return t||n?2*this.margin:0},i.getScrollAreaHeight=function(){var e=this.getRangeY(!0),t=e[0],n=e[1];return t||n?2*this.margin:0},t=function(e,t,n,r){var i,o=arguments.length,a=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if(\"object\"===typeof Reflect&&\"function\"===typeof Reflect.decorate)a=Reflect.decorate(e,t,n,r);else for(var A=e.length-1;A>=0;A--)(i=e[A])&&(a=(o<3?i(a):o>3?i(t,n,a):i(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a}([(n=U,r=function(e,t){var n={enumerable:!0,configurable:!0,get:function(){return this.options[t]}},r=Object(o.u)(\"set \"+t);e[r]?n.set=function(e){this[r](e)}:n.set=function(e){this.options[t]=e},Object.defineProperty(e,t,n)},function(e){var t=e.prototype;n.forEach((function(e){r(t,e)}))})],t)}(i.a)),D=n(10),P=function(e,t){return(P=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};var k=function(){return(k=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};var I=O.map((function(e){return Object(o.u)(\"on \"+e)})),K=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}!function(e,t){function n(){this.constructor=e}P(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e);var n=t.prototype;return n.render=function(){var e=this.props.className;return Object(r.createElement)(\"div\",{className:(e||\"\")+\" \"+F,ref:Object(D.c)(this,\"containerElement\")},Object(r.createElement)(\"div\",{className:\"infinite-viewer-wrapper\",ref:Object(D.c)(this,\"wrapperElement\")},Object(r.createElement)(\"div\",{className:\"infinite-viewer-scroll-area\",ref:Object(D.c)(this,\"scrollAreaElement\")}),this.props.children),Object(r.createElement)(\"div\",{className:\"infinite-viewer-scroll-bar infinite-viewer-horizontal-scroll-bar\",ref:Object(D.c)(this,\"horizontalScrollElement\")},Object(r.createElement)(\"div\",{className:\"infinite-viewer-scroll-thumb\"})),Object(r.createElement)(\"div\",{className:\"infinite-viewer-scroll-bar infinite-viewer-vertical-scroll-bar\",ref:Object(D.c)(this,\"verticalScrollElement\")},Object(r.createElement)(\"div\",{className:\"infinite-viewer-scroll-thumb\"})))},n.componentDidMount=function(){var e=this,t=this.props,n={};S.forEach((function(e){e in t&&\"undefined\"!==typeof t[e]&&(n[e]=t[e])})),this.infiniteViewer=new R(this.containerElement,this.scrollAreaElement.nextElementSibling,k(k({},n),{wrapperElement:this.wrapperElement,scrollAreaElement:this.scrollAreaElement,horizontalScrollElement:this.horizontalScrollElement,verticalScrollElement:this.verticalScrollElement})),O.forEach((function(t,n){e.infiniteViewer.on(t,(function(t){var r=e.props;!1===(r[I[n]]&&r[I[n]](t))&&t.stop()}))}))},n.componentDidUpdate=function(e){var t=this.props,n=this.infiniteViewer;U.forEach((function(e){e in t&&n[e]!==t[e]&&(n[e]=t[e])}))},n.componentWillUnmount=function(){this.infiniteViewer.destroy()},n.getElement=function(){return this.containerElement},function(e,t,n,r){var i,o=arguments.length,a=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if(\"object\"===typeof Reflect&&\"function\"===typeof Reflect.decorate)a=Reflect.decorate(e,t,n,r);else for(var A=e.length-1;A>=0;A--)(i=e[A])&&(a=(o<3?i(a):o>3?i(t,n,a):i(t,n))||a);o>3&&a&&Object.defineProperty(t,n,a)}([Object(D.e)(H)],t.prototype,\"infiniteViewer\",void 0),t}(r.PureComponent);t.a=K},function(e,t,n){\"use strict\";var r=n(0),i=n(15),o=function(){function e(e){this.separator=e,this.orderMap={}}var t=e.prototype;return t.getFullName=function(e){return e.join(this.separator)},t.get=function(e){return this.orderMap[this.getFullName(e)]},t.gets=function(e,t){void 0===t&&(t=!0);var n=[],r=this;return function e(t,i){var o=r.get(t);if(o)return o.forEach((function(r){var o=i.concat([r]),a=e(t.concat([r]),o);a&&a.length||n.push(i.concat([r]))})),o}(e,t?e:[]),n},t.set=function(e,t){var n=this;return e.forEach((function(t,r){n.addName(e.slice(0,r),t)})),this.orderMap[this.getFullName(e)]=t,t},t.add=function(e){var t=e.length;return t?this.addName(e.slice(0,-1),e[t-1]):[]},t.addName=function(e,t){var n=this.get(e)||this.set(e,[]);return-1===n.indexOf(t)&&n.push(t),n},t.findIndex=function(e,t){var n=this.orderMap[this.getFullName(e)];return n?n.indexOf(t):-1},t.remove=function(e){var t=this.getFullName(e),n=this.orderMap;for(var r in n)0===r.indexOf(t)&&delete n[r];var i=e.length;if(i){var o=e.slice(0,-1),a=e[i-1];this.splice(o,this.findIndex(o,a),1)}return this},t.filter=function(t,n,r){void 0===r&&(r=!0);var i=this.gets(t,r).filter(n),o=new e(this.separator),a=r?[]:t;return i.forEach((function(e){o.add(a.concat(e))})),o},t.splice=function(e,t,n){for(var r=[],i=3;i<arguments.length;i++)r[i-3]=arguments[i];var o=this.get(e)||this.set(e,[]);return o.splice.apply(o,[t,n].concat(r)),this},t.clear=function(){this.orderMap={}},t.setObject=function(e){var t=this.orderMap;for(var n in e)t[n]=e[n].slice()},t.getObject=function(){var e={},t=this.orderMap;for(var n in t)e[n]=t[n].slice();return e},t.clone=function(){var t=new e(this.separator);return t.setObject(t.orderMap),t},e}(),a=(n(24),function(e,t){return(a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)});function A(e,t){function n(){this.constructor=e}a(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}function s(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),i=0;for(t=0;t<n;t++)for(var o=arguments[t],a=0,A=o.length;a<A;a++,i++)r[i]=o[a];return r}function l(e,t,n){var r=1-n;return n*n*n+3*n*n*r*t+3*n*r*r*e}function u(e,t,n,i){var o=function(o){var a=function(e,t,n){for(var r=n,i=1;Math.abs(i)>.001;){if(i=l(e,t,r)-n,Math.abs(i)<.001)return r;r-=i/2}return r}(e,n,Object(r.s)(o,0,1));return l(t,i,a)};return o.easingName=\"cubic-bezier(\"+e+\",\"+t+\",\"+n+\",\"+i+\")\",o}function c(e,t){var n=function(n){var r=1/e;return n>=1?1:(\"start\"===t?r:0)+Math.floor(n/r)*r};return n.easingName=\"steps(\"+e+\", \"+t+\")\",n}var f,d=c(1,\"start\"),p=c(1,\"end\"),h=u(0,0,1,1),g=u(.25,.1,.25,1),v=u(.42,0,1,1),B=u(0,0,.58,1),m=u(.42,0,.58,1),b=\"animation-timing-function\",w={transform:{},filter:{},attribute:{},html:!0},E={easing:[b]},y=((f={})[b]=!0,f.contents=!0,f.html=!0,f),C=\"delay\",Q={linear:h,ease:g,\"ease-in\":v,\"ease-out\":B,\"ease-in-out\":m,\"step-start\":d,\"step-end\":p},x=[\"duration\",\"fillMode\",\"direction\",\"iterationCount\",C,\"easing\",\"playSpeed\"],F=function(){function e(e,t){this.prefix=\"\",this.suffix=\"\",this.model=\"\",this.type=\"\",this.separator=\",\",t&&this.setOptions(t),this.value=Object(r.L)(e)?e.split(this.separator):e}var t=e.prototype;return t.setOptions=function(e){for(var t in e)this[t]=e[t];return this},t.size=function(){return this.value.length},t.get=function(e){return this.value[e]},t.set=function(e,t){return this.value[e]=t,this},t.clone=function(){var t=this,n=t.separator,r=t.prefix,i=t.suffix,o=t.model,a=t.type;return new e(this.value.map((function(t){return t instanceof e?t.clone():t})),{separator:n,prefix:r,suffix:i,model:o,type:a})},t.toValue=function(){return this.prefix+this.join()+this.suffix},t.join=function(){return this.value.map((function(t){return t instanceof e?t.toValue():t})).join(this.separator)},t.forEach=function(e){return this.value.forEach(e),this},e}();function U(e){for(var t=Object(r.V)(e,\";\"),n={},i=t.length,o=i,a=0;a<i;++a){var A=Object(r.V)(t[a],\":\");A.length<2||!A[1]?--o:n[A[0].trim()]=H(A[1].trim())}return{styles:n,length:o}}function S(e){var t=r.l;return 3===e.length&&(e[3]=1),new F(e,{model:t,separator:\",\",type:\"color\",prefix:t+\"(\",suffix:\")\"})}function O(e,t){return new F(e,{type:\"array\",separator:t})}function H(e,t){if(!Object(r.L)(e))return Object(r.H)(e)?O(e,\",\"):e;var n=Object(r.T)(e);return n.length>1?O(n.map((function(e){return H(e)})),\",\"):(n=Object(r.U)(e)).length>1?O(n.map((function(e){return H(e)})),\" \"):(n=/^(['\"])([^'\"]*)(['\"])$/g.exec(e))&&n[1]===n[3]?new F([H(n[2])],{prefix:n[1],suffix:n[1]}):-1!==e.indexOf(\"(\")?function(e){var t=Object(r.S)(e),n=t.prefix,i=t.value,o=t.suffix;if(\"undefined\"===typeof i)return e;if(r.d.indexOf(n)>-1)return S(Object(r.X)(e));var a=H(i,n),A=[i],s=\",\",l=n+\"(\",u=\")\"+o;return a instanceof F&&(s=a.separator,A=a.value,l+=a.prefix,u=a.suffix+u),new F(A,{separator:s,model:n,prefix:l,suffix:u})}(e):\"#\"===e.charAt(0)&&\"url\"!==t?function(e){var t=Object(r.X)(e);return t?S(t):e}(e):e}function T(e,t){void 0===t&&(t={});var n=e.model;if(n){e.setOptions({model:\"\",suffix:\"\",prefix:\"\"});var r=e.size()>1?e:e.get(0);t[n]=r}else e.forEach((function(e){T(e,t)}));return t}function N(e){return e instanceof F}function _(e){var t=typeof e;if(t===r.j){if(Object(r.H)(e))return r.c;if(N(e))return r.k}else if(t===r.m||t===r.i)return\"value\";return t}function M(e){return Object(r.K)(e)&&e.constructor===Object}function R(e,t){var n=[];if(M(e))for(var r in e)t.push(r),n=n.concat(R(e[r],t)),t.pop();else n.push(t.slice());return n}function D(e){return Math.round(1e6*e)/1e6}function P(e,t,n){void 0===n&&(n=e.length);for(var i=t,o=0;o<n;++o){if(!Object(r.K)(i)||null==i)return;i=i[e[o]]}return i}function k(e,t,n){var r=t.length,i=e;if(0===r)return!1;for(var o=0;o<r;++o){if(!0===i)return!1;if(!(i=i[t[o]])||!n&&!0===i)return!1}return!0}function I(e,t){return k(w,e,t)}function K(e){return k(y,e,!0)}function L(e){var t;if(Object(r.L)(e))if(e in Q)t=Q[e];else{var n=H(e);if(Object(r.L)(n))return 0;if(\"cubic-bezier\"===n.model)t=u((e=n.value.map((function(e){return parseFloat(e)})))[0],e[1],e[2],e[3]);else{if(\"steps\"!==n.model)return 0;t=c(parseFloat(n.value[0]),n.value[1])}}else t=Object(r.H)(e)?u(e[0],e[1],e[2],e[3]):e;return t}function z(e,t,n){return\"reverse\"===n||(\"infinite\"!==t&&e===t&&t%1===0?n===(e%2>=1?\"alternate-reverse\":\"alternate\"):n===(e%2>=1?\"alternate\":\"alternate-reverse\"))}var j=[\"id\",\"iterationCount\",C,\"fillMode\",\"direction\",\"playSpeed\",\"duration\",\"playSpeed\",\"iterationTime\",\"playState\"],X=s(j,[\"easing\",\"easingName\"]);i.a;function G(e,t){if(void 0===t&&(t=[]),!e)return\"\";var n=[],i=Object(r.D)(e);return Object(r.R)(i,t),i.forEach((function(t){n.push(t.replace(/\\d$/g,\"\")+\"(\"+e[t]+\")\")})),n.join(\" \")}function V(e,t){return void 0===t&&(t=!1),Y({},e,t)}function Y(e,t,n){for(var i in void 0===n&&(n=!1),t){var o=t[i],a=_(o);a===r.k?e[i]=n?o.toValue():o.clone():a===r.f?e[i]=n?J([i],o):o:a===r.c?e[i]=o.slice():a===r.j?Object(r.K)(e[i])&&!N(e[i])?Y(e[i],o,n):e[i]=V(o,n):e[i]=t[i]}return e}function W(e){return e[0]in E?E[e[0]]:e}function J(e,t){var n=_(t);if(n===r.k)return t.toValue();if(n===r.f){if(e[0]!==b)return J(e,t())}else if(n===r.j)return V(t,!0);return t}var q=function(){function e(e){void 0===e&&(e={}),this.properties={},this.orderMap=new o(\"_///_\"),this.properties={},this.set(e)}var t=e.prototype;return t.get=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var n=this.raw.apply(this,e);return J(W(e),n)},t.getOrders=function(e){return this.orderMap.get(e)},t.setOrders=function(e,t){return this.orderMap.set(e,t)},t.getOrderObject=function(){return this.orderMap.getObject()},t.setOrderObject=function(e){this.orderMap.setObject(e)},t.getKeys=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var n=this.raw.apply(this,e),i=_(n)===r.j?Object(r.D)(n):[];return Object(r.R)(i,this.orderMap.get(e)),i},t.gets=function(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];var r=this.get.apply(this,t),i=this.getKeys.apply(this,t);return i.map((function(n){return{key:n,value:r[n],children:e.gets.apply(e,s(t,[n]))}}))},t.raw=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return P(W(e),this.properties)},t.remove=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var n=W(e),i=n.length;if(!i)return this;this.orderMap.remove(n);var o=P(n,this.properties,i-1);return Object(r.K)(o)&&delete o[n[i-1]],this},t.set=function(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];var i=this,o=t.length,a=t.slice(0,-1),A=t[o-1],l=a[0];if(1===o&&A instanceof e)i.merge(A);else if(l in E)i._set(E[l],A);else if(2===o&&Object(r.H)(l))i._set(l,A);else if(N(A))I(a)?i.set.apply(i,s(a,[T(A)])):i._set(a,A);else if(Object(r.H)(A))i._set(a,A);else if(Object(r.K)(A))for(var u in!i.has.apply(i,a)&&I(a)&&i._set(a,{}),A)i.set.apply(i,s(a,[u,A[u]]));else if(Object(r.L)(A)){if(I(a,!0)){if(K(a)||!I(a))this._set(a,A);else{var c=H(A);Object(r.K)(c)&&i.set.apply(i,s(a,[c]))}return this}var f=U(A),d=f.styles,p=f.length;for(var u in d)i.set.apply(i,s(a,[u,d[u]]));if(p)return this;i._set(a,A)}else i._set(a,A);return i},t.getNames=function(){return R(this.properties,[])},t.has=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var n=W(e),i=n.length;return!!i&&!Object(r.M)(P(n,this.properties,i))},t.clone=function(){var t=new e;return t.setOrderObject(this.orderMap.orderMap),t.merge(this)},t.merge=function(e){var t=this.properties,n=e.properties;return n&&Y(t,n),this},t.toCSSObject=function(){var e=this.get(),t={};for(var n in e)if(!I([n],!0)){var i=e[n];n===b?t[b.replace(\"animation\",r.b)]=(Object(r.L)(i)?i:i.easingName)||\"initial\":t[n]=i}var o=G(e.transform,this.orderMap.get([\"transform\"])),a=G(e.filter,this.orderMap.get([r.e]));return r.o&&o&&(t[r.o]=o),r.e&&a&&(t[r.e]=a),t},t.toCSS=function(){var e=this.toCSSObject(),t=[],n=Object(r.D)(e);return Object(r.R)(n,this.orderMap.get([])),n.forEach((function(n){t.push(n+\":\"+e[n]+\";\")})),t.join(\"\")},t.clear=function(){return this.properties={},this.orderMap.clear(),this},t._set=function(e,t){for(var n=this.properties,i=e.length,o=0;o<i-1;++o){var a=e[o];!(a in n)&&(n[a]={}),n=n[a]}if(i){var A=e[i-1];this.orderMap.add(e),n[A]=1===i&&A===b?L(t):Object(r.L)(t)&&!K(e)?H(t,A):t}},e}();var Z=function(){return(Z=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};var $=function(){function e(e){var t=this;void 0===e&&(e={}),this.map=new Map,this.onBeforeRenderStart=function(e){var n=t.testFrame(e);e.setTransform(n.toCSSObject().transform||\"\")},this.onBeforeRenderGroupStart=function(e){e.events.forEach((function(e){t.onBeforeRenderStart(e)}))},this.onDragStart=function(e){var n=t.testFrame(e);if(!n)return!1;t.setTranasform(e,n,\"translate\")},this.onDrag=function(e){t.testDrag(e),t.testRender(e.target)},this.onDragGroupStart=function(e){e.events.forEach((function(e){t.onDragStart(e)}))},this.onDragGroup=function(e){e.events.forEach((function(e){t.onDrag(e)}))},this.onResizeStart=function(e){e.dragStart&&t.onDragStart(e.dragStart),e.setOrigin([\"%\",\"%\"])},this.onResize=function(e){t.testResize(e),t.testRender(e.target)},this.onResizeGroupStart=function(e){e.events.forEach((function(e){t.onResizeStart(e)}))},this.onResizeGroup=function(e){e.events.forEach((function(e){t.onResize(e)}))},this.onScaleStart=function(e){var n=t.testFrame(e);if(!n)return!1;t.setTranasform(e,n,\"scale\"),e.dragStart&&t.onDragStart(e.dragStart)},this.onScale=function(e){t.testScale(e),t.testRender(e.target)},this.onScaleGroupStart=function(e){e.events.forEach((function(e){t.onScaleStart(e)}))},this.onScaleGroup=function(e){e.events.forEach((function(e){t.onScale(e)}))},this.onRotateStart=function(e){var n=t.testFrame(e);if(!n)return!1;t.setTranasform(e,n,\"rotate\"),e.dragStart&&t.onDragStart(e.dragStart)},this.onRotate=function(e){t.testRotate(e),t.testRender(e.target)},this.onRotateGroupStart=function(e){e.events.forEach((function(e){t.onRotateStart(e)}))},this.onRotateGroup=function(e){e.events.forEach((function(e){t.onRotate(e)}))},this.onClip=function(e){var n=t.testFrame(e);\"rect\"===e.clipType?n.set(\"clip\",e.clipStyle):n.set(\"clip-path\",e.clipStyle),t.testRender(e.target)},this.onDragOriginStart=function(e){e.dragStart&&t.onDragStart(e.dragStart)},this.onDragOrigin=function(e){t.testFrame(e).set(\"transform-origin\",e.transformOrigin),t.testDrag(e.drag),t.testRender(e.target)},this.onRound=function(e){t.testFrame(e).set(\"border-radius\",e.borderRadius),t.testRender(e.target)},this.onWarpStart=function(e){var n=t.testFrame(e);if(!n)return!1;t.setTranasform(e,n,\"matrix3d\")},this.onWarp=function(e){t.testFrame(e).set(\"transform\",\"matrix3d\",e.matrix.join(\", \")),t.testRender(e.target)},this.onRender=function(e){var n=e.target,r=t.getFrame(n);n&&r&&t.render(n,r)},this.options=Z({useBeforeRender:!1,useRender:!1,createAuto:!0},e)}var t=e.prototype;return e.create=function(t){return new e(t)},t.render=function(e,t){if(void 0===t&&(t=this.getFrame(e)),e.style.cssText+=t.toCSS(),\"ownerSVGElement\"in e&&\"svg\"!==e.tagName.toLowerCase()){var n=t.getOrders([\"transform\"]);e.setAttribute(\"transform\",n.map((function(e){return e+\"(\"+t.get(\"transform\",e).split(\",\").map((function(e){return parseFloat(e)})).join(\", \")+\")\"})).join(\" \"))}},t.clear=function(){this.map.clear()},t.getTargets=function(){return this.map.keys()},t.getFrames=function(){return this.map.values()},t.getFrame=function(e){return this.map.get(e)},t.setFrame=function(e,t){return this.map.set(e,t)},t.removeFrame=function(e){this.map.delete(e)},t.createFrame=function(e,t){void 0===t&&(t={});var n=new q({transform:{translate:\"0px, 0px\",rotate:\"0deg\",scale:\"1, 1\"}});return n.set(t),this.map.set(e,n),n},t.setElements=function(e){for(var t=Object(r.L)(e)?document.querySelectorAll(e):e,n=t.length,i=this.map,o=0;o<n;++o){var a=t[o];i.has(a)||this.createFrame(a)}},t.testFrame=function(e){var t=e.target,n=this.getFrame(t);return n||(this.options.createAuto||!e.stop?this.createFrame(t):void e.stop())},t.testDrag=function(e){var t=e.target,n=e.translate,r=this.getFrame(t),i=n[0]+\"px\",o=n[1]+\"px\";r.has(\"transform\",\"translate\")?r.set(\"transform\",\"translate\",i+\",\"+o):(r.set(\"transform\",\"translateX\",i),r.set(\"transform\",\"translateY\",o))},t.testResize=function(e){var t=e.target,n=this.getFrame(t);n.set(\"width\",e.width+\"px\"),n.set(\"height\",e.height+\"px\"),this.testDrag(e.drag)},t.testScale=function(e){var t=this.testFrame(e),n=e.scale;this.testDrag(e.drag),t.set(\"transform\",\"scale\",n[0]+\",\"+n[1])},t.testRotate=function(e){var t=this.testFrame(e),n=e.rotate;this.testDrag(e.drag),t.set(\"transform\",\"rotate\",n+\"deg\")},t.testRender=function(e,t){void 0===t&&(t=this.getFrame(e)),this.options.useRender||this.render(e,t)},t.setTranasform=function(e,t,n){var r=function(e,t){return(e.getOrders([\"transform\"])||[]).indexOf(t)}(t,n);this.options.useBeforeRender?e.setTransformIndex(r):e.setTransform(t.toCSSObject().transform||[],r)},e}();t.a=$},,function(e,t,n){\"use strict\";var r=n(78),i=\"function\"===typeof Symbol&&Symbol.for,o=i?Symbol.for(\"react.element\"):60103,a=i?Symbol.for(\"react.portal\"):60106,A=i?Symbol.for(\"react.fragment\"):60107,s=i?Symbol.for(\"react.strict_mode\"):60108,l=i?Symbol.for(\"react.profiler\"):60114,u=i?Symbol.for(\"react.provider\"):60109,c=i?Symbol.for(\"react.context\"):60110,f=i?Symbol.for(\"react.forward_ref\"):60112,d=i?Symbol.for(\"react.suspense\"):60113,p=i?Symbol.for(\"react.memo\"):60115,h=i?Symbol.for(\"react.lazy\"):60116,g=\"function\"===typeof Symbol&&Symbol.iterator;function v(e){for(var t=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+e,n=1;n<arguments.length;n++)t+=\"&args[]=\"+encodeURIComponent(arguments[n]);return\"Minified React error #\"+e+\"; visit \"+t+\" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.\"}var B={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},m={};function b(e,t,n){this.props=e,this.context=t,this.refs=m,this.updater=n||B}function w(){}function E(e,t,n){this.props=e,this.context=t,this.refs=m,this.updater=n||B}b.prototype.isReactComponent={},b.prototype.setState=function(e,t){if(\"object\"!==typeof e&&\"function\"!==typeof e&&null!=e)throw Error(v(85));this.updater.enqueueSetState(this,e,t,\"setState\")},b.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,\"forceUpdate\")},w.prototype=b.prototype;var y=E.prototype=new w;y.constructor=E,r(y,b.prototype),y.isPureReactComponent=!0;var C={current:null},Q=Object.prototype.hasOwnProperty,x={key:!0,ref:!0,__self:!0,__source:!0};function F(e,t,n){var r,i={},a=null,A=null;if(null!=t)for(r in void 0!==t.ref&&(A=t.ref),void 0!==t.key&&(a=\"\"+t.key),t)Q.call(t,r)&&!x.hasOwnProperty(r)&&(i[r]=t[r]);var s=arguments.length-2;if(1===s)i.children=n;else if(1<s){for(var l=Array(s),u=0;u<s;u++)l[u]=arguments[u+2];i.children=l}if(e&&e.defaultProps)for(r in s=e.defaultProps)void 0===i[r]&&(i[r]=s[r]);return{$$typeof:o,type:e,key:a,ref:A,props:i,_owner:C.current}}function U(e){return\"object\"===typeof e&&null!==e&&e.$$typeof===o}var S=/\\/+/g,O=[];function H(e,t,n,r){if(O.length){var i=O.pop();return i.result=e,i.keyPrefix=t,i.func=n,i.context=r,i.count=0,i}return{result:e,keyPrefix:t,func:n,context:r,count:0}}function T(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>O.length&&O.push(e)}function N(e,t,n){return null==e?0:function e(t,n,r,i){var A=typeof t;\"undefined\"!==A&&\"boolean\"!==A||(t=null);var s=!1;if(null===t)s=!0;else switch(A){case\"string\":case\"number\":s=!0;break;case\"object\":switch(t.$$typeof){case o:case a:s=!0}}if(s)return r(i,t,\"\"===n?\".\"+_(t,0):n),1;if(s=0,n=\"\"===n?\".\":n+\":\",Array.isArray(t))for(var l=0;l<t.length;l++){var u=n+_(A=t[l],l);s+=e(A,u,r,i)}else if(null===t||\"object\"!==typeof t?u=null:u=\"function\"===typeof(u=g&&t[g]||t[\"@@iterator\"])?u:null,\"function\"===typeof u)for(t=u.call(t),l=0;!(A=t.next()).done;)s+=e(A=A.value,u=n+_(A,l++),r,i);else if(\"object\"===A)throw r=\"\"+t,Error(v(31,\"[object Object]\"===r?\"object with keys {\"+Object.keys(t).join(\", \")+\"}\":r,\"\"));return s}(e,\"\",t,n)}function _(e,t){return\"object\"===typeof e&&null!==e&&null!=e.key?function(e){var t={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+(\"\"+e).replace(/[=:]/g,(function(e){return t[e]}))}(e.key):t.toString(36)}function M(e,t){e.func.call(e.context,t,e.count++)}function R(e,t,n){var r=e.result,i=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?D(e,r,n,(function(e){return e})):null!=e&&(U(e)&&(e=function(e,t){return{$$typeof:o,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(e,i+(!e.key||t&&t.key===e.key?\"\":(\"\"+e.key).replace(S,\"$&/\")+\"/\")+n)),r.push(e))}function D(e,t,n,r,i){var o=\"\";null!=n&&(o=(\"\"+n).replace(S,\"$&/\")+\"/\"),N(e,R,t=H(t,o,r,i)),T(t)}var P={current:null};function k(){var e=P.current;if(null===e)throw Error(v(321));return e}var I={ReactCurrentDispatcher:P,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:C,IsSomeRendererActing:{current:!1},assign:r};t.Children={map:function(e,t,n){if(null==e)return e;var r=[];return D(e,r,null,t,n),r},forEach:function(e,t,n){if(null==e)return e;N(e,M,t=H(null,null,t,n)),T(t)},count:function(e){return N(e,(function(){return null}),null)},toArray:function(e){var t=[];return D(e,t,null,(function(e){return e})),t},only:function(e){if(!U(e))throw Error(v(143));return e}},t.Component=b,t.Fragment=A,t.Profiler=l,t.PureComponent=E,t.StrictMode=s,t.Suspense=d,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=I,t.cloneElement=function(e,t,n){if(null===e||void 0===e)throw Error(v(267,e));var i=r({},e.props),a=e.key,A=e.ref,s=e._owner;if(null!=t){if(void 0!==t.ref&&(A=t.ref,s=C.current),void 0!==t.key&&(a=\"\"+t.key),e.type&&e.type.defaultProps)var l=e.type.defaultProps;for(u in t)Q.call(t,u)&&!x.hasOwnProperty(u)&&(i[u]=void 0===t[u]&&void 0!==l?l[u]:t[u])}var u=arguments.length-2;if(1===u)i.children=n;else if(1<u){l=Array(u);for(var c=0;c<u;c++)l[c]=arguments[c+2];i.children=l}return{$$typeof:o,type:e.type,key:a,ref:A,props:i,_owner:s}},t.createContext=function(e,t){return void 0===t&&(t=null),(e={$$typeof:c,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:u,_context:e},e.Consumer=e},t.createElement=F,t.createFactory=function(e){var t=F.bind(null,e);return t.type=e,t},t.createRef=function(){return{current:null}},t.forwardRef=function(e){return{$$typeof:f,render:e}},t.isValidElement=U,t.lazy=function(e){return{$$typeof:h,_ctor:e,_status:-1,_result:null}},t.memo=function(e,t){return{$$typeof:p,type:e,compare:void 0===t?null:t}},t.useCallback=function(e,t){return k().useCallback(e,t)},t.useContext=function(e,t){return k().useContext(e,t)},t.useDebugValue=function(){},t.useEffect=function(e,t){return k().useEffect(e,t)},t.useImperativeHandle=function(e,t,n){return k().useImperativeHandle(e,t,n)},t.useLayoutEffect=function(e,t){return k().useLayoutEffect(e,t)},t.useMemo=function(e,t){return k().useMemo(e,t)},t.useReducer=function(e,t,n){return k().useReducer(e,t,n)},t.useRef=function(e){return k().useRef(e)},t.useState=function(e){return k().useState(e)},t.version=\"16.13.1\"},function(e,t,n){\"use strict\";var r=n(1),i=n(78),o=n(123);function a(e){for(var t=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+e,n=1;n<arguments.length;n++)t+=\"&args[]=\"+encodeURIComponent(arguments[n]);return\"Minified React error #\"+e+\"; visit \"+t+\" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.\"}if(!r)throw Error(a(227));function A(e,t,n,r,i,o,a,A,s){var l=Array.prototype.slice.call(arguments,3);try{t.apply(n,l)}catch(u){this.onError(u)}}var s=!1,l=null,u=!1,c=null,f={onError:function(e){s=!0,l=e}};function d(e,t,n,r,i,o,a,u,c){s=!1,l=null,A.apply(f,arguments)}var p=null,h=null,g=null;function v(e,t,n){var r=e.type||\"unknown-event\";e.currentTarget=g(n),function(e,t,n,r,i,o,A,f,p){if(d.apply(this,arguments),s){if(!s)throw Error(a(198));var h=l;s=!1,l=null,u||(u=!0,c=h)}}(r,t,void 0,e),e.currentTarget=null}var B=null,m={};function b(){if(B)for(var e in m){var t=m[e],n=B.indexOf(e);if(!(-1<n))throw Error(a(96,e));if(!E[n]){if(!t.extractEvents)throw Error(a(97,e));for(var r in E[n]=t,n=t.eventTypes){var i=void 0,o=n[r],A=t,s=r;if(y.hasOwnProperty(s))throw Error(a(99,s));y[s]=o;var l=o.phasedRegistrationNames;if(l){for(i in l)l.hasOwnProperty(i)&&w(l[i],A,s);i=!0}else o.registrationName?(w(o.registrationName,A,s),i=!0):i=!1;if(!i)throw Error(a(98,r,e))}}}}function w(e,t,n){if(C[e])throw Error(a(100,e));C[e]=t,Q[e]=t.eventTypes[n].dependencies}var E=[],y={},C={},Q={};function x(e){var t,n=!1;for(t in e)if(e.hasOwnProperty(t)){var r=e[t];if(!m.hasOwnProperty(t)||m[t]!==r){if(m[t])throw Error(a(102,t));m[t]=r,n=!0}}n&&b()}var F=!(\"undefined\"===typeof window||\"undefined\"===typeof window.document||\"undefined\"===typeof window.document.createElement),U=null,S=null,O=null;function H(e){if(e=h(e)){if(\"function\"!==typeof U)throw Error(a(280));var t=e.stateNode;t&&(t=p(t),U(e.stateNode,e.type,t))}}function T(e){S?O?O.push(e):O=[e]:S=e}function N(){if(S){var e=S,t=O;if(O=S=null,H(e),t)for(e=0;e<t.length;e++)H(t[e])}}function _(e,t){return e(t)}function M(e,t,n,r,i){return e(t,n,r,i)}function R(){}var D=_,P=!1,k=!1;function I(){null===S&&null===O||(R(),N())}function K(e,t,n){if(k)return e(t,n);k=!0;try{return D(e,t,n)}finally{k=!1,I()}}var L=/^[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD][:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$/,z=Object.prototype.hasOwnProperty,j={},X={};function G(e,t,n,r,i,o){this.acceptsBooleans=2===t||3===t||4===t,this.attributeName=r,this.attributeNamespace=i,this.mustUseProperty=n,this.propertyName=e,this.type=t,this.sanitizeURL=o}var V={};\"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style\".split(\" \").forEach((function(e){V[e]=new G(e,0,!1,e,null,!1)})),[[\"acceptCharset\",\"accept-charset\"],[\"className\",\"class\"],[\"htmlFor\",\"for\"],[\"httpEquiv\",\"http-equiv\"]].forEach((function(e){var t=e[0];V[t]=new G(t,1,!1,e[1],null,!1)})),[\"contentEditable\",\"draggable\",\"spellCheck\",\"value\"].forEach((function(e){V[e]=new G(e,2,!1,e.toLowerCase(),null,!1)})),[\"autoReverse\",\"externalResourcesRequired\",\"focusable\",\"preserveAlpha\"].forEach((function(e){V[e]=new G(e,2,!1,e,null,!1)})),\"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope\".split(\" \").forEach((function(e){V[e]=new G(e,3,!1,e.toLowerCase(),null,!1)})),[\"checked\",\"multiple\",\"muted\",\"selected\"].forEach((function(e){V[e]=new G(e,3,!0,e,null,!1)})),[\"capture\",\"download\"].forEach((function(e){V[e]=new G(e,4,!1,e,null,!1)})),[\"cols\",\"rows\",\"size\",\"span\"].forEach((function(e){V[e]=new G(e,6,!1,e,null,!1)})),[\"rowSpan\",\"start\"].forEach((function(e){V[e]=new G(e,5,!1,e.toLowerCase(),null,!1)}));var Y=/[\\-:]([a-z])/g;function W(e){return e[1].toUpperCase()}\"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height\".split(\" \").forEach((function(e){var t=e.replace(Y,W);V[t]=new G(t,1,!1,e,null,!1)})),\"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type\".split(\" \").forEach((function(e){var t=e.replace(Y,W);V[t]=new G(t,1,!1,e,\"http://www.w3.org/1999/xlink\",!1)})),[\"xml:base\",\"xml:lang\",\"xml:space\"].forEach((function(e){var t=e.replace(Y,W);V[t]=new G(t,1,!1,e,\"http://www.w3.org/XML/1998/namespace\",!1)})),[\"tabIndex\",\"crossOrigin\"].forEach((function(e){V[e]=new G(e,1,!1,e.toLowerCase(),null,!1)})),V.xlinkHref=new G(\"xlinkHref\",1,!1,\"xlink:href\",\"http://www.w3.org/1999/xlink\",!0),[\"src\",\"href\",\"action\",\"formAction\"].forEach((function(e){V[e]=new G(e,1,!1,e.toLowerCase(),null,!0)}));var J=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function q(e,t,n,r){var i=V.hasOwnProperty(t)?V[t]:null;(null!==i?0===i.type:!r&&(2<t.length&&(\"o\"===t[0]||\"O\"===t[0])&&(\"n\"===t[1]||\"N\"===t[1])))||(function(e,t,n,r){if(null===t||\"undefined\"===typeof t||function(e,t,n,r){if(null!==n&&0===n.type)return!1;switch(typeof t){case\"function\":case\"symbol\":return!0;case\"boolean\":return!r&&(null!==n?!n.acceptsBooleans:\"data-\"!==(e=e.toLowerCase().slice(0,5))&&\"aria-\"!==e);default:return!1}}(e,t,n,r))return!0;if(r)return!1;if(null!==n)switch(n.type){case 3:return!t;case 4:return!1===t;case 5:return isNaN(t);case 6:return isNaN(t)||1>t}return!1}(t,n,i,r)&&(n=null),r||null===i?function(e){return!!z.call(X,e)||!z.call(j,e)&&(L.test(e)?X[e]=!0:(j[e]=!0,!1))}(t)&&(null===n?e.removeAttribute(t):e.setAttribute(t,\"\"+n)):i.mustUseProperty?e[i.propertyName]=null===n?3!==i.type&&\"\":n:(t=i.attributeName,r=i.attributeNamespace,null===n?e.removeAttribute(t):(n=3===(i=i.type)||4===i&&!0===n?\"\":\"\"+n,r?e.setAttributeNS(r,t,n):e.setAttribute(t,n))))}J.hasOwnProperty(\"ReactCurrentDispatcher\")||(J.ReactCurrentDispatcher={current:null}),J.hasOwnProperty(\"ReactCurrentBatchConfig\")||(J.ReactCurrentBatchConfig={suspense:null});var Z=/^(.*)[\\\\\\/]/,$=\"function\"===typeof Symbol&&Symbol.for,ee=$?Symbol.for(\"react.element\"):60103,te=$?Symbol.for(\"react.portal\"):60106,ne=$?Symbol.for(\"react.fragment\"):60107,re=$?Symbol.for(\"react.strict_mode\"):60108,ie=$?Symbol.for(\"react.profiler\"):60114,oe=$?Symbol.for(\"react.provider\"):60109,ae=$?Symbol.for(\"react.context\"):60110,Ae=$?Symbol.for(\"react.concurrent_mode\"):60111,se=$?Symbol.for(\"react.forward_ref\"):60112,le=$?Symbol.for(\"react.suspense\"):60113,ue=$?Symbol.for(\"react.suspense_list\"):60120,ce=$?Symbol.for(\"react.memo\"):60115,fe=$?Symbol.for(\"react.lazy\"):60116,de=$?Symbol.for(\"react.block\"):60121,pe=\"function\"===typeof Symbol&&Symbol.iterator;function he(e){return null===e||\"object\"!==typeof e?null:\"function\"===typeof(e=pe&&e[pe]||e[\"@@iterator\"])?e:null}function ge(e){if(null==e)return null;if(\"function\"===typeof e)return e.displayName||e.name||null;if(\"string\"===typeof e)return e;switch(e){case ne:return\"Fragment\";case te:return\"Portal\";case ie:return\"Profiler\";case re:return\"StrictMode\";case le:return\"Suspense\";case ue:return\"SuspenseList\"}if(\"object\"===typeof e)switch(e.$$typeof){case ae:return\"Context.Consumer\";case oe:return\"Context.Provider\";case se:var t=e.render;return t=t.displayName||t.name||\"\",e.displayName||(\"\"!==t?\"ForwardRef(\"+t+\")\":\"ForwardRef\");case ce:return ge(e.type);case de:return ge(e.render);case fe:if(e=1===e._status?e._result:null)return ge(e)}return null}function ve(e){var t=\"\";do{e:switch(e.tag){case 3:case 4:case 6:case 7:case 10:case 9:var n=\"\";break e;default:var r=e._debugOwner,i=e._debugSource,o=ge(e.type);n=null,r&&(n=ge(r.type)),r=o,o=\"\",i?o=\" (at \"+i.fileName.replace(Z,\"\")+\":\"+i.lineNumber+\")\":n&&(o=\" (created by \"+n+\")\"),n=\"\\n    in \"+(r||\"Unknown\")+o}t+=n,e=e.return}while(e);return t}function Be(e){switch(typeof e){case\"boolean\":case\"number\":case\"object\":case\"string\":case\"undefined\":return e;default:return\"\"}}function me(e){var t=e.type;return(e=e.nodeName)&&\"input\"===e.toLowerCase()&&(\"checkbox\"===t||\"radio\"===t)}function be(e){e._valueTracker||(e._valueTracker=function(e){var t=me(e)?\"checked\":\"value\",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=\"\"+e[t];if(!e.hasOwnProperty(t)&&\"undefined\"!==typeof n&&\"function\"===typeof n.get&&\"function\"===typeof n.set){var i=n.get,o=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return i.call(this)},set:function(e){r=\"\"+e,o.call(this,e)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(e){r=\"\"+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}(e))}function we(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r=\"\";return e&&(r=me(e)?e.checked?\"true\":\"false\":e.value),(e=r)!==n&&(t.setValue(e),!0)}function Ee(e,t){var n=t.checked;return i({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=n?n:e._wrapperState.initialChecked})}function ye(e,t){var n=null==t.defaultValue?\"\":t.defaultValue,r=null!=t.checked?t.checked:t.defaultChecked;n=Be(null!=t.value?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:\"checkbox\"===t.type||\"radio\"===t.type?null!=t.checked:null!=t.value}}function Ce(e,t){null!=(t=t.checked)&&q(e,\"checked\",t,!1)}function Qe(e,t){Ce(e,t);var n=Be(t.value),r=t.type;if(null!=n)\"number\"===r?(0===n&&\"\"===e.value||e.value!=n)&&(e.value=\"\"+n):e.value!==\"\"+n&&(e.value=\"\"+n);else if(\"submit\"===r||\"reset\"===r)return void e.removeAttribute(\"value\");t.hasOwnProperty(\"value\")?Fe(e,t.type,n):t.hasOwnProperty(\"defaultValue\")&&Fe(e,t.type,Be(t.defaultValue)),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked)}function xe(e,t,n){if(t.hasOwnProperty(\"value\")||t.hasOwnProperty(\"defaultValue\")){var r=t.type;if(!(\"submit\"!==r&&\"reset\"!==r||void 0!==t.value&&null!==t.value))return;t=\"\"+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}\"\"!==(n=e.name)&&(e.name=\"\"),e.defaultChecked=!!e._wrapperState.initialChecked,\"\"!==n&&(e.name=n)}function Fe(e,t,n){\"number\"===t&&e.ownerDocument.activeElement===e||(null==n?e.defaultValue=\"\"+e._wrapperState.initialValue:e.defaultValue!==\"\"+n&&(e.defaultValue=\"\"+n))}function Ue(e,t){return e=i({children:void 0},t),(t=function(e){var t=\"\";return r.Children.forEach(e,(function(e){null!=e&&(t+=e)})),t}(t.children))&&(e.children=t),e}function Se(e,t,n,r){if(e=e.options,t){t={};for(var i=0;i<n.length;i++)t[\"$\"+n[i]]=!0;for(n=0;n<e.length;n++)i=t.hasOwnProperty(\"$\"+e[n].value),e[n].selected!==i&&(e[n].selected=i),i&&r&&(e[n].defaultSelected=!0)}else{for(n=\"\"+Be(n),t=null,i=0;i<e.length;i++){if(e[i].value===n)return e[i].selected=!0,void(r&&(e[i].defaultSelected=!0));null!==t||e[i].disabled||(t=e[i])}null!==t&&(t.selected=!0)}}function Oe(e,t){if(null!=t.dangerouslySetInnerHTML)throw Error(a(91));return i({},t,{value:void 0,defaultValue:void 0,children:\"\"+e._wrapperState.initialValue})}function He(e,t){var n=t.value;if(null==n){if(n=t.children,t=t.defaultValue,null!=n){if(null!=t)throw Error(a(92));if(Array.isArray(n)){if(!(1>=n.length))throw Error(a(93));n=n[0]}t=n}null==t&&(t=\"\"),n=t}e._wrapperState={initialValue:Be(n)}}function Te(e,t){var n=Be(t.value),r=Be(t.defaultValue);null!=n&&((n=\"\"+n)!==e.value&&(e.value=n),null==t.defaultValue&&e.defaultValue!==n&&(e.defaultValue=n)),null!=r&&(e.defaultValue=\"\"+r)}function Ne(e){var t=e.textContent;t===e._wrapperState.initialValue&&\"\"!==t&&null!==t&&(e.value=t)}var _e=\"http://www.w3.org/1999/xhtml\",Me=\"http://www.w3.org/2000/svg\";function Re(e){switch(e){case\"svg\":return\"http://www.w3.org/2000/svg\";case\"math\":return\"http://www.w3.org/1998/Math/MathML\";default:return\"http://www.w3.org/1999/xhtml\"}}function De(e,t){return null==e||\"http://www.w3.org/1999/xhtml\"===e?Re(t):\"http://www.w3.org/2000/svg\"===e&&\"foreignObject\"===t?\"http://www.w3.org/1999/xhtml\":e}var Pe,ke=function(e){return\"undefined\"!==typeof MSApp&&MSApp.execUnsafeLocalFunction?function(t,n,r,i){MSApp.execUnsafeLocalFunction((function(){return e(t,n)}))}:e}((function(e,t){if(e.namespaceURI!==Me||\"innerHTML\"in e)e.innerHTML=t;else{for((Pe=Pe||document.createElement(\"div\")).innerHTML=\"<svg>\"+t.valueOf().toString()+\"</svg>\",t=Pe.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}}));function Ie(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}function Ke(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n[\"Webkit\"+e]=\"webkit\"+t,n[\"Moz\"+e]=\"moz\"+t,n}var Le={animationend:Ke(\"Animation\",\"AnimationEnd\"),animationiteration:Ke(\"Animation\",\"AnimationIteration\"),animationstart:Ke(\"Animation\",\"AnimationStart\"),transitionend:Ke(\"Transition\",\"TransitionEnd\")},ze={},je={};function Xe(e){if(ze[e])return ze[e];if(!Le[e])return e;var t,n=Le[e];for(t in n)if(n.hasOwnProperty(t)&&t in je)return ze[e]=n[t];return e}F&&(je=document.createElement(\"div\").style,\"AnimationEvent\"in window||(delete Le.animationend.animation,delete Le.animationiteration.animation,delete Le.animationstart.animation),\"TransitionEvent\"in window||delete Le.transitionend.transition);var Ge=Xe(\"animationend\"),Ve=Xe(\"animationiteration\"),Ye=Xe(\"animationstart\"),We=Xe(\"transitionend\"),Je=\"abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting\".split(\" \"),qe=new(\"function\"===typeof WeakMap?WeakMap:Map);function Ze(e){var t=qe.get(e);return void 0===t&&(t=new Map,qe.set(e,t)),t}function $e(e){var t=e,n=e;if(e.alternate)for(;t.return;)t=t.return;else{e=t;do{0!==(1026&(t=e).effectTag)&&(n=t.return),e=t.return}while(e)}return 3===t.tag?n:null}function et(e){if(13===e.tag){var t=e.memoizedState;if(null===t&&(null!==(e=e.alternate)&&(t=e.memoizedState)),null!==t)return t.dehydrated}return null}function tt(e){if($e(e)!==e)throw Error(a(188))}function nt(e){if(!(e=function(e){var t=e.alternate;if(!t){if(null===(t=$e(e)))throw Error(a(188));return t!==e?null:e}for(var n=e,r=t;;){var i=n.return;if(null===i)break;var o=i.alternate;if(null===o){if(null!==(r=i.return)){n=r;continue}break}if(i.child===o.child){for(o=i.child;o;){if(o===n)return tt(i),e;if(o===r)return tt(i),t;o=o.sibling}throw Error(a(188))}if(n.return!==r.return)n=i,r=o;else{for(var A=!1,s=i.child;s;){if(s===n){A=!0,n=i,r=o;break}if(s===r){A=!0,r=i,n=o;break}s=s.sibling}if(!A){for(s=o.child;s;){if(s===n){A=!0,n=o,r=i;break}if(s===r){A=!0,r=o,n=i;break}s=s.sibling}if(!A)throw Error(a(189))}}if(n.alternate!==r)throw Error(a(190))}if(3!==n.tag)throw Error(a(188));return n.stateNode.current===n?e:t}(e)))return null;for(var t=e;;){if(5===t.tag||6===t.tag)return t;if(t.child)t.child.return=t,t=t.child;else{if(t===e)break;for(;!t.sibling;){if(!t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}}return null}function rt(e,t){if(null==t)throw Error(a(30));return null==e?t:Array.isArray(e)?Array.isArray(t)?(e.push.apply(e,t),e):(e.push(t),e):Array.isArray(t)?[e].concat(t):[e,t]}function it(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)}var ot=null;function at(e){if(e){var t=e._dispatchListeners,n=e._dispatchInstances;if(Array.isArray(t))for(var r=0;r<t.length&&!e.isPropagationStopped();r++)v(e,t[r],n[r]);else t&&v(e,t,n);e._dispatchListeners=null,e._dispatchInstances=null,e.isPersistent()||e.constructor.release(e)}}function At(e){if(null!==e&&(ot=rt(ot,e)),e=ot,ot=null,e){if(it(e,at),ot)throw Error(a(95));if(u)throw e=c,u=!1,c=null,e}}function st(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}function lt(e){if(!F)return!1;var t=(e=\"on\"+e)in document;return t||((t=document.createElement(\"div\")).setAttribute(e,\"return;\"),t=\"function\"===typeof t[e]),t}var ut=[];function ct(e){e.topLevelType=null,e.nativeEvent=null,e.targetInst=null,e.ancestors.length=0,10>ut.length&&ut.push(e)}function ft(e,t,n,r){if(ut.length){var i=ut.pop();return i.topLevelType=e,i.eventSystemFlags=r,i.nativeEvent=t,i.targetInst=n,i}return{topLevelType:e,eventSystemFlags:r,nativeEvent:t,targetInst:n,ancestors:[]}}function dt(e){var t=e.targetInst,n=t;do{if(!n){e.ancestors.push(n);break}var r=n;if(3===r.tag)r=r.stateNode.containerInfo;else{for(;r.return;)r=r.return;r=3!==r.tag?null:r.stateNode.containerInfo}if(!r)break;5!==(t=n.tag)&&6!==t||e.ancestors.push(n),n=Fn(r)}while(n);for(n=0;n<e.ancestors.length;n++){t=e.ancestors[n];var i=st(e.nativeEvent);r=e.topLevelType;var o=e.nativeEvent,a=e.eventSystemFlags;0===n&&(a|=64);for(var A=null,s=0;s<E.length;s++){var l=E[s];l&&(l=l.extractEvents(r,t,o,i,a))&&(A=rt(A,l))}At(A)}}function pt(e,t,n){if(!n.has(e)){switch(e){case\"scroll\":Yt(t,\"scroll\",!0);break;case\"focus\":case\"blur\":Yt(t,\"focus\",!0),Yt(t,\"blur\",!0),n.set(\"blur\",null),n.set(\"focus\",null);break;case\"cancel\":case\"close\":lt(e)&&Yt(t,e,!0);break;case\"invalid\":case\"submit\":case\"reset\":break;default:-1===Je.indexOf(e)&&Vt(e,t)}n.set(e,null)}}var ht,gt,vt,Bt=!1,mt=[],bt=null,wt=null,Et=null,yt=new Map,Ct=new Map,Qt=[],xt=\"mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput close cancel copy cut paste click change contextmenu reset submit\".split(\" \"),Ft=\"focus blur dragenter dragleave mouseover mouseout pointerover pointerout gotpointercapture lostpointercapture\".split(\" \");function Ut(e,t,n,r,i){return{blockedOn:e,topLevelType:t,eventSystemFlags:32|n,nativeEvent:i,container:r}}function St(e,t){switch(e){case\"focus\":case\"blur\":bt=null;break;case\"dragenter\":case\"dragleave\":wt=null;break;case\"mouseover\":case\"mouseout\":Et=null;break;case\"pointerover\":case\"pointerout\":yt.delete(t.pointerId);break;case\"gotpointercapture\":case\"lostpointercapture\":Ct.delete(t.pointerId)}}function Ot(e,t,n,r,i,o){return null===e||e.nativeEvent!==o?(e=Ut(t,n,r,i,o),null!==t&&(null!==(t=Un(t))&&gt(t)),e):(e.eventSystemFlags|=r,e)}function Ht(e){var t=Fn(e.target);if(null!==t){var n=$e(t);if(null!==n)if(13===(t=n.tag)){if(null!==(t=et(n)))return e.blockedOn=t,void o.unstable_runWithPriority(e.priority,(function(){vt(n)}))}else if(3===t&&n.stateNode.hydrate)return void(e.blockedOn=3===n.tag?n.stateNode.containerInfo:null)}e.blockedOn=null}function Tt(e){if(null!==e.blockedOn)return!1;var t=Zt(e.topLevelType,e.eventSystemFlags,e.container,e.nativeEvent);if(null!==t){var n=Un(t);return null!==n&&gt(n),e.blockedOn=t,!1}return!0}function Nt(e,t,n){Tt(e)&&n.delete(t)}function _t(){for(Bt=!1;0<mt.length;){var e=mt[0];if(null!==e.blockedOn){null!==(e=Un(e.blockedOn))&&ht(e);break}var t=Zt(e.topLevelType,e.eventSystemFlags,e.container,e.nativeEvent);null!==t?e.blockedOn=t:mt.shift()}null!==bt&&Tt(bt)&&(bt=null),null!==wt&&Tt(wt)&&(wt=null),null!==Et&&Tt(Et)&&(Et=null),yt.forEach(Nt),Ct.forEach(Nt)}function Mt(e,t){e.blockedOn===t&&(e.blockedOn=null,Bt||(Bt=!0,o.unstable_scheduleCallback(o.unstable_NormalPriority,_t)))}function Rt(e){function t(t){return Mt(t,e)}if(0<mt.length){Mt(mt[0],e);for(var n=1;n<mt.length;n++){var r=mt[n];r.blockedOn===e&&(r.blockedOn=null)}}for(null!==bt&&Mt(bt,e),null!==wt&&Mt(wt,e),null!==Et&&Mt(Et,e),yt.forEach(t),Ct.forEach(t),n=0;n<Qt.length;n++)(r=Qt[n]).blockedOn===e&&(r.blockedOn=null);for(;0<Qt.length&&null===(n=Qt[0]).blockedOn;)Ht(n),null===n.blockedOn&&Qt.shift()}var Dt={},Pt=new Map,kt=new Map,It=[\"abort\",\"abort\",Ge,\"animationEnd\",Ve,\"animationIteration\",Ye,\"animationStart\",\"canplay\",\"canPlay\",\"canplaythrough\",\"canPlayThrough\",\"durationchange\",\"durationChange\",\"emptied\",\"emptied\",\"encrypted\",\"encrypted\",\"ended\",\"ended\",\"error\",\"error\",\"gotpointercapture\",\"gotPointerCapture\",\"load\",\"load\",\"loadeddata\",\"loadedData\",\"loadedmetadata\",\"loadedMetadata\",\"loadstart\",\"loadStart\",\"lostpointercapture\",\"lostPointerCapture\",\"playing\",\"playing\",\"progress\",\"progress\",\"seeking\",\"seeking\",\"stalled\",\"stalled\",\"suspend\",\"suspend\",\"timeupdate\",\"timeUpdate\",We,\"transitionEnd\",\"waiting\",\"waiting\"];function Kt(e,t){for(var n=0;n<e.length;n+=2){var r=e[n],i=e[n+1],o=\"on\"+(i[0].toUpperCase()+i.slice(1));o={phasedRegistrationNames:{bubbled:o,captured:o+\"Capture\"},dependencies:[r],eventPriority:t},kt.set(r,t),Pt.set(r,o),Dt[i]=o}}Kt(\"blur blur cancel cancel click click close close contextmenu contextMenu copy copy cut cut auxclick auxClick dblclick doubleClick dragend dragEnd dragstart dragStart drop drop focus focus input input invalid invalid keydown keyDown keypress keyPress keyup keyUp mousedown mouseDown mouseup mouseUp paste paste pause pause play play pointercancel pointerCancel pointerdown pointerDown pointerup pointerUp ratechange rateChange reset reset seeked seeked submit submit touchcancel touchCancel touchend touchEnd touchstart touchStart volumechange volumeChange\".split(\" \"),0),Kt(\"drag drag dragenter dragEnter dragexit dragExit dragleave dragLeave dragover dragOver mousemove mouseMove mouseout mouseOut mouseover mouseOver pointermove pointerMove pointerout pointerOut pointerover pointerOver scroll scroll toggle toggle touchmove touchMove wheel wheel\".split(\" \"),1),Kt(It,2);for(var Lt=\"change selectionchange textInput compositionstart compositionend compositionupdate\".split(\" \"),zt=0;zt<Lt.length;zt++)kt.set(Lt[zt],0);var jt=o.unstable_UserBlockingPriority,Xt=o.unstable_runWithPriority,Gt=!0;function Vt(e,t){Yt(t,e,!1)}function Yt(e,t,n){var r=kt.get(t);switch(void 0===r?2:r){case 0:r=Wt.bind(null,t,1,e);break;case 1:r=Jt.bind(null,t,1,e);break;default:r=qt.bind(null,t,1,e)}n?e.addEventListener(t,r,!0):e.addEventListener(t,r,!1)}function Wt(e,t,n,r){P||R();var i=qt,o=P;P=!0;try{M(i,e,t,n,r)}finally{(P=o)||I()}}function Jt(e,t,n,r){Xt(jt,qt.bind(null,e,t,n,r))}function qt(e,t,n,r){if(Gt)if(0<mt.length&&-1<xt.indexOf(e))e=Ut(null,e,t,n,r),mt.push(e);else{var i=Zt(e,t,n,r);if(null===i)St(e,r);else if(-1<xt.indexOf(e))e=Ut(i,e,t,n,r),mt.push(e);else if(!function(e,t,n,r,i){switch(t){case\"focus\":return bt=Ot(bt,e,t,n,r,i),!0;case\"dragenter\":return wt=Ot(wt,e,t,n,r,i),!0;case\"mouseover\":return Et=Ot(Et,e,t,n,r,i),!0;case\"pointerover\":var o=i.pointerId;return yt.set(o,Ot(yt.get(o)||null,e,t,n,r,i)),!0;case\"gotpointercapture\":return o=i.pointerId,Ct.set(o,Ot(Ct.get(o)||null,e,t,n,r,i)),!0}return!1}(i,e,t,n,r)){St(e,r),e=ft(e,r,null,t);try{K(dt,e)}finally{ct(e)}}}}function Zt(e,t,n,r){if(null!==(n=Fn(n=st(r)))){var i=$e(n);if(null===i)n=null;else{var o=i.tag;if(13===o){if(null!==(n=et(i)))return n;n=null}else if(3===o){if(i.stateNode.hydrate)return 3===i.tag?i.stateNode.containerInfo:null;n=null}else i!==n&&(n=null)}}e=ft(e,r,n,t);try{K(dt,e)}finally{ct(e)}return null}var $t={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},en=[\"Webkit\",\"ms\",\"Moz\",\"O\"];function tn(e,t,n){return null==t||\"boolean\"===typeof t||\"\"===t?\"\":n||\"number\"!==typeof t||0===t||$t.hasOwnProperty(e)&&$t[e]?(\"\"+t).trim():t+\"px\"}function nn(e,t){for(var n in e=e.style,t)if(t.hasOwnProperty(n)){var r=0===n.indexOf(\"--\"),i=tn(n,t[n],r);\"float\"===n&&(n=\"cssFloat\"),r?e.setProperty(n,i):e[n]=i}}Object.keys($t).forEach((function(e){en.forEach((function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),$t[t]=$t[e]}))}));var rn=i({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function on(e,t){if(t){if(rn[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML))throw Error(a(137,e,\"\"));if(null!=t.dangerouslySetInnerHTML){if(null!=t.children)throw Error(a(60));if(\"object\"!==typeof t.dangerouslySetInnerHTML||!(\"__html\"in t.dangerouslySetInnerHTML))throw Error(a(61))}if(null!=t.style&&\"object\"!==typeof t.style)throw Error(a(62,\"\"))}}function an(e,t){if(-1===e.indexOf(\"-\"))return\"string\"===typeof t.is;switch(e){case\"annotation-xml\":case\"color-profile\":case\"font-face\":case\"font-face-src\":case\"font-face-uri\":case\"font-face-format\":case\"font-face-name\":case\"missing-glyph\":return!1;default:return!0}}var An=_e;function sn(e,t){var n=Ze(e=9===e.nodeType||11===e.nodeType?e:e.ownerDocument);t=Q[t];for(var r=0;r<t.length;r++)pt(t[r],e,n)}function ln(){}function un(e){if(\"undefined\"===typeof(e=e||(\"undefined\"!==typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}}function cn(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function fn(e,t){var n,r=cn(e);for(e=0;r;){if(3===r.nodeType){if(n=e+r.textContent.length,e<=t&&n>=t)return{node:r,offset:t-e};e=n}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=cn(r)}}function dn(){for(var e=window,t=un();t instanceof e.HTMLIFrameElement;){try{var n=\"string\"===typeof t.contentWindow.location.href}catch(r){n=!1}if(!n)break;t=un((e=t.contentWindow).document)}return t}function pn(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&(\"input\"===t&&(\"text\"===e.type||\"search\"===e.type||\"tel\"===e.type||\"url\"===e.type||\"password\"===e.type)||\"textarea\"===t||\"true\"===e.contentEditable)}var hn=null,gn=null;function vn(e,t){switch(e){case\"button\":case\"input\":case\"select\":case\"textarea\":return!!t.autoFocus}return!1}function Bn(e,t){return\"textarea\"===e||\"option\"===e||\"noscript\"===e||\"string\"===typeof t.children||\"number\"===typeof t.children||\"object\"===typeof t.dangerouslySetInnerHTML&&null!==t.dangerouslySetInnerHTML&&null!=t.dangerouslySetInnerHTML.__html}var mn=\"function\"===typeof setTimeout?setTimeout:void 0,bn=\"function\"===typeof clearTimeout?clearTimeout:void 0;function wn(e){for(;null!=e;e=e.nextSibling){var t=e.nodeType;if(1===t||3===t)break}return e}function En(e){e=e.previousSibling;for(var t=0;e;){if(8===e.nodeType){var n=e.data;if(\"$\"===n||\"$!\"===n||\"$?\"===n){if(0===t)return e;t--}else\"/$\"===n&&t++}e=e.previousSibling}return null}var yn=Math.random().toString(36).slice(2),Cn=\"__reactInternalInstance$\"+yn,Qn=\"__reactEventHandlers$\"+yn,xn=\"__reactContainere$\"+yn;function Fn(e){var t=e[Cn];if(t)return t;for(var n=e.parentNode;n;){if(t=n[xn]||n[Cn]){if(n=t.alternate,null!==t.child||null!==n&&null!==n.child)for(e=En(e);null!==e;){if(n=e[Cn])return n;e=En(e)}return t}n=(e=n).parentNode}return null}function Un(e){return!(e=e[Cn]||e[xn])||5!==e.tag&&6!==e.tag&&13!==e.tag&&3!==e.tag?null:e}function Sn(e){if(5===e.tag||6===e.tag)return e.stateNode;throw Error(a(33))}function On(e){return e[Qn]||null}function Hn(e){do{e=e.return}while(e&&5!==e.tag);return e||null}function Tn(e,t){var n=e.stateNode;if(!n)return null;var r=p(n);if(!r)return null;n=r[t];e:switch(t){case\"onClick\":case\"onClickCapture\":case\"onDoubleClick\":case\"onDoubleClickCapture\":case\"onMouseDown\":case\"onMouseDownCapture\":case\"onMouseMove\":case\"onMouseMoveCapture\":case\"onMouseUp\":case\"onMouseUpCapture\":case\"onMouseEnter\":(r=!r.disabled)||(r=!(\"button\"===(e=e.type)||\"input\"===e||\"select\"===e||\"textarea\"===e)),e=!r;break e;default:e=!1}if(e)return null;if(n&&\"function\"!==typeof n)throw Error(a(231,t,typeof n));return n}function Nn(e,t,n){(t=Tn(e,n.dispatchConfig.phasedRegistrationNames[t]))&&(n._dispatchListeners=rt(n._dispatchListeners,t),n._dispatchInstances=rt(n._dispatchInstances,e))}function _n(e){if(e&&e.dispatchConfig.phasedRegistrationNames){for(var t=e._targetInst,n=[];t;)n.push(t),t=Hn(t);for(t=n.length;0<t--;)Nn(n[t],\"captured\",e);for(t=0;t<n.length;t++)Nn(n[t],\"bubbled\",e)}}function Mn(e,t,n){e&&n&&n.dispatchConfig.registrationName&&(t=Tn(e,n.dispatchConfig.registrationName))&&(n._dispatchListeners=rt(n._dispatchListeners,t),n._dispatchInstances=rt(n._dispatchInstances,e))}function Rn(e){e&&e.dispatchConfig.registrationName&&Mn(e._targetInst,null,e)}function Dn(e){it(e,_n)}var Pn=null,kn=null,In=null;function Kn(){if(In)return In;var e,t,n=kn,r=n.length,i=\"value\"in Pn?Pn.value:Pn.textContent,o=i.length;for(e=0;e<r&&n[e]===i[e];e++);var a=r-e;for(t=1;t<=a&&n[r-t]===i[o-t];t++);return In=i.slice(e,1<t?1-t:void 0)}function Ln(){return!0}function zn(){return!1}function jn(e,t,n,r){for(var i in this.dispatchConfig=e,this._targetInst=t,this.nativeEvent=n,e=this.constructor.Interface)e.hasOwnProperty(i)&&((t=e[i])?this[i]=t(n):\"target\"===i?this.target=r:this[i]=n[i]);return this.isDefaultPrevented=(null!=n.defaultPrevented?n.defaultPrevented:!1===n.returnValue)?Ln:zn,this.isPropagationStopped=zn,this}function Xn(e,t,n,r){if(this.eventPool.length){var i=this.eventPool.pop();return this.call(i,e,t,n,r),i}return new this(e,t,n,r)}function Gn(e){if(!(e instanceof this))throw Error(a(279));e.destructor(),10>this.eventPool.length&&this.eventPool.push(e)}function Vn(e){e.eventPool=[],e.getPooled=Xn,e.release=Gn}i(jn.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():\"unknown\"!==typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=Ln)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():\"unknown\"!==typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=Ln)},persist:function(){this.isPersistent=Ln},isPersistent:zn,destructor:function(){var e,t=this.constructor.Interface;for(e in t)this[e]=null;this.nativeEvent=this._targetInst=this.dispatchConfig=null,this.isPropagationStopped=this.isDefaultPrevented=zn,this._dispatchInstances=this._dispatchListeners=null}}),jn.Interface={type:null,target:null,currentTarget:function(){return null},eventPhase:null,bubbles:null,cancelable:null,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:null,isTrusted:null},jn.extend=function(e){function t(){}function n(){return r.apply(this,arguments)}var r=this;t.prototype=r.prototype;var o=new t;return i(o,n.prototype),n.prototype=o,n.prototype.constructor=n,n.Interface=i({},r.Interface,e),n.extend=r.extend,Vn(n),n},Vn(jn);var Yn=jn.extend({data:null}),Wn=jn.extend({data:null}),Jn=[9,13,27,32],qn=F&&\"CompositionEvent\"in window,Zn=null;F&&\"documentMode\"in document&&(Zn=document.documentMode);var $n=F&&\"TextEvent\"in window&&!Zn,er=F&&(!qn||Zn&&8<Zn&&11>=Zn),tr=String.fromCharCode(32),nr={beforeInput:{phasedRegistrationNames:{bubbled:\"onBeforeInput\",captured:\"onBeforeInputCapture\"},dependencies:[\"compositionend\",\"keypress\",\"textInput\",\"paste\"]},compositionEnd:{phasedRegistrationNames:{bubbled:\"onCompositionEnd\",captured:\"onCompositionEndCapture\"},dependencies:\"blur compositionend keydown keypress keyup mousedown\".split(\" \")},compositionStart:{phasedRegistrationNames:{bubbled:\"onCompositionStart\",captured:\"onCompositionStartCapture\"},dependencies:\"blur compositionstart keydown keypress keyup mousedown\".split(\" \")},compositionUpdate:{phasedRegistrationNames:{bubbled:\"onCompositionUpdate\",captured:\"onCompositionUpdateCapture\"},dependencies:\"blur compositionupdate keydown keypress keyup mousedown\".split(\" \")}},rr=!1;function ir(e,t){switch(e){case\"keyup\":return-1!==Jn.indexOf(t.keyCode);case\"keydown\":return 229!==t.keyCode;case\"keypress\":case\"mousedown\":case\"blur\":return!0;default:return!1}}function or(e){return\"object\"===typeof(e=e.detail)&&\"data\"in e?e.data:null}var ar=!1;var Ar={eventTypes:nr,extractEvents:function(e,t,n,r){var i;if(qn)e:{switch(e){case\"compositionstart\":var o=nr.compositionStart;break e;case\"compositionend\":o=nr.compositionEnd;break e;case\"compositionupdate\":o=nr.compositionUpdate;break e}o=void 0}else ar?ir(e,n)&&(o=nr.compositionEnd):\"keydown\"===e&&229===n.keyCode&&(o=nr.compositionStart);return o?(er&&\"ko\"!==n.locale&&(ar||o!==nr.compositionStart?o===nr.compositionEnd&&ar&&(i=Kn()):(kn=\"value\"in(Pn=r)?Pn.value:Pn.textContent,ar=!0)),o=Yn.getPooled(o,t,n,r),i?o.data=i:null!==(i=or(n))&&(o.data=i),Dn(o),i=o):i=null,(e=$n?function(e,t){switch(e){case\"compositionend\":return or(t);case\"keypress\":return 32!==t.which?null:(rr=!0,tr);case\"textInput\":return(e=t.data)===tr&&rr?null:e;default:return null}}(e,n):function(e,t){if(ar)return\"compositionend\"===e||!qn&&ir(e,t)?(e=Kn(),In=kn=Pn=null,ar=!1,e):null;switch(e){case\"paste\":return null;case\"keypress\":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1<t.char.length)return t.char;if(t.which)return String.fromCharCode(t.which)}return null;case\"compositionend\":return er&&\"ko\"!==t.locale?null:t.data;default:return null}}(e,n))?((t=Wn.getPooled(nr.beforeInput,t,n,r)).data=e,Dn(t)):t=null,null===i?t:null===t?i:[i,t]}},sr={color:!0,date:!0,datetime:!0,\"datetime-local\":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function lr(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return\"input\"===t?!!sr[e.type]:\"textarea\"===t}var ur={change:{phasedRegistrationNames:{bubbled:\"onChange\",captured:\"onChangeCapture\"},dependencies:\"blur change click focus input keydown keyup selectionchange\".split(\" \")}};function cr(e,t,n){return(e=jn.getPooled(ur.change,e,t,n)).type=\"change\",T(n),Dn(e),e}var fr=null,dr=null;function pr(e){At(e)}function hr(e){if(we(Sn(e)))return e}function gr(e,t){if(\"change\"===e)return t}var vr=!1;function Br(){fr&&(fr.detachEvent(\"onpropertychange\",mr),dr=fr=null)}function mr(e){if(\"value\"===e.propertyName&&hr(dr))if(e=cr(dr,e,st(e)),P)At(e);else{P=!0;try{_(pr,e)}finally{P=!1,I()}}}function br(e,t,n){\"focus\"===e?(Br(),dr=n,(fr=t).attachEvent(\"onpropertychange\",mr)):\"blur\"===e&&Br()}function wr(e){if(\"selectionchange\"===e||\"keyup\"===e||\"keydown\"===e)return hr(dr)}function Er(e,t){if(\"click\"===e)return hr(t)}function yr(e,t){if(\"input\"===e||\"change\"===e)return hr(t)}F&&(vr=lt(\"input\")&&(!document.documentMode||9<document.documentMode));var Cr={eventTypes:ur,_isInputEventSupported:vr,extractEvents:function(e,t,n,r){var i=t?Sn(t):window,o=i.nodeName&&i.nodeName.toLowerCase();if(\"select\"===o||\"input\"===o&&\"file\"===i.type)var a=gr;else if(lr(i))if(vr)a=yr;else{a=wr;var A=br}else(o=i.nodeName)&&\"input\"===o.toLowerCase()&&(\"checkbox\"===i.type||\"radio\"===i.type)&&(a=Er);if(a&&(a=a(e,t)))return cr(a,n,r);A&&A(e,i,t),\"blur\"===e&&(e=i._wrapperState)&&e.controlled&&\"number\"===i.type&&Fe(i,\"number\",i.value)}},Qr=jn.extend({view:null,detail:null}),xr={Alt:\"altKey\",Control:\"ctrlKey\",Meta:\"metaKey\",Shift:\"shiftKey\"};function Fr(e){var t=this.nativeEvent;return t.getModifierState?t.getModifierState(e):!!(e=xr[e])&&!!t[e]}function Ur(){return Fr}var Sr=0,Or=0,Hr=!1,Tr=!1,Nr=Qr.extend({screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,getModifierState:Ur,button:null,buttons:null,relatedTarget:function(e){return e.relatedTarget||(e.fromElement===e.srcElement?e.toElement:e.fromElement)},movementX:function(e){if(\"movementX\"in e)return e.movementX;var t=Sr;return Sr=e.screenX,Hr?\"mousemove\"===e.type?e.screenX-t:0:(Hr=!0,0)},movementY:function(e){if(\"movementY\"in e)return e.movementY;var t=Or;return Or=e.screenY,Tr?\"mousemove\"===e.type?e.screenY-t:0:(Tr=!0,0)}}),_r=Nr.extend({pointerId:null,width:null,height:null,pressure:null,tangentialPressure:null,tiltX:null,tiltY:null,twist:null,pointerType:null,isPrimary:null}),Mr={mouseEnter:{registrationName:\"onMouseEnter\",dependencies:[\"mouseout\",\"mouseover\"]},mouseLeave:{registrationName:\"onMouseLeave\",dependencies:[\"mouseout\",\"mouseover\"]},pointerEnter:{registrationName:\"onPointerEnter\",dependencies:[\"pointerout\",\"pointerover\"]},pointerLeave:{registrationName:\"onPointerLeave\",dependencies:[\"pointerout\",\"pointerover\"]}},Rr={eventTypes:Mr,extractEvents:function(e,t,n,r,i){var o=\"mouseover\"===e||\"pointerover\"===e,a=\"mouseout\"===e||\"pointerout\"===e;if(o&&0===(32&i)&&(n.relatedTarget||n.fromElement)||!a&&!o)return null;(o=r.window===r?r:(o=r.ownerDocument)?o.defaultView||o.parentWindow:window,a)?(a=t,null!==(t=(t=n.relatedTarget||n.toElement)?Fn(t):null)&&(t!==$e(t)||5!==t.tag&&6!==t.tag)&&(t=null)):a=null;if(a===t)return null;if(\"mouseout\"===e||\"mouseover\"===e)var A=Nr,s=Mr.mouseLeave,l=Mr.mouseEnter,u=\"mouse\";else\"pointerout\"!==e&&\"pointerover\"!==e||(A=_r,s=Mr.pointerLeave,l=Mr.pointerEnter,u=\"pointer\");if(e=null==a?o:Sn(a),o=null==t?o:Sn(t),(s=A.getPooled(s,a,n,r)).type=u+\"leave\",s.target=e,s.relatedTarget=o,(n=A.getPooled(l,t,n,r)).type=u+\"enter\",n.target=o,n.relatedTarget=e,u=t,(r=a)&&u)e:{for(l=u,a=0,e=A=r;e;e=Hn(e))a++;for(e=0,t=l;t;t=Hn(t))e++;for(;0<a-e;)A=Hn(A),a--;for(;0<e-a;)l=Hn(l),e--;for(;a--;){if(A===l||A===l.alternate)break e;A=Hn(A),l=Hn(l)}A=null}else A=null;for(l=A,A=[];r&&r!==l&&(null===(a=r.alternate)||a!==l);)A.push(r),r=Hn(r);for(r=[];u&&u!==l&&(null===(a=u.alternate)||a!==l);)r.push(u),u=Hn(u);for(u=0;u<A.length;u++)Mn(A[u],\"bubbled\",s);for(u=r.length;0<u--;)Mn(r[u],\"captured\",n);return 0===(64&i)?[s]:[s,n]}};var Dr=\"function\"===typeof Object.is?Object.is:function(e,t){return e===t&&(0!==e||1/e===1/t)||e!==e&&t!==t},Pr=Object.prototype.hasOwnProperty;function kr(e,t){if(Dr(e,t))return!0;if(\"object\"!==typeof e||null===e||\"object\"!==typeof t||null===t)return!1;var n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(r=0;r<n.length;r++)if(!Pr.call(t,n[r])||!Dr(e[n[r]],t[n[r]]))return!1;return!0}var Ir=F&&\"documentMode\"in document&&11>=document.documentMode,Kr={select:{phasedRegistrationNames:{bubbled:\"onSelect\",captured:\"onSelectCapture\"},dependencies:\"blur contextmenu dragend focus keydown keyup mousedown mouseup selectionchange\".split(\" \")}},Lr=null,zr=null,jr=null,Xr=!1;function Gr(e,t){var n=t.window===t?t.document:9===t.nodeType?t:t.ownerDocument;return Xr||null==Lr||Lr!==un(n)?null:(\"selectionStart\"in(n=Lr)&&pn(n)?n={start:n.selectionStart,end:n.selectionEnd}:n={anchorNode:(n=(n.ownerDocument&&n.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:n.anchorOffset,focusNode:n.focusNode,focusOffset:n.focusOffset},jr&&kr(jr,n)?null:(jr=n,(e=jn.getPooled(Kr.select,zr,e,t)).type=\"select\",e.target=Lr,Dn(e),e))}var Vr={eventTypes:Kr,extractEvents:function(e,t,n,r,i,o){if(!(o=!(i=o||(r.window===r?r.document:9===r.nodeType?r:r.ownerDocument)))){e:{i=Ze(i),o=Q.onSelect;for(var a=0;a<o.length;a++)if(!i.has(o[a])){i=!1;break e}i=!0}o=!i}if(o)return null;switch(i=t?Sn(t):window,e){case\"focus\":(lr(i)||\"true\"===i.contentEditable)&&(Lr=i,zr=t,jr=null);break;case\"blur\":jr=zr=Lr=null;break;case\"mousedown\":Xr=!0;break;case\"contextmenu\":case\"mouseup\":case\"dragend\":return Xr=!1,Gr(n,r);case\"selectionchange\":if(Ir)break;case\"keydown\":case\"keyup\":return Gr(n,r)}return null}},Yr=jn.extend({animationName:null,elapsedTime:null,pseudoElement:null}),Wr=jn.extend({clipboardData:function(e){return\"clipboardData\"in e?e.clipboardData:window.clipboardData}}),Jr=Qr.extend({relatedTarget:null});function qr(e){var t=e.keyCode;return\"charCode\"in e?0===(e=e.charCode)&&13===t&&(e=13):e=t,10===e&&(e=13),32<=e||13===e?e:0}var Zr={Esc:\"Escape\",Spacebar:\" \",Left:\"ArrowLeft\",Up:\"ArrowUp\",Right:\"ArrowRight\",Down:\"ArrowDown\",Del:\"Delete\",Win:\"OS\",Menu:\"ContextMenu\",Apps:\"ContextMenu\",Scroll:\"ScrollLock\",MozPrintableKey:\"Unidentified\"},$r={8:\"Backspace\",9:\"Tab\",12:\"Clear\",13:\"Enter\",16:\"Shift\",17:\"Control\",18:\"Alt\",19:\"Pause\",20:\"CapsLock\",27:\"Escape\",32:\" \",33:\"PageUp\",34:\"PageDown\",35:\"End\",36:\"Home\",37:\"ArrowLeft\",38:\"ArrowUp\",39:\"ArrowRight\",40:\"ArrowDown\",45:\"Insert\",46:\"Delete\",112:\"F1\",113:\"F2\",114:\"F3\",115:\"F4\",116:\"F5\",117:\"F6\",118:\"F7\",119:\"F8\",120:\"F9\",121:\"F10\",122:\"F11\",123:\"F12\",144:\"NumLock\",145:\"ScrollLock\",224:\"Meta\"},ei=Qr.extend({key:function(e){if(e.key){var t=Zr[e.key]||e.key;if(\"Unidentified\"!==t)return t}return\"keypress\"===e.type?13===(e=qr(e))?\"Enter\":String.fromCharCode(e):\"keydown\"===e.type||\"keyup\"===e.type?$r[e.keyCode]||\"Unidentified\":\"\"},location:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,repeat:null,locale:null,getModifierState:Ur,charCode:function(e){return\"keypress\"===e.type?qr(e):0},keyCode:function(e){return\"keydown\"===e.type||\"keyup\"===e.type?e.keyCode:0},which:function(e){return\"keypress\"===e.type?qr(e):\"keydown\"===e.type||\"keyup\"===e.type?e.keyCode:0}}),ti=Nr.extend({dataTransfer:null}),ni=Qr.extend({touches:null,targetTouches:null,changedTouches:null,altKey:null,metaKey:null,ctrlKey:null,shiftKey:null,getModifierState:Ur}),ri=jn.extend({propertyName:null,elapsedTime:null,pseudoElement:null}),ii=Nr.extend({deltaX:function(e){return\"deltaX\"in e?e.deltaX:\"wheelDeltaX\"in e?-e.wheelDeltaX:0},deltaY:function(e){return\"deltaY\"in e?e.deltaY:\"wheelDeltaY\"in e?-e.wheelDeltaY:\"wheelDelta\"in e?-e.wheelDelta:0},deltaZ:null,deltaMode:null}),oi={eventTypes:Dt,extractEvents:function(e,t,n,r){var i=Pt.get(e);if(!i)return null;switch(e){case\"keypress\":if(0===qr(n))return null;case\"keydown\":case\"keyup\":e=ei;break;case\"blur\":case\"focus\":e=Jr;break;case\"click\":if(2===n.button)return null;case\"auxclick\":case\"dblclick\":case\"mousedown\":case\"mousemove\":case\"mouseup\":case\"mouseout\":case\"mouseover\":case\"contextmenu\":e=Nr;break;case\"drag\":case\"dragend\":case\"dragenter\":case\"dragexit\":case\"dragleave\":case\"dragover\":case\"dragstart\":case\"drop\":e=ti;break;case\"touchcancel\":case\"touchend\":case\"touchmove\":case\"touchstart\":e=ni;break;case Ge:case Ve:case Ye:e=Yr;break;case We:e=ri;break;case\"scroll\":e=Qr;break;case\"wheel\":e=ii;break;case\"copy\":case\"cut\":case\"paste\":e=Wr;break;case\"gotpointercapture\":case\"lostpointercapture\":case\"pointercancel\":case\"pointerdown\":case\"pointermove\":case\"pointerout\":case\"pointerover\":case\"pointerup\":e=_r;break;default:e=jn}return Dn(t=e.getPooled(i,t,n,r)),t}};if(B)throw Error(a(101));B=Array.prototype.slice.call(\"ResponderEventPlugin SimpleEventPlugin EnterLeaveEventPlugin ChangeEventPlugin SelectEventPlugin BeforeInputEventPlugin\".split(\" \")),b(),p=On,h=Un,g=Sn,x({SimpleEventPlugin:oi,EnterLeaveEventPlugin:Rr,ChangeEventPlugin:Cr,SelectEventPlugin:Vr,BeforeInputEventPlugin:Ar});var ai=[],Ai=-1;function si(e){0>Ai||(e.current=ai[Ai],ai[Ai]=null,Ai--)}function li(e,t){Ai++,ai[Ai]=e.current,e.current=t}var ui={},ci={current:ui},fi={current:!1},di=ui;function pi(e,t){var n=e.type.contextTypes;if(!n)return ui;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var i,o={};for(i in n)o[i]=t[i];return r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=o),o}function hi(e){return null!==(e=e.childContextTypes)&&void 0!==e}function gi(){si(fi),si(ci)}function vi(e,t,n){if(ci.current!==ui)throw Error(a(168));li(ci,t),li(fi,n)}function Bi(e,t,n){var r=e.stateNode;if(e=t.childContextTypes,\"function\"!==typeof r.getChildContext)return n;for(var o in r=r.getChildContext())if(!(o in e))throw Error(a(108,ge(t)||\"Unknown\",o));return i({},n,{},r)}function mi(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||ui,di=ci.current,li(ci,e),li(fi,fi.current),!0}function bi(e,t,n){var r=e.stateNode;if(!r)throw Error(a(169));n?(e=Bi(e,t,di),r.__reactInternalMemoizedMergedChildContext=e,si(fi),si(ci),li(ci,e)):si(fi),li(fi,n)}var wi=o.unstable_runWithPriority,Ei=o.unstable_scheduleCallback,yi=o.unstable_cancelCallback,Ci=o.unstable_requestPaint,Qi=o.unstable_now,xi=o.unstable_getCurrentPriorityLevel,Fi=o.unstable_ImmediatePriority,Ui=o.unstable_UserBlockingPriority,Si=o.unstable_NormalPriority,Oi=o.unstable_LowPriority,Hi=o.unstable_IdlePriority,Ti={},Ni=o.unstable_shouldYield,_i=void 0!==Ci?Ci:function(){},Mi=null,Ri=null,Di=!1,Pi=Qi(),ki=1e4>Pi?Qi:function(){return Qi()-Pi};function Ii(){switch(xi()){case Fi:return 99;case Ui:return 98;case Si:return 97;case Oi:return 96;case Hi:return 95;default:throw Error(a(332))}}function Ki(e){switch(e){case 99:return Fi;case 98:return Ui;case 97:return Si;case 96:return Oi;case 95:return Hi;default:throw Error(a(332))}}function Li(e,t){return e=Ki(e),wi(e,t)}function zi(e,t,n){return e=Ki(e),Ei(e,t,n)}function ji(e){return null===Mi?(Mi=[e],Ri=Ei(Fi,Gi)):Mi.push(e),Ti}function Xi(){if(null!==Ri){var e=Ri;Ri=null,yi(e)}Gi()}function Gi(){if(!Di&&null!==Mi){Di=!0;var e=0;try{var t=Mi;Li(99,(function(){for(;e<t.length;e++){var n=t[e];do{n=n(!0)}while(null!==n)}})),Mi=null}catch(n){throw null!==Mi&&(Mi=Mi.slice(e+1)),Ei(Fi,Xi),n}finally{Di=!1}}}function Vi(e,t,n){return 1073741821-(1+((1073741821-e+t/10)/(n/=10)|0))*n}function Yi(e,t){if(e&&e.defaultProps)for(var n in t=i({},t),e=e.defaultProps)void 0===t[n]&&(t[n]=e[n]);return t}var Wi={current:null},Ji=null,qi=null,Zi=null;function $i(){Zi=qi=Ji=null}function eo(e){var t=Wi.current;si(Wi),e.type._context._currentValue=t}function to(e,t){for(;null!==e;){var n=e.alternate;if(e.childExpirationTime<t)e.childExpirationTime=t,null!==n&&n.childExpirationTime<t&&(n.childExpirationTime=t);else{if(!(null!==n&&n.childExpirationTime<t))break;n.childExpirationTime=t}e=e.return}}function no(e,t){Ji=e,Zi=qi=null,null!==(e=e.dependencies)&&null!==e.firstContext&&(e.expirationTime>=t&&(Oa=!0),e.firstContext=null)}function ro(e,t){if(Zi!==e&&!1!==t&&0!==t)if(\"number\"===typeof t&&1073741823!==t||(Zi=e,t=1073741823),t={context:e,observedBits:t,next:null},null===qi){if(null===Ji)throw Error(a(308));qi=t,Ji.dependencies={expirationTime:0,firstContext:t,responders:null}}else qi=qi.next=t;return e._currentValue}var io=!1;function oo(e){e.updateQueue={baseState:e.memoizedState,baseQueue:null,shared:{pending:null},effects:null}}function ao(e,t){e=e.updateQueue,t.updateQueue===e&&(t.updateQueue={baseState:e.baseState,baseQueue:e.baseQueue,shared:e.shared,effects:e.effects})}function Ao(e,t){return(e={expirationTime:e,suspenseConfig:t,tag:0,payload:null,callback:null,next:null}).next=e}function so(e,t){if(null!==(e=e.updateQueue)){var n=(e=e.shared).pending;null===n?t.next=t:(t.next=n.next,n.next=t),e.pending=t}}function lo(e,t){var n=e.alternate;null!==n&&ao(n,e),null===(n=(e=e.updateQueue).baseQueue)?(e.baseQueue=t.next=t,t.next=t):(t.next=n.next,n.next=t)}function uo(e,t,n,r){var o=e.updateQueue;io=!1;var a=o.baseQueue,A=o.shared.pending;if(null!==A){if(null!==a){var s=a.next;a.next=A.next,A.next=s}a=A,o.shared.pending=null,null!==(s=e.alternate)&&(null!==(s=s.updateQueue)&&(s.baseQueue=A))}if(null!==a){s=a.next;var l=o.baseState,u=0,c=null,f=null,d=null;if(null!==s)for(var p=s;;){if((A=p.expirationTime)<r){var h={expirationTime:p.expirationTime,suspenseConfig:p.suspenseConfig,tag:p.tag,payload:p.payload,callback:p.callback,next:null};null===d?(f=d=h,c=l):d=d.next=h,A>u&&(u=A)}else{null!==d&&(d=d.next={expirationTime:1073741823,suspenseConfig:p.suspenseConfig,tag:p.tag,payload:p.payload,callback:p.callback,next:null}),os(A,p.suspenseConfig);e:{var g=e,v=p;switch(A=t,h=n,v.tag){case 1:if(\"function\"===typeof(g=v.payload)){l=g.call(h,l,A);break e}l=g;break e;case 3:g.effectTag=-4097&g.effectTag|64;case 0:if(null===(A=\"function\"===typeof(g=v.payload)?g.call(h,l,A):g)||void 0===A)break e;l=i({},l,A);break e;case 2:io=!0}}null!==p.callback&&(e.effectTag|=32,null===(A=o.effects)?o.effects=[p]:A.push(p))}if(null===(p=p.next)||p===s){if(null===(A=o.shared.pending))break;p=a.next=A.next,A.next=s,o.baseQueue=a=A,o.shared.pending=null}}null===d?c=l:d.next=f,o.baseState=c,o.baseQueue=d,as(u),e.expirationTime=u,e.memoizedState=l}}function co(e,t,n){if(e=t.effects,t.effects=null,null!==e)for(t=0;t<e.length;t++){var r=e[t],i=r.callback;if(null!==i){if(r.callback=null,r=i,i=n,\"function\"!==typeof r)throw Error(a(191,r));r.call(i)}}}var fo=J.ReactCurrentBatchConfig,po=(new r.Component).refs;function ho(e,t,n,r){n=null===(n=n(r,t=e.memoizedState))||void 0===n?t:i({},t,n),e.memoizedState=n,0===e.expirationTime&&(e.updateQueue.baseState=n)}var go={isMounted:function(e){return!!(e=e._reactInternalFiber)&&$e(e)===e},enqueueSetState:function(e,t,n){e=e._reactInternalFiber;var r=GA(),i=fo.suspense;(i=Ao(r=VA(r,e,i),i)).payload=t,void 0!==n&&null!==n&&(i.callback=n),so(e,i),YA(e,r)},enqueueReplaceState:function(e,t,n){e=e._reactInternalFiber;var r=GA(),i=fo.suspense;(i=Ao(r=VA(r,e,i),i)).tag=1,i.payload=t,void 0!==n&&null!==n&&(i.callback=n),so(e,i),YA(e,r)},enqueueForceUpdate:function(e,t){e=e._reactInternalFiber;var n=GA(),r=fo.suspense;(r=Ao(n=VA(n,e,r),r)).tag=2,void 0!==t&&null!==t&&(r.callback=t),so(e,r),YA(e,n)}};function vo(e,t,n,r,i,o,a){return\"function\"===typeof(e=e.stateNode).shouldComponentUpdate?e.shouldComponentUpdate(r,o,a):!t.prototype||!t.prototype.isPureReactComponent||(!kr(n,r)||!kr(i,o))}function Bo(e,t,n){var r=!1,i=ui,o=t.contextType;return\"object\"===typeof o&&null!==o?o=ro(o):(i=hi(t)?di:ci.current,o=(r=null!==(r=t.contextTypes)&&void 0!==r)?pi(e,i):ui),t=new t(n,o),e.memoizedState=null!==t.state&&void 0!==t.state?t.state:null,t.updater=go,e.stateNode=t,t._reactInternalFiber=e,r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=i,e.__reactInternalMemoizedMaskedChildContext=o),t}function mo(e,t,n,r){e=t.state,\"function\"===typeof t.componentWillReceiveProps&&t.componentWillReceiveProps(n,r),\"function\"===typeof t.UNSAFE_componentWillReceiveProps&&t.UNSAFE_componentWillReceiveProps(n,r),t.state!==e&&go.enqueueReplaceState(t,t.state,null)}function bo(e,t,n,r){var i=e.stateNode;i.props=n,i.state=e.memoizedState,i.refs=po,oo(e);var o=t.contextType;\"object\"===typeof o&&null!==o?i.context=ro(o):(o=hi(t)?di:ci.current,i.context=pi(e,o)),uo(e,n,i,r),i.state=e.memoizedState,\"function\"===typeof(o=t.getDerivedStateFromProps)&&(ho(e,t,o,n),i.state=e.memoizedState),\"function\"===typeof t.getDerivedStateFromProps||\"function\"===typeof i.getSnapshotBeforeUpdate||\"function\"!==typeof i.UNSAFE_componentWillMount&&\"function\"!==typeof i.componentWillMount||(t=i.state,\"function\"===typeof i.componentWillMount&&i.componentWillMount(),\"function\"===typeof i.UNSAFE_componentWillMount&&i.UNSAFE_componentWillMount(),t!==i.state&&go.enqueueReplaceState(i,i.state,null),uo(e,n,i,r),i.state=e.memoizedState),\"function\"===typeof i.componentDidMount&&(e.effectTag|=4)}var wo=Array.isArray;function Eo(e,t,n){if(null!==(e=n.ref)&&\"function\"!==typeof e&&\"object\"!==typeof e){if(n._owner){if(n=n._owner){if(1!==n.tag)throw Error(a(309));var r=n.stateNode}if(!r)throw Error(a(147,e));var i=\"\"+e;return null!==t&&null!==t.ref&&\"function\"===typeof t.ref&&t.ref._stringRef===i?t.ref:((t=function(e){var t=r.refs;t===po&&(t=r.refs={}),null===e?delete t[i]:t[i]=e})._stringRef=i,t)}if(\"string\"!==typeof e)throw Error(a(284));if(!n._owner)throw Error(a(290,e))}return e}function yo(e,t){if(\"textarea\"!==e.type)throw Error(a(31,\"[object Object]\"===Object.prototype.toString.call(t)?\"object with keys {\"+Object.keys(t).join(\", \")+\"}\":t,\"\"))}function Co(e){function t(t,n){if(e){var r=t.lastEffect;null!==r?(r.nextEffect=n,t.lastEffect=n):t.firstEffect=t.lastEffect=n,n.nextEffect=null,n.effectTag=8}}function n(n,r){if(!e)return null;for(;null!==r;)t(n,r),r=r.sibling;return null}function r(e,t){for(e=new Map;null!==t;)null!==t.key?e.set(t.key,t):e.set(t.index,t),t=t.sibling;return e}function i(e,t){return(e=xs(e,t)).index=0,e.sibling=null,e}function o(t,n,r){return t.index=r,e?null!==(r=t.alternate)?(r=r.index)<n?(t.effectTag=2,n):r:(t.effectTag=2,n):n}function A(t){return e&&null===t.alternate&&(t.effectTag=2),t}function s(e,t,n,r){return null===t||6!==t.tag?((t=Ss(n,e.mode,r)).return=e,t):((t=i(t,n)).return=e,t)}function l(e,t,n,r){return null!==t&&t.elementType===n.type?((r=i(t,n.props)).ref=Eo(e,t,n),r.return=e,r):((r=Fs(n.type,n.key,n.props,null,e.mode,r)).ref=Eo(e,t,n),r.return=e,r)}function u(e,t,n,r){return null===t||4!==t.tag||t.stateNode.containerInfo!==n.containerInfo||t.stateNode.implementation!==n.implementation?((t=Os(n,e.mode,r)).return=e,t):((t=i(t,n.children||[])).return=e,t)}function c(e,t,n,r,o){return null===t||7!==t.tag?((t=Us(n,e.mode,r,o)).return=e,t):((t=i(t,n)).return=e,t)}function f(e,t,n){if(\"string\"===typeof t||\"number\"===typeof t)return(t=Ss(\"\"+t,e.mode,n)).return=e,t;if(\"object\"===typeof t&&null!==t){switch(t.$$typeof){case ee:return(n=Fs(t.type,t.key,t.props,null,e.mode,n)).ref=Eo(e,null,t),n.return=e,n;case te:return(t=Os(t,e.mode,n)).return=e,t}if(wo(t)||he(t))return(t=Us(t,e.mode,n,null)).return=e,t;yo(e,t)}return null}function d(e,t,n,r){var i=null!==t?t.key:null;if(\"string\"===typeof n||\"number\"===typeof n)return null!==i?null:s(e,t,\"\"+n,r);if(\"object\"===typeof n&&null!==n){switch(n.$$typeof){case ee:return n.key===i?n.type===ne?c(e,t,n.props.children,r,i):l(e,t,n,r):null;case te:return n.key===i?u(e,t,n,r):null}if(wo(n)||he(n))return null!==i?null:c(e,t,n,r,null);yo(e,n)}return null}function p(e,t,n,r,i){if(\"string\"===typeof r||\"number\"===typeof r)return s(t,e=e.get(n)||null,\"\"+r,i);if(\"object\"===typeof r&&null!==r){switch(r.$$typeof){case ee:return e=e.get(null===r.key?n:r.key)||null,r.type===ne?c(t,e,r.props.children,i,r.key):l(t,e,r,i);case te:return u(t,e=e.get(null===r.key?n:r.key)||null,r,i)}if(wo(r)||he(r))return c(t,e=e.get(n)||null,r,i,null);yo(t,r)}return null}function h(i,a,A,s){for(var l=null,u=null,c=a,h=a=0,g=null;null!==c&&h<A.length;h++){c.index>h?(g=c,c=null):g=c.sibling;var v=d(i,c,A[h],s);if(null===v){null===c&&(c=g);break}e&&c&&null===v.alternate&&t(i,c),a=o(v,a,h),null===u?l=v:u.sibling=v,u=v,c=g}if(h===A.length)return n(i,c),l;if(null===c){for(;h<A.length;h++)null!==(c=f(i,A[h],s))&&(a=o(c,a,h),null===u?l=c:u.sibling=c,u=c);return l}for(c=r(i,c);h<A.length;h++)null!==(g=p(c,i,h,A[h],s))&&(e&&null!==g.alternate&&c.delete(null===g.key?h:g.key),a=o(g,a,h),null===u?l=g:u.sibling=g,u=g);return e&&c.forEach((function(e){return t(i,e)})),l}function g(i,A,s,l){var u=he(s);if(\"function\"!==typeof u)throw Error(a(150));if(null==(s=u.call(s)))throw Error(a(151));for(var c=u=null,h=A,g=A=0,v=null,B=s.next();null!==h&&!B.done;g++,B=s.next()){h.index>g?(v=h,h=null):v=h.sibling;var m=d(i,h,B.value,l);if(null===m){null===h&&(h=v);break}e&&h&&null===m.alternate&&t(i,h),A=o(m,A,g),null===c?u=m:c.sibling=m,c=m,h=v}if(B.done)return n(i,h),u;if(null===h){for(;!B.done;g++,B=s.next())null!==(B=f(i,B.value,l))&&(A=o(B,A,g),null===c?u=B:c.sibling=B,c=B);return u}for(h=r(i,h);!B.done;g++,B=s.next())null!==(B=p(h,i,g,B.value,l))&&(e&&null!==B.alternate&&h.delete(null===B.key?g:B.key),A=o(B,A,g),null===c?u=B:c.sibling=B,c=B);return e&&h.forEach((function(e){return t(i,e)})),u}return function(e,r,o,s){var l=\"object\"===typeof o&&null!==o&&o.type===ne&&null===o.key;l&&(o=o.props.children);var u=\"object\"===typeof o&&null!==o;if(u)switch(o.$$typeof){case ee:e:{for(u=o.key,l=r;null!==l;){if(l.key===u){switch(l.tag){case 7:if(o.type===ne){n(e,l.sibling),(r=i(l,o.props.children)).return=e,e=r;break e}break;default:if(l.elementType===o.type){n(e,l.sibling),(r=i(l,o.props)).ref=Eo(e,l,o),r.return=e,e=r;break e}}n(e,l);break}t(e,l),l=l.sibling}o.type===ne?((r=Us(o.props.children,e.mode,s,o.key)).return=e,e=r):((s=Fs(o.type,o.key,o.props,null,e.mode,s)).ref=Eo(e,r,o),s.return=e,e=s)}return A(e);case te:e:{for(l=o.key;null!==r;){if(r.key===l){if(4===r.tag&&r.stateNode.containerInfo===o.containerInfo&&r.stateNode.implementation===o.implementation){n(e,r.sibling),(r=i(r,o.children||[])).return=e,e=r;break e}n(e,r);break}t(e,r),r=r.sibling}(r=Os(o,e.mode,s)).return=e,e=r}return A(e)}if(\"string\"===typeof o||\"number\"===typeof o)return o=\"\"+o,null!==r&&6===r.tag?(n(e,r.sibling),(r=i(r,o)).return=e,e=r):(n(e,r),(r=Ss(o,e.mode,s)).return=e,e=r),A(e);if(wo(o))return h(e,r,o,s);if(he(o))return g(e,r,o,s);if(u&&yo(e,o),\"undefined\"===typeof o&&!l)switch(e.tag){case 1:case 0:throw e=e.type,Error(a(152,e.displayName||e.name||\"Component\"))}return n(e,r)}}var Qo=Co(!0),xo=Co(!1),Fo={},Uo={current:Fo},So={current:Fo},Oo={current:Fo};function Ho(e){if(e===Fo)throw Error(a(174));return e}function To(e,t){switch(li(Oo,t),li(So,e),li(Uo,Fo),e=t.nodeType){case 9:case 11:t=(t=t.documentElement)?t.namespaceURI:De(null,\"\");break;default:t=De(t=(e=8===e?t.parentNode:t).namespaceURI||null,e=e.tagName)}si(Uo),li(Uo,t)}function No(){si(Uo),si(So),si(Oo)}function _o(e){Ho(Oo.current);var t=Ho(Uo.current),n=De(t,e.type);t!==n&&(li(So,e),li(Uo,n))}function Mo(e){So.current===e&&(si(Uo),si(So))}var Ro={current:0};function Do(e){for(var t=e;null!==t;){if(13===t.tag){var n=t.memoizedState;if(null!==n&&(null===(n=n.dehydrated)||\"$?\"===n.data||\"$!\"===n.data))return t}else if(19===t.tag&&void 0!==t.memoizedProps.revealOrder){if(0!==(64&t.effectTag))return t}else if(null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}function Po(e,t){return{responder:e,props:t}}var ko=J.ReactCurrentDispatcher,Io=J.ReactCurrentBatchConfig,Ko=0,Lo=null,zo=null,jo=null,Xo=!1;function Go(){throw Error(a(321))}function Vo(e,t){if(null===t)return!1;for(var n=0;n<t.length&&n<e.length;n++)if(!Dr(e[n],t[n]))return!1;return!0}function Yo(e,t,n,r,i,o){if(Ko=o,Lo=t,t.memoizedState=null,t.updateQueue=null,t.expirationTime=0,ko.current=null===e||null===e.memoizedState?va:Ba,e=n(r,i),t.expirationTime===Ko){o=0;do{if(t.expirationTime=0,!(25>o))throw Error(a(301));o+=1,jo=zo=null,t.updateQueue=null,ko.current=ma,e=n(r,i)}while(t.expirationTime===Ko)}if(ko.current=ga,t=null!==zo&&null!==zo.next,Ko=0,jo=zo=Lo=null,Xo=!1,t)throw Error(a(300));return e}function Wo(){var e={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};return null===jo?Lo.memoizedState=jo=e:jo=jo.next=e,jo}function Jo(){if(null===zo){var e=Lo.alternate;e=null!==e?e.memoizedState:null}else e=zo.next;var t=null===jo?Lo.memoizedState:jo.next;if(null!==t)jo=t,zo=e;else{if(null===e)throw Error(a(310));e={memoizedState:(zo=e).memoizedState,baseState:zo.baseState,baseQueue:zo.baseQueue,queue:zo.queue,next:null},null===jo?Lo.memoizedState=jo=e:jo=jo.next=e}return jo}function qo(e,t){return\"function\"===typeof t?t(e):t}function Zo(e){var t=Jo(),n=t.queue;if(null===n)throw Error(a(311));n.lastRenderedReducer=e;var r=zo,i=r.baseQueue,o=n.pending;if(null!==o){if(null!==i){var A=i.next;i.next=o.next,o.next=A}r.baseQueue=i=o,n.pending=null}if(null!==i){i=i.next,r=r.baseState;var s=A=o=null,l=i;do{var u=l.expirationTime;if(u<Ko){var c={expirationTime:l.expirationTime,suspenseConfig:l.suspenseConfig,action:l.action,eagerReducer:l.eagerReducer,eagerState:l.eagerState,next:null};null===s?(A=s=c,o=r):s=s.next=c,u>Lo.expirationTime&&(Lo.expirationTime=u,as(u))}else null!==s&&(s=s.next={expirationTime:1073741823,suspenseConfig:l.suspenseConfig,action:l.action,eagerReducer:l.eagerReducer,eagerState:l.eagerState,next:null}),os(u,l.suspenseConfig),r=l.eagerReducer===e?l.eagerState:e(r,l.action);l=l.next}while(null!==l&&l!==i);null===s?o=r:s.next=A,Dr(r,t.memoizedState)||(Oa=!0),t.memoizedState=r,t.baseState=o,t.baseQueue=s,n.lastRenderedState=r}return[t.memoizedState,n.dispatch]}function $o(e){var t=Jo(),n=t.queue;if(null===n)throw Error(a(311));n.lastRenderedReducer=e;var r=n.dispatch,i=n.pending,o=t.memoizedState;if(null!==i){n.pending=null;var A=i=i.next;do{o=e(o,A.action),A=A.next}while(A!==i);Dr(o,t.memoizedState)||(Oa=!0),t.memoizedState=o,null===t.baseQueue&&(t.baseState=o),n.lastRenderedState=o}return[o,r]}function ea(e){var t=Wo();return\"function\"===typeof e&&(e=e()),t.memoizedState=t.baseState=e,e=(e=t.queue={pending:null,dispatch:null,lastRenderedReducer:qo,lastRenderedState:e}).dispatch=ha.bind(null,Lo,e),[t.memoizedState,e]}function ta(e,t,n,r){return e={tag:e,create:t,destroy:n,deps:r,next:null},null===(t=Lo.updateQueue)?(t={lastEffect:null},Lo.updateQueue=t,t.lastEffect=e.next=e):null===(n=t.lastEffect)?t.lastEffect=e.next=e:(r=n.next,n.next=e,e.next=r,t.lastEffect=e),e}function na(){return Jo().memoizedState}function ra(e,t,n,r){var i=Wo();Lo.effectTag|=e,i.memoizedState=ta(1|t,n,void 0,void 0===r?null:r)}function ia(e,t,n,r){var i=Jo();r=void 0===r?null:r;var o=void 0;if(null!==zo){var a=zo.memoizedState;if(o=a.destroy,null!==r&&Vo(r,a.deps))return void ta(t,n,o,r)}Lo.effectTag|=e,i.memoizedState=ta(1|t,n,o,r)}function oa(e,t){return ra(516,4,e,t)}function aa(e,t){return ia(516,4,e,t)}function Aa(e,t){return ia(4,2,e,t)}function sa(e,t){return\"function\"===typeof t?(e=e(),t(e),function(){t(null)}):null!==t&&void 0!==t?(e=e(),t.current=e,function(){t.current=null}):void 0}function la(e,t,n){return n=null!==n&&void 0!==n?n.concat([e]):null,ia(4,2,sa.bind(null,t,e),n)}function ua(){}function ca(e,t){return Wo().memoizedState=[e,void 0===t?null:t],e}function fa(e,t){var n=Jo();t=void 0===t?null:t;var r=n.memoizedState;return null!==r&&null!==t&&Vo(t,r[1])?r[0]:(n.memoizedState=[e,t],e)}function da(e,t){var n=Jo();t=void 0===t?null:t;var r=n.memoizedState;return null!==r&&null!==t&&Vo(t,r[1])?r[0]:(e=e(),n.memoizedState=[e,t],e)}function pa(e,t,n){var r=Ii();Li(98>r?98:r,(function(){e(!0)})),Li(97<r?97:r,(function(){var r=Io.suspense;Io.suspense=void 0===t?null:t;try{e(!1),n()}finally{Io.suspense=r}}))}function ha(e,t,n){var r=GA(),i=fo.suspense;i={expirationTime:r=VA(r,e,i),suspenseConfig:i,action:n,eagerReducer:null,eagerState:null,next:null};var o=t.pending;if(null===o?i.next=i:(i.next=o.next,o.next=i),t.pending=i,o=e.alternate,e===Lo||null!==o&&o===Lo)Xo=!0,i.expirationTime=Ko,Lo.expirationTime=Ko;else{if(0===e.expirationTime&&(null===o||0===o.expirationTime)&&null!==(o=t.lastRenderedReducer))try{var a=t.lastRenderedState,A=o(a,n);if(i.eagerReducer=o,i.eagerState=A,Dr(A,a))return}catch(s){}YA(e,r)}}var ga={readContext:ro,useCallback:Go,useContext:Go,useEffect:Go,useImperativeHandle:Go,useLayoutEffect:Go,useMemo:Go,useReducer:Go,useRef:Go,useState:Go,useDebugValue:Go,useResponder:Go,useDeferredValue:Go,useTransition:Go},va={readContext:ro,useCallback:ca,useContext:ro,useEffect:oa,useImperativeHandle:function(e,t,n){return n=null!==n&&void 0!==n?n.concat([e]):null,ra(4,2,sa.bind(null,t,e),n)},useLayoutEffect:function(e,t){return ra(4,2,e,t)},useMemo:function(e,t){var n=Wo();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=Wo();return t=void 0!==n?n(t):t,r.memoizedState=r.baseState=t,e=(e=r.queue={pending:null,dispatch:null,lastRenderedReducer:e,lastRenderedState:t}).dispatch=ha.bind(null,Lo,e),[r.memoizedState,e]},useRef:function(e){return e={current:e},Wo().memoizedState=e},useState:ea,useDebugValue:ua,useResponder:Po,useDeferredValue:function(e,t){var n=ea(e),r=n[0],i=n[1];return oa((function(){var n=Io.suspense;Io.suspense=void 0===t?null:t;try{i(e)}finally{Io.suspense=n}}),[e,t]),r},useTransition:function(e){var t=ea(!1),n=t[0];return t=t[1],[ca(pa.bind(null,t,e),[t,e]),n]}},Ba={readContext:ro,useCallback:fa,useContext:ro,useEffect:aa,useImperativeHandle:la,useLayoutEffect:Aa,useMemo:da,useReducer:Zo,useRef:na,useState:function(){return Zo(qo)},useDebugValue:ua,useResponder:Po,useDeferredValue:function(e,t){var n=Zo(qo),r=n[0],i=n[1];return aa((function(){var n=Io.suspense;Io.suspense=void 0===t?null:t;try{i(e)}finally{Io.suspense=n}}),[e,t]),r},useTransition:function(e){var t=Zo(qo),n=t[0];return t=t[1],[fa(pa.bind(null,t,e),[t,e]),n]}},ma={readContext:ro,useCallback:fa,useContext:ro,useEffect:aa,useImperativeHandle:la,useLayoutEffect:Aa,useMemo:da,useReducer:$o,useRef:na,useState:function(){return $o(qo)},useDebugValue:ua,useResponder:Po,useDeferredValue:function(e,t){var n=$o(qo),r=n[0],i=n[1];return aa((function(){var n=Io.suspense;Io.suspense=void 0===t?null:t;try{i(e)}finally{Io.suspense=n}}),[e,t]),r},useTransition:function(e){var t=$o(qo),n=t[0];return t=t[1],[fa(pa.bind(null,t,e),[t,e]),n]}},ba=null,wa=null,Ea=!1;function ya(e,t){var n=Cs(5,null,null,0);n.elementType=\"DELETED\",n.type=\"DELETED\",n.stateNode=t,n.return=e,n.effectTag=8,null!==e.lastEffect?(e.lastEffect.nextEffect=n,e.lastEffect=n):e.firstEffect=e.lastEffect=n}function Ca(e,t){switch(e.tag){case 5:var n=e.type;return null!==(t=1!==t.nodeType||n.toLowerCase()!==t.nodeName.toLowerCase()?null:t)&&(e.stateNode=t,!0);case 6:return null!==(t=\"\"===e.pendingProps||3!==t.nodeType?null:t)&&(e.stateNode=t,!0);case 13:default:return!1}}function Qa(e){if(Ea){var t=wa;if(t){var n=t;if(!Ca(e,t)){if(!(t=wn(n.nextSibling))||!Ca(e,t))return e.effectTag=-1025&e.effectTag|2,Ea=!1,void(ba=e);ya(ba,n)}ba=e,wa=wn(t.firstChild)}else e.effectTag=-1025&e.effectTag|2,Ea=!1,ba=e}}function xa(e){for(e=e.return;null!==e&&5!==e.tag&&3!==e.tag&&13!==e.tag;)e=e.return;ba=e}function Fa(e){if(e!==ba)return!1;if(!Ea)return xa(e),Ea=!0,!1;var t=e.type;if(5!==e.tag||\"head\"!==t&&\"body\"!==t&&!Bn(t,e.memoizedProps))for(t=wa;t;)ya(e,t),t=wn(t.nextSibling);if(xa(e),13===e.tag){if(!(e=null!==(e=e.memoizedState)?e.dehydrated:null))throw Error(a(317));e:{for(e=e.nextSibling,t=0;e;){if(8===e.nodeType){var n=e.data;if(\"/$\"===n){if(0===t){wa=wn(e.nextSibling);break e}t--}else\"$\"!==n&&\"$!\"!==n&&\"$?\"!==n||t++}e=e.nextSibling}wa=null}}else wa=ba?wn(e.stateNode.nextSibling):null;return!0}function Ua(){wa=ba=null,Ea=!1}var Sa=J.ReactCurrentOwner,Oa=!1;function Ha(e,t,n,r){t.child=null===e?xo(t,null,n,r):Qo(t,e.child,n,r)}function Ta(e,t,n,r,i){n=n.render;var o=t.ref;return no(t,i),r=Yo(e,t,n,r,o,i),null===e||Oa?(t.effectTag|=1,Ha(e,t,r,i),t.child):(t.updateQueue=e.updateQueue,t.effectTag&=-517,e.expirationTime<=i&&(e.expirationTime=0),Ya(e,t,i))}function Na(e,t,n,r,i,o){if(null===e){var a=n.type;return\"function\"!==typeof a||Qs(a)||void 0!==a.defaultProps||null!==n.compare||void 0!==n.defaultProps?((e=Fs(n.type,null,r,null,t.mode,o)).ref=t.ref,e.return=t,t.child=e):(t.tag=15,t.type=a,_a(e,t,a,r,i,o))}return a=e.child,i<o&&(i=a.memoizedProps,(n=null!==(n=n.compare)?n:kr)(i,r)&&e.ref===t.ref)?Ya(e,t,o):(t.effectTag|=1,(e=xs(a,r)).ref=t.ref,e.return=t,t.child=e)}function _a(e,t,n,r,i,o){return null!==e&&kr(e.memoizedProps,r)&&e.ref===t.ref&&(Oa=!1,i<o)?(t.expirationTime=e.expirationTime,Ya(e,t,o)):Ra(e,t,n,r,o)}function Ma(e,t){var n=t.ref;(null===e&&null!==n||null!==e&&e.ref!==n)&&(t.effectTag|=128)}function Ra(e,t,n,r,i){var o=hi(n)?di:ci.current;return o=pi(t,o),no(t,i),n=Yo(e,t,n,r,o,i),null===e||Oa?(t.effectTag|=1,Ha(e,t,n,i),t.child):(t.updateQueue=e.updateQueue,t.effectTag&=-517,e.expirationTime<=i&&(e.expirationTime=0),Ya(e,t,i))}function Da(e,t,n,r,i){if(hi(n)){var o=!0;mi(t)}else o=!1;if(no(t,i),null===t.stateNode)null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),Bo(t,n,r),bo(t,n,r,i),r=!0;else if(null===e){var a=t.stateNode,A=t.memoizedProps;a.props=A;var s=a.context,l=n.contextType;\"object\"===typeof l&&null!==l?l=ro(l):l=pi(t,l=hi(n)?di:ci.current);var u=n.getDerivedStateFromProps,c=\"function\"===typeof u||\"function\"===typeof a.getSnapshotBeforeUpdate;c||\"function\"!==typeof a.UNSAFE_componentWillReceiveProps&&\"function\"!==typeof a.componentWillReceiveProps||(A!==r||s!==l)&&mo(t,a,r,l),io=!1;var f=t.memoizedState;a.state=f,uo(t,r,a,i),s=t.memoizedState,A!==r||f!==s||fi.current||io?(\"function\"===typeof u&&(ho(t,n,u,r),s=t.memoizedState),(A=io||vo(t,n,A,r,f,s,l))?(c||\"function\"!==typeof a.UNSAFE_componentWillMount&&\"function\"!==typeof a.componentWillMount||(\"function\"===typeof a.componentWillMount&&a.componentWillMount(),\"function\"===typeof a.UNSAFE_componentWillMount&&a.UNSAFE_componentWillMount()),\"function\"===typeof a.componentDidMount&&(t.effectTag|=4)):(\"function\"===typeof a.componentDidMount&&(t.effectTag|=4),t.memoizedProps=r,t.memoizedState=s),a.props=r,a.state=s,a.context=l,r=A):(\"function\"===typeof a.componentDidMount&&(t.effectTag|=4),r=!1)}else a=t.stateNode,ao(e,t),A=t.memoizedProps,a.props=t.type===t.elementType?A:Yi(t.type,A),s=a.context,\"object\"===typeof(l=n.contextType)&&null!==l?l=ro(l):l=pi(t,l=hi(n)?di:ci.current),(c=\"function\"===typeof(u=n.getDerivedStateFromProps)||\"function\"===typeof a.getSnapshotBeforeUpdate)||\"function\"!==typeof a.UNSAFE_componentWillReceiveProps&&\"function\"!==typeof a.componentWillReceiveProps||(A!==r||s!==l)&&mo(t,a,r,l),io=!1,s=t.memoizedState,a.state=s,uo(t,r,a,i),f=t.memoizedState,A!==r||s!==f||fi.current||io?(\"function\"===typeof u&&(ho(t,n,u,r),f=t.memoizedState),(u=io||vo(t,n,A,r,s,f,l))?(c||\"function\"!==typeof a.UNSAFE_componentWillUpdate&&\"function\"!==typeof a.componentWillUpdate||(\"function\"===typeof a.componentWillUpdate&&a.componentWillUpdate(r,f,l),\"function\"===typeof a.UNSAFE_componentWillUpdate&&a.UNSAFE_componentWillUpdate(r,f,l)),\"function\"===typeof a.componentDidUpdate&&(t.effectTag|=4),\"function\"===typeof a.getSnapshotBeforeUpdate&&(t.effectTag|=256)):(\"function\"!==typeof a.componentDidUpdate||A===e.memoizedProps&&s===e.memoizedState||(t.effectTag|=4),\"function\"!==typeof a.getSnapshotBeforeUpdate||A===e.memoizedProps&&s===e.memoizedState||(t.effectTag|=256),t.memoizedProps=r,t.memoizedState=f),a.props=r,a.state=f,a.context=l,r=u):(\"function\"!==typeof a.componentDidUpdate||A===e.memoizedProps&&s===e.memoizedState||(t.effectTag|=4),\"function\"!==typeof a.getSnapshotBeforeUpdate||A===e.memoizedProps&&s===e.memoizedState||(t.effectTag|=256),r=!1);return Pa(e,t,n,r,o,i)}function Pa(e,t,n,r,i,o){Ma(e,t);var a=0!==(64&t.effectTag);if(!r&&!a)return i&&bi(t,n,!1),Ya(e,t,o);r=t.stateNode,Sa.current=t;var A=a&&\"function\"!==typeof n.getDerivedStateFromError?null:r.render();return t.effectTag|=1,null!==e&&a?(t.child=Qo(t,e.child,null,o),t.child=Qo(t,null,A,o)):Ha(e,t,A,o),t.memoizedState=r.state,i&&bi(t,n,!0),t.child}function ka(e){var t=e.stateNode;t.pendingContext?vi(0,t.pendingContext,t.pendingContext!==t.context):t.context&&vi(0,t.context,!1),To(e,t.containerInfo)}var Ia,Ka,La,za={dehydrated:null,retryTime:0};function ja(e,t,n){var r,i=t.mode,o=t.pendingProps,a=Ro.current,A=!1;if((r=0!==(64&t.effectTag))||(r=0!==(2&a)&&(null===e||null!==e.memoizedState)),r?(A=!0,t.effectTag&=-65):null!==e&&null===e.memoizedState||void 0===o.fallback||!0===o.unstable_avoidThisFallback||(a|=1),li(Ro,1&a),null===e){if(void 0!==o.fallback&&Qa(t),A){if(A=o.fallback,(o=Us(null,i,0,null)).return=t,0===(2&t.mode))for(e=null!==t.memoizedState?t.child.child:t.child,o.child=e;null!==e;)e.return=o,e=e.sibling;return(n=Us(A,i,n,null)).return=t,o.sibling=n,t.memoizedState=za,t.child=o,n}return i=o.children,t.memoizedState=null,t.child=xo(t,null,i,n)}if(null!==e.memoizedState){if(i=(e=e.child).sibling,A){if(o=o.fallback,(n=xs(e,e.pendingProps)).return=t,0===(2&t.mode)&&(A=null!==t.memoizedState?t.child.child:t.child)!==e.child)for(n.child=A;null!==A;)A.return=n,A=A.sibling;return(i=xs(i,o)).return=t,n.sibling=i,n.childExpirationTime=0,t.memoizedState=za,t.child=n,i}return n=Qo(t,e.child,o.children,n),t.memoizedState=null,t.child=n}if(e=e.child,A){if(A=o.fallback,(o=Us(null,i,0,null)).return=t,o.child=e,null!==e&&(e.return=o),0===(2&t.mode))for(e=null!==t.memoizedState?t.child.child:t.child,o.child=e;null!==e;)e.return=o,e=e.sibling;return(n=Us(A,i,n,null)).return=t,o.sibling=n,n.effectTag|=2,o.childExpirationTime=0,t.memoizedState=za,t.child=o,n}return t.memoizedState=null,t.child=Qo(t,e,o.children,n)}function Xa(e,t){e.expirationTime<t&&(e.expirationTime=t);var n=e.alternate;null!==n&&n.expirationTime<t&&(n.expirationTime=t),to(e.return,t)}function Ga(e,t,n,r,i,o){var a=e.memoizedState;null===a?e.memoizedState={isBackwards:t,rendering:null,renderingStartTime:0,last:r,tail:n,tailExpiration:0,tailMode:i,lastEffect:o}:(a.isBackwards=t,a.rendering=null,a.renderingStartTime=0,a.last=r,a.tail=n,a.tailExpiration=0,a.tailMode=i,a.lastEffect=o)}function Va(e,t,n){var r=t.pendingProps,i=r.revealOrder,o=r.tail;if(Ha(e,t,r.children,n),0!==(2&(r=Ro.current)))r=1&r|2,t.effectTag|=64;else{if(null!==e&&0!==(64&e.effectTag))e:for(e=t.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&Xa(e,n);else if(19===e.tag)Xa(e,n);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===t)break e;for(;null===e.sibling;){if(null===e.return||e.return===t)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}r&=1}if(li(Ro,r),0===(2&t.mode))t.memoizedState=null;else switch(i){case\"forwards\":for(n=t.child,i=null;null!==n;)null!==(e=n.alternate)&&null===Do(e)&&(i=n),n=n.sibling;null===(n=i)?(i=t.child,t.child=null):(i=n.sibling,n.sibling=null),Ga(t,!1,i,n,o,t.lastEffect);break;case\"backwards\":for(n=null,i=t.child,t.child=null;null!==i;){if(null!==(e=i.alternate)&&null===Do(e)){t.child=i;break}e=i.sibling,i.sibling=n,n=i,i=e}Ga(t,!0,n,null,o,t.lastEffect);break;case\"together\":Ga(t,!1,null,null,void 0,t.lastEffect);break;default:t.memoizedState=null}return t.child}function Ya(e,t,n){null!==e&&(t.dependencies=e.dependencies);var r=t.expirationTime;if(0!==r&&as(r),t.childExpirationTime<n)return null;if(null!==e&&t.child!==e.child)throw Error(a(153));if(null!==t.child){for(n=xs(e=t.child,e.pendingProps),t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,(n=n.sibling=xs(e,e.pendingProps)).return=t;n.sibling=null}return t.child}function Wa(e,t){switch(e.tailMode){case\"hidden\":t=e.tail;for(var n=null;null!==t;)null!==t.alternate&&(n=t),t=t.sibling;null===n?e.tail=null:n.sibling=null;break;case\"collapsed\":n=e.tail;for(var r=null;null!==n;)null!==n.alternate&&(r=n),n=n.sibling;null===r?t||null===e.tail?e.tail=null:e.tail.sibling=null:r.sibling=null}}function Ja(e,t,n){var r=t.pendingProps;switch(t.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return null;case 1:return hi(t.type)&&gi(),null;case 3:return No(),si(fi),si(ci),(n=t.stateNode).pendingContext&&(n.context=n.pendingContext,n.pendingContext=null),null!==e&&null!==e.child||!Fa(t)||(t.effectTag|=4),null;case 5:Mo(t),n=Ho(Oo.current);var o=t.type;if(null!==e&&null!=t.stateNode)Ka(e,t,o,r,n),e.ref!==t.ref&&(t.effectTag|=128);else{if(!r){if(null===t.stateNode)throw Error(a(166));return null}if(e=Ho(Uo.current),Fa(t)){r=t.stateNode,o=t.type;var A=t.memoizedProps;switch(r[Cn]=t,r[Qn]=A,o){case\"iframe\":case\"object\":case\"embed\":Vt(\"load\",r);break;case\"video\":case\"audio\":for(e=0;e<Je.length;e++)Vt(Je[e],r);break;case\"source\":Vt(\"error\",r);break;case\"img\":case\"image\":case\"link\":Vt(\"error\",r),Vt(\"load\",r);break;case\"form\":Vt(\"reset\",r),Vt(\"submit\",r);break;case\"details\":Vt(\"toggle\",r);break;case\"input\":ye(r,A),Vt(\"invalid\",r),sn(n,\"onChange\");break;case\"select\":r._wrapperState={wasMultiple:!!A.multiple},Vt(\"invalid\",r),sn(n,\"onChange\");break;case\"textarea\":He(r,A),Vt(\"invalid\",r),sn(n,\"onChange\")}for(var s in on(o,A),e=null,A)if(A.hasOwnProperty(s)){var l=A[s];\"children\"===s?\"string\"===typeof l?r.textContent!==l&&(e=[\"children\",l]):\"number\"===typeof l&&r.textContent!==\"\"+l&&(e=[\"children\",\"\"+l]):C.hasOwnProperty(s)&&null!=l&&sn(n,s)}switch(o){case\"input\":be(r),xe(r,A,!0);break;case\"textarea\":be(r),Ne(r);break;case\"select\":case\"option\":break;default:\"function\"===typeof A.onClick&&(r.onclick=ln)}n=e,t.updateQueue=n,null!==n&&(t.effectTag|=4)}else{switch(s=9===n.nodeType?n:n.ownerDocument,e===An&&(e=Re(o)),e===An?\"script\"===o?((e=s.createElement(\"div\")).innerHTML=\"<script><\\/script>\",e=e.removeChild(e.firstChild)):\"string\"===typeof r.is?e=s.createElement(o,{is:r.is}):(e=s.createElement(o),\"select\"===o&&(s=e,r.multiple?s.multiple=!0:r.size&&(s.size=r.size))):e=s.createElementNS(e,o),e[Cn]=t,e[Qn]=r,Ia(e,t),t.stateNode=e,s=an(o,r),o){case\"iframe\":case\"object\":case\"embed\":Vt(\"load\",e),l=r;break;case\"video\":case\"audio\":for(l=0;l<Je.length;l++)Vt(Je[l],e);l=r;break;case\"source\":Vt(\"error\",e),l=r;break;case\"img\":case\"image\":case\"link\":Vt(\"error\",e),Vt(\"load\",e),l=r;break;case\"form\":Vt(\"reset\",e),Vt(\"submit\",e),l=r;break;case\"details\":Vt(\"toggle\",e),l=r;break;case\"input\":ye(e,r),l=Ee(e,r),Vt(\"invalid\",e),sn(n,\"onChange\");break;case\"option\":l=Ue(e,r);break;case\"select\":e._wrapperState={wasMultiple:!!r.multiple},l=i({},r,{value:void 0}),Vt(\"invalid\",e),sn(n,\"onChange\");break;case\"textarea\":He(e,r),l=Oe(e,r),Vt(\"invalid\",e),sn(n,\"onChange\");break;default:l=r}on(o,l);var u=l;for(A in u)if(u.hasOwnProperty(A)){var c=u[A];\"style\"===A?nn(e,c):\"dangerouslySetInnerHTML\"===A?null!=(c=c?c.__html:void 0)&&ke(e,c):\"children\"===A?\"string\"===typeof c?(\"textarea\"!==o||\"\"!==c)&&Ie(e,c):\"number\"===typeof c&&Ie(e,\"\"+c):\"suppressContentEditableWarning\"!==A&&\"suppressHydrationWarning\"!==A&&\"autoFocus\"!==A&&(C.hasOwnProperty(A)?null!=c&&sn(n,A):null!=c&&q(e,A,c,s))}switch(o){case\"input\":be(e),xe(e,r,!1);break;case\"textarea\":be(e),Ne(e);break;case\"option\":null!=r.value&&e.setAttribute(\"value\",\"\"+Be(r.value));break;case\"select\":e.multiple=!!r.multiple,null!=(n=r.value)?Se(e,!!r.multiple,n,!1):null!=r.defaultValue&&Se(e,!!r.multiple,r.defaultValue,!0);break;default:\"function\"===typeof l.onClick&&(e.onclick=ln)}vn(o,r)&&(t.effectTag|=4)}null!==t.ref&&(t.effectTag|=128)}return null;case 6:if(e&&null!=t.stateNode)La(0,t,e.memoizedProps,r);else{if(\"string\"!==typeof r&&null===t.stateNode)throw Error(a(166));n=Ho(Oo.current),Ho(Uo.current),Fa(t)?(n=t.stateNode,r=t.memoizedProps,n[Cn]=t,n.nodeValue!==r&&(t.effectTag|=4)):((n=(9===n.nodeType?n:n.ownerDocument).createTextNode(r))[Cn]=t,t.stateNode=n)}return null;case 13:return si(Ro),r=t.memoizedState,0!==(64&t.effectTag)?(t.expirationTime=n,t):(n=null!==r,r=!1,null===e?void 0!==t.memoizedProps.fallback&&Fa(t):(r=null!==(o=e.memoizedState),n||null===o||null!==(o=e.child.sibling)&&(null!==(A=t.firstEffect)?(t.firstEffect=o,o.nextEffect=A):(t.firstEffect=t.lastEffect=o,o.nextEffect=null),o.effectTag=8)),n&&!r&&0!==(2&t.mode)&&(null===e&&!0!==t.memoizedProps.unstable_avoidThisFallback||0!==(1&Ro.current)?FA===bA&&(FA=wA):(FA!==bA&&FA!==wA||(FA=EA),0!==TA&&null!==CA&&(Ns(CA,xA),_s(CA,TA)))),(n||r)&&(t.effectTag|=4),null);case 4:return No(),null;case 10:return eo(t),null;case 17:return hi(t.type)&&gi(),null;case 19:if(si(Ro),null===(r=t.memoizedState))return null;if(o=0!==(64&t.effectTag),null===(A=r.rendering)){if(o)Wa(r,!1);else if(FA!==bA||null!==e&&0!==(64&e.effectTag))for(A=t.child;null!==A;){if(null!==(e=Do(A))){for(t.effectTag|=64,Wa(r,!1),null!==(o=e.updateQueue)&&(t.updateQueue=o,t.effectTag|=4),null===r.lastEffect&&(t.firstEffect=null),t.lastEffect=r.lastEffect,r=t.child;null!==r;)A=n,(o=r).effectTag&=2,o.nextEffect=null,o.firstEffect=null,o.lastEffect=null,null===(e=o.alternate)?(o.childExpirationTime=0,o.expirationTime=A,o.child=null,o.memoizedProps=null,o.memoizedState=null,o.updateQueue=null,o.dependencies=null):(o.childExpirationTime=e.childExpirationTime,o.expirationTime=e.expirationTime,o.child=e.child,o.memoizedProps=e.memoizedProps,o.memoizedState=e.memoizedState,o.updateQueue=e.updateQueue,A=e.dependencies,o.dependencies=null===A?null:{expirationTime:A.expirationTime,firstContext:A.firstContext,responders:A.responders}),r=r.sibling;return li(Ro,1&Ro.current|2),t.child}A=A.sibling}}else{if(!o)if(null!==(e=Do(A))){if(t.effectTag|=64,o=!0,null!==(n=e.updateQueue)&&(t.updateQueue=n,t.effectTag|=4),Wa(r,!0),null===r.tail&&\"hidden\"===r.tailMode&&!A.alternate)return null!==(t=t.lastEffect=r.lastEffect)&&(t.nextEffect=null),null}else 2*ki()-r.renderingStartTime>r.tailExpiration&&1<n&&(t.effectTag|=64,o=!0,Wa(r,!1),t.expirationTime=t.childExpirationTime=n-1);r.isBackwards?(A.sibling=t.child,t.child=A):(null!==(n=r.last)?n.sibling=A:t.child=A,r.last=A)}return null!==r.tail?(0===r.tailExpiration&&(r.tailExpiration=ki()+500),n=r.tail,r.rendering=n,r.tail=n.sibling,r.lastEffect=t.lastEffect,r.renderingStartTime=ki(),n.sibling=null,t=Ro.current,li(Ro,o?1&t|2:1&t),n):null}throw Error(a(156,t.tag))}function qa(e){switch(e.tag){case 1:hi(e.type)&&gi();var t=e.effectTag;return 4096&t?(e.effectTag=-4097&t|64,e):null;case 3:if(No(),si(fi),si(ci),0!==(64&(t=e.effectTag)))throw Error(a(285));return e.effectTag=-4097&t|64,e;case 5:return Mo(e),null;case 13:return si(Ro),4096&(t=e.effectTag)?(e.effectTag=-4097&t|64,e):null;case 19:return si(Ro),null;case 4:return No(),null;case 10:return eo(e),null;default:return null}}function Za(e,t){return{value:e,source:t,stack:ve(t)}}Ia=function(e,t){for(var n=t.child;null!==n;){if(5===n.tag||6===n.tag)e.appendChild(n.stateNode);else if(4!==n.tag&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===t)break;for(;null===n.sibling;){if(null===n.return||n.return===t)return;n=n.return}n.sibling.return=n.return,n=n.sibling}},Ka=function(e,t,n,r,o){var a=e.memoizedProps;if(a!==r){var A,s,l=t.stateNode;switch(Ho(Uo.current),e=null,n){case\"input\":a=Ee(l,a),r=Ee(l,r),e=[];break;case\"option\":a=Ue(l,a),r=Ue(l,r),e=[];break;case\"select\":a=i({},a,{value:void 0}),r=i({},r,{value:void 0}),e=[];break;case\"textarea\":a=Oe(l,a),r=Oe(l,r),e=[];break;default:\"function\"!==typeof a.onClick&&\"function\"===typeof r.onClick&&(l.onclick=ln)}for(A in on(n,r),n=null,a)if(!r.hasOwnProperty(A)&&a.hasOwnProperty(A)&&null!=a[A])if(\"style\"===A)for(s in l=a[A])l.hasOwnProperty(s)&&(n||(n={}),n[s]=\"\");else\"dangerouslySetInnerHTML\"!==A&&\"children\"!==A&&\"suppressContentEditableWarning\"!==A&&\"suppressHydrationWarning\"!==A&&\"autoFocus\"!==A&&(C.hasOwnProperty(A)?e||(e=[]):(e=e||[]).push(A,null));for(A in r){var u=r[A];if(l=null!=a?a[A]:void 0,r.hasOwnProperty(A)&&u!==l&&(null!=u||null!=l))if(\"style\"===A)if(l){for(s in l)!l.hasOwnProperty(s)||u&&u.hasOwnProperty(s)||(n||(n={}),n[s]=\"\");for(s in u)u.hasOwnProperty(s)&&l[s]!==u[s]&&(n||(n={}),n[s]=u[s])}else n||(e||(e=[]),e.push(A,n)),n=u;else\"dangerouslySetInnerHTML\"===A?(u=u?u.__html:void 0,l=l?l.__html:void 0,null!=u&&l!==u&&(e=e||[]).push(A,u)):\"children\"===A?l===u||\"string\"!==typeof u&&\"number\"!==typeof u||(e=e||[]).push(A,\"\"+u):\"suppressContentEditableWarning\"!==A&&\"suppressHydrationWarning\"!==A&&(C.hasOwnProperty(A)?(null!=u&&sn(o,A),e||l===u||(e=[])):(e=e||[]).push(A,u))}n&&(e=e||[]).push(\"style\",n),o=e,(t.updateQueue=o)&&(t.effectTag|=4)}},La=function(e,t,n,r){n!==r&&(t.effectTag|=4)};var $a=\"function\"===typeof WeakSet?WeakSet:Set;function eA(e,t){var n=t.source,r=t.stack;null===r&&null!==n&&(r=ve(n)),null!==n&&ge(n.type),t=t.value,null!==e&&1===e.tag&&ge(e.type);try{console.error(t)}catch(i){setTimeout((function(){throw i}))}}function tA(e){var t=e.ref;if(null!==t)if(\"function\"===typeof t)try{t(null)}catch(n){Bs(e,n)}else t.current=null}function nA(e,t){switch(t.tag){case 0:case 11:case 15:case 22:return;case 1:if(256&t.effectTag&&null!==e){var n=e.memoizedProps,r=e.memoizedState;t=(e=t.stateNode).getSnapshotBeforeUpdate(t.elementType===t.type?n:Yi(t.type,n),r),e.__reactInternalSnapshotBeforeUpdate=t}return;case 3:case 5:case 6:case 4:case 17:return}throw Error(a(163))}function rA(e,t){if(null!==(t=null!==(t=t.updateQueue)?t.lastEffect:null)){var n=t=t.next;do{if((n.tag&e)===e){var r=n.destroy;n.destroy=void 0,void 0!==r&&r()}n=n.next}while(n!==t)}}function iA(e,t){if(null!==(t=null!==(t=t.updateQueue)?t.lastEffect:null)){var n=t=t.next;do{if((n.tag&e)===e){var r=n.create;n.destroy=r()}n=n.next}while(n!==t)}}function oA(e,t,n){switch(n.tag){case 0:case 11:case 15:case 22:return void iA(3,n);case 1:if(e=n.stateNode,4&n.effectTag)if(null===t)e.componentDidMount();else{var r=n.elementType===n.type?t.memoizedProps:Yi(n.type,t.memoizedProps);e.componentDidUpdate(r,t.memoizedState,e.__reactInternalSnapshotBeforeUpdate)}return void(null!==(t=n.updateQueue)&&co(n,t,e));case 3:if(null!==(t=n.updateQueue)){if(e=null,null!==n.child)switch(n.child.tag){case 5:e=n.child.stateNode;break;case 1:e=n.child.stateNode}co(n,t,e)}return;case 5:return e=n.stateNode,void(null===t&&4&n.effectTag&&vn(n.type,n.memoizedProps)&&e.focus());case 6:case 4:case 12:return;case 13:return void(null===n.memoizedState&&(n=n.alternate,null!==n&&(n=n.memoizedState,null!==n&&(n=n.dehydrated,null!==n&&Rt(n)))));case 19:case 17:case 20:case 21:return}throw Error(a(163))}function aA(e,t,n){switch(\"function\"===typeof Es&&Es(t),t.tag){case 0:case 11:case 14:case 15:case 22:if(null!==(e=t.updateQueue)&&null!==(e=e.lastEffect)){var r=e.next;Li(97<n?97:n,(function(){var e=r;do{var n=e.destroy;if(void 0!==n){var i=t;try{n()}catch(o){Bs(i,o)}}e=e.next}while(e!==r)}))}break;case 1:tA(t),\"function\"===typeof(n=t.stateNode).componentWillUnmount&&function(e,t){try{t.props=e.memoizedProps,t.state=e.memoizedState,t.componentWillUnmount()}catch(n){Bs(e,n)}}(t,n);break;case 5:tA(t);break;case 4:uA(e,t,n)}}function AA(e){var t=e.alternate;e.return=null,e.child=null,e.memoizedState=null,e.updateQueue=null,e.dependencies=null,e.alternate=null,e.firstEffect=null,e.lastEffect=null,e.pendingProps=null,e.memoizedProps=null,e.stateNode=null,null!==t&&AA(t)}function sA(e){return 5===e.tag||3===e.tag||4===e.tag}function lA(e){e:{for(var t=e.return;null!==t;){if(sA(t)){var n=t;break e}t=t.return}throw Error(a(160))}switch(t=n.stateNode,n.tag){case 5:var r=!1;break;case 3:case 4:t=t.containerInfo,r=!0;break;default:throw Error(a(161))}16&n.effectTag&&(Ie(t,\"\"),n.effectTag&=-17);e:t:for(n=e;;){for(;null===n.sibling;){if(null===n.return||sA(n.return)){n=null;break e}n=n.return}for(n.sibling.return=n.return,n=n.sibling;5!==n.tag&&6!==n.tag&&18!==n.tag;){if(2&n.effectTag)continue t;if(null===n.child||4===n.tag)continue t;n.child.return=n,n=n.child}if(!(2&n.effectTag)){n=n.stateNode;break e}}r?function e(t,n,r){var i=t.tag,o=5===i||6===i;if(o)t=o?t.stateNode:t.stateNode.instance,n?8===r.nodeType?r.parentNode.insertBefore(t,n):r.insertBefore(t,n):(8===r.nodeType?(n=r.parentNode).insertBefore(t,r):(n=r).appendChild(t),null!==(r=r._reactRootContainer)&&void 0!==r||null!==n.onclick||(n.onclick=ln));else if(4!==i&&null!==(t=t.child))for(e(t,n,r),t=t.sibling;null!==t;)e(t,n,r),t=t.sibling}(e,n,t):function e(t,n,r){var i=t.tag,o=5===i||6===i;if(o)t=o?t.stateNode:t.stateNode.instance,n?r.insertBefore(t,n):r.appendChild(t);else if(4!==i&&null!==(t=t.child))for(e(t,n,r),t=t.sibling;null!==t;)e(t,n,r),t=t.sibling}(e,n,t)}function uA(e,t,n){for(var r,i,o=t,A=!1;;){if(!A){A=o.return;e:for(;;){if(null===A)throw Error(a(160));switch(r=A.stateNode,A.tag){case 5:i=!1;break e;case 3:case 4:r=r.containerInfo,i=!0;break e}A=A.return}A=!0}if(5===o.tag||6===o.tag){e:for(var s=e,l=o,u=n,c=l;;)if(aA(s,c,u),null!==c.child&&4!==c.tag)c.child.return=c,c=c.child;else{if(c===l)break e;for(;null===c.sibling;){if(null===c.return||c.return===l)break e;c=c.return}c.sibling.return=c.return,c=c.sibling}i?(s=r,l=o.stateNode,8===s.nodeType?s.parentNode.removeChild(l):s.removeChild(l)):r.removeChild(o.stateNode)}else if(4===o.tag){if(null!==o.child){r=o.stateNode.containerInfo,i=!0,o.child.return=o,o=o.child;continue}}else if(aA(e,o,n),null!==o.child){o.child.return=o,o=o.child;continue}if(o===t)break;for(;null===o.sibling;){if(null===o.return||o.return===t)return;4===(o=o.return).tag&&(A=!1)}o.sibling.return=o.return,o=o.sibling}}function cA(e,t){switch(t.tag){case 0:case 11:case 14:case 15:case 22:return void rA(3,t);case 1:return;case 5:var n=t.stateNode;if(null!=n){var r=t.memoizedProps,i=null!==e?e.memoizedProps:r;e=t.type;var o=t.updateQueue;if(t.updateQueue=null,null!==o){for(n[Qn]=r,\"input\"===e&&\"radio\"===r.type&&null!=r.name&&Ce(n,r),an(e,i),t=an(e,r),i=0;i<o.length;i+=2){var A=o[i],s=o[i+1];\"style\"===A?nn(n,s):\"dangerouslySetInnerHTML\"===A?ke(n,s):\"children\"===A?Ie(n,s):q(n,A,s,t)}switch(e){case\"input\":Qe(n,r);break;case\"textarea\":Te(n,r);break;case\"select\":t=n._wrapperState.wasMultiple,n._wrapperState.wasMultiple=!!r.multiple,null!=(e=r.value)?Se(n,!!r.multiple,e,!1):t!==!!r.multiple&&(null!=r.defaultValue?Se(n,!!r.multiple,r.defaultValue,!0):Se(n,!!r.multiple,r.multiple?[]:\"\",!1))}}}return;case 6:if(null===t.stateNode)throw Error(a(162));return void(t.stateNode.nodeValue=t.memoizedProps);case 3:return void((t=t.stateNode).hydrate&&(t.hydrate=!1,Rt(t.containerInfo)));case 12:return;case 13:if(n=t,null===t.memoizedState?r=!1:(r=!0,n=t.child,_A=ki()),null!==n)e:for(e=n;;){if(5===e.tag)o=e.stateNode,r?\"function\"===typeof(o=o.style).setProperty?o.setProperty(\"display\",\"none\",\"important\"):o.display=\"none\":(o=e.stateNode,i=void 0!==(i=e.memoizedProps.style)&&null!==i&&i.hasOwnProperty(\"display\")?i.display:null,o.style.display=tn(\"display\",i));else if(6===e.tag)e.stateNode.nodeValue=r?\"\":e.memoizedProps;else{if(13===e.tag&&null!==e.memoizedState&&null===e.memoizedState.dehydrated){(o=e.child.sibling).return=e,e=o;continue}if(null!==e.child){e.child.return=e,e=e.child;continue}}if(e===n)break;for(;null===e.sibling;){if(null===e.return||e.return===n)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}return void fA(t);case 19:return void fA(t);case 17:return}throw Error(a(163))}function fA(e){var t=e.updateQueue;if(null!==t){e.updateQueue=null;var n=e.stateNode;null===n&&(n=e.stateNode=new $a),t.forEach((function(t){var r=bs.bind(null,e,t);n.has(t)||(n.add(t),t.then(r,r))}))}}var dA=\"function\"===typeof WeakMap?WeakMap:Map;function pA(e,t,n){(n=Ao(n,null)).tag=3,n.payload={element:null};var r=t.value;return n.callback=function(){RA||(RA=!0,DA=r),eA(e,t)},n}function hA(e,t,n){(n=Ao(n,null)).tag=3;var r=e.type.getDerivedStateFromError;if(\"function\"===typeof r){var i=t.value;n.payload=function(){return eA(e,t),r(i)}}var o=e.stateNode;return null!==o&&\"function\"===typeof o.componentDidCatch&&(n.callback=function(){\"function\"!==typeof r&&(null===PA?PA=new Set([this]):PA.add(this),eA(e,t));var n=t.stack;this.componentDidCatch(t.value,{componentStack:null!==n?n:\"\"})}),n}var gA,vA=Math.ceil,BA=J.ReactCurrentDispatcher,mA=J.ReactCurrentOwner,bA=0,wA=3,EA=4,yA=0,CA=null,QA=null,xA=0,FA=bA,UA=null,SA=1073741823,OA=1073741823,HA=null,TA=0,NA=!1,_A=0,MA=null,RA=!1,DA=null,PA=null,kA=!1,IA=null,KA=90,LA=null,zA=0,jA=null,XA=0;function GA(){return 0!==(48&yA)?1073741821-(ki()/10|0):0!==XA?XA:XA=1073741821-(ki()/10|0)}function VA(e,t,n){if(0===(2&(t=t.mode)))return 1073741823;var r=Ii();if(0===(4&t))return 99===r?1073741823:1073741822;if(0!==(16&yA))return xA;if(null!==n)e=Vi(e,0|n.timeoutMs||5e3,250);else switch(r){case 99:e=1073741823;break;case 98:e=Vi(e,150,100);break;case 97:case 96:e=Vi(e,5e3,250);break;case 95:e=2;break;default:throw Error(a(326))}return null!==CA&&e===xA&&--e,e}function YA(e,t){if(50<zA)throw zA=0,jA=null,Error(a(185));if(null!==(e=WA(e,t))){var n=Ii();1073741823===t?0!==(8&yA)&&0===(48&yA)?$A(e):(qA(e),0===yA&&Xi()):qA(e),0===(4&yA)||98!==n&&99!==n||(null===LA?LA=new Map([[e,t]]):(void 0===(n=LA.get(e))||n>t)&&LA.set(e,t))}}function WA(e,t){e.expirationTime<t&&(e.expirationTime=t);var n=e.alternate;null!==n&&n.expirationTime<t&&(n.expirationTime=t);var r=e.return,i=null;if(null===r&&3===e.tag)i=e.stateNode;else for(;null!==r;){if(n=r.alternate,r.childExpirationTime<t&&(r.childExpirationTime=t),null!==n&&n.childExpirationTime<t&&(n.childExpirationTime=t),null===r.return&&3===r.tag){i=r.stateNode;break}r=r.return}return null!==i&&(CA===i&&(as(t),FA===EA&&Ns(i,xA)),_s(i,t)),i}function JA(e){var t=e.lastExpiredTime;if(0!==t)return t;if(!Ts(e,t=e.firstPendingTime))return t;var n=e.lastPingedTime;return 2>=(e=n>(e=e.nextKnownPendingLevel)?n:e)&&t!==e?0:e}function qA(e){if(0!==e.lastExpiredTime)e.callbackExpirationTime=1073741823,e.callbackPriority=99,e.callbackNode=ji($A.bind(null,e));else{var t=JA(e),n=e.callbackNode;if(0===t)null!==n&&(e.callbackNode=null,e.callbackExpirationTime=0,e.callbackPriority=90);else{var r=GA();if(1073741823===t?r=99:1===t||2===t?r=95:r=0>=(r=10*(1073741821-t)-10*(1073741821-r))?99:250>=r?98:5250>=r?97:95,null!==n){var i=e.callbackPriority;if(e.callbackExpirationTime===t&&i>=r)return;n!==Ti&&yi(n)}e.callbackExpirationTime=t,e.callbackPriority=r,t=1073741823===t?ji($A.bind(null,e)):zi(r,ZA.bind(null,e),{timeout:10*(1073741821-t)-ki()}),e.callbackNode=t}}}function ZA(e,t){if(XA=0,t)return Ms(e,t=GA()),qA(e),null;var n=JA(e);if(0!==n){if(t=e.callbackNode,0!==(48&yA))throw Error(a(327));if(hs(),e===CA&&n===xA||ns(e,n),null!==QA){var r=yA;yA|=16;for(var i=is();;)try{ss();break}catch(s){rs(e,s)}if($i(),yA=r,BA.current=i,1===FA)throw t=UA,ns(e,n),Ns(e,n),qA(e),t;if(null===QA)switch(i=e.finishedWork=e.current.alternate,e.finishedExpirationTime=n,r=FA,CA=null,r){case bA:case 1:throw Error(a(345));case 2:Ms(e,2<n?2:n);break;case wA:if(Ns(e,n),n===(r=e.lastSuspendedTime)&&(e.nextKnownPendingLevel=cs(i)),1073741823===SA&&10<(i=_A+500-ki())){if(NA){var o=e.lastPingedTime;if(0===o||o>=n){e.lastPingedTime=n,ns(e,n);break}}if(0!==(o=JA(e))&&o!==n)break;if(0!==r&&r!==n){e.lastPingedTime=r;break}e.timeoutHandle=mn(fs.bind(null,e),i);break}fs(e);break;case EA:if(Ns(e,n),n===(r=e.lastSuspendedTime)&&(e.nextKnownPendingLevel=cs(i)),NA&&(0===(i=e.lastPingedTime)||i>=n)){e.lastPingedTime=n,ns(e,n);break}if(0!==(i=JA(e))&&i!==n)break;if(0!==r&&r!==n){e.lastPingedTime=r;break}if(1073741823!==OA?r=10*(1073741821-OA)-ki():1073741823===SA?r=0:(r=10*(1073741821-SA)-5e3,0>(r=(i=ki())-r)&&(r=0),(n=10*(1073741821-n)-i)<(r=(120>r?120:480>r?480:1080>r?1080:1920>r?1920:3e3>r?3e3:4320>r?4320:1960*vA(r/1960))-r)&&(r=n)),10<r){e.timeoutHandle=mn(fs.bind(null,e),r);break}fs(e);break;case 5:if(1073741823!==SA&&null!==HA){o=SA;var A=HA;if(0>=(r=0|A.busyMinDurationMs)?r=0:(i=0|A.busyDelayMs,r=(o=ki()-(10*(1073741821-o)-(0|A.timeoutMs||5e3)))<=i?0:i+r-o),10<r){Ns(e,n),e.timeoutHandle=mn(fs.bind(null,e),r);break}}fs(e);break;default:throw Error(a(329))}if(qA(e),e.callbackNode===t)return ZA.bind(null,e)}}return null}function $A(e){var t=e.lastExpiredTime;if(t=0!==t?t:1073741823,0!==(48&yA))throw Error(a(327));if(hs(),e===CA&&t===xA||ns(e,t),null!==QA){var n=yA;yA|=16;for(var r=is();;)try{As();break}catch(i){rs(e,i)}if($i(),yA=n,BA.current=r,1===FA)throw n=UA,ns(e,t),Ns(e,t),qA(e),n;if(null!==QA)throw Error(a(261));e.finishedWork=e.current.alternate,e.finishedExpirationTime=t,CA=null,fs(e),qA(e)}return null}function es(e,t){var n=yA;yA|=1;try{return e(t)}finally{0===(yA=n)&&Xi()}}function ts(e,t){var n=yA;yA&=-2,yA|=8;try{return e(t)}finally{0===(yA=n)&&Xi()}}function ns(e,t){e.finishedWork=null,e.finishedExpirationTime=0;var n=e.timeoutHandle;if(-1!==n&&(e.timeoutHandle=-1,bn(n)),null!==QA)for(n=QA.return;null!==n;){var r=n;switch(r.tag){case 1:null!==(r=r.type.childContextTypes)&&void 0!==r&&gi();break;case 3:No(),si(fi),si(ci);break;case 5:Mo(r);break;case 4:No();break;case 13:case 19:si(Ro);break;case 10:eo(r)}n=n.return}CA=e,QA=xs(e.current,null),xA=t,FA=bA,UA=null,OA=SA=1073741823,HA=null,TA=0,NA=!1}function rs(e,t){for(;;){try{if($i(),ko.current=ga,Xo)for(var n=Lo.memoizedState;null!==n;){var r=n.queue;null!==r&&(r.pending=null),n=n.next}if(Ko=0,jo=zo=Lo=null,Xo=!1,null===QA||null===QA.return)return FA=1,UA=t,QA=null;e:{var i=e,o=QA.return,a=QA,A=t;if(t=xA,a.effectTag|=2048,a.firstEffect=a.lastEffect=null,null!==A&&\"object\"===typeof A&&\"function\"===typeof A.then){var s=A;if(0===(2&a.mode)){var l=a.alternate;l?(a.updateQueue=l.updateQueue,a.memoizedState=l.memoizedState,a.expirationTime=l.expirationTime):(a.updateQueue=null,a.memoizedState=null)}var u=0!==(1&Ro.current),c=o;do{var f;if(f=13===c.tag){var d=c.memoizedState;if(null!==d)f=null!==d.dehydrated;else{var p=c.memoizedProps;f=void 0!==p.fallback&&(!0!==p.unstable_avoidThisFallback||!u)}}if(f){var h=c.updateQueue;if(null===h){var g=new Set;g.add(s),c.updateQueue=g}else h.add(s);if(0===(2&c.mode)){if(c.effectTag|=64,a.effectTag&=-2981,1===a.tag)if(null===a.alternate)a.tag=17;else{var v=Ao(1073741823,null);v.tag=2,so(a,v)}a.expirationTime=1073741823;break e}A=void 0,a=t;var B=i.pingCache;if(null===B?(B=i.pingCache=new dA,A=new Set,B.set(s,A)):void 0===(A=B.get(s))&&(A=new Set,B.set(s,A)),!A.has(a)){A.add(a);var m=ms.bind(null,i,s,a);s.then(m,m)}c.effectTag|=4096,c.expirationTime=t;break e}c=c.return}while(null!==c);A=Error((ge(a.type)||\"A React component\")+\" suspended while rendering, but no fallback UI was specified.\\n\\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.\"+ve(a))}5!==FA&&(FA=2),A=Za(A,a),c=o;do{switch(c.tag){case 3:s=A,c.effectTag|=4096,c.expirationTime=t,lo(c,pA(c,s,t));break e;case 1:s=A;var b=c.type,w=c.stateNode;if(0===(64&c.effectTag)&&(\"function\"===typeof b.getDerivedStateFromError||null!==w&&\"function\"===typeof w.componentDidCatch&&(null===PA||!PA.has(w)))){c.effectTag|=4096,c.expirationTime=t,lo(c,hA(c,s,t));break e}}c=c.return}while(null!==c)}QA=us(QA)}catch(E){t=E;continue}break}}function is(){var e=BA.current;return BA.current=ga,null===e?ga:e}function os(e,t){e<SA&&2<e&&(SA=e),null!==t&&e<OA&&2<e&&(OA=e,HA=t)}function as(e){e>TA&&(TA=e)}function As(){for(;null!==QA;)QA=ls(QA)}function ss(){for(;null!==QA&&!Ni();)QA=ls(QA)}function ls(e){var t=gA(e.alternate,e,xA);return e.memoizedProps=e.pendingProps,null===t&&(t=us(e)),mA.current=null,t}function us(e){QA=e;do{var t=QA.alternate;if(e=QA.return,0===(2048&QA.effectTag)){if(t=Ja(t,QA,xA),1===xA||1!==QA.childExpirationTime){for(var n=0,r=QA.child;null!==r;){var i=r.expirationTime,o=r.childExpirationTime;i>n&&(n=i),o>n&&(n=o),r=r.sibling}QA.childExpirationTime=n}if(null!==t)return t;null!==e&&0===(2048&e.effectTag)&&(null===e.firstEffect&&(e.firstEffect=QA.firstEffect),null!==QA.lastEffect&&(null!==e.lastEffect&&(e.lastEffect.nextEffect=QA.firstEffect),e.lastEffect=QA.lastEffect),1<QA.effectTag&&(null!==e.lastEffect?e.lastEffect.nextEffect=QA:e.firstEffect=QA,e.lastEffect=QA))}else{if(null!==(t=qa(QA)))return t.effectTag&=2047,t;null!==e&&(e.firstEffect=e.lastEffect=null,e.effectTag|=2048)}if(null!==(t=QA.sibling))return t;QA=e}while(null!==QA);return FA===bA&&(FA=5),null}function cs(e){var t=e.expirationTime;return t>(e=e.childExpirationTime)?t:e}function fs(e){var t=Ii();return Li(99,ds.bind(null,e,t)),null}function ds(e,t){do{hs()}while(null!==IA);if(0!==(48&yA))throw Error(a(327));var n=e.finishedWork,r=e.finishedExpirationTime;if(null===n)return null;if(e.finishedWork=null,e.finishedExpirationTime=0,n===e.current)throw Error(a(177));e.callbackNode=null,e.callbackExpirationTime=0,e.callbackPriority=90,e.nextKnownPendingLevel=0;var i=cs(n);if(e.firstPendingTime=i,r<=e.lastSuspendedTime?e.firstSuspendedTime=e.lastSuspendedTime=e.nextKnownPendingLevel=0:r<=e.firstSuspendedTime&&(e.firstSuspendedTime=r-1),r<=e.lastPingedTime&&(e.lastPingedTime=0),r<=e.lastExpiredTime&&(e.lastExpiredTime=0),e===CA&&(QA=CA=null,xA=0),1<n.effectTag?null!==n.lastEffect?(n.lastEffect.nextEffect=n,i=n.firstEffect):i=n:i=n.firstEffect,null!==i){var o=yA;yA|=32,mA.current=null,hn=Gt;var A=dn();if(pn(A)){if(\"selectionStart\"in A)var s={start:A.selectionStart,end:A.selectionEnd};else e:{var l=(s=(s=A.ownerDocument)&&s.defaultView||window).getSelection&&s.getSelection();if(l&&0!==l.rangeCount){s=l.anchorNode;var u=l.anchorOffset,c=l.focusNode;l=l.focusOffset;try{s.nodeType,c.nodeType}catch(x){s=null;break e}var f=0,d=-1,p=-1,h=0,g=0,v=A,B=null;t:for(;;){for(var m;v!==s||0!==u&&3!==v.nodeType||(d=f+u),v!==c||0!==l&&3!==v.nodeType||(p=f+l),3===v.nodeType&&(f+=v.nodeValue.length),null!==(m=v.firstChild);)B=v,v=m;for(;;){if(v===A)break t;if(B===s&&++h===u&&(d=f),B===c&&++g===l&&(p=f),null!==(m=v.nextSibling))break;B=(v=B).parentNode}v=m}s=-1===d||-1===p?null:{start:d,end:p}}else s=null}s=s||{start:0,end:0}}else s=null;gn={activeElementDetached:null,focusedElem:A,selectionRange:s},Gt=!1,MA=i;do{try{ps()}catch(x){if(null===MA)throw Error(a(330));Bs(MA,x),MA=MA.nextEffect}}while(null!==MA);MA=i;do{try{for(A=e,s=t;null!==MA;){var b=MA.effectTag;if(16&b&&Ie(MA.stateNode,\"\"),128&b){var w=MA.alternate;if(null!==w){var E=w.ref;null!==E&&(\"function\"===typeof E?E(null):E.current=null)}}switch(1038&b){case 2:lA(MA),MA.effectTag&=-3;break;case 6:lA(MA),MA.effectTag&=-3,cA(MA.alternate,MA);break;case 1024:MA.effectTag&=-1025;break;case 1028:MA.effectTag&=-1025,cA(MA.alternate,MA);break;case 4:cA(MA.alternate,MA);break;case 8:uA(A,u=MA,s),AA(u)}MA=MA.nextEffect}}catch(x){if(null===MA)throw Error(a(330));Bs(MA,x),MA=MA.nextEffect}}while(null!==MA);if(E=gn,w=dn(),b=E.focusedElem,s=E.selectionRange,w!==b&&b&&b.ownerDocument&&function e(t,n){return!(!t||!n)&&(t===n||(!t||3!==t.nodeType)&&(n&&3===n.nodeType?e(t,n.parentNode):\"contains\"in t?t.contains(n):!!t.compareDocumentPosition&&!!(16&t.compareDocumentPosition(n))))}(b.ownerDocument.documentElement,b)){null!==s&&pn(b)&&(w=s.start,void 0===(E=s.end)&&(E=w),\"selectionStart\"in b?(b.selectionStart=w,b.selectionEnd=Math.min(E,b.value.length)):(E=(w=b.ownerDocument||document)&&w.defaultView||window).getSelection&&(E=E.getSelection(),u=b.textContent.length,A=Math.min(s.start,u),s=void 0===s.end?A:Math.min(s.end,u),!E.extend&&A>s&&(u=s,s=A,A=u),u=fn(b,A),c=fn(b,s),u&&c&&(1!==E.rangeCount||E.anchorNode!==u.node||E.anchorOffset!==u.offset||E.focusNode!==c.node||E.focusOffset!==c.offset)&&((w=w.createRange()).setStart(u.node,u.offset),E.removeAllRanges(),A>s?(E.addRange(w),E.extend(c.node,c.offset)):(w.setEnd(c.node,c.offset),E.addRange(w))))),w=[];for(E=b;E=E.parentNode;)1===E.nodeType&&w.push({element:E,left:E.scrollLeft,top:E.scrollTop});for(\"function\"===typeof b.focus&&b.focus(),b=0;b<w.length;b++)(E=w[b]).element.scrollLeft=E.left,E.element.scrollTop=E.top}Gt=!!hn,gn=hn=null,e.current=n,MA=i;do{try{for(b=e;null!==MA;){var y=MA.effectTag;if(36&y&&oA(b,MA.alternate,MA),128&y){w=void 0;var C=MA.ref;if(null!==C){var Q=MA.stateNode;switch(MA.tag){case 5:w=Q;break;default:w=Q}\"function\"===typeof C?C(w):C.current=w}}MA=MA.nextEffect}}catch(x){if(null===MA)throw Error(a(330));Bs(MA,x),MA=MA.nextEffect}}while(null!==MA);MA=null,_i(),yA=o}else e.current=n;if(kA)kA=!1,IA=e,KA=t;else for(MA=i;null!==MA;)t=MA.nextEffect,MA.nextEffect=null,MA=t;if(0===(t=e.firstPendingTime)&&(PA=null),1073741823===t?e===jA?zA++:(zA=0,jA=e):zA=0,\"function\"===typeof ws&&ws(n.stateNode,r),qA(e),RA)throw RA=!1,e=DA,DA=null,e;return 0!==(8&yA)||Xi(),null}function ps(){for(;null!==MA;){var e=MA.effectTag;0!==(256&e)&&nA(MA.alternate,MA),0===(512&e)||kA||(kA=!0,zi(97,(function(){return hs(),null}))),MA=MA.nextEffect}}function hs(){if(90!==KA){var e=97<KA?97:KA;return KA=90,Li(e,gs)}}function gs(){if(null===IA)return!1;var e=IA;if(IA=null,0!==(48&yA))throw Error(a(331));var t=yA;for(yA|=32,e=e.current.firstEffect;null!==e;){try{var n=e;if(0!==(512&n.effectTag))switch(n.tag){case 0:case 11:case 15:case 22:rA(5,n),iA(5,n)}}catch(r){if(null===e)throw Error(a(330));Bs(e,r)}n=e.nextEffect,e.nextEffect=null,e=n}return yA=t,Xi(),!0}function vs(e,t,n){so(e,t=pA(e,t=Za(n,t),1073741823)),null!==(e=WA(e,1073741823))&&qA(e)}function Bs(e,t){if(3===e.tag)vs(e,e,t);else for(var n=e.return;null!==n;){if(3===n.tag){vs(n,e,t);break}if(1===n.tag){var r=n.stateNode;if(\"function\"===typeof n.type.getDerivedStateFromError||\"function\"===typeof r.componentDidCatch&&(null===PA||!PA.has(r))){so(n,e=hA(n,e=Za(t,e),1073741823)),null!==(n=WA(n,1073741823))&&qA(n);break}}n=n.return}}function ms(e,t,n){var r=e.pingCache;null!==r&&r.delete(t),CA===e&&xA===n?FA===EA||FA===wA&&1073741823===SA&&ki()-_A<500?ns(e,xA):NA=!0:Ts(e,n)&&(0!==(t=e.lastPingedTime)&&t<n||(e.lastPingedTime=n,qA(e)))}function bs(e,t){var n=e.stateNode;null!==n&&n.delete(t),0===(t=0)&&(t=VA(t=GA(),e,null)),null!==(e=WA(e,t))&&qA(e)}gA=function(e,t,n){var r=t.expirationTime;if(null!==e){var i=t.pendingProps;if(e.memoizedProps!==i||fi.current)Oa=!0;else{if(r<n){switch(Oa=!1,t.tag){case 3:ka(t),Ua();break;case 5:if(_o(t),4&t.mode&&1!==n&&i.hidden)return t.expirationTime=t.childExpirationTime=1,null;break;case 1:hi(t.type)&&mi(t);break;case 4:To(t,t.stateNode.containerInfo);break;case 10:r=t.memoizedProps.value,i=t.type._context,li(Wi,i._currentValue),i._currentValue=r;break;case 13:if(null!==t.memoizedState)return 0!==(r=t.child.childExpirationTime)&&r>=n?ja(e,t,n):(li(Ro,1&Ro.current),null!==(t=Ya(e,t,n))?t.sibling:null);li(Ro,1&Ro.current);break;case 19:if(r=t.childExpirationTime>=n,0!==(64&e.effectTag)){if(r)return Va(e,t,n);t.effectTag|=64}if(null!==(i=t.memoizedState)&&(i.rendering=null,i.tail=null),li(Ro,Ro.current),!r)return null}return Ya(e,t,n)}Oa=!1}}else Oa=!1;switch(t.expirationTime=0,t.tag){case 2:if(r=t.type,null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),e=t.pendingProps,i=pi(t,ci.current),no(t,n),i=Yo(null,t,r,e,i,n),t.effectTag|=1,\"object\"===typeof i&&null!==i&&\"function\"===typeof i.render&&void 0===i.$$typeof){if(t.tag=1,t.memoizedState=null,t.updateQueue=null,hi(r)){var o=!0;mi(t)}else o=!1;t.memoizedState=null!==i.state&&void 0!==i.state?i.state:null,oo(t);var A=r.getDerivedStateFromProps;\"function\"===typeof A&&ho(t,r,A,e),i.updater=go,t.stateNode=i,i._reactInternalFiber=t,bo(t,r,e,n),t=Pa(null,t,r,!0,o,n)}else t.tag=0,Ha(null,t,i,n),t=t.child;return t;case 16:e:{if(i=t.elementType,null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),e=t.pendingProps,function(e){if(-1===e._status){e._status=0;var t=e._ctor;t=t(),e._result=t,t.then((function(t){0===e._status&&(t=t.default,e._status=1,e._result=t)}),(function(t){0===e._status&&(e._status=2,e._result=t)}))}}(i),1!==i._status)throw i._result;switch(i=i._result,t.type=i,o=t.tag=function(e){if(\"function\"===typeof e)return Qs(e)?1:0;if(void 0!==e&&null!==e){if((e=e.$$typeof)===se)return 11;if(e===ce)return 14}return 2}(i),e=Yi(i,e),o){case 0:t=Ra(null,t,i,e,n);break e;case 1:t=Da(null,t,i,e,n);break e;case 11:t=Ta(null,t,i,e,n);break e;case 14:t=Na(null,t,i,Yi(i.type,e),r,n);break e}throw Error(a(306,i,\"\"))}return t;case 0:return r=t.type,i=t.pendingProps,Ra(e,t,r,i=t.elementType===r?i:Yi(r,i),n);case 1:return r=t.type,i=t.pendingProps,Da(e,t,r,i=t.elementType===r?i:Yi(r,i),n);case 3:if(ka(t),r=t.updateQueue,null===e||null===r)throw Error(a(282));if(r=t.pendingProps,i=null!==(i=t.memoizedState)?i.element:null,ao(e,t),uo(t,r,null,n),(r=t.memoizedState.element)===i)Ua(),t=Ya(e,t,n);else{if((i=t.stateNode.hydrate)&&(wa=wn(t.stateNode.containerInfo.firstChild),ba=t,i=Ea=!0),i)for(n=xo(t,null,r,n),t.child=n;n;)n.effectTag=-3&n.effectTag|1024,n=n.sibling;else Ha(e,t,r,n),Ua();t=t.child}return t;case 5:return _o(t),null===e&&Qa(t),r=t.type,i=t.pendingProps,o=null!==e?e.memoizedProps:null,A=i.children,Bn(r,i)?A=null:null!==o&&Bn(r,o)&&(t.effectTag|=16),Ma(e,t),4&t.mode&&1!==n&&i.hidden?(t.expirationTime=t.childExpirationTime=1,t=null):(Ha(e,t,A,n),t=t.child),t;case 6:return null===e&&Qa(t),null;case 13:return ja(e,t,n);case 4:return To(t,t.stateNode.containerInfo),r=t.pendingProps,null===e?t.child=Qo(t,null,r,n):Ha(e,t,r,n),t.child;case 11:return r=t.type,i=t.pendingProps,Ta(e,t,r,i=t.elementType===r?i:Yi(r,i),n);case 7:return Ha(e,t,t.pendingProps,n),t.child;case 8:case 12:return Ha(e,t,t.pendingProps.children,n),t.child;case 10:e:{r=t.type._context,i=t.pendingProps,A=t.memoizedProps,o=i.value;var s=t.type._context;if(li(Wi,s._currentValue),s._currentValue=o,null!==A)if(s=A.value,0===(o=Dr(s,o)?0:0|(\"function\"===typeof r._calculateChangedBits?r._calculateChangedBits(s,o):1073741823))){if(A.children===i.children&&!fi.current){t=Ya(e,t,n);break e}}else for(null!==(s=t.child)&&(s.return=t);null!==s;){var l=s.dependencies;if(null!==l){A=s.child;for(var u=l.firstContext;null!==u;){if(u.context===r&&0!==(u.observedBits&o)){1===s.tag&&((u=Ao(n,null)).tag=2,so(s,u)),s.expirationTime<n&&(s.expirationTime=n),null!==(u=s.alternate)&&u.expirationTime<n&&(u.expirationTime=n),to(s.return,n),l.expirationTime<n&&(l.expirationTime=n);break}u=u.next}}else A=10===s.tag&&s.type===t.type?null:s.child;if(null!==A)A.return=s;else for(A=s;null!==A;){if(A===t){A=null;break}if(null!==(s=A.sibling)){s.return=A.return,A=s;break}A=A.return}s=A}Ha(e,t,i.children,n),t=t.child}return t;case 9:return i=t.type,r=(o=t.pendingProps).children,no(t,n),r=r(i=ro(i,o.unstable_observedBits)),t.effectTag|=1,Ha(e,t,r,n),t.child;case 14:return o=Yi(i=t.type,t.pendingProps),Na(e,t,i,o=Yi(i.type,o),r,n);case 15:return _a(e,t,t.type,t.pendingProps,r,n);case 17:return r=t.type,i=t.pendingProps,i=t.elementType===r?i:Yi(r,i),null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),t.tag=1,hi(r)?(e=!0,mi(t)):e=!1,no(t,n),Bo(t,r,i),bo(t,r,i,n),Pa(null,t,r,!0,e,n);case 19:return Va(e,t,n)}throw Error(a(156,t.tag))};var ws=null,Es=null;function ys(e,t,n,r){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.effectTag=0,this.lastEffect=this.firstEffect=this.nextEffect=null,this.childExpirationTime=this.expirationTime=0,this.alternate=null}function Cs(e,t,n,r){return new ys(e,t,n,r)}function Qs(e){return!(!(e=e.prototype)||!e.isReactComponent)}function xs(e,t){var n=e.alternate;return null===n?((n=Cs(e.tag,t,e.key,e.mode)).elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.effectTag=0,n.nextEffect=null,n.firstEffect=null,n.lastEffect=null),n.childExpirationTime=e.childExpirationTime,n.expirationTime=e.expirationTime,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=null===t?null:{expirationTime:t.expirationTime,firstContext:t.firstContext,responders:t.responders},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n}function Fs(e,t,n,r,i,o){var A=2;if(r=e,\"function\"===typeof e)Qs(e)&&(A=1);else if(\"string\"===typeof e)A=5;else e:switch(e){case ne:return Us(n.children,i,o,t);case Ae:A=8,i|=7;break;case re:A=8,i|=1;break;case ie:return(e=Cs(12,n,t,8|i)).elementType=ie,e.type=ie,e.expirationTime=o,e;case le:return(e=Cs(13,n,t,i)).type=le,e.elementType=le,e.expirationTime=o,e;case ue:return(e=Cs(19,n,t,i)).elementType=ue,e.expirationTime=o,e;default:if(\"object\"===typeof e&&null!==e)switch(e.$$typeof){case oe:A=10;break e;case ae:A=9;break e;case se:A=11;break e;case ce:A=14;break e;case fe:A=16,r=null;break e;case de:A=22;break e}throw Error(a(130,null==e?e:typeof e,\"\"))}return(t=Cs(A,n,t,i)).elementType=e,t.type=r,t.expirationTime=o,t}function Us(e,t,n,r){return(e=Cs(7,e,r,t)).expirationTime=n,e}function Ss(e,t,n){return(e=Cs(6,e,null,t)).expirationTime=n,e}function Os(e,t,n){return(t=Cs(4,null!==e.children?e.children:[],e.key,t)).expirationTime=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function Hs(e,t,n){this.tag=t,this.current=null,this.containerInfo=e,this.pingCache=this.pendingChildren=null,this.finishedExpirationTime=0,this.finishedWork=null,this.timeoutHandle=-1,this.pendingContext=this.context=null,this.hydrate=n,this.callbackNode=null,this.callbackPriority=90,this.lastExpiredTime=this.lastPingedTime=this.nextKnownPendingLevel=this.lastSuspendedTime=this.firstSuspendedTime=this.firstPendingTime=0}function Ts(e,t){var n=e.firstSuspendedTime;return e=e.lastSuspendedTime,0!==n&&n>=t&&e<=t}function Ns(e,t){var n=e.firstSuspendedTime,r=e.lastSuspendedTime;n<t&&(e.firstSuspendedTime=t),(r>t||0===n)&&(e.lastSuspendedTime=t),t<=e.lastPingedTime&&(e.lastPingedTime=0),t<=e.lastExpiredTime&&(e.lastExpiredTime=0)}function _s(e,t){t>e.firstPendingTime&&(e.firstPendingTime=t);var n=e.firstSuspendedTime;0!==n&&(t>=n?e.firstSuspendedTime=e.lastSuspendedTime=e.nextKnownPendingLevel=0:t>=e.lastSuspendedTime&&(e.lastSuspendedTime=t+1),t>e.nextKnownPendingLevel&&(e.nextKnownPendingLevel=t))}function Ms(e,t){var n=e.lastExpiredTime;(0===n||n>t)&&(e.lastExpiredTime=t)}function Rs(e,t,n,r){var i=t.current,o=GA(),A=fo.suspense;o=VA(o,i,A);e:if(n){t:{if($e(n=n._reactInternalFiber)!==n||1!==n.tag)throw Error(a(170));var s=n;do{switch(s.tag){case 3:s=s.stateNode.context;break t;case 1:if(hi(s.type)){s=s.stateNode.__reactInternalMemoizedMergedChildContext;break t}}s=s.return}while(null!==s);throw Error(a(171))}if(1===n.tag){var l=n.type;if(hi(l)){n=Bi(n,l,s);break e}}n=s}else n=ui;return null===t.context?t.context=n:t.pendingContext=n,(t=Ao(o,A)).payload={element:e},null!==(r=void 0===r?null:r)&&(t.callback=r),so(i,t),YA(i,o),o}function Ds(e){if(!(e=e.current).child)return null;switch(e.child.tag){case 5:default:return e.child.stateNode}}function Ps(e,t){null!==(e=e.memoizedState)&&null!==e.dehydrated&&e.retryTime<t&&(e.retryTime=t)}function ks(e,t){Ps(e,t),(e=e.alternate)&&Ps(e,t)}function Is(e,t,n){var r=new Hs(e,t,n=null!=n&&!0===n.hydrate),i=Cs(3,null,null,2===t?7:1===t?3:0);r.current=i,i.stateNode=r,oo(i),e[xn]=r.current,n&&0!==t&&function(e,t){var n=Ze(t);xt.forEach((function(e){pt(e,t,n)})),Ft.forEach((function(e){pt(e,t,n)}))}(0,9===e.nodeType?e:e.ownerDocument),this._internalRoot=r}function Ks(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType&&(8!==e.nodeType||\" react-mount-point-unstable \"!==e.nodeValue))}function Ls(e,t,n,r,i){var o=n._reactRootContainer;if(o){var a=o._internalRoot;if(\"function\"===typeof i){var A=i;i=function(){var e=Ds(a);A.call(e)}}Rs(t,a,e,i)}else{if(o=n._reactRootContainer=function(e,t){if(t||(t=!(!(t=e?9===e.nodeType?e.documentElement:e.firstChild:null)||1!==t.nodeType||!t.hasAttribute(\"data-reactroot\"))),!t)for(var n;n=e.lastChild;)e.removeChild(n);return new Is(e,0,t?{hydrate:!0}:void 0)}(n,r),a=o._internalRoot,\"function\"===typeof i){var s=i;i=function(){var e=Ds(a);s.call(e)}}ts((function(){Rs(t,a,e,i)}))}return Ds(a)}function zs(e,t,n){var r=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:te,key:null==r?null:\"\"+r,children:e,containerInfo:t,implementation:n}}function js(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!Ks(t))throw Error(a(200));return zs(e,t,null,n)}Is.prototype.render=function(e){Rs(e,this._internalRoot,null,null)},Is.prototype.unmount=function(){var e=this._internalRoot,t=e.containerInfo;Rs(null,e,null,(function(){t[xn]=null}))},ht=function(e){if(13===e.tag){var t=Vi(GA(),150,100);YA(e,t),ks(e,t)}},gt=function(e){13===e.tag&&(YA(e,3),ks(e,3))},vt=function(e){if(13===e.tag){var t=GA();YA(e,t=VA(t,e,null)),ks(e,t)}},U=function(e,t,n){switch(t){case\"input\":if(Qe(e,n),t=n.name,\"radio\"===n.type&&null!=t){for(n=e;n.parentNode;)n=n.parentNode;for(n=n.querySelectorAll(\"input[name=\"+JSON.stringify(\"\"+t)+'][type=\"radio\"]'),t=0;t<n.length;t++){var r=n[t];if(r!==e&&r.form===e.form){var i=On(r);if(!i)throw Error(a(90));we(r),Qe(r,i)}}}break;case\"textarea\":Te(e,n);break;case\"select\":null!=(t=n.value)&&Se(e,!!n.multiple,t,!1)}},_=es,M=function(e,t,n,r,i){var o=yA;yA|=4;try{return Li(98,e.bind(null,t,n,r,i))}finally{0===(yA=o)&&Xi()}},R=function(){0===(49&yA)&&(function(){if(null!==LA){var e=LA;LA=null,e.forEach((function(e,t){Ms(t,e),qA(t)})),Xi()}}(),hs())},D=function(e,t){var n=yA;yA|=2;try{return e(t)}finally{0===(yA=n)&&Xi()}};var Xs={Events:[Un,Sn,On,x,y,Dn,function(e){it(e,Rn)},T,N,qt,At,hs,{current:!1}]};!function(e){var t=e.findFiberByHostInstance;(function(e){if(\"undefined\"===typeof __REACT_DEVTOOLS_GLOBAL_HOOK__)return!1;var t=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(t.isDisabled||!t.supportsFiber)return!0;try{var n=t.inject(e);ws=function(e){try{t.onCommitFiberRoot(n,e,void 0,64===(64&e.current.effectTag))}catch(r){}},Es=function(e){try{t.onCommitFiberUnmount(n,e)}catch(r){}}}catch(r){}})(i({},e,{overrideHookState:null,overrideProps:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:J.ReactCurrentDispatcher,findHostInstanceByFiber:function(e){return null===(e=nt(e))?null:e.stateNode},findFiberByHostInstance:function(e){return t?t(e):null},findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null}))}({findFiberByHostInstance:Fn,bundleType:0,version:\"16.13.1\",rendererPackageName:\"react-dom\"}),t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=Xs,t.createPortal=js,t.findDOMNode=function(e){if(null==e)return null;if(1===e.nodeType)return e;var t=e._reactInternalFiber;if(void 0===t){if(\"function\"===typeof e.render)throw Error(a(188));throw Error(a(268,Object.keys(e)))}return e=null===(e=nt(t))?null:e.stateNode},t.flushSync=function(e,t){if(0!==(48&yA))throw Error(a(187));var n=yA;yA|=1;try{return Li(99,e.bind(null,t))}finally{yA=n,Xi()}},t.hydrate=function(e,t,n){if(!Ks(t))throw Error(a(200));return Ls(null,e,t,!0,n)},t.render=function(e,t,n){if(!Ks(t))throw Error(a(200));return Ls(null,e,t,!1,n)},t.unmountComponentAtNode=function(e){if(!Ks(e))throw Error(a(40));return!!e._reactRootContainer&&(ts((function(){Ls(null,null,e,!1,(function(){e._reactRootContainer=null,e[xn]=null}))})),!0)},t.unstable_batchedUpdates=es,t.unstable_createPortal=function(e,t){return js(e,t,2<arguments.length&&void 0!==arguments[2]?arguments[2]:null)},t.unstable_renderSubtreeIntoContainer=function(e,t,n,r){if(!Ks(n))throw Error(a(200));if(null==e||void 0===e._reactInternalFiber)throw Error(a(38));return Ls(e,t,n,!1,r)},t.version=\"16.13.1\"},function(e,t,n){\"use strict\";e.exports=n(124)},function(e,t,n){\"use strict\";var r,i,o,a,A;if(\"undefined\"===typeof window||\"function\"!==typeof MessageChannel){var s=null,l=null,u=function e(){if(null!==s)try{var n=t.unstable_now();s(!0,n),s=null}catch(r){throw setTimeout(e,0),r}},c=Date.now();t.unstable_now=function(){return Date.now()-c},r=function(e){null!==s?setTimeout(r,0,e):(s=e,setTimeout(u,0))},i=function(e,t){l=setTimeout(e,t)},o=function(){clearTimeout(l)},a=function(){return!1},A=t.unstable_forceFrameRate=function(){}}else{var f=window.performance,d=window.Date,p=window.setTimeout,h=window.clearTimeout;if(\"undefined\"!==typeof console){var g=window.cancelAnimationFrame;\"function\"!==typeof window.requestAnimationFrame&&console.error(\"This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills\"),\"function\"!==typeof g&&console.error(\"This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills\")}if(\"object\"===typeof f&&\"function\"===typeof f.now)t.unstable_now=function(){return f.now()};else{var v=d.now();t.unstable_now=function(){return d.now()-v}}var B=!1,m=null,b=-1,w=5,E=0;a=function(){return t.unstable_now()>=E},A=function(){},t.unstable_forceFrameRate=function(e){0>e||125<e?console.error(\"forceFrameRate takes a positive int between 0 and 125, forcing framerates higher than 125 fps is not unsupported\"):w=0<e?Math.floor(1e3/e):5};var y=new MessageChannel,C=y.port2;y.port1.onmessage=function(){if(null!==m){var e=t.unstable_now();E=e+w;try{m(!0,e)?C.postMessage(null):(B=!1,m=null)}catch(n){throw C.postMessage(null),n}}else B=!1},r=function(e){m=e,B||(B=!0,C.postMessage(null))},i=function(e,n){b=p((function(){e(t.unstable_now())}),n)},o=function(){h(b),b=-1}}function Q(e,t){var n=e.length;e.push(t);e:for(;;){var r=n-1>>>1,i=e[r];if(!(void 0!==i&&0<U(i,t)))break e;e[r]=t,e[n]=i,n=r}}function x(e){return void 0===(e=e[0])?null:e}function F(e){var t=e[0];if(void 0!==t){var n=e.pop();if(n!==t){e[0]=n;e:for(var r=0,i=e.length;r<i;){var o=2*(r+1)-1,a=e[o],A=o+1,s=e[A];if(void 0!==a&&0>U(a,n))void 0!==s&&0>U(s,a)?(e[r]=s,e[A]=n,r=A):(e[r]=a,e[o]=n,r=o);else{if(!(void 0!==s&&0>U(s,n)))break e;e[r]=s,e[A]=n,r=A}}}return t}return null}function U(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}var S=[],O=[],H=1,T=null,N=3,_=!1,M=!1,R=!1;function D(e){for(var t=x(O);null!==t;){if(null===t.callback)F(O);else{if(!(t.startTime<=e))break;F(O),t.sortIndex=t.expirationTime,Q(S,t)}t=x(O)}}function P(e){if(R=!1,D(e),!M)if(null!==x(S))M=!0,r(k);else{var t=x(O);null!==t&&i(P,t.startTime-e)}}function k(e,n){M=!1,R&&(R=!1,o()),_=!0;var r=N;try{for(D(n),T=x(S);null!==T&&(!(T.expirationTime>n)||e&&!a());){var A=T.callback;if(null!==A){T.callback=null,N=T.priorityLevel;var s=A(T.expirationTime<=n);n=t.unstable_now(),\"function\"===typeof s?T.callback=s:T===x(S)&&F(S),D(n)}else F(S);T=x(S)}if(null!==T)var l=!0;else{var u=x(O);null!==u&&i(P,u.startTime-n),l=!1}return l}finally{T=null,N=r,_=!1}}function I(e){switch(e){case 1:return-1;case 2:return 250;case 5:return 1073741823;case 4:return 1e4;default:return 5e3}}var K=A;t.unstable_IdlePriority=5,t.unstable_ImmediatePriority=1,t.unstable_LowPriority=4,t.unstable_NormalPriority=3,t.unstable_Profiling=null,t.unstable_UserBlockingPriority=2,t.unstable_cancelCallback=function(e){e.callback=null},t.unstable_continueExecution=function(){M||_||(M=!0,r(k))},t.unstable_getCurrentPriorityLevel=function(){return N},t.unstable_getFirstCallbackNode=function(){return x(S)},t.unstable_next=function(e){switch(N){case 1:case 2:case 3:var t=3;break;default:t=N}var n=N;N=t;try{return e()}finally{N=n}},t.unstable_pauseExecution=function(){},t.unstable_requestPaint=K,t.unstable_runWithPriority=function(e,t){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var n=N;N=e;try{return t()}finally{N=n}},t.unstable_scheduleCallback=function(e,n,a){var A=t.unstable_now();if(\"object\"===typeof a&&null!==a){var s=a.delay;s=\"number\"===typeof s&&0<s?A+s:A,a=\"number\"===typeof a.timeout?a.timeout:I(e)}else a=I(e),s=A;return e={id:H++,callback:n,priorityLevel:e,startTime:s,expirationTime:a=s+a,sortIndex:-1},s>A?(e.sortIndex=s,Q(O,e),null===x(S)&&e===x(O)&&(R?o():R=!0,i(P,s-A))):(e.sortIndex=a,Q(S,e),M||_||(M=!0,r(k))),e},t.unstable_shouldYield=function(){var e=t.unstable_now();D(e);var n=x(S);return n!==T&&null!==T&&null!==n&&null!==n.callback&&n.startTime<=e&&n.expirationTime<T.expirationTime||a()},t.unstable_wrapCallback=function(e){var t=N;return function(){var n=N;N=t;try{return e.apply(this,arguments)}finally{N=n}}}},,,function(e,t,n){var r=function(e){\"use strict\";var t=Object.prototype,n=t.hasOwnProperty,r=\"function\"===typeof Symbol?Symbol:{},i=r.iterator||\"@@iterator\",o=r.asyncIterator||\"@@asyncIterator\",a=r.toStringTag||\"@@toStringTag\";function A(e,t,n){return Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{A({},\"\")}catch(x){A=function(e,t,n){return e[t]=n}}function s(e,t,n,r){var i=t&&t.prototype instanceof c?t:c,o=Object.create(i.prototype),a=new y(r||[]);return o._invoke=function(e,t,n){var r=\"suspendedStart\";return function(i,o){if(\"executing\"===r)throw new Error(\"Generator is already running\");if(\"completed\"===r){if(\"throw\"===i)throw o;return Q()}for(n.method=i,n.arg=o;;){var a=n.delegate;if(a){var A=b(a,n);if(A){if(A===u)continue;return A}}if(\"next\"===n.method)n.sent=n._sent=n.arg;else if(\"throw\"===n.method){if(\"suspendedStart\"===r)throw r=\"completed\",n.arg;n.dispatchException(n.arg)}else\"return\"===n.method&&n.abrupt(\"return\",n.arg);r=\"executing\";var s=l(e,t,n);if(\"normal\"===s.type){if(r=n.done?\"completed\":\"suspendedYield\",s.arg===u)continue;return{value:s.arg,done:n.done}}\"throw\"===s.type&&(r=\"completed\",n.method=\"throw\",n.arg=s.arg)}}}(e,n,a),o}function l(e,t,n){try{return{type:\"normal\",arg:e.call(t,n)}}catch(x){return{type:\"throw\",arg:x}}}e.wrap=s;var u={};function c(){}function f(){}function d(){}var p={};p[i]=function(){return this};var h=Object.getPrototypeOf,g=h&&h(h(C([])));g&&g!==t&&n.call(g,i)&&(p=g);var v=d.prototype=c.prototype=Object.create(p);function B(e){[\"next\",\"throw\",\"return\"].forEach((function(t){A(e,t,(function(e){return this._invoke(t,e)}))}))}function m(e,t){var r;this._invoke=function(i,o){function a(){return new t((function(r,a){!function r(i,o,a,A){var s=l(e[i],e,o);if(\"throw\"!==s.type){var u=s.arg,c=u.value;return c&&\"object\"===typeof c&&n.call(c,\"__await\")?t.resolve(c.__await).then((function(e){r(\"next\",e,a,A)}),(function(e){r(\"throw\",e,a,A)})):t.resolve(c).then((function(e){u.value=e,a(u)}),(function(e){return r(\"throw\",e,a,A)}))}A(s.arg)}(i,o,r,a)}))}return r=r?r.then(a,a):a()}}function b(e,t){var n=e.iterator[t.method];if(void 0===n){if(t.delegate=null,\"throw\"===t.method){if(e.iterator.return&&(t.method=\"return\",t.arg=void 0,b(e,t),\"throw\"===t.method))return u;t.method=\"throw\",t.arg=new TypeError(\"The iterator does not provide a 'throw' method\")}return u}var r=l(n,e.iterator,t.arg);if(\"throw\"===r.type)return t.method=\"throw\",t.arg=r.arg,t.delegate=null,u;var i=r.arg;return i?i.done?(t[e.resultName]=i.value,t.next=e.nextLoc,\"return\"!==t.method&&(t.method=\"next\",t.arg=void 0),t.delegate=null,u):i:(t.method=\"throw\",t.arg=new TypeError(\"iterator result is not an object\"),t.delegate=null,u)}function w(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function E(e){var t=e.completion||{};t.type=\"normal\",delete t.arg,e.completion=t}function y(e){this.tryEntries=[{tryLoc:\"root\"}],e.forEach(w,this),this.reset(!0)}function C(e){if(e){var t=e[i];if(t)return t.call(e);if(\"function\"===typeof e.next)return e;if(!isNaN(e.length)){var r=-1,o=function t(){for(;++r<e.length;)if(n.call(e,r))return t.value=e[r],t.done=!1,t;return t.value=void 0,t.done=!0,t};return o.next=o}}return{next:Q}}function Q(){return{value:void 0,done:!0}}return f.prototype=v.constructor=d,d.constructor=f,f.displayName=A(d,a,\"GeneratorFunction\"),e.isGeneratorFunction=function(e){var t=\"function\"===typeof e&&e.constructor;return!!t&&(t===f||\"GeneratorFunction\"===(t.displayName||t.name))},e.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,d):(e.__proto__=d,A(e,a,\"GeneratorFunction\")),e.prototype=Object.create(v),e},e.awrap=function(e){return{__await:e}},B(m.prototype),m.prototype[o]=function(){return this},e.AsyncIterator=m,e.async=function(t,n,r,i,o){void 0===o&&(o=Promise);var a=new m(s(t,n,r,i),o);return e.isGeneratorFunction(n)?a:a.next().then((function(e){return e.done?e.value:a.next()}))},B(v),A(v,a,\"Generator\"),v[i]=function(){return this},v.toString=function(){return\"[object Generator]\"},e.keys=function(e){var t=[];for(var n in e)t.push(n);return t.reverse(),function n(){for(;t.length;){var r=t.pop();if(r in e)return n.value=r,n.done=!1,n}return n.done=!0,n}},e.values=C,y.prototype={constructor:y,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method=\"next\",this.arg=void 0,this.tryEntries.forEach(E),!e)for(var t in this)\"t\"===t.charAt(0)&&n.call(this,t)&&!isNaN(+t.slice(1))&&(this[t]=void 0)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if(\"throw\"===e.type)throw e.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var t=this;function r(n,r){return a.type=\"throw\",a.arg=e,t.next=n,r&&(t.method=\"next\",t.arg=void 0),!!r}for(var i=this.tryEntries.length-1;i>=0;--i){var o=this.tryEntries[i],a=o.completion;if(\"root\"===o.tryLoc)return r(\"end\");if(o.tryLoc<=this.prev){var A=n.call(o,\"catchLoc\"),s=n.call(o,\"finallyLoc\");if(A&&s){if(this.prev<o.catchLoc)return r(o.catchLoc,!0);if(this.prev<o.finallyLoc)return r(o.finallyLoc)}else if(A){if(this.prev<o.catchLoc)return r(o.catchLoc,!0)}else{if(!s)throw new Error(\"try statement without catch or finally\");if(this.prev<o.finallyLoc)return r(o.finallyLoc)}}}},abrupt:function(e,t){for(var r=this.tryEntries.length-1;r>=0;--r){var i=this.tryEntries[r];if(i.tryLoc<=this.prev&&n.call(i,\"finallyLoc\")&&this.prev<i.finallyLoc){var o=i;break}}o&&(\"break\"===e||\"continue\"===e)&&o.tryLoc<=t&&t<=o.finallyLoc&&(o=null);var a=o?o.completion:{};return a.type=e,a.arg=t,o?(this.method=\"next\",this.next=o.finallyLoc,u):this.complete(a)},complete:function(e,t){if(\"throw\"===e.type)throw e.arg;return\"break\"===e.type||\"continue\"===e.type?this.next=e.arg:\"return\"===e.type?(this.rval=this.arg=e.arg,this.method=\"return\",this.next=\"end\"):\"normal\"===e.type&&t&&(this.next=t),u},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),E(n),u}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if(\"throw\"===r.type){var i=r.arg;E(n)}return i}}throw new Error(\"illegal catch attempt\")},delegateYield:function(e,t,n){return this.delegate={iterator:C(e),resultName:t,nextLoc:n},\"next\"===this.method&&(this.arg=void 0),u}},e}(e.exports);try{regeneratorRuntime=r}catch(i){Function(\"r\",\"regeneratorRuntime = r\")(r)}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.AlphaPicker=void 0;var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=s(n(1)),o=s(n(7)),a=n(12),A=s(n(257));function s(e){return e&&e.__esModule?e:{default:e}}var l=t.AlphaPicker=function(e){var t=e.rgb,n=e.hsl,A=e.width,s=e.height,l=e.onChange,u=e.direction,c=e.style,f=e.renderers,d=e.pointer,p=e.className,h=void 0===p?\"\":p,g=(0,o.default)({default:{picker:{position:\"relative\",width:A,height:s},alpha:{radius:\"2px\",style:c}}});return i.default.createElement(\"div\",{style:g.picker,className:\"alpha-picker \"+h},i.default.createElement(a.Alpha,r({},g.alpha,{rgb:t,hsl:n,pointer:d,renderers:f,onChange:l,direction:u})))};l.defaultProps={width:\"316px\",height:\"16px\",direction:\"horizontal\",pointer:A.default},t.default=(0,a.ColorWrap)(l)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.flattenNames=void 0;var r=A(n(130)),i=A(n(58)),o=A(n(85)),a=A(n(26));function A(e){return e&&e.__esModule?e:{default:e}}var s=t.flattenNames=function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],n=[];return(0,a.default)(t,(function(t){Array.isArray(t)?e(t).map((function(e){return n.push(e)})):(0,o.default)(t)?(0,i.default)(t,(function(e,t){!0===e&&n.push(t),n.push(t+\"-\"+e)})):(0,r.default)(t)&&n.push(t)})),n};t.default=s},function(e,t,n){var r=n(29),i=n(17),o=n(22);e.exports=function(e){return\"string\"==typeof e||!i(e)&&o(e)&&\"[object String]\"==r(e)}},function(e,t){var n;n=function(){return this}();try{n=n||new Function(\"return this\")()}catch(r){\"object\"===typeof window&&(n=window)}e.exports=n},function(e,t,n){var r=n(36),i=Object.prototype,o=i.hasOwnProperty,a=i.toString,A=r?r.toStringTag:void 0;e.exports=function(e){var t=o.call(e,A),n=e[A];try{e[A]=void 0;var r=!0}catch(s){}var i=a.call(e);return r&&(t?e[A]=n:delete e[A]),i}},function(e,t){var n=Object.prototype.toString;e.exports=function(e){return n.call(e)}},function(e,t){e.exports=function(e){return function(t,n,r){for(var i=-1,o=Object(t),a=r(t),A=a.length;A--;){var s=a[e?A:++i];if(!1===n(o[s],s,o))break}return t}}},function(e,t){e.exports=function(e,t){for(var n=-1,r=Array(e);++n<e;)r[n]=t(n);return r}},function(e,t,n){var r=n(29),i=n(22);e.exports=function(e){return i(e)&&\"[object Arguments]\"==r(e)}},function(e,t){e.exports=function(){return!1}},function(e,t,n){var r=n(29),i=n(63),o=n(22),a={};a[\"[object Float32Array]\"]=a[\"[object Float64Array]\"]=a[\"[object Int8Array]\"]=a[\"[object Int16Array]\"]=a[\"[object Int32Array]\"]=a[\"[object Uint8Array]\"]=a[\"[object Uint8ClampedArray]\"]=a[\"[object Uint16Array]\"]=a[\"[object Uint32Array]\"]=!0,a[\"[object Arguments]\"]=a[\"[object Array]\"]=a[\"[object ArrayBuffer]\"]=a[\"[object Boolean]\"]=a[\"[object DataView]\"]=a[\"[object Date]\"]=a[\"[object Error]\"]=a[\"[object Function]\"]=a[\"[object Map]\"]=a[\"[object Number]\"]=a[\"[object Object]\"]=a[\"[object RegExp]\"]=a[\"[object Set]\"]=a[\"[object String]\"]=a[\"[object WeakMap]\"]=!1,e.exports=function(e){return o(e)&&i(e.length)&&!!a[r(e)]}},function(e,t,n){var r=n(66),i=n(140),o=Object.prototype.hasOwnProperty;e.exports=function(e){if(!r(e))return i(e);var t=[];for(var n in Object(e))o.call(e,n)&&\"constructor\"!=n&&t.push(n);return t}},function(e,t,n){var r=n(83)(Object.keys,Object);e.exports=r},function(e,t,n){var r=n(142),i=n(186),o=n(46),a=n(17),A=n(196);e.exports=function(e){return\"function\"==typeof e?e:null==e?o:\"object\"==typeof e?a(e)?i(e[0],e[1]):r(e):A(e)}},function(e,t,n){var r=n(143),i=n(185),o=n(96);e.exports=function(e){var t=i(e);return 1==t.length&&t[0][2]?o(t[0][0],t[0][1]):function(n){return n===e||r(n,e,t)}}},function(e,t,n){var r=n(47),i=n(88);e.exports=function(e,t,n,o){var a=n.length,A=a,s=!o;if(null==e)return!A;for(e=Object(e);a--;){var l=n[a];if(s&&l[2]?l[1]!==e[l[0]]:!(l[0]in e))return!1}for(;++a<A;){var u=(l=n[a])[0],c=e[u],f=l[1];if(s&&l[2]){if(void 0===c&&!(u in e))return!1}else{var d=new r;if(o)var p=o(c,f,u,e,t,d);if(!(void 0===p?i(f,c,3,o,d):p))return!1}}return!0}},function(e,t){e.exports=function(){this.__data__=[],this.size=0}},function(e,t,n){var r=n(49),i=Array.prototype.splice;e.exports=function(e){var t=this.__data__,n=r(t,e);return!(n<0)&&(n==t.length-1?t.pop():i.call(t,n,1),--this.size,!0)}},function(e,t,n){var r=n(49);e.exports=function(e){var t=this.__data__,n=r(t,e);return n<0?void 0:t[n][1]}},function(e,t,n){var r=n(49);e.exports=function(e){return r(this.__data__,e)>-1}},function(e,t,n){var r=n(49);e.exports=function(e,t){var n=this.__data__,i=r(n,e);return i<0?(++this.size,n.push([e,t])):n[i][1]=t,this}},function(e,t,n){var r=n(48);e.exports=function(){this.__data__=new r,this.size=0}},function(e,t){e.exports=function(e){var t=this.__data__,n=t.delete(e);return this.size=t.size,n}},function(e,t){e.exports=function(e){return this.__data__.get(e)}},function(e,t){e.exports=function(e){return this.__data__.has(e)}},function(e,t,n){var r=n(48),i=n(69),o=n(70);e.exports=function(e,t){var n=this.__data__;if(n instanceof r){var a=n.__data__;if(!i||a.length<199)return a.push([e,t]),this.size=++n.size,this;n=this.__data__=new o(a)}return n.set(e,t),this.size=n.size,this}},function(e,t,n){var r=n(67),i=n(155),o=n(20),a=n(87),A=/^\\[object .+?Constructor\\]$/,s=Function.prototype,l=Object.prototype,u=s.toString,c=l.hasOwnProperty,f=RegExp(\"^\"+u.call(c).replace(/[\\\\^$.*+?()[\\]{}|]/g,\"\\\\$&\").replace(/hasOwnProperty|(function).*?(?=\\\\\\()| for .+?(?=\\\\\\])/g,\"$1.*?\")+\"$\");e.exports=function(e){return!(!o(e)||i(e))&&(r(e)?f:A).test(a(e))}},function(e,t,n){var r=n(156),i=function(){var e=/[^.]+$/.exec(r&&r.keys&&r.keys.IE_PROTO||\"\");return e?\"Symbol(src)_1.\"+e:\"\"}();e.exports=function(e){return!!i&&i in e}},function(e,t,n){var r=n(21)[\"__core-js_shared__\"];e.exports=r},function(e,t){e.exports=function(e,t){return null==e?void 0:e[t]}},function(e,t,n){var r=n(159),i=n(48),o=n(69);e.exports=function(){this.size=0,this.__data__={hash:new r,map:new(o||i),string:new r}}},function(e,t,n){var r=n(160),i=n(161),o=n(162),a=n(163),A=n(164);function s(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}s.prototype.clear=r,s.prototype.delete=i,s.prototype.get=o,s.prototype.has=a,s.prototype.set=A,e.exports=s},function(e,t,n){var r=n(50);e.exports=function(){this.__data__=r?r(null):{},this.size=0}},function(e,t){e.exports=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t}},function(e,t,n){var r=n(50),i=Object.prototype.hasOwnProperty;e.exports=function(e){var t=this.__data__;if(r){var n=t[e];return\"__lodash_hash_undefined__\"===n?void 0:n}return i.call(t,e)?t[e]:void 0}},function(e,t,n){var r=n(50),i=Object.prototype.hasOwnProperty;e.exports=function(e){var t=this.__data__;return r?void 0!==t[e]:i.call(t,e)}},function(e,t,n){var r=n(50);e.exports=function(e,t){var n=this.__data__;return this.size+=this.has(e)?0:1,n[e]=r&&void 0===t?\"__lodash_hash_undefined__\":t,this}},function(e,t,n){var r=n(51);e.exports=function(e){var t=r(this,e).delete(e);return this.size-=t?1:0,t}},function(e,t){e.exports=function(e){var t=typeof e;return\"string\"==t||\"number\"==t||\"symbol\"==t||\"boolean\"==t?\"__proto__\"!==e:null===e}},function(e,t,n){var r=n(51);e.exports=function(e){return r(this,e).get(e)}},function(e,t,n){var r=n(51);e.exports=function(e){return r(this,e).has(e)}},function(e,t,n){var r=n(51);e.exports=function(e,t){var n=r(this,e),i=n.size;return n.set(e,t),this.size+=n.size==i?0:1,this}},function(e,t,n){var r=n(47),i=n(89),o=n(176),a=n(179),A=n(52),s=n(17),l=n(45),u=n(62),c=\"[object Object]\",f=Object.prototype.hasOwnProperty;e.exports=function(e,t,n,d,p,h){var g=s(e),v=s(t),B=g?\"[object Array]\":A(e),m=v?\"[object Array]\":A(t),b=(B=\"[object Arguments]\"==B?c:B)==c,w=(m=\"[object Arguments]\"==m?c:m)==c,E=B==m;if(E&&l(e)){if(!l(t))return!1;g=!0,b=!1}if(E&&!b)return h||(h=new r),g||u(e)?i(e,t,n,d,p,h):o(e,t,B,n,d,p,h);if(!(1&n)){var y=b&&f.call(e,\"__wrapped__\"),C=w&&f.call(t,\"__wrapped__\");if(y||C){var Q=y?e.value():e,x=C?t.value():t;return h||(h=new r),p(Q,x,n,d,h)}}return!!E&&(h||(h=new r),a(e,t,n,d,p,h))}},function(e,t,n){var r=n(70),i=n(172),o=n(173);function a(e){var t=-1,n=null==e?0:e.length;for(this.__data__=new r;++t<n;)this.add(e[t])}a.prototype.add=a.prototype.push=i,a.prototype.has=o,e.exports=a},function(e,t){e.exports=function(e){return this.__data__.set(e,\"__lodash_hash_undefined__\"),this}},function(e,t){e.exports=function(e){return this.__data__.has(e)}},function(e,t){e.exports=function(e,t){for(var n=-1,r=null==e?0:e.length;++n<r;)if(t(e[n],n,e))return!0;return!1}},function(e,t){e.exports=function(e,t){return e.has(t)}},function(e,t,n){var r=n(36),i=n(90),o=n(38),a=n(89),A=n(177),s=n(178),l=r?r.prototype:void 0,u=l?l.valueOf:void 0;e.exports=function(e,t,n,r,l,c,f){switch(n){case\"[object DataView]\":if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case\"[object ArrayBuffer]\":return!(e.byteLength!=t.byteLength||!c(new i(e),new i(t)));case\"[object Boolean]\":case\"[object Date]\":case\"[object Number]\":return o(+e,+t);case\"[object Error]\":return e.name==t.name&&e.message==t.message;case\"[object RegExp]\":case\"[object String]\":return e==t+\"\";case\"[object Map]\":var d=A;case\"[object Set]\":var p=1&r;if(d||(d=s),e.size!=t.size&&!p)return!1;var h=f.get(e);if(h)return h==t;r|=2,f.set(e,t);var g=a(d(e),d(t),r,l,c,f);return f.delete(e),g;case\"[object Symbol]\":if(u)return u.call(e)==u.call(t)}return!1}},function(e,t){e.exports=function(e){var t=-1,n=Array(e.size);return e.forEach((function(e,r){n[++t]=[r,e]})),n}},function(e,t){e.exports=function(e){var t=-1,n=Array(e.size);return e.forEach((function(e){n[++t]=e})),n}},function(e,t,n){var r=n(91),i=Object.prototype.hasOwnProperty;e.exports=function(e,t,n,o,a,A){var s=1&n,l=r(e),u=l.length;if(u!=r(t).length&&!s)return!1;for(var c=u;c--;){var f=l[c];if(!(s?f in t:i.call(t,f)))return!1}var d=A.get(e),p=A.get(t);if(d&&p)return d==t&&p==e;var h=!0;A.set(e,t),A.set(t,e);for(var g=s;++c<u;){var v=e[f=l[c]],B=t[f];if(o)var m=s?o(B,v,f,t,e,A):o(v,B,f,e,t,A);if(!(void 0===m?v===B||a(v,B,n,o,A):m)){h=!1;break}g||(g=\"constructor\"==f)}if(h&&!g){var b=e.constructor,w=t.constructor;b==w||!(\"constructor\"in e)||!(\"constructor\"in t)||\"function\"==typeof b&&b instanceof b&&\"function\"==typeof w&&w instanceof w||(h=!1)}return A.delete(e),A.delete(t),h}},function(e,t){e.exports=function(e,t){for(var n=-1,r=null==e?0:e.length,i=0,o=[];++n<r;){var a=e[n];t(a,n,e)&&(o[i++]=a)}return o}},function(e,t,n){var r=n(30)(n(21),\"DataView\");e.exports=r},function(e,t,n){var r=n(30)(n(21),\"Promise\");e.exports=r},function(e,t,n){var r=n(30)(n(21),\"Set\");e.exports=r},function(e,t,n){var r=n(30)(n(21),\"WeakMap\");e.exports=r},function(e,t,n){var r=n(95),i=n(37);e.exports=function(e){for(var t=i(e),n=t.length;n--;){var o=t[n],a=e[o];t[n]=[o,a,r(a)]}return t}},function(e,t,n){var r=n(88),i=n(187),o=n(193),a=n(72),A=n(95),s=n(96),l=n(54);e.exports=function(e,t){return a(e)&&A(t)?s(l(e),t):function(n){var a=i(n,e);return void 0===a&&a===t?o(n,e):r(t,a,3)}}},function(e,t,n){var r=n(97);e.exports=function(e,t,n){var i=null==e?void 0:r(e,t);return void 0===i?n:i}},function(e,t,n){var r=n(189),i=/[^.[\\]]+|\\[(?:(-?\\d+(?:\\.\\d+)?)|([\"'])((?:(?!\\2)[^\\\\]|\\\\.)*?)\\2)\\]|(?=(?:\\.|\\[\\])(?:\\.|\\[\\]|$))/g,o=/\\\\(\\\\)?/g,a=r((function(e){var t=[];return 46===e.charCodeAt(0)&&t.push(\"\"),e.replace(i,(function(e,n,r,i){t.push(r?i.replace(o,\"$1\"):n||e)})),t}));e.exports=a},function(e,t,n){var r=n(190);e.exports=function(e){var t=r(e,(function(e){return 500===n.size&&n.clear(),e})),n=t.cache;return t}},function(e,t,n){var r=n(70);function i(e,t){if(\"function\"!=typeof e||null!=t&&\"function\"!=typeof t)throw new TypeError(\"Expected a function\");var n=function n(){var r=arguments,i=t?t.apply(this,r):r[0],o=n.cache;if(o.has(i))return o.get(i);var a=e.apply(this,r);return n.cache=o.set(i,a)||o,a};return n.cache=new(i.Cache||r),n}i.Cache=r,e.exports=i},function(e,t,n){var r=n(192);e.exports=function(e){return null==e?\"\":r(e)}},function(e,t,n){var r=n(36),i=n(86),o=n(17),a=n(53),A=r?r.prototype:void 0,s=A?A.toString:void 0;e.exports=function e(t){if(\"string\"==typeof t)return t;if(o(t))return i(t,e)+\"\";if(a(t))return s?s.call(t):\"\";var n=t+\"\";return\"0\"==n&&1/t==-1/0?\"-0\":n}},function(e,t,n){var r=n(194),i=n(195);e.exports=function(e,t){return null!=e&&i(e,t,r)}},function(e,t){e.exports=function(e,t){return null!=e&&t in Object(e)}},function(e,t,n){var r=n(98),i=n(59),o=n(17),a=n(61),A=n(63),s=n(54);e.exports=function(e,t,n){for(var l=-1,u=(t=r(t,e)).length,c=!1;++l<u;){var f=s(t[l]);if(!(c=null!=e&&n(e,f)))break;e=e[f]}return c||++l!=u?c:!!(u=null==e?0:e.length)&&A(u)&&a(f,u)&&(o(e)||i(e))}},function(e,t,n){var r=n(197),i=n(198),o=n(72),a=n(54);e.exports=function(e){return o(e)?r(a(e)):i(e)}},function(e,t){e.exports=function(e){return function(t){return null==t?void 0:t[e]}}},function(e,t,n){var r=n(97);e.exports=function(e){return function(t){return r(t,e)}}},function(e,t,n){var r=n(99),i=n(32);e.exports=function(e,t){var n=-1,o=i(e)?Array(e.length):[];return r(e,(function(e,r,i){o[++n]=t(e,r,i)})),o}},function(e,t,n){var r=n(32);e.exports=function(e,t){return function(n,i){if(null==n)return n;if(!r(n))return e(n,i);for(var o=n.length,a=t?o:-1,A=Object(n);(t?a--:++a<o)&&!1!==i(A[a],a,A););return n}}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.mergeClasses=void 0;var r=a(n(58)),i=a(n(202)),o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};function a(e){return e&&e.__esModule?e:{default:e}}var A=t.mergeClasses=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=e.default&&(0,i.default)(e.default)||{};return t.map((function(t){var i=e[t];return i&&(0,r.default)(i,(function(e,t){n[t]||(n[t]={}),n[t]=o({},n[t],i[t])})),t})),n};t.default=A},function(e,t,n){var r=n(203);e.exports=function(e){return r(e,5)}},function(e,t,n){var r=n(47),i=n(100),o=n(101),a=n(204),A=n(205),s=n(103),l=n(104),u=n(208),c=n(209),f=n(91),d=n(210),p=n(52),h=n(211),g=n(212),v=n(107),B=n(17),m=n(45),b=n(217),w=n(20),E=n(219),y=n(37),C=n(40),Q={};Q[\"[object Arguments]\"]=Q[\"[object Array]\"]=Q[\"[object ArrayBuffer]\"]=Q[\"[object DataView]\"]=Q[\"[object Boolean]\"]=Q[\"[object Date]\"]=Q[\"[object Float32Array]\"]=Q[\"[object Float64Array]\"]=Q[\"[object Int8Array]\"]=Q[\"[object Int16Array]\"]=Q[\"[object Int32Array]\"]=Q[\"[object Map]\"]=Q[\"[object Number]\"]=Q[\"[object Object]\"]=Q[\"[object RegExp]\"]=Q[\"[object Set]\"]=Q[\"[object String]\"]=Q[\"[object Symbol]\"]=Q[\"[object Uint8Array]\"]=Q[\"[object Uint8ClampedArray]\"]=Q[\"[object Uint16Array]\"]=Q[\"[object Uint32Array]\"]=!0,Q[\"[object Error]\"]=Q[\"[object Function]\"]=Q[\"[object WeakMap]\"]=!1,e.exports=function e(t,n,x,F,U,S){var O,H=1&n,T=2&n,N=4&n;if(x&&(O=U?x(t,F,U,S):x(t)),void 0!==O)return O;if(!w(t))return t;var _=B(t);if(_){if(O=h(t),!H)return l(t,O)}else{var M=p(t),R=\"[object Function]\"==M||\"[object GeneratorFunction]\"==M;if(m(t))return s(t,H);if(\"[object Object]\"==M||\"[object Arguments]\"==M||R&&!U){if(O=T||R?{}:v(t),!H)return T?c(t,A(O,t)):u(t,a(O,t))}else{if(!Q[M])return U?t:{};O=g(t,M,H)}}S||(S=new r);var D=S.get(t);if(D)return D;S.set(t,O),E(t)?t.forEach((function(r){O.add(e(r,n,x,r,t,S))})):b(t)&&t.forEach((function(r,i){O.set(i,e(r,n,x,i,t,S))}));var P=_?void 0:(N?T?d:f:T?C:y)(t);return i(P||t,(function(r,i){P&&(r=t[i=r]),o(O,i,e(r,n,x,i,t,S))})),O}},function(e,t,n){var r=n(39),i=n(37);e.exports=function(e,t){return e&&r(t,i(t),e)}},function(e,t,n){var r=n(39),i=n(40);e.exports=function(e,t){return e&&r(t,i(t),e)}},function(e,t,n){var r=n(20),i=n(66),o=n(207),a=Object.prototype.hasOwnProperty;e.exports=function(e){if(!r(e))return o(e);var t=i(e),n=[];for(var A in e)(\"constructor\"!=A||!t&&a.call(e,A))&&n.push(A);return n}},function(e,t){e.exports=function(e){var t=[];if(null!=e)for(var n in Object(e))t.push(n);return t}},function(e,t,n){var r=n(39),i=n(71);e.exports=function(e,t){return r(e,i(e),t)}},function(e,t,n){var r=n(39),i=n(105);e.exports=function(e,t){return r(e,i(e),t)}},function(e,t,n){var r=n(92),i=n(105),o=n(40);e.exports=function(e){return r(e,o,i)}},function(e,t){var n=Object.prototype.hasOwnProperty;e.exports=function(e){var t=e.length,r=new e.constructor(t);return t&&\"string\"==typeof e[0]&&n.call(e,\"index\")&&(r.index=e.index,r.input=e.input),r}},function(e,t,n){var r=n(74),i=n(213),o=n(214),a=n(215),A=n(106);e.exports=function(e,t,n){var s=e.constructor;switch(t){case\"[object ArrayBuffer]\":return r(e);case\"[object Boolean]\":case\"[object Date]\":return new s(+e);case\"[object DataView]\":return i(e,n);case\"[object Float32Array]\":case\"[object Float64Array]\":case\"[object Int8Array]\":case\"[object Int16Array]\":case\"[object Int32Array]\":case\"[object Uint8Array]\":case\"[object Uint8ClampedArray]\":case\"[object Uint16Array]\":case\"[object Uint32Array]\":return A(e,n);case\"[object Map]\":return new s;case\"[object Number]\":case\"[object String]\":return new s(e);case\"[object RegExp]\":return o(e);case\"[object Set]\":return new s;case\"[object Symbol]\":return a(e)}}},function(e,t,n){var r=n(74);e.exports=function(e,t){var n=t?r(e.buffer):e.buffer;return new e.constructor(n,e.byteOffset,e.byteLength)}},function(e,t){var n=/\\w*$/;e.exports=function(e){var t=new e.constructor(e.source,n.exec(e));return t.lastIndex=e.lastIndex,t}},function(e,t,n){var r=n(36),i=r?r.prototype:void 0,o=i?i.valueOf:void 0;e.exports=function(e){return o?Object(o.call(e)):{}}},function(e,t,n){var r=n(20),i=Object.create,o=function(){function e(){}return function(t){if(!r(t))return{};if(i)return i(t);e.prototype=t;var n=new e;return e.prototype=void 0,n}}();e.exports=o},function(e,t,n){var r=n(218),i=n(64),o=n(65),a=o&&o.isMap,A=a?i(a):r;e.exports=A},function(e,t,n){var r=n(52),i=n(22);e.exports=function(e){return i(e)&&\"[object Map]\"==r(e)}},function(e,t,n){var r=n(220),i=n(64),o=n(65),a=o&&o.isSet,A=a?i(a):r;e.exports=A},function(e,t,n){var r=n(52),i=n(22);e.exports=function(e){return i(e)&&\"[object Set]\"==r(e)}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.autoprefix=void 0;var r,i=n(58),o=(r=i)&&r.__esModule?r:{default:r},a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};var A={borderRadius:function(e){return{msBorderRadius:e,MozBorderRadius:e,OBorderRadius:e,WebkitBorderRadius:e,borderRadius:e}},boxShadow:function(e){return{msBoxShadow:e,MozBoxShadow:e,OBoxShadow:e,WebkitBoxShadow:e,boxShadow:e}},userSelect:function(e){return{WebkitTouchCallout:e,KhtmlUserSelect:e,MozUserSelect:e,msUserSelect:e,WebkitUserSelect:e,userSelect:e}},flex:function(e){return{WebkitBoxFlex:e,MozBoxFlex:e,WebkitFlex:e,msFlex:e,flex:e}},flexBasis:function(e){return{WebkitFlexBasis:e,flexBasis:e}},justifyContent:function(e){return{WebkitJustifyContent:e,justifyContent:e}},transition:function(e){return{msTransition:e,MozTransition:e,OTransition:e,WebkitTransition:e,transition:e}},transform:function(e){return{msTransform:e,MozTransform:e,OTransform:e,WebkitTransform:e,transform:e}},absolute:function(e){var t=e&&e.split(\" \");return{position:\"absolute\",top:t&&t[0],right:t&&t[1],bottom:t&&t[2],left:t&&t[3]}},extend:function(e,t){var n=t[e];return n||{extend:e}}},s=t.autoprefix=function(e){var t={};return(0,o.default)(e,(function(e,n){var r={};(0,o.default)(e,(function(e,t){var n=A[t];n?r=a({},r,n(e)):r[t]=e})),t[n]=r})),t};t.default=s},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.hover=void 0;var r,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o=n(1),a=(r=o)&&r.__esModule?r:{default:r};function A(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}function s(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!==typeof t&&\"function\"!==typeof t?e:t}function l(e,t){if(\"function\"!==typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var u=t.hover=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:\"span\";return function(n){function r(){var n,o,l;A(this,r);for(var u=arguments.length,c=Array(u),f=0;f<u;f++)c[f]=arguments[f];return o=l=s(this,(n=r.__proto__||Object.getPrototypeOf(r)).call.apply(n,[this].concat(c))),l.state={hover:!1},l.handleMouseOver=function(){return l.setState({hover:!0})},l.handleMouseOut=function(){return l.setState({hover:!1})},l.render=function(){return a.default.createElement(t,{onMouseOver:l.handleMouseOver,onMouseOut:l.handleMouseOut},a.default.createElement(e,i({},l.props,l.state)))},s(l,o)}return l(r,n),r}(a.default.Component)};t.default=u},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.active=void 0;var r,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o=n(1),a=(r=o)&&r.__esModule?r:{default:r};function A(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}function s(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!==typeof t&&\"function\"!==typeof t?e:t}function l(e,t){if(\"function\"!==typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var u=t.active=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:\"span\";return function(n){function r(){var n,o,l;A(this,r);for(var u=arguments.length,c=Array(u),f=0;f<u;f++)c[f]=arguments[f];return o=l=s(this,(n=r.__proto__||Object.getPrototypeOf(r)).call.apply(n,[this].concat(c))),l.state={active:!1},l.handleMouseDown=function(){return l.setState({active:!0})},l.handleMouseUp=function(){return l.setState({active:!1})},l.render=function(){return a.default.createElement(t,{onMouseDown:l.handleMouseDown,onMouseUp:l.handleMouseUp},a.default.createElement(e,i({},l.props,l.state)))},s(l,o)}return l(r,n),r}(a.default.Component)};t.default=u},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0});t.default=function(e,t){var n={},r=function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];n[e]=t};return 0===e&&r(\"first-child\"),e===t-1&&r(\"last-child\"),(0===e||e%2===0)&&r(\"even\"),1===Math.abs(e%2)&&r(\"odd\"),r(\"nth-child\",e),n}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Alpha=void 0;var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,\"value\"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=n(1),a=u(o),A=u(n(7)),s=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}(n(226)),l=u(n(75));function u(e){return e&&e.__esModule?e:{default:e}}function c(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}function f(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!==typeof t&&\"function\"!==typeof t?e:t}var d=t.Alpha=function(e){function t(){var e,n,r;c(this,t);for(var i=arguments.length,o=Array(i),a=0;a<i;a++)o[a]=arguments[a];return n=r=f(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(o))),r.handleChange=function(e){var t=s.calculateChange(e,r.props.hsl,r.props.direction,r.props.a,r.container);t&&\"function\"===typeof r.props.onChange&&r.props.onChange(t,e)},r.handleMouseDown=function(e){r.handleChange(e),window.addEventListener(\"mousemove\",r.handleChange),window.addEventListener(\"mouseup\",r.handleMouseUp)},r.handleMouseUp=function(){r.unbindEventListeners()},r.unbindEventListeners=function(){window.removeEventListener(\"mousemove\",r.handleChange),window.removeEventListener(\"mouseup\",r.handleMouseUp)},f(r,n)}return function(e,t){if(\"function\"!==typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),i(t,[{key:\"componentWillUnmount\",value:function(){this.unbindEventListeners()}},{key:\"render\",value:function(){var e=this,t=this.props.rgb,n=(0,A.default)({default:{alpha:{absolute:\"0px 0px 0px 0px\",borderRadius:this.props.radius},checkboard:{absolute:\"0px 0px 0px 0px\",overflow:\"hidden\",borderRadius:this.props.radius},gradient:{absolute:\"0px 0px 0px 0px\",background:\"linear-gradient(to right, rgba(\"+t.r+\",\"+t.g+\",\"+t.b+\", 0) 0%,\\n           rgba(\"+t.r+\",\"+t.g+\",\"+t.b+\", 1) 100%)\",boxShadow:this.props.shadow,borderRadius:this.props.radius},container:{position:\"relative\",height:\"100%\",margin:\"0 3px\"},pointer:{position:\"absolute\",left:100*t.a+\"%\"},slider:{width:\"4px\",borderRadius:\"1px\",height:\"8px\",boxShadow:\"0 0 2px rgba(0, 0, 0, .6)\",background:\"#fff\",marginTop:\"1px\",transform:\"translateX(-2px)\"}},vertical:{gradient:{background:\"linear-gradient(to bottom, rgba(\"+t.r+\",\"+t.g+\",\"+t.b+\", 0) 0%,\\n           rgba(\"+t.r+\",\"+t.g+\",\"+t.b+\", 1) 100%)\"},pointer:{left:0,top:100*t.a+\"%\"}},overwrite:r({},this.props.style)},{vertical:\"vertical\"===this.props.direction,overwrite:!0});return a.default.createElement(\"div\",{style:n.alpha},a.default.createElement(\"div\",{style:n.checkboard},a.default.createElement(l.default,{renderers:this.props.renderers})),a.default.createElement(\"div\",{style:n.gradient}),a.default.createElement(\"div\",{style:n.container,ref:function(t){return e.container=t},onMouseDown:this.handleMouseDown,onTouchMove:this.handleChange,onTouchStart:this.handleChange},a.default.createElement(\"div\",{style:n.pointer},this.props.pointer?a.default.createElement(this.props.pointer,this.props):a.default.createElement(\"div\",{style:n.slider}))))}}]),t}(o.PureComponent||o.Component);t.default=d},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0});t.calculateChange=function(e,t,n,r,i){var o=i.clientWidth,a=i.clientHeight,A=\"number\"===typeof e.pageX?e.pageX:e.touches[0].pageX,s=\"number\"===typeof e.pageY?e.pageY:e.touches[0].pageY,l=A-(i.getBoundingClientRect().left+window.pageXOffset),u=s-(i.getBoundingClientRect().top+window.pageYOffset);if(\"vertical\"===n){var c=void 0;if(c=u<0?0:u>a?1:Math.round(100*u/a)/100,t.a!==c)return{h:t.h,s:t.s,l:t.l,a:c,source:\"rgb\"}}else{var f=void 0;if(r!==(f=l<0?0:l>o?1:Math.round(100*l/o)/100))return{h:t.h,s:t.s,l:t.l,a:f,source:\"rgb\"}}return null}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0});var r={},i=t.render=function(e,t,n,r){if(\"undefined\"===typeof document&&!r)return null;var i=r?new r:document.createElement(\"canvas\");i.width=2*n,i.height=2*n;var o=i.getContext(\"2d\");return o?(o.fillStyle=e,o.fillRect(0,0,i.width,i.height),o.fillStyle=t,o.fillRect(0,0,n,n),o.translate(n,n),o.fillRect(0,0,n,n),i.toDataURL()):null};t.get=function(e,t,n,o){var a=e+\"-\"+t+\"-\"+n+(o?\"-server\":\"\");if(r[a])return r[a];var A=i(e,t,n,o);return r[a]=A,A}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.EditableInput=void 0;var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,\"value\"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=n(1),o=A(i),a=A(n(7));function A(e){return e&&e.__esModule?e:{default:e}}var s=[38,40],l=t.EditableInput=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}(this,t);var n=function(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!==typeof t&&\"function\"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return n.handleBlur=function(){n.state.blurValue&&n.setState({value:n.state.blurValue,blurValue:null})},n.handleChange=function(e){n.setUpdatedValue(e.target.value,e)},n.handleKeyDown=function(e){var t,r=function(e){return Number(String(e).replace(/%/g,\"\"))}(e.target.value);if(!isNaN(r)&&(t=e.keyCode,s.indexOf(t)>-1)){var i=n.getArrowOffset(),o=38===e.keyCode?r+i:r-i;n.setUpdatedValue(o,e)}},n.handleDrag=function(e){if(n.props.dragLabel){var t=Math.round(n.props.value+e.movementX);t>=0&&t<=n.props.dragMax&&n.props.onChange&&n.props.onChange(n.getValueObjectWithLabel(t),e)}},n.handleMouseDown=function(e){n.props.dragLabel&&(e.preventDefault(),n.handleDrag(e),window.addEventListener(\"mousemove\",n.handleDrag),window.addEventListener(\"mouseup\",n.handleMouseUp))},n.handleMouseUp=function(){n.unbindEventListeners()},n.unbindEventListeners=function(){window.removeEventListener(\"mousemove\",n.handleDrag),window.removeEventListener(\"mouseup\",n.handleMouseUp)},n.state={value:String(e.value).toUpperCase(),blurValue:String(e.value).toUpperCase()},n}return function(e,t){if(\"function\"!==typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),r(t,[{key:\"componentDidUpdate\",value:function(e,t){this.props.value===this.state.value||e.value===this.props.value&&t.value===this.state.value||(this.input===document.activeElement?this.setState({blurValue:String(this.props.value).toUpperCase()}):this.setState({value:String(this.props.value).toUpperCase(),blurValue:!this.state.blurValue&&String(this.props.value).toUpperCase()}))}},{key:\"componentWillUnmount\",value:function(){this.unbindEventListeners()}},{key:\"getValueObjectWithLabel\",value:function(e){return function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}({},this.props.label,e)}},{key:\"getArrowOffset\",value:function(){return this.props.arrowOffset||1}},{key:\"setUpdatedValue\",value:function(e,t){var n=this.props.label?this.getValueObjectWithLabel(e):e;this.props.onChange&&this.props.onChange(n,t),this.setState({value:e})}},{key:\"render\",value:function(){var e=this,t=(0,a.default)({default:{wrap:{position:\"relative\"}},\"user-override\":{wrap:this.props.style&&this.props.style.wrap?this.props.style.wrap:{},input:this.props.style&&this.props.style.input?this.props.style.input:{},label:this.props.style&&this.props.style.label?this.props.style.label:{}},\"dragLabel-true\":{label:{cursor:\"ew-resize\"}}},{\"user-override\":!0},this.props);return o.default.createElement(\"div\",{style:t.wrap},o.default.createElement(\"input\",{style:t.input,ref:function(t){return e.input=t},value:this.state.value,onKeyDown:this.handleKeyDown,onChange:this.handleChange,onBlur:this.handleBlur,placeholder:this.props.placeholder,spellCheck:\"false\"}),this.props.label&&!this.props.hideLabel?o.default.createElement(\"span\",{style:t.label,onMouseDown:this.handleMouseDown},this.props.label):null)}}]),t}(i.PureComponent||i.Component);t.default=l},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Hue=void 0;var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,\"value\"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=n(1),o=s(i),a=s(n(7)),A=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}(n(230));function s(e){return e&&e.__esModule?e:{default:e}}function l(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}function u(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!==typeof t&&\"function\"!==typeof t?e:t}var c=t.Hue=function(e){function t(){var e,n,r;l(this,t);for(var i=arguments.length,o=Array(i),a=0;a<i;a++)o[a]=arguments[a];return n=r=u(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(o))),r.handleChange=function(e){var t=A.calculateChange(e,r.props.direction,r.props.hsl,r.container);t&&\"function\"===typeof r.props.onChange&&r.props.onChange(t,e)},r.handleMouseDown=function(e){r.handleChange(e),window.addEventListener(\"mousemove\",r.handleChange),window.addEventListener(\"mouseup\",r.handleMouseUp)},r.handleMouseUp=function(){r.unbindEventListeners()},u(r,n)}return function(e,t){if(\"function\"!==typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),r(t,[{key:\"componentWillUnmount\",value:function(){this.unbindEventListeners()}},{key:\"unbindEventListeners\",value:function(){window.removeEventListener(\"mousemove\",this.handleChange),window.removeEventListener(\"mouseup\",this.handleMouseUp)}},{key:\"render\",value:function(){var e=this,t=this.props.direction,n=void 0===t?\"horizontal\":t,r=(0,a.default)({default:{hue:{absolute:\"0px 0px 0px 0px\",borderRadius:this.props.radius,boxShadow:this.props.shadow},container:{padding:\"0 2px\",position:\"relative\",height:\"100%\",borderRadius:this.props.radius},pointer:{position:\"absolute\",left:100*this.props.hsl.h/360+\"%\"},slider:{marginTop:\"1px\",width:\"4px\",borderRadius:\"1px\",height:\"8px\",boxShadow:\"0 0 2px rgba(0, 0, 0, .6)\",background:\"#fff\",transform:\"translateX(-2px)\"}},vertical:{pointer:{left:\"0px\",top:-100*this.props.hsl.h/360+100+\"%\"}}},{vertical:\"vertical\"===n});return o.default.createElement(\"div\",{style:r.hue},o.default.createElement(\"div\",{className:\"hue-\"+n,style:r.container,ref:function(t){return e.container=t},onMouseDown:this.handleMouseDown,onTouchMove:this.handleChange,onTouchStart:this.handleChange},o.default.createElement(\"style\",null,\"\\n            .hue-horizontal {\\n              background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0\\n                33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\\n              background: -webkit-linear-gradient(to right, #f00 0%, #ff0\\n                17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\\n            }\\n\\n            .hue-vertical {\\n              background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,\\n                #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\\n              background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,\\n                #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\\n            }\\n          \"),o.default.createElement(\"div\",{style:r.pointer},this.props.pointer?o.default.createElement(this.props.pointer,this.props):o.default.createElement(\"div\",{style:r.slider}))))}}]),t}(i.PureComponent||i.Component);t.default=c},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0});t.calculateChange=function(e,t,n,r){var i=r.clientWidth,o=r.clientHeight,a=\"number\"===typeof e.pageX?e.pageX:e.touches[0].pageX,A=\"number\"===typeof e.pageY?e.pageY:e.touches[0].pageY,s=a-(r.getBoundingClientRect().left+window.pageXOffset),l=A-(r.getBoundingClientRect().top+window.pageYOffset);if(\"vertical\"===t){var u=void 0;if(l<0)u=359;else if(l>o)u=0;else{u=360*(-100*l/o+100)/100}if(n.h!==u)return{h:u,s:n.s,l:n.l,a:n.a,source:\"hsl\"}}else{var c=void 0;if(s<0)c=0;else if(s>i)c=359;else{c=360*(100*s/i)/100}if(n.h!==c)return{h:c,s:n.s,l:n.l,a:n.a,source:\"hsl\"}}return null}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Raised=void 0;var r=A(n(1)),i=A(n(18)),o=A(n(7)),a=A(n(19));function A(e){return e&&e.__esModule?e:{default:e}}var s=t.Raised=function(e){var t=e.zDepth,n=e.radius,i=e.background,A=e.children,s=e.styles,l=void 0===s?{}:s,u=(0,o.default)((0,a.default)({default:{wrap:{position:\"relative\",display:\"inline-block\"},content:{position:\"relative\"},bg:{absolute:\"0px 0px 0px 0px\",boxShadow:\"0 \"+t+\"px \"+4*t+\"px rgba(0,0,0,.24)\",borderRadius:n,background:i}},\"zDepth-0\":{bg:{boxShadow:\"none\"}},\"zDepth-1\":{bg:{boxShadow:\"0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)\"}},\"zDepth-2\":{bg:{boxShadow:\"0 6px 20px rgba(0,0,0,.19), 0 8px 17px rgba(0,0,0,.2)\"}},\"zDepth-3\":{bg:{boxShadow:\"0 17px 50px rgba(0,0,0,.19), 0 12px 15px rgba(0,0,0,.24)\"}},\"zDepth-4\":{bg:{boxShadow:\"0 25px 55px rgba(0,0,0,.21), 0 16px 28px rgba(0,0,0,.22)\"}},\"zDepth-5\":{bg:{boxShadow:\"0 40px 77px rgba(0,0,0,.22), 0 27px 24px rgba(0,0,0,.2)\"}},square:{bg:{borderRadius:\"0\"}},circle:{bg:{borderRadius:\"50%\"}}},l),{\"zDepth-1\":1===t});return r.default.createElement(\"div\",{style:u.wrap},r.default.createElement(\"div\",{style:u.bg}),r.default.createElement(\"div\",{style:u.content},A))};s.propTypes={background:i.default.string,zDepth:i.default.oneOf([0,1,2,3,4,5]),radius:i.default.number,styles:i.default.object},s.defaultProps={background:\"#fff\",zDepth:1,radius:2,styles:{}},t.default=s},function(e,t,n){\"use strict\";var r=n(233);function i(){}function o(){}o.resetWarningCache=i,e.exports=function(){function e(e,t,n,i,o,a){if(a!==r){var A=new Error(\"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types\");throw A.name=\"Invariant Violation\",A}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:i};return n.PropTypes=n,n}},function(e,t,n){\"use strict\";e.exports=\"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED\"},function(e,t,n){var r=n(47),i=n(108),o=n(81),a=n(235),A=n(20),s=n(40),l=n(109);e.exports=function e(t,n,u,c,f){t!==n&&o(n,(function(o,s){if(f||(f=new r),A(o))a(t,n,s,u,e,c,f);else{var d=c?c(l(t,s),o,s+\"\",t,n,f):void 0;void 0===d&&(d=o),i(t,s,d)}}),s)}},function(e,t,n){var r=n(108),i=n(103),o=n(106),a=n(104),A=n(107),s=n(59),l=n(17),u=n(236),c=n(45),f=n(67),d=n(20),p=n(85),h=n(62),g=n(109),v=n(237);e.exports=function(e,t,n,B,m,b,w){var E=g(e,n),y=g(t,n),C=w.get(y);if(C)r(e,n,C);else{var Q=b?b(E,y,n+\"\",e,t,w):void 0,x=void 0===Q;if(x){var F=l(y),U=!F&&c(y),S=!F&&!U&&h(y);Q=y,F||U||S?l(E)?Q=E:u(E)?Q=a(E):U?(x=!1,Q=i(y,!0)):S?(x=!1,Q=o(y,!0)):Q=[]:p(y)||s(y)?(Q=E,s(E)?Q=v(E):d(E)&&!f(E)||(Q=A(y))):x=!1}x&&(w.set(y,Q),m(Q,y,B,b,w),w.delete(y)),r(e,n,Q)}}},function(e,t,n){var r=n(32),i=n(22);e.exports=function(e){return i(e)&&r(e)}},function(e,t,n){var r=n(39),i=n(40);e.exports=function(e){return r(e,i(e))}},function(e,t,n){var r=n(239),i=n(246);e.exports=function(e){return r((function(t,n){var r=-1,o=n.length,a=o>1?n[o-1]:void 0,A=o>2?n[2]:void 0;for(a=e.length>3&&\"function\"==typeof a?(o--,a):void 0,A&&i(n[0],n[1],A)&&(a=o<3?void 0:a,o=1),t=Object(t);++r<o;){var s=n[r];s&&e(t,s,r,a)}return t}))}},function(e,t,n){var r=n(46),i=n(240),o=n(242);e.exports=function(e,t){return o(i(e,t,r),e+\"\")}},function(e,t,n){var r=n(241),i=Math.max;e.exports=function(e,t,n){return t=i(void 0===t?e.length-1:t,0),function(){for(var o=arguments,a=-1,A=i(o.length-t,0),s=Array(A);++a<A;)s[a]=o[t+a];a=-1;for(var l=Array(t+1);++a<t;)l[a]=o[a];return l[t]=n(s),r(e,this,l)}}},function(e,t){e.exports=function(e,t,n){switch(n.length){case 0:return e.call(t);case 1:return e.call(t,n[0]);case 2:return e.call(t,n[0],n[1]);case 3:return e.call(t,n[0],n[1],n[2])}return e.apply(t,n)}},function(e,t,n){var r=n(243),i=n(245)(r);e.exports=i},function(e,t,n){var r=n(244),i=n(102),o=n(46),a=i?function(e,t){return i(e,\"toString\",{configurable:!0,enumerable:!1,value:r(t),writable:!0})}:o;e.exports=a},function(e,t){e.exports=function(e){return function(){return e}}},function(e,t){var n=Date.now;e.exports=function(e){var t=0,r=0;return function(){var i=n(),o=16-(i-r);if(r=i,o>0){if(++t>=800)return arguments[0]}else t=0;return e.apply(void 0,arguments)}}},function(e,t,n){var r=n(38),i=n(32),o=n(61),a=n(20);e.exports=function(e,t,n){if(!a(n))return!1;var A=typeof t;return!!(\"number\"==A?i(n)&&o(t,n.length):\"string\"==A&&t in n)&&r(n[t],e)}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Saturation=void 0;var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,\"value\"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=n(1),o=l(i),a=l(n(7)),A=l(n(248)),s=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}(n(251));function l(e){return e&&e.__esModule?e:{default:e}}var u=t.Saturation=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}(this,t);var n=function(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!==typeof t&&\"function\"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.handleChange=function(e){\"function\"===typeof n.props.onChange&&n.throttle(n.props.onChange,s.calculateChange(e,n.props.hsl,n.container),e)},n.handleMouseDown=function(e){n.handleChange(e),window.addEventListener(\"mousemove\",n.handleChange),window.addEventListener(\"mouseup\",n.handleMouseUp)},n.handleMouseUp=function(){n.unbindEventListeners()},n.throttle=(0,A.default)((function(e,t,n){e(t,n)}),50),n}return function(e,t){if(\"function\"!==typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),r(t,[{key:\"componentWillUnmount\",value:function(){this.throttle.cancel(),this.unbindEventListeners()}},{key:\"unbindEventListeners\",value:function(){window.removeEventListener(\"mousemove\",this.handleChange),window.removeEventListener(\"mouseup\",this.handleMouseUp)}},{key:\"render\",value:function(){var e=this,t=this.props.style||{},n=t.color,r=t.white,i=t.black,A=t.pointer,s=t.circle,l=(0,a.default)({default:{color:{absolute:\"0px 0px 0px 0px\",background:\"hsl(\"+this.props.hsl.h+\",100%, 50%)\",borderRadius:this.props.radius},white:{absolute:\"0px 0px 0px 0px\",borderRadius:this.props.radius},black:{absolute:\"0px 0px 0px 0px\",boxShadow:this.props.shadow,borderRadius:this.props.radius},pointer:{position:\"absolute\",top:-100*this.props.hsv.v+100+\"%\",left:100*this.props.hsv.s+\"%\",cursor:\"default\"},circle:{width:\"4px\",height:\"4px\",boxShadow:\"0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\\n            0 0 1px 2px rgba(0,0,0,.4)\",borderRadius:\"50%\",cursor:\"hand\",transform:\"translate(-2px, -2px)\"}},custom:{color:n,white:r,black:i,pointer:A,circle:s}},{custom:!!this.props.style});return o.default.createElement(\"div\",{style:l.color,ref:function(t){return e.container=t},onMouseDown:this.handleMouseDown,onTouchMove:this.handleChange,onTouchStart:this.handleChange},o.default.createElement(\"style\",null,\"\\n          .saturation-white {\\n            background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));\\n            background: linear-gradient(to right, #fff, rgba(255,255,255,0));\\n          }\\n          .saturation-black {\\n            background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));\\n            background: linear-gradient(to top, #000, rgba(0,0,0,0));\\n          }\\n        \"),o.default.createElement(\"div\",{style:l.white,className:\"saturation-white\"},o.default.createElement(\"div\",{style:l.black,className:\"saturation-black\"}),o.default.createElement(\"div\",{style:l.pointer},this.props.pointer?o.default.createElement(this.props.pointer,this.props):o.default.createElement(\"div\",{style:l.circle}))))}}]),t}(i.PureComponent||i.Component);t.default=u},function(e,t,n){var r=n(110),i=n(20);e.exports=function(e,t,n){var o=!0,a=!0;if(\"function\"!=typeof e)throw new TypeError(\"Expected a function\");return i(n)&&(o=\"leading\"in n?!!n.leading:o,a=\"trailing\"in n?!!n.trailing:a),r(e,t,{leading:o,maxWait:t,trailing:a})}},function(e,t,n){var r=n(21);e.exports=function(){return r.Date.now()}},function(e,t,n){var r=n(20),i=n(53),o=/^\\s+|\\s+$/g,a=/^[-+]0x[0-9a-f]+$/i,A=/^0b[01]+$/i,s=/^0o[0-7]+$/i,l=parseInt;e.exports=function(e){if(\"number\"==typeof e)return e;if(i(e))return NaN;if(r(e)){var t=\"function\"==typeof e.valueOf?e.valueOf():e;e=r(t)?t+\"\":t}if(\"string\"!=typeof e)return 0===e?e:+e;e=e.replace(o,\"\");var n=A.test(e);return n||s.test(e)?l(e.slice(2),n?2:8):a.test(e)?NaN:+e}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0});t.calculateChange=function(e,t,n){var r=n.getBoundingClientRect(),i=r.width,o=r.height,a=\"number\"===typeof e.pageX?e.pageX:e.touches[0].pageX,A=\"number\"===typeof e.pageY?e.pageY:e.touches[0].pageY,s=a-(n.getBoundingClientRect().left+window.pageXOffset),l=A-(n.getBoundingClientRect().top+window.pageYOffset);s<0?s=0:s>i&&(s=i),l<0?l=0:l>o&&(l=o);var u=s/i,c=1-l/o;return{h:t.h,s:u,v:c,a:t.a,source:\"hsv\"}}},function(e,t,n){e.exports=n(253)},function(e,t,n){var r=n(100),i=n(99),o=n(84),a=n(17);e.exports=function(e,t){return(a(e)?r:i)(e,o(t))}},function(e,t,n){var r;!function(i){var o=/^\\s+/,a=/\\s+$/,A=0,s=i.round,l=i.min,u=i.max,c=i.random;function f(e,t){if(t=t||{},(e=e||\"\")instanceof f)return e;if(!(this instanceof f))return new f(e,t);var n=function(e){var t={r:0,g:0,b:0},n=1,r=null,A=null,s=null,c=!1,f=!1;\"string\"==typeof e&&(e=function(e){e=e.replace(o,\"\").replace(a,\"\").toLowerCase();var t,n=!1;if(O[e])e=O[e],n=!0;else if(\"transparent\"==e)return{r:0,g:0,b:0,a:0,format:\"name\"};if(t=I.rgb.exec(e))return{r:t[1],g:t[2],b:t[3]};if(t=I.rgba.exec(e))return{r:t[1],g:t[2],b:t[3],a:t[4]};if(t=I.hsl.exec(e))return{h:t[1],s:t[2],l:t[3]};if(t=I.hsla.exec(e))return{h:t[1],s:t[2],l:t[3],a:t[4]};if(t=I.hsv.exec(e))return{h:t[1],s:t[2],v:t[3]};if(t=I.hsva.exec(e))return{h:t[1],s:t[2],v:t[3],a:t[4]};if(t=I.hex8.exec(e))return{r:M(t[1]),g:M(t[2]),b:M(t[3]),a:k(t[4]),format:n?\"name\":\"hex8\"};if(t=I.hex6.exec(e))return{r:M(t[1]),g:M(t[2]),b:M(t[3]),format:n?\"name\":\"hex\"};if(t=I.hex4.exec(e))return{r:M(t[1]+\"\"+t[1]),g:M(t[2]+\"\"+t[2]),b:M(t[3]+\"\"+t[3]),a:k(t[4]+\"\"+t[4]),format:n?\"name\":\"hex8\"};if(t=I.hex3.exec(e))return{r:M(t[1]+\"\"+t[1]),g:M(t[2]+\"\"+t[2]),b:M(t[3]+\"\"+t[3]),format:n?\"name\":\"hex\"};return!1}(e));\"object\"==typeof e&&(K(e.r)&&K(e.g)&&K(e.b)?(d=e.r,p=e.g,h=e.b,t={r:255*N(d,255),g:255*N(p,255),b:255*N(h,255)},c=!0,f=\"%\"===String(e.r).substr(-1)?\"prgb\":\"rgb\"):K(e.h)&&K(e.s)&&K(e.v)?(r=D(e.s),A=D(e.v),t=function(e,t,n){e=6*N(e,360),t=N(t,100),n=N(n,100);var r=i.floor(e),o=e-r,a=n*(1-t),A=n*(1-o*t),s=n*(1-(1-o)*t),l=r%6;return{r:255*[n,A,a,a,s,n][l],g:255*[s,n,n,A,a,a][l],b:255*[a,a,s,n,n,A][l]}}(e.h,r,A),c=!0,f=\"hsv\"):K(e.h)&&K(e.s)&&K(e.l)&&(r=D(e.s),s=D(e.l),t=function(e,t,n){var r,i,o;function a(e,t,n){return n<0&&(n+=1),n>1&&(n-=1),n<1/6?e+6*(t-e)*n:n<.5?t:n<2/3?e+(t-e)*(2/3-n)*6:e}if(e=N(e,360),t=N(t,100),n=N(n,100),0===t)r=i=o=n;else{var A=n<.5?n*(1+t):n+t-n*t,s=2*n-A;r=a(s,A,e+1/3),i=a(s,A,e),o=a(s,A,e-1/3)}return{r:255*r,g:255*i,b:255*o}}(e.h,r,s),c=!0,f=\"hsl\"),e.hasOwnProperty(\"a\")&&(n=e.a));var d,p,h;return n=T(n),{ok:c,format:e.format||f,r:l(255,u(t.r,0)),g:l(255,u(t.g,0)),b:l(255,u(t.b,0)),a:n}}(e);this._originalInput=e,this._r=n.r,this._g=n.g,this._b=n.b,this._a=n.a,this._roundA=s(100*this._a)/100,this._format=t.format||n.format,this._gradientType=t.gradientType,this._r<1&&(this._r=s(this._r)),this._g<1&&(this._g=s(this._g)),this._b<1&&(this._b=s(this._b)),this._ok=n.ok,this._tc_id=A++}function d(e,t,n){e=N(e,255),t=N(t,255),n=N(n,255);var r,i,o=u(e,t,n),a=l(e,t,n),A=(o+a)/2;if(o==a)r=i=0;else{var s=o-a;switch(i=A>.5?s/(2-o-a):s/(o+a),o){case e:r=(t-n)/s+(t<n?6:0);break;case t:r=(n-e)/s+2;break;case n:r=(e-t)/s+4}r/=6}return{h:r,s:i,l:A}}function p(e,t,n){e=N(e,255),t=N(t,255),n=N(n,255);var r,i,o=u(e,t,n),a=l(e,t,n),A=o,s=o-a;if(i=0===o?0:s/o,o==a)r=0;else{switch(o){case e:r=(t-n)/s+(t<n?6:0);break;case t:r=(n-e)/s+2;break;case n:r=(e-t)/s+4}r/=6}return{h:r,s:i,v:A}}function h(e,t,n,r){var i=[R(s(e).toString(16)),R(s(t).toString(16)),R(s(n).toString(16))];return r&&i[0].charAt(0)==i[0].charAt(1)&&i[1].charAt(0)==i[1].charAt(1)&&i[2].charAt(0)==i[2].charAt(1)?i[0].charAt(0)+i[1].charAt(0)+i[2].charAt(0):i.join(\"\")}function g(e,t,n,r){return[R(P(r)),R(s(e).toString(16)),R(s(t).toString(16)),R(s(n).toString(16))].join(\"\")}function v(e,t){t=0===t?0:t||10;var n=f(e).toHsl();return n.s-=t/100,n.s=_(n.s),f(n)}function B(e,t){t=0===t?0:t||10;var n=f(e).toHsl();return n.s+=t/100,n.s=_(n.s),f(n)}function m(e){return f(e).desaturate(100)}function b(e,t){t=0===t?0:t||10;var n=f(e).toHsl();return n.l+=t/100,n.l=_(n.l),f(n)}function w(e,t){t=0===t?0:t||10;var n=f(e).toRgb();return n.r=u(0,l(255,n.r-s(-t/100*255))),n.g=u(0,l(255,n.g-s(-t/100*255))),n.b=u(0,l(255,n.b-s(-t/100*255))),f(n)}function E(e,t){t=0===t?0:t||10;var n=f(e).toHsl();return n.l-=t/100,n.l=_(n.l),f(n)}function y(e,t){var n=f(e).toHsl(),r=(n.h+t)%360;return n.h=r<0?360+r:r,f(n)}function C(e){var t=f(e).toHsl();return t.h=(t.h+180)%360,f(t)}function Q(e){var t=f(e).toHsl(),n=t.h;return[f(e),f({h:(n+120)%360,s:t.s,l:t.l}),f({h:(n+240)%360,s:t.s,l:t.l})]}function x(e){var t=f(e).toHsl(),n=t.h;return[f(e),f({h:(n+90)%360,s:t.s,l:t.l}),f({h:(n+180)%360,s:t.s,l:t.l}),f({h:(n+270)%360,s:t.s,l:t.l})]}function F(e){var t=f(e).toHsl(),n=t.h;return[f(e),f({h:(n+72)%360,s:t.s,l:t.l}),f({h:(n+216)%360,s:t.s,l:t.l})]}function U(e,t,n){t=t||6,n=n||30;var r=f(e).toHsl(),i=360/n,o=[f(e)];for(r.h=(r.h-(i*t>>1)+720)%360;--t;)r.h=(r.h+i)%360,o.push(f(r));return o}function S(e,t){t=t||6;for(var n=f(e).toHsv(),r=n.h,i=n.s,o=n.v,a=[],A=1/t;t--;)a.push(f({h:r,s:i,v:o})),o=(o+A)%1;return a}f.prototype={isDark:function(){return this.getBrightness()<128},isLight:function(){return!this.isDark()},isValid:function(){return this._ok},getOriginalInput:function(){return this._originalInput},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var e=this.toRgb();return(299*e.r+587*e.g+114*e.b)/1e3},getLuminance:function(){var e,t,n,r=this.toRgb();return e=r.r/255,t=r.g/255,n=r.b/255,.2126*(e<=.03928?e/12.92:i.pow((e+.055)/1.055,2.4))+.7152*(t<=.03928?t/12.92:i.pow((t+.055)/1.055,2.4))+.0722*(n<=.03928?n/12.92:i.pow((n+.055)/1.055,2.4))},setAlpha:function(e){return this._a=T(e),this._roundA=s(100*this._a)/100,this},toHsv:function(){var e=p(this._r,this._g,this._b);return{h:360*e.h,s:e.s,v:e.v,a:this._a}},toHsvString:function(){var e=p(this._r,this._g,this._b),t=s(360*e.h),n=s(100*e.s),r=s(100*e.v);return 1==this._a?\"hsv(\"+t+\", \"+n+\"%, \"+r+\"%)\":\"hsva(\"+t+\", \"+n+\"%, \"+r+\"%, \"+this._roundA+\")\"},toHsl:function(){var e=d(this._r,this._g,this._b);return{h:360*e.h,s:e.s,l:e.l,a:this._a}},toHslString:function(){var e=d(this._r,this._g,this._b),t=s(360*e.h),n=s(100*e.s),r=s(100*e.l);return 1==this._a?\"hsl(\"+t+\", \"+n+\"%, \"+r+\"%)\":\"hsla(\"+t+\", \"+n+\"%, \"+r+\"%, \"+this._roundA+\")\"},toHex:function(e){return h(this._r,this._g,this._b,e)},toHexString:function(e){return\"#\"+this.toHex(e)},toHex8:function(e){return function(e,t,n,r,i){var o=[R(s(e).toString(16)),R(s(t).toString(16)),R(s(n).toString(16)),R(P(r))];if(i&&o[0].charAt(0)==o[0].charAt(1)&&o[1].charAt(0)==o[1].charAt(1)&&o[2].charAt(0)==o[2].charAt(1)&&o[3].charAt(0)==o[3].charAt(1))return o[0].charAt(0)+o[1].charAt(0)+o[2].charAt(0)+o[3].charAt(0);return o.join(\"\")}(this._r,this._g,this._b,this._a,e)},toHex8String:function(e){return\"#\"+this.toHex8(e)},toRgb:function(){return{r:s(this._r),g:s(this._g),b:s(this._b),a:this._a}},toRgbString:function(){return 1==this._a?\"rgb(\"+s(this._r)+\", \"+s(this._g)+\", \"+s(this._b)+\")\":\"rgba(\"+s(this._r)+\", \"+s(this._g)+\", \"+s(this._b)+\", \"+this._roundA+\")\"},toPercentageRgb:function(){return{r:s(100*N(this._r,255))+\"%\",g:s(100*N(this._g,255))+\"%\",b:s(100*N(this._b,255))+\"%\",a:this._a}},toPercentageRgbString:function(){return 1==this._a?\"rgb(\"+s(100*N(this._r,255))+\"%, \"+s(100*N(this._g,255))+\"%, \"+s(100*N(this._b,255))+\"%)\":\"rgba(\"+s(100*N(this._r,255))+\"%, \"+s(100*N(this._g,255))+\"%, \"+s(100*N(this._b,255))+\"%, \"+this._roundA+\")\"},toName:function(){return 0===this._a?\"transparent\":!(this._a<1)&&(H[h(this._r,this._g,this._b,!0)]||!1)},toFilter:function(e){var t=\"#\"+g(this._r,this._g,this._b,this._a),n=t,r=this._gradientType?\"GradientType = 1, \":\"\";if(e){var i=f(e);n=\"#\"+g(i._r,i._g,i._b,i._a)}return\"progid:DXImageTransform.Microsoft.gradient(\"+r+\"startColorstr=\"+t+\",endColorstr=\"+n+\")\"},toString:function(e){var t=!!e;e=e||this._format;var n=!1,r=this._a<1&&this._a>=0;return t||!r||\"hex\"!==e&&\"hex6\"!==e&&\"hex3\"!==e&&\"hex4\"!==e&&\"hex8\"!==e&&\"name\"!==e?(\"rgb\"===e&&(n=this.toRgbString()),\"prgb\"===e&&(n=this.toPercentageRgbString()),\"hex\"!==e&&\"hex6\"!==e||(n=this.toHexString()),\"hex3\"===e&&(n=this.toHexString(!0)),\"hex4\"===e&&(n=this.toHex8String(!0)),\"hex8\"===e&&(n=this.toHex8String()),\"name\"===e&&(n=this.toName()),\"hsl\"===e&&(n=this.toHslString()),\"hsv\"===e&&(n=this.toHsvString()),n||this.toHexString()):\"name\"===e&&0===this._a?this.toName():this.toRgbString()},clone:function(){return f(this.toString())},_applyModification:function(e,t){var n=e.apply(null,[this].concat([].slice.call(t)));return this._r=n._r,this._g=n._g,this._b=n._b,this.setAlpha(n._a),this},lighten:function(){return this._applyModification(b,arguments)},brighten:function(){return this._applyModification(w,arguments)},darken:function(){return this._applyModification(E,arguments)},desaturate:function(){return this._applyModification(v,arguments)},saturate:function(){return this._applyModification(B,arguments)},greyscale:function(){return this._applyModification(m,arguments)},spin:function(){return this._applyModification(y,arguments)},_applyCombination:function(e,t){return e.apply(null,[this].concat([].slice.call(t)))},analogous:function(){return this._applyCombination(U,arguments)},complement:function(){return this._applyCombination(C,arguments)},monochromatic:function(){return this._applyCombination(S,arguments)},splitcomplement:function(){return this._applyCombination(F,arguments)},triad:function(){return this._applyCombination(Q,arguments)},tetrad:function(){return this._applyCombination(x,arguments)}},f.fromRatio=function(e,t){if(\"object\"==typeof e){var n={};for(var r in e)e.hasOwnProperty(r)&&(n[r]=\"a\"===r?e[r]:D(e[r]));e=n}return f(e,t)},f.equals=function(e,t){return!(!e||!t)&&f(e).toRgbString()==f(t).toRgbString()},f.random=function(){return f.fromRatio({r:c(),g:c(),b:c()})},f.mix=function(e,t,n){n=0===n?0:n||50;var r=f(e).toRgb(),i=f(t).toRgb(),o=n/100;return f({r:(i.r-r.r)*o+r.r,g:(i.g-r.g)*o+r.g,b:(i.b-r.b)*o+r.b,a:(i.a-r.a)*o+r.a})},f.readability=function(e,t){var n=f(e),r=f(t);return(i.max(n.getLuminance(),r.getLuminance())+.05)/(i.min(n.getLuminance(),r.getLuminance())+.05)},f.isReadable=function(e,t,n){var r,i,o=f.readability(e,t);switch(i=!1,(r=function(e){var t,n;t=((e=e||{level:\"AA\",size:\"small\"}).level||\"AA\").toUpperCase(),n=(e.size||\"small\").toLowerCase(),\"AA\"!==t&&\"AAA\"!==t&&(t=\"AA\");\"small\"!==n&&\"large\"!==n&&(n=\"small\");return{level:t,size:n}}(n)).level+r.size){case\"AAsmall\":case\"AAAlarge\":i=o>=4.5;break;case\"AAlarge\":i=o>=3;break;case\"AAAsmall\":i=o>=7}return i},f.mostReadable=function(e,t,n){var r,i,o,a,A=null,s=0;i=(n=n||{}).includeFallbackColors,o=n.level,a=n.size;for(var l=0;l<t.length;l++)(r=f.readability(e,t[l]))>s&&(s=r,A=f(t[l]));return f.isReadable(e,A,{level:o,size:a})||!i?A:(n.includeFallbackColors=!1,f.mostReadable(e,[\"#fff\",\"#000\"],n))};var O=f.names={aliceblue:\"f0f8ff\",antiquewhite:\"faebd7\",aqua:\"0ff\",aquamarine:\"7fffd4\",azure:\"f0ffff\",beige:\"f5f5dc\",bisque:\"ffe4c4\",black:\"000\",blanchedalmond:\"ffebcd\",blue:\"00f\",blueviolet:\"8a2be2\",brown:\"a52a2a\",burlywood:\"deb887\",burntsienna:\"ea7e5d\",cadetblue:\"5f9ea0\",chartreuse:\"7fff00\",chocolate:\"d2691e\",coral:\"ff7f50\",cornflowerblue:\"6495ed\",cornsilk:\"fff8dc\",crimson:\"dc143c\",cyan:\"0ff\",darkblue:\"00008b\",darkcyan:\"008b8b\",darkgoldenrod:\"b8860b\",darkgray:\"a9a9a9\",darkgreen:\"006400\",darkgrey:\"a9a9a9\",darkkhaki:\"bdb76b\",darkmagenta:\"8b008b\",darkolivegreen:\"556b2f\",darkorange:\"ff8c00\",darkorchid:\"9932cc\",darkred:\"8b0000\",darksalmon:\"e9967a\",darkseagreen:\"8fbc8f\",darkslateblue:\"483d8b\",darkslategray:\"2f4f4f\",darkslategrey:\"2f4f4f\",darkturquoise:\"00ced1\",darkviolet:\"9400d3\",deeppink:\"ff1493\",deepskyblue:\"00bfff\",dimgray:\"696969\",dimgrey:\"696969\",dodgerblue:\"1e90ff\",firebrick:\"b22222\",floralwhite:\"fffaf0\",forestgreen:\"228b22\",fuchsia:\"f0f\",gainsboro:\"dcdcdc\",ghostwhite:\"f8f8ff\",gold:\"ffd700\",goldenrod:\"daa520\",gray:\"808080\",green:\"008000\",greenyellow:\"adff2f\",grey:\"808080\",honeydew:\"f0fff0\",hotpink:\"ff69b4\",indianred:\"cd5c5c\",indigo:\"4b0082\",ivory:\"fffff0\",khaki:\"f0e68c\",lavender:\"e6e6fa\",lavenderblush:\"fff0f5\",lawngreen:\"7cfc00\",lemonchiffon:\"fffacd\",lightblue:\"add8e6\",lightcoral:\"f08080\",lightcyan:\"e0ffff\",lightgoldenrodyellow:\"fafad2\",lightgray:\"d3d3d3\",lightgreen:\"90ee90\",lightgrey:\"d3d3d3\",lightpink:\"ffb6c1\",lightsalmon:\"ffa07a\",lightseagreen:\"20b2aa\",lightskyblue:\"87cefa\",lightslategray:\"789\",lightslategrey:\"789\",lightsteelblue:\"b0c4de\",lightyellow:\"ffffe0\",lime:\"0f0\",limegreen:\"32cd32\",linen:\"faf0e6\",magenta:\"f0f\",maroon:\"800000\",mediumaquamarine:\"66cdaa\",mediumblue:\"0000cd\",mediumorchid:\"ba55d3\",mediumpurple:\"9370db\",mediumseagreen:\"3cb371\",mediumslateblue:\"7b68ee\",mediumspringgreen:\"00fa9a\",mediumturquoise:\"48d1cc\",mediumvioletred:\"c71585\",midnightblue:\"191970\",mintcream:\"f5fffa\",mistyrose:\"ffe4e1\",moccasin:\"ffe4b5\",navajowhite:\"ffdead\",navy:\"000080\",oldlace:\"fdf5e6\",olive:\"808000\",olivedrab:\"6b8e23\",orange:\"ffa500\",orangered:\"ff4500\",orchid:\"da70d6\",palegoldenrod:\"eee8aa\",palegreen:\"98fb98\",paleturquoise:\"afeeee\",palevioletred:\"db7093\",papayawhip:\"ffefd5\",peachpuff:\"ffdab9\",peru:\"cd853f\",pink:\"ffc0cb\",plum:\"dda0dd\",powderblue:\"b0e0e6\",purple:\"800080\",rebeccapurple:\"663399\",red:\"f00\",rosybrown:\"bc8f8f\",royalblue:\"4169e1\",saddlebrown:\"8b4513\",salmon:\"fa8072\",sandybrown:\"f4a460\",seagreen:\"2e8b57\",seashell:\"fff5ee\",sienna:\"a0522d\",silver:\"c0c0c0\",skyblue:\"87ceeb\",slateblue:\"6a5acd\",slategray:\"708090\",slategrey:\"708090\",snow:\"fffafa\",springgreen:\"00ff7f\",steelblue:\"4682b4\",tan:\"d2b48c\",teal:\"008080\",thistle:\"d8bfd8\",tomato:\"ff6347\",turquoise:\"40e0d0\",violet:\"ee82ee\",wheat:\"f5deb3\",white:\"fff\",whitesmoke:\"f5f5f5\",yellow:\"ff0\",yellowgreen:\"9acd32\"},H=f.hexNames=function(e){var t={};for(var n in e)e.hasOwnProperty(n)&&(t[e[n]]=n);return t}(O);function T(e){return e=parseFloat(e),(isNaN(e)||e<0||e>1)&&(e=1),e}function N(e,t){(function(e){return\"string\"==typeof e&&-1!=e.indexOf(\".\")&&1===parseFloat(e)})(e)&&(e=\"100%\");var n=function(e){return\"string\"===typeof e&&-1!=e.indexOf(\"%\")}(e);return e=l(t,u(0,parseFloat(e))),n&&(e=parseInt(e*t,10)/100),i.abs(e-t)<1e-6?1:e%t/parseFloat(t)}function _(e){return l(1,u(0,e))}function M(e){return parseInt(e,16)}function R(e){return 1==e.length?\"0\"+e:\"\"+e}function D(e){return e<=1&&(e=100*e+\"%\"),e}function P(e){return i.round(255*parseFloat(e)).toString(16)}function k(e){return M(e)/255}var I=function(){var e=\"(?:[-\\\\+]?\\\\d*\\\\.\\\\d+%?)|(?:[-\\\\+]?\\\\d+%?)\",t=\"[\\\\s|\\\\(]+(\"+e+\")[,|\\\\s]+(\"+e+\")[,|\\\\s]+(\"+e+\")\\\\s*\\\\)?\",n=\"[\\\\s|\\\\(]+(\"+e+\")[,|\\\\s]+(\"+e+\")[,|\\\\s]+(\"+e+\")[,|\\\\s]+(\"+e+\")\\\\s*\\\\)?\";return{CSS_UNIT:new RegExp(e),rgb:new RegExp(\"rgb\"+t),rgba:new RegExp(\"rgba\"+n),hsl:new RegExp(\"hsl\"+t),hsla:new RegExp(\"hsla\"+n),hsv:new RegExp(\"hsv\"+t),hsva:new RegExp(\"hsva\"+n),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/}}();function K(e){return!!I.CSS_UNIT.exec(e)}e.exports?e.exports=f:void 0===(r=function(){return f}.call(t,n,t,e))||(e.exports=r)}(Math)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Swatch=void 0;var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=s(n(1)),o=s(n(7)),a=n(256),A=s(n(75));function s(e){return e&&e.__esModule?e:{default:e}}var l=t.Swatch=function(e){var t=e.color,n=e.style,a=e.onClick,s=void 0===a?function(){}:a,l=e.onHover,u=e.title,c=void 0===u?t:u,f=e.children,d=e.focus,p=e.focusStyle,h=void 0===p?{}:p,g=\"transparent\"===t,v=(0,o.default)({default:{swatch:r({background:t,height:\"100%\",width:\"100%\",cursor:\"pointer\",position:\"relative\",outline:\"none\"},n,d?h:{})}}),B={};return l&&(B.onMouseOver=function(e){return l(t,e)}),i.default.createElement(\"div\",r({style:v.swatch,onClick:function(e){return s(t,e)},title:c,tabIndex:0,onKeyDown:function(e){return 13===e.keyCode&&s(t,e)}},B),f,g&&i.default.createElement(A.default,{borderRadius:v.swatch.borderRadius,boxShadow:\"inset 0 0 0 1px rgba(0,0,0,0.1)\"}))};t.default=(0,a.handleFocus)(l)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.handleFocus=void 0;var r,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,\"value\"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=n(1),A=(r=a)&&r.__esModule?r:{default:r};function s(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}function l(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!==typeof t&&\"function\"!==typeof t?e:t}function u(e,t){if(\"function\"!==typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.handleFocus=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:\"span\";return function(n){function r(){var e,t,n;s(this,r);for(var i=arguments.length,o=Array(i),a=0;a<i;a++)o[a]=arguments[a];return t=n=l(this,(e=r.__proto__||Object.getPrototypeOf(r)).call.apply(e,[this].concat(o))),n.state={focus:!1},n.handleFocus=function(){return n.setState({focus:!0})},n.handleBlur=function(){return n.setState({focus:!1})},l(n,t)}return u(r,n),o(r,[{key:\"render\",value:function(){return A.default.createElement(t,{onFocus:this.handleFocus,onBlur:this.handleBlur},A.default.createElement(e,i({},this.props,this.state)))}}]),r}(A.default.Component)}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.AlphaPointer=void 0;var r=o(n(1)),i=o(n(7));function o(e){return e&&e.__esModule?e:{default:e}}var a=t.AlphaPointer=function(e){var t=e.direction,n=(0,i.default)({default:{picker:{width:\"18px\",height:\"18px\",borderRadius:\"50%\",transform:\"translate(-9px, -1px)\",backgroundColor:\"rgb(248, 248, 248)\",boxShadow:\"0 1px 4px 0 rgba(0, 0, 0, 0.37)\"}},vertical:{picker:{transform:\"translate(-3px, -9px)\"}}},{vertical:\"vertical\"===t});return r.default.createElement(\"div\",{style:n.picker})};t.default=a},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Block=void 0;var r=u(n(1)),i=u(n(18)),o=u(n(7)),a=u(n(19)),A=u(n(23)),s=n(12),l=u(n(259));function u(e){return e&&e.__esModule?e:{default:e}}var c=t.Block=function(e){var t=e.onChange,n=e.onSwatchHover,i=e.hex,u=e.colors,c=e.width,f=e.triangle,d=e.styles,p=void 0===d?{}:d,h=e.className,g=void 0===h?\"\":h,v=\"transparent\"===i,B=function(e,n){A.default.isValidHex(e)&&t({hex:e,source:\"hex\"},n)},m=(0,o.default)((0,a.default)({default:{card:{width:c,background:\"#fff\",boxShadow:\"0 1px rgba(0,0,0,.1)\",borderRadius:\"6px\",position:\"relative\"},head:{height:\"110px\",background:i,borderRadius:\"6px 6px 0 0\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",position:\"relative\"},body:{padding:\"10px\"},label:{fontSize:\"18px\",color:A.default.getContrastingColor(i),position:\"relative\"},triangle:{width:\"0px\",height:\"0px\",borderStyle:\"solid\",borderWidth:\"0 10px 10px 10px\",borderColor:\"transparent transparent \"+i+\" transparent\",position:\"absolute\",top:\"-10px\",left:\"50%\",marginLeft:\"-10px\"},input:{width:\"100%\",fontSize:\"12px\",color:\"#666\",border:\"0px\",outline:\"none\",height:\"22px\",boxShadow:\"inset 0 0 0 1px #ddd\",borderRadius:\"4px\",padding:\"0 7px\",boxSizing:\"border-box\"}},\"hide-triangle\":{triangle:{display:\"none\"}}},p),{\"hide-triangle\":\"hide\"===f});return r.default.createElement(\"div\",{style:m.card,className:\"block-picker \"+g},r.default.createElement(\"div\",{style:m.triangle}),r.default.createElement(\"div\",{style:m.head},v&&r.default.createElement(s.Checkboard,{borderRadius:\"6px 6px 0 0\"}),r.default.createElement(\"div\",{style:m.label},i)),r.default.createElement(\"div\",{style:m.body},r.default.createElement(l.default,{colors:u,onClick:B,onSwatchHover:n}),r.default.createElement(s.EditableInput,{style:{input:m.input},value:i,onChange:B})))};c.propTypes={width:i.default.oneOfType([i.default.string,i.default.number]),colors:i.default.arrayOf(i.default.string),triangle:i.default.oneOf([\"top\",\"hide\"]),styles:i.default.object},c.defaultProps={width:170,colors:[\"#D9E3F0\",\"#F47373\",\"#697689\",\"#37D67A\",\"#2CCCE4\",\"#555555\",\"#dce775\",\"#ff8a65\",\"#ba68c8\"],triangle:\"top\",styles:{}},t.default=(0,s.ColorWrap)(c)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.BlockSwatches=void 0;var r=A(n(1)),i=A(n(7)),o=A(n(26)),a=n(12);function A(e){return e&&e.__esModule?e:{default:e}}var s=t.BlockSwatches=function(e){var t=e.colors,n=e.onClick,A=e.onSwatchHover,s=(0,i.default)({default:{swatches:{marginRight:\"-10px\"},swatch:{width:\"22px\",height:\"22px\",float:\"left\",marginRight:\"10px\",marginBottom:\"10px\",borderRadius:\"4px\"},clear:{clear:\"both\"}}});return r.default.createElement(\"div\",{style:s.swatches},(0,o.default)(t,(function(e){return r.default.createElement(a.Swatch,{key:e,color:e,style:s.swatch,onClick:n,onHover:A,focusStyle:{boxShadow:\"0 0 4px \"+e}})})),r.default.createElement(\"div\",{style:s.clear}))};t.default=s},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Circle=void 0;var r=c(n(1)),i=c(n(18)),o=c(n(7)),a=c(n(26)),A=c(n(19)),s=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}(n(112)),l=n(12),u=c(n(261));function c(e){return e&&e.__esModule?e:{default:e}}var f=t.Circle=function(e){var t=e.width,n=e.onChange,i=e.onSwatchHover,s=e.colors,l=e.hex,c=e.circleSize,f=e.styles,d=void 0===f?{}:f,p=e.circleSpacing,h=e.className,g=void 0===h?\"\":h,v=(0,o.default)((0,A.default)({default:{card:{width:t,display:\"flex\",flexWrap:\"wrap\",marginRight:-p,marginBottom:-p}}},d)),B=function(e,t){return n({hex:e,source:\"hex\"},t)};return r.default.createElement(\"div\",{style:v.card,className:\"circle-picker \"+g},(0,a.default)(s,(function(e){return r.default.createElement(u.default,{key:e,color:e,onClick:B,onSwatchHover:i,active:l===e.toLowerCase(),circleSize:c,circleSpacing:p})})))};f.propTypes={width:i.default.oneOfType([i.default.string,i.default.number]),circleSize:i.default.number,circleSpacing:i.default.number,styles:i.default.object},f.defaultProps={width:252,circleSize:28,circleSpacing:14,colors:[s.red[500],s.pink[500],s.purple[500],s.deepPurple[500],s.indigo[500],s.blue[500],s.lightBlue[500],s.cyan[500],s.teal[500],s.green[500],s.lightGreen[500],s.lime[500],s.yellow[500],s.amber[500],s.orange[500],s.deepOrange[500],s.brown[500],s.blueGrey[500]],styles:{}},t.default=(0,l.ColorWrap)(f)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.CircleSwatch=void 0;var r=A(n(1)),i=n(7),o=A(i),a=n(12);function A(e){return e&&e.__esModule?e:{default:e}}var s=t.CircleSwatch=function(e){var t=e.color,n=e.onClick,i=e.onSwatchHover,A=e.hover,s=e.active,l=e.circleSize,u=e.circleSpacing,c=(0,o.default)({default:{swatch:{width:l,height:l,marginRight:u,marginBottom:u,transform:\"scale(1)\",transition:\"100ms transform ease\"},Swatch:{borderRadius:\"50%\",background:\"transparent\",boxShadow:\"inset 0 0 0 \"+(l/2+1)+\"px \"+t,transition:\"100ms box-shadow ease\"}},hover:{swatch:{transform:\"scale(1.2)\"}},active:{Swatch:{boxShadow:\"inset 0 0 0 3px \"+t}}},{hover:A,active:s});return r.default.createElement(\"div\",{style:c.swatch},r.default.createElement(a.Swatch,{style:c.Swatch,color:t,onClick:n,onHover:i,focusStyle:{boxShadow:c.Swatch.boxShadow+\", 0 0 5px \"+t}}))};s.defaultProps={circleSize:28,circleSpacing:14},t.default=(0,i.handleHover)(s)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Chrome=void 0;var r=c(n(1)),i=c(n(18)),o=c(n(7)),a=c(n(19)),A=n(12),s=c(n(263)),l=c(n(266)),u=c(n(267));function c(e){return e&&e.__esModule?e:{default:e}}var f=t.Chrome=function(e){var t=e.width,n=e.onChange,i=e.disableAlpha,c=e.rgb,f=e.hsl,d=e.hsv,p=e.hex,h=e.renderers,g=e.styles,v=void 0===g?{}:g,B=e.className,m=void 0===B?\"\":B,b=e.defaultView,w=(0,o.default)((0,a.default)({default:{picker:{width:t,background:\"#fff\",borderRadius:\"2px\",boxShadow:\"0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3)\",boxSizing:\"initial\",fontFamily:\"Menlo\"},saturation:{width:\"100%\",paddingBottom:\"55%\",position:\"relative\",borderRadius:\"2px 2px 0 0\",overflow:\"hidden\"},Saturation:{radius:\"2px 2px 0 0\"},body:{padding:\"16px 16px 12px\"},controls:{display:\"flex\"},color:{width:\"32px\"},swatch:{marginTop:\"6px\",width:\"16px\",height:\"16px\",borderRadius:\"8px\",position:\"relative\",overflow:\"hidden\"},active:{absolute:\"0px 0px 0px 0px\",borderRadius:\"8px\",boxShadow:\"inset 0 0 0 1px rgba(0,0,0,.1)\",background:\"rgba(\"+c.r+\", \"+c.g+\", \"+c.b+\", \"+c.a+\")\",zIndex:\"2\"},toggles:{flex:\"1\"},hue:{height:\"10px\",position:\"relative\",marginBottom:\"8px\"},Hue:{radius:\"2px\"},alpha:{height:\"10px\",position:\"relative\"},Alpha:{radius:\"2px\"}},disableAlpha:{color:{width:\"22px\"},alpha:{display:\"none\"},hue:{marginBottom:\"0px\"},swatch:{width:\"10px\",height:\"10px\",marginTop:\"0px\"}}},v),{disableAlpha:i});return r.default.createElement(\"div\",{style:w.picker,className:\"chrome-picker \"+m},r.default.createElement(\"div\",{style:w.saturation},r.default.createElement(A.Saturation,{style:w.Saturation,hsl:f,hsv:d,pointer:u.default,onChange:n})),r.default.createElement(\"div\",{style:w.body},r.default.createElement(\"div\",{style:w.controls,className:\"flexbox-fix\"},r.default.createElement(\"div\",{style:w.color},r.default.createElement(\"div\",{style:w.swatch},r.default.createElement(\"div\",{style:w.active}),r.default.createElement(A.Checkboard,{renderers:h}))),r.default.createElement(\"div\",{style:w.toggles},r.default.createElement(\"div\",{style:w.hue},r.default.createElement(A.Hue,{style:w.Hue,hsl:f,pointer:l.default,onChange:n})),r.default.createElement(\"div\",{style:w.alpha},r.default.createElement(A.Alpha,{style:w.Alpha,rgb:c,hsl:f,pointer:l.default,renderers:h,onChange:n})))),r.default.createElement(s.default,{rgb:c,hsl:f,hex:p,view:b,onChange:n,disableAlpha:i})))};f.propTypes={width:i.default.oneOfType([i.default.string,i.default.number]),disableAlpha:i.default.bool,styles:i.default.object,defaultView:i.default.oneOf([\"hex\",\"rgb\",\"hsl\"])},f.defaultProps={width:225,disableAlpha:!1,styles:{}},t.default=(0,A.ColorWrap)(f)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.ChromeFields=void 0;var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,\"value\"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=u(n(1)),o=u(n(7)),a=u(n(23)),A=u(n(264)),s=n(12),l=u(n(265));function u(e){return e&&e.__esModule?e:{default:e}}var c=t.ChromeFields=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}(this,t);var n=function(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!==typeof t&&\"function\"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return n.toggleViews=function(){\"hex\"===n.state.view?n.setState({view:\"rgb\"}):\"rgb\"===n.state.view?n.setState({view:\"hsl\"}):\"hsl\"===n.state.view&&(1===n.props.hsl.a?n.setState({view:\"hex\"}):n.setState({view:\"rgb\"}))},n.handleChange=function(e,t){e.hex?a.default.isValidHex(e.hex)&&n.props.onChange({hex:e.hex,source:\"hex\"},t):e.r||e.g||e.b?n.props.onChange({r:e.r||n.props.rgb.r,g:e.g||n.props.rgb.g,b:e.b||n.props.rgb.b,source:\"rgb\"},t):e.a?(e.a<0?e.a=0:e.a>1&&(e.a=1),n.props.onChange({h:n.props.hsl.h,s:n.props.hsl.s,l:n.props.hsl.l,a:Math.round(100*e.a)/100,source:\"rgb\"},t)):(e.h||e.s||e.l)&&(\"string\"===typeof e.s&&e.s.includes(\"%\")&&(e.s=e.s.replace(\"%\",\"\")),\"string\"===typeof e.l&&e.l.includes(\"%\")&&(e.l=e.l.replace(\"%\",\"\")),1==e.s?e.s=.01:1==e.l&&(e.l=.01),n.props.onChange({h:e.h||n.props.hsl.h,s:Number((0,A.default)(e.s)?n.props.hsl.s:e.s),l:Number((0,A.default)(e.l)?n.props.hsl.l:e.l),source:\"hsl\"},t))},n.showHighlight=function(e){e.currentTarget.style.background=\"#eee\"},n.hideHighlight=function(e){e.currentTarget.style.background=\"transparent\"},1!==e.hsl.a&&\"hex\"===e.view?n.state={view:\"rgb\"}:n.state={view:e.view},n}return function(e,t){if(\"function\"!==typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),r(t,[{key:\"render\",value:function(){var e=this,t=(0,o.default)({default:{wrap:{paddingTop:\"16px\",display:\"flex\"},fields:{flex:\"1\",display:\"flex\",marginLeft:\"-6px\"},field:{paddingLeft:\"6px\",width:\"100%\"},alpha:{paddingLeft:\"6px\",width:\"100%\"},toggle:{width:\"32px\",textAlign:\"right\",position:\"relative\"},icon:{marginRight:\"-4px\",marginTop:\"12px\",cursor:\"pointer\",position:\"relative\"},iconHighlight:{position:\"absolute\",width:\"24px\",height:\"28px\",background:\"#eee\",borderRadius:\"4px\",top:\"10px\",left:\"12px\",display:\"none\"},input:{fontSize:\"11px\",color:\"#333\",width:\"100%\",borderRadius:\"2px\",border:\"none\",boxShadow:\"inset 0 0 0 1px #dadada\",height:\"21px\",textAlign:\"center\"},label:{textTransform:\"uppercase\",fontSize:\"11px\",lineHeight:\"11px\",color:\"#969696\",textAlign:\"center\",display:\"block\",marginTop:\"12px\"},svg:{fill:\"#333\",width:\"24px\",height:\"24px\",border:\"1px transparent solid\",borderRadius:\"5px\"}},disableAlpha:{alpha:{display:\"none\"}}},this.props,this.state),n=void 0;return\"hex\"===this.state.view?n=i.default.createElement(\"div\",{style:t.fields,className:\"flexbox-fix\"},i.default.createElement(\"div\",{style:t.field},i.default.createElement(s.EditableInput,{style:{input:t.input,label:t.label},label:\"hex\",value:this.props.hex,onChange:this.handleChange}))):\"rgb\"===this.state.view?n=i.default.createElement(\"div\",{style:t.fields,className:\"flexbox-fix\"},i.default.createElement(\"div\",{style:t.field},i.default.createElement(s.EditableInput,{style:{input:t.input,label:t.label},label:\"r\",value:this.props.rgb.r,onChange:this.handleChange})),i.default.createElement(\"div\",{style:t.field},i.default.createElement(s.EditableInput,{style:{input:t.input,label:t.label},label:\"g\",value:this.props.rgb.g,onChange:this.handleChange})),i.default.createElement(\"div\",{style:t.field},i.default.createElement(s.EditableInput,{style:{input:t.input,label:t.label},label:\"b\",value:this.props.rgb.b,onChange:this.handleChange})),i.default.createElement(\"div\",{style:t.alpha},i.default.createElement(s.EditableInput,{style:{input:t.input,label:t.label},label:\"a\",value:this.props.rgb.a,arrowOffset:.01,onChange:this.handleChange}))):\"hsl\"===this.state.view&&(n=i.default.createElement(\"div\",{style:t.fields,className:\"flexbox-fix\"},i.default.createElement(\"div\",{style:t.field},i.default.createElement(s.EditableInput,{style:{input:t.input,label:t.label},label:\"h\",value:Math.round(this.props.hsl.h),onChange:this.handleChange})),i.default.createElement(\"div\",{style:t.field},i.default.createElement(s.EditableInput,{style:{input:t.input,label:t.label},label:\"s\",value:Math.round(100*this.props.hsl.s)+\"%\",onChange:this.handleChange})),i.default.createElement(\"div\",{style:t.field},i.default.createElement(s.EditableInput,{style:{input:t.input,label:t.label},label:\"l\",value:Math.round(100*this.props.hsl.l)+\"%\",onChange:this.handleChange})),i.default.createElement(\"div\",{style:t.alpha},i.default.createElement(s.EditableInput,{style:{input:t.input,label:t.label},label:\"a\",value:this.props.hsl.a,arrowOffset:.01,onChange:this.handleChange})))),i.default.createElement(\"div\",{style:t.wrap,className:\"flexbox-fix\"},n,i.default.createElement(\"div\",{style:t.toggle},i.default.createElement(\"div\",{style:t.icon,onClick:this.toggleViews,ref:function(t){return e.icon=t}},i.default.createElement(l.default,{style:t.svg,onMouseOver:this.showHighlight,onMouseEnter:this.showHighlight,onMouseOut:this.hideHighlight}))))}}],[{key:\"getDerivedStateFromProps\",value:function(e,t){return 1!==e.hsl.a&&\"hex\"===t.view?{view:\"rgb\"}:null}}]),t}(i.default.Component);c.defaultProps={view:\"hex\"},t.default=c},function(e,t){e.exports=function(e){return void 0===e}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0});var r,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o=n(1),a=(r=o)&&r.__esModule?r:{default:r};t.default=function(e){var t=e.fill,n=void 0===t?\"currentColor\":t,r=e.width,o=void 0===r?24:r,A=e.height,s=void 0===A?24:A,l=e.style,u=void 0===l?{}:l,c=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(e,[\"fill\",\"width\",\"height\",\"style\"]);return a.default.createElement(\"svg\",i({viewBox:\"0 0 24 24\",style:i({fill:n,width:o,height:s},u)},c),a.default.createElement(\"path\",{d:\"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z\"}))}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.ChromePointer=void 0;var r=o(n(1)),i=o(n(7));function o(e){return e&&e.__esModule?e:{default:e}}var a=t.ChromePointer=function(){var e=(0,i.default)({default:{picker:{width:\"12px\",height:\"12px\",borderRadius:\"6px\",transform:\"translate(-6px, -1px)\",backgroundColor:\"rgb(248, 248, 248)\",boxShadow:\"0 1px 4px 0 rgba(0, 0, 0, 0.37)\"}}});return r.default.createElement(\"div\",{style:e.picker})};t.default=a},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.ChromePointerCircle=void 0;var r=o(n(1)),i=o(n(7));function o(e){return e&&e.__esModule?e:{default:e}}var a=t.ChromePointerCircle=function(){var e=(0,i.default)({default:{picker:{width:\"12px\",height:\"12px\",borderRadius:\"6px\",boxShadow:\"inset 0 0 0 1px #fff\",transform:\"translate(-6px, -6px)\"}}});return r.default.createElement(\"div\",{style:e.picker})};t.default=a},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Compact=void 0;var r=f(n(1)),i=f(n(18)),o=f(n(7)),a=f(n(26)),A=f(n(19)),s=f(n(23)),l=n(12),u=f(n(269)),c=f(n(270));function f(e){return e&&e.__esModule?e:{default:e}}var d=t.Compact=function(e){var t=e.onChange,n=e.onSwatchHover,i=e.colors,f=e.hex,d=e.rgb,p=e.styles,h=void 0===p?{}:p,g=e.className,v=void 0===g?\"\":g,B=(0,o.default)((0,A.default)({default:{Compact:{background:\"#f6f6f6\",radius:\"4px\"},compact:{paddingTop:\"5px\",paddingLeft:\"5px\",boxSizing:\"initial\",width:\"240px\"},clear:{clear:\"both\"}}},h)),m=function(e,n){e.hex?s.default.isValidHex(e.hex)&&t({hex:e.hex,source:\"hex\"},n):t(e,n)};return r.default.createElement(l.Raised,{style:B.Compact,styles:h},r.default.createElement(\"div\",{style:B.compact,className:\"compact-picker \"+v},r.default.createElement(\"div\",null,(0,a.default)(i,(function(e){return r.default.createElement(u.default,{key:e,color:e,active:e.toLowerCase()===f,onClick:m,onSwatchHover:n})})),r.default.createElement(\"div\",{style:B.clear})),r.default.createElement(c.default,{hex:f,rgb:d,onChange:m})))};d.propTypes={colors:i.default.arrayOf(i.default.string),styles:i.default.object},d.defaultProps={colors:[\"#4D4D4D\",\"#999999\",\"#FFFFFF\",\"#F44E3B\",\"#FE9200\",\"#FCDC00\",\"#DBDF00\",\"#A4DD00\",\"#68CCCA\",\"#73D8FF\",\"#AEA1FF\",\"#FDA1FF\",\"#333333\",\"#808080\",\"#cccccc\",\"#D33115\",\"#E27300\",\"#FCC400\",\"#B0BC00\",\"#68BC00\",\"#16A5A5\",\"#009CE0\",\"#7B64FF\",\"#FA28FF\",\"#000000\",\"#666666\",\"#B3B3B3\",\"#9F0500\",\"#C45100\",\"#FB9E00\",\"#808900\",\"#194D33\",\"#0C797D\",\"#0062B1\",\"#653294\",\"#AB149E\"],styles:{}},t.default=(0,l.ColorWrap)(d)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.CompactColor=void 0;var r=A(n(1)),i=A(n(7)),o=A(n(23)),a=n(12);function A(e){return e&&e.__esModule?e:{default:e}}var s=t.CompactColor=function(e){var t=e.color,n=e.onClick,A=void 0===n?function(){}:n,s=e.onSwatchHover,l=e.active,u=(0,i.default)({default:{color:{background:t,width:\"15px\",height:\"15px\",float:\"left\",marginRight:\"5px\",marginBottom:\"5px\",position:\"relative\",cursor:\"pointer\"},dot:{absolute:\"5px 5px 5px 5px\",background:o.default.getContrastingColor(t),borderRadius:\"50%\",opacity:\"0\"}},active:{dot:{opacity:\"1\"}},\"color-#FFFFFF\":{color:{boxShadow:\"inset 0 0 0 1px #ddd\"},dot:{background:\"#000\"}},transparent:{dot:{background:\"#000\"}}},{active:l,\"color-#FFFFFF\":\"#FFFFFF\"===t,transparent:\"transparent\"===t});return r.default.createElement(a.Swatch,{style:u.color,color:t,onClick:A,onHover:s,focusStyle:{boxShadow:\"0 0 4px \"+t}},r.default.createElement(\"div\",{style:u.dot}))};t.default=s},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.CompactFields=void 0;var r=a(n(1)),i=a(n(7)),o=n(12);function a(e){return e&&e.__esModule?e:{default:e}}var A=t.CompactFields=function(e){var t=e.hex,n=e.rgb,a=e.onChange,A=(0,i.default)({default:{fields:{display:\"flex\",paddingBottom:\"6px\",paddingRight:\"5px\",position:\"relative\"},active:{position:\"absolute\",top:\"6px\",left:\"5px\",height:\"9px\",width:\"9px\",background:t},HEXwrap:{flex:\"6\",position:\"relative\"},HEXinput:{width:\"80%\",padding:\"0px\",paddingLeft:\"20%\",border:\"none\",outline:\"none\",background:\"none\",fontSize:\"12px\",color:\"#333\",height:\"16px\"},HEXlabel:{display:\"none\"},RGBwrap:{flex:\"3\",position:\"relative\"},RGBinput:{width:\"70%\",padding:\"0px\",paddingLeft:\"30%\",border:\"none\",outline:\"none\",background:\"none\",fontSize:\"12px\",color:\"#333\",height:\"16px\"},RGBlabel:{position:\"absolute\",top:\"3px\",left:\"0px\",lineHeight:\"16px\",textTransform:\"uppercase\",fontSize:\"12px\",color:\"#999\"}}}),s=function(e,t){e.r||e.g||e.b?a({r:e.r||n.r,g:e.g||n.g,b:e.b||n.b,source:\"rgb\"},t):a({hex:e.hex,source:\"hex\"},t)};return r.default.createElement(\"div\",{style:A.fields,className:\"flexbox-fix\"},r.default.createElement(\"div\",{style:A.active}),r.default.createElement(o.EditableInput,{style:{wrap:A.HEXwrap,input:A.HEXinput,label:A.HEXlabel},label:\"hex\",value:t,onChange:s}),r.default.createElement(o.EditableInput,{style:{wrap:A.RGBwrap,input:A.RGBinput,label:A.RGBlabel},label:\"r\",value:n.r,onChange:s}),r.default.createElement(o.EditableInput,{style:{wrap:A.RGBwrap,input:A.RGBinput,label:A.RGBlabel},label:\"g\",value:n.g,onChange:s}),r.default.createElement(o.EditableInput,{style:{wrap:A.RGBwrap,input:A.RGBinput,label:A.RGBlabel},label:\"b\",value:n.b,onChange:s}))};t.default=A},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Github=void 0;var r=u(n(1)),i=u(n(18)),o=u(n(7)),a=u(n(26)),A=u(n(19)),s=n(12),l=u(n(272));function u(e){return e&&e.__esModule?e:{default:e}}var c=t.Github=function(e){var t=e.width,n=e.colors,i=e.onChange,s=e.onSwatchHover,u=e.triangle,c=e.styles,f=void 0===c?{}:c,d=e.className,p=void 0===d?\"\":d,h=(0,o.default)((0,A.default)({default:{card:{width:t,background:\"#fff\",border:\"1px solid rgba(0,0,0,0.2)\",boxShadow:\"0 3px 12px rgba(0,0,0,0.15)\",borderRadius:\"4px\",position:\"relative\",padding:\"5px\",display:\"flex\",flexWrap:\"wrap\"},triangle:{position:\"absolute\",border:\"7px solid transparent\",borderBottomColor:\"#fff\"},triangleShadow:{position:\"absolute\",border:\"8px solid transparent\",borderBottomColor:\"rgba(0,0,0,0.15)\"}},\"hide-triangle\":{triangle:{display:\"none\"},triangleShadow:{display:\"none\"}},\"top-left-triangle\":{triangle:{top:\"-14px\",left:\"10px\"},triangleShadow:{top:\"-16px\",left:\"9px\"}},\"top-right-triangle\":{triangle:{top:\"-14px\",right:\"10px\"},triangleShadow:{top:\"-16px\",right:\"9px\"}},\"bottom-left-triangle\":{triangle:{top:\"35px\",left:\"10px\",transform:\"rotate(180deg)\"},triangleShadow:{top:\"37px\",left:\"9px\",transform:\"rotate(180deg)\"}},\"bottom-right-triangle\":{triangle:{top:\"35px\",right:\"10px\",transform:\"rotate(180deg)\"},triangleShadow:{top:\"37px\",right:\"9px\",transform:\"rotate(180deg)\"}}},f),{\"hide-triangle\":\"hide\"===u,\"top-left-triangle\":\"top-left\"===u,\"top-right-triangle\":\"top-right\"===u,\"bottom-left-triangle\":\"bottom-left\"===u,\"bottom-right-triangle\":\"bottom-right\"===u}),g=function(e,t){return i({hex:e,source:\"hex\"},t)};return r.default.createElement(\"div\",{style:h.card,className:\"github-picker \"+p},r.default.createElement(\"div\",{style:h.triangleShadow}),r.default.createElement(\"div\",{style:h.triangle}),(0,a.default)(n,(function(e){return r.default.createElement(l.default,{color:e,key:e,onClick:g,onSwatchHover:s})})))};c.propTypes={width:i.default.oneOfType([i.default.string,i.default.number]),colors:i.default.arrayOf(i.default.string),triangle:i.default.oneOf([\"hide\",\"top-left\",\"top-right\",\"bottom-left\",\"bottom-right\"]),styles:i.default.object},c.defaultProps={width:200,colors:[\"#B80000\",\"#DB3E00\",\"#FCCB00\",\"#008B02\",\"#006B76\",\"#1273DE\",\"#004DCF\",\"#5300EB\",\"#EB9694\",\"#FAD0C3\",\"#FEF3BD\",\"#C1E1C5\",\"#BEDADC\",\"#C4DEF6\",\"#BED3F3\",\"#D4C4FB\"],triangle:\"top-left\",styles:{}},t.default=(0,s.ColorWrap)(c)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.GithubSwatch=void 0;var r=A(n(1)),i=n(7),o=A(i),a=n(12);function A(e){return e&&e.__esModule?e:{default:e}}var s=t.GithubSwatch=function(e){var t=e.hover,n=e.color,i=e.onClick,A=e.onSwatchHover,s={position:\"relative\",zIndex:\"2\",outline:\"2px solid #fff\",boxShadow:\"0 0 5px 2px rgba(0,0,0,0.25)\"},l=(0,o.default)({default:{swatch:{width:\"25px\",height:\"25px\",fontSize:\"0\"}},hover:{swatch:s}},{hover:t});return r.default.createElement(\"div\",{style:l.swatch},r.default.createElement(a.Swatch,{color:n,onClick:i,onHover:A,focusStyle:s}))};t.default=(0,i.handleHover)(s)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.HuePicker=void 0;var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=u(n(1)),o=u(n(18)),a=u(n(7)),A=u(n(19)),s=n(12),l=u(n(274));function u(e){return e&&e.__esModule?e:{default:e}}var c=t.HuePicker=function(e){var t=e.width,n=e.height,o=e.onChange,l=e.hsl,u=e.direction,c=e.pointer,f=e.styles,d=void 0===f?{}:f,p=e.className,h=void 0===p?\"\":p,g=(0,a.default)((0,A.default)({default:{picker:{position:\"relative\",width:t,height:n},hue:{radius:\"2px\"}}},d));return i.default.createElement(\"div\",{style:g.picker,className:\"hue-picker \"+h},i.default.createElement(s.Hue,r({},g.hue,{hsl:l,pointer:c,onChange:function(e){return o({a:1,h:e.h,l:.5,s:1})},direction:u})))};c.propTypes={styles:o.default.object},c.defaultProps={width:\"316px\",height:\"16px\",direction:\"horizontal\",pointer:l.default,styles:{}},t.default=(0,s.ColorWrap)(c)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.SliderPointer=void 0;var r=o(n(1)),i=o(n(7));function o(e){return e&&e.__esModule?e:{default:e}}var a=t.SliderPointer=function(e){var t=e.direction,n=(0,i.default)({default:{picker:{width:\"18px\",height:\"18px\",borderRadius:\"50%\",transform:\"translate(-9px, -1px)\",backgroundColor:\"rgb(248, 248, 248)\",boxShadow:\"0 1px 4px 0 rgba(0, 0, 0, 0.37)\"}},vertical:{picker:{transform:\"translate(-3px, -9px)\"}}},{vertical:\"vertical\"===t});return r.default.createElement(\"div\",{style:n.picker})};t.default=a},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Material=void 0;var r=s(n(1)),i=s(n(7)),o=s(n(19)),a=s(n(23)),A=n(12);function s(e){return e&&e.__esModule?e:{default:e}}var l=t.Material=function(e){var t=e.onChange,n=e.hex,s=e.rgb,l=e.styles,u=void 0===l?{}:l,c=e.className,f=void 0===c?\"\":c,d=(0,i.default)((0,o.default)({default:{material:{width:\"98px\",height:\"98px\",padding:\"16px\",fontFamily:\"Roboto\"},HEXwrap:{position:\"relative\"},HEXinput:{width:\"100%\",marginTop:\"12px\",fontSize:\"15px\",color:\"#333\",padding:\"0px\",border:\"0px\",borderBottom:\"2px solid \"+n,outline:\"none\",height:\"30px\"},HEXlabel:{position:\"absolute\",top:\"0px\",left:\"0px\",fontSize:\"11px\",color:\"#999999\",textTransform:\"capitalize\"},Hex:{style:{}},RGBwrap:{position:\"relative\"},RGBinput:{width:\"100%\",marginTop:\"12px\",fontSize:\"15px\",color:\"#333\",padding:\"0px\",border:\"0px\",borderBottom:\"1px solid #eee\",outline:\"none\",height:\"30px\"},RGBlabel:{position:\"absolute\",top:\"0px\",left:\"0px\",fontSize:\"11px\",color:\"#999999\",textTransform:\"capitalize\"},split:{display:\"flex\",marginRight:\"-10px\",paddingTop:\"11px\"},third:{flex:\"1\",paddingRight:\"10px\"}}},u)),p=function(e,n){e.hex?a.default.isValidHex(e.hex)&&t({hex:e.hex,source:\"hex\"},n):(e.r||e.g||e.b)&&t({r:e.r||s.r,g:e.g||s.g,b:e.b||s.b,source:\"rgb\"},n)};return r.default.createElement(A.Raised,{styles:u},r.default.createElement(\"div\",{style:d.material,className:\"material-picker \"+f},r.default.createElement(A.EditableInput,{style:{wrap:d.HEXwrap,input:d.HEXinput,label:d.HEXlabel},label:\"hex\",value:n,onChange:p}),r.default.createElement(\"div\",{style:d.split,className:\"flexbox-fix\"},r.default.createElement(\"div\",{style:d.third},r.default.createElement(A.EditableInput,{style:{wrap:d.RGBwrap,input:d.RGBinput,label:d.RGBlabel},label:\"r\",value:s.r,onChange:p})),r.default.createElement(\"div\",{style:d.third},r.default.createElement(A.EditableInput,{style:{wrap:d.RGBwrap,input:d.RGBinput,label:d.RGBlabel},label:\"g\",value:s.g,onChange:p})),r.default.createElement(\"div\",{style:d.third},r.default.createElement(A.EditableInput,{style:{wrap:d.RGBwrap,input:d.RGBinput,label:d.RGBlabel},label:\"b\",value:s.b,onChange:p})))))};t.default=(0,A.ColorWrap)(l)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Photoshop=void 0;var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,\"value\"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=p(n(1)),o=p(n(18)),a=p(n(7)),A=p(n(19)),s=n(12),l=p(n(277)),u=p(n(278)),c=p(n(279)),f=p(n(280)),d=p(n(281));function p(e){return e&&e.__esModule?e:{default:e}}var h=t.Photoshop=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}(this,t);var n=function(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!==typeof t&&\"function\"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return n.state={currentColor:e.hex},n}return function(e,t){if(\"function\"!==typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),r(t,[{key:\"render\",value:function(){var e=this.props,t=e.styles,n=void 0===t?{}:t,r=e.className,o=void 0===r?\"\":r,p=(0,a.default)((0,A.default)({default:{picker:{background:\"#DCDCDC\",borderRadius:\"4px\",boxShadow:\"0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15)\",boxSizing:\"initial\",width:\"513px\"},head:{backgroundImage:\"linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%)\",borderBottom:\"1px solid #B1B1B1\",boxShadow:\"inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02)\",height:\"23px\",lineHeight:\"24px\",borderRadius:\"4px 4px 0 0\",fontSize:\"13px\",color:\"#4D4D4D\",textAlign:\"center\"},body:{padding:\"15px 15px 0\",display:\"flex\"},saturation:{width:\"256px\",height:\"256px\",position:\"relative\",border:\"2px solid #B3B3B3\",borderBottom:\"2px solid #F0F0F0\",overflow:\"hidden\"},hue:{position:\"relative\",height:\"256px\",width:\"19px\",marginLeft:\"10px\",border:\"2px solid #B3B3B3\",borderBottom:\"2px solid #F0F0F0\"},controls:{width:\"180px\",marginLeft:\"10px\"},top:{display:\"flex\"},previews:{width:\"60px\"},actions:{flex:\"1\",marginLeft:\"20px\"}}},n));return i.default.createElement(\"div\",{style:p.picker,className:\"photoshop-picker \"+o},i.default.createElement(\"div\",{style:p.head},this.props.header),i.default.createElement(\"div\",{style:p.body,className:\"flexbox-fix\"},i.default.createElement(\"div\",{style:p.saturation},i.default.createElement(s.Saturation,{hsl:this.props.hsl,hsv:this.props.hsv,pointer:u.default,onChange:this.props.onChange})),i.default.createElement(\"div\",{style:p.hue},i.default.createElement(s.Hue,{direction:\"vertical\",hsl:this.props.hsl,pointer:c.default,onChange:this.props.onChange})),i.default.createElement(\"div\",{style:p.controls},i.default.createElement(\"div\",{style:p.top,className:\"flexbox-fix\"},i.default.createElement(\"div\",{style:p.previews},i.default.createElement(d.default,{rgb:this.props.rgb,currentColor:this.state.currentColor})),i.default.createElement(\"div\",{style:p.actions},i.default.createElement(f.default,{label:\"OK\",onClick:this.props.onAccept,active:!0}),i.default.createElement(f.default,{label:\"Cancel\",onClick:this.props.onCancel}),i.default.createElement(l.default,{onChange:this.props.onChange,rgb:this.props.rgb,hsv:this.props.hsv,hex:this.props.hex}))))))}}]),t}(i.default.Component);h.propTypes={header:o.default.string,styles:o.default.object},h.defaultProps={header:\"Color Picker\",styles:{}},t.default=(0,s.ColorWrap)(h)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.PhotoshopPicker=void 0;var r=A(n(1)),i=A(n(7)),o=A(n(23)),a=n(12);function A(e){return e&&e.__esModule?e:{default:e}}var s=t.PhotoshopPicker=function(e){var t=e.onChange,n=e.rgb,A=e.hsv,s=e.hex,l=(0,i.default)({default:{fields:{paddingTop:\"5px\",paddingBottom:\"9px\",width:\"80px\",position:\"relative\"},divider:{height:\"5px\"},RGBwrap:{position:\"relative\"},RGBinput:{marginLeft:\"40%\",width:\"40%\",height:\"18px\",border:\"1px solid #888888\",boxShadow:\"inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC\",marginBottom:\"5px\",fontSize:\"13px\",paddingLeft:\"3px\",marginRight:\"10px\"},RGBlabel:{left:\"0px\",width:\"34px\",textTransform:\"uppercase\",fontSize:\"13px\",height:\"18px\",lineHeight:\"22px\",position:\"absolute\"},HEXwrap:{position:\"relative\"},HEXinput:{marginLeft:\"20%\",width:\"80%\",height:\"18px\",border:\"1px solid #888888\",boxShadow:\"inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC\",marginBottom:\"6px\",fontSize:\"13px\",paddingLeft:\"3px\"},HEXlabel:{position:\"absolute\",top:\"0px\",left:\"0px\",width:\"14px\",textTransform:\"uppercase\",fontSize:\"13px\",height:\"18px\",lineHeight:\"22px\"},fieldSymbols:{position:\"absolute\",top:\"5px\",right:\"-7px\",fontSize:\"13px\"},symbol:{height:\"20px\",lineHeight:\"22px\",paddingBottom:\"7px\"}}}),u=function(e,r){e[\"#\"]?o.default.isValidHex(e[\"#\"])&&t({hex:e[\"#\"],source:\"hex\"},r):e.r||e.g||e.b?t({r:e.r||n.r,g:e.g||n.g,b:e.b||n.b,source:\"rgb\"},r):(e.h||e.s||e.v)&&t({h:e.h||A.h,s:e.s||A.s,v:e.v||A.v,source:\"hsv\"},r)};return r.default.createElement(\"div\",{style:l.fields},r.default.createElement(a.EditableInput,{style:{wrap:l.RGBwrap,input:l.RGBinput,label:l.RGBlabel},label:\"h\",value:Math.round(A.h),onChange:u}),r.default.createElement(a.EditableInput,{style:{wrap:l.RGBwrap,input:l.RGBinput,label:l.RGBlabel},label:\"s\",value:Math.round(100*A.s),onChange:u}),r.default.createElement(a.EditableInput,{style:{wrap:l.RGBwrap,input:l.RGBinput,label:l.RGBlabel},label:\"v\",value:Math.round(100*A.v),onChange:u}),r.default.createElement(\"div\",{style:l.divider}),r.default.createElement(a.EditableInput,{style:{wrap:l.RGBwrap,input:l.RGBinput,label:l.RGBlabel},label:\"r\",value:n.r,onChange:u}),r.default.createElement(a.EditableInput,{style:{wrap:l.RGBwrap,input:l.RGBinput,label:l.RGBlabel},label:\"g\",value:n.g,onChange:u}),r.default.createElement(a.EditableInput,{style:{wrap:l.RGBwrap,input:l.RGBinput,label:l.RGBlabel},label:\"b\",value:n.b,onChange:u}),r.default.createElement(\"div\",{style:l.divider}),r.default.createElement(a.EditableInput,{style:{wrap:l.HEXwrap,input:l.HEXinput,label:l.HEXlabel},label:\"#\",value:s.replace(\"#\",\"\"),onChange:u}),r.default.createElement(\"div\",{style:l.fieldSymbols},r.default.createElement(\"div\",{style:l.symbol},\"\\xb0\"),r.default.createElement(\"div\",{style:l.symbol},\"%\"),r.default.createElement(\"div\",{style:l.symbol},\"%\")))};t.default=s},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.PhotoshopPointerCircle=void 0;var r=o(n(1)),i=o(n(7));function o(e){return e&&e.__esModule?e:{default:e}}var a=t.PhotoshopPointerCircle=function(e){var t=e.hsl,n=(0,i.default)({default:{picker:{width:\"12px\",height:\"12px\",borderRadius:\"6px\",boxShadow:\"inset 0 0 0 1px #fff\",transform:\"translate(-6px, -6px)\"}},\"black-outline\":{picker:{boxShadow:\"inset 0 0 0 1px #000\"}}},{\"black-outline\":t.l>.5});return r.default.createElement(\"div\",{style:n.picker})};t.default=a},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.PhotoshopPointerCircle=void 0;var r=o(n(1)),i=o(n(7));function o(e){return e&&e.__esModule?e:{default:e}}var a=t.PhotoshopPointerCircle=function(){var e=(0,i.default)({default:{triangle:{width:0,height:0,borderStyle:\"solid\",borderWidth:\"4px 0 4px 6px\",borderColor:\"transparent transparent transparent #fff\",position:\"absolute\",top:\"1px\",left:\"1px\"},triangleBorder:{width:0,height:0,borderStyle:\"solid\",borderWidth:\"5px 0 5px 8px\",borderColor:\"transparent transparent transparent #555\"},left:{Extend:\"triangleBorder\",transform:\"translate(-13px, -4px)\"},leftInside:{Extend:\"triangle\",transform:\"translate(-8px, -5px)\"},right:{Extend:\"triangleBorder\",transform:\"translate(20px, -14px) rotate(180deg)\"},rightInside:{Extend:\"triangle\",transform:\"translate(-8px, -5px)\"}}});return r.default.createElement(\"div\",{style:e.pointer},r.default.createElement(\"div\",{style:e.left},r.default.createElement(\"div\",{style:e.leftInside})),r.default.createElement(\"div\",{style:e.right},r.default.createElement(\"div\",{style:e.rightInside})))};t.default=a},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.PhotoshopButton=void 0;var r=o(n(1)),i=o(n(7));function o(e){return e&&e.__esModule?e:{default:e}}var a=t.PhotoshopButton=function(e){var t=e.onClick,n=e.label,o=e.children,a=e.active,A=(0,i.default)({default:{button:{backgroundImage:\"linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%)\",border:\"1px solid #878787\",borderRadius:\"2px\",height:\"20px\",boxShadow:\"0 1px 0 0 #EAEAEA\",fontSize:\"14px\",color:\"#000\",lineHeight:\"20px\",textAlign:\"center\",marginBottom:\"10px\",cursor:\"pointer\"}},active:{button:{boxShadow:\"0 0 0 1px #878787\"}}},{active:a});return r.default.createElement(\"div\",{style:A.button,onClick:t},n||o)};t.default=a},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.PhotoshopPreviews=void 0;var r=o(n(1)),i=o(n(7));function o(e){return e&&e.__esModule?e:{default:e}}var a=t.PhotoshopPreviews=function(e){var t=e.rgb,n=e.currentColor,o=(0,i.default)({default:{swatches:{border:\"1px solid #B3B3B3\",borderBottom:\"1px solid #F0F0F0\",marginBottom:\"2px\",marginTop:\"1px\"},new:{height:\"34px\",background:\"rgb(\"+t.r+\",\"+t.g+\", \"+t.b+\")\",boxShadow:\"inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000\"},current:{height:\"34px\",background:n,boxShadow:\"inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000\"},label:{fontSize:\"14px\",color:\"#000\",textAlign:\"center\"}}});return r.default.createElement(\"div\",null,r.default.createElement(\"div\",{style:o.label},\"new\"),r.default.createElement(\"div\",{style:o.swatches},r.default.createElement(\"div\",{style:o.new}),r.default.createElement(\"div\",{style:o.current})),r.default.createElement(\"div\",{style:o.label},\"current\"))};t.default=a},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Sketch=void 0;var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=c(n(1)),o=c(n(18)),a=c(n(7)),A=c(n(19)),s=n(12),l=c(n(283)),u=c(n(284));function c(e){return e&&e.__esModule?e:{default:e}}var f=t.Sketch=function(e){var t=e.width,n=e.rgb,o=e.hex,c=e.hsv,f=e.hsl,d=e.onChange,p=e.onSwatchHover,h=e.disableAlpha,g=e.presetColors,v=e.renderers,B=e.styles,m=void 0===B?{}:B,b=e.className,w=void 0===b?\"\":b,E=(0,a.default)((0,A.default)({default:r({picker:{width:t,padding:\"10px 10px 0\",boxSizing:\"initial\",background:\"#fff\",borderRadius:\"4px\",boxShadow:\"0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)\"},saturation:{width:\"100%\",paddingBottom:\"75%\",position:\"relative\",overflow:\"hidden\"},Saturation:{radius:\"3px\",shadow:\"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)\"},controls:{display:\"flex\"},sliders:{padding:\"4px 0\",flex:\"1\"},color:{width:\"24px\",height:\"24px\",position:\"relative\",marginTop:\"4px\",marginLeft:\"4px\",borderRadius:\"3px\"},activeColor:{absolute:\"0px 0px 0px 0px\",borderRadius:\"2px\",background:\"rgba(\"+n.r+\",\"+n.g+\",\"+n.b+\",\"+n.a+\")\",boxShadow:\"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)\"},hue:{position:\"relative\",height:\"10px\",overflow:\"hidden\"},Hue:{radius:\"2px\",shadow:\"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)\"},alpha:{position:\"relative\",height:\"10px\",marginTop:\"4px\",overflow:\"hidden\"},Alpha:{radius:\"2px\",shadow:\"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)\"}},m),disableAlpha:{color:{height:\"10px\"},hue:{height:\"10px\"},alpha:{display:\"none\"}}},m),{disableAlpha:h});return i.default.createElement(\"div\",{style:E.picker,className:\"sketch-picker \"+w},i.default.createElement(\"div\",{style:E.saturation},i.default.createElement(s.Saturation,{style:E.Saturation,hsl:f,hsv:c,onChange:d})),i.default.createElement(\"div\",{style:E.controls,className:\"flexbox-fix\"},i.default.createElement(\"div\",{style:E.sliders},i.default.createElement(\"div\",{style:E.hue},i.default.createElement(s.Hue,{style:E.Hue,hsl:f,onChange:d})),i.default.createElement(\"div\",{style:E.alpha},i.default.createElement(s.Alpha,{style:E.Alpha,rgb:n,hsl:f,renderers:v,onChange:d}))),i.default.createElement(\"div\",{style:E.color},i.default.createElement(s.Checkboard,null),i.default.createElement(\"div\",{style:E.activeColor}))),i.default.createElement(l.default,{rgb:n,hsl:f,hex:o,onChange:d,disableAlpha:h}),i.default.createElement(u.default,{colors:g,onClick:d,onSwatchHover:p}))};f.propTypes={disableAlpha:o.default.bool,width:o.default.oneOfType([o.default.string,o.default.number]),styles:o.default.object},f.defaultProps={disableAlpha:!1,width:200,styles:{},presetColors:[\"#D0021B\",\"#F5A623\",\"#F8E71C\",\"#8B572A\",\"#7ED321\",\"#417505\",\"#BD10E0\",\"#9013FE\",\"#4A90E2\",\"#50E3C2\",\"#B8E986\",\"#000000\",\"#4A4A4A\",\"#9B9B9B\",\"#FFFFFF\"]},t.default=(0,s.ColorWrap)(f)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.SketchFields=void 0;var r=A(n(1)),i=A(n(7)),o=A(n(23)),a=n(12);function A(e){return e&&e.__esModule?e:{default:e}}var s=t.SketchFields=function(e){var t=e.onChange,n=e.rgb,A=e.hsl,s=e.hex,l=e.disableAlpha,u=(0,i.default)({default:{fields:{display:\"flex\",paddingTop:\"4px\"},single:{flex:\"1\",paddingLeft:\"6px\"},alpha:{flex:\"1\",paddingLeft:\"6px\"},double:{flex:\"2\"},input:{width:\"80%\",padding:\"4px 10% 3px\",border:\"none\",boxShadow:\"inset 0 0 0 1px #ccc\",fontSize:\"11px\"},label:{display:\"block\",textAlign:\"center\",fontSize:\"11px\",color:\"#222\",paddingTop:\"3px\",paddingBottom:\"4px\",textTransform:\"capitalize\"}},disableAlpha:{alpha:{display:\"none\"}}},{disableAlpha:l}),c=function(e,r){e.hex?o.default.isValidHex(e.hex)&&t({hex:e.hex,source:\"hex\"},r):e.r||e.g||e.b?t({r:e.r||n.r,g:e.g||n.g,b:e.b||n.b,a:n.a,source:\"rgb\"},r):e.a&&(e.a<0?e.a=0:e.a>100&&(e.a=100),e.a/=100,t({h:A.h,s:A.s,l:A.l,a:e.a,source:\"rgb\"},r))};return r.default.createElement(\"div\",{style:u.fields,className:\"flexbox-fix\"},r.default.createElement(\"div\",{style:u.double},r.default.createElement(a.EditableInput,{style:{input:u.input,label:u.label},label:\"hex\",value:s.replace(\"#\",\"\"),onChange:c})),r.default.createElement(\"div\",{style:u.single},r.default.createElement(a.EditableInput,{style:{input:u.input,label:u.label},label:\"r\",value:n.r,onChange:c,dragLabel:\"true\",dragMax:\"255\"})),r.default.createElement(\"div\",{style:u.single},r.default.createElement(a.EditableInput,{style:{input:u.input,label:u.label},label:\"g\",value:n.g,onChange:c,dragLabel:\"true\",dragMax:\"255\"})),r.default.createElement(\"div\",{style:u.single},r.default.createElement(a.EditableInput,{style:{input:u.input,label:u.label},label:\"b\",value:n.b,onChange:c,dragLabel:\"true\",dragMax:\"255\"})),r.default.createElement(\"div\",{style:u.alpha},r.default.createElement(a.EditableInput,{style:{input:u.input,label:u.label},label:\"a\",value:Math.round(100*n.a),onChange:c,dragLabel:\"true\",dragMax:\"100\"})))};t.default=s},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.SketchPresetColors=void 0;var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=s(n(1)),o=s(n(18)),a=s(n(7)),A=n(12);function s(e){return e&&e.__esModule?e:{default:e}}var l=t.SketchPresetColors=function(e){var t=e.colors,n=e.onClick,o=void 0===n?function(){}:n,s=e.onSwatchHover,l=(0,a.default)({default:{colors:{margin:\"0 -10px\",padding:\"10px 0 0 10px\",borderTop:\"1px solid #eee\",display:\"flex\",flexWrap:\"wrap\",position:\"relative\"},swatchWrap:{width:\"16px\",height:\"16px\",margin:\"0 10px 10px 0\"},swatch:{borderRadius:\"3px\",boxShadow:\"inset 0 0 0 1px rgba(0,0,0,.15)\"}},\"no-presets\":{colors:{display:\"none\"}}},{\"no-presets\":!t||!t.length}),u=function(e,t){o({hex:e,source:\"hex\"},t)};return i.default.createElement(\"div\",{style:l.colors,className:\"flexbox-fix\"},t.map((function(e){var t=\"string\"===typeof e?{color:e}:e,n=\"\"+t.color+(t.title||\"\");return i.default.createElement(\"div\",{key:n,style:l.swatchWrap},i.default.createElement(A.Swatch,r({},t,{style:l.swatch,onClick:u,onHover:s,focusStyle:{boxShadow:\"inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px \"+t.color}})))})))};l.propTypes={colors:o.default.arrayOf(o.default.oneOfType([o.default.string,o.default.shape({color:o.default.string,title:o.default.string})])).isRequired},t.default=l},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Slider=void 0;var r=u(n(1)),i=u(n(18)),o=u(n(7)),a=u(n(19)),A=n(12),s=u(n(286)),l=u(n(288));function u(e){return e&&e.__esModule?e:{default:e}}var c=t.Slider=function(e){var t=e.hsl,n=e.onChange,i=e.pointer,l=e.styles,u=void 0===l?{}:l,c=e.className,f=void 0===c?\"\":c,d=(0,o.default)((0,a.default)({default:{hue:{height:\"12px\",position:\"relative\"},Hue:{radius:\"2px\"}}},u));return r.default.createElement(\"div\",{style:d.wrap||{},className:\"slider-picker \"+f},r.default.createElement(\"div\",{style:d.hue},r.default.createElement(A.Hue,{style:d.Hue,hsl:t,pointer:i,onChange:n})),r.default.createElement(\"div\",{style:d.swatches},r.default.createElement(s.default,{hsl:t,onClick:n})))};c.propTypes={styles:i.default.object},c.defaultProps={pointer:l.default,styles:{}},t.default=(0,A.ColorWrap)(c)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.SliderSwatches=void 0;var r=a(n(1)),i=a(n(7)),o=a(n(287));function a(e){return e&&e.__esModule?e:{default:e}}var A=t.SliderSwatches=function(e){var t=e.onClick,n=e.hsl,a=(0,i.default)({default:{swatches:{marginTop:\"20px\"},swatch:{boxSizing:\"border-box\",width:\"20%\",paddingRight:\"1px\",float:\"left\"},clear:{clear:\"both\"}}});return r.default.createElement(\"div\",{style:a.swatches},r.default.createElement(\"div\",{style:a.swatch},r.default.createElement(o.default,{hsl:n,offset:\".80\",active:Math.abs(n.l-.8)<.1&&Math.abs(n.s-.5)<.1,onClick:t,first:!0})),r.default.createElement(\"div\",{style:a.swatch},r.default.createElement(o.default,{hsl:n,offset:\".65\",active:Math.abs(n.l-.65)<.1&&Math.abs(n.s-.5)<.1,onClick:t})),r.default.createElement(\"div\",{style:a.swatch},r.default.createElement(o.default,{hsl:n,offset:\".50\",active:Math.abs(n.l-.5)<.1&&Math.abs(n.s-.5)<.1,onClick:t})),r.default.createElement(\"div\",{style:a.swatch},r.default.createElement(o.default,{hsl:n,offset:\".35\",active:Math.abs(n.l-.35)<.1&&Math.abs(n.s-.5)<.1,onClick:t})),r.default.createElement(\"div\",{style:a.swatch},r.default.createElement(o.default,{hsl:n,offset:\".20\",active:Math.abs(n.l-.2)<.1&&Math.abs(n.s-.5)<.1,onClick:t,last:!0})),r.default.createElement(\"div\",{style:a.clear}))};t.default=A},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.SliderSwatch=void 0;var r=o(n(1)),i=o(n(7));function o(e){return e&&e.__esModule?e:{default:e}}var a=t.SliderSwatch=function(e){var t=e.hsl,n=e.offset,o=e.onClick,a=void 0===o?function(){}:o,A=e.active,s=e.first,l=e.last,u=(0,i.default)({default:{swatch:{height:\"12px\",background:\"hsl(\"+t.h+\", 50%, \"+100*n+\"%)\",cursor:\"pointer\"}},first:{swatch:{borderRadius:\"2px 0 0 2px\"}},last:{swatch:{borderRadius:\"0 2px 2px 0\"}},active:{swatch:{transform:\"scaleY(1.8)\",borderRadius:\"3.6px/2px\"}}},{active:A,first:s,last:l});return r.default.createElement(\"div\",{style:u.swatch,onClick:function(e){return a({h:t.h,s:.5,l:n,source:\"hsl\"},e)}})};t.default=a},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.SliderPointer=void 0;var r=o(n(1)),i=o(n(7));function o(e){return e&&e.__esModule?e:{default:e}}var a=t.SliderPointer=function(){var e=(0,i.default)({default:{picker:{width:\"14px\",height:\"14px\",borderRadius:\"6px\",transform:\"translate(-7px, -1px)\",backgroundColor:\"rgb(248, 248, 248)\",boxShadow:\"0 1px 4px 0 rgba(0, 0, 0, 0.37)\"}}});return r.default.createElement(\"div\",{style:e.picker})};t.default=a},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Swatches=void 0;var r=c(n(1)),i=c(n(18)),o=c(n(7)),a=c(n(26)),A=c(n(19)),s=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}(n(112)),l=n(12),u=c(n(290));function c(e){return e&&e.__esModule?e:{default:e}}var f=t.Swatches=function(e){var t=e.width,n=e.height,i=e.onChange,s=e.onSwatchHover,c=e.colors,f=e.hex,d=e.styles,p=void 0===d?{}:d,h=e.className,g=void 0===h?\"\":h,v=(0,o.default)((0,A.default)({default:{picker:{width:t,height:n},overflow:{height:n,overflowY:\"scroll\"},body:{padding:\"16px 0 6px 16px\"},clear:{clear:\"both\"}}},p)),B=function(e,t){return i({hex:e,source:\"hex\"},t)};return r.default.createElement(\"div\",{style:v.picker,className:\"swatches-picker \"+g},r.default.createElement(l.Raised,null,r.default.createElement(\"div\",{style:v.overflow},r.default.createElement(\"div\",{style:v.body},(0,a.default)(c,(function(e){return r.default.createElement(u.default,{key:e.toString(),group:e,active:f,onClick:B,onSwatchHover:s})})),r.default.createElement(\"div\",{style:v.clear})))))};f.propTypes={width:i.default.oneOfType([i.default.string,i.default.number]),height:i.default.oneOfType([i.default.string,i.default.number]),colors:i.default.arrayOf(i.default.arrayOf(i.default.string)),styles:i.default.object},f.defaultProps={width:320,height:240,colors:[[s.red[900],s.red[700],s.red[500],s.red[300],s.red[100]],[s.pink[900],s.pink[700],s.pink[500],s.pink[300],s.pink[100]],[s.purple[900],s.purple[700],s.purple[500],s.purple[300],s.purple[100]],[s.deepPurple[900],s.deepPurple[700],s.deepPurple[500],s.deepPurple[300],s.deepPurple[100]],[s.indigo[900],s.indigo[700],s.indigo[500],s.indigo[300],s.indigo[100]],[s.blue[900],s.blue[700],s.blue[500],s.blue[300],s.blue[100]],[s.lightBlue[900],s.lightBlue[700],s.lightBlue[500],s.lightBlue[300],s.lightBlue[100]],[s.cyan[900],s.cyan[700],s.cyan[500],s.cyan[300],s.cyan[100]],[s.teal[900],s.teal[700],s.teal[500],s.teal[300],s.teal[100]],[\"#194D33\",s.green[700],s.green[500],s.green[300],s.green[100]],[s.lightGreen[900],s.lightGreen[700],s.lightGreen[500],s.lightGreen[300],s.lightGreen[100]],[s.lime[900],s.lime[700],s.lime[500],s.lime[300],s.lime[100]],[s.yellow[900],s.yellow[700],s.yellow[500],s.yellow[300],s.yellow[100]],[s.amber[900],s.amber[700],s.amber[500],s.amber[300],s.amber[100]],[s.orange[900],s.orange[700],s.orange[500],s.orange[300],s.orange[100]],[s.deepOrange[900],s.deepOrange[700],s.deepOrange[500],s.deepOrange[300],s.deepOrange[100]],[s.brown[900],s.brown[700],s.brown[500],s.brown[300],s.brown[100]],[s.blueGrey[900],s.blueGrey[700],s.blueGrey[500],s.blueGrey[300],s.blueGrey[100]],[\"#000000\",\"#525252\",\"#969696\",\"#D9D9D9\",\"#FFFFFF\"]],styles:{}},t.default=(0,l.ColorWrap)(f)},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.SwatchesGroup=void 0;var r=A(n(1)),i=A(n(7)),o=A(n(26)),a=A(n(291));function A(e){return e&&e.__esModule?e:{default:e}}var s=t.SwatchesGroup=function(e){var t=e.onClick,n=e.onSwatchHover,A=e.group,s=e.active,l=(0,i.default)({default:{group:{paddingBottom:\"10px\",width:\"40px\",float:\"left\",marginRight:\"10px\"}}});return r.default.createElement(\"div\",{style:l.group},(0,o.default)(A,(function(e,i){return r.default.createElement(a.default,{key:e,color:e,active:e.toLowerCase()===s,first:0===i,last:i===A.length-1,onClick:t,onSwatchHover:n})})))};t.default=s},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.SwatchesColor=void 0;var r=s(n(1)),i=s(n(7)),o=s(n(23)),a=n(12),A=s(n(292));function s(e){return e&&e.__esModule?e:{default:e}}var l=t.SwatchesColor=function(e){var t=e.color,n=e.onClick,s=void 0===n?function(){}:n,l=e.onSwatchHover,u=e.first,c=e.last,f=e.active,d=(0,i.default)({default:{color:{width:\"40px\",height:\"24px\",cursor:\"pointer\",background:t,marginBottom:\"1px\"},check:{color:o.default.getContrastingColor(t),marginLeft:\"8px\",display:\"none\"}},first:{color:{overflow:\"hidden\",borderRadius:\"2px 2px 0 0\"}},last:{color:{overflow:\"hidden\",borderRadius:\"0 0 2px 2px\"}},active:{check:{display:\"block\"}},\"color-#FFFFFF\":{color:{boxShadow:\"inset 0 0 0 1px #ddd\"},check:{color:\"#333\"}},transparent:{check:{color:\"#333\"}}},{first:u,last:c,active:f,\"color-#FFFFFF\":\"#FFFFFF\"===t,transparent:\"transparent\"===t});return r.default.createElement(a.Swatch,{color:t,style:d.color,onClick:s,onHover:l,focusStyle:{boxShadow:\"0 0 4px \"+t}},r.default.createElement(\"div\",{style:d.check},r.default.createElement(A.default,null)))};t.default=l},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0});var r,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o=n(1),a=(r=o)&&r.__esModule?r:{default:r};t.default=function(e){var t=e.fill,n=void 0===t?\"currentColor\":t,r=e.width,o=void 0===r?24:r,A=e.height,s=void 0===A?24:A,l=e.style,u=void 0===l?{}:l,c=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(e,[\"fill\",\"width\",\"height\",\"style\"]);return a.default.createElement(\"svg\",i({viewBox:\"0 0 24 24\",style:i({fill:n,width:o,height:s},u)},c),a.default.createElement(\"path\",{d:\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"}))}},function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0}),t.Twitter=void 0;var r=u(n(1)),i=u(n(18)),o=u(n(7)),a=u(n(26)),A=u(n(19)),s=u(n(23)),l=n(12);function u(e){return e&&e.__esModule?e:{default:e}}var c=t.Twitter=function(e){var t=e.onChange,n=e.onSwatchHover,i=e.hex,u=e.colors,c=e.width,f=e.triangle,d=e.styles,p=void 0===d?{}:d,h=e.className,g=void 0===h?\"\":h,v=(0,o.default)((0,A.default)({default:{card:{width:c,background:\"#fff\",border:\"0 solid rgba(0,0,0,0.25)\",boxShadow:\"0 1px 4px rgba(0,0,0,0.25)\",borderRadius:\"4px\",position:\"relative\"},body:{padding:\"15px 9px 9px 15px\"},label:{fontSize:\"18px\",color:\"#fff\"},triangle:{width:\"0px\",height:\"0px\",borderStyle:\"solid\",borderWidth:\"0 9px 10px 9px\",borderColor:\"transparent transparent #fff transparent\",position:\"absolute\"},triangleShadow:{width:\"0px\",height:\"0px\",borderStyle:\"solid\",borderWidth:\"0 9px 10px 9px\",borderColor:\"transparent transparent rgba(0,0,0,.1) transparent\",position:\"absolute\"},hash:{background:\"#F0F0F0\",height:\"30px\",width:\"30px\",borderRadius:\"4px 0 0 4px\",float:\"left\",color:\"#98A1A4\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},input:{width:\"100px\",fontSize:\"14px\",color:\"#666\",border:\"0px\",outline:\"none\",height:\"28px\",boxShadow:\"inset 0 0 0 1px #F0F0F0\",boxSizing:\"content-box\",borderRadius:\"0 4px 4px 0\",float:\"left\",paddingLeft:\"8px\"},swatch:{width:\"30px\",height:\"30px\",float:\"left\",borderRadius:\"4px\",margin:\"0 6px 6px 0\"},clear:{clear:\"both\"}},\"hide-triangle\":{triangle:{display:\"none\"},triangleShadow:{display:\"none\"}},\"top-left-triangle\":{triangle:{top:\"-10px\",left:\"12px\"},triangleShadow:{top:\"-11px\",left:\"12px\"}},\"top-right-triangle\":{triangle:{top:\"-10px\",right:\"12px\"},triangleShadow:{top:\"-11px\",right:\"12px\"}}},p),{\"hide-triangle\":\"hide\"===f,\"top-left-triangle\":\"top-left\"===f,\"top-right-triangle\":\"top-right\"===f}),B=function(e,n){s.default.isValidHex(e)&&t({hex:e,source:\"hex\"},n)};return r.default.createElement(\"div\",{style:v.card,className:\"twitter-picker \"+g},r.default.createElement(\"div\",{style:v.triangleShadow}),r.default.createElement(\"div\",{style:v.triangle}),r.default.createElement(\"div\",{style:v.body},(0,a.default)(u,(function(e,t){return r.default.createElement(l.Swatch,{key:t,color:e,hex:e,style:v.swatch,onClick:B,onHover:n,focusStyle:{boxShadow:\"0 0 4px \"+e}})})),r.default.createElement(\"div\",{style:v.hash},\"#\"),r.default.createElement(l.EditableInput,{label:null,style:{input:v.input},value:i.replace(\"#\",\"\"),onChange:B}),r.default.createElement(\"div\",{style:v.clear})))};c.propTypes={width:i.default.oneOfType([i.default.string,i.default.number]),triangle:i.default.oneOf([\"hide\",\"top-left\",\"top-right\"]),colors:i.default.arrayOf(i.default.string),styles:i.default.object},c.defaultProps={width:276,colors:[\"#FF6900\",\"#FCB900\",\"#7BDCB5\",\"#00D084\",\"#8ED1FC\",\"#0693E3\",\"#ABB8C3\",\"#EB144C\",\"#F78DA7\",\"#9900EF\"],triangle:\"top-left\",styles:{}},t.default=(0,l.ColorWrap)(c)}]]);\n//# sourceMappingURL=2.8e0d6703.chunk.js.map"
  },
  {
    "path": "demo/static/js/2.8e0d6703.chunk.js.LICENSE.txt",
    "content": "/*\nobject-assign\n(c) Sindre Sorhus\n@license MIT\n*/\n\n/*!\n   * Programatically add the following\n   */\n\n/*!\n * html2canvas 1.0.0-rc.7 <https://html2canvas.hertzen.com>\n * Copyright (c) 2020 Niklas von Hertzen <https://hertzen.com>\n * Released under MIT License\n */\n\n/*! *****************************************************************************\n  Copyright (c) Microsoft Corporation. All rights reserved.\n  Licensed under the Apache License, Version 2.0 (the \"License\"); you may not use\n  this file except in compliance with the License. You may obtain a copy of the\n  License at http://www.apache.org/licenses/LICENSE-2.0\n    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n  KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\n  WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\n  MERCHANTABLITY OR NON-INFRINGEMENT.\n    See the Apache Version 2.0 License for specific language governing permissions\n  and limitations under the License.\n  ***************************************************************************** */\n\n/*! *****************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n\n/*! *****************************************************************************\nCopyright (c) Microsoft Corporation. All rights reserved.\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\nthis file except in compliance with the License. You may obtain a copy of the\nLicense at http://www.apache.org/licenses/LICENSE-2.0\n\nTHIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\nKIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\nWARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\nMERCHANTABLITY OR NON-INFRINGEMENT.\n\nSee the Apache Version 2.0 License for specific language governing permissions\nand limitations under the License.\n***************************************************************************** */\n\n/** @license React v0.19.1\n * scheduler.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/** @license React v16.13.1\n * react-dom.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/** @license React v16.13.1\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n"
  },
  {
    "path": "demo/static/js/main.4efc5ba5.chunk.js",
    "content": "(this[\"webpackJsonp@scena/react-editor\"]=this[\"webpackJsonp@scena/react-editor\"]||[]).push([[0],{11:function(e,t,n){\"use strict\";n.d(t,\"c\",(function(){return a})),n.d(t,\"e\",(function(){return o})),n.d(t,\"a\",(function(){return i})),n.d(t,\"f\",(function(){return c})),n.d(t,\"b\",(function(){return s})),n.d(t,\"d\",(function(){return l}));var r=n(1),a=[\"memory\",\"eventBus\",\"keyManager\",\"moveableData\",\"moveableManager\",\"historyManager\",\"console\",\"getViewport\",\"getSelecto\",\"getEditorElement\",\"getSelectedTargets\",\"selectMenu\",\"getSelectedFrames\"],o=\"scena-\",i=\"data-scena-element-id\",c=\"application/x-scena-layers\",s='\\n@import url(\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap\");\\n\\n{\\n    position: relative;\\n    width: 100%;\\n    height: 100%;\\n    font-family: sans-serif;\\n    --mainColor: #4af;\\n    --back1: #1a1a1a;\\n    --back2: #2a2a2a;\\n    --back3: #333;\\n    --back4: #444;\\n    --back5: #555;\\n    --back6: #666;\\n    transform-style: preserve-3d;\\n\\n    --menu: 45px;\\n\\n    --tabs: 40px;\\n    --tab: 200px;\\n}\\n\\n[class*=\"scena-\"] {\\n    font-family: \"Open Sans\", sans-serif;\\n}\\n\\n.scena-viewer {\\n    position: absolute !important;\\n    left: calc(30px + var(--menu));\\n    top: 30px;\\n    width: calc(100% - 30px - var(--menu) - var(--tabs));\\n    height: calc(100% - 30px);\\n}\\n\\n.scena-viewport-container {\\n    position: relative;\\n}\\n.scena-viewport {\\n    position: relative;\\n    width: 100%;\\n    height: 100%;\\n    box-sizing: border-box;\\n}\\n.scena-viewport:before {\\n    content: \"\";\\n    position: absolute;\\n    border: 1px solid #eee;\\n    top: 0;\\n    left: 0;\\n    width: 100%;\\n    height: 100%;\\n    pointer-events: none;\\n}\\n\\n.scena-guides {\\n    position: absolute !important;\\n    top: 0;\\n    left: 0;\\n    transform: translateZ(1px);\\n}\\n\\n.scena-guides.scena-horizontal {\\n    left: calc(var(--menu) + 30px);\\n    width: calc(100% - 30px - var(--menu) - var(--tabs));\\n    height: 30px !important;\\n}\\n\\n.scena-guides.scena-vertical {\\n    top: 30px;\\n    left: var(--menu);\\n    height: calc(100% - 30px);\\n    width: 30px !important;\\n}\\n\\n.scena-reset {\\n    position: absolute !important;\\n    background: var(--back3);\\n    width: 30px;\\n    height: 30px;\\n    z-index: 1;\\n    border-right: 1px solid var(--back4);\\n    border-bottom: 1px solid var(--back4);\\n    box-sizing: border-box;\\n    cursor: pointer;\\n    left: var(--menu);\\n    top: 0px;\\n}\\n\\n.scena-overlay {\\n    position: fixed;\\n    left: 0;\\n    top: 0;\\n    width: 100%;\\n    height: 100%;\\n    z-index: 100;\\n    background: rgba(0, 0, 0, 0.2);\\n}\\n.moveable-dimension {\\n    position: absolute;\\n    background: var(--mainColor);\\n    border-radius: 2px;\\n    padding: 1px 3px;\\n    color: white;\\n    font-size: 13px;\\n    white-space: nowrap;\\n    font-weight: bold;\\n    will-change: transform;\\n    transform: translate(-50%) translateZ(0px);\\n}\\n.scena-frame-tab {\\n    overflow: auto;\\n    max-height: 300px;\\n}\\n\\n.scena-overlay {\\n    position: fixed;\\n    left: 0;\\n    top: 0;\\n    width: 100%;\\n    height: 100%;\\n    z-index: 100;\\n    transform-style: preserve-3d;\\n    transform: translateZ(15px);\\n    background: rgba(0, 0, 0, 0.2);\\n}\\n\\n.scena-popup {\\n    position: absolute;\\n    max-width: 600px;\\n    width: 80%;\\n    max-height: 1000px;\\n    padding: 30px;\\n    height: 80%;\\n    overflow: auto;\\n    left: 50%;\\n    top: 50%;\\n    transform: translate(-50%, -50%);\\n    font-size: 14px;\\n    background: var(--back3);\\n    box-sizing: border-box;\\n    color: #fff;\\n}\\n.scena-popup h2 {\\n    padding: 0;\\n    margin: 0;\\n    padding: 4px;\\n}\\n.scena-popup .scena-close {\\n    position: absolute;\\n    top: 30px;\\n    right: 30px;\\n    width: 40px;\\n    height: 40px;\\n    cursor: pointer;\\n}\\n.scena-popup .scena-close:before, .scena-popup .scena-close:after {\\n    content: \"\";\\n    position: absolute;\\n    width: 30px;\\n    height: 1px;\\n    background: #ddd;\\n    top: 50%;\\n    left: 50%;\\n}\\n.scena-popup .scena-close:hover:before, .scena-popup .scena-close:hover:after {\\n    height: 2px;\\n    background: #fff;\\n    border-radius: 1px;\\n}\\n.scena-popup .scena-close:before {\\n    transform: translate(-50%, -50%) rotate(45deg);\\n}\\n.scena-popup .scena-close:after {\\n    transform: translate(-50%, -50%) rotate(-45deg);\\n}\\n.scena-popup ul {\\n    list-style: none;\\n    padding: 0;\\n}\\n.scena-popup li {\\n    padding: 4px 10px;\\n    border-bottom: 1px solid var(--back2);\\n    font-weight: bold;;\\n}\\n.scena-popup li:hover {\\n    background: #fff;\\n    color: var(--back2);\\n}\\n.scena-popup p {\\n    position: relative;\\n    padding: 2px 0px;\\n}\\n.scena-popup strong {\\n    position: absolute;\\n    right: 0;\\n    text-transform: uppercase;\\n}\\n.scena-popup strong span {\\n    display: inline-block;\\n    padding: 2px 4px;\\n    border: 1px solid #fff;\\n    vertical-align: top;\\n    margin: 0px 5px;\\n}\\n\\n.scena-align {\\n    position: relative;\\n    width: 25px;\\n    height: 25px;\\n    /* background: #f55; */\\n    display: inline-block;\\n    margin-right: 5px;\\n}\\n.scena-align:hover {\\n    cursor: pointer;\\n}\\n.scena-align:hover * {\\n    background: white;\\n}\\n.scena-align-line,\\n.scena-align-element1,\\n.scena-align-element2 {\\n    position: absolute;\\n    left: 50%;\\n    top: 50%;\\n    background: var(--back6);\\n    transform: translate(-50%, -50%);\\n}\\n.scena-align-vertical .scena-align-line {\\n    width: 1px;\\n    height: 18px;\\n}\\n.scena-align-vertical .scena-align-element1 {\\n    width: 10px;\\n    height: 5px;\\n    margin-top: -3.5px;\\n}\\n.scena-align-vertical .scena-align-element2 {\\n    width: 14px;\\n    height: 5px;\\n    margin-top: 3.5px;\\n}\\n.scena-align-vertical.scena-align-start .scena-align-line {\\n    margin-left: -7px;\\n}\\n.scena-align-vertical.scena-align-start .scena-align-element1 {\\n    margin-left: -2px;\\n}\\n\\n.scena-align-vertical.scena-align-end .scena-align-line {\\n    margin-left: 7px;\\n}\\n.scena-align-vertical.scena-align-end .scena-align-element1 {\\n    margin-left: 2px;\\n}\\n\\n\\n\\n.scena-align-horizontal .scena-align-line {\\n    height: 1px;\\n    width: 18px;\\n}\\n.scena-align-horizontal .scena-align-element1 {\\n    height: 10px;\\n    width: 5px;\\n    margin-left: -3.5px;\\n}\\n.scena-align-horizontal .scena-align-element2 {\\n    height: 14px;\\n    width: 5px;\\n    margin-left: 3.5px;\\n}\\n.scena-align-horizontal.scena-align-start .scena-align-line {\\n    margin-top: -7px;\\n}\\n.scena-align-horizontal.scena-align-start .scena-align-element1 {\\n    margin-top: -2px;\\n}\\n\\n.scena-align-horizontal.scena-align-end .scena-align-line {\\n    margin-top: 7px;\\n}\\n.scena-align-horizontal.scena-align-end .scena-align-element1 {\\n    margin-top: 2px;\\n}\\n',l=Object(r.createContext)(null)},113:function(e,t){},116:function(e,t,n){\"use strict\";n.d(t,\"a\",(function(){return Et}));var r=n(27),a=n.n(r),o=n(42),i=n(3),c=n(4),s=n(41),l=n(6),u=n(5),p=n(14),d=n(1),f=n(118),h=n(77),g=n(117),v=n(9),m=n(2),b=n(0),y=n(11);var k,x,O,j,E,w=(k=y.d,x=y.c,function(e){var t=e.prototype;e.contextType=k,x.forEach((function(e){Object.defineProperty(t,e,{get:function(){return this.context[e]},set:function(){this.context[e](e)}})}))}),C=w((E=j=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).keys=[],e.subContainer=d.createRef(),e.onClick=function(){e.props.selected&&e.focusSub();var t=e.props.onSelect;t&&t(e.constructor.id)},e.onSubClick=function(e){e.stopPropagation()},e.blur=function(){var t=e.subContainer.current;t&&(t.style.display=\"none\")},e}return Object(c.a)(n,[{key:\"render\",value:function(){return d.createElement(\"div\",{className:Object(m.n)(\"icon\",this.props.selected?\"selected\":\"\"),onClick:this.onClick},this.renderIcon(),this.renderSubContainer())}},{key:\"renderSubContainer\",value:function(){var e=this.renderSubIcons();if(e.length)return[d.createElement(\"div\",{key:\"extends-icon\",className:Object(m.n)(\"extends-icon\")}),this.props.selected&&d.createElement(\"div\",{key:\"extends-container\",className:Object(m.n)(\"extends-container\"),ref:this.subContainer,onClick:this.onSubClick},e)]}},{key:\"renderSubIcons\",value:function(){return[]}},{key:\"renderSubIcon\",value:function(e,t,n){var r=this;return d.createElement(\"div\",{key:t,className:Object(m.n)(\"icon\",\"sub-icon\",n?\"selected\":\"\"),onClick:function(){r.onSubSelect(t)}},d.createElement(e,{selected:!1}),d.createElement(\"div\",{className:Object(m.n)(\"sub-icon-label\")},Object(b.u)(\" \".concat(t))))}},{key:\"focusSub\",value:function(){var e=this.subContainer.current;e&&(\"block\"===e.style.display?e.style.display=\"none\":e.style.display=\"block\")}},{key:\"onSubSelect\",value:function(e){}},{key:\"componentDidMount\",value:function(){var e=this,t=this.keys;t.length&&this.keyManager.keydown(t,(function(t){if(t.ctrlKey||t.metaKey)return!1;e.onClick()}),this.constructor.id)}}]),n}(d.PureComponent),j.id=void 0,j.maker=void 0,j.makeThen=function(){},O=E))||O,S=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).keys=[\"v\"],e}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"svg\",{viewBox:\"0 0 80 80\"},d.createElement(\"path\",{d:\"M 21,21 L 35,60 L 40,44 L 54,58 A 3,3 0,0,0, 58,54 L 44,40 L 60,35 L 21,21Z\",fill:\"#222\",strokeLinejoin:\"round\",strokeWidth:\"3\",stroke:\"#eee\",style:{transformOrigin:\"42px 42px\",transform:\"rotate(10deg)\"}}))}}]),n}(C);S.id=\"MoveTool\";var I=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).keys=[\"t\"],e}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"svg\",{viewBox:\"0 0 80 80\"},d.createElement(\"g\",{transform:\"matrix(0.987601,0,0,0.987601,-1.97306,0.554734)\"},d.createElement(\"path\",{d:\"M64.286,17.81L20.714,17.81L20.714,29.56L29.214,23L39.262,23L39.262,55.476L27.77,61.262L27.77,62.071L57.23,62.071L57.23,61.262L45.738,55.476L45.738,23L55.786,23L64.286,29.56L64.286,17.81Z\",style:{fill:\"white\"}})))}}]),n}(C);I.id=\"Text\",I.maker=function(e){return{tag:\"div\",attrs:{contenteditable:!0},style:{color:e.get(\"color\")}}},I.makeThen=function(e){e.focus()};var M=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){return Object(i.a)(this,n),t.apply(this,arguments)}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"svg\",{viewBox:\"0 0 73 73\"},d.createElement(\"ellipse\",{fill:\"#555\",cx:\"36.5\",cy:\"36.5\",rx:\"20\",ry:\"15\",strokeLinejoin:\"round\",strokeWidth:\"3\",stroke:\"#fff\"}))}}]),n}(C);M.id=\"Oval\",M.maker=function(e){return{tag:\"div\",attrs:{},style:{\"background-color\":e.get(\"background-color\"),\"border-radius\":\"50%\"}}};var T=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){return Object(i.a)(this,n),t.apply(this,arguments)}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"svg\",{viewBox:\"0 0 73 73\"},d.createElement(\"path\",{d:\"M16.5,21.5 h40 a0,0 0 0 1 0,0 v30 a0,0 0 0 1 -0,0 h-40 a0,0 0 0 1 -0,-0 v-30 a0,0 0 0 1 0,-0 z\",fill:\"#555\",strokeLinejoin:\"round\",strokeWidth:\"3\",stroke:\"#fff\"}))}}]),n}(C);T.id=\"Rect\",T.maker=function(e){return{tag:\"div\",attrs:{},style:{\"background-color\":e.get(\"background-color\")}}};var R=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){return Object(i.a)(this,n),t.apply(this,arguments)}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"svg\",{viewBox:\"0 0 73 73\"},d.createElement(\"ellipse\",{fill:\"#555\",cx:\"36.5\",cy:\"36.5\",rx:\"15\",ry:\"15\",strokeLinejoin:\"round\",strokeWidth:\"3\",stroke:\"#fff\"}))}}]),n}(C);R.id=\"Circle\",R.maker=function(e){return{tag:\"div\",attrs:{},style:{\"background-color\":e.get(\"background-color\"),\"border-radius\":\"50%\"}}};var L=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){return Object(i.a)(this,n),t.apply(this,arguments)}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"svg\",{viewBox:\"0 0 73 73\"},d.createElement(\"path\",{d:\"M 20,15 L 10,35 L 20,55 L 35,45 L 40, 50 L 55,31 L 41,15 L 30, 25 Z\",fill:\"#555\",strokeLinejoin:\"round\",strokeWidth:\"3\",stroke:\"#fff\"}))}}]),n}(C);L.id=\"Polygon\";var D=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).keys=[\"c\"],e}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"svg\",{viewBox:\"0 0 80 80\"},d.createElement(\"path\",{d:\"M25,10L25,50L65,50   M10,25L50,25L50,65\",style:{stroke:\"white\",strokeWidth:5,fill:\"none\"}}))}},{key:\"renderSubIcons\",value:function(){var e=this.getSelectedFrames()[0],t=this.memory.get(\"crop\")||\"inset\";if(e){var n=e.get(\"clip-path\")||e.get(\"clip\");n&&(t=Object(b.S)(n).prefix)}return[this.renderSubIcon(T,\"inset\",\"inset\"===t),this.renderSubIcon(T,\"rect\",\"rect\"===t),this.renderSubIcon(R,\"circle\",\"circle\"===t),this.renderSubIcon(M,\"ellipse\",\"ellipse\"===t),this.renderSubIcon(L,\"polygon\",\"polygon\"===t)]}},{key:\"onSubSelect\",value:function(e){var t=this.moveableData,n=t.getSelectedFrames()[0];if(n){var r=n.get(\"clip-path\")||n.get(\"clip\");if(r)if(e!==Object(b.S)(r).prefix){var a=t.removeProperties(\"clip-path\",\"clip\");this.historyManager.addAction(\"renders\",{infos:a})}}this.memory.set(\"crop\",e),this.eventBus.requestTrigger(\"update\"),this.forceUpdate()}}]),n}(C);D.id=\"Crop\";var z=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){return Object(i.a)(this,n),t.apply(this,arguments)}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"svg\",{viewBox:\"0 0 73 73\"},d.createElement(\"path\",{d:\"M26.5,21.5 h20 a10,10 0 0 1 10,10 v10 a10,10 0 0 1 -10,10 h-20 a10,10 0 0 1 -10,-10 v-10 a10,10 0 0 1 10,-10 z\",fill:\"#555\",strokeLinejoin:\"round\",strokeWidth:\"3\",stroke:\"#fff\"}))}}]),n}(C);z.id=\"RoundRect\",z.maker=function(e){return{tag:\"div\",attrs:{},style:{\"background-color\":e.get(\"background-color\"),\"border-radius\":\"10px\"}}};var P=n(35),V=n(55),A=n(25);var N,B=function(){function e(t){Object(i.a)(this,e),this.console=t,this.keycon=new A.a,this.keylist=[],this.isEnable=!0}return Object(c.a)(e,[{key:\"enable\",value:function(){this.isEnable=!0}},{key:\"disable\",value:function(){this.isEnable=!1}},{key:\"keydown\",value:function(e,t,n){this.keycon.keydown(e,this.addCallback(\"keydown\",e,t,n))}},{key:\"keyup\",value:function(e,t,n){this.keycon.keyup(e,this.addCallback(\"keyup\",e,t,n))}},{key:\"destroy\",value:function(){this.keycon.destroy()}},{key:\"addCallback\",value:function(e,t,n,r){var a=this;return r&&this.keylist.push([t,r]),function(o){if(!a.isEnable||!function(e){var t=e.inputEvent.target;return!Object(m.c)(t)}(o))return!1;!1!==n(o)&&r&&a.console.log(\"\".concat(e,\": \").concat(t.join(\" + \")),r)}}},{key:\"altKey\",get:function(){return this.keycon.altKey}},{key:\"shiftKey\",get:function(){return this.keycon.shiftKey}},{key:\"metaKey\",get:function(){return this.keycon.metaKey}},{key:\"ctrlKey\",get:function(){return this.keycon.ctrlKey}}]),e}(),F=w(N=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).overlayElement=d.createRef(),e.popupKeyManager=new B(e.console),e.onClick=function(t){t.stopPropagation(),t.target===e.overlayElement.current&&e.props.onClose()},e}return Object(c.a)(n,[{key:\"render\",value:function(){return d.createElement(\"div\",{ref:this.overlayElement,className:Object(m.n)(\"overlay\"),onClick:this.onClick},d.createElement(\"div\",{className:Object(m.n)(\"popup\")},d.createElement(\"div\",{className:Object(m.n)(\"close\"),onClick:this.props.onClose}),this.props.children))}},{key:\"componentDidMount\",value:function(){var e=this;this.keyManager.disable(),this.popupKeyManager.keyup([\"esc\"],(function(){e.props.onClose()}))}},{key:\"componentWillUnmount\",value:function(){this.keyManager.enable(),this.popupKeyManager.destroy()}}]),n}(d.PureComponent))||N,G=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).keys=[\"s\"],e.state={renderPopup:!1},e.onClick=function(){e.setState({renderPopup:!0})},e.onClose=function(){e.setState({renderPopup:!1})},e}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"div\",{className:Object(m.n)(\"i\")},d.createElement(\"div\",{className:Object(m.n)(\"keyboard\")},d.createElement(\"div\",{className:Object(m.n)(\"key\")}),d.createElement(\"div\",{className:Object(m.n)(\"key\")}),d.createElement(\"div\",{className:Object(m.n)(\"key\")}),d.createElement(\"div\",{className:Object(m.n)(\"key\")}),d.createElement(\"div\",{className:Object(m.n)(\"key\")}),d.createElement(\"div\",{className:Object(m.n)(\"key\")}),d.createElement(\"div\",{className:Object(m.n)(\"key\")}),d.createElement(\"div\",{className:Object(m.n)(\"space\")})),this.state.renderPopup&&this.renderPopup())}},{key:\"renderPopup\",value:function(){return V.createPortal(d.createElement(F,{onClose:this.onClose},d.createElement(\"h2\",null,\"Shortcuts\"),d.createElement(\"ul\",{className:Object(m.n)(\"key-list\")},this.keyManager.keylist.map((function(e){var t=Object(P.a)(e,2),n=t[0],r=t[1];return d.createElement(\"li\",{key:n.join(\"+\")},d.createElement(\"p\",{className:Object(m.n)(\"key-description\")},r,\" \",d.createElement(\"strong\",null,n.map((function(e){return d.createElement(\"span\",{key:e},e)})))))})))),this.getEditorElement())}}]),n}(C);G.id=\"Shortcuts\";var q,U,H,W=Object(v.a)(\"div\",\"\\n{\\n    position: absolute;\\n    top: 0;\\n    width: var(--menu);\\n    height: 100%;\\n    background: var(--back2);\\n    box-sizing: border-box;\\n    padding: 15px 7px 0px;\\n    -webkit-user-select: none;\\n    -moz-user-select: none;\\n    -ms-user-select: none;\\n    user-select: none;\\n}\\n\\n.scena-menu-bottom {\\n    position: absolute;\\n    bottom: 0;\\n    left: 0;\\n    padding: 15px 7px 0px;\\n    width: 100%;\\n    box-sizing: border-box;\\n}\\n\\nsvg, .scena-i {\\n    pointer-events: none;\\n}\\n\\n.scena-icon {\\n    position: relative;\\n    display: block;\\n    font-size: 0;\\n    padding: 3px;\\n    box-sizing: border-box;\\n    cursor: pointer;\\n    border: 1px solid transparent;\\n    margin-bottom: 5px;\\n    border-radius: 3px;\\n    transition: all ease 0.2s;\\n}\\n\\n.scena-selected {\\n    background: var(--mainColor);\\n    border-color: var(--back1);\\n}\\n\\n.scena-icon.scena-selected>svg path,\\n.scena-icon.scena-selected>svg ellipse,\\n.scena-sub-icon.scena-selected path,\\n.scena-sub-icon.scena-selected ellipse {\\n    fill: #fff;\\n    stroke: #fff;\\n}\\n\\n.scena-icon .scena-extends-icon {\\n    position: absolute;\\n    right: 2px;\\n    bottom: 2px;\\n    border-bottom: 5px solid #eee;\\n    border-right: 0;\\n    border-left: 5px solid transparent;\\n}\\n\\n.scena-extends-container {\\n    position: absolute;\\n    left: 110%;\\n    top: -30px;\\n    background: var(--back2);\\n    /* width: 200px;\\n    height: 200px; */\\n    border-radius: 5px;\\n    z-index: 1;\\n    transform: translate(10px) translateZ(2px);\\n    box-shadow: 1px 1px 2px var(--back1);\\n    display: none;\\n}\\n\\n.scena-sub-icon {\\n    white-space: nowrap;\\n    padding: 0px 7px;\\n    margin: 7px 10px;\\n}\\n\\n.scena-sub-icon .scena-icon {\\n    position: relative;\\n    display: inline-block;\\n    vertical-align: middle;\\n    width: 25px;\\n    height: 25px;\\n    margin: 0;\\n}\\n\\n.scena-sub-icon-label {\\n    position: relative;\\n    display: inline-block;\\n    vertical-align: middle;\\n    color: white;\\n    font-size: 14px;\\n    font-weight: bold;\\n    padding: 0;\\n    margin: 0;\\n    margin-left: 5px;\\n}\\n\\n\\n.scena-keyboard {\\n    background: #fff;\\n    border-radius: 3px;\\n    width: 90%;\\n    height: 15px;\\n    margin: 3px 0px 7px;\\n    text-align: center;\\n    box-sizing: border-box;\\n    padding: 2px;\\n}\\n\\n.scena-key {\\n    display: inline-block;\\n    width: 2px;\\n    height: 2px;\\n    background: var(--back2);\\n    margin: 1px;\\n}\\n.scena-space {\\n    display: inline-block;\\n    width: 12px;\\n    height: 2px;\\n    background: var(--back2);\\n    margin: 1px;\\n    border-radius: 1px;\\n}\\n\"),K=[S,I,D,T,z,M],X=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).state={selected:\"MoveTool\"},e.menuRefs=[],e.select=function(t){e.setState({selected:t}),e.props.onSelect(t)},e}return Object(c.a)(n,[{key:\"render\",value:function(){return d.createElement(W,{className:Object(m.n)(\"menu\")},this.renderMenus(),d.createElement(\"div\",{className:Object(m.n)(\"menu-bottom\")},d.createElement(G,null)))}},{key:\"renderMenus\",value:function(){var e=this,t=this.state.selected,n=this.menuRefs;return K.map((function(r,a){var o=r.id;return n[a]||(n[a]=d.createRef()),d.createElement(r,{ref:n[a],key:o,selected:t===o,onSelect:e.select})}))}},{key:\"getSelected\",value:function(){var e=this.state.selected;return K.filter((function(t){return t.id===e}))[0]}},{key:\"blur\",value:function(){this.menuRefs.forEach((function(e){e.current&&e.current.blur()}))}}]),n}(d.PureComponent),J=n(13),Z=n(33),Y=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).components={},e.jsxs={},e.viewport={jsx:d.createElement(\"div\",null),name:\"Viewport\",id:\"viewport\",children:[]},e.ids={viewport:e.viewport},e.state={},e.viewportRef=d.createRef(),e}return Object(c.a)(n,[{key:\"render\",value:function(){var e=this.props.style;return d.createElement(\"div\",{className:Object(m.n)(\"viewport-container\"),onBlur:this.props.onBlur,style:e},this.props.children,d.createElement(\"div\",Object.assign({className:Object(m.n)(\"viewport\")},Object(Z.a)({},y.a,\"viewport\"),{ref:this.viewportRef}),this.renderChildren(this.getViewportInfos())))}},{key:\"componentDidMount\",value:function(){this.ids.viewport.el=this.viewportRef.current}},{key:\"renderChildren\",value:function(e){var t=this;return e.map((function(e){var n=e.jsx,r=e.children,a=t.renderChildren(r),o=e.id,i={key:o};if(Object(b.L)(n))return i[y.a]=o,d.createElement.apply(d,[n,i].concat(Object(J.a)(a)));if(Object(m.k)(n))return i.scenaElementId=o,i.scenaAttrs=e.attrs||{},i.scenaText=e.innerText,i.scenaHTML=e.innerHTML,d.createElement(n,i);Object(b.L)(n.type)?i[y.a]=o:(i.scenaElementId=o,i.scenaAttrs=e.attrs||{},i.scenaText=e.innerText,i.scenaHTML=e.innerHTML);var c=n.props.children;return d.cloneElement.apply(d,[n,Object(p.a)(Object(p.a)({},n.props),i)].concat(Object(J.a)(Object(b.H)(c)?c:[c]),Object(J.a)(t.renderChildren(r))))}))}},{key:\"getJSX\",value:function(e){return this.jsxs[e]}},{key:\"getComponent\",value:function(e){return this.components[e]}},{key:\"makeId\",value:function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.ids;;){var t=\"scena\".concat(Math.floor(1e8*Math.random()));if(!e[t])return t}}},{key:\"setInfo\",value:function(e,t){this.ids[e]=t}},{key:\"getInfo\",value:function(e){return this.ids[e]}},{key:\"getLastChildInfo\",value:function(e){var t=this.getInfo(e).children;return t[t.length-1]}},{key:\"getNextInfo\",value:function(e){var t=this.getInfo(e),n=this.getInfo(t.scopeId).children,r=n.indexOf(t);return n[r+1]}},{key:\"getPrevInfo\",value:function(e){var t=this.getInfo(e),n=this.getInfo(t.scopeId).children,r=n.indexOf(t);return n[r-1]}},{key:\"getInfoByElement\",value:function(e){return this.ids[Object(m.e)(e)]}},{key:\"getInfoByIndexes\",value:function(e){return e.reduce((function(e,t){return e.children[t]}),this.viewport)}},{key:\"getElement\",value:function(e){var t=this.getInfo(e);return t?t.el:null}},{key:\"getViewportInfos\",value:function(){return this.viewport.children}},{key:\"getIndexes\",value:function(e){var t=Object(b.L)(e)?this.getInfo(e):this.getInfoByElement(e);if(!t.scopeId)return[];var n=this.getInfo(t.scopeId);return[].concat(Object(J.a)(this.getIndexes(t.scopeId)),[n.children.indexOf(t)])}},{key:\"registerChildren\",value:function(e,t){var n=this;return e.map((function(e){var r=e.id||n.makeId(),a=e.jsx,o=e.children||[],i=t||e.scopeId||\"viewport\",c=\"\";Object(m.j)(a)&&(c=n.makeId(n.jsxs),n.jsxs[c]=a);var s=Object(p.a)(Object(p.a)({},e),{},{jsx:a,children:n.registerChildren(o,r),scopeId:i,componentId:\"\",jsxId:c,frame:e.frame||{},el:null,id:r});return n.setInfo(r,s),s}))}},{key:\"appendJSXs\",value:function(e,t,n){var r=this,a=this.registerChildren(e,n);return a.forEach((function(e,a){var o=r.getInfo(n||e.scopeId).children;t>-1?(o.splice(t+a,0,e),e.index=t+a):Object(b.J)(e.index)?o.splice(e.index,0,e):(e.index=o.length,o.push(e))})),new Promise((function(e){r.forceUpdate((function(){e({added:Object(m.p)(a)})}))}))}},{key:\"getIndex\",value:function(e){var t=this.getIndexes(e),n=t.length;return n?t[n-1]:-1}},{key:\"getElements\",value:function(e){var t=this;return e.map((function(e){return t.getElement(e)})).filter((function(e){return e}))}},{key:\"unregisterChildren\",value:function(e,t){var n=this,r=this.ids;return e.slice(0).map((function(e){var a=e.el,o=\"\",i=\"\";if(e.attrs.contenteditable?o=a.innerText:i=a.innerHTML,!t){var c=n.getInfo(e.scopeId),s=c.children.indexOf(e);c.children.splice(s,1)}var l=n.unregisterChildren(e.children,!0);return delete r[e.id],delete e.el,Object(p.a)(Object(p.a)({},e),{},{innerText:o,innerHTML:i,attrs:Object(m.i)(a),children:l})}))}},{key:\"removeTargets\",value:function(e){var t=this,n=this.getSortedTargets(e).map((function(e){return t.getInfoByElement(e)})).filter((function(e){return e})),r=n.map((function(e){return t.getIndex(e.id)})),a=this.unregisterChildren(n);return a.forEach((function(e,t){e.index=r[t]})),new Promise((function(e){t.forceUpdate((function(){e({removed:a})}))}))}},{key:\"getSortedIndexesList\",value:function(e){var t=this,n=e.map((function(e){return Array.isArray(e)?e:t.getIndexes(e)}));return n.sort((function(e,t){for(var n=e.length,r=t.length,a=Math.min(n,r),o=0;o<a;++o)if(e[o]!==t[o])return e[o]-t[o];return n-r})),n}},{key:\"getSortedTargets\",value:function(e){return this.getSortedInfos(e).map((function(e){return e.el}))}},{key:\"getSortedInfos\",value:function(e){var t=this;return this.getSortedIndexesList(e).map((function(e){return t.getInfoByIndexes(e)}))}},{key:\"moveInside\",value:function(e){var t,n=Object(b.L)(e)?this.getInfo(e):this.getInfoByElement(e),r=this.getPrevInfo(n.id);t=!r||Object(m.k)(r.jsx)||Object(m.l)(r.jsx)?[]:[n];var a=r&&this.getLastChildInfo(r.id);return this.move(t,r,a)}},{key:\"moveOutside\",value:function(e){var t=Object(b.L)(e)?this.getInfo(e):this.getInfoByElement(e),n=this.getInfo(t.scopeId),r=this.getInfo(n.scopeId),a=r?[t]:[];return this.move(a,r,n)}},{key:\"moves\",value:function(e){var t=this,n=this.viewportRef.current,r=e.map((function(e){return Object(p.a)(Object(p.a)({},e),{},{moveMatrix:Object(m.g)(e.info.el,n)})})),a=r.map((function(e){var n=e.info;e.moveMatrix;return{info:n,parentInfo:t.getInfo(n.scopeId),prevInfo:t.getPrevInfo(n.id)}}));return r.forEach((function(e){var n=e.info,r=e.parentInfo,a=e.prevInfo,o=t.getInfo(n.scopeId).children;o.splice(o.indexOf(n),1);var i=r.children;i.splice(a?i.indexOf(a)+1:0,0,n),n.scopeId=r.id})),new Promise((function(e){var n=r.map((function(e){return e.info}));t.forceUpdate((function(){Object(m.p)(n),e({prevInfos:a,nextInfos:r})}))}))}},{key:\"move\",value:function(e,t,n){var r=this.getSortedInfos(e.map((function(e){return e.el})));return this.moves(r.map((function(e,a){return{info:e,parentInfo:t,prevInfo:0===a?n:r[a-1]}})))}}]),n}(d.PureComponent),_=w((H=U=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).title=void 0,e.eventList=[],e}return Object(c.a)(n,[{key:\"render\",value:function(){return d.createElement(\"div\",{className:Object(m.n)(\"tab-popup\")},d.createElement(\"h2\",null,this.title),this.renderTab())}},{key:\"addEvent\",value:function(e,t){this.eventList.push([e,t]),this.eventBus.on(e,t)}},{key:\"getMoveable\",value:function(){return this.moveableManager.current.getMoveable()}},{key:\"componentWillUnmount\",value:function(){var e=this.eventBus;this.eventList.forEach((function(t){var n=Object(P.a)(t,2),r=n[0],a=n[1];e.off(r,a)}))}}]),n}(d.PureComponent),U.id=void 0,U.icon=void 0,q=H))||q,Q=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).input=d.createRef(),e}return Object(c.a)(n,[{key:\"getValue\",value:function(){}},{key:\"getElement\",value:function(){return this.input.current.getElement()}},{key:\"setValue\",value:function(e){}},{key:\"componentDidMount\",value:function(){var e=this.props;e.updateValue&&this.setValue(e.value)}},{key:\"componentDidUpdate\",value:function(){var e=this.props;e.updateValue&&this.setValue(e.value)}}]),n}(d.PureComponent),$=Object(v.a)(\"input\",\"\\n{\\n    position: relative;\\n    text-align: left;\\n    appearance: none;\\n    -webkit-appearance: none;\\n    outline: none;\\n    display: block;\\n    width: 100%;\\n    height: 30px;\\n    background: transparent;\\n    color: var(--mainColor);\\n    font-weight: bold;\\n    background: none;\\n    border: 0;\\n    padding: 5px;\\n    box-sizing: border-box;\\n    background: var(--back1);\\n    font-size: 12px;\\n}\\n\"),ee=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).inputAttributes={},e.onInput=function(t){var n=t.nativeEvent||t;Object(b.M)(n.data)&&e.props.onChange(e.getElement().value)},e.onKeyDown=function(e){e.stopPropagation()},e.onKeyUp=function(t){var n=t.currentTarget;t.stopPropagation(),\"enter\"===Object(A.c)(t.keyCode)&&e.props.onChange(n.value)},e}return Object(c.a)(n,[{key:\"render\",value:function(){return d.createElement($,Object.assign({ref:this.input,className:Object(m.n)(\"input\")},this.inputAttributes,this.props.inputProps,{onInput:this.onInput,onKeyDown:this.onKeyDown,onKeyUp:this.onKeyUp}))}},{key:\"getValue\",value:function(){return this.getElement().value}},{key:\"setValue\",value:function(e){this.getElement().value=\"\".concat(Object(b.M)(e)?\"\":e)}}]),n}(Q),te=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).inputAttributes={type:\"number\",min:0,step:.1,pattern:\"[0-9.]*\"},e}return n}(ee),ne=Object(v.a)(\"div\",\"\\n{\\n    position: relative;\\n    box-sizing: border-box;\\n    padding: 2px;\\n    display: inline-block;\\n    vertical-align: top;\\n}\\nh3, h4 {\\n    color: white;\\n    margin: 0;\\n    padding: 7px 5px;\\n    font-size: 12px;\\n    font-weight: bold;\\n    display: inline-block;\\n}\\nh4 {\\n    font-size: 11px;\\n}\\n:host.scena-full {\\n    width: 100%;\\n}\\n:host.scena-half {\\n    width: 50%;\\n}\\n:host.scena-third {\\n    width: 33%;\\n}\\n:host.scena-twothird {\\n    width: 66%;\\n}\\n:host.scena-half:nth-child(2n + 1) {\\n    padding-right: 5px;\\n}\\n:host.scena-half:nth-child(2n + 2) {\\n    padding-left: 5px;\\n}\\n\"),re=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).input=d.createRef(),e}return Object(c.a)(n,[{key:\"render\",value:function(){var e=this.props,t=e.label,n=e.type,r=e.props,a=void 0===r?{}:r,o=e.inputProps,i=void 0===o?{}:o,c=e.input,s=e.onChange,l=e.value,u=e.updateValue;return d.createElement(ne,{className:Object(m.n)(\"tab-input\",n)},t&&d.createElement(\"h3\",null,t),d.createElement(c,Object.assign({ref:this.input,onChange:s},a,{inputProps:i,value:l,updateValue:u})))}},{key:\"setValue\",value:function(e){this.input.current.setValue(e)}},{key:\"getValue\",value:function(){return this.input.current.getValue()}}]),n}(d.PureComponent),ae=Object(v.a)(\"div\",'\\n{\\n    position: relative;\\n    width: 30px;\\n    height: 35px;\\n    margin: auto;\\n    box-sizing: border-box;\\n}\\n.scena-anchor-input-background {\\n    position: relative;\\n    width: 30px;\\n    height: 30px;\\n    background: var(--back1);\\n}\\n.scena-anchor-control {\\n    position: absolute;\\n    width: 8px;\\n    height: 8px;\\n    transform: translate(-50%, -50%);\\n    left: 50%;\\n    top: 50%;\\n    padding: 1px;\\n    box-sizing: border-box;\\n}\\n.scena-anchor-control:before {\\n    content: \"\";\\n    position: relative;\\n    display: block;\\n    background: var(--back5);\\n    width: 100%;\\n    height: 100%;\\n}\\n.scena-anchor-control.scena-anchor-selected {\\n    padding: 0px;\\n}\\n.scena-anchor-control.scena-anchor-selected:before {\\n    background: white;\\n}\\n\\n.scena-anchor-control.scena-anchor-n {\\n    top: 0;\\n}\\n.scena-anchor-control.scena-anchor-s {\\n    top: 100%;\\n}\\n.scena-anchor-control.scena-anchor-w {\\n    left: 0;\\n}\\n.scena-anchor-control.scena-anchor-e {\\n    left: 100%;\\n}\\n\\n'),oe=[\"w\",\"\",\"e\"],ie=[\"n\",\"\",\"s\"],ce=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).inputAttributes={},e.state={origin:[50,50]},e.onClick=function(t){var n=t.target.getAttribute(\"data-anchor-index\");if(n){var r=n.split(\",\").map((function(e){return 50*parseFloat(e)}));e.props.onChange(r)}},e}return Object(c.a)(n,[{key:\"render\",value:function(){var e=this.state.origin.map((function(e){return Math.min(100,Math.max(0,50*Math.round(e/50)))}));return d.createElement(ae,{className:Object(m.n)(\"anchor-input\")},d.createElement(\"div\",{className:Object(m.n)(\"anchor-input-background\"),onClick:this.onClick},ie.map((function(t,n){return oe.map((function(r,a){var o=[];return t&&o.push(\"anchor-\".concat(t)),r&&o.push(\"anchor-\".concat(r)),e[0]===50*a&&e[1]===50*n&&o.push(\"anchor-selected\"),d.createElement(\"div\",{key:\"dir\".concat(r,\"-\").concat(t),className:m.n.apply(void 0,[\"anchor-control\"].concat(o)),\"data-anchor-index\":\"\".concat(a,\",\").concat(n)})}))}))))}},{key:\"setValue\",value:function(e){this.setState({origin:e})}},{key:\"getValue\",value:function(){return this.state.origin}}]),n}(Q),se=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){return Object(i.a)(this,n),t.apply(this,arguments)}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"svg\",{viewBox:\"0 0 80 80\"},d.createElement(\"rect\",{x:\"20\",y:\"20\",width:\"40\",height:\"40\",stroke:\"#fff\",strokeWidth:\"3\",fill:\"rgba(255, 255, 255, 0.5)\"}),d.createElement(\"rect\",{x:\"15\",y:\"15\",width:\"10\",height:\"10\",fill:\"#fff\"}),d.createElement(\"rect\",{x:\"35\",y:\"15\",width:\"10\",height:\"10\",fill:\"#fff\"}),d.createElement(\"rect\",{x:\"55\",y:\"15\",width:\"10\",height:\"10\",fill:\"#fff\"}),d.createElement(\"rect\",{x:\"15\",y:\"35\",width:\"10\",height:\"10\",fill:\"#fff\"}),d.createElement(\"rect\",{x:\"55\",y:\"35\",width:\"10\",height:\"10\",fill:\"#fff\"}),d.createElement(\"rect\",{x:\"15\",y:\"55\",width:\"10\",height:\"10\",fill:\"#fff\"}),d.createElement(\"rect\",{x:\"35\",y:\"55\",width:\"10\",height:\"10\",fill:\"#fff\"}),d.createElement(\"rect\",{x:\"55\",y:\"55\",width:\"10\",height:\"10\",fill:\"#fff\"}))}}]),n}(C);se.id=\"Transform\";var le={step:1},ue=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).title=\"Transform\",e.xInput=d.createRef(),e.yInput=d.createRef(),e.wInput=d.createRef(),e.hInput=d.createRef(),e.oInput=d.createRef(),e.rInput=d.createRef(),e.onChangeRotate=function(t){var n=parseFloat(t);e.getMoveable().request(\"rotatable\",{rotate:n,isInstant:!0})},e.onChangePos=function(){var t=parseFloat(e.xInput.current.getValue()),n=parseFloat(e.yInput.current.getValue());e.getMoveable().request(\"draggable\",{x:t,y:n,isInstant:!0})},e.onChangeOrigin=function(t){var n=e.getMoveable().getRect(),r=n.offsetWidth*t[0]/100,a=n.offsetHeight*t[1]/100;e.getMoveable().request(\"originDraggable\",{origin:[r,a]},!0)},e.onChangeSize=function(){var t=parseFloat(e.wInput.current.getValue()),n=parseFloat(e.hInput.current.getValue());e.getMoveable().request(\"resizable\",{offsetWidth:t,offsetHeight:n,isInstant:!0})},e.onRender=function(){var t=e.getMoveable().getRect();e.xInput.current.setValue(t.left),e.yInput.current.setValue(t.top),e.wInput.current.setValue(t.offsetWidth),e.hInput.current.setValue(t.offsetHeight),e.rInput.current.setValue(Math.round(t.rotation));var n=t.transformOrigin;e.oInput.current.setValue([n[0]/t.offsetWidth*100,n[1]/t.offsetHeight*100])},e}return Object(c.a)(n,[{key:\"renderTab\",value:function(){return d.createElement(\"div\",{className:Object(m.n)(\"transform-tab\")},d.createElement(\"div\",{className:Object(m.n)(\"tab-line\")},d.createElement(re,{ref:this.oInput,type:\"half\",label:\"Anchor\",input:ce,onChange:this.onChangeOrigin}),d.createElement(re,{ref:this.rInput,type:\"half\",label:\"Rotation\",input:te,onChange:this.onChangeRotate})),d.createElement(\"div\",{className:Object(m.n)(\"tab-line\")},d.createElement(re,{ref:this.xInput,type:\"half\",label:\"X\",input:te,onChange:this.onChangePos}),d.createElement(re,{ref:this.yInput,type:\"half\",label:\"Y\",input:te,onChange:this.onChangePos})),d.createElement(\"div\",{className:Object(m.n)(\"tab-line\")},d.createElement(re,{ref:this.wInput,type:\"half\",label:\"W\",input:te,inputProps:le,onChange:this.onChangeSize}),d.createElement(re,{ref:this.hInput,type:\"half\",label:\"H\",input:te,inputProps:le,onChange:this.onChangeSize})))}},{key:\"componentDidMount\",value:function(){this.addEvent(\"render\",this.onRender),this.addEvent(\"renderGroup\",this.onRender),this.addEvent(\"setSelectedTargets\",this.onRender),this.onRender()}}]),n}(_);ue.id=\"Transform\",ue.icon=se;var pe=n(57),de=Object(v.a)(\"div\",'\\n.scena-fold-icon {\\n    position: relative;\\n    display: inline-block;\\n    vertical-align: middle;\\n    width: 10px;\\n    height: 20px;\\n}\\n.scena-fold-icon:before {\\n    content: \"\";\\n    position: absolute;\\n    left: 50%;\\n    top: 50%;\\n    transform: translate(-50%, -50%);\\n    border-top: 4px solid #fff;\\n    border-left: 3px solid transparent;\\n    border-right: 3px solid transparent;\\n}\\n.scena-fold-icon.scena-fold:before {\\n    border-right: 0;\\n    border-left: 4px solid #fff;\\n    border-top: 3px solid transparent;\\n    border-bottom: 3px solid transparent;\\n}\\n{\\n    position: relative;\\n    -webkit-user-select: none;\\n    -moz-user-select: none;\\n    -ms-user-select: none;\\n    user-select: none;\\n    --file-padding: 10px;\\n}\\n.scena-folder .scena-properties {\\n    margin-left: var(--file-padding);\\n}\\n.scena-file {\\n    position: relative;\\n    box-sizing: border-box;\\n    padding: 2px;\\n    display: inline-block;\\n    vertical-align: top;\\n    border-bottom: 1px solid var(--back1);\\n    width: 100%;\\n}\\n.scena-file h3 {\\n    color: white;\\n    margin: 0;\\n    padding: 7px 5px;\\n    font-size: 12px;\\n    font-weight: bold;\\n    display: inline-block;\\n}\\n.scena-shadows {\\n    position: absolute;\\n    pointer-events: none;\\n    transition: translateY(-50%);\\n    opacity: 0.5;\\n    top: 0;\\n    left: 0;\\n    width: 100%;\\n    z-index: 10;\\n    display: none;\\n}\\n.scena-file.scena-selected {\\n    background: var(--mainColor);\\n}\\n.scena-file:before {\\n    position: absolute;\\n    left: calc(var(--file-padding) * var(--pointer-depth));\\n    width: 100%;\\n    height: 2px;\\n    background: #48f;\\n    transform: translateY(-50%);\\n}\\n.scena-file.scena-bottom-pointer:before {\\n    content: \"\";\\n    top: 100%;\\n}\\n.scena-file.scena-top-pointer:before {\\n    content: \"\";\\n    top: 0%;\\n}\\n');function fe(e){for(;e&&!e.hasAttribute(\"data-file-key\");)e=e.parentElement;return e}var he=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).moveGesto=void 0,e.folderRef=d.createRef(),e.shadowRef=d.createRef(),e.state={fold:!1,shadows:[]},e.onClickFold=function(t){t.stopPropagation(),e.setState({fold:!e.state.fold})},e.onClick=function(t){var n=t.currentTarget.getAttribute(\"data-file-key\"),r=e.props,a=r.multiselect,o=r.onSelect,i=r.selected;if(a){var c=(i||[]).slice(),s=c.indexOf(n);A.a.global.shiftKey?s>-1?c.splice(s,1):c.push(n):c=[n],o(c)}else o([n])},e.onDragStart=function(t){if(Object(b.G)(t.inputEvent.target,Object(m.n)(\"fold-icon\")))return t.stop(),!1;var n=e.folderRef.current.getElement().getBoundingClientRect(),r=t.datas,a=t.clientX-n.left;r.offsetX=a,r.folderRect=n,r.folderLine=n.left+n.width-10,r.objMap=e.flatMap(),t.inputEvent.preventDefault(),t.inputEvent.stopPropagation()},e.onDrag=function(t){var n=e.folderRef.current.getElement(),r=t.clientX,a=t.clientY,o=t.datas;e.clearPointers(),o.prevInfo=null,o.isTop=!1;var i=e.props.selected,c=o.objMap;if(!o.dragFirst){o.dragFirst=!0;var s=fe(t.inputEvent.target);if(s&&-1===i.indexOf(s.getAttribute(\"data-file-key\")))return void e.onClick({currentTarget:s})}if(i&&i.length){var l=i.map((function(e){return c[e]}));if(e.state.shadows.length){e.updateShadowPosition(o.folderRect,t);var u=fe(document.elementFromPoint(o.folderLine,t.clientY));if(u){var p=e.flatChildren(),d=u.getBoundingClientRect(),f=d.top+d.height/2>a,h=u.getAttribute(\"data-file-key\"),g=Object(b.A)(p,(function(e){return e.fullId===h})),v=p[g],y=p[g-1];if(y&&f){if(v=p[--g],y=p[g-1],h=v.fullId,!(u=n.querySelector('[data-file-key=\"'.concat(h,'\"]'))))return;d=u.getBoundingClientRect(),f=!1}var k=p[g+1],x=v.depth,O=k?k.depth:0,j=[Math.min(O,x)-x,Math.max(x+1,O)-x],E=r-d.left,w=f?0:Object(m.a)(Math.round((E>0?.2*E:E)/10),j[0],j[1]);if(!(k&&!f&&i.indexOf(k.fullId)>-1&&x+w===O)&&!e.contains(i,h)&&!(i.indexOf(h)>-1&&w>=0)){var C=e.props,S=C.isMoveChildren,I=C.checkMove;if(S){var M=v.scope,T=[].concat(Object(J.a)(v.scope),[v.id]);if(l.every((function(e){return e.scope.every((function(e,t){return e===M[t]}))})))w=0;else{if(!l.every((function(e){return e.scope.every((function(e,t){return e===T[t]}))})))return;w=1}}else w>0&&!I(v)&&(w=0);u.style.setProperty(\"--pointer-depth\",\"\".concat(w)),u.classList.add(Object(m.n)(f?\"top-pointer\":\"bottom-pointer\")),o.depth=w,o.isTop=f,o.prevInfo=v}}}else e.setState({shadows:l},(function(){e.updateShadowPosition(o.folderRect,t)}))}},e.onDragEnd=function(t){if(e.clearPointers(),t.isDrag){var n,r=t.datas,a=r.depth,o=r.prevInfo,i=r.isTop,c=e.props.onMove,s=r.objMap,l=(e.props.selected||[]).map((function(e){return s[e]}));if(o)if(a<=0){for(var u=Math.abs(a),p=0;p<u;++p)o=s[o.parentId];n=s[o.parentId]}else n=o,o=void 0;!n&&i?c(l):(n||o)&&c(l,n,o),e.setState({shadows:[]},(function(){e.shadowRef.current.style.cssText=\"display: none\"}))}else{var d=fe(t.inputEvent.target);d&&e.onClick({currentTarget:d})}},e}return Object(c.a)(n,[{key:\"isSelected\",value:function(e){var t=this.props.selected;return t&&t.indexOf(e)>-1}},{key:\"render\",value:function(){var e=this.props,t=e.scope,n=e.name,r=e.getFullId,a=t.length?r(t[t.length-1],t.slice(0,-1)):\"\";return d.createElement(de,{className:Object(m.n)(\"folder\"),ref:this.folderRef},n&&d.createElement(\"div\",{className:Object(m.n)(\"file\",this.isSelected(a)?\"selected\":\"\"),\"data-file-key\":a,onClick:this.onClick},d.createElement(\"div\",{className:Object(m.n)(\"fold-icon\",this.state.fold?\"fold\":\"\"),onClick:this.onClickFold}),d.createElement(\"h3\",null,n)),d.createElement(\"div\",{className:Object(m.n)(\"properties\")},this.renderProperties()),this.renderShadows())}},{key:\"componentDidMount\",value:function(){if(this.props.isMove){var e=this.folderRef.current.getElement();this.moveGesto=new pe.a(e,{container:window,checkInput:!0}).on(\"dragStart\",this.onDragStart).on(\"drag\",this.onDrag).on(\"dragEnd\",this.onDragEnd)}}},{key:\"componentWillUnmount\",value:function(){this.moveGesto&&this.moveGesto.unset()}},{key:\"renderProperties\",value:function(){var e=this,t=this.props,r=t.scope,a=t.properties,o=t.selected,i=t.multiselect,c=t.onSelect,s=t.getFullId,l=t.FileComponent,u=t.isMove,p=t.getId,f=t.getName,h=t.getChildren;if(!this.state.fold)return Object.keys(a).map((function(t){var g=a[t],v=f(g,t),y=r.slice(),k=p(g,t),x=s(k,y);y.push(k);var O=h(g,t,r);return O&&(Object(b.H)(O)?O.length:Object(b.K)(O))?d.createElement(n,{key:x,name:v,scope:y,properties:O,multiselect:i,getId:p,getName:f,getFullId:s,getChildren:h,selected:o,onSelect:u?void 0:c,FileComponent:l}):d.createElement(\"div\",{key:x,className:Object(m.n)(\"file\",e.isSelected(x)?\"selected\":\"\"),\"data-file-key\":x,onClick:u?void 0:e.onClick},d.createElement(l,{scope:y,name:v,value:g,fullId:x}))}))}},{key:\"renderShadows\",value:function(){var e=this.props,t=e.FileComponent,n=e.getName;if(!e.scope.length)return d.createElement(\"div\",{className:Object(m.n)(\"shadows\"),ref:this.shadowRef},this.state.shadows.map((function(e){var r=e.scope,a=e.value,o=e.fullId,i=e.id,c=n(a,i);return d.createElement(\"div\",{key:o,className:Object(m.n)(\"file\",\"selected\",\"shadow\")},d.createElement(t,{scope:r,name:c,value:a,fullId:o}))})))}},{key:\"updateShadowPosition\",value:function(e,t){var n=this.shadowRef.current;if(n&&this.state.shadows.length){var r=t.datas;n.style.cssText=\"display: block; transform: translate(\".concat(t.clientX-e.left-r.offsetX,\"px, \").concat(t.clientY-e.top,\"px) translateY(-50%)\")}}},{key:\"contains\",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.flatMap(),r=n[t],a=r.parentId;return!!a&&(e.indexOf(a)>-1||this.contains(e,a,n))}},{key:\"flatMap\",value:function(){var e=this.flatChildren(),t={};return e.forEach((function(e){t[e.fullId]=e})),t}},{key:\"flatChildren\",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.props.properties,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:\"\",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:[],o=Object.keys(t),i=this.props,c=i.getFullId,s=i.getId,l=i.getChildren,u=r.length;return o.forEach((function(o){var i=t[o],p=r.slice(),d=s(i,o),f=c(d,p);p.push(d);var h=l(i,o,r);a.push({id:d,fullId:f,parentId:n,depth:u,scope:r,value:i}),h&&(Object(b.H)(h)?h.length:Object(b.K)(h))&&e.flatChildren(h,f,p,a)})),a}},{key:\"clearPointers\",value:function(){[].slice.call(document.querySelectorAll(\".scena-top-pointer, .scena-bottom-pointer\")).forEach((function(e){var t=e.classList;t.remove(Object(m.n)(\"top-pointer\")),t.remove(Object(m.n)(\"bottom-pointer\"))}))}}]),n}(d.PureComponent);he.defaultProps={selected:[],onMove:function(){},checkMove:function(){return!0},onSelect:function(){},getFullId:function(e,t){return[].concat(Object(J.a)(t),[e]).join(\"///\")},getId:function(e,t,n){return t},getName:function(e,t){return t},getChildren:function(e){return e}};var ge=Object(v.a)(\"div\",\"\\n{\\n    position: relative;\\n    box-sizing: border-box;\\n    padding: 2px;\\n    display: inline-block;\\n    vertical-align: top;\\n}\\nh3 {\\n    color: white;\\n    margin: 0;\\n    padding: 7px 5px;\\n    font-size: 12px;\\n    font-weight: bold;\\n    display: inline-block;\\n}\\n:host.scena-full {\\n    width: 100%;\\n}\\n:host.scena-half {\\n    width: 50%;\\n}\\n:host.scena-third {\\n    width: 33%;\\n}\\n:host.scena-twothird {\\n    width: 66%;\\n}\\n:host.scena-half:nth-child(2n + 1) {\\n    padding-right: 5px;\\n}\\n:host.scena-half:nth-child(2n + 2) {\\n    padding-left: 5px;\\n}\\n\"),ve=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){return Object(i.a)(this,n),t.apply(this,arguments)}return Object(c.a)(n,[{key:\"render\",value:function(){var e=this.props,t=e.label,n=e.type;return d.createElement(ge,{className:Object(m.n)(\"label\",n)},d.createElement(\"h3\",null,t))}}]),n}(d.PureComponent),me=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){return Object(i.a)(this,n),t.apply(this,arguments)}return n}(d.PureComponent),be=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).onChange=function(t){var n=e.props;(0,n.onChange)(n.scope,t)},e}return Object(c.a)(n,[{key:\"render\",value:function(){var e=this.props,t=e.name,n=e.value;return d.createElement(d.Fragment,null,d.createElement(ve,{type:\"third\",label:t}),d.createElement(re,{type:\"twothird\",input:ee,value:n,updateValue:!0,onChange:this.onChange}))}}]),n}(me),ye=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){return Object(i.a)(this,n),t.apply(this,arguments)}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"svg\",{viewBox:\"0 0 80 80\"},d.createElement(\"g\",{transform:\"matrix(1.18519,0,0,2.42309,-7.4076,-21.5629)\"},d.createElement(\"rect\",{x:\"13\",y:\"17\",width:\"54\",height:\"2\",fill:\"white\"})),d.createElement(\"g\",{transform:\"matrix(1.18519,0,0,2.42309,-7.40741,14.3317)\"},d.createElement(\"rect\",{x:\"13\",y:\"17\",width:\"54\",height:\"2\",fill:\"white\"})),d.createElement(\"g\",{transform:\"matrix(1.03519,0,0,1.31422,37.8389,-2.71207)\"},d.createElement(\"rect\",{x:\"13\",y:\"25\",width:\"20\",height:\"15\",fill:\"white\"})),d.createElement(\"g\",{transform:\"matrix(1.03519,0,0,1.31422,11.7648,-2.71207)\"},d.createElement(\"rect\",{x:\"13\",y:\"25\",width:\"20\",height:\"15\",fill:\"white\"})),d.createElement(\"g\",{transform:\"matrix(0.592593,0,0,1.31422,0.296296,-2.71207)\"},d.createElement(\"rect\",{x:\"13\",y:\"25\",width:\"20\",height:\"15\",fill:\"white\"})))}}]),n}(C);ye.id=\"Frame\";var ke=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).title=\"Frame\",e.state={selected:[]},e.renderProperty=function(t){var n=t.name,r=t.fullId,a=t.scope,o=e.getSelectedFrames()[0];return d.createElement(be,{name:n,fullId:r,scope:a,value:o.get.apply(o,Object(J.a)(r.split(\"///\"))),onChange:e.onChange})},e.onSelect=function(t){e.setState({selected:t})},e.onMove=function(t,n,r){var a=n?[].concat(Object(J.a)(n.scope),[n.id]):[],o=(e.getSelectedFrames()[0].getOrders(a)||[]).slice(),i=t[0].id,c=o.indexOf(i);if(-1!==c&&o.splice(c,1),r){var s=o.indexOf(r.id);-1===s?o.push(i):o.splice(s+1,0,i)}else o.splice(0,0,i);e.context.setOrders(a,o,!0)},e.onChange=function(t,n){e.getSelectedFrames().length&&e.context.setProperty(t,n,!0)},e.onRender=function(){e.forceUpdate()},e.setTargets=function(){e.state.selected=[],e.forceUpdate()},e}return Object(c.a)(n,[{key:\"renderTab\",value:function(){var e=this.state.selected,t=this.getSelectedFrames()[0];if(t)return d.createElement(\"div\",{className:Object(m.n)(\"frame-tab\")},d.createElement(he,{name:\"\",properties:t.getOrders([])||[],getId:function(e){return e},getName:function(e){return e},getChildren:function(e,n,r){return t.getOrders([].concat(Object(J.a)(r),[e]))||[]},scope:[],selected:e,isMove:!0,isMoveChildren:!0,checkMove:function(){return!1},onMove:this.onMove,onSelect:this.onSelect,FileComponent:this.renderProperty}))}},{key:\"componentDidMount\",value:function(){this.addEvent(\"render\",this.onRender),this.addEvent(\"setSelectedTargets\",this.setTargets)}}]),n}(_);ke.id=\"Frame\",ke.icon=ye;var xe=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).onClick=function(){var t=e.props,n=t.type,r=t.direction;(0,t.onClick)(n,r)},e}return Object(c.a)(n,[{key:\"render\",value:function(){var e=this.props,t=e.type,n=e.direction;return d.createElement(\"div\",{className:Object(m.n)(\"align\",\"align-\".concat(t),\"align-\".concat(n)),onClick:this.onClick},d.createElement(\"div\",{className:Object(m.n)(\"align-line\")}),d.createElement(\"div\",{className:Object(m.n)(\"align-element1\")}),d.createElement(\"div\",{className:Object(m.n)(\"align-element2\")}))}}]),n}(d.PureComponent),Oe=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){return Object(i.a)(this,n),t.apply(this,arguments)}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"svg\",{viewBox:\"0 0 73 73\"},d.createElement(\"rect\",{x:\"15\",y:\"16\",width:\"36\",height:\"6\",rx:\"3\",fill:\"#fff\"}),d.createElement(\"rect\",{x:\"15\",y:\"35\",width:\"26\",height:\"6\",rx:\"3\",fill:\"#fff\"}),d.createElement(\"rect\",{x:\"15\",y:\"54\",width:\"46\",height:\"6\",rx:\"3\",fill:\"#fff\"}))}}]),n}(C);Oe.id=\"Align\";var je=[\"vertical\",\"horizontal\"],Ee=[\"start\",\"center\",\"end\"];function we(e,t,n){var r,a;return\"horizontal\"===e?(r=n.height,a=n.top):(r=n.width,a=n.left),\"start\"===t?a:\"center\"===t?a+r/2:a+r}var Ce=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).title=\"Align\",e.onClick=function(t,n){var r=e.getMoveable();if(r.moveable){var a=r.moveable.moveables,o=r.getRect(),i=we(t,n,o);if(a){var c=a.map((function(r){var a=r.state.target,o=e.moveableData.getFrame(a);if(o){var c=o.get(),s=r.getRect(),l=we(t,n,s),u=i-l,p=o.get(\"transform\",\"translate\").split(\",\").map((function(e){return parseFloat(e)}));return p[\"horizontal\"===t?1:0]+=u,o.set(\"transform\",\"translate\",p.map((function(e){return\"\".concat(e,\"px\")})).join(\", \")),{id:Object(m.e)(a),prev:c,next:o.get()}}return!1})).filter((function(e){return e}));e.historyManager.addAction(\"renders\",{infos:c}),e.moveableData.renderFrames(),r.updateRect()}else{var s=we(t,n,{width:400,height:600,left:0,top:0}),l=i-s;r.request(\"draggable\",Object(Z.a)({},\"horizontal\"===t?\"deltaY\":\"deltaX\",-l),!0)}}},e}return Object(c.a)(n,[{key:\"renderTab\",value:function(){var e=this;return d.createElement(\"div\",{className:Object(m.n)(\"align-tab\")},je.map((function(t){return Ee.map((function(n){return d.createElement(xe,{key:\"\".concat(t,\"-\").concat(n),type:t,direction:n,onClick:e.onClick})}))})))}}]),n}(_);Ce.id=\"Align\",Ce.icon=Oe;var Se=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){return Object(i.a)(this,n),t.apply(this,arguments)}return Object(c.a)(n,[{key:\"render\",value:function(){var e=this.props.name;return d.createElement(d.Fragment,null,d.createElement(ve,{type:\"full\",label:e}))}}]),n}(me),Ie=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){return Object(i.a)(this,n),t.apply(this,arguments)}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"svg\",{viewBox:\"0 0 73 73\"},d.createElement(\"path\",{d:\"M36.5,20 L56.5,30 L36.5,40 L16.5,30 L36.5,20Z\",stroke:\"#fff\",strokeWidth:\"3\",style:{fill:\"rgba(255, 255, 255, 0.5)\"}}),d.createElement(\"path\",{d:\"M36.5,20 L56.5,30 L36.5,40 L16.5,30 L36.5,20Z\",stroke:\"#fff\",strokeWidth:\"3\",style:{fill:\"rgba(255, 255, 255, 0.5)\",transform:\"translateY(10px)\"}}),d.createElement(\"path\",{d:\"M36.5,20 L56.5,30 L36.5,40 L16.5,30 L36.5,20Z\",fill:\"#fff\",stroke:\"#fff\",strokeWidth:\"3\",style:{transform:\"translateY(20px)\"}}))}}]),n}(C);Ie.id=\"Layer\";var Me=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).title=\"Layers\",e.renderFile=function(e){var t=e.name,n=e.fullId,r=e.scope,a=e.value;return d.createElement(Se,{name:t,fullId:n,scope:r,value:a})},e.onSelect=function(t){e.eventBus.requestTrigger(\"selectLayers\",{selected:t})},e.onMove=function(t,n,r){var a=e.context,o=a.getViewport();a.moves(t.map((function(e,a){return{info:e.value,parentInfo:o.getInfo(n?n.fullId:\"viewport\"),prevInfo:0===a?o.getInfo(r?r.fullId:\"\"):t[a-1].value}})))},e.checkMove=function(e){var t=e.value.jsx;return!Object(m.k)(t)&&(Object(b.L)(t)||Object(b.L)(t.type))},e.setSelectedTargets=function(){e.forceUpdate()},e}return Object(c.a)(n,[{key:\"renderTab\",value:function(){var e=this.context.getViewportInfos(),t=Object(m.f)(this.getSelectedTargets());return d.createElement(he,{scope:[],name:\"\",properties:e,multiselect:!0,isMove:!0,getId:function(e){return e.id},getFullId:function(e){return e},getName:function(e){return e.name},getChildren:function(e){return e.children||[]},selected:t,onSelect:this.onSelect,checkMove:this.checkMove,onMove:this.onMove,FileComponent:this.renderFile})}},{key:\"componentDidMount\",value:function(){this.addEvent(\"setSelectedTargets\",this.setSelectedTargets)}}]),n}(_);Me.id=\"Layers\",Me.icon=Ie;var Te=n(114).ChromePicker,Re=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).inputAttributes={},e.state={color:\"rgba(255, 255, 255, 255)\"},e.onChange=function(t){var n=t.rgb,r=n.r,a=n.g,o=n.b,i=n.a;e.setState({color:\"rgba(\".concat(r,\", \").concat(a,\", \").concat(o,\", \").concat(i,\")\")})},e.onChangeComplete=function(t){var n=t.rgb,r=n.r,a=n.g,o=n.b,i=n.a;e.props.onChange(\"rgba(\".concat(r,\", \").concat(a,\", \").concat(o,\", \").concat(i,\")\"))},e}return Object(c.a)(n,[{key:\"render\",value:function(){var e=this.state.color;return d.createElement(Te,{width:\"180px\",color:e,onChange:this.onChange,onChangeComplete:this.onChangeComplete})}},{key:\"componentDidUpdate\",value:function(){}},{key:\"setValue\",value:function(e){this.setState({color:e})}},{key:\"getValue\",value:function(){return this.state.color}}]),n}(Q),Le=Object(v.a)(\"div\",\"\\n.scena-color-input {\\n    position: relative;\\n}\\n.scena-color-picker {\\n    position: absolute;\\n    top: 100%;\\n    right: 0;\\n    transform: translateY(10px) translateZ(1px);\\n    z-index: 10;\\n}\\n\\n.scena-color-background {\\n    position: relative;\\n    width: 30px;\\n    height: 30px;\\n    background: #4af;\\n    border-radius: 5px;\\n    display: inline-block;\\n    vertical-align: top;\\n    margin-right: 5px;\\n}\\n.scena-color-background+.scena-input {\\n    display: inline-block;\\n    vertical-align: top;\\n    width: calc(100% - 40px);\\n}\\n\\n\"),De=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).inputAttributes={},e.colorInput=d.createRef(),e.textInput=d.createRef(),e.state={display:\"none\",color:\"#fff\"},e.onFocus=function(){e.setState({display:\"block\"})},e.onBlur=function(t){var n=t.nativeEvent.relatedTarget;e.getElement().contains(n)||e.setState({display:\"none\"})},e.onChange=function(t){e.props.onChange(t)},e.onDragStart=function(e){\"INPUT\"!==e.target.tagName&&e.preventDefault()},e.onClick=function(t){e.textInput.current.getElement().focus()},e}return Object(c.a)(n,[{key:\"render\",value:function(){return d.createElement(Le,{className:Object(m.n)(\"color-input\"),ref:this.input,onBlur:this.onBlur},d.createElement(\"div\",{className:Object(m.n)(\"color-background\"),style:{backgroundColor:this.state.color},onClick:this.onClick}),d.createElement(ee,{ref:this.textInput,onChange:this.onChange,inputProps:{onFocus:this.onFocus}}),this.renderPicker())}},{key:\"renderPicker\",value:function(){var e=this.state.display;if(\"none\"!==e)return d.createElement(\"div\",{className:Object(m.n)(\"color-picker\"),onMouseDown:this.onDragStart,onTouchStart:this.onDragStart,style:{display:e}},d.createElement(Re,{ref:this.colorInput,onChange:this.onChange}))}},{key:\"setValue\",value:function(e){this.setState({color:e}),this.textInput.current.setValue(e),this.colorInput.current&&this.colorInput.current.setValue(e)}},{key:\"getValue\",value:function(){return this.textInput.current.getValue()}}]),n}(Q),ze=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){return Object(i.a)(this,n),t.apply(this,arguments)}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"svg\",{viewBox:\"0 0 73 73\"},d.createElement(\"ellipse\",{fill:\"#e77\",cx:\"36.5\",cy:\"26\",rx:\"17\",ry:\"17\",strokeLinejoin:\"round\"}),d.createElement(\"ellipse\",{fill:\"#7e7\",cx:\"23\",cy:\"50\",rx:\"17\",ry:\"17\",strokeLinejoin:\"round\"}),d.createElement(\"ellipse\",{fill:\"#77e\",cx:\"50\",cy:\"50\",rx:\"17\",ry:\"17\",strokeLinejoin:\"round\"}))}}]),n}(C);ze.id=\"Colors\";var Pe=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).title=\"Colors\",e.onChangeBackgroundColor=function(t){e.memory.set(\"background-color\",t),e.context.setProperty([\"background-color\"],t)},e.onChangeTextColor=function(t){e.memory.set(\"color\",t),e.context.setProperty([\"color\"],t)},e.onRender=function(){e.forceUpdate()},e}return Object(c.a)(n,[{key:\"renderTab\",value:function(){var e=this.getSelectedFrames(),t=this.memory.get(\"background-color\"),n=this.memory.get(\"color\");if(e.length){var r=e.map((function(e){return e.get(\"background-color\")})),a=e.map((function(e){return e.get(\"color\")}));t=r.filter((function(e){return e}))[0]||\"transparent\",n=a.filter((function(e){return e}))[0]||\"#333\"}return d.createElement(\"div\",{className:Object(m.n)(\"current-tab\")},d.createElement(re,{type:\"full\",label:\"Background Color\",input:De,value:t,updateValue:!0,onChange:this.onChangeBackgroundColor}),d.createElement(re,{type:\"full\",label:\"Text Color\",input:De,value:n,updateValue:!0,onChange:this.onChangeTextColor}))}},{key:\"componentDidMount\",value:function(){this.addEvent(\"render\",this.onRender),this.addEvent(\"setSelectedTargets\",this.onRender)}}]),n}(_);Pe.id=\"Colors\",Pe.icon=ze;var Ve=Object(v.a)(\"select\",\"\\n{\\n    position: relative;\\n    appearance: none;\\n    -webkit-appearance: none;\\n    outline: none;\\n    display: block;\\n    width: 100%;\\n    height: 30px;\\n    padding: 5px;\\n    background: transparent;\\n    color: var(--mainColor);\\n    font-weight: bold;\\n    background: var(--back1);\\n    border: 0;\\n    box-sizing: border-box;\\n    text-align: center;\\n}\\n\\n\"),Ae=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).inputAttributes={},e.onInput=function(t){var n=t.nativeEvent||t;Object(b.M)(n.data)&&e.props.onChange(e.getValue())},e}return Object(c.a)(n,[{key:\"render\",value:function(){var e=this.props.options||[];return d.createElement(Ve,Object.assign({ref:this.input,className:Object(m.n)(\"select\")},this.inputAttributes,this.props.inputProps,{onInput:this.onInput}),e.map((function(e){return d.createElement(\"option\",{key:e,value:e},e)})))}},{key:\"getValue\",value:function(){return this.getElement().value}},{key:\"setValue\",value:function(e){this.getElement().value=\"\".concat(Object(b.M)(e)?\"\":e)}}]),n}(Q),Ne=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){return Object(i.a)(this,n),t.apply(this,arguments)}return Object(c.a)(n,[{key:\"renderIcon\",value:function(){return d.createElement(\"svg\",{viewBox:\"0 0 80 80\"},d.createElement(\"path\",{d:\"M64.286,17.81L20.714,17.81L20.714,29.56L29.214,23L39.262,23L39.262,55.476L27.77,61.262L27.77,62.071L57.23,62.071L57.23,61.262L45.738,55.476L45.738,23L55.786,23L64.286,29.56L64.286,17.81Z\",style:{fill:\"white\"}}))}}]),n}(C);Ne.id=\"Font\";var Be={options:[\"sans-serif\"]},Fe={options:[\"left\",\"center\",\"right\",\"justify\"]},Ge={options:[\"normal\",\"italic\",\"blique\"]},qe={options:[\"100\",\"200\",\"300\",\"normal\",\"500\",\"600\",\"bold\",\"800\"]},Ue={options:[\"none\",\"underline\",\"overline\",\"line-through\"]},He=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).title=\"Font\",e.onChangeSize=function(t){e.changeProperty(\"font-size\",t)},e.onChangeAlign=function(t){e.changeProperty(\"text-align\",t)},e.onChangeFamily=function(t){e.changeProperty(\"font-family\",t)},e.onChangeStyle=function(t){e.changeProperty(\"font-style\",t)},e.onChangeWeight=function(t){e.changeProperty(\"font-weight\",t)},e.onChangeDecoration=function(t){e.changeProperty(\"text-decoration\",t)},e.onRender=function(){e.forceUpdate()},e.setTargets=function(){e.forceUpdate()},e}return Object(c.a)(n,[{key:\"renderTab\",value:function(){var e=this.moveableData.getProperties([[\"font-family\"],[\"font-size\"],[\"text-align\"],[\"font-style\"],[\"font-weight\"],[\"text-decoration\"]],[\"sans-serif\",\"14px\",\"left\",\"normal\",\"normal\",\"none\"]),t=Object(P.a)(e,6),n=t[0],r=t[1],a=t[2],o=t[3],i=t[4],c=t[5];return d.createElement(\"div\",{className:Object(m.n)(\"font-tab\")},d.createElement(re,{type:\"half\",label:\"family\",input:Ae,props:Be,value:n,updateValue:!0,onChange:this.onChangeFamily}),d.createElement(re,{type:\"half\",label:\"size\",input:ee,value:r,updateValue:!0,onChange:this.onChangeSize}),d.createElement(re,{type:\"half\",label:\"align\",input:Ae,props:Fe,value:a,updateValue:!0,onChange:this.onChangeAlign}),d.createElement(re,{type:\"half\",label:\"style\",input:Ae,props:Ge,value:o,updateValue:!0,onChange:this.onChangeStyle}),d.createElement(re,{type:\"half\",label:\"weight\",input:Ae,props:qe,value:i,updateValue:!0,onChange:this.onChangeWeight}),d.createElement(re,{type:\"half\",label:\"decoration\",input:Ae,props:Ue,value:c,updateValue:!0,onChange:this.onChangeDecoration}))}},{key:\"componentDidMount\",value:function(){this.addEvent(\"render\",this.onRender),this.addEvent(\"setSelectedTargets\",this.setTargets)}},{key:\"changeProperty\",value:function(e,t){this.memory.set(e,t),this.context.setProperty([e],t,!0)}}]),n}(_);He.id=\"Font\",He.icon=Ne;var We,Ke=Object(v.a)(\"div\",\"\\n{\\n    position: absolute;\\n    right: 0;\\n    width: 40px;\\n    height: 100%;\\n    background: var(--back2);\\n    z-index: 10;\\n    transform: translateZ(10px);\\n    box-sizing: border-box;\\n    padding-top: 30px;\\n    transition: width ease 0.2s;\\n    text-align: left;\\n}\\n.scena-tab {\\n    position: relative;\\n    margin: 5px;\\n}\\n.scena-tab-icon {\\n    position: relative;\\n    position: relative;\\n    color: #fff;\\n    font-size: 11px;\\n    font-weight: bold;\\n    word-break: break-all;\\n    padding: 5px;\\n    width: 30px;\\n    line-height: 20px;\\n    height: 30px;\\n    box-sizing: border-box;\\n    border-radius: 3px;\\n    text-align: left;\\n    overflow: hidden;\\n\\n}\\n.scena-tab-icon * {\\n    pointer-events: none;\\n}\\n\\n.scena-tab.scena-selected .scena-tab-icon {\\n    background: var(--mainColor);\\n}\\n\\n.scena-tab-popup {\\n    position: absolute;\\n    right: 100%;\\n    top: 0;\\n    transform: translate(-5px);\\n    width: var(--tab);\\n    padding: 0px 10px 10px;\\n    background: var(--back2);\\n    border-bottom: 1px solid var(--back1);\\n    text-align: left;\\n}\\n\\n.scena-tab-popup h2 {\\n    margin: 0;\\n    color: white;\\n    font-weight: bold;\\n    font-size: 14px;\\n    padding: 8px 0px;\\n}\\n\\n.scena-tab-line {\\n    position: relative;\\n    display: block;\\n}\\n\\n\"),Xe=[Pe,Ce,He,Me,ue,ke],Je=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).tabs=d.createRef(),e.state={selected:\"\"},e.blur=function(){e.tabs.current.getElement().classList.remove(\"scena-over\")},e.onClick=function(t){e.onMouseOver();var n=t.target,r=e.state.selected,a=n.getAttribute(\"data-target-id\");e.setState({selected:r===a?\"\":a})},e.onMouseOver=function(){e.tabs.current.getElement().classList.add(\"scena-over\")},e}return Object(c.a)(n,[{key:\"render\",value:function(){return d.createElement(Ke,{className:Object(m.n)(\"tabs\"),ref:this.tabs,onMouseOver:this.onMouseOver,onMouseOut:this.blur},this.renderTabs())}},{key:\"renderTabs\",value:function(){var e=this,t=this.state.selected;return Xe.map((function(n){var r=n.id,a=r===t,o=n.icon;return d.createElement(\"div\",{key:r,className:Object(m.n)(\"tab\",a?\"selected\":\"\")},d.createElement(\"div\",{\"data-target-id\":r,className:Object(m.n)(\"tab-icon\"),onClick:e.onClick},o?d.createElement(o,null):d.createElement(\"span\",null,r)),a&&d.createElement(n,null))}))}}]),n}(d.PureComponent),Ze=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).eventMap={},e}return Object(c.a)(n,[{key:\"requestTrigger\",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=this.eventMap;cancelAnimationFrame(r[e]||0),r[e]=requestAnimationFrame((function(){t.trigger(e,n)}))}}]),n}(n(15).a),Ye=function(){function e(){Object(i.a)(this,e),this.map=new Map}return Object(c.a)(e,[{key:\"get\",value:function(e){return this.map.get(e)}},{key:\"set\",value:function(e,t){return this.map.set(e,t)}},{key:\"clear\",value:function(){this.map.clear()}}]),e}(),_e=n(31),Qe=n(44),$e={name:\"dimensionViewable\",props:{dimensionViewable:Boolean},events:{},render:function(e){var t=e.props.zoom,n=e.getRect();return d.createElement(\"div\",{key:\"dimension-viewer\",className:\"moveable-dimension\",style:{left:\"\".concat(n.width/2,\"px\"),top:\"\".concat(n.height,\"px\"),transform:\"translate(-50%, \".concat(20*t,\"px) scale(\").concat(t,\")\")}},Math.round(n.offsetWidth),\" x \",Math.round(n.offsetHeight))}},et={name:\"deleteButtonViewable\",props:{deleteButtonViewable:Boolean},events:{},render:function(e,t){var n=e.getRect(),r=e.state.pos2,a=e.useCSS(\"div\",'\\n        {\\n            position: absolute;\\n            left: 0px;\\n            top: 0px;\\n            will-change: transform;\\n            transform-origin: 0px 0px;\\n            width: 24px;\\n            height: 24px;\\n            background: #4af;\\n            background: var(--moveable-color);\\n            opacity: 0.9;\\n            border-radius: 4px;\\n        }\\n        :host:before, :host:after {\\n            content: \"\";\\n            position: absolute;\\n            left: 50%;\\n            top: 50%;\\n            transform: translate(-50%, -50%) rotate(45deg);\\n            width: 16px;\\n            height: 2px;\\n            background: #fff;\\n            border-radius: 1px;\\n            cursor: pointer;\\n        }\\n        :host:after {\\n            transform: translate(-50%, -50%) rotate(-45deg);\\n        }\\n        ');return t.createElement(y.d.Consumer,{key:\"delete-button-viewer\"},(function(e){return t.createElement(a,{className:\"moveable-delete-button\",onClick:function(){e.removeElements(e.getSelectedTargets())},style:{transform:\"translate(\".concat(r[0],\"px, \").concat(r[1],\"px) rotate(\").concat(n.rotation,\"deg) translate(10px)\")}})}))}};function tt(e,t,n,r,a){var o=a.viewport.current.getElement(e);if(!o)return console.error(\"No Element\"),!1;var i=a.moveableData,c=i.getFrame(o);c.clear(),c.set(t),c.setOrderObject(r);var s=Object(Qe.b)(Object.keys(n),Object.keys(t)),l=s.removed,u=s.prevList;return l.forEach((function(e){o.style.removeProperty(u[e])})),i.render(o),!0}function nt(e,t){tt(e.id,e.prev,e.next,e.prevOrders,t)&&(t.moveableManager.current.updateRect(),t.eventBus.trigger(\"render\"))}function rt(e,t){var n=e.id,r=e.prev;tt(n,e.next,r,e.nextOrders,t)&&(t.moveableManager.current.updateRect(),t.eventBus.trigger(\"render\"))}function at(e,t){e.infos.forEach((function(e){tt(e.id,e.prev,e.next,e.prevOrders,t)})),t.moveableManager.current.updateRect(),t.eventBus.trigger(\"render\")}function ot(e,t){e.infos.forEach((function(e){tt(e.id,e.next,e.prev,e.nextOrders,t)})),t.moveableManager.current.updateRect(),t.eventBus.trigger(\"render\")}var it=w(We=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).moveable=d.createRef(),e}return Object(c.a)(n,[{key:\"getMoveable\",value:function(){return this.moveable.current}},{key:\"render\",value:function(){var e=this,t=this.props,n=t.verticalGuidelines,r=t.horizontalGuidelines,a=t.selectedTargets,o=t.selectedMenu,i=t.zoom;if(!a.length)return this.renderViewportMoveable();var c=this.moveableData,s=this.memory,l=[document.querySelector(\".scena-viewport\")].concat(Object(J.a)(c.getTargets())).filter((function(e){return-1===a.indexOf(e)})),u=this.keyManager.shiftKey;return d.createElement(_e.a,{ables:[$e,et],ref:this.moveable,targets:a,dimensionViewable:!0,deleteButtonViewable:!0,draggable:!0,resizable:!0,pinchable:[\"rotatable\"],zoom:1/i,throttleResize:1,clippable:\"Crop\"===o,passDragArea:\"Text\"===o,checkInput:\"Text\"===o,throttleDragRotate:u?45:0,keepRatio:a.length>1||u,rotatable:!0,snappable:!0,snapCenter:!0,snapGap:!1,isDisplayInnerSnapDigit:!0,roundable:!0,verticalGuidelines:n,horizontalGuidelines:r,elementGuidelines:l,clipArea:!0,clipVerticalGuidelines:[0,\"50%\",\"100%\"],clipHorizontalGuidelines:[0,\"50%\",\"100%\"],clipTargetBounds:!0,onBeforeRenderStart:c.onBeforeRenderStart,onBeforeRenderGroupStart:c.onBeforeRenderGroupStart,onDragStart:c.onDragStart,onDrag:c.onDrag,onDragGroupStart:c.onDragGroupStart,onDragGroup:c.onDragGroup,onScaleStart:c.onScaleStart,onScale:c.onScale,onScaleGroupStart:c.onScaleGroupStart,onScaleGroup:c.onScaleGroup,onResizeStart:c.onResizeStart,onResize:c.onResize,onResizeGroupStart:c.onResizeGroupStart,onResizeGroup:c.onResizeGroup,onRotateStart:c.onRotateStart,onRotate:c.onRotate,onRotateGroupStart:c.onRotateGroupStart,onRotateGroup:c.onRotateGroup,defaultClipPath:s.get(\"crop\")||\"inset\",onClip:c.onClip,onDragOriginStart:c.onDragOriginStart,onDragOrigin:function(e){c.onDragOrigin(e)},onRound:c.onRound,onClick:function(t){var n=t.inputTarget;if(t.isDouble&&n.isContentEditable){e.selectMenu(\"Text\");var r=Object(m.d)(n);r&&r.focus()}else e.getSelecto().clickTarget(t.inputEvent,t.inputTarget)},onClickGroup:function(t){e.getSelecto().clickTarget(t.inputEvent,t.inputTarget)},onRenderStart:function(e){e.datas.prevData=c.getFrame(e.target).get()},onRender:function(t){t.datas.isRender=!0,e.eventBus.requestTrigger(\"render\")},onRenderEnd:function(t){e.eventBus.requestTrigger(\"render\"),t.datas.isRender&&e.historyManager.addAction(\"render\",{id:Object(m.e)(t.target),prev:t.datas.prevData,next:c.getFrame(t.target).get()})},onRenderGroupStart:function(e){e.datas.prevDatas=e.targets.map((function(e){return c.getFrame(e).get()}))},onRenderGroup:function(t){e.eventBus.requestTrigger(\"renderGroup\",t),t.datas.isRender=!0},onRenderGroupEnd:function(t){if(e.eventBus.requestTrigger(\"renderGroup\",t),t.datas.isRender){var n=t.datas.prevDatas,r=t.targets.map((function(e,t){return{id:Object(m.e)(e),prev:n[t],next:c.getFrame(e).get()}}));e.historyManager.addAction(\"renders\",{infos:r})}}})}},{key:\"renderViewportMoveable\",value:function(){var e=this.moveableData,t=this.getViewport(),n=t?t.viewportRef.current:null;return d.createElement(_e.a,{ref:this.moveable,target:n,origin:!1,onRotateStart:e.onRotateStart,onRotate:e.onRotate})}},{key:\"componentDidMount\",value:function(){var e=this;this.historyManager.registerType(\"render\",nt,rt),this.historyManager.registerType(\"renders\",at,ot),this.keyManager.keydown([\"shift\"],(function(){e.forceUpdate()})),this.keyManager.keyup([\"shift\"],(function(){e.forceUpdate()}))}},{key:\"updateRect\",value:function(){this.getMoveable().updateRect()}}]),n}(d.PureComponent))||We,ct=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(e){var r;return Object(i.a)(this,n),(r=t.call(this,{createAuto:!0,useBeforeRender:!0})).memory=e,r.selectedTargets=[],r}return Object(c.a)(n,[{key:\"setSelectedTargets\",value:function(e){this.selectedTargets=e}},{key:\"getSelectedTargets\",value:function(){return this.selectedTargets}},{key:\"getSelectedFrames\",value:function(){var e=this;return this.getSelectedTargets().map((function(t){return e.getFrame(t)}))}},{key:\"renderFrames\",value:function(){var e=this;this.getSelectedTargets().forEach((function(t){e.render(t)}))}},{key:\"setOrders\",value:function(e,t){return this.setValue((function(n){n.setOrders(e,t)}))}},{key:\"setProperty\",value:function(e,t){return this.setValue((function(n){n.set.apply(n,Object(J.a)(e).concat([t]))}))}},{key:\"removeProperties\",value:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return this.setValue((function(e,n){t.forEach((function(t){e.remove(t),n.style.removeProperty(t)}))}))}},{key:\"getProperties\",value:function(e,t){var n=this.getSelectedFrames(),r=this.memory;return n.length?e.map((function(e,r){return n.map((function(t){return t.get.apply(t,Object(J.a)(e))})).filter((function(e){return e}))[0]||t[r]})):e.map((function(e,n){return r.get(e.join(\"///\"))||t[n]}))}},{key:\"setValue\",value:function(e){var t=this,n=this.getSelectedTargets().map((function(n){var r=t.getFrame(n),a=r.getOrderObject(),o=r.get();e(r,n);var i=r.get(),c=r.getOrderObject();return{id:Object(m.e)(n),prev:o,prevOrders:a,next:i,nextOrders:c}}));return this.renderFrames(),n}}]),n}(n(119).a),st=function(){function e(t){Object(i.a)(this,e),this.editor=t,this.undoStack=[],this.redoStack=[],this.types={}}return Object(c.a)(e,[{key:\"registerType\",value:function(e,t,n){this.types[e]={undo:t,redo:n}}},{key:\"addAction\",value:function(e,t){this.editor.console.log(\"Add History:\",e,t),this.undoStack.push({type:e,props:t}),this.redoStack=[]}},{key:\"undo\",value:function(){var e=this.undoStack.pop();e&&(this.editor.console.log(\"Undo History: \".concat(e.type),e.props),this.types[e.type].undo(e.props,this.editor),this.redoStack.push(e))}},{key:\"redo\",value:function(){var e=this.redoStack.pop();e&&(this.editor.console.log(\"Redo History: \".concat(e.type),e.props),this.types[e.type].redo(e.props,this.editor),this.undoStack.push(e))}}]),e}(),lt=function(){function e(t){Object(i.a)(this,e),this.isDebug=t}return Object(c.a)(e,[{key:\"log\",value:function(){var e;if(this.isDebug){for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];(e=console).log.apply(e,[\"%c Scena Debugger:\",\"padding: 1px; background: #4af; color: #fff;\"].concat(n))}}}]),e}(),ut=n(115),pt=n.n(ut),dt=function(){function e(t){var n=this;Object(i.a)(this,e),this.editor=t,this.onCut=function(e){n.onCopy(e)&&(n.editor.console.log(\"cut scena data\"),n.editor.removeElements(n.editor.getSelectedTargets()))},this.onCopy=function(){var e=Object(o.a)(a.a.mark((function e(t){var r,o,i;return a.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(!Object(m.c)(t.target)){e.next=2;break}return e.abrupt(\"return\",!1);case 2:return t.preventDefault(),r=t.clipboardData,o=n.editor.getSelectedTargets(),i=n.editor.saveTargets(o),n.editor.console.log(\"copy scena data\",i),r.setData(y.f,JSON.stringify(i)),e.abrupt(\"return\",!0);case 9:case\"end\":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}(),this.onPaste=function(e){Object(m.c)(e.target)||(n.read(e.clipboardData),e.preventDefault())},document.addEventListener(\"cut\",this.onCut),document.addEventListener(\"copy\",this.onCopy),document.addEventListener(\"paste\",this.onPaste)}return Object(c.a)(e,[{key:\"destroy\",value:function(){document.removeEventListener(\"cut\",this.onCut),document.removeEventListener(\"copy\",this.onCopy),document.removeEventListener(\"paste\",this.onPaste)}},{key:\"copy\",value:function(){document.execCommand(\"copy\")}},{key:\"cut\",value:function(){document.execCommand(\"cut\")}},{key:\"paste\",value:function(){document.execCommand(\"paste\")}},{key:\"copyImage\",value:function(){var e=this.editor.getSelectedTargets(),t=this.editor.getMoveable(),n=e.length,r=n>1?t.moveable.moveables:[];return new Promise((function(a){Promise.all(e.map((function(e){return pt()(e)}))).then((function(e){var o;if(n>1){var i=t.getRect(),c=document.createElement(\"canvas\");c.width=i.width,c.height=i.height;var s=c.getContext(\"2d\");r.map((function(e){return e.getRect()})).forEach((function(t,n){s.drawImage(e[n],t.left-i.left,t.top-i.top)})),o=c}else o=e[0];o.toBlob((function(e){navigator.clipboard.write([new window.ClipboardItem({\"image/png\":e})]),a()}))}))}))}},{key:\"readDataTransfter\",value:function(e){if(e.types.indexOf(y.f)>-1){var t=JSON.parse(e.getData(y.f));return this.editor.console.log(\"paste scena data\",t),this.editor.loadDatas(t),!0}return!1}},{key:\"read\",value:function(){var e=Object(o.a)(a.a.mark((function e(t){var n,r,o,i=this;return a.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(!this.readDataTransfter(t)){e.next=2;break}return e.abrupt(\"return\",!0);case 2:return e.next=4,navigator.clipboard.read();case 4:if(n=e.sent,r=!1,n.filter((function(e){var t=e.types,n=t.indexOf(\"image/png\")>-1;return r=r||t.indexOf(\"text/plain\")>-1,!!n&&(e.getType(\"image/png\").then((function(e){i.editor.appendBlob(e)})),!0)})).length>0||!r){e.next=12;break}return e.next=10,navigator.clipboard.readText();case 10:o=e.sent,this.editor.appendJSXs([{jsx:d.createElement(\"div\",{contentEditable:\"true\"}),name:\"(Text)\",innerText:o}]);case 12:case\"end\":return e.stop()}}),e,this)})));return function(t){return e.apply(this,arguments)}}()}]),e}(),ft=n(34),ht=n(8),gt=Object(v.a)(\"div\",y.b);function vt(e,t){var n=e.infos,r=e.prevSelected,a=t.removeByIds(n.map((function(e){return e.id})),!0);r&&a.then((function(){t.setSelectedTargets(t.getViewport().getElements(r),!0)}))}function mt(e,t){var n=e.infos;t.appendJSXs(n.map((function(e){return Object(p.a)({},e)})),!0)}function bt(e,t){var n=e.prevs;e.nexts;t.setSelectedTargets(t.viewport.current.getElements(n),!0)}function yt(e,t){e.prevs;var n=e.nexts;t.setSelectedTargets(t.viewport.current.getElements(n),!0)}function kt(e,t){var n=e.prev,r=(e.next,e.id),a=t.getViewport().getInfo(r);a.innerText=n,a.el.innerText=n}function xt(e,t){e.prev;var n=e.next,r=e.id,a=t.getViewport().getInfo(r);a.innerText=n,a.el.innerText=n}function Ot(e,t){var n=e.prevInfos;t.moves(n,!0)}function jt(e,t){var n=e.nextInfos;t.moves(n,!0)}var Et=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(i.a)(this,n);for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];return(e=t.call.apply(t,[this].concat(a))).state={selectedTargets:[],horizontalGuides:[],verticalGuides:[],zoom:1,selectedMenu:\"MoveTool\"},e.historyManager=new st(Object(s.a)(e)),e.console=new lt(e.props.debug),e.eventBus=new Ze,e.memory=new Ye,e.moveableData=new ct(e.memory),e.keyManager=new B(e.console),e.clipboardManager=new dt(Object(s.a)(e)),e.horizontalGuides=d.createRef(),e.verticalGuides=d.createRef(),e.infiniteViewer=d.createRef(),e.selecto=d.createRef(),e.menu=d.createRef(),e.moveableManager=d.createRef(),e.viewport=d.createRef(),e.tabs=d.createRef(),e.editorElement=d.createRef(),e.getSelecto=function(){return e.selecto.current},e.getViewport=function(){return e.viewport.current},e.getEditorElement=function(){return e.editorElement.current.getElement()},e.getMoveable=function(){return e.moveableManager.current.getMoveable()},e.getSelectedTargets=function(){return e.state.selectedTargets},e.getSelectedFrames=function(){return e.moveableData.getSelectedFrames()},e.selectMenu=function(t){e.menu.current.select(t)},e.onMenuChange=function(t){e.setState({selectedMenu:t})},e.onResize=function(){e.horizontalGuides.current.resize(),e.verticalGuides.current.resize()},e.onBlur=function(t){var n=t.target;if(Object(m.c)(n)){var r=Object(m.h)(n);if(r){var a=e.getViewport().getInfoByElement(r);if(a.attrs.contenteditable){var o=r.innerText;a.innerText!==o&&(e.historyManager.addAction(\"changeText\",{id:a.id,prev:a.innerText,next:o}),a.innerText=o)}}}},e}return Object(c.a)(n,[{key:\"render\",value:function(){return d.createElement(y.d.Provider,{value:this},this.renderChildren())}},{key:\"renderChildren\",value:function(){var e=this,t=this.horizontalGuides,n=this.verticalGuides,r=this.infiniteViewer,a=this.moveableManager,o=this.viewport,i=this.menu,c=this.tabs,s=this.selecto,l=this.state,u=l.selectedMenu,p=l.selectedTargets,v=l.zoom,b=this.props,k=b.width,x=b.height,O=l.horizontalGuides,j=l.verticalGuides,E=50;return v<.8&&(E=50*Math.floor(1/v)),d.createElement(gt,{className:Object(m.n)(\"editor\"),ref:this.editorElement},d.createElement(Je,{ref:c}),d.createElement(X,{ref:i,onSelect:this.onMenuChange}),d.createElement(\"div\",{className:Object(m.n)(\"reset\"),onClick:function(e){r.current.scrollCenter()}}),d.createElement(h.a,{ref:t,type:\"horizontal\",className:Object(m.n)(\"guides\",\"horizontal\"),style:{},snapThreshold:5,snaps:O,displayDragPos:!0,dragPosFormat:function(e){return\"\".concat(e,\"px\")},zoom:v,unit:E,onChangeGuides:function(t){e.setState({horizontalGuides:t.guides})}}),d.createElement(h.a,{ref:n,type:\"vertical\",className:Object(m.n)(\"guides\",\"vertical\"),style:{},snapThreshold:5,snaps:j,displayDragPos:!0,dragPosFormat:function(e){return\"\".concat(e,\"px\")},zoom:v,unit:E,onChangeGuides:function(t){e.setState({verticalGuides:t.guides})}}),d.createElement(f.a,{ref:r,className:Object(m.n)(\"viewer\"),usePinch:!0,useForceWheel:!0,pinchThreshold:50,zoom:v,onDragStart:function(t){var n=t.inputEvent.target;e.checkBlur(),(\"A\"===n.nodeName||a.current.getMoveable().isMoveableElement(n)||a.current.getMoveable().isDragging()||p.some((function(e){return e===n||e.contains(n)})))&&t.stop()},onDragEnd:function(e){e.isDrag||s.current.clickTarget(e.inputEvent)},onAbortPinch:function(e){s.current.triggerDragStart(e.inputEvent)},onScroll:function(e){t.current.scroll(e.scrollLeft),t.current.scrollGuides(e.scrollTop),n.current.scroll(e.scrollTop),n.current.scrollGuides(e.scrollLeft)},onPinch:function(t){a.current.getMoveable().isDragging()||e.setState({zoom:t.zoom})}},d.createElement(Y,{ref:o,onBlur:this.onBlur,style:{width:\"\".concat(k,\"px\"),height:\"\".concat(x,\"px\")}},d.createElement(it,{ref:a,selectedTargets:p,selectedMenu:u,verticalGuidelines:j,horizontalGuidelines:O,zoom:v}))),d.createElement(g.a,{ref:s,getElementRect:_e.b,dragContainer:\".scena-viewer\",hitRate:0,selectableTargets:[\".scena-viewport [\".concat(y.a,\"]\")],selectByClick:!0,selectFromInside:!1,toggleContinueSelect:[\"shift\"],preventDefault:!0,scrollOptions:r.current?{container:r.current.getContainer(),threshold:30,throttleTime:30,getScrollPosition:function(){var e=r.current;return[e.getScrollLeft(),e.getScrollTop()]}}:void 0,onDragStart:function(t){var n=t.inputEvent,r=n.target;if(e.checkBlur(),\"Text\"===u&&r.isContentEditable){var o=Object(m.d)(r);o&&o.hasAttribute(y.a)&&(t.stop(),e.setSelectedTargets([o]))}(\"touchstart\"===n.type&&t.isTrusted||a.current.getMoveable().isMoveableElement(r)||l.selectedTargets.some((function(e){return e===r||e.contains(r)})))&&t.stop()},onScroll:function(e){var t=e.direction;r.current.scrollBy(10*t[0],10*t[1])},onSelectEnd:function(t){var n=t.isDragStart,r=t.selected,o=t.inputEvent,i=t.rect;n&&o.preventDefault(),e.selectEndMaker(i)||e.setSelectedTargets(r).then((function(){n&&a.current.getMoveable().dragStart(o)}))}}))}},{key:\"componentDidMount\",value:function(){var e=Object(o.a)(a.a.mark((function e(){var t,n,r,o,i,c,s=this;return a.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t=this.infiniteViewer,n=this.memory,r=this.eventBus,n.set(\"background-color\",\"#4af\"),n.set(\"color\",\"#333\"),requestAnimationFrame((function(){s.verticalGuides.current.resize(),s.horizontalGuides.current.resize(),t.current.scrollCenter()})),window.addEventListener(\"resize\",this.onResize),o=this.getViewport(),r.on(\"blur\",(function(){s.menu.current.blur(),s.tabs.current.blur()})),r.on(\"selectLayers\",(function(e){var t=e.selected;s.setSelectedTargets(t.map((function(e){return o.getInfo(e).el})))})),r.on(\"update\",(function(){s.forceUpdate()})),this.keyManager.keydown([\"left\"],(function(e){s.move(-10,0),e.inputEvent.preventDefault()}),\"Move Left\"),this.keyManager.keydown([\"up\"],(function(e){s.move(0,-10),e.inputEvent.preventDefault()}),\"Move Up\"),this.keyManager.keydown([\"right\"],(function(e){s.move(10,0),e.inputEvent.preventDefault()}),\"Move Right\"),this.keyManager.keydown([\"down\"],(function(e){s.move(0,10),e.inputEvent.preventDefault()}),\"Move Down\"),this.keyManager.keyup([\"backspace\"],(function(){s.removeElements(s.getSelectedTargets())}),\"Delete\"),e.next=16,Object(ft.b)();case 16:i=e.sent,c=\"mac\"===i.os.name||\"ios\"===i.os.name,this.keyManager.keydown([c?\"meta\":\"ctrl\",\"x\"],(function(){}),\"Cut\"),this.keyManager.keydown([c?\"meta\":\"ctrl\",\"c\"],(function(){}),\"Copy\"),this.keyManager.keydown([c?\"meta\":\"ctrl\",\"v\"],(function(){}),\"Paste\"),this.keyManager.keydown([c?\"meta\":\"ctrl\",\"z\"],(function(){s.historyManager.undo()}),\"Undo\"),this.keyManager.keydown([c?\"meta\":\"ctrl\",\"shift\",\"z\"],(function(){s.historyManager.redo()}),\"Redo\"),this.keyManager.keydown([c?\"meta\":\"ctrl\",\"a\"],(function(e){s.setSelectedTargets(s.getViewportInfos().map((function(e){return e.el}))),e.inputEvent.preventDefault()}),\"Select All\"),this.keyManager.keydown([c?\"meta\":\"ctrl\",\"alt\",\"g\"],(function(e){e.inputEvent.preventDefault(),s.moveInside()}),\"Move Inside\"),this.keyManager.keydown([c?\"meta\":\"ctrl\",\"shift\",\"alt\",\"g\"],(function(e){e.inputEvent.preventDefault(),s.moveOutside()}),\"Move Outside\"),this.historyManager.registerType(\"createElements\",vt,mt),this.historyManager.registerType(\"removeElements\",mt,vt),this.historyManager.registerType(\"selectTargets\",bt,yt),this.historyManager.registerType(\"changeText\",kt,xt),this.historyManager.registerType(\"move\",Ot,jt);case 31:case\"end\":return e.stop()}}),e,this)})));return function(){return e.apply(this,arguments)}}()},{key:\"componentWillUnmount\",value:function(){this.eventBus.off(),this.memory.clear(),this.moveableData.clear(),this.keyManager.destroy(),this.clipboardManager.destroy(),window.removeEventListener(\"resize\",this.onResize)}},{key:\"promiseState\",value:function(e){var t=this;return new Promise((function(n){t.setState(e,(function(){n()}))}))}},{key:\"setSelectedTargets\",value:function(e,t){var n=this;return e=e.filter((function(t){return e.every((function(e){return e===t||!e.contains(t)}))})),this.promiseState({selectedTargets:e}).then((function(){if(!t){var r=Object(m.f)(n.moveableData.getSelectedTargets()),a=Object(m.f)(e);r.length===a.length&&r.every((function(e,t){return a[t]===e}))||n.historyManager.addAction(\"selectTargets\",{prevs:r,nexts:a})}return n.selecto.current.setSelectedTargets(e),n.moveableData.setSelectedTargets(e),n.eventBus.trigger(\"setSelectedTargets\"),e}))}},{key:\"appendJSX\",value:function(e){return this.appendJSXs([e]).then((function(e){return e[0]}))}},{key:\"appendJSXs\",value:function(e,t){var n=this,r=this.getViewport(),a=r.getSortedIndexesList(this.getSelectedTargets()),o=a.length,i=-1,c=\"\";if(!t&&o){var s=a[o-1];c=r.getInfoByIndexes(s).scopeId,i=s[s.length-1]+1}return this.console.log(\"append jsxs\",e,i,c),this.getViewport().appendJSXs(e,i,c).then((function(e){var r=e.added;return n.appendComplete(r,t)}))}},{key:\"removeByIds\",value:function(e,t){return this.removeElements(this.getViewport().getElements(e),t)}},{key:\"removeFrames\",value:function(e){var t={},n=this.moveableData,r=this.getViewport();return e.forEach((function e(a){var o=r.getInfoByElement(a),i=n.getFrame(a);t[o.id]={frame:i.get(),frameOrder:i.getOrderObject()},n.removeFrame(a),o.children.forEach((function(t){e(t.el)}))})),t}},{key:\"restoreFrames\",value:function(e,t){var n=this.getViewport(),r=this.moveableData;for(var a in e.map((function(e){return e.info})).forEach((function e(n){n.frame=t[n.id].frame,n.frameOrder=t[n.id].order,delete t[n.id],n.children.forEach(e)})),t)r.createFrame(n.getInfo(a).el,t[a])}},{key:\"removeElements\",value:function(e,t){var n=this,r=this.getViewport(),a=this.removeFrames(e),o=r.getSortedIndexesList(e),i=o.length,c=\"\",s=null;if(i){var l=r.getInfoByIndexes(o[i-1]),u=r.getNextInfo(l.id);c=l.scopeId,s=u}return r.removeTargets(e).then((function(o){var i=o.removed,l=s||r.getLastChildInfo(c)||r.getInfo(c);return n.setSelectedTargets(l&&l.el?[l.el]:[],!0),n.console.log(\"removeTargets\",i),!t&&n.historyManager.addAction(\"removeElements\",{infos:i.map((function e(t){return Object(p.a)(Object(p.a)({},t),{},{children:t.children.map(e)},a[t.id]||{})}))}),e}))}},{key:\"setProperty\",value:function(e,t,n){var r=this.moveableData.setProperty(e,t);this.historyManager.addAction(\"renders\",{infos:r}),n&&this.moveableManager.current.updateRect(),this.eventBus.requestTrigger(\"render\")}},{key:\"setOrders\",value:function(e,t,n){var r=this.moveableData.setOrders(e,t);this.historyManager.addAction(\"renders\",{infos:r}),n&&this.moveableManager.current.updateRect(),this.eventBus.requestTrigger(\"render\")}},{key:\"loadDatas\",value:function(e){var t=this.getViewport();return this.appendJSXs(e.map((function e(n){var r,a=n.componentId,o=n.jsxId,i=n.children;if(o&&(r=t.getJSX(o)),!r&&a){var c=t.getComponent(a);r=d.createElement(c,null)}return r||(r=d.createElement(n.tagName)),Object(p.a)(Object(p.a)({},n),{},{children:i.map(e),jsx:r})})).filter((function(e){return e})))}},{key:\"saveTargets\",value:function(e){var t=this.getViewport(),n=this.moveableData;return this.console.log(\"save targets\",e),e.map((function(e){return t.getInfoByElement(e)})).map((function e(t){var r=t.el,a=t.attrs.contenteditable;return{name:t.name,attrs:Object(m.i)(r),jsxId:t.jsxId||\"\",componentId:t.componentId,innerHTML:a?\"\":r.innerHTML,innerText:a?r.innerText:\"\",tagName:r.tagName.toLowerCase(),frame:n.getFrame(r).get(),children:t.children.map(e)}}))}},{key:\"getViewportInfos\",value:function(){return this.getViewport().getViewportInfos()}},{key:\"appendBlob\",value:function(e){var t=URL.createObjectURL(e);return this.appendJSX({jsx:d.createElement(\"img\",{src:t,alt:\"appended blob\"}),name:\"(Image)\"})}},{key:\"moves\",value:function(e,t){var n=this,r=this.removeFrames(e.map((function(e){return e.info.el})));return this.getViewport().moves(e).then((function(e){return n.moveComplete(e,r,t)}))}},{key:\"selectEndMaker\",value:function(e){var t=this.state.zoom,n=this.infiniteViewer.current,r=this.menu.current.getSelected(),a=e.width,o=e.height;if(!r||!r.maker||!a||!o)return!1;var i=r.maker(this.memory),c=-n.getScrollTop()*t+30,s=-n.getScrollLeft()*t+75,l=e.top-c,u=e.left-s,d=Object(p.a)({top:\"\".concat(l/t,\"px\"),left:\"\".concat(u/t,\"px\"),position:\"absolute\",width:\"\".concat(a/t,\"px\"),height:\"\".concat(o/t,\"px\")},i.style);return this.appendJSX({jsx:i.tag,attrs:i.attrs,name:\"(\".concat(r.id,\")\"),frame:d}).then(r.makeThen),!0}},{key:\"move\",value:function(e,t){this.getMoveable().request(\"draggable\",{deltaX:e,deltaY:t},!0)}},{key:\"checkBlur\",value:function(){var e=document.activeElement;e&&e.blur();var t=document.getSelection();t&&t.removeAllRanges(),this.eventBus.trigger(\"blur\")}},{key:\"moveInside\",value:function(){var e=this,t=this.getSelectedTargets();if(1===t.length){t=[t[0]];var n=this.getViewport(),r=this.removeFrames(t);return n.moveInside(t[0]).then((function(t){return e.moveComplete(t,r)}))}}},{key:\"moveOutside\",value:function(){var e=this,t=this.getSelectedTargets();if(1===t.length){t=[t[0]];var n=this.removeFrames(t);this.getViewport().moveOutside(t[0]).then((function(t){return e.moveComplete(t,n)}))}}},{key:\"appendComplete\",value:function(e,t){var n=this;!t&&this.historyManager.addAction(\"createElements\",{infos:e,prevSelected:Object(m.f)(this.getSelectedTargets())});var r=this.moveableData,a=this.getViewport().viewportRef.current,o=e.map((function e(t){var n=r.createFrame(t.el,t.frame);return t.frameOrder&&n.setOrderObject(t.frameOrder),r.render(t.el),t.children.forEach(e),t.el})).filter((function(e){return e}));return e.forEach((function(e){if(e.moveMatrix){var t=r.getFrame(e.el),n=Object(m.g)(e.el,a);n=Object(ht.c)(n,4);var o=Object(ht.d)(n,e.moveMatrix);Object(m.o)(t,o),r.render(e.el)}})),Promise.all(o.map((function(e){return Object(m.b)(e)}))).then((function(){return n.setSelectedTargets(o,!0),o}))}},{key:\"moveComplete\",value:function(e,t,n){this.console.log(\"Move\",e);var r=e.prevInfos,a=e.nextInfos;return this.restoreFrames(a,t),a.length&&(n||this.historyManager.addAction(\"move\",{prevInfos:r,nextInfos:a}),this.appendComplete(a.map((function(e){var t=e.info,n=e.moveMatrix;return Object(p.a)(Object(p.a)({},t),{},{moveMatrix:n})})),!0)),e}}]),n}(d.PureComponent);Et.defaultProps={width:400,height:600}},120:function(e,t,n){e.exports=n(294)},125:function(e,t,n){},126:function(e,t,n){},2:function(e,t,n){\"use strict\";n.d(t,\"n\",(function(){return u})),n.d(t,\"d\",(function(){return p})),n.d(t,\"a\",(function(){return d})),n.d(t,\"e\",(function(){return f})),n.d(t,\"f\",(function(){return h})),n.d(t,\"c\",(function(){return g})),n.d(t,\"b\",(function(){return v})),n.d(t,\"h\",(function(){return m})),n.d(t,\"m\",(function(){return b})),n.d(t,\"i\",(function(){return y})),n.d(t,\"k\",(function(){return k})),n.d(t,\"j\",(function(){return x})),n.d(t,\"l\",(function(){return O})),n.d(t,\"o\",(function(){return j})),n.d(t,\"g\",(function(){return E})),n.d(t,\"p\",(function(){return w}));var r=n(14),a=n(13),o=n(10),i=n(11),c=n(0),s=n(31),l=n(8);function u(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return o.b.apply(void 0,[i.e].concat(t))}function p(e){return\"inherit\"===e.contentEditable?p(e.parentElement):\"true\"===e.contentEditable?e:null}function d(e,t,n){return Math.min(Math.max(t,e),n)}function f(e){return e.getAttribute(i.a)}function h(e){return e.map((function(e){return f(e)}))}function g(e){var t=e.tagName.toLowerCase();return e.isContentEditable||\"input\"===t||\"textarea\"===t}function v(e){return\"img\"!==e.tagName.toLowerCase()?Promise.all([].slice.call(e.querySelectorAll(\"img\")).map((function(e){return v(e)}))):new Promise((function(t){e.complete?t():e.addEventListener(\"load\",(function n(){t(),e.removeEventListener(\"load\",n)}))}))}function m(e){return e?e.hasAttribute(i.a)?e:m(e.parentElement):null}function b(e,t){return t.scenaComponentId=e,t}function y(e){for(var t=e.attributes,n=t.length,r={},a=0;a<n;++a){var o=t[a],c=o.name,s=o.value;c!==i.a&&\"style\"!==c&&(r[c]=s)}return r}function k(e){return Object(c.I)(e)&&\"scenaComponentId\"in e}function x(e){return Object(c.K)(e)&&!k(e)}function O(e){return x(e)&&Object(c.I)(e.type)}function j(e,t){var n=Object(a.a)(e.getOrders([\"transform\"])||[]);if(\"\".concat(n[0]).indexOf(\"matrix3d\")>-1){var r=e.get(\"transform\",n[0]),o=Object(c.H)(r)?r:Object(c.T)(r).map((function(e){return parseFloat(e)}));e.set(\"transform\",n[0],Object(l.d)(t,o))}else if(e.has(\"transform\",\"matrix3d\")){for(var i=1;e.has(\"transform\",\"matrix3d\".concat(++i)););e.set(\"transform\",\"matrix3d\".concat(i),Object(a.a)(t)),e.setOrders([\"transform\"],[\"matrix3d\".concat(i)].concat(Object(a.a)(n)))}else e.set(\"transform\",\"matrix3d\",Object(a.a)(t)),e.setOrders([\"transform\"],[\"matrix3d\"].concat(Object(a.a)(n)))}function E(e,t){var n=Object(s.b)(e,t),r=n.targetOrigin,a=Object(l.b)([r[0],r[1],r[2]||0],4);return Object(l.d)(n.offsetMatrix,a)}function w(e){return e.map((function e(t){var n=t.id,a=document.querySelector(\"[\".concat(i.a,'=\"').concat(n,'\"]')),o=t.attrs||{};for(var c in t.el=a,o)a.setAttribute(c,o[c]);t.attrs=y(a);var s=t.children||[];return s.length?s.forEach(e):t.attrs.contenteditable?\"innerText\"in t?a.innerText=t.innerText||\"\":t.innerText=a.innerText||\"\":t.componentId||(\"innerHTML\"in t?a.innerHTML=t.innerHTML||\"\":t.innerHTML=a.innerHTML||\"\"),Object(r.a)({},t)}))}},294:function(e,t,n){\"use strict\";n.r(t);var r=n(1),a=n.n(r),o=n(55),i=n.n(o),c=(n(125),n(3)),s=n(4),l=n(6),u=n(5),p=(n(126),n(76)),d=Object(p.makeScenaFunctionComponent)(\"Badge\",(function(e){return r.createElement(\"p\",{className:\"badges\",\"data-scena-element-id\":e.scenaElementId},r.createElement(\"a\",{href:\"https://www.npmjs.com/package/moveable\",target:\"_blank\"},r.createElement(\"img\",{src:\"https://img.shields.io/npm/v/moveable.svg?style=flat-square&color=007acc&label=version\",alt:\"npm version\"})),r.createElement(\"a\",{href:\"https://github.com/daybrush/moveable\",target:\"_blank\"},r.createElement(\"img\",{src:\"https://img.shields.io/github/stars/daybrush/moveable.svg?color=42b883&style=flat-square\"})),r.createElement(\"a\",{href:\"https://github.com/daybrush/moveable\",target:\"_blank\"},r.createElement(\"img\",{src:\"https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square\"})),r.createElement(\"br\",null),r.createElement(\"a\",{href:\"https://github.com/daybrush/moveable/tree/master/packages/react-moveable\",target:\"_blank\"},r.createElement(\"img\",{alt:\"React\",src:\"https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb\"})),r.createElement(\"a\",{href:\"https://github.com/daybrush/moveable/tree/master/packages/preact-moveable\",target:\"_blank\"},r.createElement(\"img\",{alt:\"Preact\",src:\"https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8\"})),r.createElement(\"a\",{href:\"https://github.com/daybrush/moveable/tree/master/packages/ngx-moveable\",target:\"_blank\"},r.createElement(\"img\",{alt:\"Angular\",src:\"https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38\"})),r.createElement(\"a\",{href:\"https://github.com/daybrush/moveable/blob/master/packages/vue-moveable\",target:\"_blank\"},r.createElement(\"img\",{alt:\"Vue\",src:\"https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984\"})),r.createElement(\"a\",{href:\"https://github.com/daybrush/moveable/tree/master/packages/svelte-moveable\",target:\"_blank\"},r.createElement(\"img\",{alt:\"Svelte\",src:\"https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38\"})))})),f=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;Object(c.a)(this,n);for(var a=arguments.length,o=new Array(a),i=0;i<a;i++)o[i]=arguments[i];return(e=t.call.apply(t,[this].concat(o))).editor=r.createRef(),e}return Object(s.a)(n,[{key:\"render\",value:function(){return r.createElement(\"div\",{className:\"app\"},r.createElement(p.default,{ref:this.editor,debug:!1}),r.createElement(\"div\",{className:\"bottom\"},r.createElement(\"a\",{href:\"https://github.com/daybrush/moveable\",target:\"_blank\"},\"Download\"),r.createElement(\"a\",{href:\"https://daybrush.com/moveable/release/latest/doc\",target:\"_blank\"},\"API\"),r.createElement(\"a\",{href:\"https://daybrush.com/moveable/storybook\",target:\"_blank\"},\"Storybook\")))}},{key:\"componentDidMount\",value:function(){var e=this;this.editor.current.appendJSXs([{jsx:r.createElement(\"div\",{className:\"moveable\",contentEditable:\"true\",suppressContentEditableWarning:!0},\"Moveable\"),name:\"(Logo)\",frame:{position:\"absolute\",left:\"50%\",top:\"30%\",width:\"250px\",height:\"200px\",\"font-size\":\"40px\",transform:\"translate(-125px, -100px)\",display:\"flex\",\"justify-content\":\"center\",\"flex-direction\":\"column\",\"text-align\":\"center\",\"font-weight\":100}},{jsx:r.createElement(d,null),name:\"(Badges)\",frame:{position:\"absolute\",left:\"0%\",top:\"50%\",width:\"100%\",\"text-align\":\"center\"}},{jsx:r.createElement(\"div\",{className:\"moveable\",contentEditable:\"true\",suppressContentEditableWarning:!0},\"Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable\"),name:\"(Description)\",frame:{position:\"absolute\",left:\"0%\",top:\"65%\",width:\"100%\",\"font-size\":\"14px\",\"text-align\":\"center\",\"font-weight\":\"normal\"}}],!0).then((function(t){e.editor.current.setSelectedTargets([t[0]],!0)}))}}]),n}(r.Component);i.a.render(a.a.createElement(f,null),document.getElementById(\"root\"))},76:function(e,t,n){\"use strict\";var r=n(116),a=n(2);n.d(t,\"makeScenaFunctionComponent\",(function(){return a.m}));n(113);t.default=r.a}},[[120,1,2]]]);\n//# sourceMappingURL=main.4efc5ba5.chunk.js.map\n"
  },
  {
    "path": "demo/static/js/runtime-main.b494567c.js",
    "content": "!function(e){function r(r){for(var n,a,i=r[0],l=r[1],c=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var l=t[i];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){\"undefined\"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:\"Module\"}),Object.defineProperty(e,\"__esModule\",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&\"object\"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,\"default\",{enumerable:!0,value:e}),2&r&&\"string\"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,\"a\",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p=\"./\";var i=this[\"webpackJsonp@scena/react-editor\"]=this[\"webpackJsonp@scena/react-editor\"]||[],l=i.push.bind(i);i.push=r,i=i.slice();for(var c=0;c<i.length;c++)r(i[c]);var f=l;t()}([]);\n//# sourceMappingURL=runtime-main.b494567c.js.map"
  },
  {
    "path": "groupable.md",
    "content": "## 🚀 How to use Groupable\n* **Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.\n\n* [API Documentation](https://daybrush.com/moveable/release/latest/doc/)\n* **draggable**\n    * [onDragGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:dragGroupStart)\n    * [onDragGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:dragGroup)\n    * [onDragGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:dragGroupEnd)\n* **resizable**\n    * [onResizeGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:resizeGroupStart)\n    * [onResizeGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:resizeGroup)\n    * [onResizeGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:resizeGroupEnd)\n* **scalable**\n    * [onScaleGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:scaleGroupStart)\n    * [onScaleGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:scaleGroup)\n    * [onScaleGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:rscaleGroupEnd)\n* **rotatable**\n    * [onRotateGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:rotateGroupStart)\n    * [onRotateGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:rotateGroup)\n    * [onRotateGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:rotateGroupEnd)\n* **pinchable**\n    * [onPinchGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:pinchGroupStart)\n    * [onPinchGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:pinchGroup)\n    * [onPinchGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:pinchGroupEnd)\n\n\n```tsx\nimport Moveable from \"moveable\";\n\nconst moveable = new Moveable(document.body, {\n    target: document.querySelector(\".target\"),\n    // If the container is null, the position is fixed. (default: parentElement(document.body))\n    container: document.body,\n    draggable: true,\n    resizable: true,\n    scalable: true,\n    rotatable: true,\n    warpable: true,\n    // Enabling pinchable lets you use events that\n    // can be used in draggable, resizable, scalable, and rotateable.\n    pinchable: true, // [\"resizable\", \"scalable\", \"rotatable\"]\n    origin: true,\n    keepRatio: true,\n    // Resize, Scale Events at edges.\n    edge: false,\n    throttleDrag: 0,\n    throttleResize: 0,\n    throttleScale: 0,\n    throttleRotate: 0,\n});\n\n/* draggable */\nmoveable.on(\"draGroupStart\", ({ targets }) => {\n    console.log(\"onDragGroupStart\", targets);\n}).on(\"dragGroup\", ({ targets, events }) => {\n    console.log(\"onDragGroup\", targets);\n\n    events.forEach(ev => {\n        // drag event\n        console.log(\"onDrag left, top\", ev.left, ev.top);\n        // ev.target!.style.left = `${ev.left}px`;\n        // ev.target!.style.top = `${ev.top}px`;\n        console.log(\"onDrag translate\", ev.dist);\n        ev.target!.style.transform = ev.transform;)\n    });\n}).on(\"dragGroupEnd\", ({ targets, isDrag, clientX, clientY }) => {\n    console.log(\"onDragGroupEnd\", targets, isDrag);\n});\n\n/* resizable */\nmoveable.on(\"resizeGroupStart\", ({ target, clientX, clientY }) => {\n    console.log(\"onResizeGroupStart\", target);\n}).on(\"resizeGroup\", ({ targets, events, direction }) => {\n    console.log(\"onResizeGroup\", targets);\n\n    events.forEach(ev => {\n        const offset = [\n            direction[0] < 0 ? -ev.delta[0] : 0,\n            direction[1] < 0 ? -ev.delta[1] : 0,\n        ];\n        // ev.drag is a drag event that occurs when the group resize.\n        const left = offset[0] + ev.drag.beforeDist[0];\n        const top = offset[1] + ev.drag.beforeDist[1];\n        const width = ev.width;\n        const top = ev.top;\n    });\n}).on(\"resizeGroupEnd\", ({ targets, isDrag, clientX, clientY }) => {\n    console.log(\"onResizeGroupEnd\", targets, isDrag);\n});\n\n/* scalable */\nmoveable.on(\"scaleGroupStart\", ({ targets, clientX, clientY }) => {\n    console.log(\"onScaleGroupStart\", targets);\n}).on(\"scaleGroup\", (({ targets, events }) => {\n    console.log(\"onScaleGroup\", targets);\n\n    events.forEach(ev => {\n        const target = ev.target;\n        // ev.drag is a drag event that occurs when the group scale.\n        const left = ev.drag.beforeDist[0];\n        const top = ev.drag.beforeDist[1];\n        const scaleX = ev.scale[0];\n        const scaleY = ev.scale[1];\n    });\n}).on(\"scaleGroupEnd\", ({ targets, isDrag, clientX, clientY }) => {\n    console.log(\"onScaleGroupEnd\", targets, isDrag);\n});\n\n/* rotatable */\nmoveable.on(\"rotateGroupStart\", ({ targets, clientX, clientY }) => {\n    console.log(\"onRotateGroupStart\", targets);\n}).on(\"rotateGroup\", ({\n    targets,\n    events\n    delta, dist,\n}) => {\n    e.events.forEach(ev => {\n        const target = ev.target;\n        // ev.drag is a drag event that occurs when the group rotate.\n        const left = ev.drag.beforeDist[0];\n        const top = ev.drag.beforeDist[1];\n        const deg = ev.beforeDist;\n    });\n}).on(\"rotateGroupEnd\", ({ targets, isDrag, clientX, clientY }) => {\n    console.log(\"onRotateGroupEnd\", targets, isDrag);\n});\n\n/* pinchable */\n// Enabling pinchable lets you use events that\n// can be used in draggable, resizable, scalable, and rotateable.\nmoveable.on(\"pinchGroupStart\", ({ targets, clientX, clientY }) => {\n    // pinchGroupStart event occur before dragGroupStart, rotateGroupStart, scaleGroupStart, resizeGroupStart\n    console.log(\"onPinchGroupStart\", targets);\n}).on(\"pinchGroup\", ({ targets, clientX, clientY, datas }) => {\n    // pinchGroup event occur before dragGroup, rotateGroup, scaleGroup, resizeGroup\n    console.log(\"onPinchGroup\", targets);\n}).on(\"pinchGroupEnd\", ({ isDrag, targets, clientX, clientY, datas }) => {\n    // pinchGroupEnd event occur before dragGroupEnd, rotateGroupEnd, scaleGroupEnd, resizeGroupEnd\n    console.log(\"onPinchGroupEnd\", targets);\n});\n\n\n```\n"
  },
  {
    "path": "handbook/handbook.md",
    "content": "# Moveable Handbook\n\nThis document explains how to use [moveable](https://github.com/daybrush/moveable).\n\n# Table of Contents\n* [API Documentation](https://daybrush.com/moveable/release/latest/doc/)\n* [Introduction](#toc-introduction)\n* [Basic Support](#toc-support)\n* [Events](#toc-events)\n* [Ables](#toc-ables)\n* [How to use Group](#toc-group)\n* [When the event starts while changing the target](#toc-change-target)\n* [How to use custom css](#toc-custom-css)\n    * [Show Partial ControlBox](#toc-directions)\n    * [Set className](#toc-classname)\n    * [Use important](#toc-important)\n    * [Moveable's Default CSS](#toc-defaultcss)\n\n\n# <a id=\"toc-introduction\"></a>Introduction\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/logo.png\"/></p>\n<h2 align=\"middle\">Moveable</h2>\n\nMoveable makes the target draggable, resizable, scalable, warpable, rotatable, pinchable and snappable.\n\nThe reason for creating a moveable is to create an editor. Main Project is **[scenejs-editor](https://github.com/daybrush/scena)**.\n\nAnother reason for this is the [transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform).\n\nIf the transform overlaps from the root element to the parent element, the distance it moves is not equal to the amount actually moved. So I made it to calculate the distance actually moved.\n\n\n# <a id=\"toc-support\"></a>Basic Support\n\n* Support Major Browsers\n* Support SVG Elements (Not Support Resizable, Use scaleable instead of resizable.)\n* Support 3d Transform\n* [Support Group](#toc-group)\n\n\nIf you have any questions or requests or want to contribute to `moveable` or other packages, please write the [issue](https://github.com/daybrush/moveable/issues) or give me a Pull Request freely.\n\n# <a id=\"toc-events\"></a> Events\n\nAble events are divided into `dragStart`, `drag`, and `dragEnd` types.\n\n1. If you start to press the mouse (or touch), `dragStart`type events occur.\n2. If you drag with the mouse (or touch), `drag`type events occur.\n3. If dragging is stopped and the mouse (or touch) is released, `dragEnd` type events occur.\n\nThe first in the sequence of events is the event with the `beforeRender` prefix.\n\nThe last in the sequence of events is the event with the `render` prefix.\n\nAfter the `render` event is over, all values such as the target's size, position, and css are updated.\n\n### Event Sequences (ex: Draggable)\n* dragStart: beforeRenderStart => **dragStart** => renderStart\n* drag: beforeRender => **drag** => render\n* dragEnd: beforeRenderEnd => **dragEnd** => renderEnd\n\n\n\n## Group Events\n\nIn Moveable, events that can be targeted individually and events that can be targeted as a group are divided.\n\nEvents of a group are appended with group as a suffix. (ex: `dragGroupStart`, `dragGroup`, `dragGroupEnd`)\n\n### Single Moveable Sequences (ex: Resizable)\n* dragStart: beforeRenderStart => **resizeStart** => renderStart\n* drag: beforeRender => **beforeResize** => **resize** => render\n* dragEnd: beforeRenderEnd => **resizeEnd** => renderEnd\n\n\n### Group Moveable Sequences (ex: Resizable)\n* start: beforeRenderGroupStart => **resizeGroupStart** => renderGroupStart\n* move: beforeRenderGroup => **beforeResizeGroup** => **resizeGroup** => renderGroup\n* end: beforeRenderGroupEnd => **resizeGroupEnd** => renderGroupEnd\n\n\n## Event Parameter\n\nAll events in moveable have the following properties by default:\n\n\nSee: https://daybrush.com/moveable/release/latest/doc/Moveable.html#.OnEvent\n\n* **currentTarget**: An instance of Moveable that occur an event.\n* **target**: The target of the event where the MouseEvent or TouchEvent occurred.\n* **clientX**: The x coordinate where the MouseEvent or TouchEvent occurred.\n* **clientY**: The y coordinate where the MouseEvent or TouchEvent occurred.\n* **datas**: Information can be shared between the same event. (ex: `dragStart`, `drag`, `dragEnd`)\n* **inputEvent**: MouseEvent or TouchEvent source where the event occurred.\n\n\n# <a id=\"toc-ables\"></a>Ables\nYou can Drag, Resize, Scale, Rotate, Warp, Pinch, Snap, etc.\n\nSee all Able APIs: https://daybrush.com/moveable/release/latest/doc/index.html\n\nSee all able demos: https://daybrush.com/moveable/storybook\n\n# <a id=\"toc-group\"></a> How to use Group\n\n**Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.\n\nIf you want to use a group, set multiple targets(type: Array<HTMLElement | SVGElement>).\n\nWhen using group, event name changes. (ex: dragStart => dragGroupStart, pinchStart => pinchGroupStart)\n\nThe drag event always occurs with the group event.(Resizable, Scalable, Rotatable)\n\nIn a group, Pinchable and Snappable are the same as they used to be. But warpable is not available.\n\n\n# <a id=\"toc-change-target\"></a> When the event starts while changing the target\n\n### methods\n* [dragStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#dragStart): You can drag start the Moveable through the external `MouseEvent`or `TouchEvent`. (Angular: ngDragStart)\n* [setState](https://daybrush.com/moveable/release/latest/doc/Moveable.html#setState): You can change options or properties dynamically.\n\n### Vanilla Exmaple\n```js\nimport Moveable from \"moveable\";\n\n\nconst moveable = new Moveable(document.body, {\n    target: document.querySelector(\".target1\")\n});\n\nwindow.addEventListener(\"mousedown\", e => {\n    moveable.setState({\n        target: e.target,\n    }, () => {\n        moveable.dragStart(e);\n    });\n});\n```\n\n### React, Preact Example\n```tsx\nimport Moveable from \"react-moveable\"; // preact-moveable\n\n<div onMouseDown={onMouseDown}></div>\n<Moveable ref={e => { this.moveable = e; }} target={this.state.target} />\n\nonMouseDown(e) {\n    // Use nativeEvent if you are using react event handling\n    const nativeEvent = e.nativeEvent\n\n    this.setState({\n        target: nativeEvent.target,\n    }, () => {\n        this.moveable.dragStart(nativeEvent);\n    });\n}\n```\n\n### Angular Example\n```tsx\n\n@Component({\n    selector: 'AppComponent',\n    template: `\n<div (mousedown)=\"onMouseDown($event)\">\n    <div class=\"target\">target</div>\n    <div class=\"target\">target2</div>\n</div>\n<ngx-moveable\n    #moveable\n    [target]=\"target\"\n    />\n`,\n})\nexport class AppComponent {\n    targert = null;\n    @ViewChild('moveable', { static: false })  moveable;\n    onMouseDown(e) {\n        this.target = e.target;\n        setTimeout(() => {\n            this.moveable.ngDragStart(e);\n        });\n    }\n}\n```\n\n### Svelte Example\n```html\n<script>\n    import Moveable from \"svelte-moveable\";\n    import { onMount } from \"svelte\";\n\n    let moveable;\n    let target;\n\n    function onMouseDown(e) {\n        target = e.target;\n\n        setTimeout(() => {\n            moveable.dragStart(e);\n        });\n    }\n</script>\n```\n```jsx\n<div class=\"target\" on:mousedown={onMouseDown}>Target1</div>\n<div class=\"target\" on:mousedown={onMouseDown}>Target2</div>\n<div class=\"target\" on:mousedown={onMouseDown}>Target3</div>\n<Moveable\n    bind:this={moveable}\n    target={target}\n    />\n```\n\n\n# <a id=\"toc-custom-css\"></a>✨ How to use custom CSS\n\n\n## <a id=\"toc-directions\"></a>Show Partial Control Box\n### Options\n* [renderDirections](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:renderDirections) : Set directions to show the control box. (default: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"])\n\n### Vanilla Example\n```ts\nimport Moveable from \"moveable\";\n\nconst moveable = new Moveable(document.body, {\n    renderDirections: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"],\n});\n\nmoveable.renderDirections = [\"nw\", \"ne\", \"sw\", \"se\"];\n```\n\n## <a id=\"toc-classname\"></a>Set className\n### Options\n* [className](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:className) : You can specify the className of the moveable controlbox. (default: \"\")\n\n### Vanilla Example\n```ts\nimport Moveable from \"moveable\";\n\nconst moveable = new Moveable(document.body, {\n    className: \"moveable1\",\n});\n\nmoveable.classname = \"moveable2\";\n```\n\n## <a id=\"toc-important\"></a>Use important\n* If you want to custom CSS, use **`!important`**.\n\n```css\n.moveable-control {\n    width: 20px!important;\n    height: 20px!important;\n    margin-top: -10px!important;\n    margin-left: -10px!important;\n}\n```\n\n## <a id=\"toc-defaultcss\"></a>Moveable's Default CSS\n### moveable-line\n\n```css\n.moveable-line {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    background: #4af;\n    transform-origin: 0px 0.5px;\n}\n```\n\n![](../demo/images/line.png)\n\n\n```css\n.moveable-line.moveable-rotation-line {\n    height: 40px;\n    width: 1px;\n    transform-origin: 0.5px 39.5px;\n}\n```\n### moveable-control\n\n```css\n.moveable-control {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    border: 2px solid #fff;\n    box-sizing: border-box;\n    background: #4af;\n    margin-top: -7px;\n    margin-left: -7px;\n    z-index: 10;\n}\n```\n\n![](../demo/images/control.png)\n\n### moveable-rotataion\n\n```css\n/* moveable-rotation */\n.moveable-line.moveable-rotation-line .moveable-control {\n    border-color: #4af;\n    background:#fff;\n    cursor: alias;\n}\n```\n\n### moveable-origin\n```css\n.moveable-control.moveable-origin {\n    border-color: #f55;\n    background: #fff;\n    width: 12px;\n    height: 12px;\n    margin-top: -6px;\n    margin-left: -6px;\n    pointer-events: none;\n}\n```\n\n### moveable-direction\n\n```css\n.moveable-direction.moveable-e, .moveable-direction.moveable-w {\n    cursor: ew-resize;\n}\n.moveable-direction.moveable-s, .moveable-direction.moveable-n {\n    cursor: ns-resize;\n}\n.moveable-direction.moveable-nw, .moveable-direction.moveable-se, .moveable-reverse .moveable-direction.moveable-ne, .moveable-reverse .moveable-direction.moveable-sw {\n    cursor: nwse-resize;\n}\n.moveable-direction.moveable-ne, .moveable-direction.moveable-sw, .rCSckyn7i.moveable-reverse .moveable-direction.moveable-nw, moveable-reverse .moveable-direction.moveable-se {\n    cursor: nesw-resize;\n}\n```\n\n\n### Default CSS\n\n* `rCS4nn8ek` is The hash value of the class name, which can be changed at any time.\n* All classes have a prefix of `moveable-`.\n```css\n.rCS4nn8ek {\n\tposition: fixed;\n\twidth: 0;\n\theight: 0;\n\tleft: 0;\n\ttop: 0;\n\tz-index: 3000;\n}\n.rCS4nn8ek .moveable-control-box{\n    z-index: 0;\n}\n.rCS4nn8ek .moveable-line, .rCS4nn8ek .moveable-control{\n\tleft: 0;\n    top: 0;\n    will-change: transform;\n}\n.rCS4nn8ek .moveable-control{\n\tposition: absolute;\n\twidth: 14px;\n\theight: 14px;\n\tborder-radius: 50%;\n\tborder: 2px solid #fff;\n\tbox-sizing: border-box;\n\tbackground: #4af;\n\tmargin-top: -7px;\n    margin-left: -7px;\n    z-index: 10;\n}\n.rCS4nn8ek .moveable-line{\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tbackground: #4af;\n\ttransform-origin: 0px 0.5px;\n}\n.rCS4nn8ek .moveable-line.moveable-dashed{\n    box-sizing: border-box;\n    background: transparent;\n}\n.rCS4nn8ek .moveable-line.moveable-dashed.moveable-horizontal{\n    border-top: 1px dashed #4af;\n}\n.rCS4nn8ek .moveable-line.moveable-dashed.moveable-vertical{\n    border-left: 1px dashed #4af;\n}\n.rCS4nn8ek .moveable-line.moveable-dashed:before{\n    position: absolute;\n    content: attr(data-size);\n    color: #4af;\n    font-size: 12px;\n    font-weight: bold;\n}\n.rCS4nn8ek .moveable-line.moveable-dashed.moveable-horizontal:before{\n    left: 50%;\n    transform: translateX(-50%);\n    bottom: 5px;\n}\n.rCS4nn8ek .moveable-line.moveable-dashed.moveable-vertical:before{\n    top: 50%;\n    transform: translateY(-50%);\n    left: 5px;\n}\n.rCS4nn8ek .moveable-line.moveable-rotation-line{\n\theight: 40px;\n\twidth: 1px;\n    transform-origin: 0.5px 39.5px;\n    top: -40px;\n}\n.rCS4nn8ek .moveable-line.moveable-rotation-line .moveable-control{\n\tborder-color: #4af;\n\tbackground:#fff;\n\tcursor: alias;\n}\n.rCS4nn8ek .moveable-line.moveable-vertical{\n    transform: translateX(-50%);\n}\n.rCS4nn8ek .moveable-line.moveable-horizontal{\n    transform: translateY(-50%);\n}\n.rCS4nn8ek .moveable-line.moveable-vertical.moveable-bold{\n    width: 2px;\n}\n.rCS4nn8ek .moveable-line.moveable-horizontal.moveable-bold{\n    height: 2px;\n}\n.rCS4nn8ek .moveable-control.moveable-origin{\n\tborder-color: #f55;\n\tbackground: #fff;\n\twidth: 12px;\n\theight: 12px;\n\tmargin-top: -6px;\n\tmargin-left: -6px;\n\tpointer-events: none;\n}\n.rCS4nn8ek .moveable-group{\n    z-index: -1;\n}\n.rCS4nn8ek .moveable-area{\n    position: absolute;\n}\n.rCS4nn8ek .moveable-area-pieces{\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: none;\n}\n.rCS4nn8ek .moveable-area.moveable-avoid{\n    pointer-events: none;\n}\n.rCS4nn8ek .moveable-area.moveable-avoid+.moveable-area-pieces{\n    display: block;\n}\n.rCS4nn8ek .moveable-area-piece{\n    position: absolute;\n}\n\n\n```\n"
  },
  {
    "path": "jsdoc.json",
    "content": "{\n    \"plugins\": [\n        \"node_modules/daybrush-jsdoc-template/plugins/croffle\",\n        \"node_modules/daybrush-jsdoc-template/plugins/story\"\n    ],\n    \"recurseDepth\": 10,\n    \"opts\": {\n        \"template\": \"./node_modules/daybrush-jsdoc-template\",\n        \"destination\": \"./doc/\"\n    },\n    \"source\": {\n        \"include\": [\n            \"README.md\",\n            \"packages/moveable/src\",\n            \"packages/react-moveable/src/InitialMoveable.tsx\",\n            \"packages/react-moveable/src/MoveableGroup.tsx\",\n            \"packages/react-moveable/src/ables\",\n            \"packages/react-moveable/src/MoveableManager.tsx\",\n            \"packages/react-moveable/src/types.ts\",\n            \"node_modules/@scena/event-emitter/src\"\n        ],\n        \"includePattern\": \"(.+\\\\.js(doc|x)?|.+\\\\.ts(doc|x)?)$\",\n        \"excludePattern\": \"(^|\\\\/|\\\\\\\\)_\"\n    },\n    \"sourceType\": \"module\",\n    \"tags\": {\n        \"allowUnknownTags\": true,\n        \"dictionaries\": [\n            \"jsdoc\",\n            \"closure\"\n        ]\n    },\n    \"templates\": {\n        \"cleverLinks\": false,\n        \"monospaceLinks\": false,\n        \"default\": {\n            \"staticFiles\": {\n                \"include\": [\n                    \"./static\"\n                ]\n            }\n        }\n    },\n    \"linkMap\": {\n        \"IObject\": \"http://daybrush.com/utils/release/latest/doc/global.html#ObjectInterface\",\n        \"DragScrollOptions\": \"https://daybrush.com/dragscroll/release/latest/doc/global.html#DragScrollOptions\"\n    },\n    \"storybookUrl\": \"https://daybrush.com/moveable/storybook\",\n    \"docdash\": {\n        \"repo\": \"daybrush/moveable\",\n        \"menu\": {\n            \"Github repo\": {\n                \"href\": \"https://github.com/daybrush/moveable\",\n                \"target\": \"_blank\",\n                \"class\": \"menu-item\",\n                \"id\": \"repository\"\n            }\n        }\n    }\n}\n"
  },
  {
    "path": "lerna.json",
    "content": "{\n    \"npmClient\": \"yarn\",\n    \"useWorkspaces\": true,\n    \"packages\": [\n        \"packages/*\",\n        \"packages/ngx-moveable/projects/ngx-moveable\"\n    ],\n    \"version\": \"independent\",\n    \"lernaHelperOptions\": {\n        \"deployFileMap\": [\n            {\n                \"basePath\": \"packages/moveable/dist\",\n                \"dists\": [\n                    \"demo/release/{{version}}/dist\",\n                    \"demo/release/latest/dist\"\n                ]\n            },\n            {\n                \"basePath\": \"packages/helper/dist\",\n                \"dists\": [\n                    \"demo/helper/release/{{version}}/dist\",\n                    \"demo/helper/release/latest/dist\"\n                ]\n            },\n            {\n                \"basePath\": \"doc\",\n                \"dists\": [\n                    \"demo/release/{{version}}/doc\",\n                    \"demo/release/latest/doc\"\n                ]\n            }\n        ],\n        \"beforeReleaseScripts\": [\n            \"npm run packages:build\",\n            \"npm run demo:build\",\n            \"npm run deploy\"\n        ]\n    }\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n    \"name\": \"moveable-root\",\n    \"version\": \"0.30.0\",\n    \"private\": true,\n    \"keywords\": [\n        \"moveable\",\n        \"resizable\",\n        \"scalable\",\n        \"draggable\",\n        \"rotatable\",\n        \"groupable\",\n        \"movable\",\n        \"warpable\",\n        \"pinchable\",\n        \"snappable\",\n        \"clippable\",\n        \"roundable\",\n        \"border\",\n        \"origin\",\n        \"dom\",\n        \"resize\",\n        \"scale\",\n        \"drag\",\n        \"move\",\n        \"warp\",\n        \"rotate\",\n        \"react\",\n        \"preact\",\n        \"throttle\",\n        \"group\",\n        \"pinchi\",\n        \"snap\"\n    ],\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"git+https://github.com/daybrush/moveable.git\"\n    },\n    \"author\": \"Daybrush\",\n    \"license\": \"MIT\",\n    \"bugs\": {\n        \"url\": \"https://github.com/daybrush/moveable/issues\"\n    },\n    \"homepage\": \"https://daybrush.com/moveable/\",\n    \"scripts\": {\n        \"bootstrap\": \"lerna bootstrap\",\n        \"storybook\": \"npm run storybook --prefix ./packages/react-moveable\",\n        \"bake\": \"npm run bake --prefix ./packages/react-moveable\",\n        \"build\": \"npm run build --prefix ./packages/react-moveable\",\n        \"packages:update\": \"lerna-helper version && yarn && npm run update-type-consts\",\n        \"update-type-consts\": \"node ./config/update-type-consts.js\",\n        \"packages:build\": \"npm run build --prefix packages/react-moveable && npm run update-type-consts && lerna run build --ignore ngx-moveable --ignore moveable-storybook --ignore snappable --ignore react-moveable\",\n        \"packages:publish\": \"lerna-helper publish --ignore ngx-moveable,@moveable/helper --commit 'chore: publish packages'\",\n        \"changelog\": \"lerna-helper changelog --type all --base moveable\",\n        \"doc\": \"rm -rf ./doc && jsdoc -c jsdoc.json\",\n        \"build:storybook\": \"npm run build:storybook --prefix ./packages/react-moveable\",\n        \"demo:build\": \"npm run packages:build && npm run doc && npm run build:storybook\",\n        \"demo:deploy\": \"gh-pages -d ./demo --dest=./ --add --remote origin\",\n        \"deploy\": \"lerna-helper deploy --base moveable\",\n        \"release\": \"lerna-helper release --base moveable\"\n    },\n    \"dependencies\": {\n        \"tslib\": \"^2.3.1\"\n    },\n    \"devDependencies\": {\n        \"@daybrush/jsdoc\": \"^0.4.7\",\n        \"@daybrush/release\": \"^0.7.1\",\n        \"cpx\": \"1.5.0\",\n        \"daybrush-jsdoc-template\": \"^1.10.0\",\n        \"gh-pages\": \"^2.0.1\",\n        \"intercept-stdout\": \"0.1.2\",\n        \"lerna\": \"^4.0.0\",\n        \"lerna-changelog\": \"2.2.0\",\n        \"typescript\": \"^4.8 <4.9\"\n    },\n    \"workspaces\": {\n        \"packages\": [\n            \"packages/*\",\n            \"packages/ngx-moveable/projects/ngx-moveable\"\n        ],\n        \"nohoist\": [\n            \"**/vue-tsc\",\n            \"**/vue-tsc/**\",\n            \"**/@vue/*\",\n            \"**/@vue/*/**\",\n            \"**/vue\",\n            \"**/vue/**\",\n            \"**/rollup-plugin-vue\",\n            \"**/rollup-plugin-vue/**\",\n            \"**/jest\",\n            \"**/jest/**\",\n            \"**/jest-util\",\n            \"**/jest-util/**\",\n            \"**/ts-jest\",\n            \"**/ts-jest/**\"\n        ]\n    },\n    \"resolutions\": {\n        \"@daybrush/utils\": \"^1.13.0\",\n        \"@types/react\": \"^16.9.17\",\n        \"typescript\": \"^4.8 <4.9\",\n        \"@storybook/react\": \"^6.4.22\",\n        \"@storybook/addon-actions\": \"^6.4.22\",\n        \"@storybook/addon-controls\": \"^6.4.22\",\n        \"@storybook/addon-docs\": \"^6.4.22\",\n        \"@storybook/addon-links\": \"^6.4.22\",\n        \"@storybook/addon-viewport\": \"^6.4.22\",\n        \"@storybook/addons\": \"^6.4.22\",\n        \"@egjs/agent\": \"^2.2.1\",\n        \"@egjs/children-differ\": \"^1.0.1\",\n        \"@egjs/list-differ\": \"^1.0.0\",\n        \"@scena/dragscroll\": \"^1.4.0\",\n        \"@scena/matrix\": \"^1.1.1\",\n        \"css-to-mat\": \"^1.1.1\",\n        \"framework-utils\": \"^1.1.0\",\n        \"gesto\": \"^1.19.3\",\n        \"overlap-area\": \"^1.1.0\",\n        \"croact-css-styled\": \"^1.1.9\",\n        \"react-css-styled\": \"^1.1.9\",\n        \"tslib\": \"^2.3.1\"\n    }\n}\n"
  },
  {
    "path": "packages/croact-moveable/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [0.9.0](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.8.0...croact-moveable@0.9.0) (2023-12-03)\n\n\n### :mega: Other\n\n* publish packages ([f9a0eed](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/f9a0eed9db93c1fa3522138e9c7604287f0ce21f))\n* update gesto version ([4d12e48](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/4d12e484ea08bc1630c6a301b86c34a5d7a023c2))\n\n\n\n## [0.8.0](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.7.2...croact-moveable@0.8.0) (2023-10-28)\n\n\n### :mega: Other\n\n* publish packages ([1a65454](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/1a654540f1390648d7e4db910d0673acff190007))\n\n\n\n## [0.7.2](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.7.1...croact-moveable@0.7.2) (2023-09-19)\n\n\n### :mega: Other\n\n* publish packages ([ecf15ab](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/ecf15ab399bb4d9f6752cb84b0d6b06d15e5c426))\n\n\n\n## [0.7.1](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.7.0...croact-moveable@0.7.1) (2023-07-11)\n\n\n### :mega: Other\n\n* publish packages ([27bda8e](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/27bda8ea3d9751847fc073519a832b3464242d3c))\n\n\n\n## [0.7.0](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.6.2...croact-moveable@0.7.0) (2023-07-09)\n\n\n### :mega: Other\n\n* publish packages ([25cae7f](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/25cae7f46aa28dcb948a8690fd6062b7e15d72ff))\n\n\n\n## [0.6.2](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.6.1...croact-moveable@0.6.2) (2023-07-04)\n\n\n### :mega: Other\n\n* publish packages ([9467cf4](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/9467cf45fd2871573df8886eb134c67a8b0f916d))\n\n\n\n## [0.6.1](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.5.1...croact-moveable@0.6.1) (2023-07-02)\n\n\n### :mega: Other\n\n* publish packages ([5697e80](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/5697e8050f486a83ea409b856d1f670759ba6910))\n* publish packages ([5e76998](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/5e76998ba0a90efcbb0c2e4fe8030ca47a1842d4))\n\n\n\n## [0.5.1](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.5.0...croact-moveable@0.5.1) (2023-06-28)\n\n\n### :mega: Other\n\n* fix update modules ([bb608dc](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/bb608dc0d1d9eb13e538d1026c05809d89757b1d))\n* publish packages ([510d7cd](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/510d7cdf76eef4a17cc75d95634ebcb6d9688f8e))\n\n\n\n## [0.5.0](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.4.0...croact-moveable@0.5.0) (2023-06-25)\n\n\n### :bug: Bug Fix\n\n* fix croact peerDependencies  #937 ([6554cc7](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/6554cc7828a5ed5f883d0f9bc35ecd913795dd84))\n\n\n### :mega: Other\n\n* publish packages ([f893cca](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/f893ccaa176d31ef9ddb241d2cd4a1fb098cdae0))\n\n\n\n## [0.4.0](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.3.8...croact-moveable@0.4.0) (2023-06-04)\n\n\n### :rocket: New Features\n\n* support drag api #920 ([8f1a839](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/8f1a8396c429cf108da5417bc36cccd3ef46013c))\n\n\n### :bug: Bug Fix\n\n* fix ownerDocument css #932 ([76a852a](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/76a852ade3ffb41a1b246649945994f50e52b1f0))\n* support iframe #932 ([15abedb](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/15abedb5f5770b8380d0b6ebedbc4ab7834cb9e8))\n* support iframe context #932 ([3e87cc7](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/3e87cc7fed43160ca342630fed2f413876f8a518))\n\n\n### :mega: Other\n\n* update packages ([8d65572](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/8d65572384ae0fdff288fe78fbeb5d249b070eb7))\n\n\n\n## [0.3.8](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.3.7...croact-moveable@0.3.8) (2023-05-16)\n\n\n### :bug: Bug Fix\n\n* fix css-styled version #916 ([875fc19](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/875fc19fa7fac50cbbb3166dfaa512b18f7c790d))\n\n\n### :mega: Other\n\n* publish packages ([5bd22bb](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/5bd22bb009e10a4f8032f35c2ae3b490f4d94e5b))\n\n\n\n## [0.3.7](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.3.6...croact-moveable@0.3.7) (2023-05-15)\n\n\n### :bug: Bug Fix\n\n* update croact, css-styled version #916 ([b517b64](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/b517b6498a612c072eadc9354d6383363771ea6d))\n\n\n### :mega: Other\n\n* publish packages ([91aa8bc](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/91aa8bc1bdefc65cde8c032f1c7ba13ca54ad2fa))\n\n\n\n## [0.3.6](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.3.5...croact-moveable@0.3.6) (2023-05-09)\n\n\n### :mega: Other\n\n* publish packages ([40dd902](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/40dd9022c41244ab009d621861ddc2ac63768748))\n\n\n\n## [0.3.5](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.3.0...croact-moveable@0.3.5) (2023-05-08)\n\n\n### :rocket: New Features\n\n* update croact version #902 ([e328e21](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/e328e2170438fe27f60f307ae976183fbfb5e96e))\n\n\n### :bug: Bug Fix\n\n* fix dragFocusedInput #896 ([94cb92d](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/94cb92d239846ef7a45c0ea2f4ceec0ec2e3b4ac))\n* fix files filed #910 #909 #907 ([a4995ab](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/a4995ab1acb3a34974e1d5a20d17fb2ee17ddc0c))\n\n\n### :mega: Other\n\n* publish packages ([d0f0532](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/d0f0532bfb42fe98ee95748839a639fddbe4b9d6))\n* publish packages ([e1e86a9](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/e1e86a95ebff9d18ad7a5ebede3bd5bd66465b5d))\n* publish packages ([60a747e](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/60a747ee3c373f83fb759a8482e2365e77dcb5e8))\n\n\n\n## [0.3.0](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.2.1...croact-moveable@0.3.0) (2023-05-01)\n\n\n### :rocket: New Features\n\n* add dragFocusedInput prop #896 ([a29c9de](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/a29c9de3d9371a3cd7406432dcdd437168d42fdb))\n\n\n### :mega: Other\n\n* publish packages ([24934e3](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/24934e317de2e5ff622bd9ab0dec8d75a7c05c48))\n* update croact 1.0.1 #902 ([34433f3](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/34433f3ab1266fff29f1f74bf6a5176d238348b6))\n\n\n\n## [0.2.1](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/compare/croact-moveable@0.2.0...croact-moveable@0.2.1) (2023-04-16)\n\n\n### :bug: Bug Fix\n\n* fix pinchable's operation #892 ([f4d8df3](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/f4d8df3f81f69f0c00e2b865e6f3368ee9795b01))\n\n\n### :mega: Other\n\n* publish packages ([a623eda](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/a623eda2702067397159742dd0c6ed16b99bbe22))\n\n\n\n## 0.2.0 (2023-04-13)\n\n\n### :rocket: New Features\n\n* add croact ([b94c41c](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/b94c41c50cdf37da0136bd4d04f2237529253f45))\n* add croact compat ([233c6d0](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/233c6d0a905953b51c3fd5df1f7c58e7b1d03432))\n\n\n### :mega: Other\n\n* publish packages ([1177427](https://github.com/daybrush/moveable/blob/master/packages/croact-moveable/commit/11774277bafd9c60e9cef3c9a6fa38a3e1c4077d))\n\n\n\n## [0.33.0](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.32.4...react-compat-moveable@0.33.0) (2023-03-26)\n\n\n### :mega: Other\n\n* publish packages ([7580d27](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/7580d272fe857aadfbdbc9df264e0a413dd56588))\n\n\n\n## [0.32.4](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.32.3...react-compat-moveable@0.32.4) (2023-03-21)\n\n\n### :mega: Other\n\n* publish packages ([ae54ef4](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/ae54ef4c660ae789867e4286990f234cc808a379))\n\n\n\n## [0.32.3](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.32.2...react-compat-moveable@0.32.3) (2023-03-14)\n\n\n### :mega: Other\n\n* update packages ([5b03d09](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/5b03d09a0cd298d47597fc8c8c9c6fdd4cd5a267))\n\n\n\n## [0.32.2](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.32.0...react-compat-moveable@0.32.2) (2023-03-10)\n\n\n### :mega: Other\n\n* publish packages ([5589402](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/55894029a463f96a1f42827330b092be3fb63bf2))\n* update packages #856 #847 ([a78c8e3](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/a78c8e3c7ff8c3eb347a7617ddc76c807b57633e))\n\n\n\n## [0.32.0](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.31.1...react-compat-moveable@0.32.0) (2023-03-08)\n\n\n### :mega: Other\n\n* publish packages ([645e290](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/645e290a53b477b468042e05447e2f8f8aea6ed0))\n\n\n\n## [0.31.1](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.30.2...react-compat-moveable@0.31.1) (2023-01-29)\n\n\n### :rocket: New Features\n\n* add isTrusted event property ([256c40c](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/256c40cf2a51277af5414a9bab07be321a586157))\n* add scrollOptions #841 ([a6dfc21](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/a6dfc2152ef9a06c6714c219b3ea057f0b6b8504))\n\n\n### :mega: Other\n\n* publish packages ([24c9567](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/24c9567e2ec00392d2d445298031c39de0331eae))\n* publish packages ([0e0a03d](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/0e0a03dd6c234ded050db8206e585c5fa2da1848))\n\n\n\n## [0.30.2](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.30.1...react-compat-moveable@0.30.2) (2022-12-16)\n\n\n### :mega: Other\n\n* publish packages ([d088ad9](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/d088ad9ed64889f4fd6143b89410f5d5e372105f))\n\n\n\n## [0.30.1](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.29.1...react-compat-moveable@0.30.1) (2022-12-10)\n\n\n### :mega: Other\n\n* publish packages ([ab42598](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/ab42598cb7a6175450125c5e55093cf891a33692))\n\n\n\n## [0.29.1](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.29.0...react-compat-moveable@0.29.1) (2022-12-05)\n\n\n### :mega: Other\n\n* publish packages ([9ee9bc9](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/9ee9bc9c76f6c4b317548470b5b4894c6a462be1))\n\n\n\n## [0.29.0](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.28.1...react-compat-moveable@0.29.0) (2022-12-03)\n\n\n### :mega: Other\n\n* publish packages ([4739df4](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/4739df488cdf3c32cb4ca4e024063c5c44fbaf0c))\n\n\n\n## [0.28.1](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.28.0...react-compat-moveable@0.28.1) (2022-11-28)\n\n\n### :mega: Other\n\n* publish packages ([746c40b](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/746c40b2a2f31f2f371f9110018c89e64c08a525))\n\n\n\n## [0.28.0](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.27.0...react-compat-moveable@0.28.0) (2022-11-27)\n\n\n### :rocket: New Features\n\n* add isFirstDrag property on drag event #796 ([7ade6a2](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/7ade6a23e9003d9ed4119a035ccad01b01c13ed7))\n\n\n### :mega: Other\n\n* publish packages ([3d5ac5a](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/3d5ac5ad855d98a2f555174cc46ec09c148d6a20))\n* publish packages ([92eb72d](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/92eb72df6110eb40a66b4726740240acb43e9745))\n\n\n\n## [0.27.0](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.26.1...react-compat-moveable@0.27.0) (2022-11-13)\n\n\n### :bug: Bug Fix\n\n* update gesto, dragscroll dependencies ([0f33358](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/0f333589574f509d1e3058b77ec9df6b18d7fee6))\n\n\n### :mega: Other\n\n* publish packages ([0780d7a](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/0780d7a204e5f1fa13070d4fa3ca657dfe3ee4af))\n\n\n\n## [0.26.1](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.26.0...react-compat-moveable@0.26.1) (2022-11-06)\n\n\n### :mega: Other\n\n* publish packages ([64e846b](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/64e846bb0e606756bc0b87c92b2b1052b458b9f7))\n\n\n\n## [0.26.0](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.25.0...react-compat-moveable@0.26.0) (2022-11-04)\n\n\n### :mega: Other\n\n* publish packages ([b6896b3](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/b6896b340dd1f78777bd63c48e8545895df9aa5e))\n* update packages #760 ([5c77cf3](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/5c77cf3986fa319a170d8bd90b6cd720601b5172))\n\n\n\n## [0.25.0](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.24.4...react-compat-moveable@0.25.0) (2022-10-17)\n\n\n### :rocket: New Features\n\n* add `viewContainer` prop #753 ([352073c](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/352073c5c5c765aca707236abdff9dded7988343))\n\n\n### :mega: Other\n\n* publish packages ([75db134](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/75db1345ab1119dd9a5270c7c11de455888c2627))\n* publish packages ([47f5335](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/47f53351792bf5264c6d66745088e0571cedc3aa))\n* update packages ([61730d5](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/61730d5c143d4027c55a714c764efe77bbebe5bf))\n\n\n\n## [0.24.4](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.24.1...react-compat-moveable@0.24.4) (2022-10-10)\n\n\n### :bug: Bug Fix\n\n* fix click event #746 ([41809c1](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/41809c10646b91586f74332b74ad2f83ab9a4b2d))\n\n\n### :mega: Other\n\n* publish packages ([9e3ee2f](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/9e3ee2ff44dea473e7aa73e4d501c2d23062f40d))\n* publish packages ([16b2516](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/16b251618307faad8f8f3fc5433b27ed1466311c))\n\n\n\n## [0.24.1](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.24.0...react-compat-moveable@0.24.1) (2022-09-19)\n\n\n### :mega: Other\n\n* publish packages ([2954e37](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/2954e37b9a4e2100a8a55c0d49d279e7f994fd94))\n\n\n\n## [0.24.0](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.23.4...react-compat-moveable@0.24.0) (2022-09-15)\n\n\n### :bug: Bug Fix\n\n* fix shadow dom css #729 ([7581afc](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/7581afc13a7c5f9f749b22d7bd3160de0972d112))\n\n\n### :mega: Other\n\n* update packages ([e5774a9](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/e5774a9becd500d154e8d354017dcbd80505ba13))\n\n\n\n## [0.23.4](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.23.3...react-compat-moveable@0.23.4) (2022-08-24)\n\n\n### :mega: Other\n\n* publish packages ([d57ebb1](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/d57ebb130006c47e3a687d2b417fe3fe7f30149a))\n\n\n\n## [0.23.3](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.23.1...react-compat-moveable@0.23.3) (2022-08-23)\n\n\n### :mega: Other\n\n* fix cjs configs ([ce8cbb1](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/ce8cbb18563e34234f7e9d83a0b3f024870314a8))\n* publish packages ([3597bc5](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/3597bc5fd58cdec56fd4ff8916380a6f3709f7f5))\n\n\n\n## [0.23.1](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.23.0...react-compat-moveable@0.23.1) (2022-08-12)\n\n\n### :bug: Bug Fix\n\n* export event-emitter ([937d83e](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/937d83e221d7080abdb699bc088eff9ca89caaa4))\n* fix click event for mobile #720 ([ce6bced](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/ce6bced55ca6e32981215ebd91a57fe04a789f4e))\n\n\n### :mega: Other\n\n* publish packages ([6be7e81](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/6be7e8122b8edd2e323a039cdbb73381de74e14f))\n\n\n\n## [0.23.0](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.22.3...react-compat-moveable@0.23.0) (2022-08-06)\n\n\n### :bug: Bug Fix\n\n* prevent click when drag & click control #713 ([2071c0d](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/2071c0dd68503d920fe9c26e53ec8c17627bee2b))\n\n\n### :mega: Other\n\n* publish packages ([80005ba](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/80005bada5651afd0c5487a193ab321b22ab1b55))\n\n\n\n## [0.22.3](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.22.2...react-compat-moveable@0.22.3) (2022-08-03)\n\n\n### :bug: Bug Fix\n\n* fix click event by gesto update #713 ([3a3c762](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/3a3c762fc20cf682c3d8fda21f28244a3ecf36bd))\n\n\n### :mega: Other\n\n* publish packages ([5468ff7](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/5468ff763bfa3f30e637ce8f504af09152b22c5c))\n\n\n\n## [0.22.2](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.21.0...react-compat-moveable@0.22.2) (2022-08-01)\n\n\n### :rocket: New Features\n\n* add preventClickEventOnDrag prop ([281b2b7](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/281b2b7aa5dba3bdc4c3f478e115a0de8fd2359e))\n\n\n### :mega: Other\n\n* publish packages ([0076577](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/00765776ba92b5ca691c1aefd1c20687952373d9))\n* publish packages ([ffa0c18](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/ffa0c18bb6970d6f8d88a49db23b11620e704618))\n* publish packages ([958ebac](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/958ebace6032eafb17f1ce366394b440671b45b3))\n\n\n\n## [0.21.0](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.20.0...react-compat-moveable@0.21.0) (2022-07-25)\n\n\n### :mega: Other\n\n* publish packages ([63e03d1](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/63e03d1d5f69e56c7df6d357c58d7acd06932e80))\n* update dragscroll module version ([e9b5864](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/e9b5864c83853578c4190e792543019e30b017eb))\n\n\n\n## [0.20.0](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.19.2...react-compat-moveable@0.20.0) (2022-07-21)\n\n\n### :mega: Other\n\n* publish packages ([da24696](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/da24696977c24b6ea54a433192d15bb7ecbc62e9))\n* update `react-compat-moveable` ([712ae6f](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/712ae6fb49dec3f4e40a3cd664f63625d7cd5669))\n\n\n\n## [0.19.2](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.19.0...react-compat-moveable@0.19.2) (2022-07-17)\n\n\n### :bug: Bug Fix\n\n* fix files field in package.json #700 ([48ce548](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/48ce548438dd0a7da9f544730b2fc3ab65073775))\n\n\n### :mega: Other\n\n* publish packages ([5d89af5](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/5d89af521d1a288d4d9ca7923e0e9654e8f97d53))\n\n\n\n## [0.19.0](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.18.0...react-compat-moveable@0.19.0) (2022-07-17)\n\n\n### :bug: Bug Fix\n\n* fix floating point for min limit size ([766561c](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/766561c0e785098720c5a0ae6d9da1e2d9d7b879))\n\n\n### :mega: Other\n\n* publish packages ([2a4940f](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/2a4940f74997fae24c7d77c553a6bc6be1301d40))\n* update overlap-area ([be8c4dc](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/be8c4dc19dbd6d6d7f782c73272cb9878ca21982))\n\n\n\n## [0.18.0](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.17.9...react-compat-moveable@0.18.0) (2022-06-09)\n\n\n### :bug: Bug Fix\n\n* prevent wheel drag #674 ([e9bea04](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/e9bea04aec00bd3a2a06918b539c9b02b2a589d5))\n\n\n### :mega: Other\n\n* publish packages ([b432247](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/b4322470bcd3bb05fc67d2c89eedd737f8b4b67a))\n\n\n\n## [0.17.9](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.17.8...react-compat-moveable@0.17.9) (2022-06-07)\n\n\n### :bug: Bug Fix\n\n* fix minSize for zero size ([c34f298](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/c34f29803a487098f36f45991ea6dff03bd2750a))\n\n\n### :house: Code Refactoring\n\n* use yarn workspace ([73da295](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/73da295064845a3791782c1777a9c555272a0af0))\n\n\n### :mega: Other\n\n* publish packages ([3530f05](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/3530f0526081b0c010e6c964265b466713f0212e))\n\n\n\n## [0.17.8](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.17.6...react-compat-moveable@0.17.8) (2022-05-01)\n\n\n### :mega: Other\n\n* update packages versions ([169c484](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/169c48417bb4bc07c59e227c545e379dbf43d15b))\n\n\n\n## [0.17.6](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.17.5...react-compat-moveable@0.17.6) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([585094f](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/585094f76ec6e1556159ac357d6ac83ebab953ae))\n\n\n\n## [0.17.5](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.17.4...react-compat-moveable@0.17.5) (2022-04-27)\n\n\n### :bug: Bug Fix\n\n* fix rollup config #650 ([72c9f99](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/72c9f99a2d82ebdbc9de6a99ea6ede817a2c1773))\n* fix rollup config #650 ([b8d1bc7](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/b8d1bc79ff484e57fcdec43f25c043d8d9b7e7df))\n\n\n### :mega: Other\n\n* update packages versions ([5cd2398](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/5cd2398dbb4dbbda24032641fe5bf111780b75fc))\n\n\n\n## [0.17.4](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/compare/react-compat-moveable@0.17.3...react-compat-moveable@0.17.4) (2022-04-26)\n\n\n### :mega: Other\n\n* update packages versions ([a62ee58](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/a62ee58b9bc32f06edc95d55ea28b60c20881ac4))\n* upgrade storybook and typescript ([eff23fd](https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable/commit/eff23fd7340964ed0e3e6f5930e56558c4d91d18))\n"
  },
  {
    "path": "packages/croact-moveable/LICENSE",
    "content": "MIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
  },
  {
    "path": "packages/croact-moveable/README.md",
    "content": ""
  },
  {
    "path": "packages/croact-moveable/package.json",
    "content": "{\n    \"name\": \"croact-moveable\",\n    \"version\": \"0.9.0\",\n    \"description\": \"A React Compat Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Pinchable, Groupable, Snappable.\",\n    \"main\": \"./dist/moveable.cjs.js\",\n    \"module\": \"./dist/moveable.esm.js\",\n    \"sideEffects\": false,\n    \"types\": \"declaration/index.d.ts\",\n    \"scripts\": {\n        \"start\": \"open ./demo/index.html && rollup -c rollup.config.demo.js -w\",\n        \"build\": \"rollup -c && npm run declaration && print-sizes ./dist \",\n        \"declaration\": \"rm -rf declaration && tsc -p tsconfig.declaration.json\",\n        \"packages:update\": \"pvu --path=../../ --update=./\",\n        \"packages:dist\": \"npm run build && pvu  --path=./ --distUpdate=../../ --distPaths=declaration,dist\"\n    },\n    \"keywords\": [\n        \"moveable\",\n        \"resizable\",\n        \"scalable\",\n        \"draggable\",\n        \"rotatable\",\n        \"groupable\",\n        \"movable\",\n        \"warpable\",\n        \"pinchable\",\n        \"snappable\",\n        \"throttle\",\n        \"ratio\",\n        \"dom\",\n        \"resize\",\n        \"scale\",\n        \"drag\",\n        \"move\",\n        \"rotate\",\n        \"warp\",\n        \"react\",\n        \"pinch\",\n        \"snap\",\n        \"compat\"\n    ],\n    \"files\": [\n        \"./*\",\n        \"src/*\",\n        \"dist/*\",\n        \"declaration/*\"\n    ],\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/daybrush/moveable/blob/master/packages/croact-moveable\"\n    },\n    \"author\": \"Daybrush\",\n    \"license\": \"MIT\",\n    \"bugs\": {\n        \"url\": \"https://github.com/daybrush/moveable/issues\"\n    },\n    \"homepage\": \"https://daybrush.com/moveable\",\n    \"devDependencies\": {\n        \"@daybrush/builder\": \"^0.2.4\",\n        \"@types/react\": \"^16.9.17\",\n        \"croact\": \"^1.0.4\",\n        \"keycon\": \"^0.3.0\",\n        \"print-sizes\": \"^0.2.0\",\n        \"pvu\": \"^0.6.1\",\n        \"rollup-plugin-css-bundle\": \"^1.0.4\",\n        \"rollup-plugin-react-compat\": \"^0.1.1\",\n        \"typescript\": \"^4.8 <4.9\"\n    },\n    \"peerDependencies\": {\n        \"croact\": \"^1.0.4\"\n    },\n    \"dependencies\": {\n        \"@daybrush/utils\": \"^1.13.0\",\n        \"@egjs/agent\": \"^2.2.1\",\n        \"@egjs/children-differ\": \"^1.0.1\",\n        \"@egjs/list-differ\": \"^1.0.0\",\n        \"@scena/dragscroll\": \"^1.4.0\",\n        \"@scena/event-emitter\": \"^1.0.5\",\n        \"@scena/matrix\": \"^1.1.1\",\n        \"croact-css-styled\": \"^1.1.9\",\n        \"css-to-mat\": \"^1.1.1\",\n        \"framework-utils\": \"^1.1.0\",\n        \"gesto\": \"^1.19.3\",\n        \"overlap-area\": \"^1.1.0\",\n        \"react-css-styled\": \"^1.1.9\",\n        \"react-moveable\": \"~0.56.0\"\n    }\n}\n"
  },
  {
    "path": "packages/croact-moveable/rollup.config.js",
    "content": "\nconst builder = require(\"@daybrush/builder\");\nconst reactCompat = require(\"rollup-plugin-react-compat\");\n\nconst external = {\n    \"croact\": \"croact\",\n    \"croact-ruler\": \"croact-ruler\",\n    \"croact-css-styled\": \"croact-css-styled\",\n    \"@daybrush/utils\": \"utils\",\n    \"css-styled\": \"css-styled\",\n    \"framework-utils\": \"framework-utils\",\n    \"gesto\": \"Gesto\",\n    \"@scena/event-emitter\": \"@scena/event-emitter\",\n    \"@egjs/agent\": \"eg.Agent\",\n    \"@egjs/children-differ\": \"eg.ChildrenDiffer\",\n    \"@moveable/matrix\": \"@moveable/matrix\",\n    \"@scena/dragscroll\": \"@scena/dragscroll\",\n    \"css-to-mat\": \"css-to-mat\",\n    \"overlap-area\": \"overlap-area\",\n    \"@scena/matrix\": \"@scena/matrix\",\n    \"@egjs/list-differ\": \"eg.ListDiffer\",\n};\n\n\nconst reactPlugin = reactCompat({\n    useCroact: true,\n    aliasModules: {\n        \"@scena/react-ruler\": \"croact-ruler\",\n        \"react-css-styled\": \"croact-css-styled\",\n    }\n})\n\n\n\nmodule.exports = builder([\n    {\n        sourcemap: false,\n        input: \"src/index.ts\",\n        output: \"./dist/moveable.esm.js\",\n        exports: \"named\",\n        format: \"es\",\n        plugins: [reactPlugin],\n        external,\n        typescript2: true,\n    },\n    {\n        sourcemap: false,\n        input: \"src/index.umd.ts\",\n        output: \"./dist/moveable.cjs.js\",\n        exports: \"named\",\n        plugins: [reactPlugin],\n        format: \"cjs\",\n        external,\n        typescript2: true,\n    },\n]);\n"
  },
  {
    "path": "packages/croact-moveable/src/index.ts",
    "content": "import Moveable from \"react-moveable\";\nexport default Moveable;\nexport * from \"react-moveable\";\n"
  },
  {
    "path": "packages/croact-moveable/src/index.umd.ts",
    "content": "import Moveable, * as modules from \"./index\";\n\nfor (const name in modules) {\n    (Moveable as any)[name] = (modules as any)[name];\n}\n\nmodule.exports = Moveable;\nexport * from \"./index\";\nexport default Moveable;\n"
  },
  {
    "path": "packages/croact-moveable/tsconfig.declaration.json",
    "content": "{\n  \"extends\": \"./tsconfig\",\n  \"compilerOptions\": {\n    \"removeComments\": true,\n    \"declaration\": true,\n    \"emitDeclarationOnly\": true,\n    \"declarationDir\": \"declaration\"\n  }\n}\n"
  },
  {
    "path": "packages/croact-moveable/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"outDir\": \"./outjs/\",\n    \"esModuleInterop\": false,\n    \"sourceMap\": true,\n    \"module\": \"es2015\",\n    \"target\": \"es5\",\n    \"experimentalDecorators\": true,\n    \"skipLibCheck\": true,\n    \"moduleResolution\": \"node\",\n    \"lib\": [\n      \"es2015\",\n      \"dom\"\n    ],\n  },\n  \"include\": [\n    \"./src/**/*.ts\"\n  ]\n}"
  },
  {
    "path": "packages/croact-moveable/tslint.json",
    "content": "{\n\t\"defaultSeverity\": \"error\",\n\t\"extends\": [\n\t\t\"tslint:recommended\"\n\t],\n\t\"rules\": {\n\t\t\"typedef\": [true, \"parameter\"],\n\t\t\"jsdoc-format\": false,\n\t\t\"forin\": false,\n\t\t\"no-console\": false,\n\t\t\"no-any\": false,\n\t\t\"interface-name\": false,\n\t\t\"indent\": [\n\t\t\ttrue,\n\t\t\t\"spaces\",\n\t\t\t4\n\t\t],\n\t\t\"ordered-imports\": false,\n\t\t\"object-literal-sort-keys\": false,\n\t\t\"no-unused-expression\": false,\n\t\t\"arrow-parens\": [\n\t\t\ttrue,\n\t\t\t\"ban-single-arg-parens\"\n\t\t],\n\t\t\"max-line-length\": [\n\t\t\ttrue,\n\t\t\t{\n\t\t\t\t\"limit\": 120,\n\t\t\t\t\"ignore-pattern\": \"(\\\\* @)|//\"\n\t\t\t}\n\t\t],\n\t\t\"trailing-comma\": [\n\t\t\ttrue,\n\t\t\t{\n\t\t\t\t\"multiline\": {\n\t\t\t\t\t\"objects\": \"always\",\n\t\t\t\t\t\"arrays\": \"always\",\n\t\t\t\t\t\"functions\": \"always\",\n\t\t\t\t\t\"typeLiterals\": \"ignore\"\n\t\t\t\t},\n\t\t\t\t\"esSpecCompliant\": true\n\t\t\t}\n\t\t]\n\t}\n}"
  },
  {
    "path": "packages/helper/.eslintignore",
    "content": "node_modules\ndist\n*.js"
  },
  {
    "path": "packages/helper/.eslintrc",
    "content": "{\n    \"root\": true,\n    \"parser\": \"@typescript-eslint/parser\",\n    \"plugins\": [\n        \"@typescript-eslint\",\n        \"import\"\n    ],\n    \"extends\": [\n        \"eslint:recommended\",\n        \"plugin:@typescript-eslint/eslint-recommended\",\n        \"plugin:@typescript-eslint/recommended\",\n        \"plugin:react/recommended\"\n    ],\n    \"rules\": {\n        \"no-console\": \"error\",\n        \"@typescript-eslint/explicit-function-return-type\": \"off\",\n        \"import/no-webpack-loader-syntax\": \"off\",\n        \"no-unused-vars\": \"off\",\n        \"@typescript-eslint/no-var-requires\": \"off\",\n        \"@typescript-eslint/no-this-alias\": \"off\",\n        \"@typescript-eslint/no-inferrable-types\": [\n            \"error\",\n            {\n                \"ignoreParameters\": true,\n                \"ignoreProperties\": false\n            }\n        ],\n        \"@typescript-eslint/no-unused-vars\": [\n            \"error\"\n        ],\n        \"@typescript-eslint/explicit-module-boundary-types\": \"off\",\n        \"@typescript-eslint/no-explicit-any\": \"off\",\n        \"@typescript-eslint/no-non-null-assertion\": \"off\",\n        \"@typescript-eslint/no-empty-interface\": \"off\",\n        \"@typescript-eslint/ban-types\": \"off\",\n        \"@typescript-eslint/no-empty-function\": \"off\",\n        \"@typescript-eslint/indent\": [\n            \"error\",\n            4\n        ],\n        \"@typescript-eslint/adjacent-overload-signatures\": \"off\",\n        \"max-len\": [\n            \"error\",\n            {\n                \"code\": 120,\n                \"comments\": 400,\n                \"ignoreTemplateLiterals\": true,\n                \"ignorePattern\": \"^\\\\s*type\\\\s.+=\\\\s*\"\n            }\n        ],\n        \"arrow-parens\": \"off\",\n        \"no-empty-interface\": \"off\",\n        \"comma-dangle\": [\n            \"error\",\n            \"always-multiline\"\n        ],\n        \"semi\": [\n            \"error\",\n            \"always\"\n        ]\n    }\n}\n"
  },
  {
    "path": "packages/helper/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
  },
  {
    "path": "packages/helper/.npmignore",
    "content": "node_modules/\n*.DS_Store\n.DS_Store\ndoc/\ntemplate/\nexample/\nkarma.conf.js\ntest/\nmocha.opts\nGruntfile.js\nwebpack.*.js\n.travis.yml\npackages\nrelease/\ndemo/\ncoverage/\ndist/report.html\nrollup-plugin-visualizer/\noutjs/\n.scene_cache\n*.mp3\n*.mp4\nstorybook/\nsrc/\npublic/\ngroupable.md\ntest/\nsrc/\npublic/\nstories/\n.storybook\n"
  },
  {
    "path": "packages/helper/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [0.1.3](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.3...@moveable/helper@0.1.3) (2023-12-03)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.3](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.3...@moveable/helper@0.1.3) (2023-10-28)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.3](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.3...@moveable/helper@0.1.3) (2023-09-19)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.3](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.3...@moveable/helper@0.1.3) (2023-07-11)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.3](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.3...@moveable/helper@0.1.3) (2023-07-09)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.3](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.3...@moveable/helper@0.1.3) (2023-07-04)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.3](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.3...@moveable/helper@0.1.3) (2023-07-02)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.3](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.3) (2023-06-28)\n\n\n### :rocket: New Features\n\n* add group, ungroup in helper ([8434ed1](https://github.com/daybrush/moveable/blob/master/packages/helper/commit/8434ed19853a158739b3e9b936d63825c6824c96))\n\n\n### :bug: Bug Fix\n\n* fix helper rollup config ([c8ee6a7](https://github.com/daybrush/moveable/blob/master/packages/helper/commit/c8ee6a7b78f7bbb4606b997d1fdae2ebc2d8ff21))\n\n\n### :mega: Other\n\n* fix update modules ([bb608dc](https://github.com/daybrush/moveable/blob/master/packages/helper/commit/bb608dc0d1d9eb13e538d1026c05809d89757b1d))\n* Release 0.49.0 ([9300af7](https://github.com/daybrush/moveable/blob/master/packages/helper/commit/9300af7b4297f6dfe9160aee87a1b810490c2753))\n\n\n\n## [0.1.3](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.3) (2023-06-25)\n\n\n### :rocket: New Features\n\n* add group, ungroup in helper ([8434ed1](https://github.com/daybrush/moveable/blob/master/packages/helper/commit/8434ed19853a158739b3e9b936d63825c6824c96))\n\n\n### :bug: Bug Fix\n\n* fix helper rollup config ([c8ee6a7](https://github.com/daybrush/moveable/blob/master/packages/helper/commit/c8ee6a7b78f7bbb4606b997d1fdae2ebc2d8ff21))\n\n\n\n## [0.1.2](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.2) (2023-06-04)\n\n\n### :bug: Bug Fix\n\n* support iframe context #932 ([3e87cc7](https://github.com/daybrush/moveable/blob/master/packages/helper/commit/3e87cc7fed43160ca342630fed2f413876f8a518))\n\n\n\n## [0.1.2](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.2) (2023-05-16)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.2](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.2) (2023-05-15)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.2](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.2) (2023-05-09)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.2](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.2) (2023-05-08)\n\n\n### :bug: Bug Fix\n\n* fix files filed #910 #909 #907 ([a4995ab](https://github.com/daybrush/moveable/blob/master/packages/helper/commit/a4995ab1acb3a34974e1d5a20d17fb2ee17ddc0c))\n\n\n\n## [0.1.2](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.2) (2023-05-01)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.2](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.2) (2023-04-16)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.2](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.2) (2023-04-13)\n\n\n### :bug: Bug Fix\n\n* fix warpSelf ([8c86a3f](https://github.com/daybrush/moveable/blob/master/packages/helper/commit/8c86a3f95e5d0b8832b1d9b65bf72f598eb8d0cb))\n\n\n\n## [0.1.2](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.2) (2023-03-26)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.2](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.2) (2023-03-21)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.2](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.2) (2023-03-14)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.2](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.2) (2023-03-10)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.2](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.2...@moveable/helper@0.1.2) (2023-03-08)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.1.2](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.1.0...@moveable/helper@0.1.2) (2023-01-29)\n\n\n### :bug: Bug Fix\n\n* fix selectCompletedChilds ([1274030](https://github.com/daybrush/moveable/blob/master/packages/helper/commit/127403091afe221411dd8c2fa4ba072638bf0688))\n* fix TargetList ([008116c](https://github.com/daybrush/moveable/blob/master/packages/helper/commit/008116cd0b6624b95c179a6eeed3e897de6e488c))\n\n\n\n## [0.1.0](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.0.4...@moveable/helper@0.1.0) (2022-12-16)\n\n\n### :bug: Bug Fix\n\n* fix helper's methods ([4bc6ef5](https://github.com/daybrush/moveable/blob/master/packages/helper/commit/4bc6ef511f7652966e1a87cd7d0a53e6687a1707))\n\n\n\n## [0.0.4](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.0.4...@moveable/helper@0.0.4) (2022-12-10)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.0.4](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.0.4...@moveable/helper@0.0.4) (2022-12-05)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.0.4](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.0.4...@moveable/helper@0.0.4) (2022-12-03)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.0.4](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.0.4...@moveable/helper@0.0.4) (2022-11-28)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.0.4](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.0.4...@moveable/helper@0.0.4) (2022-11-27)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.0.4](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.0.4...@moveable/helper@0.0.4) (2022-11-13)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.0.4](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.0.4...@moveable/helper@0.0.4) (2022-11-06)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.0.4](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.0.4...@moveable/helper@0.0.4) (2022-11-04)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.0.4](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.0.4...@moveable/helper@0.0.4) (2022-10-17)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.0.4](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.0.4...@moveable/helper@0.0.4) (2022-10-10)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## [0.0.4](https://github.com/daybrush/moveable/blob/master/packages/helper/compare/@moveable/helper@0.0.4...@moveable/helper@0.0.4) (2022-09-19)\n\n**Note:** Version bump only for package @moveable/helper\n\n\n\n\n\n## 0.0.4 (2022-09-15)\n\n\n### :rocket: New Features\n\n* add helper package ([0ade16e](https://github.com/daybrush/moveable/blob/master/packages/helper/commit/0ade16e9f0dd3adfe41a0ea92d2eb4a81d5aaade))\n"
  },
  {
    "path": "packages/helper/global.d.ts",
    "content": "declare module \"!!raw-loader!*\" {\n    const content: string;\n    export default content;\n}\ndeclare module \"*.svg\" {\n    const content: string;\n    export default content;\n}\n"
  },
  {
    "path": "packages/helper/jest.config.js",
    "content": "module.exports = {\n    \"roots\": [\n        \"<rootDir>\",\n    ],\n    \"transform\": {\n        \"^.+\\\\.tsx?$\": \"ts-jest\",\n    },\n    \"testMatch\": [\"<rootDir>/test/**/*.spec.ts\"],\n    // \"testRegex\": \"spec\\\\.ts$\",\n    \"moduleFileExtensions\": [\n        \"ts\",\n        \"tsx\",\n        \"js\",\n        \"jsx\",\n        \"json\",\n        \"node\",\n    ],\n};\n"
  },
  {
    "path": "packages/helper/package.json",
    "content": "{\n    \"name\": \"@moveable/helper\",\n    \"version\": \"0.1.3\",\n    \"description\": \"Helper for demo of Moveable\",\n    \"main\": \"./dist/helper.cjs.js\",\n    \"module\": \"./dist/helper.esm.js\",\n    \"sideEffects\": false,\n    \"types\": \"declaration/index.d.ts\",\n    \"files\": [\n        \"./*\",\n        \"src/*\",\n        \"dist/*\",\n        \"declaration/*\"\n      ],\n    \"scripts\": {\n        \"lint\": \"eslint ./src/ --ext .ts,.tsx\",\n        \"start\": \"rollup -c -w\",\n        \"build\": \"npm run lint && rollup -c && npm run declaration && print-sizes ./dist \",\n        \"declaration\": \"rm -rf declaration && tsc -p tsconfig.declaration.json\",\n        \"test\": \"jest --watchAll\"\n    },\n    \"keywords\": [\n        \"moveable\",\n        \"resizable\",\n        \"scalable\",\n        \"draggable\",\n        \"rotatable\",\n        \"warpable\",\n        \"pinchable\",\n        \"groupable\",\n        \"snappable\",\n        \"scrollable\",\n        \"movable\",\n        \"throttle\",\n        \"scroll\",\n        \"ratio\",\n        \"dom\",\n        \"resize\",\n        \"scale\",\n        \"drag\",\n        \"move\",\n        \"rotate\",\n        \"react\",\n        \"warp\",\n        \"snap\",\n        \"pinch\"\n    ],\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/daybrush/moveable/blob/master/packages/helper\"\n    },\n    \"author\": \"Daybrush\",\n    \"license\": \"MIT\",\n    \"bugs\": {\n        \"url\": \"https://github.com/daybrush/moveable/issues\"\n    },\n    \"homepage\": \"https://daybrush.com/moveable\",\n    \"devDependencies\": {\n        \"@babel/core\": \"^7.7.2\",\n        \"@daybrush/builder\": \"^0.2.4\",\n        \"@daybrush/tester\": \"^0.1.3\",\n        \"@types/node\": \"^14.6.0\",\n        \"@types/react\": \"^16.9.17\",\n        \"@types/react-dom\": \"^16.9.4\",\n        \"babel-loader\": \"^8.0.6\",\n        \"css-loader\": \"^5.0.1\",\n        \"gh-pages\": \"^2.1.1\",\n        \"jest\": \"^24.8.0\",\n        \"ts-jest\": \"^24.0.2\",\n        \"keycon\": \"^1.0.0\",\n        \"print-sizes\": \"^0.2.0\",\n        \"pvu\": \"^0.6.1\",\n        \"raw-loader\": \"^4.0.2\",\n        \"react\": \"^16.8.6\",\n        \"react-dom\": \"^16.8.6\",\n        \"tslib\": \"^2.3.1\",\n        \"typescript\": \"^4.8 <4.9\"\n    },\n    \"dependencies\": {\n        \"@daybrush/utils\": \"^1.13.0\"\n    },\n    \"browserslist\": {\n        \"production\": [\n            \">0.2%\",\n            \"not dead\",\n            \"not op_mini all\"\n        ],\n        \"development\": [\n            \"last 1 chrome version\",\n            \"last 1 firefox version\",\n            \"last 1 safari version\"\n        ]\n    }\n}\n"
  },
  {
    "path": "packages/helper/rollup.config.js",
    "content": "const builder = require(\"@daybrush/builder\");\n\nconst defaultOptions = {\n    typescript2: true,\n    tsconfig: \"tsconfig.build.json\",\n};\n\nmodule.exports = builder([\n    {\n        ...defaultOptions,\n        input: \"src/index.ts\",\n        output: \"./dist/helper.esm.js\",\n        visualizer: true,\n        format: \"es\",\n        exports: \"named\",\n    },\n    {\n        ...defaultOptions,\n        input: \"src/index.cjs.ts\",\n        output: \"./dist/helper.cjs.js\",\n        format: \"cjs\",\n        exports: \"named\",\n    },\n    {\n        ...defaultOptions,\n        input: \"src/index.umd.ts\",\n        output: \"./dist/helper.js\",\n        format: \"umd\",\n        exports: \"default\",\n        resolve: true,\n        name: \"MoveableHelper\",\n    },\n    {\n        ...defaultOptions,\n        input: \"src/index.umd.ts\",\n        output: \"./dist/helper.min.js\",\n        format: \"umd\",\n        exports: \"default\",\n        resolve: true,\n        uglify: true,\n        name: \"MoveableHelper\",\n    },\n]);\n"
  },
  {
    "path": "packages/helper/src/GroupManager.ts",
    "content": "/* eslint-disable no-cond-assign */\nimport { deepFlat, isArray } from \"@daybrush/utils\";\nimport { ArrayChild, SingleChild } from \"./groups\";\nimport { GroupChild, TargetGroupsObject, TargetGroupsType, TargetList } from \"./types\";\n\n\nexport function toTargetList(raw: GroupChild[]): TargetList {\n    function targets(childs: GroupChild[] = []) {\n        const arr: TargetGroupsType = [];\n\n        childs.forEach((child) => {\n            if (child.type === \"single\") {\n                arr.push(child.value);\n            } else {\n                arr.push(targets(child.value));\n            }\n        });\n\n        return arr;\n    }\n\n    return {\n        raw: () => raw,\n        targets() {\n            return targets(this.raw());\n        },\n        flatten() {\n            return deepFlat(this.targets());\n        },\n    };\n}\n\nexport class GroupManager extends ArrayChild {\n    public type = \"root\" as const;\n    private _targets:  Array<HTMLElement | SVGElement> = [];\n\n    constructor(\n        targetGroups: TargetGroupsType,\n        targets?: Array<HTMLElement | SVGElement>,\n    ) {\n        super();\n        this.set(targetGroups, targets);\n    }\n    public set(\n        targetGroups: TargetGroupsObject,\n        targets: Array<HTMLElement | SVGElement> = [],\n    ) {\n        this.map = new Map();\n        this.value = [];\n\n        const map = this.map;\n        const value = this.value;\n\n        this.add(targetGroups);\n        targets.forEach(target => {\n            if (map.has(target)) {\n                return;\n            }\n            const single = new SingleChild(this, target);\n\n            single.depth = 1;\n            value.push(single);\n            map.set(target, single);\n        });\n        this._targets = targets;\n    }\n    public selectSubChilds(targets: TargetGroupsType, target: HTMLElement | SVGElement) {\n        const root = this;\n        const nextChild = root.findNextChild(target, targets, false);\n        const targetChild = root.map.get(target);\n\n        let nextChilds: GroupChild[] = [];\n\n        if (nextChild) {\n            nextChilds = [nextChild];\n        } else if (targetChild) {\n            nextChilds = [targetChild];\n        } else {\n            nextChilds = [];\n        }\n\n        return toTargetList(nextChilds);\n    }\n    public selectSingleChilds(\n        targets: TargetGroupsType,\n        added: Array<HTMLElement | SVGElement>,\n        removed: Array<HTMLElement | SVGElement>,\n    ) {\n        const nextTargets = [...targets];\n\n        // group can't be added, removed.\n        removed.forEach(element => {\n            const index = nextTargets.indexOf(element);\n\n            if (index > -1) {\n                nextTargets.splice(index, 1);\n            }\n        });\n\n        // Targets can be added one by one\n        added.forEach(element => {\n            nextTargets.push(element);\n        });\n\n        return toTargetList(this.toChilds(nextTargets));\n    }\n    public selectCompletedChilds(\n        targets: TargetGroupsType,\n        added: Array<HTMLElement | SVGElement>,\n        removed: Array<HTMLElement | SVGElement>,\n        continueSelect?: boolean,\n    ) {\n        const nextTargets = [...targets];\n        const startSelected = deepFlat(nextTargets);\n\n        // group can be added, removed.\n        removed.forEach(element => {\n            // Single Target\n            const index = nextTargets.indexOf(element);\n\n            if (index > -1) {\n                // single target or group\n                nextTargets.splice(index, 1);\n                return;\n            }\n            // Group Target\n            const removedChild = continueSelect\n                // Finds the nearest child for element and nextTargets.\n                ? this.findNextChild(element, nextTargets)\n                // Find the nearest exact child for element, all removed and nextTargets.\n                : this.findNextExactChild(element, removed, nextTargets);\n\n            if (removedChild) {\n                const groupIndex = nextTargets.findIndex(target => {\n                    return isArray(target) && removedChild.compare(target);\n                });\n\n                if (groupIndex > -1) {\n                    nextTargets.splice(groupIndex, 1);\n                }\n            }\n        });\n\n        added.forEach(element => {\n            const parentGroup = this._findParentGroup(element, startSelected);\n            const nextChild = parentGroup.findContainedChild(element);\n\n            if (nextChild?.type === \"group\") {\n                const singleChild = nextChild.getSingleChild();\n\n                if (singleChild) {\n                    nextTargets.push(singleChild.value);\n                } else {\n                    nextTargets.push(nextChild.toTargetGroups());\n                }\n                return;\n            }\n            nextTargets.push(element);\n        });\n        return toTargetList(this.toChilds(nextTargets));\n    }\n    public selectSameDepthChilds(\n        targets: TargetGroupsType,\n        added: Array<HTMLElement | SVGElement>,\n        removed: Array<HTMLElement | SVGElement>,\n        continueSelect?: boolean,\n    ) {\n        const nextTargets = [...targets];\n        const commonParent = this.findCommonParent(nextTargets);\n\n        removed.forEach(element => {\n            // Single Target\n            const index = nextTargets.indexOf(element);\n\n            if (index > -1) {\n                // single target or group\n                nextTargets.splice(index, 1);\n                return;\n            }\n            const removedChild = continueSelect\n                // Find the nearest exact child for element, all removed and nextTargets.\n                ? commonParent.findNextExactChild(element, removed, nextTargets)\n                // Finds the nearest child for element and nextTargets.\n                : commonParent.findNextChild(element, nextTargets, true);\n\n            if (removedChild) {\n                const groupIndex = nextTargets.findIndex(target => {\n                    return isArray(target) && removedChild.compare(target);\n                });\n\n                if (groupIndex > -1) {\n                    nextTargets.splice(groupIndex, 1);\n                }\n            }\n        });\n        const addedChildren = commonParent.groupByPerfect(added);\n\n        addedChildren.forEach(child => {\n            if (child.type === \"single\") {\n                nextTargets.push(child.value);\n            } else {\n                const groupIndex = nextTargets.findIndex(target => {\n                    return isArray(target) && child.compare(target, 1);\n                });\n\n                if (groupIndex > -1) {\n                    nextTargets.splice(groupIndex, 1);\n                }\n                nextTargets.push(child.toTargetGroups());\n            }\n        });\n        return toTargetList(this.toChilds(nextTargets));\n    }\n    public toChilds(targets: TargetGroupsType): GroupChild[] {\n        const childs: GroupChild[] = [];\n\n        targets.forEach(target => {\n            if (isArray(target)) {\n                const arrayChild = this.findArrayChild(target);\n\n                if (arrayChild) {\n                    const singleChild = arrayChild.getSingleChild();\n\n                    if (singleChild) {\n                        return singleChild;\n                    }\n                    childs.push(arrayChild);\n                }\n            } else {\n                const single = this.map.get(target);\n\n                if (single) {\n                    childs.push(single);\n                } else {\n                    childs.push(new SingleChild(this, target));\n                }\n            }\n        });\n\n        return childs;\n    }\n    public findChild(element: HTMLElement | SVGElement, isAuto: true): SingleChild | ArrayChild;\n    public findChild(\n        element: HTMLElement | SVGElement,\n        isAuto?: boolean,\n    ): SingleChild | ArrayChild | undefined;\n    public findChild(\n        element: HTMLElement | SVGElement,\n        isAuto?: boolean,\n    ): SingleChild | ArrayChild | undefined {\n        const value = this.map.get(element);\n\n        if (isAuto) {\n            return value || new SingleChild(this, element);\n        }\n        return value;\n    }\n    public findArrayChildById(id: string): ArrayChild | null {\n        let value: ArrayChild | null = null;\n\n        this.value.some(function find(child: GroupChild) {\n            if (child.type !== \"single\") {\n                if (child.id === id) {\n                    value = child;\n                    return true;\n                } else {\n                    return child.value.some(find);\n                }\n            }\n        });\n\n        return value;\n    }\n    public group(targets: TargetGroupsType, flatten?: boolean): TargetGroupsType | null {\n        const commonParent = this.findCommonParent(targets);\n        const groupChilds = targets.map(target => {\n            if (isArray(target)) {\n                return this.findArrayChild(target);\n            }\n            return this.findChild(target);\n        });\n        const isGroupable = groupChilds.every(child => child?.parent === commonParent);\n\n        if (!isGroupable) {\n            return null;\n        }\n        const group = new ArrayChild(commonParent);\n        const nextChilds = commonParent.value.filter(target => groupChilds.indexOf(target) === -1);\n\n        if (!nextChilds.length) {\n            return null;\n        }\n        nextChilds.unshift(group);\n        group.add(flatten ? deepFlat(targets) : targets);\n        commonParent.value = nextChilds;\n\n        this.set(this.toTargetGroups(), this._targets);\n\n        return group.toTargetGroups();\n    }\n    public ungroup(targets: TargetGroupsType) {\n        if (targets.length === 1 && isArray(targets[0])) {\n            targets = targets[0];\n        }\n        const commonParent = this.findCommonParent(targets);\n        const groupChilds = targets.map(target => {\n            if (isArray(target)) {\n                return this.findArrayChild(target);\n            }\n            return this.findChild(target);\n        });\n\n        if (commonParent.groupElement) {\n            return null;\n        }\n\n        // all children is targets\n        const isGroupable = commonParent.value.every(child => groupChilds.indexOf(child) > -1);\n\n        if (!isGroupable || commonParent === this) {\n            // has no group\n            return null;\n        }\n\n        const parent = commonParent.parent;\n\n        if (!parent) {\n            return null;\n        }\n        const nextChilds = parent.value.filter(target => target !== commonParent);\n\n        nextChilds.push(...commonParent.value);\n        parent.value = nextChilds;\n\n        this.set(this.toTargetGroups(), this._targets);\n        return commonParent.toTargetGroups();\n    }\n    protected _findParentGroup(\n        element: HTMLElement | SVGElement,\n        range: Array<HTMLElement | SVGElement>,\n    ) {\n        if (!range.length) {\n            return this;\n        }\n        const single = this.map.get(element);\n\n        if (!single) {\n            return this;\n        }\n        let parent: ArrayChild | undefined = single.parent;\n\n        while (parent) {\n            if (range.some(element => parent!.contains(element))) {\n                return parent;\n            }\n            parent = parent.parent;\n        }\n        return this;\n    }\n}\n"
  },
  {
    "path": "packages/helper/src/groups.ts",
    "content": "import { isArray, deepFlat, find } from \"@daybrush/utils\";\nimport { GroupChild, TargetGroupsObject, TargetGroupsType } from \"./types\";\n\nexport class Child {\n    public type: \"group\" | \"root\" | \"single\" = \"single\";\n    public depth = 0;\n    protected _scope: string[] = [];\n    constructor(public parent?: ArrayChild) {\n        if (parent) {\n            this.depth = parent.depth + 1;\n        }\n    }\n\n    public get scope(): string[] {\n        const parent = this.parent;\n\n        if (!parent || parent.type === \"root\") {\n            return [];\n        }\n        return [...parent.scope, parent.id];\n    }\n}\n\nexport class SingleChild extends Child {\n    public type = \"single\" as const;\n    public isGroupElement = false;\n    constructor(parent: ArrayChild, public value: HTMLElement | SVGElement) {\n        super(parent);\n    }\n}\n\n\nexport class ArrayChild extends Child {\n    public type: \"group\" | \"root\" = \"group\";\n    public value: GroupChild[] = [];\n    public id = \"\";\n    public groupElement?: HTMLElement | SVGElement | null = null;\n    public map: Map<HTMLElement | SVGElement, SingleChild> = new Map();\n\n    public compare(groups: TargetGroupsType, checker: -1 | 0 | 1 = 0) {\n        const elements = deepFlat(groups);\n        const map = this.map;\n        const elementsLength = elements.length;\n        const mapSize = map.size;\n        const sizeDiff = mapSize - elementsLength;\n\n        // 1 this > groups\n        // 0 this = groups\n        // -1 this < groups\n        const count = elements.filter(element => map.has(element)).length;\n\n        if ((checker > 0 && sizeDiff >= 0) || (checker === 0 && sizeDiff === 0)) {\n            return elementsLength === count;\n        } else if (checker < 0 && sizeDiff <= 0) {\n            return mapSize === count;\n        }\n        return false;\n    }\n    public has(target: HTMLElement | SVGElement) {\n        return this.map.has(target);\n    }\n    public contains(element: HTMLElement | SVGElement): boolean {\n        if (this.has(element)) {\n            return true;\n        }\n        return this.value.some(child => {\n            if (child.type === \"group\") {\n                return child.contains(element);\n            } else {\n                return false;\n            }\n        });\n    }\n    public findContainedChild(element: HTMLElement | SVGElement) {\n        return find(this.value, child => {\n            if (child.type === \"single\") {\n                return child.value === element;\n            } else {\n                return child.contains(element);\n            }\n        });\n    }\n    /**\n     * Exact group containing targets\n     */\n    public findExactChild(target: TargetGroupsType[0]): GroupChild | undefined {\n        const map = this.map;\n\n        if (!isArray(target)) {\n            return map.get(target);\n        }\n        const flatted = deepFlat(target);\n        const length = flatted.length;\n        const single = map.get(flatted[0]);\n\n        if (!single) {\n            return;\n        }\n\n        let parent: ArrayChild | undefined = single.parent;\n\n        while (parent) {\n            if (parent.map.size >= length) {\n                return parent;\n            }\n            parent = parent.parent;\n        }\n        return;\n    }\n    public findCommonParent(targets: TargetGroupsType): ArrayChild {\n        let depth = Infinity;\n        let childs = targets.map(target => this.findExactChild(target));\n\n        childs.forEach(child => {\n            if (!child) {\n                return;\n            }\n            depth = Math.min(child.depth, depth);\n        });\n\n        while (depth) {\n            --depth;\n            childs = childs.map(child => {\n                let parent: GroupChild | undefined = child;\n\n                while (parent && parent.depth !== depth) {\n                    parent = parent.parent;\n                }\n\n                return parent;\n            });\n            const firstChild = childs.find(child => child);\n\n            if (!firstChild) {\n                return this;\n            }\n            if (childs.every(child => !child || child === firstChild)) {\n                break;\n            }\n        }\n        const commonParent = childs.find(child => child) as ArrayChild;\n\n        return commonParent || this;\n    }\n    public findNextChild(\n        target: HTMLElement | SVGElement,\n        range: TargetGroupsType = this.toTargetGroups(),\n        isExact = true,\n    ): ArrayChild | null {\n        let nextChild: ArrayChild | null = null;\n\n        const length = range.length;\n\n        range.some(child => {\n            if (!isExact && length === 1 && isArray(child)) {\n                nextChild = this.findNextChild(target, child);\n                return nextChild;\n            }\n\n\n            const nextGroupChild = this.findExactChild(child);\n\n            if (!nextGroupChild) {\n                return;\n            }\n\n            if (\"map\" in nextGroupChild) {\n                if (nextGroupChild.map.has(target)) {\n                    nextChild = nextGroupChild;\n                    return true;\n                }\n            }\n        });\n\n        return nextChild;\n    }\n    public findNextExactChild(\n        target: HTMLElement | SVGElement,\n        selected: Array<HTMLElement | SVGElement>,\n        range: TargetGroupsType = this.toTargetGroups(),\n    ): ArrayChild | null {\n        // [[1, 2]] => group([1, 2]) exact\n        // [[[1, 2], 3]] => group([1, 2])\n        const nextChild = this.findNextChild(target, range, true);\n\n        if (!nextChild) {\n            return null;\n        }\n\n        if (nextChild.compare(selected, -1)) {\n            return nextChild;\n        }\n        return null;\n    }\n    /**\n     * Finds a group that does not overlap within the range and includes the target.\n     */\n    public findPureChild(\n        target: HTMLElement | SVGElement,\n        range: Array<HTMLElement | SVGElement>,\n    ): ArrayChild | null {\n        let nextGroupChild: ArrayChild | null = null;\n\n        const childSelected = range.filter(element => this.has(element));\n\n        if (!childSelected.length) {\n            return this;\n        }\n\n        this.value.some(nextChild => {\n            if (nextChild.type !== \"single\" && nextChild.has(target)) {\n                nextGroupChild = nextChild.findPureChild(target, childSelected);\n\n                if (nextGroupChild) {\n                    return true;\n                }\n            }\n        });\n\n        return nextGroupChild;\n    }\n    public findNextPureChild(\n        target: HTMLElement | SVGElement,\n        range: Array<HTMLElement | SVGElement>,\n    ): ArrayChild | null {\n        const nextChild = this.findNextChild(target);\n\n        if (nextChild) {\n            return nextChild.findPureChild(target, range);\n        }\n        return null;\n    }\n    public getSingleChild(): SingleChild | null {\n        const groupElement = this.groupElement;\n\n        if (groupElement) {\n            const singleChild = this.parent?.value.find(t => t.value === groupElement);\n\n            if (singleChild) {\n                return singleChild as SingleChild;\n            }\n        }\n        return null;\n    }\n    public toTargetGroups(): TargetGroupsType {\n        return this.value.map(child => {\n            if (child.type === \"single\") {\n                return child.value;\n            } else {\n                return child.toTargetGroups();\n            }\n        });\n    }\n    public findArrayChild(targets: TargetGroupsType): ArrayChild | null {\n        const {\n            value,\n        } = this;\n\n        let result = false;\n\n        if (this.type !== \"root\") {\n            result = value.every(child => {\n                if (child.type === \"single\")  {\n                    return targets.some(target => child.value === target);\n                } else {\n                    return targets.some(target => {\n                        return isArray(target) && child.findArrayChild(target);\n                    });\n                }\n            });\n            // result = targets.every(target => {\n            //     if (isArray(target)) {\n            //         return value.some(child => {\n            //             return child.type === \"group\" && child.findArrayChild(target);\n            //         });\n            //     } else {\n            //         return map.get(target);\n            //     }\n            // });\n        }\n\n        if (result && targets.length === value.length) {\n            return this;\n        } else {\n            let childResult: ArrayChild | null = null;\n\n            value.some(child => {\n                if (child.type === \"group\") {\n                    childResult = child.findArrayChild(targets);\n\n                    return childResult;\n                }\n            });\n\n            return childResult;\n        }\n    }\n    public groupByPerfect(selected: Array<HTMLElement | SVGElement>) {\n        return this.value.filter(child => {\n            if (child.type !== \"single\") {\n                return child.compare(selected, -1);\n            }\n            return selected.indexOf(child.value) > -1;\n        }).map(child => {\n            if (child.type !== \"single\") {\n                const singleChild = child.getSingleChild();\n\n                if (singleChild) {\n                    return singleChild;\n                }\n            }\n            return child;\n        });\n    }\n    public add(targets: TargetGroupsObject) {\n        const {\n            value,\n            map,\n        } = this;\n\n        targets.forEach(child => {\n            if (\"groupId\" in child) {\n                const group = new ArrayChild(this);\n\n                group.id = child.groupId;\n                value.push(group);\n                group.add(child.children);\n            } else if (isArray(child)) {\n                const group = new ArrayChild(this);\n\n                value.push(group);\n                group.add(child);\n            } else {\n                const element = \"current\" in child ? child.current : child;\n                const single = new SingleChild(this, element!);\n\n                value.push(single);\n                map.set(element!, single);\n            }\n        });\n\n        value.forEach(child => {\n            if (child.type === \"single\") {\n                map.set(child.value, child);\n            } else {\n                child.map.forEach((nextChild, element) => {\n                    map.set(element, nextChild);\n                });\n            }\n        });\n\n        value.forEach(child => {\n            if  (child.type !== \"single\") {\n                return;\n            }\n            // single\n            const singleElement = child.value;\n            const groupChild = value.find(child2 => {\n                if (child2.type === \"single\") {\n                    return;\n                }\n                const firstElement = [...child2.map.keys()][0];\n\n                if (!firstElement) {\n                    return;\n                }\n\n                return singleElement.contains(firstElement);\n            });\n\n            (child as SingleChild).isGroupElement = !!groupChild;\n\n            if (groupChild) {\n                (groupChild as ArrayChild).groupElement = child.value;\n            }\n        });\n        return parent;\n    }\n}\n"
  },
  {
    "path": "packages/helper/src/index.cjs.ts",
    "content": "import * as modules from \"./index\";\n\n\nmodule.exports = modules;\nexport * from \"./index\";\nexport default modules;\n"
  },
  {
    "path": "packages/helper/src/index.ts",
    "content": "export * from \"./groups\";\nexport * from \"./GroupManager\";\nexport * from \"./types\";\n"
  },
  {
    "path": "packages/helper/src/index.umd.ts",
    "content": "import * as modules from \"./index\";\n\nexport default modules;\n"
  },
  {
    "path": "packages/helper/src/types.ts",
    "content": "import { ArrayChild, SingleChild } from \"./groups\";\n\nexport type TargetGroupWithId = { groupId: string; children: TargetGroupsObject };\nexport type TargetRef = { current: HTMLElement | SVGElement | null };\nexport type TargetGroupsObject\n    = Array<HTMLElement | SVGElement | TargetRef | TargetGroupsObject | TargetGroupWithId>;\nexport type TargetGroupsType = Array<HTMLElement | SVGElement | TargetGroupsType>;\nexport type GroupChild = SingleChild | ArrayChild;\n\nexport interface TargetList {\n    raw(): GroupChild[];\n    flatten(): Array<HTMLElement | SVGElement>;\n    targets(): TargetGroupsType;\n}\n"
  },
  {
    "path": "packages/helper/test/unit/GroupManager.spec.ts",
    "content": "import { createElements } from \"./utils\";\nimport { GroupManager } from \"../../src/\";\n\ndescribe(\"test GroupManager\", () => {\n    describe(\"test groups [[0, 1], 2], 3\", () => {\n        const elements = createElements(4);\n        const manager = new GroupManager([\n            [[elements[0], elements[1]], elements[2]],\n        ], elements);\n\n        it(\"selectCompletedChilds [0, 1]\", () => {\n            const list = manager.selectCompletedChilds([], [elements[1]], []);\n\n            expect(list.flatten()).toStrictEqual([elements[0], elements[1], elements[2]]);\n        });\n        it(\"selectCompletedChilds 2 => [0, 1]\", () => {\n            // element[2]가 선택된 상태에서 elements[0]을 선택\n            const list = manager.selectCompletedChilds([elements[2]], [elements[0]], [elements[2]]);\n\n            expect(list.flatten()).toStrictEqual([elements[0], elements[1]]);\n        });\n    });\n\n});\n"
  },
  {
    "path": "packages/helper/test/unit/utils.ts",
    "content": "export function createElements(count: number) {\n    const elements: HTMLElement[] = [];\n\n    for (let i = 0; i < count; ++i) {\n        const div = document.createElement(\"div\");\n        div.innerHTML = `${i}`;\n\n        (div as any).eid = i;\n        elements.push(div);\n    }\n\n    return elements;\n}\n"
  },
  {
    "path": "packages/helper/tsconfig.build.json",
    "content": "{\n    \"extends\": \"./tsconfig\",\n    \"compilerOptions\": {\n      \"jsx\": \"react\"\n    },\n  }\n"
  },
  {
    "path": "packages/helper/tsconfig.declaration.json",
    "content": "{\n    \"extends\": \"./tsconfig\",\n    \"compilerOptions\": {\n        \"allowJs\": false,\n        \"noEmit\": false,\n        \"isolatedModules\": false,\n        \"removeComments\": false,\n        \"declaration\": true,\n        \"emitDeclarationOnly\": true,\n        \"declarationDir\": \"declaration\"\n    },\n    \"include\": [\n        \"./src/**/*\"\n    ]\n}\n"
  },
  {
    "path": "packages/helper/tsconfig.json",
    "content": "{\n    \"compilerOptions\": {\n        \"outDir\": \"./outjs/\",\n        \"esModuleInterop\": false,\n        \"sourceMap\": true,\n        \"module\": \"esnext\",\n        \"target\": \"es5\",\n        \"downlevelIteration\": true,\n        \"experimentalDecorators\": true,\n        \"skipLibCheck\": true,\n        \"moduleResolution\": \"node\",\n        \"jsx\": \"preserve\",\n        \"lib\": [\n            \"es2019\",\n            \"es2015\",\n            \"dom\"\n        ],\n        \"allowJs\": true,\n        \"allowSyntheticDefaultImports\": true,\n        \"strict\": true,\n        \"strictNullChecks\": true,\n        \"forceConsistentCasingInFileNames\": true,\n        \"resolveJsonModule\": true,\n        \"isolatedModules\": false,\n        \"noEmit\": true,\n        \"baseUrl\": \".\"\n    },\n    \"include\": [\n        \"./src/**/*.ts\",\n        \"./src/**/*.tsx\"\n    ]\n}\n"
  },
  {
    "path": "packages/lit-moveable/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [0.30.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.29.0...lit-moveable@0.30.0) (2023-12-03)\n\n\n### :mega: Other\n\n* publish packages ([f9a0eed](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/f9a0eed9db93c1fa3522138e9c7604287f0ce21f))\n\n\n\n## [0.29.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.28.2...lit-moveable@0.29.0) (2023-10-28)\n\n\n### :mega: Other\n\n* publish packages ([1a65454](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/1a654540f1390648d7e4db910d0673acff190007))\n\n\n\n## [0.28.2](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.28.1...lit-moveable@0.28.2) (2023-09-19)\n\n\n### :mega: Other\n\n* publish packages ([ecf15ab](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/ecf15ab399bb4d9f6752cb84b0d6b06d15e5c426))\n\n\n\n## [0.28.1](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.28.0...lit-moveable@0.28.1) (2023-07-11)\n\n\n### :mega: Other\n\n* publish packages ([27bda8e](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/27bda8ea3d9751847fc073519a832b3464242d3c))\n\n\n\n## [0.28.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.27.2...lit-moveable@0.28.0) (2023-07-09)\n\n\n### :mega: Other\n\n* publish packages ([25cae7f](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/25cae7f46aa28dcb948a8690fd6062b7e15d72ff))\n\n\n\n## [0.27.2](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.27.1...lit-moveable@0.27.2) (2023-07-04)\n\n\n### :mega: Other\n\n* publish packages ([9467cf4](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/9467cf45fd2871573df8886eb134c67a8b0f916d))\n\n\n\n## [0.27.1](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.26.1...lit-moveable@0.27.1) (2023-07-02)\n\n\n### :mega: Other\n\n* publish packages ([5697e80](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/5697e8050f486a83ea409b856d1f670759ba6910))\n* publish packages ([5e76998](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/5e76998ba0a90efcbb0c2e4fe8030ca47a1842d4))\n\n\n\n## [0.26.1](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.26.0...lit-moveable@0.26.1) (2023-06-28)\n\n\n### :mega: Other\n\n* fix update modules ([bb608dc](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/bb608dc0d1d9eb13e538d1026c05809d89757b1d))\n* publish packages ([510d7cd](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/510d7cdf76eef4a17cc75d95634ebcb6d9688f8e))\n\n\n\n## [0.26.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.25.0...lit-moveable@0.26.0) (2023-06-25)\n\n\n### :mega: Other\n\n* publish packages ([f893cca](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/f893ccaa176d31ef9ddb241d2cd4a1fb098cdae0))\n\n\n\n## [0.25.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.24.9...lit-moveable@0.25.0) (2023-06-04)\n\n\n### :bug: Bug Fix\n\n* support iframe #932 ([15abedb](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/15abedb5f5770b8380d0b6ebedbc4ab7834cb9e8))\n* support iframe context #932 ([3e87cc7](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/3e87cc7fed43160ca342630fed2f413876f8a518))\n\n\n### :mega: Other\n\n* update packages ([8d65572](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/8d65572384ae0fdff288fe78fbeb5d249b070eb7))\n\n\n\n## [0.24.9](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.24.8...lit-moveable@0.24.9) (2023-05-16)\n\n\n### :mega: Other\n\n* publish packages ([5bd22bb](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/5bd22bb009e10a4f8032f35c2ae3b490f4d94e5b))\n\n\n\n## [0.24.8](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.24.7...lit-moveable@0.24.8) (2023-05-15)\n\n\n### :mega: Other\n\n* publish packages ([91aa8bc](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/91aa8bc1bdefc65cde8c032f1c7ba13ca54ad2fa))\n\n\n\n## [0.24.7](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.24.6...lit-moveable@0.24.7) (2023-05-09)\n\n\n### :mega: Other\n\n* publish packages ([40dd902](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/40dd9022c41244ab009d621861ddc2ac63768748))\n\n\n\n## [0.24.6](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.24.0...lit-moveable@0.24.6) (2023-05-08)\n\n\n### :rocket: New Features\n\n* update croact version #902 ([e328e21](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/e328e2170438fe27f60f307ae976183fbfb5e96e))\n\n\n### :bug: Bug Fix\n\n* fix files filed #910 #909 #907 ([a4995ab](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/a4995ab1acb3a34974e1d5a20d17fb2ee17ddc0c))\n\n\n### :mega: Other\n\n* publish packages ([d0f0532](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/d0f0532bfb42fe98ee95748839a639fddbe4b9d6))\n* publish packages ([e1e86a9](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/e1e86a95ebff9d18ad7a5ebede3bd5bd66465b5d))\n* publish packages ([60a747e](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/60a747ee3c373f83fb759a8482e2365e77dcb5e8))\n\n\n\n## [0.24.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.23.1...lit-moveable@0.24.0) (2023-05-01)\n\n\n### :mega: Other\n\n* publish packages ([24934e3](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/24934e317de2e5ff622bd9ab0dec8d75a7c05c48))\n\n\n\n## [0.23.1](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.23.0...lit-moveable@0.23.1) (2023-04-16)\n\n\n### :mega: Other\n\n* publish packages ([a623eda](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/a623eda2702067397159742dd0c6ed16b99bbe22))\n\n\n\n## [0.23.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.22.0...lit-moveable@0.23.0) (2023-04-13)\n\n\n### :bug: Bug Fix\n\n* fix warpSelf ([8c86a3f](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/8c86a3f95e5d0b8832b1d9b65bf72f598eb8d0cb))\n\n\n### :mega: Other\n\n* publish packages ([1177427](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/11774277bafd9c60e9cef3c9a6fa38a3e1c4077d))\n\n\n\n## [0.22.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.21.4...lit-moveable@0.22.0) (2023-03-26)\n\n\n### :mega: Other\n\n* publish packages ([7580d27](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/7580d272fe857aadfbdbc9df264e0a413dd56588))\n\n\n\n## [0.21.4](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.21.3...lit-moveable@0.21.4) (2023-03-21)\n\n\n### :bug: Bug Fix\n\n* update lit version ([32db849](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/32db8497e3548daa4226aa56aae4e051ab2884b3))\n\n\n### :mega: Other\n\n* publish packages ([ae54ef4](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/ae54ef4c660ae789867e4286990f234cc808a379))\n\n\n\n## [0.21.3](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.21.2...lit-moveable@0.21.3) (2023-03-14)\n\n\n### :mega: Other\n\n* update packages ([5b03d09](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/5b03d09a0cd298d47597fc8c8c9c6fdd4cd5a267))\n\n\n\n## [0.21.2](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.21.0...lit-moveable@0.21.2) (2023-03-10)\n\n\n### :mega: Other\n\n* publish packages ([5589402](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/55894029a463f96a1f42827330b092be3fb63bf2))\n* update packages #856 #847 ([a78c8e3](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/a78c8e3c7ff8c3eb347a7617ddc76c807b57633e))\n\n\n\n## [0.21.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.20.1...lit-moveable@0.21.0) (2023-03-08)\n\n\n### :mega: Other\n\n* publish packages ([645e290](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/645e290a53b477b468042e05447e2f8f8aea6ed0))\n\n\n\n## [0.20.1](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.19.1...lit-moveable@0.20.1) (2023-01-29)\n\n\n### :mega: Other\n\n* publish packages ([24c9567](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/24c9567e2ec00392d2d445298031c39de0331eae))\n* publish packages ([0e0a03d](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/0e0a03dd6c234ded050db8206e585c5fa2da1848))\n\n\n\n## [0.19.1](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.19.0...lit-moveable@0.19.1) (2022-12-16)\n\n\n### :mega: Other\n\n* publish packages ([d088ad9](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/d088ad9ed64889f4fd6143b89410f5d5e372105f))\n\n\n\n## [0.19.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.18.1...lit-moveable@0.19.0) (2022-12-10)\n\n\n### :mega: Other\n\n* publish packages ([ab42598](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/ab42598cb7a6175450125c5e55093cf891a33692))\n\n\n\n## [0.18.1](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.18.0...lit-moveable@0.18.1) (2022-12-05)\n\n\n### :mega: Other\n\n* publish packages ([9ee9bc9](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/9ee9bc9c76f6c4b317548470b5b4894c6a462be1))\n\n\n\n## [0.18.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.17.1...lit-moveable@0.18.0) (2022-12-03)\n\n\n### :mega: Other\n\n* publish packages ([4739df4](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/4739df488cdf3c32cb4ca4e024063c5c44fbaf0c))\n\n\n\n## [0.17.1](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.17.0...lit-moveable@0.17.1) (2022-11-28)\n\n\n### :mega: Other\n\n* publish packages ([746c40b](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/746c40b2a2f31f2f371f9110018c89e64c08a525))\n\n\n\n## [0.17.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.16.0...lit-moveable@0.17.0) (2022-11-27)\n\n\n### :memo: Documentation\n\n* fix README ([3a153c8](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/3a153c849b7279ec5fd603167117c88f25a7149c))\n\n\n### :mega: Other\n\n* publish packages ([3d5ac5a](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/3d5ac5ad855d98a2f555174cc46ec09c148d6a20))\n* publish packages ([92eb72d](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/92eb72df6110eb40a66b4726740240acb43e9745))\n\n\n\n## [0.16.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.15.1...lit-moveable@0.16.0) (2022-11-13)\n\n\n### :mega: Other\n\n* publish packages ([0780d7a](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/0780d7a204e5f1fa13070d4fa3ca657dfe3ee4af))\n\n\n\n## [0.15.1](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.15.0...lit-moveable@0.15.1) (2022-11-06)\n\n\n### :mega: Other\n\n* publish packages ([64e846b](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/64e846bb0e606756bc0b87c92b2b1052b458b9f7))\n\n\n\n## [0.15.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.14.0...lit-moveable@0.15.0) (2022-11-04)\n\n\n### :bug: Bug Fix\n\n* fix changing snapContainer #773 ([c3ee847](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/c3ee8473765ee6bbb8a27e4865372edac7b3b6fe))\n\n\n### :mega: Other\n\n* publish packages ([b6896b3](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/b6896b340dd1f78777bd63c48e8545895df9aa5e))\n* update packages ([1ba698e](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/1ba698e996efe9c7c487823fe513ef43592cd6e9))\n\n\n\n## [0.14.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.13.4...lit-moveable@0.14.0) (2022-10-17)\n\n\n### :mega: Other\n\n* publish packages ([75db134](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/75db1345ab1119dd9a5270c7c11de455888c2627))\n* publish packages ([47f5335](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/47f53351792bf5264c6d66745088e0571cedc3aa))\n\n\n\n## [0.13.4](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.13.1...lit-moveable@0.13.4) (2022-10-10)\n\n\n### :mega: Other\n\n* publish packages ([9e3ee2f](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/9e3ee2ff44dea473e7aa73e4d501c2d23062f40d))\n* publish packages ([16b2516](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/16b251618307faad8f8f3fc5433b27ed1466311c))\n\n\n\n## [0.13.1](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.13.0...lit-moveable@0.13.1) (2022-09-19)\n\n\n### :mega: Other\n\n* publish packages ([2954e37](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/2954e37b9a4e2100a8a55c0d49d279e7f994fd94))\n\n\n\n## [0.13.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.12.4...lit-moveable@0.13.0) (2022-09-15)\n\n\n### :mega: Other\n\n* update packages ([e5774a9](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/e5774a9becd500d154e8d354017dcbd80505ba13))\n\n\n\n## [0.12.4](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.12.3...lit-moveable@0.12.4) (2022-08-24)\n\n\n### :mega: Other\n\n* publish packages ([d57ebb1](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/d57ebb130006c47e3a687d2b417fe3fe7f30149a))\n\n\n\n## [0.12.3](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.12.1...lit-moveable@0.12.3) (2022-08-23)\n\n\n### :mega: Other\n\n* publish packages ([3597bc5](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/3597bc5fd58cdec56fd4ff8916380a6f3709f7f5))\n\n\n\n## [0.12.1](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.12.0...lit-moveable@0.12.1) (2022-08-12)\n\n\n### :mega: Other\n\n* publish packages ([6be7e81](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/6be7e8122b8edd2e323a039cdbb73381de74e14f))\n\n\n\n## [0.12.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.11.3...lit-moveable@0.12.0) (2022-08-06)\n\n\n### :mega: Other\n\n* publish packages ([80005ba](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/80005bada5651afd0c5487a193ab321b22ab1b55))\n\n\n\n## [0.11.3](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.11.2...lit-moveable@0.11.3) (2022-08-03)\n\n\n### :mega: Other\n\n* publish packages ([5468ff7](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/5468ff763bfa3f30e637ce8f504af09152b22c5c))\n\n\n\n## [0.11.2](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.10.0...lit-moveable@0.11.2) (2022-08-01)\n\n\n### :mega: Other\n\n* publish packages ([0076577](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/00765776ba92b5ca691c1aefd1c20687952373d9))\n* publish packages ([ffa0c18](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/ffa0c18bb6970d6f8d88a49db23b11620e704618))\n* publish packages ([958ebac](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/958ebace6032eafb17f1ce366394b440671b45b3))\n\n\n\n## [0.10.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.9.0...lit-moveable@0.10.0) (2022-07-25)\n\n\n### :mega: Other\n\n* publish packages ([63e03d1](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/63e03d1d5f69e56c7df6d357c58d7acd06932e80))\n\n\n\n## [0.9.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.8.2...lit-moveable@0.9.0) (2022-07-21)\n\n\n### :mega: Other\n\n* publish packages ([da24696](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/da24696977c24b6ea54a433192d15bb7ecbc62e9))\n\n\n\n## [0.8.2](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.8.0...lit-moveable@0.8.2) (2022-07-17)\n\n\n### :bug: Bug Fix\n\n* fix files field in package.json #700 ([48ce548](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/48ce548438dd0a7da9f544730b2fc3ab65073775))\n\n\n### :mega: Other\n\n* publish packages ([5d89af5](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/5d89af521d1a288d4d9ca7923e0e9654e8f97d53))\n\n\n\n## [0.8.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.7.0...lit-moveable@0.8.0) (2022-07-17)\n\n\n### :bug: Bug Fix\n\n* fix floating point for min limit size ([766561c](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/766561c0e785098720c5a0ae6d9da1e2d9d7b879))\n\n\n### :mega: Other\n\n* publish packages ([2a4940f](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/2a4940f74997fae24c7d77c553a6bc6be1301d40))\n\n\n\n## [0.7.0](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.6.9...lit-moveable@0.7.0) (2022-06-09)\n\n\n### :rocket: New Features\n\n* add snap direction foramt (#669) ([52406cc](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/52406cc8c2a77dc2446dc935681aa9885661b77b))\n\n\n### :mega: Other\n\n* publish packages ([b432247](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/b4322470bcd3bb05fc67d2c89eedd737f8b4b67a))\n\n\n\n## [0.6.9](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.6.8...lit-moveable@0.6.9) (2022-06-07)\n\n\n### :bug: Bug Fix\n\n* fix minSize for zero size ([c34f298](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/c34f29803a487098f36f45991ea6dff03bd2750a))\n\n\n### :house: Code Refactoring\n\n* use yarn workspace ([73da295](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/73da295064845a3791782c1777a9c555272a0af0))\n\n\n### :mega: Other\n\n* publish packages ([3530f05](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/3530f0526081b0c010e6c964265b466713f0212e))\n\n\n\n## [0.6.8](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.6.6...lit-moveable@0.6.8) (2022-05-01)\n\n\n### :mega: Other\n\n* update packages versions ([169c484](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/169c48417bb4bc07c59e227c545e379dbf43d15b))\n\n\n\n## [0.6.6](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.6.5...lit-moveable@0.6.6) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([585094f](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/585094f76ec6e1556159ac357d6ac83ebab953ae))\n\n\n\n## [0.6.5](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.6.4...lit-moveable@0.6.5) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([5cd2398](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/5cd2398dbb4dbbda24032641fe5bf111780b75fc))\n\n\n\n## [0.6.4](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/compare/lit-moveable@0.6.3...lit-moveable@0.6.4) (2022-04-26)\n\n\n### :mega: Other\n\n* update packages versions ([a62ee58](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/a62ee58b9bc32f06edc95d55ea28b60c20881ac4))\n* upgrade storybook and typescript ([eff23fd](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/commit/eff23fd7340964ed0e3e6f5930e56558c4d91d18))\n"
  },
  {
    "path": "packages/lit-moveable/LICENSE",
    "content": "MIT License\n\nCopyright (c) 2021 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "packages/lit-moveable/README.md",
    "content": "\n<p align=\"middle\" ><img src=\"https://daybrush.com/moveable/images/logo.png\" /></p>\n<h2 align=\"middle\">Lit Moveable</h2>\n<p align=\"middle\">\n<a href=\"https://www.npmjs.com/package/lit-moveable\" target=\"_blank\"><img src=\"https://img.shields.io/npm/v/lit-moveable.svg?style=flat-square&color=007acc&label=version\" alt=\"npm version\" /></a>\n<img src=\"https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square\"/>\n<a href=\"https://github.com/daybrush/moveable/blob/master/LICENSE\" target=\"_blank\"><img src=\"https://img.shields.io/github/license/daybrush/moveable.svg?style=flat-square&label=license&color=08CE5D\"/></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/react-moveable\" target=\"_blank\"><img alt=\"React\" src=\"https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb\"></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/preact-moveable\" target=\"_blank\"><img alt=\"Preact\" src=\"https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8\"></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/ngx-moveable\" target=\"_blank\"><img alt=\"Angular\" src=\"https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38\"></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/vue-moveable\" target=\"_blank\"><img\n    alt=\"Vue\"\n    src=\"https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984\"></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/svelte-moveable\" target=\"_blank\"><img\n    alt=\"Svelte\"\n    src=\"https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38\"></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/lit-moveable\" target=\"_blank\"><img\n    alt=\"Lit\"\n    src=\"https://img.shields.io/static/v1.svg?label=&message=Lit&style=flat-square&color=4E8EE0\"></a>\n</p>\n<p align=\"middle\">Lit Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.</p>\n\n<p align=\"middle\">\n    <a href=\"https://daybrush.com/moveable\" target=\"_blank\"><strong>Demo</strong></a> /\n    <a href=\"https://daybrush.com/moveable/release/latest/doc/\" target=\"_blank\"><strong>API</strong></a> /\n    <a href=\"https://github.com/daybrush/scena\" target=\"_blank\"><strong>Main Project</strong></a>\n</p>\n\n## ⚙️ Installation\n### npm\n```bash\n$ npm install lit-moveable\n```\n\n## 🚀 How to use\n* The event name is prefixed with **lit** (`litDragStart`, `litDrag`).\n* `draggable` property is prefixed with **lit** (`litMoveable`).\n* `dragStart` method name is prefixed with **lite** (`litDragStart`)\n\n```js\nimport \"lit-moveable\";\nimport { render } from \"lit-html\":\n\nrender(html`\n<div class=\"target\" style=\"width: 200px;height: 100px;\">Target</div>\n<lit-moveable\n    .target=${\".target\"}\n    .litMoveable=${true}\n    .resizable=${true}\n    @litDragStart=${({ detail: e }) => {\n        e.set(translate);\n    }}\n    @litDrag=${({ detail: e }) => {\n        e.target.style.transform = `translate(${e.beforeTranslate[0]}px, ${e.beforeTranslate[1]}px)`;\n        translate = e.beforeTranslate;\n    }}\n    @litResizeStart=${({ detail: e }) => {\n        e.dragStart && e.dragStart.set(translate);\n    }}\n    @litResize=${({ detail: e }) => {\n        const beforeTranslate = e.drag.beforeTranslate;\n\n        e.target.style.width = `${e.width}px`;\n        e.target.style.height = `${e.height}px`;\n        e.target.style.transform = `translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px)`;\n        translate = beforeTranslate;\n    }}\n/>\n`);\n```\n\n## ⚙️ Developments\n### `npm run start`\n\nOpen ./demo/index.html\n\n## ⭐️ Show Your Support\nPlease give a ⭐️ if this project helped you!\n\n\n## 👏 Contributing\n\nIf you have any questions or requests or want to contribute to `moveable` or other packages, please write the [issue](https://github.com/daybrush/moveable/issues) or give me a Pull Request freely.\n\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](https://github.com/daybrush/moveable/blob/master/CONTRIBUTING.md)].\n\n<a href=\"https://github.com/daybrush/moveable/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=daybrush/moveable\" />\n</a>\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/moveable/issues) on GitHub.\n\n## Sponsors\n<p align=\"center\">\n\t<a href=\"https://daybrush.com/sponsors/sponsors.svg\">\n\t\t<img src=\"https://daybrush.com/sponsors/sponsors.svg\"/>\n\t</a>\n</p>\n\n\n## 📝 License\n\nThis project is [MIT](https://github.com/daybrush/moveable/blob/master/LICENSE) licensed.\n\n```\nMIT License\n\nCopyright (c) 2021 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n"
  },
  {
    "path": "packages/lit-moveable/demo/index.html",
    "content": "<style>\n    html,\n    body {\n        position: relative;\n        height: 100%;\n        margin: 0;\n        padding: 0;\n    }\n\n    .description {\n        padding: 10px;\n    }\n\n    .root {\n        position: relative;\n    }\n\n    .container {\n        position: relative;\n        margin-top: 50px;\n    }\n\n    .target {\n        position: absolute;\n        width: 100px;\n        height: 100px;\n        top: 150px;\n        left: 100px;\n        line-height: 100px;\n        text-align: center;\n        background: #ee8;\n        color: #333;\n        font-weight: bold;\n        border: 1px solid #333;\n        box-sizing: border-box;\n    }\n</style>\n\n<body>\n    <div id=\"root\">\n    </div>\n</body>\n<script src=\"./dist/index.js\"></script>\n"
  },
  {
    "path": "packages/lit-moveable/demo/index.ts",
    "content": "import { html } from \"lit-element\";\nimport { render } from \"lit-html\";\nimport \"../src/LitMoveable\";\n\nlet target: HTMLElement;\nlet translate = [0, 0];\n\nrender(html`\n<div class=\"root\">\n    <div class=\"container\">\n        <div class=\"target\" style=\"width: 200px;height: 100px;\">Target</div>\n        <lit-moveable\n            .target=${\".target\"}\n            .mvDraggable=${true}\n            .resizable=${true}\n            @litDragStart=${({ detail: e }) => {\n                e.set(translate);\n            }}\n            @litDrag=${({ detail: e }) => {\n                e.target.style.transform = `translate(${e.beforeTranslate[0]}px, ${e.beforeTranslate[1]}px)`;\n                translate = e.beforeTranslate;\n            }}\n            @litResizeStart=${({ detail: e }) => {\n                e.dragStart && e.dragStart.set(translate);\n            }}\n            @litResize=${({ detail: e }) => {\n                const beforeTranslate = e.drag.beforeTranslate;\n\n                e.target.style.width = `${e.width}px`;\n                e.target.style.height = `${e.height}px`;\n                e.target.style.transform = `translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px)`;\n                translate = beforeTranslate;\n            }}\n        />\n    </div>\n</div>`, document.body);\n"
  },
  {
    "path": "packages/lit-moveable/package.json",
    "content": "{\n    \"name\": \"lit-moveable\",\n    \"version\": \"0.30.0\",\n    \"description\": \"A Lit Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.\",\n    \"types\": \"declaration/index.d.ts\",\n    \"main\": \"dist/moveable.cjs.js\",\n    \"module\": \"dist/moveable.esm.js\",\n    \"sideEffects\": false,\n    \"keywords\": [\n        \"moveable\",\n        \"resizable\",\n        \"scalable\",\n        \"draggable\",\n        \"rotatable\",\n        \"warpable\",\n        \"pinchable\",\n        \"groupable\",\n        \"snappable\",\n        \"scrollable\",\n        \"movable\",\n        \"throttle\",\n        \"scroll\",\n        \"ratio\",\n        \"dom\",\n        \"resize\",\n        \"scale\",\n        \"drag\",\n        \"move\",\n        \"rotate\",\n        \"react\",\n        \"warp\",\n        \"snap\",\n        \"pinch\",\n        \"lit\",\n        \"lit-html\",\n        \"lit-element\"\n    ],\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/daybrush/moveable/blob/master/packages/lit-moveable\"\n    },\n    \"author\": \"Daybrush\",\n    \"license\": \"MIT\",\n    \"bugs\": {\n        \"url\": \"https://github.com/daybrush/moveable/issues\"\n    },\n    \"homepage\": \"https://daybrush.com/moveable\",\n    \"files\": [\n        \"./*\",\n        \"src/*\",\n        \"dist/*\",\n        \"declaration/*\"\n    ],\n    \"scripts\": {\n        \"start\": \"rollup -c rollup.demo.config.js -w\",\n        \"build\": \"rollup -c && npm run declaration\",\n        \"declaration\": \"rm -rf declaration && tsc -p tsconfig.declaration.json\"\n    },\n    \"devDependencies\": {\n        \"@daybrush/builder\": \"^0.2.4\",\n        \"lit\": \"^2.0\",\n        \"typescript\": \"^4.8 <4.9\"\n    },\n    \"dependencies\": {\n        \"@daybrush/utils\": \"^1.13.0\",\n        \"framework-utils\": \"^1.1.0\",\n        \"moveable\": \"~0.53.0\"\n    }\n}\n"
  },
  {
    "path": "packages/lit-moveable/rollup.config.js",
    "content": "const buildHelper = require(\"@daybrush/builder\");\n\nconst defaultOptions = {\n  input: \"./src/index.ts\",\n  tsconfig: \"tsconfig.build.json\",\n  sourcemap: true,\n};\nmodule.exports = buildHelper([\n  {\n    ...defaultOptions,\n    format: \"es\",\n    output: \"./dist/moveable.esm.js\",\n    exports: \"named\",\n  },\n  {\n    ...defaultOptions,\n    format: \"cjs\",\n    output: \"./dist/moveable.cjs.js\",\n    exports: \"named\",\n  },\n  {\n    ...defaultOptions,\n    format: \"umd\",\n    name: \"UMD\",\n    output: \"./dist/moveable.umd.js\",\n    exports: \"named\",\n    resolve: true,\n  },\n]);\n"
  },
  {
    "path": "packages/lit-moveable/rollup.demo.config.js",
    "content": "const buildHelper = require(\"@daybrush/builder\");\n\nconst defaultOptions = {\n  input: \"./demo/index.ts\",\n  tsconfig: \"tsconfig.build.json\",\n  sourcemap: true,\n};\nmodule.exports = buildHelper([\n  {\n    ...defaultOptions,\n    format: \"iife\",\n    output: \"./demo/dist/index.js\",\n    resolve: true,\n    exports: \"named\",\n  },\n]);\n"
  },
  {
    "path": "packages/lit-moveable/src/LitMoveable.ts",
    "content": "import { LitElement, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nimport VanillaMoveable, {\n    PROPERTIES,\n    EVENTS,\n    METHODS,\n    MoveableOptions,\n    MoveableInterface,\n} from \"moveable\";\nimport { Properties, withMethods, MethodInterface } from \"framework-utils\";\nimport { camelize, isUndefined } from \"@daybrush/utils\";\nimport { LitMoveableOptions } from \"./types\";\n\n@Properties(PROPERTIES as any, (prototype, name) => {\n    if (name === \"draggable\") {\n        property()(prototype, \"mvDraggable\");\n        property()(prototype, \"litDraggable\");\n    } else {\n        property()(prototype, name);\n    }\n\n})\n@customElement(\"lit-moveable\")\nexport class LitMoveable extends LitElement {\n    @withMethods(METHODS as any)\n    private moveable!: VanillaMoveable;\n    public dragStartMoveable(e: MouseEvent | TouchEvent) {\n        return this.moveable.dragStart(e);\n    }\n    public litDragStart(e: MouseEvent | TouchEvent) {\n        return this.moveable.dragStart(e);\n    }\n    public firstUpdated() {\n        const options: Partial<MoveableOptions> = {};\n\n        PROPERTIES.forEach(name => {\n            let value: any;\n            if (name === \"draggable\") {\n                value = this.mvDraggable ?? this.litDraggable;\n\n            } else {\n                value = this[name];\n            }\n            if (!isUndefined(value)) {\n                options[name as any] = value;\n            }\n        });\n\n        this.moveable = new VanillaMoveable(this, {\n            warpSelf: true,\n            ...options,\n        });\n\n        const moveable = this.moveable;\n\n        EVENTS.forEach((name, i) => {\n            moveable.on(name as any, e => {\n                const result = this.dispatchEvent(new CustomEvent(camelize(`lit ${name}`), {\n                    detail: { ...e },\n                }));\n\n                if (result === false) {\n                    (e as any).stop();\n                }\n            });\n        });\n    }\n    public render() {\n        return html`<slot></slot>`;\n    }\n    public updated(changedProperties) {\n        const moveable = this.moveable;\n        changedProperties.forEach((oldValue, propName) => {\n            const litName = propName === \"mvDraggable\" || propName === \"litMoveable\"\n                ? \"draggable\"\n                : propName;\n\n            if (PROPERTIES.indexOf(litName) > -1) {\n                moveable[litName] = this[propName];\n            }\n        });\n    }\n    public disconnectedCallback() {\n        super.disconnectedCallback();\n        this.moveable.destroy();\n    }\n}\nexport interface LitMoveable extends LitMoveableOptions, MethodInterface<MoveableInterface, VanillaMoveable, LitMoveable> { }\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        \"lit-moveable\": LitMoveable;\n    }\n}\n"
  },
  {
    "path": "packages/lit-moveable/src/index.ts",
    "content": "export * from \"./LitMoveable\";\nexport * from \"moveable\";\n"
  },
  {
    "path": "packages/lit-moveable/src/types.ts",
    "content": "import { MoveableOptions } from \"moveable\";\n\nexport interface LitMoveableOptions extends Pick<MoveableOptions, Exclude<\"draggable\", keyof MoveableOptions>> {\n    /**\n     * @deprecated\n     * use `litDraggable` prop\n     */\n    mvDraggable?: boolean;\n    litDraggable?: boolean;\n}\n"
  },
  {
    "path": "packages/lit-moveable/tsconfig.build.json",
    "content": "{\n  \"extends\": \"./tsconfig\",\n  \"compilerOptions\": {\n    \"target\": \"es2015\",\n  }\n}\n"
  },
  {
    "path": "packages/lit-moveable/tsconfig.declaration.json",
    "content": "{\n  \"extends\": \"./tsconfig\",\n  \"compilerOptions\": {\n    \"allowJs\": false,\n    \"noEmit\": false,\n    \"isolatedModules\": false,\n    \"removeComments\": true,\n    \"declaration\": true,\n    \"emitDeclarationOnly\": true,\n    \"declarationDir\": \"declaration\"\n  },\n  \"include\": [\n    \"./src/**/*\"\n  ]\n}\n"
  },
  {
    "path": "packages/lit-moveable/tsconfig.json",
    "content": "{\n    \"compilerOptions\": {\n        \"experimentalDecorators\": true,\n        \"target\": \"es2015\",\n        \"lib\": [\n            \"dom\",\n            \"dom.iterable\",\n            \"esnext\"\n        ],\n        \"allowJs\": true,\n        \"skipLibCheck\": true,\n        \"esModuleInterop\": true,\n        \"allowSyntheticDefaultImports\": true,\n        \"strict\": false,\n        \"forceConsistentCasingInFileNames\": true,\n        \"module\": \"esnext\",\n        \"moduleResolution\": \"node\",\n        \"resolveJsonModule\": true,\n        \"isolatedModules\": true,\n        \"noEmit\": true\n    },\n    \"include\": [\n        \"src\"\n    ]\n}\n"
  },
  {
    "path": "packages/moveable/.npmignore",
    "content": "node_modules/\n*.DS_Store\n.DS_Store\ndoc/\ntemplate/\nexample/\nkarma.conf.js\ntest/\nmocha.opts\nGruntfile.js\nwebpack.*.js\n.travis.yml\npackages\nrelease/\ndemo/\ncoverage/\ndist/report.html\nrollup-plugin-visualizer/\noutjs/\n.scene_cache\n*.mp3\n*.mp4\nstorybook/\n"
  },
  {
    "path": "packages/moveable/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [0.53.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.52.0...moveable@0.53.0) (2023-12-03)\n\n\n### :house: Code Refactoring\n\n* let the target be passed into dragStart (#1050) ([786fc0c](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/786fc0cd4cb3f3f67719740aa953231b7d410815))\n\n\n### :mega: Other\n\n* publish packages ([f9a0eed](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/f9a0eed9db93c1fa3522138e9c7604287f0ce21f))\n\n\n\n## [0.52.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.51.2...moveable@0.52.0) (2023-10-28)\n\n\n### :mega: Other\n\n* publish packages ([1a65454](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/1a654540f1390648d7e4db910d0673acff190007))\n\n\n\n## [0.51.2](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.51.1...moveable@0.51.2) (2023-09-19)\n\n\n### :bug: Bug Fix\n\n* fix roundable shadow condition ([adb09b7](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/adb09b7396271e7de7031c1d621d1232f3751a9b))\n\n\n### :mega: Other\n\n* publish packages ([ecf15ab](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/ecf15ab399bb4d9f6752cb84b0d6b06d15e5c426))\n\n\n\n## [0.51.1](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.51.0...moveable@0.51.1) (2023-07-11)\n\n\n### :mega: Other\n\n* publish packages ([27bda8e](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/27bda8ea3d9751847fc073519a832b3464242d3c))\n\n\n\n## [0.51.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.50.2...moveable@0.51.0) (2023-07-09)\n\n\n### :rocket: New Features\n\n* add `onBound` event #970 ([c9db51f](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/c9db51f8ef5f7a0d262323e381ec25ad5bfc391d))\n\n\n### :mega: Other\n\n* publish packages ([25cae7f](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/25cae7f46aa28dcb948a8690fd6062b7e15d72ff))\n\n\n\n## [0.50.2](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.50.1...moveable@0.50.2) (2023-07-04)\n\n\n### :mega: Other\n\n* publish packages ([9467cf4](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/9467cf45fd2871573df8886eb134c67a8b0f916d))\n\n\n\n## [0.50.1](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.49.1...moveable@0.50.1) (2023-07-02)\n\n\n### :bug: Bug Fix\n\n* fix choppy reisze #961 ([c8f9637](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/c8f9637ae319870cc6d4e9bf68eb98820f27f25e))\n* fix group's dragTargetRef #953 ([85d17d7](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/85d17d77751d474db88b7238dd39baccd6b7a78d))\n\n\n### :mega: Other\n\n* publish packages ([5697e80](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/5697e8050f486a83ea409b856d1f670759ba6910))\n* publish packages ([5e76998](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/5e76998ba0a90efcbb0c2e4fe8030ca47a1842d4))\n\n\n\n## [0.49.1](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.49.0...moveable@0.49.1) (2023-06-28)\n\n\n### :bug: Bug Fix\n\n* fix dragTarget's unset #960 ([8e60b38](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/8e60b385b8931a3aab953b315618ec15f9360611))\n\n\n### :mega: Other\n\n* fix update modules ([bb608dc](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/bb608dc0d1d9eb13e538d1026c05809d89757b1d))\n* publish packages ([510d7cd](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/510d7cdf76eef4a17cc75d95634ebcb6d9688f8e))\n\n\n\n## [0.49.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.48.0...moveable@0.49.0) (2023-06-25)\n\n\n### :mega: Other\n\n* publish packages ([f893cca](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/f893ccaa176d31ef9ddb241d2cd4a1fb098cdae0))\n\n\n\n## [0.48.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.47.9...moveable@0.48.0) (2023-06-04)\n\n\n### :rocket: New Features\n\n* support drag api #920 ([8f1a839](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/8f1a8396c429cf108da5417bc36cccd3ef46013c))\n\n\n### :bug: Bug Fix\n\n* support iframe context #932 ([3e87cc7](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/3e87cc7fed43160ca342630fed2f413876f8a518))\n\n\n### :mega: Other\n\n* update packages ([8d65572](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/8d65572384ae0fdff288fe78fbeb5d249b070eb7))\n\n\n\n## [0.47.9](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.47.8...moveable@0.47.9) (2023-05-16)\n\n\n### :mega: Other\n\n* publish packages ([5bd22bb](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/5bd22bb009e10a4f8032f35c2ae3b490f4d94e5b))\n\n\n\n## [0.47.8](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.47.7...moveable@0.47.8) (2023-05-15)\n\n\n### :bug: Bug Fix\n\n* update croact, css-styled version #916 ([b517b64](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/b517b6498a612c072eadc9354d6383363771ea6d))\n\n\n### :mega: Other\n\n* publish packages ([91aa8bc](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/91aa8bc1bdefc65cde8c032f1c7ba13ca54ad2fa))\n\n\n\n## [0.47.7](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.47.6...moveable@0.47.7) (2023-05-09)\n\n\n### :bug: Bug Fix\n\n* fix missing type #911 ([0f26c75](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/0f26c75261fe8996f8b1317ec2da473a9feb57d0))\n\n\n### :mega: Other\n\n* publish packages ([40dd902](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/40dd9022c41244ab009d621861ddc2ac63768748))\n\n\n\n## [0.47.6](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.47.0...moveable@0.47.6) (2023-05-08)\n\n\n### :rocket: New Features\n\n* update croact version #902 ([e328e21](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/e328e2170438fe27f60f307ae976183fbfb5e96e))\n\n\n### :bug: Bug Fix\n\n* fix files filed #910 #909 #907 ([a4995ab](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/a4995ab1acb3a34974e1d5a20d17fb2ee17ddc0c))\n\n\n### :mega: Other\n\n* publish packages ([d0f0532](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/d0f0532bfb42fe98ee95748839a639fddbe4b9d6))\n* publish packages ([e1e86a9](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/e1e86a95ebff9d18ad7a5ebede3bd5bd66465b5d))\n* publish packages ([60a747e](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/60a747ee3c373f83fb759a8482e2365e77dcb5e8))\n\n\n\n## [0.47.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.46.1...moveable@0.47.0) (2023-05-01)\n\n\n### :mega: Other\n\n* publish packages ([24934e3](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/24934e317de2e5ff622bd9ab0dec8d75a7c05c48))\n* update croact 1.0.1 #902 ([34433f3](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/34433f3ab1266fff29f1f74bf6a5176d238348b6))\n\n\n\n## [0.46.1](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.46.0...moveable@0.46.1) (2023-04-16)\n\n\n### :mega: Other\n\n* publish packages ([a623eda](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/a623eda2702067397159742dd0c6ed16b99bbe22))\n\n\n\n## [0.46.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.45.0...moveable@0.46.0) (2023-04-13)\n\n\n### :rocket: New Features\n\n* add croact ([b94c41c](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/b94c41c50cdf37da0136bd4d04f2237529253f45))\n* add croact compat ([233c6d0](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/233c6d0a905953b51c3fd5df1f7c58e7b1d03432))\n\n\n### :bug: Bug Fix\n\n* fix warpSelf ([8c86a3f](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/8c86a3f95e5d0b8832b1d9b65bf72f598eb8d0cb))\n\n\n### :mega: Other\n\n* publish packages ([1177427](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/11774277bafd9c60e9cef3c9a6fa38a3e1c4077d))\n\n\n\n## [0.45.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.44.4...moveable@0.45.0) (2023-03-26)\n\n\n### :mega: Other\n\n* publish packages ([7580d27](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/7580d272fe857aadfbdbc9df264e0a413dd56588))\n\n\n\n## [0.44.4](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.44.3...moveable@0.44.4) (2023-03-21)\n\n\n### :memo: Documentation\n\n* fix README ([7426492](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/7426492de210ab6f38d411d96e6d843d7423f555))\n\n\n### :mega: Other\n\n* publish packages ([ae54ef4](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/ae54ef4c660ae789867e4286990f234cc808a379))\n\n\n\n## [0.44.3](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.44.2...moveable@0.44.3) (2023-03-14)\n\n\n### :memo: Documentation\n\n* fix story url ([8977306](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/897730620480d8e830c4b53401a28d03b42b9a5f))\n\n\n### :mega: Other\n\n* update packages ([5b03d09](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/5b03d09a0cd298d47597fc8c8c9c6fdd4cd5a267))\n\n\n\n## [0.44.2](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.44.0...moveable@0.44.2) (2023-03-10)\n\n\n### :mega: Other\n\n* publish packages ([5589402](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/55894029a463f96a1f42827330b092be3fb63bf2))\n* update packages #856 #847 ([a78c8e3](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/a78c8e3c7ff8c3eb347a7617ddc76c807b57633e))\n\n\n\n## [0.44.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.43.1...moveable@0.44.0) (2023-03-08)\n\n\n### :mega: Other\n\n* publish packages ([645e290](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/645e290a53b477b468042e05447e2f8f8aea6ed0))\n\n\n\n## [0.43.1](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.42.2...moveable@0.43.1) (2023-01-29)\n\n\n### :mega: Other\n\n* publish packages ([24c9567](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/24c9567e2ec00392d2d445298031c39de0331eae))\n* publish packages ([0e0a03d](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/0e0a03dd6c234ded050db8206e585c5fa2da1848))\n\n\n\n## [0.42.2](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.42.1...moveable@0.42.2) (2022-12-16)\n\n\n### :mega: Other\n\n* publish packages ([d088ad9](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/d088ad9ed64889f4fd6143b89410f5d5e372105f))\n\n\n\n## [0.42.1](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.41.1...moveable@0.42.1) (2022-12-10)\n\n\n### :mega: Other\n\n* publish packages ([ab42598](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/ab42598cb7a6175450125c5e55093cf891a33692))\n\n\n\n## [0.41.1](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.41.0...moveable@0.41.1) (2022-12-05)\n\n\n### :bug: Bug Fix\n\n* move react-moveable path ([ec8e162](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/ec8e1620e05f1d5a1a45ecccec7481c2ea8a4f57))\n\n\n### :mega: Other\n\n* publish packages ([9ee9bc9](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/9ee9bc9c76f6c4b317548470b5b4894c6a462be1))\n\n\n\n## [0.41.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.40.1...moveable@0.41.0) (2022-12-03)\n\n\n### :mega: Other\n\n* publish packages ([4739df4](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/4739df488cdf3c32cb4ca4e024063c5c44fbaf0c))\n\n\n\n## [0.40.1](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.40.0...moveable@0.40.1) (2022-11-28)\n\n\n### :mega: Other\n\n* publish packages ([746c40b](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/746c40b2a2f31f2f371f9110018c89e64c08a525))\n* update jsdoc, template ([11408ca](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/11408caea15925a42165aa2080a7327e77a22ea8))\n\n\n\n## [0.40.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.39.0...moveable@0.40.0) (2022-11-27)\n\n\n### :memo: Documentation\n\n* fix README ([3a153c8](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/3a153c849b7279ec5fd603167117c88f25a7149c))\n\n\n### :mega: Other\n\n* publish packages ([3d5ac5a](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/3d5ac5ad855d98a2f555174cc46ec09c148d6a20))\n* publish packages ([92eb72d](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/92eb72df6110eb40a66b4726740240acb43e9745))\n\n\n\n## [0.39.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.38.1...moveable@0.39.0) (2022-11-13)\n\n\n### :mega: Other\n\n* publish packages ([0780d7a](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/0780d7a204e5f1fa13070d4fa3ca657dfe3ee4af))\n\n\n\n## [0.38.1](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.38.0...moveable@0.38.1) (2022-11-06)\n\n\n### :mega: Other\n\n* publish packages ([64e846b](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/64e846bb0e606756bc0b87c92b2b1052b458b9f7))\n\n\n\n## [0.38.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.37.0...moveable@0.38.0) (2022-11-04)\n\n\n### :bug: Bug Fix\n\n* fix no relative snapContainer's size #773 ([1db881f](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/1db881f4d63fe59ffa22b00428419cfb0e4e2827))\n\n\n### :mega: Other\n\n* publish packages ([b6896b3](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/b6896b340dd1f78777bd63c48e8545895df9aa5e))\n* update packages #760 ([5c77cf3](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/5c77cf3986fa319a170d8bd90b6cd720601b5172))\n\n\n\n## [0.37.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.36.4...moveable@0.37.0) (2022-10-17)\n\n\n### :bug: Bug Fix\n\n* fix flash of single, group toggling #760 ([5578030](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/557803012e21d2e78e3c0577aa9a238d9ee3a8dd))\n* support cache for group #760 ([4661320](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/46613207e47279e72bdfc656ae35548a3f07474d))\n\n\n### :mega: Other\n\n* publish packages ([75db134](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/75db1345ab1119dd9a5270c7c11de455888c2627))\n* publish packages ([47f5335](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/47f53351792bf5264c6d66745088e0571cedc3aa))\n* update packages ([61730d5](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/61730d5c143d4027c55a714c764efe77bbebe5bf))\n\n\n\n## [0.36.4](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.36.1...moveable@0.36.4) (2022-10-10)\n\n\n### :mega: Other\n\n* publish packages ([9e3ee2f](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/9e3ee2ff44dea473e7aa73e4d501c2d23062f40d))\n* publish packages ([16b2516](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/16b251618307faad8f8f3fc5433b27ed1466311c))\n\n\n\n## [0.36.1](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.36.0...moveable@0.36.1) (2022-09-19)\n\n\n### :mega: Other\n\n* publish packages ([2954e37](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/2954e37b9a4e2100a8a55c0d49d279e7f994fd94))\n\n\n\n## [0.36.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.35.4...moveable@0.36.0) (2022-09-15)\n\n\n### :mega: Other\n\n* update packages ([e5774a9](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/e5774a9becd500d154e8d354017dcbd80505ba13))\n\n\n\n## [0.35.4](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.35.3...moveable@0.35.4) (2022-08-24)\n\n\n### :mega: Other\n\n* publish packages ([d57ebb1](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/d57ebb130006c47e3a687d2b417fe3fe7f30149a))\n\n\n\n## [0.35.3](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.35.1...moveable@0.35.3) (2022-08-23)\n\n\n### :mega: Other\n\n* fix cjs configs ([ce8cbb1](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/ce8cbb18563e34234f7e9d83a0b3f024870314a8))\n* publish packages ([3597bc5](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/3597bc5fd58cdec56fd4ff8916380a6f3709f7f5))\n\n\n\n## [0.35.1](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.35.0...moveable@0.35.1) (2022-08-12)\n\n\n### :bug: Bug Fix\n\n* fix that dragStart method cannot fire #718 ([5ea9fc3](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/5ea9fc362534e8a56976ad87053700ee06a14e0d))\n\n\n### :mega: Other\n\n* publish packages ([6be7e81](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/6be7e8122b8edd2e323a039cdbb73381de74e14f))\n\n\n\n## [0.35.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.34.3...moveable@0.35.0) (2022-08-06)\n\n\n### :mega: Other\n\n* publish packages ([80005ba](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/80005bada5651afd0c5487a193ab321b22ab1b55))\n\n\n\n## [0.34.3](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.34.2...moveable@0.34.3) (2022-08-03)\n\n\n### :mega: Other\n\n* publish packages ([5468ff7](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/5468ff763bfa3f30e637ce8f504af09152b22c5c))\n\n\n\n## [0.34.2](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.33.0...moveable@0.34.2) (2022-08-01)\n\n\n### :memo: Documentation\n\n* fix README ([5ded1c1](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/5ded1c19b77fe2c3974bcf1f1ac1356d2924991d))\n\n\n### :mega: Other\n\n* publish packages ([0076577](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/00765776ba92b5ca691c1aefd1c20687952373d9))\n* publish packages ([ffa0c18](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/ffa0c18bb6970d6f8d88a49db23b11620e704618))\n* publish packages ([958ebac](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/958ebace6032eafb17f1ce366394b440671b45b3))\n\n\n\n## [0.33.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.32.0...moveable@0.33.0) (2022-07-25)\n\n\n### :mega: Other\n\n* publish packages ([63e03d1](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/63e03d1d5f69e56c7df6d357c58d7acd06932e80))\n\n\n\n## [0.32.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.31.2...moveable@0.32.0) (2022-07-21)\n\n\n### :mega: Other\n\n* publish packages ([da24696](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/da24696977c24b6ea54a433192d15bb7ecbc62e9))\n* update `react-compat-moveable` ([712ae6f](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/712ae6fb49dec3f4e40a3cd664f63625d7cd5669))\n\n\n\n## [0.31.2](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.31.0...moveable@0.31.2) (2022-07-17)\n\n\n### :bug: Bug Fix\n\n* fix files field in package.json #700 ([48ce548](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/48ce548438dd0a7da9f544730b2fc3ab65073775))\n\n\n### :mega: Other\n\n* publish packages ([5d89af5](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/5d89af521d1a288d4d9ca7923e0e9654e8f97d53))\n\n\n\n## [0.31.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.30.0...moveable@0.31.0) (2022-07-17)\n\n\n### :mega: Other\n\n* publish packages ([2a4940f](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/2a4940f74997fae24c7d77c553a6bc6be1301d40))\n\n\n\n## [0.30.0](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.29.9...moveable@0.30.0) (2022-06-09)\n\n\n### :bug: Bug Fix\n\n* prevent wheel drag #674 ([e9bea04](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/e9bea04aec00bd3a2a06918b539c9b02b2a589d5))\n\n\n### :mega: Other\n\n* publish packages ([b432247](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/b4322470bcd3bb05fc67d2c89eedd737f8b4b67a))\n\n\n\n## [0.29.9](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.29.8...moveable@0.29.9) (2022-06-07)\n\n\n### :house: Code Refactoring\n\n* use yarn workspace ([73da295](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/73da295064845a3791782c1777a9c555272a0af0))\n\n\n### :mega: Other\n\n* publish packages ([3530f05](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/3530f0526081b0c010e6c964265b466713f0212e))\n* update demo configuration ([917123c](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/917123cdea2830e8e8f4a8d7b2a99654f16682ef))\n* update dependencies ([9ad9efa](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/9ad9efa2a180c087cd68c1491f19a6226610567b))\n\n\n\n## [0.29.8](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.29.6...moveable@0.29.8) (2022-05-01)\n\n\n### :mega: Other\n\n* update packages versions ([169c484](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/169c48417bb4bc07c59e227c545e379dbf43d15b))\n\n\n\n## [0.29.6](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.29.5...moveable@0.29.6) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([585094f](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/585094f76ec6e1556159ac357d6ac83ebab953ae))\n\n\n\n## [0.29.5](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.29.4...moveable@0.29.5) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([5cd2398](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/5cd2398dbb4dbbda24032641fe5bf111780b75fc))\n\n\n\n## [0.29.4](https://github.com/daybrush/moveable/blob/master/packages/moveable/compare/moveable@0.29.3...moveable@0.29.4) (2022-04-26)\n\n\n### :mega: Other\n\n* update packages versions ([a62ee58](https://github.com/daybrush/moveable/blob/master/packages/moveable/commit/a62ee58b9bc32f06edc95d55ea28b60c20881ac4))\n"
  },
  {
    "path": "packages/moveable/LICENSE",
    "content": "MIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
  },
  {
    "path": "packages/moveable/README.md",
    "content": "\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/logo.png\"/></p>\n<h2 align=\"middle\">Moveable</h2>\n<p align=\"middle\">\n<a href=\"https://opencollective.com/moveable\" alt=\"Financial Contributors on Open Collective\"><img src=\"https://opencollective.com/moveable/all/badge.svg?label=financial+contributors\" /></a>\n<a href=\"https://www.npmjs.com/package/moveable\" target=\"_blank\"><img src=\"https://img.shields.io/npm/v/moveable.svg?style=flat-square&color=007acc&label=version\" alt=\"npm version\" /></a>\n<img src=\"https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square\"/>\n<a href=\"https://github.com/daybrush/moveable/blob/master/LICENSE\" target=\"_blank\"><img src=\"https://img.shields.io/github/license/daybrush/moveable.svg?style=flat-square&label=license&color=08CE5D\"/></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/react-moveable\" target=\"_blank\"><img alt=\"React\" src=\"https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb\"></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/preact-moveable\" target=\"_blank\"><img alt=\"Preact\" src=\"https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8\"></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/ngx-moveable\" target=\"_blank\"><img alt=\"Angular\" src=\"https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38\"></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/vue-moveable\" target=\"_blank\"><img\n    alt=\"Vue\"\n    src=\"https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984\"></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/vue3-moveable\" target=\"_blank\"><img\n    alt=\"Vue 3\"\n    src=\"https://img.shields.io/static/v1.svg?label=&message=Vue%203&style=flat-square&color=3fb984\"></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/svelte-moveable\" target=\"_blank\"><img alt=\"Svelte\" src=\"https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38\"></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/lit-moveable\" target=\"_blank\"><img alt=\"Lit\" src=\"https://img.shields.io/static/v1.svg?label=&message=Lit&style=flat-square&color=61daeb\"></a>\n</p>\n<p align=\"middle\">Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable</p>\n<p align=\"middle\">\n    <a href=\"https://daybrush.com/moveable\" target=\"_blank\"><strong>Demo</strong></a> /\n    <a href=\"https://daybrush.com/moveable/storybook/\" target=\"_blank\"><strong>Storybook</strong></a> /\n    <a href=\"https://daybrush.com/moveable/release/latest/doc/\" target=\"_blank\"><strong>API</strong></a> /\n    <a href=\"https://github.com/daybrush/scena\" target=\"_blank\"><strong>Main Project</strong></a>\n</p>\n\n<table width=\"100%\" align=\"center\">\n<tr>\n<th colspan=\"4\">Moveable</th>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-draggable\"><strong>Draggable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-resizable\"><strong>Resizable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-scalable\"><strong>Scalable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-rotatable\"><strong>Rotatable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/draggable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/resizable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/scalable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/rotatable.gif\"/>\n</td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-warpable\"><strong>Warpable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html\"><strong>Pinchable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/group--group-draggable-resizable-rotatable\"><strong>Groupable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/snap-bound--snap-guidelines\"><strong>Snappable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/warpable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/pinchable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/groupable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/snappable.gif\"/></td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-clippable\"><strong>Clippable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-roundable\"><strong>Roundable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-origin-draggable\"><strong>OriginDraggable</strong></a></td>\n<td align=\"center\"><a href=\"https://github.com/daybrush/selecto\"><strong>Selecto</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/clippable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/roundable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/origindraggable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/selecto.gif\"/></td>\n</tr>\n</table>\n\n\n## 🔥 Features\n* **Draggable** refers to the ability to drag and move targets.\n* **Resizable** indicates whether the target's width and height can be increased or decreased.\n* **Scalable** indicates whether the target's x and y can be scale of transform.\n* **Rotatable** indicates whether the target can be rotated.\n* **Warpable** indicates whether the target can be warped (distorted, bented).\n* **Pinchable** indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.\n* **Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.\n* **Snappable** indicates whether to snap to the guideline.\n* **OriginDraggable*** indicates Whether to drag origin.\n* **Clippable** indicates Whether to clip the target.\n* **Roundable** indicates Whether to show and drag or double click border-radius.\n* Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)\n* Support Major Browsers\n* Support 3d Transform\n\n\n## ⚙️ Installation\n### npm\n```sh\n$ npm i moveable\n```\n\n### scripts\n```html\n<script src=\"//daybrush.com/moveable/release/latest/dist/moveable.min.js\"></script>\n```\n\n## 📄 Documents\n\n* [**Moveable Handbook**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md)\n* [**How to use Group**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-group)\n* [**How to use custom CSS**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-custom-css)\n* [**How to make custom able**](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/src/ables/README.md)\n* [API Documentation](https://daybrush.com/moveable/release/latest/doc/)\n\n## 🚀 How to use\n```ts\nimport Moveable from \"moveable\";\n\nconst moveable = new Moveable(document.body, {\n    target: document.querySelector(\".target\"),\n    // If the container is null, the position is fixed. (default: parentElement(document.body))\n    container: document.body,\n    draggable: true,\n    resizable: true,\n    scalable: true,\n    rotatable: true,\n    warpable: true,\n    // Enabling pinchable lets you use events that\n    // can be used in draggable, resizable, scalable, and rotateable.\n    pinchable: true, // [\"resizable\", \"scalable\", \"rotatable\"]\n    origin: true,\n    keepRatio: true,\n    // Resize, Scale Events at edges.\n    edge: false,\n    throttleDrag: 0,\n    throttleResize: 0,\n    throttleScale: 0,\n    throttleRotate: 0,\n});\n/* draggable */\nmoveable.on(\"dragStart\", ({ target, clientX, clientY }) => {\n    console.log(\"onDragStart\", target);\n}).on(\"drag\", ({\n    target, transform,\n    left, top, right, bottom,\n    beforeDelta, beforeDist, delta, dist,\n    clientX, clientY,\n}) => {\n    console.log(\"onDrag left, top\", left, top);\n    target!.style.left = `${left}px`;\n    target!.style.top = `${top}px`;\n    // console.log(\"onDrag translate\", dist);\n    // target!.style.transform = transform;\n}).on(\"dragEnd\", ({ target, isDrag, clientX, clientY }) => {\n    console.log(\"onDragEnd\", target, isDrag);\n});\n\n/* resizable */\nmoveable.on(\"resizeStart\", ({ target, clientX, clientY }) => {\n    console.log(\"onResizeStart\", target);\n}).on(\"resize\", ({ target, width, height, dist, delta, clientX, clientY }) => {\n    console.log(\"onResize\", target);\n    delta[0] && (target!.style.width = `${width}px`);\n    delta[1] && (target!.style.height = `${height}px`);\n}).on(\"resizeEnd\", ({ target, isDrag, clientX, clientY }) => {\n    console.log(\"onResizeEnd\", target, isDrag);\n});\n\n/* scalable */\nmoveable.on(\"scaleStart\", ({ target, clientX, clientY }) => {\n    console.log(\"onScaleStart\", target);\n}).on(\"scale\", ({\n    target, scale, dist, delta, transform, clientX, clientY,\n}: OnScale) => {\n    console.log(\"onScale scale\", scale);\n    target!.style.transform = transform;\n}).on(\"scaleEnd\", ({ target, isDrag, clientX, clientY }) => {\n    console.log(\"onScaleEnd\", target, isDrag);\n});\n\n/* rotatable */\nmoveable.on(\"rotateStart\", ({ target, clientX, clientY }) => {\n    console.log(\"onRotateStart\", target);\n}).on(\"rotate\", ({ target, beforeDelta, delta, dist, transform, clientX, clientY }) => {\n    console.log(\"onRotate\", dist);\n    target!.style.transform = transform;\n}).on(\"rotateEnd\", ({ target, isDrag, clientX, clientY }) => {\n    console.log(\"onRotateEnd\", target, isDrag);\n});\n\n/* warpable */\nthis.matrix = [\n    1, 0, 0, 0,\n    0, 1, 0, 0,\n    0, 0, 1, 0,\n    0, 0, 0, 1,\n];\nmoveable.on(\"warpStart\", ({ target, clientX, clientY }) => {\n    console.log(\"onWarpStart\", target);\n}).on(\"warp\", ({\n    target,\n    clientX,\n    clientY,\n    delta,\n    dist,\n    multiply,\n    transform,\n}) => {\n    console.log(\"onWarp\", target);\n    // target.style.transform = transform;\n    this.matrix = multiply(this.matrix, delta);\n    target.style.transform = `matrix3d(${this.matrix.join(\",\")})`;\n}).on(\"warpEnd\", ({ target, isDrag, clientX, clientY }) => {\n    console.log(\"onWarpEnd\", target, isDrag);\n});\n\n/* pinchable */\n// Enabling pinchable lets you use events that\n// can be used in draggable, resizable, scalable, and rotateable.\nmoveable.on(\"pinchStart\", ({ target, clientX, clientY }) => {\n    // pinchStart event occur before dragStart, rotateStart, scaleStart, resizeStart\n    console.log(\"onPinchStart\");\n}).on(\"pinch\", ({ target, clientX, clientY, datas }) => {\n    // pinch event occur before drag, rotate, scale, resize\n    console.log(\"onPinch\");\n}).on(\"pinchEnd\", ({ isDrag, target, clientX, clientY, datas }) => {\n    // pinchEnd event occur before dragEnd, rotateEnd, scaleEnd, resizeEnd\n    console.log(\"onPinchEnd\");\n});\n```\n\n\n## 📦 Packages\n* [**moveable**](https://github.com/daybrush/moveable/blob/master/packages/moveable): A Vanilla Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n* [**react-moveable**](https://github.com/daybrush/moveable/blob/master/packages/react-moveable): A React Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n* [**preact-moveable**](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable): A Preact Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n* [**ngx-moveable**](https://github.com/daybrush/moveable/blob/master/packages/ngx-moveable): An Angular Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n* [**svelte-moveable**](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable): A Svelte Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n* [**lit-moveable**](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable): A Lit Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n* [**vue-moveable**](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable): A Vue Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n* [**vue3-moveable**](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable): A Vue 3 Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.\n\n## ⚙️ Developments\nThe `moveable` repo is managed as a [monorepo](https://github.com/lerna/lerna) with `yarn`.\n\nThe main project was made with `react` and I used [`croact`](https://github.com/daybrush/croact) to make it lighter with umd.\n\nFor development and testing, check in [packages/react-moveable](https://github.com/daybrush/moveable/blob/master/packages/react-moveable).\n\n### `npm run storybook`\n\n```\n$ yarn install\n$ npm run bootstrap\n$ npm run storybook\n```\n\nRuns the app in the development mode.<br/>\nOpen [http://localhost:6006](http://localhost:6006) to view it in the browser.\n\nThe page will reload if you make edits.<br/>\nYou will also see any lint errors in the console.\n\n## ⭐️ Show Your Support\nPlease give a ⭐️ if this project helped you!\n\n## 👏 Contributing\n\nIf you have any questions or requests or want to contribute to `moveable` or other packages, please write the [issue](https://github.com/daybrush/moveable/issues) or give me a Pull Request freely.\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](https://github.com/daybrush/moveable/blob/master/CONTRIBUTING.md)].\n\n<a href=\"https://github.com/daybrush/moveable/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=daybrush/moveable\" />\n</a>\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/moveable/issues) on GitHub.\n\n## Sponsors\n<p align=\"center\">\n\t<a href=\"https://daybrush.com/sponsors/sponsors.svg\">\n\t\t<img src=\"https://daybrush.com/sponsors/sponsors.svg\"/>\n\t</a>\n</p>\n\n## 📝 License\n\nThis project is [MIT](https://github.com/daybrush/moveable/blob/master/LICENSE) licensed.\n\n```\nMIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n"
  },
  {
    "path": "packages/moveable/package.json",
    "content": "{\n  \"name\": \"moveable\",\n  \"version\": \"0.53.0\",\n  \"description\": \"Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.\",\n  \"main\": \"./dist/moveable.cjs.js\",\n  \"module\": \"./dist/moveable.esm.js\",\n  \"sideEffects\": false,\n  \"types\": \"declaration/index.d.ts\",\n  \"scripts\": {\n    \"start\": \"rollup -c -w\",\n    \"build\": \"rollup -c && npm run declaration && print-sizes ./dist\",\n    \"declaration\": \"rm -rf declaration && tsc -p tsconfig.declaration.json\",\n    \"doc\": \"rm -rf ./doc && jsdoc -c jsdoc.json\",\n    \"storybook\": \"cd storybook && npm run build && cd ../\",\n    \"prerelease\": \"npm run doc && npm run build&& prerelease --dirs=dist,doc\",\n    \"release:before\": \"npm run build && npm run doc && npm run storybook\",\n    \"release\": \"npm run release:before && release --dirs=dist,doc\",\n    \"release:init\": \"npm run release:before && release -i --dirs=dist,doc\",\n    \"deploy\": \"gh-pages -d ./demo --dest=./ --add --remote origin\"\n  },\n  \"keywords\": [\n    \"moveable\",\n    \"resizable\",\n    \"scalable\",\n    \"draggable\",\n    \"rotatable\",\n    \"groupable\",\n    \"movable\",\n    \"warpable\",\n    \"pinchable\",\n    \"snappable\",\n    \"clippable\",\n    \"roundable\",\n    \"border\",\n    \"origin\",\n    \"dom\",\n    \"resize\",\n    \"scale\",\n    \"drag\",\n    \"move\",\n    \"warp\",\n    \"rotate\",\n    \"react\",\n    \"preact\",\n    \"throttle\",\n    \"group\",\n    \"pinchi\",\n    \"snap\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/daybrush/moveable/blob/master/packages/moveable\"\n  },\n  \"author\": \"Daybrush\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/daybrush/moveable/issues\"\n  },\n  \"homepage\": \"https://daybrush.com/moveable/\",\n  \"files\": [\n    \"./*\",\n    \"src/*\",\n    \"dist/*\",\n    \"declaration/*\"\n  ],\n  \"dependencies\": {\n    \"@daybrush/utils\": \"^1.13.0\",\n    \"@scena/event-emitter\": \"^1.0.5\",\n    \"croact\": \"^1.0.4\",\n    \"croact-moveable\": \"~0.9.0\",\n    \"react-moveable\": \"~0.56.0\"\n  },\n  \"devDependencies\": {\n    \"@daybrush/builder\": \"^0.2.4\",\n    \"@types/react\": \"^16.9.17\",\n    \"@types/react-dom\": \"^16.9.4\",\n    \"gh-pages\": \"^2.0.1\",\n    \"print-sizes\": \"^0.2.0\",\n    \"pvu\": \"^0.6.1\",\n    \"react\": \"^16.12.0\",\n    \"react-dom\": \"^16.12.0\",\n    \"rollup-plugin-css-bundle\": \"^1.0.4\",\n    \"rollup-plugin-react-compat\": \"^0.1.1\",\n    \"tslib\": \"^2.3.1\",\n    \"typescript\": \"^4.8 <4.9\"\n  }\n}\n"
  },
  {
    "path": "packages/moveable/rollup.config.js",
    "content": "\nconst builder = require(\"@daybrush/builder\");\nconst compat = require(\"rollup-plugin-react-compat\");\n\nconst compatPlugin = compat({\n    useCroact: true,\n    aliasModules: {\n        \"react-moveable\": \"croact-moveable\"\n    }\n});\nconst resolveCompatPlugin = compat({\n    useCroact: true,\n    resolveCompat: true,\n});\n/*\n    \"demo:start\": \"rollup -c rollup.config.demo.js -w\",\n    \"demo:build\": \"rm -rf ./demo/dist && rollup -c rollup.config.demo.js\",\n    \"prerelease\": \"npm run doc && npm run build && npm run demo:build && prerelease --dirs=dist,doc\",\n    \"release:before\": \"npm run build && npm run doc && npm run demo:build && npm run storybook\",\n*/\nconst external = {\n    \"croact\": \"croact\",\n    \"croact-ruler\": \"croact-ruler\",\n    \"croact-moveable\": \"croact-moveable\",\n    \"croact-css-styled\": \"croact-css-styled\",\n    \"@daybrush/utils\": \"utils\",\n    \"css-styled\": \"css-styled\",\n    \"framework-utils\": \"framework-utils\",\n    \"gesto\": \"Gesto\",\n    \"@scena/event-emitter\": \"@scena/event-emitter\",\n    \"@egjs/agent\": \"eg.Agent\",\n    \"@egjs/children-differ\": \"eg.ChildrenDiffer\",\n    \"@moveable/matrix\": \"@moveable/matrix\",\n    \"@scena/dragscroll\": \"@scena/dragscroll\",\n    \"css-to-mat\": \"css-to-mat\",\n    \"overlap-area\": \"overlap-area\",\n    \"@scena/matrix\": \"@scena/matrix\",\n    \"@egjs/list-differ\": \"eg.ListDiffer\",\n};\nmodule.exports = builder([\n    {\n        name: \"Moveable\",\n        input: \"src/index.umd.ts\",\n        output: \"./dist/moveable.js\",\n        exports: \"default\",\n        format: \"umd\",\n        minifyPrototype: true,\n        plugins: [resolveCompatPlugin],\n        typescript2: true,\n    },\n    {\n        name: \"Moveable\",\n        input: \"src/index.umd.ts\",\n        output: \"./dist/moveable.min.js\",\n        exports: \"default\",\n        format: \"umd\",\n        minifyPrototype: true,\n        plugins: [resolveCompatPlugin],\n        uglify: true,\n        typescript2: true,\n    },\n    {\n        input: \"src/index.ts\",\n        output: \"./dist/moveable.esm.js\",\n        exports: \"named\",\n        format: \"es\",\n        minifyPrototype: true,\n        plugins: [compatPlugin],\n        external,\n        typescript2: true,\n    },\n    {\n        input: \"src/index.cjs.ts\",\n        output: \"./dist/moveable.cjs.js\",\n        exports: \"named\",\n        format: \"cjs\",\n        minifyPrototype: true,\n        plugins: [compatPlugin],\n        external,\n\n    },\n]);\n"
  },
  {
    "path": "packages/moveable/src/InnerMoveable.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"react-moveable\";\nimport { ref } from \"framework-utils\";\n\nexport default class InnerMoveable extends React.Component<any> {\n    public state: any = {};\n    public moveable!: Moveable;\n    constructor(props: any) {\n        super(props);\n        this.state = this.props;\n    }\n    public render(): React.ReactNode {\n        return <Moveable ref={ref(this, \"moveable\")} {...this.state} />;\n    }\n}\n"
  },
  {
    "path": "packages/moveable/src/Moveable.tsx",
    "content": "import MoveableManager from \"./MoveableManager\";\n\nexport default class Moveable extends MoveableManager {}\n"
  },
  {
    "path": "packages/moveable/src/MoveableManager.tsx",
    "content": "import { ref, Properties } from \"framework-utils\";\nimport * as React from \"react\";\nimport { renderSelf, ContainerProvider } from \"croact\";\nimport InnerMoveable from \"./InnerMoveable\";\nimport {\n    MoveableInterface,\n    MoveableOptions, MoveableProperties,\n} from \"react-moveable/types\";\nimport { camelize, getDocument, isArray } from \"@daybrush/utils\";\nimport { MoveableEventsParameters } from \"./types\";\nimport { PROPERTIES, EVENTS, METHODS } from \"./consts\";\nimport EventEmitter from \"@scena/event-emitter\";\n/**\n * Moveable is Draggable! Resizable! Scalable! Rotatable!\n * @sort 1\n * @alias Moveable\n * @extends EventEmitter\n */\n@Properties(METHODS, (prototype, property) => {\n    if (prototype[property]) {\n        return;\n    }\n    prototype[property] = function(...args: any[]) {\n        const self = this.getMoveable();\n\n        if (!self || !self[property]) {\n            return;\n        }\n        return self[property](...args);\n    };\n})\n@Properties(PROPERTIES, (prototype, property) => {\n    Object.defineProperty(prototype, property, {\n        get() {\n            return this.getMoveable().props[property];\n        },\n        set(value) {\n            this.setState({\n                [property]: value,\n            });\n        },\n        enumerable: true,\n        configurable: true,\n    });\n})\nclass MoveableManager extends EventEmitter<MoveableEventsParameters> {\n    private innerMoveable!: InnerMoveable | null;\n    private containerProvider: ContainerProvider | null = null;\n    private selfElement: HTMLElement | null = null;\n    private _warp = false;\n    /**\n     *\n     */\n    constructor(parentElement: HTMLElement, options: MoveableOptions = {}) {\n        super();\n        const nextOptions = { ...options };\n\n        const events: any = {};\n\n        EVENTS.forEach(name => {\n            events[camelize(`on ${name}`)] = (e: any) => this.trigger<any>(name, e);\n        });\n        let selfElement!: HTMLElement;\n\n        if (options.warpSelf) {\n            delete options.warpSelf;\n            this._warp = true;\n            selfElement = parentElement;\n        } else {\n            selfElement = getDocument(parentElement).createElement(\"div\");\n            parentElement.appendChild(selfElement);\n        }\n        this.containerProvider = renderSelf(\n            <InnerMoveable\n                ref={ref(this, \"innerMoveable\")}\n                {...nextOptions}\n                {...events}\n            /> as any,\n            selfElement,\n        );\n\n        this.selfElement = selfElement;\n        const target = nextOptions.target!;\n        if (isArray(target) && target.length > 1) {\n            this.updateRect();\n        }\n    }\n    public setState(state: Partial<MoveableOptions>, callback?: () => any) {\n        this.innerMoveable!.setState(state, callback);\n    }\n    public forceUpdate(callback?: () => any) {\n        this.innerMoveable!.forceUpdate(callback);\n    }\n    public dragStart(e: MouseEvent | TouchEvent, target: EventTarget | null = e.target) {\n        const innerMoveable = this.innerMoveable;\n        if ((innerMoveable as any).$_timer) {\n            this.forceUpdate();\n        }\n        this.getMoveable().dragStart(e, target);\n    }\n    public destroy() {\n        const selfElement = this.selfElement!;\n\n        renderSelf(\n            null,\n            selfElement!,\n            this.containerProvider,\n        );\n        if (!this._warp) {\n            selfElement?.parentElement?.removeChild(selfElement);\n        }\n        this.containerProvider = null;\n\n        this.off();\n        this.selfElement = null;\n        this.innerMoveable = null;\n    }\n    private getMoveable() {\n        return this.innerMoveable!.moveable;\n    }\n}\n\ninterface MoveableManager extends MoveableInterface, MoveableProperties {\n}\n\nexport default MoveableManager;\n"
  },
  {
    "path": "packages/moveable/src/consts.ts",
    "content": "import {\n    MOVEABLE_PROPS,\n    MOVEABLE_METHODS,\n    MOVEABLE_EVENTS,\n} from \"react-moveable\";\n\nexport const PROPERTIES: string[] = MOVEABLE_PROPS;\nexport const METHODS: string[] = MOVEABLE_METHODS;\nexport const EVENTS: string[] = MOVEABLE_EVENTS;\n"
  },
  {
    "path": "packages/moveable/src/index.cjs.ts",
    "content": "import Moveable, * as modules from \"./index\";\n\nfor (const name in modules) {\n    (Moveable as any)[name] = (modules as any)[name];\n}\n\nmodule.exports = Moveable;\nexport * from \"./index\";\nexport default Moveable;\n"
  },
  {
    "path": "packages/moveable/src/index.ts",
    "content": "import Moveable from \"./Moveable\";\n\nexport * from \"./types\";\nexport * from \"./consts\";\nexport * from \"./utils\";\n\nexport default Moveable;\n\n"
  },
  {
    "path": "packages/moveable/src/index.umd.ts",
    "content": "import Moveable, * as modules from \"./index\";\n\nfor (const name in modules) {\n    (Moveable as any)[name] = (modules as any)[name];\n}\n\nexport default Moveable;\n"
  },
  {
    "path": "packages/moveable/src/types.ts",
    "content": "import {\n    MoveableEvents,\n} from \"react-moveable/types\";\n\nexport interface WithEventStop {\n    stop: () => any;\n}\nexport type MoveableEventsParameters = {\n    [key in keyof MoveableEvents]: MoveableEvents[key] & WithEventStop;\n};\nexport * from \"react-moveable/types\";\n"
  },
  {
    "path": "packages/moveable/src/utils.ts",
    "content": "import { Able, DefaultProps } from \"react-moveable/types\";\nimport { getElementInfo as getElementInfoFunction, makeAble as makeAbleFunction } from \"react-moveable\";\n\nexport function getElementInfo(\n    target: SVGElement | HTMLElement,\n    container?: SVGElement | HTMLElement | null,\n    rootContainer?: SVGElement | HTMLElement | null | undefined,\n) {\n    return getElementInfoFunction(target, container, rootContainer);\n};\nexport function makeAble<\n    Name extends string,\n    AbleObject extends Partial<Able<any, any>>,\n>(name: Name, able: AbleObject) {\n    return makeAbleFunction<Name, AbleObject>(name, able);\n}\n"
  },
  {
    "path": "packages/moveable/test/manual/css.html",
    "content": "<body>\n    <div id=\"artwork\" class=\"target target1\"></div>\n    <div class=\"target2\"></div>\n    <button>aa</button>\n</body>\n<style>\n    .target1,\n    .target2 {\n        position: relative;\n        width: 200px;\n        height: 200px;\n        top: 100px;\n        background: #f55;\n        border: 1px solid #333;\n    }\n    .moveable-control-box .moveable-rotation .moveable-rotation-control {\n        border-radius: 0;\n        background: #f55;\n        border: 0;\n    }\n</style>\n<script src=\"https://daybrush.com/moveable/release/latest/dist/moveable.js\"></script>\n\n<script>\n    let hasInteracted = false;\n    let isActive = true;\n\n    const editor = document.body;\n    let moveable;\n    moveable = new Moveable(editor, {\n        target: \".target\",\n        className: \"moveable\",\n        // If the container is null, the position is fixed. (default: parentElement(document.body))\n        container: editor,\n        draggable: true,\n        resizable: true,\n        scalable: false,\n        rotatable: true,\n        isDisplaySnapDigit: false,\n        elementGuidelines: [document.body],\n        snappable: true,\n        snapThreshold: 5,\n        snapGap: false,\n        snapDirections: {\n            top: true,\n            right: true,\n            bottom: true,\n            left: true,\n            center: true,\n            middle: true,\n        },\n        elementSnapDirections: {\n            top: true,\n            right: true,\n            bottom: true,\n            left: true,\n            center: true,\n            middle: true,\n        },\n        // Enabling pinchable lets you use events that\n        // can be used in draggable, resizable, scalable, and rotateable.\n        pinchable: false, // [\"resizable\", \"scalable\", \"rotatable\"]\n        origin: false,\n        keepRatio: true,\n        // Resize, Scale Events at edges.\n        // edge: true,\n        throttleDrag: 0,\n        throttleResize: 0,\n        throttleRotate: 0,\n        padding: { left: 0, top: 0, right: 0, bottom: 0 },\n    });\n</script>\n"
  },
  {
    "path": "packages/moveable/test/manual/custom/changeTarget.html",
    "content": "<div id=\"app\">\n    <custom-parent class=\"parent draggable\">\n        <custom-children class=\"children draggable\"></custom-children>\n    </custom-parent>\n</div>\n<style>\n    .container {\n        width: 1000px;\n        height: 800px;\n        position: absolute;\n        left: 100px;\n        top: 100px;\n    }\n\n    .parent {\n        width: 500px;\n        height: 500px;\n        position: absolute;\n        transform: translate(100px, 100px)\n    }\n\n    .children {\n        width: 150px;\n        height: 150px;\n        position: absolute;\n        background-color: #e79627;\n        transform: translate(100px, 100px)\n    }\n</style>\n<script src=\"./custom-parent.js\"></script>\n<script src=\"./custom-child.js\"></script>\n<script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n<script src=\"../../../dist/moveable.js\"></script>\n<script>\n\n\n$('#app').on('mousedown', '.draggable', (e) => {\n  e.stopPropagation();\n  e.preventDefault();\n  console.log('mousedown', e.currentTarget);\n  moveableDemo.waitToChangeTarget().then(() => {\n    console.log('?');\n    moveableDemo.dragStart(e);\n  });\n  moveableDemo.target = e.currentTarget;\n});\n\n\n// document.querySelectorAll(\"custom-parent, custom-children\").forEach(t => t.addEventListener(\"mousedown\", e => {\n//     e.stopPropagation();\n//     e.preventDefault();\n//     console.log('mousedown', e.currentTarget);\n//     moveableDemo.waitToChangeTarget().then(() => {\n//         console.log('?');\n//         moveableDemo.dragStart(e);\n//     });\n//     moveableDemo.target = e.currentTarget;\n// }));\n\n    var moveableDemo = new Moveable(document.body, {\n        target: null,\n        snapThreshold: 5,\n        draggable: true,\n        resizable: true,\n        keepRatio: false,\n        throttleDrag: 0,\n        throttleResize: 0,\n        startDragRotate: 0,\n        throttleDragRotate: 0,\n        zoom: 1,\n        origin: true,\n        bounds: { left: 0, right: 700, top: 0, bottom: 520 },\n        padding: { left: 0, top: 0, right: 0, bottom: 0 },\n        elementGuidelines: [],\n        snapGap: true,\n        snapDirections: { left: true, top: true, right: true, bottom: true },\n        elementSnapDirections: { left: true, top: true, right: true, bottom: true },\n    });\n\n    moveableDemo.on('dragStart', (e) => {\n        console.log('dragStart');\n    });\n\n    moveableDemo.on('drag', (e) => {\n        // console.log(e);\n        e.target.style.transform = e.transform;\n        console.log(e);\n        console.log(moveableDemo.getRect());\n    });\n\n</script>\n"
  },
  {
    "path": "packages/moveable/test/manual/custom/custom-child.js",
    "content": "class CustomChildren extends HTMLElement {\n    styleText = `\n      .container {\n        width: 100%;\n        height: 100%;\n      }\n      `;\n\n    constructor() {\n        super();\n        this.shadow = this.attachShadow({ mode: 'open' });\n        const style = document.createElement('style');\n        const div = document.createElement('div');\n        div.classList.add('container');\n        style.textContent = this.styleText;\n        this.shadow.appendChild(style);\n        this.shadow.appendChild(div);\n    }\n}\ncustomElements.define('custom-children', CustomChildren);\n"
  },
  {
    "path": "packages/moveable/test/manual/custom/custom-parent.js",
    "content": "class CustomParent extends HTMLElement {\n    styleText = `\n      .card {\n        width: 100%;\n        height: 100%;\n      }\n\n      .card-header {\n        width:100%;\n        height: 80px;\n        background-color: #3794FF;\n      }\n\n      .card-content {\n        width: 100%;\n        height: calc(100% - 80px);\n        background-color: #EDF0F3;\n        position: relative;\n      }\n      `;\n\n    constructor() {\n        super();\n        this.shadow = this.attachShadow({ mode: 'open' });\n        const style = document.createElement('style');\n        const div = document.createElement('div');\n        div.classList.add('card');\n        div.innerHTML = `\n        <div class=\"card-header\"></div>\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n      `;\n        style.textContent = this.styleText;\n        this.shadow.appendChild(style);\n        this.shadow.appendChild(div);\n    }\n}\ncustomElements.define('custom-parent', CustomParent);\n"
  },
  {
    "path": "packages/moveable/test/manual/dragapi.html",
    "content": "<html>\n\n<body>\n    <!-- <b>Works currently only in Chrome and Edge (not in FF)</b> -->\n    <!--Original idea by James Pistell (https://codepen.io/pistell/pen/XWWdZrv)-->\n    <div style=\"width:100%; height:100%; padding-top: 20px; float: left;\">\n        <div id=\"container-left\"\n            style=\"position:static; left:10px; top:20px; width:300; height:660; z-index:-1; overflow: auto\">\n            <h3>Drag me</h3>\n            <div class=\"item\" draggable=\"true\" ondragstart=\"dragstart(event)\">\n                A\n            </div>\n            <br>\n            <div class=\"item\" draggable=\"true\" ondragstart=\"dragstart(event)\">\n                B\n            </div>\n        </div>\n        <div class=\"container\" id=\"container\" ondragover=\"dragover(event)\">\n            <h3>Dropzone</h3>\n\n            <div class=\"item selectable\">\n                ITEM\n            </div>\n\n        </div>\n    </div>\n\n    <style>\n        html,\n        body {\n            margin: 0;\n            padding: 0;\n            height: 100%;\n        }\n\n        #container-left {\n            width: 150px;\n            height: 330px;\n            float: left;\n            background-color: #fff;\n        }\n\n        #container {\n            width: 800px;\n            height: 550px;\n            float: left;\n            background-color: #ff1;\n            display: initial;\n            margin: auto;\n            box-sizing: border-box;\n        }\n\n        svg {\n            overflow: visible;\n        }\n\n        svg:hover {\n            cursor: grab;\n        }\n\n        /* Demo stuff */\n\n        h3 {\n            text-align: center;\n            font-family: Helvetica;\n            line-height: 1.7rem;\n            /* Prevent users from selecting demo text */\n            user-select: none;\n        }\n\n        .explain {\n            width: 50%;\n            float: right;\n        }\n\n        /* Hide the explainer text on small screens */\n        @media (max-width: 100rem) {\n            .explain {\n                display: none;\n            }\n        }\n\n        .item {\n            border: solid;\n            width: 60px;\n            height: 60px;\n            text-align: center;\n            vertical-align: middle;\n            line-height: 60px;\n            background-color: orange;\n            cursor: pointer;\n        }\n    </style>\n    <script src=\"../../dist/moveable.js\"></script>\n    <script>\n        let moveableRef = null;\n        let newDiv;\n        let entered = false;\n\n        function dragstart(e) {\n            const newContent = document.createTextNode(e.target.innerHTML);\n            const container = document.querySelector('#container-left');\n\n            let img = new Image();\n            img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';\n            e.dataTransfer.setDragImage(img, 0, 0);\n            newDiv = document.createElement(\"div\");\n            newDiv.appendChild(newContent);\n            newDiv.classList.add('item');\n\n            const rect = e.target.getBoundingClientRect();\n            dx = e.clientX - e.target.getBoundingClientRect().left;\n            dy = e.clientY - e.target.getBoundingClientRect().top;\n            newDiv.style.left = `${rect.left}px`;\n            newDiv.style.top = `${rect.top}px`;\n            newDiv.style.position = 'absolute';\n            newDiv.style.pointerEvents = \"none\";\n\n            container.appendChild(newDiv);\n\n            moveableRef.setState({\n                target: newDiv,\n                hideDefaultLines: true,\n                resizable: false,\n                origin: false,\n            }, () => {\n                moveableRef.dragStart(e);\n            });\n        }\n\n        function dragover(e) {\n            e.preventDefault();\n        }\n\n        const container = document.querySelector('#container');\n\n        moveableRef = new Moveable(container, {\n            draggable: true,\n        });\n\n        moveableRef.on(\"render\", e => {\n            e.target.style.cssText += e.cssText;\n        });\n        moveableRef.on(\"drag\", e => {\n            e.inputEvent?.preventDefault();\n            const dropRect = document.querySelector('#container').getBoundingClientRect();\n\n            if (dropRect.top < e.clientY && dropRect.bottom > e.clientY && dropRect.left < e.clientX && dropRect.right > e.clientX  ){\n                entered = true;\n                moveableRef.setState({\n                    hideDefaultLines: false,\n                    resizable: true,\n                });\n            } else {\n                entered = false;\n                moveableRef.setState({\n                    hideDefaultLines: true,\n                    resizable: false,\n                });\n            }\n        });\n        moveableRef.on(\"dragEnd\", e => {\n            if (entered) {\n                const container = document.querySelector('#container');\n                container.appendChild(newDiv);\n                newDiv.classList.add('selectable');\n                entered = false;\n                newDiv.style.removeProperty(\"pointer-events\");\n            } else {\n                // remove newDiv\n                newDiv.remove();\n                newDiv = null;\n            }\n        });\n    </script>\n</body>\n\n</html>\n"
  },
  {
    "path": "packages/moveable/test/manual/fixed.html",
    "content": "<div class=\"container\">\n    <div class=\"target\"></div>\n</div>\n<style>\nhtml, body {\n    position: relative;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n}\n.container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 90%;\n    margin: 10px auto;\n    height: 400px;\n    border: 1px solid black;\n}\n.target {\n    width: 100px;\n    height: 100px;\n    text-align: center;\n    background: #ee8;\n    color: #333;\n    font-weight: bold;\n    border: 1px solid #333;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n</style>\n<script src=\"../../dist/moveable.js\"></script>\n<script>\nconst target = document.querySelector('.target');\nconst container = document.querySelector('.container');\nconst moveable = new Moveable(container, {\n    target,\n    resizable: true,\n    keepRatio: false,\n    renderDirections: ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'],\n    zoom: 1,\n    origin: true,\n    padding: { left: 0, top: 0, right: 0, bottom: 0 },\n    draggable: true,\n    snappable: true,\n    bounds: {\n        left: container.offsetLeft,\n        top: container.offsetTop,\n        bottom: container.offsetTop + container.offsetHeight,\n        right: container.offsetLeft + container.offsetWidth,\n    },\n});\n\ntarget.innerHTML = `Moveable`;\n\nmoveable.on('resizeStart', (event) => {\n    event.setFixedDirection([0, 0]);\n});\n\nmoveable.on('resize', (event) => {\n    target.style.width = `${event.width}px`;\n    target.style.height = `${event.height}px`;\n    target.style.transform = event.drag.transform;\n});\n\nmoveable.on('drag', (event) => {\n    target.style.transform = event.transform;\n});\n\n</script>\n"
  },
  {
    "path": "packages/moveable/test/manual/fixedgroup.html",
    "content": "<!-- <div class=\"a1 a\" style=\"top: 0;left: 100px;\"></div>\n<div class=\"a2 a\" style=\"top: 300px;left: 101px;\"></div> -->\n<div class=\"container container1\">\n    <div class=\"target\" style=\"width: 100px;height: 100px;top: 100px;left: 100px;position: fixed ;\"></div>\n    <div class=\"target\" style=\"width: 100px;height: 100px;top: 300px;left: 120px;position: fixed ;\"></div>\n</div>\n<div class=\"container container2\">\n</div>\n<style>\n    .container2 {\n        position: absolute;\n        top: 200px;\n        left: 200px;\n    }\n    .contaienr {\n        position: absolute;\n        top: 100px;\n        height: 100px;\n    }\n    .a {\n        width: 100px;height: 100px;position: absolute;\n        background: #f55;\n    }\n    .target {\n        background: #f22;\n    }\n</style>\n<script src=\"../../dist/moveable.js\"></script>\n<script>\nconst container = document.querySelector('.container2');\nconst moveable = new Moveable(container, {\n    target: \".target\",\n    draggable: true,\n    scalable: true,\n    keepRatio: false,\n    snappable: true,\n    snapRenderThreshold: 0.9,\n    elementGuidelines: [\".a1\", \".a2\"],\n});\n\nmoveable.on(\"render\", e => {\n    console.log(e.target.style.cssText + e.cssText);\n    e.target.style.cssText += e.cssText;\n});\n\n</script>\n"
  },
  {
    "path": "packages/moveable/test/manual/groupDragTarget.html",
    "content": "\n<!DOCTYPE html>\n<html lang=\"en\" >\n\n<head>\n  <meta charset=\"UTF-8\">\n\n\n    <link rel=\"apple-touch-icon\" type=\"image/png\" href=\"https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png\" />\n\n    <meta name=\"apple-mobile-web-app-title\" content=\"CodePen\">\n\n    <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico\" />\n\n    <link rel=\"mask-icon\" type=\"image/x-icon\" href=\"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg\" color=\"#111\" />\n\n\n\n\n  <title>CodePen - Moveable: Draggable with dragTarget</title>\n    <link rel=\"canonical\" href=\"https://codepen.io/jadiagaurang/pen/QWJyEaE\" />\n\n\n  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>\n<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'>\n<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css'>\n\n<style>\nbody {\n  margin: 0;\n  padding: 0;\n}\n.header {\n  width: 100%;\n  height: 100px;\n  display: flex;\n  align-items: center;\n  color: white;\n  background-color: black;\n  font-size: 2rem;\n}\n.header p {\n  width: 100%;\n  text-align: center;\n}\n\n.smart-designer {\n  cursor: crosshair;\n\n  position: relative;\n\n  height: 100%;\n  width: 100%;\n}\n.el-wrapper {\n  cursor: default;\n  display: inline-block;\n  width: fit-content;\n  position: absolute;\n}\n.el {\n  position: absolute;\n}\n.moveable-control {\n  border-radius: 0!important;\n  background: #fff!important;\n  border: 1px solid #44aaff!important;\n  width: 10px!important;\n  height: 10px!important;\n  margin-left: -5px!important;\n  margin-top: -5px!important;\n}\n.label {\n  position: fixed;\n  top: 0;\n  left: 0;\n  padding: 5px;\n  border-radius: 5px;\n  background: #333;\n  z-index: 10;\n  color: #fff;\n  font-weight: bold;\n  font-size: 12px;\n  display: none;\n  transform: translate(-100%, -100%);\n}\n.grid-guidelines {\n  width: 100%;\n  height: 100%;\n  background: url(\"https://d3ciwvs59ifrt8.cloudfront.net/b1911a0b-85bd-4bf8-85a7-1aaf7f656a06/21cc22cc-8755-4912-a1aa-43dd9e2410e5.svg\") repeat left top;\n  background-size: 50px;\n  opacity: 0;\n  transition: 0.3s linear;\n  position: absolute;\n}\n.smart-designer:hover .grid-guidelines {\n  opacity: 0.3;\n  transition: 0.3s linear;\n}\n</style>\n\n  <script>\n  window.console = window.console || function(t) {};\n</script>\n\n\n\n</head>\n\n<body translate=\"no\">\n  <div class=\"label\"></div>\n<div class=\"container\" style=\"background-color: black;\">\n  <div class=\"row g-0\">\n    <div class=\"col-6\" style=\"text-align: left;\">\n      <a class=\"btn btn-success add-image\">Add an Image</a>\n    </div>\n  </div>\n</div>\n<div class=\"container smart-designer-container\" style=\"background-color: lightgray;\">\n  <div class=\"row g-0\" style=\"height: 500px\">\n    <div class=\"col-12\" style=\"background-color: whitesmoke;\">\n\n      <div class=\"smart-designer\">\n        <div class=\"grid-guidelines\"></div>\n        <div class=\"el-wrapper animate__animated animate__tada\">\n          <div class=\"el el-text\" style=\"width: 1100px; height: 50px; transform: translate(100px, 50px); text-align: center;\">\n            <h1 contenteditable=\"true\">Lorem ipsum dolor sit amet.</h1>\n          </div>\n        </div>\n        <div class=\"el-wrapper\">\n          <img class=\"el el-image\" src=\"https://placehold.it/300x200?text=Loading\" data-src=\"https://unsplash.it/300/200\" alt=\"Placehold\" style=\"height: 200px; width: 300px; transform: translate(100px, 200px);\" />\n        </div>\n        <div class=\"el-wrapper\">\n          <img class=\"el el-image\" src=\"https://placehold.it/300x200?text=Loading\" data-src=\"https://unsplash.it/300/200\" alt=\"Placehold\" style=\"height: 200px; width: 300px; transform: translate(500px, 200px);\" />\n        </div>\n        <div class=\"el-wrapper\">\n          <img class=\"el el-image\" src=\"https://placehold.it/300x200?text=Loading\" data-src=\"https://unsplash.it/300/200\" alt=\"Placehold\" style=\"height: 200px; width: 300px; transform: translate(900px, 200px);\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js'></script>\n<script src='../../dist/moveable.js'></script>\n<script src='../../../../../selecto/packages/selecto/dist/selecto.js'></script>\n<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/selecto/1.22.6/selecto.min.js'></script> -->\n<script src='https://daybrush.com/moveable-helper/release/latest/dist/moveable-helper.js'></script>\n<script src='https://unpkg.com/tagged-jsx/dist/tagged-jsx.js'></script>\n      <script id=\"rendered-js\" >\nwindow.objMoveables = [];\n\nwindow.labelElement = $(\".label\");\n\nfunction setLabel(clientX, clientY, text) {\n  window.labelElement.css({\n    \"display\": \"block\",\n    \"transform\": `translate(${clientX}px, ${clientY - 10}px) translate(-100%, -100%)` });\n\n  window.labelElement.html(text);\n}\n\nfunction addImage(coordinate) {\n  let objImage = $(\"<img />\").attr({\n    \"class\": \"el el-image\",\n    \"src\": \"https://placehold.it/300x200?text=Loading...\" }).\n  css({\n    \"height\": \"200px\",\n    \"weight\": \"300px\" });\n\n\n  const designCanvas = $(\".smart-designer\");\n  designCanvas.append($(\"<div />\").attr(\"class\", \"el-wrapper animate__animated\").html(objImage));\n\n  $.getJSON(\"https://api.allorigins.win/get?url=\" + encodeURIComponent(\"https://unsplash.it/300/200\"), function (data) {\n    objImage.attr(\"src\", data.contents);\n  });\n  objImage.on(\"load\", function () {\n    if (!coordinate) {\n      const designCanvasWidth = designCanvas.width();\n      const designCanvasHeight = designCanvas.height();\n      coordinate = {\n        \"x\": designCanvasWidth / 2 - objImage.width() / 2,\n        \"y\": designCanvasHeight / 2 - objImage.height() / 2 };\n\n    }\n\n    objImage.css({\n      \"left\": coordinate.x,\n      \"top\": coordinate.y });\n\n  });\n\n  // Update Moveable Instance with update list of ELs!\n  window.objMoveable.elementGuidelines = $(\".el\").get();\n}\n\nconst DragHandleAble = {\n  name: \"draghandleable\",\n  props: {},\n  events: {},\n  render(moveable, Renderer) {\n    const rect = moveable.getRect();\n\n    return Renderer.createElement(\"button\", {\n      key: \"draghandleable\",\n      class: \"dragHandle\",\n      style: {\n        position: \"absolute\",\n        left: `${rect.width / 2 - 25}px`,\n        top: `${rect.height + 20}px`,\n        background: \"#4af\",\n        borderRadius: \"2px\",\n        padding: \"2px 4px\",\n        color: \"white\",\n        fontSize: \"13px\",\n        whiteSpace: \"nowrap\",\n        fontWeight: \"bold\",\n        willChange: \"transform\",\n        transform: \"translate(-45%, 0px)\" } },\n\n    `X`);\n  } };\n\n\nconst { html } = TaggedJSX;\nconst DeleteButtonAble = {\n  name: \"deletebuttonable\",\n  props: {},\n  events: {},\n  render(moveable, Renderer) {\n    const rect = moveable.getRect();\n    const { pos2 } = moveable.state;\n    const EditableViewer = moveable.useCSS(\"div\", `\n                {\n                    position: absolute;\n                    left: 0px;\n                    top: 0px;\n                    will-change: transform;\n                    transform-origin: 0px 0px;\n                }\n                .mpr-designer-button {\n                    width: 24px;\n                    height: 24px;\n                    margin-bottom: 4px;\n                    background: #4af;\n                    border-radius: 4px;\n                    appearance: none;\n                    border: 0;\n                    color: white;\n                    font-weight: bold;\n                }\n            `);\n    return html`\n            <${EditableViewer} className=\"mpr-designer-editable\" style=${{ transform: `translate(${pos2[0]}px, ${pos2[1]}px) rotate(${rect.rotation}deg) translate(10px)` }}>\n                <button className=\"mpr-designer-button\" onClick=${() => {\n      moveable.props.target.remove(); // Remove the HTML element\n      window.objMoveable.target = [];\n    }}>X</button>\n            </>\n            `(Renderer.createElement);\n    return result;\n  } };\n\n\n$(document).ready(function () {\n  // Just to Fill Random Color\n  $(\".randomColor\").each(function () {\n    let $el = $(this);\n    window.setTimeout(function () {\n      const randomColor = Math.floor(Math.random() * 16777215).toString(16);\n      $el.css(\"background-color\", \"#\" + randomColor);\n    }, 100);\n  });\n\n  // Just to randomize the images!\n  $(\"img\").each(function (index, elImage) {\n    let objImage = $(elImage);\n\n    window.setTimeout(function () {\n      $.getJSON(\"https://api.allorigins.win/get?url=\" + encodeURIComponent(objImage.data(\"src\")), function (data) {\n        objImage.attr(\"src\", data.contents);\n      });\n    }, 100);\n  });\n\n  $(\".add-image\").on(\"click\", function (event) {\n    addImage(null);\n  });\n\n  $(\".smart-designer\").on(\"contextmenu\", function (event) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (event.target !== event.currentTarget) {\n      return;\n    } else\n    {\n      var offset = this.getClientRects()[0];\n      let x = event.clientX - offset.left;\n      let y = event.clientY - offset.top;\n\n      //console.log(objMoveable.getControlBoxElement(), event.target);\n\n      if (!objMoveable.getControlBoxElement().contains(event.target)) {\n        //if (window.objMoveable.target.length === 0) {\n        addImage({ \"x\": x, \"y\": y });\n      }\n    }\n  });\n\n  $(\".smart-designer\").each(function () {\n    const designCanvas = $(this)[0];\n    const designCanvasWidth = $(this).width();\n    const designCanvasHeight = $(this).height();\n\n    window.objMoveable = new Moveable(designCanvas, {\n      target: [],\n\n      hideChildMoveableDefaultLines: true,\n      keepRatio: false,\n\n      draggable: true,\n      dragTarget: \".dragHandle\",\n      resizable: true,\n      scalable: true,\n      rotatable: true,\n\n      className: \"mpr-designer\",\n\n      // May Be for Text: Add padding around the target to increase the drag area.\n      padding: {\n        left: 0,\n        top: 0,\n        right: 0,\n        bottom: 0 },\n\n\n      // ../moveable/issues/896\n      // For <input type=\"text\"></input>\n      checkInput: true,\n      // For contenteditable=\"true\"\n      dragFocusedInput: true,\n\n      // Z-Index Manager\n      layer: 1, // Set initial layer value\n\n      // Custom Abilities\n      ables: [\n      DragHandleAble,\n      DeleteButtonAble],\n\n      props: {\n        draghandleable: true,\n        deletebuttonable: true },\n\n\n      // Snapping!\n      snappable: true,\n      // Limit movement within the container\n      snapContainer: designCanvas,\n      bounds: {\n        left: 0,\n        top: 0,\n        right: designCanvas.offsetWidth,\n        bottom: designCanvas.offsetHeight },\n\n      // Snap to a Grid\n      snapDistFormat: (v, type) => `${v}px`,\n      verticalGuidelines: [\n        //50,\n        //designCanvasWidth / 4,\n        //designCanvasWidth / 2,\n        //designCanvasWidth * 3 / 4,\n        //designCanvasWidth - 50\n      ],\n      horizontalGuidelines: [\n        //50,\n        //designCanvasHeight / 4,\n        //designCanvasHeight / 2,\n        //designCanvasHeight * 3 / 4,\n        //designCanvasHeight - 50\n      ],\n      snapDigit: 50,\n      snapThreshold: 50, // Distance value that can snap to guidelines\n      snapGridWidth: 50,\n      snapGridHeight: 50,\n      snapDirections: {\n        left: true,\n        top: true,\n        right: true,\n        bottom: true,\n        center: true,\n        middle: true },\n\n        // preventDefault: false,\n      isDisplaySnapDigit: true,\n      isDisplayInnerSnapDigit: true,\n      isDisplayGridGuidelines: true,\n      // Element Snap\n      snapElement: false,\n      snapGap: false, // When you drag, make the gap snap in the element guidelines. (default: true)\n      elementSnapDirections: false,\n      elementGuidelines: $(\".el\").get(), //Add List of Element Except itself to enable Guidelines!\n      // Rotation Snap\n      rotationPosition: \"bottom\",\n      snapRotataionThreshold: 1,\n      snapRotationDegress: [\n      0,\n      90,\n      180,\n      270] });\n\n\n\n    // The target(s) to drag Moveable target(s)\n    //window.objMoveable.dragTarget = $(this).find(\".dragHandle\")[0];\n\n    /* draggable */\n    objMoveable.on(\"dragStart\", function (_a) {\n      var target = _a.target,clientX = _a.clientX,clientY = _a.clientY;\n      //console.log(\"onDragStart\", target);\n    }).on(\"_drag_changed_other_drag_and_dragGroup\", function (_a) {\n      var target = _a.target,transform = _a.transform,left = _a.left,top = _a.top,right = _a.right,bottom = _a.bottom,beforeDelta = _a.beforeDelta,beforeDist = _a.beforeDist,delta = _a.delta,dist = _a.dist,clientX = _a.clientX,clientY = _a.clientY;\n      //console.log(\"onDrag left, top\", left, top);\n      target.style.left = \"\".concat(left, \"px\");\n      target.style.top = \"\".concat(top, \"px\");\n      // console.log(\"onDrag translate\", dist);\n      // target!.style.transform = transform;\n    }).on(\"dragEnd\", function (_a) {\n      var target = _a.target,isDrag = _a.isDrag,clientX = _a.clientX,clientY = _a.clientY;\n      //console.log(\"onDragEnd\", target, isDrag);\n    }).on('render', ev => {\n      //console.log(\"render\");\n      ev.target.style.cssText += ev.cssText;\n    }).on('renderGroup', e => {\n      //console.log(\"renderGroup\");\n      for (ev of e.events) {\n        ev.target.style.cssText += ev.cssText;\n      }\n    }).on(\"clickGroup\", e => {\n      window.objSelecto.clickTarget(e.inputEvent, e.inputTarget);\n    }).on(\"drag\", e => {\n      e.target.style.transform = e.transform;\n    }).on(\"dragGroup\", e => {\n      e.events.forEach(ev => {\n        ev.target.style.transform = ev.transform;\n      });\n    });\n\n    /* resizable */\n    objMoveable.on(\"resizeStart\", function (_a) {\n      var target = _a.target,clientX = _a.clientX,clientY = _a.clientY;\n      //console.log(\"onResizeStart\", target);\n    }).on(\"resize\", function (_a) {\n      var target = _a.target,width = _a.width,height = _a.height,dist = _a.dist,delta = _a.delta,clientX = _a.clientX,clientY = _a.clientY;\n      //console.log(\"onResize\", target);\n      delta[0] && (target.style.width = \"\".concat(width, \"px\"));\n      delta[1] && (target.style.height = \"\".concat(height, \"px\"));\n\n      let rect = objMoveable.getRect();\n      setLabel(clientX, clientY, `W: ${Math.round(rect.offsetWidth)} H: ${Math.round(rect.offsetHeight)}`);\n    }).on(\"resizeEnd\", function (_a) {\n      var target = _a.target,isDrag = _a.isDrag,clientX = _a.clientX,clientY = _a.clientY;\n      //console.log(\"onResizeEnd\", target, isDrag);\n      labelElement.hide();\n    });\n    /* scalable */\n    objMoveable.on(\"scaleStart\", function (_a) {\n      var target = _a.target,clientX = _a.clientX,clientY = _a.clientY;\n      //console.log(\"onScaleStart\", target);\n    }).on(\"scale\", function (_a) {\n      var target = _a.target,scale = _a.scale,dist = _a.dist,delta = _a.delta,transform = _a.transform,clientX = _a.clientX,clientY = _a.clientY;\n      //console.log(\"onScale scale\", scale);\n      target.style.transform = transform;\n    }).on(\"scaleEnd\", function (_a) {\n      var target = _a.target,isDrag = _a.isDrag,clientX = _a.clientX,clientY = _a.clientY;\n      //console.log(\"onScaleEnd\", target, isDrag);\n    });\n    /* rotatable */\n    objMoveable.on(\"rotateStart\", function (_a) {\n      var target = _a.target,clientX = _a.clientX,clientY = _a.clientY;\n      //console.log(\"onRotateStart\", target);\n    }).on(\"rotate\", function (_a) {\n      var target = _a.target,beforeDelta = _a.beforeDelta,delta = _a.delta,dist = _a.dist,transform = _a.transform,clientX = _a.clientX,clientY = _a.clientY;\n      //console.log(\"onRotate\", dist);\n      target.style.transform = transform;\n\n      let deg = objMoveable.getRect().rotation;\n      setLabel(clientX, clientY, `${Math.round(deg.toFixed(1))}&deg;`);\n    }).on(\"rotateEnd\", function (_a) {\n      var target = _a.target,isDrag = _a.isDrag,clientX = _a.clientX,clientY = _a.clientY;\n      //console.log(\"onRotateEnd\", target, isDrag);\n      labelElement.hide();\n    });\n\n    /* selecto */\n    let targets = [];\n    window.objSelecto = new Selecto({\n      container: designCanvas,\n      dragContainer: designCanvas,\n      selectableTargets: [\".el\"],\n      hitRate: 0,\n      selectByClick: true,\n      preventClickEventOnDrag: true,\n      selectFromInside: false,\n      toggleContinueSelect: [\"shift\"],\n      ratio: 0,\n    });\n\n    window.objSelecto.on(\"dragStart\", e => {\n      //console.log(\"dragStart\");\n      const target = e.inputEvent.target;\n      if (\n      window.objMoveable.isMoveableElement(target) ||\n      targets.some(t => t === target || t.contains(target)) ||\n      target.tagName === \"BUTTON\" ||\n      target.isContentEditable)\n      {\n        // console.log(\"스탑\");\n        e.stop();\n      }\n    }).on(\"select\", e => {\n      console.log(\"select\");\n      targets = e.selected;\n      window.objMoveable.target = e.selected;\n    }).on(\"selectEnd\", e => {\n      if (e.isDragStart ) {\n        // console.log(\"???\");\n        e.inputEvent.preventDefault();\n\n        setTimeout(() => {\n          window.objMoveable.dragStart(e.inputEvent);\n        });\n      }\n    });\n  });\n});\n//# sourceURL=pen.js\n    </script>\n\n\n</body>\n\n</html>\n"
  },
  {
    "path": "packages/moveable/test/manual/groupandsnappable.html",
    "content": "\n<!DOCTYPE html>\n<html lang=\"en\" >\n\n<head>\n  <meta charset=\"UTF-8\">\n\n\n    <link rel=\"apple-touch-icon\" type=\"image/png\" href=\"https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png\" />\n\n    <meta name=\"apple-mobile-web-app-title\" content=\"CodePen\">\n\n    <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico\" />\n\n    <link rel=\"mask-icon\" type=\"image/x-icon\" href=\"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg\" color=\"#111\" />\n\n\n\n\n  <title>CodePen - Editor</title>\n    <link rel=\"canonical\" href=\"https://codepen.io/davidalejandroaguilar/pen/gOQmwQB\" />\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no\">\n<meta charset=\"utf-8\">\n\n\n\n\n<style>\n#layout_ui {\n  position: relative;\n}\n\n.target {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n}\n\n.target-a {\n  background: red;\n}\n\n.target-b {\n  background: green;\n  left: 100px;\n}\n\n.grid {\n  width: 1000px;\n  height: 750px;\n  background: linear-gradient(90deg, gray 1px, transparent 1px),\n    linear-gradient(gray 1px, transparent 1px);\n  background-size: 50px 50px;\n\n  border-right-color: rgb(115 115 115);\n  border-bottom-color: rgb(115 115 115);\n  border-right-width: 1px;\n  border-bottom-width: 1px;\n  border-right-style: solid;\n  border-bottom-style: solid;\n}\n</style>\n\n  <script>\n  window.console = window.console || function(t) {};\n</script>\n\n\n\n</head>\n\n<body translate=\"no\">\n  <div id=\"layout_ui\" class=\"grid\" data-controller=\"layout\">\n  <div class=\"target target-a\" data-controller\"layout-item\">A</div>\n  <div class=\"target target-b\" data-controller\"layout-item\">B</div>\n</div>\n    <script src=\"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js\"></script>\n\n  <script src='https://daybrush.com/selecto/release/latest/dist/selecto.js'></script>\n<script src='../../dist/moveable.js'></script>\n<script src='https://unpkg.com/stimulus/dist/stimulus.umd.js'></script>\n      <script id=\"rendered-js\" >\n// Connects to data-controller=\"layout\"\nclass layout extends Stimulus.Controller {\n  setTargets(newTargets) {\n    this.myTargets = newTargets;\n    this.moveable.target = newTargets;\n  }\n\n  connect() {\n    this.myTargets = [];\n\n    this._startMoveable();\n    this._startSelecto();\n  }\n\n  _startMoveable() {\n    this.moveable = new Moveable(this.element, {\n      target: [],\n      bounds: { left: 0, top: 0, right: 0, bottom: 0, position: \"css\" },\n      isDisplayGridGuidelines: true,\n      snapGridWidth: 50,\n      snapGridHeight: 50,\n      snapThreshold: 50,\n      snappable: true,\n      draggable: true,\n      resizable: true,\n      rotatable: true,\n      snapRotationThreshold: 50,\n      snapRotationDegrees: [0, 90, 180, 270],\n      origin: false,\n      rotationPosition: \"bottom\",\n      edge: true });\n\n\n    /* draggable */\n    this.moveable.\n    on(\"drag\", ({ target, transform }) => {\n      this.element.classList.add(\"dragging\");\n      target.style.transform = transform;\n    }).\n    on(\"dragEnd\", event => {\n      this.element.classList.remove(\"dragging\");\n    }).\n    on(\"dragGroup\", e => {\n      e.events.forEach(ev => {\n        ev.target.style.transform = ev.transform;\n      });\n    });\n\n    /* resizable */\n    this.moveable.\n    on(\n    \"resize\",\n    ({ target, width, height, dist, delta, clientX, clientY, drag }) => {\n      delta[0] && (target.style.width = `${width}px`);\n      delta[1] && (target.style.height = `${height}px`);\n      target.style.transform = drag.transform;\n    }).\n    on(\"beforeResizeGroup\", e => {\n        const throttle = num => Math.round(num / 50) * 50;\n        const ratio = e.boundingWidth / e.boundingHeight;\n\n        if (ratio < 1) {\n            const nextBoundingWidth = throttle(e.boundingWidth);\n            const nextBoundingHeight = nextBoundingWidth / ratio;\n\n            e.setSize([nextBoundingWidth, nextBoundingHeight]);\n        } else {\n            const nextBoundingHeight = throttle(e.boundingHeight);\n            const nextBoundingWidth = nextBoundingHeight * ratio;\n\n            e.setSize([nextBoundingWidth, nextBoundingHeight]);\n        }\n\n    }).\n\n    on(\"resizeGroup\", e => {\n      e.events.forEach(\n      ({ target, width, height, dist, delta, clientX, clientY, drag }) => {\n        delta[0] && (target.style.width = `${width}px`);\n        delta[1] && (target.style.height = `${height}px`);\n        target.style.transform = drag.transform;\n      });\n\n    });\n\n    /* rotatable */\n    this.moveable.\n    on(\n    \"rotate\",\n    ({ target, beforeDelta, delta, dist, transform, clientX, clientY }) => {\n      target.style.transform = transform;\n    }).\n\n    on(\"rotateEnd\", ({ target, isDrag, clientX, clientY }) => {\n      this.dispatch(\"rotateEnd\", { target });\n    }).\n    on(\"rotateGroup\", e => {\n      e.events.forEach(ev => {\n        ev.target.style.transform = ev.transform;\n      });\n    });\n\n    /*  Selecto clickable */\n    this.moveable.on(\"clickGroup\", e => {\n      this.selecto.clickTarget(e.inputEvent, e.inputTarget);\n    });\n  }\n\n  _startSelecto() {\n    this.selecto = new Selecto({\n      container: this.element,\n      dragContainer: this.element,\n      selectableTargets: [\".target\"],\n      hitRate: 0,\n      selectByClick: true,\n      selectFromInside: false,\n      toggleContinueSelect: [\"shift\"],\n      ratio: 0 });\n\n\n    this.selecto.on(\"selectEnd\", e => {\n      if (e.isDragStart) {\n        e.inputEvent.preventDefault();\n        this.moveable.waitToChangeTarget().then(() => {\n          this.moveable.dragStart(e.inputEvent);\n        });\n      }\n      this.setTargets(e.selected);\n    });\n\n    this.selecto.on(\"dragStart\", e => {\n      const target = e.inputEvent.target;\n      if (\n      this.moveable.isMoveableElement(target) ||\n      this.myTargets.some(t => t === target || t.contains(target)))\n      {\n        e.stop();\n      }\n    });\n  }}\n\n\nconst application = Stimulus.Application.start();\napplication.register(\"layout\", layout);\n//# sourceURL=pen.js\n    </script>\n\n\n</body>\n\n</html>\n"
  },
  {
    "path": "packages/moveable/test/manual/iframe.html",
    "content": "<body>\n    <iframe id=\"iframe\" width=\"1000\" height=\"1000\"></iframe>\n</body>\n<script src=\"https://daybrush.com/selecto/release/latest/dist/selecto.js\"></script>\n<script src=\"../../dist/moveable.js\"></script>\n\n<script>\n    const iframeWindow = iframe.contentWindow;\n    const iframeDocument = iframeWindow.document;\n    const iframeBody = iframeDocument.body;\n    iframeBody.innerHTML = `\n    <style>\nhtml, body, #root {\n    position: relative;\n    margin: 0;\n    padding: 0;\n    height: 100%;\n    color: #333;\n    background: #fdfdfd;\n}\n\n.app {\n    position: relative;\n    min-height: 100%;\n    padding: 10px 20px;\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n}\n\n.container {\n    max-width: 800px;\n    ;\n}\n\nbody {\n    background: #fff;\n}\n\n.logo {\n    position: relative;\n    width: 150px;\n    height: 150px;\n    margin: 0px auto;\n    font-size: 0;\n    text-align: left;\n}\n\n.logo.logos {\n    width: 320px;\n    text-align: center;\n}\n\n.logos .selecto {\n    padding: 16px;\n}\n\n.logo img {\n    position: relative;\n    height: 100%;\n    box-sizing: border-box;\n}\n\n.cube {\n    display: inline-block;\n    border-radius: 5px;\n    width: 40px;\n    height: 40px;\n    margin: 4px;\n    background: #eee;\n    --color: #4af;\n}\n\nh1, .description {\n    text-align: center;\n}\n\n.button {\n    border: 1px solid #333;\n    color: #333;\n    background: transparent;\n    appearance: none;\n    -webkit-appearance: none;\n    box-sizing: border-box;\n    cursor: pointer;\n    width: 120px;\n    height: 42px;\n    font-size: 14px;\n    letter-spacing: 1px;\n    transition: all ease 0.2s;\n    margin: 0px 5px;\n}\n\n.button:hover {\n    background: #333;\n    color: white;\n}\n\n.elements {\n    margin-top: 40px;\n    border: 2px solid #eee;\n}\n\n.selecto-area {\n    padding: 20px;\n}\n\n#selecto1 .cube {\n    transition: all ease 0.2s;\n}\n\n.moveable #selecto1 .cube {\n    transition: none;\n}\n\n.selecto-area .selected {\n    color: #fff;\n    background: var(--color);\n}\n\n.scroll {\n    overflow: auto;\n    padding-top: 10px;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n\n.infinite-viewer, .scroll {\n    width: 100%;\n    height: 300px;\n    box-sizing: border-box;\n}\n\n.infinite-viewer .viewport {\n    padding-top: 10px;\n}\n\n.empty.elements {\n    border: none;\n}\n</style>\n<div class=\"moveable app\">\n    <div class=\"container\">\n        <div class=\"logo logos\" id=\"logo\">\n            <a href=\"https://github.com/daybrush/selecto\" target=\"_blank\"><img src=\"https://daybrush.com/selecto/images/256x256.png\" class=\"selecto\" /></a>\n            <a href=\"https://github.com/daybrush/moveable\" target=\"_blank\"><img src=\"https://daybrush.com/moveable/images/256x256.png\" /></a>\n        </div>\n        <h1>Change the Moveable targets by selecting it.</h1>\n        <p class=\"description\">You can drag and move targets and select them.</p>\n        <div class=\"elements selecto-area\"></div>\n    </div>\n</div>`;\n\n\n    const container = iframeBody.querySelector(\".container\");\n    const cubes = [];\n    let targets = [];\n\n    for (let i = 0; i < 30; ++i) {\n        cubes.push(i);\n    }\n    container.querySelector(\".selecto-area\").innerHTML\n        = cubes.map(i => `<div class=\"cube\"></div>`).join(\"\");\n    const selecto = new Selecto({\n        container,\n        dragContainer: iframeWindow,\n        selectableTargets: [\".selecto-area .cube\"],\n        hitRate: 0,\n        selectByClick: true,\n        selectFromInside: false,\n        toggleContinueSelect: [\"shift\"],\n        ratio: 0,\n    });\n\n    const moveable = new Moveable(container, {\n        draggable: true,\n    }).on(\"clickGroup\", e => {\n        selecto.clickTarget(e.inputEvent, e.inputTarget);\n    }).on(\"drag\", e => {\n        e.target.style.transform = e.transform;\n    }).on(\"dragGroup\", e => {\n        e.events.forEach(ev => {\n            ev.target.style.transform = ev.transform;\n        });\n    });\n\n    selecto.on(\"dragStart\", e => {\n        const target = e.inputEvent.target;\n        if (\n            moveable.isMoveableElement(target)\n            || targets.some(t => t === target || t.contains(target))\n        ) {\n            e.stop();\n        }\n    }).on(\"selectEnd\", e => {\n        targets = e.selected;\n        moveable.target = targets;\n\n        console.log(targets);\n        if (e.isDragStart) {\n            e.inputEvent.preventDefault();\n\n            setTimeout(() => {\n                moveable.dragStart(e.inputEvent);\n            });\n        }\n    });\n</script>\n"
  },
  {
    "path": "packages/moveable/test/manual/input.html",
    "content": "<body>\n    <input class=\"target target1\" />\n    <input class=\"target target2\" />\n    <div id=\"a\"></div>\n</body>\n<script src =\"../../dist/moveable.js\"></script>\n<script>\n    // new Moveable(document.body, {\n    //     draggable: true,\n    //     target: document.querySelector(\".target1\"),\n    // }).on(\"drag\", e => {\n    //     e.target.style.transform = e.transform;\n    // });\n    const target = document.querySelector(\"#a\");\n    const moveable = new Moveable(document.querySelector(\"#a\"), {\n        warpSelf: true,\n        draggable: true,\n        target: [document.querySelector(\".target2\")],\n    }).on(\"drag\", e => {\n        e.target.style.transform = e.transform;\n    });\n</script>\n\n"
  },
  {
    "path": "packages/moveable/test/manual/resizable.html",
    "content": "<body>\n    <div id=\"artwork\" class=\"target target1\"></div>\n    <div class=\"target2\"></div>\n    <button>aa</button>\n</body>\n<style>\n    .target1,\n    .target2 {\n        position: relative;\n        width: 200px;\n        height: 200px;\n        background: #f55;\n        border: 1px solid #333;\n    }\n</style>\n<script src=\"https://daybrush.com/moveable/release/latest/dist/moveable.js\"></script>\n\n<script>\n    let hasInteracted = false;\n    let isActive = true;\n\n    const editor = document.body;\n    let moveable;\n    moveable = new Moveable(editor, {\n        target: document.querySelector(\"#artwork\"),\n        className: \"moveable\",\n        // If the container is null, the position is fixed. (default: parentElement(document.body))\n        container: editor,\n        draggable: true,\n        resizable: true,\n        scalable: false,\n        rotatable: true,\n        roundable: true,\n        isDisplayShadowRoundControls: true,\n        maxRoundControls: [4, 0],\n        roundPadding: 20,\n        isDisplaySnapDigit: false,\n        elementGuidelines: [document.body],\n        snappable: true,\n        snapThreshold: 5,\n        snapGap: false,\n        snapDirections: {\n            top: true,\n            right: true,\n            bottom: true,\n            left: true,\n            center: true,\n            middle: true,\n        },\n        elementSnapDirections: {\n            top: true,\n            right: true,\n            bottom: true,\n            left: true,\n            center: true,\n            middle: true,\n        },\n        // Enabling pinchable lets you use events that\n        // can be used in draggable, resizable, scalable, and rotateable.\n        pinchable: false, // [\"resizable\", \"scalable\", \"rotatable\"]\n        origin: false,\n        keepRatio: true,\n        // Resize, Scale Events at edges.\n        // edge: true,\n        throttleDrag: 0,\n        throttleResize: 0,\n        throttleRotate: 0,\n        padding: { left: 0, top: 0, right: 0, bottom: 0 },\n    });\n\n    /* draggable */\n    moveable\n        .on(\"dragStart\", ({ target, clientX, clientY }) => {\n            console.log(\"onDragStart\");\n            hasInteracted = true;\n        })\n        .on(\"drag\", ({ target, left, top }) => {\n            if (isActive) {\n                console.log(\"onDrag left, top\", left, top);\n                target.style.left = `${left}px`;\n                target.style.top = `${top}px`;\n            }\n            // console.log(\"onDrag translate\", dist);\n            // target!.style.transform = transform;\n        })\n        .on(\"dragEnd\", ({ target, isDrag, clientX, clientY }) => {\n            console.log(\"onDragEnd\");\n        });\n\n    /* resizable */\n    let frame = {\n        translate: [0, 0],\n    };\n    moveable\n        .on(\"resizeStart\", (e) => {\n            e.setMin([100, 100]);\n            e.setOrigin([\"%\", \"%\"]);\n            e.dragStart && e.dragStart.set(frame.translate);\n            hasInteracted = true;\n        })\n        .on(\"resize\", (e) => {\n            if (isActive) {\n                const beforeTranslate = e.drag.beforeTranslate;\n\n                frame.translate = beforeTranslate;\n                e.target.style.width = `${e.width}px`;\n                e.target.style.height = `${e.height}px`;\n                e.target.style.transform = `translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px)`;\n            }\n        });\n\n    /* rotatable */\n    moveable\n        .on(\"rotateStart\", ({ target, clientX, clientY }) => {\n            console.log(\"onRotateStart\");\n            hasInteracted = true;\n        })\n        .on(\"rotate\", ({ target, beforeDelta, delta, dist, transform, clientX, clientY, beforeRotate }) => {\n            if (isActive) {\n                console.log(\"onRotate\", dist);\n                target.style.transform = transform;\n            }\n        })\n        .on(\"rotateEnd\", ({ target, isDrag, clientX, clientY }) => {\n            console.log(\"onRotateEnd\");\n        });\n\n    // Turn the editor on and off\n    const moveableEditor = document.querySelector(\".moveable\");\n    editor.addEventListener(\"click\", (e) => {\n        console.log(e);\n        if (hasInteracted) {\n            if (e.target == moveable.target || moveable.target.contains(e.target)) {\n                moveableEditor.style.display = \"block\";\n                moveable.draggable = true;\n                isActive = true;\n            } else {\n                moveableEditor.style.display = \"none\";\n                moveable.draggable = false;\n                // isActive = false;\n            }\n        }\n    });\n</script>\n"
  },
  {
    "path": "packages/moveable/test/manual/selecto.html",
    "content": "<style>\n    html,\n    body {\n        margin: 0;\n        padding: 0;\n        height: 100%;\n    }\n\n    #container-left {\n        width: 150px;\n        height: 330px;\n        float: left;\n        background-color: #fff;\n    }\n\n    #container {\n        width: 800px;\n        height: 550px;\n        float: left;\n        margin: auto;\n        box-shadow: 0px 0px 9px #e0e0e0;\n        background-image: radial-gradient(#e8e8e8 1px, #ffffff 0);\n        background-size: 10px 10px;\n        background-position: -5px -5px;\n    }\n\n    svg {\n        overflow: visible;\n    }\n\n    svg:hover {\n        cursor: grab;\n    }\n\n    /* Demo stuff */\n\n    h3 {\n        text-align: center;\n        font-family: Helvetica;\n        line-height: 1.7rem;\n        /* Prevent users from selecting demo text */\n        user-select: none;\n    }\n\n    .explain {\n        width: 50%;\n        float: right;\n    }\n\n    /* Hide the explainer text on small screens */\n    @media (max-width: 100rem) {\n        .explain {\n            display: none;\n        }\n    }\n\n    .item {\n        /* border: solid;*/\n        width: 50px;\n        height: 50px;\n        text-align: center;\n        vertical-align: middle;\n        line-height: 50px;\n        background-color: orange;\n        cursor: pointer;\n    }\n</style>\n\n<script>\n    window.console = window.console || function (t) { };\n</script>\n\n\n\n</head>\n\n<body translate=\"no\">\n    <!-- <b>Works currently only in Chrome and Edge (not in FF)</b> -->\n    <!--Original idea by James Pistell (https://codepen.io/pistell/pen/XWWdZrv)-->\n    <div style=\"width:100%; height:100%; padding-top: 20px; float: left;\">\n\n        <div class=\"container\" id=\"container\" ondragover=\"dragover(event)\">\n            <div class=\"item selectable\">\n                ITEM\n            </div>\n\n            <div class=\"item selectable\">\n                ITEM2\n            </div>\n\n        </div>\n    </div>\n\n    <script src='../../dist/moveable.js'></script>\n    <script src='https://daybrush.com/selecto/release/latest/dist/selecto.min.js'></script>\n    <script id=\"rendered-js\">\n        let moveableRef = null;\n        let selectoRef = null;\n        let targets = [];\n        let newDiv;\n        let entered = false;\n\n        const container = document.querySelector(\"#container\");\n\n        moveableRef = new Moveable(container, {\n            draggable: true,\n            target: targets,\n            resizable: true,\n            snappable: true,\n            snapGridWidth: 10,\n            snapGridHeight: 10,\n            snapThreshold: 10,\n            throttleDrag: 1,\n            throttleScale: 0\n        });\n\n\n        selectoRef = new Selecto({\n            container: document.querySelector(\"#container\"),\n            dragContainer: document.querySelector(\"#container\"),\n            selectableTargets: [\".selectable\"],\n            hitRate: 0,\n            selectByClick: true,\n            selectFromInside: false,\n            toggleContinueSelect: [\"shift\"],\n            ratio: 0\n        });\n\n\n        function setTargets(nextTargets) {\n            targets = nextTargets;\n            moveableRef.target = targets;\n        }\n\n        moveableRef.on(\"render\", e => {\n            e.target.style.cssText += e.cssText;\n        });\n\n        //moveableRef.on(\"drag\", (e) => {\n        //  e.target.style.transform = e.transform;\n        //});\n\n        selectoRef.on(\"selectEnd\", e => {\n            const moveable = moveableRef;\n            if (e.isDragStart) {\n                e.inputEvent.preventDefault();\n                moveable.waitToChangeTarget().then(() => {\n                    console.log(\"W C T\");\n                    moveable.dragStart(e.inputEvent);\n                });\n            }\n            setTargets(e.selected);\n        });\n    //# sourceURL=pen.js\n    </script>\n"
  },
  {
    "path": "packages/moveable/test/manual/snappable.html",
    "content": "<div class=\"a1 a\" style=\"top: 0;left: 100px;\"></div>\n<div class=\"a2 a\" style=\"top: 300px;left: 101px;\"></div>\n<div class=\"target\" style=\"width: 100px;height: 100px;position: absolute ;\"></div>\n<style>\n    .a {\n        width: 100px;height: 100px;position: absolute;\n        background: #f55;\n    }\n</style>\n<script src=\"../../dist/moveable.js\"></script>\n<script>\nconst container = document.querySelector('.container');\nconst moveable = new Moveable(document.body, {\n    target: \".target\",\n    draggable: true,\n    scalable: true,\n    keepRatio: false,\n    snappable: true,\n    snapRenderThreshold: 0.9,\n    elementGuidelines: [\".a1\", \".a2\"],\n});\n\nmoveable.on(\"render\", e => {\n    console.log(e.target.style.cssText + e.cssText);\n    e.target.style.cssText += e.cssText;\n});\n\n</script>\n"
  },
  {
    "path": "packages/moveable/test/manual/text.html",
    "content": "<text class=\"target\">aa</text>\n<style>\n</style>\n<script src=\"../../dist/moveable.js\"></script>\n<script>\nconst container = document.querySelector('.container');\nconst moveable = new Moveable(document.body, {\n    target: \".target\",\n    scalable: true,\n    keepRatio: false,\n    renderDirections: ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'],\n    zoom: 1,\n    origin: true,\n    draggable: true,\n});\n\nmoveable.on(\"render\", e => {\n    e.target.style.cssText += e.csstext;\n});\n\n</script>\n"
  },
  {
    "path": "packages/moveable/test/manual/updateSelecgtors.html",
    "content": "<body>\n    <div class=\"target target1\"></div>\n    <div class=\"target2\"></div>\n    <button>aa</button>\n</body>\n<style>\n    .target1, .target2 {\n        position: relative;\n        width: 200px;\n        height: 200px;\n        background: #f55;\n        border: 1px solid #333;\n    }\n</style>\n<script src =\"../../dist/moveable.js\"></script>\n<script>\n    const moveable = new Moveable(document.body, {\n        draggable: true,\n        target: \".target\",\n    }).on(\"drag\", e => {\n        e.target.style.transform = e.transform;\n    });\n\n    document.querySelector(\"button\").addEventListener(\"click\", e => {\n        document.querySelector(\".target2\").classList.add(\"target\");\n        moveable.updateSelectors();\n    })\n</script>\n\n"
  },
  {
    "path": "packages/moveable/test/manual/updateSelecgtors2.html",
    "content": "<body>\n    <div class=\"target1 box\"></div>\n    <div class=\"target2 box\"></div>\n    <button id=\"btn1\">selectFirst</button>\n    <button id=\"btn2\">selectSecond</button>\n    <button id=\"btn3\">clearSelect</button>\n</body>\n<style>\n    body {\n        background-color: black;\n    }\n\n    .target1,\n    .target2 {\n        position: relative;\n        width: 200px;\n        height: 200px;\n        background: #f55;\n        border: 1px solid #333;\n    }\n\n    .target2 {\n        left: 500px;\n        top: 200px;\n    }\n\n    .target1 {\n        left: 300px;\n        top: 100px;\n    }\n</style>\n<script src=\"../../dist/moveable.js\"></script>\n<script>\n    const moveable = new Moveable(document.body, {\n        draggable: true,\n        target: \".target\",\n        resizable: true\n    }).on(\"drag\", (e) => {\n        e.target.style.transform = e.transform;\n    });\n\n    document.querySelector(\"#btn1\").addEventListener(\"click\", (e) => {\n        document.querySelector(\".target1\").classList.add(\"target\");\n        moveable.updateSelectors();\n    });\n    document.querySelector(\"#btn2\").addEventListener(\"click\", (e) => {\n        document.querySelector(\".target1\").classList.remove(\"target\");\n        moveable.updateSelectors();\n        document.querySelector(\".target1\").classList.add(\"target\");\n        document.querySelector(\".target2\").classList.add(\"target\");\n        moveable.updateSelectors();\n    });\n    document.querySelector(\"#btn3\").addEventListener(\"click\", (e) => {\n        document.querySelectorAll(\".target\").forEach((item) => {\n            item.classList.remove(\"target\");\n        });\n        moveable.updateSelectors();\n    });\n</script>\n"
  },
  {
    "path": "packages/moveable/tsconfig.declaration.json",
    "content": "{\n    \"extends\": \"./tsconfig\",\n    \"compilerOptions\": {\n        \"allowJs\": false,\n        \"noEmit\": false,\n        \"isolatedModules\": false,\n        \"removeComments\": false,\n        \"declaration\": true,\n        \"emitDeclarationOnly\": true,\n        \"declarationDir\": \"declaration\"\n    },\n    \"include\": [\n        \"./src/**/*\"\n    ],\n}\n"
  },
  {
    "path": "packages/moveable/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"outDir\": \"./outjs/\",\n    \"esModuleInterop\": false,\n    \"sourceMap\": true,\n    \"module\": \"es2015\",\n    \"target\": \"es5\",\n    \"experimentalDecorators\": true,\n    \"skipLibCheck\": true,\n    \"moduleResolution\": \"node\",\n    \"jsx\": \"react\",\n    \"allowJs\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"strictNullChecks\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true,\n    \"baseUrl\": \".\",\n    \"importHelpers\": true,\n    \"lib\": [\n      \"es2015\",\n      \"dom\"\n    ],\n  },\n  \"include\": [\n    \"./src/**/*.ts\",\n    \"./src/**/*.tsx\"\n  ]\n}\n"
  },
  {
    "path": "packages/ngx-moveable/.browserslistrc",
    "content": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For additional information regarding the format and rule options, please see:\n# https://github.com/browserslist/browserslist#queries\n\n# For the full list of supported browsers by the Angular framework, please see:\n# https://angular.io/guide/browser-support\n\n# You can see what browsers were selected by your queries by running:\n#   npx browserslist\n\nlast 1 Chrome version\nlast 1 Firefox version\nlast 2 Edge major versions\nlast 2 Safari major versions\nlast 2 iOS major versions\nFirefox ESR\nnot IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.\nnot IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.\n"
  },
  {
    "path": "packages/ngx-moveable/.editorconfig",
    "content": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": "packages/ngx-moveable/.gitignore",
    "content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/dist\n/tmp\n/out-tsc\n# Only exists if Bazel was run\n/bazel-out\n\n# dependencies\n/node_modules\n\n# profiling files\nchrome-profiler-events.json\nspeed-measure-plugin.json\n\n# IDEs and editors\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# IDE - VSCode\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n.history/*\n\n# misc\n/.sass-cache\n/connect.lock\n/coverage\n/libpeerconnection.log\nnpm-debug.log\nyarn-error.log\ntestem.log\n/typings\n\n# System Files\n.DS_Store\nThumbs.db\n\n.angular\n"
  },
  {
    "path": "packages/ngx-moveable/.npmignore",
    "content": "node_modules/\n*.DS_Store\n.DS_Store\ndoc/\ntemplate/\nexample/\nkarma.conf.js\ntest/\nmocha.opts\nGruntfile.js\nwebpack.*.js\n.travis.yml\npackages\nrelease/\ndemo/\ncoverage/\ndist/report.html\nrollup-plugin-visualizer/\noutjs/\n.scene_cache\n*.mp3\n*.mp4"
  },
  {
    "path": "packages/ngx-moveable/.prettierrc",
    "content": "{\n  \"singleQuote\": true\n}\n"
  },
  {
    "path": "packages/ngx-moveable/README.md",
    "content": "# ngx-moveable\n\nSee [readme](./projects/ngx-moveable/README.md) for more info.\n"
  },
  {
    "path": "packages/ngx-moveable/angular.json",
    "content": "{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"ngx-moveable-app\": {\n      \"projectType\": \"application\",\n      \"schematics\": {},\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:browser\",\n          \"options\": {\n            \"outputPath\": \"dist/ngx-moveable-app\",\n            \"index\": \"src/index.html\",\n            \"main\": \"src/main.ts\",\n            \"polyfills\": \"src/polyfills.ts\",\n            \"tsConfig\": \"tsconfig.app.json\",\n            \"assets\": [\"src/favicon.ico\", \"src/assets\"],\n            \"styles\": [\"src/styles.css\"],\n            \"scripts\": [],\n            \"vendorChunk\": true,\n            \"extractLicenses\": false,\n            \"buildOptimizer\": false,\n            \"sourceMap\": true,\n            \"optimization\": false,\n            \"namedChunks\": true\n          },\n          \"configurations\": {\n            \"development\": {\n              \"buildOptimizer\": false,\n              \"optimization\": false,\n              \"vendorChunk\": true,\n              \"extractLicenses\": false,\n              \"sourceMap\": true,\n              \"namedChunks\": true\n            },\n            \"production\": {\n              \"fileReplacements\": [\n                {\n                  \"replace\": \"src/environments/environment.ts\",\n                  \"with\": \"src/environments/environment.prod.ts\"\n                }\n              ],\n              \"optimization\": true,\n              \"outputHashing\": \"all\",\n              \"sourceMap\": false,\n              \"extractCss\": true,\n              \"namedChunks\": false,\n              \"aot\": true,\n              \"extractLicenses\": true,\n              \"vendorChunk\": false,\n              \"buildOptimizer\": true,\n              \"budgets\": [\n                {\n                  \"type\": \"initial\",\n                  \"maximumWarning\": \"2mb\",\n                  \"maximumError\": \"5mb\"\n                }\n              ]\n            }\n          }\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"browserTarget\": \"ngx-moveable-app:build:development\"\n            },\n            \"production\": {\n              \"browserTarget\": \"ngx-moveable-app:build:production\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"extract-i18n\": {\n          \"builder\": \"@angular-devkit/build-angular:extract-i18n\",\n          \"options\": {\n            \"browserTarget\": \"ngx-moveable-app:build\"\n          }\n        },\n        \"test\": {\n          \"builder\": \"@angular-devkit/build-angular:karma\",\n          \"options\": {\n            \"main\": \"src/test.ts\",\n            \"polyfills\": \"src/polyfills.ts\",\n            \"tsConfig\": \"tsconfig.spec.json\",\n            \"karmaConfig\": \"karma.conf.js\",\n            \"assets\": [\"src/favicon.ico\", \"src/assets\"],\n            \"styles\": [\"src/styles.css\"],\n            \"scripts\": []\n          }\n        },\n        \"lint\": {\n          \"builder\": \"@angular-devkit/build-angular:tslint\",\n          \"options\": {\n            \"tsConfig\": [\"tsconfig.app.json\", \"tsconfig.spec.json\"],\n            \"exclude\": [\"**/node_modules/**\"]\n          }\n        },\n        \"e2e\": {\n          \"builder\": \"@angular-devkit/build-angular:protractor\",\n          \"options\": {\n            \"protractorConfig\": \"e2e/protractor.conf.js\",\n            \"devServerTarget\": \"ngx-moveable-app:serve\"\n          },\n          \"configurations\": {\n            \"production\": {\n              \"devServerTarget\": \"ngx-moveable-app:serve:production\"\n            }\n          }\n        }\n      }\n    },\n    \"ngx-moveable\": {\n      \"projectType\": \"library\",\n      \"root\": \"projects/ngx-moveable\",\n      \"sourceRoot\": \"projects/ngx-moveable/src\",\n      \"prefix\": \"lib\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:ng-packagr\",\n          \"options\": {\n            \"tsConfig\": \"projects/ngx-moveable/tsconfig.lib.json\",\n            \"project\": \"projects/ngx-moveable/ng-package.json\"\n          },\n          \"configurations\": {\n            \"production\": {\n              \"tsConfig\": \"projects/ngx-moveable/tsconfig.lib.prod.json\"\n            }\n          }\n        },\n        \"test\": {\n          \"builder\": \"@angular-devkit/build-angular:karma\",\n          \"options\": {\n            \"main\": \"projects/ngx-moveable/src/test.ts\",\n            \"tsConfig\": \"projects/ngx-moveable/tsconfig.spec.json\",\n            \"karmaConfig\": \"projects/ngx-moveable/karma.conf.js\"\n          }\n        },\n        \"lint\": {\n          \"builder\": \"@angular-devkit/build-angular:tslint\",\n          \"options\": {\n            \"tsConfig\": [\n              \"projects/ngx-moveable/tsconfig.lib.json\",\n              \"projects/ngx-moveable/tsconfig.spec.json\"\n            ],\n            \"exclude\": [\"**/node_modules/**\"]\n          }\n        }\n      }\n    }\n  },\n  \"defaultProject\": \"ngx-moveable-app\"\n}\n"
  },
  {
    "path": "packages/ngx-moveable/karma.conf.js",
    "content": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-file.html\n\nmodule.exports = function (config) {\n  config.set({\n    basePath: '',\n    frameworks: ['jasmine', '@angular-devkit/build-angular'],\n    plugins: [\n      require('karma-jasmine'),\n      require('karma-chrome-launcher'),\n      require('karma-jasmine-html-reporter'),\n      require('karma-coverage-istanbul-reporter'),\n      require('@angular-devkit/build-angular/plugins/karma')\n    ],\n    client: {\n      clearContext: false // leave Jasmine Spec Runner output visible in browser\n    },\n    coverageIstanbulReporter: {\n      dir: require('path').join(__dirname, './coverage/ngx-moveable-app'),\n      reports: ['html', 'lcovonly', 'text-summary'],\n      fixWebpackSourcePaths: true\n    },\n    reporters: ['progress', 'kjhtml'],\n    port: 9876,\n    colors: true,\n    logLevel: config.LOG_INFO,\n    autoWatch: true,\n    browsers: ['Chrome'],\n    singleRun: false,\n    restartOnFileChange: true\n  });\n};\n"
  },
  {
    "path": "packages/ngx-moveable/package.json",
    "content": "{\n  \"name\": \"ngx-moveable-app\",\n  \"version\": \"0.0.0\",\n  \"scripts\": {\n    \"postinstall\": \"ngcc --tsconfig ./tsconfig.base.json\",\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"start:aot\": \"ng serve\",\n    \"start:prod\": \"ng serve\",\n    \"build\": \"ng build ngx-moveable --configuration production\",\n    \"build:app\": \"ng build\",\n    \"test\": \"ng test\",\n    \"lint\": \"ng lint\",\n    \"e2e\": \"ng e2e\"\n  },\n  \"private\": true,\n  \"lernaHelperPublishPath\": \"./dist/ngx-moveable\",\n  \"dependencies\": {\n    \"moveable\": \"~0.53.0\",\n    \"rxjs\": \"~7.4.0\",\n    \"zone.js\": \"~0.11.4\"\n  },\n  \"devDependencies\": {\n    \"@angular-devkit/build-angular\": \"~15.0.4\",\n    \"@angular/animations\": \"~15.0.4\",\n    \"@angular/cdk\": \"^15.0.4\",\n    \"@angular/cli\": \"~15.0.4\",\n    \"@angular/common\": \"~15.0.4\",\n    \"@angular/compiler\": \"~15.0.4\",\n    \"@angular/compiler-cli\": \"~15.0.4\",\n    \"@angular/core\": \"~15.0.4\",\n    \"@angular/forms\": \"~15.0.4\",\n    \"@angular/material\": \"^15.0.4\",\n    \"@angular/platform-browser\": \"~15.0.4\",\n    \"@angular/platform-browser-dynamic\": \"~15.0.4\",\n    \"@angular/router\": \"~15.0.4\",\n    \"@types/jasmine\": \"~3.5.12\",\n    \"@types/node\": \"~14.0.27\",\n    \"codelyzer\": \"^6.0.0\",\n    \"framework-utils\": \"^1.1.0\",\n    \"jasmine-core\": \"~3.6.0\",\n    \"jasmine-spec-reporter\": \"~5.0.2\",\n    \"karma\": \"~5.1.1\",\n    \"karma-chrome-launcher\": \"~3.1.0\",\n    \"karma-coverage-istanbul-reporter\": \"~3.0.3\",\n    \"karma-jasmine\": \"~3.3.1\",\n    \"karma-jasmine-html-reporter\": \"^1.5.4\",\n    \"ng-packagr\": \"~15.0.3\",\n    \"protractor\": \"~7.0.0\",\n    \"ts-node\": \"~8.10.2\",\n    \"tslib\": \"^2.3.1\",\n    \"typescript\": \"^4.8 <4.9\"\n  }\n}\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [0.50.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.49.0...ngx-moveable@0.50.0) (2023-12-03)\n\n\n### :rocket: New Features\n\n* expose gesto preventRightClick and preventWheelClick props (#1040) ([9f4c9f4](https://github.com/daybrush/moveable/commit/9f4c9f452470026ecea3f7a0b1aff91c22444868))\n\n\n### :mega: Other\n\n* publish packages ([f9a0eed](https://github.com/daybrush/moveable/commit/f9a0eed9db93c1fa3522138e9c7604287f0ce21f))\n\n\n\n## [0.49.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.48.2...ngx-moveable@0.49.0) (2023-10-28)\n\n\n### :mega: Other\n\n* publish packages ([1a65454](https://github.com/daybrush/moveable/commit/1a654540f1390648d7e4db910d0673acff190007))\n\n\n\n## [0.48.2](https://github.com/daybrush/moveable/compare/ngx-moveable@0.48.1...ngx-moveable@0.48.2) (2023-09-19)\n\n\n### :mega: Other\n\n* publish packages ([ecf15ab](https://github.com/daybrush/moveable/commit/ecf15ab399bb4d9f6752cb84b0d6b06d15e5c426))\n\n\n\n## [0.48.1](https://github.com/daybrush/moveable/compare/ngx-moveable@0.48.0...ngx-moveable@0.48.1) (2023-07-11)\n\n\n### :mega: Other\n\n* publish packages ([27bda8e](https://github.com/daybrush/moveable/commit/27bda8ea3d9751847fc073519a832b3464242d3c))\n\n\n\n## [0.48.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.47.2...ngx-moveable@0.48.0) (2023-07-09)\n\n\n### :mega: Other\n\n* publish packages ([25cae7f](https://github.com/daybrush/moveable/commit/25cae7f46aa28dcb948a8690fd6062b7e15d72ff))\n\n\n\n## [0.47.2](https://github.com/daybrush/moveable/compare/ngx-moveable@0.47.1...ngx-moveable@0.47.2) (2023-07-04)\n\n\n### :mega: Other\n\n* publish packages ([9467cf4](https://github.com/daybrush/moveable/commit/9467cf45fd2871573df8886eb134c67a8b0f916d))\n\n\n\n## [0.47.1](https://github.com/daybrush/moveable/compare/ngx-moveable@0.46.1...ngx-moveable@0.47.1) (2023-07-02)\n\n\n### :mega: Other\n\n* publish packages ([5697e80](https://github.com/daybrush/moveable/commit/5697e8050f486a83ea409b856d1f670759ba6910))\n* publish packages ([5e76998](https://github.com/daybrush/moveable/commit/5e76998ba0a90efcbb0c2e4fe8030ca47a1842d4))\n\n\n\n## [0.46.1](https://github.com/daybrush/moveable/compare/ngx-moveable@0.46.0...ngx-moveable@0.46.1) (2023-06-28)\n\n\n### :house: Code Refactoring\n\n* update angular 15 version, use standalone ([226ea64](https://github.com/daybrush/moveable/commit/226ea643cb5c12315fc96e334a4bfa920f78d8aa))\n\n\n### :mega: Other\n\n* fix update modules ([bb608dc](https://github.com/daybrush/moveable/commit/bb608dc0d1d9eb13e538d1026c05809d89757b1d))\n* publish packages ([510d7cd](https://github.com/daybrush/moveable/commit/510d7cdf76eef4a17cc75d95634ebcb6d9688f8e))\n\n\n\n## [0.46.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.45.0...ngx-moveable@0.46.0) (2023-06-25)\n\n\n### :bug: Bug Fix\n\n* fix props and event types missing #941 ([bd91b08](https://github.com/daybrush/moveable/commit/bd91b08ba04a50644e3d1ed91729563260b5a01b))\n* fix typo (degress => degrees) #928 ([835be5b](https://github.com/daybrush/moveable/commit/835be5be701c8b3740ff9dfc16101a9b9ed60cbb))\n* **ngx-moveable:** reduce change detection cycles (#939) ([b8ff60c](https://github.com/daybrush/moveable/commit/b8ff60cfda90aac4a5420c3620f798a8a184cdb9))\n\n\n### :mega: Other\n\n* publish packages ([f893cca](https://github.com/daybrush/moveable/commit/f893ccaa176d31ef9ddb241d2cd4a1fb098cdae0))\n\n\n\n## [0.45.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.44.9...ngx-moveable@0.45.0) (2023-06-04)\n\n\n### :rocket: New Features\n\n* add useDefaultGroupRotate prop #929 ([5846e50](https://github.com/daybrush/moveable/commit/5846e50c18dc2e1aa628e41a8d235ee4851325db))\n\n\n### :bug: Bug Fix\n\n* support angular 16 ([d41af9c](https://github.com/daybrush/moveable/commit/d41af9c141785c272eb4148270feb8dc11e5d46c))\n* support iframe context #932 ([3e87cc7](https://github.com/daybrush/moveable/commit/3e87cc7fed43160ca342630fed2f413876f8a518))\n\n\n### :mega: Other\n\n* update packages ([8d65572](https://github.com/daybrush/moveable/commit/8d65572384ae0fdff288fe78fbeb5d249b070eb7))\n* update packages ([9e137aa](https://github.com/daybrush/moveable/commit/9e137aa7455fdf85766ca1ff77dd3d8ea2a4c1c9))\n\n\n\n## [0.44.9](https://github.com/daybrush/moveable/compare/ngx-moveable@0.44.8...ngx-moveable@0.44.9) (2023-05-16)\n\n\n### :mega: Other\n\n* publish packages ([5bd22bb](https://github.com/daybrush/moveable/commit/5bd22bb009e10a4f8032f35c2ae3b490f4d94e5b))\n\n\n\n## [0.44.8](https://github.com/daybrush/moveable/compare/ngx-moveable@0.44.7...ngx-moveable@0.44.8) (2023-05-15)\n\n\n### :mega: Other\n\n* publish packages ([91aa8bc](https://github.com/daybrush/moveable/commit/91aa8bc1bdefc65cde8c032f1c7ba13ca54ad2fa))\n\n\n\n## [0.44.7](https://github.com/daybrush/moveable/compare/ngx-moveable@0.44.6...ngx-moveable@0.44.7) (2023-05-09)\n\n\n### :mega: Other\n\n* publish packages ([40dd902](https://github.com/daybrush/moveable/commit/40dd9022c41244ab009d621861ddc2ac63768748))\n\n\n\n## [0.44.6](https://github.com/daybrush/moveable/compare/ngx-moveable@0.44.0...ngx-moveable@0.44.6) (2023-05-08)\n\n\n### :rocket: New Features\n\n* update croact version #902 ([e328e21](https://github.com/daybrush/moveable/commit/e328e2170438fe27f60f307ae976183fbfb5e96e))\n\n\n### :bug: Bug Fix\n\n* fix files filed #910 #909 #907 ([a4995ab](https://github.com/daybrush/moveable/commit/a4995ab1acb3a34974e1d5a20d17fb2ee17ddc0c))\n\n\n### :mega: Other\n\n* publish packages ([d0f0532](https://github.com/daybrush/moveable/commit/d0f0532bfb42fe98ee95748839a639fddbe4b9d6))\n* publish packages ([e1e86a9](https://github.com/daybrush/moveable/commit/e1e86a95ebff9d18ad7a5ebede3bd5bd66465b5d))\n* publish packages ([60a747e](https://github.com/daybrush/moveable/commit/60a747ee3c373f83fb759a8482e2365e77dcb5e8))\n\n\n\n## [0.44.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.43.1...ngx-moveable@0.44.0) (2023-05-01)\n\n\n### :mega: Other\n\n* publish packages ([24934e3](https://github.com/daybrush/moveable/commit/24934e317de2e5ff622bd9ab0dec8d75a7c05c48))\n\n\n\n## [0.43.1](https://github.com/daybrush/moveable/compare/ngx-moveable@0.43.0...ngx-moveable@0.43.1) (2023-04-16)\n\n\n### :mega: Other\n\n* publish packages ([a623eda](https://github.com/daybrush/moveable/commit/a623eda2702067397159742dd0c6ed16b99bbe22))\n\n\n\n## [0.43.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.42.0...ngx-moveable@0.43.0) (2023-04-13)\n\n\n### :bug: Bug Fix\n\n* fix warpSelf ([8c86a3f](https://github.com/daybrush/moveable/commit/8c86a3f95e5d0b8832b1d9b65bf72f598eb8d0cb))\n\n\n### :mega: Other\n\n* publish packages ([1177427](https://github.com/daybrush/moveable/commit/11774277bafd9c60e9cef3c9a6fa38a3e1c4077d))\n\n\n\n## [0.42.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.41.4...ngx-moveable@0.42.0) (2023-03-26)\n\n\n### :mega: Other\n\n* publish packages ([7580d27](https://github.com/daybrush/moveable/commit/7580d272fe857aadfbdbc9df264e0a413dd56588))\n\n\n\n## [0.41.4](https://github.com/daybrush/moveable/compare/ngx-moveable@0.41.3...ngx-moveable@0.41.4) (2023-03-21)\n\n\n### :memo: Documentation\n\n* fix README ([7426492](https://github.com/daybrush/moveable/commit/7426492de210ab6f38d411d96e6d843d7423f555))\n\n\n### :mega: Other\n\n* publish packages ([ae54ef4](https://github.com/daybrush/moveable/commit/ae54ef4c660ae789867e4286990f234cc808a379))\n\n\n\n## [0.41.3](https://github.com/daybrush/moveable/compare/ngx-moveable@0.41.2...ngx-moveable@0.41.3) (2023-03-14)\n\n\n### :memo: Documentation\n\n* fix story url ([8977306](https://github.com/daybrush/moveable/commit/897730620480d8e830c4b53401a28d03b42b9a5f))\n\n\n### :mega: Other\n\n* update packages ([5b03d09](https://github.com/daybrush/moveable/commit/5b03d09a0cd298d47597fc8c8c9c6fdd4cd5a267))\n\n\n\n## [0.41.2](https://github.com/daybrush/moveable/compare/ngx-moveable@0.41.0...ngx-moveable@0.41.2) (2023-03-10)\n\n\n### :mega: Other\n\n* publish packages ([5589402](https://github.com/daybrush/moveable/commit/55894029a463f96a1f42827330b092be3fb63bf2))\n* update packages #856 #847 ([a78c8e3](https://github.com/daybrush/moveable/commit/a78c8e3c7ff8c3eb347a7617ddc76c807b57633e))\n\n\n\n## [0.41.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.40.1...ngx-moveable@0.41.0) (2023-03-08)\n\n\n### :mega: Other\n\n* publish packages ([645e290](https://github.com/daybrush/moveable/commit/645e290a53b477b468042e05447e2f8f8aea6ed0))\n\n\n\n## [0.40.1](https://github.com/daybrush/moveable/compare/ngx-moveable@0.39.1...ngx-moveable@0.40.1) (2023-01-29)\n\n\n### :mega: Other\n\n* publish packages ([24c9567](https://github.com/daybrush/moveable/commit/24c9567e2ec00392d2d445298031c39de0331eae))\n* publish packages ([0e0a03d](https://github.com/daybrush/moveable/commit/0e0a03dd6c234ded050db8206e585c5fa2da1848))\n\n\n\n## [0.39.1](https://github.com/daybrush/moveable/compare/ngx-moveable@0.39.0...ngx-moveable@0.39.1) (2022-12-16)\n\n\n### :mega: Other\n\n* publish packages ([d088ad9](https://github.com/daybrush/moveable/commit/d088ad9ed64889f4fd6143b89410f5d5e372105f))\n\n\n\n## [0.39.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.38.1...ngx-moveable@0.39.0) (2022-12-10)\n\n\n### :mega: Other\n\n* publish packages ([ab42598](https://github.com/daybrush/moveable/commit/ab42598cb7a6175450125c5e55093cf891a33692))\n\n\n\n## [0.38.1](https://github.com/daybrush/moveable/compare/ngx-moveable@0.38.0...ngx-moveable@0.38.1) (2022-12-05)\n\n\n### :bug: Bug Fix\n\n* move react-moveable path ([ec8e162](https://github.com/daybrush/moveable/commit/ec8e1620e05f1d5a1a45ecccec7481c2ea8a4f57))\n\n\n### :mega: Other\n\n* publish packages ([9ee9bc9](https://github.com/daybrush/moveable/commit/9ee9bc9c76f6c4b317548470b5b4894c6a462be1))\n\n\n\n## [0.38.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.37.1...ngx-moveable@0.38.0) (2022-12-03)\n\n\n### :mega: Other\n\n* publish packages ([4739df4](https://github.com/daybrush/moveable/commit/4739df488cdf3c32cb4ca4e024063c5c44fbaf0c))\n\n\n\n## [0.37.1](https://github.com/daybrush/moveable/compare/ngx-moveable@0.37.0...ngx-moveable@0.37.1) (2022-11-28)\n\n\n### :mega: Other\n\n* publish packages ([746c40b](https://github.com/daybrush/moveable/commit/746c40b2a2f31f2f371f9110018c89e64c08a525))\n\n\n\n## [0.37.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.36.0...ngx-moveable@0.37.0) (2022-11-27)\n\n\n### :memo: Documentation\n\n* fix README ([3a153c8](https://github.com/daybrush/moveable/commit/3a153c849b7279ec5fd603167117c88f25a7149c))\n\n\n### :mega: Other\n\n* publish packages ([3d5ac5a](https://github.com/daybrush/moveable/commit/3d5ac5ad855d98a2f555174cc46ec09c148d6a20))\n* publish packages ([92eb72d](https://github.com/daybrush/moveable/commit/92eb72df6110eb40a66b4726740240acb43e9745))\n\n\n\n## [0.36.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.35.1...ngx-moveable@0.36.0) (2022-11-13)\n\n\n### :mega: Other\n\n* publish packages ([0780d7a](https://github.com/daybrush/moveable/commit/0780d7a204e5f1fa13070d4fa3ca657dfe3ee4af))\n\n\n\n## [0.35.1](https://github.com/daybrush/moveable/compare/ngx-moveable@0.35.0...ngx-moveable@0.35.1) (2022-11-06)\n\n\n### :mega: Other\n\n* publish packages ([64e846b](https://github.com/daybrush/moveable/commit/64e846bb0e606756bc0b87c92b2b1052b458b9f7))\n\n\n\n## [0.35.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.34.0...ngx-moveable@0.35.0) (2022-11-04)\n\n\n### :mega: Other\n\n* publish packages ([b6896b3](https://github.com/daybrush/moveable/commit/b6896b340dd1f78777bd63c48e8545895df9aa5e))\n* update packages ([1ba698e](https://github.com/daybrush/moveable/commit/1ba698e996efe9c7c487823fe513ef43592cd6e9))\n\n\n\n## [0.34.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.33.4...ngx-moveable@0.34.0) (2022-10-17)\n\n\n### :bug: Bug Fix\n\n* fix flash of single, group toggling #760 ([5578030](https://github.com/daybrush/moveable/commit/557803012e21d2e78e3c0577aa9a238d9ee3a8dd))\n\n\n### :mega: Other\n\n* publish packages ([75db134](https://github.com/daybrush/moveable/commit/75db1345ab1119dd9a5270c7c11de455888c2627))\n* publish packages ([47f5335](https://github.com/daybrush/moveable/commit/47f53351792bf5264c6d66745088e0571cedc3aa))\n\n\n\n## [0.33.4](https://github.com/daybrush/moveable/compare/ngx-moveable@0.33.1...ngx-moveable@0.33.4) (2022-10-10)\n\n\n### :mega: Other\n\n* publish packages ([9e3ee2f](https://github.com/daybrush/moveable/commit/9e3ee2ff44dea473e7aa73e4d501c2d23062f40d))\n* publish packages ([16b2516](https://github.com/daybrush/moveable/commit/16b251618307faad8f8f3fc5433b27ed1466311c))\n\n\n\n## [0.33.1](https://github.com/daybrush/moveable/compare/ngx-moveable@0.33.0...ngx-moveable@0.33.1) (2022-09-19)\n\n\n### :mega: Other\n\n* publish packages ([2954e37](https://github.com/daybrush/moveable/commit/2954e37b9a4e2100a8a55c0d49d279e7f994fd94))\n\n\n\n## [0.33.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.32.4...ngx-moveable@0.33.0) (2022-09-15)\n\n\n### :mega: Other\n\n* update packages ([e5774a9](https://github.com/daybrush/moveable/commit/e5774a9becd500d154e8d354017dcbd80505ba13))\n\n\n\n## [0.32.4](https://github.com/daybrush/moveable/compare/ngx-moveable@0.32.3...ngx-moveable@0.32.4) (2022-08-24)\n\n\n### :mega: Other\n\n* publish packages ([d57ebb1](https://github.com/daybrush/moveable/commit/d57ebb130006c47e3a687d2b417fe3fe7f30149a))\n\n\n\n## [0.32.3](https://github.com/daybrush/moveable/compare/ngx-moveable@0.32.1...ngx-moveable@0.32.3) (2022-08-23)\n\n\n### :mega: Other\n\n* publish packages ([3597bc5](https://github.com/daybrush/moveable/commit/3597bc5fd58cdec56fd4ff8916380a6f3709f7f5))\n\n\n\n## [0.32.1](https://github.com/daybrush/moveable/compare/ngx-moveable@0.32.0...ngx-moveable@0.32.1) (2022-08-12)\n\n\n### :mega: Other\n\n* publish packages ([6be7e81](https://github.com/daybrush/moveable/commit/6be7e8122b8edd2e323a039cdbb73381de74e14f))\n\n\n\n## [0.32.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.31.3...ngx-moveable@0.32.0) (2022-08-06)\n\n\n### :mega: Other\n\n* publish packages ([80005ba](https://github.com/daybrush/moveable/commit/80005bada5651afd0c5487a193ab321b22ab1b55))\n\n\n\n## [0.31.3](https://github.com/daybrush/moveable/compare/ngx-moveable@0.31.2...ngx-moveable@0.31.3) (2022-08-03)\n\n\n### :mega: Other\n\n* publish packages ([5468ff7](https://github.com/daybrush/moveable/commit/5468ff763bfa3f30e637ce8f504af09152b22c5c))\n\n\n\n## [0.31.2](https://github.com/daybrush/moveable/compare/ngx-moveable@0.30.0...ngx-moveable@0.31.2) (2022-08-01)\n\n\n### :mega: Other\n\n* publish packages ([0076577](https://github.com/daybrush/moveable/commit/00765776ba92b5ca691c1aefd1c20687952373d9))\n* publish packages ([ffa0c18](https://github.com/daybrush/moveable/commit/ffa0c18bb6970d6f8d88a49db23b11620e704618))\n* publish packages ([958ebac](https://github.com/daybrush/moveable/commit/958ebace6032eafb17f1ce366394b440671b45b3))\n\n\n\n## [0.30.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.29.0...ngx-moveable@0.30.0) (2022-07-25)\n\n\n### :mega: Other\n\n* publish packages ([63e03d1](https://github.com/daybrush/moveable/commit/63e03d1d5f69e56c7df6d357c58d7acd06932e80))\n\n\n\n## [0.29.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.28.2...ngx-moveable@0.29.0) (2022-07-21)\n\n\n### :mega: Other\n\n* publish packages ([da24696](https://github.com/daybrush/moveable/commit/da24696977c24b6ea54a433192d15bb7ecbc62e9))\n\n\n\n## [0.28.2](https://github.com/daybrush/moveable/compare/ngx-moveable@0.28.0...ngx-moveable@0.28.2) (2022-07-17)\n\n\n### :bug: Bug Fix\n\n* fix files field in package.json #700 ([48ce548](https://github.com/daybrush/moveable/commit/48ce548438dd0a7da9f544730b2fc3ab65073775))\n\n\n### :mega: Other\n\n* publish packages ([5d89af5](https://github.com/daybrush/moveable/commit/5d89af521d1a288d4d9ca7923e0e9654e8f97d53))\n\n\n\n## [0.28.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.27.0...ngx-moveable@0.28.0) (2022-07-17)\n\n\n### :mega: Other\n\n* publish packages ([2a4940f](https://github.com/daybrush/moveable/commit/2a4940f74997fae24c7d77c553a6bc6be1301d40))\n\n\n\n## [0.27.0](https://github.com/daybrush/moveable/compare/ngx-moveable@0.26.9...ngx-moveable@0.27.0) (2022-06-09)\n\n\n### :mega: Other\n\n* publish packages ([b432247](https://github.com/daybrush/moveable/commit/b4322470bcd3bb05fc67d2c89eedd737f8b4b67a))\n\n\n\n## [0.26.9](https://github.com/daybrush/moveable/compare/ngx-moveable@0.26.8...ngx-moveable@0.26.9) (2022-06-07)\n\n\n### :house: Code Refactoring\n\n* use yarn workspace ([73da295](https://github.com/daybrush/moveable/commit/73da295064845a3791782c1777a9c555272a0af0))\n\n\n### :mega: Other\n\n* publish packages ([3530f05](https://github.com/daybrush/moveable/commit/3530f0526081b0c010e6c964265b466713f0212e))\n* update demo configuration ([917123c](https://github.com/daybrush/moveable/commit/917123cdea2830e8e8f4a8d7b2a99654f16682ef))\n\n\n\n## [0.26.8](https://github.com/daybrush/moveable/compare/ngx-moveable@0.26.6...ngx-moveable@0.26.8) (2022-05-01)\n\n\n### :mega: Other\n\n* update packages versions ([169c484](https://github.com/daybrush/moveable/commit/169c48417bb4bc07c59e227c545e379dbf43d15b))\n\n\n\n## [0.26.6](https://github.com/daybrush/moveable/compare/ngx-moveable@0.26.5...ngx-moveable@0.26.6) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([585094f](https://github.com/daybrush/moveable/commit/585094f76ec6e1556159ac357d6ac83ebab953ae))\n\n\n\n## [0.26.5](https://github.com/daybrush/moveable/compare/ngx-moveable@0.26.4...ngx-moveable@0.26.5) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([5cd2398](https://github.com/daybrush/moveable/commit/5cd2398dbb4dbbda24032641fe5bf111780b75fc))\n\n\n\n## [0.26.4](https://github.com/daybrush/moveable/compare/ngx-moveable@0.26.3...ngx-moveable@0.26.4) (2022-04-26)\n\n\n### :mega: Other\n\n* update packages versions ([a62ee58](https://github.com/daybrush/moveable/commit/a62ee58b9bc32f06edc95d55ea28b60c20881ac4))\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/README.md",
    "content": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/logo.png\"/></p>\n<h2 align=\"middle\">Angular Moveable</h2>\n<p align=\"middle\">\n<a href=\"https://www.npmjs.com/package/ngx-moveable\" target=\"_blank\"><img src=\"https://img.shields.io/npm/v/ngx-moveable.svg?style=flat-square&color=007acc&label=version\" alt=\"npm version\" /></a>\n<img src=\"https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square\"/>\n<a href=\"https://github.com/daybrush/moveable/blob/master/LICENSE\" target=\"_blank\"><img src=\"https://img.shields.io/github/license/daybrush/moveable.svg?style=flat-square&label=license&color=08CE5D\"/></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/react-moveable\" target=\"_blank\"><img alt=\"React\" src=\"https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb\"></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/preact-moveable\" target=\"_blank\"><img alt=\"Preact\" src=\"https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8\"></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/ngx-moveable\" target=\"_blank\"><img alt=\"Angular\" src=\"https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38\"></a>\n<a href=\"https://github.com/daybrush/moveable/blob/master/packages/vue-moveable\" target=\"_blank\"><img\n    alt=\"Vue\"\n    src=\"https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984\"></a>\n<a href=\"https://github.com/daybrush/moveable/tree/master/packages/svelte-moveable\" target=\"_blank\"><img alt=\"Svelte\" src=\"https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38\"></a>\n</p>\n<p align=\"middle\">An Angular Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.</p>\n<p align=\"middle\">\n  <a href=\"https://daybrush.com/moveable\" target=\"_blank\"><strong>Demo</strong></a> /\n  <a href=\"https://daybrush.com/moveable/storybook/\" target=\"_blank\"><strong>Storybook</strong></a> /\n  <a href=\"https://daybrush.com/moveable/release/latest/doc/\" target=\"_blank\"><strong>API</strong></a> /\n  <a href=\"https://github.com/daybrush/scena\" target=\"_blank\"><strong>Main Project</strong></a>\n</p>\n\n\n<table width=\"100%\" align=\"center\">\n<tr>\n<th colspan=\"4\">Moveable</th>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-draggable\"><strong>Draggable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-resizable\"><strong>Resizable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-scalable\"><strong>Scalable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-rotatable\"><strong>Rotatable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/draggable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/resizable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/scalable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/rotatable.gif\"/>\n</td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-warpable\"><strong>Warpable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html\"><strong>Pinchable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/group--group-draggable-resizable-rotatable\"><strong>Groupable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/snap-bound--snap-guidelines\"><strong>Snappable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/warpable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/pinchable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/groupable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/snappable.gif\"/></td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-clippable\"><strong>Clippable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-roundable\"><strong>Roundable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-origin-draggable\"><strong>OriginDraggable</strong></a></td>\n<td align=\"center\"><a href=\"https://github.com/daybrush/selecto\"><strong>Selecto</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/clippable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/roundable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/origindraggable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/selecto.gif\"/></td>\n</tr>\n</table>\n\n\n## 🔥 Features\n* **Draggable** refers to the ability to drag and move targets.\n* **Resizable** indicates whether the target's width and height can be increased or decreased.\n* **Scalable** indicates whether the target's x and y can be scale of transform.\n* **Rotatable** indicates whether the target can be rotated.\n* **Warpable** indicates whether the target can be warped(distorted, bented).\n* **Pinchable** indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.\n* **Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.\n* **Snappable** indicates whether to snap to the guideline.\n* **OriginDraggable*** indicates Whether to drag origin.\n* **Clippable** indicates Whether to clip the target.\n* **Roundable** indicates Whether to show and drag or double click border-radius.\n* Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)\n* Support Major Browsers\n* Support 3d Transform\n\n## ⚙️ Installation\n```sh\n$ npm i ngx-moveable\n```\n\n## 📄 Documents\n\n* [**Moveable Handbook**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md)\n* [**How to use Group**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-group)\n* [**How to use custom CSS**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-custom-css)\n* [**How to make custom able**](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/src/ables/README.md)\n* [API Documentation](https://daybrush.com/moveable/release/latest/doc/)\n\n## 🚀 How to use\n```js\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppComponent } from './app.component';\nimport { NgxMoveableModule, NgxMoveableComponent } from '../ngx-moveable';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    NgxMoveableComponent,\n  ],\n  imports: [\n    BrowserModule,\n    // NgxMoveableModule,\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n### Template\n```html\n<ngx-moveable\n  [target]=\"target\"\n  [origin]=\"true\"\n  [edge]=\"false\"\n\n  [draggable]=\"true\"\n  [throttleDrag]=\"0\"\n  (dragStart)=\"onDragStart($event)\"\n  (drag)=\"onDrag($event)\"\n  (dragEnd)=\"onDragEnd($event)\"\n\n\n  [keepRatio]=\"false\"\n\n  [resizable]=\"false\"\n  [throttleResize]=\"0\"\n  (resizeStart)=\"onResizeStart($event)\"\n  (resize)=\"onResize($event)\"\n  (resizeEnd)=\"onResizeEnd($event)\"\n  \n  [scalable]=\"false\"\n  [throttleScale]=\"0\"\n  (scaleStart)=\"onScaleStart($event)\"\n  (scale)=\"onScale($event)\"\n  (scaleEnd)=\"onScaleEnd($event)\"\n\n\n  [rotatable]=\"false\"\n  [throttleRotate]=\"0\"\n  (rotateStart)=\"onRotateStart($event)\"\n  (rotate)=\"onRotate($event)\"\n  (rotateEnd)=\"onRotateEnd($event)\"\n\n  [warpable]=\"false\"\n  (warpStart)=\"onWarpStart($event)\"\n  (warp)=\"onWarp($event)\"\n  (warpEnd)=\"onWarpEnd($event)\"\n\n  [pinchable]=\"false\"\n  (pinchStart)=\"onPinchStart($event)\"\n  (pinch)=\"onPinch($event)\"\n  (pinchEnd)=\"onPinchEnd($event)\"\n/>\n```\n\n\n## ⚙️ Development\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.1.\n\n## Development server\n\nRun `npm run start(ng serve)` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n\n\n## ⭐️ Show Your Support\nPlease give a ⭐️ if this project helped you!\n\n\n## 👏 Contributing\n\nIf you have any questions or requests or want to contribute to `moveable` or other packages, please write the [issue](https://github.com/daybrush/moveable/issues) or give me a Pull Request freely.\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](https://github.com/daybrush/moveable/blob/master/CONTRIBUTING.md)].\n\n<a href=\"https://github.com/daybrush/moveable/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=daybrush/moveable\" />\n</a>\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/moveable/issues) on GitHub.\n\n## Sponsors\n<p align=\"center\">\n\t<a href=\"https://daybrush.com/sponsors/sponsors.svg\">\n\t\t<img src=\"https://daybrush.com/sponsors/sponsors.svg\"/>\n\t</a>\n</p>\n\n## 📝 License\n\nThis project is [MIT](https://github.com/daybrush/moveable/blob/master/LICENSE) licensed.\n\n```\nMIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/karma.conf.js",
    "content": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-file.html\n\nmodule.exports = function (config) {\n  config.set({\n    basePath: '',\n    frameworks: ['jasmine', '@angular-devkit/build-angular'],\n    plugins: [\n      require('karma-jasmine'),\n      require('karma-chrome-launcher'),\n      require('karma-jasmine-html-reporter'),\n      require('karma-coverage-istanbul-reporter'),\n      require('@angular-devkit/build-angular/plugins/karma')\n    ],\n    client: {\n      clearContext: false // leave Jasmine Spec Runner output visible in browser\n    },\n    coverageIstanbulReporter: {\n      dir: require('path').join(__dirname, '../../coverage/ngx-moveable'),\n      reports: ['html', 'lcovonly'],\n      fixWebpackSourcePaths: true\n    },\n    reporters: ['progress', 'kjhtml'],\n    port: 9876,\n    colors: true,\n    logLevel: config.LOG_INFO,\n    autoWatch: true,\n    browsers: ['Chrome'],\n    singleRun: false,\n    restartOnFileChange: true\n  });\n};\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/ng-package.json",
    "content": "{\n  \"$schema\": \"../../node_modules/ng-packagr/ng-package.schema.json\",\n  \"dest\": \"../../dist/ngx-moveable\",\n  \"lib\": {\n    \"entryFile\": \"src/public-api.ts\"\n  },\n  \"allowedNonPeerDependencies\": [\n    \"framework-utils\",\n    \"moveable\",\n    \"react-moveable\"\n  ]\n}\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/package.json",
    "content": "{\n  \"name\": \"ngx-moveable\",\n  \"version\": \"0.50.0\",\n  \"description\": \"An Angular Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/daybrush/moveable/tree/master/packages/ngx-moveable\"\n  },\n  \"keywords\": [\n    \"moveable\",\n    \"resizable\",\n    \"scalable\",\n    \"draggable\",\n    \"rotatable\",\n    \"warpable\",\n    \"pinchable\",\n    \"groupable\",\n    \"movable\",\n    \"snappable\",\n    \"throttle\",\n    \"ratio\",\n    \"dom\",\n    \"resize\",\n    \"scale\",\n    \"drag\",\n    \"move\",\n    \"rotate\",\n    \"warp\",\n    \"pinch\",\n    \"snap\",\n    \"angular\",\n    \"ngx\",\n    \"ng\"\n  ],\n  \"author\": \"Daybrush\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/daybrush/moveable/issues\"\n  },\n  \"homepage\": \"https://daybrush.com/moveable\",\n  \"peerDependencies\": {\n    \"@angular/common\": \">=8\",\n    \"@angular/core\": \">=8\"\n  },\n  \"devDependencies\": {\n    \"tslib\": \"^2.3.1\"\n  },\n  \"dependencies\": {\n    \"framework-utils\": \"^1.1.0\",\n    \"moveable\": \"~0.53.0\"\n  }\n}\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/src/consts.ts",
    "content": "// auto\n// eslint-disable-next-line max-len\nexport const ANGULAR_MOVEABLE_INPUTS: [\"target\",\"dragTargetSelf\",\"dragTarget\",\"dragContainer\",\"container\",\"warpSelf\",\"rootContainer\",\"useResizeObserver\",\"useMutationObserver\",\"zoom\",\"dragFocusedInput\",\"transformOrigin\",\"ables\",\"className\",\"pinchThreshold\",\"pinchOutside\",\"triggerAblesSimultaneously\",\"checkInput\",\"cspNonce\",\"translateZ\",\"hideDefaultLines\",\"props\",\"flushSync\",\"stopPropagation\",\"preventClickEventOnDrag\",\"preventClickDefault\",\"viewContainer\",\"persistData\",\"useAccuratePosition\",\"firstRenderState\",\"linePadding\",\"controlPadding\",\"preventDefault\",\"preventRightClick\",\"preventWheelClick\",\"requestStyles\",\"snappable\",\"snapContainer\",\"snapDirections\",\"elementSnapDirections\",\"snapGap\",\"snapGridWidth\",\"snapGridHeight\",\"isDisplaySnapDigit\",\"isDisplayInnerSnapDigit\",\"isDisplayGridGuidelines\",\"snapDigit\",\"snapThreshold\",\"snapRenderThreshold\",\"snapGridAll\",\"snapRotationThreshold\",\"snapRotationDegrees\",\"snapHorizontalThreshold\",\"snapVerticalThreshold\",\"horizontalGuidelines\",\"verticalGuidelines\",\"elementGuidelines\",\"bounds\",\"innerBounds\",\"snapDistFormat\",\"maxSnapElementGuidelineDistance\",\"maxSnapElementGapDistance\",\"pinchable\",\"draggable\",\"throttleDrag\",\"throttleDragRotate\",\"hideThrottleDragRotateLine\",\"startDragRotate\",\"edgeDraggable\",\"resizable\",\"throttleResize\",\"renderDirections\",\"displayAroundControls\",\"keepRatio\",\"resizeFormat\",\"keepRatioFinally\",\"edge\",\"checkResizableError\",\"scalable\",\"throttleScale\",\"warpable\",\"rotatable\",\"rotationPosition\",\"throttleRotate\",\"rotationTarget\",\"rotateAroundControls\",\"resolveAblesWithRotatable\",\"scrollable\",\"scrollContainer\",\"scrollThreshold\",\"scrollThrottleTime\",\"getScrollPosition\",\"scrollOptions\",\"padding\",\"origin\",\"svgOrigin\",\"originDraggable\",\"originRelative\",\"clippable\",\"defaultClipPath\",\"customClipPath\",\"clipRelative\",\"clipArea\",\"dragWithClip\",\"clipTargetBounds\",\"clipVerticalGuidelines\",\"clipHorizontalGuidelines\",\"clipSnapThreshold\",\"roundable\",\"roundRelative\",\"minRoundControls\",\"maxRoundControls\",\"roundClickable\",\"roundPadding\",\"isDisplayShadowRoundControls\",\"defaultGroupRotate\",\"useDefaultGroupRotate\",\"defaultGroupOrigin\",\"groupable\",\"groupableProps\",\"targetGroups\",\"hideChildMoveableDefaultLines\",\"individualGroupable\",\"individualGroupableProps\",\"clickable\",\"dragArea\",\"passDragArea\"] = [\"target\",\"dragTargetSelf\",\"dragTarget\",\"dragContainer\",\"container\",\"warpSelf\",\"rootContainer\",\"useResizeObserver\",\"useMutationObserver\",\"zoom\",\"dragFocusedInput\",\"transformOrigin\",\"ables\",\"className\",\"pinchThreshold\",\"pinchOutside\",\"triggerAblesSimultaneously\",\"checkInput\",\"cspNonce\",\"translateZ\",\"hideDefaultLines\",\"props\",\"flushSync\",\"stopPropagation\",\"preventClickEventOnDrag\",\"preventClickDefault\",\"viewContainer\",\"persistData\",\"useAccuratePosition\",\"firstRenderState\",\"linePadding\",\"controlPadding\",\"preventDefault\",\"preventRightClick\",\"preventWheelClick\",\"requestStyles\",\"snappable\",\"snapContainer\",\"snapDirections\",\"elementSnapDirections\",\"snapGap\",\"snapGridWidth\",\"snapGridHeight\",\"isDisplaySnapDigit\",\"isDisplayInnerSnapDigit\",\"isDisplayGridGuidelines\",\"snapDigit\",\"snapThreshold\",\"snapRenderThreshold\",\"snapGridAll\",\"snapRotationThreshold\",\"snapRotationDegrees\",\"snapHorizontalThreshold\",\"snapVerticalThreshold\",\"horizontalGuidelines\",\"verticalGuidelines\",\"elementGuidelines\",\"bounds\",\"innerBounds\",\"snapDistFormat\",\"maxSnapElementGuidelineDistance\",\"maxSnapElementGapDistance\",\"pinchable\",\"draggable\",\"throttleDrag\",\"throttleDragRotate\",\"hideThrottleDragRotateLine\",\"startDragRotate\",\"edgeDraggable\",\"resizable\",\"throttleResize\",\"renderDirections\",\"displayAroundControls\",\"keepRatio\",\"resizeFormat\",\"keepRatioFinally\",\"edge\",\"checkResizableError\",\"scalable\",\"throttleScale\",\"warpable\",\"rotatable\",\"rotationPosition\",\"throttleRotate\",\"rotationTarget\",\"rotateAroundControls\",\"resolveAblesWithRotatable\",\"scrollable\",\"scrollContainer\",\"scrollThreshold\",\"scrollThrottleTime\",\"getScrollPosition\",\"scrollOptions\",\"padding\",\"origin\",\"svgOrigin\",\"originDraggable\",\"originRelative\",\"clippable\",\"defaultClipPath\",\"customClipPath\",\"clipRelative\",\"clipArea\",\"dragWithClip\",\"clipTargetBounds\",\"clipVerticalGuidelines\",\"clipHorizontalGuidelines\",\"clipSnapThreshold\",\"roundable\",\"roundRelative\",\"minRoundControls\",\"maxRoundControls\",\"roundClickable\",\"roundPadding\",\"isDisplayShadowRoundControls\",\"defaultGroupRotate\",\"useDefaultGroupRotate\",\"defaultGroupOrigin\",\"groupable\",\"groupableProps\",\"targetGroups\",\"hideChildMoveableDefaultLines\",\"individualGroupable\",\"individualGroupableProps\",\"clickable\",\"dragArea\",\"passDragArea\"];\nexport const ANGULAR_MOVEABLE_OUTPUTS: [\"beforeRenderStart\",\"beforeRender\",\"beforeRenderEnd\",\"beforeRenderGroupStart\",\"beforeRenderGroup\",\"beforeRenderGroupEnd\",\"changeTargets\",\"snap\",\"bound\",\"pinchStart\",\"pinch\",\"pinchEnd\",\"pinchGroupStart\",\"pinchGroup\",\"pinchGroupEnd\",\"dragStart\",\"drag\",\"dragEnd\",\"dragGroupStart\",\"dragGroup\",\"dragGroupEnd\",\"resizeStart\",\"beforeResize\",\"resize\",\"resizeEnd\",\"resizeGroupStart\",\"beforeResizeGroup\",\"resizeGroup\",\"resizeGroupEnd\",\"scaleStart\",\"beforeScale\",\"scale\",\"scaleEnd\",\"scaleGroupStart\",\"beforeScaleGroup\",\"scaleGroup\",\"scaleGroupEnd\",\"warpStart\",\"warp\",\"warpEnd\",\"rotateStart\",\"beforeRotate\",\"rotate\",\"rotateEnd\",\"rotateGroupStart\",\"beforeRotateGroup\",\"rotateGroup\",\"rotateGroupEnd\",\"scroll\",\"scrollGroup\",\"dragOriginStart\",\"dragOrigin\",\"dragOriginEnd\",\"clipStart\",\"clip\",\"clipEnd\",\"roundStart\",\"round\",\"roundEnd\",\"roundGroupStart\",\"roundGroup\",\"roundGroupEnd\",\"click\",\"clickGroup\",\"renderStart\",\"render\",\"renderEnd\",\"renderGroupStart\",\"renderGroup\",\"renderGroupEnd\"] = [\"beforeRenderStart\",\"beforeRender\",\"beforeRenderEnd\",\"beforeRenderGroupStart\",\"beforeRenderGroup\",\"beforeRenderGroupEnd\",\"changeTargets\",\"snap\",\"bound\",\"pinchStart\",\"pinch\",\"pinchEnd\",\"pinchGroupStart\",\"pinchGroup\",\"pinchGroupEnd\",\"dragStart\",\"drag\",\"dragEnd\",\"dragGroupStart\",\"dragGroup\",\"dragGroupEnd\",\"resizeStart\",\"beforeResize\",\"resize\",\"resizeEnd\",\"resizeGroupStart\",\"beforeResizeGroup\",\"resizeGroup\",\"resizeGroupEnd\",\"scaleStart\",\"beforeScale\",\"scale\",\"scaleEnd\",\"scaleGroupStart\",\"beforeScaleGroup\",\"scaleGroup\",\"scaleGroupEnd\",\"warpStart\",\"warp\",\"warpEnd\",\"rotateStart\",\"beforeRotate\",\"rotate\",\"rotateEnd\",\"rotateGroupStart\",\"beforeRotateGroup\",\"rotateGroup\",\"rotateGroupEnd\",\"scroll\",\"scrollGroup\",\"dragOriginStart\",\"dragOrigin\",\"dragOriginEnd\",\"clipStart\",\"clip\",\"clipEnd\",\"roundStart\",\"round\",\"roundEnd\",\"roundGroupStart\",\"roundGroup\",\"roundGroupEnd\",\"click\",\"clickGroup\",\"renderStart\",\"render\",\"renderEnd\",\"renderGroupStart\",\"renderGroup\",\"renderGroupEnd\"];\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/src/ngx-moveable.component.ts",
    "content": "import {\n  Component,\n  OnDestroy,\n  OnInit,\n  OnChanges,\n  SimpleChanges,\n  EventEmitter,\n  ElementRef,\n  NgZone,\n  Inject,\n} from '@angular/core';\nimport Moveable, { PROPERTIES, EVENTS, MoveableOptions } from 'moveable';\nimport { IObject } from '@daybrush/utils';\n\nimport { NgxMoveableInterface } from './ngx-moveable.interface';\nimport { ANGULAR_MOVEABLE_INPUTS, ANGULAR_MOVEABLE_OUTPUTS } from './consts';\n\n@Component({\n  standalone: true,\n  selector: 'ngx-moveable',\n  template: '',\n  inputs: ANGULAR_MOVEABLE_INPUTS,\n  outputs: ANGULAR_MOVEABLE_OUTPUTS,\n})\nexport class NgxMoveableComponent\n  extends NgxMoveableInterface\n  implements OnDestroy, OnInit, OnChanges\n{\n  constructor(\n    @Inject(NgZone)\n    private _ngZone: NgZone,\n    @Inject(ElementRef)\n    private _elementRef: ElementRef<HTMLElement>,\n  ) {\n    super();\n    EVENTS.forEach((name) => {\n      // @ts-expect-error\n      this[name] = new EventEmitter<unknown>();\n    });\n  }\n\n  ngOnInit(): void {\n    const options: MoveableOptions = {};\n    const events: IObject<any> = {};\n\n    PROPERTIES.forEach(name => {\n      // @ts-expect-error\n      (options as any)[name] = this[name];\n    });\n\n    EVENTS.forEach(name => {\n      events[name] = (event: any) => {\n        // @ts-expect-error\n        const emitter = this[name];\n        if (emitter && (emitter.observed || emitter.observers.length > 0)) {\n          this._ngZone.run(() => emitter.emit(event));\n        }\n      };\n    });\n\n    const container = this._elementRef.nativeElement;\n\n    this.moveable = this._ngZone.runOutsideAngular(() => new Moveable(container, {\n      ...options,\n      warpSelf: true,\n    }));\n    this.moveable.on(events);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const moveable = this.moveable;\n\n    if (!moveable) {\n      return;\n    }\n    for (const name in changes) {\n      const { previousValue, currentValue } = changes[name];\n\n      if (previousValue === currentValue) {\n        continue;\n      }\n      // @ts-expect-error\n      moveable[name] = currentValue;\n    }\n  }\n\n  ngOnDestroy() {\n    this.moveable.destroy();\n  }\n}\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/src/ngx-moveable.interface.ts",
    "content": "import Moveable, {\n  MoveableInterface,\n  METHODS,\n  MoveableProperties,\n} from 'moveable';\nimport { MethodInterface, withMethods } from 'framework-utils';\n\nimport { NgxMoveableEvents } from './types';\n\nexport class NgxMoveableInterface {\n  @withMethods(METHODS, { dragStart: 'ngDragStart' })\n  protected moveable!: Moveable;\n}\n\nexport interface NgxMoveableInterface\n  extends NgxMoveableEvents,\n    MoveableProperties,\n    MethodInterface<\n      MoveableInterface,\n      Moveable,\n      NgxMoveableInterface,\n      {\n        dragStart: 'ngDragStart';\n      }\n    > {}\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/src/ngx-moveable.legacy.component.ts",
    "content": "import {\n  Component,\n  OnDestroy,\n  OnInit,\n  OnChanges,\n  SimpleChanges,\n  EventEmitter,\n  ElementRef,\n  NgZone,\n  Inject,\n} from '@angular/core';\nimport Moveable, { PROPERTIES, EVENTS, MoveableOptions } from 'moveable';\nimport { IObject } from '@daybrush/utils';\n\nimport { NgxMoveableInterface } from './ngx-moveable.interface';\nimport { ANGULAR_MOVEABLE_INPUTS, ANGULAR_MOVEABLE_OUTPUTS } from './consts';\n\n@Component({\n  selector: 'ngx-moveable',\n  template: '',\n  inputs: ANGULAR_MOVEABLE_INPUTS,\n  outputs: ANGULAR_MOVEABLE_OUTPUTS,\n})\nexport class NgxLegacyMoveableComponent\n  extends NgxMoveableInterface\n  implements OnDestroy, OnInit, OnChanges\n{\n  constructor(\n    @Inject(NgZone)\n    private _ngZone: NgZone,\n    @Inject(ElementRef)\n    private _elementRef: ElementRef<HTMLElement>,\n  ) {\n    super();\n    EVENTS.forEach((name) => {\n      // @ts-expect-error\n      this[name] = new EventEmitter<unknown>();\n    });\n  }\n\n  ngOnInit(): void {\n    const options: MoveableOptions = {};\n    const events: IObject<any> = {};\n\n    PROPERTIES.forEach(name => {\n      // @ts-expect-error\n      (options as any)[name] = this[name];\n    });\n\n    EVENTS.forEach(name => {\n      events[name] = (event: any) => {\n        // @ts-expect-error\n        const emitter = this[name];\n        if (emitter && (emitter.observed || emitter.observers.length > 0)) {\n          this._ngZone.run(() => emitter.emit(event));\n        }\n      };\n    });\n\n    const container = this._elementRef.nativeElement;\n\n    this.moveable = this._ngZone.runOutsideAngular(() => new Moveable(container, {\n      ...options,\n      warpSelf: true,\n    }));\n    this.moveable.on(events);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const moveable = this.moveable;\n\n    if (!moveable) {\n      return;\n    }\n    for (const name in changes) {\n      const { previousValue, currentValue } = changes[name];\n\n      if (previousValue === currentValue) {\n        continue;\n      }\n      // @ts-expect-error\n      moveable[name] = currentValue;\n    }\n  }\n\n  ngOnDestroy() {\n    this.moveable.destroy();\n  }\n}\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/src/ngx-moveable.module.ts",
    "content": "import { NgModule } from '@angular/core';\n\nimport { NgxLegacyMoveableComponent } from './ngx-moveable.legacy.component';\n\n@NgModule({\n  declarations: [NgxLegacyMoveableComponent],\n  exports: [NgxLegacyMoveableComponent],\n})\nexport class NgxMoveableModule {}\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/src/public-api.ts",
    "content": "/*\n * Public API Surface of ngx-moveable\n */\n\nexport * from './ngx-moveable.component';\nexport * from './ngx-moveable.legacy.component';\nexport * from './ngx-moveable.module';\nexport * from 'moveable';\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/src/test.ts",
    "content": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/zone';\nimport 'zone.js/dist/zone-testing';\nimport { getTestBed } from '@angular/core/testing';\nimport {\n  BrowserDynamicTestingModule,\n  platformBrowserDynamicTesting\n} from '@angular/platform-browser-dynamic/testing';\n\ndeclare const require: any;\n\n// First, initialize the Angular testing environment.\ngetTestBed().initTestEnvironment(\n  BrowserDynamicTestingModule,\n  platformBrowserDynamicTesting()\n);\n// Then we find all the tests.\nconst context = require.context('./', true, /\\.spec\\.ts$/);\n// And load the modules.\ncontext.keys().map(context);\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/src/types.ts",
    "content": "import { MoveableEventsParameters, MoveableOptions } from 'moveable';\nimport { EventEmitter } from '@angular/core';\n\nexport type RequiredMoveableOptions = Required<MoveableOptions>;\nexport type NgxMoveableEvents = {\n  [key in keyof MoveableEventsParameters]: EventEmitter<MoveableEventsParameters[key]>;\n};\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/tsconfig.lib.json",
    "content": "{\n  \"extends\": \"../../tsconfig.base.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"../../out-tsc/lib\",\n    \"target\": \"es2015\",\n    \"declaration\": true,\n    \"declarationMap\": true,\n    \"inlineSources\": true,\n    \"types\": [],\n  },\n  \"angularCompilerOptions\": {\n    \"skipTemplateCodegen\": true,\n    \"strictMetadataEmit\": true,\n    \"enableResourceInlining\": true\n  },\n  \"exclude\": [\n    \"src/test.ts\",\n    \"**/*.spec.ts\"\n  ]\n}\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/tsconfig.lib.prod.json",
    "content": "{\n  \"extends\": \"./tsconfig.lib.json\",\n  \"compilerOptions\": {\n    \"declarationMap\": false\n  },\n  \"angularCompilerOptions\": {\n    \"compilationMode\": \"partial\"\n  }\n}\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/tsconfig.spec.json",
    "content": "{\n  \"extends\": \"../../tsconfig.base.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"../../out-tsc/spec\",\n    \"types\": [\n      \"jasmine\",\n      \"node\"\n    ]\n  },\n  \"files\": [\n    \"src/test.ts\"\n  ],\n  \"include\": [\n    \"**/*.spec.ts\",\n    \"**/*.d.ts\"\n  ]\n}\n"
  },
  {
    "path": "packages/ngx-moveable/projects/ngx-moveable/tslint.json",
    "content": "{\n  \"extends\": \"../../tslint.json\",\n  \"rules\": {\n    \"forin\": false,\n    \"no-output-native\": false,\n    \"directive-selector\": [\n      true,\n      \"attribute\",\n      \"\",\n      \"camelCase\"\n    ],\n    \"component-selector\": [\n      true,\n      \"element\",\n      \"\",\n      \"kebab-case\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/ngx-moveable/src/app/app.component.css",
    "content": ""
  },
  {
    "path": "packages/ngx-moveable/src/app/app.component.html",
    "content": "<div class=\"label\" #label></div>\n<div class=\"page main\">\n  <div class=\"container\">\n    <div class=\"moveable\" #target><span>Moveable</span></div>\n    <div class=\"buttons able\">\n      <a href=\"#\" data-able=\"scalable\" [class]=\"scalable ? 'selected' : ''\" (click)=\"clickScalable()\" >Scalable</a>\n      <a href=\"#\" data-able=\"resizable\" [class]=\"resizable ? 'selected' : ''\" (click)=\"clickResizable()\">Resizable</a>\n      <a href=\"#\" data-able=\"warpable\" [class]=\"warpable ? 'selected' : ''\" (click)=\"clickWarpable()\">Warpable</a>\n    </div>\n    <p align=\"middle\">An Angular Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable,\n      Pinchable.</p>\n    <p align=\"middle\">\n      <a href=\"https://github.com/daybrush/moveable\" target=\"_blank\"><strong>About Moveable</strong></a> /\n      <a href=\"https://daybrush.com/moveable/release/latest/doc/\" target=\"_blank\"><strong>API</strong></a> /\n      <a href=\"https://github.com/daybrush/scena\" target=\"_blank\"><strong>Main Project</strong></a>\n    </p>\n\n    <ngx-moveable\n      #moveable\n      [target]=\"target\"\n      [draggable]=\"true\"\n      [origin]=\"false\"\n      [rotatable]=\"true\"\n      [pinchable]=\"true\"\n      [scalable]=\"scalable\"\n      [resizable]=\"resizable\"\n      [warpable]=\"warpable\"\n      [keepRatio]=\"false\"\n      [throttleDrag]=\"1\"\n      [throttleScale]=\"0.01\"\n      [throttleRotate]=\"0.2\"\n      [throttleResize]=\"1\"\n      (drag)=\"onDrag($event)\"\n      (resize)=\"onResize($event)\"\n      (scale)=\"onScale($event)\"\n      (warp)=\"onWarp($event)\"\n      (rotate)=\"onRotate($event)\"\n      (pinch)=\"onPinch($event)\"\n      (dragEnd)=\"onEnd()\"\n      (resizeEnd)=\"onEnd()\"\n      (scaleEnd)=\"onEnd()\"\n      (warpEnd)=\"onEnd()\"\n      (rotateEnd)=\"onEnd()\"\n      (pinchEnd)=\"onEnd()\"\n      >\n    </ngx-moveable>\n  </div>\n</div>\n"
  },
  {
    "path": "packages/ngx-moveable/src/app/app.component.spec.ts",
    "content": "import { TestBed, async } from '@angular/core/testing';\nimport { AppComponent } from './app.component';\n\ndescribe('AppComponent', () => {\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [\n        AppComponent\n      ],\n    }).compileComponents();\n  }));\n\n  it('should create the app', () => {\n    const fixture = TestBed.createComponent(AppComponent);\n    const app = fixture.debugElement.componentInstance;\n    expect(app).toBeTruthy();\n  });\n\n  it(`should have as title 'ngx-moveable-app'`, () => {\n    const fixture = TestBed.createComponent(AppComponent);\n    const app = fixture.debugElement.componentInstance;\n    expect(app.title).toEqual('ngx-moveable-app');\n  });\n\n  it('should render title in a h1 tag', () => {\n    const fixture = TestBed.createComponent(AppComponent);\n    fixture.detectChanges();\n    const compiled = fixture.debugElement.nativeElement;\n    expect(compiled.querySelector('h1').textContent).toContain('Welcome to ngx-moveable-app!');\n  });\n});\n"
  },
  {
    "path": "packages/ngx-moveable/src/app/app.component.ts",
    "content": "import { Component, ViewChild, OnInit, OnDestroy, ElementRef } from '@angular/core';\nimport { Frame } from 'scenejs';\nimport { NgxMoveableComponent } from 'projects/ngx-moveable/src/public-api';\nimport type { OnPinch, OnDrag, OnScale, OnRotate, OnResize, OnWarp } from 'moveable';\n\n// import { NgxMoveableComponent } from 'src/ngx-moveable';\n\n@Component({\n  // tslint:disable-next-line: component-selector\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent implements OnInit, OnDestroy {\n  @ViewChild('target', { static: false }) target!: ElementRef<HTMLDivElement>;\n  @ViewChild('label', { static: false }) label!: ElementRef<HTMLDivElement>;\n  @ViewChild('moveable', { static: false }) moveable!: NgxMoveableComponent;\n  scalable = true;\n  resizable = false;\n  warpable = false;\n  frame = new Frame({\n    width: '250px',\n    height: '200px',\n    left: '0px',\n    top: '0px',\n    transform: {\n      rotate: '0deg',\n      scaleX: 1,\n      scaleY: 1,\n      matrix3d: [\n        1, 0, 0, 0,\n        0, 1, 0, 0,\n        0, 0, 1, 0,\n        0, 0, 0, 1,\n      ],\n    },\n  });\n  ngOnInit(): void {\n    window.addEventListener('resize', this.onWindowReisze);\n  }\n  ngOnDestroy(): void {\n    window.removeEventListener('resize', this.onWindowReisze);\n  }\n  onWindowReisze = () => {\n    console.log(this.moveable.ngDragStart);\n    this.moveable.updateRect();\n  }\n  clickScalable() {\n    this.scalable = true;\n    this.resizable = false;\n    this.warpable = false;\n  }\n  clickResizable() {\n    this.scalable = false;\n    this.resizable = true;\n    this.warpable = false;\n  }\n  clickWarpable() {\n    this.scalable = false;\n    this.resizable = false;\n    this.warpable = true;\n  }\n\n  setTransform(target: HTMLElement | SVGElement) {\n    target.style.cssText = this.frame.toCSS();\n  }\n  setLabel(clientX: number, clientY: number, text: string) {\n    this.label.nativeElement.style.cssText = `\ndisplay: block; transform: translate(${clientX}px, ${clientY - 10}px) translate(-100%, -100%) translateZ(-100px);`;\n    this.label.nativeElement.innerHTML = text;\n  }\n  onPinch({ target, clientX, clientY }: OnPinch) {\n    setTimeout(() => {\n      this.setLabel(clientX, clientY, `X: ${this.frame.get('left')}\n  <br/>Y: ${this.frame.get('top')}\n  <br/>W: ${this.frame.get('width')}\n  <br/>H: ${this.frame.get('height')}\n  <br/>S: ${this.frame.get('transform', 'scaleX').toFixed(2)}, ${this.frame.get('transform', 'scaleY').toFixed(2)}\n  <br/>R: ${parseFloat(this.frame.get('transform', 'rotate')).toFixed(1)}deg\n  `);\n    });\n  }\n  onDrag({ target, clientX, clientY, top, left, isPinch }: OnDrag) {\n    this.frame.set('left', `${left}px`);\n    this.frame.set('top', `${top}px`);\n    this.setTransform(target);\n    if (!isPinch) {\n      this.setLabel(clientX, clientY, `X: ${left}px<br/>Y: ${top}px`);\n    }\n  }\n  onScale({ target, delta, clientX, clientY, isPinch }: OnScale) {\n    const scaleX = this.frame.get('transform', 'scaleX') * delta[0];\n    const scaleY = this.frame.get('transform', 'scaleY') * delta[1];\n    this.frame.set('transform', 'scaleX', scaleX);\n    this.frame.set('transform', 'scaleY', scaleY);\n    this.setTransform(target);\n    if (!isPinch) {\n      this.setLabel(clientX, clientY, `S: ${scaleX.toFixed(2)}, ${scaleY.toFixed(2)}`);\n    }\n  }\n  onRotate({ target, clientX, clientY, beforeDelta, isPinch }: OnRotate) {\n    const deg = parseFloat(this.frame.get('transform', 'rotate')) + beforeDelta;\n\n    this.frame.set('transform', 'rotate', `${deg}deg`);\n    this.setTransform(target);\n    if (!isPinch) {\n      this.setLabel(clientX, clientY, `R: ${deg.toFixed(1)}`);\n    }\n  }\n  onResize({ target, clientX, clientY, width, height, isPinch }: OnResize) {\n    this.frame.set('width', `${width}px`);\n    this.frame.set('height', `${height}px`);\n    this.setTransform(target);\n    if (!isPinch) {\n      this.setLabel(clientX, clientY, `W: ${width}px<br/>H: ${height}px`);\n    }\n  }\n  onWarp({ target, clientX, clientY, delta, multiply }: OnWarp) {\n    this.frame.set('transform', 'matrix3d', multiply(this.frame.get('transform', 'matrix3d'), delta));\n    this.setTransform(target);\n    this.setLabel(clientX, clientY, `X: ${clientX}px<br/>Y: ${clientY}px`);\n  }\n  onEnd() {\n    this.label.nativeElement.style.display = 'none';\n  }\n}\n"
  },
  {
    "path": "packages/ngx-moveable/src/app/app.module.ts",
    "content": "import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { NgxMoveableModule } from '../../projects/ngx-moveable/src/ngx-moveable.module';\n// import { NgxMoveableModule } from 'ngx-moveable';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n  ],\n  imports: [\n    BrowserModule,\n    NgxMoveableModule,\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n"
  },
  {
    "path": "packages/ngx-moveable/src/environments/environment.prod.ts",
    "content": "export const environment = {\n  production: true\n};\n"
  },
  {
    "path": "packages/ngx-moveable/src/environments/environment.ts",
    "content": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.\n// The list of file replacements can be found in `angular.json`.\n\nexport const environment = {\n  production: false\n};\n\n/*\n * For easier debugging in development mode, you can import the following file\n * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.\n *\n * This import should be commented out in production mode because it will have a negative impact\n * on performance if an error is thrown.\n */\n// import 'zone.js/dist/zone-error';  // Included with Angular CLI.\n"
  },
  {
    "path": "packages/ngx-moveable/src/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>ngx-moveable-app</title>\n  <base href=\"/\">\n\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <link rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\">\n</head>\n<body>\n  <app-root></app-root>\n</body>\n</html>\n"
  },
  {
    "path": "packages/ngx-moveable/src/main.ts",
    "content": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n  enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n  .catch(err => console.error(err));\n"
  },
  {
    "path": "packages/ngx-moveable/src/polyfills.ts",
    "content": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfills to this file.\n *\n * This file is divided into 2 sections:\n *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.\n *   2. Application imports. Files imported after ZoneJS that should be loaded before your main\n *      file.\n *\n * The current setup is for so-called \"evergreen\" browsers; the last versions of browsers that\n * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),\n * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.\n *\n * Learn more in https://angular.io/guide/browser-support\n */\n\n/***************************************************************************************************\n * BROWSER POLYFILLS\n */\n\n/** IE10 and IE11 requires the following for NgClass support on SVG elements */\n// import 'classlist.js';  // Run `npm install --save classlist.js`.\n\n/**\n * Web Animations `@angular/platform-browser/animations`\n * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.\n * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).\n */\n// import 'web-animations-js';  // Run `npm install --save web-animations-js`.\n\n/**\n * By default, zone.js will patch all possible macroTask and DomEvents\n * user can disable parts of macroTask/DomEvents patch by setting following flags\n * because those flags need to be set before `zone.js` being loaded, and webpack\n * will put import in the top of bundle, so user need to create a separate file\n * in this directory (for example: zone-flags.ts), and put the following flags\n * into that file, and then add the following code before importing zone.js.\n * import './zone-flags.ts';\n *\n * The flags allowed in zone-flags.ts are listed here.\n *\n * The following flags will work for all browsers.\n *\n * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame\n * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick\n * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames\n *\n *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js\n *  with the following flag, it will bypass `zone.js` patch for IE/Edge\n *\n *  (window as any).__Zone_enable_cross_context_check = true;\n *\n */\n\n/***************************************************************************************************\n * Zone JS is required by default for Angular itself.\n */\nimport 'zone.js/dist/zone';  // Included with Angular CLI.\n\n\n/***************************************************************************************************\n * APPLICATION IMPORTS\n */\n"
  },
  {
    "path": "packages/ngx-moveable/src/styles.css",
    "content": "@import url(\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap\");\n@import url(\"https://fonts.googleapis.com/css?family=Roboto:100&display=swap\");\nhtml,\nbody {\n  font-family: \"Open Sans\", sans-serif;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  height: 100%;\n  color: #333;\n  letter-spacing: 1px;\n  background: #f5f5f5;\n  font-weight: 300;\n}\n\na {\n  text-decoration: none;\n  color: #333;\n}\n\n.page {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.page:nth-child(2n) {\n  background: #f0f0f0;\n}\n\n.container {\n  position: relative;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.moveable {\n  font-family: \"Roboto\", sans-serif;\n  position: relative;\n  width: 250px;\n  height: 200px;\n  text-align: center;\n  font-size: 40px;\n  margin: 0px auto;\n  font-weight: 100;\n  letter-spacing: 1px;\n}\n\n.moveable span {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  white-space: nowrap;\n}\n\n.description {\n  text-align: center;\n}\n\n.badges {\n  padding: 10px;\n  text-align: center;\n}\n\n.badges img {\n  height: 20px;\n}\n\n.buttons.able a {\n  min-width: auto;\n  padding: 8px 20px;\n}\n\n.buttons {\n  text-align: center;\n  margin: 0;\n  padding: 10px;\n}\n\n.buttons a {\n  margin: 0;\n  position: relative;\n  text-decoration: none;\n  color: #333;\n  border: 1px solid #333;\n  padding: 12px 30px;\n  min-width: 140px;\n  text-align: center;\n  /* font-weight: 400; */\n  display: inline-block;\n  box-sizing: border-box;\n  margin: 5px;\n  transition: all ease 0.5s;\n}\n\n.buttons a:hover,\n.buttons a.selected {\n  background: #333;\n  color: #fff;\n}\n\n.page.main {\n  z-index: 1;\n  min-height: 700px;\n}\n\n.label {\n  position: fixed;\n  top: 0;\n  left: 0;\n  padding: 5px;\n  border-radius: 5px;\n  background: #333;\n  z-index: 10;\n  color: #fff;\n  font-weight: bold;\n  font-size: 12px;\n  display: none;\n  transform: translate(-100%, -100%);\n  z-index: 3001;\n}\n\n.page.feature,\n.page.footer {\n  height: auto;\n  text-align: left;\n  padding: 60px 20px;\n}\n\n.page.feature .container,\n.page.footer .container {\n  top: 0;\n  left: 0;\n  padding: 60px 0px;\n  margin: auto;\n  transform: none;\n  width: auto;\n  max-width: 800px;\n}\n\n.page.feature .container {\n  display: flex;\n}\n\n.page.footer .container {\n  padding: 0px;\n}\n\n.page.feature h2.container {\n  padding: 10px 0px;\n  font-weight: 300;\n  font-size: 40px;\n}\n\n.feature .container .left {\n  position: relative;\n  width: 300px;\n  height: 205px;\n  display: inline-block;\n  vertical-align: top;\n  z-index: 2000;\n  margin-bottom: 20px;\n}\n\n.feature .container .right {\n  position: relative;\n  display: inline-block;\n  vertical-align: top;\n  flex: 1;\n}\n\n.feature .right .description {\n  text-align: left;\n  margin: 0px 0px 10px;\n}\n\n.feature .right .description strong {\n  font-weight: 600;\n}\n\n.draggable,\n.resizable,\n.scalable,\n.rotatable,\n.origin,\n.warpable,\n.pinchable {\n  position: absolute;\n  left: 0;\n}\n\n.origin {\n  transform-origin: 30% 50%;\n}\n\npre {\n  position: relative;\n  border: 1px solid #ccc;\n  box-sizing: border-box;\n  padding: 10px;\n  max-width: 500px;\n}\n\ncode.hljs {\n  padding: 0;\n}\n\n.tab {\n  padding: 10px 12px;\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: 1px solid #ccc;\n  box-shadow: none;\n  font-weight: bold;\n  margin: 0;\n  cursor: pointer;\n  outline: none;\n}\n\n.tab.selected {\n  background: #333;\n  color: #fff;\n  border: 1px solid #333;\n}\n\n.panel {\n  display: none;\n}\n\n.panel.selected {\n  display: block;\n}\n\n.page.footer {\n  font-weight: 400;\n}\n\n.page.footer a {\n  text-decoration: underline;\n}\n\n.page.footer span:first-child:before {\n  content: \"\";\n}\n\n.page.footer span:before {\n  content: \"/\";\n}\n\n@media screen and (max-width: 750px) {\n  .page.feature .container {\n    display: block;\n  }\n  .page.feature .container {\n    text-align: center;\n  }\n  .page.feature .left,\n  .page.feature .right {\n    display: block;\n    margin: 0px auto 20px;\n  }\n  .page.feature .right {\n    text-align: left;\n  }\n}\n"
  },
  {
    "path": "packages/ngx-moveable/src/test.ts",
    "content": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/zone-testing';\nimport { getTestBed } from '@angular/core/testing';\nimport {\n  BrowserDynamicTestingModule,\n  platformBrowserDynamicTesting\n} from '@angular/platform-browser-dynamic/testing';\n\ndeclare const require: any;\n\n// First, initialize the Angular testing environment.\ngetTestBed().initTestEnvironment(\n  BrowserDynamicTestingModule,\n  platformBrowserDynamicTesting()\n);\n// Then we find all the tests.\nconst context = require.context('./', true, /\\.spec\\.ts$/);\n// And load the modules.\ncontext.keys().map(context);\n"
  },
  {
    "path": "packages/ngx-moveable/tsconfig.app.json",
    "content": "{\n  \"extends\": \"./tsconfig.base.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"./out-tsc/app\",\n    \"types\": []\n  },\n  \"include\": [\n    \"src/**/*.ts\"\n  ],\n  \"exclude\": [\n    \"src/test.ts\",\n    \"src/**/*.spec.ts\"\n  ]\n}\n"
  },
  {
    "path": "packages/ngx-moveable/tsconfig.base.json",
    "content": "{\n  \"compileOnSave\": false,\n  \"compilerOptions\": {\n    \"baseUrl\": \"./\",\n    \"outDir\": \"./dist/out-tsc\",\n    \"sourceMap\": true,\n    \"strict\": true,\n    \"declaration\": false,\n    \"module\": \"es2020\",\n    \"moduleResolution\": \"node\",\n    \"emitDecoratorMetadata\": true,\n    \"experimentalDecorators\": true,\n    \"importHelpers\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"skipLibCheck\": false,\n    \"target\": \"es2015\",\n    \"lib\": [\"esnext\", \"dom\"],\n    \"paths\": {\n      \"ngx-moveable\": [\"projects/ngx-moveable/src/public-api.ts\"]\n    }\n  },\n  \"angularCompilerOptions\": {\n    \"strictTemplates\": false,\n    \"strictInjectionParameters\": true,\n    \"fullTemplateTypeCheck\": true\n  }\n}\n"
  },
  {
    "path": "packages/ngx-moveable/tsconfig.json",
    "content": "// This is a \"Solution Style\" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.\n// It is not intended to be used to perform a compilation.\n{\n  \"files\": [],\n  \"references\": [\n    {\n      \"path\": \"./tsconfig.app.json\"\n    },\n    {\n      \"path\": \"./tsconfig.spec.json\"\n    },\n    {\n      \"path\": \"./projects/ngx-moveable/tsconfig.lib.json\"\n    },\n    {\n      \"path\": \"./projects/ngx-moveable/tsconfig.spec.json\"\n    }\n  ]\n}\n"
  },
  {
    "path": "packages/ngx-moveable/tsconfig.spec.json",
    "content": "{\n  \"extends\": \"./tsconfig.base.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"./out-tsc/spec\",\n    \"types\": [\n      \"jasmine\",\n      \"node\"\n    ]\n  },\n  \"files\": [\n    \"src/test.ts\",\n    \"src/polyfills.ts\"\n  ],\n  \"include\": [\n    \"src/**/*.spec.ts\",\n    \"src/**/*.d.ts\"\n  ]\n}\n"
  },
  {
    "path": "packages/ngx-moveable/tslint.json",
    "content": "{\n  \"extends\": \"tslint:recommended\",\n  \"rules\": {\n    \"array-type\": false,\n    \"arrow-parens\": false,\n    \"deprecation\": {\n      \"severity\": \"warn\"\n    },\n    \"component-class-suffix\": true,\n    \"contextual-lifecycle\": true,\n    \"directive-class-suffix\": true,\n    \"directive-selector\": [\n      true,\n      \"attribute\",\n      \"\",\n      \"camelCase\"\n    ],\n    \"component-selector\": [\n      true,\n      \"element\",\n      \"\",\n      \"kebab-case\"\n    ],\n    \"import-blacklist\": [\n      true,\n      \"rxjs/Rx\"\n    ],\n    \"interface-name\": false,\n    \"max-classes-per-file\": false,\n    \"max-line-length\": [\n      true,\n      140\n    ],\n    \"member-access\": false,\n    \"member-ordering\": [\n      true,\n      {\n        \"order\": [\n          \"static-field\",\n          \"instance-field\",\n          \"static-method\",\n          \"instance-method\"\n        ]\n      }\n    ],\n    \"no-consecutive-blank-lines\": false,\n    \"no-console\": [\n      true,\n      \"debug\",\n      \"info\",\n      \"time\",\n      \"timeEnd\",\n      \"trace\"\n    ],\n    \"no-empty\": false,\n    \"no-inferrable-types\": [\n      true,\n      \"ignore-params\"\n    ],\n    \"no-non-null-assertion\": true,\n    \"no-redundant-jsdoc\": true,\n    \"no-switch-case-fall-through\": true,\n    \"no-use-before-declare\": true,\n    \"no-var-requires\": false,\n    \"object-literal-key-quotes\": [\n      true,\n      \"as-needed\"\n    ],\n    \"object-literal-sort-keys\": false,\n    \"ordered-imports\": false,\n    \"quotemark\": [\n      true,\n      \"single\"\n    ],\n    \"trailing-comma\": false,\n    \"no-conflicting-lifecycle\": true,\n    \"no-host-metadata-property\": true,\n    \"no-input-rename\": true,\n    \"no-inputs-metadata-property\": true,\n    \"no-output-native\": true,\n    \"no-output-on-prefix\": true,\n    \"no-output-rename\": true,\n    \"no-outputs-metadata-property\": true,\n    \"template-banana-in-box\": true,\n    \"template-no-negated-async\": true,\n    \"use-lifecycle-interface\": true,\n    \"use-pipe-transform-interface\": true\n  },\n  \"rulesDirectory\": [\n    \"codelyzer\"\n  ]\n}\n"
  },
  {
    "path": "packages/preact-moveable/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [0.55.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.54.0...preact-moveable@0.55.0) (2023-12-03)\n\n\n### :mega: Other\n\n* publish packages ([f9a0eed](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/f9a0eed9db93c1fa3522138e9c7604287f0ce21f))\n\n\n\n## [0.54.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.53.2...preact-moveable@0.54.0) (2023-10-28)\n\n\n### :mega: Other\n\n* publish packages ([1a65454](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/1a654540f1390648d7e4db910d0673acff190007))\n\n\n\n## [0.53.2](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.53.1...preact-moveable@0.53.2) (2023-09-19)\n\n\n### :mega: Other\n\n* publish packages ([ecf15ab](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/ecf15ab399bb4d9f6752cb84b0d6b06d15e5c426))\n\n\n\n## [0.53.1](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.53.0...preact-moveable@0.53.1) (2023-07-11)\n\n\n### :mega: Other\n\n* publish packages ([27bda8e](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/27bda8ea3d9751847fc073519a832b3464242d3c))\n\n\n\n## [0.53.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.52.2...preact-moveable@0.53.0) (2023-07-09)\n\n\n### :mega: Other\n\n* publish packages ([25cae7f](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/25cae7f46aa28dcb948a8690fd6062b7e15d72ff))\n\n\n\n## [0.52.2](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.52.1...preact-moveable@0.52.2) (2023-07-04)\n\n\n### :mega: Other\n\n* publish packages ([9467cf4](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/9467cf45fd2871573df8886eb134c67a8b0f916d))\n\n\n\n## [0.52.1](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.51.1...preact-moveable@0.52.1) (2023-07-02)\n\n\n### :mega: Other\n\n* publish packages ([5697e80](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/5697e8050f486a83ea409b856d1f670759ba6910))\n* publish packages ([5e76998](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/5e76998ba0a90efcbb0c2e4fe8030ca47a1842d4))\n\n\n\n## [0.51.1](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.51.0...preact-moveable@0.51.1) (2023-06-28)\n\n\n### :house: Code Refactoring\n\n* change rollup to vite ([213f346](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/213f346257289eaec6f3f6f618e8fba33859c384))\n\n\n### :mega: Other\n\n* fix update modules ([bb608dc](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/bb608dc0d1d9eb13e538d1026c05809d89757b1d))\n* publish packages ([510d7cd](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/510d7cdf76eef4a17cc75d95634ebcb6d9688f8e))\n\n\n\n## [0.51.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.50.0...preact-moveable@0.51.0) (2023-06-25)\n\n\n### :mega: Other\n\n* publish packages ([f893cca](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/f893ccaa176d31ef9ddb241d2cd4a1fb098cdae0))\n\n\n\n## [0.50.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.49.7...preact-moveable@0.50.0) (2023-06-04)\n\n\n### :bug: Bug Fix\n\n* fix ownerDocument css #932 ([76a852a](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/76a852ade3ffb41a1b246649945994f50e52b1f0))\n* support iframe context #932 ([3e87cc7](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/3e87cc7fed43160ca342630fed2f413876f8a518))\n\n\n### :mega: Other\n\n* update packages ([8d65572](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/8d65572384ae0fdff288fe78fbeb5d249b070eb7))\n\n\n\n## [0.49.7](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.49.6...preact-moveable@0.49.7) (2023-05-16)\n\n\n### :bug: Bug Fix\n\n* fix css-styled version #916 ([875fc19](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/875fc19fa7fac50cbbb3166dfaa512b18f7c790d))\n\n\n### :mega: Other\n\n* publish packages ([5bd22bb](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/5bd22bb009e10a4f8032f35c2ae3b490f4d94e5b))\n\n\n\n## [0.49.6](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.49.5...preact-moveable@0.49.6) (2023-05-15)\n\n\n### :bug: Bug Fix\n\n* update croact, css-styled version #916 ([b517b64](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/b517b6498a612c072eadc9354d6383363771ea6d))\n\n\n### :mega: Other\n\n* publish packages ([91aa8bc](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/91aa8bc1bdefc65cde8c032f1c7ba13ca54ad2fa))\n\n\n\n## [0.49.5](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.49.4...preact-moveable@0.49.5) (2023-05-09)\n\n\n### :mega: Other\n\n* publish packages ([40dd902](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/40dd9022c41244ab009d621861ddc2ac63768748))\n\n\n\n## [0.49.4](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.49.0...preact-moveable@0.49.4) (2023-05-08)\n\n\n### :bug: Bug Fix\n\n* fix files filed #910 #909 #907 ([a4995ab](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/a4995ab1acb3a34974e1d5a20d17fb2ee17ddc0c))\n\n\n### :mega: Other\n\n* publish packages ([d0f0532](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/d0f0532bfb42fe98ee95748839a639fddbe4b9d6))\n* publish packages ([e1e86a9](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/e1e86a95ebff9d18ad7a5ebede3bd5bd66465b5d))\n* publish packages ([60a747e](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/60a747ee3c373f83fb759a8482e2365e77dcb5e8))\n\n\n\n## [0.49.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.48.1...preact-moveable@0.49.0) (2023-05-01)\n\n\n### :mega: Other\n\n* publish packages ([24934e3](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/24934e317de2e5ff622bd9ab0dec8d75a7c05c48))\n\n\n\n## [0.48.1](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.48.0...preact-moveable@0.48.1) (2023-04-16)\n\n\n### :mega: Other\n\n* publish packages ([a623eda](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/a623eda2702067397159742dd0c6ed16b99bbe22))\n\n\n\n## [0.48.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.47.0...preact-moveable@0.48.0) (2023-04-13)\n\n\n### :rocket: New Features\n\n* add croact ([b94c41c](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/b94c41c50cdf37da0136bd4d04f2237529253f45))\n* add croact compat ([233c6d0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/233c6d0a905953b51c3fd5df1f7c58e7b1d03432))\n\n\n### :mega: Other\n\n* publish packages ([1177427](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/11774277bafd9c60e9cef3c9a6fa38a3e1c4077d))\n\n\n\n## [0.47.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.46.3...preact-moveable@0.47.0) (2023-03-26)\n\n\n### :mega: Other\n\n* publish packages ([7580d27](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/7580d272fe857aadfbdbc9df264e0a413dd56588))\n\n\n\n## [0.46.3](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.46.2...preact-moveable@0.46.3) (2023-03-21)\n\n\n### :memo: Documentation\n\n* fix README ([7426492](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/7426492de210ab6f38d411d96e6d843d7423f555))\n\n\n### :mega: Other\n\n* publish packages ([ae54ef4](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/ae54ef4c660ae789867e4286990f234cc808a379))\n\n\n\n## [0.46.2](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.46.1...preact-moveable@0.46.2) (2023-03-14)\n\n\n### :memo: Documentation\n\n* fix story url ([8977306](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/897730620480d8e830c4b53401a28d03b42b9a5f))\n\n\n### :mega: Other\n\n* update packages ([5b03d09](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/5b03d09a0cd298d47597fc8c8c9c6fdd4cd5a267))\n\n\n\n## [0.46.1](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.46.0...preact-moveable@0.46.1) (2023-03-10)\n\n\n### :mega: Other\n\n* publish packages ([5589402](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/55894029a463f96a1f42827330b092be3fb63bf2))\n\n\n\n## [0.46.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.45.1...preact-moveable@0.46.0) (2023-03-08)\n\n\n### :mega: Other\n\n* publish packages ([645e290](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/645e290a53b477b468042e05447e2f8f8aea6ed0))\n\n\n\n## [0.45.1](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.44.1...preact-moveable@0.45.1) (2023-01-29)\n\n\n### :mega: Other\n\n* publish packages ([24c9567](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/24c9567e2ec00392d2d445298031c39de0331eae))\n* publish packages ([0e0a03d](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/0e0a03dd6c234ded050db8206e585c5fa2da1848))\n\n\n\n## [0.44.1](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.44.0...preact-moveable@0.44.1) (2022-12-16)\n\n\n### :mega: Other\n\n* publish packages ([d088ad9](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/d088ad9ed64889f4fd6143b89410f5d5e372105f))\n\n\n\n## [0.44.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.43.1...preact-moveable@0.44.0) (2022-12-10)\n\n\n### :mega: Other\n\n* publish packages ([ab42598](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/ab42598cb7a6175450125c5e55093cf891a33692))\n\n\n\n## [0.43.1](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.43.0...preact-moveable@0.43.1) (2022-12-05)\n\n\n### :bug: Bug Fix\n\n* move react-moveable path ([ec8e162](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/ec8e1620e05f1d5a1a45ecccec7481c2ea8a4f57))\n\n\n### :mega: Other\n\n* publish packages ([9ee9bc9](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/9ee9bc9c76f6c4b317548470b5b4894c6a462be1))\n\n\n\n## [0.43.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.42.1...preact-moveable@0.43.0) (2022-12-03)\n\n\n### :mega: Other\n\n* publish packages ([4739df4](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/4739df488cdf3c32cb4ca4e024063c5c44fbaf0c))\n\n\n\n## [0.42.1](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.42.0...preact-moveable@0.42.1) (2022-11-28)\n\n\n### :mega: Other\n\n* publish packages ([746c40b](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/746c40b2a2f31f2f371f9110018c89e64c08a525))\n\n\n\n## [0.42.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.41.0...preact-moveable@0.42.0) (2022-11-27)\n\n\n### :memo: Documentation\n\n* fix README ([3a153c8](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/3a153c849b7279ec5fd603167117c88f25a7149c))\n\n\n### :mega: Other\n\n* publish packages ([3d5ac5a](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/3d5ac5ad855d98a2f555174cc46ec09c148d6a20))\n* publish packages ([92eb72d](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/92eb72df6110eb40a66b4726740240acb43e9745))\n\n\n\n## [0.41.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.40.1...preact-moveable@0.41.0) (2022-11-13)\n\n\n### :mega: Other\n\n* publish packages ([0780d7a](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/0780d7a204e5f1fa13070d4fa3ca657dfe3ee4af))\n\n\n\n## [0.40.1](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.40.0...preact-moveable@0.40.1) (2022-11-06)\n\n\n### :mega: Other\n\n* publish packages ([64e846b](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/64e846bb0e606756bc0b87c92b2b1052b458b9f7))\n\n\n\n## [0.40.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.39.0...preact-moveable@0.40.0) (2022-11-04)\n\n\n### :mega: Other\n\n* publish packages ([b6896b3](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/b6896b340dd1f78777bd63c48e8545895df9aa5e))\n* update packages #760 ([5c77cf3](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/5c77cf3986fa319a170d8bd90b6cd720601b5172))\n\n\n\n## [0.39.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.38.4...preact-moveable@0.39.0) (2022-10-17)\n\n\n### :mega: Other\n\n* publish packages ([75db134](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/75db1345ab1119dd9a5270c7c11de455888c2627))\n* publish packages ([47f5335](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/47f53351792bf5264c6d66745088e0571cedc3aa))\n* update packages ([61730d5](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/61730d5c143d4027c55a714c764efe77bbebe5bf))\n\n\n\n## [0.38.4](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.38.1...preact-moveable@0.38.4) (2022-10-10)\n\n\n### :mega: Other\n\n* publish packages ([9e3ee2f](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/9e3ee2ff44dea473e7aa73e4d501c2d23062f40d))\n* publish packages ([16b2516](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/16b251618307faad8f8f3fc5433b27ed1466311c))\n\n\n\n## [0.38.1](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.38.0...preact-moveable@0.38.1) (2022-09-19)\n\n\n### :mega: Other\n\n* publish packages ([2954e37](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/2954e37b9a4e2100a8a55c0d49d279e7f994fd94))\n\n\n\n## [0.38.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.37.4...preact-moveable@0.38.0) (2022-09-15)\n\n\n### :bug: Bug Fix\n\n* fix shadow dom css #729 ([7581afc](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/7581afc13a7c5f9f749b22d7bd3160de0972d112))\n\n\n### :mega: Other\n\n* update packages ([e5774a9](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/e5774a9becd500d154e8d354017dcbd80505ba13))\n\n\n\n## [0.37.4](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.37.3...preact-moveable@0.37.4) (2022-08-24)\n\n\n### :mega: Other\n\n* publish packages ([d57ebb1](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/d57ebb130006c47e3a687d2b417fe3fe7f30149a))\n\n\n\n## [0.37.3](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.37.1...preact-moveable@0.37.3) (2022-08-23)\n\n\n### :mega: Other\n\n* publish packages ([3597bc5](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/3597bc5fd58cdec56fd4ff8916380a6f3709f7f5))\n\n\n\n## [0.37.1](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.37.0...preact-moveable@0.37.1) (2022-08-12)\n\n\n### :mega: Other\n\n* publish packages ([6be7e81](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/6be7e8122b8edd2e323a039cdbb73381de74e14f))\n\n\n\n## [0.37.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.36.3...preact-moveable@0.37.0) (2022-08-06)\n\n\n### :mega: Other\n\n* publish packages ([80005ba](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/80005bada5651afd0c5487a193ab321b22ab1b55))\n\n\n\n## [0.36.3](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.36.2...preact-moveable@0.36.3) (2022-08-03)\n\n\n### :mega: Other\n\n* publish packages ([5468ff7](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/5468ff763bfa3f30e637ce8f504af09152b22c5c))\n\n\n\n## [0.36.2](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.35.0...preact-moveable@0.36.2) (2022-08-01)\n\n\n### :mega: Other\n\n* publish packages ([0076577](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/00765776ba92b5ca691c1aefd1c20687952373d9))\n* publish packages ([ffa0c18](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/ffa0c18bb6970d6f8d88a49db23b11620e704618))\n* publish packages ([958ebac](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/958ebace6032eafb17f1ce366394b440671b45b3))\n\n\n\n## [0.35.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.34.0...preact-moveable@0.35.0) (2022-07-25)\n\n\n### :mega: Other\n\n* publish packages ([63e03d1](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/63e03d1d5f69e56c7df6d357c58d7acd06932e80))\n\n\n\n## [0.34.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.33.2...preact-moveable@0.34.0) (2022-07-21)\n\n\n### :mega: Other\n\n* publish packages ([da24696](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/da24696977c24b6ea54a433192d15bb7ecbc62e9))\n\n\n\n## [0.33.2](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.33.0...preact-moveable@0.33.2) (2022-07-17)\n\n\n### :bug: Bug Fix\n\n* fix files field in package.json #700 ([48ce548](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/48ce548438dd0a7da9f544730b2fc3ab65073775))\n\n\n### :mega: Other\n\n* publish packages ([5d89af5](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/5d89af521d1a288d4d9ca7923e0e9654e8f97d53))\n\n\n\n## [0.33.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.32.0...preact-moveable@0.33.0) (2022-07-17)\n\n\n### :mega: Other\n\n* publish packages ([2a4940f](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/2a4940f74997fae24c7d77c553a6bc6be1301d40))\n\n\n\n## [0.32.0](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.31.9...preact-moveable@0.32.0) (2022-06-09)\n\n\n### :mega: Other\n\n* publish packages ([b432247](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/b4322470bcd3bb05fc67d2c89eedd737f8b4b67a))\n\n\n\n## [0.31.9](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.31.8...preact-moveable@0.31.9) (2022-06-07)\n\n\n### :house: Code Refactoring\n\n* use yarn workspace ([73da295](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/73da295064845a3791782c1777a9c555272a0af0))\n\n\n### :mega: Other\n\n* publish packages ([3530f05](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/3530f0526081b0c010e6c964265b466713f0212e))\n* update demo configuration ([917123c](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/917123cdea2830e8e8f4a8d7b2a99654f16682ef))\n\n\n\n## [0.31.8](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.31.6...preact-moveable@0.31.8) (2022-05-01)\n\n\n### :mega: Other\n\n* update packages versions ([169c484](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/169c48417bb4bc07c59e227c545e379dbf43d15b))\n\n\n\n## [0.31.6](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.31.5...preact-moveable@0.31.6) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([585094f](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/585094f76ec6e1556159ac357d6ac83ebab953ae))\n\n\n\n## [0.31.5](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.31.4...preact-moveable@0.31.5) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([5cd2398](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/5cd2398dbb4dbbda24032641fe5bf111780b75fc))\n\n\n\n## [0.31.4](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/compare/preact-moveable@0.31.3...preact-moveable@0.31.4) (2022-04-26)\n\n\n### :mega: Other\n\n* update packages versions ([a62ee58](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/a62ee58b9bc32f06edc95d55ea28b60c20881ac4))\n* upgrade storybook and typescript ([eff23fd](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/commit/eff23fd7340964ed0e3e6f5930e56558c4d91d18))\n"
  },
  {
    "path": "packages/preact-moveable/LICENSE",
    "content": "MIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
  },
  {
    "path": "packages/preact-moveable/README.md",
    "content": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/logo.png\"/></p>\n<h2 align=\"middle\">Preact Moveable</h2>\n<p align=\"middle\">\n<a href=\"https://www.npmjs.com/package/preact-moveable\" target=\"_blank\"><img src=\"https://img.shields.io/npm/v/preact-moveable.svg?style=flat-square&color=007acc&label=version\" alt=\"npm version\" /></a>\n<img src=\"https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square\"/>\n<a href=\"https://github.com/daybrush/moveable/blob/master/LICENSE\" target=\"_blank\"><img src=\"https://img.shields.io/github/license/daybrush/moveable.svg?style=flat-square&label=license&color=08CE5D\"/></a>\n</p>\n<p align=\"middle\">A Preact Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.</p>\n<p align=\"middle\">\n    <a href=\"https://daybrush.com/moveable\" target=\"_blank\"><strong>Demo</strong></a> /\n    <a href=\"https://daybrush.com/moveable/storybook/\" target=\"_blank\"><strong>Storybook</strong></a> /\n    <a href=\"https://daybrush.com/moveable/release/latest/doc/\" target=\"_blank\"><strong>API</strong></a> /\n    <a href=\"https://github.com/daybrush/scena\" target=\"_blank\"><strong>Main Project</strong></a>\n</p>\n\n<table width=\"100%\" align=\"center\">\n<tr>\n<th colspan=\"4\">Moveable</th>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-draggable\"><strong>Draggable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-resizable\"><strong>Resizable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-scalable\"><strong>Scalable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-rotatable\"><strong>Rotatable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/draggable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/resizable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/scalable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/rotatable.gif\"/>\n</td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-warpable\"><strong>Warpable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html\"><strong>Pinchable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/group--group-draggable-resizable-rotatable\"><strong>Groupable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/snap-bound--snap-guidelines\"><strong>Snappable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/warpable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/pinchable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/groupable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/snappable.gif\"/></td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-clippable\"><strong>Clippable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-roundable\"><strong>Roundable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-origin-draggable\"><strong>OriginDraggable</strong></a></td>\n<td align=\"center\"><a href=\"https://github.com/daybrush/selecto\"><strong>Selecto</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/clippable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/roundable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/origindraggable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/selecto.gif\"/></td>\n</tr>\n</table>\n\n\n## 🔥 Features\n* **Draggable** refers to the ability to drag and move targets.\n* **Resizable** indicates whether the target's width and height can be increased or decreased.\n* **Scalable** indicates whether the target's x and y can be scale of transform.\n* **Rotatable** indicates whether the target can be rotated.\n* **Warpable** indicates whether the target can be warped(distorted, bented).\n* **Pinchable** indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.\n* **Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.\n* **Snappable** indicates whether to snap to the guideline.\n* **OriginDraggable*** indicates Whether to drag origin.\n* **Clippable** indicates Whether to clip the target.\n* **Roundable** indicates Whether to show and drag or double click border-radius.\n* Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)\n* Support Major Browsers\n* Support 3d Transform\n\n## ⚙️ Installation\n```sh\n$ npm i preact-moveable\n```\n\n## 📄 Documents\n\n* [**Moveable Handbook**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md)\n* [**How to use Group**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-group)\n* [**How to use custom CSS**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-custom-css)\n* [**How to make custom able**](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/src/ables/README.md)\n* [API Documentation](https://daybrush.com/moveable/release/latest/doc/)\n\n## 🚀 How to use\n```tsx\nimport Moveable from \"preact-moveable\";\n\nrender() {\n    return (\n        <Moveable\n            target={document.querySelector(\".target\")}\n            container={null}\n            origin={true}\n\n            /* Resize, Scale event edges */\n            edge={false}\n\n            /* draggable */\n            draggable={true}\n            throttleDrag={0}\n            onDragStart={({ target, clientX, clientY }) => {\n                console.log(\"onDragStart\", target);\n            }}\n            onDrag={({\n                target,\n                beforeDelta, beforeDist,\n                left, top,\n                right, bottom,\n                delta, dist,\n                transform,\n                clientX, clientY,\n            }: OnDrag) => {\n                console.log(\"onDrag left, top\", left, top);\n                // target!.style.left = `${left}px`;\n                // target!.style.top = `${top}px`;\n                console.log(\"onDrag translate\", dist);\n                target!.style.transform = transform;\n            }}\n            onDragEnd={({ target, isDrag, clientX, clientY }) => {\n                console.log(\"onDragEnd\", target, isDrag);\n            }}\n\n            /* When resize or scale, keeps a ratio of the width, height. */\n            keepRatio={true}\n\n            /* resizable*/\n            /* Only one of resizable, scalable, warpable can be used. */\n            resizable={true}\n            throttleResize={0}\n            onResizeStart={({ target , clientX, clientY}) => {\n                console.log(\"onResizeStart\", target);\n            }}\n            onResize={({\n                target, width, height,\n                dist, delta,\n                clientX, clientY,\n            }: OnResize) => {\n                console.log(\"onResize\", target);\n                delta[0] && (target!.style.width = `${width}px`);\n                delta[1] && (target!.style.height = `${height}px`);\n            }}\n            onResizeEnd={({ target, isDrag, clientX, clientY }) => {\n                console.log(\"onResizeEnd\", target, isDrag);\n            }}\n\n            /* scalable */\n            /* Only one of resizable, scalable, warpable can be used. */\n            scalable={true}\n            throttleScale={0}\n            onScaleStart={({ target, clientX, clientY }) => {\n                console.log(\"onScaleStart\", target);\n            }}\n            onScale={({\n                target, scale, dist, delta, transform,\n                clientX, clientY,\n            }: OnScale) => {\n                console.log(\"onScale scale\", scale);\n                target!.style.transform = transform;\n            }}\n            onScaleEnd={({ target, isDrag, clientX, clientY }) => {\n                console.log(\"onScaleEnd\", target, isDrag);\n            }}\n\n            /* rotatable */\n            rotatable={true}\n            throttleRotate={0}\n            onRotateStart={({ target, clientX, clientY }) => {\n                console.log(\"onRotateStart\", target);\n            }}\n            onRotate={({\n                target,\n                delta, dist,\n                transform,\n                clientX, clientY,\n            }: onRotate) => {\n                console.log(\"onRotate\", dist);\n                target!.style.transform = transform;\n            }}\n            onRotateEnd={({ target, isDrag, clientX, clientY }) => {\n                console.log(\"onRotateEnd\", target, isDrag);\n            }}\n\n            /* warpable */\n            /* Only one of resizable, scalable, warpable can be used. */\n            /*\n            this.matrix = [\n                1, 0, 0, 0,\n                0, 1, 0, 0,\n                0, 0, 1, 0,\n                0, 0, 0, 1,\n            ]\n            */\n            warpable={true}\n            onWarpStart={({ target, clientX, clientY }) => {\n                console.log(\"onWarpStart\", target);\n            }}\n            onWarp={({\n                target,\n                clientX,\n                clientY,\n                delta,\n                dist,\n                multiply,\n                transform,\n            }) => {\n                console.log(\"onWarp\", target);\n                // target.style.transform = transform;\n                this.matrix = multiply(this.matrix, delta);\n                target.style.transform = `matrix3d(${this.matrix.join(\",\")})`;\n            }}\n            onWarpEnd={({ target, isDrag, clientX, clientY }) => {\n                console.log(\"onWarpEnd\", target, isDrag);\n            }}\n\n            // Enabling pinchable lets you use events that\n            // can be used in draggable, resizable, scalable, and rotateable.\n            pinchable={true}\n            onPinchStart={({ target, clientX, clientY, datas }) => {\n                // pinchStart event occur before dragStart, rotateStart, scaleStart, resizeStart\n                console.log(\"onPinchStart\");\n            }}\n            onPinch={({ target, clientX, clientY, datas }) => {\n                // pinch event occur before drag, rotate, scale, resize\n                console.log(\"onPinch\");\n            }}\n            onPinchEnd={({ isDrag, target, clientX, clientY, datas }) => {\n                // pinchEnd event occur before dragEnd, rotateEnd, scaleEnd, resizeEnd\n                console.log(\"onPinchEnd\");\n            }}\n        />\n    )\n}\n\n```\n\n## ⚙️ Developments\n### `npm start`\n\nRuns the app in the development mode.<br/>\nOpen `demo/index.html` file.\n\n\n\n## ⭐️ Show Your Support\nPlease give a ⭐️ if this project helped you!\n\n\n## 👏 Contributing\n\nIf you have any questions or requests or want to contribute to `moveable` or other packages, please write the [issue](https://github.com/daybrush/moveable/issues) or give me a Pull Request freely.\n\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](https://github.com/daybrush/moveable/blob/master/CONTRIBUTING.md)].\n\n<a href=\"https://github.com/daybrush/moveable/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=daybrush/moveable\" />\n</a>\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/moveable/issues) on GitHub.\n\n## Sponsors\n<p align=\"center\">\n\t<a href=\"https://daybrush.com/sponsors/sponsors.svg\">\n\t\t<img src=\"https://daybrush.com/sponsors/sponsors.svg\"/>\n\t</a>\n</p>\n\n\n## 📝 License\n\nThis project is [MIT](https://github.com/daybrush/moveable/blob/master/LICENSE) licensed.\n\n```\nMIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n"
  },
  {
    "path": "packages/preact-moveable/demo/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Preact App</title>\n    <link rel=\"stylesheet\" href=\"./dist/index.css\" />\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n    <!--\n      This HTML file is a template.\n      If you open it directly in the browser, you will see an empty page.\n\n      You can add webfonts, meta tags, or analytics to this file.\n      The build step will place the bundled scripts into the <body> tag.\n\n      To begin the development, run `npm start` or `yarn start`.\n      To create a production bundle, use `npm run build` or `yarn build`.\n    -->\n  </body>\n  <script src=\"./dist/index.js\"></script>\n</html>\n"
  },
  {
    "path": "packages/preact-moveable/groupable.md",
    "content": "## 🚀 How to use Groupable\n* **Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.\n\n* [API Documentation](https://daybrush.com/moveable/release/latest/doc/)\n* **draggable**\n    * [onDragGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:dragGroupStart)\n    * [onDragGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:dragGroup)\n    * [onDragGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:dragGroupEnd)\n* **resizable**\n    * [onResizeGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:resizeGroupStart)\n    * [onResizeGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:resizeGroup)\n    * [onResizeGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:resizeGroupEnd)\n* **scalable**\n    * [onScaleGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:scaleGroupStart)\n    * [onScaleGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:scaleGroup)\n    * [onScaleGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:rscaleGroupEnd)\n* **rotatable**\n    * [onRotateGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:rotateGroupStart)\n    * [onRotateGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:rotateGroup)\n    * [onRotateGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:rotateGroupEnd)\n* **pinchable**\n    * [onPinchGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:pinchGroupStart)\n    * [onPinchGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:pinchGroup)\n    * [onPinchGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:pinchGroupEnd)\n\n\n```tsx\nimport Moveable from \"preact-moveable\";\n\nrender() {\n    return (\n        <Moveable\n            /* multiple targets */\n            target={[].slice.call(document.querySelectorAll(\".target\"))}\n            container={null}\n            origin={true}\n\n            /* Resize event edges */\n            edge={false}\n\n            /* draggable */\n            draggable={true}\n            throttleDrag={0}\n            onDragGroupStart={({ targets }) => {\n                console.log(\"onDragGroupStart\", targets);\n            }}\n            onDragGroup={({ targets, events }) => {\n                console.log(\"onDragGroup\", targets);\n\n                events.forEach(ev => {\n                    // drag event\n                    console.log(\"onDrag left, top\", ev.left, ev.top);\n                    // ev.target!.style.left = `${ev.left}px`;\n                    // ev.target!.style.top = `${ev.top}px`;\n                    console.log(\"onDrag translate\", ev.dist);\n                    ev.target!.style.transform = ev.transform;)\n                });\n            }}\n            onDragGroupEnd={({ targets, isDrag, clientX, clientY }) => {\n                console.log(\"onDragGroupEnd\", target, isDrag);\n            }}\n\n            /* When resize or scale, keeps a ratio of the width, height. */\n            keepRatio={true}\n\n            /* resizable*/\n            /* Only one of resizable, scalable, warpable can be used. */\n            resizable={true}\n            throttleResize={0}\n            onResizeGroupStart={({ targets, clientX, clientY }) => {\n                console.log(\"onResizeGroupStart\", targets);\n            }}\n            onResizeGroup={({ targets, direction }) => {\n                console.log(\"onResizeGroup\", targets);\n\n                e.events.forEach(ev => {\n                    const offset = [\n                        direction[0] < 0 ? -ev.delta[0] : 0,\n                        direction[1] < 0 ? -ev.delta[1] : 0,\n                    ];\n                    // ev.drag is a drag event that occurs when the group resize.\n                    const left = offset[0] + ev.drag.beforeDist[0];\n                    const top = offset[1] + ev.drag.beforeDist[1];\n                    const width = ev.width;\n                    const top = ev.top;\n                });\n            }}\n            onResizeGroupEnd={({ targets, isDrag, clientX, clientY }) => {\n                console.log(\"onResizeGroupEnd\", targets, isDrag);\n            }}\n\n            /* scalable */\n            /* Only one of resizable, scalable, warpable can be used. */\n            scalable={true}\n            throttleScale={0}\n            onScaleGroupStart={({ targets, clientX, clientY }) => {\n                console.log(\"onScaleGroupStart\", targets);\n            }}\n            onScale={({\n                targets,\n                events,\n            }) => {\n                console.log(\"onScaleGroup\", targets);\n\n                events.forEach(ev => {\n                    const target = ev.target;\n                    // ev.drag is a drag event that occurs when the group scale.\n                    const left = ev.drag.beforeDist[0];\n                    const top = ev.drag.beforeDist[1];\n                    const scaleX = ev.scale[0];\n                    const scaleY = ev.scale[1];\n                });\n                target!.style.transform = transform;\n            }}\n            onScaleEnd={({ target, isDrag, clientX, clientY }) => {\n                console.log(\"onScaleGroupEnd\", target, isDrag);\n            }}\n\n            /* rotatable */\n            rotatable={true}\n            throttleRotate={0}\n            onRotateGroupStart={({ targets, clientX, clientY }) => {\n                console.log(\"onRotateGroupStart\", targets);\n            }}\n            onRotateGroup={({\n                targets,\n                events\n                delta, dist,\n            }) => {\n                e.events.forEach(ev => {\n                    const target = ev.target;\n                    // ev.drag is a drag event that occurs when the group rotate.\n                    const left = ev.drag.beforeDist[0];\n                    const top = ev.drag.beforeDist[1];\n                    const deg = ev.beforeDist;\n                });\n\n            }}\n            onRotateGroupEnd={({ targets, isDrag, clientX, clientY }) => {\n                console.log(\"onRotateGroupEnd\", targets, isDrag);\n            }}\n\n            // Enabling pinchable lets you use events that\n            // can be used in draggable, resizable, scalable, and rotateable.\n            pinchable={true}\n            onPinchGroupStart={({ targets, clientX, clientY, datas }) => {\n                // pinchGroupStart event occur before dragGroupStart, rotateGroupStart, scaleGroupStart, resizeGroupStart\n                console.log(\"onPinchGroupStart\");\n            }}\n            onPinchGroup={({ targets, clientX, clientY, datas }) => {\n                // pinchGroup event occur before dragGroup, rotateGroup, scaleGroup, resizeGroup\n                console.log(\"onPinchGroup\");\n            }}\n            onPinchGroupEnd={({ isDrag, targets, clientX, clientY, datas }) => {\n                // pinchGroupEnd event occur before dragGroupEnd, rotateGroupEnd, scaleGroupEnd, resizeGroupEnd\n                console.log(\"onPinchGroupEnd\");\n            }}\n        />\n    );\n}\n```\n"
  },
  {
    "path": "packages/preact-moveable/package.json",
    "content": "{\n    \"name\": \"preact-moveable\",\n    \"version\": \"0.55.0\",\n    \"description\": \"A Preact Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Pinchable, Groupable, Snappable.\",\n    \"main\": \"./dist/moveable.cjs.js\",\n    \"module\": \"./dist/moveable.esm.js\",\n    \"sideEffects\": false,\n    \"types\": \"declaration/index.d.ts\",\n    \"scripts\": {\n        \"start\": \"open ./demo/index.html && rollup -c rollup.config.demo.js -w\",\n        \"build\": \"rollup -c && npm run declaration && print-sizes ./dist \",\n        \"declaration\": \"rm -rf declaration && tsc -p tsconfig.declaration.json\"\n    },\n    \"files\": [\n        \"./*\",\n        \"src/*\",\n        \"dist/*\",\n        \"declaration/*\"\n    ],\n    \"keywords\": [\n        \"moveable\",\n        \"resizable\",\n        \"scalable\",\n        \"draggable\",\n        \"rotatable\",\n        \"groupable\",\n        \"movable\",\n        \"warpable\",\n        \"pinchable\",\n        \"snappable\",\n        \"throttle\",\n        \"ratio\",\n        \"dom\",\n        \"resize\",\n        \"scale\",\n        \"drag\",\n        \"move\",\n        \"rotate\",\n        \"warp\",\n        \"preact\",\n        \"pinch\",\n        \"snap\"\n    ],\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/daybrush/moveable/blob/master/packages/preact-moveable\"\n    },\n    \"author\": \"Daybrush\",\n    \"license\": \"MIT\",\n    \"bugs\": {\n        \"url\": \"https://github.com/daybrush/moveable/issues\"\n    },\n    \"homepage\": \"https://daybrush.com/moveable\",\n    \"devDependencies\": {\n        \"@daybrush/builder\": \"^0.2.4\",\n        \"keycon\": \"^0.3.0\",\n        \"preact\": \"^10.0.0\",\n        \"print-sizes\": \"^0.2.0\",\n        \"pvu\": \"^0.3.1\",\n        \"rollup-plugin-css-bundle\": \"^1.0.4\",\n        \"rollup-plugin-preact\": \"^0.5.2\",\n        \"typescript\": \"^4.8 <4.9\"\n    },\n    \"dependencies\": {\n        \"preact-css-styled\": \"^1.1.9\",\n        \"react-moveable\": \"~0.56.0\"\n    }\n}\n"
  },
  {
    "path": "packages/preact-moveable/rollup.config.demo.js",
    "content": "const builder = require(\"@daybrush/builder\");\nconst css = require(\"rollup-plugin-css-bundle\");\nconst preact = require(\"rollup-plugin-preact\");\n\n\n\n\nmodulex.exports = builder({\n    input: \"./src/demo/index.tsx\",\n    tsconfig: \"./tsconfig.build.json\",\n    sourcemap: false,\n    format: \"umd\",\n    output: \"./demo/dist/index.js\",\n    name: \"app\",\n    exports: \"named\",\n    plugins: [\n        css({ output: \"./demo/dist/index.css\" }),\n        preact({\n            noPropTypes: true,\n            noEnv: true,\n            noReactIs: true,\n            resolvePreactCompat: true,\n            // usePreactX: true,\n        }),\n    ],\n});\n"
  },
  {
    "path": "packages/preact-moveable/rollup.config.js",
    "content": "const builder = require(\"@daybrush/builder\");\nconst preact = require(\"rollup-plugin-preact\");\n\n\nconst defaultOptions = {\n    sourcemap: false,\n    tsconfig: \"tsconfig.build.json\",\n    typescript2: true,\n    external: {\n        \"@daybrush/utils\": \"utils\",\n        \"gesto\": \"Gesto\",\n        \"preact\": \"preact\",\n        \"preact/compat\": \"preact/compat\",\n        \"preact-compat\": \"preact-compat\",\n        \"framework-utils\": \"framework-utils\",\n        \"preact-css-styled\": \"preact-css-styled\",\n        \"@egjs/agent\": \"eg.Agent\",\n        \"@egjs/children-differ\": \"eg.ChildrenDiffer\",\n        \"@egjs/list-differ\": \"eg.ListDiffer\",\n        \"@moveable/matrix\": \"@moveable/matrix\",\n        \"@scena/dragscroll\": \"@scena/dragscroll\",\n        \"css-to-mat\": \"css-to-mat\",\n        \"overlap-area\": \"overlap-area\",\n        \"@scena/matrix\": \"@scena/matrix\",\n    },\n    exports: \"named\",\n    plugins: [\n        preact({\n            noPropTypes: false,\n            noEnv: false,\n            noReactIs: false,\n            usePreactX: true,\n            // resolvePreactCompat: true,\n            aliasModules: {\n                \"react-css-styled\": \"preact-css-styled\",\n            },\n        }),\n    ],\n};\n\nmodule.exports = builder([\n    {\n        ...defaultOptions,\n        input: \"src/preact-moveable/Moveable.ts\",\n        output: \"./dist/moveable.esm.js\",\n        format: \"es\",\n    },\n    {\n        ...defaultOptions,\n        input: \"src/preact-moveable/Moveable.ts\",\n        output: \"./dist/moveable.cjs.js\",\n        format: \"cjs\",\n        exports: \"default\",\n    },\n]);\n"
  },
  {
    "path": "packages/preact-moveable/src/demo/App.css",
    "content": ".App {\n  text-align: center;\n  transform-origin: 30% 50%;\n  transform: scaleX(-0.8) translateY(30px);\n}\n.App * {\n  position: relative;\n}\n.App-logo {\n  position: relative;\n  /* animation: App-logo-spin infinite 20s linear; */\n  transform: rotate(18deg);\n  width: 300px;\n  height: 200px;\n}\n.App code {\n  display: inline-block;\n}\nimg {\n  background: #f55;\n}\n.App-header {\n  background-color: #282c34;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(10px + 2vmin);\n  transform: rotate(-9deg);\n  color: white;\n}\n\n.App-link {\n  color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n"
  },
  {
    "path": "packages/preact-moveable/src/demo/App.tsx",
    "content": "\nimport { h, Component } from \"preact\";\nimport Moveable, { MoveableInterface } from \"../preact-moveable\";\nimport \"./App.css\";\nimport { ref } from \"framework-utils\";\nimport KeyController from \"keycon\";\n\nclass App extends Component {\n    public moveable: MoveableInterface;\n    public state = {\n        target: null,\n        isResizable: true,\n    };\n    public deg = 18;\n    public render() {\n        const selectedTarget = this.state.target;\n        const isResizable = this.state.isResizable;\n\n        return (\n            <div>\n                <Moveable\n                    target={selectedTarget}\n                    container={document.body}\n                    ref={ref(this, \"moveable\")}\n                    draggable={true}\n                    scalable={!isResizable}\n                    resizable={isResizable}\n                    onRotate={({ target, transform }) => {\n                        target!.style.transform = transform;\n                    }}\n                    onDrag={({ target, transform }) => {\n                        // target!.style.left = `${left}px`;\n                        // target!.style.top = `${top}px`;\n                        target!.style.transform = transform;\n                    }}\n                    onScale={({ target, transform }) => {\n                        target!.style.transform = transform;\n                    }}\n                    onResize={({ target, width, height, delta }) => {\n                        delta[0] && (target!.style.width = `${width}px`);\n                        delta[1] && (target!.style.height = `${height}px`);\n                    }}\n                />\n                <div className=\"App\" onMouseDown={this.onClick}>\n\n                    <header className=\"App-header\">\n                        <img src=\"./logo.svg\" className=\"App-logo\" alt=\"logo\" />\n                        <p>\n                            Edit <code>src/App.tsx</code> and save to reload.\n                        </p>\n                        <a\n                            className=\"App-link\"\n                            rel=\"noopener noreferrer\"\n                        >\n                            Learn React\n                        </a>\n                    </header>\n                </div>\n            </div>\n        );\n    }\n    public onClick = (e: any) => {\n        console.log(\"?\", e.target.className);\n        e.preventDefault();\n\n        const keycon = new KeyController(window);\n\n        keycon.keydown(\"shift\", () => {\n            this.setState({ isResizable: false });\n        }).keyup(\"shift\", () => {\n            this.setState({ isResizable: true });\n        })\n        if (!this.moveable.isMoveableElement(e.target)) {\n            if (this.state.target === e.target) {\n                this.moveable.updateRect();\n            } else {\n                this.setState({\n                    target: e.target,\n                });\n            }\n        }\n    }\n}\n\nexport default App;\n"
  },
  {
    "path": "packages/preact-moveable/src/demo/index.tsx",
    "content": "import { render, h } from \"preact\";\nimport App from \"./App\";\n\nrender(<App />, document.getElementById(\"root\")!);\n"
  },
  {
    "path": "packages/preact-moveable/src/preact-moveable/Moveable.ts",
    "content": "import Moveable from \"react-moveable\";\nimport Preact from \"preact\";\nimport { PreactMoveableInterface } from \"./types\";\n\nexport default Moveable as any as new (...args: any[]) => PreactMoveableInterface;\n"
  },
  {
    "path": "packages/preact-moveable/src/preact-moveable/index.ts",
    "content": "import Moveable from \"./Moveable\";\n\nexport * from \"react-moveable/types\";\nexport * from \"./types\";\nexport default Moveable;\n"
  },
  {
    "path": "packages/preact-moveable/src/preact-moveable/types.ts",
    "content": "import { MoveableProps, MoveableState, MoveableInterface } from \"react-moveable/types\";\nimport { Component } from \"preact\";\n\nexport type PreactMoveableInterface = {\n    [key in Exclude<keyof MoveableInterface, \"setState\">]: MoveableInterface[key]\n} & Component<MoveableProps, MoveableState>;\n"
  },
  {
    "path": "packages/preact-moveable/tsconfig.build.json",
    "content": "{\n    \"extends\": \"./tsconfig\",\n    \"compilerOptions\": {\n      \"jsx\": \"react\",\n      \"jsxFactory\": \"h\",\n    },\n  }\n"
  },
  {
    "path": "packages/preact-moveable/tsconfig.declaration.json",
    "content": "{\n    \"extends\": \"./tsconfig\",\n    \"compilerOptions\": {\n        \"allowJs\": false,\n        \"noEmit\": false,\n        \"isolatedModules\": false,\n        \"removeComments\": true,\n        \"declaration\": true,\n        \"emitDeclarationOnly\": true,\n        \"declarationDir\": \"declaration\"\n    },\n    \"include\": [\n        \"./src/preact-moveable/**/*\"\n    ]\n}\n"
  },
  {
    "path": "packages/preact-moveable/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"outDir\": \"./outjs/\",\n    \"esModuleInterop\": false,\n    \"sourceMap\": true,\n    \"module\": \"esnext\",\n    \"target\": \"es5\",\n    \"experimentalDecorators\": true,\n    \"skipLibCheck\": true,\n    \"moduleResolution\": \"node\",\n    \"jsx\": \"preserve\",\n    \"lib\": [\n      \"es2015\",\n      \"dom\"\n    ],\n    \"allowJs\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"strictNullChecks\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true\n  },\n  \"include\": [\n    \"./src/**/*.ts\"\n  ]\n}\n"
  },
  {
    "path": "packages/preact-moveable/tslint.json",
    "content": "{\n\t\"defaultSeverity\": \"error\",\n\t\"extends\": [\n\t\t\"tslint:recommended\"\n\t],\n\t\"rules\": {\n\t\t\"typedef\": [true, \"parameter\"],\n\t\t\"jsdoc-format\": false,\n\t\t\"forin\": false,\n\t\t\"no-console\": false,\n\t\t\"no-any\": false,\n\t\t\"interface-name\": false,\n\t\t\"indent\": [\n\t\t\ttrue,\n\t\t\t\"spaces\",\n\t\t\t4\n\t\t],\n\t\t\"ordered-imports\": false,\n\t\t\"object-literal-sort-keys\": false,\n\t\t\"no-unused-expression\": false,\n\t\t\"arrow-parens\": [\n\t\t\ttrue,\n\t\t\t\"ban-single-arg-parens\"\n\t\t],\n\t\t\"max-line-length\": [\n\t\t\ttrue,\n\t\t\t{\n\t\t\t\t\"limit\": 120,\n\t\t\t\t\"ignore-pattern\": \"(\\\\* @)|//\"\n\t\t\t}\n\t\t],\n\t\t\"trailing-comma\": [\n\t\t\ttrue,\n\t\t\t{\n\t\t\t\t\"multiline\": {\n\t\t\t\t\t\"objects\": \"always\",\n\t\t\t\t\t\"arrays\": \"always\",\n\t\t\t\t\t\"functions\": \"always\",\n\t\t\t\t\t\"typeLiterals\": \"ignore\"\n\t\t\t\t},\n\t\t\t\t\"esSpecCompliant\": true\n\t\t\t}\n\t\t]\n\t}\n}"
  },
  {
    "path": "packages/react-moveable/.eslintignore",
    "content": "node_modules\ndist\n*.js"
  },
  {
    "path": "packages/react-moveable/.eslintrc",
    "content": "{\n    \"root\": true,\n    \"parser\": \"@typescript-eslint/parser\",\n    \"plugins\": [\n        \"@typescript-eslint\",\n        \"import\"\n    ],\n    \"extends\": [\n        \"eslint:recommended\",\n        \"plugin:@typescript-eslint/eslint-recommended\",\n        \"plugin:@typescript-eslint/recommended\",\n        \"plugin:react/recommended\"\n    ],\n    \"rules\": {\n        \"no-console\": \"error\",\n        \"@typescript-eslint/explicit-function-return-type\": \"off\",\n        \"import/no-webpack-loader-syntax\": \"off\",\n        \"no-unused-vars\": \"off\",\n        \"@typescript-eslint/no-var-requires\": \"off\",\n        \"@typescript-eslint/no-this-alias\": \"off\",\n        \"@typescript-eslint/no-inferrable-types\": [\n            \"error\",\n            {\n                \"ignoreParameters\": true,\n                \"ignoreProperties\": false\n            }\n        ],\n        \"@typescript-eslint/no-unused-vars\": [\n            \"error\"\n        ],\n        \"@typescript-eslint/explicit-module-boundary-types\": \"off\",\n        \"@typescript-eslint/no-explicit-any\": \"off\",\n        \"@typescript-eslint/no-non-null-assertion\": \"off\",\n        \"@typescript-eslint/no-empty-interface\": \"off\",\n        \"@typescript-eslint/ban-types\": \"off\",\n        \"@typescript-eslint/no-empty-function\": \"off\",\n        \"@typescript-eslint/indent\": [\n            \"error\",\n            4\n        ],\n        \"@typescript-eslint/adjacent-overload-signatures\": \"off\",\n        \"max-len\": [\n            \"error\",\n            {\n                \"code\": 120,\n                \"comments\": 400,\n                \"ignoreTemplateLiterals\": true,\n                \"ignorePattern\": \"^\\\\s*type\\\\s.+=\\\\s*\"\n            }\n        ],\n        \"arrow-parens\": \"off\",\n        \"no-empty-interface\": \"off\",\n        \"comma-dangle\": [\n            \"error\",\n            \"always-multiline\"\n        ],\n        \"semi\": [\n            \"error\",\n            \"always\"\n        ]\n    }\n}\n"
  },
  {
    "path": "packages/react-moveable/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nstories/**/vue3/\nstories/**/vue2/\nstories/**/svelte/\nstories/**/script/\nstories/**/lit/\nstories/**/angular/\n.nyc_output\ntest-static\n__snapshots__\n*.stories.mdx\n"
  },
  {
    "path": "packages/react-moveable/.npmignore",
    "content": "node_modules/\n*.DS_Store\n.DS_Store\ndoc/\ntemplate/\nexample/\nkarma.conf.js\ntest/\nmocha.opts\nGruntfile.js\nwebpack.*.js\n.travis.yml\npackages\nrelease/\ndemo/\ncoverage/\ndist/report.html\nrollup-plugin-visualizer/\noutjs/\n.scene_cache\n*.mp3\n*.mp4\nstorybook/\nsrc/\npublic/\ngroupable.md\ntest/\nsrc/\npublic/\nstories/\n.storybook\n"
  },
  {
    "path": "packages/react-moveable/.storybook/main.js",
    "content": "require(\"./readme\");\n\nconst { DefinePlugin } = require(\"webpack\");\nconst path = require(\"path\");\nconst ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\n\nmodule.exports = {\n    features: {\n        interactionsDebugger: true,\n        previewMdx2: true, // 👈 MDX 2 enabled here\n    },\n    typescript: {\n        reactDocgen: \"react-docgen-typescript\",\n        reactDocgenTypescriptOptions: {\n            shouldExtractLiteralValuesFromEnum: true,\n            propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),\n        },\n    },\n    webpackFinal: (config) => {\n        const definePlugin = new DefinePlugin({\n            SKIP_TEST: process.env.SKIP_TEST,\n            EXEC_TEST: process.env.EXEC_TEST,\n        });\n        config.module.rules.push({\n            test: /\\.(ts|tsx)$/,\n            loader: 'ts-loader',\n            options: {\n                // disable type checker - we will use it in fork plugin\n                transpileOnly: true\n            },\n        });\n        config.plugins.push(definePlugin);\n        config.plugins.push(new ForkTsCheckerWebpackPlugin());\n        config.resolve.alias[\"@/stories\"] = path.resolve(__dirname, \"../stories\");\n        config.resolve.alias[\"@/react-moveable\"] = path.resolve(__dirname, \"../src\");\n        config.resolve.alias[\"@/helper\"] = path.resolve(__dirname, \"../../helper/src\");\n        config.resolve.alias[\"@moveable/helper\"] = path.resolve(__dirname, \"../../helper/src\");\n\n\n        return config;\n    },\n    stories: [\n        \"../stories/**/*.stories.mdx\",\n        \"../stories/**/*.stories.@(js|jsx|ts|tsx)\"\n    ],\n    addons: [\n        \"@storybook/addon-google-analytics\",\n        {\n            name: '@storybook/addon-docs',\n            options: { configureJSX: true },\n        },\n        \"storybook-addon-preview/register\",\n        \"@storybook/addon-controls/register\",\n        \"@storybook/addon-viewport/register\",\n        \"storybook-dark-mode/register\",\n        \"@storybook/addon-links\",\n        \"@storybook/addon-essentials\",\n        \"@storybook/addon-interactions\",\n        // {\n        //     name: \"@storybook/addon-coverage\",\n        //     options: {\n        //         exclude: [\n        //             \"**/stories/**\",\n        //             \"stories/**\",\n        //             \"*{App}.tsx\",\n        //         ],\n        //     },\n        // },\n    ],\n    \"framework\": \"@storybook/react\",\n};\n"
  },
  {
    "path": "packages/react-moveable/.storybook/manager.js",
    "content": "import { addons } from \"@storybook/addons\";\n\naddons.setConfig({\n    // showRoots: false,\n    panelPosition: \"right\",\n});\n\n\nwindow.STORYBOOK_GA_ID = \"G-TRBNXHQ0ZF\"\nwindow.STORYBOOK_REACT_GA_OPTIONS = {}\n"
  },
  {
    "path": "packages/react-moveable/.storybook/preview-head.html",
    "content": "<style>\n    #docs-root a:has(img)+a:has(img),\n    #docs-root a:has(img)+img,\n    #docs-root img+a:has(img) {\n        margin-left: 5px;\n    }\n\n    #docs-root table {\n        border-collapse: collapse;\n        border: 1px solid #ddd;\n    }\n\n    #docs-root tr+tr td {\n        border-top: 1px solid #ddd;\n    }\n\n    #docs-root td+td {\n        border-left: 1px solid #ddd;\n    }\n\n    #docs-root th,\n    #docs-root td {\n        padding: 7px 0px;\n    }\n</style>\n"
  },
  {
    "path": "packages/react-moveable/.storybook/preview.jsx",
    "content": "import * as React from \"react\";\nimport { themes } from \"@storybook/theming\";\nimport {\n    INITIAL_VIEWPORTS,\n    // or MINIMAL_VIEWPORTS,\n} from \"@storybook/addon-viewport\";\n\nimport {\n    Title,\n    Primary,\n    PRIMARY_STORY,\n    ArgsTable,\n    DocsContainer,\n    DocsContext,\n} from \"@storybook/addon-docs\";\n\n// or global addParameters\nexport const parameters = {\n    options: {\n        storySort: (a, b) => {\n\n            return a[1].kind === b[1].kind\n                ? 0\n                : a[2].fileName.localeCompare(b[2].fileName, undefined, { numeric: true });\n        },\n    },\n    docs: {\n        container: DocsContainer,\n        page: () => {\n            const context = React.useContext(DocsContext);\n\n            return <>\n                <Title />\n                <h2 className={\"sbdocs-subtitle\"}>{context.name}</h2>\n                <Primary />\n                <ArgsTable story={PRIMARY_STORY} />\n            </>;\n        },\n    },\n    controls: {\n        passArgsFirst: true,\n        expanded: true,\n        hideNoControlsWarning: true,\n    },\n    viewport: {\n        viewports: {\n            ...INITIAL_VIEWPORTS,\n        },\n    },\n    darkMode: {\n        stylePreview: true,\n        // Override the default light theme\n        light: { ...themes.normal },\n        // Override the default dark theme\n        dark: { ...themes.dark  },\n    },\n};\n"
  },
  {
    "path": "packages/react-moveable/.storybook/readme.js",
    "content": "const path = require(\"path\");\nconst fs = require(\"fs\");\n\nconst readmeText = fs.readFileSync(path.resolve(__dirname, \"../../../README.md\"), {\n    encoding: \"utf-8\",\n  });\n\n  fs.mkdirSync(path.resolve(__dirname, \"../stories/0-Introduction\"), {\n    recursive: true,\n  });\nfs.writeFileSync(path.resolve(__dirname, \"../stories/0-Introduction/readme.stories.mdx\"), `\nimport { Meta } from \"@storybook/addon-docs\";\n\n<Meta title=\"Introduction\" />\n\n${readmeText}`, {\n  encoding: \"utf-8\",\n});\n"
  },
  {
    "path": "packages/react-moveable/.storybook/test-runner.js",
    "content": "const customSnapshotsDir = `${process.cwd()}/__snapshots__`;\n\nmodule.exports = {\n    async postRender(page, context) {\n        if (!process.env.SKIP_TEST) {\n            return;\n        }\n        // If you want to take screenshot of multiple browsers, use\n        // page.context().browser().browserType().name() to get the browser name to prefix the file name\n        await page.screenshot({ path: `${customSnapshotsDir}/${context.id}.png` });\n    },\n};\n"
  },
  {
    "path": "packages/react-moveable/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [0.56.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.55.0...react-moveable@0.56.0) (2023-12-03)\n\n\n### :rocket: New Features\n\n* add snapHorizontalThreshold, snapVerticalThreshold #1044 ([6cd5114](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/6cd51145ec81b3294c0ba9968d6530748ae46beb))\n* expose gesto preventRightClick and preventWheelClick props (#1040) ([9f4c9f4](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/9f4c9f452470026ecea3f7a0b1aff91c22444868))\n\n\n### :bug: Bug Fix\n\n* fix dragTarget in control box #1054 ([f4e3232](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/f4e3232c787f50f9a9947c45307870e5ad5c87ef))\n* fix names ([7722add](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/7722addf758da09480808f1e03c5b9e3061f855b))\n* fix svg origin for viewbox and foreignbox #1048 ([6c27742](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/6c2774205077fa982bf140a413fdef1b6f2f8a7a))\n* updateSelector's update #1055 ([fc9da03](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/fc9da032daa1c721cf47e3c97434f698849137ad))\n\n\n### :house: Code Refactoring\n\n* let the target be passed into dragStart (#1050) ([786fc0c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/786fc0cd4cb3f3f67719740aa953231b7d410815))\n\n\n### :mega: Other\n\n* publish packages ([f9a0eed](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/f9a0eed9db93c1fa3522138e9c7604287f0ce21f))\n* update gesto version ([4d12e48](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/4d12e484ea08bc1630c6a301b86c34a5d7a023c2))\n\n\n\n## [0.55.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.54.2...react-moveable@0.55.0) (2023-10-28)\n\n\n### :rocket: New Features\n\n* add snapGridAll prop #990 ([7ecd0d0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/7ecd0d04595b72b882a1a69a4676dc140bb9eb21))\n\n\n### :bug: Bug Fix\n\n* fix line break #1001 ([5f68143](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5f68143289bd25c505d40684662a071b39417727))\n* fix nested svg #1011 ([33366b5](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/33366b53c4871b1b7676c234168d1ef0cb0ba3c3))\n* fix throttleDrag for group ([5f6d392](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5f6d392f4731a4728b7e04e856d4a4805f7ac89b))\n* fix width scale for keepRatio #1020 ([8dd5c36](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/8dd5c3613faac796021a6057d4a54ce660eac329))\n* remove console.log ([56f99ea](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/56f99ea6652f23becfd88596d84194fcbaec2277))\n\n\n### :mega: Other\n\n* publish packages ([1a65454](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/1a654540f1390648d7e4db910d0673acff190007))\n\n\n\n## [0.54.2](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.54.1...react-moveable@0.54.2) (2023-09-19)\n\n\n### :bug: Bug Fix\n\n* fix roundable shadow condition ([adb09b7](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/adb09b7396271e7de7031c1d621d1232f3751a9b))\n* fix scrollable infinite loop #1015 ([b725981](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b725981982ceed7914b14be8e5ee7908d5ab6e22))\n* support transform-box: fill-box (#1012) ([7a0ed4d](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/7a0ed4d8dd5463a85298860d6924b3bd132be8a6))\n\n\n### :mega: Other\n\n* publish packages ([ecf15ab](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/ecf15ab399bb4d9f6752cb84b0d6b06d15e5c426))\n\n\n\n## [0.54.1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.54.0...react-moveable@0.54.1) (2023-07-11)\n\n\n### :bug: Bug Fix\n\n* fix individual transforms for 2d #969 ([7e205f4](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/7e205f47c239993029de250d7848fc198261a5e3))\n\n\n### :mega: Other\n\n* publish packages ([27bda8e](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/27bda8ea3d9751847fc073519a832b3464242d3c))\n\n\n\n## [0.54.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.53.2...react-moveable@0.54.0) (2023-07-09)\n\n\n### :rocket: New Features\n\n* add `onBound` event #970 ([c9db51f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/c9db51f8ef5f7a0d262323e381ec25ad5bfc391d))\n* add dragTargetSelf prop #972 ([4537dfe](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/4537dfea5ba1652188b026b6bffead4737c36572))\n* add elementDirection property in guideline #949 ([1073ebc](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/1073ebcf1302259ce3c54ee744a76b1e85c88f1f))\n\n\n### :bug: Bug Fix\n\n* fix watchValue ([644f19c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/644f19cb640415ee11072cfecbea4811ff2de327))\n\n\n### :mega: Other\n\n* publish packages ([25cae7f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/25cae7f46aa28dcb948a8690fd6062b7e15d72ff))\n\n\n\n## [0.53.2](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.53.1...react-moveable@0.53.2) (2023-07-04)\n\n\n### :bug: Bug Fix\n\n* support individual transform #969 ([1b58541](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/1b585412ea1c909bfbdcf094ecdde21024d895a0))\n* support react18 strict mode #962 ([710f019](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/710f0190bd072804a224e715e353ff55e3427095))\n\n\n### :mega: Other\n\n* publish packages ([9467cf4](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/9467cf45fd2871573df8886eb134c67a8b0f916d))\n\n\n\n## [0.53.1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.52.1...react-moveable@0.53.1) (2023-07-02)\n\n\n### :rocket: New Features\n\n* add `getMoveables` with request #940 ([b926985](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b92698522e1b6f20e40ba7d82560d00d3c6a6a97))\n* support dragStart with individualGroupable #967 ([d470f64](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/d470f64a45362a8183d2f1ab572a50bc4d9f2b5e))\n\n\n### :bug: Bug Fix\n\n* fix choppy reisze #961 ([c8f9637](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/c8f9637ae319870cc6d4e9bf68eb98820f27f25e))\n* fix group's dragTargetRef #953 ([85d17d7](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/85d17d77751d474db88b7238dd39baccd6b7a78d))\n* fix translate(-50%, -50%) #963 ([6577ee9](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/6577ee9707246eb0f59e1bb685d96277f8feaa6d))\n* individualGroupable request #967 ([daf6008](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/daf60087a82858d18ee260645e96ebb363b073de))\n\n\n### :mega: Other\n\n* publish packages ([5697e80](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5697e8050f486a83ea409b856d1f670759ba6910))\n* publish packages ([5e76998](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5e76998ba0a90efcbb0c2e4fe8030ca47a1842d4))\n\n\n\n## [0.52.1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.52.0...react-moveable@0.52.1) (2023-06-28)\n\n\n### :bug: Bug Fix\n\n* fix dragTarget's unset #960 ([8e60b38](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/8e60b385b8931a3aab953b315618ec15f9360611))\n* fix helper alias ([ee5bf0b](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/ee5bf0b958a49694e4eed111755d1ef5ba5c6dc9))\n\n\n### :house: Code Refactoring\n\n* change rollup to vite ([213f346](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/213f346257289eaec6f3f6f618e8fba33859c384))\n\n\n### :mega: Other\n\n* fix ts-loader version ([429ae5f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/429ae5faa48fa9bedfc2463c1aaaebc58575bf80))\n* fix update modules ([bb608dc](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/bb608dc0d1d9eb13e538d1026c05809d89757b1d))\n* publish packages ([510d7cd](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/510d7cdf76eef4a17cc75d95634ebcb6d9688f8e))\n\n\n\n## [0.52.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.51.0...react-moveable@0.52.0) (2023-06-25)\n\n\n### :rocket: New Features\n\n* add direciton on snap event #949 ([69312fd](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/69312fd6eb0c3ca48f446bcc680f91abab189dfd))\n* export matrixes in getElementInfo ([c1aad6a](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/c1aad6a0aa19c9f5060fe9d9c3277c95a0ad2c5f))\n* setMin, setMax scale size in onScaleStart ([ea4cd95](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/ea4cd9527cd599fec9f211f0713dbccb9e2ec343))\n* support multiple dragTarget type #953 ([4a347d2](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/4a347d2b7f36570ba882cfe7894207210650d3ec))\n* support snappable in request #954 ([863ad42](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/863ad42876e08c0e1cea6324e241dba0d6842946))\n\n\n### :bug: Bug Fix\n\n* bump react-selecto version ([c3eb9c7](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/c3eb9c7e52e7144f7accdd8298cd44e00b092d0f))\n* fix isRequest naming ([fb90fbd](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/fb90fbddc94698cf9c88b1e9d8b54a8182f03d88))\n* fix max scale size ([9cd9761](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/9cd9761ad109bd941ef474d7af940dbc086251a2))\n* fix padding for scalized target #951 ([70d938f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/70d938fe3255ae5f4cc875c9213412ad5ad09740))\n* fix props and event types missing #941 ([bd91b08](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/bd91b08ba04a50644e3d1ed91729563260b5a01b))\n* fix ResizeObserver, MutationObserver contexts ([71152cb](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/71152cbb055b0148ebf501d9156b9af6a542fc69))\n* fix scalable group's negative scale dist #950 ([f4bb504](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/f4bb504d7f7f537d63f44f74a90f0cbe59886a16))\n* fix typo (degress => degrees) #928 ([835be5b](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/835be5be701c8b3740ff9dfc16101a9b9ed60cbb))\n* support useMutationObserver in Group ([def4db3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/def4db354db052379789cfc7e342d36f7b781699))\n\n\n### :mega: Other\n\n* bump croffle version ([0a0cb93](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/0a0cb931bff2d4cdb7809351212f83cd59fd047c))\n* publish packages ([f893cca](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/f893ccaa176d31ef9ddb241d2cd4a1fb098cdae0))\n\n\n\n## [0.51.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.50.7...react-moveable@0.51.0) (2023-06-04)\n\n\n### :rocket: New Features\n\n* add hideThrottleDragRotateLine prop #923 ([e091d39](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/e091d396f2436ef0ad8d8dfa8922dcd86ec08bfd))\n* add isDisplayGridGuidelines prop #935 ([589bb9d](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/589bb9d888b99768be153a8c0a8dc89ec3fe238a))\n* add snapRotationThreshold, snapRotationDegress #928 ([d63283c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/d63283c604d3aea9e4f60f8c72f64c2fa2cde0e9))\n* add transformObject property in render events #933 ([317ddde](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/317ddde1e65a2104b0c05ec331d5f468a85fb0b8))\n* add useDefaultGroupRotate prop #929 ([5846e50](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5846e50c18dc2e1aa628e41a8d235ee4851325db))\n* support drag api #920 ([8f1a839](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/8f1a8396c429cf108da5417bc36cccd3ef46013c))\n\n\n### :bug: Bug Fix\n\n* add defense code for `.stopDrag` #930 ([be743bc](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/be743bcb1ab211a647da4d53f7d34570e25ac4be))\n* fix bounds keepRatio sign #924 ([8ccc8fd](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/8ccc8fdfbf71079417194f1b1dbef9a797726788))\n* fix keepRatio for zero scale #927 ([7b936ac](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/7b936ac77eb8e48d1f736e2a4dd0141946d3d968))\n* fix ownerDocument css #932 ([76a852a](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/76a852ade3ffb41a1b246649945994f50e52b1f0))\n* support iframe #932 ([15abedb](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/15abedb5f5770b8380d0b6ebedbc4ab7834cb9e8))\n* support iframe #932 ([7b4cbad](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/7b4cbad8548e717f6ec31c14f939cbdfaffb650c))\n* support iframe context #932 ([3e87cc7](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/3e87cc7fed43160ca342630fed2f413876f8a518))\n\n\n### :mega: Other\n\n* update packages ([8d65572](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/8d65572384ae0fdff288fe78fbeb5d249b070eb7))\n\n\n\n## [0.50.7](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.50.6...react-moveable@0.50.7) (2023-05-16)\n\n\n### :bug: Bug Fix\n\n* fix css-styled version #916 ([875fc19](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/875fc19fa7fac50cbbb3166dfaa512b18f7c790d))\n* occur unset for idle state #917 ([a9d1de8](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/a9d1de80fd7f48957fd730d577105d64c5a54fe3))\n\n\n### :mega: Other\n\n* publish packages ([5bd22bb](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5bd22bb009e10a4f8032f35c2ae3b490f4d94e5b))\n\n\n\n## [0.50.6](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.50.5...react-moveable@0.50.6) (2023-05-15)\n\n\n### :rocket: New Features\n\n* add drag api demo ([7c46df1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/7c46df1c3026b5d836bc082e5e1dc2cdd093b77c))\n\n\n### :bug: Bug Fix\n\n* add defense logic for added element on dragStart #917 ([ef37c3b](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/ef37c3b6775fdfc8baa365bc793fe264c5a79764))\n* fix controlPadding  #918 ([685c459](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/685c4598deff805e0e952a1095ab3305a39a22c8))\n* fix initial gestos ([84afabb](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/84afabb1af183a231b6b70b5b6a2904cd981706e))\n* fix line, control padding appearing #919 ([63b9ecd](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/63b9ecd6fc83314216f1d29c57c22ded27d8098e))\n* fix not initialized target #917 ([f291bf3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/f291bf3f615e6daedb5da01ff16a42f43a39d441))\n* unset gesto when target changed #917 ([9d6c0d7](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/9d6c0d7c7f4b24b936d3ea9fa996dc536c84f816))\n* update croact, css-styled version #916 ([b517b64](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b517b6498a612c072eadc9354d6383363771ea6d))\n\n\n### :mega: Other\n\n* publish packages ([91aa8bc](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/91aa8bc1bdefc65cde8c032f1c7ba13ca54ad2fa))\n\n\n\n## [0.50.5](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.50.4...react-moveable@0.50.5) (2023-05-09)\n\n\n### :bug: Bug Fix\n\n* fix missing type #911 ([0f26c75](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/0f26c75261fe8996f8b1317ec2da473a9feb57d0))\n* fix svg group #914 ([9be5170](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/9be5170b14215bf76e29830136046cb358461f17))\n\n\n### :memo: Documentation\n\n* fix README #913 ([337e36a](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/337e36a422fa1e2d5f96c0426957f6be401e8248))\n\n\n### :mega: Other\n\n* publish packages ([40dd902](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/40dd9022c41244ab009d621861ddc2ac63768748))\n\n\n\n## [0.50.4](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.50.0...react-moveable@0.50.4) (2023-05-08)\n\n\n### :bug: Bug Fix\n\n* add dragFcousedInput prop ([e96f9fc](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/e96f9fc80493696fdbb94047e9375a8d991da05b))\n* fix dragFocusedInput #896 ([94cb92d](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/94cb92d239846ef7a45c0ea2f4ceec0ec2e3b4ac))\n* fix files filed #910 #909 #907 ([a4995ab](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/a4995ab1acb3a34974e1d5a20d17fb2ee17ddc0c))\n\n\n### :memo: Documentation\n\n* fix dragFcousedInput story ([2b78a4e](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/2b78a4e276000ab017396a94d1502a4c94b8ef70))\n\n\n### :mega: Other\n\n* publish packages ([d0f0532](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/d0f0532bfb42fe98ee95748839a639fddbe4b9d6))\n* publish packages ([e1e86a9](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/e1e86a95ebff9d18ad7a5ebede3bd5bd66465b5d))\n* publish packages ([60a747e](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/60a747ee3c373f83fb759a8482e2365e77dcb5e8))\n\n\n\n## [0.50.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.49.2...react-moveable@0.50.0) (2023-05-01)\n\n\n### :rocket: New Features\n\n* add dragFocusedInput prop #896 ([a29c9de](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/a29c9de3d9371a3cd7406432dcdd437168d42fdb))\n* add svgOrigin prop #894 ([619d57d](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/619d57dc00c96c50fba77709526e6d3f48c0654a))\n\n\n### :bug: Bug Fix\n\n* fix element guidelines for group #900 ([d42c032](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/d42c0325d78150f18d07b33b6a20c02d98ee4b97))\n* fix fixedOffset ([a00ab2a](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/a00ab2ae05b802aeb8850b4b9a87e6600f17b8fb))\n* fix invidualGroup's mount code #905 ([d2388e5](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/d2388e54e75ae3e2de5896b8f7018b4e2a5a0963))\n* fix snapGrid's offset #897 ([97d89de](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/97d89de0ee14ecc7d4f9b8d1c750fbb5db91730e))\n* prevent multitouch for target and control #898 ([0b4d328](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/0b4d3287de5da268132fdcd0bf0781a3f8d0902f))\n\n\n### :mega: Other\n\n* publish packages ([24934e3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/24934e317de2e5ff622bd9ab0dec8d75a7c05c48))\n\n\n\n## [0.49.2](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.49.0...react-moveable@0.49.2) (2023-04-16)\n\n\n### :bug: Bug Fix\n\n* fix 0.2 guideline offset delta  #888 ([d85c041](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/d85c0414d55e08b3669e3f88bb10c301cc99c59c))\n* fix pinchable's operation #892 ([f4d8df3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/f4d8df3f81f69f0c00e2b865e6f3368ee9795b01))\n\n\n### :mega: Other\n\n* publish packages ([a623eda](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/a623eda2702067397159742dd0c6ed16b99bbe22))\n\n\n\n## [0.49.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.48.0...react-moveable@0.49.0) (2023-04-13)\n\n\n### :rocket: New Features\n\n* add croact ([b94c41c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b94c41c50cdf37da0136bd4d04f2237529253f45))\n* add croact compat ([233c6d0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/233c6d0a905953b51c3fd5df1f7c58e7b1d03432))\n* add string guideline pos #884 ([2036328](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/20363284f0ab6b7a38c042283cd55e7cbc528809))\n* support scale css property #891 ([28c4226](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/28c4226e9566067c14399a59d728babf692fcfc8))\n\n\n### :bug: Bug Fix\n\n* fix delta offset for element guidelines #888 ([526bec1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/526bec100ab5b45a61a88a50fa2931cf7c2841a2))\n* fix github workflow ([0fd81b8](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/0fd81b8e43dca21086c9f00a5c3a9ac13eabf410))\n* fix Scalable's keepRatio calculation #887 ([680c161](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/680c16181791b4764e7c31a14684c83575f8ab6b))\n* fix vertical guidelines ([1abcc37](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/1abcc3785caf0db184649508eb63f14bde7291c4))\n* resolve transform matrix ([090e1b2](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/090e1b26c1e2d9ff742c50f9e8e901378e5969f9))\n\n\n### :mega: Other\n\n* publish packages ([1177427](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/11774277bafd9c60e9cef3c9a6fa38a3e1c4077d))\n\n\n\n## [0.48.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.47.3...react-moveable@0.48.0) (2023-03-26)\n\n\n### :rocket: New Features\n\n* add useMutationObserver prop #869 ([f3a9ee4](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/f3a9ee46144bfe0e0be37b7c8a086d70a9ffb5db))\n\n\n### :bug: Bug Fix\n\n* fix individualGroupable #867 ([6d98f76](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/6d98f76bdb3bdc94ce99495c5729ebb706038e6c))\n\n\n### :memo: Documentation\n\n* fix container docs ([295d905](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/295d905cac0db04b6fa9301573c99ce1366a16ae))\n\n\n### :mega: Other\n\n* publish packages ([7580d27](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/7580d272fe857aadfbdbc9df264e0a413dd56588))\n\n\n\n## [0.47.3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.47.2...react-moveable@0.47.3) (2023-03-21)\n\n\n### :bug: Bug Fix\n\n* fix infinite loop (#873) ([179f950](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/179f95047d1aeae8d7bb2275ea0ab980feded486))\n\n\n### :memo: Documentation\n\n* fix README ([7426492](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/7426492de210ab6f38d411d96e6d843d7423f555))\n\n\n### :mega: Other\n\n* publish packages ([ae54ef4](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/ae54ef4c660ae789867e4286990f234cc808a379))\n\n\n\n## [0.47.2](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.47.1...react-moveable@0.47.2) (2023-03-14)\n\n\n### :bug: Bug Fix\n\n* fix chromium agent (#864) ([04ffe64](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/04ffe641c5383e2c992c06196d454967bdbd1e8a))\n* fix groupable moveables' calculation ([cd9970e](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/cd9970e9a9bf3d942bc76182e40121399346894e))\n\n\n### :memo: Documentation\n\n* fix story url ([8977306](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/897730620480d8e830c4b53401a28d03b42b9a5f))\n\n\n### :mega: Other\n\n* fix ga id ([b034af5](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b034af5f04d45c9ff3035451265773cac1334222))\n* fix test  runner config ([6f6e585](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/6f6e5856773bccfb681dade0a2297e59338b8787))\n* update packages ([5b03d09](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5b03d09a0cd298d47597fc8c8c9c6fdd4cd5a267))\n\n\n\n## [0.47.1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.47.0...react-moveable@0.47.1) (2023-03-10)\n\n\n### :bug: Bug Fix\n\n* fix chromium agent #847 ([f6a703b](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/f6a703b8286b25ec88e397f3363db6c69777fd72))\n\n\n### :mega: Other\n\n* publish packages ([5589402](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/55894029a463f96a1f42827330b092be3fb63bf2))\n\n\n\n## [0.47.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.46.1...react-moveable@0.47.0) (2023-03-08)\n\n\n### :rocket: New Features\n\n* add `preventDefault` prop #821 ([b599e32](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b599e32aee6f3dfe10fec348c200bb1b4a0983d2))\n* add displayAroundControls, controlPadding #837 ([9ee0c72](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/9ee0c7251daae929e5ec71a9cd5c61a473c44496))\n* add individualGroupableProps props #848 ([079e752](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/079e75261de5cf8163ced482e1f7171ae8705823))\n\n\n### :bug: Bug Fix\n\n* custom element offset with chrome 109 or higher #847 ([af20f7e](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/af20f7e04a692e192bb6b27e4478c9d0cb0cfd29))\n* fix requestStyle #856 ([88c9ec2](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/88c9ec2ce2b06e592f6548af2221989b7109456d))\n* fix zoomed font size #855 ([172f6d4](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/172f6d448e9c855e8aaeefb0b83516548d127e83))\n\n\n### :memo: Documentation\n\n* fix story tag ([706c41c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/706c41c9bd44378e4c3571661d4a90d4b12ab3af))\n\n\n### :mega: Other\n\n* publish packages ([645e290](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/645e290a53b477b468042e05447e2f8f8aea6ed0))\n* update croffle ([9017260](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/901726035ba4122e048cdd1d0a0d3806c3c4809a))\n\n\n\n## [0.46.1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.45.1...react-moveable@0.46.1) (2023-01-29)\n\n\n### :rocket: New Features\n\n* add `linePadding` prop #837 ([af818ab](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/af818abc467608e76f8bb15175b184fa440fddfb))\n* add isTrusted event property ([256c40c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/256c40cf2a51277af5414a9bab07be321a586157))\n* add scrollOptions #841 ([a6dfc21](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/a6dfc2152ef9a06c6714c219b3ea057f0b6b8504))\n\n\n### :bug: Bug Fix\n\n* fix changed defaultGroupOrigin ([8d0ed9b](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/8d0ed9b85c44091f65e1f4f233ce56ea91dbf10f))\n* fix TargetList ([008116c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/008116cd0b6624b95c179a6eeed3e897de6e488c))\n* support able requester types ([c26e5a9](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/c26e5a94ca27b6b1739d3e6bf5d2882d22e06e3a))\n\n\n### :mega: Other\n\n* publish packages ([24c9567](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/24c9567e2ec00392d2d445298031c39de0331eae))\n* publish packages ([0e0a03d](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/0e0a03dd6c234ded050db8206e585c5fa2da1848))\n\n\n\n## [0.45.1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.45.0...react-moveable@0.45.1) (2022-12-16)\n\n\n### :bug: Bug Fix\n\n* fix helper's methods ([4bc6ef5](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/4bc6ef511f7652966e1a87cd7d0a53e6687a1707))\n* fix snap rendering for first drag #810 ([170eaec](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/170eaeccb43ce051f34661a337fb7870e3e8b5d9))\n* fix targetGroups' compare condition ([21622f2](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/21622f2f25d912f69b70ba5193b909bf7244db80))\n* fix targetGroups' compare condition ([959a9f0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/959a9f0abd3fa592aa7645096efc3df95477494a))\n\n\n### :mega: Other\n\n* publish packages ([d088ad9](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/d088ad9ed64889f4fd6143b89410f5d5e372105f))\n\n\n\n## [0.45.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.44.1...react-moveable@0.45.0) (2022-12-10)\n\n\n### :rocket: New Features\n\n* add `checkResizableError` prop #808 ([cb70b3b](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/cb70b3b99f5da269a19ded412ac7cd0366cb7996))\n* add `stopAble` property ([c05ba1f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/c05ba1feed36c8a4bc6107a713fb11208e685777))\n* add OrginDraggable, Warpable css object #807 ([32ba0ce](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/32ba0cee2a44bfcdc91cf3748282cccdfca37512))\n* add useAccuratePosition prop  #164 ([5c3898f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5c3898fc88704c5638133a35111767cd27a77808))\n\n\n### :bug: Bug Fix\n\n* fix request with bounds #809 ([43e08d1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/43e08d102827ba0f4437ce1d8883282566f3f86b))\n* fix useAccuratePosition for group ([e1b3ae7](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/e1b3ae78cb1d137ea85cf17afd51aa816e65aa87))\n\n\n### :mega: Other\n\n* publish packages ([ab42598](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/ab42598cb7a6175450125c5e55093cf891a33692))\n\n\n\n## [0.44.1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.44.0...react-moveable@0.44.1) (2022-12-05)\n\n\n### :bug: Bug Fix\n\n* fix tangent's tiny x value #806 ([e45b92a](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/e45b92a5880475d27c2318d2e1489996ad465e1c))\n* move react-moveable path ([ec8e162](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/ec8e1620e05f1d5a1a45ecccec7481c2ea8a4f57))\n\n\n### :mega: Other\n\n* publish packages ([9ee9bc9](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/9ee9bc9c76f6c4b317548470b5b4894c6a462be1))\n\n\n\n## [0.44.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.43.1...react-moveable@0.44.0) (2022-12-03)\n\n\n### :rocket: New Features\n\n* add borderRadius style state #804 ([57bae32](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/57bae3227dc77667314d900631765836b77a66cc))\n* add groupableProp #798 ([58d9d22](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/58d9d2231954c52821b4ec666e14703506c0840a))\n* add scrollThrottleTime prop ([b53924e](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b53924ecbb6be2805bd3da368822a41638bbcea5))\n* Support roundable group #798 ([90a9c1a](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/90a9c1a062661906d0b1777839db794dbc2ad370))\n\n\n### :bug: Bug Fix\n\n* fix first render for individual groupable ([74dc11a](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/74dc11a4dec363746457046ecbde52f0b53955f3))\n* fix position relative with zoom #800 ([2efdc35](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/2efdc353465974acec59e59c2a3d8fcf29284eac))\n\n\n### :mega: Other\n\n* publish packages ([4739df4](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/4739df488cdf3c32cb4ca4e024063c5c44fbaf0c))\n\n\n\n## [0.43.1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.43.0...react-moveable@0.43.1) (2022-11-28)\n\n\n### :bug: Bug Fix\n\n* fix body rect #800 ([8976985](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/8976985422fd30cd9e6e85e41ba73473dca05d41))\n* fix TRS order ([aff4b28](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/aff4b281e697bd9a550d21d1f26739fb0c5e4903))\n* fix zero line height #801 ([99547ca](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/99547cace2be52de99eceb021cc7a75f54bc16da))\n\n\n### :mega: Other\n\n* publish packages ([746c40b](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/746c40b2a2f31f2f371f9110018c89e64c08a525))\n* update jsdoc, template ([11408ca](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/11408caea15925a42165aa2080a7327e77a22ea8))\n\n\n\n## [0.43.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.42.0...react-moveable@0.43.0) (2022-11-27)\n\n\n### :rocket: New Features\n\n* add isFirstDrag property on drag event #796 ([7ade6a2](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/7ade6a23e9003d9ed4119a035ccad01b01c13ed7))\n\n\n### :bug: Bug Fix\n\n* fix snap size for position fixed #791 ([b02c82b](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b02c82ba5012fdfdf534a6dad1dcc1aea76e420e))\n* support css zoom #800 ([fa3de6b](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/fa3de6bd52de2509bf76b1d4a001b31f4a6b6ed4))\n\n\n### :memo: Documentation\n\n* fix README ([3a153c8](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/3a153c849b7279ec5fd603167117c88f25a7149c))\n\n\n### :mega: Other\n\n* publish packages ([3d5ac5a](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/3d5ac5ad855d98a2f555174cc46ec09c148d6a20))\n* publish packages ([92eb72d](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/92eb72df6110eb40a66b4726740240acb43e9745))\n* update croffle ([5714b2e](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5714b2ecc219ec06ebc008c3ab1c9cad219a95e6))\n\n\n\n## [0.42.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.41.1...react-moveable@0.42.0) (2022-11-13)\n\n\n### :rocket: New Features\n\n* add `stopDrag` method #787 ([1c1d54d](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/1c1d54d7b6c3baff62bac34b439244c20a18c3c0))\n* add cssText on clip event ([90e5397](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/90e539751a5e505257702dba6a09c96cd71d3f50))\n* support group persist #780 ([40a23db](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/40a23dbc31d08ac22a85e5dc807ccb16e0604b4c))\n\n\n### :bug: Bug Fix\n\n* fix edgeDraggable #695 ([9ebfae5](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/9ebfae559c978d5354ba5244ada6e22d20cdc83a))\n* fix persist group ([d1c9e2c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/d1c9e2cab1183b89f346daac5c02dbf531bb53e8))\n* fix snap bug for rotated group #786 ([3ac47da](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/3ac47da798cb655d37903ea9a8574ae62d1a7844))\n* fix snap for fixed position #791 ([05f6f22](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/05f6f221fbdc971ca21b7bf27b24c91b1e722057))\n* fix throttleDrag #789 ([8f4659e](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/8f4659e2531d9cdba9593509c87f0c2915a28ae9))\n* update gesto, dragscroll dependencies ([0f33358](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/0f333589574f509d1e3058b77ec9df6b18d7fee6))\n\n\n### :mega: Other\n\n* publish packages ([0780d7a](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/0780d7a204e5f1fa13070d4fa3ca657dfe3ee4af))\n\n\n\n## [0.41.1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.41.0...react-moveable@0.41.1) (2022-11-06)\n\n\n### :bug: Bug Fix\n\n* fix group rotation delta ([ef0c591](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/ef0c591d7b0c86aed6847c476f17a82f6b80c8fc))\n\n\n### :mega: Other\n\n* publish packages ([64e846b](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/64e846bb0e606756bc0b87c92b2b1052b458b9f7))\n\n\n\n## [0.41.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.40.0...react-moveable@0.41.0) (2022-11-04)\n\n\n### :rocket: New Features\n\n* add ableName-view-dragging in viewContainer #751 ([90c5c34](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/90c5c34960615f57807d7c8d9895fc04231951e0))\n* add persistData prop for restore data #780 #777 ([599df9b](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/599df9bfe1249665c4d76f44f3b771d347284d5a))\n* add snapThreshold prop #774 ([1bf05b3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/1bf05b3bf5221e8ee1a1ffadbcae93a885630819))\n* support rotationPosition array type #783 ([80653c3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/80653c3235ecaef5112414f8b859bedeba196dda))\n* support stopDrag on drag  #775 ([d950472](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/d95047250708d7d2e08988c3e6e4b66b99f53cc7))\n\n\n### :bug: Bug Fix\n\n* fix changing snapContainer #773 ([c3ee847](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/c3ee8473765ee6bbb8a27e4865372edac7b3b6fe))\n* fix document element #782 ([b9194d7](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b9194d72869c50f96976354ec0dd2cbb24788533))\n* fix no relative snapContainer's size #773 ([1db881f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/1db881f4d63fe59ffa22b00428419cfb0e4e2827))\n* fix rotate dist #778 ([7ac47ca](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/7ac47ca99402e811faef0f6cdfeede18e14c9ae2))\n\n\n### :memo: Documentation\n\n* fix hitTest doc ([d4b7648](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/d4b764899bf4e9044028399f28991e1003195d9c))\n\n\n### :mega: Other\n\n* publish packages ([b6896b3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b6896b340dd1f78777bd63c48e8545895df9aa5e))\n\n\n\n## [0.40.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.39.4...react-moveable@0.40.0) (2022-10-17)\n\n\n### :rocket: New Features\n\n* add `viewContainer` prop #753 ([352073c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/352073c5c5c765aca707236abdff9dded7988343))\n* add getTargets method #751 ([16f1061](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/16f1061ac616081c1d9dd40e00105e8a2a93e1d2))\n* add roundPadding, isDisplayShadowRoundControls #761 #762 ([68be2e8](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/68be2e879cc5dbba6d4566cf96d343216710e0c9))\n\n\n### :bug: Bug Fix\n\n* fix border radius for line #761 ([803f0b6](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/803f0b6c2210653a7cdb17f51a828c4e3f6db641))\n* fix cache condition #760 ([03e2789](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/03e2789db951f95087f918d32fa32cdd70fba533))\n* fix first visibility #760 ([38ba047](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/38ba04792925b0c32e85258046f5285133f92dc1))\n* fix flash of single, group toggling #760 ([5578030](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/557803012e21d2e78e3c0577aa9a238d9ee3a8dd))\n* fix max-width percentage #763 ([f1ad4af](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/f1ad4affba14d86f3d0145f08e08c647bd0b4f08))\n* fix roundable control index #762 ([1b29ecd](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/1b29ecdfb0d1d4df6c348e78852d1325aa727aaf))\n* Fixing bad type causing type conflict (#767) ([c63c1d3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/c63c1d30067e52b4115f09c6a78639177b443226))\n* support cache for group #760 ([4661320](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/46613207e47279e72bdfc656ae35548a3f07474d))\n\n\n### :mega: Other\n\n* publish packages ([75db134](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/75db1345ab1119dd9a5270c7c11de455888c2627))\n* publish packages ([47f5335](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/47f53351792bf5264c6d66745088e0571cedc3aa))\n* update packages ([61730d5](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/61730d5c143d4027c55a714c764efe77bbebe5bf))\n\n\n\n## [0.39.4](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.39.1...react-moveable@0.39.4) (2022-10-10)\n\n\n### :bug: Bug Fix\n\n* enhance updateSelectors #760 ([e72b119](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/e72b119fd7d413df1af231607db2aeee1f20e467))\n* fix click event #746 ([41809c1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/41809c10646b91586f74332b74ad2f83ab9a4b2d))\n* fix drag start edge #745 ([105bb1c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/105bb1ce073e349c77f6a0c4dd8d3d259a03aabe))\n* fix index attr for roundable ([92932d7](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/92932d7c35f58d365d2b2294d4735fced9416214))\n* fix onScaleGroupEnd param #755 ([ce7d855](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/ce7d855da4fe4042163c7fdca59b87b3060cfd88))\n* fix roundable line index #756 ([83d5232](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/83d523288757e0276a1ffe9a6f4903fc86a7f19a))\n\n\n### :mega: Other\n\n* publish packages ([9e3ee2f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/9e3ee2ff44dea473e7aa73e4d501c2d23062f40d))\n* publish packages ([16b2516](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/16b251618307faad8f8f3fc5433b27ed1466311c))\n\n\n\n## [0.39.1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.39.0...react-moveable@0.39.1) (2022-09-19)\n\n\n### :bug: Bug Fix\n\n* fix updateSelectors method #740 ([f9abb0f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/f9abb0f32212222bccadc3459f4d721977032aba))\n\n\n### :mega: Other\n\n* publish packages ([2954e37](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/2954e37b9a4e2100a8a55c0d49d279e7f994fd94))\n\n\n\n## [0.39.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.38.4...react-moveable@0.39.0) (2022-09-15)\n\n\n### :rocket: New Features\n\n* add `moveableTarget` property in click event ([ee3d9f2](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/ee3d9f2153ad70f86548f73412fad9d255d80760))\n* add `updateSelectors` method ([90f40e2](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/90f40e2b500bce6564f878294e1a0aaf27dd5b69))\n* support multiple group #566 #731 ([0bb7977](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/0bb79772fc956f5f38ed540f4de9382d8e5567fd))\n\n\n### :bug: Bug Fix\n\n* fix defaultGroupRotate action ([1f6709a](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/1f6709a9ddbdd5fe8cc6381cc7c0dac68ab42a70))\n* fix dragtarget #468 ([c662cca](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/c662cca73f6f64a6df38936ce97d756e5197d55e))\n* fix multiple group ([20af5c1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/20af5c113fb6b250be27dd427c3fa6a4146bf958))\n* fix overflow auto target #730 ([1e0ae91](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/1e0ae91df7baed8a7ae11e96c29a3f3f4cb9b8c6))\n* fix rotatable throttling ([b18f16a](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b18f16a93d853621f3883da16bfc3e6d0cd6db94))\n* fix rotate group origin #733 ([3e9e8e5](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/3e9e8e5f59ca65584e3c709544c1d43734086d82))\n* fix shadow dom css #729 ([7581afc](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/7581afc13a7c5f9f749b22d7bd3160de0972d112))\n\n\n### :mega: Other\n\n* update packages ([e5774a9](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/e5774a9becd500d154e8d354017dcbd80505ba13))\n\n\n\n## [0.38.4](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.38.3...react-moveable@0.38.4) (2022-08-24)\n\n\n### :bug: Bug Fix\n\n* ignore document for firefox ([db0c730](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/db0c730be90c00d8d187445db26e0e42a08cedb2))\n\n\n### :mega: Other\n\n* publish packages ([d57ebb1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/d57ebb130006c47e3a687d2b417fe3fe7f30149a))\n\n\n\n## [0.38.3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.38.1...react-moveable@0.38.3) (2022-08-23)\n\n\n### :bug: Bug Fix\n\n* fix custom element offsetPos for firefox ([6e05812](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/6e05812c649098c6330678289cd83d9abaa6df1d))\n* fix svg group's offset pos #722 ([167d277](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/167d277abe7f58d0b203867eb8df25addba2172a))\n* fix waitToChangeTarget method #714 ([fc9847b](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/fc9847b4d2fa78eb057259bb5d4a2a187a663bf1))\n* stop event if no use ables #724 ([2a90842](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/2a90842e4ff937af6b39bbc4e147a7a7acbb0acf))\n\n\n### :mega: Other\n\n* fix cjs configs ([ce8cbb1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/ce8cbb18563e34234f7e9d83a0b3f024870314a8))\n* publish packages ([3597bc5](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/3597bc5fd58cdec56fd4ff8916380a6f3709f7f5))\n\n\n\n## [0.38.1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.38.0...react-moveable@0.38.1) (2022-08-12)\n\n\n### :bug: Bug Fix\n\n* export event-emitter ([937d83e](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/937d83e221d7080abdb699bc088eff9ca89caaa4))\n* fix click event for mobile #720 ([ce6bced](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/ce6bced55ca6e32981215ebd91a57fe04a789f4e))\n* fix that dragStart method cannot fire #718 ([5ea9fc3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5ea9fc362534e8a56976ad87053700ee06a14e0d))\n\n\n### :mega: Other\n\n* publish packages ([6be7e81](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/6be7e8122b8edd2e323a039cdbb73381de74e14f))\n\n\n\n## [0.38.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.37.3...react-moveable@0.38.0) (2022-08-06)\n\n\n### :rocket: New Features\n\n* add maxSnapElementGapDistance prop #707 ([5f71c30](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5f71c304192764cd8c9261daec56f1594f13e3df))\n* add stopDrag event property #665 ([70f49ee](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/70f49ee4dabade6366e37fa3408421ee7d1d4931))\n* add waitToChangeTarget method #714 ([8e6c534](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/8e6c534010689c0c0a2a821f8ab7e3d6cf63f240))\n\n\n### :bug: Bug Fix\n\n* prevent click when drag & click control #713 ([2071c0d](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/2071c0dd68503d920fe9c26e53ec8c17627bee2b))\n* render only shortest gap guidelines #707 ([176c1b3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/176c1b31b6c8cc3359d44474225a35014fba42d4))\n\n\n### :mega: Other\n\n* publish packages ([80005ba](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/80005bada5651afd0c5487a193ab321b22ab1b55))\n\n\n\n## [0.37.3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.37.2...react-moveable@0.37.3) (2022-08-03)\n\n\n### :bug: Bug Fix\n\n* fix click event by gesto update #713 ([3a3c762](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/3a3c762fc20cf682c3d8fda21f28244a3ecf36bd))\n* fix offsetParent with willChange #711 ([cd1de86](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/cd1de864191fc39b04065ada89d6e600f02ad0a1))\n\n\n### :mega: Other\n\n* publish packages ([5468ff7](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5468ff763bfa3f30e637ce8f504af09152b22c5c))\n\n\n\n## [0.37.2](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.36.0...react-moveable@0.37.2) (2022-08-01)\n\n\n### :rocket: New Features\n\n* add CSSObject on render ([e2f462a](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/e2f462aecd10d076ef874a6ba2af97a2e59841d1))\n* add maxSnapElementGuidelineDistance #707 ([171b027](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/171b02708e6343656655cf403744e1a0fbfa2324))\n* add preventClickEventOnDrag prop ([281b2b7](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/281b2b7aa5dba3bdc4c3f478e115a0de8fd2359e))\n* add startFixedDirection property on before event ([c838c9c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/c838c9cc13305eb10ba85b75bcfcd7daa52047f1))\n* add stopPropagation prop ([3ce54e0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/3ce54e09972962f69f2b697dc52e0b507b2aad9a))\n\n\n### :bug: Bug Fix\n\n* fix cssText, style on drag ([aed807e](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/aed807ef7a04b25101cef8fbad38d94a1e7482ff))\n* fix drag undefined on Rotate Group #710 ([db80e7d](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/db80e7d92bee3be684c74a9cb20bc62680f4e0a4))\n* fix getElementInfo's NaN type value #709 ([e99d94f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/e99d94f5c3302fd3c851aa942e99daa75346479c))\n* fix rotate position #710 ([d269d1f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/d269d1f3c095a0930359597d894d3cdb631b3ee2))\n\n\n### :memo: Documentation\n\n* fix README ([5ded1c1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5ded1c19b77fe2c3974bcf1f1ac1356d2924991d))\n\n\n### :mega: Other\n\n* publish packages ([0076577](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/00765776ba92b5ca691c1aefd1c20687952373d9))\n* publish packages ([ffa0c18](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/ffa0c18bb6970d6f8d88a49db23b11620e704618))\n* publish packages ([958ebac](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/958ebace6032eafb17f1ce366394b440671b45b3))\n\n\n\n## [0.36.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.35.0...react-moveable@0.36.0) (2022-07-25)\n\n\n### :rocket: New Features\n\n* add `cssText`, `style` property on events ([7a9012e](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/7a9012e4fcdc9a37bb2096bcf37e8e4d25310a8b))\n* add `rotateAroundControls` prop ([d473ffa](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/d473ffa76a5c390945c320ee8ee8b6f671a0fbed))\n* add style, cssText, afterTransform properties ([68b4a92](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/68b4a925b75f599924628425b4da5cfd5424ad71))\n* support pos guideline info #707 ([1cd1b81](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/1cd1b8134419df88b16ffb9aaa412ebb9048b379))\n* Support rotate and resize together #467 ([24482a6](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/24482a68ac2611507e2fa9e6673f969bc1c65cff))\n* use edge at the same tiem #706 ([c273703](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/c273703e5b62ea41ec9df441158a77cb0bf835c1))\n\n\n### :bug: Bug Fix\n\n* remove wrong react types #703 ([25dced4](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/25dced4f1531cc46d77601f71674031aa58fdf0b))\n\n\n### :mega: Other\n\n* publish packages ([63e03d1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/63e03d1d5f69e56c7df6d357c58d7acd06932e80))\n* update dragscroll module version ([e9b5864](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/e9b5864c83853578c4190e792543019e30b017eb))\n\n\n\n## [0.35.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.34.2...react-moveable@0.35.0) (2022-07-21)\n\n\n### :rocket: New Features\n\n* add `keepRatioFinally` prop #698 ([bf29635](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/bf29635ab8a160c9e938213b2477cfec73e8401d))\n* add move cursor style with edgeDraggable #703 ([9901deb](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/9901deb3dd51f449edcd75e4f147b9fa671d951e))\n* support object self type #701 ([99967c2](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/99967c28f9f0f09ef1891ea1ece4b16a6c10ef43))\n\n\n### :bug: Bug Fix\n\n* calculate size more accurately #698 ([4dd4038](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/4dd4038c82c9dff272226e3911549249743dff50))\n* enhance bounds accuracy #699 ([9aee6bd](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/9aee6bdf0cd9105ef3ef653e18363e21ad4c4b3f))\n* support shadow root #684 ([8502d07](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/8502d0795c903e7894d0fad9a6a130cbc543f301))\n\n\n### :mega: Other\n\n* publish packages ([da24696](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/da24696977c24b6ea54a433192d15bb7ecbc62e9))\n* update `react-compat-moveable` ([712ae6f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/712ae6fb49dec3f4e40a3cd664f63625d7cd5669))\n\n\n\n## [0.34.2](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.34.0...react-moveable@0.34.2) (2022-07-17)\n\n\n### :bug: Bug Fix\n\n* fix files field in package.json #700 ([48ce548](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/48ce548438dd0a7da9f544730b2fc3ab65073775))\n\n\n### :mega: Other\n\n* publish packages ([5d89af5](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5d89af521d1a288d4d9ca7923e0e9654e8f97d53))\n\n\n\n## [0.34.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.33.0...react-moveable@0.34.0) (2022-07-17)\n\n\n### :rocket: New Features\n\n* add hideChildMoveableDefaultLines prop #692 ([c691403](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/c6914031e75712eef6a574d6aaf04645535f59d3))\n* add setFixedDirection on rotateStart #670 ([093d0b1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/093d0b1303c9742a79f73071470ec73306ff2de6))\n* support edge prop's object type #695 ([699997d](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/699997d7426110cb199094cd7ac56682723d1cae))\n\n\n### :bug: Bug Fix\n\n* fix floating point for min limit size ([766561c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/766561c0e785098720c5a0ae6d9da1e2d9d7b879))\n* fix guidelines for edgeDraggable #694 ([80f2b44](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/80f2b44643a0d804df6a65f72583c4d7f6d8ddf7))\n* fix safari 15 consts ([a140e5b](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/a140e5b77f623973cf6d27d0ff8ab12e63901004))\n* fix transform behavior in safari 15 #696 ([eb0a71c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/eb0a71cb8aa11c100a3cf2f85e007d6fdb45a2d7))\n* stop propagation for click control #690 ([1a8f697](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/1a8f6978ba267632282049b61753bc062d69266f))\n\n\n### :memo: Documentation\n\n* add hideChildMoveableDefaultLines docs ([9e02faa](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/9e02faa5cbd4f5e529a1a58647afd519b0672d3b))\n* fix typo #685 ([c591b1d](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/c591b1d8a410a3fa6115fcec51ae21d4027aeaa7))\n\n\n### :mega: Other\n\n* publish packages ([2a4940f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/2a4940f74997fae24c7d77c553a6bc6be1301d40))\n* update overlap-area ([be8c4dc](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/be8c4dc19dbd6d6d7f782c73272cb9878ca21982))\n\n\n\n## [0.33.0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.32.9...react-moveable@0.33.0) (2022-06-09)\n\n\n### :rocket: New Features\n\n* add `preventClickDefault` option #671 ([17da69f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/17da69ff71c6abe4788603dc729b6bc9dd8f27bc))\n* add flushSync prop #668 ([068c174](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/068c174706338f3eedfa3c93beb967b7399e6daa))\n* add snap direction foramt (#669) ([52406cc](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/52406cc8c2a77dc2446dc935681aa9885661b77b))\n\n\n### :bug: Bug Fix\n\n* fix groups' setMin, setMax and ratio ([0e2abf1](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/0e2abf1ae8504334a7118b9e2b6e9cab9c90c91b))\n* prevent wheel drag #674 ([e9bea04](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/e9bea04aec00bd3a2a06918b539c9b02b2a589d5))\n* remove peerDependencies ([0aa9869](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/0aa986952e096cd75def5e0afe9c9b1ac9d4216e))\n\n\n### :mega: Other\n\n* publish packages ([b432247](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b4322470bcd3bb05fc67d2c89eedd737f8b4b67a))\n\n\n\n## [0.32.9](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.32.7...react-moveable@0.32.9) (2022-06-07)\n\n\n### :rocket: New Features\n\n* add clippable keepRatio ([37da849](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/37da849e81454ea17be4510a81beeef852cfda9f))\n\n\n### :bug: Bug Fix\n\n* fix [1, 1] direction's bounds #624 ([5108bc3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5108bc33cf9e098cd051e4b7d63b2ac3dc06bf09))\n* fix changed target getos #657 ([54ef5a0](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/54ef5a03a781e706293699d1ae25141e215044c9))\n* fix clippable bounds #659 ([b3986de](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b3986de338b2d38e42288c9d2cafe2a2a7da7705))\n* fix group drag condition ([35c194a](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/35c194a8fb2aa5051e7f46092418c35821e61890))\n* fix group gestos for strict mode #656 ([311c931](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/311c93137f9b8aa53b040cda05e94bbae08e313b))\n* fix innerBounds for no width, height ([42fe6f3](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/42fe6f3d45662c2e46280d4d5a6eed0cc9a05e66))\n* fix minSize for zero size ([c34f298](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/c34f29803a487098f36f45991ea6dff03bd2750a))\n* fix svg matrixes #643 ([525ad70](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/525ad70e2593500188e2a81d2759e726d4277049))\n* support keepRatio for Clippable ([a934512](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/a934512d2fc38e4a2fee6b6c5834df1b4f6e503e))\n\n\n### :house: Code Refactoring\n\n* use yarn workspace ([73da295](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/73da295064845a3791782c1777a9c555272a0af0))\n\n\n### :mega: Other\n\n* fix types dependencies ([b4a3ee6](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b4a3ee6486a81ca14a7c23284818628471369fe0))\n* publish packages ([3530f05](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/3530f0526081b0c010e6c964265b466713f0212e))\n* update demo configuration ([917123c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/917123cdea2830e8e8f4a8d7b2a99654f16682ef))\n\n\n\n## [0.32.7](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.32.5...react-moveable@0.32.7) (2022-05-01)\n\n\n### :bug: Bug Fix\n\n* fix coordinate for position: fixed #653 ([87ba56c](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/87ba56c5728203b6f4bf2cf0f4f004aee009a625))\n* skip beforeEvent set to lastEvent #654 ([5ab31c7](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/5ab31c749c8a331b40a564b365c75223be0736c2))\n\n\n### :mega: Other\n\n* update packages versions ([169c484](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/169c48417bb4bc07c59e227c545e379dbf43d15b))\n\n\n\n## [0.32.5](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.32.4...react-moveable@0.32.5) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([585094f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/585094f76ec6e1556159ac357d6ac83ebab953ae))\n\n\n\n## [0.32.4](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.32.4...react-moveable@0.32.4) (2022-04-27)\n\n\n### :bug: Bug Fix\n\n* fix clip bug with draggable, snappable ([b5477ee](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/b5477ee6a05067a3506bfefac30c36839b264c83))\n\n\n\n## [0.32.4](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/compare/react-moveable@0.32.3...react-moveable@0.32.4) (2022-04-26)\n\n\n### :bug: Bug Fix\n\n* fix svg transform #643 ([82233ca](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/82233ca351c4600dea58c6558ccfeaca6a1e8295))\n\n\n### :mega: Other\n\n* update packages versions ([a62ee58](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/a62ee58b9bc32f06edc95d55ea28b60c20881ac4))\n* update typescript version ([a63ee9f](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/a63ee9f575d701f24748d48ac92484f6c259577f))\n* upgrade storybook and typescript ([eff23fd](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/commit/eff23fd7340964ed0e3e6f5930e56558c4d91d18))\n"
  },
  {
    "path": "packages/react-moveable/LICENSE",
    "content": "MIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
  },
  {
    "path": "packages/react-moveable/README.md",
    "content": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/logo.png\"/></p>\n<h2 align=\"middle\">React Moveable</h2>\n<p align=\"middle\">\n<a href=\"https://www.npmjs.com/package/react-moveable\" target=\"_blank\"><img src=\"https://img.shields.io/npm/v/react-moveable.svg?style=flat-square&color=007acc&label=version\" alt=\"npm version\" /></a>\n<img src=\"https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square\"/>\n<a href=\"https://github.com/daybrush/moveable/blob/master/LICENSE\" target=\"_blank\"><img src=\"https://img.shields.io/github/license/daybrush/moveable.svg?style=flat-square&label=license&color=08CE5D\"/></a>\n</p>\n<p align=\"middle\">A React Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.</p>\n<p align=\"middle\">\n    <a href=\"https://daybrush.com/moveable\" target=\"_blank\"><strong>Demo</strong></a> /\n    <a href=\"https://daybrush.com/moveable/storybook/\" target=\"_blank\"><strong>Storybook</strong></a> /\n    <a href=\"https://daybrush.com/moveable/release/latest/doc/\" target=\"_blank\"><strong>API</strong></a> /\n    <a href=\"https://github.com/daybrush/scena\" target=\"_blank\"><strong>Main Project</strong></a>\n</p>\n\n\n\n<table width=\"100%\" align=\"center\">\n<tr>\n<th colspan=\"4\">Moveable</th>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-draggable\"><strong>Draggable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-resizable\"><strong>Resizable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-scalable\"><strong>Scalable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-rotatable\"><strong>Rotatable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/draggable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/resizable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/scalable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/rotatable.gif\"/>\n</td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-warpable\"><strong>Warpable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html\"><strong>Pinchable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/group--group-draggable-resizable-rotatable\"><strong>Groupable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/snap-bound--snap-guidelines\"><strong>Snappable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/warpable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/pinchable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/groupable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/snappable.gif\"/></td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-clippable\"><strong>Clippable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-roundable\"><strong>Roundable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-origin-draggable\"><strong>OriginDraggable</strong></a></td>\n<td align=\"center\"><a href=\"https://github.com/daybrush/selecto\"><strong>Selecto</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/clippable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/roundable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/origindraggable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/selecto.gif\"/></td>\n</tr>\n</table>\n\n\n## 🔥 Features\n* **Draggable** refers to the ability to drag and move targets.\n* **Resizable** indicates whether the target's width and height can be increased or decreased.\n* **Scalable** indicates whether the target's x and y can be scale of transform.\n* **Rotatable** indicates whether the target can be rotated.\n* **Warpable** indicates whether the target can be warped(distorted, bented).\n* **Pinchable** indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.\n* **Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.\n* **Snappable** indicates whether to snap to the guideline.\n* **OriginDraggable*** indicates Whether to drag origin.\n* **Clippable** indicates Whether to clip the target.\n* **Roundable** indicates Whether to show and drag or double click border-radius.\n* Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)\n* Support Major Browsers\n* Support 3d Transform\n\n## ⚙️ Installation\n```sh\n$ npm i react-moveable\n```\n\n## 📄 Documents\n\n* [**Moveable Handbook**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md)\n* [**How to use Group**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-group)\n* [**How to use custom CSS**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-custom-css)\n* [**How to make custom able**](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/src/ables/README.md)\n* [API Documentation](https://daybrush.com/moveable/release/latest/doc/)\n\n## 🚀 How to use\n\n```tsx\nimport Moveable from \"react-moveable\";\n\nrender() {\n    return (\n        <Moveable\n            target={document.querySelector(\".target\")}\n            container={null}\n            origin={true}\n\n            /* Resize event edges */\n            edge={false}\n\n            /* draggable */\n            draggable={true}\n            throttleDrag={0}\n            onDragStart={({ target, clientX, clientY }) => {\n                console.log(\"onDragStart\", target);\n            }}\n            onDrag={({\n                target,\n                beforeDelta, beforeDist,\n                left, top,\n                right, bottom,\n                delta, dist,\n                transform,\n                clientX, clientY,\n            }: OnDrag) => {\n                console.log(\"onDrag left, top\", left, top);\n                // target!.style.left = `${left}px`;\n                // target!.style.top = `${top}px`;\n                console.log(\"onDrag translate\", dist);\n                target!.style.transform = transform;\n            }}\n            onDragEnd={({ target, isDrag, clientX, clientY }) => {\n                console.log(\"onDragEnd\", target, isDrag);\n            }}\n\n            /* When resize or scale, keeps a ratio of the width, height. */\n            keepRatio={true}\n\n            /* resizable*/\n            /* Only one of resizable, scalable, warpable can be used. */\n            resizable={true}\n            throttleResize={0}\n            onResizeStart={({ target , clientX, clientY}) => {\n                console.log(\"onResizeStart\", target);\n            }}\n            onResize={({\n                target, width, height,\n                dist, delta, direction,\n                clientX, clientY,\n            }: OnResize) => {\n                console.log(\"onResize\", target);\n                delta[0] && (target!.style.width = `${width}px`);\n                delta[1] && (target!.style.height = `${height}px`);\n            }}\n            onResizeEnd={({ target, isDrag, clientX, clientY }) => {\n                console.log(\"onResizeEnd\", target, isDrag);\n            }}\n\n            /* scalable */\n            /* Only one of resizable, scalable, warpable can be used. */\n            scalable={true}\n            throttleScale={0}\n            onScaleStart={({ target, clientX, clientY }) => {\n                console.log(\"onScaleStart\", target);\n            }}\n            onScale={({\n                target, scale, dist, delta, transform,\n                clientX, clientY,\n            }: OnScale) => {\n                console.log(\"onScale scale\", scale);\n                target!.style.transform = transform;\n            }}\n            onScaleEnd={({ target, isDrag, clientX, clientY }) => {\n                console.log(\"onScaleEnd\", target, isDrag);\n            }}\n\n            /* rotatable */\n            rotatable={true}\n            throttleRotate={0}\n            onRotateStart={({ target, clientX, clientY }) => {\n                console.log(\"onRotateStart\", target);\n            }}\n            onRotate={({\n                target,\n                delta, dist,\n                transform,\n                clientX, clientY,\n            }: onRotate) => {\n                console.log(\"onRotate\", dist);\n                target!.style.transform = transform;\n            }}\n            onRotateEnd={({ target, isDrag, clientX, clientY }) => {\n                console.log(\"onRotateEnd\", target, isDrag);\n            }}\n            // Enabling pinchable lets you use events that\n            // can be used in draggable, resizable, scalable, and rotateable.\n            pinchable={true}\n            onPinchStart={({ target, clientX, clientY, datas }) => {\n                // pinchStart event occur before dragStart, rotateStart, scaleStart, resizeStart\n                console.log(\"onPinchStart\");\n            }}\n            onPinch={({ target, clientX, clientY, datas }) => {\n                // pinch event occur before drag, rotate, scale, resize\n                console.log(\"onPinch\");\n            }}\n            onPinchEnd={({ isDrag, target, clientX, clientY, datas }) => {\n                // pinchEnd event occur before dragEnd, rotateEnd, scaleEnd, resizeEnd\n                console.log(\"onPinchEnd\");\n            }}\n        />\n    );\n}\n```\n\n### React 18 concurrent mode\n\nIf you are using React 18's concurrent mode, use `flushSync` for UI sync.\n\n```tsx\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { flushSync } from \"react-dom\";\n\nimport Moveable from \"react-moveable\";\n\n\nfunction App() {\n    return <Moveable flushSync={flushSync} />\n}\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\"));\n\nroot.render(\n    <React.StrictMode>\n        <App />\n    </React.StrictMode>\n);\n```\n\n## ⚙️ Developments\n### `npm start`\n\nThe main project was made with `react` and I used [`croact`](https://github.com/daybrush/croact) to make it lighter with umd.\n\nFor development and testing, check in [packages/react-moveable](https://github.com/daybrush/moveable/blob/master/packages/react-moveable).\n\n\n\n```\n$ yarn\n$ npm run packages:build\n$ npm run storybook\n```\n\nRuns the app in the development mode.<br/>\nOpen [http://localhost:6006](http://localhost:6006) to view it in the browser.\n\nThe page will reload if you make edits.<br/>\nYou will also see any lint errors in the console.\n\n## ⭐️ Show Your Support\nPlease give a ⭐️ if this project helped you!\n\n\n\n## 👏 Contributing\n\nIf you have any questions or requests or want to contribute to `moveable` or other packages, please write the [issue](https://github.com/daybrush/moveable/issues) or give me a Pull Request freely.\n\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](https://github.com/daybrush/moveable/blob/master/CONTRIBUTING.md)].\n\n<a href=\"https://github.com/daybrush/moveable/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=daybrush/moveable\" />\n</a>\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/moveable/issues) on GitHub.\n\n## Sponsors\n<p align=\"center\">\n\t<a href=\"https://daybrush.com/sponsors/sponsors.svg\">\n\t\t<img src=\"https://daybrush.com/sponsors/sponsors.svg\"/>\n\t</a>\n</p>\n\n\n\n## 📝 License\n\nThis project is [MIT](https://github.com/daybrush/moveable/blob/master/LICENSE) licensed.\n\n```\nMIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n"
  },
  {
    "path": "packages/react-moveable/croffle.config.js",
    "content": "const {\n    ReactCroissant,\n    VueWaffle,\n    DefaultModulePrefixSirup,\n    ModuleSirupFactory,\n    TemplateSirupFactory,\n    SvelteWaffle,\n    ScriptWaffle,\n    ScriptComponentSirupFactory,\n    createInlineNewExpression,\n    factory,\n    AngularWaffle,\n    LitWaffle,\n    transform,\n    copyJsxAttribute,\n    copyJsxElement,\n} = require(\"croffle\");\nconst {\n    cleanPaths,\n} = require(\"@croffle/bakery\");\nconst {\n    decamelize,\n} = require(\"@daybrush/utils\");\nconst ts = require(\"typescript\");\n\ncleanPaths(\"stories/**/+([0-9A-Za-z])-*/{script,vue2,vue3,svelte,angular,lit}/\");\n\n\nconst scriptMoveableScriptComponentSirup = ScriptComponentSirupFactory({\n    path: [\"moveable\", \"default\"],\n    isContainerInstance: true,\n});\n\nconst scriptSelectoComponentSirup = ScriptComponentSirupFactory({\n    path: [\"selecto\", \"default\"],\n    instance(node) {\n        const args = node.arguments;\n        const elementNode = args[0];\n        const optionsNode = args[1];\n\n        return createInlineNewExpression(\n            node.expression,\n            [factory.createObjectLiteralExpression([\n                factory.createPropertyAssignment(\"container\", elementNode),\n                ...optionsNode.properties,\n            ])],\n        );\n    },\n});\n\nconst ngxModuleSirup = ModuleSirupFactory(\n    {\n        module: /ngx-/g,\n        name: \"default\",\n    },\n    {\n        module: module => module,\n        name: (_, binding) => `Ngx${binding}Component`,\n    },\n);\n\nconst ngxTemplateSirup = TemplateSirupFactory(\n    /^Ngx(.+)Component$/g,\n    text => decamelize(text.replace(/^Ngx/g, \"ngx\").replace(/Component$/g, \"\"), \"-\"),\n);\n\n\nfunction vueKeyconSirup(sirup) {\n    sirup.requestId({\n        path: [/vue[3]?-keycon/g, \"useKeycon\"],\n        named: [\"isKeydown\"],\n    }, node => {\n        // use ref\n        return sirup.utils.createInlinePropertyAccess(node, \"value\");\n    });\n}\nfunction svelteKeyconSirup(sirup){\n    sirup.requestId({\n        path: [/svelte-keycon/g, \"useKeycon\"],\n        named: [\"isKeydown\"],\n    }, node => {\n        // use writable\n        return sirup.ts.factory.createIdentifier(`$${node.name.escapedText}`);\n    });\n}\n\n\nconst litTemplateAttributeSirup = sirup => {\n    sirup.requestTemplate({\n        module: /lit-moveable|lit-selecto/g,\n        name: \"default\",\n    }, info => {\n        const nextOpeningElement = transform(info.openingElement, node => {\n            if (!ts.isJsxAttribute(node)) {\n                return;\n            }\n            const attrName = node.name.escapedText;\n\n            if (attrName.match(/^on[A-Z]/g)) {\n                return copyJsxAttribute(node, {\n                    name: factory.createIdentifier(attrName.replace(\"on\", \"onLit\")),\n                });\n            } else if (attrName === \"draggable\") {\n                return copyJsxAttribute(node, {\n                    name: factory.createIdentifier(\"litDraggable\"),\n                });\n            }\n        });\n\n        const node = info.node;\n        if (ts.isJsxElement(node)) {\n            return copyJsxElement(node, {\n                openingElement: nextOpeningElement,\n            });\n        } else {\n            return nextOpeningElement;\n        }\n    });\n};\n\nconst litTemplateSirup = TemplateSirupFactory(\n    { module: /lit-/g, name: \"default\" },\n    tagName => `lit-${decamelize(tagName).toLowerCase()}`,\n);\n\n\n/**\n * @param {import(\"croffle\").Sirup} sirup\n */\nfunction PreviewPropsSirup(sirup) {\n    sirup.requestProps((node, { data }) => {\n        if (!data.props) {\n            data.props = [];\n        }\n        node.members.forEach(member => {\n            const propName = member.name.escapedText;\n\n            data.props.push(propName);\n        });\n\n        return sirup.utils.copyInterfaceDeclaration(node, { members: [] });\n    });\n\n    sirup.requestLifeCycle(\"created\", (node, { data }) => {\n        if (!data.props || !data.props.length) {\n            return;\n        }\n\n        const statements = data.props.map(name => {\n            return sirup.utils.createInlineCroffleAssignment(\n                name,\n                \"Any\",\n                sirup.factory.createStringLiteral(`$preview_${name}`),\n            );\n        });\n        const body = node.body;\n\n        return sirup.utils.copyFunctionDeclaration(\n            node,\n            {\n                body: sirup.factory.updateBlock(body, [\n                    ...statements,\n                    ...body.statements,\n                ]),\n            },\n        );\n    });\n}\n\n/**\n * @type {import(\"@croffle/bakery\").CroffleConfig[]}\n */\nconst config = [\n    {\n        targets: \"stories/**/+([0-9A-Za-z])-*/React*App.tsx\",\n        // targets: \"stories/1-Basic/**/React*App.tsx\",\n        croissant: () => {\n            const croissant = new ReactCroissant();\n\n            croissant.addSirup(PreviewPropsSirup);\n            croissant.addSirup(sirup => {\n                sirup.convertImport(\"@/react-moveable\", \"react-moveable\");\n                sirup.convertImport(\"@/helper\", \"@moveable/helper\");\n            });\n            croissant.addSirup(DefaultModulePrefixSirup);\n            return croissant;\n        },\n        defrosted: (defrosted, croissant) => {\n            const app = defrosted.app;\n            const results = croissant.findUsedSpecifiers(app, \"react-dom\", \"createPortal\");\n\n            return !results.length;\n        },\n        waffle: [\n            // Vanilla\n            (defrosted) => {\n                const hasKeycon = !!defrosted.allRequires[\"react-keycon\"];\n\n                if (hasKeycon) {\n                    return;\n                }\n                const waffle = new ScriptWaffle();\n\n                waffle.addSirup(\n                    scriptMoveableScriptComponentSirup,\n                    scriptSelectoComponentSirup,\n                );\n\n                return {\n                    dist: `./{type}/{name}/App{ext}`,\n                    waffle,\n                };\n            },\n            // Vue 3\n            (defrosted) => {\n                const hasKeycon = !!defrosted.allRequires[\"react-keycon\"];\n                const waffle = new VueWaffle();\n\n\n                if (hasKeycon) {\n                    waffle.addSirup(\n                        sirup => {\n                            sirup.convertImport(\"vue3-keycon\", \"vue-keycon\");\n                        },\n                        vueKeyconSirup,\n                    );\n                }\n                return {\n                    dist: `./{type}/{name}/App{ext}`,\n                    waffle,\n                };\n            },\n            // Vue 2\n            (defrosted) => {\n                const hasKeycon = !!defrosted.allRequires[\"react-keycon\"];\n                const waffle = new VueWaffle({\n                    useVue2: true,\n                    useOptionsAPI: !hasKeycon,\n                });\n\n                if (hasKeycon) {\n                    waffle.addSirup(\n                        sirup => {\n                            sirup.convertImport(\"vue-keycon\", \"vue2-keycon\");\n                        },\n                        vueKeyconSirup,\n                    );\n                }\n                return {\n                    dist: `./{type}/{name}/App{ext}`,\n                    waffle,\n                };\n            },\n            // Svelte\n            (defrosted) => {\n                const hasKeycon = !!defrosted.allRequires[\"react-keycon\"];\n                const waffle = new SvelteWaffle();\n\n                if (hasKeycon) {\n                    waffle.addSirup(svelteKeyconSirup);\n                }\n                return {\n                    dist: `./{type}/{name}/App{ext}`,\n                    waffle,\n                };\n            },\n            // Angular\n            (defrosted) => {\n                const hasKeycon = !!defrosted.allRequires[\"react-keycon\"];\n\n                if (hasKeycon) {\n                    return;\n                }\n                const waffle = new AngularWaffle({\n                    useTemplateUrl: true,\n                });\n\n                waffle.addSirup(\n                    ngxModuleSirup,\n                    ngxTemplateSirup,\n                );\n\n                return {\n                    dist: `./{type}/{name}/App{ext}`,\n                    waffle,\n                };\n            },\n            // Lit\n            (defrosted) => {\n                const hasKeycon = !!defrosted.allRequires[\"react-keycon\"];\n\n                if (hasKeycon) {\n                    return;\n                }\n                const waffle = new LitWaffle();\n\n                waffle.addSirup(\n                    litTemplateAttributeSirup,\n                    litTemplateSirup,\n                );\n\n                return {\n                    dist: `./{type}/{name}/App{ext}`,\n                    waffle,\n                };\n            },\n        ],\n    },\n];\n\n\nmodule.exports = config;\n"
  },
  {
    "path": "packages/react-moveable/global.d.ts",
    "content": "declare module \"!!raw-loader!*\" {\n    const content: string;\n    export default content;\n}\ndeclare module \"*.svg\" {\n    const content: string;\n    export default content;\n}\n"
  },
  {
    "path": "packages/react-moveable/groupable.md",
    "content": "## 🚀 How to use Groupable\n* **Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.\n\n* [API Documentation](https://daybrush.com/moveable/release/latest/doc/)\n* **draggable**\n    * [onDragGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:dragGroupStart)\n    * [onDragGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:dragGroup)\n    * [onDragGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:dragGroupEnd)\n* **resizable**\n    * [onResizeGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:resizeGroupStart)\n    * [onResizeGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:resizeGroup)\n    * [onResizeGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:resizeGroupEnd)\n* **scalable**\n    * [onScaleGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:scaleGroupStart)\n    * [onScaleGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:scaleGroup)\n    * [onScaleGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:rscaleGroupEnd)\n* **rotatable**\n    * [onRotateGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:rotateGroupStart)\n    * [onRotateGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:rotateGroup)\n    * [onRotateGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:rotateGroupEnd)\n* **pinchable**\n    * [onPinchGroupStart](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:pinchGroupStart)\n    * [onPinchGroup](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:pinchGroup)\n    * [onPinchGroupEnd](https://daybrush.com/moveable/release/latest/doc/Moveable.html#.event:pinchGroupEnd)\n\n\n```tsx\nimport Moveable from \"react-moveable\";\n\nrender() {\n    return (\n        <Moveable\n            /* multiple targets */\n            target={[].slice.call(document.querySelectorAll(\".target\"))}\n            container={null}\n            origin={true}\n\n            /* Resize event edges */\n            edge={false}\n\n            /* draggable */\n            draggable={true}\n            throttleDrag={0}\n            onDragGroupStart={({ targets }) => {\n                console.log(\"onDragGroupStart\", targets);\n            }}\n            onDragGroup={({ targets, events }) => {\n                console.log(\"onDragGroup\", targets);\n\n                events.forEach(ev => {\n                    // drag event\n                    console.log(\"onDrag left, top\", ev.left, ev.top);\n                    // ev.target!.style.left = `${ev.left}px`;\n                    // ev.target!.style.top = `${ev.top}px`;\n                    console.log(\"onDrag translate\", ev.dist);\n                    ev.target!.style.transform = ev.transform;)\n                });\n            }}\n            onDragGroupEnd={({ targets, isDrag, clientX, clientY }) => {\n                console.log(\"onDragGroupEnd\", target, isDrag);\n            }}\n\n            /* When resize or scale, keeps a ratio of the width, height. */\n            keepRatio={true}\n\n            /* resizable*/\n            /* Only one of resizable, scalable, warpable can be used. */\n            resizable={true}\n            throttleResize={0}\n            onResizeGroupStart={({ targets, clientX, clientY }) => {\n                console.log(\"onResizeGroupStart\", targets);\n            }}\n            onResizeGroup={({ events, targets, direction }) => {\n                console.log(\"onResizeGroup\", targets);\n\n                events.forEach(ev => {\n                    const offset = [\n                        direction[0] < 0 ? -ev.delta[0] : 0,\n                        direction[1] < 0 ? -ev.delta[1] : 0,\n                    ];\n                    // ev.drag is a drag event that occurs when the group resize.\n                    const left = offset[0] + ev.drag.beforeDist[0];\n                    const top = offset[1] + ev.drag.beforeDist[1];\n                    const width = ev.width;\n                    const top = ev.top;\n                });\n            }}\n            onResizeGroupEnd={({ targets, isDrag, clientX, clientY }) => {\n                console.log(\"onResizeGroupEnd\", targets, isDrag);\n            }}\n\n            /* scalable */\n            /* Only one of resizable, scalable, warpable can be used. */\n            scalable={true}\n            throttleScale={0}\n            onScaleGroupStart={({ targets, clientX, clientY }) => {\n                console.log(\"onScaleGroupStart\", targets);\n            }}\n            onScale={({\n                targets,\n                events,\n            }) => {\n                console.log(\"onScaleGroup\", targets);\n\n                events.forEach(ev => {\n                    const target = ev.target;\n                    // ev.drag is a drag event that occurs when the group scale.\n                    const left = ev.drag.beforeDist[0];\n                    const top = ev.drag.beforeDist[1];\n                    const scaleX = ev.scale[0];\n                    const scaleY = ev.scale[1];\n                });\n            }}\n            onScaleEnd={({ target, isDrag, clientX, clientY }) => {\n                console.log(\"onScaleGroupEnd\", target, isDrag);\n            }}\n\n            /* rotatable */\n            rotatable={true}\n            throttleRotate={0}\n            onRotateGroupStart={({ targets, clientX, clientY }) => {\n                console.log(\"onRotateGroupStart\", targets);\n            }}\n            onRotateGroup={({\n                targets,\n                events\n                delta, dist,\n            }) => {\n                e.events.forEach(ev => {\n                    const target = ev.target;\n                    // ev.drag is a drag event that occurs when the group rotate.\n                    const left = ev.drag.beforeDist[0];\n                    const top = ev.drag.beforeDist[1];\n                    const deg = ev.beforeDist;\n                });\n\n            }}\n            onRotateGroupEnd={({ targets, isDrag, clientX, clientY }) => {\n                console.log(\"onRotateGroupEnd\", targets, isDrag);\n            }}\n\n            // Enabling pinchable lets you use events that\n            // can be used in draggable, resizable, scalable, and rotateable.\n            pinchable={true}\n            onPinchGroupStart={({ targets, clientX, clientY, datas }) => {\n                // pinchGroupStart event occur before dragGroupStart, rotateGroupStart, scaleGroupStart, resizeGroupStart\n                console.log(\"onPinchGroupStart\");\n            }}\n            onPinchGroup={({ targets, clientX, clientY, datas }) => {\n                // pinchGroup event occur before dragGroup, rotateGroup, scaleGroup, resizeGroup\n                console.log(\"onPinchGroup\");\n            }}\n            onPinchGroupEnd={({ isDrag, targets, clientX, clientY, datas }) => {\n                // pinchGroupEnd event occur before dragGroupEnd, rotateGroupEnd, scaleGroupEnd, resizeGroupEnd\n                console.log(\"onPinchGroupEnd\");\n            }}\n        />\n    );\n}\n```\n"
  },
  {
    "path": "packages/react-moveable/karma.conf.js",
    "content": "const tester = require(\"@daybrush/tester\");\n\ntester.setFiles([\n    \"./src/**/*.ts\",\n    \"./src/**/*.tsx\",\n    \"./test/**/*.ts\",\n    \"./test/**/*.tsx\",\n]);\n\nmodule.exports = tester.karmaConfig;\n"
  },
  {
    "path": "packages/react-moveable/mocha.opts",
    "content": "--timeout 10000\n"
  },
  {
    "path": "packages/react-moveable/package.json",
    "content": "{\n    \"name\": \"react-moveable\",\n    \"version\": \"0.56.0\",\n    \"description\": \"A React Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.\",\n    \"main\": \"./dist/moveable.cjs.js\",\n    \"module\": \"./dist/moveable.esm.js\",\n    \"sideEffects\": false,\n    \"types\": \"declaration/index.d.ts\",\n    \"files\": [\n        \"./*\",\n        \"src/*\",\n        \"dist/*\",\n        \"declaration/*\",\n        \"types/*\"\n    ],\n    \"scripts\": {\n        \"lint\": \"eslint ./src/ --ext .ts,.tsx\",\n        \"storybook\": \"rm -rf node_modules/.cache && start-storybook -p 6006\",\n        \"bake\": \"bake\",\n        \"test\": \"test-storybook\",\n        \"test:build\": \"EXEC_TEST=true build-storybook -o ./test-static\",\n        \"test:ci\": \"concurrently -k -s first -n \\\"SB,TEST\\\" -c \\\"magenta,blue\\\" \\\"yarn test:build --quiet && npx http-server ./test-static --port 6006 --silent\\\" \\\"wait-on tcp:6006 && yarn test\\\"\",\n        \"test:fail\": \"SKIP_TEST=true test-storybook\",\n        \"test:fail-build\": \"SKIP_TEST=true build-storybook -o ./test-static\",\n        \"test:fail-ci\": \"concurrently -k -s first -n \\\"SB,TEST\\\" -c \\\"magenta,blue\\\" \\\"yarn test:fail-build --quiet && npx http-server ./test-static --port 6006 --silent\\\" \\\"wait-on tcp:6006 && yarn test:fail\\\"\",\n        \"test:type\": \"tsc -p tsconfig.test.json\",\n        \"coverage\": \"test-storybook --maxWorkers=2 --coverage\",\n        \"build\": \"npm run lint && npm run test:type && rollup -c && npm run declaration && print-sizes ./dist\",\n        \"build:storybook\": \"SKIP_TEST=true build-storybook -o ../../demo/storybook\",\n        \"declaration\": \"rm -rf declaration && tsc -p tsconfig.declaration.json\"\n    },\n    \"keywords\": [\n        \"moveable\",\n        \"resizable\",\n        \"scalable\",\n        \"draggable\",\n        \"rotatable\",\n        \"warpable\",\n        \"pinchable\",\n        \"groupable\",\n        \"snappable\",\n        \"scrollable\",\n        \"movable\",\n        \"throttle\",\n        \"scroll\",\n        \"ratio\",\n        \"dom\",\n        \"resize\",\n        \"scale\",\n        \"drag\",\n        \"move\",\n        \"rotate\",\n        \"react\",\n        \"warp\",\n        \"snap\",\n        \"pinch\",\n        \"react\"\n    ],\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/daybrush/moveable/blob/master/packages/react-moveable\"\n    },\n    \"author\": \"Daybrush\",\n    \"license\": \"MIT\",\n    \"bugs\": {\n        \"url\": \"https://github.com/daybrush/moveable/issues\"\n    },\n    \"homepage\": \"https://daybrush.com/moveable\",\n    \"devDependencies\": {\n        \"@babel/core\": \"^7.7.2\",\n        \"@croffle/bakery\": \"^0.0.25\",\n        \"@daybrush/builder\": \"^0.2.4\",\n        \"@daybrush/tester\": \"^0.1.3\",\n        \"@scena/react-guides\": \"^0.17.1\",\n        \"@storybook/addon-actions\": \"6.5.16\",\n        \"@storybook/addon-controls\": \"6.5.16\",\n        \"@storybook/addon-coverage\": \"^0.0.8\",\n        \"@storybook/addon-docs\": \"6.5.16\",\n        \"@storybook/addon-google-analytics\": \"^6.2.9\",\n        \"@storybook/addon-interactions\": \"6.5.16\",\n        \"@storybook/addon-links\": \"6.5.16\",\n        \"@storybook/addon-storyshots\": \"6.5.16\",\n        \"@storybook/addon-viewport\": \"6.5.16\",\n        \"@storybook/addons\": \"6.5.16\",\n        \"@storybook/jest\": \"^0.0.10\",\n        \"@storybook/mdx2-csf\": \"^0.0.4\",\n        \"@storybook/react\": \"6.5.16\",\n        \"@storybook/test-runner\": \"^0.9.4\",\n        \"@storybook/testing-library\": \"^0.0.13\",\n        \"@types/node\": \"^18.11.3\",\n        \"@types/react\": \"^16.9.17\",\n        \"@types/react-dom\": \"^16.9.4\",\n        \"@typescript-eslint/eslint-plugin\": \"^5.60.1\",\n        \"@typescript-eslint/parser\": \"^5.60.1\",\n        \"babel-loader\": \"^8.0.6\",\n        \"concurrently\": \"^7.6.0\",\n        \"croffle\": \"^0.0.21\",\n        \"css-loader\": \"^5.0.1\",\n        \"eslint\": \"^7.7.0\",\n        \"eslint-plugin-import\": \"^2.22.1\",\n        \"eslint-plugin-react\": \"^7.22.0\",\n        \"gh-pages\": \"^2.1.1\",\n        \"http-server\": \"^14.1.1\",\n        \"jest\": \"^29.0.3\",\n        \"jest-image-snapshot\": \"^6.1.0\",\n        \"keycon\": \"^1.0.0\",\n        \"print-sizes\": \"^0.2.0\",\n        \"pvu\": \"^0.6.1\",\n        \"raw-loader\": \"^4.0.2\",\n        \"react\": \"^16.8.6\",\n        \"react-dom\": \"^16.8.6\",\n        \"react-infinite-viewer\": \"^0.19.1\",\n        \"react-keycon\": \"^0.1.2\",\n        \"react-selecto\": \"^1.24.0\",\n        \"storybook-addon-preview\": \"^2.3.0\",\n        \"storybook-dark-mode\": \"^1.0.9\",\n        \"ts-loader\": \"^8.1.0\",\n        \"tslib\": \"^2.3.1\",\n        \"typescript\": \"^4.8 <4.9\",\n        \"wait-on\": \"^7.0.1\"\n    },\n    \"dependencies\": {\n        \"@daybrush/utils\": \"^1.13.0\",\n        \"@egjs/agent\": \"^2.2.1\",\n        \"@egjs/children-differ\": \"^1.0.1\",\n        \"@egjs/list-differ\": \"^1.0.0\",\n        \"@scena/dragscroll\": \"^1.4.0\",\n        \"@scena/event-emitter\": \"^1.0.5\",\n        \"@scena/matrix\": \"^1.1.1\",\n        \"css-to-mat\": \"^1.1.1\",\n        \"framework-utils\": \"^1.1.0\",\n        \"gesto\": \"^1.19.3\",\n        \"overlap-area\": \"^1.1.0\",\n        \"react-css-styled\": \"^1.1.9\",\n        \"react-selecto\": \"^1.25.0\"\n    },\n    \"browserslist\": {\n        \"production\": [\n            \">0.2%\",\n            \"not dead\",\n            \"not op_mini all\"\n        ],\n        \"development\": [\n            \"last 1 chrome version\",\n            \"last 1 firefox version\",\n            \"last 1 safari version\"\n        ]\n    }\n}\n"
  },
  {
    "path": "packages/react-moveable/rollup.config.js",
    "content": "const builder = require(\"@daybrush/builder\");\n\nconst defaultOptions = {\n    tsconfig: \"tsconfig.build.json\",\n    typescript2: true,\n};\n\nmodule.exports = builder([\n    {\n        ...defaultOptions,\n        input: \"src/index.ts\",\n        output: \"./dist/moveable.esm.js\",\n        visualizer: true,\n        format: \"es\",\n        exports: \"named\",\n    },\n    {\n        ...defaultOptions,\n        input: \"src/index.umd.ts\",\n        output: \"./dist/moveable.cjs.js\",\n        format: \"cjs\",\n        exports: \"named\",\n    },\n]);\n"
  },
  {
    "path": "packages/react-moveable/src/EventManager.ts",
    "content": "import { Able, MoveableManagerInterface } from \"./types\";\n\nexport default class EventManager {\n    private ables: Able[] = [];\n    constructor(\n        private target: HTMLElement | SVGElement | null,\n        private moveable: MoveableManagerInterface | null,\n        private eventName: string,\n    ) {\n        target!.addEventListener(eventName.toLowerCase(), this._onEvent);\n    }\n    public setAbles(ables: Able[]) {\n        this.ables = ables;\n    }\n    public destroy() {\n        this.target!.removeEventListener(this.eventName.toLowerCase(), this._onEvent);\n        this.target = null;\n        this.moveable = null;\n    }\n    private _onEvent = (e: Event) => {\n        const eventName = this.eventName;\n        const moveable = this.moveable!;\n\n        if (moveable.state.disableNativeEvent) {\n            return;\n        }\n        this.ables.forEach(able => {\n            (able as any)[eventName](moveable, {\n                inputEvent: e,\n            });\n        });\n    }\n}\n"
  },
  {
    "path": "packages/react-moveable/src/InitialMoveable.tsx",
    "content": "import * as React from \"react\";\nimport {\n    Able, MoveableInterface, GroupableProps, MoveableDefaultProps,\n    IndividualGroupableProps, MoveableManagerInterface, MoveableRefTargetsResultType,\n    MoveableTargetGroupsType, BeforeRenderableProps, RenderableProps, MoveableManagerState,\n} from \"./types\";\nimport MoveableManager from \"./MoveableManager\";\nimport MoveableGroup from \"./MoveableGroup\";\nimport { ref, withMethods, prefixCSS } from \"framework-utils\";\nimport { find, getKeys, IObject, isArray, isString } from \"@daybrush/utils\";\nimport { MOVEABLE_METHODS, PREFIX, MOVEABLE_CSS } from \"./consts\";\nimport Default from \"./ables/Default\";\nimport Groupable from \"./ables/Groupable\";\nimport DragArea from \"./ables/DragArea\";\nimport { styled } from \"react-css-styled\";\nimport { getRefTargets } from \"./utils\";\nimport IndividualGroupable from \"./ables/IndividualGroupable\";\nimport MoveableIndividualGroup from \"./MoveableIndividualGroup\";\nimport ChildrenDiffer from \"@egjs/children-differ\";\n\nfunction getElementTargets(\n    refTargets: MoveableRefTargetsResultType,\n    selectorMap: IObject<Array<HTMLElement | SVGElement>>,\n): Array<SVGElement | HTMLElement> {\n    const elementTargets: Array<SVGElement | HTMLElement> = [];\n\n    refTargets.forEach(target => {\n        if (!target) {\n            return;\n        }\n        if (isString(target)) {\n            if (selectorMap[target]) {\n                elementTargets.push(...selectorMap[target]);\n            }\n            return;\n        }\n        if (isArray(target)) {\n            elementTargets.push(...getElementTargets(target, selectorMap));\n        } else {\n            elementTargets.push(target);\n        }\n    });\n\n    return elementTargets;\n}\n\nfunction getTargetGroups(\n    refTargets: MoveableRefTargetsResultType,\n    selectorMap: IObject<Array<HTMLElement | SVGElement>>,\n) {\n    const targetGroups: MoveableTargetGroupsType = [];\n\n    refTargets.forEach(target => {\n        if (!target) {\n            return;\n        }\n        if (isString(target)) {\n            if (selectorMap[target]) {\n                targetGroups.push(...selectorMap[target]);\n            }\n            return;\n        }\n        if (isArray(target)) {\n            targetGroups.push(getTargetGroups(target, selectorMap));\n        } else {\n            targetGroups.push(target);\n        }\n    });\n\n    return targetGroups;\n}\n\nfunction compareRefTargets(\n    prevRefTargets: MoveableRefTargetsResultType,\n    nextRefTargets: MoveableRefTargetsResultType,\n): boolean {\n    return (prevRefTargets.length !== nextRefTargets.length) || prevRefTargets.some((target, i) => {\n        const nextTarget = nextRefTargets[i];\n\n        if (!target && !nextTarget) {\n            return false;\n        } else if (target != nextTarget) {\n            if (isArray(target) && isArray(nextTarget)) {\n                return compareRefTargets(target, nextTarget);\n            }\n            return true;\n        }\n        return false;\n    });\n}\n\ntype DefaultAbles = GroupableProps & IndividualGroupableProps & BeforeRenderableProps & RenderableProps;\n\nexport class InitialMoveable<T = {}>\n    extends React.PureComponent<MoveableDefaultProps & DefaultAbles & T> {\n    public static defaultAbles: readonly Able<any>[] = [];\n    public static customStyledMap: Record<string, any> = {};\n    public static defaultStyled: any = null;\n    public static makeStyled() {\n        const cssMap: IObject<boolean> = {};\n\n        const ables = this.getTotalAbles();\n        ables.forEach(({ css }: Able) => {\n            if (!css) {\n                return;\n            }\n            css.forEach(text => {\n                cssMap[text] = true;\n            });\n        });\n        const style = getKeys(cssMap).join(\"\\n\");\n\n        this.defaultStyled = styled(\"div\", prefixCSS(PREFIX, MOVEABLE_CSS + style));\n    }\n    public static getTotalAbles(): Able[] {\n        return [Default, Groupable, IndividualGroupable, DragArea, ...this.defaultAbles];\n    }\n    @withMethods(MOVEABLE_METHODS)\n    public moveable!: MoveableManager | MoveableGroup | MoveableIndividualGroup;\n    public refTargets: MoveableRefTargetsResultType = [];\n    public selectorMap: IObject<Array<HTMLElement | SVGElement>> = {};\n    private _differ: ChildrenDiffer<HTMLElement | SVGElement> = new ChildrenDiffer();\n    private _elementTargets: Array<HTMLElement | SVGElement> = [];\n    private _tmpRefTargets: MoveableRefTargetsResultType = [];\n    private _tmpSelectorMap: IObject<Array<HTMLElement | SVGElement>> = {};\n    private _onChangeTargets: (() => void) | null = null;\n    public render() {\n        const moveableContructor = (this.constructor as typeof InitialMoveable);\n\n        if (!moveableContructor.defaultStyled) {\n            moveableContructor.makeStyled();\n        }\n        const {\n            ables: userAbles,\n            props: userProps,\n            ...props\n        } = this.props;\n        const [\n            refTargets,\n            nextSelectorMap,\n        ] = this._updateRefs(true);\n        const elementTargets = getElementTargets(refTargets, nextSelectorMap);\n\n        let isGroup = elementTargets.length > 1;\n        const totalAbles = moveableContructor.getTotalAbles();\n        const ables = [\n            ...totalAbles,\n            ...(userAbles as any || []),\n        ];\n        const nextProps = {\n            ...props,\n            ...(userProps || {}),\n            ables,\n            cssStyled: moveableContructor.defaultStyled,\n            customStyledMap: moveableContructor.customStyledMap,\n        };\n\n        this._elementTargets = elementTargets;\n\n        let firstRenderState: MoveableManagerState | null = null;\n        const prevMoveable = this.moveable;\n\n\n        const persistData = props.persistData;\n\n        if (persistData?.children) {\n            isGroup = true;\n        }\n        // Even one child is treated as a group if individualGroupable is enabled. #867\n        if (props.individualGroupable) {\n            return <MoveableIndividualGroup key=\"individual-group\" ref={ref(this, \"moveable\")}\n                {...nextProps}\n                target={null}\n                targets={elementTargets}\n            />;\n        }\n        if (isGroup) {\n            const targetGroups = getTargetGroups(refTargets, nextSelectorMap);\n\n            // manager\n            if (prevMoveable && !prevMoveable.props.groupable && !(prevMoveable.props as any).individualGroupable) {\n                const target = prevMoveable.props.target!;\n\n                if (target && elementTargets.indexOf(target) > -1) {\n                    firstRenderState = { ...prevMoveable.state };\n                }\n            }\n\n            return <MoveableGroup key=\"group\" ref={ref(this, \"moveable\")}\n                {...nextProps}\n                {...props.groupableProps ?? {}}\n                target={null}\n                targets={elementTargets}\n                targetGroups={targetGroups}\n                firstRenderState={firstRenderState}\n            />;\n        } else {\n            const target = elementTargets[0];\n            // manager\n            if (prevMoveable && (prevMoveable.props.groupable || (prevMoveable.props as any).individualGroupable)) {\n                const moveables = (prevMoveable as MoveableGroup | MoveableIndividualGroup).moveables || [];\n                const prevTargetMoveable = find(moveables, mv => mv.props.target === target);\n\n                if (prevTargetMoveable) {\n                    firstRenderState = { ...prevTargetMoveable.state };\n                }\n            }\n\n            return <MoveableManager<any> key=\"single\" ref={ref(this, \"moveable\")}\n                {...nextProps}\n                target={target}\n                firstRenderState={firstRenderState} />;\n        }\n    }\n    public componentDidMount() {\n        this._checkChangeTargets();\n    }\n    public componentDidUpdate() {\n        this._checkChangeTargets();\n    }\n    public componentWillUnmount() {\n        this.selectorMap = {};\n        this.refTargets = [];\n    }\n    /**\n     * Get targets set in moveable through target or targets of props.\n     * @method Moveable#getTargets\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body, {\n     *    target: [targetRef, \".target\", document.querySelectorAll(\".target\")],\n     * });\n     *\n     * console.log(moveable.getTargets());\n     */\n    public getTargets() {\n        return this.moveable?.getTargets() ?? [];\n    }\n    /**\n     * If the element list corresponding to the selector among the targets is changed, it is updated.\n     * @method Moveable#updateSelectors\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body, {\n     *    target: \".target\",\n     * });\n     *\n     * moveable.updateSelectors();\n     */\n    public updateSelectors() {\n        this.selectorMap = {};\n        this._updateRefs();\n        this.forceUpdate();\n    }\n    /**\n     * User changes target and waits for target to change.\n     * @method Moveable#waitToChangeTarget\n     * @story combination-with-other-components--components-selecto\n     * @example\n     * document.querySelector(\".target\").addEventListener(\"mousedown\", e => {\n     *   moveable.waitToChangeTarget().then(() => {\n     *      moveable.dragStart(e, e.currentTarget);\n     *   });\n     *   moveable.target = e.currentTarget;\n     * });\n     */\n    public waitToChangeTarget(): Promise<void> {\n        // let resolvePromise: (e: OnChangeTarget) => void;\n\n        // this._onChangeTargets = () => {\n        //     this._onChangeTargets = null;\n        //     resolvePromise({\n        //         moveable: this.getManager(),\n        //         targets: this._elementTargets,\n        //     });\n        // };\n\n        // return new Promise<OnChangeTarget>(resolve => {\n        //     resolvePromise = resolve;\n        // });\n        let resolvePromise: () => void;\n\n        this._onChangeTargets = () => {\n            this._onChangeTargets = null;\n            resolvePromise();\n        };\n\n        return new Promise(resolve => {\n            resolvePromise = resolve;\n        });\n    }\n    public waitToChangeTargets(): Promise<void> {\n        return this.waitToChangeTarget();\n    }\n    public getManager(): MoveableManagerInterface<any, any> {\n        return this.moveable;\n    }\n    public getMoveables(): MoveableManagerInterface[] {\n        return this.moveable.getMoveables();\n    }\n    public getDragElement(): HTMLElement | SVGElement | null | undefined {\n        return this.moveable.getDragElement();\n    }\n    private _updateRefs(isRender?: boolean) {\n        const prevRefTargets = this.refTargets;\n        const nextRefTargets = getRefTargets((this.props.target || this.props.targets) as any);\n        const isBrowser = typeof document !== \"undefined\";\n\n        let isUpdate = compareRefTargets(prevRefTargets, nextRefTargets);\n        const selectorMap = this.selectorMap;\n        const nextSelectorMap: IObject<Array<HTMLElement | SVGElement>> = {};\n\n        this.refTargets.forEach(function updateSelectorMap(target) {\n            if (isString(target)) {\n                const selectorTarget = selectorMap[target];\n\n                if (selectorTarget) {\n                    nextSelectorMap[target] = selectorMap[target];\n                } else if (isBrowser) {\n                    isUpdate = true;\n                    nextSelectorMap[target] = [].slice.call(document.querySelectorAll(target));\n                }\n            } else if (isArray(target)) {\n                target.forEach(updateSelectorMap);\n            }\n        });\n\n        this._tmpRefTargets = nextRefTargets;\n        this._tmpSelectorMap = nextSelectorMap;\n\n        return [\n            nextRefTargets,\n            nextSelectorMap,\n            !isRender && isUpdate,\n        ] as const;\n    }\n    private _checkChangeTargets() {\n        this.refTargets = this._tmpRefTargets;\n        this.selectorMap = this._tmpSelectorMap;\n\n        const { added, removed } = this._differ.update(this._elementTargets);\n        const isTargetChanged = added.length || removed.length;\n\n        if (isTargetChanged) {\n            this.props.onChangeTargets?.({\n                moveable: this.moveable,\n                targets: this._elementTargets,\n            });\n            this._onChangeTargets?.();\n        }\n        const [\n            refTargets,\n            selectorMap,\n            isUpdate,\n        ] = this._updateRefs();\n\n        this.refTargets = refTargets;\n        this.selectorMap = selectorMap;\n\n        if (isUpdate) {\n            this.forceUpdate();\n        }\n    }\n}\nexport interface InitialMoveable<T = {}>\n    extends React.PureComponent<MoveableDefaultProps & DefaultAbles & T>,\n    MoveableInterface {\n    setState(state: any, callback?: () => any): any;\n    forceUpdate(callback?: () => any): any;\n}\n"
  },
  {
    "path": "packages/react-moveable/src/Moveable.tsx",
    "content": "import { MoveableProps, Able } from \"./types\";\nimport { MOVEABLE_ABLES } from \"./ables/consts\";\nimport { InitialMoveable } from \"./InitialMoveable\";\n\nexport default class Moveable<T = {}> extends InitialMoveable<MoveableProps & T> {\n    public static defaultAbles: Able[] = MOVEABLE_ABLES as any;\n}\n"
  },
  {
    "path": "packages/react-moveable/src/MoveableGroup.tsx",
    "content": "import MoveableManager from \"./MoveableManager\";\nimport { GroupableProps, GroupRect, MoveableManagerInterface, MoveableTargetGroupsType, RectInfo } from \"./types\";\nimport ChildrenDiffer from \"@egjs/children-differ\";\nimport { getControlAbleGesto, getTargetAbleGesto } from \"./gesto/getAbleGesto\";\nimport Groupable from \"./ables/Groupable\";\nimport { MIN_NUM, MAX_NUM, TINY_NUM } from \"./consts\";\nimport {\n    getAbsolutePosesByState, equals, unsetGesto, rotatePosesInfo,\n    convertTransformOriginArray,\n    isDeepArrayEquals,\n    sign,\n    getRefTarget,\n} from \"./utils\";\nimport { minus, plus } from \"@scena/matrix\";\nimport { getIntersectionPointsByConstants, getMinMaxs } from \"overlap-area\";\nimport { find, isArray, throttle } from \"@daybrush/utils\";\nimport { getMoveableTargetInfo } from \"./utils/getMoveableTargetInfo\";\nimport { solveC, solveConstantsDistance } from \"./Snappable/utils\";\nimport { setStoreCache } from \"./store/Store\";\n\nfunction getMaxPos(poses: number[][][], index: number) {\n    return Math.max(...poses.map(([pos1, pos2, pos3, pos4]) => {\n        return Math.max(pos1[index], pos2[index], pos3[index], pos4[index]);\n    }));\n}\nfunction getMinPos(poses: number[][][], index: number) {\n    return Math.min(...poses.map(([pos1, pos2, pos3, pos4]) => {\n        return Math.min(pos1[index], pos2[index], pos3[index], pos4[index]);\n    }));\n}\n\n\nfunction getGroupRect(parentPoses: number[][][], rotation: number): GroupRect {\n    let pos1 = [0, 0];\n    let pos2 = [0, 0];\n    let pos3 = [0, 0];\n    let pos4 = [0, 0];\n    let width = 0;\n    let height = 0;\n\n    if (!parentPoses.length) {\n        return {\n            pos1,\n            pos2,\n            pos3,\n            pos4,\n            minX: 0,\n            minY: 0,\n            maxX: 0,\n            maxY: 0,\n            width,\n            height,\n            rotation,\n        };\n    }\n    const fixedRotation = throttle(rotation, TINY_NUM);\n\n    if (fixedRotation % 90) {\n        const rad = fixedRotation / 180 * Math.PI;\n        const a1 = Math.tan(rad);\n        const a2 = -1 / a1;\n        // ax = y  // -ax + y = 0 // 0 => 1\n        // -ax = y // ax + y = 0  // 0 => 3\n        const a1MinMax = [MAX_NUM, MIN_NUM];\n        const a1MinMaxPos = [[0, 0], [0, 0]];\n        const a2MinMax = [MAX_NUM, MIN_NUM];\n        const a2MinMaxPos = [[0, 0], [0, 0]];\n\n        parentPoses.forEach(poses => {\n            poses.forEach(pos => {\n\n                // const b1 = pos[1] - a1 * pos[0];\n                // const b2 = pos[1] - a2 * pos[0];\n\n                const a1Dist = solveConstantsDistance([-a1, 1, 0], pos);\n                const a2Dist = solveConstantsDistance([-a2, 1, 0], pos);\n\n                if (a1MinMax[0] > a1Dist) {\n                    a1MinMaxPos[0] = pos;\n                    a1MinMax[0] = a1Dist;\n                }\n                if (a1MinMax[1] < a1Dist) {\n                    a1MinMaxPos[1] = pos;\n                    a1MinMax[1] = a1Dist;\n                }\n                if (a2MinMax[0] > a2Dist) {\n                    a2MinMaxPos[0] = pos;\n                    a2MinMax[0] = a2Dist;\n                }\n                if (a2MinMax[1] < a2Dist) {\n                    a2MinMaxPos[1] = pos;\n                    a2MinMax[1] = a2Dist;\n                }\n            });\n        });\n\n        const [a1MinPos, a1MaxPos] = a1MinMaxPos;\n        const [a2MinPos, a2MaxPos] = a2MinMaxPos;\n\n        const minHorizontalLine = [-a1, 1, solveC([-a1, 1], a1MinPos)];\n        const maxHorizontalLine = [-a1, 1, solveC([-a1, 1], a1MaxPos)];\n\n        const minVerticalLine = [-a2, 1, solveC([-a2, 1], a2MinPos)];\n        const maxVerticalLine = [-a2, 1, solveC([-a2, 1], a2MaxPos)];\n\n        [pos1, pos2, pos3, pos4] = [\n            [minHorizontalLine, minVerticalLine],\n            [minHorizontalLine, maxVerticalLine],\n            [maxHorizontalLine, minVerticalLine],\n            [maxHorizontalLine, maxVerticalLine],\n        ].map(([line1, line2]) => getIntersectionPointsByConstants(line1, line2)[0]);\n\n        width = a2MinMax[1] - a2MinMax[0];\n        height = a1MinMax[1] - a1MinMax[0];\n    } else {\n        const minX = getMinPos(parentPoses, 0);\n        const minY = getMinPos(parentPoses, 1);\n        const maxX = getMaxPos(parentPoses, 0);\n        const maxY = getMaxPos(parentPoses, 1);\n\n        pos1 = [minX, minY];\n        pos2 = [maxX, minY];\n        pos3 = [minX, maxY];\n        pos4 = [maxX, maxY];\n        width = maxX - minX;\n        height = maxY - minY;\n        if (fixedRotation % 180) {\n            // 0\n            // 1 2\n            // 3 4\n            // 90\n            // 3 1\n            // 4 2\n            // 180\n            // 4 3\n            // 2 1\n            // 270\n            // 2 4\n            // 1 3\n            // 1, 2, 3,4 = 3 1 4 2\n            const changedX = [pos3, pos1, pos4, pos2];\n\n            [pos1, pos2, pos3, pos4] = changedX;\n            width = maxY - minY;\n            height = maxX - minX;\n        }\n\n    }\n    if (fixedRotation % 360 > 180) {\n        // 1 2   4 3\n        // 3 4   2 1\n        const changedX = [pos4, pos3, pos2, pos1];\n\n        [pos1, pos2, pos3, pos4] = changedX;\n    }\n    const { minX, minY, maxX, maxY } = getMinMaxs([pos1, pos2, pos3, pos4]);\n\n    return {\n        pos1,\n        pos2,\n        pos3,\n        pos4,\n        width,\n        height,\n        minX,\n        minY,\n        maxX,\n        maxY,\n        rotation,\n    };\n}\ntype SelfGroup = Array<MoveableManager | null | SelfGroup>;\ntype CheckedMoveableManager = { finded: boolean; manager: MoveableManager };\n\nfunction findMoveableGroups(\n    moveables: CheckedMoveableManager[],\n    childTargetGroups: MoveableTargetGroupsType,\n): SelfGroup {\n    const groups = childTargetGroups.map(targetGroup => {\n        if (isArray(targetGroup)) {\n            const childMoveableGroups = findMoveableGroups(moveables, targetGroup);\n            const length = childMoveableGroups.length;\n\n            if (length > 1) {\n                return childMoveableGroups;\n            } else if (length === 1) {\n                return childMoveableGroups[0];\n            } else {\n                return null;\n            }\n        } else {\n            const checked = find(moveables, ({ manager }) => manager.props.target === targetGroup)!;\n\n            if (checked) {\n                checked.finded = true;\n                return checked.manager;\n            }\n            return null;\n        }\n    }).filter(Boolean);\n\n    if (groups.length === 1 && isArray(groups[0])) {\n        return groups[0];\n    }\n    return groups;\n}\n\n/**\n * @namespace Moveable.Group\n * @description You can make targets moveable.\n */\nclass MoveableGroup extends MoveableManager<GroupableProps> {\n    public static defaultProps = {\n        ...MoveableManager.defaultProps,\n        transformOrigin: [\"50%\", \"50%\"],\n        groupable: true,\n        dragArea: true,\n        keepRatio: true,\n        targets: [],\n        defaultGroupRotate: 0,\n        defaultGroupOrigin: \"50% 50%\",\n    };\n    public differ: ChildrenDiffer<HTMLElement | SVGElement> = new ChildrenDiffer();\n    public moveables: MoveableManager[] = [];\n    public transformOrigin = \"50% 50%\";\n    public renderGroupRects: GroupRect[] = [];\n    private _targetGroups: MoveableTargetGroupsType = [];\n    private _hasFirstTargets = false;\n\n    public componentDidMount() {\n        super.componentDidMount();\n    }\n    public checkUpdate() {\n        this._isPropTargetChanged = false;\n        this.updateAbles();\n    }\n    public getTargets() {\n        return this.props.targets!;\n    }\n    public updateRect(type?: \"Start\" | \"\" | \"End\", isTarget?: boolean, isSetState = true) {\n        const state = this.state;\n\n        if (!this.controlBox || state.isPersisted) {\n            return;\n        }\n        setStoreCache(true);\n        this.moveables.forEach(moveable => {\n            moveable.updateRect(type, false, false);\n        });\n\n        const props = this.props;\n        const moveables = this.moveables;\n        const target = state.target! || props.target!;\n        const checkeds = moveables.map(moveable => ({ finded: false, manager: moveable }));\n        const targetGroups = this.props.targetGroups || [];\n        const moveableGroups = findMoveableGroups(\n            checkeds,\n            targetGroups,\n        );\n        const useDefaultGroupRotate = props.useDefaultGroupRotate;\n\n        moveableGroups.push(...checkeds.filter(({ finded }) => !finded).map(({ manager }) => manager));\n\n        const renderGroupRects: GroupRect[] = [];\n        const isReset = !isTarget || (type !== \"\" && props.updateGroup);\n        let defaultGroupRotate = props.defaultGroupRotate || 0;\n\n        if (!this._hasFirstTargets) {\n            const persistedRoatation = props.persistData?.rotation;\n\n            if (persistedRoatation != null) {\n                defaultGroupRotate = persistedRoatation;\n            }\n        }\n\n        function getMoveableGroupRect(group: SelfGroup, parentRotation: number, isRoot?: boolean): GroupRect {\n            const posesRotations = group.map(moveable => {\n                if (isArray(moveable)) {\n                    const rect = getMoveableGroupRect(moveable, parentRotation);\n                    const poses = [rect.pos1, rect.pos2, rect.pos3, rect.pos4];\n\n                    renderGroupRects.push(rect);\n                    return { poses, rotation: rect.rotation };\n                } else {\n                    return {\n                        poses: getAbsolutePosesByState(moveable!.state),\n                        rotation: moveable!.getRotation(),\n                    };\n                }\n            });\n            const rotations = posesRotations.map(({ rotation }) => rotation);\n\n            let groupRotation = 0;\n            const firstRotation = rotations[0];\n            const isSameRotation = rotations.every(nextRotation => {\n                return Math.abs(firstRotation - nextRotation) < 0.1;\n            });\n\n            if (isReset) {\n                groupRotation = !useDefaultGroupRotate && isSameRotation ? firstRotation : defaultGroupRotate;\n            } else {\n                groupRotation = !useDefaultGroupRotate && !isRoot && isSameRotation ? firstRotation : parentRotation;\n            }\n            const groupPoses = posesRotations.map(({ poses }) => poses);\n            const groupRect = getGroupRect(\n                groupPoses,\n                groupRotation,\n            );\n\n            return groupRect;\n        }\n        const rootGroupRect = getMoveableGroupRect(moveableGroups, this.rotation, true);\n\n        if (isReset) {\n            // reset rotataion\n            this.rotation = rootGroupRect.rotation;\n            this.transformOrigin = props.defaultGroupOrigin || \"50% 50%\";\n            this.scale = [1, 1];\n        }\n\n\n        this._targetGroups = targetGroups;\n        this.renderGroupRects = renderGroupRects;\n        const transformOrigin = this.transformOrigin;\n        const rotation = this.rotation;\n        const scale = this.scale;\n        const { width, height, minX, minY } = rootGroupRect;\n        const posesInfo = rotatePosesInfo(\n            [\n                [0, 0],\n                [width, 0],\n                [0, height],\n                [width, height],\n            ],\n            convertTransformOriginArray(transformOrigin, width, height),\n            this.rotation / 180 * Math.PI,\n        );\n\n        const { minX: deltaX, minY: deltaY } = getMinMaxs(posesInfo.result);\n        const rotateScale = ` rotate(${rotation}deg)`\n            + ` scale(${sign(scale[0])}, ${sign(scale[1])})`;\n        const transform = `translate(${-deltaX}px, ${-deltaY}px)${rotateScale}`;\n\n        this.controlBox.style.transform\n            = `translate3d(${minX}px, ${minY}px, ${this.props.translateZ || 0})`;\n\n        target.style.cssText += `left:0px;top:0px;`\n            + `transform-origin:${transformOrigin};`\n            + `width:${width}px;height:${height}px;`\n            + `transform: ${transform}`;\n        state.width = width;\n        state.height = height;\n\n        const container = this.getContainer();\n        const info = getMoveableTargetInfo(\n            this.controlBox,\n            target,\n            this.controlBox,\n            this.getContainer(),\n            this._rootContainer || container,\n            [],\n        );\n        const pos = [info.left!, info.top!];\n        const [\n            pos1,\n            pos2,\n            pos3,\n            pos4,\n        ] = getAbsolutePosesByState(info); // info.left + info.pos(1 ~ 4)\n\n        const minPos = getMinMaxs([pos1, pos2, pos3, pos4]);\n        const delta = [minPos.minX, minPos.minY];\n        const direction = sign(scale[0] * scale[1]);\n\n        info.pos1 = minus(pos1, delta);\n        info.pos2 = minus(pos2, delta);\n        info.pos3 = minus(pos3, delta);\n        info.pos4 = minus(pos4, delta);\n        // info.left = info.left + delta[0];\n        // info.top = info.top + delta[1];\n        info.left = minX - info.left! + delta[0];\n        info.top = minY - info.top! + delta[1];\n        info.origin = minus(plus(pos, info.origin!), delta);\n        info.beforeOrigin = minus(plus(pos, info.beforeOrigin!), delta);\n        info.originalBeforeOrigin = plus(pos, info.originalBeforeOrigin!);\n        info.transformOrigin = minus(plus(pos, info.transformOrigin!), delta);\n        target.style.transform\n            = `translate(${-deltaX - delta[0]}px, ${-deltaY - delta[1]}px)`\n            + rotateScale;\n\n        setStoreCache();\n        this.updateState(\n            {\n                ...info,\n                posDelta: delta,\n                direction,\n                beforeDirection: direction,\n            },\n            isSetState,\n        );\n    }\n    public getRect(): RectInfo {\n        return {\n            ...super.getRect(),\n            children: this.moveables.map(child => child.getRect()),\n        };\n    }\n    public triggerEvent(name: string, e: any, isManager?: boolean): any {\n        if (isManager || name.indexOf(\"Group\") > -1) {\n            return super.triggerEvent(name as any, e);\n        } else {\n            this._emitter.trigger(name, e);\n        }\n    }\n    public getRequestChildStyles() {\n        const styleNames = this.getEnabledAbles().reduce((names, able) => {\n            const ableStyleNames = (able.requestChildStyle?.() ?? []) as Array<keyof CSSStyleDeclaration>;\n\n            return [...names, ...ableStyleNames];\n        }, [] as Array<keyof CSSStyleDeclaration>);\n\n\n        return styleNames;\n    }\n\n    public getMoveables(): MoveableManagerInterface[] {\n        return [...this.moveables];\n    }\n    protected updateAbles() {\n        super.updateAbles([...this.props.ables!, Groupable], \"Group\");\n    }\n    protected _updateTargets() {\n        super._updateTargets();\n        this._originalDragTarget = this.props.dragTarget || this.areaElement;\n        this._dragTarget = getRefTarget(this._originalDragTarget, true);\n    }\n    protected _updateEvents() {\n        const state = this.state;\n        const props = this.props;\n\n\n        const prevTarget = this._prevDragTarget;\n        const nextTarget = props.dragTarget || this.areaElement;\n        const targets = props.targets!;\n        const { added, changed, removed } = this.differ.update(targets);\n        const isTargetChanged = added.length || removed.length;\n\n        if (isTargetChanged || this._prevOriginalDragTarget !== this._originalDragTarget) {\n            unsetGesto(this, false);\n            unsetGesto(this, true);\n            this.updateState({ gestos: {} });\n        }\n        if (prevTarget !== nextTarget) {\n            state.target = null;\n        }\n        if (!state.target) {\n            state.target = this.areaElement;\n            this.controlBox.style.display = \"block\";\n        }\n        if (state.target) {\n            if (!this.targetGesto) {\n                this.targetGesto = getTargetAbleGesto(this, this._dragTarget!, \"Group\");\n            }\n            if (!this.controlGesto) {\n                this.controlGesto = getControlAbleGesto(this, \"GroupControl\");\n            }\n        }\n        const isContainerChanged = !equals(state.container, props.container);\n\n        if (isContainerChanged) {\n            state.container = props.container;\n        }\n\n\n        if (\n            isContainerChanged\n            || isTargetChanged\n            || this.transformOrigin !== (props.defaultGroupOrigin || \"50% 50%\")\n            || changed.length\n            || targets.length && !isDeepArrayEquals(this._targetGroups, props.targetGroups || [])\n        ) {\n            this.updateRect();\n            this._hasFirstTargets = true;\n        }\n        this._isPropTargetChanged = !!isTargetChanged;\n    }\n    protected _updateObserver() { }\n}\n\n/**\n * Sets the initial rotation of the group.\n * @name Moveable.Group#defaultGroupRotate\n * @default 0\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *   target: [].slice.call(document.querySelectorAll(\".target\")),\n *   defaultGroupRotate: 0,\n * });\n *\n * moveable.defaultGroupRotate = 40;\n */\n\n/**\n * Sets the initial origin of the group.\n * @name Moveable.Group#defaultGroupOrigin\n * @default 0\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *   target: [].slice.call(document.querySelectorAll(\".target\")),\n *   defaultGroupOrigin: \"50% 50%\",\n * });\n *\n * moveable.defaultGroupOrigin = \"20% 40%\";\n */\n\n\n/**\n * Whether to hide the line in child moveable for group corresponding to the rect of the target.\n * @name Moveable.Group#hideChildMoveableDefaultLines\n * @default false\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *   target: [].slice.call(document.querySelectorAll(\".target\")),\n *   hideChildMoveableDefaultLines: false,\n * });\n *\n * moveable.hideChildMoveableDefaultLines = true;\n */\nexport default MoveableGroup;\n"
  },
  {
    "path": "packages/react-moveable/src/MoveableIndividualGroup.tsx",
    "content": "import { ref, refs } from \"framework-utils\";\nimport * as React from \"react\";\nimport MoveableManager from \"./MoveableManager\";\nimport { GroupableProps, IndividualGroupableProps, MoveableManagerInterface, RectInfo, Requester } from \"./types\";\nimport { prefix } from \"./utils\";\nimport { setStoreCache } from \"./store/Store\";\nimport { find } from \"@daybrush/utils\";\n\n/**\n * @namespace Moveable.IndividualGroup\n * @description Create targets individually, not as a group.Create targets individually, not as a group.\n */\nclass MoveableIndividualGroup extends MoveableManager<GroupableProps & IndividualGroupableProps> {\n    public moveables: MoveableManager[] = [];\n    public render() {\n        const props = this.props;\n        const {\n            cspNonce,\n            cssStyled: ControlBoxElement,\n            persistData,\n        } = props;\n\n        let targets: Array<HTMLElement | SVGElement | null | undefined> = props.targets || [];\n        const length = targets.length;\n        const canPersist = this.isUnmounted || !length;\n        let persistDatChildren = persistData?.children ?? [];\n\n        if (canPersist && !length && persistDatChildren.length) {\n            targets = persistDatChildren.map(() => null);\n        } else if (!canPersist) {\n            persistDatChildren = [];\n        }\n\n        return <ControlBoxElement\n            cspNonce={cspNonce}\n            ref={ref(this, \"controlBox\")}\n            className={prefix(\"control-box\")}>\n            {targets!.map((target, i) => {\n                const individualProps = props.individualGroupableProps?.(target, i) ?? {};\n                return <MoveableManager\n                    key={\"moveable\" + i}\n                    ref={refs(this, \"moveables\", i)}\n                    {...props}\n                    {...individualProps}\n                    target={target}\n                    wrapperMoveable={this}\n                    isWrapperMounted={this.isMoveableMounted}\n                    persistData={persistDatChildren[i]}\n\n                />;\n            })}\n        </ControlBoxElement>;\n    }\n    public componentDidMount() {}\n    public componentDidUpdate() {}\n    public getTargets() {\n        return this.props.targets!;\n    }\n    public updateRect(type?: \"Start\" | \"\" | \"End\", isTarget?: boolean, isSetState: boolean = true) {\n        setStoreCache(true);\n        this.moveables.forEach(moveable => {\n            moveable.updateRect(type, isTarget, isSetState);\n        });\n        setStoreCache();\n    }\n    public getRect(): RectInfo {\n        return {\n            ...super.getRect(),\n            children: this.moveables.map(child => child.getRect()),\n        };\n    }\n    public request(\n        ableName: string,\n        param: Record<string, any> = {},\n        isInstant?: boolean,\n    ): Requester {\n        const results = this.moveables.map(m => m.request(ableName, {...param, isInstant: false }, false));\n        const requestInstant = isInstant || param.isInstant;\n        const requester: Requester = {\n            request(ableParam: Record<string, any>) {\n                results.forEach(r => r.request(ableParam));\n                return this;\n            },\n            requestEnd() {\n                results.forEach(r => r.requestEnd());\n                return this;\n            },\n        };\n        return requestInstant ? requester.request(param).requestEnd() : requester;\n    }\n    public dragStart(e: MouseEvent | TouchEvent, target: EventTarget | null = e.target) {\n        const inputTarget = target as HTMLElement;\n        const childMoveable = find(this.moveables, child => {\n            const target = child.getTargets()[0];\n            const controlBoxElement = child.getControlBoxElement();\n            const dragElement = child.getDragElement();\n\n            if (!target || !dragElement) {\n                return false;\n            }\n            return dragElement === inputTarget || dragElement.contains(inputTarget)\n                || (dragElement !== target && target === inputTarget || target.contains(inputTarget))\n                || controlBoxElement === inputTarget || controlBoxElement.contains(inputTarget);\n        });\n\n        if (childMoveable) {\n            childMoveable.dragStart(e, target);\n        }\n        return this;\n    }\n    public hitTest() {\n        return 0;\n    }\n    public isInside() {\n        return false;\n    }\n    public isDragging() {\n        return false;\n    }\n    public getDragElement() {\n        return null;\n    }\n    public getMoveables(): MoveableManagerInterface[] {\n        return [...this.moveables];\n    }\n    public updateRenderPoses() { }\n    public checkUpdate() { }\n    public triggerEvent() { }\n    protected updateAbles() { }\n    protected _updateEvents() { }\n    protected _updateObserver() {}\n}\n\n/**\n * Create targets individually, not as a group.\n * @name Moveable.IndividualGroup#individualGroupable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *   target: [].slice.call(document.querySelectorAll(\".target\")),\n *   individualGroupable: true,\n * });\n */\nexport default MoveableIndividualGroup;\n"
  },
  {
    "path": "packages/react-moveable/src/MoveableManager.tsx",
    "content": "import * as React from \"react\";\nimport { createElement } from \"react\";\nimport { PREFIX } from \"./consts\";\nimport {\n    prefix,\n    unsetGesto,\n    getAbsolutePosesByState,\n    getRect,\n    filterAbles,\n    equals,\n    flat,\n    groupByMap,\n    calculatePadding,\n    getAbsoluteRotation,\n    defaultSync,\n    getRefTarget,\n    groupBy,\n    unsetAbles,\n    getPaddingBox,\n} from \"./utils\";\nimport Gesto from \"gesto\";\nimport { ref } from \"framework-utils\";\nimport {\n    MoveableManagerProps, MoveableManagerState, Able,\n    RectInfo, Requester, HitRect, MoveableManagerInterface,\n    MoveableDefaultOptions,\n    GroupableProps,\n    MoveableRefType,\n} from \"./types\";\nimport {\n    triggerAble, getTargetAbleGesto,\n    checkMoveableTarget, getControlAbleGesto,\n} from \"./gesto/getAbleGesto\";\nimport { createOriginMatrix, multiplies, plus } from \"@scena/matrix\";\nimport {\n    addClass, cancelAnimationFrame, find,\n    getKeys, getWindow, IObject, isNode, removeClass, requestAnimationFrame,\n} from \"@daybrush/utils\";\nimport { renderLine } from \"./renderDirections\";\nimport { fitPoints, getAreaSize, getOverlapSize, isInside } from \"overlap-area\";\nimport EventManager from \"./EventManager\";\nimport { styled } from \"react-css-styled\";\nimport EventEmitter from \"@scena/event-emitter\";\nimport { getMoveableTargetInfo } from \"./utils/getMoveableTargetInfo\";\nimport { VIEW_DRAGGING } from \"./classNames\";\nimport { diff } from \"@egjs/list-differ\";\nimport { getPersistState } from \"./utils/persist\";\nimport { setStoreCache } from \"./store/Store\";\n\nexport default class MoveableManager<T = {}>\n    extends React.PureComponent<MoveableManagerProps<T>, MoveableManagerState> {\n    public static defaultProps: Required<MoveableManagerProps> = {\n        dragTargetSelf: false,\n        target: null,\n        dragTarget: null,\n        container: null,\n        rootContainer: null,\n        origin: true,\n        parentMoveable: null,\n        wrapperMoveable: null,\n        isWrapperMounted: false,\n        parentPosition: null,\n        warpSelf: false,\n        svgOrigin: \"\",\n        dragContainer: null,\n        useResizeObserver: false,\n        useMutationObserver: false,\n        preventDefault: true,\n        preventRightClick: true,\n        preventWheelClick: true,\n        linePadding: 0,\n        controlPadding: 0,\n        ables: [],\n        pinchThreshold: 20,\n        dragArea: false,\n        passDragArea: false,\n        transformOrigin: \"\",\n        className: \"\",\n        zoom: 1,\n        triggerAblesSimultaneously: false,\n        padding: {},\n        pinchOutside: true,\n        checkInput: false,\n        dragFocusedInput: false,\n        groupable: false,\n        hideDefaultLines: false,\n        cspNonce: \"\",\n        translateZ: 0,\n        cssStyled: null,\n        customStyledMap: {},\n        props: {},\n        stopPropagation: false,\n        preventClickDefault: false,\n        preventClickEventOnDrag: true,\n        flushSync: defaultSync,\n        firstRenderState: null,\n        persistData: null,\n        viewContainer: null,\n        requestStyles: [],\n        useAccuratePosition: false,\n    };\n    public state: MoveableManagerState = {\n        container: null,\n        gestos: {},\n        renderLines: [\n            [[0, 0], [0, 0]],\n            [[0, 0], [0, 0]],\n            [[0, 0], [0, 0]],\n            [[0, 0], [0, 0]],\n        ],\n        renderPoses: [[0, 0], [0, 0], [0, 0], [0, 0]],\n        disableNativeEvent: false,\n        posDelta: [0, 0],\n        ...getMoveableTargetInfo(null),\n    };\n    public renderState: Record<string, any> = {};\n    public enabledAbles: Able[] = [];\n    public targetAbles: Able[] = [];\n    public controlAbles: Able[] = [];\n    public controlBox!: HTMLElement;\n    public areaElement!: HTMLElement;\n    public targetGesto!: Gesto;\n    public controlGesto!: Gesto;\n    public rotation = 0;\n    public scale: number[] = [1, 1];\n    public isMoveableMounted = false;\n    public isUnmounted = false;\n\n    public events: Record<string, EventManager | null> = {\n        \"mouseEnter\": null,\n        \"mouseLeave\": null,\n    };\n\n    protected _emitter: EventEmitter = new EventEmitter();\n\n    protected _prevOriginalDragTarget: MoveableRefType | null = null;\n    protected _originalDragTarget: MoveableRefType | null = null;\n\n    protected _prevDragTarget: HTMLElement | SVGElement | null | undefined = null;\n    protected _dragTarget: HTMLElement | SVGElement | null | undefined = null;\n\n    protected _prevPropTarget: HTMLElement | SVGElement | null | undefined = null;\n    protected _propTarget: HTMLElement | SVGElement | null | undefined = null;\n\n    protected _prevDragArea = false;\n    protected _isPropTargetChanged = false;\n    protected _hasFirstTarget = false;\n\n    private _reiszeObserver: ResizeObserver | null = null;\n    private _observerId = 0;\n    private _mutationObserver: MutationObserver | null = null;\n    public _rootContainer: HTMLElement | null | undefined = null;\n    private _viewContainer: HTMLElement | null | undefined = null;\n    private _viewClassNames: string[] = [];\n    private _store: Record<string, any> = {};\n\n    public render() {\n        const props = this.props;\n        const state = this.getState();\n        const {\n            parentPosition,\n            className,\n            target: propsTarget,\n            zoom, cspNonce,\n            translateZ,\n            cssStyled: ControlBoxElement,\n            groupable,\n            linePadding,\n            controlPadding,\n        } = props;\n\n        this._checkUpdateRootContainer();\n        this.checkUpdate();\n        this.updateRenderPoses();\n\n        const [parentLeft, parentTop] = parentPosition as number[] || [0, 0];\n        const {\n            left,\n            top,\n            target: stateTarget,\n            direction,\n            hasFixed,\n            offsetDelta,\n        } = state;\n        const groupTargets = (props as any).targets;\n        const isDragging = this.isDragging();\n        const ableAttributes: IObject<boolean> = {};\n        this.getEnabledAbles().forEach(able => {\n            ableAttributes[`data-able-${able.name.toLowerCase()}`] = true;\n        });\n        const ableClassName = this._getAbleClassName();\n        const isDisplay\n            = (groupTargets && groupTargets.length && (stateTarget || groupable))\n            || propsTarget\n            || (!this._hasFirstTarget && this.state.isPersisted);\n        const isVisible = this.controlBox || this.props.firstRenderState || this.props.persistData;\n        const translate = [left - parentLeft, top - parentTop];\n\n        if (!groupable && props.useAccuratePosition) {\n            translate[0] += offsetDelta[0];\n            translate[1] += offsetDelta[1];\n        }\n        const style: Record<string, any> = {\n            \"position\": hasFixed ? \"fixed\" : \"absolute\",\n            \"display\": isDisplay ? \"block\" : \"none\",\n            \"visibility\": isVisible ? \"visible\" : \"hidden\",\n            \"transform\": `translate3d(${translate[0]}px, ${translate[1]}px, ${translateZ})`,\n            \"--zoom\": zoom,\n            \"--zoompx\": `${zoom}px`,\n        };\n        if (linePadding) {\n            style[\"--moveable-line-padding\"] = linePadding;\n        }\n        if (controlPadding) {\n            style[\"--moveable-control-padding\"] = controlPadding;\n        }\n        return (\n            <ControlBoxElement\n                cspNonce={cspNonce}\n                ref={ref(this, \"controlBox\")}\n                className={`${prefix(\"control-box\", direction === -1 ? \"reverse\" : \"\", isDragging ? \"dragging\" : \"\")} ${ableClassName} ${className}`}\n                {...ableAttributes}\n                onClick={this._onPreventClick}\n                style={style}>\n                {this.renderAbles()}\n                {this._renderLines()}\n            </ControlBoxElement>\n        );\n    }\n    public componentDidMount() {\n        this.isMoveableMounted = true;\n        this.isUnmounted = false;\n        const props = this.props;\n        const { parentMoveable, container } = props;\n\n\n        this._checkUpdateRootContainer();\n        this._checkUpdateViewContainer();\n        this._updateTargets();\n        this._updateNativeEvents();\n        this._updateEvents();\n        this.updateCheckInput();\n        this._updateObserver(this.props);\n\n        if (!container && !parentMoveable && !this.state.isPersisted) {\n            this.updateRect(\"\", false, false);\n            this.forceUpdate();\n        }\n    }\n    public componentDidUpdate(prevProps: any) {\n        this._checkUpdateRootContainer();\n        this._checkUpdateViewContainer();\n        this._updateNativeEvents();\n        this._updateTargets();\n        this._updateEvents();\n        this.updateCheckInput();\n        this._updateObserver(prevProps);\n    }\n    public componentWillUnmount() {\n        this.isMoveableMounted = false;\n        this.isUnmounted = true;\n        this._emitter.off();\n        this._reiszeObserver?.disconnect();\n        this._mutationObserver?.disconnect();\n\n        const viewContainer = this._viewContainer;\n\n        if (viewContainer) {\n            this._changeAbleViewClassNames([]);\n        }\n        unsetGesto(this, false);\n        unsetGesto(this, true);\n\n        const events = this.events;\n        for (const name in events) {\n            const manager = events[name];\n            manager && manager.destroy();\n        }\n    }\n    public getTargets(): Array<HTMLElement | SVGElement> {\n        const target = this.props.target;\n        return target ? [target] : [];\n    }\n    /**\n     * Get the able used in MoveableManager.\n     * @method Moveable#getAble\n     * @param - able name\n     */\n    public getAble<T extends Able>(ableName: string): T | undefined {\n        const ables: Able[] = this.props.ables || [];\n\n        return find(ables, able => able.name === ableName) as T;\n    }\n    public getContainer(): HTMLElement | SVGElement {\n        const { parentMoveable, wrapperMoveable, container } = this.props;\n\n        return container!\n            || (wrapperMoveable && wrapperMoveable.getContainer())\n            || (parentMoveable && parentMoveable.getContainer())\n            || this.controlBox.parentElement!;\n    }\n    /**\n     * Returns the element of the control box.\n     * @method Moveable#getControlBoxElement\n     */\n    public getControlBoxElement(): HTMLElement {\n        return this.controlBox;\n    }\n    /**\n     * Target element to be dragged in moveable\n     * @method Moveable#getDragElement\n     */\n    public getDragElement(): HTMLElement | SVGElement | null | undefined {\n        return this._dragTarget;\n    }\n    /**\n     * Check if the target is an element included in the moveable.\n     * @method Moveable#isMoveableElement\n     * @param - the target\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * window.addEventListener(\"click\", e => {\n     *     if (!moveable.isMoveableElement(e.target)) {\n     *         moveable.target = e.target;\n     *     }\n     * });\n     */\n    public isMoveableElement(target: Element) {\n        return target && (target.getAttribute?.(\"class\") || \"\").indexOf(PREFIX) > -1;\n    }\n    /**\n     * You can drag start the Moveable through the external `MouseEvent`or `TouchEvent`. (Angular: ngDragStart)\n     * @method Moveable#dragStart\n     * @param - external `MouseEvent`or `TouchEvent`\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * document.body.addEventListener(\"mousedown\", e => {\n     *     if (!moveable.isMoveableElement(e.target)) {\n     *          moveable.dragStart(e);\n     *     }\n     * });\n     */\n    public dragStart(e: MouseEvent | TouchEvent, target: EventTarget | null = e.target) {\n        const targetGesto = this.targetGesto;\n        const controlGesto = this.controlGesto;\n\n        if (targetGesto && checkMoveableTarget(this)({ inputEvent: e }, target)) {\n            if (!targetGesto.isFlag()) {\n                targetGesto.triggerDragStart(e);\n            }\n        } else if (controlGesto && this.isMoveableElement(target as Element)) {\n            if (!controlGesto.isFlag()) {\n                controlGesto.triggerDragStart(e);\n            }\n        }\n        return this;\n    }\n    /**\n     * Hit test an element or rect on a moveable target.\n     * (100% = 100)\n     * @method Moveable#hitTest\n     * @param - element or rect to test\n     * @return - Get hit test rate (rate > 0 is hitted)\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * document.body.addEventListener(\"mousedown\", e => {\n     *     if (moveable.hitTest(e.target) > 0) {\n     *          console.log(\"hiited\");\n     *     }\n     * });\n     */\n    public hitTest(el: Element | HitRect): number {\n        const { target, pos1, pos2, pos3, pos4, targetClientRect } = this.state;\n\n        if (!target) {\n            return 0;\n        }\n        let rect: Required<HitRect>;\n\n        if (isNode(el)) {\n            const clientRect = el.getBoundingClientRect();\n\n            rect = {\n                left: clientRect.left,\n                top: clientRect.top,\n                width: clientRect.width,\n                height: clientRect.height,\n            };\n        } else {\n            rect = { width: 0, height: 0, ...el };\n        }\n\n        const {\n            left: rectLeft,\n            top: rectTop,\n            width: rectWidth,\n            height: rectHeight,\n        } = rect;\n        const points = fitPoints([pos1, pos2, pos4, pos3], targetClientRect);\n        const size = getOverlapSize(points, [\n            [rectLeft, rectTop],\n            [rectLeft + rectWidth, rectTop],\n            [rectLeft + rectWidth, rectTop + rectHeight],\n            [rectLeft, rectTop + rectHeight],\n        ]);\n        const totalSize = getAreaSize(points);\n\n        if (!size || !totalSize) {\n            return 0;\n        }\n\n        return Math.min(100, size / totalSize * 100);\n    }\n    /**\n     * Whether the coordinates are inside Moveable\n     * @method Moveable#isInside\n     * @param - x coordinate\n     * @param - y coordinate\n     * @return - True if the coordinate is in moveable or false\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * document.body.addEventListener(\"mousedown\", e => {\n     *     if (moveable.isInside(e.clientX, e.clientY)) {\n     *          console.log(\"inside\");\n     *     }\n     * });\n     */\n    public isInside(clientX: number, clientY: number) {\n        const { target, pos1, pos2, pos3, pos4, targetClientRect } = this.state;\n\n        if (!target) {\n            return false;\n        }\n        return isInside([clientX, clientY], fitPoints([pos1, pos2, pos4, pos3], targetClientRect));\n    }\n    /**\n     * If the width, height, left, and top of all elements change, update the shape of the moveable.\n     * @method Moveable#updateRect\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * window.addEventListener(\"resize\", e => {\n     *     moveable.updateRect();\n     * });\n     */\n    public updateRect(type?: \"Start\" | \"\" | \"End\", isTarget?: boolean, isSetState: boolean = true) {\n        const props = this.props;\n        const isSingle = !props.parentPosition && !props.wrapperMoveable;\n\n        if (isSingle) {\n            setStoreCache(true);\n        }\n        const parentMoveable = props.parentMoveable;\n        const state = this.state;\n        const target = (state.target || props.target) as HTMLElement | SVGElement;\n        const container = this.getContainer();\n        const rootContainer = parentMoveable\n            ? (parentMoveable as any)._rootContainer\n            : this._rootContainer;\n        const nextState = getMoveableTargetInfo(\n            this.controlBox,\n            target,\n            container,\n            container,\n            rootContainer || container,\n            this._getRequestStyles(),\n        );\n\n        if (!target && this._hasFirstTarget && props.persistData) {\n            const persistState = getPersistState(props.persistData);\n\n            for (const name in persistState) {\n                (nextState as any)[name] = (persistState as any)[name];\n            }\n        }\n\n        if (isSingle) {\n            setStoreCache();\n        }\n        this.updateState(\n            nextState,\n            parentMoveable ? false : isSetState,\n        );\n    }\n    /**\n     * Check if the moveable state is being dragged.\n     * @method Moveable#isDragging\n     * @param - If you want to check if able is dragging, specify ableName.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * // false\n     * console.log(moveable.isDragging());\n     *\n     * moveable.on(\"drag\", () => {\n     *   // true\n     *   console.log(moveable.isDragging());\n     * });\n     */\n    public isDragging(ableName?: string) {\n        const targetGesto = this.targetGesto;\n        const controlGesto = this.controlGesto;\n\n        if (targetGesto?.isFlag()) {\n            if (!ableName) {\n                return true;\n            }\n            const data = targetGesto.getEventData();\n\n            return !!data[ableName]?.isEventStart;\n        }\n        if (controlGesto?.isFlag()) {\n            if (!ableName) {\n                return true;\n            }\n            const data = controlGesto.getEventData();\n\n            return !!data[ableName]?.isEventStart;\n        }\n        return false;\n    }\n    /**\n     * If the width, height, left, and top of the only target change, update the shape of the moveable.\n     * Use `.updateRect()` method\n     * @method Moveable#updateTarget\n     * @deprecated\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.updateTarget();\n     */\n    public updateTarget(type?: \"Start\" | \"\" | \"End\") {\n        this.updateRect(type, true);\n    }\n    /**\n     * You can get the vertex information, position and offset size information of the target based on the container.\n     * @method Moveable#getRect\n     * @return - The Rect Info\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * const rectInfo = moveable.getRect();\n     */\n    public getRect(): RectInfo {\n        const state = this.state;\n        const poses = getAbsolutePosesByState(this.state);\n        const [pos1, pos2, pos3, pos4] = poses;\n        const rect = getRect(poses);\n        const {\n            width: offsetWidth,\n            height: offsetHeight,\n        } = state;\n        const {\n            width,\n            height,\n            left,\n            top,\n        } = rect;\n        const statePos = [state.left, state.top];\n        const origin = plus(statePos, state.origin);\n        const beforeOrigin = plus(statePos, state.beforeOrigin);\n        const transformOrigin = state.transformOrigin;\n\n        return {\n            width,\n            height,\n            left,\n            top,\n            pos1,\n            pos2,\n            pos3,\n            pos4,\n            offsetWidth,\n            offsetHeight,\n            beforeOrigin,\n            origin,\n            transformOrigin,\n            rotation: this.getRotation(),\n        };\n    }\n    /**\n     * Get a manager that manages the moveable's state and props.\n     * @method Moveable#getManager\n     * @return - The Rect Info\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * const manager = moveable.getManager(); // real moveable class instance\n     */\n    public getManager(): MoveableManagerInterface<any, any> {\n        return this as any;\n    }\n    /**\n     * You can stop the dragging currently in progress through a method from outside.\n     * @method Moveable#stopDrag\n     * @return - The Rect Info\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.stopDrag();\n     */\n    public stopDrag(type?: \"target\" | \"control\"): void {\n        if (!type || type === \"target\") {\n            const gesto = this.targetGesto;\n\n            if (gesto?.isIdle() === false) {\n                unsetAbles(this, false);\n            }\n            gesto?.stop();\n        }\n        if (!type || type === \"control\") {\n            const gesto = this.controlGesto;\n\n            if (gesto?.isIdle() === false) {\n                unsetAbles(this, true);\n            }\n            gesto?.stop();\n        }\n    }\n    public getRotation() {\n        const {\n            pos1,\n            pos2,\n            direction,\n        } = this.state;\n\n        return getAbsoluteRotation(pos1, pos2, direction);\n    }\n    /**\n     * Request able through a method rather than an event.\n     * At the moment of execution, requestStart is executed,\n     * and then request and requestEnd can be executed through Requester.\n     * @method Moveable#request\n     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Draggable.html#request|Draggable Requester}\n     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Resizable.html#request|Resizable Requester}\n     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Scalable.html#request|Scalable Requester}\n     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Rotatable.html#request|Rotatable Requester}\n     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.OriginDraggable.html#request|OriginDraggable Requester}\n     * @param - ableName\n     * @param - request to be able params.\n     * @param - If isInstant is true, request and requestEnd are executed immediately.\n     * @return - Able Requester. If there is no request in able, nothing will work.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * // Instantly Request (requestStart - request - requestEnd)\n     * moveable.request(\"draggable\", { deltaX: 10, deltaY: 10 }, true);\n     *\n     * // Start move\n     * const requester = moveable.request(\"draggable\");\n     * requester.request({ deltaX: 10, deltaY: 10 });\n     * requester.request({ deltaX: 10, deltaY: 10 });\n     * requester.request({ deltaX: 10, deltaY: 10 });\n     * requester.requestEnd();\n     */\n    public request(\n        ableName: string,\n        param: IObject<any> = {},\n        isInstant?: boolean,\n    ): Requester {\n        const self = this;\n        const props = self.props;\n        const manager = props.parentMoveable || props.wrapperMoveable || self;\n        const allAbles = manager.props.ables!;\n        const groupable = props.groupable;\n        const requsetAble = find(allAbles, (able: Able) => able.name === ableName);\n\n        if (this.isDragging() || !requsetAble || !requsetAble.request) {\n            return {\n                request() {\n                    return this;\n                },\n                requestEnd() {\n                    return this;\n                },\n            };\n        }\n\n        const ableRequester = requsetAble.request(self);\n        const requestInstant = isInstant || param.isInstant;\n        const ableType = ableRequester.isControl ? \"controlAbles\" : \"targetAbles\";\n        const eventAffix = `${(groupable ? \"Group\" : \"\")}${ableRequester.isControl ? \"Control\" : \"\"}`;\n        const moveableAbles: Able[] = [...manager[ableType]];\n\n        const requester = {\n            request(ableParam: IObject<any>) {\n                triggerAble(self, moveableAbles, [\"drag\"], eventAffix, \"\", {\n                    ...ableRequester.request(ableParam),\n                    requestAble: ableName,\n                    isRequest: true,\n                }, requestInstant);\n                return requester;\n            },\n            requestEnd() {\n                triggerAble(self, moveableAbles, [\"drag\"], eventAffix, \"End\", {\n                    ...ableRequester.requestEnd(),\n                    requestAble: ableName,\n                    isRequest: true,\n                }, requestInstant);\n                return requester;\n            },\n        };\n\n        triggerAble(self, moveableAbles, [\"drag\"], eventAffix, \"Start\", {\n            ...ableRequester.requestStart(param),\n            requestAble: ableName,\n            isRequest: true,\n        }, requestInstant);\n\n        return requestInstant ? requester.request(param).requestEnd() : requester;\n    }\n    /**\n     * moveable is the top level that manages targets\n     * `Single`: MoveableManager instance\n     * `Group`: MoveableGroup instance\n     * `IndividualGroup`: MoveableIndividaulGroup instance\n     * Returns leaf target MoveableManagers.\n     */\n    public getMoveables(): MoveableManagerInterface[] {\n        return [this];\n    }\n    /**\n     * Remove the Moveable object and the events.\n     * @method Moveable#destroy\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.destroy();\n     */\n    public destroy(): void {\n        this.componentWillUnmount();\n    }\n    public updateRenderPoses() {\n        const state = this.getState();\n        const props = this.props;\n        const padding = props.padding;\n        const {\n            originalBeforeOrigin,\n            transformOrigin,\n            allMatrix, is3d,\n            pos1, pos2, pos3, pos4,\n            left: stateLeft,\n            top: stateTop,\n            isPersisted,\n        } = state;\n        const zoom = props.zoom || 1;\n\n        if (!padding && zoom <= 1) {\n            state.renderPoses = [\n                pos1,\n                pos2,\n                pos3,\n                pos4,\n            ];\n            state.renderLines = [\n                [pos1, pos2],\n                [pos2, pos4],\n                [pos4, pos3],\n                [pos3, pos1],\n            ];\n            return;\n        }\n        const {\n            left,\n            top,\n            bottom,\n            right,\n        } = getPaddingBox(padding || {});\n        const n = is3d ? 4 : 3;\n\n        // const clipPathInfo = getClipPath(\n        //     props.target,\n        //     offsetWidth,\n        //     offsetHeight,\n        // );\n\n        // if (clipPathInfo) {\n        //     left -= Math.max(0, clipPathInfo.left);\n        //     top -= Math.max(0, clipPathInfo.top);\n        //     bottom -= Math.max(0, offsetHeight - clipPathInfo.bottom);\n        //     right -= Math.max(0, offsetWidth - clipPathInfo.right);\n        // }\n\n        let absoluteOrigin: number[] = [];\n\n        if (isPersisted) {\n            absoluteOrigin = transformOrigin;\n        } else if (this.controlBox && props.groupable) {\n            absoluteOrigin = originalBeforeOrigin;\n        } else {\n            absoluteOrigin = plus(originalBeforeOrigin, [stateLeft, stateTop]);\n        }\n\n        const nextMatrix = multiplies(\n            n,\n            createOriginMatrix(absoluteOrigin.map(v => -v), n),\n            allMatrix,\n            createOriginMatrix(transformOrigin, n),\n        );\n\n        const renderPos1 = calculatePadding(nextMatrix, pos1, [-left, -top], n);\n        const renderPos2 = calculatePadding(nextMatrix, pos2, [right, -top], n);\n        const renderPos3 = calculatePadding(nextMatrix, pos3, [-left, bottom], n);\n        const renderPos4 = calculatePadding(nextMatrix, pos4, [right, bottom], n);\n\n        state.renderPoses = [\n            renderPos1,\n            renderPos2,\n            renderPos3,\n            renderPos4,\n        ];\n        state.renderLines = [\n            [renderPos1, renderPos2],\n            [renderPos2, renderPos4],\n            [renderPos4, renderPos3],\n            [renderPos3, renderPos1],\n        ];\n\n        if (zoom) {\n            const zoomOffset = zoom / 2;\n\n            state.renderLines = [\n                [\n                    calculatePadding(nextMatrix, pos1, [-left - zoomOffset, -top], n),\n                    calculatePadding(nextMatrix, pos2, [right + zoomOffset, -top], n),\n                ],\n                [\n                    calculatePadding(nextMatrix, pos2, [right, -top - zoomOffset], n),\n                    calculatePadding(nextMatrix, pos4, [right, bottom + zoomOffset], n),\n                ],\n                [\n                    calculatePadding(nextMatrix, pos4, [right + zoomOffset, bottom], n),\n                    calculatePadding(nextMatrix, pos3, [-left - zoomOffset, bottom], n),\n                ],\n                [\n                    calculatePadding(nextMatrix, pos3, [-left, bottom + zoomOffset], n),\n                    calculatePadding(nextMatrix, pos1, [-left, -top - zoomOffset], n),\n                ],\n            ];\n        }\n    }\n    public checkUpdate() {\n        this._isPropTargetChanged = false;\n        const { target, container, parentMoveable } = this.props;\n        const {\n            target: stateTarget,\n            container: stateContainer,\n        } = this.state;\n\n        if (!stateTarget && !target) {\n            return;\n        }\n        this.updateAbles();\n\n        const isTargetChanged = !equals(stateTarget, target);\n        const isChanged = isTargetChanged || !equals(stateContainer, container);\n\n        if (!isChanged) {\n            return;\n        }\n        const moveableContainer = container || this.controlBox;\n\n        if (moveableContainer) {\n            this.unsetAbles();\n        }\n        this.updateState({ target, container });\n\n        if (!parentMoveable && moveableContainer) {\n            this.updateRect(\"End\", false, false);\n        }\n        this._isPropTargetChanged = isTargetChanged;\n    }\n    public waitToChangeTarget(): Promise<void> {\n        return new Promise(() => { });\n    }\n    public triggerEvent(\n        name: string,\n        e: any,\n    ): any {\n        const props = this.props;\n\n        this._emitter.trigger(name, e);\n\n        if (props.parentMoveable && e.isRequest && !e.isRequestChild) {\n            return props.parentMoveable.triggerEvent(name, e, true);\n        }\n\n        const callback = (props as any)[name];\n\n        return callback && callback(e);\n    }\n    public useCSS(tag: string, css: string) {\n        const customStyleMap = this.props.customStyledMap as Record<string, any>;\n\n        const key = tag + css;\n\n        if (!customStyleMap[key]) {\n            customStyleMap[key] = styled(tag, css);\n        }\n        return customStyleMap[key];\n    }\n    public checkUpdateRect = () => {\n        if (this.isDragging()) {\n            return;\n        }\n        const parentMoveable = this.props.parentMoveable;\n\n        if (parentMoveable) {\n            (parentMoveable as any).checkUpdateRect();\n            return;\n        }\n        cancelAnimationFrame(this._observerId);\n        this._observerId = requestAnimationFrame(() => {\n            if (this.isDragging()) {\n                return;\n            }\n            this.updateRect();\n        });\n    }\n    public getState(): MoveableManagerState {\n        const props = this.props;\n        if (props.target || (props as any).targets?.length) {\n            this._hasFirstTarget = true;\n        }\n        const hasControlBox = this.controlBox;\n        const persistData = props.persistData;\n        const firstRenderState = props.firstRenderState;\n\n        if (firstRenderState && !hasControlBox) {\n            return firstRenderState;\n        }\n        if (!this._hasFirstTarget && persistData) {\n            const persistState = getPersistState(persistData);\n\n            if (persistState) {\n                this.updateState(persistState, false);\n                return this.state;\n            }\n        }\n        (this.state as any).isPersisted = false;\n        return this.state;\n    }\n    public updateSelectors() { }\n    protected unsetAbles() {\n        this.targetAbles.forEach(able => {\n            if (able.unset) {\n                able.unset(this);\n            }\n        });\n    }\n    protected updateAbles(\n        ables: Able[] = this.props.ables!,\n        eventAffix: string = \"\",\n    ) {\n        const props = this.props as any;\n        const triggerAblesSimultaneously = props.triggerAblesSimultaneously;\n        const enabledAbles = this.getEnabledAbles(ables);\n\n        const dragStart = `drag${eventAffix}Start` as \"dragStart\";\n        const pinchStart = `pinch${eventAffix}Start` as \"pinchStart\";\n        const dragControlStart = `drag${eventAffix}ControlStart` as \"dragControlStart\";\n\n        const targetAbles = filterAbles(enabledAbles, [dragStart, pinchStart], triggerAblesSimultaneously);\n        const controlAbles = filterAbles(enabledAbles, [dragControlStart], triggerAblesSimultaneously);\n\n        this.enabledAbles = enabledAbles;\n        this.targetAbles = targetAbles;\n        this.controlAbles = controlAbles;\n    }\n    protected updateState(nextState: any, isSetState?: boolean) {\n        if (isSetState) {\n            if (this.isUnmounted) {\n                return;\n            }\n            this.setState(nextState);\n        } else {\n            const state = this.state;\n\n            for (const name in nextState) {\n                (state as any)[name] = nextState[name];\n            }\n        }\n    }\n    protected getEnabledAbles(ables: Able[] = this.props.ables!) {\n        const props = this.props as any;\n\n        return ables.filter(able => able && (\n            (able.always && props[able.name] !== false)\n            || props[able.name]));\n    }\n    protected renderAbles() {\n        const props = this.props as any;\n        const triggerAblesSimultaneously = props.triggerAblesSimultaneously;\n        const Renderer = {\n            createElement,\n        };\n\n        this.renderState = {};\n\n        return groupByMap(flat<any>(\n            filterAbles(this.getEnabledAbles(), [\"render\"], triggerAblesSimultaneously).map(({ render }) => {\n                return render!(this, Renderer) || [];\n            })).filter(el => el), ({ key }) => key).map(group => group[0]);\n    }\n    protected updateCheckInput() {\n        this.targetGesto && (this.targetGesto.options.checkInput = this.props.checkInput);\n    }\n    protected _getRequestStyles() {\n        const styleNames = this.getEnabledAbles().reduce((names, able) => {\n            const ableStyleNames = (able.requestStyle?.() ?? []) as Array<keyof CSSStyleDeclaration>;\n\n            return [...names, ...ableStyleNames];\n        }, [...(this.props.requestStyles || [])] as Array<keyof CSSStyleDeclaration>);\n\n\n        return styleNames;\n    }\n    protected _updateObserver(prevProps: MoveableDefaultOptions) {\n        this._updateResizeObserver(prevProps);\n        this._updateMutationObserver(prevProps);\n    }\n    protected _updateEvents() {\n        const hasTargetAble = this.targetAbles.length;\n        const hasControlAble = this.controlAbles.length;\n        const target = this._dragTarget;\n        const isUnset = (!hasTargetAble && this.targetGesto)\n            || this._isTargetChanged(true);\n\n        if (isUnset) {\n            unsetGesto(this, false);\n            this.updateState({ gestos: {} });\n        }\n        if (!hasControlAble) {\n            unsetGesto(this, true);\n        }\n\n        if (target && hasTargetAble && !this.targetGesto) {\n            this.targetGesto = getTargetAbleGesto(this, target!, \"\");\n        }\n        if (!this.controlGesto && hasControlAble) {\n            this.controlGesto = getControlAbleGesto(this, \"Control\");\n        }\n    }\n    protected _updateTargets() {\n        const props = this.props;\n\n        this._prevPropTarget = this._propTarget;\n        this._prevDragTarget = this._dragTarget;\n        this._prevOriginalDragTarget = this._originalDragTarget;\n        this._prevDragArea = props.dragArea!;\n\n        this._propTarget = props.target;\n        this._originalDragTarget = props.dragTarget || props.target;\n        this._dragTarget = getRefTarget(this._originalDragTarget, true);\n\n    }\n    private _renderLines() {\n        const props = this.props;\n        const {\n            zoom,\n            hideDefaultLines,\n            hideChildMoveableDefaultLines,\n            parentMoveable,\n        } = props as MoveableManagerProps<GroupableProps>;\n\n        if (hideDefaultLines || (parentMoveable && hideChildMoveableDefaultLines)) {\n            return [];\n        }\n        const state = this.getState();\n        const Renderer = {\n            createElement,\n        };\n\n        return state.renderLines.map((line, i) => {\n            return renderLine(Renderer, \"\", line[0], line[1], zoom!, `render-line-${i}`);\n        });\n    }\n    private _onPreventClick = (e: any) => {\n        e.stopPropagation();\n        e.preventDefault();\n        // removeEvent(window, \"click\", this._onPreventClick, true);\n    }\n    private _isTargetChanged(useDragArea?: boolean) {\n        const props = this.props;\n        const nextTarget = props.dragTarget || props.target;\n        const prevTarget = this._prevOriginalDragTarget;\n        const prevDragArea = this._prevDragArea;\n        const dragArea = props.dragArea;\n\n        // check target without dragArea\n        const isDragTargetChanged = !dragArea && prevTarget !== nextTarget;\n        const isDragAreaChanged = (useDragArea || dragArea) && prevDragArea !== dragArea;\n\n        return isDragTargetChanged || isDragAreaChanged || this._prevPropTarget != this._propTarget;\n    }\n    private _updateNativeEvents() {\n        const props = this.props;\n        const target = props.dragArea ? this.areaElement : this.state.target;\n        const events = this.events;\n        const eventKeys = getKeys(events);\n\n        if (this._isTargetChanged()) {\n            for (const eventName in events) {\n                const manager = events[eventName];\n                manager && manager.destroy();\n                events[eventName] = null;\n            }\n        }\n        if (!target) {\n            return;\n        }\n        const enabledAbles = this.enabledAbles;\n        eventKeys.forEach(eventName => {\n            const ables = filterAbles(enabledAbles, [eventName] as any);\n            const hasAbles = ables.length > 0;\n            let manager = events[eventName];\n\n            if (!hasAbles) {\n                if (manager) {\n                    manager.destroy();\n                    events[eventName] = null;\n                }\n                return;\n            }\n            if (!manager) {\n                manager = new EventManager(target, this, eventName);\n                events[eventName] = manager;\n            }\n            manager.setAbles(ables);\n        });\n    }\n    private _checkUpdateRootContainer() {\n        const rootContainer = this.props.rootContainer;\n\n        if (!this._rootContainer && rootContainer) {\n            this._rootContainer = getRefTarget(rootContainer, true);\n        }\n    }\n    private _checkUpdateViewContainer() {\n        const viewContainerOption = this.props.viewContainer;\n\n        if (!this._viewContainer && viewContainerOption) {\n            this._viewContainer = getRefTarget(viewContainerOption, true);\n        }\n        const viewContainer = this._viewContainer;\n\n        if (viewContainer) {\n            this._changeAbleViewClassNames([\n                ...this._getAbleViewClassNames(),\n                this.isDragging() ? VIEW_DRAGGING : \"\",\n            ]);\n        }\n    }\n    private _changeAbleViewClassNames(classNames: string[]) {\n        const viewContainer = this._viewContainer!;\n        const nextClassNames = groupBy(\n            classNames.filter(Boolean),\n            el => el,\n        ).map(([className]) => className);\n        const prevClassNames = this._viewClassNames;\n\n        const {\n            removed,\n            added,\n        } = diff(prevClassNames, nextClassNames);\n\n        removed.forEach(index => {\n            removeClass(viewContainer, prevClassNames[index]);\n        });\n        added.forEach(index => {\n            addClass(viewContainer, nextClassNames[index]);\n        });\n\n        this._viewClassNames = nextClassNames;\n\n    }\n    private _getAbleViewClassNames() {\n        return (this.getEnabledAbles().map(able => {\n            return (able.viewClassName?.(this) || \"\");\n        }).join(\" \") + ` ${this._getAbleClassName(\"-view\")}`).split(/\\s+/g);\n    }\n    private _getAbleClassName(classPrefix = \"\") {\n        const ables = this.getEnabledAbles();\n\n        const targetGesto = this.targetGesto;\n        const controlGesto = this.controlGesto;\n        const targetGestoData: Record<string, any> = targetGesto?.isFlag()\n            ? targetGesto.getEventData() : {};\n        const controlGestoData: Record<string, any> = controlGesto?.isFlag()\n            ? controlGesto.getEventData() : {};\n\n        return ables.map(able => {\n            const name = able.name;\n            let className = able.className?.(this) || \"\";\n\n            if (\n                targetGestoData[name]?.isEventStart\n                || controlGestoData[name]?.isEventStart\n            ) {\n                className += ` ${prefix(`${name}${classPrefix}-dragging`)}`;\n            }\n            return className.trim();\n        }).filter(Boolean).join(\" \");\n    }\n    private _updateResizeObserver(prevProps: MoveableDefaultOptions) {\n        const props = this.props;\n        const target = props.target;\n        const win = getWindow(this.getControlBoxElement());\n\n        if (!win.ResizeObserver || !target || !props.useResizeObserver) {\n            this._reiszeObserver?.disconnect();\n            return;\n        }\n\n        if (prevProps.target === target && this._reiszeObserver) {\n            return;\n        }\n\n        const observer = new win.ResizeObserver(this.checkUpdateRect);\n\n        observer.observe(target!, {\n            box: \"border-box\",\n        });\n        this._reiszeObserver = observer;\n    }\n    private _updateMutationObserver(prevProps: MoveableDefaultOptions) {\n        const props = this.props;\n        const target = props.target;\n        const win = getWindow(this.getControlBoxElement());\n\n        if (!win.MutationObserver || !target || !props.useMutationObserver) {\n            this._mutationObserver?.disconnect();\n            return;\n        }\n\n        if (prevProps.target === target && this._mutationObserver) {\n            return;\n        }\n\n        const observer = new win.MutationObserver(records => {\n            for (const mutation of records) {\n                if (mutation.type === \"attributes\" && mutation.attributeName === \"style\") {\n                    this.checkUpdateRect();\n                }\n            }\n        });\n\n        observer.observe(target!, {\n            attributes: true,\n        });\n        this._mutationObserver = observer;\n    }\n}\n\n/**\n * The target to indicate Moveable Control Box.\n * @name Moveable#target\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.target = document.querySelector(\".target\");\n */\n/**\n * Zooms in the elements of a moveable.\n * @name Moveable#zoom\n * @default 1\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.zoom = 2;\n */\n\n/**\n * Whether the target size is detected and updated whenever it changes.\n * @name Moveable#useResizeObserver\n * @default false\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.useResizeObserver = true;\n */\n\n/**\n * Resize, Scale Events at edges\n * @name Moveable#edge\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.edge = true;\n */\n\n/**\n * You can specify the className of the moveable controlbox.\n * @name Moveable#className\n * @default \"\"\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *   className: \"\",\n * });\n *\n * moveable.className = \"moveable1\";\n */\n\n/**\n * The target(s) to drag Moveable target(s)\n * @name Moveable#dragTarget\n * @default target\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.target = document.querySelector(\".target\");\n * moveable.dragTarget = document.querySelector(\".dragTarget\");\n */\n\n/**\n * `renderStart` event occurs at the first start of all events.\n * @memberof Moveable\n * @event renderStart\n * @param {Moveable.OnRenderStart} - Parameters for the `renderStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"renderStart\", ({ target }) => {\n *     console.log(\"onRenderStart\", target);\n * });\n */\n\n/**\n * `render` event occurs before the target is drawn on the screen.\n * @memberof Moveable\n * @event render\n * @param {Moveable.OnRender} - Parameters for the `render` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"render\", ({ target }) => {\n *     console.log(\"onRender\", target);\n * });\n */\n\n/**\n * `renderEnd` event occurs at the end of all events.\n * @memberof Moveable\n * @event renderEnd\n * @param {Moveable.OnRenderEnd} - Parameters for the `renderEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"renderEnd\", ({ target }) => {\n *     console.log(\"onRenderEnd\", target);\n * });\n */\n\n/**\n * `renderGroupStart` event occurs at the first start of all events in group.\n * @memberof Moveable\n * @event renderGroupStart\n * @param {Moveable.OnRenderGroupStart} - Parameters for the `renderGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroupStart\", ({ targets }) => {\n *     console.log(\"onRenderGroupStart\", targets);\n * });\n */\n\n/**\n * `renderGroup` event occurs before the target is drawn on the screen in group.\n * @memberof Moveable\n * @event renderGroup\n * @param {Moveable.OnRenderGroup} - Parameters for the `renderGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroup\", ({ targets }) => {\n *     console.log(\"onRenderGroup\", targets);\n * });\n */\n\n/**\n * `renderGroupEnd` event occurs at the end of all events in group.\n * @memberof Moveable\n * @event renderGroupEnd\n * @param {Moveable.OnRenderGroupEnd} - Parameters for the `renderGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"renderGroupEnd\", ({ targets }) => {\n *     console.log(\"onRenderGroupEnd\", targets);\n * });\n */\n"
  },
  {
    "path": "packages/react-moveable/src/Snappable/utils.ts",
    "content": "export function solveConstantsDistance(\n    [a, b, c]: [number, number, number],\n    pos: number[],\n) {\n    return (a * pos[0] + b * pos[1] + c) / Math.sqrt(a * a + b * b);\n}\n\nexport function solveC(\n    [a, b]: [number, number],\n    pos: number[],\n) {\n    // ax + by + c = 0\n    // -ax -by;\n    return -a * pos[0] - b * pos[1];\n}\n"
  },
  {
    "path": "packages/react-moveable/src/ables/AbleManager.ts",
    "content": "import { Able } from \"../types\";\n\nexport function makeAble<\n    Name extends string,\n    AbleObject extends Partial<Able<any, any>>,\n>(name: Name, able: AbleObject) {\n    return {\n        events: [] as AbleObject[\"events\"] extends readonly any[] ? AbleObject[\"events\"] : readonly [],\n        props: [] as AbleObject[\"props\"] extends readonly any[] ? AbleObject[\"props\"] : readonly [],\n        name,\n        ...able,\n    } as const;\n}\n"
  },
  {
    "path": "packages/react-moveable/src/ables/BeforeRenderable.ts",
    "content": "import {\n    MoveableManagerInterface, BeforeRenderableProps,\n    OnBeforeRenderStart, OnBeforeRender, OnBeforeRenderEnd,\n    MoveableGroupInterface, OnBeforeRenderGroupStart,\n    OnBeforeRenderGroup, OnBeforeRenderGroupEnd,\n} from \"../types\";\nimport { fillParams, triggerEvent } from \"../utils\";\nimport { convertMatrixtoCSS, createIdentityMatrix } from \"@scena/matrix\";\nimport { isArray, splitSpace } from \"@daybrush/utils\";\nimport { fillChildEvents } from \"../groupUtils\";\n\n\nfunction isIdentityMatrix(matrix: string, is3d?: boolean) {\n    const n = is3d ? 4 : 3;\n    const identityMatrix = createIdentityMatrix(n);\n    const value = `matrix${is3d ? \"3d\" : \"\"}(${identityMatrix.join(\",\")})`;\n\n    return matrix === value || matrix === `matrix(1,0,0,1,0,0)`;\n}\nexport default {\n    isPinch: true,\n    name: \"beforeRenderable\",\n    props: [] as const,\n    events: [\n        \"beforeRenderStart\",\n        \"beforeRender\",\n        \"beforeRenderEnd\",\n        \"beforeRenderGroupStart\",\n        \"beforeRenderGroup\",\n        \"beforeRenderGroupEnd\",\n    ] as const,\n    dragRelation: \"weak\",\n    setTransform(moveable: MoveableManagerInterface<BeforeRenderableProps>, e: any) {\n        const {\n            is3d,\n            targetMatrix,\n            inlineTransform,\n        } = moveable.state;\n        const cssMatrix = is3d\n            ? `matrix3d(${targetMatrix.join(\",\")})`\n            : `matrix(${convertMatrixtoCSS(targetMatrix, true)})`;\n        const startTransform = !inlineTransform || inlineTransform === \"none\" ? cssMatrix : inlineTransform;\n\n        e.datas.startTransforms = isIdentityMatrix(startTransform, is3d) ? [] : splitSpace(startTransform);\n    },\n    resetStyle(e: any) {\n        const datas = e.datas;\n\n        datas.nextStyle = {};\n        datas.nextTransforms = e.datas.startTransforms;\n        datas.nextTransformAppendedIndexes = [];\n    },\n    fillDragStartParams(moveable: MoveableManagerInterface<BeforeRenderableProps>, e: any) {\n        return fillParams<OnBeforeRenderStart>(moveable, e, {\n            setTransform: (transform: string | string[]) => {\n                e.datas.startTransforms = isArray(transform) ? transform : splitSpace(transform);\n            },\n            isPinch: !!e.isPinch,\n        });\n    },\n    fillDragParams(moveable: MoveableManagerInterface<BeforeRenderableProps>, e: any) {\n        return fillParams<OnBeforeRender>(moveable, e, {\n            isPinch: !!e.isPinch,\n        });\n    },\n    dragStart(moveable: MoveableManagerInterface<BeforeRenderableProps>, e: any) {\n        this.setTransform(moveable, e);\n        this.resetStyle(e);\n\n        triggerEvent(moveable, `onBeforeRenderStart`, this.fillDragStartParams(moveable, e));\n    },\n    drag(moveable: MoveableManagerInterface<BeforeRenderableProps>, e: any) {\n        if (!e.datas.startTransforms) {\n            this.setTransform(moveable, e);\n        }\n        this.resetStyle(e);\n        triggerEvent(moveable, `onBeforeRender`, fillParams<OnBeforeRender>(moveable, e, {\n            isPinch: !!e.isPinch,\n        }));\n    },\n    dragEnd(moveable: MoveableManagerInterface<BeforeRenderableProps>, e: any) {\n        if (!e.datas.startTransforms) {\n            this.setTransform(moveable, e);\n            this.resetStyle(e);\n        }\n        triggerEvent(moveable, `onBeforeRenderEnd`, fillParams<OnBeforeRenderEnd>(moveable, e, {\n            isPinch: !!e.isPinch,\n            isDrag: e.isDrag,\n        }));\n    },\n    dragGroupStart(moveable: MoveableGroupInterface<BeforeRenderableProps>, e: any) {\n        this.dragStart(moveable, e);\n\n        const events = fillChildEvents(moveable, \"beforeRenderable\", e);\n        const moveables = moveable.moveables;\n        const params = events.map((childEvent, i) => {\n            const childMoveable = moveables[i];\n\n            this.setTransform(childMoveable, childEvent);\n            this.resetStyle(childEvent);\n\n            return this.fillDragStartParams(childMoveable, childEvent);\n        });\n        triggerEvent(moveable, `onBeforeRenderGroupStart`, fillParams<OnBeforeRenderGroupStart>(moveable, e, {\n            isPinch: !!e.isPinch,\n            targets: moveable.props.targets,\n            setTransform() { },\n            events: params,\n        }));\n    },\n    dragGroup(moveable: MoveableGroupInterface<BeforeRenderableProps>, e: any) {\n        this.drag(moveable, e);\n\n        const events = fillChildEvents(moveable, \"beforeRenderable\", e);\n        const moveables = moveable.moveables;\n        const params = events.map((childEvent, i) => {\n            const childMoveable = moveables[i];\n\n            this.resetStyle(childEvent);\n            return this.fillDragParams(childMoveable, childEvent);\n        });\n        triggerEvent(moveable, `onBeforeRenderGroup`, fillParams<OnBeforeRenderGroup>(moveable, e, {\n            isPinch: !!e.isPinch,\n            targets: moveable.props.targets,\n            events: params,\n        }));\n    },\n    dragGroupEnd(moveable: MoveableGroupInterface<BeforeRenderableProps>, e: any) {\n        this.dragEnd(moveable, e);\n\n        triggerEvent(moveable, `onBeforeRenderGroupEnd`, fillParams<OnBeforeRenderGroupEnd>(moveable, e, {\n            isPinch: !!e.isPinch,\n            isDrag: e.isDrag,\n            targets: moveable.props.targets,\n        }));\n    },\n    dragControlStart(moveable: MoveableManagerInterface<BeforeRenderableProps>, e: any) {\n        return this.dragStart(moveable, e);\n    },\n    dragControl(moveable: MoveableManagerInterface<BeforeRenderableProps>, e: any) {\n        return this.drag(moveable, e);\n    },\n    dragControlEnd(moveable: MoveableManagerInterface<BeforeRenderableProps>, e: any) {\n        return this.dragEnd(moveable, e);\n    },\n    dragGroupControlStart(moveable: MoveableGroupInterface<BeforeRenderableProps>, e: any) {\n        return this.dragGroupStart(moveable, e);\n    },\n    dragGroupControl(moveable: MoveableGroupInterface<BeforeRenderableProps>, e: any) {\n        return this.dragGroup(moveable, e);\n    },\n    dragGroupControlEnd(moveable: MoveableGroupInterface<BeforeRenderableProps>, e: any) {\n        return this.dragGroupEnd(moveable, e);\n    },\n} as const;\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Clickable.ts",
    "content": "import {\n    MoveableManagerInterface, MoveableGroupInterface,\n    ClickableProps, OnClick, OnClickGroup,\n} from \"../types\";\nimport { triggerEvent, fillParams } from \"../utils\";\nimport { findIndex } from \"@daybrush/utils\";\nimport { makeAble } from \"./AbleManager\";\n\nexport default makeAble(\"clickable\", {\n    props: [\n        \"clickable\",\n    ] as const,\n    events: [\n        \"click\",\n        \"clickGroup\",\n    ] as const,\n    always: true,\n    dragRelation: \"weak\",\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    dragStart() {\n        return;\n    },\n    dragControlStart() {\n        return;\n    },\n    dragGroupStart(moveable: MoveableManagerInterface<ClickableProps>, e: any) {\n        e.datas.inputTarget = e.inputEvent && e.inputEvent.target;\n    },\n    dragEnd(moveable: MoveableManagerInterface<ClickableProps>, e: any) {\n        const target = moveable.props.target!;\n        const inputEvent = e.inputEvent;\n        const inputTarget = e.inputTarget;\n        const isMoveableElement = moveable.isMoveableElement(inputTarget);\n        const containsElement = !isMoveableElement && moveable.controlBox.contains(inputTarget);\n\n        if (\n            !inputEvent || !inputTarget || e.isDrag\n            || moveable.isMoveableElement(inputTarget)\n            || containsElement\n            // External event duplicate target or dragAreaElement\n        ) {\n            return;\n        }\n        const containsTarget = target.contains(inputTarget);\n\n        triggerEvent(moveable, \"onClick\", fillParams<OnClick>(moveable, e, {\n            isDouble: e.isDouble,\n            inputTarget,\n            isTarget: target === inputTarget,\n            moveableTarget: moveable.props.target!,\n            containsTarget,\n        }));\n    },\n    dragGroupEnd(moveable: MoveableGroupInterface<ClickableProps>, e: any) {\n        const inputEvent = e.inputEvent;\n        const inputTarget = e.inputTarget;\n\n        if (\n            !inputEvent || !inputTarget || e.isDrag\n            || moveable.isMoveableElement(inputTarget)\n            // External event duplicate target or dragAreaElement\n            || e.datas.inputTarget === inputTarget\n        ) {\n            return;\n        }\n        const targets = moveable.props.targets!;\n        let targetIndex = targets.indexOf(inputTarget);\n        const isTarget = targetIndex > -1;\n        let containsTarget = false;\n\n        if (targetIndex === -1) {\n            targetIndex = findIndex(targets, parentTarget => parentTarget.contains(inputTarget));\n            containsTarget = targetIndex > -1;\n        }\n\n        triggerEvent(moveable, \"onClickGroup\", fillParams<OnClickGroup>(moveable, e, {\n            isDouble: e.isDouble,\n            targets,\n            inputTarget,\n            targetIndex,\n            isTarget,\n            containsTarget,\n            moveableTarget: targets[targetIndex],\n        }));\n    },\n    dragControlEnd(moveable: MoveableManagerInterface<ClickableProps>, e: any) {\n        this.dragEnd(moveable, e);\n    },\n    dragGroupControlEnd(moveable: MoveableManagerInterface<ClickableProps>, e: any) {\n        this.dragEnd(moveable, e);\n    },\n});\n\n/**\n * When you click on the element, the `click` event is called.\n * @memberof Moveable\n * @event click\n * @param {Moveable.OnClick} - Parameters for the `click` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"click\", ({ hasTarget, containsTarget, targetIndex }) => {\n *     // If you click on an element other than the target and not included in the target, index is -1.\n *     console.log(\"onClickGroup\", target, hasTarget, containsTarget, targetIndex);\n * });\n */\n\n/**\n * When you click on the element inside the group, the `clickGroup` event is called.\n * @memberof Moveable\n * @event clickGroup\n * @param {Moveable.OnClickGroup} - Parameters for the `clickGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"clickGroup\", ({ inputTarget, isTarget, containsTarget, targetIndex }) => {\n *     // If you click on an element other than the target and not included in the target, index is -1.\n *     console.log(\"onClickGroup\", inputTarget, isTarget, containsTarget, targetIndex);\n * });\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Clippable.tsx",
    "content": "import {\n    Renderer, ClippableProps, OnClip,\n    ClippableState, OnClipEnd, OnClipStart,\n    ControlPose, MoveableManagerInterface, DraggableProps,\n} from \"../types\";\nimport { convertUnitSize, getRad } from \"@daybrush/utils\";\nimport {\n    prefix, calculatePosition, getDiagonalSize,\n    fillParams, triggerEvent,\n    makeMatrixCSS, getRect, fillEndParams,\n    getSizeDistByDist,\n    getProps,\n    fillCSSObject,\n    abs,\n    sign,\n} from \"../utils\";\nimport { plus, minus, multiply } from \"@scena/matrix\";\nimport { getDragDist, calculatePointerDist, setDragStart } from \"../gesto/GestoUtils\";\nimport {\n    HORIZONTAL_RADIUS_ORDER, VERTICAL_RADIUS_ORDER, addRadiusPos, removeRadiusPos,\n} from \"./roundable/borderRadius\";\nimport { renderLine } from \"../renderDirections\";\nimport { checkSnapBoundPriority } from \"./snappable/snap\";\nimport { checkSnapBounds } from \"./snappable/snapBounds\";\nimport { getDefaultGuidelines } from \"./snappable/getTotalGuidelines\";\nimport {\n    getControlSize, getClipPath,\n    getClipStyles, getRectPoses,\n} from \"./clippable/utils\";\n\nexport function moveControlPos(\n    controlPoses: ControlPose[],\n    index: number,\n    dist: number[],\n    isRect?: boolean,\n    keepRatio?: boolean,\n) {\n    const { direction, sub } = controlPoses[index];\n    const dists = controlPoses.map(() => [0, 0]);\n    const directions = direction ? direction.split(\"\") : [];\n\n    if (isRect && index < 8) {\n        const verticalDirections = directions.filter(dir => dir === \"w\" || dir === \"e\");\n        const horizontalDirections = directions.filter(dir => dir === \"n\" || dir === \"s\");\n\n        const verticalDirection = verticalDirections[0];\n        const horizontalDirection = horizontalDirections[0];\n\n        dists[index] = dist;\n        const [width, height] = getControlSize(controlPoses);\n        const ratio = width && height ? width / height : 0;\n\n        if (ratio && keepRatio) {\n            // 0 1 2\n            // 7   3\n            // 6 5 4\n            const fixedIndex = (index + 4) % 8;\n            const fixedPosition = controlPoses[fixedIndex].pos;\n            const sizeDirection = [0, 0];\n\n            if (direction!.indexOf(\"w\") > -1) {\n                sizeDirection[0] = -1;\n            } else if (direction!.indexOf(\"e\") > -1) {\n                sizeDirection[0] = 1;\n            }\n            if (direction!.indexOf(\"n\") > -1) {\n                sizeDirection[1] = -1;\n            } else if (direction!.indexOf(\"s\") > -1) {\n                sizeDirection[1] = 1;\n            }\n\n\n            const nextDist = getSizeDistByDist(\n                [width, height],\n                dist,\n                ratio,\n                sizeDirection,\n                true,\n            );\n            const nextWidth = width + nextDist[0];\n            const nextHeight = height + nextDist[1];\n            let top = fixedPosition[1];\n            let bottom = fixedPosition[1];\n            let left = fixedPosition[0];\n            let right = fixedPosition[0];\n\n            if (sizeDirection[0] === -1) {\n                left = right - nextWidth;\n            } else if (sizeDirection[0] === 1) {\n                right = left + nextWidth;\n            } else {\n                left = left - nextWidth / 2;\n                right = right + nextWidth / 2;\n            }\n            if (sizeDirection[1] === -1) {\n                top = bottom - nextHeight;\n            } else if (sizeDirection[1] === 1) {\n                bottom = top + nextHeight;\n            } else {\n                top = bottom - nextHeight / 2;\n                bottom = top + nextHeight;\n            }\n\n            const nextControlPoses = getRectPoses(top, right, bottom, left);\n\n            controlPoses.forEach((controlPose, i) => {\n                dists[i][0] = nextControlPoses[i].pos[0] - controlPose.pos[0];\n                dists[i][1] = nextControlPoses[i].pos[1] - controlPose.pos[1];\n            });\n        } else {\n            controlPoses.forEach((controlPose, i) => {\n                const {\n                    direction: controlDir,\n                } = controlPose;\n\n                if (!controlDir) {\n                    return;\n                }\n                if (controlDir.indexOf(verticalDirection) > -1) {\n                    dists[i][0] = dist[0];\n                }\n                if (controlDir.indexOf(horizontalDirection) > -1) {\n                    dists[i][1] = dist[1];\n                }\n            });\n            if (verticalDirection) {\n                dists[1][0] = dist[0] / 2;\n                dists[5][0] = dist[0] / 2;\n            }\n            if (horizontalDirection) {\n                dists[3][1] = dist[1] / 2;\n                dists[7][1] = dist[1] / 2;\n            }\n        }\n    } else if (direction && !sub) {\n        directions.forEach(dir => {\n            const isVertical = dir === \"n\" || dir === \"s\";\n\n            controlPoses.forEach((controlPose, i) => {\n                const {\n                    direction: dirDir,\n                    horizontal: dirHorizontal,\n                    vertical: dirVertical,\n                } = controlPose;\n\n                if (!dirDir || dirDir.indexOf(dir) === -1) {\n                    return;\n                }\n                dists[i] = [\n                    isVertical || !dirHorizontal ? 0 : dist[0],\n                    !isVertical || !dirVertical ? 0 : dist[1],\n                ];\n            });\n        });\n    } else {\n        dists[index] = dist;\n    }\n\n    return dists;\n}\n\n\nfunction addClipPath(moveable: MoveableManagerInterface<ClippableProps>, e: any) {\n    const [distX, distY] = calculatePointerDist(moveable, e);\n    const { clipPath, clipIndex } = e.datas;\n    const {\n        type: clipType,\n        poses: clipPoses,\n        splitter,\n    } = (clipPath as ReturnType<typeof getClipPath>)!;\n    const poses = clipPoses.map(pos => pos.pos);\n    if (clipType === \"polygon\") {\n        poses.splice(clipIndex, 0, [distX, distY]);\n    } else if (clipType === \"inset\") {\n        const horizontalIndex = HORIZONTAL_RADIUS_ORDER.indexOf(clipIndex);\n        const verticalIndex = VERTICAL_RADIUS_ORDER.indexOf(clipIndex);\n        const length = clipPoses.length;\n\n        addRadiusPos(\n            clipPoses,\n            poses,\n            8,\n            horizontalIndex,\n            verticalIndex,\n            distX,\n            distY,\n            poses[4][0],\n            poses[4][1],\n            poses[0][0],\n            poses[0][1],\n        );\n\n        if (length === clipPoses.length) {\n            return;\n        }\n    } else {\n        return;\n    }\n    const clipStyles = getClipStyles(moveable, clipPath, poses)!;\n    const clipStyle = `${clipType}(${clipStyles.join(splitter)})`;\n\n    triggerEvent(moveable, \"onClip\", fillParams<OnClip>(moveable, e, {\n        clipEventType: \"added\",\n        clipType,\n        poses,\n        clipStyles,\n        clipStyle,\n        distX: 0,\n        distY: 0,\n        ...fillCSSObject({\n            clipPath: clipStyle,\n        }, e),\n    }));\n}\nfunction removeClipPath(moveable: MoveableManagerInterface<ClippableProps>, e: any) {\n    const { clipPath, clipIndex } = e.datas;\n    const {\n        type: clipType,\n        poses: clipPoses,\n        splitter,\n    } = (clipPath as ReturnType<typeof getClipPath>)!;\n    const poses = clipPoses.map(pos => pos.pos);\n    const length = poses.length;\n    if (clipType === \"polygon\") {\n        clipPoses.splice(clipIndex, 1);\n        poses.splice(clipIndex, 1);\n    } else if (clipType === \"inset\") {\n        if (clipIndex < 8) {\n            return;\n        }\n        removeRadiusPos(clipPoses, poses, clipIndex, 8, length);\n\n        if (length === clipPoses.length) {\n            return;\n        }\n    } else {\n        return;\n    }\n    const clipStyles = getClipStyles(moveable, clipPath, poses)!;\n    const clipStyle = `${clipType}(${clipStyles.join(splitter)})`;\n\n    triggerEvent(moveable, \"onClip\", fillParams<OnClip>(moveable, e, {\n        clipEventType: \"removed\",\n        clipType,\n        poses,\n        clipStyles,\n        clipStyle,\n        distX: 0,\n        distY: 0,\n        ...fillCSSObject({\n            clipPath: clipStyle,\n        }, e),\n    }));\n}\n/**\n * @namespace Moveable.Clippable\n * @description Whether to clip the target.\n */\n\nexport default {\n    name: \"clippable\",\n    props: [\n        \"clippable\",\n        \"defaultClipPath\",\n        \"customClipPath\",\n        \"keepRatio\",\n        \"clipRelative\",\n        \"clipArea\",\n        \"dragWithClip\",\n        \"clipTargetBounds\",\n        \"clipVerticalGuidelines\",\n        \"clipHorizontalGuidelines\",\n        \"clipSnapThreshold\",\n    ] as const,\n    events: [\n        \"clipStart\",\n        \"clip\",\n        \"clipEnd\",\n    ] as const,\n    css: [\n        `.control.clip-control {\nbackground: #6d6;\ncursor: pointer;\n}\n.control.clip-control.clip-radius {\nbackground: #d66;\n}\n.line.clip-line {\nbackground: #6e6;\ncursor: move;\nz-index: 1;\n}\n.clip-area {\nposition: absolute;\ntop: 0;\nleft: 0;\n}\n.clip-ellipse {\nposition: absolute;\ncursor: move;\nborder: 1px solid #6d6;\nborder: var(--zoompx) solid #6d6;\nborder-radius: 50%;\ntransform-origin: 0px 0px;\n}`,\n        `:host {\n--bounds-color: #d66;\n}`,\n        `.guideline {\npointer-events: none;\nz-index: 2;\n}`,\n        `.line.guideline.bounds {\nbackground: #d66;\nbackground: var(--bounds-color);\n}`,\n    ],\n    render(moveable: MoveableManagerInterface<ClippableProps, ClippableState>, React: Renderer): any[] {\n        const {\n            customClipPath,\n            defaultClipPath,\n            clipArea, zoom,\n            groupable,\n        } = moveable.props;\n        const {\n            target, width, height, allMatrix, is3d, left, top,\n            pos1, pos2, pos3, pos4,\n            clipPathState,\n            snapBoundInfos,\n            rotation: rotationRad,\n        } = moveable.getState();\n\n        if (!target || groupable) {\n            return [];\n        }\n\n        const clipPath = getClipPath(\n            target, width, height, defaultClipPath || \"inset\", clipPathState || customClipPath);\n\n        if (!clipPath) {\n            return [];\n        }\n        const n = is3d ? 4 : 3;\n        const type = clipPath.type;\n        const clipPoses = clipPath.poses;\n        const poses = clipPoses.map(pos => {\n            // return [x, y];\n            const calculatedPos = calculatePosition(allMatrix, pos.pos, n);\n\n            return [\n                calculatedPos[0] - left,\n                calculatedPos[1] - top,\n            ];\n        });\n\n        let controls: any[] = [];\n        let lines: any[] = [];\n\n        const isRect = type === \"rect\";\n        const isInset = type === \"inset\";\n        const isPolygon = type === \"polygon\";\n\n        if (isRect || isInset || isPolygon) {\n            const linePoses = isInset ? poses.slice(0, 8) : poses;\n\n            lines = linePoses.map((to, i) => {\n                const from = i === 0 ? linePoses[linePoses.length - 1] : linePoses[i - 1];\n\n                const rad = getRad(from, to);\n                const dist = getDiagonalSize(from, to);\n                return <div key={`clipLine${i}`} className={prefix(\"line\", \"clip-line\", \"snap-control\")}\n                    data-clip-index={i}\n                    style={{\n                        width: `${dist}px`,\n                        transform: `translate(${from[0]}px, ${from[1]}px) rotate(${rad}rad) scaleY(${zoom})`,\n                    }}></div>;\n            });\n        }\n        controls = poses.map((pos, i) => {\n            return <div key={`clipControl${i}`}\n                className={prefix(\"control\", \"clip-control\", \"snap-control\")}\n                data-clip-index={i}\n                style={{\n                    transform: `translate(${pos[0]}px, ${pos[1]}px) rotate(${rotationRad}rad) scale(${zoom})`,\n                }}></div>;\n        });\n\n        if (isInset) {\n            controls.push(...poses.slice(8).map((pos, i) => {\n                return <div key={`clipRadiusControl${i}`}\n                    className={prefix(\"control\", \"clip-control\", \"clip-radius\", \"snap-control\")}\n                    data-clip-index={8 + i}\n                    style={{\n                        transform: `translate(${pos[0]}px, ${pos[1]}px) rotate(${rotationRad}rad) scale(${zoom})`,\n                    }}></div>;\n            }));\n        }\n        if (type === \"circle\" || type === \"ellipse\") {\n            const {\n                left: clipLeft,\n                top: clipTop,\n                radiusX,\n                radiusY,\n            } = clipPath;\n\n            const [distLeft, distTop] = minus(\n                calculatePosition(allMatrix, [clipLeft!, clipTop!], n),\n                calculatePosition(allMatrix, [0, 0], n),\n            );\n            let ellipseClipPath = \"none\";\n\n            if (!clipArea) {\n                const piece = Math.max(10, radiusX! / 5, radiusY! / 5);\n                const areaPoses: number[][] = [];\n\n                for (let i = 0; i <= piece; ++i) {\n                    const rad = Math.PI * 2 / piece * i;\n                    areaPoses.push([\n                        radiusX! + (radiusX! - zoom!) * Math.cos(rad),\n                        radiusY! + (radiusY! - zoom!) * Math.sin(rad),\n                    ]);\n                }\n                areaPoses.push([radiusX!, -2]);\n                areaPoses.push([-2, -2]);\n                areaPoses.push([-2, radiusY! * 2 + 2]);\n                areaPoses.push([radiusX! * 2 + 2, radiusY! * 2 + 2]);\n                areaPoses.push([radiusX! * 2 + 2, -2]);\n                areaPoses.push([radiusX!, -2]);\n\n                ellipseClipPath = `polygon(${areaPoses.map(pos => `${pos[0]}px ${pos[1]}px`).join(\", \")})`;\n            }\n            controls.push(<div key=\"clipEllipse\" className={prefix(\"clip-ellipse\", \"snap-control\")} style={{\n                width: `${radiusX! * 2}px`,\n                height: `${radiusY! * 2}px`,\n                clipPath: ellipseClipPath,\n                transform: `translate(${-left + distLeft}px, ${-top + distTop}px) ${makeMatrixCSS(allMatrix)}`,\n            }}></div>);\n        }\n        if (clipArea) {\n            const {\n                width: allWidth,\n                height: allHeight,\n                left: allLeft,\n                top: allTop,\n            } = getRect([pos1, pos2, pos3, pos4, ...poses]);\n            if (isPolygon || isRect || isInset) {\n                const areaPoses = isInset ? poses.slice(0, 8) : poses;\n                controls.push(<div key=\"clipArea\" className={prefix(\"clip-area\", \"snap-control\")} style={{\n                    width: `${allWidth}px`,\n                    height: `${allHeight}px`,\n                    transform: `translate(${allLeft}px, ${allTop}px)`,\n                    clipPath: `polygon(${areaPoses.map(pos => `${pos[0] - allLeft}px ${pos[1] - allTop}px`).join(\", \")})`,\n                }}></div>);\n            }\n        }\n        if (snapBoundInfos) {\n            ([\"vertical\", \"horizontal\"] as const).forEach(directionType => {\n                const info = snapBoundInfos[directionType];\n                const isHorizontal = directionType === \"horizontal\";\n\n                if (info.isSnap) {\n                    lines.push(...info.snap.posInfos.map(({ pos }, i) => {\n                        const snapPos1 = minus(calculatePosition(\n                            allMatrix, isHorizontal ? [0, pos] : [pos, 0], n), [left, top]);\n                        const snapPos2 = minus(calculatePosition(\n                            allMatrix, isHorizontal ? [width, pos] : [pos, height], n), [left, top]);\n\n                        return renderLine(\n                            React, \"\", snapPos1, snapPos2, zoom!,\n                            `clip${directionType}snap${i}`, \"guideline\");\n                    }));\n                }\n                if (info.isBound) {\n                    lines.push(...info.bounds.map(({ pos }, i) => {\n                        const snapPos1 = minus(calculatePosition(\n                            allMatrix, isHorizontal ? [0, pos] : [pos, 0], n), [left, top]);\n                        const snapPos2 = minus(calculatePosition(\n                            allMatrix, isHorizontal ? [width, pos] : [pos, height], n), [left, top]);\n\n                        return renderLine(\n                            React, \"\", snapPos1, snapPos2, zoom!,\n                            `clip${directionType}bounds${i}`, \"guideline\", \"bounds\", \"bold\");\n                    }));\n                }\n            });\n        }\n        return [\n            ...controls,\n            ...lines,\n        ];\n    },\n    dragControlCondition(moveable: any, e: any) {\n        return e.inputEvent && (e.inputEvent.target.getAttribute(\"class\") || \"\").indexOf(\"clip\") > -1;\n    },\n    dragStart(moveable: MoveableManagerInterface<ClippableProps, ClippableState>, e: any) {\n        const props = moveable.props;\n        const {\n            dragWithClip = true,\n        } = props;\n\n        if (dragWithClip) {\n            return false;\n        }\n\n        return this.dragControlStart(moveable, e);\n    },\n    drag(moveable: MoveableManagerInterface<ClippableProps, ClippableState>, e: any) {\n        return this.dragControl(moveable, { ...e, isDragTarget: true });\n    },\n    dragEnd(moveable: MoveableManagerInterface<ClippableProps, ClippableState>, e: any) {\n        return this.dragControlEnd(moveable, e);\n    },\n    dragControlStart(moveable: MoveableManagerInterface<ClippableProps, ClippableState>, e: any) {\n        const state = moveable.state;\n        const { defaultClipPath, customClipPath } = moveable.props;\n        const { target, width, height } = state;\n        const inputTarget = e.inputEvent ? e.inputEvent.target : null;\n        const className = (inputTarget && inputTarget.getAttribute(\"class\")) || \"\";\n        const datas = e.datas;\n        const clipPath = getClipPath(target!, width, height, defaultClipPath || \"inset\", customClipPath);\n\n        if (!clipPath) {\n            return false;\n        }\n        const { clipText, type, poses } = clipPath;\n        const result = triggerEvent(moveable, \"onClipStart\", fillParams<OnClipStart>(moveable, e, {\n            clipType: type,\n            clipStyle: clipText,\n            poses: poses.map(pos => pos.pos),\n        }));\n\n        if (result === false) {\n            datas.isClipStart = false;\n            return false;\n        }\n        datas.isControl = className && className.indexOf(\"clip-control\") > -1;\n        datas.isLine = className.indexOf(\"clip-line\") > -1;\n        datas.isArea = className.indexOf(\"clip-area\") > -1 || className.indexOf(\"clip-ellipse\") > -1;\n        datas.clipIndex = inputTarget ? parseInt(inputTarget.getAttribute(\"data-clip-index\"), 10) : -1;\n        datas.clipPath = clipPath;\n        datas.isClipStart = true;\n        state.clipPathState = clipText;\n        setDragStart(moveable, e);\n\n        return true;\n    },\n    dragControl(moveable: MoveableManagerInterface<ClippableProps & DraggableProps, ClippableState>, e: any) {\n        const { datas, originalDatas, isDragTarget } = e;\n\n        if (!datas.isClipStart) {\n            return false;\n        }\n        const { isControl, isLine, isArea, clipIndex, clipPath } = datas as {\n            clipPath: ReturnType<typeof getClipPath>,\n            [key: string]: any,\n        };\n        if (!clipPath) {\n            return false;\n        }\n        const props = getProps(moveable.props, \"clippable\");\n\n        const { keepRatio } = props;\n        let distX = 0;\n        let distY = 0;\n\n        const originalDraggable = originalDatas.draggable;\n        const originalDist = getDragDist(e);\n\n        if (isDragTarget && originalDraggable) {\n            [distX, distY] = originalDraggable.prevBeforeDist;\n        } else {\n            [distX, distY] = originalDist;\n        }\n\n        const firstDist = [distX, distY];\n\n        const state = moveable.state;\n        const { width, height } = state;\n        const isDragWithTarget = !isArea && !isControl && !isLine;\n        const {\n            type: clipType,\n            poses: clipPoses,\n            splitter,\n        } = clipPath;\n        const poses = clipPoses.map(pos => pos.pos);\n\n        if (isDragWithTarget) {\n            distX = -distX;\n            distY = -distY;\n        }\n        const isAll = !isControl || clipPoses[clipIndex].direction === \"nesw\";\n        const isRect = clipType === \"inset\" || clipType === \"rect\";\n        let dists = clipPoses.map(() => [0, 0]);\n\n        if (isControl && !isAll) {\n            const { horizontal, vertical } = clipPoses[clipIndex];\n            const dist = [\n                distX * abs(horizontal),\n                distY * abs(vertical),\n            ];\n            dists = moveControlPos(clipPoses, clipIndex, dist, isRect, keepRatio);\n        } else if (isAll) {\n            dists = poses.map(() => [distX, distY]);\n        }\n        const nextPoses: number[][] = poses.map((pos, i) => plus(pos, dists[i]));\n        const guidePoses = [...nextPoses];\n\n        state.snapBoundInfos = null;\n        const isCircle = clipPath.type === \"circle\";\n        const isEllipse = clipPath.type === \"ellipse\";\n\n        if (isCircle || isEllipse) {\n            const guideRect = getRect(nextPoses);\n            const ry = abs(guideRect.bottom - guideRect.top);\n            const rx = abs(isEllipse ? guideRect.right - guideRect.left : ry);\n            const bottom = nextPoses[0][1] + ry;\n            const left = nextPoses[0][0] - rx;\n            const right = nextPoses[0][0] + rx;\n\n            // right\n            if (isCircle) {\n                guidePoses.push([right, guideRect.bottom]);\n                dists.push([1, 0]);\n            }\n            // bottom\n            guidePoses.push([guideRect.left, bottom]);\n            dists.push([0, 1]);\n            // left\n            guidePoses.push([left, guideRect.bottom]);\n            dists.push([1, 0]);\n        }\n\n        const guidelines = getDefaultGuidelines(\n            (props.clipHorizontalGuidelines || []).map(v => convertUnitSize(`${v}`, height)),\n            (props.clipVerticalGuidelines || []).map(v => convertUnitSize(`${v}`, width)),\n            width!, height!,\n        );\n        let guideXPoses: number[] = [];\n        let guideYPoses: number[] = [];\n\n        if (isCircle || isEllipse) {\n            guideXPoses = [guidePoses[4][0], guidePoses[2][0]];\n            guideYPoses = [guidePoses[1][1], guidePoses[3][1]];\n        } else if (isRect) {\n            const rectPoses = [guidePoses[0], guidePoses[2], guidePoses[4], guidePoses[6]];\n            const rectDists = [dists[0], dists[2], dists[4], dists[6]];\n\n            guideXPoses = rectPoses.filter((_, i) => rectDists[i][0]).map(pos => pos[0]);\n            guideYPoses = rectPoses.filter((_, i) => rectDists[i][1]).map(pos => pos[1]);\n        } else {\n            guideXPoses = guidePoses.filter((_, i) => dists[i][0]).map(pos => pos[0]);\n            guideYPoses = guidePoses.filter((_, i) => dists[i][1]).map(pos => pos[1]);\n        }\n        const boundDelta = [0, 0];\n        const {\n            horizontal: horizontalSnapInfo,\n            vertical: verticalSnapInfo,\n        } = checkSnapBounds(\n            guidelines,\n            props.clipTargetBounds && { left: 0, top: 0, right: width, bottom: height },\n            guideXPoses,\n            guideYPoses,\n            5,\n            5,\n        );\n        let snapOffsetY = horizontalSnapInfo.offset;\n        let snapOffsetX = verticalSnapInfo.offset;\n\n        if (horizontalSnapInfo.isBound) {\n            boundDelta[1] += snapOffsetY;\n        }\n        if (verticalSnapInfo.isBound) {\n            boundDelta[0] += snapOffsetX;\n        }\n        if ((isEllipse || isCircle) && dists[0][0] === 0 && dists[0][1] === 0) {\n            const guideRect = getRect(nextPoses);\n            let cy = guideRect.bottom - guideRect.top;\n            let cx = isEllipse ? guideRect.right - guideRect.left : cy;\n\n\n            const distSnapX = verticalSnapInfo.isBound\n                ? abs(snapOffsetX)\n                : (verticalSnapInfo.snapIndex === 0 ? -snapOffsetX : snapOffsetX);\n            const distSnapY = horizontalSnapInfo.isBound\n                ? abs(snapOffsetY)\n                : (horizontalSnapInfo.snapIndex === 0 ? -snapOffsetY : snapOffsetY);\n            cx -= distSnapX;\n            cy -= distSnapY;\n\n            if (isCircle) {\n                cy = checkSnapBoundPriority(verticalSnapInfo, horizontalSnapInfo) > 0 ? cy : cx;\n                cx = cy;\n            }\n            const center = guidePoses[0];\n\n            guidePoses[1][1] = center[1] - cy;\n            guidePoses[2][0] = center[0] + cx;\n            guidePoses[3][1] = center[1] + cy;\n            guidePoses[4][0] = center[0] - cx;\n        } else if (isRect && keepRatio && isControl) {\n            const [width, height] = getControlSize(clipPoses);\n            const ratio = width && height ? width / height : 0;\n            const clipPose = clipPoses[clipIndex];\n            const direction = clipPose.direction! || \"\";\n            let top = guidePoses[1][1];\n            let bottom = guidePoses[5][1];\n            let left = guidePoses[7][0];\n            let right = guidePoses[3][0];\n\n            if (abs(snapOffsetY) <= abs(snapOffsetX)) {\n                snapOffsetY = sign(snapOffsetY) * abs(snapOffsetX) / ratio;\n            } else {\n                snapOffsetX = sign(snapOffsetX) * abs(snapOffsetY) * ratio;\n            }\n            if (direction!.indexOf(\"w\") > -1) {\n                left -= snapOffsetX;\n            } else if (direction!.indexOf(\"e\") > -1) {\n                right -= snapOffsetX;\n            } else {\n                left += snapOffsetX / 2;\n                right -= snapOffsetX / 2;\n            }\n            if (direction!.indexOf(\"n\") > -1) {\n                top -= snapOffsetY;\n            } else if (direction!.indexOf(\"s\") > -1) {\n                bottom -= snapOffsetY;\n            } else {\n                top += snapOffsetY / 2;\n                bottom -= snapOffsetY / 2;\n            }\n            const nextControlPoses = getRectPoses(top, right, bottom, left);\n\n            guidePoses.forEach((pos, i) => {\n                [pos[0], pos[1]] = nextControlPoses[i].pos;\n            });\n        } else {\n            guidePoses.forEach((pos, j) => {\n                const dist = dists[j];\n\n                if (dist[0]) {\n                    pos[0] -= snapOffsetX;\n                }\n                if (dist[1]) {\n                    pos[1] -= snapOffsetY;\n                }\n            });\n        }\n        const nextClipStyles = getClipStyles(moveable, clipPath, nextPoses)!;\n        const clipStyle = `${clipType}(${nextClipStyles.join(splitter)})`;\n\n        state.clipPathState = clipStyle;\n\n        if (isCircle || isEllipse) {\n            guideXPoses = [guidePoses[4][0], guidePoses[2][0]];\n            guideYPoses = [guidePoses[1][1], guidePoses[3][1]];\n        } else if (isRect) {\n            const rectPoses = [guidePoses[0], guidePoses[2], guidePoses[4], guidePoses[6]];\n\n            guideXPoses = rectPoses.map(pos => pos[0]);\n            guideYPoses = rectPoses.map(pos => pos[1]);\n        } else {\n            guideXPoses = guidePoses.map(pos => pos[0]);\n            guideYPoses = guidePoses.map(pos => pos[1]);\n        }\n        state.snapBoundInfos = checkSnapBounds(\n            guidelines,\n            props.clipTargetBounds && { left: 0, top: 0, right: width, bottom: height },\n            guideXPoses,\n            guideYPoses,\n            1,\n            1,\n        );\n\n        if (originalDraggable) {\n            const {\n                is3d,\n                allMatrix,\n            } = state;\n            const n = is3d ? 4 : 3;\n\n            let dragDist = boundDelta;\n\n            if (isDragTarget) {\n                dragDist = [\n                    firstDist[0] + boundDelta[0] - originalDist[0],\n                    firstDist[1] + boundDelta[1] - originalDist[1],\n                ];\n            }\n            originalDraggable.deltaOffset = multiply(allMatrix, [dragDist[0], dragDist[1], 0, 0], n);\n        }\n        triggerEvent(moveable, \"onClip\", fillParams<OnClip>(moveable, e, {\n            clipEventType: \"changed\",\n            clipType,\n            poses: nextPoses,\n            clipStyle,\n            clipStyles: nextClipStyles,\n            distX,\n            distY,\n            ...fillCSSObject({\n                [clipType === \"rect\" ? \"clip\" : \"clipPath\"]: clipStyle,\n            }, e),\n        }));\n\n        return true;\n    },\n    dragControlEnd(moveable: MoveableManagerInterface<ClippableProps, ClippableState>, e: any) {\n        this.unset(moveable);\n        const { isDrag, datas, isDouble } = e;\n        const { isLine, isClipStart, isControl } = datas;\n\n        if (!isClipStart) {\n            return false;\n        }\n        triggerEvent(moveable, \"onClipEnd\", fillEndParams<OnClipEnd>(moveable, e, {}));\n        if (isDouble) {\n            if (isControl) {\n                removeClipPath(moveable, e);\n            } else if (isLine) {\n                // add\n                addClipPath(moveable, e);\n            }\n        }\n        return isDouble || isDrag;\n    },\n    unset(moveable: MoveableManagerInterface<ClippableProps, ClippableState>) {\n        moveable.state.clipPathState = \"\";\n        moveable.state.snapBoundInfos = null;\n    },\n};\n\n/**\n * Whether to clip the target. (default: false)\n * @name Moveable.Clippable#clippable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     clippable: true,\n *     defaultClipPath: \"inset\",\n *     customClipPath: \"\",\n *     clipRelative: false,\n *     clipArea: false,\n *     dragWithClip: true,\n * });\n * moveable.on(\"clipStart\", e => {\n *     console.log(e);\n * }).on(\"clip\", e => {\n *     if (e.clipType === \"rect\") {\n *         e.target.style.clip = e.clipStyle;\n *     } else {\n *         e.target.style.clipPath = e.clipStyle;\n *     }\n * }).on(\"clipEnd\", e => {\n *     console.log(e);\n * });\n */\n/**\n *  If clippath is not set, the default value can be set. (defaultClipPath < style < customClipPath < dragging clipPath)\n * @name Moveable.Clippable#defaultClipPath\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     clippable: true,\n *     defaultClipPath: \"inset\",\n *     customClipPath: \"\",\n *     clipRelative: false,\n *     clipArea: false,\n *     dragWithClip: true,\n * });\n * moveable.on(\"clipStart\", e => {\n *     console.log(e);\n * }).on(\"clip\", e => {\n *     if (e.clipType === \"rect\") {\n *         e.target.style.clip = e.clipStyle;\n *     } else {\n *         e.target.style.clipPath = e.clipStyle;\n *     }\n * }).on(\"clipEnd\", e => {\n *     console.log(e);\n * });\n */\n\n/**\n * % Can be used instead of the absolute px (`rect` not possible) (default: false)\n * @name Moveable.Clippable#clipRelative\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     clippable: true,\n *     defaultClipPath: \"inset\",\n *     customClipPath: \"\",\n *     clipRelative: false,\n *     clipArea: false,\n *     dragWithClip: true,\n * });\n * moveable.on(\"clipStart\", e => {\n *     console.log(e);\n * }).on(\"clip\", e => {\n *     if (e.clipType === \"rect\") {\n *         e.target.style.clip = e.clipStyle;\n *     } else {\n *         e.target.style.clipPath = e.clipStyle;\n *     }\n * }).on(\"clipEnd\", e => {\n *     console.log(e);\n * });\n */\n\n/**\n * You can force the custom clipPath. (defaultClipPath < style < customClipPath < dragging clipPath)\n * @name Moveable.Clippable#customClipPath\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     clippable: true,\n *     defaultClipPath: \"inset\",\n *     customClipPath: \"\",\n *     clipRelative: false,\n *     clipArea: false,\n *     dragWithClip: true,\n * });\n * moveable.on(\"clipStart\", e => {\n *     console.log(e);\n * }).on(\"clip\", e => {\n *     if (e.clipType === \"rect\") {\n *         e.target.style.clip = e.clipStyle;\n *     } else {\n *         e.target.style.clipPath = e.clipStyle;\n *     }\n * }).on(\"clipEnd\", e => {\n *     console.log(e);\n * });\n */\n\n/**\n * When dragging the target, the clip also moves. (default: true)\n * @name Moveable.Clippable#dragWithClip\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     clippable: true,\n *     defaultClipPath: \"inset\",\n *     customClipPath: \"\",\n *     clipRelative: false,\n *     clipArea: false,\n *     dragWithClip: true,\n * });\n * moveable.on(\"clipStart\", e => {\n *     console.log(e);\n * }).on(\"clip\", e => {\n *     if (e.clipType === \"rect\") {\n *         e.target.style.clip = e.clipStyle;\n *     } else {\n *         e.target.style.clipPath = e.clipStyle;\n *     }\n * }).on(\"clipEnd\", e => {\n *     console.log(e);\n * });\n */\n\n/**\n * You can drag the clip by setting clipArea.\n * @name Moveable.Clippable#clipArea\n * @default false\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     clippable: true,\n *     defaultClipPath: \"inset\",\n *     customClipPath: \"\",\n *     clipRelative: false,\n *     clipArea: false,\n *     dragWithClip: true,\n * });\n * moveable.on(\"clipStart\", e => {\n *     console.log(e);\n * }).on(\"clip\", e => {\n *     if (e.clipType === \"rect\") {\n *         e.target.style.clip = e.clipStyle;\n *     } else {\n *         e.target.style.clipPath = e.clipStyle;\n *     }\n * }).on(\"clipEnd\", e => {\n *     console.log(e);\n * });\n */\n\n/**\n* Whether the clip is bound to the target.\n* @name Moveable.Clippable#clipTargetBounds\n* @default false\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     clippable: true,\n*     defaultClipPath: \"inset\",\n*     customClipPath: \"\",\n*     clipRelative: false,\n*     clipArea: false,\n*     dragWithClip: true,\n*     clipTargetBounds: true,\n* });\n* moveable.on(\"clipStart\", e => {\n*     console.log(e);\n* }).on(\"clip\", e => {\n*     if (e.clipType === \"rect\") {\n*         e.target.style.clip = e.clipStyle;\n*     } else {\n*         e.target.style.clipPath = e.clipStyle;\n*     }\n* }).on(\"clipEnd\", e => {\n*     console.log(e);\n* });\n*/\n\n/**\n * Add clip guidelines in the vertical direction.\n * @name Moveable.Clippable#clipVerticalGuidelines\n * @default 0\n * @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     clippable: true,\n*     defaultClipPath: \"inset\",\n*     customClipPath: \"\",\n*     clipRelative: false,\n*     clipArea: false,\n*     dragWithClip: true,\n*     clipVerticalGuidelines: [0, 100, 200],\n*     clipHorizontalGuidelines: [0, 100, 200],\n*     clipSnapThreshold: 5,\n* });\n*/\n\n/**\n* Add clip guidelines in the horizontal direction.\n* @name Moveable.Clippable#clipHorizontalGuidelines\n* @default []\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     clippable: true,\n*     defaultClipPath: \"inset\",\n*     customClipPath: \"\",\n*     clipRelative: false,\n*     clipArea: false,\n*     dragWithClip: true,\n*     clipVerticalGuidelines: [0, 100, 200],\n*     clipHorizontalGuidelines: [0, 100, 200],\n*     clipSnapThreshold: 5,\n* });\n*/\n/**\n* istance value that can snap to clip guidelines.\n* @name Moveable.Clippable#clipSnapThreshold\n* @default 5\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     clippable: true,\n*     defaultClipPath: \"inset\",\n*     customClipPath: \"\",\n*     clipRelative: false,\n*     clipArea: false,\n*     dragWithClip: true,\n*     clipVerticalGuidelines: [0, 100, 200],\n*     clipHorizontalGuidelines: [0, 100, 200],\n*     clipSnapThreshold: 5,\n* });\n*/\n/**\n * When drag start the clip area or controls, the `clipStart` event is called.\n * @memberof Moveable.Clippable\n * @event clipStart\n * @param {Moveable.Clippable.OnClipStart} - Parameters for the `clipStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     clippable: true,\n *     defaultClipPath: \"inset\",\n *     customClipPath: \"\",\n *     clipRelative: false,\n *     clipArea: false,\n *     dragWithClip: true,\n * });\n * moveable.on(\"clipStart\", e => {\n *     console.log(e);\n * }).on(\"clip\", e => {\n *     if (e.clipType === \"rect\") {\n *         e.target.style.clip = e.clipStyle;\n *     } else {\n *         e.target.style.clipPath = e.clipStyle;\n *     }\n * }).on(\"clipEnd\", e => {\n *     console.log(e);\n * });\n */\n/**\n * When drag the clip area or controls, the `clip` event is called.\n * @memberof Moveable.Clippable\n * @event clip\n * @param {Moveable.Clippable.OnClip} - Parameters for the `clip` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     clippable: true,\n *     defaultClipPath: \"inset\",\n *     customClipPath: \"\",\n *     clipRelative: false,\n *     clipArea: false,\n *     dragWithClip: true,\n * });\n * moveable.on(\"clipStart\", e => {\n *     console.log(e);\n * }).on(\"clip\", e => {\n *     if (e.clipType === \"rect\") {\n *         e.target.style.clip = e.clipStyle;\n *     } else {\n *         e.target.style.clipPath = e.clipStyle;\n *     }\n * }).on(\"clipEnd\", e => {\n *     console.log(e);\n * });\n */\n/**\n * When drag end the clip area or controls, the `clipEnd` event is called.\n * @memberof Moveable.Clippable\n * @event clipEnd\n * @param {Moveable.Clippable.OnClipEnd} - Parameters for the `clipEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     clippable: true,\n *     defaultClipPath: \"inset\",\n *     customClipPath: \"\",\n *     clipRelative: false,\n *     clipArea: false,\n *     dragWithClip: true,\n * });\n * moveable.on(\"clipStart\", e => {\n *     console.log(e);\n * }).on(\"clip\", e => {\n *     if (e.clipType === \"rect\") {\n *         e.target.style.clip = e.clipStyle;\n *     } else {\n *         e.target.style.clipPath = e.clipStyle;\n *     }\n * }).on(\"clipEnd\", e => {\n *     console.log(e);\n * });\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Default.ts",
    "content": "export default {\n    name: \"\",\n    props: [\n        \"target\",\n        \"dragTargetSelf\",\n        \"dragTarget\",\n        \"dragContainer\",\n        \"container\",\n        \"warpSelf\",\n        \"rootContainer\",\n        \"useResizeObserver\",\n        \"useMutationObserver\",\n        \"zoom\",\n        \"dragFocusedInput\",\n        \"transformOrigin\",\n        \"ables\",\n        \"className\",\n        \"pinchThreshold\",\n        \"pinchOutside\",\n        \"triggerAblesSimultaneously\",\n        \"checkInput\",\n        \"cspNonce\",\n        \"translateZ\",\n        \"hideDefaultLines\",\n        \"props\",\n        \"flushSync\",\n        \"stopPropagation\",\n        \"preventClickEventOnDrag\",\n        \"preventClickDefault\",\n        \"viewContainer\",\n        \"persistData\",\n        \"useAccuratePosition\",\n        \"firstRenderState\",\n        \"linePadding\",\n        \"controlPadding\",\n        \"preventDefault\",\n        \"preventRightClick\",\n        \"preventWheelClick\",\n        \"requestStyles\",\n    ] as const,\n    events: [\n        \"changeTargets\",\n    ] as const,\n};\n"
  },
  {
    "path": "packages/react-moveable/src/ables/DragArea.tsx",
    "content": "import {\n    createWarpMatrix,\n} from \"@scena/matrix\";\nimport { ref } from \"framework-utils\";\nimport { getRect, calculateInversePosition, makeMatrixCSS, prefix } from \"../utils\";\nimport {\n    Renderer, GroupableProps, DragAreaProps, MoveableManagerInterface, MoveableGroupInterface,\n} from \"../types\";\nimport { AREA_PIECE, AVOID, AREA_PIECES } from \"../classNames\";\nimport { addClass, removeClass, requestAnimationFrame } from \"@daybrush/utils\";\n\nfunction restoreStyle(moveable: MoveableManagerInterface) {\n    const el = moveable.areaElement;\n\n    if (!el) {\n        return;\n    }\n    const { width, height } = moveable.state;\n\n    removeClass(el, AVOID);\n\n    el.style.cssText += `left: 0px; top: 0px; width: ${width}px; height: ${height}px`;\n}\n\nfunction renderPieces(React: Renderer): any {\n    return (<div key=\"area_pieces\" className={AREA_PIECES}>\n        <div className={AREA_PIECE}></div>\n        <div className={AREA_PIECE}></div>\n        <div className={AREA_PIECE}></div>\n        <div className={AREA_PIECE}></div>\n    </div>);\n}\nexport default {\n    name: \"dragArea\",\n    props: [\n        \"dragArea\",\n        \"passDragArea\",\n    ] as const,\n    events: [\n        \"click\",\n        \"clickGroup\",\n    ] as const,\n    render(moveable: MoveableManagerInterface<GroupableProps>, React: Renderer): any[] {\n        const { target, dragArea, groupable, passDragArea } = moveable.props;\n        const { width, height, renderPoses } = moveable.getState();\n\n        const className = passDragArea ? prefix(\"area\", \"pass\") : prefix(\"area\");\n        if (groupable) {\n            return [\n                <div key=\"area\" ref={ref(moveable, \"areaElement\")} className={className}></div>,\n                renderPieces(React),\n            ];\n        }\n        if (!target || !dragArea) {\n            return [];\n        }\n        const h = createWarpMatrix(\n            [0, 0],\n            [width, 0],\n            [0, height],\n            [width, height],\n            renderPoses[0],\n            renderPoses[1],\n            renderPoses[2],\n            renderPoses[3],\n        );\n        const transform = h.length ? makeMatrixCSS(h, true) : \"none\";\n\n        return [\n            <div key=\"area\" ref={ref(moveable, \"areaElement\")} className={className} style={{\n                top: \"0px\",\n                left: \"0px\",\n                width: `${width}px`,\n                height: `${height}px`,\n                transformOrigin: \"0 0\",\n                transform,\n            }}></div>,\n            renderPieces(React),\n        ];\n    },\n    dragStart(moveable: MoveableManagerInterface, { datas, clientX, clientY, inputEvent }: any) {\n        if (!inputEvent) {\n            return false;\n        }\n        datas.isDragArea = false;\n        const areaElement = moveable.areaElement;\n        const state = moveable.state;\n        const {\n            moveableClientRect,\n            renderPoses,\n            rootMatrix,\n            is3d,\n        } = state;\n        const { left, top } = moveableClientRect;\n        const {\n            left: relativeLeft,\n            top: relativeTop,\n            width,\n            height,\n        } = getRect(renderPoses);\n        const n = is3d ? 4 : 3;\n        let [posX, posY] = calculateInversePosition(rootMatrix, [clientX - left, clientY - top], n);\n\n        posX -= relativeLeft;\n        posY -= relativeTop;\n        const rects = [\n            { left: relativeLeft, top: relativeTop, width, height: posY - 10 },\n            { left: relativeLeft, top: relativeTop, width: posX - 10, height },\n            { left: relativeLeft, top: relativeTop + posY + 10, width, height: height - posY - 10 },\n            { left: relativeLeft + posX + 10, top: relativeTop, width: width - posX - 10, height },\n        ];\n\n        const children = [].slice.call(areaElement.nextElementSibling!.children) as HTMLElement[];\n        rects.forEach((rect, i) => {\n            children[i].style.cssText\n                = `left: ${rect.left}px;top: ${rect.top}px; width: ${rect.width}px; height: ${rect.height}px;`;\n        });\n        addClass(areaElement, AVOID);\n        state.disableNativeEvent = true;\n        return;\n    },\n    drag(moveable: MoveableManagerInterface, { datas, inputEvent }: any) {\n        this.enableNativeEvent(moveable);\n        if (!inputEvent) {\n            return false;\n        }\n        if (!datas.isDragArea) {\n            datas.isDragArea = true;\n            restoreStyle(moveable);\n        }\n    },\n    dragEnd(moveable: MoveableManagerInterface<DragAreaProps>, e: any) {\n        this.enableNativeEvent(moveable);\n        const { inputEvent, datas } = e;\n        if (!inputEvent) {\n            return false;\n        }\n        if (!datas.isDragArea) {\n            restoreStyle(moveable);\n        }\n    },\n    dragGroupStart(moveable: MoveableGroupInterface, e: any) {\n        return this.dragStart(moveable, e);\n    },\n    dragGroup(moveable: MoveableGroupInterface, e: any) {\n        return this.drag(moveable, e);\n    },\n    dragGroupEnd(\n        moveable: MoveableGroupInterface<DragAreaProps>,\n        e: any,\n    ) {\n        return this.dragEnd(moveable, e);\n    },\n    unset(moveable: MoveableManagerInterface<DragAreaProps>) {\n        restoreStyle(moveable);\n        moveable.state.disableNativeEvent = false;\n    },\n    enableNativeEvent(moveable: MoveableManagerInterface<DragAreaProps>) {\n        const state = moveable.state;\n        if (state.disableNativeEvent) {\n            requestAnimationFrame(() => {\n                state.disableNativeEvent = false;\n            });\n        }\n    },\n};\n\n/**\n * Add an event to the moveable area instead of the target for stopPropagation. (default: false, true in group)\n * @name Moveable#dragArea\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *  dragArea: false,\n * });\n */\n/**\n * Set `pointerEvents: none;` css to pass events in dragArea. (default: false)\n * @name Moveable#passDragArea\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *  dragArea: false,\n * });\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Draggable.tsx",
    "content": "import {\n    setDragStart, getBeforeDragDist, getTransformDist,\n    convertTransformFormat, resolveTransformEvent, fillTransformStartEvent,\n    setDefaultTransformIndex, fillOriginalTransform,\n} from \"../gesto/GestoUtils\";\nimport {\n    triggerEvent, fillParams,\n    getDistSize, prefix,\n    fillEndParams,\n    fillCSSObject,\n} from \"../utils\";\nimport { minus, plus } from \"@scena/matrix\";\nimport {\n    DraggableProps, OnDrag, OnDragGroup,\n    OnDragGroupStart, OnDragStart, OnDragEnd, DraggableState,\n    Renderer, OnDragGroupEnd, MoveableManagerInterface, MoveableGroupInterface,\n} from \"../types\";\nimport { triggerChildGesto } from \"../groupUtils\";\nimport { startCheckSnapDrag } from \"./Snappable\";\nimport { getRad, throttle, throttleArray } from \"@daybrush/utils\";\nimport { checkSnapBoundsDrag } from \"./snappable/snapBounds\";\nimport { TINY_NUM } from \"../consts\";\n\n/**\n * @namespace Draggable\n * @memberof Moveable\n * @description Draggable refers to the ability to drag and move targets.\n */\nexport default {\n    name: \"draggable\",\n    props: [\n        \"draggable\",\n        \"throttleDrag\",\n        \"throttleDragRotate\",\n        \"hideThrottleDragRotateLine\",\n        \"startDragRotate\",\n        \"edgeDraggable\",\n    ] as const,\n    events: [\n        \"dragStart\",\n        \"drag\",\n        \"dragEnd\",\n        \"dragGroupStart\",\n        \"dragGroup\",\n        \"dragGroupEnd\",\n    ] as const,\n    requestStyle(): string[] {\n        return [\"left\", \"top\", \"right\", \"bottom\"];\n    },\n    requestChildStyle(): string[] {\n        return [\"left\", \"top\", \"right\", \"bottom\"];\n    },\n    render(\n        moveable: MoveableManagerInterface<DraggableProps, DraggableState>,\n        React: Renderer,\n    ): any[] {\n        const { hideThrottleDragRotateLine, throttleDragRotate, zoom } = moveable.props;\n        const { dragInfo, beforeOrigin } = moveable.getState();\n\n        if (hideThrottleDragRotateLine || !throttleDragRotate || !dragInfo) {\n            return [];\n        }\n        const dist = dragInfo.dist;\n\n        if (!dist[0] && !dist[1]) {\n            return [];\n        }\n\n        const width = getDistSize(dist);\n        const rad = getRad(dist, [0, 0]);\n\n        return [<div className={prefix(\n            \"line\",\n            \"horizontal\",\n            \"dragline\",\n            \"dashed\",\n        )} key={`dragRotateGuideline`} style={{\n            width: `${width}px`,\n            transform: `translate(${beforeOrigin[0]}px, ${beforeOrigin[1]}px) rotate(${rad}rad) scaleY(${zoom})`,\n        }} />];\n    },\n    dragStart(\n        moveable: MoveableManagerInterface<DraggableProps, any>,\n        e: any,\n    ) {\n        const { datas, parentEvent, parentGesto } = e;\n        const state = moveable.state;\n        const {\n            gestos,\n            style,\n        } = state;\n\n        if (gestos.draggable) {\n            return false;\n        }\n        gestos.draggable = parentGesto || moveable.targetGesto;\n\n        datas.datas = {};\n        datas.left = parseFloat(style.left || \"\") || 0;\n        datas.top = parseFloat(style.top || \"\") || 0;\n        datas.bottom = parseFloat(style.bottom || \"\") || 0;\n        datas.right = parseFloat(style.right || \"\") || 0;\n        datas.startValue = [0, 0];\n\n        setDragStart(moveable, e);\n        setDefaultTransformIndex(moveable, e, \"translate\");\n        startCheckSnapDrag(moveable, datas);\n\n        datas.prevDist = [0, 0];\n        datas.prevBeforeDist = [0, 0];\n        datas.isDrag = false;\n        datas.deltaOffset = [0, 0];\n\n        const params = fillParams<OnDragStart>(moveable, e, {\n            set: (translate: number[]) => {\n                datas.startValue = translate;\n            },\n            ...fillTransformStartEvent(moveable, e),\n        });\n        const result = parentEvent || triggerEvent(moveable, \"onDragStart\", params);\n\n        if (result !== false) {\n            datas.isDrag = true;\n            moveable.state.dragInfo = {\n                startRect: moveable.getRect(),\n                dist: [0, 0],\n            };\n        } else {\n            gestos.draggable = null;\n            datas.isPinch = false;\n        }\n        return datas.isDrag ? params : false;\n    },\n    drag(\n        moveable: MoveableManagerInterface<DraggableProps, any>,\n        e: any,\n    ): OnDrag | undefined {\n        if (!e) {\n            return;\n        }\n        resolveTransformEvent(moveable, e, \"translate\");\n\n        const {\n            datas, parentEvent,\n            parentFlag, isPinch, deltaOffset,\n            useSnap,\n            isRequest,\n            isGroup,\n            parentThrottleDrag,\n        } = e;\n        let { distX, distY } = e;\n        const { isDrag, prevDist, prevBeforeDist, startValue } = datas;\n\n        if (!isDrag) {\n            return;\n        }\n\n        if (deltaOffset) {\n            distX += deltaOffset[0];\n            distY += deltaOffset[1];\n        }\n        const props = moveable.props;\n\n        const parentMoveable = props.parentMoveable;\n        const throttleDrag = isGroup ? 0 : (props.throttleDrag || parentThrottleDrag || 0);\n        const throttleDragRotate = parentEvent ? 0 : (props.throttleDragRotate || 0);\n\n        let dragRotateRad = 0;\n        let isVerticalSnap = false;\n        let isVerticalBound = false;\n        let isHorizontalSnap = false;\n        let isHorizontalBound = false;\n\n        if (!parentEvent && throttleDragRotate > 0 && (distX || distY)) {\n            const startDragRotate = props.startDragRotate || 0;\n            const deg\n                = throttle(startDragRotate + getRad([0, 0], [distX, distY]) * 180 / Math.PI, throttleDragRotate)\n                - startDragRotate;\n            const ry = distY * Math.abs(Math.cos((deg - 90) / 180 * Math.PI));\n            const rx = distX * Math.abs(Math.cos(deg / 180 * Math.PI));\n            const r = getDistSize([rx, ry]);\n            dragRotateRad = deg * Math.PI / 180;\n\n            distX = r * Math.cos(dragRotateRad);\n            distY = r * Math.sin(dragRotateRad);\n        }\n\n        if (!isPinch && !parentEvent && !parentFlag) {\n            const [verticalInfo, horizontalInfo] = checkSnapBoundsDrag(\n                moveable, distX, distY,\n                throttleDragRotate,\n                (!useSnap && isRequest) || deltaOffset,\n                datas,\n            );\n            isVerticalSnap = verticalInfo.isSnap;\n            isVerticalBound = verticalInfo.isBound;\n            isHorizontalSnap = horizontalInfo.isSnap;\n            isHorizontalBound = horizontalInfo.isBound;\n\n            const verticalOffset = verticalInfo.offset;\n            const horizontalOffset = horizontalInfo.offset;\n\n            distX += verticalOffset;\n            distY += horizontalOffset;\n        }\n\n        const beforeTranslate = plus(getBeforeDragDist({ datas, distX, distY }), startValue);\n        const translate = plus(getTransformDist({ datas, distX, distY }), startValue);\n\n        throttleArray(translate, TINY_NUM);\n        throttleArray(beforeTranslate, TINY_NUM);\n\n        if (!throttleDragRotate) {\n            if (!isVerticalSnap && !isVerticalBound) {\n                translate[0] = throttle(translate[0], throttleDrag);\n                beforeTranslate[0] = throttle(beforeTranslate[0], throttleDrag);\n            }\n            if (!isHorizontalSnap && !isHorizontalBound) {\n                translate[1] = throttle(translate[1], throttleDrag);\n                beforeTranslate[1] = throttle(beforeTranslate[1], throttleDrag);\n            }\n        }\n\n\n        const beforeDist = minus(beforeTranslate, startValue);\n        const dist = minus(translate, startValue);\n        const delta = minus(dist, prevDist);\n        const beforeDelta = minus(beforeDist, prevBeforeDist);\n\n        datas.prevDist = dist;\n        datas.prevBeforeDist = beforeDist;\n\n\n        datas.passDelta = delta; //distX - (datas.passDistX || 0);\n        // datas.passDeltaY = distY - (datas.passDistY || 0);\n        datas.passDist = dist; //distX;\n        // datas.passDistY = distY;\n\n        const left = datas.left + beforeDist[0];\n        const top = datas.top + beforeDist[1];\n        const right = datas.right - beforeDist[0];\n        const bottom = datas.bottom - beforeDist[1];\n        const nextTransform = convertTransformFormat(datas,\n            `translate(${translate[0]}px, ${translate[1]}px)`, `translate(${dist[0]}px, ${dist[1]}px)`);\n\n        fillOriginalTransform(e, nextTransform);\n\n        moveable.state.dragInfo.dist = parentEvent ? [0, 0] : dist;\n        if (!parentEvent && !parentMoveable && delta.every(num => !num) && beforeDelta.some(num => !num)) {\n            return;\n        }\n\n        const {\n            width,\n            height,\n        } = moveable.state;\n        const params = fillParams<OnDrag>(moveable, e, {\n            transform: nextTransform,\n            dist,\n            delta,\n            translate,\n            beforeDist,\n            beforeDelta,\n            beforeTranslate,\n            left,\n            top,\n            right,\n            bottom,\n            width,\n            height,\n            isPinch,\n            ...fillCSSObject({\n                transform: nextTransform,\n            }, e),\n        });\n\n        !parentEvent && triggerEvent(moveable, \"onDrag\", params);\n        return params;\n    },\n    dragAfter(\n        moveable: MoveableManagerInterface<DraggableProps, DraggableState>,\n        e: any,\n    ) {\n        const datas = e.datas;\n        const {\n            deltaOffset,\n        } = datas;\n\n        if (deltaOffset[0] || deltaOffset[1]) {\n            datas.deltaOffset = [0, 0];\n            return this.drag(moveable, {...e, deltaOffset });\n        }\n        return false;\n    },\n    dragEnd(\n        moveable: MoveableManagerInterface<DraggableProps, DraggableState>,\n        e: any,\n    ) {\n        const { parentEvent, datas } = e;\n\n        moveable.state.dragInfo = null;\n        if (!datas.isDrag) {\n            return;\n        }\n        datas.isDrag = false;\n        const param = fillEndParams<OnDragEnd>(moveable, e, {});\n        !parentEvent && triggerEvent(moveable, \"onDragEnd\", param);\n        return param;\n    },\n    dragGroupStart(moveable: MoveableGroupInterface<any, any>, e: any) {\n        const { datas, clientX, clientY } = e;\n\n        const params = this.dragStart(moveable, e);\n\n        if (!params) {\n            return false;\n        }\n        const {\n            childEvents,\n            eventParams,\n        } = triggerChildGesto(moveable, this, \"dragStart\", [\n            clientX || 0,\n            clientY || 0,\n        ], e, false, \"draggable\");\n\n        const nextParams: OnDragGroupStart = {\n            ...params,\n            targets: moveable.props.targets!,\n            events: eventParams,\n        };\n        const result = triggerEvent(moveable, \"onDragGroupStart\", nextParams);\n\n        datas.isDrag = result !== false;\n\n\n        // find data.startValue and based on first child moveable\n        const startValue = childEvents[0]?.datas.startValue ?? [0, 0];\n\n\n        datas.throttleOffset = [startValue[0] % 1, startValue[1] % 1];\n\n        return datas.isDrag ? params : false;\n    },\n    dragGroup(moveable: MoveableGroupInterface<any, any>, e: any) {\n        const { datas } = e;\n\n        if (!datas.isDrag) {\n            return;\n        }\n        const params = this.drag(moveable, {\n            ...e,\n            parentThrottleDrag: moveable.props.throttleDrag,\n        });\n        const { passDelta } = e.datas;\n        const {\n            eventParams,\n        } = triggerChildGesto(moveable, this, \"drag\", passDelta, e, false, \"draggable\");\n\n        if (!params) {\n            return;\n        }\n\n        const nextParams: OnDragGroup = {\n            targets: moveable.props.targets!,\n            events: eventParams,\n            ...params,\n        };\n\n        triggerEvent(moveable, \"onDragGroup\", nextParams);\n        return nextParams;\n    },\n    dragGroupEnd(moveable: MoveableGroupInterface<any, any>, e: any) {\n        const { isDrag, datas } = e;\n\n        if (!datas.isDrag) {\n            return;\n        }\n        this.dragEnd(moveable, e);\n        const {\n            eventParams,\n        } = triggerChildGesto(moveable, this, \"dragEnd\", [0, 0], e, false, \"draggable\");\n        triggerEvent(moveable, \"onDragGroupEnd\", fillEndParams<OnDragGroupEnd>(moveable, e, {\n            targets: moveable.props.targets!,\n            events: eventParams,\n        }));\n\n        return isDrag;\n    },\n    /**\n     * @method Moveable.Draggable#request\n     * @param {object} [e] - the draggable's request parameter\n     * @param {number} [e.x] - x position\n     * @param {number} [e.y] - y position\n     * @param {number} [e.deltaX] - X number to move\n     * @param {number} [e.deltaY] - Y number to move\n     * @return {Moveable.Requester} Moveable Requester\n     * @example\n\n     * // Instantly Request (requestStart - request - requestEnd)\n     * // Use Relative Value\n     * moveable.request(\"draggable\", { deltaX: 10, deltaY: 10 }, true);\n     * // Use Absolute Value\n     * moveable.request(\"draggable\", { x: 200, y: 100 }, true);\n     *\n     * // requestStart\n     * const requester = moveable.request(\"draggable\");\n     *\n     * // request\n     * // Use Relative Value\n     * requester.request({ deltaX: 10, deltaY: 10 });\n     * requester.request({ deltaX: 10, deltaY: 10 });\n     * requester.request({ deltaX: 10, deltaY: 10 });\n     * // Use Absolute Value\n     * moveable.request(\"draggable\", { x: 200, y: 100 });\n     * moveable.request(\"draggable\", { x: 220, y: 100 });\n     * moveable.request(\"draggable\", { x: 240, y: 100 });\n     *\n     * // requestEnd\n     * requester.requestEnd();\n     */\n    request(moveable: MoveableManagerInterface<any, any>) {\n        const datas = {};\n        const rect = moveable.getRect();\n        let distX = 0;\n        let distY = 0;\n        let useSnap = false;\n\n        return {\n            isControl: false,\n            requestStart(e: Record<string, any>) {\n                useSnap = e.useSnap;\n                return { datas, useSnap };\n            },\n            request(e: Record<string, any>) {\n                if (\"x\" in e) {\n                    distX = e.x - rect.left;\n                } else if (\"deltaX\" in e) {\n                    distX += e.deltaX;\n                }\n                if (\"y\" in e) {\n                    distY = e.y - rect.top;\n                } else if (\"deltaY\" in e) {\n                    distY += e.deltaY;\n                }\n\n                return { datas, distX, distY, useSnap };\n            },\n            requestEnd() {\n                return { datas, isDrag: true, useSnap };\n            },\n        };\n    },\n    unset(moveable: MoveableManagerInterface<any, Record<string, any>>) {\n        moveable.state.gestos.draggable = null;\n        moveable.state.dragInfo = null;\n    },\n};\n\n/**\n * Whether or not target can be dragged. (default: false)\n * @name Moveable.Draggable#draggable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.draggable = true;\n */\n\n/**\n * throttle of x, y when drag.\n * @name Moveable.Draggable#throttleDrag\n * @default 0\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleDrag = 1;\n */\n\n/**\n* throttle of angle of x, y when drag.\n* @name Moveable.Draggable#throttleDragRotate\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body);\n*\n* moveable.throttleDragRotate = 45;\n*/\n\n/**\n* start angle of throttleDragRotate of x, y when drag.\n* @name Moveable.Draggable#startDragRotate\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body);\n*\n* // 45, 135, 225, 315\n* moveable.throttleDragRotate = 90;\n* moveable.startDragRotate = 45;\n*/\n\n/**\n * When the drag starts, the dragStart event is called.\n * @memberof Moveable.Draggable\n * @event dragStart\n * @param {Moveable.Draggable.OnDragStart} - Parameters for the dragStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"dragStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When dragging, the drag event is called.\n * @memberof Moveable.Draggable\n * @event drag\n * @param {Moveable.Draggable.OnDrag} - Parameters for the drag event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"drag\", ({ target, transform }) => {\n *     target.style.transform = transform;\n * });\n */\n/**\n * When the drag finishes, the dragEnd event is called.\n * @memberof Moveable.Draggable\n * @event dragEnd\n * @param {Moveable.Draggable.OnDragEnd} - Parameters for the dragEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"dragEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n\n/**\n* When the group drag starts, the `dragGroupStart` event is called.\n* @memberof Moveable.Draggable\n* @event dragGroupStart\n* @param {Moveable.Draggable.OnDragGroupStart} - Parameters for the `dragGroupStart` event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     target: [].slice.call(document.querySelectorAll(\".target\")),\n*     draggable: true\n* });\n* moveable.on(\"dragGroupStart\", ({ targets }) => {\n*     console.log(\"onDragGroupStart\", targets);\n* });\n*/\n\n/**\n* When the group drag, the `dragGroup` event is called.\n* @memberof Moveable.Draggable\n* @event dragGroup\n* @param {Moveable.Draggable.OnDragGroup} - Parameters for the `dragGroup` event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     target: [].slice.call(document.querySelectorAll(\".target\")),\n*     draggable: true\n* });\n* moveable.on(\"dragGroup\", ({ targets, events }) => {\n*     console.log(\"onDragGroup\", targets);\n*     events.forEach(ev => {\n*          // drag event\n*          console.log(\"onDrag left, top\", ev.left, ev.top);\n*          // ev.target!.style.left = `${ev.left}px`;\n*          // ev.target!.style.top = `${ev.top}px`;\n*          console.log(\"onDrag translate\", ev.dist);\n*          ev.target!.style.transform = ev.transform;)\n*     });\n* });\n*/\n\n/**\n * When the group drag finishes, the `dragGroupEnd` event is called.\n * @memberof Moveable.Draggable\n * @event dragGroupEnd\n * @param {Moveable.Draggable.OnDragGroupEnd} - Parameters for the `dragGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     draggable: true\n * });\n * moveable.on(\"dragGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onDragGroupEnd\", targets, isDrag);\n * });\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Groupable.tsx",
    "content": "import { minus } from \"@scena/matrix\";\nimport { refs } from \"framework-utils\";\nimport MoveableManager from \"../MoveableManager\";\nimport { renderLine } from \"../renderDirections\";\nimport { Renderer, MoveableGroupInterface, GroupableProps } from \"../types\";\nimport { flat, watchValue } from \"../utils\";\n\n\n\nexport default {\n    name: \"groupable\",\n    props: [\n        \"defaultGroupRotate\",\n        \"useDefaultGroupRotate\",\n        \"defaultGroupOrigin\",\n        \"groupable\",\n        \"groupableProps\",\n        \"targetGroups\",\n        \"hideChildMoveableDefaultLines\",\n    ] as const,\n    events: [] as const,\n    render(moveable: MoveableGroupInterface<GroupableProps>, React: Renderer): any[] {\n        const props = moveable.props;\n        let targets: Array<HTMLElement | SVGElement | undefined | null> = props.targets || [];\n\n        const { left, top, isPersisted } = moveable.getState();\n        const zoom = props.zoom || 1;\n        const renderGroupRects = moveable.renderGroupRects;\n        let persistDatChildren = props.persistData?.children || [];\n\n        if (isPersisted) {\n            targets = persistDatChildren.map(() => null);\n        } else {\n            persistDatChildren = [];\n        }\n        const parentPosition = watchValue(\n            moveable,\n            \"parentPosition\",\n            [left, top],\n            styles => styles.join(\",\"),\n        );\n        const requestStyles = watchValue(\n            moveable,\n            \"requestStyles\",\n            moveable.getRequestChildStyles(),\n            styles => styles.join(\",\"),\n        );\n\n        moveable.moveables = moveable.moveables.slice(0, targets.length);\n        return [\n            ...targets.map((target, i) => {\n                return <MoveableManager<GroupableProps>\n                    key={\"moveable\" + i}\n                    ref={refs(moveable, \"moveables\", i)}\n                    target={target}\n                    origin={false}\n                    requestStyles={requestStyles}\n                    cssStyled={props.cssStyled}\n                    customStyledMap={props.customStyledMap}\n                    useResizeObserver={props.useResizeObserver}\n                    useMutationObserver={props.useMutationObserver}\n                    hideChildMoveableDefaultLines={props.hideChildMoveableDefaultLines}\n                    parentMoveable={moveable}\n                    parentPosition={[left, top]}\n                    persistData={persistDatChildren[i]}\n                    zoom={zoom}\n                />;\n            }),\n            ...flat(renderGroupRects.map(({ pos1, pos2, pos3, pos4 }, i) => {\n                const poses = [pos1, pos2, pos3, pos4];\n\n                return [\n                    [0, 1],\n                    [1, 3],\n                    [3, 2],\n                    [2, 0],\n                ].map(([from, to], j) => {\n                    return renderLine(\n                        React,\n                        \"\",\n                        minus(poses[from], parentPosition),\n                        minus(poses[to], parentPosition),\n                        zoom,\n                        `group-rect-${i}-${j}`,\n                    );\n                });\n            })),\n        ];\n    },\n};\n"
  },
  {
    "path": "packages/react-moveable/src/ables/IndividualGroupable.tsx",
    "content": "export default {\n    name: \"individualGroupable\",\n    props: [\n        \"individualGroupable\",\n        \"individualGroupableProps\",\n    ] as const,\n    events: [] as const,\n} as const;\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Origin.tsx",
    "content": "import { prefix, getControlTransform, calculatePosition, convertTransformOriginArray } from \"../utils\";\nimport { Renderer, OriginOptions, MoveableManagerInterface } from \"../types\";\nimport { makeAble } from \"./AbleManager\";\nimport { minus } from \"@scena/matrix\";\n\nexport default makeAble(\"origin\", {\n    props: [\"origin\", \"svgOrigin\"] as const,\n    render(moveable: MoveableManagerInterface<OriginOptions>, React: Renderer): any[] {\n        const { zoom, svgOrigin, groupable } = moveable.props;\n        const {\n            beforeOrigin, rotation, svg, allMatrix, is3d,\n            left, top, offsetWidth, offsetHeight,\n        } = moveable.getState();\n\n        let originStyle!: Record<string, any>;\n\n        if (!groupable && svg && svgOrigin) {\n            const [originX, originY] = convertTransformOriginArray(svgOrigin, offsetWidth, offsetHeight);\n            const n = is3d ? 4 : 3;\n            const result = calculatePosition(\n                allMatrix,\n                [originX, originY],\n                n,\n            );\n            originStyle = getControlTransform(rotation, zoom!, minus(result, [left, top]));\n        } else {\n            originStyle = getControlTransform(rotation, zoom!, beforeOrigin);\n        }\n        return [\n            <div className={prefix(\"control\", \"origin\")} style={originStyle} key=\"beforeOrigin\"></div>,\n        ];\n    },\n});\n\n/**\n * Whether or not the origin controlbox will be visible or not (default: true)\n * @name Moveable#origin\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.origin = true;\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/OriginDraggable.tsx",
    "content": "import {\n    prefix, triggerEvent,\n    fillParams, calculatePoses, getRect, fillEndParams, convertCSSSize, fillCSSObject,\n} from \"../utils\";\nimport {\n    OnDragOriginStart, OnDragOrigin,\n    OnDragOriginEnd, MoveableManagerInterface, DraggableProps, OriginDraggableProps, MoveableGroupInterface,\n} from \"../types\";\nimport { hasClass, IObject } from \"@daybrush/utils\";\nimport { setDragStart, getDragDist, getNextMatrix } from \"../gesto/GestoUtils\";\nimport { minus, plus } from \"@scena/matrix\";\nimport Draggable from \"./Draggable\";\nimport CustomGesto, { setCustomDrag } from \"../gesto/CustomGesto\";\n\n/**\n * @namespace OriginDraggable\n * @memberof Moveable\n * @description Whether to drag origin (default: false)\n */\nexport default {\n    name: \"originDraggable\",\n    props: [\n        \"originDraggable\",\n        \"originRelative\",\n    ] as const,\n    events: [\n        \"dragOriginStart\",\n        \"dragOrigin\",\n        \"dragOriginEnd\",\n    ] as const,\n    css: [\n        `:host[data-able-origindraggable] .control.origin {\npointer-events: auto;\n}`,\n    ],\n    dragControlCondition(_: any, e: any) {\n        if (e.isRequest) {\n            return e.requestAble === \"originDraggable\";\n        }\n        return hasClass(e.inputEvent.target, prefix(\"origin\"));\n    },\n    dragControlStart(moveable: MoveableManagerInterface<OriginDraggableProps & DraggableProps>, e: any) {\n        const { datas } = e;\n\n        setDragStart(moveable, e);\n\n        const params = fillParams<OnDragOriginStart>(moveable, e, {\n            dragStart: Draggable.dragStart(\n                moveable,\n                new CustomGesto().dragStart([0, 0], e),\n            ),\n        });\n        const result = triggerEvent(moveable, \"onDragOriginStart\", params);\n\n        datas.startOrigin = moveable.state.transformOrigin;\n        datas.startTargetOrigin = moveable.state.targetOrigin;\n        datas.prevOrigin = [0, 0];\n        datas.isDragOrigin = true;\n\n        if (result === false) {\n            datas.isDragOrigin = false;\n            return false;\n        }\n\n        return params;\n    },\n    dragControl(moveable: MoveableManagerInterface<OriginDraggableProps & DraggableProps>, e: any) {\n        const { datas, isPinch, isRequest } = e;\n\n        if (!datas.isDragOrigin) {\n            return false;\n        }\n        const [distX, distY] = getDragDist(e);\n        const state = moveable.state;\n        const {\n            width,\n            height,\n            offsetMatrix,\n            targetMatrix,\n            is3d,\n        } = state;\n        const {\n            originRelative = true,\n        } = moveable.props;\n        const n = is3d ? 4 : 3;\n        let dist = [distX, distY];\n\n        if (isRequest) {\n            const distOrigin = e.distOrigin;\n            if (distOrigin[0] || distOrigin[1]) {\n                dist = distOrigin;\n            }\n        }\n        const origin = plus(datas.startOrigin, dist);\n        const targetOrigin = plus(datas.startTargetOrigin, dist);\n        const delta = minus(dist, datas.prevOrigin);\n\n        const nextMatrix = getNextMatrix(\n            offsetMatrix,\n            targetMatrix,\n            origin,\n            n,\n        );\n\n        const rect = moveable.getRect();\n        const nextRect = getRect(calculatePoses(nextMatrix, width, height, n));\n\n        const dragDelta = [\n            rect.left - nextRect.left,\n            rect.top - nextRect.top,\n        ];\n\n        datas.prevOrigin = dist;\n        const transformOrigin = [\n            convertCSSSize(targetOrigin[0], width, originRelative),\n            convertCSSSize(targetOrigin[1], height, originRelative),\n        ].join(\" \");\n        const result = Draggable.drag(\n            moveable,\n            setCustomDrag(e, moveable.state, dragDelta, !!isPinch, false),\n        )!;\n        const params = fillParams<OnDragOrigin>(moveable, e, {\n            width,\n            height,\n            origin,\n            dist,\n            delta,\n            transformOrigin,\n            drag: result,\n            ...fillCSSObject({\n                transformOrigin,\n                transform: result.transform,\n            }, e),\n            afterTransform: result.transform,\n        });\n        triggerEvent(moveable, \"onDragOrigin\", params);\n        return params;\n    },\n    dragControlEnd(moveable: MoveableManagerInterface<OriginDraggableProps>, e: any) {\n        const { datas } = e;\n\n        if (!datas.isDragOrigin) {\n            return false;\n        }\n        triggerEvent(moveable, \"onDragOriginEnd\",\n            fillEndParams<OnDragOriginEnd>(moveable, e, {}));\n        return true;\n    },\n    dragGroupControlCondition(moveable: any, e: any) {\n        return this.dragControlCondition(moveable, e);\n    },\n    dragGroupControlStart(moveable: MoveableGroupInterface<OriginDraggableProps>, e: any) {\n        const params = this.dragControlStart(moveable, e);\n\n        if (!params) {\n            return false;\n        }\n\n        return true;\n    },\n    dragGroupControl(moveable: MoveableGroupInterface<OriginDraggableProps>, e: any) {\n        const params = this.dragControl(moveable, e);\n\n        if (!params) {\n            return false;\n        }\n        moveable.transformOrigin = params.transformOrigin;\n\n        return true;\n    },\n    /**\n    * @method Moveable.OriginDraggable#request\n    * @param {object} e - the OriginDraggable's request parameter\n    * @param {number} [e.x] - x position\n    * @param {number} [e.y] - y position\n    * @param {number} [e.deltaX] - x number to move\n    * @param {number} [e.deltaY] - y number to move\n    * @param {array} [e.deltaOrigin] - left, top number to move transform-origin\n    * @param {array} [e.origin] - transform-origin position\n    * @param {number} [e.isInstant] - Whether to execute the request instantly\n    * @return {Moveable.Requester} Moveable Requester\n    * @example\n\n    * // Instantly Request (requestStart - request - requestEnd)\n    * // Use Relative Value\n    * moveable.request(\"originDraggable\", { deltaX: 10, deltaY: 10 }, true);\n    * // Use Absolute Value\n    * moveable.request(\"originDraggable\", { x: 200, y: 100 }, true);\n    * // Use Transform Value\n    * moveable.request(\"originDraggable\", { deltaOrigin: [10, 0] }, true);\n    * moveable.request(\"originDraggable\", { origin: [100, 0] }, true);\n    * // requestStart\n    * const requester = moveable.request(\"originDraggable\");\n    *\n    * // request\n    * // Use Relative Value\n    * requester.request({ deltaX: 10, deltaY: 10 });\n    * requester.request({ deltaX: 10, deltaY: 10 });\n    * requester.request({ deltaX: 10, deltaY: 10 });\n    * // Use Absolute Value\n    * moveable.request(\"originDraggable\", { x: 200, y: 100 });\n    * moveable.request(\"originDraggable\", { x: 220, y: 100 });\n    * moveable.request(\"originDraggable\", { x: 240, y: 100 });\n    *\n    * // requestEnd\n    * requester.requestEnd();\n    */\n    request(moveable: MoveableManagerInterface<any, any>) {\n        const datas = {};\n        const rect = moveable.getRect();\n        let distX = 0;\n        let distY = 0;\n\n        const transformOrigin = rect.transformOrigin;\n        const distOrigin = [0, 0];\n\n        return {\n            isControl: true,\n            requestStart() {\n                return { datas };\n            },\n            request(e: IObject<any>) {\n                if (\"deltaOrigin\" in e) {\n                    distOrigin[0] += e.deltaOrigin[0];\n                    distOrigin[1] += e.deltaOrigin[1];\n                } else if (\"origin\" in e) {\n                    distOrigin[0] = e.origin[0] - transformOrigin[0];\n                    distOrigin[1] = e.origin[1] - transformOrigin[1];\n                } else {\n                    if (\"x\" in e) {\n                        distX = e.x - rect.left;\n                    } else if (\"deltaX\" in e) {\n                        distX += e.deltaX;\n                    }\n                    if (\"y\" in e) {\n                        distY = e.y - rect.top;\n                    } else if (\"deltaY\" in e) {\n                        distY += e.deltaY;\n                    }\n                }\n\n                return { datas, distX, distY, distOrigin };\n            },\n            requestEnd() {\n                return { datas, isDrag: true };\n            },\n        };\n    },\n};\n/**\n * Whether to drag origin (default: false)\n * @name Moveable.OriginDraggable#originDraggable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     originDraggable: true,\n * });\n * let translate = [0, 0];\n * moveable.on(\"dragOriginStart\", e => {\n *     e.dragStart && e.dragStart.set(translate);\n * }).on(\"dragOrigin\", e => {\n *     translate = e.drag.beforeTranslate;\n *     e.target.style.cssText\n *         = `transform-origin: ${e.transformOrigin};`\n *         + `transform: translate(${translate[0]}px, ${translate[1]}px)`;\n * }).on(\"dragOriginEnd\", e => {\n *     console.log(e);\n * });\n */\n\n/**\n * % Can be used instead of the absolute px (default: true)\n * @name Moveable.OriginDraggable#originRelative\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     originDraggable: true,\n *     originRelative: false,\n * });\n * moveable.originRelative = true;\n */\n\n/**\n* When drag start the origin, the `dragOriginStart` event is called.\n* @memberof Moveable.OriginDraggable\n* @event dragOriginStart\n* @param {Moveable.OriginDraggable.OnDragOriginStart} - Parameters for the `dragOriginStart` event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     originDraggable: true,\n* });\n* let translate = [0, 0];\n* moveable.on(\"dragOriginStart\", e => {\n*     e.dragStart && e.dragStart.set(translate);\n* }).on(\"dragOrigin\", e => {\n*     translate = e.drag.beforeTranslate;\n*     e.target.style.cssText\n*         = `transform-origin: ${e.transformOrigin};`\n*         + `transform: translate(${translate[0]}px, ${translate[1]}px)`;\n* }).on(\"dragOriginEnd\", e => {\n*     console.log(e);\n* });\n*/\n\n/**\n* When drag the origin, the `dragOrigin` event is called.\n* @memberof Moveable.OriginDraggable\n* @event dragOrigin\n* @param {Moveable.OriginDraggable.OnDragOrigin} - Parameters for the `dragOrigin` event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     originDraggable: true,\n* });\n* let translate = [0, 0];\n* moveable.on(\"dragOriginStart\", e => {\n*     e.dragStart && e.dragStart.set(translate);\n* }).on(\"dragOrigin\", e => {\n*     translate = e.drag.beforeTranslate;\n*     e.target.style.cssText\n*         = `transform-origin: ${e.transformOrigin};`\n*         + `transform: translate(${translate[0]}px, ${translate[1]}px)`;\n* }).on(\"dragOriginEnd\", e => {\n*     console.log(e);\n* });\n*/\n\n/**\n* When drag end the origin, the `dragOriginEnd` event is called.\n* @memberof Moveable.OriginDraggable\n* @event dragOriginEnd\n* @param {Moveable.OriginDraggable.OnDragOriginEnd} - Parameters for the `dragOriginEnd` event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     originDraggable: true,\n* });\n* let translate = [0, 0];\n* moveable.on(\"dragOriginStart\", e => {\n*     e.dragStart && e.dragStart.set(translate);\n* }).on(\"dragOrigin\", e => {\n*     translate = e.drag.beforeTranslate;\n*     e.target.style.cssText\n*         = `transform-origin: ${e.transformOrigin};`\n*         + `transform: translate(${translate[0]}px, ${translate[1]}px)`;\n* }).on(\"dragOriginEnd\", e => {\n*     console.log(e);\n* });\n*/\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Padding.tsx",
    "content": "import { prefix, makeMatrixCSS, getPaddingBox } from \"../utils\";\nimport { Renderer, MoveableManagerInterface } from \"../types\";\nimport { createWarpMatrix } from \"@scena/matrix\";\nimport { makeAble } from \"./AbleManager\";\n\nexport default makeAble(\"padding\", {\n    props: [\"padding\"] as const,\n    render(moveable: MoveableManagerInterface, React: Renderer): any[] {\n        const props = moveable.props;\n        if (props.dragArea) {\n            return [];\n        }\n        const {\n            left,\n            top,\n            right,\n            bottom,\n        } = getPaddingBox(props.padding || {});\n        const {\n            renderPoses,\n            pos1,\n            pos2,\n            pos3,\n            pos4,\n        } = moveable.getState();\n\n        const poses = [pos1, pos2, pos3, pos4];\n        const paddingDirections: number[][] = [];\n\n        if (left > 0) {\n            paddingDirections.push([0, 2]);\n        }\n        if (top > 0) {\n            paddingDirections.push([0, 1]);\n        }\n        if (right > 0) {\n            paddingDirections.push([1, 3]);\n        }\n        if (bottom > 0) {\n            paddingDirections.push([2, 3]);\n        }\n        return paddingDirections.map(([dir1, dir2], i) => {\n            const paddingPos1 = poses[dir1];\n            const paddingPos2 = poses[dir2];\n            const paddingPos3 = renderPoses[dir1];\n            const paddingPos4 = renderPoses[dir2];\n\n            const h = createWarpMatrix(\n                [0, 0],\n                [100, 0],\n                [0, 100],\n                [100, 100],\n                paddingPos1,\n                paddingPos2,\n                paddingPos3,\n                paddingPos4,\n            );\n            if (!h.length) {\n                return undefined;\n            }\n            return (<div key={`padding${i}`} className={prefix(\"padding\")} style={{\n                transform: makeMatrixCSS(h, true),\n            }}></div>);\n        });\n    },\n});\n\n/**\n * Add padding around the target to increase the drag area.\n * @name Moveable#padding\n * @default null\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *  target: document.querySelector(\".target\"),\n *  padding: { left: 0, top: 0, right: 0, bottom: 0 },\n * });\n * moveable.padding = { left: 10, top: 10, right: 10, bottom: 10 },\n * moveable.updateRect();\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Pinchable.ts",
    "content": "import { makeAble } from \"./AbleManager\";\nimport { triggerEvent, fillParams, fillEndParams } from \"../utils\";\nimport {\n    PinchableProps, Able, SnappableState,\n    OnPinchStart, OnPinch, OnPinchEnd, MoveableManagerInterface, MoveableGroupInterface,\n} from \"../types\";\n\n/**\n * @namespace Moveable.Pinchable\n * @description Whether or not target can be pinched with draggable, resizable, scalable, rotatable (default: false)\n */\nexport default makeAble(\"pinchable\", {\n    props: [\n        \"pinchable\",\n    ] as const,\n    events: [\n        \"pinchStart\",\n        \"pinch\",\n        \"pinchEnd\",\n        \"pinchGroupStart\",\n        \"pinchGroup\",\n        \"pinchGroupEnd\",\n    ] as const,\n    dragStart() {\n        return true;\n    },\n    pinchStart(\n        moveable: MoveableManagerInterface<PinchableProps, SnappableState>,\n        e: any,\n    ) {\n        const { datas, targets, angle, originalDatas } = e;\n        const { pinchable, ables } = moveable.props;\n\n        if (!pinchable) {\n            return false;\n        }\n        const eventName = `onPinch${targets ? \"Group\" : \"\"}Start` as \"onPinchStart\";\n        const controlEventName = `drag${targets ? \"Group\" : \"\"}ControlStart` as \"dragControlStart\";\n\n        const pinchAbles = (pinchable === true ? moveable.controlAbles : ables!.filter(able => {\n            return pinchable.indexOf(able.name as any) > -1;\n        })).filter(able => able.canPinch && able[controlEventName]);\n\n        const params = fillParams<OnPinchStart>(moveable, e, {}) as any;\n\n        if (targets) {\n            params.targets = targets;\n        }\n        const result = triggerEvent(moveable, eventName, params);\n\n        datas.isPinch = result !== false;\n        datas.ables = pinchAbles;\n\n        const isPinch = datas.isPinch;\n\n        if (!isPinch) {\n            return false;\n        }\n        pinchAbles.forEach(able => {\n            originalDatas[able.name] = originalDatas[able.name] || {};\n\n            if (!able[controlEventName]) {\n                return;\n            }\n            const ableEvent: any = {\n                ...e,\n                datas: originalDatas[able.name],\n                parentRotate: angle,\n                isPinch: true,\n            };\n            able[controlEventName]!(moveable, ableEvent);\n        });\n\n        moveable.state.snapRenderInfo = {\n            request: e.isRequest,\n            direction: [0, 0],\n        };\n        return isPinch;\n    },\n    pinch(\n        moveable: MoveableManagerInterface<PinchableProps>,\n        e: any,\n    ) {\n        const {\n            datas, scale: pinchScale, distance,\n            originalDatas,\n            inputEvent, targets,\n            angle,\n        } = e;\n        if (!datas.isPinch) {\n            return;\n        }\n        const parentDistance = distance * (1 - 1 / pinchScale);\n        const params = fillParams<OnPinch>(moveable, e, {}) as any;\n\n        if (targets) {\n            params.targets = targets;\n        }\n        const eventName = `onPinch${targets ? \"Group\" : \"\"}` as \"onPinch\";\n        triggerEvent(moveable, eventName, params);\n\n        const ables: Able[] = datas.ables;\n        const controlEventName = `drag${targets ? \"Group\" : \"\"}Control` as \"dragControl\";\n\n        ables.forEach(able => {\n            if (!able[controlEventName]) {\n                return;\n            }\n            able[controlEventName]!(moveable, {\n                ...e,\n                datas: originalDatas[able.name],\n                inputEvent,\n                resolveMatrix: true,\n                pinchScale: pinchScale,\n                parentDistance,\n                parentRotate: angle,\n                isPinch: true,\n            } as any);\n        });\n        return params;\n    },\n    pinchEnd(\n        moveable: MoveableManagerInterface<PinchableProps>,\n        e: any,\n    ) {\n        const { datas, isPinch, inputEvent, targets, originalDatas } = e;\n        if (!datas.isPinch) {\n            return;\n        }\n        const eventName = `onPinch${targets ? \"Group\" : \"\"}End` as \"onPinchEnd\";\n\n        const params = fillEndParams<OnPinchEnd>(moveable, e, { isDrag: isPinch }) as any;\n\n        if (targets) {\n            params.targets = targets;\n        }\n        triggerEvent(moveable, eventName, params);\n        const ables: Able[] = datas.ables;\n        const controlEventName = `drag${targets ? \"Group\" : \"\"}ControlEnd` as \"dragControlEnd\";\n\n        ables.forEach(able => {\n            if (!able[controlEventName]) {\n                return;\n            }\n            able[controlEventName]!(moveable, {\n                ...e,\n                isDrag: isPinch,\n                datas: originalDatas[able.name],\n                inputEvent,\n                isPinch: true,\n            } as any);\n        });\n        return isPinch;\n    },\n    pinchGroupStart(moveable: MoveableGroupInterface<any, any>, e: any) {\n        return this.pinchStart!(moveable, { ...e, targets: moveable.props.targets });\n    },\n    pinchGroup(moveable: MoveableGroupInterface, e: any) {\n        return this.pinch!(moveable, { ...e, targets: moveable.props.targets });\n    },\n    pinchGroupEnd(moveable: MoveableGroupInterface, e: any) {\n        return this.pinchEnd!(moveable, { ...e, targets: moveable.props.targets });\n    },\n});\n\n/**\n * Whether or not target can be pinched with draggable, resizable, scalable, rotatable (default: false)\n * @name Moveable.Pinchable#pinchable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.pinchable = true;\n */\n\n/**\n * When the pinch starts, the pinchStart event is called with part of scaleStart, rotateStart, resizeStart\n * @memberof Moveable.Pinchable\n * @event pinchStart\n * @param {Moveable.Pinchable.OnPinchStart} - Parameters for the pinchStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchStart\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotateStart\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scaleStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When pinching, the pinch event is called with part of scale, rotate, resize\n * @memberof Moveable.Pinchable\n * @event pinch\n * @param {Moveable.Pinchable.OnPinch} - Parameters for the pinch event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinch\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotate\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scale\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When the pinch finishes, the pinchEnd event is called.\n * @memberof Moveable.Pinchable\n * @event pinchEnd\n * @param {Moveable.Pinchable.OnPinchEnd} - Parameters for the pinchEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchEnd\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotateEnd\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scaleEnd\", ({ target }) => {\n *     console.log(target);\n * });\n */\n\n/**\n * When the group pinch starts, the `pinchGroupStart` event is called.\n * @memberof Moveable.Pinchable\n * @event pinchGroupStart\n * @param {Moveable.Pinchable.OnPinchGroupStart} - Parameters for the `pinchGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroupStart\", ({ targets }) => {\n *     console.log(\"onPinchGroupStart\", targets);\n * });\n */\n\n/**\n * When the group pinch, the `pinchGroup` event is called.\n * @memberof Moveable.Pinchable\n * @event pinchGroup\n * @param {Moveable.Pinchable.OnPinchGroup} - Parameters for the `pinchGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroup\", ({ targets, events }) => {\n *     console.log(\"onPinchGroup\", targets);\n * });\n */\n\n/**\n * When the group pinch finishes, the `pinchGroupEnd` event is called.\n * @memberof Moveable.Pinchable\n * @event pinchGroupEnd\n * @param {Moveable.Pinchable.OnPinchGroupEnd} - Parameters for the `pinchGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onPinchGroupEnd\", targets, isDrag);\n * });\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/README.md",
    "content": "## Able Interface\n\n```ts\nexport interface Able<Props extends IObject<any> = IObject<any>, Events extends IObject<any> = IObject<any>> {\n    name: string;\n    props: { [key in keyof Props]: any };\n    events: { [key in keyof Events]: string };\n    // Whether to always include in able. It is recommended to use always in frameworks other than react\n    always?: boolean;\n    ableGroup?: string;\n    updateRect?: boolean;\n    canPinch?: boolean;\n    css?: string[];\n    // Fired when the event is cleared\n    unset?: (moveable: any) => any;\n    // Renders the React DOM structure for the able.\n    render?: (moveable: any, renderer: Renderer) => any;\n\n    // Operates when a drag event occurs for the single target.\n    dragStart?: (moveable: any, e: GestoTypes.OnDragStart) => any;\n    drag?: (moveable: any, e: GestoTypes.OnDrag) => any;\n    dragEnd?: (moveable: any, e: GestoTypes.OnDragEnd) => any;\n\n    // Operates when a pinch event occurs for the single target.\n    pinchStart?: (moveable: any, e: GestoTypes.OnPinchStart) => any;\n    pinch?: (moveable: any, e: GestoTypes.OnPinch) => any;\n    pinchEnd?: (moveable: any, e: GestoTypes.OnPinchEnd) => any;\n\n    // Condition that occurs dragControl\n    dragControlCondition?: (target: SVGElement | HTMLElement) => boolean;\n    // Operates when a drag event occurs for the moveable control and single target.\n    dragControlStart?: (moveable: any, e: GestoTypes.OnDragStart) => any;\n    dragControl?: (moveable: any, e: GestoTypes.OnDrag) => any;\n    dragControlEnd?: (moveable: any, e: GestoTypes.OnDragEnd) => any;\n\n    // Condition that occurs dragGroup\n    dragGroupCondition?: (e: any) => boolean;\n    // Operates when a drag event occurs for the multi target.\n    dragGroupStart?: (moveable: any, e: GestoTypes.OnDragStart) => any;\n    dragGroup?: (moveable: any, e: GestoTypes.OnDrag) => any;\n    dragGroupEnd?: (moveable: any, e: GestoTypes.OnDragEnd) => any;\n\n    // Operates when a pinch event occurs for the multi target.\n    pinchGroupStart?: (moveable: any, e: GestoTypes.OnPinchStart) => any;\n    pinchGroup?: (moveable: any, e: GestoTypes.OnPinch) => any;\n    pinchGroupEnd?: (moveable: any, e: GestoTypes.OnPinchEnd) => any;\n\n    // Condition that occurs dragGroupControl\n    dragGroupControlCondition?: (e: any) => boolean;\n    // Operates when a drag event occurs for the moveable control and multi target.\n    dragGroupControlStart?: (moveable: any, e: GestoTypes.OnDragStart) => any;\n    dragGroupControl?: (moveable: any, e: GestoTypes.OnDragStart) => any;\n    dragGroupControlEnd?: (moveable: any, e: GestoTypes.OnDragEnd) => any;\n\n    // Execute the operation of able for external request\n    request?: (moveable: any) => AbleRequester;\n}\n\n```\n\n\n## Example\n\n```ts\nimport Moveable, { MoveableManagerInterface, Renderer } from \"react-moveable\";\n\ninterface CustomAbleProps {\n    customAble: boolean;\n    prop1: number;\n}\nconst CustomAble = {\n    name: \"customAble\",\n    props: [\n        \"customAble\",\n        \"prop1\",\n    ],\n    events: [],\n    render(moveable: MoveableManagerInterface<CustomAbleProps>, React: Renderer) {\n        const CustomElement = React.useCSS(\"div\", `\n        {\n            position: absolute;\n        }\n        `);\n        console.log(moveable.props.prop1);\n\n        // Add key (required)\n        // Add class prefix moveable-(required)\n        return <CustomElement key=\"custom-element\" className=\"moveable-custom\">\n        </CustomElement>;\n    },\n}\n\n<Moveable\n    ables={[CustomAble]}\n    props={{\n        customAble: true,\n        prop1: 3,\n    }}\n    />\n```\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Renderable.ts",
    "content": "import { parse } from \"css-to-mat\";\nimport { getNextStyle, getNextTransformText, getNextTransforms } from \"../gesto/GestoUtils\";\nimport { fillChildEvents } from \"../groupUtils\";\nimport {\n    MoveableManagerInterface, RenderableProps, OnRenderStart, OnRender,\n    OnRenderEnd, MoveableGroupInterface,\n    OnRenderGroupStart, OnRenderGroup, OnRenderGroupEnd,\n} from \"../types\";\nimport { triggerEvent, fillParams, fillCSSObject } from \"../utils\";\n\nexport default {\n    name: \"renderable\",\n    props: [] as const,\n    events: [\n        \"renderStart\",\n        \"render\",\n        \"renderEnd\",\n        \"renderGroupStart\",\n        \"renderGroup\",\n        \"renderGroupEnd\",\n    ] as const,\n    dragRelation: \"weak\",\n    dragStart(moveable: MoveableManagerInterface<RenderableProps>, e: any) {\n        triggerEvent(moveable, `onRenderStart`, fillParams<OnRenderStart>(moveable, e, {\n            isPinch: !!e.isPinch,\n        }));\n    },\n    drag(moveable: MoveableManagerInterface<RenderableProps>, e: any) {\n        triggerEvent(moveable, `onRender`, this.fillDragParams(moveable, e));\n    },\n    dragAfter(moveable: MoveableManagerInterface<RenderableProps>, e: any) {\n        return this.drag(moveable, e);\n    },\n    dragEnd(moveable: MoveableManagerInterface<RenderableProps>, e: any) {\n        triggerEvent(moveable, `onRenderEnd`, this.fillDragEndParams(moveable, e));\n    },\n    dragGroupStart(moveable: MoveableGroupInterface<RenderableProps>, e: any) {\n        triggerEvent(moveable, `onRenderGroupStart`, fillParams<OnRenderGroupStart>(moveable, e, {\n            isPinch: !!e.isPinch,\n            targets: moveable.props.targets,\n        }));\n    },\n    dragGroup(moveable: MoveableGroupInterface<RenderableProps>, e: any) {\n        const events = fillChildEvents(moveable, \"beforeRenderable\", e);\n        const moveables = moveable.moveables;\n        const params = events.map((childEvent, i) => {\n            const childMoveable = moveables[i];\n\n            return this.fillDragParams(childMoveable, childEvent);\n        });\n\n        triggerEvent(moveable, `onRenderGroup`, fillParams<OnRenderGroup>(moveable, e, {\n            isPinch: !!e.isPinch,\n            targets: moveable.props.targets,\n            transform: getNextTransformText(e),\n            transformObject: {},\n            ...fillCSSObject(getNextStyle(e)),\n            events: params,\n        },));\n    },\n    dragGroupEnd(moveable: MoveableGroupInterface<RenderableProps>, e: any) {\n        const events = fillChildEvents(moveable, \"beforeRenderable\", e);\n        const moveables = moveable.moveables;\n        const params = events.map((childEvent, i) => {\n            const childMoveable = moveables[i];\n\n            return this.fillDragEndParams(childMoveable, childEvent);\n        });\n\n        triggerEvent(moveable, `onRenderGroupEnd`, fillParams<OnRenderGroupEnd>(moveable, e, {\n            isPinch: !!e.isPinch,\n            isDrag: e.isDrag,\n            targets: moveable.props.targets,\n            events: params,\n            transformObject: {},\n            transform: getNextTransformText(e),\n            ...fillCSSObject(getNextStyle(e)),\n        }));\n    },\n    dragControlStart(moveable: MoveableManagerInterface<RenderableProps>, e: any) {\n        return this.dragStart(moveable, e);\n    },\n    dragControl(moveable: MoveableManagerInterface<RenderableProps>, e: any) {\n        return this.drag(moveable, e);\n    },\n    dragControlAfter(moveable: MoveableManagerInterface<RenderableProps>, e: any) {\n        return this.dragAfter(moveable, e);\n    },\n    dragControlEnd(moveable: MoveableManagerInterface<RenderableProps>, e: any) {\n        return this.dragEnd(moveable, e);\n    },\n    dragGroupControlStart(moveable: MoveableGroupInterface<RenderableProps>, e: any) {\n        return this.dragGroupStart(moveable, e);\n    },\n    dragGroupControl(moveable: MoveableGroupInterface<RenderableProps>, e: any) {\n        return this.dragGroup(moveable, e);\n    },\n    dragGroupControlEnd(moveable: MoveableGroupInterface<RenderableProps>, e: any) {\n        return this.dragGroupEnd(moveable, e);\n    },\n    fillDragParams(moveable: MoveableManagerInterface<RenderableProps>, e: any) {\n        const transformObject: Record<string, any> = {};\n\n        parse(getNextTransforms(e) || []).forEach(matrixInfo => {\n            transformObject[matrixInfo.name] = matrixInfo.functionValue;\n        });\n\n        return fillParams<OnRender>(moveable, e, {\n            isPinch: !!e.isPinch,\n            transformObject,\n            transform: getNextTransformText(e),\n            ...fillCSSObject(getNextStyle(e)),\n        });\n    },\n    fillDragEndParams(moveable: MoveableManagerInterface<RenderableProps>, e: any) {\n        const transformObject: Record<string, any> = {};\n\n        parse(getNextTransforms(e) || []).forEach(matrixInfo => {\n            transformObject[matrixInfo.name] = matrixInfo.functionValue;\n        });\n        return fillParams<OnRenderEnd>(moveable, e, {\n            isPinch: !!e.isPinch,\n            isDrag: e.isDrag,\n            transformObject,\n            transform: getNextTransformText(e),\n            ...fillCSSObject(getNextStyle(e)),\n        });\n    },\n} as const;\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Resizable.ts",
    "content": "import {\n    triggerEvent,\n    fillParams,\n    fillEndParams,\n    getAbsolutePosesByState,\n    catchEvent,\n    getOffsetSizeDist,\n    getProps,\n    getDirectionCondition,\n    calculatePoses,\n    fillAfterTransform,\n    getDirectionViewClassName,\n    getTotalDirection,\n    abs,\n} from \"../utils\";\nimport {\n    setDragStart,\n    getResizeDist,\n    getAbsolutePosition,\n    getNextMatrix,\n    getNextTransforms,\n} from \"../gesto/GestoUtils\";\nimport {\n    ResizableProps, OnResizeGroup, OnResizeGroupEnd,\n    OnResizeGroupStart, DraggableProps, OnDrag, OnResizeStart, SnappableState,\n    OnResize, OnResizeEnd, MoveableManagerInterface, MoveableGroupInterface, SnappableProps,\n    OnBeforeResize, OnBeforeResizeGroup, ResizableRequestParam,\n} from \"../types\";\nimport { getRenderDirections } from \"../renderDirections\";\nimport {\n    fillChildEvents,\n    startChildDist,\n    triggerChildAbles,\n} from \"../groupUtils\";\nimport Draggable from \"./Draggable\";\nimport { calculate, convertDimension, createRotateMatrix, plus } from \"@scena/matrix\";\nimport CustomGesto, { setCustomDrag } from \"../gesto/CustomGesto\";\nimport { checkSnapResize } from \"./Snappable\";\nimport {\n    calculateBoundSize,\n    isString, convertUnitSize,\n    throttle,\n    isNumber,\n} from \"@daybrush/utils\";\nimport { TINY_NUM } from \"../consts\";\nimport { parseMat } from \"css-to-mat\";\nimport { getFixedDirectionInfo, getOffsetFixedPositionInfo } from \"../utils/getFixedDirection\";\n\n/**\n * @namespace Resizable\n * @memberof Moveable\n * @description Resizable indicates whether the target's width and height can be increased or decreased.\n */\n\nconst directionCondition = getDirectionCondition(\"resizable\");\n\nexport default {\n    name: \"resizable\",\n    ableGroup: \"size\",\n    canPinch: true,\n    props: [\n        \"resizable\",\n        \"throttleResize\",\n        \"renderDirections\",\n        \"displayAroundControls\",\n        \"keepRatio\",\n        \"resizeFormat\",\n        \"keepRatioFinally\",\n        \"edge\",\n        \"checkResizableError\",\n    ] as const,\n    events: [\n        \"resizeStart\",\n        \"beforeResize\",\n        \"resize\",\n        \"resizeEnd\",\n        \"resizeGroupStart\",\n        \"beforeResizeGroup\",\n        \"resizeGroup\",\n        \"resizeGroupEnd\",\n    ] as const,\n    render: getRenderDirections(\"resizable\"),\n    dragControlCondition: directionCondition,\n    viewClassName: getDirectionViewClassName(\"resizable\"),\n    dragControlStart(\n        moveable: MoveableManagerInterface<ResizableProps & DraggableProps, SnappableState>,\n        e: any,\n    ) {\n        const {\n            inputEvent,\n            isPinch,\n            isGroup,\n            parentDirection,\n            parentGesto,\n            datas,\n            parentFixedDirection,\n            parentEvent,\n        } = e;\n\n        const direction = getTotalDirection(\n            parentDirection,\n            isPinch,\n            inputEvent,\n            datas,\n        );\n\n        const state = moveable.state;\n        const { target, width, height, gestos } = state;\n\n        if (!direction || !target) {\n            return false;\n        }\n        if (gestos.resizable) {\n            return false;\n        }\n        gestos.resizable = parentGesto || moveable.controlGesto;\n        !isPinch && setDragStart(moveable, e);\n\n        datas.datas = {};\n        datas.direction = direction;\n        datas.startOffsetWidth = width;\n        datas.startOffsetHeight = height;\n        datas.prevWidth = 0;\n        datas.prevHeight = 0;\n\n        datas.minSize = [0, 0];\n\n\n        datas.startWidth = state.inlineCSSWidth || state.cssWidth;\n        datas.startHeight = state.inlineCSSHeight || state.cssHeight;\n        datas.maxSize = [Infinity, Infinity];\n\n        if (!isGroup) {\n            datas.minSize = [\n                state.minOffsetWidth,\n                state.minOffsetHeight,\n            ];\n            datas.maxSize = [\n                state.maxOffsetWidth,\n                state.maxOffsetHeight,\n            ];\n        }\n        const transformOrigin = moveable.props.transformOrigin || \"% %\";\n\n        datas.transformOrigin = transformOrigin && isString(transformOrigin)\n            ? transformOrigin.split(\" \")\n            : transformOrigin;\n\n        datas.startOffsetMatrix = state.offsetMatrix;\n        datas.startTransformOrigin = state.transformOrigin;\n\n        datas.isWidth = e?.parentIsWidth ?? ((!direction[0] && !direction[1]) || direction[0] || !direction[1]);\n\n        function setRatio(ratio: number) {\n            datas.ratio = ratio && isFinite(ratio) ? ratio : 0;\n        }\n\n\n        datas.startPositions = getAbsolutePosesByState(moveable.state);\n\n        function setFixedDirection(fixedDirection: number[]) {\n            const result = getFixedDirectionInfo(datas.startPositions, fixedDirection);\n\n            datas.fixedDirection = result.fixedDirection;\n            datas.fixedPosition = result.fixedPosition;\n            datas.fixedOffset = result.fixedOffset;\n        }\n        function setFixedPosition(fixedPosition: number[]) {\n            const result = getOffsetFixedPositionInfo(moveable.state, fixedPosition);\n\n            datas.fixedDirection = result.fixedDirection;\n            datas.fixedPosition = result.fixedPosition;\n            datas.fixedOffset = result.fixedOffset;\n        }\n        function setMin(minSize: Array<string | number>)  {\n            datas.minSize = [\n                convertUnitSize(`${minSize[0]}`, 0) || 0,\n                convertUnitSize(`${minSize[1]}`, 0) || 0,\n            ];\n        }\n        function setMax(maxSize: Array<string | number>) {\n            const nextMaxSize = [\n                maxSize[0] || Infinity,\n                maxSize[1] || Infinity,\n            ];\n            if (!isNumber(nextMaxSize[0]) || isFinite(nextMaxSize[0])) {\n                nextMaxSize[0] = convertUnitSize(`${nextMaxSize[0]}`, 0) || Infinity;\n            }\n            if (!isNumber(nextMaxSize[1]) || isFinite(nextMaxSize[1])) {\n                nextMaxSize[1] = convertUnitSize(`${nextMaxSize[1]}`, 0) || Infinity;\n            }\n            datas.maxSize = nextMaxSize;\n        }\n\n        setRatio(width / height);\n        setFixedDirection(parentFixedDirection || [-direction[0], -direction[1]]);\n\n        datas.setFixedDirection = setFixedDirection;\n        datas.setFixedPosition = setFixedPosition;\n        datas.setMin = setMin;\n        datas.setMax = setMax;\n        const params = fillParams<OnResizeStart>(moveable, e, {\n            direction,\n            startRatio: datas.ratio,\n            set: ([startWidth, startHeight]: number[]) => {\n                datas.startWidth = startWidth;\n                datas.startHeight = startHeight;\n            },\n            setMin,\n            setMax,\n            setRatio,\n            setFixedDirection,\n            setFixedPosition,\n            setOrigin: (origin: Array<string | number>) => {\n                datas.transformOrigin = origin;\n            },\n            dragStart: Draggable.dragStart(\n                moveable,\n                new CustomGesto().dragStart([0, 0], e),\n            ),\n        });\n        const result = parentEvent || triggerEvent(moveable, \"onResizeStart\", params);\n\n        datas.startFixedDirection = datas.fixedDirection;\n        datas.startFixedPosition = datas.fixedPosition;\n        if (result !== false) {\n            datas.isResize = true;\n            moveable.state.snapRenderInfo = {\n                request: e.isRequest,\n                direction,\n            };\n        }\n        return datas.isResize ? params : false;\n    },\n    dragControl(\n        moveable: MoveableManagerInterface<ResizableProps & DraggableProps & SnappableProps>,\n        e: any,\n    ) {\n        const {\n            datas,\n            parentFlag,\n            isPinch,\n            parentKeepRatio,\n            dragClient,\n            parentDist,\n            useSnap,\n            isRequest,\n            isGroup,\n            parentEvent,\n            resolveMatrix,\n        } = e;\n\n        const {\n            isResize,\n            transformOrigin,\n            startWidth,\n            startHeight,\n            prevWidth,\n            prevHeight,\n            minSize,\n            maxSize,\n            ratio,\n            startOffsetWidth,\n            startOffsetHeight,\n            isWidth,\n        } = datas;\n\n        if (!isResize) {\n            return;\n        }\n        if (resolveMatrix) {\n            const {\n                is3d,\n            } = moveable.state;\n            const {\n                startOffsetMatrix,\n                startTransformOrigin,\n            } = datas;\n            const n = is3d ? 4 : 3;\n            let targetMatrix = parseMat(getNextTransforms(e));\n            const targetN = Math.sqrt(targetMatrix.length);\n\n            if (n !== targetN) {\n                targetMatrix = convertDimension(targetMatrix, targetN, n);\n            }\n\n            const nextAllMatrix = getNextMatrix(\n                startOffsetMatrix,\n                targetMatrix,\n                startTransformOrigin,\n                n,\n            );\n            const poses = calculatePoses(nextAllMatrix, startOffsetWidth, startOffsetHeight, n);\n\n            datas.startPositions = poses;\n            datas.nextTargetMatrix = targetMatrix;\n            datas.nextAllMatrix = nextAllMatrix;\n        }\n        const props = getProps(moveable.props, \"resizable\");\n        const {\n            resizeFormat,\n            throttleResize = parentFlag ? 0 : 1,\n            parentMoveable,\n            keepRatioFinally,\n        } = props;\n        const direction = datas.direction;\n        let sizeDirection = direction;\n        let distWidth = 0;\n        let distHeight = 0;\n\n        if (!direction[0] && !direction[1]) {\n            sizeDirection = [1, 1];\n        }\n        const keepRatio = (ratio && (parentKeepRatio != null ? parentKeepRatio : props.keepRatio)) || false;\n\n        function getNextBoundingSize() {\n            const fixedDirection = datas.fixedDirection;\n            const nextSize = getOffsetSizeDist(sizeDirection, keepRatio, datas, e);\n\n            distWidth = nextSize.distWidth;\n            distHeight = nextSize.distHeight;\n\n            let nextWidth = (sizeDirection[0] - fixedDirection[0]) || keepRatio\n                ? Math.max(startOffsetWidth + distWidth, TINY_NUM) : startOffsetWidth;\n            let nextHeight = (sizeDirection[1] - fixedDirection[1]) || keepRatio\n                ? Math.max(startOffsetHeight + distHeight, TINY_NUM) : startOffsetHeight;\n\n            if (keepRatio && startOffsetWidth && startOffsetHeight) {\n                // startOffsetWidth : startOffsetHeight = nextWidth : nextHeight\n                if (isWidth) {\n                    nextHeight = nextWidth / ratio;\n                } else {\n                    nextWidth = nextHeight * ratio;\n                }\n            }\n            return [nextWidth, nextHeight];\n        }\n\n        let [boundingWidth, boundingHeight] = getNextBoundingSize();\n\n        if (!parentEvent) {\n            datas.setFixedDirection(datas.fixedDirection);\n\n            triggerEvent(moveable, \"onBeforeResize\", fillParams<OnBeforeResize>(moveable, e, {\n                startFixedDirection: datas.startFixedDirection,\n                startFixedPosition: datas.startFixedPosition,\n                setFixedDirection(nextFixedDirection: number[]) {\n                    datas.setFixedDirection(nextFixedDirection);\n\n                    [boundingWidth, boundingHeight] = getNextBoundingSize();\n\n                    return [boundingWidth, boundingHeight];\n                },\n                setFixedPosition(nextFixedPosition: number[]) {\n                    datas.setFixedPosition(nextFixedPosition);\n\n                    [boundingWidth, boundingHeight] = getNextBoundingSize();\n\n                    return [boundingWidth, boundingHeight];\n                },\n                boundingWidth,\n                boundingHeight,\n                setSize(size: number[]) {\n                    [boundingWidth, boundingHeight] = size;\n                },\n            }, true));\n        }\n\n        let fixedPosition = dragClient;\n\n        if (!dragClient) {\n            if (!parentFlag && isPinch) {\n                fixedPosition = getAbsolutePosition(moveable, [0, 0]);\n            } else {\n                fixedPosition = datas.fixedPosition;\n            }\n        }\n\n        let snapDist = [0, 0];\n\n        if (!isPinch) {\n            snapDist = checkSnapResize(\n                moveable,\n                boundingWidth,\n                boundingHeight,\n                direction,\n                fixedPosition,\n                !useSnap && isRequest,\n                datas,\n            );\n        }\n        if (parentDist) {\n            !parentDist[0] && (snapDist[0] = 0);\n            !parentDist[1] && (snapDist[1] = 0);\n        }\n\n        function computeSize() {\n            if (resizeFormat) {\n                [boundingWidth, boundingHeight] = resizeFormat([boundingWidth, boundingHeight]);\n            }\n            boundingWidth = throttle(boundingWidth, throttleResize!);\n            boundingHeight = throttle(boundingHeight, throttleResize!);\n        }\n        if (keepRatio) {\n            if (sizeDirection[0] && sizeDirection[1] && snapDist[0] && snapDist[1]) {\n                if (abs(snapDist[0]) > abs(snapDist[1])) {\n                    snapDist[1] = 0;\n                } else {\n                    snapDist[0] = 0;\n                }\n            }\n            const isNoSnap = !snapDist[0] && !snapDist[1];\n\n            if (isNoSnap) {\n                // pre-compute before maintaining the ratio\n                computeSize();\n            }\n            if (\n                (sizeDirection[0] && !sizeDirection[1])\n                || (snapDist[0] && !snapDist[1])\n                || (isNoSnap && isWidth)\n            ) {\n                boundingWidth += snapDist[0];\n                boundingHeight = boundingWidth / ratio;\n            } else if (\n                (!sizeDirection[0] && sizeDirection[1])\n                || (!snapDist[0] && snapDist[1])\n                || (isNoSnap && !isWidth)\n            ) {\n                boundingHeight += snapDist[1];\n                boundingWidth = boundingHeight * ratio;\n            }\n        } else {\n            boundingWidth += snapDist[0];\n            boundingHeight += snapDist[1];\n\n            boundingWidth = Math.max(0, boundingWidth);\n            boundingHeight = Math.max(0, boundingHeight);\n        }\n\n        [boundingWidth, boundingHeight] = calculateBoundSize(\n            [boundingWidth, boundingHeight],\n            minSize,\n            maxSize,\n            keepRatio ? ratio : false,\n        );\n        computeSize();\n\n        if (keepRatio && (isGroup || keepRatioFinally)) {\n            if (isWidth) {\n                boundingHeight = boundingWidth / ratio;\n            } else {\n                boundingWidth = boundingHeight * ratio;\n            }\n        }\n        distWidth = boundingWidth - startOffsetWidth;\n        distHeight = boundingHeight - startOffsetHeight;\n\n        const delta = [distWidth - prevWidth, distHeight - prevHeight];\n\n        datas.prevWidth = distWidth;\n        datas.prevHeight = distHeight;\n\n        const inverseDelta = getResizeDist(\n            moveable,\n            boundingWidth,\n            boundingHeight,\n            fixedPosition,\n            transformOrigin,\n            datas,\n        );\n\n        if (!parentMoveable && delta.every(num => !num) && inverseDelta.every(num => !num)) {\n            return;\n        }\n        const drag = Draggable.drag(\n            moveable,\n            setCustomDrag(e, moveable.state, inverseDelta, !!isPinch, false, \"draggable\"),\n        ) as OnDrag;\n        const transform = drag.transform;\n\n        const nextWidth = startWidth + distWidth;\n        const nextHeight = startHeight + distHeight;\n\n        const params = fillParams<OnResize>(moveable, e, {\n            width: nextWidth,\n            height: nextHeight,\n            offsetWidth: Math.round(boundingWidth),\n            offsetHeight: Math.round(boundingHeight),\n            startRatio: ratio,\n            boundingWidth,\n            boundingHeight,\n            direction,\n            dist: [distWidth, distHeight],\n            delta,\n            isPinch: !!isPinch,\n            drag,\n            ...fillAfterTransform({\n                style: {\n                    width: `${nextWidth}px`,\n                    height: `${nextHeight}px`,\n                },\n                transform,\n            }, drag, e),\n        });\n        !parentEvent && triggerEvent(moveable, \"onResize\", params);\n        return params;\n    },\n    dragControlAfter(\n        moveable: MoveableManagerInterface<ResizableProps & DraggableProps>,\n        e: any,\n    ) {\n        const datas = e.datas;\n        const {\n            isResize,\n            startOffsetWidth,\n            startOffsetHeight,\n            prevWidth,\n            prevHeight,\n        } = datas;\n\n        if (!isResize || moveable.props.checkResizableError === false) {\n            return;\n        }\n        const {\n            width,\n            height,\n        } = moveable.state;\n        const errorWidth = width - (startOffsetWidth + prevWidth);\n        const errorHeight = height - (startOffsetHeight + prevHeight);\n        const isErrorWidth = abs(errorWidth) > 3;\n        const isErrorHeight = abs(errorHeight) > 3;\n\n        if (isErrorWidth) {\n            datas.startWidth += errorWidth;\n            datas.startOffsetWidth += errorWidth;\n            datas.prevWidth += errorWidth;\n        }\n        if (isErrorHeight) {\n            datas.startHeight += errorHeight;\n            datas.startOffsetHeight += errorHeight;\n            datas.prevHeight += errorHeight;\n        }\n        if (isErrorWidth || isErrorHeight) {\n            return this.dragControl(moveable, e);\n        }\n    },\n    dragControlEnd(\n        moveable: MoveableManagerInterface<ResizableProps & DraggableProps>,\n        e: any,\n    ) {\n        const { datas, parentEvent } = e;\n        if (!datas.isResize) {\n            return;\n        }\n        datas.isResize = false;\n\n        const params = fillEndParams<OnResizeEnd>(moveable, e, {});\n        !parentEvent && triggerEvent(moveable, \"onResizeEnd\", params);\n        return params;\n    },\n    dragGroupControlCondition: directionCondition,\n    dragGroupControlStart(moveable: MoveableGroupInterface<any, any>, e: any) {\n        const { datas } = e;\n        const params = this.dragControlStart(moveable, {...e, isGroup: true });\n\n        if (!params) {\n            return false;\n        }\n        const originalEvents = fillChildEvents(moveable, \"resizable\", e);\n        const {\n            startOffsetWidth: parentStartOffsetWidth,\n            startOffsetHeight: parentStartOffsetHeight,\n        } = datas;\n\n        function updateGroupMin() {\n            const originalMinSize = datas.minSize;\n            originalEvents.forEach(ev => {\n                const {\n                    minSize: childMinSize,\n                    startOffsetWidth: childStartOffsetWidth,\n                    startOffsetHeight: childStartOffsetHeight,\n                } = ev.datas;\n\n                const parentMinWidth = parentStartOffsetWidth\n                    * (childStartOffsetWidth ? childMinSize[0] / childStartOffsetWidth : 0);\n                const parentMinHeight = parentStartOffsetHeight\n                    * (childStartOffsetHeight ? childMinSize[1] / childStartOffsetHeight : 0);\n\n                originalMinSize[0] = Math.max(originalMinSize[0], parentMinWidth);\n                originalMinSize[1] = Math.max(originalMinSize[1], parentMinHeight);\n            });\n        }\n\n        function updateGroupMax() {\n            const originalMaxSize = datas.maxSize;\n            originalEvents.forEach(ev => {\n                const {\n                    maxSize: childMaxSize,\n                    startOffsetWidth: childStartOffsetWidth,\n                    startOffsetHeight: childStartOffsetHeight,\n                } = ev.datas;\n\n                const parentMaxWidth = parentStartOffsetWidth\n                    * (childStartOffsetWidth ? childMaxSize[0] / childStartOffsetWidth : 0);\n                const parentMaxHeight = parentStartOffsetHeight\n                    * (childStartOffsetHeight ? childMaxSize[1] / childStartOffsetHeight : 0);\n\n                originalMaxSize[0] = Math.min(originalMaxSize[0], parentMaxWidth);\n                originalMaxSize[1] = Math.min(originalMaxSize[1], parentMaxHeight);\n            });\n        }\n        const events = triggerChildAbles(\n            moveable,\n            this,\n            \"dragControlStart\",\n            e,\n            (child, ev) => {\n                return startChildDist(moveable, child, datas, ev);\n            },\n        );\n\n\n        updateGroupMin();\n        updateGroupMax();\n\n        const setFixedDirection = (fixedDirection: number[]) => {\n            params.setFixedDirection(fixedDirection);\n            events.forEach((ev, i) => {\n                ev.setFixedDirection(fixedDirection);\n                startChildDist(moveable, ev.moveable, datas, originalEvents[i]);\n            });\n        };\n\n        datas.setFixedDirection = setFixedDirection;\n\n        const nextParams: OnResizeGroupStart = {\n            ...params,\n            targets: moveable.props.targets!,\n            events: events.map(ev => {\n                return {\n                    ...ev,\n                    setMin: (minSize: Array<number | string>) => {\n                        ev.setMin(minSize);\n                        updateGroupMin();\n                    },\n                    setMax: (maxSize: Array<number | string>) => {\n                        ev.setMax(maxSize);\n                        updateGroupMax();\n                    },\n                };\n            }),\n            setFixedDirection,\n            setMin: (minSize: Array<number | string>) => {\n                params.setMin(minSize);\n                updateGroupMin();\n            },\n            setMax: (maxSize: Array<number | string>) => {\n                params.setMax(maxSize);\n                updateGroupMax();\n            },\n        };\n        const result = triggerEvent(moveable, \"onResizeGroupStart\", nextParams);\n\n        datas.isResize = result !== false;\n        return datas.isResize ? params : false;\n    },\n    dragGroupControl(moveable: MoveableGroupInterface<any, any>, e: any) {\n        const { datas } = e;\n        if (!datas.isResize) {\n            return;\n        }\n        const props = getProps(moveable.props, \"resizable\");\n\n        catchEvent(moveable, \"onBeforeResize\", parentEvent => {\n            triggerEvent(moveable, \"onBeforeResizeGroup\", fillParams<OnBeforeResizeGroup>(moveable, e, {\n                ...parentEvent,\n                targets: props.targets!,\n            }, true));\n        });\n\n\n        const params = this.dragControl(moveable, {...e, isGroup: true });\n\n        if (!params) {\n            return;\n        }\n        const {\n            boundingWidth,\n            boundingHeight,\n            dist,\n        } = params;\n\n        const keepRatio = props.keepRatio;\n\n        const parentScale = [\n            boundingWidth / (boundingWidth - dist[0]),\n            boundingHeight / (boundingHeight - dist[1]),\n        ];\n        const fixedPosition = datas.fixedPosition;\n\n        const events = triggerChildAbles(\n            moveable,\n            this,\n            \"dragControl\",\n            e,\n            (_, ev) => {\n                const [clientX, clientY] = calculate(\n                    createRotateMatrix(moveable.rotation / 180 * Math.PI, 3),\n                    [\n                        ev.datas.originalX * parentScale[0],\n                        ev.datas.originalY * parentScale[1],\n                        1,\n                    ],\n                    3,\n                );\n\n                return {\n                    ...ev,\n                    parentDist: null,\n                    parentScale,\n                    dragClient: plus(fixedPosition, [clientX, clientY]),\n                    parentKeepRatio: keepRatio,\n                };\n            },\n        );\n        const nextParams: OnResizeGroup = {\n            targets: props.targets!,\n            events,\n            ...params,\n        };\n\n        triggerEvent(moveable, \"onResizeGroup\", nextParams);\n        return nextParams;\n    },\n    dragGroupControlEnd(moveable: MoveableGroupInterface<any, any>, e: any) {\n        const { isDrag, datas } = e;\n\n        if (!datas.isResize) {\n            return;\n        }\n\n        this.dragControlEnd(moveable, e);\n        const events = triggerChildAbles(moveable, this, \"dragControlEnd\", e);\n\n        const nextParams: OnResizeGroupEnd = fillEndParams<OnResizeGroupEnd>(moveable, e, {\n            targets: moveable.props.targets!,\n            events,\n        });\n\n        triggerEvent(moveable, \"onResizeGroupEnd\", nextParams);\n        return isDrag;\n    },\n    /**\n     * @method Moveable.Resizable#request\n     * @param {Moveable.Resizable.ResizableRequestParam} e - the Resizable's request parameter\n     * @return {Moveable.Requester} Moveable Requester\n     * @example\n\n     * // Instantly Request (requestStart - request - requestEnd)\n     * // Use Relative Value\n     * moveable.request(\"resizable\", { deltaWidth: 10, deltaHeight: 10 }, true);\n     *\n     * // Use Absolute Value\n     * moveable.request(\"resizable\", { offsetWidth: 100, offsetHeight: 100 }, true);\n     *\n     * // requestStart\n     * const requester = moveable.request(\"resizable\");\n     *\n     * // request\n     * // Use Relative Value\n     * requester.request({ deltaWidth: 10, deltaHeight: 10 });\n     * requester.request({ deltaWidth: 10, deltaHeight: 10 });\n     * requester.request({ deltaWidth: 10, deltaHeight: 10 });\n     *\n     * // Use Absolute Value\n     * moveable.request(\"resizable\", { offsetWidth: 100, offsetHeight: 100 });\n     * moveable.request(\"resizable\", { offsetWidth: 110, offsetHeight: 100 });\n     * moveable.request(\"resizable\", { offsetWidth: 120, offsetHeight: 100 });\n     *\n     * // requestEnd\n     * requester.requestEnd();\n     */\n    request(moveable: MoveableManagerInterface<any>) {\n        const datas: Record<string, any> = {};\n        let distWidth = 0;\n        let distHeight = 0;\n        let useSnap = false;\n        const rect = moveable.getRect();\n\n        return {\n            isControl: true,\n            requestStart(e: ResizableRequestParam) {\n                useSnap = e.useSnap!;\n\n                return {\n                    datas, parentDirection: e.direction || [1, 1],\n                    parentIsWidth: e?.horizontal ?? true,\n                    useSnap,\n                };\n            },\n            request(e: ResizableRequestParam) {\n                if (\"offsetWidth\" in e) {\n                    distWidth = e.offsetWidth! - rect.offsetWidth;\n                } else if (\"deltaWidth\" in e) {\n                    distWidth += e.deltaWidth!;\n                }\n                if (\"offsetHeight\" in e) {\n                    distHeight = e.offsetHeight! - rect.offsetHeight;\n                } else if (\"deltaHeight\" in e) {\n                    distHeight += e.deltaHeight!;\n                }\n\n\n                return {\n                    datas,\n                    parentDist: [distWidth, distHeight],\n                    parentKeepRatio: e.keepRatio,\n                    useSnap,\n                };\n            },\n            requestEnd() {\n                return { datas, isDrag: true, useSnap };\n            },\n        };\n    },\n    unset(moveable: MoveableManagerInterface<any, {}>) {\n        moveable.state.gestos.resizable = null;\n    },\n};\n\n/**\n * Whether or not target can be resized.\n * @name Moveable.Resizable#resizable\n * @default false\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     resizable: false,\n * });\n *\n * moveable.resizable = true;\n */\n\n/**\n * throttle of width, height when resize. If throttleResize is set to less than 1, the target may shake.\n * @name Moveable.Resizable#throttleResize\n * @default 1\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *   resizable: true,\n *   throttleResize: 1,\n * });\n *\n * moveable.throttleResize = 0;\n */\n/**\n * When resize or scale, keeps a ratio of the width, height.\n * @name Moveable.Resizable#keepRatio\n * @default false\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *   resizable: true,\n * });\n *\n * moveable.keepRatio = true;\n */\n/**\n * Set directions to show the control box.\n * @name Moveable.Resizable#renderDirections\n * @default [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"]\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *   resizable: true,\n *   renderDirections: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"],\n * });\n *\n * moveable.renderDirections = [\"nw\", \"ne\", \"sw\", \"se\"];\n */\n\n/**\n * Function to convert size for resize\n * @name Moveable.Resizable#resizeFormat\n * @default oneself\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *   resizable: true,\n *   resizeFormat: v => v,\n * });\n *\n * moveable.resizeFormat = (size: number[]) => ([Math.trunc(size[0]), Math.trunc(size[1])];\n */\n\n/**\n * When the resize starts, the resizeStart event is called.\n * @memberof Moveable.Resizable\n * @event resizeStart\n * @param {Moveable.Resizable.OnResizeStart} - Parameters for the resizeStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n\n/**\n * When resizing, `beforeResize` is called before `resize` occurs. In `beforeResize`, you can get and set the pre-value before resizing.\n * @memberof Moveable.Resizable\n * @event beforeResize\n * @param {Moveable.Resizable.OnBeforeResize} - Parameters for the `beforeResize` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"beforeResize\", ({ setFixedDirection }) => {\n *     if (shiftKey) {\n *        setFixedDirection([0, 0]);\n *     }\n * });\n * moveable.on(\"resize\", ({ target, width, height, drag }) => {\n *     target.style.width = `${width}px`;\n *     target.style.height = `${height}px`;\n *     target.style.transform = drag.transform;\n * });\n */\n\n/**\n * When resizing, the resize event is called.\n * @memberof Moveable.Resizable\n * @event resize\n * @param {Moveable.Resizable.OnResize} - Parameters for the resize event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resize\", ({ target, width, height }) => {\n *     target.style.width = `${e.width}px`;\n *     target.style.height = `${e.height}px`;\n * });\n */\n/**\n * When the resize finishes, the resizeEnd event is called.\n * @memberof Moveable.Resizable\n * @event resizeEnd\n * @param {Moveable.Resizable.OnResizeEnd} - Parameters for the resizeEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n\n/**\n* When the group resize starts, the `resizeGroupStart` event is called.\n* @memberof Moveable.Resizable\n* @event resizeGroupStart\n* @param {Moveable.Resizable.OnResizeGroupStart} - Parameters for the `resizeGroupStart` event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     target: [].slice.call(document.querySelectorAll(\".target\")),\n*     resizable: true\n* });\n* moveable.on(\"resizeGroupStart\", ({ targets }) => {\n*     console.log(\"onResizeGroupStart\", targets);\n* });\n*/\n\n/**\n* When the group resize, the `resizeGroup` event is called.\n* @memberof Moveable.Resizable\n* @event resizeGroup\n* @param {Moveable.Resizable.onResizeGroup} - Parameters for the `resizeGroup` event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     target: [].slice.call(document.querySelectorAll(\".target\")),\n*     resizable: true\n* });\n* moveable.on(\"resizeGroup\", ({ targets, events }) => {\n*     console.log(\"onResizeGroup\", targets);\n*     events.forEach(ev => {\n*         const offset = [\n*             direction[0] < 0 ? -ev.delta[0] : 0,\n*             direction[1] < 0 ? -ev.delta[1] : 0,\n*         ];\n*         // ev.drag is a drag event that occurs when the group resize.\n*         const left = offset[0] + ev.drag.beforeDist[0];\n*         const top = offset[1] + ev.drag.beforeDist[1];\n*         const width = ev.width;\n*         const top = ev.top;\n*     });\n* });\n*/\n\n/**\n * When the group resize finishes, the `resizeGroupEnd` event is called.\n * @memberof Moveable.Resizable\n * @event resizeGroupEnd\n * @param {Moveable.Resizable.OnResizeGroupEnd} - Parameters for the `resizeGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     resizable: true\n * });\n * moveable.on(\"resizeGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onResizeGroupEnd\", targets, isDrag);\n * });\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Rotatable.tsx",
    "content": "import {\n    prefix, triggerEvent, fillParams,\n    calculatePosition, fillEndParams, getRotationRad, getRefTargets,\n    catchEvent, getProps, calculateMoveableClientPositions,\n    fillAfterTransform,\n    getTotalOrigin,\n} from \"../utils\";\nimport {\n    IObject, hasClass, getRad,\n    throttle,\n    getDist,\n    getKeys,\n    isArray,\n} from \"@daybrush/utils\";\nimport {\n    RotatableProps, OnRotateGroup, OnRotateGroupEnd,\n    Renderer, OnRotateGroupStart, OnRotateStart, OnRotate,\n    OnRotateEnd, MoveableClientRect, SnappableProps,\n    SnappableState, MoveableManagerInterface, MoveableGroupInterface, DraggableProps,\n    OnBeforeRotate,\n    OnBeforeRotateGroup,\n    OnResizeStart,\n    OnResize,\n    TransformObject,\n    OnDragStart,\n} from \"../types\";\nimport { triggerChildAbles } from \"../groupUtils\";\nimport { calculate, convertPositionMatrix, getOrigin, minus, plus, rotate as rotateMatrix } from \"@scena/matrix\";\nimport CustomGesto, { setCustomDrag } from \"../gesto/CustomGesto\";\nimport { checkSnapRotate } from \"./Snappable\";\nimport {\n    fillTransformStartEvent,\n    convertTransformFormat, getRotateDist,\n    fillTransformEvent,\n    setDefaultTransformIndex,\n    resolveTransformEvent,\n    getTransformDirection,\n    getPosByDirection,\n    getTranslateFixedPosition,\n} from \"../gesto/GestoUtils\";\nimport { DirectionControlInfo, renderAroundControls, renderDirectionControlsByInfos } from \"../renderDirections\";\nimport { DIRECTION_REGION_TO_DIRECTION } from \"../consts\";\nimport Resizable from \"./Resizable\";\nimport Draggable from \"./Draggable\";\nimport { getOffsetFixedDirectionInfo, getOffsetFixedPositionInfo } from \"../utils/getFixedDirection\";\n\n/**\n * @namespace Rotatable\n * @memberof Moveable\n * @description Rotatable indicates whether the target can be rotated.\n */\n\nfunction setRotateStartInfo(\n    moveable: MoveableManagerInterface<any, any>,\n    datas: IObject<any>, clientX: number, clientY: number,\n    rect: MoveableClientRect,\n) {\n    const groupable = moveable.props.groupable;\n    const state = moveable.state;\n    const n = state.is3d ? 4 : 3;\n    const origin = datas.origin;\n    const nextOrigin = calculatePosition(\n        moveable.state.rootMatrix,\n        // TO-DO #710\n        minus([origin[0], origin[1]], groupable ? [0, 0] : [state.left, state.top]),\n        n,\n    );\n    const startAbsoluteOrigin = plus([rect.left, rect.top], nextOrigin);\n\n    datas.startAbsoluteOrigin = startAbsoluteOrigin;\n    datas.prevDeg = getRad(startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180;\n    datas.defaultDeg = datas.prevDeg;\n    datas.prevSnapDeg = 0;\n    datas.loop = 0;\n    datas.startDist = getDist(startAbsoluteOrigin, [clientX, clientY]);\n}\n\nfunction getAbsoluteDist(\n    deg: number,\n    direction: number,\n    datas: IObject<any>,\n) {\n    const {\n        defaultDeg,\n        prevDeg,\n    } = datas;\n\n\n    let normalizedPrevDeg = prevDeg % 360;\n    let loop = Math.floor(prevDeg / 360);\n\n    if (normalizedPrevDeg < 0) {\n        normalizedPrevDeg += 360;\n    }\n\n    if (normalizedPrevDeg > deg && normalizedPrevDeg > 270 && deg < 90) {\n        // 360 => 0\n        ++loop;\n    } else if (normalizedPrevDeg < deg && normalizedPrevDeg < 90 && deg > 270) {\n        // 0 => 360\n        --loop;\n    }\n    const dist = direction * (loop * 360 + deg - defaultDeg);\n\n    datas.prevDeg = defaultDeg + dist;\n\n    return dist;\n}\nfunction getAbsoluteDistByClient(\n    clientX: number, clientY: number,\n    direction: number,\n    datas: IObject<any>,\n) {\n    return getAbsoluteDist(\n        getRad(datas.startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180,\n        direction,\n        datas,\n    );\n}\nfunction getRotateInfo(\n    moveable: MoveableManagerInterface<any, any>,\n    moveableRect: any,\n    datas: IObject<any>,\n    dist: number,\n    startValue: number,\n    checkSnap?: boolean,\n) {\n    const {\n        throttleRotate = 0,\n    } = moveable.props;\n    const prevSnapDeg = datas.prevSnapDeg;\n    let snapRotation = 0;\n    let isSnap = false;\n\n    if (checkSnap) {\n        const result = checkSnapRotate(\n            moveable,\n            moveableRect,\n            dist,\n            startValue + dist,\n        );\n\n        isSnap = result.isSnap;\n        snapRotation = startValue + result.dist;\n    }\n\n    if (!isSnap) {\n        snapRotation = throttle(startValue + dist, throttleRotate);\n    }\n    const snapDeg = snapRotation - startValue;\n\n    datas.prevSnapDeg = snapDeg;\n\n    return [snapDeg - prevSnapDeg, snapDeg, snapRotation];\n\n\n}\n\nexport function getReversePositionX(dir: string) {\n    if (dir === \"left\") {\n        return \"right\";\n    } else if (dir === \"right\") {\n        return \"left\";\n    }\n    return dir;\n}\nexport function getReversePositionY(dir: string) {\n    if (dir === \"top\") {\n        return \"bottom\";\n    } else if (dir === \"bottom\") {\n        return \"top\";\n    }\n    return dir;\n}\nexport function getRotationPositions(\n    rotationPosition: RotatableProps[\"rotationPosition\"],\n    [pos1, pos2, pos3, pos4]: number[][],\n    direction: number,\n): [number[], number][] {\n    if (rotationPosition === \"none\") {\n        return [];\n    }\n    if (isArray(rotationPosition)) {\n        return rotationPosition.map(child => getRotationPositions(\n            child,\n            [pos1, pos2, pos3, pos4],\n            direction,\n        )[0]);\n    }\n    const [dir1, dir2] = (rotationPosition || \"top\").split(\"-\");\n    let radPoses = [pos1, pos2];\n\n    if (dir1 === \"left\") {\n        radPoses = [pos3, pos1];\n    } else if (dir1 === \"right\") {\n        radPoses = [pos2, pos4];\n    } else if (dir1 === \"bottom\") {\n        radPoses = [pos4, pos3];\n    }\n    let pos = [\n        (radPoses[0][0] + radPoses[1][0]) / 2,\n        (radPoses[0][1] + radPoses[1][1]) / 2,\n    ];\n    const rad = getRotationRad(radPoses, direction);\n    if (dir2) {\n        const isStart = dir2 === \"top\" || dir2 === \"left\";\n        const isReverse = dir1 === \"bottom\" || dir1 === \"left\";\n\n        pos = radPoses[(isStart && !isReverse) || (!isStart && isReverse) ? 0 : 1];\n    }\n    return [[pos, rad]];\n}\n\nexport function dragControlCondition(moveable: MoveableManagerInterface<RotatableProps>, e: any) {\n    if (e.isRequest) {\n        return e.requestAble === \"rotatable\";\n    }\n    const target = e.inputEvent.target as HTMLElement;\n    if (\n        hasClass(target, prefix(\"rotation-control\"))\n        || (moveable.props.rotateAroundControls && hasClass(target, prefix(\"around-control\")))\n        || (hasClass(target, prefix(\"control\")) && hasClass(target, prefix(\"rotatable\")))\n    ) {\n        return true;\n    }\n    const rotationTarget = moveable.props.rotationTarget;\n\n    if (rotationTarget) {\n        return getRefTargets(rotationTarget, true).some(element => {\n            if (!element) {\n                return false;\n            }\n            return target === element || target.contains(element);\n        });\n    }\n    return false;\n}\n\nconst css = `.rotation {\nposition: absolute;\nheight: 40px;\nwidth: 1px;\ntransform-origin: 50% 100%;\nheight: calc(40px * var(--zoom));\ntop: auto;\nleft: 0;\nbottom: 100%;\nwill-change: transform;\n}\n.rotation .rotation-line {\ndisplay: block;\nwidth: 100%;\nheight: 100%;\ntransform-origin: 50% 50%;\n}\n.rotation .rotation-control {\nborder-color: #4af;\nborder-color: var(--moveable-color);\nbackground:#fff;\ncursor: alias;\n}\n:global .view-rotation-dragging, .rotatable.direction.control {\ncursor: alias;\n}\n.rotatable.direction.control.move {\ncursor: move;\n}\n`;\nexport default {\n    name: \"rotatable\",\n    canPinch: true,\n    props: [\n        \"rotatable\",\n        \"rotationPosition\",\n        \"throttleRotate\",\n        \"renderDirections\",\n        \"rotationTarget\",\n        \"rotateAroundControls\",\n        \"edge\",\n        \"resolveAblesWithRotatable\",\n        \"displayAroundControls\",\n    ] as const,\n    events: [\n        \"rotateStart\",\n        \"beforeRotate\",\n        \"rotate\",\n        \"rotateEnd\",\n        \"rotateGroupStart\",\n        \"beforeRotateGroup\",\n        \"rotateGroup\",\n        \"rotateGroupEnd\",\n    ] as const,\n    css: [css],\n    viewClassName(moveable: MoveableManagerInterface<RotatableProps>) {\n        if (!moveable.isDragging(\"rotatable\")) {\n            return \"\";\n        }\n        return prefix(\"view-rotation-dragging\");\n    },\n    render(moveable: MoveableManagerInterface<RotatableProps>, React: Renderer): any {\n        const {\n            rotatable,\n            rotationPosition,\n            zoom,\n            renderDirections,\n            rotateAroundControls,\n            resolveAblesWithRotatable,\n        } = getProps(moveable.props, \"rotatable\");\n        const {\n            renderPoses,\n            direction,\n        } = moveable.getState();\n        if (!rotatable) {\n            return null;\n        }\n        const positions = getRotationPositions(rotationPosition!, renderPoses, direction);\n        const jsxs: any[] = [];\n\n        positions.forEach(([pos, rad], i) => {\n            jsxs.push(\n                <div key={`rotation${i}`} className={prefix(\"rotation\")} style={{\n                    // tslint:disable-next-line: max-line-length\n                    transform: `translate(-50%) translate(${pos[0]}px, ${pos[1]}px) rotate(${rad}rad)`,\n                }}>\n                    <div className={prefix(\"line rotation-line\")} style={{\n                        transform: `scaleX(${zoom})`,\n                    }}></div>\n                    <div className={prefix(\"control rotation-control\")} style={{\n                        transform: `translate(0.5px) scale(${zoom})`,\n                    }}></div>\n                </div>\n            );\n        });\n        if (renderDirections) {\n            const ables = getKeys(resolveAblesWithRotatable || {});\n            const resolveMap: Record<string, string> = {};\n\n            ables.forEach(name => {\n                resolveAblesWithRotatable![name]!.forEach(direction => {\n                    resolveMap[direction] = name;\n                });\n            });\n\n            let directionControlInfos: DirectionControlInfo[] = [];\n\n            if (isArray(renderDirections)) {\n                directionControlInfos = renderDirections.map(dir => {\n                    const able = resolveMap[dir];\n\n                    return {\n                        data: able ? { resolve: able } : {},\n                        classNames: able ? [`move`] : [],\n                        dir,\n                    };\n                });\n            }\n\n            jsxs.push(...renderDirectionControlsByInfos(\n                moveable,\n                \"rotatable\",\n                directionControlInfos,\n                React,\n            ));\n        }\n        if (rotateAroundControls) {\n            jsxs.push(...renderAroundControls(moveable, React));\n        }\n\n        return jsxs;\n    },\n    dragControlCondition: dragControlCondition as (moveable: any, e: any) => boolean,\n    dragControlStart(\n        moveable: MoveableManagerInterface<RotatableProps & SnappableProps & DraggableProps, SnappableState>,\n        e: any) {\n        const {\n            datas,\n            clientX, clientY,\n            parentRotate, parentFlag, isPinch,\n            isRequest,\n        } = e;\n        const state = moveable.state;\n        const {\n            target, left, top,\n            direction, beforeDirection, targetTransform,\n            moveableClientRect,\n            offsetMatrix,\n            targetMatrix,\n            allMatrix,\n            width,\n            height,\n        } = state;\n\n        if (!isRequest && !target) {\n            return false;\n        }\n\n        const rect = moveable.getRect();\n        datas.rect = rect;\n        datas.transform = targetTransform;\n        datas.left = left;\n        datas.top = top;\n        let setFixedPosition = (fixedPosition: number[]) => {\n            const result = getOffsetFixedPositionInfo(moveable.state, fixedPosition);\n\n            datas.fixedDirection = result.fixedDirection;\n            datas.fixedOffset = result.fixedOffset;\n            datas.fixedPosition = result.fixedPosition;\n\n\n            if (resizeStart) {\n                resizeStart.setFixedPosition(fixedPosition);\n            }\n        };\n        let setFixedDirection: OnRotateStart[\"setFixedDirection\"] = (fixedDirection: number[]) => {\n            const result = getOffsetFixedDirectionInfo(moveable.state, fixedDirection);\n\n            datas.fixedDirection = result.fixedDirection;\n            datas.fixedOffset = result.fixedOffset;\n            datas.fixedPosition = result.fixedPosition;\n\n            if (resizeStart) {\n                resizeStart.setFixedDirection(fixedDirection);\n            }\n        };\n        let startClientX = clientX;\n        let startClientY = clientY;\n\n        if (isRequest || isPinch || parentFlag) {\n            const externalRotate = parentRotate || 0;\n\n            datas.beforeInfo = {\n                origin: rect.beforeOrigin,\n                prevDeg: externalRotate,\n                defaultDeg: externalRotate,\n                prevSnapDeg: 0,\n                startDist: 0,\n            };\n            datas.afterInfo = {\n                ...datas.beforeInfo,\n                origin: rect.origin,\n            };\n            datas.absoluteInfo = {\n                ...datas.beforeInfo,\n                origin: rect.origin,\n                startValue: externalRotate,\n            };\n        } else {\n            const inputTarget = e.inputEvent?.target;\n\n            if (inputTarget) {\n                const regionDirection = inputTarget.getAttribute(\"data-direction\") || \"\";\n                const controlDirection = DIRECTION_REGION_TO_DIRECTION[regionDirection];\n\n                if (controlDirection) {\n                    datas.isControl = true;\n                    datas.isAroundControl = hasClass(inputTarget, prefix(\"around-control\"));\n                    datas.controlDirection = controlDirection;\n                    const resolve = inputTarget.getAttribute(\"data-resolve\");\n\n                    if (resolve) {\n                        datas.resolveAble = resolve;\n                    }\n\n                    const clientPoses = calculateMoveableClientPositions(\n                        state.rootMatrix,\n                        state.renderPoses,\n                        moveableClientRect,\n                    );\n\n\n                    [startClientX, startClientY] = getPosByDirection(clientPoses, controlDirection);\n                }\n            }\n            datas.beforeInfo = { origin: rect.beforeOrigin };\n            datas.afterInfo = { origin: rect.origin };\n            datas.absoluteInfo = {\n                origin: rect.origin,\n                startValue: rect.rotation,\n            };\n\n            const originalFixedPosition = setFixedPosition;\n\n            setFixedPosition = (fixedPosition: number[]) => {\n                const n = state.is3d ? 4 : 3;\n                const [originX, originY] = plus(getOrigin(targetMatrix, n), fixedPosition);\n                const fixedBeforeOrigin = calculate(\n                    offsetMatrix,\n                    convertPositionMatrix([originX, originY], n),\n                );\n                const fixedAfterOrigin = calculate(\n                    allMatrix,\n                    convertPositionMatrix([fixedPosition[0], fixedPosition[1]], n),\n                );\n                originalFixedPosition(fixedPosition);\n                const posDelta = state.posDelta;\n\n                datas.beforeInfo.origin = minus(fixedBeforeOrigin, posDelta);\n                datas.afterInfo.origin = minus(fixedAfterOrigin, posDelta);\n                datas.absoluteInfo.origin = minus(fixedAfterOrigin, posDelta);\n\n                setRotateStartInfo(moveable, datas.beforeInfo, startClientX, startClientY, moveableClientRect);\n                setRotateStartInfo(moveable, datas.afterInfo, startClientX, startClientY, moveableClientRect);\n                setRotateStartInfo(moveable, datas.absoluteInfo, startClientX, startClientY, moveableClientRect);\n            };\n            setFixedDirection = (fixedDirection: number[]) => {\n                const fixedPosition = getPosByDirection([\n                    [0, 0],\n                    [width, 0],\n                    [0, height],\n                    [width, height],\n                ], fixedDirection);\n\n                setFixedPosition(fixedPosition);\n            };\n        }\n\n        datas.startClientX = startClientX;\n        datas.startClientY = startClientY;\n        datas.direction = direction;\n        datas.beforeDirection = beforeDirection;\n        datas.startValue = 0;\n        datas.datas = {};\n\n        setDefaultTransformIndex(moveable, e, \"rotate\");\n\n        let dragStart: OnDragStart | false = false;\n        let resizeStart: OnResizeStart | false = false;\n\n        if (datas.isControl && datas.resolveAble) {\n            const resolveAble = datas.resolveAble;\n\n            if (resolveAble === \"resizable\") {\n                resizeStart = Resizable.dragControlStart(moveable, {\n                    ...(new CustomGesto(\"resizable\").dragStart([0, 0], e)),\n                    parentPosition: datas.controlPosition,\n                    parentFixedPosition: datas.fixedPosition,\n                });\n            }\n        }\n\n        if (!resizeStart) {\n            dragStart = Draggable.dragStart!(\n                moveable,\n                new CustomGesto().dragStart([0, 0], e),\n            );\n        }\n\n        setFixedPosition(getTotalOrigin(moveable));\n        const params = fillParams<OnRotateStart>(moveable, e, {\n            set: (rotatation: number) => {\n                datas.startValue = rotatation * Math.PI / 180;\n            },\n            setFixedDirection,\n            setFixedPosition,\n            ...fillTransformStartEvent(moveable, e),\n            dragStart,\n            resizeStart,\n        });\n        const result = triggerEvent(moveable, \"onRotateStart\", params);\n        datas.isRotate = result !== false;\n        state.snapRenderInfo = {\n            request: e.isRequest,\n        };\n\n        return datas.isRotate ? params : false;\n    },\n    dragControl(\n        moveable: MoveableManagerInterface<RotatableProps & DraggableProps>,\n        e: any,\n    ) {\n        const {\n            datas, clientDistX, clientDistY,\n            parentRotate, parentFlag, isPinch, groupDelta,\n            resolveMatrix,\n        } = e;\n        const {\n            beforeDirection,\n            beforeInfo,\n            afterInfo,\n            absoluteInfo,\n            isRotate,\n            startValue,\n            rect,\n            startClientX,\n            startClientY,\n        } = datas;\n\n        if (!isRotate) {\n            return;\n        }\n\n        resolveTransformEvent(moveable, e, \"rotate\");\n\n        const targetDirection = getTransformDirection(e);\n        const direction = beforeDirection * targetDirection;\n        const {\n            parentMoveable,\n        } = moveable.props;\n\n\n        let beforeDelta = 0;\n        let beforeDist: number;\n        let beforeRotation: number;\n\n        let delta = 0;\n        let dist: number;\n        let rotation: number;\n\n        let absoluteDelta = 0;\n        let absoluteDist: number;\n        let absoluteRotation: number;\n\n        const startRotation = 180 / Math.PI * startValue;\n        const absoluteStartRotation = absoluteInfo.startValue;\n        let isSnap = false;\n        const nextClientX = startClientX + clientDistX;\n        const nextClientY = startClientY + clientDistY;\n\n        if (!parentFlag && \"parentDist\" in e) {\n            const parentDist = e.parentDist;\n\n            beforeDist = parentDist;\n            dist = parentDist;\n            absoluteDist = parentDist;\n        } else if (isPinch || parentFlag) {\n            beforeDist = getAbsoluteDist(parentRotate, beforeDirection, beforeInfo);\n            dist = getAbsoluteDist(parentRotate, direction, afterInfo);\n            absoluteDist = getAbsoluteDist(parentRotate, direction, absoluteInfo);\n        } else {\n            beforeDist = getAbsoluteDistByClient(nextClientX, nextClientY, beforeDirection, beforeInfo);\n            dist = getAbsoluteDistByClient(nextClientX, nextClientY, direction, afterInfo);\n            absoluteDist = getAbsoluteDistByClient(nextClientX, nextClientY, direction, absoluteInfo);\n            isSnap = true;\n        }\n        beforeRotation = startRotation + beforeDist;\n        rotation = startRotation + dist;\n        absoluteRotation = absoluteStartRotation + absoluteDist;\n\n\n        triggerEvent(moveable, \"onBeforeRotate\", fillParams<OnBeforeRotate>(moveable, e, {\n            beforeRotation,\n            rotation,\n            absoluteRotation,\n            setRotation(nextRotation: number) {\n                dist = nextRotation - startRotation;\n                beforeDist = dist;\n                absoluteDist = dist;\n            },\n        }, true));\n\n        [\n            beforeDelta,\n            beforeDist,\n            beforeRotation,\n        ] = getRotateInfo(moveable, rect, beforeInfo, beforeDist, startRotation, isSnap);\n\n        [\n            delta,\n            dist,\n            rotation,\n        ] = getRotateInfo(moveable, rect, afterInfo, dist, startRotation, isSnap);\n\n        [\n            absoluteDelta,\n            absoluteDist,\n            absoluteRotation,\n        ] = getRotateInfo(moveable, rect, absoluteInfo, absoluteDist, absoluteStartRotation, isSnap);\n\n        if (!absoluteDelta && !delta && !beforeDelta && !parentMoveable && !resolveMatrix) {\n            return;\n        }\n\n        const nextTransform = convertTransformFormat(\n            datas, `rotate(${rotation}deg)`, `rotate(${dist}deg)`,\n        );\n        if (resolveMatrix) {\n            datas.fixedPosition = getTranslateFixedPosition(\n                moveable,\n                datas.targetAllTransform,\n                datas.fixedDirection,\n                datas.fixedOffset,\n                datas,\n            );\n        }\n\n        const inverseDist = getRotateDist(moveable, dist, datas);\n        const inverseDelta = minus(\n            plus(groupDelta || [0, 0], inverseDist),\n            datas.prevInverseDist || [0, 0],\n        );\n        datas.prevInverseDist = inverseDist;\n        datas.requestValue = null;\n\n        const dragEvent = fillTransformEvent(\n            moveable,\n            nextTransform,\n            inverseDelta,\n            isPinch,\n            e,\n        );\n\n        let transformEvent: TransformObject = dragEvent;\n        const parentDistance = getDist(\n            [nextClientX, nextClientY],\n            absoluteInfo.startAbsoluteOrigin,\n        ) - absoluteInfo.startDist;\n\n        let resize: OnResize | undefined = undefined;\n\n        if (datas.resolveAble === \"resizable\") {\n            const resizeEvent = Resizable.dragControl(\n                moveable,\n                {\n                    ...setCustomDrag(e, moveable.state, [e.deltaX, e.deltaY], !!isPinch, false, \"resizable\"),\n                    resolveMatrix: true,\n                    parentDistance,\n                },\n            );\n\n            if (resizeEvent) {\n                resize = resizeEvent;\n                transformEvent = fillAfterTransform(transformEvent, resizeEvent, e);\n            }\n        }\n\n        const params = fillParams<OnRotate>(moveable, e, {\n            delta,\n            dist,\n            rotate: rotation,\n            rotation,\n\n            beforeDist,\n            beforeDelta,\n            beforeRotate: beforeRotation,\n            beforeRotation,\n\n            absoluteDist,\n            absoluteDelta,\n            absoluteRotate: absoluteRotation,\n            absoluteRotation,\n\n            isPinch: !!isPinch,\n            resize,\n            ...dragEvent,\n            ...transformEvent,\n        });\n        triggerEvent(moveable, \"onRotate\", params);\n\n        return params;\n    },\n    dragControlEnd(moveable: MoveableManagerInterface<RotatableProps>, e: any) {\n        const { datas } = e;\n\n        if (!datas.isRotate) {\n            return;\n        }\n        datas.isRotate = false;\n\n        const params = fillEndParams<OnRotateEnd>(moveable, e, {});\n\n        triggerEvent(moveable, \"onRotateEnd\", params);\n        return params;\n    },\n    dragGroupControlCondition: dragControlCondition as (moveable: any, e: any) => boolean,\n    dragGroupControlStart(moveable: MoveableGroupInterface<any, any>, e: any) {\n        const { datas } = e;\n        const {\n            left: parentLeft,\n            top: parentTop,\n            beforeOrigin: parentBeforeOrigin,\n        } = moveable.state;\n\n        const params = this.dragControlStart(moveable, e);\n\n        if (!params) {\n            return false;\n        }\n\n        params.set(datas.beforeDirection * moveable.rotation);\n\n        const events = triggerChildAbles(\n            moveable,\n            this,\n            \"dragControlStart\",\n            e,\n            (child, ev) => {\n                const { left, top, beforeOrigin } = child.state;\n                const childClient = plus(\n                    minus([left, top], [parentLeft, parentTop]),\n                    minus(beforeOrigin, parentBeforeOrigin),\n                );\n\n                ev.datas.startGroupClient = childClient;\n                ev.datas.groupClient = childClient;\n                return { ...ev, parentRotate: 0 };\n            },\n        );\n\n        const nextParams: OnRotateGroupStart = {\n            ...params,\n            targets: moveable.props.targets!,\n            events,\n        };\n        const result = triggerEvent(moveable, \"onRotateGroupStart\", nextParams);\n\n        datas.isRotate = result !== false;\n\n        return datas.isRotate ? params : false;\n    },\n    dragGroupControl(moveable: MoveableGroupInterface<any, any>, e: any) {\n        const { datas } = e;\n\n        if (!datas.isRotate) {\n            return;\n        }\n\n        catchEvent(moveable, \"onBeforeRotate\", parentEvent => {\n            triggerEvent(moveable, \"onBeforeRotateGroup\", fillParams<OnBeforeRotateGroup>(moveable, e, {\n                ...parentEvent,\n                targets: moveable.props.targets!,\n            }, true));\n        });\n        const params = this.dragControl(moveable, e);\n\n        if (!params) {\n            return;\n        }\n        const direction = datas.beforeDirection;\n        const parentRotate = params.beforeDist;\n        const rad = parentRotate / 180 * Math.PI;\n        const events = triggerChildAbles(\n            moveable,\n            this,\n            \"dragControl\",\n            e,\n            (_, ev) => {\n                const startGroupClient = ev.datas.startGroupClient;\n                const [prevClientX, prevClientY] = ev.datas.groupClient;\n                const [clientX, clientY] = rotateMatrix(startGroupClient, rad * direction);\n                const delta = [clientX - prevClientX, clientY - prevClientY];\n\n                ev.datas.groupClient = [clientX, clientY];\n                return { ...ev, parentRotate, groupDelta: delta };\n            },\n        );\n        moveable.rotation = direction * params.beforeRotation;\n\n        const nextParams: OnRotateGroup = {\n            targets: moveable.props.targets!,\n            events,\n            set(rotation: number) {\n                moveable.rotation = rotation;\n            },\n            setGroupRotation(rotation: number) {\n                moveable.rotation = rotation;\n            },\n            ...params,\n        };\n\n        triggerEvent(moveable, \"onRotateGroup\", nextParams);\n        return nextParams;\n    },\n    dragGroupControlEnd(moveable: MoveableGroupInterface<any, any>, e: any) {\n        const { isDrag, datas } = e;\n\n        if (!datas.isRotate) {\n            return;\n        }\n\n        this.dragControlEnd(moveable, e);\n        const events = triggerChildAbles(moveable, this, \"dragControlEnd\", e);\n\n        const nextParams = fillEndParams<OnRotateGroupEnd>(moveable, e, {\n            targets: moveable.props.targets!,\n            events,\n        });\n\n        triggerEvent(moveable, \"onRotateGroupEnd\", nextParams);\n        return isDrag;\n    },\n    /**\n     * @method Moveable.Rotatable#request\n     * @param {object} [e] - the Resizable's request parameter\n     * @param {number} [e.deltaRotate=0] -  delta number of rotation\n     * @param {number} [e.rotate=0] - absolute number of moveable's rotation\n     * @return {Moveable.Requester} Moveable Requester\n     * @example\n\n     * // Instantly Request (requestStart - request - requestEnd)\n     * moveable.request(\"rotatable\", { deltaRotate: 10 }, true);\n     *\n     * * moveable.request(\"rotatable\", { rotate: 10 }, true);\n     *\n     * // requestStart\n     * const requester = moveable.request(\"rotatable\");\n     *\n     * // request\n     * requester.request({ deltaRotate: 10 });\n     * requester.request({ deltaRotate: 10 });\n     * requester.request({ deltaRotate: 10 });\n     *\n     * requester.request({ rotate: 10 });\n     * requester.request({ rotate: 20 });\n     * requester.request({ rotate: 30 });\n     *\n     * // requestEnd\n     * requester.requestEnd();\n     */\n    request(moveable: MoveableManagerInterface<RotatableProps>) {\n        const datas = {};\n        let distRotate = 0;\n\n        const startRotation = moveable.getRotation();\n        return {\n            isControl: true,\n            requestStart() {\n                return { datas };\n            },\n            request(e: IObject<any>) {\n                if (\"deltaRotate\" in e) {\n                    distRotate += e.deltaRotate;\n                } else if (\"rotate\" in e) {\n                    distRotate = e.rotate - startRotation;\n                }\n\n                return { datas, parentDist: distRotate };\n            },\n            requestEnd() {\n                return { datas, isDrag: true };\n            },\n        };\n    },\n};\n/**\n * Whether or not target can be rotated. (default: false)\n * @name Moveable.Rotatable#rotatable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.rotatable = true;\n */\n/**\n * You can specify the position of the rotation. (default: \"top\")\n * @name Moveable.Rotatable#rotationPosition\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *   rotationPosition: \"top\",\n * });\n *\n * moveable.rotationPosition = \"bottom\"\n */\n\n/**\n * throttle of angle(degree) when rotate.\n * @name Moveable.Rotatable#throttleRotate\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleRotate = 1;\n */\n\n/**\n * When the rotate starts, the rotateStart event is called.\n * @memberof Moveable.Rotatable\n * @event rotateStart\n * @param {Moveable.Rotatable.OnRotateStart} - Parameters for the rotateStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n\n/**\n* When rotating, the rotate event is called.\n* @memberof Moveable.Rotatable\n* @event rotate\n* @param {Moveable.Rotatable.OnRotate} - Parameters for the rotate event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, { rotatable: true });\n* moveable.on(\"rotate\", ({ target, transform, dist }) => {\n*     target.style.transform = transform;\n* });\n*/\n/**\n * When the rotate finishes, the rotateEnd event is called.\n * @memberof Moveable.Rotatable\n * @event rotateEnd\n * @param {Moveable.Rotatable.OnRotateEnd} - Parameters for the rotateEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n\n/**\n * When the group rotate starts, the `rotateGroupStart` event is called.\n * @memberof Moveable.Rotatable\n * @event rotateGroupStart\n * @param {Moveable.Rotatable.OnRotateGroupStart} - Parameters for the `rotateGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     rotatable: true\n * });\n * moveable.on(\"rotateGroupStart\", ({ targets }) => {\n *     console.log(\"onRotateGroupStart\", targets);\n * });\n */\n\n/**\n* When the group rotate, the `rotateGroup` event is called.\n* @memberof Moveable.Rotatable\n* @event rotateGroup\n* @param {Moveable.Rotatable.OnRotateGroup} - Parameters for the `rotateGroup` event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     target: [].slice.call(document.querySelectorAll(\".target\")),\n*     rotatable: true\n* });\n* moveable.on(\"rotateGroup\", ({ targets, events }) => {\n*     console.log(\"onRotateGroup\", targets);\n*     events.forEach(ev => {\n*         const target = ev.target;\n*         // ev.drag is a drag event that occurs when the group rotate.\n*         const left = ev.drag.beforeDist[0];\n*         const top = ev.drag.beforeDist[1];\n*         const deg = ev.beforeDist;\n*     });\n* });\n*/\n\n/**\n * When the group rotate finishes, the `rotateGroupEnd` event is called.\n * @memberof Moveable.Rotatable\n * @event rotateGroupEnd\n * @param {Moveable.Rotatable.OnRotateGroupEnd} - Parameters for the `rotateGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     rotatable: true\n * });\n * moveable.on(\"rotateGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onRotateGroupEnd\", targets, isDrag);\n * });\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Roundable.tsx",
    "content": "import {\n    prefix, triggerEvent,\n    fillParams, fillEndParams, calculatePosition,\n    fillCSSObject,\n    catchEvent,\n    getComputedStyle,\n} from \"../utils\";\nimport {\n    Renderer, RoundableProps, OnRoundStart,\n    RoundableState, OnRound, ControlPose, OnRoundEnd,\n    MoveableManagerInterface,\n    OnRoundGroup,\n    MoveableGroupInterface,\n    OnRoundGroupStart,\n    OnRoundGroupEnd,\n} from \"../types\";\nimport { splitSpace } from \"@daybrush/utils\";\nimport { setDragStart, getDragDist, calculatePointerDist } from \"../gesto/GestoUtils\";\nimport { minus, plus } from \"@scena/matrix\";\nimport {\n    getRadiusValues,\n    getRadiusStyles,\n    splitRadiusPoses,\n} from \"./roundable/borderRadius\";\nimport { fillChildEvents } from \"../groupUtils\";\n\n\nfunction addBorderRadiusByLine(\n    controlPoses: ControlPose[],\n    lineIndex: number,\n    distX: number,\n    distY: number,\n) {\n    // lineIndex\n    // 0 top\n    // 1 right\n    // 2 bottom\n    // 3 left\n\n    const horizontalsLength = controlPoses.filter(({ virtual, horizontal }) => horizontal && !virtual).length;\n    const verticalsLength = controlPoses.filter(({ virtual, vertical }) => vertical && !virtual).length;\n    let controlIndex = -1;\n\n    //top\n    if (lineIndex === 0) {\n        if (horizontalsLength === 0) {\n            controlIndex = 0;\n        } else if (horizontalsLength === 1) {\n            controlIndex = 1;\n        }\n    }\n    // bottom\n    if (lineIndex === 2) {\n        if (horizontalsLength <= 2) {\n            controlIndex = 2;\n        } else if (horizontalsLength <= 3) {\n            controlIndex = 3;\n        }\n    }\n    // left\n    if (lineIndex === 3) {\n        if (verticalsLength === 0) {\n            controlIndex = 4;\n        } else if (verticalsLength < 4) {\n            controlIndex = 7;\n        }\n    }\n\n    // right\n    if (lineIndex === 1) {\n        if (verticalsLength <= 1) {\n            controlIndex = 5;\n        } else if (verticalsLength <= 2) {\n            controlIndex = 6;\n        }\n    }\n    if (controlIndex === -1 || !controlPoses[controlIndex].virtual) {\n        return;\n    }\n    const controlPoseInfo = controlPoses[controlIndex];\n\n    addBorderRadius(controlPoses, controlIndex);\n\n    if (controlIndex < 4) {\n        controlPoseInfo.pos[0] = distX;\n    } else {\n        controlPoseInfo.pos[1] = distY;\n    }\n}\nfunction addBorderRadius(\n    controlPoses: ControlPose[],\n    index: number,\n) {\n    if (index < 4) {\n        controlPoses.slice(0, index + 1).forEach(info => {\n            info.virtual = false;\n        });\n    } else {\n        if (controlPoses[0].virtual) {\n            controlPoses[0].virtual = false;\n        }\n        controlPoses.slice(4, index + 1).forEach(info => {\n            info.virtual = false;\n        });\n    }\n}\nfunction removeBorderRadius(\n    controlPoses: ControlPose[],\n    index: number,\n) {\n    if (index < 4) {\n        controlPoses.slice(index, 4).forEach(info => {\n            info.virtual = true;\n        });\n    } else {\n        controlPoses.slice(index).forEach(info => {\n            info.virtual = true;\n        });\n    }\n}\nfunction getBorderRadius(\n    borderRadius: string,\n    width: number,\n    height: number,\n    minCounts: number[] = [0, 0],\n    full?: boolean,\n) {\n    let values: string[] = [];\n\n    if (!borderRadius || borderRadius === \"0px\") {\n        values = [];\n    } else {\n        values = splitSpace(borderRadius);\n    }\n\n    return getRadiusValues(values, width, height, 0, 0, minCounts, full);\n}\n\nfunction triggerRoundEvent(\n    moveable: MoveableManagerInterface<RoundableProps, RoundableState>,\n    e: any,\n    dist: number[],\n    delta: number[],\n    nextPoses: ControlPose[],\n) {\n    const state = moveable.state;\n    const {\n        width,\n        height,\n    } = state;\n    const {\n        raws,\n        styles,\n        radiusPoses,\n    } = getRadiusStyles(\n        nextPoses,\n        moveable.props.roundRelative!,\n        width,\n        height,\n    );\n    const {\n        horizontals,\n        verticals,\n    } = splitRadiusPoses(radiusPoses, raws);\n    const borderRadius = styles.join(\" \");\n\n    state.borderRadiusState = borderRadius;\n    const params = fillParams<OnRound>(moveable, e, {\n        horizontals,\n        verticals,\n        borderRadius,\n        width,\n        height,\n        delta,\n        dist,\n        ...fillCSSObject({\n            borderRadius,\n        }, e),\n    });\n    triggerEvent(moveable, \"onRound\", params);\n\n    return params;\n}\n\n\nfunction getStyleBorderRadius(moveable: MoveableManagerInterface<RoundableProps, RoundableState>) {\n    const {\n        style,\n    } = moveable.getState();\n    let borderRadius = style.borderRadius || \"\";\n\n    if (!borderRadius && moveable.props.groupable) {\n        const firstMoveable = moveable.moveables![0];\n        const firstTarget = moveable.getTargets()[0];\n\n\n        if (firstTarget) {\n            if (firstMoveable?.props.target === firstTarget) {\n                borderRadius = moveable.moveables![0]?.state.style.borderRadius ?? \"\";\n                style.borderRadius = borderRadius;\n            } else {\n                borderRadius = getComputedStyle(firstTarget).borderRadius;\n                style.borderRadius = borderRadius;\n            }\n        }\n\n    }\n    return borderRadius;\n}\n\n/**\n * @namespace Moveable.Roundable\n * @description Whether to show and drag or double click border-radius\n */\n\nexport default {\n    name: \"roundable\",\n    props: [\n        \"roundable\",\n        \"roundRelative\",\n        \"minRoundControls\",\n        \"maxRoundControls\",\n        \"roundClickable\",\n        \"roundPadding\",\n        \"isDisplayShadowRoundControls\",\n    ] as const,\n    events: [\n        \"roundStart\",\n        \"round\",\n        \"roundEnd\",\n        \"roundGroupStart\",\n        \"roundGroup\",\n        \"roundGroupEnd\",\n    ] as const,\n    css: [\n        `.control.border-radius {\nbackground: #d66;\ncursor: pointer;\nz-index: 3;\n}`,\n        `.control.border-radius.vertical {\nbackground: #d6d;\nz-index: 2;\n}`,\n        `.control.border-radius.virtual {\nopacity: 0.5;\nz-index: 1;\n}`,\n        `:host.round-line-clickable .line.direction {\ncursor: pointer;\n}`,\n    ],\n    className(moveable: MoveableManagerInterface<RoundableProps, RoundableState>) {\n        const roundClickable = moveable.props.roundClickable;\n\n        return roundClickable === true || roundClickable === \"line\" ? prefix(\"round-line-clickable\") : \"\";\n    },\n    requestStyle(): Array<keyof CSSStyleDeclaration> {\n        return [\"borderRadius\"];\n    },\n    requestChildStyle(): Array<keyof CSSStyleDeclaration> {\n        return [\"borderRadius\"];\n    },\n    render(moveable: MoveableManagerInterface<RoundableProps, RoundableState>, React: Renderer): any {\n        const {\n            target,\n            width,\n            height,\n            allMatrix,\n            is3d,\n            left,\n            top,\n            borderRadiusState,\n        } = moveable.getState();\n\n        const {\n            minRoundControls = [0, 0],\n            maxRoundControls = [4, 4],\n            zoom,\n            roundPadding = 0,\n            isDisplayShadowRoundControls,\n            groupable,\n        } = moveable.props;\n\n        if (!target) {\n            return null;\n        }\n\n        const borderRadius = borderRadiusState || getStyleBorderRadius(moveable);\n        const n = is3d ? 4 : 3;\n        const radiusValues = getBorderRadius(\n            borderRadius,\n            width, height,\n            minRoundControls,\n            true,\n        );\n\n        if (!radiusValues) {\n            return null;\n        }\n        let verticalCount = 0;\n        let horizontalCount = 0;\n        const basePos = groupable ? [0, 0] : [left, top];\n\n        return radiusValues.map((v, i) => {\n            const horizontal = v.horizontal;\n            const vertical = v.vertical;\n            const direction = v.direction || \"\";\n            const originalPos = [...v.pos];\n\n            horizontalCount += Math.abs(horizontal);\n            verticalCount += Math.abs(vertical);\n\n\n            if (horizontal && direction.indexOf(\"n\") > -1) {\n                originalPos[1] -= roundPadding;\n            }\n            if (vertical && direction.indexOf(\"w\") > -1) {\n                originalPos[0] -= roundPadding;\n            }\n            if (horizontal && direction.indexOf(\"s\") > -1) {\n                originalPos[1] += roundPadding;\n            }\n            if (vertical && direction.indexOf(\"e\") > -1) {\n                originalPos[0] += roundPadding;\n            }\n            const pos = minus(calculatePosition(allMatrix, originalPos, n), basePos);\n            const isDisplayVerticalShadow\n                = isDisplayShadowRoundControls\n                && isDisplayShadowRoundControls !== \"horizontal\";\n            const isDisplay = v.vertical\n                ? verticalCount <= maxRoundControls[1] && (isDisplayVerticalShadow || !v.virtual)\n                : horizontalCount <= maxRoundControls[0] && (isDisplayShadowRoundControls || !v.virtual);\n\n            return <div key={`borderRadiusControl${i}`}\n                className={prefix(\n                    \"control\", \"border-radius\",\n                    v.vertical ? \"vertical\" : \"\",\n                    v.virtual ? \"virtual\" : \"\",\n                )}\n                data-radius-index={i}\n                style={{\n                    display: isDisplay ? \"block\" : \"none\",\n                    transform: `translate(${pos[0]}px, ${pos[1]}px) scale(${zoom})`,\n                }}></div>;\n        });\n    },\n    dragControlCondition(moveable: any, e: any) {\n        if (!e.inputEvent || e.isRequest) {\n            return false;\n        }\n        const className = (e.inputEvent.target.getAttribute(\"class\") || \"\");\n\n        return className.indexOf(\"border-radius\") > -1\n            || (className.indexOf(\"moveable-line\") > -1 && className.indexOf(\"moveable-direction\") > -1);\n    },\n    dragGroupControlCondition(moveable: any, e: any) {\n        return this.dragControlCondition(moveable, e);\n    },\n    dragControlStart(moveable: MoveableManagerInterface<RoundableProps, RoundableState>, e: any) {\n        const { inputEvent, datas } = e;\n        const inputTarget = inputEvent.target;\n        const className = (inputTarget.getAttribute(\"class\") || \"\");\n        const isControl = className.indexOf(\"border-radius\") > -1;\n        const isLine = className.indexOf(\"moveable-line\") > -1 && className.indexOf(\"moveable-direction\") > -1;\n        const controlIndex = isControl ? parseInt(inputTarget.getAttribute(\"data-radius-index\"), 10) : -1;\n        let lineIndex = -1;\n\n        if (isLine) {\n            const indexAttr = inputTarget.getAttribute(\"data-line-key\")! || \"\";\n\n            if (indexAttr) {\n                lineIndex = parseInt(indexAttr.replace(/render-line-/g, \"\"), 10);\n\n                if (isNaN(lineIndex)) {\n                    lineIndex = -1;\n                }\n            }\n        }\n\n        if (!isControl && !isLine) {\n            return false;\n        }\n\n        const params = fillParams<OnRoundStart>(moveable, e, {});\n\n        const result = triggerEvent(\n            moveable, \"onRoundStart\", params);\n\n        if (result === false) {\n            return false;\n        }\n\n        datas.lineIndex = lineIndex;\n        datas.controlIndex = controlIndex;\n        datas.isControl = isControl;\n        datas.isLine = isLine;\n\n        setDragStart(moveable, e);\n\n        const {\n            roundRelative,\n            minRoundControls = [0, 0],\n        } = moveable.props;\n        const state = moveable.state;\n        const {\n            width,\n            height,\n        } = state;\n\n        datas.isRound = true;\n        datas.prevDist = [0, 0];\n        const borderRadius = getStyleBorderRadius(moveable);\n        const controlPoses = getBorderRadius(\n            borderRadius || \"\",\n            width,\n            height,\n            minRoundControls,\n            true,\n        ) || [];\n\n        datas.controlPoses = controlPoses;\n\n        state.borderRadiusState = getRadiusStyles(\n            controlPoses,\n            roundRelative!,\n            width,\n            height,\n        ).styles.join(\" \");\n        return params;\n    },\n    dragControl(moveable: MoveableManagerInterface<RoundableProps, RoundableState>, e: any) {\n        const { datas } = e;\n        const controlPoses = datas.controlPoses as ControlPose[];\n\n        if (!datas.isRound || !datas.isControl || !controlPoses.length) {\n            return false;\n        }\n        const index = datas.controlIndex as number;\n\n        const [distX, distY] = getDragDist(e);\n        const dist = [distX, distY];\n        const delta = minus(dist, datas.prevDist);\n        const {\n            maxRoundControls = [4, 4],\n        } = moveable.props;\n        const { width, height } = moveable.state;\n        const selectedControlPose = controlPoses[index];\n\n        const selectedVertical = selectedControlPose.vertical;\n        const selectedHorizontal = selectedControlPose.horizontal;\n\n        // 0: [0, 1, 2, 3] maxCount === 1\n        // 0: [0, 2] maxCount === 2\n        // 1: [1, 3] maxCount === 2\n\n        // 0: [0] maxCount === 3\n        // 1: [1, 3] maxCount === 3\n\n        const dists = controlPoses.map(pose => {\n            const { horizontal, vertical } = pose;\n            const poseDist = [\n                horizontal * selectedHorizontal * dist[0],\n                vertical * selectedVertical * dist[1],\n            ];\n            if (horizontal) {\n                if (maxRoundControls[0] === 1) {\n                    return poseDist;\n                } else if (maxRoundControls[0] < 4 && horizontal !== selectedHorizontal) {\n                    return poseDist;\n                }\n            } else if (maxRoundControls[1] === 0) {\n                poseDist[1] = vertical * selectedHorizontal * dist[0] / width * height;\n\n                return poseDist;\n            } else if (selectedVertical) {\n                if (maxRoundControls[1] === 1) {\n                    return poseDist;\n                } else if (maxRoundControls[1] < 4 && vertical !== selectedVertical) {\n                    return poseDist;\n                }\n            }\n            return [0, 0];\n        });\n\n        dists[index] = dist;\n        const nextPoses = controlPoses.map((info, i) => {\n            return {\n                ...info,\n                pos: plus(info.pos, dists[i]),\n            };\n        });\n\n        if (index < 4) {\n            nextPoses.slice(0, index + 1).forEach(info => {\n                info.virtual = false;\n            });\n        } else {\n            nextPoses.slice(4, index + 1).forEach(info => {\n                info.virtual = false;\n            });\n        }\n\n        datas.prevDist = [distX, distY];\n\n        return triggerRoundEvent(\n            moveable,\n            e,\n            dist,\n            delta,\n            nextPoses,\n        );\n    },\n    dragControlEnd(moveable: MoveableManagerInterface<RoundableProps, RoundableState>, e: any) {\n        const state = moveable.state;\n\n        state.borderRadiusState = \"\";\n        const { datas, isDouble } = e;\n        if (!datas.isRound) {\n            return false;\n        }\n        const {\n            isControl,\n            controlIndex,\n            isLine,\n            lineIndex,\n        } = datas;\n        const controlPoses = datas.controlPoses as ControlPose[];\n        const length = controlPoses.filter(({ virtual }) => virtual).length;\n        const {\n            roundClickable = true,\n        } = moveable.props;\n\n        if (isDouble && roundClickable) {\n            if (isControl && (roundClickable === true || roundClickable === \"control\")) {\n                removeBorderRadius(controlPoses, controlIndex);\n            } else if (isLine && (roundClickable === true || roundClickable === \"line\")) {\n                const [distX, distY] = calculatePointerDist(moveable, e);\n\n                addBorderRadiusByLine(controlPoses, lineIndex, distX, distY);\n            }\n\n            if (length !== controlPoses.filter(({ virtual }) => virtual).length) {\n                triggerRoundEvent(\n                    moveable,\n                    e,\n                    [0, 0],\n                    [0, 0],\n                    controlPoses,\n                );\n            }\n        }\n        const params = fillEndParams<OnRoundEnd>(moveable, e, {});\n\n        triggerEvent(moveable, \"onRoundEnd\", params);\n        state.borderRadiusState = \"\";\n        return params;\n    },\n    dragGroupControlStart(moveable: MoveableGroupInterface<RoundableProps, RoundableState>, e: any) {\n        const result = this.dragControlStart(moveable, e);\n\n        if (!result) {\n            return false;\n        }\n\n        const moveables = moveable.moveables;\n        const targets = moveable.props.targets!;\n        const events = fillChildEvents(moveable, \"roundable\", e);\n\n        const nextParams: OnRoundGroupStart = {\n            targets: moveable.props.targets!,\n            events: events.map((ev, i) => {\n                return {\n                    ...ev,\n                    target: targets[i],\n                    moveable: moveables[i],\n                    currentTarget: moveables[i],\n                };\n            }),\n            ...result,\n        };\n\n        triggerEvent(moveable, \"onRoundGroupStart\", nextParams);\n        return result;\n    },\n    dragGroupControl(moveable: MoveableGroupInterface<RoundableProps, RoundableState>, e: any) {\n        const result = this.dragControl(moveable, e);\n\n\n        if (!result) {\n            return false;\n        }\n\n        const moveables = moveable.moveables;\n        const targets = moveable.props.targets!;\n        const events = fillChildEvents(moveable, \"roundable\", e);\n\n        const nextParams: OnRoundGroup = {\n            targets: moveable.props.targets!,\n            events: events.map((ev, i) => {\n                return {\n                    ...ev,\n                    target: targets[i],\n                    moveable: moveables[i],\n                    currentTarget: moveables[i],\n                    ...fillCSSObject({\n                        borderRadius: result.borderRadius,\n                    }, ev),\n                };\n            }),\n            ...result,\n        };\n\n        triggerEvent(moveable, \"onRoundGroup\", nextParams);\n        return nextParams;\n    },\n    dragGroupControlEnd(moveable: MoveableGroupInterface<RoundableProps, RoundableState>, e: any) {\n        const moveables = moveable.moveables;\n        const targets = moveable.props.targets!;\n        const events = fillChildEvents(moveable, \"roundable\", e);\n\n        catchEvent(moveable, \"onRound\", parentEvent => {\n            const nextParams: OnRoundGroup = {\n                targets: moveable.props.targets!,\n                events: events.map((ev, i) => {\n                    return {\n                        ...ev,\n                        target: targets[i],\n                        moveable: moveables[i],\n                        currentTarget: moveables[i],\n                        ...fillCSSObject({\n                            borderRadius: parentEvent.borderRadius,\n                        }, ev),\n                    };\n                }),\n                ...parentEvent,\n            };\n            triggerEvent(moveable, \"onRoundGroup\", nextParams);\n        });\n        const result = this.dragControlEnd(moveable, e);\n\n        if (!result) {\n            return false;\n        }\n        const nextParams: OnRoundGroupEnd = {\n            targets: moveable.props.targets!,\n            events: events.map((ev, i) => {\n                return {\n                    ...ev,\n                    target: targets[i],\n                    moveable: moveables[i],\n                    currentTarget: moveables[i],\n                    lastEvent: ev.datas?.lastEvent,\n                };\n            }),\n            ...result,\n        };\n\n        triggerEvent(moveable, \"onRoundGroupEnd\", nextParams);\n        return nextParams;\n    },\n    unset(moveable: MoveableManagerInterface<RoundableProps, RoundableState>) {\n        moveable.state.borderRadiusState = \"\";\n    },\n};\n/**\n * Whether to show and drag or double click border-radius, (default: false)\n * @name Moveable.Roundable#roundable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     roundable: true,\n *     roundRelative: false,\n * });\n * moveable.on(\"roundStart\", e => {\n *     console.log(e);\n * }).on(\"round\", e => {\n *     e.target.style.borderRadius = e.borderRadius;\n * }).on(\"roundEnd\", e => {\n *     console.log(e);\n * });\n */\n/**\n * % Can be used instead of the absolute px\n * @name Moveable.Roundable#roundRelative\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     roundable: true,\n *     roundRelative: false,\n * });\n * moveable.on(\"roundStart\", e => {\n *     console.log(e);\n * }).on(\"round\", e => {\n *     e.target.style.borderRadius = e.borderRadius;\n * }).on(\"roundEnd\", e => {\n *     console.log(e);\n * });\n */\n/**\n * Minimum number of round controls. It moves in proportion by control. [horizontal, vertical] (default: [0, 0])\n * @name Moveable.Roundable#minRoundControls\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     roundable: true,\n *     roundRelative: false,\n *     minRoundControls: [0, 0],\n * });\n * moveable.minRoundControls = [1, 0];\n */\n/**\n * Maximum number of round controls. It moves in proportion by control. [horizontal, vertical] (default: [4, 4])\n * @name Moveable.Roundable#maxRoundControls\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     roundable: true,\n *     roundRelative: false,\n *     maxRoundControls: [4, 4],\n * });\n * moveable.maxRoundControls = [1, 0];\n */\n/**\n * Whether you can add/delete round controls by double-clicking a line or control.\n * @name Moveable.Roundable#roundClickable\n * @default true\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     roundable: true,\n *     roundRelative: false,\n *     roundClickable: true,\n * });\n * moveable.roundClickable = false;\n */\n\n/**\n * Whether to show a round control that does not actually exist as a shadow\n * @name Moveable.Roundable#isDisplayShadowRoundControls\n * @default false\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     roundable: true,\n *     isDisplayShadowRoundControls: false,\n * });\n * moveable.isDisplayShadowRoundControls = true;\n */\n\n\n/**\n * The padding value of the position of the round control\n * @name Moveable.Roundable#roundPadding\n * @default false\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     roundable: true,\n *     roundPadding: 0,\n * });\n * moveable.roundPadding = 15;\n */\n\n/**\n * When drag start the clip area or controls, the `roundStart` event is called.\n * @memberof Moveable.Roundable\n * @event roundStart\n * @param {Moveable.Roundable.OnRoundStart} - Parameters for the `roundStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     roundable: true,\n *     roundRelative: false,\n * });\n * moveable.on(\"roundStart\", e => {\n *     console.log(e);\n * }).on(\"round\", e => {\n *     e.target.style.borderRadius = e.borderRadius;\n * }).on(\"roundEnd\", e => {\n *     console.log(e);\n * });\n */\n\n\n/**\n * When drag or double click the border area or controls, the `round` event is called.\n * @memberof Moveable.Roundable\n * @event round\n * @param {Moveable.Roundable.OnRound} - Parameters for the `round` event\n * @example\n  * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     roundable: true,\n *     roundRelative: false,\n * });\n * moveable.on(\"roundStart\", e => {\n *     console.log(e);\n * }).on(\"round\", e => {\n *     e.target.style.borderRadius = e.borderRadius;\n * }).on(\"roundEnd\", e => {\n *     console.log(e);\n * });\n */\n\n\n/**\n * When drag end the border area or controls, the `roundEnd` event is called.\n * @memberof Moveable.Roundable\n * @event roundEnd\n * @param {Moveable.Roundable.onRoundEnd} - Parameters for the `roundEnd` event\n * @example\n  * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     roundable: true,\n *     roundRelative: false,\n * });\n * moveable.on(\"roundStart\", e => {\n *     console.log(e);\n * }).on(\"round\", e => {\n *     e.target.style.borderRadius = e.borderRadius;\n * }).on(\"roundEnd\", e => {\n *     console.log(e);\n * });\n */\n\n\n/**\n * When drag start the clip area or controls, the `roundGroupStart` event is called.\n * @memberof Moveable.Roundable\n * @event roundGroupStart\n * @param {Moveable.Roundable.OnRoundGroupStart} - Parameters for the `roundGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     targets: [target1, target2, target3],\n *     roundable: true,\n * });\n * moveable.on(\"roundGroupStart\", e => {\n *     console.log(e.targets);\n * }).on(\"roundGroup\", e => {\n *   e.events.forEach(ev => {\n *       ev.target.style.cssText += ev.cssText;\n *   });\n * }).on(\"roundGroupEnd\", e => {\n *     console.log(e);\n * });\n */\n\n\n/**\n * When drag or double click the border area or controls, the `roundGroup` event is called.\n * @memberof Moveable.Roundable\n * @event roundGroup\n * @param {Moveable.Roundable.OnRoundGroup} - Parameters for the `roundGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     targets: [target1, target2, target3],\n *     roundable: true,\n * });\n * moveable.on(\"roundGroupStart\", e => {\n *     console.log(e.targets);\n * }).on(\"roundGroup\", e => {\n *   e.events.forEach(ev => {\n *       ev.target.style.cssText += ev.cssText;\n *   });\n * }).on(\"roundGroupEnd\", e => {\n *     console.log(e);\n * });\n */\n\n\n/**\n * When drag end the border area or controls, the `roundGroupEnd` event is called.\n * @memberof Moveable.Roundable\n * @event roundGroupEnd\n * @param {Moveable.Roundable.onRoundGroupEnd} - Parameters for the `roundGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     targets: [target1, target2, target3],\n *     roundable: true,\n * });\n * moveable.on(\"roundGroupStart\", e => {\n *     console.log(e.targets);\n * }).on(\"roundGroup\", e => {\n *     e.events.forEach(ev => {\n *         ev.target.style.cssText += ev.cssText;\n *     });\n * }).on(\"roundGroupEnd\", e => {\n *     console.log(e);\n * });\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Scalable.ts",
    "content": "import {\n    triggerEvent, multiply2,\n    fillParams, fillEndParams, getAbsolutePosesByState,\n    catchEvent, getOffsetSizeDist, getDirectionCondition,\n    getDirectionViewClassName, getTotalDirection, sign, countEach, abs,\n} from \"../utils\";\nimport { MIN_SCALE } from \"../consts\";\nimport {\n    setDragStart, resolveTransformEvent,\n    convertTransformFormat,\n    getScaleDist,\n    fillTransformStartEvent,\n    fillTransformEvent,\n    setDefaultTransformIndex,\n    getTranslateFixedPosition,\n} from \"../gesto/GestoUtils\";\nimport { getRenderDirections } from \"../renderDirections\";\nimport {\n    ScalableProps, OnScaleGroup, OnScaleGroupEnd,\n    OnScaleGroupStart, DraggableProps, OnDragStart,\n    SnappableState, GroupableProps, OnScaleStart,\n    OnScale, OnScaleEnd, MoveableManagerInterface, MoveableGroupInterface,\n    OnBeforeScaleGroup,\n    OnBeforeScale,\n} from \"../types\";\nimport {\n    fillChildEvents,\n    startChildDist,\n    triggerChildAbles,\n} from \"../groupUtils\";\nimport Draggable from \"./Draggable\";\nimport { calculate, createRotateMatrix, plus, minus } from \"@scena/matrix\";\nimport CustomGesto from \"../gesto/CustomGesto\";\nimport { checkSnapScale } from \"./Snappable\";\nimport {\n    isArray, IObject, getDist,\n    throttle,\n    calculateBoundSize,\n} from \"@daybrush/utils\";\nimport { getFixedDirectionInfo } from \"../utils/getFixedDirection\";\n\nconst directionCondition = getDirectionCondition(\"scalable\");\n\n/**\n * @namespace Scalable\n * @memberof Moveable\n * @description Scalable indicates whether the target's x and y can be scale of transform.\n */\nexport default {\n    name: \"scalable\",\n    ableGroup: \"size\",\n    canPinch: true,\n    props: [\n        \"scalable\",\n        \"throttleScale\",\n        \"renderDirections\",\n        \"keepRatio\",\n        \"edge\",\n        \"displayAroundControls\",\n    ] as const,\n    events: [\n        \"scaleStart\",\n        \"beforeScale\",\n        \"scale\",\n        \"scaleEnd\",\n        \"scaleGroupStart\",\n        \"beforeScaleGroup\",\n        \"scaleGroup\",\n        \"scaleGroupEnd\",\n    ] as const,\n    render: getRenderDirections(\"scalable\"),\n    dragControlCondition: directionCondition,\n    viewClassName: getDirectionViewClassName(\"scalable\"),\n    dragControlStart(\n        moveable: MoveableManagerInterface<ScalableProps & DraggableProps, SnappableState>,\n        e: any) {\n        const { datas, isPinch, inputEvent, parentDirection } = e;\n\n        const direction = getTotalDirection(\n            parentDirection,\n            isPinch,\n            inputEvent,\n            datas,\n        );\n        const {\n            width,\n            height,\n            targetTransform,\n            target,\n            pos1,\n            pos2,\n            pos4,\n        } = moveable.state;\n\n        if (!direction || !target) {\n            return false;\n        }\n        if (!isPinch) {\n            setDragStart(moveable, e);\n        }\n        datas.datas = {};\n        datas.transform = targetTransform;\n        datas.prevDist = [1, 1];\n        datas.direction = direction;\n        datas.startOffsetWidth = width;\n        datas.startOffsetHeight = height;\n        datas.startValue = [1, 1];\n\n        // const scaleWidth = getDist(pos1, pos2);\n        // const scaleHeight = getDist(pos2, pos4);\n        const isWidth = (!direction[0] && !direction[1]) || direction[0] || !direction[1];\n\n        // datas.scaleWidth = scaleWidth;\n        // datas.scaleHeight = scaleHeight;\n        // datas.scaleXRatio = scaleWidth / width;\n        // datas.scaleYRatio = scaleHeight / height;\n\n        setDefaultTransformIndex(moveable, e, \"scale\");\n\n        datas.isWidth = isWidth;\n\n\n        function setRatio(ratio: number) {\n            datas.ratio = ratio && isFinite(ratio) ? ratio : 0;\n        }\n\n        datas.startPositions = getAbsolutePosesByState(moveable.state);\n        function setFixedDirection(fixedDirection: number[]) {\n            const result = getFixedDirectionInfo(datas.startPositions, fixedDirection);\n\n            datas.fixedDirection = result.fixedDirection;\n            datas.fixedPosition = result.fixedPosition;\n            datas.fixedOffset = result.fixedOffset;\n        }\n\n        datas.setFixedDirection = setFixedDirection;\n        setRatio(getDist(pos1, pos2) / getDist(pos2, pos4));\n        setFixedDirection([-direction[0], -direction[1]]);\n\n        const setMinScaleSize = (min: number[]) => {\n            datas.minScaleSize = min;\n        };\n        const setMaxScaleSize = (max: number[]) => {\n            datas.maxScaleSize = max;\n        };\n        // const setMinScale = (min: number[]) => {\n        // };\n        // const setMaxScale = (max: number[]) => {\n        // };\n\n        setMinScaleSize([-Infinity, -Infinity]);\n        setMaxScaleSize([Infinity, Infinity]);\n        const params = fillParams<OnScaleStart>(moveable, e, {\n            direction,\n            set: (scale: number[]) => {\n                datas.startValue = scale;\n            },\n            setRatio,\n            setFixedDirection,\n            setMinScaleSize,\n            setMaxScaleSize,\n            ...fillTransformStartEvent(moveable, e),\n            dragStart: Draggable.dragStart(\n                moveable,\n                new CustomGesto().dragStart([0, 0], e),\n            ) as OnDragStart,\n        });\n        const result = triggerEvent(moveable, \"onScaleStart\", params);\n\n        datas.startFixedDirection = datas.fixedDirection;\n\n        if (result !== false) {\n            datas.isScale = true;\n            moveable.state.snapRenderInfo = {\n                request: e.isRequest,\n                direction,\n            };\n\n        }\n        return datas.isScale ? params : false;\n    },\n    dragControl(\n        moveable: MoveableManagerInterface<ScalableProps & DraggableProps & GroupableProps, SnappableState>,\n        e: any) {\n        resolveTransformEvent(moveable, e, \"scale\");\n        const {\n            datas,\n            parentKeepRatio,\n            parentFlag,\n            isPinch,\n            dragClient,\n            isRequest,\n            useSnap,\n            resolveMatrix,\n        } = e;\n        const {\n            prevDist,\n            direction,\n            startOffsetWidth,\n            startOffsetHeight,\n            isScale,\n            startValue,\n            isWidth,\n            ratio,\n        } = datas;\n\n        if (!isScale) {\n            return false;\n        }\n\n        const props = moveable.props;\n        const {\n            throttleScale,\n            parentMoveable,\n        } = props;\n        let sizeDirection = direction;\n\n        if (!direction[0] && !direction[1]) {\n            sizeDirection = [1, 1];\n        }\n        const keepRatio = (ratio && (parentKeepRatio != null ? parentKeepRatio : props.keepRatio)) || false;\n        const state = moveable.state;\n\n        const tempScaleValue = [\n            startValue[0],\n            startValue[1],\n        ];\n\n        function getNextScale() {\n            const {\n                distWidth,\n                distHeight,\n            } = getOffsetSizeDist(sizeDirection, keepRatio, datas, e);\n\n\n            const distX = startOffsetWidth ? (startOffsetWidth + distWidth) / startOffsetWidth : 1;\n            const distY = startOffsetHeight ? (startOffsetHeight + distHeight) / startOffsetHeight : 1;\n\n            if (!startValue[0]) {\n                tempScaleValue[0] = distWidth / startOffsetWidth;\n            }\n            if (!startValue[1]) {\n                tempScaleValue[1] = distHeight / startOffsetHeight;\n            }\n            let scaleX = (sizeDirection[0] || keepRatio ? distX : 1) * tempScaleValue[0];\n            let scaleY = (sizeDirection[1] || keepRatio ? distY : 1) * tempScaleValue[1];\n\n            if (scaleX === 0) {\n                scaleX = sign(prevDist[0]) * MIN_SCALE;\n            }\n            if (scaleY === 0) {\n                scaleY = sign(prevDist[1]) * MIN_SCALE;\n            }\n            return [scaleX, scaleY];\n        }\n\n\n        let scale = getNextScale();\n\n        if (!isPinch && moveable.props.groupable) {\n            const snapRenderInfo = state.snapRenderInfo || {};\n            const stateDirection = snapRenderInfo.direction;\n\n            if (isArray(stateDirection) && (stateDirection[0] || stateDirection[1])) {\n                state.snapRenderInfo = { direction, request: e.isRequest };\n            }\n        }\n\n        triggerEvent(moveable, \"onBeforeScale\", fillParams<OnBeforeScale>(moveable, e, {\n            scale,\n            setFixedDirection(nextFixedDirection: number[]) {\n                datas.setFixedDirection(nextFixedDirection);\n\n                scale = getNextScale();\n                return scale;\n            },\n            startFixedDirection: datas.startFixedDirection,\n            setScale(nextScale: number[]) {\n                scale = nextScale;\n            },\n        }, true));\n\n        let dist = [\n            scale[0] / tempScaleValue[0],\n            scale[1] / tempScaleValue[1],\n        ];\n        let fixedPosition = dragClient;\n        let snapDist = [0, 0];\n\n        const distSign = sign(dist[0] * dist[1]);\n        const isSelfPinch = !dragClient && !parentFlag && isPinch;\n\n        if (isSelfPinch || resolveMatrix) {\n            fixedPosition = getTranslateFixedPosition(\n                moveable,\n                datas.targetAllTransform,\n                [0, 0],\n                [0, 0],\n                datas,\n            );\n        } else if (!dragClient) {\n            fixedPosition = datas.fixedPosition;\n        }\n        if (!isPinch) {\n            snapDist = checkSnapScale(\n                moveable,\n                dist,\n                direction,\n                !useSnap && isRequest,\n                datas,\n            );\n        }\n\n        if (keepRatio) {\n            if (sizeDirection[0] && sizeDirection[1] && snapDist[0] && snapDist[1]) {\n                if (Math.abs(snapDist[0] * startOffsetWidth) > Math.abs(snapDist[1] * startOffsetHeight)) {\n                    snapDist[1] = 0;\n                } else {\n                    snapDist[0] = 0;\n                }\n            }\n\n            const isNoSnap = !snapDist[0] && !snapDist[1];\n\n            if (isNoSnap) {\n\n                // throttle scale value (not absolute scale size)\n                if (isWidth) {\n                    dist[0] = throttle(dist[0] * tempScaleValue[0], throttleScale!) / tempScaleValue[0];\n                } else {\n                    dist[1] = throttle(dist[1] * tempScaleValue[1], throttleScale!) / tempScaleValue[1];\n                }\n            }\n            if (\n                (sizeDirection[0] && !sizeDirection[1])\n                || (snapDist[0] && !snapDist[1])\n                || (isNoSnap && isWidth)\n            ) {\n                dist[0] += snapDist[0];\n                const snapHeight = startOffsetWidth * dist[0] * tempScaleValue[0] / ratio;\n\n                dist[1] = sign(distSign * dist[0]) * abs(snapHeight / startOffsetHeight / tempScaleValue[1]);\n            } else if (\n                (!sizeDirection[0] && sizeDirection[1])\n                || (!snapDist[0] && snapDist[1])\n                || (isNoSnap && !isWidth)\n            ) {\n                dist[1] += snapDist[1];\n                const snapWidth = startOffsetHeight * dist[1] * tempScaleValue[1] * ratio;\n\n                dist[0] = sign(distSign * dist[1]) * abs(snapWidth / startOffsetWidth / tempScaleValue[0]);\n            }\n        } else {\n            dist[0] += snapDist[0];\n            dist[1] += snapDist[1];\n\n            if (!snapDist[0]) {\n                dist[0] = throttle(dist[0] * tempScaleValue[0], throttleScale!) / tempScaleValue[0];\n            }\n            if (!snapDist[1]) {\n                dist[1] = throttle(dist[1] * tempScaleValue[1], throttleScale!) / tempScaleValue[1];\n            }\n        }\n\n        if (dist[0] === 0) {\n            dist[0] = sign(prevDist[0]) * MIN_SCALE;\n        }\n        if (dist[1] === 0) {\n            dist[1] = sign(prevDist[1]) * MIN_SCALE;\n        }\n        scale = multiply2(dist, [tempScaleValue[0], tempScaleValue[1]]);\n\n\n        const startOffsetSize = [\n            startOffsetWidth,\n            startOffsetHeight,\n        ];\n        let scaleSize = [\n            startOffsetWidth * scale[0],\n            startOffsetHeight * scale[1],\n        ];\n\n        scaleSize = calculateBoundSize(\n            scaleSize,\n            datas.minScaleSize,\n            datas.maxScaleSize,\n            keepRatio ? ratio : false,\n        );\n\n        // if (keepRatio && (isGroup || keepRatioFinally)) {\n        //     if (isWidth) {\n        //         boundingHeight = boundingWidth / ratio;\n        //     } else {\n        //         boundingWidth = boundingHeight * ratio;\n        //     }\n        // }\n        scale = countEach(2, i => {\n            return startOffsetSize[i] ? scaleSize[i] / startOffsetSize[i] : scaleSize[i];\n        });\n        dist = countEach(2, i => {\n            return scale[i] / tempScaleValue[i];\n        });\n\n        const delta = countEach(2, i => prevDist[i] ? dist[i] / prevDist[i] : dist[i]);\n\n\n        const distText = `scale(${dist.join(\", \")})`;\n        const scaleText = `scale(${scale.join(\", \")})`;\n        const nextTransform = convertTransformFormat(\n            datas, scaleText, distText);\n        const isZeroScale = !startValue[0] || !startValue[1];\n\n        const inverseDist = getScaleDist(\n            moveable,\n            isZeroScale ? scaleText : distText,\n            datas.fixedDirection,\n            fixedPosition,\n            datas.fixedOffset,\n            datas,\n            isZeroScale,\n        );\n        const inverseDelta = isSelfPinch ? inverseDist : minus(inverseDist, datas.prevInverseDist || [0, 0]);\n\n        datas.prevDist = dist;\n        datas.prevInverseDist = inverseDist;\n        if (\n            scale[0] === prevDist[0] && scale[1] === prevDist[1]\n            && inverseDelta.every(num => !num)\n            && !parentMoveable\n            && !isSelfPinch\n        ) {\n            return false;\n        }\n\n\n        const params = fillParams<OnScale>(moveable, e, {\n            offsetWidth: startOffsetWidth,\n            offsetHeight: startOffsetHeight,\n            direction,\n\n            scale,\n            dist,\n            delta,\n\n            isPinch: !!isPinch,\n            ...fillTransformEvent(\n                moveable,\n                nextTransform,\n                inverseDelta,\n                isPinch,\n                e,\n            ),\n        });\n        triggerEvent(moveable, \"onScale\", params);\n\n        return params;\n    },\n    dragControlEnd(moveable: MoveableManagerInterface<ScalableProps>, e: any) {\n        const { datas } = e;\n        if (!datas.isScale) {\n            return false;\n        }\n\n        datas.isScale = false;\n\n        const scaleEndParam = fillEndParams<OnScaleEnd>(moveable, e, {});\n        triggerEvent(moveable, \"onScaleEnd\", scaleEndParam);\n        return scaleEndParam;\n    },\n    dragGroupControlCondition: directionCondition,\n    dragGroupControlStart(moveable: MoveableGroupInterface<any, any>, e: any) {\n        const { datas } = e;\n\n        const params = this.dragControlStart(moveable, e);\n\n        if (!params) {\n            return false;\n        }\n        const originalEvents = fillChildEvents(moveable, \"resizable\", e);\n\n\n        datas.moveableScale = moveable.scale;\n\n        const events = triggerChildAbles(\n            moveable,\n            this,\n            \"dragControlStart\",\n            e,\n            (child, ev) => {\n                return startChildDist(moveable, child, datas, ev);\n            },\n        );\n\n        const setFixedDirection = (fixedDirection: number[]) => {\n            params.setFixedDirection(fixedDirection);\n            events.forEach((ev, i) => {\n                ev.setFixedDirection(fixedDirection);\n                startChildDist(moveable, ev.moveable, datas, originalEvents[i]);\n            });\n        };\n\n        datas.setFixedDirection = setFixedDirection;\n        const nextParams: OnScaleGroupStart = {\n            ...params,\n            targets: moveable.props.targets!,\n            events,\n            setFixedDirection,\n        };\n        const result = triggerEvent(moveable, \"onScaleGroupStart\", nextParams);\n\n        datas.isScale = result !== false;\n        return datas.isScale ? nextParams : false;\n    },\n    dragGroupControl(moveable: MoveableGroupInterface<any, any>, e: any) {\n        const { datas } = e;\n        if (!datas.isScale) {\n            return;\n        }\n\n        catchEvent(moveable, \"onBeforeScale\", parentEvent => {\n            triggerEvent(moveable, \"onBeforeScaleGroup\", fillParams<OnBeforeScaleGroup>(moveable, e, {\n                ...parentEvent,\n                targets: moveable.props.targets!,\n            }, true));\n        });\n\n        const params = this.dragControl(moveable, e);\n        if (!params) {\n            return;\n        }\n        const { dist } = params;\n        const moveableScale = datas.moveableScale;\n        moveable.scale = [\n            dist[0] * moveableScale[0],\n            dist[1] * moveableScale[1],\n        ];\n        const keepRatio = moveable.props.keepRatio;\n\n\n        const fixedPosition = datas.fixedPosition;\n        const events = triggerChildAbles(\n            moveable,\n            this,\n            \"dragControl\",\n            e,\n            (_, ev) => {\n                const [clientX, clientY] = calculate(\n                    createRotateMatrix(moveable.rotation / 180 * Math.PI, 3),\n                    [\n                        ev.datas.originalX * dist[0],\n                        ev.datas.originalY * dist[1],\n                        1,\n                    ],\n                    3,\n                );\n\n                return {\n                    ...ev,\n                    parentDist: null,\n                    parentScale: dist,\n                    parentKeepRatio: keepRatio,\n                    // recalculate child fixed position for parent group's dragging.\n                    dragClient: plus(fixedPosition, [clientX, clientY]),\n                };\n            },\n        );\n        const nextParams: OnScaleGroup = {\n            targets: moveable.props.targets!,\n            events,\n            ...params,\n        };\n\n        triggerEvent(moveable, \"onScaleGroup\", nextParams);\n        return nextParams;\n    },\n    dragGroupControlEnd(moveable: MoveableGroupInterface<any, any>, e: any) {\n        const { isDrag, datas } = e;\n\n        if (!datas.isScale) {\n            return;\n        }\n        this.dragControlEnd(moveable, e);\n        const events = triggerChildAbles(moveable, this, \"dragControlEnd\", e);\n\n        const nextParams = fillEndParams<OnScaleGroupEnd>(moveable, e, {\n            targets: moveable.props.targets!,\n            events,\n        });\n\n        triggerEvent(moveable, \"onScaleGroupEnd\", nextParams);\n        return isDrag;\n    },\n    /**\n     * @method Moveable.Scalable#request\n     * @param {Moveable.Scalable.ScalableRequestParam} e - the Scalable's request parameter\n     * @return {Moveable.Requester} Moveable Requester\n     * @example\n\n     * // Instantly Request (requestStart - request - requestEnd)\n     * moveable.request(\"scalable\", { deltaWidth: 10, deltaHeight: 10 }, true);\n     *\n     * // requestStart\n     * const requester = moveable.request(\"scalable\");\n     *\n     * // request\n     * requester.request({ deltaWidth: 10, deltaHeight: 10 });\n     * requester.request({ deltaWidth: 10, deltaHeight: 10 });\n     * requester.request({ deltaWidth: 10, deltaHeight: 10 });\n     *\n     * // requestEnd\n     * requester.requestEnd();\n     */\n    request() {\n        const datas = {};\n        let distWidth = 0;\n        let distHeight = 0;\n        let useSnap = false;\n\n        return {\n            isControl: true,\n            requestStart(e: IObject<any>) {\n                useSnap = e.useSnap;\n\n                return {\n                    datas,\n                    parentDirection: e.direction || [1, 1],\n                    useSnap,\n                };\n            },\n            request(e: IObject<any>) {\n                distWidth += e.deltaWidth;\n                distHeight += e.deltaHeight;\n\n                return {\n                    datas,\n                    parentDist: [distWidth, distHeight],\n                    parentKeepRatio: e.keepRatio,\n                    useSnap,\n                };\n            },\n            requestEnd() {\n                return { datas, isDrag: true, useSnap };\n            },\n        };\n    },\n};\n\n/**\n * Whether or not target can scaled.\n *\n * @name Moveable.Scalable#scalable\n * @default false\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.scalable = true;\n */\n\n/**\n * throttle of scaleX, scaleY when scale.\n * @name Moveable.Scalable#throttleScale\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleScale = 0.1;\n */\n/**\n * Set directions to show the control box. (default: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"])\n * @name Moveable.Scalable#renderDirections\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     scalable: true,\n *   renderDirections: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"],\n * });\n *\n * moveable.renderDirections = [\"nw\", \"ne\", \"sw\", \"se\"];\n */\n/**\n * When resize or scale, keeps a ratio of the width, height. (default: false)\n * @name Moveable.Scalable#keepRatio\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     scalable: true,\n * });\n *\n * moveable.keepRatio = true;\n */\n/**\n * When the scale starts, the scaleStart event is called.\n * @memberof Moveable.Scalable\n * @event scaleStart\n * @param {Moveable.Scalable.OnScaleStart} - Parameters for the scaleStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When scaling, `beforeScale` is called before `scale` occurs. In `beforeScale`, you can get and set the pre-value before scaling.\n * @memberof Moveable.Scalable\n * @event beforeScale\n * @param {Moveable.Scalable.OnBeforeScale} - Parameters for the `beforeScale` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"beforeScale\", ({ setFixedDirection }) => {\n *     if (shiftKey) {\n *        setFixedDirection([0, 0]);\n *     }\n * });\n * moveable.on(\"scale\", ({ target, transform, dist }) => {\n *     target.style.transform = transform;\n * });\n */\n\n/**\n * When scaling, the `scale` event is called.\n * @memberof Moveable.Scalable\n * @event scale\n * @param {Moveable.Scalable.OnScale} - Parameters for the `scale` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scale\", ({ target, transform, dist }) => {\n *     target.style.transform = transform;\n * });\n */\n/**\n * When the scale finishes, the `scaleEnd` event is called.\n * @memberof Moveable.Scalable\n * @event scaleEnd\n * @param {Moveable.Scalable.OnScaleEnd} - Parameters for the `scaleEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n\n/**\n* When the group scale starts, the `scaleGroupStart` event is called.\n* @memberof Moveable.Scalable\n* @event scaleGroupStart\n* @param {Moveable.Scalable.OnScaleGroupStart} - Parameters for the `scaleGroupStart` event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     target: [].slice.call(document.querySelectorAll(\".target\")),\n*     scalable: true\n* });\n* moveable.on(\"scaleGroupStart\", ({ targets }) => {\n*     console.log(\"onScaleGroupStart\", targets);\n* });\n*/\n\n/**\n* When the group scale, the `scaleGroup` event is called.\n* @memberof Moveable.Scalable\n* @event scaleGroup\n* @param {Moveable.Scalable.OnScaleGroup} - Parameters for the `scaleGroup` event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     target: [].slice.call(document.querySelectorAll(\".target\")),\n*     scalable: true\n* });\n* moveable.on(\"scaleGroup\", ({ targets, events }) => {\n*     console.log(\"onScaleGroup\", targets);\n*     events.forEach(ev => {\n*         const target = ev.target;\n*         // ev.drag is a drag event that occurs when the group scale.\n*         const left = ev.drag.beforeDist[0];\n*         const top = ev.drag.beforeDist[1];\n*         const scaleX = ev.scale[0];\n*         const scaleY = ev.scale[1];\n*     });\n* });\n*/\n\n/**\n * When the group scale finishes, the `scaleGroupEnd` event is called.\n * @memberof Moveable.Scalable\n * @event scaleGroupEnd\n * @param {Moveable.Scalable.OnScaleGroupEnd} - Parameters for the `scaleGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     scalable: true\n * });\n * moveable.on(\"scaleGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onScaleGroupEnd\", targets, isDrag);\n * });\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Scrollable.ts",
    "content": "\nimport {\n    ScrollableProps, OnScroll, MoveableManagerInterface,\n    MoveableGroupInterface, MoveableRefType,\n} from \"../types\";\nimport { triggerEvent, fillParams, getRefTarget } from \"../utils\";\nimport DragScroll from \"@scena/dragscroll\";\n\nfunction getDefaultScrollPosition(e: { scrollContainer: HTMLElement, direction: number[] }) {\n    const scrollContainer = e.scrollContainer;\n\n    return [\n        scrollContainer.scrollLeft,\n        scrollContainer.scrollTop,\n    ];\n}\n/**\n * @namespace Moveable.Scrollable\n * @description Whether or not target can be scrolled to the scroll container (default: false)\n */\nexport default {\n    name: \"scrollable\",\n    canPinch: true,\n    props: [\n        \"scrollable\",\n        \"scrollContainer\",\n        \"scrollThreshold\",\n        \"scrollThrottleTime\",\n        \"getScrollPosition\",\n        \"scrollOptions\",\n    ] as const,\n    events: [\n        \"scroll\",\n        \"scrollGroup\",\n    ] as const,\n    dragRelation: \"strong\",\n    dragStart(moveable: MoveableManagerInterface<ScrollableProps, Record<string, any>>, e: any) {\n        const props = moveable.props;\n        const {\n            scrollContainer = moveable.getContainer() as HTMLElement,\n            scrollOptions,\n        } = props;\n\n        const dragScroll = new DragScroll();\n        const scrollContainerElement = getRefTarget<HTMLElement>(scrollContainer, true);\n\n        e.datas.dragScroll = dragScroll;\n        moveable.state.dragScroll = dragScroll;\n\n        const gestoName = e.isControl ? \"controlGesto\" : \"targetGesto\";\n        const targets = e.targets;\n\n        dragScroll.on(\"scroll\", ({ container, direction }) => {\n            const params = fillParams<OnScroll>(moveable, e, {\n                scrollContainer: container,\n                direction,\n            }) as any;\n\n            const eventName = targets ? \"onScrollGroup\" : \"onScroll\" as any;\n            if (targets) {\n                params.targets = targets;\n            }\n            triggerEvent(moveable, eventName, params);\n        }).on(\"move\", ({ offsetX, offsetY, inputEvent }) => {\n            moveable[gestoName].scrollBy(offsetX, offsetY, inputEvent.inputEvent, false);\n        }).on(\"scrollDrag\", ({ next }) => {\n            next(moveable[gestoName].getCurrentEvent());\n        });\n        dragScroll.dragStart(e, {\n            container: scrollContainerElement!,\n            ...scrollOptions,\n        });\n    },\n    checkScroll(moveable: MoveableManagerInterface<ScrollableProps>, e: any) {\n        const dragScroll = e.datas.dragScroll as DragScroll;\n\n        if (!dragScroll) {\n            return;\n        }\n        const {\n            scrollContainer = moveable.getContainer() as MoveableRefType<HTMLElement>,\n            scrollThreshold = 0,\n            scrollThrottleTime = 0,\n            getScrollPosition = getDefaultScrollPosition,\n            scrollOptions,\n        } = moveable.props;\n\n        dragScroll.drag(e, {\n            container: scrollContainer!,\n            threshold: scrollThreshold,\n            throttleTime: scrollThrottleTime,\n            getScrollPosition: (ev: any) => {\n                return getScrollPosition({ scrollContainer: ev.container, direction: ev.direction });\n            },\n            ...scrollOptions,\n        });\n\n        return true;\n    },\n    drag(moveable: MoveableManagerInterface<ScrollableProps>, e: any) {\n        return this.checkScroll(moveable, e);\n    },\n    dragEnd(moveable: MoveableManagerInterface<ScrollableProps>, e: any) {\n        e.datas.dragScroll.dragEnd();\n        e.datas.dragScroll = null;\n    },\n    dragControlStart(moveable: MoveableManagerInterface<ScrollableProps>, e: any) {\n        return this.dragStart(moveable, { ...e, isControl: true });\n    },\n    dragControl(moveable: MoveableManagerInterface<ScrollableProps>, e: any) {\n        return this.drag(moveable, e);\n    },\n    dragControlEnd(moveable: MoveableManagerInterface<ScrollableProps>, e: any) {\n        return this.dragEnd(moveable, e);\n    },\n    dragGroupStart(moveable: MoveableGroupInterface, e: any) {\n        return this.dragStart(moveable, { ...e, targets: moveable.props.targets });\n    },\n    dragGroup(moveable: MoveableGroupInterface, e: any) {\n        return this.drag(moveable, { ...e, targets: moveable.props.targets });\n    },\n    dragGroupEnd(moveable: MoveableGroupInterface, e: any) {\n        return this.dragEnd(moveable, { ...e, targets: moveable.props.targets });\n    },\n    dragGroupControlStart(moveable: MoveableGroupInterface, e: any) {\n        return this.dragStart(moveable, { ...e, targets: moveable.props.targets, isControl: true });\n    },\n    dragGroupControl(moveable: MoveableGroupInterface, e: any) {\n        return this.drag(moveable, { ...e, targets: moveable.props.targets });\n    },\n    dragGroupControEnd(moveable: MoveableGroupInterface, e: any) {\n        return this.dragEnd(moveable, { ...e, targets: moveable.props.targets });\n    },\n    unset(moveable: MoveableManagerInterface<ScrollableProps, Record<string, any>>) {\n        const state = moveable.state;\n\n        state.dragScroll?.dragEnd();\n        state.dragScroll = null;\n    },\n};\n\n/**\n * When the drag cursor leaves the scrollContainer, the `scroll` event occur to scroll.\n * @memberof Moveable.Scrollable\n * @event scroll\n * @param {Moveable.Scrollable.OnScroll} - Parameters for the `scroll` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: document.querySelector(\".target\"),\n * });\n * moveable.on(\"scroll\", ({ scrollContainer, direction }) => {\n *   scrollContainer.scrollLeft += direction[0] * 10;\n *   scrollContainer.scrollTop += direction[1] * 10;\n * });\n */\n\n/**\n * When the drag cursor leaves the scrollContainer, the `scrollGroup` event occur to scroll in group.\n * @memberof Moveable.Scrollable\n * @event scrollGroup\n * @param {Moveable.Scrollable.OnScrollGroup} - Parameters for the `scrollGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n * });\n * moveable.on(\"scroll\", ({ scrollContainer, direction }) => {\n *   scrollContainer.scrollLeft += direction[0] * 10;\n *   scrollContainer.scrollTop += direction[1] * 10;\n * });\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Snappable.tsx",
    "content": "import {\n    Renderer,\n    SnappableProps,\n    SnappableState,\n    SnapGuideline,\n    ScalableProps,\n    SnapPosInfo,\n    RotatableProps,\n    RectInfo,\n    MoveableManagerInterface,\n    SnappableRenderType,\n    BoundType,\n    MoveableGroupInterface,\n    SnapDirectionInfo,\n} from \"../types\";\nimport {\n    prefix,\n    calculatePoses,\n    getRect,\n    getAbsolutePosesByState,\n    getAbsolutePoses,\n    getClientRect,\n    getRefTarget,\n    getDragDistByState,\n    triggerEvent,\n    getDirectionCondition,\n    abs,\n    watchValue,\n} from \"../utils\";\nimport {\n    find,\n    findIndex, hasClass, throttle,\n} from \"@daybrush/utils\";\nimport {\n    getDragDist,\n    scaleMatrix,\n    getPosByDirection,\n} from \"../gesto/GestoUtils\";\nimport { minus, rotate, plus } from \"@scena/matrix\";\nimport { dragControlCondition as rotatableDragControlCondtion } from \"./Rotatable\";\nimport { FLOAT_POINT_NUM } from \"../consts\";\nimport {\n    getInnerBoundInfo,\n    getCheckInnerBoundLineInfos,\n    checkRotateInnerBounds,\n    checkInnerBoundPoses,\n} from \"./snappable/innerBounds\";\nimport {\n    checkBoundPoses,\n    checkRotateBounds,\n    getBounds,\n} from \"./snappable/bounds\";\nimport {\n    checkSnaps,\n    getSnapInfosByDirection,\n    getNearOffsetInfo,\n    getCheckSnapDirections,\n} from \"./snappable/snap\";\nimport {\n    renderSnapPoses,\n    renderGuidelines,\n    renderDashedGuidelines,\n    renderGapGuidelines,\n} from \"./snappable/render\";\nimport {\n    getInitialBounds,\n    hasGuidelines,\n} from \"./snappable/utils\";\nimport {\n    checkMaxBounds,\n    checkMoveableSnapBounds,\n    getSnapBoundInfo,\n} from \"./snappable/snapBounds\";\nimport { getTotalGuidelines } from \"./snappable/getTotalGuidelines\";\nimport {\n    NAME_snapRotationThreshold, NAME_snapRotationDegrees,\n    NAME_snapHorizontalThreshold, NAME_snapVerticalThreshold,\n} from \"./snappable/names\";\n\n\nexport interface SnapPoses {\n    vertical: number[];\n    horizontal: number[];\n}\n\nexport function checkSnapInfo(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>\n) {\n    const state = moveable.state;\n    const container = state.container;\n    const snapContainer = moveable.props.snapContainer || container!;\n\n    if (state.snapContainer === snapContainer && state.guidelines && state.guidelines.length) {\n        return false;\n    }\n\n    const containerClientRect = state.containerClientRect;\n    const snapOffset = {\n        left: 0,\n        top: 0,\n        bottom: 0,\n        right: 0,\n    };\n\n    if (container !== snapContainer) {\n        const snapContainerTarget = getRefTarget(snapContainer, true);\n\n        if (snapContainerTarget) {\n            const snapContainerRect = getClientRect(snapContainerTarget);\n            const offset1 = getDragDistByState(state, [\n                snapContainerRect.left - containerClientRect.left,\n                snapContainerRect.top - containerClientRect.top,\n            ]);\n            const offset2 = getDragDistByState(state, [\n                snapContainerRect.right - containerClientRect.right,\n                snapContainerRect.bottom - containerClientRect.bottom,\n            ]);\n\n            snapOffset.left = throttle(offset1[0], 0.00001);\n            snapOffset.top = throttle(offset1[1], 0.00001);\n            snapOffset.right = throttle(offset2[0], 0.00001);\n            snapOffset.bottom = throttle(offset2[1], 0.00001);\n        }\n    }\n\n    state.snapContainer = snapContainer;\n    state.snapOffset = snapOffset;\n    state.guidelines = getTotalGuidelines(moveable);\n    state.enableSnap = true;\n    return true;\n}\n\nfunction getNextFixedPoses(\n    matrix: number[],\n    width: number,\n    height: number,\n    fixedDirection: number[],\n    fixedPos: number[],\n    is3d: boolean\n) {\n    const nextPoses = calculatePoses(matrix, width, height, is3d ? 4 : 3);\n    const nextFixedPos = getPosByDirection(nextPoses, fixedDirection);\n\n    return getAbsolutePoses(nextPoses, minus(fixedPos, nextFixedPos));\n}\n\nexport function normalized(value: number) {\n    return value ? value / abs(value) : 0;\n}\n\nexport function getSizeOffsetInfo(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    poses: number[][],\n    direction: number[],\n    keepRatio: boolean,\n    isRequest: boolean,\n    datas: any\n) {\n    const { fixedDirection } = datas;\n    const directions = getCheckSnapDirections(direction, fixedDirection, keepRatio);\n    const innerBoundLineInfos = getCheckInnerBoundLineInfos(moveable, poses, direction, keepRatio);\n    const offsets = [\n        ...getSnapBoundInfo(\n            moveable,\n            poses,\n            directions,\n            keepRatio,\n            isRequest,\n            datas\n        ),\n        ...getInnerBoundInfo(\n            moveable,\n            innerBoundLineInfos,\n            datas\n        ),\n    ];\n    const widthOffsetInfo = getNearOffsetInfo(offsets, 0);\n    const heightOffsetInfo = getNearOffsetInfo(offsets, 1);\n\n    return {\n        width: {\n            isBound: widthOffsetInfo.isBound,\n            offset: widthOffsetInfo.offset[0],\n        },\n        height: {\n            isBound: heightOffsetInfo.isBound,\n            offset: heightOffsetInfo.offset[1],\n        },\n    };\n}\n\nexport function recheckSizeByTwoDirection(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    poses: number[][],\n    width: number,\n    height: number,\n    maxWidth: number,\n    maxHeight: number,\n    direction: number[],\n    isRequest: boolean,\n    datas: any\n) {\n    const snapPos = getPosByDirection(poses, direction);\n\n    const {\n        horizontal: { offset: horizontalOffset },\n        vertical: { offset: verticalOffset },\n    } = checkMoveableSnapBounds(moveable, isRequest, {\n        vertical: [snapPos[0]],\n        horizontal: [snapPos[1]],\n    });\n\n    if (throttle(verticalOffset, FLOAT_POINT_NUM) || throttle(horizontalOffset, FLOAT_POINT_NUM)) {\n        const [nextWidthOffset, nextHeightOffset] = getDragDist({\n            datas,\n            distX: -verticalOffset,\n            distY: -horizontalOffset,\n        });\n        const nextWidth = Math.min(\n            maxWidth || Infinity,\n            width + direction[0] * nextWidthOffset\n        );\n        const nextHeight = Math.min(\n            maxHeight || Infinity,\n            height + direction[1] * nextHeightOffset\n        );\n\n        return [nextWidth - width, nextHeight - height];\n    }\n    return [0, 0];\n}\n\nexport function checkSizeDist(\n    moveable: MoveableManagerInterface<any, any>,\n    getNextPoses: (widthOffset: number, heightOffset: number) => number[][],\n    width: number,\n    height: number,\n    direction: number[],\n    fixedPosition: number[],\n    isRequest: boolean,\n    datas: any\n) {\n    const poses = getAbsolutePosesByState(moveable.state);\n    const keepRatio = moveable.props.keepRatio;\n\n    let widthOffset = 0;\n    let heightOffset = 0;\n\n    for (let i = 0; i < 2; ++i) {\n        const nextPoses = getNextPoses(widthOffset, heightOffset);\n        const {\n            width: widthOffsetInfo,\n            height: heightOffsetInfo,\n        } = getSizeOffsetInfo(\n            moveable,\n            nextPoses,\n            direction,\n            keepRatio,\n            isRequest,\n            datas\n        );\n\n        const isWidthBound = widthOffsetInfo.isBound;\n        const isHeightBound = heightOffsetInfo.isBound;\n        let nextWidthOffset = widthOffsetInfo.offset;\n        let nextHeightOffset = heightOffsetInfo.offset;\n\n\n        if (i === 1) {\n            if (!isWidthBound) {\n                nextWidthOffset = 0;\n            }\n            if (!isHeightBound) {\n                nextHeightOffset = 0;\n            }\n        }\n        if (i === 0 && isRequest && !isWidthBound && !isHeightBound) {\n            return [0, 0];\n        }\n        if (keepRatio) {\n            const widthDist =\n                abs(nextWidthOffset) * (width ? 1 / width : 1);\n            const heightDist =\n                abs(nextHeightOffset) * (height ? 1 / height : 1);\n            const isGetWidthOffset =\n                isWidthBound && isHeightBound\n                    ? widthDist < heightDist\n                    : isHeightBound ||\n                    (!isWidthBound && widthDist < heightDist);\n            if (isGetWidthOffset) {\n                // width : height = ? : heightOffset\n                nextWidthOffset = (width * nextHeightOffset) / height;\n            } else {\n                // width : height = widthOffset : ?\n                nextHeightOffset = (height * nextWidthOffset) / width;\n            }\n        }\n        widthOffset += nextWidthOffset;\n        heightOffset += nextHeightOffset;\n    }\n\n    if (!keepRatio && direction[0] && direction[1]) {\n        const { maxWidth, maxHeight } = checkMaxBounds(\n            moveable,\n            poses,\n            direction,\n            fixedPosition,\n            datas\n        );\n\n        const [nextWidthOffset, nextHeightOffset] = recheckSizeByTwoDirection(\n            moveable,\n            getNextPoses(widthOffset, heightOffset).map(pos => pos.map(p => throttle(p, FLOAT_POINT_NUM))),\n            width + widthOffset,\n            height + heightOffset,\n            maxWidth,\n            maxHeight,\n            direction,\n            isRequest,\n            datas\n        );\n\n        widthOffset += nextWidthOffset;\n        heightOffset += nextHeightOffset;\n    }\n\n    return [widthOffset, heightOffset];\n}\n\nexport function absDegree(deg: number) {\n    if (deg < 0) {\n        deg = deg % 360 + 360;\n    }\n    deg %= 360;\n    return deg;\n}\n\nexport function bumpDegree(baseDeg: number, snapDeg: number) {\n    // baseDeg -80\n    // snapDeg 270\n    // return -90\n    snapDeg = absDegree(snapDeg);\n\n    const count = Math.floor(baseDeg / 360);\n\n\n    const deg1 = count * 360 + 360 - snapDeg;\n    const deg2 = count * 360 + snapDeg;\n\n    return abs(baseDeg - deg1) < abs(baseDeg - deg2) ? deg1 : deg2;\n}\n\nexport function getMinDegreeDistance(deg1: number, deg2: number) {\n    deg1 = absDegree(deg1);\n    deg2 = absDegree(deg2);\n\n    const deg3 = absDegree(deg1 - deg2);\n\n    return Math.min(deg3, 360 - deg3);\n}\n\nexport function checkSnapRotate(\n    moveable: MoveableManagerInterface<SnappableProps & RotatableProps, any>,\n    rect: RectInfo,\n    dist: number,\n    rotation: number,\n) {\n    const props = moveable.props;\n    const snapRotationThreshold = props[NAME_snapRotationThreshold] ?? 5;\n    const snapRotationDegrees = props[NAME_snapRotationDegrees];\n\n    if (hasGuidelines(moveable, \"rotatable\")) {\n        const { pos1, pos2, pos3, pos4, origin: origin2 } = rect;\n        const rad = (dist * Math.PI) / 180;\n        const prevPoses = [pos1, pos2, pos3, pos4].map((pos) => minus(pos, origin2));\n        const nextPoses = prevPoses.map((pos) => rotate(pos, rad));\n\n        // console.log(moveable.state.left, moveable.state.top, moveable.state.origin);\n        // console.log(pos1, pos2, pos3, pos4, origin, rad, prevPoses, nextPoses);\n        const result = [\n            ...checkRotateBounds(moveable, prevPoses, nextPoses, origin2, dist),\n            ...checkRotateInnerBounds(\n                moveable,\n                prevPoses,\n                nextPoses,\n                origin2,\n                dist\n            ),\n        ];\n        result.sort((a, b) => abs(a - dist) - abs(b - dist));\n        const isSnap = result.length > 0;\n\n        if (isSnap) {\n            return {\n                isSnap,\n                dist: isSnap ? result[0] : dist,\n            };\n        }\n    }\n    if (snapRotationDegrees?.length && snapRotationThreshold) {\n\n\n        const sorted = snapRotationDegrees.slice().sort((a, b) => {\n            return getMinDegreeDistance(a, rotation) - getMinDegreeDistance(b, rotation);\n        });\n        const firstDegree = sorted[0];\n\n        if (getMinDegreeDistance(firstDegree, rotation) <= snapRotationThreshold) {\n\n            return {\n                isSnap: true,\n                dist: dist + bumpDegree(rotation, firstDegree) - rotation,\n            };\n        }\n    }\n    return {\n        isSnap: false,\n        dist,\n    };\n\n}\n\nexport function checkSnapResize(\n    moveable: MoveableManagerInterface<{}, {}>,\n    width: number,\n    height: number,\n    direction: number[],\n    fixedPosition: number[],\n    isRequest: boolean,\n    datas: any\n) {\n    if (!hasGuidelines(moveable, \"resizable\")) {\n        return [0, 0];\n    }\n    const { fixedDirection, nextAllMatrix } = datas;\n    const { allMatrix, is3d } = moveable.state;\n\n    return checkSizeDist(\n        moveable,\n        (widthOffset: number, heightOffset: number) => {\n            return getNextFixedPoses(\n                nextAllMatrix || allMatrix,\n                width + widthOffset,\n                height + heightOffset,\n                fixedDirection,\n                fixedPosition,\n                is3d\n            );\n        },\n        width,\n        height,\n        direction,\n        fixedPosition,\n        isRequest,\n        datas\n    );\n}\nexport function checkSnapScale(\n    moveable: MoveableManagerInterface<ScalableProps, any>,\n    scale: number[],\n    direction: number[],\n    isRequest: boolean,\n    datas: any\n) {\n    if (!hasGuidelines(moveable, \"scalable\")) {\n        return [0, 0];\n    }\n    const { startOffsetWidth, startOffsetHeight, fixedPosition, fixedDirection, is3d } = datas;\n    const sizeDist = checkSizeDist(\n        moveable,\n        (widthOffset: number, heightOffset: number) => {\n            return getNextFixedPoses(\n                scaleMatrix(\n                    datas,\n                    plus(scale, [widthOffset / startOffsetWidth, heightOffset / startOffsetHeight]),\n                ),\n                startOffsetWidth,\n                startOffsetHeight,\n                fixedDirection,\n                fixedPosition,\n                is3d\n            );\n        },\n        startOffsetWidth,\n        startOffsetHeight,\n        direction,\n        fixedPosition,\n        isRequest,\n        datas\n    );\n    return [sizeDist[0] / startOffsetWidth, sizeDist[1] / startOffsetHeight];\n}\n\nexport function startCheckSnapDrag(\n    moveable: MoveableManagerInterface<any, any>,\n    datas: any\n) {\n    datas.absolutePoses = getAbsolutePosesByState(moveable.state);\n}\n\n\n\nfunction getSnapGuidelines(posInfos: SnapPosInfo[]) {\n    const guidelines: Array<{ guideline: SnapGuideline, posInfo: SnapPosInfo }> = [];\n\n    posInfos.forEach((posInfo) => {\n        posInfo.guidelineInfos.forEach(({ guideline }) => {\n            if (find(guidelines, info => info.guideline === guideline)) {\n                return;\n            }\n            guideline.direction = \"\";\n            guidelines.push({ guideline, posInfo });\n        });\n    });\n\n    return guidelines.map(({ guideline, posInfo }) => {\n        return {\n            ...guideline,\n            direction: posInfo.direction,\n        };\n    });\n}\n\nfunction addBoundGuidelines(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    verticalPoses: number[],\n    horizontalPoses: number[],\n    verticalSnapPoses: SnappableRenderType[],\n    horizontalSnapPoses: SnappableRenderType[],\n    externalBounds?: BoundType | false | null\n) {\n    const {\n        vertical: verticalBoundInfos,\n        horizontal: horizontalBoundInfos,\n    } = checkBoundPoses(\n        getBounds(moveable, externalBounds),\n        verticalPoses,\n        horizontalPoses\n    );\n\n    const boundMap = getInitialBounds();\n\n\n    verticalBoundInfos.forEach((info) => {\n        if (info.isBound) {\n            if (info.direction === \"start\") {\n                boundMap.left = true;\n            }\n            if (info.direction === \"end\") {\n                boundMap.right = true;\n            }\n            verticalSnapPoses.push({\n                type: \"bounds\",\n                pos: info.pos,\n            });\n        }\n    });\n    horizontalBoundInfos.forEach((info) => {\n        if (info.isBound) {\n            if (info.direction === \"start\") {\n                boundMap.top = true;\n            }\n            if (info.direction === \"end\") {\n                boundMap.bottom = true;\n            }\n            horizontalSnapPoses.push({\n                type: \"bounds\",\n                pos: info.pos,\n            });\n        }\n    });\n    const {\n        boundMap: innerBoundMap,\n        vertical: verticalInnerBoundPoses,\n        horizontal: horizontalInnerBoundPoses,\n    } = checkInnerBoundPoses(moveable);\n\n    verticalInnerBoundPoses.forEach((innerPos) => {\n        if (\n            findIndex(\n                verticalSnapPoses,\n                ({ type, pos }) => type === \"bounds\" && pos === innerPos\n            ) >= 0\n        ) {\n            return;\n        }\n        verticalSnapPoses.push({\n            type: \"bounds\",\n            pos: innerPos,\n        });\n    });\n\n    horizontalInnerBoundPoses.forEach((innerPos) => {\n        if (\n            findIndex(\n                horizontalSnapPoses,\n                ({ type, pos }) => type === \"bounds\" && pos === innerPos\n            ) >= 0\n        ) {\n            return;\n        }\n        horizontalSnapPoses.push({\n            type: \"bounds\",\n            pos: innerPos,\n        });\n    });\n\n    return {\n        boundMap,\n        innerBoundMap,\n    };\n}\n\nconst directionCondition = getDirectionCondition(\"\", [\"resizable\", \"scalable\"]);\n\n\n\n/**\n * @namespace Moveable.Snappable\n * @description Whether or not target can be snapped to the guideline. (default: false)\n * @sort 2\n */\nexport default {\n    name: \"snappable\",\n    dragRelation: \"strong\",\n    props: [\n        \"snappable\",\n        \"snapContainer\",\n        \"snapDirections\",\n        \"elementSnapDirections\",\n        \"snapGap\",\n        \"snapGridWidth\",\n        \"snapGridHeight\",\n        \"isDisplaySnapDigit\",\n        \"isDisplayInnerSnapDigit\",\n        \"isDisplayGridGuidelines\",\n        \"snapDigit\",\n        \"snapThreshold\",\n        \"snapRenderThreshold\",\n        \"snapGridAll\",\n        NAME_snapRotationThreshold,\n        NAME_snapRotationDegrees,\n        NAME_snapHorizontalThreshold,\n        NAME_snapVerticalThreshold,\n        \"horizontalGuidelines\",\n        \"verticalGuidelines\",\n        \"elementGuidelines\",\n        \"bounds\",\n        \"innerBounds\",\n        \"snapDistFormat\",\n        \"maxSnapElementGuidelineDistance\",\n        \"maxSnapElementGapDistance\",\n    ] as const,\n    events: [\"snap\", \"bound\"] as const,\n    css: [\n        `:host {\n--bounds-color: #d66;\n}\n.guideline {\npointer-events: none;\nz-index: 2;\n}\n.guideline.bounds {\nbackground: #d66;\nbackground: var(--bounds-color);\n}\n.guideline-group {\nposition: absolute;\ntop: 0;\nleft: 0;\n}\n.guideline-group .size-value {\nposition: absolute;\ncolor: #f55;\nfont-size: 12px;\nfont-size: calc(12px * var(--zoom));\nfont-weight: bold;\n}\n.guideline-group.horizontal .size-value {\ntransform-origin: 50% 100%;\ntransform: translateX(-50%);\nleft: 50%;\nbottom: 5px;\nbottom: calc(2px + 3px * var(--zoom));\n}\n.guideline-group.vertical .size-value {\ntransform-origin: 0% 50%;\ntop: 50%;\ntransform: translateY(-50%);\nleft: 5px;\nleft: calc(2px + 3px * var(--zoom));\n}\n.guideline.gap {\nbackground: #f55;\n}\n.size-value.gap {\ncolor: #f55;\n}\n`,\n    ],\n    render(\n        moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n        React: Renderer\n    ): any[] {\n        const state = moveable.state;\n        const {\n            top: targetTop,\n            left: targetLeft,\n            pos1,\n            pos2,\n            pos3,\n            pos4,\n            snapRenderInfo,\n        } = state;\n        const {\n            snapRenderThreshold = 1,\n        } = moveable.props;\n\n        if (!snapRenderInfo || !snapRenderInfo.render || !hasGuidelines(moveable, \"\")) {\n            // reset store\n            watchValue(\n                moveable,\n                \"boundMap\",\n                getInitialBounds(),\n                v => JSON.stringify(v),\n            );\n            watchValue(\n                moveable,\n                \"innerBoundMap\",\n                getInitialBounds(),\n                v => JSON.stringify(v),\n            );\n            return [];\n        }\n        state.guidelines = getTotalGuidelines(moveable);\n\n\n        const minLeft = Math.min(pos1[0], pos2[0], pos3[0], pos4[0]);\n        const minTop = Math.min(pos1[1], pos2[1], pos3[1], pos4[1]);\n        const externalPoses = snapRenderInfo.externalPoses || [];\n        const poses = getAbsolutePosesByState(moveable.state);\n        const verticalSnapPoses: SnappableRenderType[] = [];\n        const horizontalSnapPoses: SnappableRenderType[] = [];\n        const verticalGuidelines: SnapGuideline[] = [];\n        const horizontalGuidelines: SnapGuideline[] = [];\n        const snapInfos: Array<{\n            vertical: SnapDirectionInfo;\n            horizontal: SnapDirectionInfo;\n        }> = [];\n        const { width, height, top, left, bottom, right } = getRect(poses);\n        const targetRect = { left, right, top, bottom, center: (left + right) / 2, middle: (top + bottom) / 2 };\n        const hasExternalPoses = externalPoses.length > 0;\n        const externalRect = hasExternalPoses\n            ? getRect(externalPoses)\n            : ({} as ReturnType<typeof getRect>);\n\n        if (!snapRenderInfo.request) {\n            if (snapRenderInfo.direction) {\n                snapInfos.push(\n                    getSnapInfosByDirection(\n                        moveable,\n                        poses,\n                        snapRenderInfo.direction,\n                        snapRenderThreshold,\n                        snapRenderThreshold,\n                    )\n                );\n            }\n            if (snapRenderInfo.snap) {\n                const rect = getRect(poses);\n                if (snapRenderInfo.center) {\n                    (rect as any).middle = (rect.top + rect.bottom) / 2;\n                    (rect as any).center = (rect.left + rect.right) / 2;\n                }\n                snapInfos.push(checkSnaps(moveable, rect, snapRenderThreshold, snapRenderThreshold));\n            }\n            if (hasExternalPoses) {\n                if (snapRenderInfo.center) {\n                    (externalRect as any).middle =\n                        (externalRect.top + externalRect.bottom) / 2;\n                    (externalRect as any).center =\n                        (externalRect.left + externalRect.right) / 2;\n                }\n                snapInfos.push(checkSnaps(moveable, externalRect, snapRenderThreshold, snapRenderThreshold));\n            }\n            snapInfos.forEach((snapInfo) => {\n                const {\n                    vertical: { posInfos: verticalPosInfos },\n                    horizontal: { posInfos: horizontalPosInfos },\n                } = snapInfo;\n                verticalSnapPoses.push(\n                    ...verticalPosInfos.filter(({ guidelineInfos }) => {\n                        return guidelineInfos.some(({ guideline }) => !guideline.hide);\n                    }).map(\n                        (posInfo) => ({\n                            type: \"snap\",\n                            pos: posInfo.pos,\n                        } as const)\n                    )\n                );\n                horizontalSnapPoses.push(\n                    ...horizontalPosInfos.filter(({ guidelineInfos }) => {\n                        return guidelineInfos.some(({ guideline }) => !guideline.hide);\n                    }).map(\n                        (posInfo) => ({\n                            type: \"snap\",\n                            pos: posInfo.pos,\n                        } as const)\n                    )\n                );\n\n                verticalGuidelines.push(...getSnapGuidelines(verticalPosInfos));\n                horizontalGuidelines.push(...getSnapGuidelines(horizontalPosInfos));\n            });\n        }\n\n        const {\n            boundMap,\n            innerBoundMap,\n        } = addBoundGuidelines(\n            moveable,\n            [left, right],\n            [top, bottom],\n            verticalSnapPoses,\n            horizontalSnapPoses\n        );\n        if (hasExternalPoses) {\n            addBoundGuidelines(\n                moveable,\n                [externalRect.left, externalRect.right],\n                [externalRect.top, externalRect.bottom],\n                verticalSnapPoses,\n                horizontalSnapPoses,\n                snapRenderInfo.externalBounds\n            );\n        }\n        const allGuidelines = [...verticalGuidelines, ...horizontalGuidelines];\n        const elementGuidelines = allGuidelines.filter(guideline => guideline.element && !guideline.gapRects);\n        const gapGuidelines = allGuidelines.filter(guideline => guideline.gapRects).sort((a, b) => {\n            return a.gap! - b.gap!;\n        });\n\n        triggerEvent(\n            moveable,\n            \"onSnap\",\n            {\n                guidelines: allGuidelines.filter(({ element }) => !element),\n                elements: elementGuidelines,\n                gaps: gapGuidelines,\n            },\n            true\n        );\n\n        const nextBoundMap = watchValue(\n            moveable,\n            \"boundMap\",\n            boundMap,\n            v => JSON.stringify(v),\n            getInitialBounds(),\n        );\n        const nextInnerBoundMap = watchValue(\n            moveable,\n            \"innerBoundMap\",\n            innerBoundMap,\n            v => JSON.stringify(v),\n            getInitialBounds(),\n        );\n\n        if (boundMap === nextBoundMap || innerBoundMap === nextInnerBoundMap) {\n            triggerEvent(\n                moveable,\n                \"onBound\",\n                {\n                    bounds: boundMap,\n                    innerBounds: innerBoundMap,\n                },\n                true\n            );\n        }\n\n\n\n        // verticalSnapPoses.\n        return [\n            ...renderDashedGuidelines(\n                moveable,\n                elementGuidelines,\n                [minLeft, minTop],\n                targetRect,\n                React,\n            ),\n            ...renderGapGuidelines(\n                moveable,\n                gapGuidelines,\n                [minLeft, minTop],\n                targetRect,\n                React,\n            ),\n            ...renderGuidelines(\n                moveable,\n                \"horizontal\",\n                horizontalGuidelines,\n                [targetLeft, targetTop],\n                targetRect,\n                React\n            ),\n            ...renderGuidelines(\n                moveable,\n                \"vertical\",\n                verticalGuidelines,\n                [targetLeft, targetTop],\n                targetRect,\n                React\n            ),\n            ...renderSnapPoses(\n                moveable,\n                \"horizontal\",\n                horizontalSnapPoses,\n                minLeft,\n                targetTop,\n                width,\n                0,\n                React\n            ),\n            ...renderSnapPoses(\n                moveable,\n                \"vertical\",\n                verticalSnapPoses,\n                minTop,\n                targetLeft,\n                height,\n                1,\n                React\n            ),\n        ];\n    },\n    dragStart(\n        moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n        e: any\n    ) {\n        moveable.state.snapRenderInfo = {\n            request: e.isRequest,\n            snap: true,\n            center: true,\n        };\n        checkSnapInfo(moveable);\n    },\n    drag(\n        moveable: MoveableManagerInterface<SnappableProps, SnappableState>\n    ) {\n        const state = moveable.state;\n        if (!checkSnapInfo(moveable)) {\n            state.guidelines = getTotalGuidelines(moveable);\n        }\n        if (state.snapRenderInfo) {\n            state.snapRenderInfo.render = true;\n        }\n    },\n    pinchStart(\n        moveable: MoveableManagerInterface<SnappableProps, SnappableState>\n    ) {\n        this.unset(moveable);\n    },\n    dragEnd(\n        moveable: MoveableManagerInterface<SnappableProps, SnappableState>\n    ) {\n        this.unset(moveable);\n    },\n    dragControlCondition(moveable: MoveableManagerInterface, e: any) {\n        if (directionCondition(moveable, e) || rotatableDragControlCondtion(moveable, e)) {\n            return true;\n        }\n        if (!e.isRequest && e.inputEvent) {\n            return hasClass(e.inputEvent.target, prefix(\"snap-control\"));\n        }\n    },\n    dragControlStart(\n        moveable: MoveableManagerInterface<SnappableProps, SnappableState>\n    ) {\n        moveable.state.snapRenderInfo = null;\n        checkSnapInfo(moveable);\n    },\n    dragControl(\n        moveable: MoveableManagerInterface<SnappableProps, SnappableState>\n    ) {\n        this.drag(moveable);\n    },\n    dragControlEnd(\n        moveable: MoveableManagerInterface<SnappableProps, SnappableState>\n    ) {\n        this.unset(moveable);\n    },\n    dragGroupStart(moveable: any, e: any) {\n        this.dragStart(moveable, e);\n    },\n    dragGroup(\n        moveable: MoveableGroupInterface<SnappableProps, SnappableState>\n    ) {\n        this.drag(moveable);\n    },\n    dragGroupEnd(\n        moveable: MoveableGroupInterface<SnappableProps, SnappableState>\n    ) {\n        this.unset(moveable);\n    },\n    dragGroupControlStart(\n        moveable: MoveableGroupInterface<SnappableProps, SnappableState>\n    ) {\n        moveable.state.snapRenderInfo = null;\n        checkSnapInfo(moveable);\n    },\n    dragGroupControl(\n        moveable: MoveableManagerInterface<SnappableProps, SnappableState>\n    ) {\n        this.drag(moveable);\n    },\n    dragGroupControlEnd(\n        moveable: MoveableGroupInterface<SnappableProps, SnappableState>\n    ) {\n        this.unset(moveable);\n    },\n    unset(moveable: any) {\n        const state = moveable.state;\n\n        state.enableSnap = false;\n        state.guidelines = [];\n        state.snapRenderInfo = null;\n        state.elementRects = [];\n    },\n};\n\n\n/**\n * Whether or not target can be snapped to the guideline. (default: false)\n * @name Moveable.Snappable#snappable\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snappable = true;\n */\n/**\n *  A snap container that is the basis for snap, bounds, and innerBounds. (default: null = container)\n * @name Moveable.Snappable#snapContainer\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.querySelector(\".container\"));\n *\n * moveable.snapContainer = document.body;\n */\n/**\n * You can specify the directions to snap to the target. (default: { left: true, top: true, right: true, bottom: true })\n * @name Moveable.Snappable#snapDirections\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *   snappable: true,\n *   snapDirections: true,\n * });\n * // snap center\n * moveable.snapDirections = { left: true, top: true, right: true, bottom: true, center: true, middle: true };\n */\n\n/**\n * You can specify the snap directions of elements. (default: { left: true, ftrue, right: true, bottom: true })\n * @name Moveable.Snappable#elementSnapDirections\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *   snappable: true,\n *   elementSnapDirections: true,\n * });\n * // snap center\n * moveable.elementSnapDirections = { left: true, top: true, right: true, bottom: true, center: true, middle: true };\n */\n/**\n * When you drag, make the gap snap in the element guidelines. (default: true)\n * @name Moveable.Snappable#snapGap\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *   snappable: true,\n *   snapElement: true,\n *   snapGap: true,\n * });\n *\n * moveable.snapGap = false;\n */\n/**\n * Distance value that can snap to guidelines. (default: 5)\n * @name Moveable.Snappable#snapThreshold\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snapThreshold = 5;\n */\n\n/**\n * Add guidelines in the horizontal direction. (default: [])\n * @name Moveable.Snappable#horizontalGuidelines\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.horizontalGuidelines = [100, 200, 500];\n */\n\n/**\n * Add guidelines in the vertical direction. (default: [])\n * @name Moveable.Snappable#verticalGuidelines\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.verticalGuidelines = [100, 200, 500];\n */\n/**\n * Add guidelines for the element. (default: [])\n * @name Moveable.Snappable#elementGuidelines\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.elementGuidelines = [\n *   document.querySelector(\".element\"),\n * ];\n */\n/**\n * You can set up boundaries.\n * @name Moveable.Snappable#bounds\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @default null\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.bounds = { left: 0, right: 1000, top: 0, bottom: 1000};\n */\n/**\n * You can set up inner boundaries.\n * @name Moveable.Snappable#innerBounds\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @default null\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.innerBounds = { left: 500, top: 500, width: 100, height: 100};\n */\n/**\n * snap distance digits (default: 0)\n * @name Moveable.Snappable#snapDigit\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snapDigit = 0\n */\n\n/**\n * If width size is greater than 0, you can vertical snap to the grid. (default: 0)\n * @name Moveable.Snappable#snapGridWidth\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snapGridWidth = 5;\n */\n\n/**\n * If height size is greater than 0, you can horizontal snap to the grid. (default: 0)\n * @name Moveable.Snappable#snapGridHeight\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.snapGridHeight = 5;\n */\n/**\n * Whether to show snap distance (default: true)\n * @name Moveable.Snappable#isDisplaySnapDigit\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.isDisplaySnapDigit = true;\n */\n\n/**\n * Whether to show element inner snap distance (default: false)\n * @name Moveable.Snappable#isDisplayInnerSnapDigit\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.isDisplayInnerSnapDigit = true;\n */\n\n\n/**\n * You can set the text format of the distance shown in the guidelines. (default: self)\n * @name Moveable.Snappable#snapDistFormat\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *  snappable: true,\n *  snapDistFormat: (v, type) => v,\n * });\n * moveable.snapDistFormat = (v, type) => `${v}px`;\n */\n\n/**\n * When you drag or dragControl, the `snap` event is called.\n * @memberof Moveable.Snappable\n * @event snap\n * @param {Moveable.Snappable.OnSnap} - Parameters for the `snap` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     snappable: true\n * });\n * moveable.on(\"snap\", e => {\n *     console.log(\"onSnap\", e);\n * });\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/Warpable.tsx",
    "content": "import {\n    prefix, getLineStyle, getDirection, getAbsolutePosesByState,\n    triggerEvent, fillParams, fillEndParams, getDirectionViewClassName, fillCSSObject,\n} from \"../utils\";\nimport {\n    convertDimension, invert, multiply,\n    calculate,\n    createIdentityMatrix,\n    ignoreDimension,\n    minus,\n    createWarpMatrix,\n    plus,\n} from \"@scena/matrix\";\nimport { NEARBY_POS } from \"../consts\";\nimport {\n    setDragStart, getDragDist, getPosIndexesByDirection, setDefaultTransformIndex,\n    fillTransformStartEvent, resolveTransformEvent,\n    convertTransformFormat, fillOriginalTransform, getTransfromMatrix,\n} from \"../gesto/GestoUtils\";\nimport {\n    WarpableProps, ScalableProps, ResizableProps,\n    Renderer, SnappableProps, SnappableState,\n    OnWarpStart, OnWarp, OnWarpEnd, MoveableManagerInterface,\n} from \"../types\";\nimport { hasClass, dot, getRad } from \"@daybrush/utils\";\nimport { renderAllDirections } from \"../renderDirections\";\nimport { hasGuidelines } from \"./snappable/utils\";\nimport { checkMoveableSnapBounds } from \"./snappable/snapBounds\";\n\nfunction getMiddleLinePos(pos1: number[], pos2: number[]) {\n    return pos1.map((pos, i) => dot(pos, pos2[i], 1, 2));\n}\n\nfunction getTriangleRad(pos1: number[], pos2: number[], pos3: number[]) {\n    // pos1 Rad\n    const rad1 = getRad(pos1, pos2);\n    const rad2 = getRad(pos1, pos3);\n\n    const rad = rad2 - rad1;\n\n    return rad >= 0 ? rad : rad + 2 * Math.PI;\n}\n\nfunction isValidPos(poses1: number[][], poses2: number[][]) {\n    const rad1 = getTriangleRad(poses1[0], poses1[1], poses1[2]);\n    const rad2 = getTriangleRad(poses2[0], poses2[1], poses2[2]);\n    const pi = Math.PI;\n\n    if ((rad1 >= pi && rad2 <= pi) || (rad1 <= pi && rad2 >= pi)) {\n        return false;\n    }\n    return true;\n}\n\n/**\n * @namespace Moveable.Warpable\n * @description Warpable indicates whether the target can be warped(distorted, bented).\n */\nexport default {\n    name: \"warpable\",\n    ableGroup: \"size\",\n    props: [\n        \"warpable\",\n        \"renderDirections\",\n        \"edge\",\n        \"displayAroundControls\",\n    ] as const,\n    events: [\n        \"warpStart\",\n        \"warp\",\n        \"warpEnd\",\n    ] as const,\n    viewClassName: getDirectionViewClassName(\"warpable\"),\n    render(moveable: MoveableManagerInterface<ResizableProps & ScalableProps & WarpableProps>, React: Renderer): any[] {\n        const { resizable, scalable, warpable, zoom } = moveable.props;\n\n        if (resizable || scalable || !warpable) {\n            return [];\n        }\n        const { pos1, pos2, pos3, pos4 } = moveable.state;\n\n        const linePosFrom1 = getMiddleLinePos(pos1, pos2);\n        const linePosFrom2 = getMiddleLinePos(pos2, pos1);\n        const linePosFrom3 = getMiddleLinePos(pos1, pos3);\n        const linePosFrom4 = getMiddleLinePos(pos3, pos1);\n        const linePosTo1 = getMiddleLinePos(pos3, pos4);\n        const linePosTo2 = getMiddleLinePos(pos4, pos3);\n        const linePosTo3 = getMiddleLinePos(pos2, pos4);\n        const linePosTo4 = getMiddleLinePos(pos4, pos2);\n\n        return [\n            <div className={prefix(\"line\")}\n                key=\"middeLine1\" style={getLineStyle(linePosFrom1, linePosTo1, zoom)}></div>,\n            <div className={prefix(\"line\")}\n                key=\"middeLine2\" style={getLineStyle(linePosFrom2, linePosTo2, zoom)}></div>,\n            <div className={prefix(\"line\")}\n                key=\"middeLine3\" style={getLineStyle(linePosFrom3, linePosTo3, zoom)}></div>,\n            <div className={prefix(\"line\")}\n                key=\"middeLine4\" style={getLineStyle(linePosFrom4, linePosTo4, zoom)}></div>,\n            ...renderAllDirections(moveable, \"warpable\", React),\n        ];\n    },\n    dragControlCondition(moveable: any, e: any) {\n        if (e.isRequest) {\n            return false;\n        }\n        const target = e.inputEvent.target;\n\n        return hasClass(target, prefix(\"direction\")) && hasClass(target, prefix(\"warpable\"));\n    },\n    dragControlStart(\n        moveable: MoveableManagerInterface<WarpableProps, SnappableState>,\n        e: any,\n    ) {\n        const { datas, inputEvent } = e;\n        const { target } = moveable.props;\n        const { target: inputTarget } = inputEvent;\n        const direction = getDirection(inputTarget, datas);\n\n        if (!direction || !target) {\n            return false;\n        }\n        const state = moveable.state;\n        const {\n            transformOrigin, is3d,\n            targetTransform, targetMatrix,\n            width, height,\n            left, top,\n        } = state;\n\n        datas.datas = {};\n        datas.targetTransform = targetTransform;\n        datas.warpTargetMatrix = is3d ? targetMatrix : convertDimension(targetMatrix, 3, 4);\n        datas.targetInverseMatrix = ignoreDimension(invert(datas.warpTargetMatrix, 4), 3, 4);\n        datas.direction = direction;\n        datas.left = left;\n        datas.top = top;\n        datas.poses = [\n            [0, 0],\n            [width, 0],\n            [0, height],\n            [width, height],\n        ].map(p => minus(p, transformOrigin));\n\n        datas.nextPoses = datas.poses.map(([x, y]: number[]) => calculate(datas.warpTargetMatrix, [x, y, 0, 1], 4));\n        datas.startValue = createIdentityMatrix(4);\n        datas.prevMatrix = createIdentityMatrix(4);\n        datas.absolutePoses = getAbsolutePosesByState(state);\n        datas.posIndexes = getPosIndexesByDirection(direction);\n\n        setDragStart(moveable, e);\n        setDefaultTransformIndex(moveable, e, \"matrix3d\");\n\n        state.snapRenderInfo = {\n            request: e.isRequest,\n            direction,\n        };\n\n        const params = fillParams<OnWarpStart>(moveable, e, {\n            set: (matrix: number[]) => {\n                datas.startValue = matrix;\n            },\n            ...fillTransformStartEvent(moveable, e),\n        });\n        const result = triggerEvent(moveable, \"onWarpStart\", params);\n        if (result !== false) {\n            datas.isWarp = true;\n        }\n        return datas.isWarp;\n    },\n    dragControl(\n        moveable: MoveableManagerInterface<WarpableProps & SnappableProps, SnappableState>,\n        e: any,\n    ) {\n        const { datas, isRequest } = e;\n        let { distX, distY } = e;\n        const {\n            targetInverseMatrix, prevMatrix, isWarp, startValue,\n            poses,\n            posIndexes,\n            absolutePoses,\n        } = datas;\n\n        if (!isWarp) {\n            return false;\n        }\n        resolveTransformEvent(moveable, e, \"matrix3d\");\n        if (hasGuidelines(moveable, \"warpable\")) {\n            const selectedPoses: number[][] = posIndexes.map((index: number) => absolutePoses[index]);\n\n            if (selectedPoses.length > 1) {\n                selectedPoses.push([\n                    (selectedPoses[0][0] + selectedPoses[1][0]) / 2,\n                    (selectedPoses[0][1] + selectedPoses[1][1]) / 2,\n                ]);\n            }\n\n            const {\n                horizontal: horizontalSnapInfo,\n                vertical: verticalSnapInfo,\n            } = checkMoveableSnapBounds(\n                moveable,\n                isRequest,\n                {\n                    horizontal: selectedPoses.map(pos => pos[1] + distY),\n                    vertical: selectedPoses.map(pos => pos[0] + distX),\n                },\n            );\n\n            distY -= horizontalSnapInfo.offset;\n            distX -= verticalSnapInfo.offset;\n        }\n\n        const dist = getDragDist({ datas, distX, distY }, true);\n        const nextPoses = datas.nextPoses.slice();\n\n        posIndexes.forEach((index: number) => {\n            nextPoses[index] = plus(nextPoses[index], dist);\n        });\n\n        if (!NEARBY_POS.every(\n            nearByPoses => isValidPos(nearByPoses.map(i => poses[i]), nearByPoses.map(i => nextPoses[i])),\n        )) {\n            return false;\n        }\n        const h = createWarpMatrix(\n            poses[0],\n            poses[2],\n            poses[1],\n            poses[3],\n            nextPoses[0],\n            nextPoses[2],\n            nextPoses[1],\n            nextPoses[3],\n        );\n\n        if (!h.length) {\n            return false;\n        }\n        // B * A * M\n        const afterMatrix = multiply(targetInverseMatrix, h, 4);\n\n        // B * M * A\n        const matrix = getTransfromMatrix(datas, afterMatrix, true);\n\n        const delta = multiply(invert(prevMatrix, 4), matrix, 4);\n\n        datas.prevMatrix = matrix;\n        const totalMatrix = multiply(startValue, matrix, 4);\n        const nextTransform = convertTransformFormat(\n            datas, `matrix3d(${totalMatrix.join(\", \")})`, `matrix3d(${matrix.join(\", \")})`);\n\n        fillOriginalTransform(e, nextTransform);\n        triggerEvent(moveable, \"onWarp\", fillParams<OnWarp>(moveable, e, {\n            delta,\n            matrix: totalMatrix,\n            dist: matrix,\n            multiply,\n            transform: nextTransform,\n            ...fillCSSObject({\n                transform: nextTransform,\n            }, e),\n        }));\n        return true;\n    },\n    dragControlEnd(\n        moveable: MoveableManagerInterface<WarpableProps>,\n        e: any,\n    ) {\n        const { datas, isDrag } = e;\n        if (!datas.isWarp) {\n            return false;\n        }\n        datas.isWarp = false;\n\n        triggerEvent(moveable, \"onWarpEnd\", fillEndParams<OnWarpEnd>(moveable, e, {}));\n        return isDrag;\n    },\n};\n\n/**\n * Whether or not target can be warped. (default: false)\n * @name Moveable.Warpable#warpable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.warpable = true;\n */\n\n/**\n* Set directions to show the control box. (default: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"])\n* @name Moveable.Warpable#renderDirections\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, {\n*     warpable: true,\n*     renderDirections: [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"],\n* });\n*\n* moveable.renderDirections = [\"nw\", \"ne\", \"sw\", \"se\"];\n*/\n/**\n* When the warp starts, the warpStart event is called.\n* @memberof Moveable.Warpable\n* @event warpStart\n* @param {Moveable.Warpable.OnWarpStart} - Parameters for the warpStart event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, { warpable: true });\n* moveable.on(\"warpStart\", ({ target }) => {\n*     console.log(target);\n* });\n*/\n/**\n * When warping, the warp event is called.\n * @memberof Moveable.Warpable\n * @event warp\n * @param {Moveable.Warpable.OnWarp} - Parameters for the warp event\n * @example\n * import Moveable from \"moveable\";\n * let matrix = [\n *  1, 0, 0, 0,\n *  0, 1, 0, 0,\n *  0, 0, 1, 0,\n *  0, 0, 0, 1,\n * ];\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warp\", ({ target, transform, delta, multiply }) => {\n *    // target.style.transform = transform;\n *    matrix = multiply(matrix, delta);\n *    target.style.transform = `matrix3d(${matrix.join(\",\")})`;\n * });\n */\n/**\n * When the warp finishes, the warpEnd event is called.\n * @memberof Moveable.Warpable\n * @event warpEnd\n * @param {Moveable.Warpable.OnWarpEnd} - Parameters for the warpEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warpEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/clippable/utils.tsx",
    "content": "import { splitBracket, splitComma, convertUnitSize, splitSpace, splitUnit } from \"@daybrush/utils\";\nimport { minus } from \"@scena/matrix\";\nimport { abs, convertCSSSize } from \"../../utils\";\nimport { getRadiusStyles, getRadiusValues } from \"../roundable/borderRadius\";\nimport { MoveableManagerInterface, ClippableProps, ControlPose } from \"../../types\";\nimport { getMinMaxs } from \"overlap-area\";\nimport { getCachedStyle } from \"../../store/Store\";\n\n\nexport const CLIP_DIRECTIONS = [\n    [0, -1, \"n\"],\n    [1, 0, \"e\"],\n] as const;\n\nexport const CLIP_RECT_DIRECTIONS = [\n    [-1, -1, \"nw\"],\n    [0, -1, \"n\"],\n    [1, -1, \"ne\"],\n    [1, 0, \"e\"],\n    [1, 1, \"se\"],\n    [0, 1, \"s\"],\n    [-1, 1, \"sw\"],\n    [-1, 0, \"w\"],\n] as const;\n\n// 1 2 5 6 0 3 4 7\n// 0 1 2 3 4 5 6 7\n\nexport function getClipStyles(\n    moveable: MoveableManagerInterface<ClippableProps>,\n    clipPath: ReturnType<typeof getClipPath>,\n    poses: number[][],\n) {\n    const {\n        clipRelative,\n    } = moveable.props;\n    const {\n        width,\n        height,\n    } = moveable.state;\n    const {\n        type: clipType,\n        poses: clipPoses,\n    } = clipPath!;\n\n    const isRect = clipType === \"rect\";\n    const isCircle = clipType === \"circle\";\n    if (clipType === \"polygon\") {\n        return poses.map(pos => `${convertCSSSize(pos[0], width, clipRelative)} ${convertCSSSize(pos[1], height, clipRelative)}`);\n    } else if (isRect || clipType === \"inset\") {\n        const top = poses[1][1];\n        const right = poses[3][0];\n        const left = poses[7][0];\n        const bottom = poses[5][1];\n\n        if (isRect) {\n            return [\n                top,\n                right,\n                bottom,\n                left,\n            ].map(pos => `${pos}px`);\n        }\n        const clipStyles\n            = [top, width - right, height - bottom, left]\n                .map((pos, i) => convertCSSSize(pos, i % 2 ? width : height, clipRelative));\n\n        if (poses.length > 8) {\n            const [subWidth, subHeight] = minus(poses[4], poses[0]);\n\n            clipStyles.push(\"round\", ...getRadiusStyles(\n                clipPoses.slice(8).map((info, i) => {\n                    return {\n                        ...info,\n                        pos: poses[i],\n                    };\n                }),\n                clipRelative!,\n                subWidth,\n                subHeight,\n                left, top, right, bottom,\n            ).styles);\n        }\n        return clipStyles;\n    } else if (isCircle || clipType === \"ellipse\") {\n        const center = poses[0];\n        const ry = convertCSSSize(\n            abs(poses[1][1] - center[1]),\n            isCircle ? Math.sqrt((width * width + height * height) / 2) : height,\n            clipRelative,\n        );\n\n        const clipStyles = isCircle ? [ry]\n            : [convertCSSSize(abs(poses[2][0] - center[0]), width, clipRelative), ry];\n\n        clipStyles.push(\n            \"at\", convertCSSSize(center[0], width, clipRelative),\n            convertCSSSize(center[1], height, clipRelative));\n\n        return clipStyles;\n    }\n}\n\nexport function getRectPoses(top: number, right: number, bottom: number, left: number): ControlPose[] {\n    const xs = [left, (left + right) / 2, right];\n    const ys = [top, (top + bottom) / 2, bottom];\n\n    return CLIP_RECT_DIRECTIONS.map(([dirx, diry, dir]) => {\n        const x = xs[dirx + 1];\n        const y = ys[diry + 1];\n        return {\n            vertical: abs(diry),\n            horizontal: abs(dirx),\n            direction: dir,\n            pos: [x, y],\n        };\n    });\n}\n\nexport function getControlSize(\n    controlPoses: ControlPose[],\n) {\n    const xRange = [Infinity, -Infinity];\n    const yRange = [Infinity, -Infinity];\n\n    controlPoses.forEach(({ pos }) => {\n        xRange[0] = Math.min(xRange[0], pos[0]);\n        xRange[1] = Math.max(xRange[1], pos[0]);\n        yRange[0] = Math.min(yRange[0], pos[1]);\n        yRange[1] = Math.max(yRange[1], pos[1]);\n    });\n\n    return [\n        abs(xRange[1] - xRange[0]),\n        abs(yRange[1] - yRange[0]),\n    ];\n}\n\n\nexport function getClipPath(\n    target: HTMLElement | SVGElement | undefined | null,\n    width: number,\n    height: number,\n    defaultClip?: string,\n    customClip?: string,\n) {\n    if (!target) {\n        return;\n    }\n    let clipText: string | undefined = customClip;\n\n    if (!clipText) {\n        const getStyle = getCachedStyle(target!);\n        const clipPath = getStyle(\"clipPath\");\n\n        clipText = clipPath !== \"none\" ? clipPath : getStyle(\"clip\");\n    }\n    if (!clipText || clipText === \"none\" || clipText === \"auto\") {\n        clipText = defaultClip;\n\n        if (!clipText) {\n            return;\n        }\n    }\n    const {\n        prefix: clipPrefix = clipText,\n        value = \"\",\n    } = splitBracket(clipText);\n    const isCircle = clipPrefix === \"circle\";\n    let splitter = \" \";\n\n    if (clipPrefix === \"polygon\") {\n        const values = splitComma(value! || `0% 0%, 100% 0%, 100% 100%, 0% 100%`);\n        splitter = \",\";\n\n        const poses: ControlPose[] = values.map(pos => {\n            const [xPos, yPos] = pos.split(\" \");\n\n            return {\n                vertical: 1,\n                horizontal: 1,\n                pos: [\n                    convertUnitSize(xPos, width),\n                    convertUnitSize(yPos, height),\n                ],\n            };\n        });\n        const minMaxs = getMinMaxs(poses.map(pos => pos.pos));\n\n        return {\n            type: clipPrefix,\n            clipText,\n            poses,\n            splitter,\n            left: minMaxs.minX,\n            right: minMaxs.maxX,\n            top: minMaxs.minY,\n            bottom: minMaxs.maxY,\n        } as const;\n    } else if (isCircle || clipPrefix === \"ellipse\") {\n        let xPos = \"\";\n        let yPos = \"\";\n        let radiusX = 0;\n        let radiusY = 0;\n        const values = splitSpace(value!);\n\n        if (isCircle) {\n            let radius = \"\";\n            [radius = \"50%\", , xPos = \"50%\", yPos = \"50%\"] = values;\n\n            radiusX = convertUnitSize(radius, Math.sqrt((width * width + height * height) / 2));\n            radiusY = radiusX;\n        } else {\n            let xRadius = \"\";\n            let yRadius = \"\";\n            [xRadius = \"50%\", yRadius = \"50%\", , xPos = \"50%\", yPos = \"50%\"] = values;\n\n            radiusX = convertUnitSize(xRadius, width);\n            radiusY = convertUnitSize(yRadius, height);\n        }\n        const centerPos = [\n            convertUnitSize(xPos, width),\n            convertUnitSize(yPos, height),\n        ];\n        const poses: ControlPose[] = [\n            {\n                vertical: 1,\n                horizontal: 1,\n                pos: centerPos,\n                direction: \"nesw\",\n            },\n            ...CLIP_DIRECTIONS.slice(0, isCircle ? 1 : 2).map(dir => ({\n                vertical: abs(dir[1]),\n                horizontal: dir[0],\n                direction: dir[2],\n                sub: true,\n                pos: [\n                    centerPos[0] + dir[0] * radiusX,\n                    centerPos[1] + dir[1] * radiusY,\n                ],\n            })),\n        ];\n        return {\n            type: clipPrefix as \"circle\" | \"ellipse\",\n            clipText,\n            radiusX,\n            radiusY,\n            left: centerPos[0] - radiusX,\n            top: centerPos[1] - radiusY,\n            right: centerPos[0] + radiusX,\n            bottom: centerPos[1] + radiusY,\n            poses,\n            splitter,\n        } as const;\n    } else if (clipPrefix === \"inset\") {\n        const values = splitSpace(value! || \"0 0 0 0\");\n        const roundIndex = values.indexOf(\"round\");\n\n        const rectLength = (roundIndex > -1 ? values.slice(0, roundIndex) : values).length;\n        const radiusValues = values.slice(rectLength + 1);\n        const [\n            topValue,\n            rightValue = topValue,\n            bottomValue = topValue,\n            leftValue = rightValue,\n        ] = values.slice(0, rectLength);\n        const [top, bottom] = [topValue, bottomValue].map(pos => convertUnitSize(pos, height));\n        const [left, right] = [leftValue, rightValue].map(pos => convertUnitSize(pos, width));\n        const nextRight = width - right;\n        const nextBottom = height - bottom;\n        const radiusPoses = getRadiusValues(\n            radiusValues,\n            nextRight - left,\n            nextBottom - top,\n            left,\n            top,\n        );\n        const poses: ControlPose[] = [\n            ...getRectPoses(top, nextRight, nextBottom, left),\n            ...radiusPoses,\n        ];\n\n        return {\n            type: \"inset\",\n            clipText,\n            poses,\n            top,\n            left,\n            right: nextRight,\n            bottom: nextBottom,\n            radius: radiusValues,\n            splitter,\n        } as const;\n    } else if (clipPrefix === \"rect\") {\n        // top right bottom left\n        const values = splitComma(value! || `0px, ${width}px, ${height}px, 0px`);\n\n        splitter = \",\";\n        const [top, right, bottom, left] = values.map(pos => {\n            const { value: posValue } = splitUnit(pos);\n\n            return posValue;\n        });\n        const poses = getRectPoses(top, right, bottom, left);\n\n        return {\n            type: \"rect\",\n            clipText,\n            poses,\n            top,\n            right,\n            bottom,\n            left,\n            values,\n            splitter,\n        } as const;\n    }\n    return;\n}\n"
  },
  {
    "path": "packages/react-moveable/src/ables/consts.ts",
    "content": "import Pinchable from \"./Pinchable\";\nimport Rotatable from \"./Rotatable\";\nimport Draggable from \"./Draggable\";\nimport Resizable from \"./Resizable\";\nimport Scalable from \"./Scalable\";\nimport Warpable from \"./Warpable\";\nimport Snappable from \"./Snappable\";\nimport DragArea from \"./DragArea\";\nimport Origin from \"./Origin\";\nimport Scrollable from \"./Scrollable\";\nimport Default from \"./Default\";\nimport Padding from \"./Padding\";\nimport Clippable from \"./Clippable\";\nimport OriginDraggable from \"./OriginDraggable\";\nimport Roundable from \"./Roundable\";\nimport Groupable from \"./Groupable\";\nimport BeforeRenderable from \"./BeforeRenderable\";\nimport Renderable from \"./Renderable\";\nimport Clickable from \"./Clickable\";\nimport edgeDraggable from \"./edgeDraggable\";\nimport IndividualGroupable from \"./IndividualGroupable\";\nimport { camelize, pushSet } from \"@daybrush/utils\";\nimport { Able } from \"../types\";\n\nexport const MOVEABLE_ABLES = /*#__PURE__*/[\n    BeforeRenderable,\n    Default, Snappable, Pinchable,\n    Draggable, edgeDraggable,\n    Resizable, Scalable, Warpable, Rotatable,\n    Scrollable, Padding, Origin,\n    OriginDraggable,\n    Clippable, Roundable, Groupable, IndividualGroupable,\n    Clickable,\n    DragArea,\n    Renderable,\n] as const;\n\n\nexport const MOVEABLE_EVENTS = /*#__PURE__*/(MOVEABLE_ABLES as readonly Able[]).reduce((current, able) => {\n    (able.events || []).forEach(name => {\n        pushSet(current, name);\n    });\n    return current;\n}, [] as any[]) as Array<typeof MOVEABLE_ABLES[number][\"events\"][number]>;\n\nexport const MOVEABLE_PROPS = /*#__PURE__*/(MOVEABLE_ABLES as readonly Able[]).reduce((current, able) => {\n    (able.props || []).forEach(name => {\n        pushSet(current, name);\n    });\n    return current;\n}, [] as any[]) as Array<typeof MOVEABLE_ABLES[number][\"props\"][number]>;\n\n\nexport const MOVEABLE_REACT_EVENTS = /*#__PURE__*/MOVEABLE_EVENTS.map(name => {\n    return camelize(`on ${name}`);\n}) as Array<`on${Capitalize<typeof MOVEABLE_ABLES[number][\"events\"][number]>}`>;\n\n"
  },
  {
    "path": "packages/react-moveable/src/ables/edgeDraggable.tsx",
    "content": "import { hasClass } from \"@daybrush/utils\";\nimport { DraggableProps, MoveableGroupInterface, MoveableManagerInterface, Renderer } from \"../types\";\nimport { prefix } from \"../utils\";\nimport Draggable from \"./Draggable\";\nimport { makeAble } from \"./AbleManager\";\nimport { renderEdgeLines } from \"../renderDirections\";\n\nfunction getDraggableEvent(e: any) {\n    let datas = e.originalDatas.draggable;\n    if (!datas) {\n        e.originalDatas.draggable = {};\n        datas = e.originalDatas.draggable;\n    }\n    return { ...e, datas };\n}\nexport default makeAble(\"edgeDraggable\", {\n    css: [\n        `.edge.edgeDraggable.line {\ncursor: move;\n}`,\n    ],\n    render(moveable: MoveableManagerInterface<DraggableProps>, React: Renderer) {\n        const props = moveable.props;\n        const edge = props.edgeDraggable!;\n\n        if (!edge) {\n            return [];\n        }\n        return renderEdgeLines(\n            React,\n            \"edgeDraggable\",\n            edge,\n            moveable.getState().renderPoses,\n            props.zoom!,\n        );\n    },\n    dragCondition(moveable: MoveableManagerInterface<DraggableProps>, e: any) {\n        const props = moveable.props;\n        const target = e.inputEvent?.target;\n\n        if (!props.edgeDraggable || !target) {\n            return false;\n        }\n\n        return !props.draggable\n            && hasClass(target, prefix(\"direction\"))\n            && hasClass(target, prefix(\"edge\"))\n            && hasClass(target, prefix(\"edgeDraggable\"));\n    },\n    dragStart(moveable: MoveableManagerInterface<DraggableProps>, e: any) {\n        return Draggable.dragStart(moveable, getDraggableEvent(e));\n    },\n    drag(moveable: MoveableManagerInterface<DraggableProps>, e: any) {\n        return Draggable.drag(moveable, getDraggableEvent(e));\n    },\n    dragEnd(moveable: MoveableManagerInterface<DraggableProps, any>, e: any) {\n        return Draggable.dragEnd(moveable, getDraggableEvent(e));\n    },\n    dragGroupCondition(moveable: MoveableGroupInterface<DraggableProps>, e: any) {\n        const props = moveable.props;\n        const target = e.inputEvent?.target;\n\n        if (!props.edgeDraggable || !target) {\n            return false;\n        }\n        return !props.draggable && hasClass(target, prefix(\"direction\")) && hasClass(target, prefix(\"line\"));\n    },\n    dragGroupStart(moveable: MoveableGroupInterface<DraggableProps>, e: any) {\n        return Draggable.dragGroupStart(moveable, getDraggableEvent(e));\n    },\n    dragGroup(moveable: MoveableGroupInterface<DraggableProps>, e: any) {\n        return Draggable.dragGroup(moveable, getDraggableEvent(e));\n    },\n    dragGroupEnd(moveable: MoveableGroupInterface<DraggableProps, any>, e: any) {\n        return Draggable.dragGroupEnd(moveable, getDraggableEvent(e));\n    },\n    unset(moveable: any) {\n        return Draggable.unset(moveable);\n    },\n});\n\n/**\n * Whether to move by dragging the edge line (default: false)\n * @name Moveable.Draggable#edgeDraggable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *  draggable: true,\n *  edgeDraggable: false,\n * });\n *\n * moveable.edgeDraggable = true;\n */\n"
  },
  {
    "path": "packages/react-moveable/src/ables/roundable/borderRadius.tsx",
    "content": "import { convertCSSSize } from \"../../utils\";\nimport { ControlPose } from \"../../types\";\nimport { convertUnitSize } from \"@daybrush/utils\";\n\nconst RADIUS_DIRECTIONS = [\"nw\", \"ne\", \"se\", \"sw\"] as const;\n\nfunction calculateRatio(values: number[], size: number) {\n    const sumSize = values[0] + values[1];\n    const sumRatio = sumSize > size ? size / sumSize : 1;\n\n    values[0] *= sumRatio;\n    values[1] = size - values[1] * sumRatio;\n\n    return values;\n}\nexport const HORIZONTAL_RADIUS_ORDER = [1, 2, 5, 6];\nexport const VERTICAL_RADIUS_ORDER = [0, 3, 4, 7];\nexport const HORIZONTAL_RADIUS_DIRECTIONS = [1, -1, -1, 1] as const;\nexport const VERTICAL_RADIUS_DIRECTIONS = [1, 1, -1, -1] as const;\n\nexport function getRadiusStyles(\n    nextPoses: ControlPose[],\n    isRelative: boolean,\n    width: number,\n    height: number,\n    left = 0,\n    top = 0,\n    right: number = width,\n    bottom: number = height,\n) {\n    const clipStyles: string[] = [];\n    let isVertical = false;\n\n    const radiusPoses = nextPoses.filter(pos => !pos.virtual);\n    const raws = radiusPoses.map(posInfo => {\n        const { horizontal, vertical, pos } = posInfo;\n\n        if (vertical && !isVertical) {\n            isVertical = true;\n            clipStyles.push(\"/\");\n        }\n\n        if (isVertical) {\n            const rawPos = Math.max(0, vertical === 1 ? pos[1] - top : bottom - pos[1]);\n            clipStyles.push(convertCSSSize(rawPos, height, isRelative));\n\n            return rawPos;\n        } else {\n            const rawPos = Math.max(0, horizontal === 1 ? pos[0] - left : right - pos[0]);\n            clipStyles.push(convertCSSSize(rawPos, width, isRelative));\n\n            return rawPos;\n        }\n    });\n\n    return {\n        radiusPoses,\n        styles: clipStyles,\n        raws,\n    };\n}\nexport function getRadiusRange(controlPoses: ControlPose[]) {\n    // [start, length]\n    const horizontalRange = [0, 0];\n    const verticalRange = [0, 0];\n    const length = controlPoses.length;\n\n    for (let i = 0; i < length; ++i) {\n        const clipPose = controlPoses[i];\n\n        if (!clipPose.sub) {\n            continue;\n        }\n        if (clipPose.horizontal) {\n            if (horizontalRange[1] === 0) {\n                horizontalRange[0] = i;\n            }\n            horizontalRange[1] = i - horizontalRange[0] + 1;\n            verticalRange[0] = i + 1;\n        }\n        if (clipPose.vertical) {\n            if (verticalRange[1] === 0) {\n                verticalRange[0] = i;\n            }\n            verticalRange[1] = i - verticalRange[0] + 1;\n        }\n    }\n\n    return {\n        horizontalRange,\n        verticalRange,\n    };\n}\nexport function getRadiusValues(\n    values: string[],\n    width: number,\n    height: number,\n    left: number,\n    top: number,\n    minCounts: number[] = [0, 0],\n    full = false,\n): ControlPose[] {\n    const splitIndex = values.indexOf(\"/\");\n    const splitLength = (splitIndex > -1 ? values.slice(0, splitIndex) : values).length;\n    const horizontalValues = values.slice(0, splitLength);\n    const verticalValues = values.slice(splitLength + 1);\n    const horizontalValuesLength = horizontalValues.length;\n    const verticalValuesLength = verticalValues.length;\n    const hasVerticalValues = verticalValuesLength > 0;\n    const [\n        nwValue = \"0px\",\n        neValue = nwValue,\n        seValue = nwValue,\n        swValue = neValue,\n    ] = horizontalValues;\n    const [\n        wnValue = nwValue,\n        enValue = hasVerticalValues ? wnValue : neValue,\n        esValue = hasVerticalValues ? wnValue : seValue,\n        wsValue = hasVerticalValues ? enValue : swValue,\n    ] = verticalValues;\n\n    const horizontalRawPoses = [nwValue, neValue, seValue, swValue].map(pos => convertUnitSize(pos, width));\n    const verticalRawPoses = [wnValue, enValue, esValue, wsValue].map(pos => convertUnitSize(pos, height));\n    const horizontalPoses = horizontalRawPoses.slice();\n    const verticalPoses = verticalRawPoses.slice();\n\n    [horizontalPoses[0], horizontalPoses[1]] = calculateRatio(\n        [horizontalPoses[0], horizontalPoses[1]],\n        width,\n    );\n    [horizontalPoses[3], horizontalPoses[2]] = calculateRatio(\n        [horizontalPoses[3], horizontalPoses[2]],\n        width,\n    );\n    [verticalPoses[0], verticalPoses[3]] = calculateRatio(\n        [verticalPoses[0], verticalPoses[3]], height,\n    );\n    [verticalPoses[1], verticalPoses[2]] = calculateRatio(\n        [verticalPoses[1], verticalPoses[2]], height,\n    );\n\n    const nextHorizontalPoses = full\n        ? horizontalPoses\n        : horizontalPoses.slice(0, Math.max(minCounts[0], horizontalValuesLength));\n    const nextVerticalPoses = full\n        ? verticalPoses\n        : verticalPoses.slice(0, Math.max(minCounts[1], verticalValuesLength));\n\n    return [\n        ...nextHorizontalPoses.map((pos, i) => {\n            const direction = RADIUS_DIRECTIONS[i];\n\n            return {\n                virtual: i >= horizontalValuesLength,\n                horizontal: HORIZONTAL_RADIUS_DIRECTIONS[i],\n                vertical: 0,\n                pos: [left + pos, top + (VERTICAL_RADIUS_DIRECTIONS[i] === -1 ? height : 0)],\n                sub: true,\n                raw: horizontalRawPoses[i],\n                direction,\n            };\n        }),\n        ...nextVerticalPoses.map((pos, i) => {\n            const direction = RADIUS_DIRECTIONS[i];\n\n            return {\n                virtual: i >= verticalValuesLength,\n                horizontal: 0,\n                vertical: VERTICAL_RADIUS_DIRECTIONS[i],\n                pos: [left + (HORIZONTAL_RADIUS_DIRECTIONS[i] === -1 ? width : 0), top + pos],\n                sub: true,\n                raw: verticalRawPoses[i],\n                direction,\n            };\n        }),\n    ];\n}\nexport function removeRadiusPos(\n    controlPoses: ControlPose[],\n    poses: number[][],\n    index: number,\n    startIndex: number,\n    length: number = poses.length,\n) {\n    const {\n        horizontalRange,\n        verticalRange,\n    } = getRadiusRange(controlPoses.slice(startIndex));\n    const radiuslIndex = index - startIndex;\n    let deleteCount = 0;\n\n    if (radiuslIndex === 0) {\n        deleteCount = length;\n    } else if (radiuslIndex > 0 && radiuslIndex < horizontalRange[1]) {\n        deleteCount = horizontalRange[1] - radiuslIndex;\n    } else if (radiuslIndex >= verticalRange[0]) {\n        deleteCount = verticalRange[0] + verticalRange[1] - radiuslIndex;\n    } else {\n        return;\n    }\n    controlPoses.splice(index, deleteCount);\n    poses.splice(index, deleteCount);\n}\nexport function addRadiusPos(\n    controlPoses: ControlPose[],\n    poses: number[][],\n    startIndex: number,\n    horizontalIndex: number,\n    verticalIndex: number,\n    distX: number,\n    distY: number,\n    right: number,\n    bottom: number,\n    left = 0,\n    top = 0,\n) {\n    const {\n        horizontalRange,\n        verticalRange,\n    } = getRadiusRange(controlPoses.slice(startIndex));\n    if (horizontalIndex > -1) {\n        const radiusX = HORIZONTAL_RADIUS_DIRECTIONS[horizontalIndex] === 1\n            ? distX - left\n            : right - distX;\n        for (let i = horizontalRange[1]; i <= horizontalIndex; ++i) {\n            const y = VERTICAL_RADIUS_DIRECTIONS[i] === 1 ? top : bottom;\n            let x = 0;\n            if (horizontalIndex === i) {\n                x = distX;\n            } else if (i === 0) {\n                x = left + radiusX;\n            } else if (HORIZONTAL_RADIUS_DIRECTIONS[i] === -1) {\n                x = right - (poses[startIndex][0] - left);\n            }\n            controlPoses.splice(startIndex + i, 0, {\n                horizontal: HORIZONTAL_RADIUS_DIRECTIONS[i],\n                vertical: 0,\n                pos: [x, y],\n            });\n            poses.splice(startIndex + i, 0, [x, y]);\n\n            if (i === 0) {\n                break;\n            }\n        }\n    } else if (verticalIndex > - 1) {\n        const radiusY = VERTICAL_RADIUS_DIRECTIONS[verticalIndex] === 1\n            ? distY - top\n            : bottom - distY;\n        if (horizontalRange[1] === 0 && verticalRange[1] === 0) {\n            const pos = [\n                left + radiusY,\n                top,\n            ];\n            controlPoses.push({\n                horizontal: HORIZONTAL_RADIUS_DIRECTIONS[0],\n                vertical: 0,\n                pos,\n            });\n            poses.push(pos);\n        }\n\n        const startVerticalIndex = verticalRange[0];\n        for (let i = verticalRange[1]; i <= verticalIndex; ++i) {\n            const x = HORIZONTAL_RADIUS_DIRECTIONS[i] === 1 ? left : right;\n            let y = 0;\n            if (verticalIndex === i) {\n                y = distY;\n            } else if (i === 0) {\n                y = top + radiusY;\n            } else if (VERTICAL_RADIUS_DIRECTIONS[i] === 1) {\n                y = poses[startIndex + startVerticalIndex][1];\n            } else if (VERTICAL_RADIUS_DIRECTIONS[i] === -1) {\n                y = bottom - (poses[startIndex + startVerticalIndex][1] - top);\n            }\n            controlPoses.push({\n                horizontal: 0,\n                vertical: VERTICAL_RADIUS_DIRECTIONS[i],\n                pos: [x, y],\n            });\n            poses.push([x, y]);\n            if (i === 0) {\n                break;\n            }\n        }\n    }\n}\nexport function splitRadiusPoses(\n    controlPoses: ControlPose[],\n    raws: number[] = controlPoses.map(pos => pos.raw!),\n) {\n    const horizontals = controlPoses\n        .map((pos, i) => pos.horizontal ? raws[i] : null).filter(pos => pos != null) as number[];\n    const verticals = controlPoses\n        .map((pos, i) => pos.vertical ? raws[i] : null).filter(pos => pos != null) as number[];\n\n    return {\n        horizontals,\n        verticals,\n    };\n}\n"
  },
  {
    "path": "packages/react-moveable/src/ables/snappable/bounds.ts",
    "content": "import { getRad, throttle } from \"@daybrush/utils\";\nimport {\n    BoundInfo, SnappableProps, BoundType,\n    RotatableProps, MoveableManagerInterface, SnappableState,\n} from \"../../types\";\nimport { rotate, minus } from \"@scena/matrix\";\nimport { abs, getDistSize } from \"../../utils\";\nimport { TINY_NUM } from \"../../consts\";\n\nexport function checkBoundPoses(\n    bounds: BoundType | false | undefined,\n    verticalPoses: number[],\n    horizontalPoses: number[],\n) {\n    const {\n        position = \"client\",\n        left = -Infinity,\n        top = -Infinity,\n        right = Infinity,\n        bottom = Infinity,\n    } = bounds || {};\n    const nextBounds = {\n        position,\n        left,\n        top,\n        right,\n        bottom,\n    };\n\n    return {\n        vertical: checkBounds(nextBounds, verticalPoses, true),\n        horizontal: checkBounds(nextBounds, horizontalPoses, false),\n    };\n}\nexport function getBounds(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    externalBounds?: BoundType | false | null,\n) {\n    const {\n        containerClientRect: {\n            clientHeight: containerHeight,\n            clientWidth: containerWidth,\n            clientLeft,\n            clientTop,\n        },\n        snapOffset: {\n            left: snapOffsetLeft,\n            top: snapOffsetTop,\n            right: snapOffsetRight,\n            bottom: snapOffsetBottom,\n        },\n    } = moveable.state;\n    const bounds = externalBounds || moveable.props.bounds || {} as BoundType;\n    const position = bounds.position || \"client\";\n    const isCSS = position === \"css\";\n    const {\n        left = -Infinity,\n        top = -Infinity,\n    } = bounds;\n    let {\n        right = isCSS ? -Infinity : Infinity,\n        bottom = isCSS ? -Infinity : Infinity,\n    } = bounds;\n\n    if (isCSS) {\n        right = containerWidth! + snapOffsetRight - snapOffsetLeft - right;\n        bottom = containerHeight! + snapOffsetBottom - snapOffsetTop - bottom;\n    }\n\n    return {\n        left: left + snapOffsetLeft - clientLeft!,\n        right: right + snapOffsetLeft - clientLeft!,\n        top: top + snapOffsetTop - clientTop!,\n        bottom: bottom + snapOffsetTop - clientTop!,\n    };\n}\nexport function checkBoundKeepRatio(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    startPos: number[],\n    endPos: number[],\n) {\n    const {\n        left,\n        top,\n        right,\n        bottom,\n    } = getBounds(moveable);\n\n    const [endX, endY] = endPos;\n    let [dx, dy] = minus(endPos, startPos);\n\n    if (abs(dx) < TINY_NUM) {\n        dx = 0;\n    }\n    if (abs(dy) < TINY_NUM) {\n        dy = 0;\n    }\n    const isBottom = dy > 0;\n    const isRight = dx > 0;\n\n    const verticalInfo = {\n        isBound: false,\n        offset: 0,\n        pos: 0,\n    };\n    const horizontalInfo = {\n        isBound: false,\n        offset: 0,\n        pos: 0,\n    };\n    if (dx === 0 && dy === 0) {\n        return {\n            vertical: verticalInfo,\n            horizontal: horizontalInfo,\n        };\n    } else if (dx === 0) {\n        if (isBottom) {\n            if (bottom < endY) {\n                horizontalInfo.pos = bottom;\n                horizontalInfo.offset = endY - bottom;\n            }\n        } else {\n            if (top > endY) {\n                horizontalInfo.pos = top;\n                horizontalInfo.offset = endY - top;\n            }\n        }\n    } else if (dy === 0) {\n        if (isRight) {\n            if (right < endX) {\n                verticalInfo.pos = right;\n                verticalInfo.offset = endX - right;\n            }\n        } else {\n            if (left > endX) {\n                verticalInfo.pos = left;\n                verticalInfo.offset = endX - left;\n            }\n        }\n    } else {\n        // y - y1 = a * (x - x1)\n        const a = dy / dx;\n        const b = endPos[1] - a * endX;\n        let y = 0;\n        let x = 0;\n        let isBound = false;\n\n        if (isRight && right <= endX) {\n            y = a * right + b;\n            x = right;\n            isBound = true;\n        } else if (!isRight && endX <= left) {\n            y = a * left + b;\n            x = left;\n            isBound = true;\n        }\n        if (isBound) {\n            if (y < top || y > bottom) {\n                isBound = false;\n            }\n        }\n        if (!isBound) {\n            if (isBottom && bottom <= endY) {\n                y = bottom;\n                x = (y - b) / a;\n                isBound = true;\n            } else if (!isBottom &&  endY <= top) {\n                y = top;\n                x = (y - b) / a;\n                isBound = true;\n            }\n        }\n        if (isBound) {\n            verticalInfo.isBound = true;\n            verticalInfo.pos = x;\n            verticalInfo.offset = endX - x;\n\n            horizontalInfo.isBound = true;\n            horizontalInfo.pos = y;\n            horizontalInfo.offset = endY - y;\n        }\n    }\n\n    return {\n        vertical: verticalInfo,\n        horizontal: horizontalInfo,\n    };\n}\nfunction checkBounds(\n    bounds: Required<BoundType>,\n    poses: number[],\n    isVertical: boolean,\n): BoundInfo[] {\n    // 0   [100 - 200]  300\n    const startBoundPos = bounds[isVertical ? \"left\" : \"top\"];\n    const endBoundPos = bounds[isVertical ? \"right\" : \"bottom\"];\n\n    // 450\n    const minPos = Math.min(...poses);\n    const maxPos = Math.max(...poses);\n    const boundInfos: BoundInfo[] = [];\n\n    if (startBoundPos + 1 > minPos) {\n        boundInfos.push({\n            direction: \"start\",\n            isBound: true,\n            offset: minPos - startBoundPos,\n            pos: startBoundPos,\n        });\n    }\n    if (endBoundPos - 1 < maxPos) {\n        boundInfos.push({\n            direction: \"end\",\n            isBound: true,\n            offset: maxPos - endBoundPos,\n            pos: endBoundPos,\n        });\n    }\n\n    if (!boundInfos.length) {\n        boundInfos.push({\n            isBound: false,\n            offset: 0,\n            pos: 0,\n        });\n    }\n\n    return boundInfos.sort((a, b) => abs(b.offset) - abs(a.offset));\n}\nexport function isBoundRotate(\n    relativePoses: number[][],\n    boundRect: { left: number, top: number, right: number, bottom: number },\n    rad: number,\n) {\n    const nextPoses = rad ? relativePoses.map(pos => rotate(pos, rad)) : relativePoses;\n\n    return nextPoses.some(pos => {\n        return (pos[0] < boundRect.left && abs(pos[0] - boundRect.left) > 0.1)\n            || (pos[0] > boundRect.right && abs(pos[0] - boundRect.right) > 0.1)\n            || (pos[1] < boundRect.top && abs(pos[1] - boundRect.top) > 0.1)\n            || (pos[1] > boundRect.bottom && abs(pos[1] - boundRect.bottom) > 0.1);\n    });\n}\nexport function boundRotate(\n    vec: number[],\n    boundPos: number,\n    index: number,\n) {\n    const r = getDistSize(vec);\n    const nextPos = Math.sqrt(r * r - boundPos * boundPos) || 0;\n\n    return [nextPos, -nextPos].sort((a, b) => {\n        return abs(a - vec[index ? 0 : 1]) - abs(b - vec[index ? 0 : 1]);\n    }).map(pos => {\n        return getRad([0, 0], index ? [pos, boundPos] : [boundPos, pos]);\n    });\n}\n\nexport function checkRotateBounds(\n    moveable: MoveableManagerInterface<SnappableProps & RotatableProps, SnappableState>,\n    prevPoses: number[][],\n    nextPoses: number[][],\n    origin: number[],\n    rotation: number,\n) {\n    if (!moveable.props.bounds) {\n        return [];\n    }\n    const rad = rotation * Math.PI / 180;\n\n    const {\n        left,\n        top,\n        right,\n        bottom,\n    } = getBounds(moveable);\n\n    const relativeLeft = left - origin[0];\n    const relativeRight = right - origin[0];\n    const relativeTop = top - origin[1];\n    const relativeBottom = bottom - origin[1];\n    const boundRect = {\n        left: relativeLeft,\n        top: relativeTop,\n        right: relativeRight,\n        bottom: relativeBottom,\n    };\n\n    if (!isBoundRotate(nextPoses, boundRect, 0)) {\n        return [];\n    }\n    const result: number[] = [];\n    [\n        [relativeLeft, 0],\n        [relativeRight, 0],\n        [relativeTop, 1],\n        [relativeBottom, 1],\n    ].forEach(([boundPos, index]) => {\n        nextPoses.forEach(nextPos => {\n            const relativeRad1 = getRad([0, 0], nextPos);\n\n            result.push(...boundRotate(nextPos, boundPos, index)\n                .map(relativeRad2 => rad + relativeRad2 - relativeRad1)\n                .filter(nextRad => !isBoundRotate(prevPoses, boundRect, nextRad))\n                .map(nextRad => throttle(nextRad * 180 / Math.PI, TINY_NUM)));\n        });\n    });\n\n    return result;\n}\n"
  },
  {
    "path": "packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts",
    "content": "import { convertUnitSize, dot, flat, isNumber, isObject, throttle } from \"@daybrush/utils\";\nimport { diff } from \"@egjs/children-differ\";\nimport {\n    MoveableManagerInterface, SnappableProps,\n    SnappableState, SnapGuideline, SnapDirectionPoses,\n    PosGuideline, ElementGuidelineValue,\n    SnapElementRect,\n    NumericPosGuideline,\n} from \"../../types\";\nimport { getRect, getAbsolutePosesByState, getRefTarget, calculateInversePosition, prefix, abs } from \"../../utils\";\nimport {\n    splitSnapDirectionPoses, getSnapDirections,\n    HORIZONTAL_NAMES_MAP, VERTICAL_NAMES_MAP, calculateContainerPos, SNAP_SKIP_NAMES_MAP,\n} from \"./utils\";\n\nexport function getTotalGuidelines(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n) {\n    const state = moveable.state;\n    const {\n        containerClientRect,\n        hasFixed,\n    } = state;\n    const {\n        overflow,\n        scrollHeight: containerHeight,\n        scrollWidth: containerWidth,\n        clientHeight: containerClientHeight,\n        clientWidth: containerClientWidth,\n        clientLeft,\n        clientTop,\n    } = containerClientRect;\n    const {\n        snapGap = true,\n        verticalGuidelines,\n        horizontalGuidelines,\n        snapThreshold = 5,\n        maxSnapElementGuidelineDistance = Infinity,\n        isDisplayGridGuidelines,\n    } = moveable.props;\n    const { top, left, bottom, right } = getRect(getAbsolutePosesByState(moveable.state));\n    const targetRect = { top, left, bottom, right, center: (left + right) / 2, middle: (top + bottom) / 2 };\n    const elementGuidelines = getElementGuidelines(moveable);\n    let totalGuidelines: SnapGuideline[] = [...elementGuidelines];\n\n    const snapThresholdMultiples = (state.snapThresholdInfo?.multiples ?? [1, 1]).map(n => n * snapThreshold);\n\n    if (snapGap) {\n        totalGuidelines.push(...getGapGuidelines(\n            moveable,\n            targetRect,\n            snapThresholdMultiples,\n        ));\n    }\n    const snapOffset = {\n        ...(state.snapOffset || {\n            left: 0,\n            top: 0,\n            bottom: 0,\n            right: 0,\n        }),\n    };\n\n    totalGuidelines.push(...getGridGuidelines(\n        moveable,\n        overflow ? containerWidth! : containerClientWidth!,\n        overflow ? containerHeight! : containerClientHeight!,\n        clientLeft,\n        clientTop,\n        snapOffset,\n        isDisplayGridGuidelines,\n    ));\n\n\n    if (hasFixed) {\n        const { left, top } = containerClientRect;\n\n        snapOffset.left += left;\n        snapOffset.top += top;\n        snapOffset.right += left;\n        snapOffset.bottom += top;\n    }\n\n    totalGuidelines.push(...getDefaultGuidelines(\n        horizontalGuidelines || false,\n        verticalGuidelines || false,\n        overflow ? containerWidth! : containerClientWidth!,\n        overflow ? containerHeight! : containerClientHeight!,\n        clientLeft,\n        clientTop,\n        snapOffset,\n    ));\n\n    totalGuidelines = totalGuidelines.filter(({ element, elementRect, type }) => {\n        if (!element || !elementRect) {\n            return true;\n        }\n        const rect = elementRect.rect;\n\n        return checkBetweenRects(targetRect, rect, type, maxSnapElementGuidelineDistance);\n    });\n\n    return totalGuidelines;\n}\n\nexport function getGapGuidelines(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    targetRect: SnapDirectionPoses,\n    snapThresholds: number[],\n) {\n    const {\n        maxSnapElementGuidelineDistance = Infinity,\n        maxSnapElementGapDistance = Infinity,\n    } = moveable.props;\n    const elementRects = moveable.state.elementRects;\n    const gapGuidelines: SnapGuideline[] = [];\n    [\n        [\"vertical\", VERTICAL_NAMES_MAP, HORIZONTAL_NAMES_MAP] as const,\n        [\"horizontal\", HORIZONTAL_NAMES_MAP, VERTICAL_NAMES_MAP] as const,\n    ].forEach(([type, mainNames, sideNames]) => {\n        const targetStart = targetRect[mainNames.start]!;\n        const targetEnd = targetRect[mainNames.end]!;\n        const targetCenter = targetRect[mainNames.center]!;\n        const targetStart2 = targetRect[sideNames.start]!;\n        const targetEnd2 = targetRect[sideNames.end]!;\n\n        // element : moveable\n        const snapThresholdMap = {\n            left: snapThresholds[0],\n            top: snapThresholds[1],\n        };\n\n        function getDist(elementRect: SnapElementRect) {\n            const rect = elementRect.rect;\n            const snapThreshold = snapThresholdMap[mainNames.start];\n\n            if (rect[mainNames.end]! < targetStart + snapThreshold) {\n                return targetStart - rect[mainNames.end]!;\n            } else if (targetEnd - snapThreshold < rect[mainNames.start]!) {\n                return rect[mainNames.start]! - targetEnd;\n            } else {\n                return -1;\n            }\n        }\n        const nextElementRects = elementRects.filter(elementRect => {\n            const rect = elementRect.rect;\n\n            if (rect[sideNames.start]! > targetEnd2 || rect[sideNames.end]! < targetStart2) {\n                return false;\n            }\n\n            return getDist(elementRect) > 0;\n        }).sort((a, b) => {\n            return getDist(a) - getDist(b);\n        });\n\n        const groups: SnapElementRect[][] = [];\n\n        nextElementRects.forEach(snapRect1 => {\n            nextElementRects.forEach(snapRect2 => {\n                if (snapRect1 === snapRect2) {\n                    return;\n                }\n                const { rect: rect1 } = snapRect1;\n                const { rect: rect2 } = snapRect2;\n\n                const rect1Start = rect1[sideNames.start]!;\n                const rect1End = rect1[sideNames.end]!;\n                const rect2Start = rect2[sideNames.start]!;\n                const rect2End = rect2[sideNames.end]!;\n\n                if (rect1Start > rect2End || rect2Start > rect1End) {\n                    return;\n                }\n\n                groups.push([snapRect1, snapRect2]);\n            });\n        });\n\n        groups.forEach(([snapRect1, snapRect2]) => {\n            const { rect: rect1 } = snapRect1;\n            const { rect: rect2 } = snapRect2;\n\n            const rect1Start = rect1[mainNames.start]!;\n            const rect1End = rect1[mainNames.end]!;\n            const rect2Start = rect2[mainNames.start]!;\n            const rect2End = rect2[mainNames.end]!;\n            const snapThreshold = snapThresholdMap[mainNames.start];\n            let gap = 0;\n            let pos = 0;\n            let isStart = false;\n            let isCenter = false;\n            let isEnd = false;\n\n            if (rect1End <= targetStart && targetEnd <= rect2Start) {\n                // (l)element1(r) : (l)target(r) : (l)element2(r)\n                isCenter = true;\n                gap = ((rect2Start - rect1End) - (targetEnd - targetStart)) / 2;\n                pos = rect1End + gap + (targetEnd - targetStart) / 2;\n\n                if (abs(pos - targetCenter) > snapThreshold) {\n                    return;\n                }\n            } else if (rect1End < rect2Start && rect2End < targetStart + snapThreshold) {\n                // (l)element1(r) : (l)element2(r) : (l)target\n                isStart = true;\n\n                gap = rect2Start - rect1End;\n                pos = rect2End + gap;\n\n                if (abs(pos - targetStart) > snapThreshold) {\n                    return;\n                }\n            } else if (rect1End < rect2Start && targetEnd - snapThreshold < rect1Start) {\n                // target(r) : (l)element1(r) : (l)element2(r)\n\n                isEnd = true;\n                gap = rect2Start - rect1End;\n                pos = rect1Start - gap;\n\n                if (abs(pos - targetEnd) > snapThreshold) {\n                    return;\n                }\n            } else {\n                return;\n            }\n            if (!gap) {\n                return;\n            }\n            if (!checkBetweenRects(targetRect, rect2, type, maxSnapElementGuidelineDistance)) {\n                return;\n            }\n            if (gap > maxSnapElementGapDistance) {\n                return;\n            }\n            gapGuidelines.push({\n                type,\n                pos: type === \"vertical\" ? [pos, 0] : [0, pos],\n                element: snapRect2.element,\n                size: 0,\n                className: snapRect2.className,\n                isStart,\n                isCenter,\n                isEnd,\n                gap,\n                hide: true,\n                gapRects: [snapRect1, snapRect2],\n                direction: \"\",\n                elementDirection: \"\",\n            });\n        });\n    });\n    return gapGuidelines;\n}\n\nexport function startGridGroupGuidelines(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    clientLeft: number,\n    clientTop: number,\n    snapOffset: { left: number, top: number, right: number, bottom: number },\n) {\n    const props = moveable.props;\n    const state = moveable.state;\n    const {\n        snapGridAll,\n    } = props;\n    const {\n        snapGridWidth = 0,\n        snapGridHeight = 0,\n    } = props;\n    const {\n        snapRenderInfo,\n    } = state;\n    const hasDirection = snapRenderInfo && (snapRenderInfo.direction?.[0] || snapRenderInfo.direction?.[1]);\n    const moveables = moveable.moveables;\n    const ignores = [false, false];\n\n    // snap group's all child to grid.\n    if (\n        snapGridAll\n        && moveables\n        && hasDirection\n        && (snapGridWidth || snapGridHeight)\n    ) {\n        if (state.snapThresholdInfo) {\n            return;\n        }\n        state.snapThresholdInfo = {\n            multiples: [1, 1],\n            offset: [0, 0],\n        };\n\n        const rect = moveable.getRect();\n        const children = rect.children;\n        const direction = snapRenderInfo.direction!;\n\n\n        if (children) {\n            const result = direction.map((dir, i) => {\n                const {\n                    snapSize,\n                    posName,\n                    sizeName,\n                    clientOffset,\n                } = i === 0 ? {\n                    snapSize: snapGridWidth,\n                    posName: \"left\",\n                    sizeName: \"width\",\n                    clientOffset: snapOffset.left - clientLeft,\n                } as const : {\n                    snapSize: snapGridHeight,\n                    posName: \"top\",\n                    sizeName: \"height\",\n                    clientOffset: snapOffset.top - clientTop,\n                } as const;\n\n                if (!snapSize) {\n                    return {\n                        dir,\n                        multiple: 1,\n                        snapSize,\n                        snapOffset: 0,\n                    };\n                }\n                const rectSize = rect[sizeName];\n                const rectPos = rect[posName];\n\n                // 사이즈보다 만약 작다면 어떻게 해야되죠?\n                const childSizes = flat(children.map(child => {\n                    return [\n                        (child[posName] - rectPos),\n                        (child[sizeName]),\n                        (rectSize - child[sizeName] - child[posName] + rectPos),\n                    ];\n                })).filter(v => v).sort((a, b) => {\n                    return a - b;\n                });\n\n                const firstChildSize = childSizes[0];\n                const childSnapSizes = childSizes.map(size => throttle(size / firstChildSize, 0.1) * snapSize);\n                let n = 1;\n\n                const rectRatio = throttle(rectSize / firstChildSize, 0.1);\n\n                for (n = 1; n <= 10; ++n) {\n                    if (childSnapSizes.every(childSize => {\n                        return childSize * n % 1 === 0;\n                    })) {\n                        break;\n                    }\n                }\n\n                // dir 1 (fixed -1)\n                // dir 0 (fixed 0)\n                // dir -1 (fixed 1)\n\n                const ratio = (-dir + 1) / 2;\n                const offsetPos = dot(\n                    rectPos - clientOffset,\n                    rectPos - clientOffset + rectSize,\n                    ratio, 1 - ratio,\n                );\n\n                return {\n                    multiple: rectRatio * n,\n                    dir,\n                    snapSize,\n                    snapOffset: Math.round(offsetPos / snapSize),\n                };\n            });\n\n            const multiples = result.map(r => r.multiple || 1);\n            state.snapThresholdInfo.multiples = multiples;\n            state.snapThresholdInfo.offset = result.map(r => r.snapOffset);\n\n            result.forEach((r, i) => {\n                if (r.snapSize) {\n                    ignores[i] = true;\n                }\n            });\n        }\n    } else {\n        state.snapThresholdInfo = null;\n    }\n}\n\n\nexport function getGridGuidelines(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    containerWidth: number,\n    containerHeight: number,\n    clientLeft = 0,\n    clientTop = 0,\n    snapOffset: { left: number, top: number, right: number, bottom: number },\n    isDisplayGridGuidelines?: boolean,\n): SnapGuideline[] {\n    const props = moveable.props;\n    const state = moveable.state;\n    let {\n        snapGridWidth = 0,\n        snapGridHeight = 0,\n    } = props;\n    const guidelines: SnapGuideline[] = [];\n    const {\n        left: snapOffsetLeft,\n        top: snapOffsetTop,\n    } = snapOffset;\n    let startOffset = [0, 0];\n\n    startGridGroupGuidelines(\n        moveable,\n        clientLeft,\n        clientTop,\n        snapOffset,\n    );\n\n    const snapThresholdInfo = state.snapThresholdInfo;\n    const defaultSnapGridWidth = snapGridWidth;\n    const defaultSnapGridHeight = snapGridHeight;\n\n    if (snapThresholdInfo) {\n        snapGridWidth *= snapThresholdInfo.multiples[0] || 1;\n        snapGridHeight *= snapThresholdInfo.multiples[1] || 1;\n        startOffset = snapThresholdInfo.offset;\n    }\n\n    if (snapGridHeight) {\n        const pushGuideline = (pos: number) => {\n            guidelines.push({\n                type: \"horizontal\",\n                pos: [\n                    snapOffsetLeft,\n                    throttle(startOffset[1] * defaultSnapGridHeight + pos - clientTop + snapOffsetTop, 0.1),\n                ],\n                className: prefix(\"grid-guideline\"),\n                size: containerWidth!,\n                hide: !isDisplayGridGuidelines,\n                direction: \"\",\n                grid: true,\n            });\n        };\n        for (let pos = 0; pos <= containerHeight * 2; pos += snapGridHeight) {\n            pushGuideline(pos);\n        }\n        for (let pos = -snapGridHeight; pos >= -containerHeight; pos -= snapGridHeight) {\n            pushGuideline(pos);\n        }\n    }\n\n    if (snapGridWidth) {\n        const pushGuideline = (pos: number) => {\n            guidelines.push({\n                type: \"vertical\",\n                pos: [\n                    throttle(startOffset[0] * defaultSnapGridWidth + pos - clientLeft + snapOffsetLeft, 0.1),\n                    snapOffsetTop,\n                ],\n                className: prefix(\"grid-guideline\"),\n                size: containerHeight!,\n                hide: !isDisplayGridGuidelines,\n                direction: \"\",\n                grid: true,\n            });\n        };\n        for (let pos = 0; pos <= containerWidth * 2; pos += snapGridWidth) {\n            pushGuideline(pos);\n        }\n        for (let pos = -snapGridWidth; pos >= -containerWidth; pos -= snapGridWidth) {\n            pushGuideline(pos);\n        }\n    }\n\n    return guidelines;\n}\n\nexport function checkBetweenRects(\n    rect1: SnapDirectionPoses,\n    rect2: SnapDirectionPoses,\n    type: \"horizontal\" | \"vertical\",\n    distance: number,\n) {\n    if (type === \"horizontal\") {\n        return abs(rect1.right! - rect2.left!) <= distance\n            || abs(rect1.left! - rect2.right!) <= distance\n            || rect1.left! <= rect2.right! && rect2.left! <= rect1.right!;\n    } else if (type === \"vertical\") {\n        return abs(rect1.bottom! - rect2.top!) <= distance\n            || abs(rect1.top! - rect2.bottom!) <= distance\n            || rect1.top! <= rect2.bottom! && rect2.top! <= rect1.bottom!;\n    }\n    return true;\n}\n\n\nexport function getElementGuidelines(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n) {\n    const state = moveable.state;\n\n    const {\n        elementGuidelines = [],\n    } = moveable.props;\n\n    if (!elementGuidelines.length) {\n        state.elementRects = [];\n        return [];\n    }\n\n    const prevValues = (state.elementRects || []).filter(snapRect => !snapRect.refresh);\n    const nextElementGuidelines = elementGuidelines.map(el => {\n        if (isObject(el) && \"element\" in el) {\n            return {\n                ...el,\n                element: getRefTarget(el.element, true)!,\n            };\n        }\n        return {\n            element: getRefTarget(el, true)!,\n        };\n    }).filter(value => {\n        return value.element;\n    }) as ElementGuidelineValue[];\n\n    const {\n        maintained,\n        added,\n    } = diff(prevValues.map(v => v.element), nextElementGuidelines.map(v => v.element));\n\n\n    const nextValues: SnapElementRect[] = [];\n    maintained.forEach(([prevIndex, nextIndex]) => {\n        nextValues[nextIndex] = prevValues[prevIndex];\n    });\n\n    getSnapElementRects(moveable, added.map(index => nextElementGuidelines[index])).map((rect, i) => {\n        nextValues[added[i]] = rect;\n    });\n\n\n    state.elementRects = nextValues;\n    const elementSnapDirections = getSnapDirections(moveable.props.elementSnapDirections);\n    const nextGuidelines: SnapGuideline[] = [];\n\n    nextValues.forEach(snapRect => {\n        const {\n            element,\n            top: topValue = elementSnapDirections.top,\n            left: leftValue = elementSnapDirections.left,\n            right: rightValue = elementSnapDirections.right,\n            bottom: bottomValue = elementSnapDirections.bottom,\n            center: centerValue = elementSnapDirections.center,\n            middle: middleValue = elementSnapDirections.middle,\n            className,\n            rect,\n        } = snapRect;\n        const {\n            horizontal,\n            vertical,\n            horizontalNames,\n            verticalNames,\n        } = splitSnapDirectionPoses({\n            top: topValue,\n            right: rightValue,\n            left: leftValue,\n            bottom: bottomValue,\n            center: centerValue,\n            middle: middleValue,\n        }, rect);\n        const rectTop = rect.top!;\n        const rectLeft = rect.left!;\n        const width = rect.right! - rectLeft;\n        const height = rect.bottom! - rectTop;\n        const sizes = [width, height];\n\n        vertical.forEach((pos, i) => {\n            nextGuidelines.push({\n                type: \"vertical\", element, pos: [\n                    throttle(pos, 0.1),\n                    rectTop,\n                ], size: height,\n                sizes,\n                className,\n                elementRect: snapRect,\n                elementDirection: SNAP_SKIP_NAMES_MAP[verticalNames[i]] || verticalNames[i],\n                direction: \"\",\n            });\n        });\n        horizontal.forEach((pos, i) => {\n            nextGuidelines.push({\n                type: \"horizontal\",\n                element,\n                pos: [\n                    rectLeft,\n                    throttle(pos, 0.1),\n                ],\n                size: width,\n                sizes,\n                className,\n                elementRect: snapRect,\n                elementDirection: SNAP_SKIP_NAMES_MAP[horizontalNames[i]] || horizontalNames[i],\n                direction: \"\",\n            });\n        });\n    });\n\n    return nextGuidelines;\n}\n\n\nfunction getObjectGuidelines(\n    guidelines: Array<PosGuideline | number | string> | false,\n    containerSize: number,\n): NumericPosGuideline[] {\n    return guidelines ? guidelines.map(info => {\n        const posGuideline = isObject(info) ? info : { pos: info };\n        const pos = posGuideline.pos;\n\n        if (isNumber(pos)) {\n            return posGuideline as NumericPosGuideline;\n        } else {\n            return {\n                ...posGuideline,\n                pos: convertUnitSize(pos, containerSize),\n            };\n        }\n    }) : [];\n}\n\nexport function getDefaultGuidelines(\n    horizontalGuidelines: Array<PosGuideline | number | string> | false,\n    verticalGuidelines: Array<PosGuideline | number | string> | false,\n    width: number,\n    height: number,\n    clientLeft = 0,\n    clientTop = 0,\n    snapOffset = { left: 0, top: 0, right: 0, bottom: 0 },\n): SnapGuideline[] {\n    const guidelines: SnapGuideline[] = [];\n    const {\n        left: snapOffsetLeft,\n        top: snapOffsetTop,\n        bottom: snapOffsetBottom,\n        right: snapOffsetRight,\n    } = snapOffset;\n    const snapWidth = width! + snapOffsetRight - snapOffsetLeft;\n    const snapHeight = height! + snapOffsetBottom - snapOffsetTop;\n\n    getObjectGuidelines(horizontalGuidelines, snapHeight).forEach(posInfo => {\n        guidelines.push({\n            type: \"horizontal\",\n            pos: [\n                snapOffsetLeft,\n                throttle(posInfo.pos - clientTop + snapOffsetTop, 0.1),\n            ],\n            size: snapWidth,\n            className: posInfo.className,\n            direction: \"\",\n        });\n    });\n    getObjectGuidelines(verticalGuidelines, snapWidth).forEach(posInfo => {\n        guidelines.push({\n            type: \"vertical\",\n            pos: [\n                throttle(posInfo.pos - clientLeft + snapOffsetLeft, 0.1),\n                snapOffsetTop,\n            ],\n            size: snapHeight,\n            className: posInfo.className,\n            direction: \"\",\n        });\n    });\n    return guidelines;\n}\n\n\n\nexport function getSnapElementRects(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    values: ElementGuidelineValue[],\n): SnapElementRect[] {\n    if (!values.length) {\n        return [];\n    }\n    const groupable = moveable.props.groupable;\n    const state = moveable.state;\n    const {\n        containerClientRect,\n        // targetClientRect: {\n        //     top: clientTop,\n        //     left: clientLeft,\n        // },\n        rootMatrix,\n        is3d,\n        offsetDelta,\n    } = state;\n    const n = is3d ? 4 : 3;\n    const [containerLeft, containerTop] = calculateContainerPos(rootMatrix, containerClientRect, n);\n    // const poses = getAbsolutePosesByState(state);\n    // const {\n    //     minX: targetLeft,\n    //     minY: targetTop,\n    // } = getMinMaxs(poses);\n    // const [distLeft, distTop] = minus([targetLeft, targetTop], calculateInversePosition(rootMatrix, [\n    //     clientLeft - containerLeft,\n    //     clientTop - containerTop,\n    // ], n)).map(pos => roundSign(pos));\n\n    const offsetLeft = groupable ? 0 : offsetDelta[0];\n    const offsetTop = groupable ? 0 : offsetDelta[1];\n\n    return values.map(value => {\n        const rect = value.element.getBoundingClientRect();\n        const left = rect.left - containerLeft - offsetLeft;\n        const top = rect.top - containerTop - offsetTop;\n        const bottom = top + rect.height;\n        const right = left + rect.width;\n        const [elementLeft, elementTop] = calculateInversePosition(rootMatrix, [left, top], n);\n        const [elementRight, elementBottom] = calculateInversePosition(rootMatrix, [right, bottom], n);\n\n        return {\n            ...value,\n            rect: {\n                left: elementLeft,\n                right: elementRight,\n                top: elementTop,\n                bottom: elementBottom,\n                center: (elementLeft + elementRight) / 2,\n                middle: (elementTop + elementBottom) / 2,\n            },\n        };\n    });\n}\n\n"
  },
  {
    "path": "packages/react-moveable/src/ables/snappable/innerBounds.ts",
    "content": "import { average, getRad, throttle } from \"@daybrush/utils\";\nimport { rotate } from \"@scena/matrix\";\nimport { maxOffset, getDistSize, getTinyDist, calculatePoses, abs } from \"../../utils\";\n\nimport { SnappableProps, DraggableProps, RotatableProps, MoveableManagerInterface } from \"../../types\";\nimport { getDragDist, getPosByDirection, getInverseDragDist } from \"../../gesto/GestoUtils\";\nimport { getNearOffsetInfo } from \"./snap\";\nimport { TINY_NUM } from \"../../consts\";\nimport { getInitialBounds, solveLineConstants } from \"./utils\";\n\nfunction isStartLine(dot: number[], line: number[][]) {\n    // l    o     => true\n    // o    l    => false\n    const cx = average([line[0][0], line[1][0]]);\n    const cy = average([line[0][1], line[1][1]]);\n\n    return {\n        vertical: cx <= dot[0],\n        horizontal: cy <= dot[1],\n    };\n}\nfunction hitTestLine(\n    dot: number[],\n    [pos1, pos2]: number[][],\n) {\n    let dx = pos2[0] - pos1[0];\n    let dy = pos2[1] - pos1[1];\n\n    if (abs(dx) < TINY_NUM) {\n        dx = 0;\n    }\n    if (abs(dy) < TINY_NUM) {\n        dy = 0;\n    }\n    let test1: number;\n    let test2: number;\n    if (!dx) {\n        test1 = pos1[0];\n        test2 = dot[0];\n    } else if (!dy) {\n        test1 = pos1[1];\n        test2 = dot[1];\n    } else {\n        const a = dy / dx;\n\n        // y = a * (x - pos1) + pos1\n        test1 = a * (dot[0] - pos1[0]) + pos1[1];\n        test2 = dot[1];\n    }\n    return test1 - test2;\n}\nfunction isSameStartLine(dots: number[][], line: number[][], centerSign: boolean, error: number = TINY_NUM) {\n    return dots.every(dot => {\n        const value = hitTestLine(dot, line);\n        const sign = value <= 0;\n        return sign === centerSign || abs(value) <= error;\n    });\n}\nfunction checkInnerBoundDot(\n    pos: number,\n    start: number,\n    end: number,\n    isStart: boolean,\n    threshold = 0,\n) {\n    if (\n        (isStart && start - threshold <= pos)\n        || (!isStart && pos <= end + threshold)\n    ) {\n        // false 402 565 602 => 37 ([0, 37])\n        // true 400 524.9712603540036 600 => 124 ([124, 0])\n        // true 400 410 600 => 10 ([10, 0])\n        return {\n            isBound: true,\n            offset: isStart ? start - pos : end - pos,\n        };\n    }\n    return {\n        isBound: false,\n        offset: 0,\n    };\n}\n\nfunction checkInnerBound(\n    moveable: MoveableManagerInterface<SnappableProps>,\n    { line, centerSign, verticalSign, horizontalSign, lineConstants }: InnerBoundLineInfo,\n) {\n    const bounds = moveable.props.innerBounds;\n\n    if (!bounds) {\n        return {\n            isAllBound: false,\n            isBound: false,\n            isVerticalBound: false,\n            isHorizontalBound: false,\n            offset: [0, 0],\n        };\n    }\n    const { left, top, width, height } = bounds;\n    const leftLine = [[left, top], [left, top + height]];\n    const topLine = [[left, top], [left + width, top]];\n    const rightLine = [[left + width, top], [left + width, top + height]];\n    const bottomLine = [[left, top + height], [left + width, top + height]];\n\n    if (isSameStartLine([\n        [left, top],\n        [left + width, top],\n        [left, top + height],\n        [left + width, top + height],\n    ], line, centerSign)) {\n        return {\n            isAllBound: false,\n            isBound: false,\n            isVerticalBound: false,\n            isHorizontalBound: false,\n            offset: [0, 0],\n        };\n    }\n    // test vertical\n\n    const topBoundInfo = checkLineBoundCollision(line, lineConstants, topLine, verticalSign);\n    const bottomBoundInfo = checkLineBoundCollision(line, lineConstants, bottomLine, verticalSign);\n\n    // test horizontal\n    const leftBoundInfo = checkLineBoundCollision(line, lineConstants, leftLine, horizontalSign);\n    const rightBoundInfo = checkLineBoundCollision(line, lineConstants, rightLine, horizontalSign);\n\n    const isAllVerticalBound = topBoundInfo.isBound && bottomBoundInfo.isBound;\n    const isVerticalBound = topBoundInfo.isBound || bottomBoundInfo.isBound;\n    const isAllHorizontalBound = leftBoundInfo.isBound && rightBoundInfo.isBound;\n    const isHorizontalBound = leftBoundInfo.isBound || rightBoundInfo.isBound;\n    const verticalOffset = maxOffset(topBoundInfo.offset, bottomBoundInfo.offset);\n    const horizontalOffset = maxOffset(leftBoundInfo.offset, rightBoundInfo.offset);\n    let offset = [0, 0];\n    let isBound = false;\n    let isAllBound = false;\n\n    if (abs(horizontalOffset) < abs(verticalOffset)) {\n        offset = [verticalOffset, 0];\n        isBound = isVerticalBound;\n        isAllBound = isAllVerticalBound;\n    } else {\n        offset = [0, horizontalOffset];\n        isBound = isHorizontalBound;\n        isAllBound = isAllHorizontalBound;\n    }\n    return {\n        isAllBound,\n        isVerticalBound,\n        isHorizontalBound,\n        isBound,\n        offset,\n    };\n}\n\nfunction checkLineBoundCollision(\n    line: number[][],\n    [a, b]: [number, number, number],\n    boundLine: number[][],\n    isStart: boolean,\n    threshold?: number,\n    isRender?: boolean,\n) {\n    const dot1 = line[0];\n    // const dot2 = line[1];\n    const boundDot1 = boundLine[0];\n    const boundDot2 = boundLine[1];\n\n    // const dy1 = getTinyDist(dot2[1] - dot1[1]);\n    // const dx1 = getTinyDist(dot2[0] - dot1[0]);\n    const dy2 = getTinyDist(boundDot2[1] - boundDot1[1]);\n    const dx2 = getTinyDist(boundDot2[0] - boundDot1[0]);\n\n    const hasDx = b;\n    const hasDy = a;\n    const slope = - a / b;\n    // lineConstants\n    // ax + by + c = 0\n    // dx2 or dy2 is zero\n    if (!dx2) {\n        // vertical\n        // by + c = 0\n        if (isRender && !hasDy) {\n            // 90deg\n            return {\n                isBound: false,\n                offset: 0,\n            };\n        } else if (hasDx) {\n            // ax + by + c = 0\n            // const y = dy1 ? dy1 / dx1 * (boundDot1[0] - dot1[0]) + dot1[1] : dot1[1];\n            const y = slope * (boundDot1[0] - dot1[0]) + dot1[1];\n\n            // boundDot1[1] <= y  <= boundDot2[1]\n            return checkInnerBoundDot(y, boundDot1[1], boundDot2[1], isStart, threshold);\n        } else {\n            // ax + c = 0\n            const offset = boundDot1[0] - dot1[0];\n\n            const isBound = abs(offset) <= (threshold || 0);\n\n            return {\n                isBound,\n                offset: isBound ? offset : 0,\n            };\n        }\n    } else if (!dy2) {\n        // horizontal\n        if (isRender && !hasDx) {\n            // 90deg\n            return {\n                isBound: false,\n                offset: 0,\n            };\n        } else if (hasDy) {\n            // y = a * (x - x1) + y1\n            // x = (y - y1) / a + x1\n            // const a = dy1 / dx1;\n            // const x = dx1 ? (boundDot1[1] - dot1[1]) / a + dot1[0] : dot1[0];\n            const x = (boundDot1[1] - dot1[1]) / slope + dot1[0];\n\n            // boundDot1[0] <= x && x <= boundDot2[0]\n            return checkInnerBoundDot(x, boundDot1[0], boundDot2[0], isStart, threshold);\n        } else {\n            const offset = boundDot1[1] - dot1[1];\n\n            const isBound = abs(offset) <= (threshold || 0);\n\n            return {\n                isBound,\n                offset: isBound ? offset : 0,\n            };\n        }\n    }\n    return {\n        isBound: false,\n        offset: 0,\n    };\n}\nexport function getInnerBoundInfo(\n    moveable: MoveableManagerInterface<SnappableProps>,\n    lineInfos: InnerBoundLineInfo[],\n    datas: any,\n) {\n    return lineInfos.map(info => {\n        const {\n            isBound,\n            offset,\n            isVerticalBound,\n            isHorizontalBound,\n        } = checkInnerBound(moveable, info);\n\n        const multiple = info.multiple;\n\n        const sizeOffset = getDragDist({\n            datas,\n            distX: offset[0],\n            distY: offset[1],\n        }).map((size, i) => size * (multiple[i] ? 2 / multiple[i] : 0));\n\n        return {\n            sign: multiple,\n            isBound,\n            isVerticalBound,\n            isHorizontalBound,\n            isSnap: false,\n            offset: sizeOffset,\n        };\n    });\n}\n\nexport function getInnerBoundDragInfo(\n    moveable: MoveableManagerInterface<SnappableProps & DraggableProps, any>,\n    poses: number[][],\n    datas: any,\n) {\n    const lines = getCheckInnerBoundLineInfos(moveable, poses, [0, 0], false).map(info => {\n        return {\n            ...info,\n            multiple: info.multiple.map(dir => abs(dir) * 2),\n        };\n    });\n    const innerBoundInfo = getInnerBoundInfo(moveable, lines, datas);\n    const widthOffsetInfo = getNearOffsetInfo(innerBoundInfo, 0);\n    const heightOffsetInfo = getNearOffsetInfo(innerBoundInfo, 1);\n    let verticalOffset = 0;\n    let horizontalOffset = 0;\n    const isVerticalBound = widthOffsetInfo.isVerticalBound || heightOffsetInfo.isVerticalBound;\n    const isHorizontalBound = widthOffsetInfo.isHorizontalBound || heightOffsetInfo.isHorizontalBound;\n\n    if (isVerticalBound || isHorizontalBound) {\n        [verticalOffset, horizontalOffset] = getInverseDragDist({\n            datas,\n            distX: -widthOffsetInfo.offset[0],\n            distY: -heightOffsetInfo.offset[1],\n        });\n    }\n\n    return {\n        vertical: {\n            isBound: isVerticalBound,\n            offset: verticalOffset,\n        },\n        horizontal: {\n            isBound: isHorizontalBound,\n            offset: horizontalOffset,\n        },\n    };\n}\nexport function getCheckSnapLineDirections(\n    direction: number[],\n    keepRatio: boolean,\n) {\n    const lineDirections: number[][][] = [];\n    const x = direction[0];\n    const y = direction[1];\n    if (x && y) {\n        lineDirections.push(\n            [[0, y * 2], direction, [-x, y]],\n            [[x * 2, 0], direction, [x, -y]],\n        );\n    } else if (x) {\n        // vertcal\n        lineDirections.push(\n            [[x * 2, 0], [x, 1], [x, -1]],\n        );\n        if (keepRatio) {\n            lineDirections.push(\n                [[0, -1], [x, -1], [-x, -1]],\n                [[0, 1], [x, 1], [-x, 1]],\n            );\n        }\n    } else if (y) {\n        // horizontal\n        lineDirections.push(\n            [[0, y * 2], [1, y], [-1, y]],\n        );\n        if (keepRatio) {\n            lineDirections.push(\n                [[-1, 0], [-1, y], [-1, -y]],\n                [[1, 0], [1, y], [1, -y]],\n            );\n        }\n    } else {\n        // [0, 0] to all direction\n        lineDirections.push(\n            [[-1, 0], [-1, -1], [-1, 1]],\n            [[1, 0], [1, -1], [1, 1]],\n            [[0, -1], [-1, -1], [1, -1]],\n            [[0, 1], [-1, 1], [1, 1]],\n        );\n    }\n\n    return lineDirections;\n}\nexport interface InnerBoundLineInfo {\n    line: number[][];\n    multiple: number[];\n    horizontalSign: boolean;\n    verticalSign: boolean;\n    centerSign: boolean;\n    lineConstants: [number, number, number];\n}\nexport function getCheckInnerBoundLineInfos(\n    moveable: MoveableManagerInterface<SnappableProps>,\n    poses: number[][],\n    direction: number[],\n    keepRatio: boolean,\n): InnerBoundLineInfo[] {\n    const {\n        allMatrix,\n        is3d,\n    } = moveable.state;\n    const virtualPoses = calculatePoses(allMatrix, 100, 100, is3d ? 4 : 3);\n    const center = getPosByDirection(virtualPoses, [0, 0]);\n\n    return getCheckSnapLineDirections(direction, keepRatio).map(([multiple, dir1, dir2]) => {\n        const virtualLine = [\n            getPosByDirection(virtualPoses, dir1),\n            getPosByDirection(virtualPoses, dir2),\n        ];\n        const lineConstants = solveLineConstants(virtualLine);\n        const {\n            vertical: verticalSign,\n            horizontal: horizontalSign,\n        } = isStartLine(center, virtualLine);\n        const centerSign = hitTestLine(center, virtualLine) <= 0;\n\n        return {\n            multiple,\n            centerSign,\n            verticalSign,\n            horizontalSign,\n            lineConstants,\n            line: [\n                getPosByDirection(poses, dir1),\n                getPosByDirection(poses, dir2),\n            ],\n        };\n    });\n}\n\nfunction isBoundRotate(\n    relativePoses: number[][],\n    boundDots: number[][],\n    center: number[],\n    rad: number,\n) {\n    const nextPoses = rad ? relativePoses.map(pos => rotate(pos, rad)) : relativePoses;\n    return [\n        [nextPoses[0], nextPoses[1]],\n        [nextPoses[1], nextPoses[3]],\n        [nextPoses[3], nextPoses[2]],\n        [nextPoses[2], nextPoses[0]],\n    ].some(line => {\n        const centerSign = hitTestLine(center, line) <= 0;\n\n        return !isSameStartLine(boundDots, line, centerSign);\n    });\n}\nfunction getDistPointLine([pos1, pos2]: number[][]) {\n    // x = 0, y = 0\n    // d = (ax + by + c) / root(a2 + b2)\n\n    const dx = pos2[0] - pos1[0];\n    const dy = pos2[1] - pos1[1];\n\n    if (!dx) {\n        return abs(pos1[0]);\n    }\n    if (!dy) {\n        return abs(pos1[1]);\n    }\n    // y - y1 = a(x - x1)\n    // 0 = ax -y + -a * x1 + y1\n\n    const a = dy / dx;\n\n    return abs((-a * pos1[0] + pos1[1]) / Math.sqrt(Math.pow(a, 2) + 1));\n}\nfunction solveReverseLine([pos1, pos2]: number[][]) {\n    const dx = pos2[0] - pos1[0];\n    const dy = pos2[1] - pos1[1];\n\n    if (!dx) {\n        return [pos1[0], 0];\n    }\n    if (!dy) {\n        return [0, pos1[1]];\n    }\n    const a = dy / dx;\n    // y - y1 = a (x  - x1)\n    // y = ax - a * x1 + y1\n    const b = -a * pos1[0] + pos1[1];\n    // y = ax + b = -1/a x\n    // x = -b / (a + 1 / a)\n    // y = b / (1 + 1 / a^2)\n\n    return [\n        -b / (a + 1 / a),\n        b / ((a * a) + 1),\n    ];\n}\nexport function checkRotateInnerBounds(\n    moveable: MoveableManagerInterface<SnappableProps & RotatableProps, any>,\n    prevPoses: number[][],\n    nextPoses: number[][],\n    origin: number[],\n    rotation: number,\n) {\n    const bounds = moveable.props.innerBounds;\n    const rad = rotation * Math.PI / 180;\n\n    if (!bounds) {\n        return [];\n    }\n    const {\n        left,\n        top,\n        width,\n        height,\n    } = bounds;\n\n    const relativeLeft = left - origin[0];\n    const relativeRight = left + width - origin[0];\n    const relativeTop = top - origin[1];\n    const relativeBottom = top + height - origin[1];\n    const dots = [\n        [relativeLeft, relativeTop],\n        [relativeRight, relativeTop],\n        [relativeLeft, relativeBottom],\n        [relativeRight, relativeBottom],\n    ];\n    const center = getPosByDirection(nextPoses, [0, 0]);\n\n    if (!isBoundRotate(nextPoses, dots, center, 0)) {\n        return [];\n    }\n    const result: number[] = [];\n    const dotInfos = dots.map(dot => [\n        getDistSize(dot),\n        getRad([0, 0], dot),\n    ]);\n    [\n        [nextPoses[0], nextPoses[1]],\n        [nextPoses[1], nextPoses[3]],\n        [nextPoses[3], nextPoses[2]],\n        [nextPoses[2], nextPoses[0]],\n    ].forEach(line => {\n        const lineRad = getRad([0, 0], solveReverseLine(line));\n        const lineDist = getDistPointLine(line);\n\n        result.push(...dotInfos\n            .filter(([dotDist]) => {\n                return dotDist && lineDist <= dotDist;\n            })\n            .map(([dotDist, dotRad]) => {\n                const distRad = Math.acos(dotDist ? lineDist / dotDist : 0);\n                const nextRad1 = dotRad + distRad;\n                const nextRad2 = dotRad - distRad;\n\n                return [\n                    rad + nextRad1 - lineRad,\n                    rad + nextRad2 - lineRad,\n                ];\n            })\n            .reduce((prev, cur) => {\n                prev.push(...cur);\n                return prev;\n            }, [])\n            .filter(nextRad => !isBoundRotate(prevPoses, dots, center, nextRad))\n            .map(nextRad => throttle(nextRad * 180 / Math.PI, TINY_NUM)));\n    });\n    return result;\n}\n\nexport function checkInnerBoundPoses(\n    moveable: MoveableManagerInterface<SnappableProps>,\n) {\n    const innerBounds = moveable.props.innerBounds;\n    const boundMap = getInitialBounds();\n\n    if (!innerBounds) {\n        return {\n            boundMap,\n            vertical: [],\n            horizontal: [],\n        };\n    }\n    const {\n        pos1,\n        pos2,\n        pos3,\n        pos4,\n    } = moveable.getRect();\n    const poses = [pos1, pos2, pos3, pos4];\n    const center = getPosByDirection(poses, [0, 0]);\n    const { left, top, width, height } = innerBounds;\n    const leftLine = [[left, top], [left, top + height]];\n    const topLine = [[left, top], [left + width, top]];\n    const rightLine = [[left + width, top], [left + width, top + height]];\n    const bottomLine = [[left, top + height], [left + width, top + height]];\n    const lineInfos = getCheckInnerBoundLineInfos(moveable, poses, [0, 0], false);\n\n    const horizontalPoses: number[] = [];\n    const verticalPoses: number[] = [];\n\n\n    lineInfos.forEach(lineInfo => {\n        const { line, lineConstants } = lineInfo;\n        const {\n            horizontal: isHorizontalStart,\n            vertical: isVerticalStart,\n        } = isStartLine(center, line);\n\n        // test vertical\n        const topBoundInfo = checkLineBoundCollision(line, lineConstants, topLine, isVerticalStart, 1, true);\n        const bottomBoundInfo = checkLineBoundCollision(line, lineConstants, bottomLine, isVerticalStart, 1, true);\n\n        // test horizontal\n        const leftBoundInfo = checkLineBoundCollision(line, lineConstants, leftLine, isHorizontalStart, 1, true);\n        const rightBoundInfo = checkLineBoundCollision(line, lineConstants, rightLine, isHorizontalStart, 1, true);\n\n        if (topBoundInfo.isBound && !boundMap.top) {\n            horizontalPoses.push(top);\n            boundMap.top = true;\n        }\n        if (bottomBoundInfo.isBound && !boundMap.bottom) {\n            horizontalPoses.push(top + height);\n            boundMap.bottom = true;\n        }\n        if (leftBoundInfo.isBound && !boundMap.left) {\n            verticalPoses.push(left);\n            boundMap.left = true;\n        }\n        if (rightBoundInfo.isBound && !boundMap.right) {\n            verticalPoses.push(left + width);\n            boundMap.right = true;\n        }\n    });\n\n    return {\n        boundMap,\n        horizontal: horizontalPoses,\n        vertical: verticalPoses,\n    };\n}\n"
  },
  {
    "path": "packages/react-moveable/src/ables/snappable/names.ts",
    "content": "export const NAME_snapRotationThreshold = \"snapRotationThreshold\";\nexport const NAME_snapRotationDegrees = \"snapRotationDegrees\";\nexport const NAME_snapHorizontalThreshold = \"snapHorizontalThreshold\";\nexport const NAME_snapVerticalThreshold = \"snapVerticalThreshold\";\n"
  },
  {
    "path": "packages/react-moveable/src/ables/snappable/render.tsx",
    "content": "import { throttle } from \"@daybrush/utils\";\nimport {\n    RenderGuidelineInfo, Renderer, RenderGuidelineInnerInfo,\n    MoveableManagerInterface, SnappableProps, SnapGuideline,\n    SnappableRenderType, SnappableState,\n    SnapDirectionPoses,\n} from \"../../types\";\nimport { prefix, groupBy } from \"../../utils\";\nimport { HORIZONTAL_NAMES_MAP, VERTICAL_NAMES_MAP } from \"./utils\";\n\nexport function renderGuideline(info: RenderGuidelineInfo, React: Renderer): any {\n    const { direction, classNames, size, pos, zoom, key } = info;\n    const isHorizontal = direction === \"horizontal\";\n    const scaleType = isHorizontal ? \"Y\" : \"X\";\n    // const scaleType2 = isHorizontal ? \"Y\" : \"X\";\n\n    return React.createElement(\"div\", {\n        key,\n        className: classNames.join(\" \"),\n        style: {\n            [isHorizontal ? \"width\" : \"height\"]: `${size}`,\n            transform: `translate(${pos[0]}, ${pos[1]}) translate${scaleType}(-50%) scale${scaleType}(${zoom})`,\n        },\n    });\n}\n\nexport function renderInnerGuideline(info: RenderGuidelineInnerInfo, React: Renderer): any {\n    return renderGuideline({\n        ...info,\n        classNames: [\n            prefix(\"line\", \"guideline\", info.direction),\n            ...info.classNames,\n        ].filter(className => className) as string[],\n        size: info.size || `${info.sizeValue}px`,\n        pos: info.pos || info.posValue.map(v => `${throttle(v, 0.1)}px`),\n    }, React);\n}\n\nexport function renderSnapPoses(\n    moveable: MoveableManagerInterface,\n    direction: string,\n    snapPoses: SnappableRenderType[],\n    minPos: number,\n    targetPos: number,\n    size: number,\n    index: number,\n    React: Renderer\n) {\n    const { zoom } = moveable.props;\n    return snapPoses.map(({ type, pos }, i) => {\n        const renderPos = [0, 0];\n\n        renderPos[index] = minPos;\n        renderPos[index ? 0 : 1] = -targetPos + pos;\n\n        return renderInnerGuideline(\n            {\n                key: `${direction}TargetGuideline${i}`,\n                classNames: [prefix(\"target\", \"bold\", type)],\n                posValue: renderPos,\n                sizeValue: size,\n                zoom: zoom!,\n                direction: direction,\n            },\n            React\n        );\n    });\n}\nexport function renderGuidelines(\n    moveable: MoveableManagerInterface<SnappableProps>,\n    type: \"vertical\" | \"horizontal\",\n    guidelines: SnapGuideline[],\n    targetPos: number[],\n    targetRect: SnapDirectionPoses,\n    React: Renderer\n): any[] {\n    const { zoom, isDisplayInnerSnapDigit } = moveable.props;\n\n    const mainNames = type === \"horizontal\" ? VERTICAL_NAMES_MAP : HORIZONTAL_NAMES_MAP;\n    const targetStart = targetRect[mainNames.start]!;\n    const targetEnd = targetRect[mainNames.end]!;\n    return guidelines.filter(({ hide, elementRect }) => {\n        if (hide) {\n            return false;\n        }\n        if (isDisplayInnerSnapDigit && elementRect) {\n            // inner\n            const rect = elementRect.rect;\n\n            if (rect[mainNames.start]! <= targetStart && targetEnd <= rect[mainNames.end]!) {\n                return false;\n            }\n        }\n        return true;\n    }).map((guideline, i) => {\n        const { pos, size, element, className } = guideline;\n\n        const renderPos = [\n            -targetPos[0] + pos[0],\n            -targetPos[1] + pos[1],\n        ];\n\n        return renderInnerGuideline(\n            {\n                key: `${type}-default-guideline-${i}`,\n                classNames: element ? [prefix(\"bold\"), className] : [prefix(\"normal\"), className],\n                direction: type,\n                posValue: renderPos,\n                sizeValue: size,\n                zoom: zoom!,\n            },\n            React\n        );\n    });\n}\n\nexport function renderDigitLine(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    type: \"vertical\" | \"horizontal\",\n    lineType: \"dashed\" | \"gap\",\n    index: number,\n    gap: number,\n    renderPos: number[],\n    className: string | undefined,\n    React: Renderer,\n): any {\n    const {\n        snapDigit = 0,\n        isDisplaySnapDigit = true,\n        snapDistFormat = (v: number, type: \"vertical\" | \"horizontal\") => {\n            // Type can be used render different values.\n            if (type === 'vertical') {\n                return v;\n            }\n            return v;\n        },\n        zoom,\n    } = moveable.props;\n    const scaleType = type === \"horizontal\" ? \"X\" : \"Y\";\n    const sizeName = type === \"vertical\" ? \"height\" : \"width\";\n    const absGap = Math.abs(gap!);\n    const snapSize = isDisplaySnapDigit\n        ? parseFloat(absGap.toFixed(snapDigit))\n        : 0;\n    return <div\n        key={`${type}-${lineType}-guideline-${index}`}\n        className={prefix(\"guideline-group\", type)}\n        style={{\n            left: `${renderPos[0]}px`,\n            top: `${renderPos[1]}px`,\n            [sizeName]: `${absGap}px`,\n        }}\n    >\n        {renderInnerGuideline(\n            {\n                direction: type,\n                classNames: [prefix(lineType), className],\n                size: \"100%\",\n                posValue: [0, 0],\n                sizeValue: absGap,\n                zoom: zoom!,\n            },\n            React\n        )}\n        <div\n            className={prefix(\"size-value\", \"gap\")}\n            style={{\n                transform: `translate${scaleType}(-50%) scale(${zoom})`,\n            }}\n        >\n            {snapSize > 0 ? snapDistFormat(snapSize, type) : \"\"}\n        </div>\n    </div>;\n}\n\nexport function groupByElementGuidelines(\n    type: \"vertical\" | \"horizontal\",\n    guidelines: SnapGuideline[],\n    targetRect: SnapDirectionPoses,\n    isDisplayInnerSnapDigit: boolean,\n) {\n    const index = type === \"vertical\" ? 0 : 1;\n    const otherIndex = type === \"vertical\" ? 1 : 0;\n    const names = index ? VERTICAL_NAMES_MAP : HORIZONTAL_NAMES_MAP;\n    const targetStart = targetRect[names.start]!;\n    const targetEnd = targetRect[names.end]!;\n    return groupBy(guidelines, (guideline) => {\n        return guideline.pos[index];\n    }).map(nextGuidelines => {\n        const start: SnapGuideline[] = [];\n        const end: SnapGuideline[] = [];\n        const inner: SnapGuideline[] = [];\n\n        nextGuidelines.forEach(guideline => {\n            const element = guideline.element!;\n            const rect = guideline.elementRect!.rect;\n            if (rect[names.end]! < targetStart) {\n                start.push(guideline);\n            } else if (targetEnd < rect[names.start]!) {\n                end.push(guideline);\n            } else if (rect[names.start]! <= targetStart && targetEnd <= rect[names.end]! && isDisplayInnerSnapDigit) {\n                const pos = guideline.pos;\n                const elementRect1 = { element, rect: { ...rect, [names.end]: rect[names.start]! } };\n                const elementRect2 = { element, rect: { ...rect, [names.start]: rect[names.end]! } };\n                const nextPos1 = [0, 0];\n                const nextPos2 = [0, 0];\n                nextPos1[index] = pos[index];\n                nextPos1[otherIndex] = pos[otherIndex];\n\n                nextPos2[index] = pos[index];\n                nextPos2[otherIndex] = pos[otherIndex] + guideline.size;\n\n\n                start.push({\n                    type,\n                    pos: nextPos1,\n                    size: 0,\n                    elementRect: elementRect1,\n                    direction: \"\",\n                    elementDirection: \"end\",\n                });\n                end.push({\n                    type,\n                    pos: nextPos2,\n                    size: 0,\n                    elementRect: elementRect2,\n                    direction: \"\",\n                    elementDirection: \"start\",\n                });\n                // inner.push(guideline);\n            }\n        });\n\n        start.sort((a, b) => {\n            return b.pos[otherIndex] - a.pos[otherIndex];\n        });\n        end.sort((a, b) => {\n            return a.pos[otherIndex] - b.pos[otherIndex];\n        });\n        return {\n            total: nextGuidelines,\n            start,\n            end,\n            inner,\n        };\n    });\n}\nexport function renderDashedGuidelines(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    guidelines: SnapGuideline[],\n    targetPos: number[],\n    targetRect: SnapDirectionPoses,\n    React: Renderer,\n): any[] {\n    const {\n        isDisplayInnerSnapDigit,\n    } = moveable.props;\n    const rendered: any[] = [];\n\n    ([\"vertical\", \"horizontal\"] as const).forEach(type => {\n        const nextGuidelines = guidelines.filter(guideline => guideline.type === type);\n        const index = type === \"vertical\" ? 1 : 0;\n        const otherIndex = index ? 0 : 1;\n\n        const groups = groupByElementGuidelines(type, nextGuidelines, targetRect, isDisplayInnerSnapDigit!);\n        const mainNames = index ? HORIZONTAL_NAMES_MAP : VERTICAL_NAMES_MAP;\n        const sideNames = index ? VERTICAL_NAMES_MAP : HORIZONTAL_NAMES_MAP;\n        const targetStart = targetRect[mainNames.start]!;\n        const targetEnd = targetRect[mainNames.end]!;\n\n        groups.forEach(({ total, start, end, inner }) => {\n            const sidePos = targetPos[otherIndex] + total[0].pos[otherIndex] - targetRect[sideNames.start]!;\n\n            let prevRect = targetRect;\n\n            start.forEach(guideline => {\n                const nextRect = guideline.elementRect!.rect;\n                const size = prevRect[mainNames.start]! - nextRect[mainNames.end]!;\n\n                if (size > 0) {\n                    const renderPos = [0, 0];\n\n                    renderPos[index] = targetPos[index] + prevRect[mainNames.start]! - targetStart - size;\n                    renderPos[otherIndex] = sidePos;\n\n                    rendered.push(renderDigitLine(\n                        moveable,\n                        type,\n                        \"dashed\",\n                        rendered.length,\n                        size,\n                        renderPos,\n                        guideline.className,\n                        React\n                    ));\n                }\n                prevRect = nextRect;\n            });\n\n            prevRect = targetRect;\n            end.forEach(guideline => {\n                const nextRect = guideline.elementRect!.rect;\n                const size = nextRect[mainNames.start]! - prevRect[mainNames.end]!;\n\n                if (size > 0) {\n                    const renderPos = [0, 0];\n\n                    renderPos[index] = targetPos[index] + prevRect[mainNames.end]! - targetStart;\n                    renderPos[otherIndex] = sidePos;\n\n                    rendered.push(renderDigitLine(\n                        moveable,\n                        type,\n                        \"dashed\",\n                        rendered.length,\n                        size,\n                        renderPos,\n                        guideline.className,\n                        React\n                    ));\n                }\n                prevRect = nextRect;\n            });\n\n            inner.forEach(guideline => {\n                const nextRect = guideline.elementRect!.rect;\n\n                const size1 = targetStart - nextRect[mainNames.start]!;\n                const size2 = nextRect[mainNames.end]! - targetEnd;\n                const renderPos1 = [0, 0];\n                const renderPos2 = [0, 0];\n\n                renderPos1[index] = targetPos[index] - size1;\n                renderPos1[otherIndex] = sidePos;\n\n                renderPos2[index] = targetPos[index] + targetEnd - targetStart;\n                renderPos2[otherIndex] = sidePos;\n\n                rendered.push(renderDigitLine(\n                    moveable,\n                    type,\n                    \"dashed\",\n                    rendered.length,\n                    size1,\n                    renderPos1,\n                    guideline.className,\n                    React\n                ));\n                rendered.push(renderDigitLine(\n                    moveable,\n                    type,\n                    \"dashed\",\n                    rendered.length,\n                    size2,\n                    renderPos2,\n                    guideline.className,\n                    React\n                ));\n            });\n        });\n    });\n    return rendered;\n}\nexport function renderGapGuidelines(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    guidelines: SnapGuideline[],\n    targetPos: number[],\n    targetRect: SnapDirectionPoses,\n    React: any\n): any[] {\n    const rendered: any[] = [];\n    ([\"horizontal\", \"vertical\"] as const).forEach(type => {\n        const nextGuidelines = guidelines.filter(guideline => guideline.type === type).slice(0, 1);\n        const index = type === \"vertical\" ? 0 : 1;\n        const otherIndex = index ? 0 : 1;\n        const mainNames = index ? HORIZONTAL_NAMES_MAP : VERTICAL_NAMES_MAP;\n        const sideNames = index ? VERTICAL_NAMES_MAP : HORIZONTAL_NAMES_MAP;\n        const targetStart = targetRect[mainNames.start]!;\n        const targetEnd = targetRect[mainNames.end]!;\n        const targetSideStart = targetRect[sideNames.start]!;\n        const targetSideEnd = targetRect[sideNames.end]!;\n\n\n        nextGuidelines.forEach(({ gap, gapRects }) => {\n            const sideStartPos = Math.max(\n                targetSideStart,\n                ...gapRects!.map(({ rect }) => rect[sideNames.start]!),\n            );\n            const sideEndPos = Math.min(\n                targetSideEnd,\n                ...gapRects!.map(({ rect }) => rect[sideNames.end]!),\n            );\n            const sideCenterPos = (sideStartPos + sideEndPos) / 2;\n\n            if (sideStartPos === sideEndPos || sideCenterPos === (targetSideStart + targetSideEnd)/ 2) {\n                return;\n            }\n            gapRects!.forEach(({ rect, className }) => {\n                const renderPos = [targetPos[0], targetPos[1]];\n\n                if (rect[mainNames.end]! < targetStart) {\n                    renderPos[index] += rect[mainNames.end]! - targetStart;\n                } else if (targetEnd < rect[mainNames.start]!) {\n                    renderPos[index] += rect[mainNames.start]! - targetStart - gap!;\n                } else {\n                    return;\n                }\n\n                renderPos[otherIndex] += sideCenterPos - targetSideStart;\n                rendered.push(renderDigitLine(\n                    moveable,\n                    index ? \"vertical\" : \"horizontal\",\n                    \"gap\",\n                    rendered.length,\n                    gap!,\n                    renderPos,\n                    className,\n                    React\n                ));\n            });\n        });\n    });\n    return rendered;\n}\n"
  },
  {
    "path": "packages/react-moveable/src/ables/snappable/snap.ts",
    "content": "import {\n    SnapInfo, SnappableProps, SnappableState,\n    SnapGuideline, ResizableProps, ScalableProps,\n    SnapOffsetInfo, MoveableManagerInterface, SnapDirectionPoses, SnapDirectionInfo,\n} from \"../../types\";\nimport {\n    selectValue, getTinyDist, abs,\n} from \"../../utils\";\nimport { getPosByDirection, getPosesByDirection } from \"../../gesto/GestoUtils\";\nimport { TINY_NUM } from \"../../consts\";\nimport { minus } from \"@scena/matrix\";\nimport { splitSnapDirectionPoses } from \"./utils\";\nimport { NAME_snapHorizontalThreshold, NAME_snapVerticalThreshold } from \"./names\";\n\n\n\nexport function checkMoveableSnapPoses(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    posesX: number[],\n    posesY: number[],\n    dirXs: string[] = [],\n    dirYs: string[] = [],\n    customSnapVerticalThreshold: number | undefined,\n    customSnapHorizontalThreshold: number | undefined,\n) {\n    const props = moveable.props;\n    const snapThresholdMultiples = moveable.state.snapThresholdInfo?.multiples || [1, 1];\n    const snapHorizontalThreshold = selectValue<number>(\n        customSnapHorizontalThreshold,\n        props[NAME_snapHorizontalThreshold],\n        5,\n    );\n    const snapVerticalThreshold = selectValue<number>(\n        customSnapVerticalThreshold,\n        props[NAME_snapVerticalThreshold],\n        5,\n    );\n\n    return checkSnapPoses(\n        moveable.state.guidelines,\n        posesX,\n        posesY,\n        dirXs,\n        dirYs,\n        snapHorizontalThreshold,\n        snapVerticalThreshold,\n        snapThresholdMultiples,\n    );\n}\n\nexport function checkSnapPoses(\n    guidelines: SnapGuideline[],\n    posesX: number[],\n    posesY: number[],\n    dirXs: string[],\n    dirYs: string[],\n    snapHorizontalThreshold: number,\n    snapVerticalThreshold: number,\n    multiples: number[],\n) {\n    return {\n        vertical: checkSnap(guidelines, \"vertical\", posesX, snapVerticalThreshold * multiples[0], dirXs),\n        horizontal: checkSnap(guidelines, \"horizontal\", posesY, snapHorizontalThreshold * multiples[1], dirYs),\n    };\n}\nexport function checkSnapKeepRatio(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    startPos: number[],\n    endPos: number[],\n): { vertical: SnapOffsetInfo, horizontal: SnapOffsetInfo } {\n    const [endX, endY] = endPos;\n    const [startX, startY] = startPos;\n    let [dx, dy] = minus(endPos, startPos);\n    const isBottom = dy > 0;\n    const isRight = dx > 0;\n\n    dx = getTinyDist(dx);\n    dy = getTinyDist(dy);\n\n    const verticalInfo: SnapOffsetInfo = {\n        isSnap: false,\n        offset: 0,\n        pos: 0,\n    };\n    const horizontalInfo: SnapOffsetInfo = {\n        isSnap: false,\n        offset: 0,\n        pos: 0,\n    };\n\n    if (dx === 0 && dy === 0) {\n        return {\n            vertical: verticalInfo,\n            horizontal: horizontalInfo,\n        };\n    }\n    const {\n        vertical: verticalSnapInfo,\n        horizontal: horizontalSnapInfo,\n    } = checkMoveableSnapPoses(\n        moveable,\n        dx ? [endX] : [],\n        dy ? [endY] : [],\n        [],\n        [],\n        undefined,\n        undefined,\n    );\n\n    verticalSnapInfo.posInfos.filter(({ pos }) => {\n        return isRight ? pos >= startX : pos <= startX;\n    });\n    horizontalSnapInfo.posInfos.filter(({ pos }) => {\n        return isBottom ? pos >= startY : pos <= startY;\n    });\n    verticalSnapInfo.isSnap = verticalSnapInfo.posInfos.length > 0;\n    horizontalSnapInfo.isSnap = horizontalSnapInfo.posInfos.length > 0;\n\n    const {\n        isSnap: isVerticalSnap,\n        guideline: verticalGuideline,\n    } = getNearestSnapGuidelineInfo(verticalSnapInfo);\n    const {\n        isSnap: isHorizontalSnap,\n        guideline: horizontalGuideline,\n    } = getNearestSnapGuidelineInfo(horizontalSnapInfo);\n    const horizontalPos = isHorizontalSnap ? horizontalGuideline!.pos[1] : 0;\n    const verticalPos = isVerticalSnap ? verticalGuideline!.pos[0] : 0;\n\n    if (dx === 0) {\n        if (isHorizontalSnap) {\n            horizontalInfo.isSnap = true;\n            horizontalInfo.pos = horizontalGuideline!.pos[1];\n            horizontalInfo.offset = endY - horizontalInfo.pos;\n        }\n    } else if (dy === 0) {\n        if (isVerticalSnap) {\n            verticalInfo.isSnap = true;\n            verticalInfo.pos = verticalPos;\n            verticalInfo.offset = endX - verticalPos;\n        }\n    } else {\n        // y - y1 = a * (x - x1)\n        const a = dy / dx;\n        const b = endPos[1] - a * endX;\n        let y = 0;\n        let x = 0;\n        let isSnap = false;\n\n        if (isVerticalSnap) {\n            x = verticalPos;\n            y = a * x + b;\n            isSnap = true;\n        } else if (isHorizontalSnap) {\n            y = horizontalPos;\n            x = (y - b) / a;\n            isSnap = true;\n        }\n        if (isSnap) {\n            verticalInfo.isSnap = true;\n            verticalInfo.pos = x;\n            verticalInfo.offset = endX - x;\n\n            horizontalInfo.isSnap = true;\n            horizontalInfo.pos = y;\n            horizontalInfo.offset = endY - y;\n        }\n    }\n    return {\n        vertical: verticalInfo,\n        horizontal: horizontalInfo,\n    };\n}\n\n\nfunction getStringDirection(dir: number | string) {\n    let stringDirection = \"\";\n\n    if (dir === -1 || dir === \"top\" || dir === \"left\") {\n        stringDirection = \"start\";\n    } else if (dir === 0 || dir === \"center\" || dir === \"middle\") {\n        stringDirection = \"center\";\n    } else if (dir === 1 || dir === \"right\" || dir === \"bottom\") {\n        stringDirection = \"end\";\n    }\n    return stringDirection;\n}\n\n\nexport function checkSnaps(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    rect: SnapDirectionPoses,\n    customSnapVerticalThreshold: number | undefined,\n    customSnapHorizontalThreshold: number | undefined,\n): { vertical: SnapDirectionInfo; horizontal: SnapDirectionInfo } {\n    const poses = splitSnapDirectionPoses(moveable.props.snapDirections, rect);\n\n    const result = checkMoveableSnapPoses(\n        moveable,\n        poses.vertical,\n        poses.horizontal,\n        poses.verticalNames.map(name => getStringDirection(name)),\n        poses.horizontalNames.map(name => getStringDirection(name)),\n        customSnapVerticalThreshold,\n        customSnapHorizontalThreshold,\n    );\n    const horizontalDirection = getStringDirection(poses.horizontalNames[result.horizontal.index]);\n    const verticalDirection = getStringDirection(poses.verticalNames[result.vertical.index]);\n\n    return {\n        vertical: {\n            ...result.vertical,\n            direction: verticalDirection,\n        },\n        horizontal: {\n            ...result.horizontal,\n            direction: horizontalDirection,\n        },\n    };\n}\n\nexport function getNearestSnapGuidelineInfo(\n    snapInfo: SnapInfo,\n) {\n    const isSnap = snapInfo.isSnap;\n\n    if (!isSnap) {\n        return {\n            isSnap: false,\n            offset: 0,\n            dist: -1,\n            pos: 0,\n            guideline: null,\n        };\n    }\n    const posInfo = snapInfo.posInfos[0];\n    const guidelineInfo = posInfo!.guidelineInfos[0];\n    const offset = guidelineInfo!.offset;\n    const dist = guidelineInfo!.dist;\n    const guideline = guidelineInfo!.guideline;\n\n    return {\n        isSnap,\n        offset,\n        dist,\n        pos: posInfo!.pos,\n        guideline,\n    };\n}\n\nfunction checkSnap(\n    guidelines: SnapGuideline[],\n    targetType: \"horizontal\" | \"vertical\",\n    targetPoses: number[],\n    snapThreshold: number,\n    dirs: string[] = [],\n): SnapInfo {\n    if (!guidelines || !guidelines.length) {\n        return {\n            isSnap: false,\n            index: -1,\n            direction: \"\",\n            posInfos: [],\n        };\n    }\n    const isVertical = targetType === \"vertical\";\n    const posType = isVertical ? 0 : 1;\n\n    const snapPosInfos = targetPoses.map((targetPos, index) => {\n        const direction = dirs[index] || \"\";\n\n        const guidelineInfos = guidelines.map(guideline => {\n            const { pos } = guideline;\n            const offset = targetPos - pos[posType];\n\n            return {\n                offset,\n                dist: abs(offset),\n                guideline,\n                direction,\n            };\n        }).filter(({ guideline, dist }) => {\n            const { type } = guideline;\n            if (\n                type !== targetType\n                || dist > snapThreshold\n            ) {\n                return false;\n            }\n            return true;\n        }).sort(\n            (a, b) => a.dist - b.dist,\n        );\n\n\n        return {\n            pos: targetPos,\n            index,\n            guidelineInfos,\n            direction,\n        };\n    }).filter(snapPosInfo => {\n        return snapPosInfo.guidelineInfos.length > 0;\n    }).sort((a, b) => {\n        return a.guidelineInfos[0].dist - b.guidelineInfos[0].dist;\n    });\n\n    const isSnap = snapPosInfos.length > 0;\n    return {\n        isSnap,\n        index: isSnap ? snapPosInfos[0].index : -1,\n        direction: snapPosInfos[0]?.direction ?? \"\",\n        posInfos: snapPosInfos,\n    };\n}\n\nexport function getSnapInfosByDirection(\n    moveable: MoveableManagerInterface<SnappableProps & (ResizableProps | ScalableProps), SnappableState>,\n    // pos1 pos2 pos3 pos4\n    poses: number[][],\n    snapDirection: number[],\n    customSnapVerticalThreshold: number | undefined,\n    customSnapHorizontalThreshold: number | undefined,\n): { vertical: SnapDirectionInfo; horizontal: SnapDirectionInfo } {\n    let dirs: number[][] = [];\n\n    if (snapDirection[0] && snapDirection[1]) {\n        dirs = [\n            snapDirection,\n            [-snapDirection[0], snapDirection[1]],\n            [snapDirection[0], -snapDirection[1]],\n        ];\n    } else if (!snapDirection[0] && !snapDirection[1]) {\n        [\n            [-1, -1],\n            [1, -1],\n            [1, 1],\n            [-1, 1],\n        ].forEach((dir, i, arr) => {\n            const nextDir = (arr[i + 1] || arr[0]);\n            dirs.push(dir);\n            dirs.push([\n                (dir[0] + nextDir[0]) / 2,\n                (dir[1] + nextDir[1]) / 2,\n            ]);\n        });\n    } else {\n        if (moveable.props.keepRatio) {\n            dirs.push(\n                [-1, -1],\n                [-1, 1],\n                [1, -1],\n                [1, 1],\n                snapDirection,\n            );\n        } else {\n            dirs.push(...getPosesByDirection([\n                [-1, -1],\n                [1, -1],\n                [-1, -1],\n                [1, 1],\n            ], snapDirection));\n\n            if (dirs.length > 1) {\n                dirs.push([\n                    (dirs[0][0] + dirs[1][0]) / 2,\n                    (dirs[0][1] + dirs[1][1]) / 2,\n                ]);\n            }\n        }\n    }\n    const nextPoses = dirs.map(dir => getPosByDirection(poses, dir));\n    const xs = nextPoses.map(pos => pos[0]);\n    const ys = nextPoses.map(pos => pos[1]);\n    const result = checkMoveableSnapPoses(\n        moveable,\n        xs, ys,\n        dirs.map(dir => getStringDirection(dir[0])),\n        dirs.map(dir => getStringDirection(dir[1])),\n        customSnapVerticalThreshold,\n        customSnapHorizontalThreshold,\n    );\n    const verticalDirection = getStringDirection(dirs.map(dir => dir[0])[result.vertical.index]);\n    const horizontalDirection = getStringDirection(dirs.map(dir => dir[1])[result.horizontal.index]);\n\n    return {\n        vertical: {\n            ...result.vertical,\n            direction: verticalDirection,\n        },\n        horizontal: {\n            ...result.horizontal,\n            direction: horizontalDirection,\n        },\n    };\n}\n\nexport function checkSnapBoundPriority(\n    a: { isBound: boolean, isSnap: boolean, offset: number },\n    b: { isBound: boolean, isSnap: boolean, offset: number },\n) {\n    const aDist = abs(a.offset);\n    const bDist = abs(b.offset);\n\n    if (a.isBound && b.isBound) {\n        return bDist - aDist;\n    } else if (a.isBound) {\n        return -1;\n    } else if (b.isBound) {\n        return 1;\n    } else if (a.isSnap && b.isSnap) {\n        return bDist - aDist;\n    } else if (a.isSnap) {\n        return -1;\n    } else if (b.isSnap) {\n        return 1;\n    } else if (aDist < TINY_NUM) {\n        return 1;\n    } else if (bDist < TINY_NUM) {\n        return -1;\n    }\n    return aDist - bDist;\n}\nexport function getNearOffsetInfo<T extends { offset: number[], isBound: boolean, isSnap: boolean, sign: number[] }>(\n    offsets: T[],\n    index: number,\n) {\n    return offsets.slice().sort((a, b) => {\n        const aSign = a.sign[index];\n        const bSign = b.sign[index];\n        const aOffset = a.offset[index];\n        const bOffset = b.offset[index];\n        // -1 The positions of a and b do not change.\n        // 1 The positions of a and b are reversed.\n        if (!aSign) {\n            return 1;\n        } else if (!bSign) {\n            return -1;\n        }\n        return checkSnapBoundPriority(\n            { isBound: a.isBound, isSnap: a.isSnap, offset: aOffset },\n            { isBound: b.isBound, isSnap: b.isSnap, offset: bOffset },\n        );\n    })[0];\n}\n\n\nexport function getCheckSnapDirections(\n    direction: number[],\n    fixedDirection: number[],\n    keepRatio: boolean\n) {\n    const directions: number[][][] = [];\n    // const fixedDirection = [-direction[0], -direction[1]];\n\n    if (keepRatio) {\n        if (abs(fixedDirection[0]) !== 1 || abs(fixedDirection[1]) !== 1) {\n            directions.push(\n                [fixedDirection, [-1, -1]],\n                [fixedDirection, [-1, 1]],\n                [fixedDirection, [1, -1]],\n                [fixedDirection, [1, 1]],\n            );\n        } else {\n            directions.push(\n                [fixedDirection, [direction[0], -direction[1]]],\n                [fixedDirection, [-direction[0], direction[1]]],\n            );\n        }\n        directions.push([fixedDirection, direction]);\n    } else {\n        if ((direction[0] && direction[1]) || (!direction[0] && !direction[1])) {\n            const endDirection = direction[0] ? direction : [1, 1];\n\n            [1, -1].forEach(signX => {\n                [1, -1].forEach(signY => {\n                    const nextDirection = [signX * endDirection[0], signY * endDirection[1]];\n\n                    if (\n                        fixedDirection[0] === nextDirection[0]\n                        && fixedDirection[1] === nextDirection[1]\n                    ) {\n                        return;\n                    }\n                    directions.push([fixedDirection, nextDirection]);\n                });\n            });\n        } else if (direction[0]) {\n            const signs = abs(fixedDirection[0]) === 1 ? [1] : [1, -1];\n\n            signs.forEach(sign => {\n                directions.push(\n                    [\n                        [fixedDirection[0], -1],\n                        [sign * direction[0], -1],\n                    ],\n                    [\n                        [fixedDirection[0], 0],\n                        [sign * direction[0], 0],\n                    ],\n                    [\n                        [fixedDirection[0], 1],\n                        [sign * direction[0], 1],\n                    ]\n                );\n            });\n        } else if (direction[1]) {\n            const signs = abs(fixedDirection[1]) === 1 ? [1] : [1, -1];\n\n            signs.forEach(sign => {\n                directions.push(\n                    [\n                        [-1, fixedDirection[1]],\n                        [-1, sign * direction[1]],\n                    ],\n                    [\n                        [0, fixedDirection[1]],\n                        [0, sign * direction[1]],\n                    ],\n                    [\n                        [1, fixedDirection[1]],\n                        [1, sign * direction[1]],\n                    ]\n                );\n            });\n        }\n    }\n    return directions;\n}\n"
  },
  {
    "path": "packages/react-moveable/src/ables/snappable/snapBounds.ts",
    "content": "import { getDist, getRad, IObject, TINY_NUM } from \"@daybrush/utils\";\nimport { minus } from \"@scena/matrix\";\nimport { abs, getAbsolutePoses, getDistSize, getRect, maxOffset } from \"../../utils\";\nimport { getDragDist, getPosByDirection } from \"../../gesto/GestoUtils\";\nimport {\n    BoundInfo, SnapInfo, MoveableManagerInterface, SnappableProps,\n    SnappableState, SnapBoundInfo, SnapGuideline, BoundType, SnapOffsetInfo, DraggableProps,\n} from \"../../types\";\nimport { checkBoundKeepRatio, checkBoundPoses, getBounds } from \"./bounds\";\nimport { getInnerBoundDragInfo } from \"./innerBounds\";\nimport {\n    getNearestSnapGuidelineInfo, checkMoveableSnapPoses,\n    checkSnapPoses, checkSnapKeepRatio,\n} from \"./snap\";\nimport { hasGuidelines, getSnapDirections, splitSnapDirectionPoses } from \"./utils\";\n\ninterface DirectionSnapType<T> {\n    vertical: T;\n    horizontal: T;\n}\n\nexport function solveEquation(\n    pos1: number[],\n    pos2: number[],\n    snapOffset: number,\n    isVertical: boolean\n) {\n    let dx = pos2[0] - pos1[0];\n    let dy = pos2[1] - pos1[1];\n\n    if (abs(dx) < TINY_NUM) {\n        dx = 0;\n    }\n    if (abs(dy) < TINY_NUM) {\n        dy = 0;\n    }\n    if (!dx) {\n        // y = 0 * x + b\n        // only horizontal\n        if (!isVertical) {\n            return [0, snapOffset];\n        }\n        return [0, 0];\n    }\n    if (!dy) {\n        // only vertical\n        if (isVertical) {\n            return [snapOffset, 0];\n        }\n        return [0, 0];\n    }\n    // y = ax + b\n    const a = dy / dx;\n    const b = pos1[1] - a * pos1[0];\n\n    if (isVertical) {\n        // y = a * x + b\n        const y = a * (pos2[0] + snapOffset) + b;\n\n        return [snapOffset, y - pos2[1]];\n    } else {\n        // x = (y - b) / a\n        const x = (pos2[1] + snapOffset - b) / a;\n\n        return [x - pos2[0], snapOffset];\n    }\n}\n\n\nfunction solveNextOffset(\n    pos1: number[],\n    pos2: number[],\n    offset: number,\n    isVertical: boolean,\n    datas: IObject<any>\n) {\n    const sizeOffset = solveEquation(pos1, pos2, offset, isVertical);\n\n    if (!sizeOffset) {\n        return {\n            isOutside: false,\n            offset: [0, 0],\n        };\n    }\n    const size = getDist(pos1, pos2);\n    const dist1 = getDist(sizeOffset, pos1);\n    const dist2 = getDist(sizeOffset, pos2);\n\n    const isOutside = dist1 > size || dist2 > size;\n    const [widthOffset, heightOffset] = getDragDist({\n        datas,\n        distX: sizeOffset[0],\n        distY: sizeOffset[1],\n    });\n\n    return {\n        offset: [widthOffset, heightOffset],\n        isOutside,\n    };\n}\n\nfunction getSnapBound(boundInfo: BoundInfo, snapInfo: SnapInfo) {\n    if (boundInfo.isBound) {\n        return boundInfo.offset;\n    } else if (snapInfo.isSnap) {\n        return getNearestSnapGuidelineInfo(snapInfo).offset;\n    }\n    return 0;\n}\n\n\nexport function checkThrottleDragRotate(\n    throttleDragRotate: number,\n    [distX, distY]: number[],\n    [isVerticalBound, isHorizontalBound]: boolean[],\n    [isVerticalSnap, isHorizontalSnap]: boolean[],\n    [verticalOffset, horizontalOffset]: number[]\n) {\n    let offsetX = -verticalOffset;\n    let offsetY = -horizontalOffset;\n\n    if (throttleDragRotate && distX && distY) {\n        offsetX = 0;\n        offsetY = 0;\n        const adjustPoses: number[][] = [];\n        if (isVerticalBound && isHorizontalBound) {\n            adjustPoses.push([0, horizontalOffset], [verticalOffset, 0]);\n        } else if (isVerticalBound) {\n            adjustPoses.push([verticalOffset, 0]);\n        } else if (isHorizontalBound) {\n            adjustPoses.push([0, horizontalOffset]);\n        } else if (isVerticalSnap && isHorizontalSnap) {\n            adjustPoses.push([0, horizontalOffset], [verticalOffset, 0]);\n        } else if (isVerticalSnap) {\n            adjustPoses.push([verticalOffset, 0]);\n        } else if (isHorizontalSnap) {\n            adjustPoses.push([0, horizontalOffset]);\n        }\n        if (adjustPoses.length) {\n            adjustPoses.sort((a, b) => {\n                return (\n                    getDistSize(minus([distX, distY], a)) -\n                    getDistSize(minus([distX, distY], b))\n                );\n            });\n            const adjustPos = adjustPoses[0];\n\n            if (adjustPos[0] && abs(distX) > TINY_NUM) {\n                offsetX = -adjustPos[0];\n                offsetY =\n                    (distY * abs(distX + offsetX)) / abs(distX) -\n                    distY;\n            } else if (adjustPos[1] && abs(distY) > TINY_NUM) {\n                const prevDistY = distY;\n                offsetY = -adjustPos[1];\n                offsetX =\n                    (distX * abs(distY + offsetY)) / abs(prevDistY) -\n                    distX;\n            }\n            if (throttleDragRotate && isHorizontalBound && isVerticalBound) {\n                if (\n                    abs(offsetX) > TINY_NUM &&\n                    abs(offsetX) < abs(verticalOffset)\n                ) {\n                    const scale = abs(verticalOffset) / abs(offsetX);\n\n                    offsetX *= scale;\n                    offsetY *= scale;\n                } else if (\n                    abs(offsetY) > TINY_NUM &&\n                    abs(offsetY) < abs(horizontalOffset)\n                ) {\n                    const scale =\n                        abs(horizontalOffset) / abs(offsetY);\n\n                    offsetX *= scale;\n                    offsetY *= scale;\n                } else {\n                    offsetX = maxOffset(-verticalOffset, offsetX);\n                    offsetY = maxOffset(-horizontalOffset, offsetY);\n                }\n            }\n        }\n    } else {\n        offsetX = distX || isVerticalBound ? -verticalOffset : 0;\n        offsetY = distY || isHorizontalBound ? -horizontalOffset : 0;\n    }\n    return [offsetX, offsetY];\n}\n\nexport function checkSnapBoundsDrag(\n    moveable: MoveableManagerInterface<SnappableProps & DraggableProps, any>,\n    distX: number,\n    distY: number,\n    throttleDragRotate: number,\n    ignoreSnap: boolean,\n    datas: any\n) {\n    if (!hasGuidelines(moveable, \"draggable\")) {\n        return [\n            {\n                isSnap: false,\n                isBound: false,\n                offset: 0,\n            },\n            {\n                isSnap: false,\n                isBound: false,\n                offset: 0,\n            },\n        ];\n    }\n    const poses = getAbsolutePoses(datas.absolutePoses, [distX, distY]);\n    const { left, right, top, bottom } = getRect(poses);\n    const boundPoses = {\n        horizontal: poses.map((pos) => pos[1]),\n        vertical: poses.map((pos) => pos[0]),\n    };\n    const snapDirections = getSnapDirections(moveable.props.snapDirections);\n    const snapPoses = splitSnapDirectionPoses(snapDirections, {\n        left,\n        right,\n        top,\n        bottom,\n        center: (left + right) / 2,\n        middle: (top + bottom) / 2,\n    });\n    const {\n        vertical: verticalSnapBoundInfo,\n        horizontal: horizontalSnapBoundInfo,\n    } = checkMoveableSnapBounds(moveable, ignoreSnap, snapPoses, boundPoses);\n    const {\n        vertical: verticalInnerBoundInfo,\n        horizontal: horizontalInnerBoundInfo,\n    } = getInnerBoundDragInfo(moveable, poses, datas);\n\n    const isVerticalSnap = verticalSnapBoundInfo.isSnap;\n    const isHorizontalSnap = horizontalSnapBoundInfo.isSnap;\n    const isVerticalBound =\n        verticalSnapBoundInfo.isBound || verticalInnerBoundInfo.isBound;\n    const isHorizontalBound =\n        horizontalSnapBoundInfo.isBound || horizontalInnerBoundInfo.isBound;\n    const verticalOffset = maxOffset(\n        verticalSnapBoundInfo.offset,\n        verticalInnerBoundInfo.offset\n    );\n    const horizontalOffset = maxOffset(\n        horizontalSnapBoundInfo.offset,\n        horizontalInnerBoundInfo.offset\n    );\n\n    const [offsetX, offsetY] = checkThrottleDragRotate(\n        throttleDragRotate,\n        [distX, distY],\n        [isVerticalBound, isHorizontalBound],\n        [isVerticalSnap, isHorizontalSnap],\n        [verticalOffset, horizontalOffset]\n    );\n\n    return [\n        {\n            isBound: isVerticalBound,\n            isSnap: isVerticalSnap,\n            offset: offsetX,\n        },\n        {\n            isBound: isHorizontalBound,\n            isSnap: isHorizontalSnap,\n            offset: offsetY,\n        },\n    ];\n}\n\nexport function checkMoveableSnapBounds(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    ignoreSnap: boolean,\n    poses: { vertical: number[]; horizontal: number[]; },\n    boundPoses: { vertical: number[]; horizontal: number[]; } = poses,\n): DirectionSnapType<Required<SnapBoundInfo>> {\n    const {\n        horizontal: horizontalBoundInfos,\n        vertical: verticalBoundInfos,\n    } = checkBoundPoses(\n        getBounds(moveable),\n        boundPoses.vertical,\n        boundPoses.horizontal,\n    );\n    const {\n        horizontal: horizontalSnapInfo,\n        vertical: verticalSnapInfo,\n    } = ignoreSnap ? {\n        horizontal: { isSnap: false, index: -1 } as SnapInfo,\n        vertical: { isSnap: false, index: -1 } as SnapInfo,\n    } : checkMoveableSnapPoses(\n        moveable,\n        poses.vertical,\n        poses.horizontal,\n        undefined,\n        undefined,\n        undefined,\n        undefined,\n    );\n    const horizontalOffset = getSnapBound(\n        horizontalBoundInfos[0],\n        horizontalSnapInfo\n    );\n    const verticalOffset = getSnapBound(\n        verticalBoundInfos[0],\n        verticalSnapInfo\n    );\n\n    const horizontalDist = abs(horizontalOffset);\n    const verticalDist = abs(verticalOffset);\n\n    return {\n        horizontal: {\n            isBound: horizontalBoundInfos[0].isBound,\n            isSnap: horizontalSnapInfo.isSnap,\n            snapIndex: horizontalSnapInfo.index,\n            offset: horizontalOffset,\n            dist: horizontalDist,\n            bounds: horizontalBoundInfos,\n            snap: horizontalSnapInfo,\n        },\n        vertical: {\n            isBound: verticalBoundInfos[0].isBound,\n            isSnap: verticalSnapInfo.isSnap,\n            snapIndex: verticalSnapInfo.index,\n            offset: verticalOffset,\n            dist: verticalDist,\n            bounds: verticalBoundInfos,\n            snap: verticalSnapInfo,\n        },\n    };\n}\nexport function checkSnapBounds(\n    guideines: SnapGuideline[],\n    bounds: BoundType | undefined | false,\n    posesX: number[],\n    posesY: number[],\n    snapHorizontalThreshold: number,\n    snapVerticalThreshold: number,\n    multiples = [1, 1],\n): DirectionSnapType<Required<SnapBoundInfo>> {\n    const {\n        horizontal: horizontalBoundInfos,\n        vertical: verticalBoundInfos,\n    } = checkBoundPoses(bounds, posesX, posesY);\n\n    // options.isRequest ? {\n    //     horizontal: { isSnap: false, index: -1 } as SnapInfo,\n    //     vertical: { isSnap: false, index: -1 } as SnapInfo,\n    // } :\n    const {\n        horizontal: horizontalSnapInfo,\n        vertical: verticalSnapInfo,\n    } = checkSnapPoses(\n        guideines, posesX, posesY, [], [],\n        snapHorizontalThreshold,\n        snapVerticalThreshold,\n        multiples,\n    );\n\n    const horizontalOffset = getSnapBound(\n        horizontalBoundInfos[0],\n        horizontalSnapInfo\n    );\n    const verticalOffset = getSnapBound(\n        verticalBoundInfos[0],\n        verticalSnapInfo\n    );\n\n    const horizontalDist = abs(horizontalOffset);\n    const verticalDist = abs(verticalOffset);\n\n    return {\n        horizontal: {\n            isBound: horizontalBoundInfos[0].isBound,\n            isSnap: horizontalSnapInfo.isSnap,\n            snapIndex: horizontalSnapInfo.index,\n            offset: horizontalOffset,\n            dist: horizontalDist,\n            bounds: horizontalBoundInfos,\n            snap: horizontalSnapInfo,\n        },\n        vertical: {\n            isBound: verticalBoundInfos[0].isBound,\n            isSnap: verticalSnapInfo.isSnap,\n            snapIndex: verticalSnapInfo.index,\n            offset: verticalOffset,\n            dist: verticalDist,\n            bounds: verticalBoundInfos,\n            snap: verticalSnapInfo,\n        },\n    };\n}\n\n\nfunction checkSnapRightLine(\n    startPos: number[],\n    endPos: number[],\n    snapBoundInfo: { vertical: SnapBoundInfo; horizontal: SnapBoundInfo },\n    keepRatio: boolean\n) {\n    const rad = (getRad(startPos, endPos) / Math.PI) * 180;\n    const {\n        vertical: {\n            isBound: isVerticalBound,\n            isSnap: isVerticalSnap,\n            dist: verticalDist,\n        },\n        horizontal: {\n            isBound: isHorizontalBound,\n            isSnap: isHorizontalSnap,\n            dist: horizontalDist,\n        },\n    } = snapBoundInfo;\n\n    const rad180 = rad % 180;\n    const isHorizontalLine = rad180 < 3 || rad180 > 177;\n    const isVerticalLine = rad180 > 87 && rad180 < 93;\n\n    if (horizontalDist < verticalDist) {\n        if (\n            isVerticalBound ||\n            (isVerticalSnap &&\n                !isVerticalLine &&\n                (!keepRatio || !isHorizontalLine))\n        ) {\n            return \"vertical\";\n        }\n    }\n    if (\n        isHorizontalBound ||\n        (isHorizontalSnap &&\n            !isHorizontalLine &&\n            (!keepRatio || !isVerticalLine))\n    ) {\n        return \"horizontal\";\n    }\n    return \"\";\n}\n\n\nexport function getSnapBoundInfo(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    poses: number[][],\n    directions: number[][][],\n    keepRatio: boolean,\n    isRequest: boolean,\n    datas: any\n) {\n    return directions.map(([startDirection, endDirection]) => {\n        const otherStartPos = getPosByDirection(poses, startDirection);\n        const otherEndPos = getPosByDirection(poses, endDirection);\n        const snapBoundInfo = keepRatio\n            ? checkSnapBoundsKeepRatio(\n                moveable,\n                otherStartPos,\n                otherEndPos,\n                isRequest\n            )\n            : checkMoveableSnapBounds(moveable, isRequest, {\n                vertical: [otherEndPos[0]],\n                horizontal: [otherEndPos[1]],\n            });\n\n        const {\n            horizontal: {\n                // dist: otherHorizontalDist,\n                offset: otherHorizontalOffset,\n                isBound: isOtherHorizontalBound,\n                isSnap: isOtherHorizontalSnap,\n            },\n            vertical: {\n                // dist: otherVerticalDist,\n                offset: otherVerticalOffset,\n                isBound: isOtherVerticalBound,\n                isSnap: isOtherVerticalSnap,\n            },\n        } = snapBoundInfo;\n\n        const multiple = minus(endDirection, startDirection);\n\n        if (!otherVerticalOffset && !otherHorizontalOffset) {\n            return {\n                isBound: isOtherVerticalBound || isOtherHorizontalBound,\n                isSnap: isOtherVerticalSnap || isOtherHorizontalSnap,\n                sign: multiple,\n                offset: [0, 0],\n            };\n        }\n        const snapLine = checkSnapRightLine(\n            otherStartPos,\n            otherEndPos,\n            snapBoundInfo,\n            keepRatio\n        );\n\n        if (!snapLine) {\n            return {\n                sign: multiple,\n                isBound: false,\n                isSnap: false,\n                offset: [0, 0],\n            };\n        }\n\n        const isVertical = snapLine === \"vertical\";\n        let sizeOffset = [0, 0];\n\n        if (\n            !keepRatio\n            && abs(endDirection[0]) === 1\n            && abs(endDirection[1]) === 1\n            && startDirection[0] !== endDirection[0]\n            && startDirection[1] !== endDirection[1]\n        ) {\n            sizeOffset = getDragDist({\n                datas,\n                distX: -otherVerticalOffset,\n                distY: -otherHorizontalOffset,\n            });\n        } else {\n            sizeOffset = solveNextOffset(\n                otherStartPos,\n                otherEndPos,\n                -(isVertical ? otherVerticalOffset : otherHorizontalOffset),\n                isVertical,\n                datas,\n            ).offset;\n        }\n        sizeOffset = sizeOffset.map((size, i) => size * (multiple[i] ? 2 / multiple[i] : 0));\n\n\n        return {\n            sign: multiple,\n            isBound: isVertical ? isOtherVerticalBound : isOtherHorizontalBound,\n            isSnap: isVertical ? isOtherVerticalSnap : isOtherHorizontalSnap,\n            offset: sizeOffset,\n        };\n    });\n}\n\n\nfunction getSnapBoundOffset(boundInfo: BoundInfo, snapInfo: SnapOffsetInfo) {\n    if (boundInfo.isBound) {\n        return boundInfo.offset;\n    } else if (snapInfo.isSnap) {\n        return snapInfo.offset;\n    }\n    return 0;\n}\n\nexport function checkSnapBoundsKeepRatio(\n    moveable: MoveableManagerInterface<SnappableProps, SnappableState>,\n    startPos: number[],\n    endPos: number[],\n    isRequest: boolean\n): DirectionSnapType<SnapBoundInfo> {\n    const {\n        horizontal: horizontalBoundInfo,\n        vertical: verticalBoundInfo,\n    } = checkBoundKeepRatio(moveable, startPos, endPos);\n    const {\n        horizontal: horizontalSnapInfo,\n        vertical: verticalSnapInfo,\n    } = isRequest ? ({\n        horizontal: { isSnap: false },\n        vertical: { isSnap: false },\n    } as any) : checkSnapKeepRatio(moveable, startPos, endPos);\n\n    const horizontalOffset = getSnapBoundOffset(\n        horizontalBoundInfo,\n        horizontalSnapInfo\n    );\n    const verticalOffset = getSnapBoundOffset(\n        verticalBoundInfo,\n        verticalSnapInfo\n    );\n\n    const horizontalDist = abs(horizontalOffset);\n    const verticalDist = abs(verticalOffset);\n\n    return {\n        horizontal: {\n            isBound: horizontalBoundInfo.isBound,\n            isSnap: horizontalSnapInfo.isSnap,\n            offset: horizontalOffset,\n            dist: horizontalDist,\n        },\n        vertical: {\n            isBound: verticalBoundInfo.isBound,\n            isSnap: verticalSnapInfo.isSnap,\n            offset: verticalOffset,\n            dist: verticalDist,\n        },\n    };\n}\n\nexport function checkMaxBounds(\n    moveable: MoveableManagerInterface<SnappableProps>,\n    poses: number[][],\n    direction: number[],\n    fixedPosition: number[],\n    datas: any\n) {\n    const fixedDirection = [-direction[0], -direction[1]];\n    const { width, height } = moveable.state;\n    const bounds = moveable.props.bounds;\n    let maxWidth = Infinity;\n    let maxHeight = Infinity;\n\n    if (bounds) {\n        const directions = [\n            [direction[0], -direction[1]],\n            [-direction[0], direction[1]],\n        ];\n        const {\n            left = -Infinity,\n            top = -Infinity,\n            right = Infinity,\n            bottom = Infinity,\n        } = bounds;\n\n        directions.forEach((otherDirection) => {\n            const isCheckVertical = otherDirection[0] !== fixedDirection[0];\n            const isCheckHorizontal = otherDirection[1] !== fixedDirection[1];\n            const otherPos = getPosByDirection(poses, otherDirection);\n            const deg = (getRad(fixedPosition, otherPos) * 360) / Math.PI;\n\n            if (isCheckHorizontal) {\n                const nextOtherPos = otherPos.slice();\n\n                if (abs(deg - 360) < 2 || abs(deg - 180) < 2) {\n                    nextOtherPos[1] = fixedPosition[1];\n                }\n                const {\n                    offset: [, heightOffset],\n                    isOutside: isHeightOutside,\n                } = solveNextOffset(\n                    fixedPosition,\n                    nextOtherPos,\n                    (fixedPosition[1] < otherPos[1] ? bottom : top) -\n                    otherPos[1],\n                    false,\n                    datas\n                );\n                if (!isNaN(heightOffset)) {\n                    maxHeight = height + (isHeightOutside ? 1 : -1) * abs(heightOffset);\n                }\n            }\n            if (isCheckVertical) {\n                const nextOtherPos = otherPos.slice();\n\n                if (abs(deg - 90) < 2 || abs(deg - 270) < 2) {\n                    nextOtherPos[0] = fixedPosition[0];\n                }\n                const {\n                    offset: [widthOffset],\n                    isOutside: isWidthOutside,\n                } = solveNextOffset(\n                    fixedPosition,\n                    nextOtherPos,\n                    (fixedPosition[0] < otherPos[0] ? right : left) - otherPos[0],\n                    true,\n                    datas\n                );\n                if (!isNaN(widthOffset)) {\n                    maxWidth = width + (isWidthOutside ? 1 : -1) * abs(widthOffset);\n                }\n            }\n        });\n    }\n    return {\n        maxWidth,\n        maxHeight,\n    };\n}\n"
  },
  {
    "path": "packages/react-moveable/src/ables/snappable/utils.ts",
    "content": "import { TINY_NUM } from \"@daybrush/utils\";\nimport { throttle } from \"@daybrush/utils\";\nimport {\n    MoveableClientRect, MoveableManagerInterface,\n    SnapDirectionPoses,\n    SnapDirections, SnappableProps,\n    SnappableState,\n} from \"../../types\";\nimport {\n    calculatePosition,\n} from \"../../utils\";\nexport const VERTICAL_NAMES = [\"left\", \"right\", \"center\"] as const;\nexport const HORIZONTAL_NAMES = [\"top\", \"bottom\", \"middle\"] as const;\nexport const SNAP_SKIP_NAMES_MAP = {\n    \"left\": \"start\",\n    \"right\": \"end\",\n    \"center\": \"center\",\n    \"top\": \"start\",\n    \"bottom\": \"end\",\n    \"middle\": \"center\",\n};\n\nexport const VERTICAL_NAMES_MAP = {\n    start: \"left\",\n    end: \"right\",\n    center: \"center\",\n} as const;\nexport const HORIZONTAL_NAMES_MAP = {\n    start: \"top\",\n    end: \"bottom\",\n    center: \"middle\",\n} as const;\n\n\n\nexport function getInitialBounds() {\n    return {\n        left: false,\n        top: false,\n        right: false,\n        bottom: false,\n    };\n}\n\n\nexport function hasGuidelines(\n    moveable: MoveableManagerInterface<any, any>,\n    ableName: string\n): moveable is MoveableManagerInterface<SnappableProps, SnappableState> {\n    const {\n        props: {\n            snappable,\n            bounds,\n            innerBounds,\n            verticalGuidelines,\n            horizontalGuidelines,\n            snapGridWidth,\n            snapGridHeight,\n        },\n        state: { guidelines, enableSnap },\n    } = moveable;\n\n    if (\n        !snappable ||\n        !enableSnap ||\n        (ableName && snappable !== true && snappable.indexOf(ableName) < 0)\n    ) {\n        return false;\n    }\n    if (\n        snapGridWidth ||\n        snapGridHeight ||\n        bounds ||\n        innerBounds ||\n        (guidelines && guidelines.length) ||\n        (verticalGuidelines && verticalGuidelines.length) ||\n        (horizontalGuidelines && horizontalGuidelines.length)\n    ) {\n        return true;\n    }\n    return false;\n}\n\nexport function getSnapDirections(snapDirections: SnapDirections | boolean | undefined): SnapDirections {\n    if (snapDirections === false) {\n        return {};\n    } else if (snapDirections === true || !snapDirections) {\n        return { left: true, right: true, top: true, bottom: true };\n    }\n    return snapDirections;\n}\n\nexport function mapSnapDirectionPoses(\n    snapDirections: SnapDirections | boolean | undefined,\n    snapPoses: SnapDirectionPoses,\n) {\n    const nextSnapDirections = getSnapDirections(snapDirections);\n    const nextSnapPoses: SnapDirectionPoses = {};\n\n    for (const name in nextSnapDirections) {\n        if (name in snapPoses && (nextSnapDirections as any)[name]) {\n            (nextSnapPoses as any)[name] = (snapPoses as any)[name];\n        }\n    }\n    return nextSnapPoses;\n}\n\nexport function splitSnapDirectionPoses(\n    snapDirections: SnapDirections | boolean | undefined,\n    snapPoses: SnapDirectionPoses,\n) {\n    const nextSnapPoses = mapSnapDirectionPoses(snapDirections, snapPoses);\n    const horizontalNames = HORIZONTAL_NAMES.filter(name => name in nextSnapPoses);\n    const verticalNames = VERTICAL_NAMES.filter(name => name in nextSnapPoses);\n\n    return {\n        horizontalNames,\n        verticalNames,\n        horizontal: horizontalNames.map(name => nextSnapPoses[name]!),\n        vertical: verticalNames.map(name => nextSnapPoses[name]!),\n    };\n}\n\nexport function calculateContainerPos(\n    rootMatrix: number[],\n    containerRect: MoveableClientRect,\n    n: number,\n) {\n    const clientPos = calculatePosition(\n        rootMatrix, [containerRect.clientLeft!, containerRect.clientTop!], n);\n\n    return [\n        containerRect.left + clientPos[0],\n        containerRect.top + clientPos[1],\n    ];\n}\n\nexport function solveLineConstants([point1, point2]: number[][]): [number, number, number] {\n    let dx = point2[0] - point1[0];\n    let dy = point2[1] - point1[1];\n\n    if (Math.abs(dx) < TINY_NUM) {\n        dx = 0;\n    }\n    if (Math.abs(dy) < TINY_NUM) {\n        dy = 0;\n    }\n\n    // b > 0\n    // ax + by + c = 0\n    let a = 0;\n    let b = 0;\n    let c = 0;\n\n    if (!dx) {\n        // -x + 1 = 0\n        a = -1;\n        c = point1[0];\n    } else if (!dy) {\n        // y - 1 = 0\n        b = 1;\n        c = -point1[1];\n    } else {\n        // y = -a(x - x1) + y1\n        // ax + y + a * x1 - y1 = 0\n        a = -dy / dx;\n        b = 1;\n        c = a * point1[0] - point1[1];\n    }\n\n    return [a, b, c].map(v => throttle(v, TINY_NUM)) as [number, number, number];\n}\n"
  },
  {
    "path": "packages/react-moveable/src/classNames.ts",
    "content": "import { prefix } from \"./utils\";\n\nexport const AREA_PIECES = /*#__PURE__*/prefix(\"area-pieces\");\nexport const AREA_PIECE = /*#__PURE__*/prefix(\"area-piece\");\nexport const AVOID = /*#__PURE__*/prefix(\"avoid\");\nexport const VIEW_DRAGGING = prefix(\"view-dragging\");\n"
  },
  {
    "path": "packages/react-moveable/src/consts.ts",
    "content": "import getAgent from \"@egjs/agent\";\nimport { IObject } from \"@daybrush/utils\";\nimport { MoveableInterface } from \"./types\";\n\n\nexport const DIRECTIONS4 = [\"n\", \"w\", \"s\", \"e\"];\nexport const DIRECTIONS = [\"n\", \"w\", \"s\", \"e\", \"nw\", \"ne\", \"sw\", \"se\"];\n\n\nfunction getSVGCursor(scale: number, degree: number) {\n    return `data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${32 * scale}px\" height=\"${32 * scale}px\" viewBox=\"0 0 32 32\" ><path d=\"M 16,5 L 12,10 L 14.5,10 L 14.5,22 L 12,22 L 16,27 L 20,22 L 17.5,22 L 17.5,10 L 20, 10 L 16,5 Z\" stroke-linejoin=\"round\" stroke-width=\"1.2\" fill=\"black\" stroke=\"white\" style=\"transform:rotate(${degree}deg);transform-origin: 16px 16px\"></path></svg>`;\n}\nfunction getCursorCSS(degree: number) {\n    const x1 = getSVGCursor(1, degree);\n    // const x2 = getSVGCursor(2, degree);\n    const degree45 = (Math.round(degree / 45) * 45) % 180;\n    let defaultCursor = \"ns-resize\";\n\n    if (degree45 === 135) {\n        defaultCursor = \"nwse-resize\";\n    } else if (degree45 === 45) {\n        defaultCursor = \"nesw-resize\";\n    } else if (degree45 === 90) {\n        defaultCursor = \"ew-resize\";\n    }\n\n    // tslint:disable-next-line: max-line-length\n    return `cursor:${defaultCursor};cursor: url('${x1}') 16 16, ${defaultCursor};`;\n}\n\nexport const agent = getAgent();\nexport const IS_WEBKIT = agent.browser.webkit;\nexport const IS_WEBKIT605 = IS_WEBKIT && (() => {\n    const navi = typeof window === \"undefined\" ? { userAgent: \"\" } : window.navigator;\n    const res = /applewebkit\\/([^\\s]+)/g.exec(navi.userAgent.toLowerCase());\n\n    return res ? parseFloat(res[1]) < 605 : false;\n})();\n\nconst browserName = agent.browser.name;\nconst browserVersion = parseInt(agent.browser.version, 10);\nconst IS_CHROME = browserName === \"chrome\";\nconst IS_CHROMIUM = agent.browser.chromium;\nconst chromiumVersion = parseInt(agent.browser.chromiumVersion, 10) || 0;\n\nexport const IS_CHROMIUM109 = (IS_CHROME && browserVersion >= 109)\n    || (IS_CHROMIUM && chromiumVersion >= 109);\nexport const IS_FIREFOX = browserName === \"firefox\";\nexport const IS_SAFARI_ABOVE15\n    = parseInt(agent.browser.webkitVersion, 10) >= 612\n    || browserVersion >= 15;\n\nexport const PREFIX = \"moveable-\";\n\n\nconst directionCSS = DIRECTIONS.map(dir => {\n    let top = \"\";\n    let left = \"\";\n    let originX = \"center\";\n    let originY = \"center\";\n    const offset =  `calc(var(--moveable-control-padding, 20) * -1px)`;\n\n    if (dir.indexOf(\"n\") > -1) {\n        top = `top: ${offset};`;\n        originY = `bottom`;\n    }\n    if (dir.indexOf(`s`) > -1) {\n        top = `top: 0px;`;\n        originY = `top`;\n    }\n    if (dir.indexOf(`w`) > -1) {\n        left = `left: ${offset};`;\n        originX = `right`;\n    }\n    if (dir.indexOf(`e`) > -1) {\n        left = `left: 0px;`;\n        originX = `left`;\n    }\n    return `.around-control[data-direction*=\"${dir}\"] {\n        ${left}${top}\n        transform-origin: ${originX} ${originY};\n    }`;\n}).join(\"\\n\");\n\nexport const MOVEABLE_CSS = `\n{\nposition: absolute;\nwidth: 1px;\nheight: 1px;\nleft: 0;\ntop: 0;\nz-index: 3000;\n--moveable-color: #4af;\n--zoom: 1;\n--zoompx: 1px;\n--moveable-line-padding: 0;\n--moveable-control-padding: 0;\nwill-change: transform;\noutline: 1px solid transparent;\n}\n.control-box {\nz-index: 0;\n}\n.line, .control {\nposition: absolute;\nleft: 0;\ntop: 0;\nwill-change: transform;\n}\n.control {\nwidth: 14px;\nheight: 14px;\nborder-radius: 50%;\nborder: 2px solid #fff;\nbox-sizing: border-box;\nbackground: #4af;\nbackground: var(--moveable-color);\nmargin-top: -7px;\nmargin-left: -7px;\nborder: 2px solid #fff;\nz-index: 10;\n}\n.around-control {\nposition: absolute;\nwill-change: transform;\nwidth: calc(var(--moveable-control-padding, 20) * 1px);\nheight: calc(var(--moveable-control-padding, 20) * 1px);\nleft: calc(var(--moveable-control-padding, 20) * -0.5px);\ntop: calc(var(--moveable-control-padding, 20) * -0.5px);\nbox-sizing: border-box;\nbackground: transparent;\nz-index: 8;\ncursor: alias;\ntransform-origin: center center;\n}\n${directionCSS}\n.padding {\nposition: absolute;\ntop: 0px;\nleft: 0px;\nwidth: 100px;\nheight: 100px;\ntransform-origin: 0 0;\n}\n.line {\nwidth: 1px;\nheight: 1px;\nbackground: #4af;\nbackground: var(--moveable-color);\ntransform-origin: 0px 50%;\n}\n.line.edge {\nz-index: 1;\nbackground: transparent;\n}\n.line.dashed {\nbox-sizing: border-box;\nbackground: transparent;\n}\n.line.dashed.horizontal {\nborder-top: 1px dashed #4af;\nborder-top-color: #4af;\nborder-top-color: var(--moveable-color);\n}\n.line.dashed.vertical {\nborder-left: 1px dashed #4af;\nborder-left-color: #4af;\nborder-left-color: var(--moveable-color);\n}\n.line.vertical {\ntransform: translateX(-50%);\n}\n.line.horizontal {\ntransform: translateY(-50%);\n}\n.line.vertical.bold {\nwidth: 2px;\n}\n.line.horizontal.bold {\nheight: 2px;\n}\n\n.control.origin {\nborder-color: #f55;\nbackground: #fff;\nwidth: 12px;\nheight: 12px;\nmargin-top: -6px;\nmargin-left: -6px;\npointer-events: none;\n}\n${[0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165].map(degree => `\n.direction[data-rotation=\"${degree}\"], :global .view-control-rotation${degree} {\n${getCursorCSS(degree)}\n}\n`).join(\"\\n\")}\n\n.line.direction:before {\ncontent: \"\";\nposition: absolute;\nwidth: 100%;\nheight: calc(var(--moveable-line-padding, 0) * 1px);\nbottom: 0;\nleft: 0;\n}\n.group {\nz-index: -1;\n}\n.area {\nposition: absolute;\n}\n.area-pieces {\nposition: absolute;\ntop: 0;\nleft: 0;\ndisplay: none;\n}\n.area.avoid, .area.pass {\npointer-events: none;\n}\n.area.avoid+.area-pieces {\ndisplay: block;\n}\n.area-piece {\nposition: absolute;\n}\n\n${IS_WEBKIT605 ? `:global svg *:before {\ncontent:\"\";\ntransform-origin: inherit;\n}` : \"\"}\n`;\n\nexport const NEARBY_POS = [\n    [0, 1, 2],\n    [1, 0, 3],\n    [2, 0, 3],\n    [3, 1, 2],\n];\n\nexport const FLOAT_POINT_NUM = 0.0001;\nexport const TINY_NUM = 0.0000001;\nexport const MIN_SCALE = 0.000000001;\nexport const MAX_NUM = Math.pow(10, 10);\nexport const MIN_NUM = -MAX_NUM;\n\nexport const DIRECTION_REGION_TO_DIRECTION: Record<string, number[]> = {\n    n: [0, -1],\n    e: [1, 0],\n    s: [0, 1],\n    w: [-1, 0],\n    nw: [-1, -1],\n    ne: [1, -1],\n    sw: [-1, 1],\n    se: [1, 1],\n};\n\nexport const DIRECTION_INDEXES: IObject<number[]> = {\n    n: [0, 1],\n    e: [1, 3],\n    s: [3, 2],\n    w: [2, 0],\n    nw: [0],\n    ne: [1],\n    sw: [2],\n    se: [3],\n};\nexport const DIRECTION_ROTATIONS: IObject<number> = {\n    n: 0,\n    s: 180,\n    w: 270,\n    e: 90,\n    nw: 315,\n    ne: 45,\n    sw: 225,\n    se: 135,\n};\n\nexport const MOVEABLE_METHODS: Array<keyof MoveableInterface> = [\n    \"isMoveableElement\",\n    \"updateRect\",\n    \"updateTarget\",\n    \"destroy\",\n    \"dragStart\",\n    \"isInside\",\n    \"hitTest\",\n    \"setState\",\n    \"getRect\",\n    \"request\",\n    \"isDragging\",\n    \"getManager\",\n    \"forceUpdate\",\n    \"waitToChangeTarget\",\n    \"updateSelectors\",\n    \"getTargets\",\n    \"stopDrag\",\n    \"getControlBoxElement\",\n    \"getMoveables\",\n    \"getDragElement\",\n];\n"
  },
  {
    "path": "packages/react-moveable/src/externalTypes.ts",
    "content": "export * from \"./types\";\nexport type { MoveableElementMatrixInfo }  from \"./utils/calculateMatrixStack\";\nexport type { MoveableElementInfo }  from \"./utils/getElementInfo\";\nexport type { MoveableTargetInfo }  from \"./utils/getMoveableTargetInfo\";\n"
  },
  {
    "path": "packages/react-moveable/src/gesto/CustomGesto.ts",
    "content": "import { MoveableManagerState, OnCustomDrag } from \"../types\";\nimport { convertDragDist } from \"../utils\";\n\nexport function setCustomDrag(\n    e: any,\n    state: MoveableManagerState<any>,\n    delta: number[],\n    isPinch: boolean,\n    isConvert: boolean,\n    ableName = \"draggable\",\n) {\n    const result = state.gestos[ableName]?.move(delta, e.inputEvent) ?? {};\n    const datas = result.originalDatas || result.datas;\n    const ableDatas = datas[ableName] || (datas[ableName] = {});\n\n    return {\n        ...(isConvert ? convertDragDist(state, result) : result),\n        isPinch: !!isPinch,\n        parentEvent: true,\n        datas: ableDatas,\n        originalDatas: e.originalDatas,\n    };\n}\n\nexport default class CustomGesto {\n    private prevX = 0;\n    private prevY = 0;\n    private startX = 0;\n    private startY = 0;\n    private isDrag = false;\n    private isFlag = false;\n    private datas: any = {\n        draggable: {},\n    };\n    constructor(private ableName = \"draggable\") {\n        this.datas = {\n            [ableName]: {},\n        };\n    }\n\n    public dragStart(client: number[], e: any) {\n        this.isDrag = false;\n        this.isFlag = false;\n        const originalDatas = e.originalDatas;\n\n        this.datas = originalDatas;\n        if (!originalDatas[this.ableName]) {\n            originalDatas[this.ableName] = {};\n        }\n        return {\n            ...this.move(client, e.inputEvent),\n            type: \"dragstart\",\n        };\n    }\n    public drag(client: number[], inputEvent: any) {\n        return this.move([\n            client[0] - this.prevX,\n            client[1] - this.prevY,\n        ], inputEvent);\n    }\n    public move(delta: number[], inputEvent: any): OnCustomDrag {\n        let clientX!: number;\n        let clientY!: number;\n        let isFirstDrag = false;\n\n        if (!this.isFlag) {\n            this.prevX = delta[0];\n            this.prevY = delta[1];\n            this.startX = delta[0];\n            this.startY = delta[1];\n\n            clientX = delta[0];\n            clientY = delta[1];\n\n            this.isFlag = true;\n        } else {\n            const isPrevDrag = this.isDrag;\n\n            clientX = this.prevX + delta[0];\n            clientY = this.prevY + delta[1];\n\n            if (delta[0] || delta[1]) {\n                this.isDrag = true;\n            }\n\n            if (!isPrevDrag && this.isDrag) {\n                isFirstDrag = true;\n            }\n        }\n\n        this.prevX = clientX;\n        this.prevY = clientY;\n\n        return {\n            type: \"drag\",\n            clientX,\n            clientY,\n            inputEvent,\n            isFirstDrag,\n            isDrag: this.isDrag,\n            distX: clientX - this.startX,\n            distY: clientY - this.startY,\n            deltaX: delta[0],\n            deltaY: delta[1],\n            datas: this.datas[this.ableName],\n            originalDatas: this.datas,\n            parentEvent: true,\n            parentGesto: this,\n        };\n    }\n}\n"
  },
  {
    "path": "packages/react-moveable/src/gesto/GestoData.ts",
    "content": "import { MoveableManagerInterface } from \"../types\";\n\nexport function getGestoData(moveable: MoveableManagerInterface, ableName: string) {\n    const targetGesto = moveable.targetGesto;\n    const controlGesto = moveable.controlGesto;\n    let data!: Record<string, any>;\n\n    if (targetGesto?.isFlag()) {\n        data = targetGesto.getEventData()[ableName];\n    }\n\n    if (!data && controlGesto?.isFlag()) {\n        data = controlGesto.getEventData()[ableName];\n    }\n\n    return data || {};\n}\n"
  },
  {
    "path": "packages/react-moveable/src/gesto/GestoUtils.ts",
    "content": "\nimport {\n    invert, calculate, minus, plus,\n    convertPositionMatrix,\n    createScaleMatrix, multiply, fromTranslation, convertDimension,\n} from \"@scena/matrix\";\nimport {\n    calculatePoses, getAbsoluteMatrix, getAbsolutePosesByState,\n    calculatePosition, calculateInversePosition, convertTransformInfo, fillCSSObject,\n} from \"../utils\";\nimport { splitUnit, isArray, splitSpace, findIndex, dot, find, isString } from \"@daybrush/utils\";\nimport {\n    MoveableManagerState, ResizableProps, MoveableManagerInterface,\n    OnTransformEvent, OnTransformStartEvent, DraggableProps, OnDrag,\n} from \"../types\";\nimport { setCustomDrag } from \"./CustomGesto\";\nimport { parse, parseMat } from \"css-to-mat\";\nimport { Draggable } from \"../index.esm\";\nimport { calculateElementPosition } from \"../utils/calculateElementPosition\";\n\nexport function calculatePointerDist(moveable: MoveableManagerInterface, e: any) {\n    const { clientX, clientY, datas } = e;\n    const {\n        moveableClientRect,\n        rootMatrix,\n        is3d,\n        pos1,\n    } = moveable.state;\n    const { left, top } = moveableClientRect;\n    const n = is3d ? 4 : 3;\n    const [posX, posY] = minus(calculateInversePosition(rootMatrix, [clientX - left, clientY - top], n), pos1);\n    const [distX, distY] = getDragDist({ datas, distX: posX, distY: posY });\n\n    return [distX, distY];\n}\n\nexport function setDragStart(moveable: MoveableManagerInterface<any>, { datas }: any) {\n    const {\n        allMatrix,\n        beforeMatrix,\n        is3d,\n        left,\n        top,\n        origin,\n        offsetMatrix,\n        targetMatrix,\n        transformOrigin,\n    } = moveable.state;\n    const n = is3d ? 4 : 3;\n\n    datas.is3d = is3d;\n    datas.matrix = allMatrix;\n    datas.targetMatrix = targetMatrix;\n    datas.beforeMatrix = beforeMatrix;\n    datas.offsetMatrix = offsetMatrix;\n    datas.transformOrigin = transformOrigin;\n    datas.inverseMatrix = invert(allMatrix, n);\n    datas.inverseBeforeMatrix = invert(beforeMatrix, n);\n    datas.absoluteOrigin = convertPositionMatrix(plus([left, top], origin), n);\n    datas.startDragBeforeDist = calculate(datas.inverseBeforeMatrix, datas.absoluteOrigin, n);\n    datas.startDragDist = calculate(datas.inverseMatrix, datas.absoluteOrigin, n);\n}\n\nexport function getTransformDirection(e: any) {\n    return calculateElementPosition(e.datas.beforeTransform, [50, 50], 100, 100).direction;\n}\n\n\nexport interface OriginalDataTransformInfos {\n    startTransforms: string[];\n    nextTransforms: string[];\n    nextTransformAppendedIndexes: number[];\n}\n\nexport function resolveTransformEvent(moveable: MoveableManagerInterface, event: any, functionName: string) {\n    const {\n        datas,\n        originalDatas: {\n            beforeRenderable: originalDatas,\n        },\n    } = event;\n\n    const index = datas.transformIndex;\n\n    const nextTransforms = originalDatas.nextTransforms as string[];\n    const length = nextTransforms.length;\n    const nextTransformAppendedIndexes: any[] = originalDatas.nextTransformAppendedIndexes;\n    let nextIndex = -1;\n\n    if (index === -1) {\n        // translate => rotate => scale\n        if (functionName === \"translate\") {\n            nextIndex = 0;\n        } else if (functionName === \"rotate\") {\n            nextIndex = findIndex(nextTransforms, text => text.match(/scale\\(/g,));\n        }\n        if (nextIndex === -1) {\n            nextIndex = nextTransforms.length;\n        }\n        datas.transformIndex = nextIndex;\n    } else if (find(nextTransformAppendedIndexes, info => info.index === index && info.functionName === functionName)) {\n        nextIndex = index;\n    } else {\n        nextIndex = index + nextTransformAppendedIndexes.filter(info => info.index < index).length;\n    }\n\n    const result = convertTransformInfo(nextTransforms, moveable.state, nextIndex);\n    const targetFunction = result.targetFunction;\n    const matFunctionName = functionName === \"rotate\" ? \"rotateZ\" : functionName;\n\n    datas.beforeFunctionTexts = result.beforeFunctionTexts;\n    datas.afterFunctionTexts = result.afterFunctionTexts;\n    datas.beforeTransform = result.beforeFunctionMatrix;\n    datas.beforeTransform2 = result.beforeFunctionMatrix2;\n    datas.targetTansform = result.targetFunctionMatrix;\n    datas.afterTransform = result.afterFunctionMatrix;\n    datas.afterTransform2 = result.afterFunctionMatrix2;\n    datas.targetAllTransform = result.allFunctionMatrix;\n\n    if (targetFunction.functionName === matFunctionName) {\n        datas.afterFunctionTexts.splice(0, 1);\n        datas.isAppendTransform = false;\n    } else if (length > nextIndex) {\n        datas.isAppendTransform = true;\n\n        originalDatas.nextTransformAppendedIndexes = [...nextTransformAppendedIndexes, {\n            functionName,\n            index: nextIndex,\n            isAppend: true,\n        }];\n    }\n}\n\nexport function convertTransformFormat(datas: any, value: any, dist: any) {\n    return `${datas.beforeFunctionTexts.join(\" \")} ${datas.isAppendTransform ? dist : value} ${datas.afterFunctionTexts.join(\" \")}`;\n}\nexport function getTransformDist({ datas, distX, distY }: any) {\n    const [bx, by] = getBeforeDragDist({ datas, distX, distY });\n    // B * [tx, ty] * A = [bx, by] * targetMatrix;\n    // [tx, ty] = B-1 * [bx, by] * targetMatrix * A-1 * [0, 0];\n\n    const res = getTransfromMatrix(datas, fromTranslation([bx, by], 4));\n\n    return calculate(res, convertPositionMatrix([0, 0, 0], 4), 4);\n}\nexport function getTransfromMatrix(datas: any, targetMatrix: number[], isAfter?: boolean) {\n    const {\n        beforeTransform,\n        afterTransform,\n        beforeTransform2,\n        afterTransform2,\n        targetAllTransform,\n    } = datas;\n\n    // B * afterTargetMatrix * A = (targetMatrix * targetAllTransform)\n    // afterTargetMatrix = B-1 * targetMatrix * targetAllTransform * A-1\n    // nextTargetMatrix = (targetMatrix * targetAllTransform)\n    const nextTargetMatrix\n        = isAfter\n            ? multiply(targetAllTransform, targetMatrix, 4)\n            : multiply(targetMatrix, targetAllTransform, 4);\n\n    // res1 = B-1 * nextTargetMatrix\n    const res1 = multiply(invert(isAfter ? beforeTransform2 : beforeTransform, 4), nextTargetMatrix, 4);\n\n    // res3 = res2 * A-1\n    const afterTargetMatrix = multiply(res1, invert(isAfter ? afterTransform2 : afterTransform, 4), 4);\n\n    return afterTargetMatrix;\n}\nexport function getBeforeDragDist({ datas, distX, distY }: any) {\n    // TT = BT\n    const {\n        inverseBeforeMatrix,\n        is3d,\n        startDragBeforeDist,\n        absoluteOrigin,\n    } = datas;\n    const n = is3d ? 4 : 3;\n\n    // ABS_ORIGIN * [distX, distY] = BM * (ORIGIN + [tx, ty])\n    // BM -1 * ABS_ORIGIN * [distX, distY] - ORIGIN = [tx, ty]\n    return minus(\n        calculate(\n            inverseBeforeMatrix,\n            plus(absoluteOrigin, [distX, distY]),\n            n,\n        ),\n        startDragBeforeDist,\n    );\n}\nexport function getDragDist({ datas, distX, distY }: any, isBefore?: boolean) {\n    const {\n        inverseBeforeMatrix,\n        inverseMatrix,\n        is3d,\n        startDragBeforeDist,\n        startDragDist,\n        absoluteOrigin,\n    } = datas;\n    const n = is3d ? 4 : 3;\n\n    return minus(\n        calculate(\n            isBefore ? inverseBeforeMatrix : inverseMatrix,\n            plus(absoluteOrigin, [distX, distY]),\n            n,\n        ),\n        isBefore ? startDragBeforeDist : startDragDist,\n    );\n}\nexport function getInverseDragDist({ datas, distX, distY }: any, isBefore?: boolean) {\n    const {\n        beforeMatrix,\n        matrix,\n        is3d,\n        startDragBeforeDist,\n        startDragDist,\n        absoluteOrigin,\n    } = datas;\n    const n = is3d ? 4 : 3;\n\n    return minus(\n        calculate(\n            isBefore ? beforeMatrix : matrix,\n            plus(isBefore ? startDragBeforeDist : startDragDist, [distX, distY]),\n            n,\n        ),\n        absoluteOrigin,\n    );\n}\n\nexport function calculateTransformOrigin(\n    transformOrigin: string[],\n    width: number,\n    height: number,\n    prevWidth: number = width,\n    prevHeight: number = height,\n    prevOrigin: number[] = [0, 0],\n) {\n\n    if (!transformOrigin) {\n        return prevOrigin;\n    }\n    return transformOrigin.map((pos, i) => {\n        const { value, unit } = splitUnit(pos);\n\n        const prevSize = (i ? prevHeight : prevWidth);\n        const size = (i ? height : width);\n        if (pos === \"%\" || isNaN(value)) {\n            // no value but %\n\n            const measureRatio = prevSize ? prevOrigin[i] / prevSize : 0;\n\n            return size * measureRatio;\n        } else if (unit !== \"%\") {\n            return value;\n        }\n        return size * value / 100;\n    });\n}\n\nexport function getPosIndexesByDirection(direction: number[]) {\n    const indexes: number[] = [];\n\n    if (direction[1] >= 0) {\n        if (direction[0] >= 0) {\n            indexes.push(3);\n        }\n        if (direction[0] <= 0) {\n            indexes.push(2);\n        }\n    }\n    if (direction[1] <= 0) {\n        if (direction[0] >= 0) {\n            indexes.push(1);\n        }\n        if (direction[0] <= 0) {\n            indexes.push(0);\n        }\n    }\n    return indexes;\n}\nexport function getPosesByDirection(\n    poses: number[][],\n    direction: number[],\n) {\n    /*\n    [-1, -1](pos1)       [0, -1](pos1,pos2)       [1, -1](pos2)\n    [-1, 0](pos1, pos3)                           [1, 0](pos2, pos4)\n    [-1, 1](pos3)        [0, 1](pos3, pos4)       [1, 1](pos4)\n    */\n    return getPosIndexesByDirection(direction).map(index => poses[index]);\n}\n\nexport function getPosBySingleDirection(\n    poses: number[][],\n    direction: number,\n) {\n    const ratio = (direction + 1) / 2;\n    return [\n        dot(poses[0][0], poses[1][0], ratio, 1 - ratio),\n        dot(poses[0][1], poses[1][1], ratio, 1 - ratio),\n    ];\n}\n\nexport function getPosByDirection(\n    poses: number[][],\n    direction: number[],\n) {\n    const top = getPosBySingleDirection([poses[0], poses[1]], direction[0]);\n    const bottom = getPosBySingleDirection([poses[2], poses[3]], direction[0]);\n\n    return getPosBySingleDirection([top, bottom], direction[1]);\n}\n\nfunction getDist(\n    startPos: number[],\n    matrix: number[],\n    width: number,\n    height: number,\n    n: number,\n    fixedDirection: number[],\n) {\n    const poses = calculatePoses(matrix, width, height, n);\n    const fixedPos = getPosByDirection(poses, fixedDirection);\n    const distX = startPos[0] - fixedPos[0];\n    const distY = startPos[1] - fixedPos[1];\n\n    return [distX, distY];\n}\nexport function getNextMatrix(\n    offsetMatrix: number[],\n    targetMatrix: number[],\n    origin: number[],\n    n: number,\n) {\n    return multiply(\n        offsetMatrix,\n        getAbsoluteMatrix(targetMatrix, n, origin),\n        n,\n    );\n}\nexport function getNextTransformMatrix(\n    state: MoveableManagerState<any>,\n    datas: any,\n    transform: string | number[],\n    isAllTransform?: boolean,\n) {\n    const {\n        transformOrigin,\n        offsetMatrix,\n        is3d,\n    } = state;\n    const n = is3d ? 4 : 3;\n    let targetTransform!: number[];\n\n    if (isString(transform)) {\n        const {\n            beforeTransform,\n            afterTransform,\n        } = datas;\n\n        if (isAllTransform) {\n            targetTransform = convertDimension(parseMat(transform), 4, n);\n        } else {\n            targetTransform = convertDimension(\n                multiply(multiply(beforeTransform, parseMat([transform]), 4), afterTransform, 4),\n                4, n,\n            );\n        }\n    } else {\n        targetTransform = transform;\n    }\n\n    return getNextMatrix(\n        offsetMatrix,\n        targetTransform,\n        transformOrigin,\n        n,\n    );\n}\nexport function scaleMatrix(\n    state: any,\n    scale: number[],\n) {\n    const {\n        transformOrigin,\n        offsetMatrix,\n        is3d,\n        targetMatrix,\n        targetAllTransform,\n    } = state;\n    const n = is3d ? 4 : 3;\n\n    return getNextMatrix(\n        offsetMatrix,\n        multiply(targetAllTransform || targetMatrix, createScaleMatrix(scale, n), n),\n        transformOrigin,\n        n,\n    );\n}\n\nexport function fillTransformStartEvent(moveable: MoveableManagerInterface, e: any): OnTransformStartEvent {\n    const originalDatas = getBeforeRenderableDatas(e);\n    return {\n        setTransform: (transform: string | string[], index = -1) => {\n            originalDatas.startTransforms = isArray(transform) ? transform : splitSpace(transform);\n            setTransformIndex(moveable, e, index);\n        },\n        setTransformIndex: (index: number) => {\n            setTransformIndex(moveable, e, index);\n        },\n    };\n}\nexport function setDefaultTransformIndex(moveable: MoveableManagerInterface, e: any, property: string) {\n    const originalDatas = getBeforeRenderableDatas(e);\n    const startTransforms = originalDatas.startTransforms;\n\n    setTransformIndex(moveable, e, findIndex<string>(startTransforms, func => func.indexOf(`${property}(`) === 0));\n}\nexport function setTransformIndex(moveable: MoveableManagerInterface, e: any, index: number) {\n    const originalDatas = getBeforeRenderableDatas(e);\n    const datas = e.datas;\n\n    datas.transformIndex = index;\n    if (index === -1) {\n        return;\n    }\n    const transform = originalDatas.startTransforms[index];\n\n    if (!transform) {\n        return;\n    }\n    const state = moveable.state;\n    const info = parse([transform], {\n        \"x%\": v => v / 100 * state.offsetWidth,\n        \"y%\": v => v / 100 * state.offsetHeight,\n    });\n\n    datas.startValue = info[0].functionValue;\n}\nexport function fillOriginalTransform(\n    e: any,\n    transform: string,\n) {\n    const originalDatas = getBeforeRenderableDatas(e);\n\n    originalDatas.nextTransforms = splitSpace(transform);\n    // originalDatas.nextTargetMatrix = parseMat(transform);\n}\nexport function getBeforeRenderableDatas(e: any) {\n    return e.originalDatas.beforeRenderable;\n}\nexport function getNextTransforms(e: any) {\n    const {\n        originalDatas: {\n            beforeRenderable: originalDatas,\n        },\n    } = e;\n\n    return originalDatas.nextTransforms as string[];\n}\nexport function getNextTransformText(e: any) {\n    return (getNextTransforms(e) || []).join(\" \");\n}\n\nexport function getNextStyle(e: any) {\n    return getBeforeRenderableDatas(e).nextStyle;\n}\n\nexport function fillTransformEvent(\n    moveable: MoveableManagerInterface<DraggableProps>,\n    nextTransform: string,\n    delta: number[],\n    isPinch: boolean,\n    e: any,\n): OnTransformEvent {\n    fillOriginalTransform(e, nextTransform);\n\n    const drag = Draggable.drag!(\n        moveable,\n        setCustomDrag(e, moveable.state, delta, isPinch, false),\n    ) as OnDrag;\n    const afterTransform = drag ? drag.transform : nextTransform;\n    return {\n        transform: nextTransform,\n        drag: drag as OnDrag,\n        ...fillCSSObject({\n            transform: afterTransform,\n        }, e),\n        afterTransform,\n    };\n}\n\nexport function getTranslateFixedPosition(\n    moveable: MoveableManagerInterface<any>,\n    transform: string | number[],\n    fixedDirection: number[],\n    fixedOffset: number[],\n    datas: any,\n    isAllTransform?: boolean,\n) {\n    const nextMatrix = getNextTransformMatrix(moveable.state, datas, transform, isAllTransform);\n    const nextFixedPosition = getDirectionOffset(\n        moveable,\n        fixedDirection,\n        fixedOffset,\n        nextMatrix,\n    );\n\n    return nextFixedPosition;\n}\n\nexport function getTranslateDist(\n    moveable: MoveableManagerInterface<any>,\n    transform: string,\n    fixedDirection: number[],\n    fixedPosition: number[],\n    fixedOffset: number[],\n    datas: any,\n    isAllTransform?: boolean,\n) {\n    const nextFixedPosition = getTranslateFixedPosition(\n        moveable,\n        transform,\n        fixedDirection,\n        fixedOffset,\n        datas,\n        isAllTransform,\n    );\n    const state = moveable.state;\n    const {\n        left,\n        top,\n    } = state;\n\n    const groupable = moveable.props.groupable;\n    const groupLeft = groupable ? left : 0;\n    const groupTop = groupable ? top : 0;\n    const dist = minus(fixedPosition, nextFixedPosition);\n\n    return minus(dist, [groupLeft, groupTop]);\n}\nexport function getScaleDist(\n    moveable: MoveableManagerInterface<any>,\n    transform: string,\n    fixedDirection: number[],\n    fixedPosition: number[],\n    fixedOffset: number[],\n    datas: any,\n    isAllTransform?: boolean,\n) {\n    const dist = getTranslateDist(\n        moveable,\n        transform,\n        fixedDirection,\n        fixedPosition,\n        fixedOffset,\n        datas,\n        isAllTransform,\n    );\n\n    return dist;\n}\nexport function getOriginDirection(moveable: MoveableManagerInterface<any>) {\n    const {\n        width,\n        height,\n        transformOrigin,\n    } = moveable.state;\n    return [\n        -1 + transformOrigin[0] / (width / 2),\n        -1 + transformOrigin[1] / (height / 2),\n    ];\n}\nexport function getDirectionByPos(\n    pos: number[],\n    width: number,\n    height: number,\n) {\n    return [\n        width ? -1 + pos[0] / (width / 2) : 0,\n        height ? -1 + pos[1] / (height / 2) : 0,\n    ];\n}\nexport function getDirectionOffset(\n    moveable: MoveableManagerInterface,\n    fixedDirection: number[],\n    fixedOffset: number[],\n    nextMatrix: number[] = moveable.state.allMatrix,\n) {\n    const {\n        width,\n        height,\n        is3d,\n    } = moveable.state;\n    const n = is3d ? 4 : 3;\n    const fixedOffsetPosition = [\n        width / 2 * (1 + fixedDirection[0]) + fixedOffset[0],\n        height / 2 * (1 + fixedDirection[1]) + fixedOffset[1],\n    ];\n    return calculatePosition(nextMatrix, fixedOffsetPosition, n);\n}\nexport function getRotateDist(\n    moveable: MoveableManagerInterface<any>,\n    rotateDist: number,\n    datas: any,\n) {\n    const fixedDirection = datas.fixedDirection;\n    const fixedPosition = datas.fixedPosition;\n    const fixedOffset = datas.fixedOffset;\n\n    return getTranslateDist(\n        moveable,\n        `rotate(${rotateDist}deg)`,\n        fixedDirection,\n        fixedPosition,\n        fixedOffset,\n        datas,\n    );\n}\nexport function getResizeDist(\n    moveable: MoveableManagerInterface<any>,\n    width: number,\n    height: number,\n    fixedPosition: number[],\n    transformOrigin: string[],\n    datas: any,\n) {\n    const {\n        groupable,\n    } = moveable.props;\n    const state = moveable.state;\n    const {\n        transformOrigin: prevOrigin,\n        offsetMatrix,\n        is3d,\n        width: prevWidth,\n        height: prevHeight,\n        left,\n        top,\n    } = state;\n    const fixedDirection = datas.fixedDirection;\n    const targetMatrix = datas.nextTargetMatrix || state.targetMatrix;\n    const n = is3d ? 4 : 3;\n    const nextOrigin = calculateTransformOrigin(\n        transformOrigin!,\n        width,\n        height,\n        prevWidth,\n        prevHeight,\n        prevOrigin,\n    );\n    const groupLeft = groupable ? left : 0;\n    const groupTop = groupable ? top : 0;\n    const nextMatrix = getNextMatrix(offsetMatrix, targetMatrix, nextOrigin, n);\n    const dist = getDist(fixedPosition, nextMatrix, width, height, n, fixedDirection);\n\n    return minus(dist, [groupLeft, groupTop]);\n}\nexport function getAbsolutePosition(\n    moveable: MoveableManagerInterface<ResizableProps>,\n    direction: number[],\n) {\n    return getPosByDirection(getAbsolutePosesByState(moveable.state), direction);\n}\n"
  },
  {
    "path": "packages/react-moveable/src/gesto/getAbleGesto.ts",
    "content": "import { Able, MoveableManagerInterface, MoveableGroupInterface } from \"../types\";\nimport { getWindow, hasClass, IObject } from \"@daybrush/utils\";\nimport { convertDragDist, defaultSync, getRefTarget } from \"../utils\";\nimport Gesto, { GestoOptions } from \"gesto\";\nimport BeforeRenderable from \"../ables/BeforeRenderable\";\nimport Renderable from \"../ables/Renderable\";\n\nexport function triggerAble(\n    moveable: MoveableManagerInterface,\n    moveableAbles: Able[],\n    eventOperations: string[],\n    eventAffix: string,\n    eventType: any,\n    e: any,\n    requestInstant?: boolean,\n) {\n    // pre setting\n    e.clientDistX = e.distX;\n    e.clientDistY = e.distY;\n\n    const isStart = eventType === \"Start\";\n    const isEnd = eventType === \"End\";\n    const isAfter = eventType === \"After\";\n    const target = moveable.state.target;\n    const isRequest = e.isRequest;\n    const isControl = eventAffix.indexOf(\"Control\") > -1;\n\n    if (\n        !target\n        || (isStart && isControl && !isRequest && moveable.areaElement === e.inputEvent.target)\n    ) {\n        return false;\n    }\n    const ables: Able[] = [...moveableAbles];\n\n    if (isRequest) {\n        const requestAble = e.requestAble;\n\n        if (!ables.some(able => able.name === requestAble)) {\n            ables.push(...moveable.props.ables!.filter(able => able.name === requestAble));\n        }\n    }\n    if (!ables.length || ables.every(able => able.dragRelation)) {\n        return false;\n    }\n    // \"drag\" \"Control\" \"After\"\n\n    const inputEvent = e.inputEvent;\n    let inputTarget: Element;\n\n    if (isEnd && inputEvent) {\n        inputTarget = document.elementFromPoint(e.clientX, e.clientY) || inputEvent.target;\n    }\n    let isDragStop = false;\n    const stop = () => {\n        isDragStop = true;\n        e.stop?.();\n    };\n    const isFirstStart = isStart && (\n        !moveable.targetGesto || !moveable.controlGesto\n        || (!moveable.targetGesto.isFlag() || !moveable.controlGesto.isFlag())\n    );\n\n    if (isFirstStart) {\n        moveable.updateRect(eventType, true, false);\n    }\n\n\n    // trigger ables\n    const datas = e.datas;\n    const gestoType = isControl ? \"controlGesto\" : \"targetGesto\";\n    const prevGesto = moveable[gestoType];\n\n    const trigger = (able: any, eventName: string, conditionName?: string) => {\n        if (!(eventName in able) || prevGesto !== moveable[gestoType]) {\n            return false;\n        }\n        const ableName = able.name;\n        const nextDatas = datas[ableName] || (datas[ableName] = {});\n\n        if (isStart) {\n            nextDatas.isEventStart = !conditionName\n                || !able[conditionName] || able[conditionName](moveable, e);\n        }\n\n        if (!nextDatas.isEventStart) {\n            return false;\n        }\n        const result = able[eventName](moveable, {\n            ...e,\n            stop,\n            datas: nextDatas,\n            originalDatas: datas,\n            inputTarget,\n        });\n        (moveable as any)._emitter.off();\n\n        if (isStart && result === false) {\n            nextDatas.isEventStart = false;\n        }\n        return result;\n    };\n\n    // unset ables for first drag start\n    if (isFirstStart) {\n        ables.forEach(able => {\n            able.unset && able.unset(moveable);\n        });\n    }\n    // BeforeRenderable\n    trigger(BeforeRenderable, `drag${eventAffix}${eventType}`);\n\n    let forceEndedCount = 0;\n    let updatedCount = 0;\n\n    eventOperations.forEach(eventOperation => {\n        if (isDragStop) {\n            return false;\n        }\n        const eventName = `${eventOperation}${eventAffix}${eventType}`;\n        const conditionName = `${eventOperation}${eventAffix}Condition`;\n\n        if (eventType === \"\" && !isRequest) {\n            // Convert distX, distY\n            convertDragDist(moveable.state, e);\n        }\n        // const isGroup = eventAffix.indexOf(\"Group\") > -1;\n        let eventAbles: Able[] = ables.filter((able: any) => able[eventName]);\n\n        eventAbles = eventAbles.filter((able, i) => {\n            return able.name && eventAbles.indexOf(able) === i;\n        });\n\n        const results = eventAbles.filter(able => trigger(able, eventName, conditionName));\n        const isUpdate = results.length;\n\n        // end ables\n        if (isDragStop) {\n            ++forceEndedCount;\n        }\n        if (isUpdate) {\n            ++updatedCount;\n        }\n\n        if (!isDragStop && isStart && eventAbles.length && !isUpdate) {\n            forceEndedCount += eventAbles.filter(able => {\n                const ableName = able.name;\n                const nextDatas = datas[ableName];\n\n                if (nextDatas.isEventStart) {\n                    if (able.dragRelation === \"strong\") {\n                        return false;\n                    }\n                    // stop drag\n                    return true;\n                }\n                // pre stop drag\n                return false;\n            }).length ? 1 : 0;\n        }\n    });\n\n\n    if (!isAfter || updatedCount) {\n        trigger(Renderable, `drag${eventAffix}${eventType}`);\n    }\n    // stop gesto condition\n    const isForceEnd = prevGesto !== moveable[gestoType] || forceEndedCount === eventOperations.length;\n\n    if (isEnd || isDragStop || isForceEnd) {\n        moveable.state.gestos = {};\n\n        if ((moveable as MoveableGroupInterface).moveables) {\n            (moveable as MoveableGroupInterface).moveables.forEach(childMoveable => {\n                childMoveable.state.gestos = {};\n            });\n        }\n        ables.forEach(able => {\n            able.unset && able.unset(moveable);\n        });\n    }\n    if (isStart && !isForceEnd && !isRequest && updatedCount && moveable.props.preventDefault) {\n        e?.preventDefault();\n    }\n    if (moveable.isUnmounted || isForceEnd) {\n        return false;\n    }\n    if ((!isStart && updatedCount && !requestInstant) || isEnd) {\n        const flushSync = moveable.props.flushSync || defaultSync;\n\n        flushSync(() => {\n            moveable.updateRect(isEnd ? eventType : \"\", true, false);\n            moveable.forceUpdate();\n        });\n\n    }\n    if (!isStart && !isEnd && !isAfter && updatedCount && !requestInstant) {\n        triggerAble(moveable, moveableAbles, eventOperations, eventAffix, eventType + \"After\", e);\n    }\n    return true;\n}\n\nexport function checkMoveableTarget(moveable: MoveableManagerInterface, isControl?: boolean) {\n    return (e: { inputEvent: Event }, target: EventTarget | null = e.inputEvent.target) => {\n        const eventTarget = target as Element;\n        const areaElement = moveable.areaElement;\n        const dragTargetElement = (moveable as any)._dragTarget;\n\n        if (!dragTargetElement || (!isControl && moveable.controlGesto?.isFlag())) {\n            return false;\n        }\n\n        return eventTarget === dragTargetElement\n            || dragTargetElement.contains(eventTarget)\n            || eventTarget === areaElement\n            || (!moveable.isMoveableElement(eventTarget) && !moveable.controlBox.contains(eventTarget))\n            || hasClass(eventTarget, \"moveable-area\")\n            || hasClass(eventTarget, \"moveable-padding\")\n            || hasClass(eventTarget, \"moveable-edgeDraggable\");\n    };\n}\n\nexport function getTargetAbleGesto(\n    moveable: MoveableManagerInterface,\n    moveableTarget: HTMLElement | SVGElement,\n    eventAffix: string,\n) {\n    const controlBox = moveable.controlBox;\n    const targets: Array<HTMLElement | SVGElement> = [];\n    const props = moveable.props;\n    const dragArea =  props.dragArea;\n    const target = moveable.state.target;\n    const dragTarget = props.dragTarget;\n\n    targets.push(controlBox);\n\n    if (!dragArea || dragTarget) {\n        targets.push(moveableTarget);\n    }\n\n    if (!dragArea && dragTarget && target && moveableTarget !== target && props.dragTargetSelf) {\n        targets.push(target);\n    }\n    const checkTarget = checkMoveableTarget(moveable);\n\n    return getAbleGesto(moveable, targets, \"targetAbles\", eventAffix, {\n        dragStart: checkTarget,\n        pinchStart: checkTarget,\n    });\n}\n\nexport function getControlAbleGesto(\n    moveable: MoveableManagerInterface,\n    eventAffix: string,\n) {\n    const controlBox = moveable.controlBox;\n    const targets: Array<HTMLElement | SVGElement> = [];\n\n    targets.push(controlBox);\n\n    const checkTarget = checkMoveableTarget(moveable, true);\n    const checkControlTarget = (e: any, target: EventTarget | null = e.inputEvent.target) => {\n        if (target === controlBox) {\n            return true;\n        }\n        const result = checkTarget(e, target);\n\n        return !result;\n    };\n\n    return getAbleGesto(moveable, targets, \"controlAbles\", eventAffix, {\n        dragStart: checkControlTarget,\n        pinchStart: checkControlTarget,\n    });\n}\n\nexport function getAbleGesto(\n    moveable: MoveableManagerInterface,\n    target: HTMLElement | SVGElement | Array<HTMLElement | SVGElement>,\n    ableType: string,\n    eventAffix: string,\n    conditionFunctions: IObject<any> = {},\n) {\n    const isTargetAbles = ableType === \"targetAbles\";\n    const {\n        pinchOutside,\n        pinchThreshold,\n        preventClickEventOnDrag,\n        preventClickDefault,\n        checkInput,\n        dragFocusedInput,\n        preventDefault = true,\n        preventRightClick = true,\n        preventWheelClick = true,\n        dragContainer: dragContaienrOption,\n    } = moveable.props;\n    const dragContainer = getRefTarget(dragContaienrOption, true);\n\n    const options: GestoOptions = {\n        preventDefault,\n        preventRightClick,\n        preventWheelClick,\n        container: dragContainer || getWindow(moveable.getControlBoxElement()),\n        pinchThreshold,\n        pinchOutside,\n        preventClickEventOnDrag: isTargetAbles ? preventClickEventOnDrag : false,\n        preventClickEventOnDragStart: isTargetAbles ? preventClickDefault : false,\n        preventClickEventByCondition: isTargetAbles ? null : (e: MouseEvent) => {\n            return moveable.controlBox.contains(e.target as Element);\n        },\n        checkInput: isTargetAbles ? checkInput : false,\n        dragFocusedInput,\n    };\n    const gesto = new Gesto(target!, options);\n    const isControl = eventAffix === \"Control\";\n\n    [\"drag\", \"pinch\"].forEach(eventOperation => {\n        [\"Start\", \"\", \"End\"].forEach(eventType => {\n\n            gesto.on(`${eventOperation}${eventType}` as any, e => {\n                const eventName = e.eventType;\n                const isPinchScheduled = eventOperation === \"drag\" && e.isPinch;\n\n                if (conditionFunctions[eventName] && !conditionFunctions[eventName](e)) {\n                    e.stop();\n                    return;\n                }\n\n                if (isPinchScheduled) {\n                    return;\n                }\n                const eventOperations = eventOperation === \"drag\" ? [eventOperation] : [\"drag\", eventOperation];\n                const moveableAbles: Able[] = [...(moveable as any)[ableType]];\n                const result = triggerAble(moveable, moveableAbles, eventOperations, eventAffix, eventType, e);\n\n                if (!result) {\n                    e.stop();\n                } else if (moveable.props.stopPropagation || (eventType === \"Start\" && isControl)) {\n                    e?.inputEvent?.stopPropagation();\n                }\n            });\n        });\n    });\n\n    return gesto;\n}\n"
  },
  {
    "path": "packages/react-moveable/src/groupUtils.ts",
    "content": "import { Able, MoveableGroupInterface, MoveableManagerInterface, MoveableManagerState } from \"./types\";\nimport CustomGesto, { setCustomDrag } from \"./gesto/CustomGesto\";\nimport { getAbsolutePosesByState } from \"./utils\";\nimport { calculate, createRotateMatrix } from \"@scena/matrix\";\nimport { getPosByDirection } from \"./gesto/GestoUtils\";\n\nexport function fillChildEvents(\n    moveable: MoveableGroupInterface<any, any>,\n    name: string,\n    e: any,\n): any[] {\n    const datas = e.originalDatas;\n\n    datas.groupable = datas.groupable || {};\n\n    const groupableDatas = datas.groupable;\n\n    groupableDatas.childDatas = groupableDatas.childDatas || [];\n\n    const childDatas = groupableDatas.childDatas;\n\n    return moveable.moveables.map((_, i) => {\n        childDatas[i] = childDatas[i] || {};\n        childDatas[i][name] = childDatas[i][name] || {};\n\n        return {\n            ...e,\n            isRequestChild: true,\n            datas: childDatas[i][name],\n            originalDatas: childDatas[i],\n        };\n    });\n}\nexport function triggerChildGesto(\n    moveable: MoveableGroupInterface<any, any>,\n    able: Able,\n    type: string,\n    delta: number[],\n    e: any,\n    isConvert: boolean,\n    ableName: string,\n) {\n    const isStart = !!type.match(/Start$/g);\n    const isEnd = !!type.match(/End$/g);\n    const isPinch = e.isPinch;\n    const datas = e.datas;\n    const events = fillChildEvents(moveable, able.name, e);\n    const moveables = moveable.moveables;\n\n    const childEvents: any[] = [];\n    const eventParams = events.map((ev, i) => {\n        const childMoveable = moveables[i];\n        const state = childMoveable.state as MoveableManagerState<any>;\n        const gestos = state.gestos;\n        let childEvent: any = ev;\n\n        if (isStart) {\n            childEvent = new CustomGesto(ableName).dragStart(delta, ev);\n            childEvents.push(childEvent);\n        } else {\n            if (!gestos[ableName]) {\n                gestos[ableName] = datas.childGestos[i];\n            }\n            if (!gestos[ableName]) {\n                return;\n            }\n            childEvent = setCustomDrag(ev, state, delta, isPinch, isConvert, ableName);\n            childEvents.push(childEvent);\n        }\n        const result = (able as any)[type]!(childMoveable,  { ...childEvent, parentFlag: true });\n\n        if (isEnd) {\n            gestos[ableName] = null;\n        }\n        return result;\n    });\n    if (isStart) {\n        datas.childGestos = moveables.map(child => child.state.gestos[ableName]);\n    }\n    return {\n        eventParams,\n        childEvents,\n    };\n}\nexport function triggerChildAbles<T extends Able>(\n    moveable: MoveableGroupInterface<any, any>,\n    able: T,\n    type: keyof T & string,\n    e: any,\n    eachEvent: (movebale: MoveableManagerInterface<any, any>, ev: any) => any = (_, ev) => ev,\n    callback?: (moveable: MoveableManagerInterface<any, any>, ev: any, result: any, index: number) => any,\n) {\n    const isEnd = !!type.match(/End$/g);\n    const events = fillChildEvents(moveable, able.name, e);\n    const moveables = moveable.moveables;\n    const childs = events.map((ev, i) => {\n        const childMoveable = moveables[i];\n        let childEvent = ev;\n\n        childEvent = eachEvent(childMoveable, ev);\n\n        const result = (able as any)[type]!(childMoveable,  { ...childEvent, parentFlag: true });\n\n        result && callback && callback(childMoveable, ev, result, i);\n\n        if (isEnd) {\n            childMoveable.state.gestos = {};\n        }\n        return result;\n    });\n\n    return childs;\n}\n\n\nexport function startChildDist(\n    moveable: MoveableGroupInterface,\n    child: MoveableManagerInterface,\n    parentDatas: any,\n    childEvent: any,\n) {\n    const fixedDirection = parentDatas.fixedDirection;\n    const fixedPosition = parentDatas.fixedPosition;\n\n    const startPositions = childEvent.datas.startPositions || getAbsolutePosesByState(child.state);\n    const pos = getPosByDirection(startPositions, fixedDirection);\n    const [originalX, originalY] = calculate(\n        createRotateMatrix(-moveable.rotation / 180 * Math.PI, 3),\n        [pos[0] - fixedPosition[0], pos[1] - fixedPosition[1], 1],\n        3,\n    );\n    childEvent.datas.originalX = originalX;\n    childEvent.datas.originalY = originalY;\n\n    return childEvent;\n}\n"
  },
  {
    "path": "packages/react-moveable/src/index.esm.ts",
    "content": "import Moveable from \"./Moveable\";\n\nexport {\n    MOVEABLE_ABLES,\n    MOVEABLE_EVENTS,\n    MOVEABLE_PROPS,\n} from \"./ables/consts\";\nexport {\n    DIRECTIONS,\n    MOVEABLE_METHODS,\n} from \"./consts\";\nexport {\n    makeMoveable,\n} from \"./makeMoveable\";\nexport {\n    InitialMoveable,\n} from \"./InitialMoveable\";\n\nexport {\n    calculateElementPosition,\n} from \"./utils/calculateElementPosition\";\nexport {\n    getElementInfo,\n} from \"./utils/getElementInfo\";\n\nexport {\n    default as Draggable,\n} from \"./ables/Draggable\";\nexport {\n    default as Resizable,\n} from \"./ables/Resizable\";\nexport {\n    default as Scalable,\n} from \"./ables/Scalable\";\nexport {\n    default as Rotatable,\n} from \"./ables/Rotatable\";\nexport {\n    default as Warpable,\n} from \"./ables/Warpable\";\nexport {\n    default as Clippable,\n} from \"./ables/Clippable\";\nexport {\n    default as EdgeDraggable,\n} from \"./ables/edgeDraggable\";\n\nexport {\n    default as Snappable,\n} from \"./ables/Snappable\";\n\nexport {\n    default as Roundable,\n} from \"./ables/Roundable\";\n\nexport {\n    default as Pinchable,\n} from \"./ables/Pinchable\";\nexport {\n    makeAble,\n} from \"./ables/AbleManager\";\nexport default Moveable;\n"
  },
  {
    "path": "packages/react-moveable/src/index.ts",
    "content": "import Moveable from \"./index.esm\";\n\nexport * from \"./types\";\nexport * from \"./index.esm\";\nexport default Moveable;\n"
  },
  {
    "path": "packages/react-moveable/src/index.umd.ts",
    "content": "import Moveable, * as modules from \"./index.esm\";\n\nfor (const name in modules) {\n    (Moveable as any)[name] = (modules as any)[name];\n}\n\nmodule.exports = Moveable;\nexport * from \"./index.esm\";\nexport default Moveable;\n"
  },
  {
    "path": "packages/react-moveable/src/makeMoveable.ts",
    "content": "import { Able } from \"./types\";\nimport { InitialMoveable } from \"./InitialMoveable\";\n\nexport function makeMoveable<T extends Record<string, any> = {}>(\n    ables: Array<Able<T>>,\n): typeof InitialMoveable & (new (...args: any[]) => InitialMoveable<T>) {\n    return class Moveable extends InitialMoveable<T> {\n        public static defaultAbles = ables;\n    };\n}\n"
  },
  {
    "path": "packages/react-moveable/src/renderDirections.tsx",
    "content": "import { prefix, getControlTransform, getLineStyle, getProps, sign } from \"./utils\";\nimport {\n    Renderer, MoveableManagerInterface,\n    RenderDirections,\n} from \"./types\";\nimport { DIRECTION_INDEXES, DIRECTION_ROTATIONS, DIRECTIONS, DIRECTIONS4 } from \"./consts\";\nimport { IObject, throttle, getRad, getKeys } from \"@daybrush/utils\";\nimport { absDegree } from \"./ables/Snappable\";\n\nexport interface DirectionControlInfo {\n    data: Record<string, any>;\n    classNames: string[];\n    dir: string;\n}\n\n\nexport function renderDirectionControlsByInfos(\n    moveable: MoveableManagerInterface<Partial<RenderDirections>>,\n    ableName: string,\n    renderDirections: DirectionControlInfo[],\n    React: Renderer,\n): any[] {\n\n    const {\n        renderPoses,\n        rotation: rotationRad,\n        direction,\n    } = moveable.getState();\n\n    const {\n        zoom,\n    } = getProps(moveable.props, ableName as any);\n\n    const degRotation = absDegree(rotationRad / Math.PI * 180);\n    const directionMap: IObject<boolean> = {};\n    const renderState = moveable.renderState;\n    if (!renderState.renderDirectionMap) {\n        renderState.renderDirectionMap = {};\n    }\n    const renderDirectionMap = renderState.renderDirectionMap;\n\n    renderDirections.forEach(({ dir }) => {\n        directionMap[dir] = true;\n    });\n\n    const directionSign = sign(direction);\n    return renderDirections.map(({ data, classNames, dir }) => {\n        const indexes = DIRECTION_INDEXES[dir];\n\n        if (!indexes || !directionMap[dir]) {\n            return null;\n        }\n        renderDirectionMap[dir] = true;\n        const directionRotation = (throttle(degRotation, 15) + directionSign * DIRECTION_ROTATIONS[dir] + 720) % 180;\n\n        const dataAttrs: Record<string, string> = {};\n\n        getKeys(data).forEach(name => {\n            dataAttrs[`data-${name}`] = data[name];\n        });\n        return (\n            <div className={prefix(\"control\", \"direction\", dir, ableName, ...classNames)}\n                data-rotation={directionRotation}\n                data-direction={dir}\n                {...dataAttrs}\n                key={`direction-${dir}`}\n                style={getControlTransform(rotationRad, zoom!, ...indexes.map(index => renderPoses[index]))}></div>\n        );\n    });\n}\nexport function renderDirectionControls(\n    moveable: MoveableManagerInterface<Partial<RenderDirections>>,\n    defaultDirections: string[],\n    ableName: string,\n    React: Renderer,\n): any[] {\n    const {\n        renderDirections: directions = defaultDirections,\n        displayAroundControls,\n    } = getProps(moveable.props, ableName as any);\n\n    if (!directions) {\n        return [];\n    }\n    const renderDirections = directions === true ? DIRECTIONS : directions;\n\n    return [\n        ...(displayAroundControls ? renderAroundControls(moveable, React, ableName, renderDirections) : []),\n        ...renderDirectionControlsByInfos(\n            moveable,\n            ableName,\n            renderDirections.map(dir => {\n                return {\n                    data: {},\n                    classNames: [],\n                    dir,\n                };\n            }),\n            React,\n        ),\n    ];\n}\n\nexport function renderLine(\n    React: Renderer,\n    direction: string,\n    pos1: number[],\n    pos2: number[],\n    zoom: number,\n    key: number | string,\n    ...classNames: string[]\n): any {\n    const rad = getRad(pos1, pos2);\n    const rotation = direction ? (throttle(rad / Math.PI * 180, 15)) % 180 : -1;\n\n    return <div key={`line-${key}`}\n        className={prefix(\"line\", \"direction\", direction ? \"edge\" : \"\", direction, ...classNames)}\n        data-rotation={rotation}\n        data-line-key={key}\n        data-direction={direction} style={getLineStyle(pos1, pos2, zoom, rad)}></div>;\n}\n\nexport function renderEdgeLines(\n    React: Renderer,\n    ableName: string,\n    edge: true | string[],\n    poses: number[][],\n    zoom: number,\n): any[] {\n    const directions = edge === true ? DIRECTIONS4 : edge;\n\n    return directions.map((direction, i) => {\n        const [index1, index2] = DIRECTION_INDEXES[direction];\n\n        if (index2 == null) {\n            return;\n        }\n        return renderLine(React, direction, poses[index1], poses[index2], zoom, `${ableName}Edge${i}`, ableName);\n    }).filter(Boolean);\n}\n\nexport function getRenderDirections(ableName: string) {\n    return (\n        moveable: MoveableManagerInterface<Partial<RenderDirections>>,\n        React: Renderer,\n    ) => {\n        const edge = getProps(moveable.props, ableName as any).edge;\n\n        if (edge && (edge === true || edge.length)) {\n            return [\n                ...renderEdgeLines(\n                    React,\n                    ableName,\n                    edge,\n                    moveable.getState().renderPoses,\n                    moveable.props.zoom!,\n                ),\n                ...renderDiagonalDirections(moveable, ableName, React),\n            ];\n        }\n        return renderAllDirections(moveable, ableName, React);\n    };\n}\n\nexport function renderAllDirections(\n    moveable: MoveableManagerInterface<Partial<RenderDirections>>,\n    ableName: string,\n    React: Renderer,\n) {\n    return renderDirectionControls(moveable, DIRECTIONS, ableName, React);\n}\n\nexport function renderDiagonalDirections(\n    moveable: MoveableManagerInterface<Partial<RenderDirections>>,\n    ableName: string,\n    React: Renderer,\n): any[] {\n    return renderDirectionControls(moveable, [\"nw\", \"ne\", \"sw\", \"se\"], ableName, React);\n}\n\nexport function renderAroundControls(\n    moveable: MoveableManagerInterface<Partial<RenderDirections>>,\n    React: Renderer,\n    ableName?: string,\n    renderDirections?: string[],\n): any[] {\n    const renderState = moveable.renderState;\n    if (!renderState.renderDirectionMap) {\n        renderState.renderDirectionMap = {};\n    }\n    const {\n        renderPoses,\n        rotation: rotationRad,\n        direction,\n    } = moveable.getState();\n\n    const renderDirectionMap = renderState.renderDirectionMap;\n\n    const {\n        zoom,\n    } = moveable.props;\n    const directionSign = sign(direction);\n    const degRotation = rotationRad / Math.PI * 180;\n\n    return (renderDirections || getKeys(renderDirectionMap)).map(dir => {\n        const indexes = DIRECTION_INDEXES[dir];\n\n        if (!indexes) {\n            return null;\n        }\n        const directionRotation = (throttle(degRotation, 15) + directionSign * DIRECTION_ROTATIONS[dir] + 720) % 180;\n\n        const classNames: string[] = [\"around-control\"];\n\n        if (ableName) {\n            classNames.push(\"direction\", ableName);\n        }\n        return (\n            <div\n                className={prefix(...classNames)}\n                data-rotation={directionRotation} data-direction={dir} key={`direction-around-${dir}`}\n                style={getControlTransform(rotationRad, zoom!, ...indexes.map(index => renderPoses[index]))}></div>\n        );\n    });\n}\n"
  },
  {
    "path": "packages/react-moveable/src/store/Store.ts",
    "content": "import { find, getWindow } from \"@daybrush/utils\";\nimport { getClientRect } from \"../utils\";\nimport { MoveableClientRect } from \"../types\";\nimport { getMatrixStackInfo, MatrixStackInfo } from \"../utils/getMatrixStackInfo\";\n\nlet cacheStyleMap: Map<Element, {\n    style: CSSStyleDeclaration;\n    cached: Record<string, any>;\n}> | null = null;\nlet clientRectStyleMap: Map<Element, MoveableClientRect> | null = null;\n\nlet matrixContainerInfos: Array<[\n    [SVGElement | HTMLElement, SVGElement | HTMLElement | null | undefined],\n    MatrixStackInfo\n]> | null = null;\n\nexport type GetStyle = (propertyName: string) => any;\nexport function setStoreCache(useCache?: boolean) {\n    if (useCache) {\n        if (window.Map) {\n            cacheStyleMap = new Map();\n            clientRectStyleMap = new Map();\n        }\n        matrixContainerInfos = [];\n    } else {\n        cacheStyleMap = null;\n        matrixContainerInfos = null;\n        clientRectStyleMap = null;\n    }\n}\n\nexport function getCachedClientRect(el: HTMLElement | SVGElement): MoveableClientRect {\n    const clientRect = clientRectStyleMap?.get(el);\n\n    if (clientRect) {\n        return clientRect;\n    }\n    const nextClientRect = getClientRect(el, true);\n\n    if (clientRectStyleMap) {\n        clientRectStyleMap.set(el, nextClientRect);\n    }\n    return nextClientRect;\n}\n\nexport function getCachedMatrixContainerInfo(\n    target: SVGElement | HTMLElement,\n    container?: SVGElement | HTMLElement | null,\n) {\n    if (matrixContainerInfos) {\n        const result = find(matrixContainerInfos, info => info[0][0] == target && info[0][1] == container);\n\n        if (result) {\n            return result[1];\n        }\n    }\n    const result = getMatrixStackInfo(target, container, true);\n\n    if (matrixContainerInfos) {\n        matrixContainerInfos.push([[target, container], result]);\n    }\n    return result;\n}\nexport function getCachedStyle(element: Element): GetStyle {\n    let cache = cacheStyleMap?.get(element);\n\n    if (!cache) {\n        const nextStyle = getWindow(element).getComputedStyle(element);\n\n        if (!cacheStyleMap) {\n            return (property: string) => {\n                return (nextStyle as any)[property];\n            };\n        }\n        cache = {\n            style: nextStyle,\n            cached: {},\n        };\n        cacheStyleMap.set(element, cache);\n    }\n    const cached = cache.cached;\n    const style = cache.style;\n\n    return (property: string) => {\n        if (!(property in cached)) {\n            cached[property] = (style as any)[property];\n        }\n        return cached[property];\n    };\n}\n"
  },
  {
    "path": "packages/react-moveable/src/types.ts",
    "content": "import { IObject } from \"@daybrush/utils\";\nimport Gesto, * as GestoTypes from \"gesto\";\nimport CustomGesto from \"./gesto/CustomGesto\";\nimport { MoveableTargetInfo } from \"./utils/getMoveableTargetInfo\";\nimport { DragScrollOptions } from \"@scena/dragscroll\";\nimport { MOVEABLE_PROPS, MOVEABLE_EVENTS } from \"./ables/consts\";\n\nexport interface MoveableClientRect {\n    left: number;\n    top: number;\n    right: number;\n    bottom: number;\n    width: number;\n    height: number;\n    clientLeft?: number;\n    clientTop?: number;\n    clientWidth?: number;\n    clientHeight?: number;\n    scrollWidth?: number;\n    scrollHeight?: number;\n    overflow?: boolean;\n}\nexport type MoveableManagerProps<T = {}> = {\n    cssStyled: any;\n    customStyledMap: Record<string, any>;\n    wrapperMoveable?: MoveableManagerInterface | null;\n    isWrapperMounted?: boolean;\n    parentMoveable?: MoveableManagerInterface | null;\n    parentPosition?: number[] | null;\n    groupable?: boolean;\n} & MoveableDefaultOptions & (unknown extends T ? IObject<any> : T);\n\nexport type AnyObject<T> = (unknown extends T ? IObject<any> : T);\n\n/**\n * @typedef\n * @memberof Moveable\n */\nexport interface MoveablePosition {\n    left: number;\n    top: number;\n    right: number;\n    bottom: number;\n    origin: number[];\n    pos1: number[];\n    pos2: number[];\n    pos3: number[];\n    pos4: number[];\n    direction: 1 | -1;\n}\n\n/**\n * @typedef\n * @memberof Moveable\n * @options\n */\nexport interface DefaultOptions {\n    /**\n     * The target(s) to indicate Moveable Control Box.\n     * @default null\n     */\n    target?: SVGElement | HTMLElement | null;\n    /**\n     * The external target(s) to drag Moveable target(s)\n     * @default target\n     */\n    dragTarget?: MoveableRefType | null;\n    /**\n     * If dragTarget is set directly, taget itself cannot be dragged.\n     * Whether to drag the target as well.\n     * @default false\n     */\n    dragTargetSelf?: boolean;\n    /**\n     * Container area where drag works\n     * @default window\n     */\n    dragContainer?: null | Window | MoveableRefType<HTMLElement>;\n    /**\n     * A container into which Moveables are inserted.\n     * Set it only when used within the slot of Web Components or when the container is different.\n     * @default parentElement\n     */\n    container?: SVGElement | HTMLElement | null;\n    /**\n     * Whether to warp itself to the container itself. Don't set it.\n     * @private\n     * @default false\n     */\n    warpSelf?: boolean;\n    /**\n     * Moveable Root Container (No Transformed Container)\n     * @default parentElement\n     * @story options--options-root-container\n     */\n    rootContainer?: MoveableRefType<HTMLElement>;\n    /**\n     * If you want to set the dragging information to the viewer, refer to the following.\n     * @default null\n     * @story options--options-view-container\n     */\n    viewContainer?: MoveableRefType<HTMLElement>;\n    /**\n     * Whether the target size is detected and updated whenever it changes.\n     * It is more effective when used together with `useMutationObserver`.\n     * @default false\n     * @story options--options-resize-observer\n     */\n    useResizeObserver?: boolean;\n    /**\n     * Whether the target size, pos in inline style is detected and updated whenever it changes.\n     * It is more effective when used together with `useResizeObserver`.\n     * @default false\n     * @story options--options-mutation-observer\n     */\n    useMutationObserver?: boolean;\n    /**\n     * Zooms in the elements of a moveable.\n     * @default 1\n     */\n    zoom?: number;\n    /**\n     * The default transformOrigin of the target can be set in advance.\n     * @default \"\"\n     */\n    transformOrigin?: Array<string | number> | string | \"\";\n    /**\n     * You can add your custom able.\n     * @default []\n     */\n    ables?: Able[];\n    /**\n     * You can specify the className of the moveable controlbox.\n     * @default \"\"\n     */\n    className?: string;\n    /**\n     * Minimum distance to pinch.\n     * @default 20\n     */\n    pinchThreshold?: number;\n    /**\n     * Whether the container containing the target becomes a pinch.\n     * @default true\n     */\n    pinchOutside?: boolean;\n    /**\n     * Lets generate events of ables at the same time. (like Resizable, Scalable)\n     * @default false\n     */\n    triggerAblesSimultaneously?: boolean;\n    /**\n     * Checks whether this is an element to input text or contentEditable, and prevents dragging.\n     * @default false\n     */\n    checkInput?: boolean;\n    /**\n     * add nonce property to style for CSP.\n     * @deprecated\n     * @default \"\"\n     */\n    cspNonce?: string;\n    /**\n     * You can set the translateZ value of moveable.\n     * @default 50\n     */\n    translateZ?: number | string;\n    /**\n     * Whether to hide the line corresponding to the rect of the target.\n     * @default false\n     */\n    hideDefaultLines?: boolean;\n    /**\n     * Whether to prevent bubbling of events like mousedown, touchstart, etc.\n     * @default false\n     */\n    stopPropagation?: boolean;\n    /**\n     * Whether to call preventDefault on touchstart or mousedown\n     * @since 0.44.0\n     * @default true\n     */\n    preventDefault?: boolean;\n    /**\n     * Whether to prevent dragging using the right mouse button\n     * @default true\n     */\n    preventRightClick?: boolean;\n    /**\n     * Whether to prevent dragging using the wheel (middle) mouse button\n     * @default true\n     */\n    preventWheelClick?: boolean;\n    /**\n     * Prevent click event on drag. (mousemove, touchmove)\n     * @default true\n     */\n    preventClickEventOnDrag?: boolean;\n    /**\n     * Whether to drag the focused input\n     * If `checkInput` is true, this option is not applied.\n     * @since 0.47.0\n     * @story options--options-drag-focused-input\n     * @default false\n     */\n    dragFocusedInput?: boolean;\n    /**\n     * Prevent click event on dragStart. (mousedown, touchstart)\n     * @default false\n     */\n    preventClickDefault?: boolean;\n    /**\n     * You can use props in object format or custom props.\n     * @default empty object\n     */\n    props?: Record<string, any>;\n    /**\n     * Data for first render\n     * @default null\n     */\n    persistData?: PersistRectData | null;\n    /**\n     * Whether to accurately show the position of a movable control box\n     * Because getBoundingClientRect is used, css zoom, transform: rotate between container and rootContainer cannot be used.\n     * group is not supported.\n     * @default false\n     */\n    useAccuratePosition?: boolean;\n    /**\n     * By adding padding to the line, you can increase the area of the line that can be clicked and dragged.\n     * @since 0.43.0\n     * @story options--options-line-padding\n     * @default 0\n     */\n    linePadding?: number;\n    /**\n     * By adding padding to the control, you can increase the area of the control that can be clicked and dragged.\n     * Either `rotateAroundControls` or `displayAroundControls` can be used.\n     * @since 0.44.0\n     * @story options--options-control-padding\n     * @default 0\n     */\n    controlPadding?: number;\n    /**\n     * @private\n     * single => group로 변환과정에 도형 유지를 위한 첫 렌더링 state\n     */\n    firstRenderState?: MoveableManagerState | null;\n    /**\n     * @private\n     */\n    requestStyles?: string[];\n    /**\n     * If you are using React 18's concurrent mode, use `flushSync` for UI sync.\n     * @default empty function\n     * @example\n     * ```jsx\n     * import { flushSync } from \"react-dom\";\n     *\n     * <Moveable flushSync={flushSync} />\n     * ```\n     */\n    flushSync?: (callback: () => void) => void;\n}\n/**\n * @typedef\n * @extends Moveable.DefaultOptions\n * @extends Moveable.DragAreaOptions\n * @extends Moveable.OriginOptions\n * @extends Moveable.PaddingOptions\n */\nexport interface MoveableDefaultOptions\n    extends DefaultOptions, DragAreaOptions, OriginOptions, PaddingOptions {\n}\nexport interface MatrixInfo {\n    type: \"offset\" | \"target\" | \"zoom\";\n    target: SVGElement | HTMLElement;\n    matrix?: number[];\n    origin?: number[];\n    zoom?: number;\n}\nexport type MoveableManagerState<T = {}> = {\n    container: SVGElement | HTMLElement | null | undefined;\n    disableNativeEvent: boolean;\n    gestos: Record<string, Gesto | CustomGesto | null>;\n    renderLines: number[][][];\n    renderPoses: number[][];\n    posDelta: number[];\n    style: Partial<Writable<CSSStyleDeclaration>>;\n    isPersisted?: boolean;\n} & MoveableTargetInfo & T;\n\n/**\n * @typedef\n * @memberof Moveable\n */\nexport interface ElementSizes {\n    svg: boolean;\n    offsetWidth: number;\n    offsetHeight: number;\n    clientWidth: number;\n    clientHeight: number;\n    inlineCSSWidth: number;\n    inlineCSSHeight: number;\n    cssWidth: number;\n    cssHeight: number;\n    contentWidth: number;\n    contentHeight: number;\n    minWidth: number;\n    minHeight: number;\n    maxWidth: number;\n    maxHeight: number;\n    minOffsetWidth: number;\n    minOffsetHeight: number;\n    maxOffsetWidth: number;\n    maxOffsetHeight: number;\n}\n\n/**\n * @typedef\n * @memberof Moveable\n */\nexport type LineDirection = \"n\" | \"e\" | \"s\" | \"w\" | \"nw\" | \"ne\" | \"sw\" | \"se\";\n\n/**\n * @typedef\n * @memberof Moveable\n * @property - left padding\n * @property - top padding\n * @property - right padding\n * @property - bottom padding\n */\nexport interface PaddingBox {\n    left?: number;\n    top?: number;\n    right?: number;\n    bottom?: number;\n}\n\nexport interface Renderer {\n    createElement(type: any, props?: any, ...children: any[]): any;\n}\n\n/**\n * @typedef\n * @memberof Moveable.Snappable\n */\nexport interface SnapGuideline {\n    type: \"horizontal\" | \"vertical\";\n    direction: string;\n    hide?: boolean;\n    element?: Element | null;\n\n    isStart?: boolean;\n    isEnd?: boolean;\n    isCenter?: boolean;\n    isInner?: boolean;\n    grid?: boolean;\n\n    pos: number[];\n    size: number;\n    className?: string;\n    sizes?: number[];\n\n    gap?: number;\n    elementDirection?: string;\n    elementRect?: SnapElementRect;\n    gapRects?: SnapElementRect[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Snappable\n */\nexport interface SnapElementGuideline extends SnapGuideline {\n\n}\n\nexport interface SnapBoundInfo {\n    isBound: boolean;\n    isSnap: boolean;\n    offset: number;\n    dist: number;\n    snapIndex?: number;\n    bounds?: BoundInfo[];\n    snap?: SnapInfo;\n}\nexport interface BoundInfo {\n    direction?: \"start\" | \"end\";\n    isBound: boolean;\n    offset: number;\n    pos: number;\n}\nexport interface SnapOffsetInfo {\n    isSnap: boolean;\n    offset: number;\n    pos: number;\n}\nexport interface SnapDirectionInfo extends SnapInfo {\n    direction: string;\n}\nexport interface SnapInfo {\n    isSnap: boolean;\n    index: number;\n    direction: string;\n    posInfos: SnapPosInfo[];\n}\nexport interface SnapPosInfo {\n    pos: number;\n    index: number;\n    direction: string;\n    guidelineInfos: SnapGuidelineInfo[];\n}\nexport interface SnapGuidelineInfo {\n    dist: number;\n    offset: number;\n    direction: string;\n    guideline: SnapGuideline;\n}\n\n/**\n * @typedef\n * @memberof Moveable.Snappable\n */\nexport interface RenderGuidelineInfo {\n    key?: string;\n    direction: string;\n    classNames: string[];\n    size: string;\n    pos: string[];\n    sizeValue: number;\n    posValue: number[];\n    zoom: number;\n}\nexport interface RenderGuidelineInnerInfo {\n    key?: string;\n    direction: string;\n    classNames: Array<string | undefined>;\n    size?: string;\n    pos?: string[];\n    sizeValue: number;\n    posValue: number[];\n    zoom: number;\n}\nexport type ExcludeKeys<T extends IObject<any>, U> = Pick<T, Exclude<keyof T, U>>;\n\nexport interface MoveableProps extends\n    MoveableDefaultProps,\n    DraggableProps,\n    DragAreaProps,\n    OriginDraggableProps,\n    RotatableProps,\n    ResizableProps,\n    ScalableProps,\n    WarpableProps,\n    PinchableProps,\n    ExcludeKeys<GroupableProps, \"targets\" | \"updateGroup\">,\n    IndividualGroupableProps,\n    SnappableProps,\n    ScrollableProps,\n    ClippableProps,\n    RoundableProps,\n    BeforeRenderableProps,\n    ClickableProps,\n    RenderableProps {\n}\n/**\n * @memberof Moveable\n * @typedef\n */\nexport interface MoveableDefaultEvents {\n    onChangeTargets?: (e: OnChangeTargets) => void;\n}\n\nexport interface MoveableInitalOptions extends ExcludeKeys<MoveableDefaultOptions, \"target\"> {\n    target?: MoveableRefTargetType;\n}\n\n/**\n * @memberof Moveable\n * @typedef\n * @extends Moveable.MoveableDefaultOptions\n * @extends Moveable.MoveableDefaultEvents\n */\nexport interface MoveableDefaultProps extends MoveableInitalOptions, MoveableDefaultEvents {\n\n}\n/**\n * @memberof Moveable\n * @typedef\n */\nexport type MoveableRefTargetType = MoveableRefType | ArrayFormat<MoveableRefTargetType>;\n\nexport type MoveableRefTargetsResultType\n    = Array<HTMLElement | SVGElement | string | null | MoveableRefTargetsResultType>;\n\n/**\n * @memberof Moveable\n * @typedef\n */\nexport type MoveableRefType<T extends Element = HTMLElement | SVGElement>\n    = string | (() => T) | MoveableRefObject<T> | T | null | undefined;\n/**\n * @memberof Moveable\n * @typedef\n */\nexport interface MoveableRefObject<T extends Element = HTMLElement | SVGElement> {\n    current: T | undefined | null;\n}\n/**\n * @memberof Moveable\n * @typedef\n * @extends Moveable.MoveableDefaultProps\n * @extends Moveable.Draggable.DraggableOptions\n * @extends Moveable.Resizable.ResizableOptions\n * @extends Moveable.Scalable.ScalableOptions\n * @extends Moveable.Rotatable.RotatableOptions\n * @extends Moveable.Warpable.WarpableOptions\n * @extends Moveable.Pinchable.PinchableOptions\n * @extends Moveable.Group.GroupableOptions\n * @extends Moveable.OriginDraggable.OriginDraggableOptions\n * @extends Moveable.Scrollable.ScrollableOptions\n * @extends Moveable.Clippable.ClippableOptions\n * @extends Moveable.Roundable.RoundableOptions\n * @extends Moveable.Clickable.ClickableOptions\n */\nexport interface MoveableOptions extends\n    MoveableInitalOptions,\n    DraggableOptions,\n    DragAreaOptions,\n    OriginDraggableOptions,\n    RotatableOptions,\n    ResizableOptions,\n    ScalableOptions,\n    WarpableOptions,\n    PinchableOptions,\n    GroupableOptions,\n    IndividualGroupableOptions,\n    SnappableOptions,\n    ScrollableOptions,\n    ClippableOptions,\n    RoundableOptions,\n    ClickableOptions {\n}\n\nexport type MoveableState = MoveableManagerState;\n\n/**\n * You can make Able that can work in Moveable.\n * @typedef\n * In Able, you can manage drag events, props, state, fire event props, and render elements.\n * @memberof Moveable\n */\nexport interface Able<\n    Props extends IObject<any> = IObject<any>,\n    Events extends IObject<any> = IObject<any>\n> {\n    name: string;\n    props?: readonly (keyof Props)[];\n    events?: readonly (keyof Events)[];\n    // Whether to always include in able. It is recommended to use always in frameworks other than react\n    always?: boolean;\n    ableGroup?: string;\n    updateRect?: boolean;\n    canPinch?: boolean;\n    css?: string[];\n    /**\n     * You can request style. Specify the name of the style in camel case.\n     * You can check it with `moveable.state.style`\n     * @exmaple\n     * [\"borderRadius\", \"top\", \"left\"]\n     */\n    requestStyle?(): string[];\n    /**\n     * If you use group, you can request child style. Specify the name of the style in camel case.\n     * You can check it with `moveable.state.style`\n     * @exmaple\n     * [\"borderRadius\", \"top\", \"left\"]\n     */\n    requestChildStyle?(): string[];\n    /**\n     * You can specify the class name to be added to the Moveable control box.\n     */\n    className?(moveable: any): string;\n    /**\n     * You can specify the class name to be added to the Moveable View Container\n     */\n    viewClassName?(moveable: any): string;\n    /**\n     * Check how related to drag\n     */\n    dragRelation?: \"strong\" | \"weak\" | undefined | null | false,\n    /**\n     * Fired when the event is cleared\n     */\n    unset?(moveable: any): any;\n    /**\n     * Renders the React DOM structure for the able.\n     */\n    render?(moveable: any, renderer: Renderer): any;\n\n    // Operates when a drag event occurs for the single target.\n    dragStart?(moveable: any, e: any): any;\n    drag?(moveable: any, e: any): any;\n    dragEnd?(moveable: any, e: any): any;\n    dragAfter?(moveable: any, e: any): any;\n\n    // Operates when a pinch event occurs for the single target.\n    pinchStart?(moveable: any, e: GestoTypes.OnPinchStart): any;\n    pinch?(moveable: any, e: GestoTypes.OnPinch): any;\n    pinchEnd?(moveable: any, e: GestoTypes.OnPinchEnd): any;\n\n    // Condition that occurs dragControl\n    dragControlCondition?(moveable: any, e: any): boolean;\n    // Operates when a drag event occurs for the moveable control and single target.\n    dragControlStart?(moveable: any, e: any): any;\n    dragControl?(moveable: any, e: any): any;\n    dragControlEnd?(moveable: any, e: any): any;\n    dragControlAfter?(moveable: any, e: any): any;\n\n    // Condition that occurs dragGroup\n    dragGroupCondition?(moveable: any, e: any): boolean;\n    // Operates when a drag event occurs for the multi target.\n    dragGroupStart?(moveable: any, e: any): any;\n    dragGroup?(moveable: any, e: any): any;\n    dragGroupEnd?(moveable: any, e: any): any;\n\n    // Operates when a pinch event occurs for the multi target.\n    pinchGroupStart?(moveable: any, e: GestoTypes.OnPinchStart): any;\n    pinchGroup?(moveable: any, e: GestoTypes.OnPinch): any;\n    pinchGroupEnd?(moveable: any, e: GestoTypes.OnPinchEnd): any;\n\n    // Condition that occurs dragGroupControl\n    dragGroupControlCondition?(moveable: any, e: any): boolean;\n\n    // Operates when a drag event occurs for the moveable control and multi target.\n    dragGroupControlStart?(moveable: any, e: any): any;\n    dragGroupControl?(moveable: any, e: any): any;\n    dragGroupControlEnd?(moveable: any, e: any): any;\n\n    // mouse enter event\n    mouseEnter?(moveable: any, e: any): any;\n    // mouse leave event\n    mouseLeave?(moveable: any, e: any): any;\n\n    // mouse enter event for group\n    mouseGroupEnter?(moveable: any, e: any): any;\n    // mouse leave event for group\n    mouseGroupLeave?(moveable: any, e: any): any;\n\n\n    // Execute the operation of able for external request\n    request?(moveable: any): AbleRequester;\n}\n\n/**\n * @typedef\n * @memberof Moveable\n */\nexport interface OnEvent {\n    /**\n     * The Moveable instance\n     */\n    currentTarget: MoveableManagerInterface<Record<string, any>, Record<string, any>>;\n    /**\n     * The Moveable instance\n     */\n    moveable: MoveableManagerInterface<Record<string, any>, Record<string, any>>;\n    /**\n     * The Moveable's target\n     */\n    target: HTMLElement | SVGElement;\n    /**\n     * The horizontal coordinate within the application's client area at which the event occurred.\n     */\n    clientX: number;\n    /**\n     * The vertical coordinate within the application's client area at which the event occurred.\n     */\n    clientY: number;\n    /**\n     * Whether this is the first drag in the drag event\n     */\n    isFirstDrag: number;\n    /**\n     * Objects that can send information to the following events.\n     */\n    datas: IObject<any>;\n    /**\n     * The mouse or touch input event that is invoking the moveable event\n     */\n    inputEvent: any;\n    /**\n     * Stop the currently working able.\n     */\n    stopAble(): void;\n    /**\n     * Calling `stopDrag` in a drag-related event ends the drag.\n     */\n    stopDrag(): void;\n    /**\n     * Whether the event did not occur externally\n     */\n    isTrusted: boolean;\n\n}\n/**\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnEvent\n * @property - This is the last dragged event. No, if you haven't dragged.\n * @property - Whether this moved\n * @property - Whether it is double-click\n */\nexport interface OnEndEvent extends OnEvent {\n    lastEvent: any | undefined;\n    isDrag: boolean;\n    isDouble: boolean;\n}\n/**\n * @typedef\n * @memberof Moveable\n */\nexport interface OnTransformStartEvent {\n    /**\n     * Set your original transform.\n     * `transformIndex` is the sequence of functions used in the event.\n     * If you use `setTransform`, you don't need to use `set` function.\n     * @default transform of target's inline style\n     */\n    setTransform(transform: string | string[], transformIndex?: number): void;\n    /**\n     * `transformIndex` is the sequence of functions used in the event.\n     * @default index with that property in transform or last\n     */\n    setTransformIndex(transformIndex: number): void;\n}\n/**\n * @typedef\n * @memberof Moveable\n * @extends Moveable.CSSObject\n */\nexport interface TransformObject extends CSSObject {\n    /**\n     * a target's next transform string value.\n     */\n    transform: string;\n    /**\n     * A transform obtained by the simultaneous occurrence of other events in the current event\n     */\n    afterTransform: string;\n}\n/**\n * @typedef\n * @memberof Moveable\n * @extends Moveable.TransformObject\n */\nexport interface OnTransformEvent extends TransformObject {\n    /**\n     * transform events causes a `drag` event. In some events, there may be no value.\n     */\n    drag: OnDrag;\n}\n/**\n * @typedef\n * @memberof Moveable\n */\nexport interface AbleRequestParam {\n    /**\n     * Run the request instantly. (requestStart, request, requestEnd happen at the same time)\n     */\n    isInstant?: boolean;\n    [key: string]: any;\n}\n/**\n * @typedef\n * @memberof Moveable\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.html#request|Request Method}\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Draggable.html#request|Draggable Requester}\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Resizable.html#request|Resizable Requester}\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Scalable.html#request|Scalable Requester}\n * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Rotatable.html#request|Rotatable Requester}\n * @property - Continue executing the request.\n * @property - End the request.\n */\nexport interface Requester<RequestParam extends {} = AbleRequestParam> {\n    request(param: RequestParam): this;\n    requestEnd(): this;\n}\n\nexport interface AbleRequester {\n    isControl: boolean;\n    requestStart(param: IObject<any>): IObject<any>;\n    request(param: IObject<any>): IObject<any>;\n    requestEnd(): IObject<any>;\n}\n\n\n/**\n * @typedef\n * @memberof Moveable\n */\nexport interface OnChangeTargets {\n    /**\n     * The Moveable instance\n     */\n    moveable: MoveableManagerInterface<any, any>;\n    /**\n     * The Moveable's targets\n     */\n    targets: Array<HTMLElement | SVGElement>;\n}\n\n\n\n/**\n * @typedef\n * @memberof Moveable.Pinchable\n * @extends Moveable.OnEvent\n */\nexport interface OnPinchStart extends OnEvent {\n}\n/**\n * @typedef\n * @memberof Moveable.Pinchable\n * @extends Moveable.OnEvent\n */\nexport interface OnPinch extends OnEvent {\n}\n/**\n * @typedef\n * @memberof Moveable.Pinchable\n * @extends Moveable.OnEndEvent\n */\nexport interface OnPinchEnd extends OnEndEvent { }\n/**\n * When the drag starts, the dragStart event is called.\n * @typedef\n * @memberof Moveable.Draggable\n * @extends Moveable.OnEvent\n * @extends Moveable.OnTransformStartEvent\n */\nexport interface OnDragStart extends OnEvent, OnTransformStartEvent {\n    /**\n     * You can set the start translate value.\n     */\n    set: (translate: number[]) => void;\n}\n/**\n * @typedef\n * @memberof Moveable.Draggable\n * @extends Moveable.OnEvent\n * @extends Moveable.CSSObject\n * @property - The delta of [left, top]\n * @property - The distance of [left, top]\n * @property - The position of [left, top]\n * @property - The delta of [translateX, translateY]\n * @property - The distance of [translateX, translateY]\n * @property - The position of [translateX, translateY]\n * @property - a target's transform\n * @property - a target's left\n * @property - a target's top\n * @property - a target's bottom\n * @property - a target's offset width\n * @property - a target's offset height\n * @property - a target's right\n * @property - Whether or not it is being pinched.\n */\nexport interface OnDrag extends OnEvent, CSSObject {\n    beforeDelta: number[];\n    beforeDist: number[];\n    beforeTranslate: number[];\n    delta: number[];\n    dist: number[];\n    translate: number[];\n    transform: string;\n    left: number;\n    top: number;\n    bottom: number;\n    width: number;\n    height: number;\n    right: number;\n    isPinch: boolean;\n}\n/**\n * @typedef\n * @memberof Moveable.Draggable\n * @extends Moveable.OnEndEvent\n */\nexport interface OnDragEnd extends OnEndEvent {\n}\n\n/**\n * @typedef\n * @memberof Moveable.OriginDraggable\n * @extends Moveable.OnEvent\n * @property - dragOrigin causes a `dragStart` event.\n */\nexport interface OnDragOriginStart extends OnEvent {\n    dragStart: OnDragStart | false;\n}\n\n/**\n * @typedef\n * @memberof Moveable.OriginDraggable\n * @extends Moveable.OnEvent\n * @extends Moveable.CSSObject\n */\nexport interface OnDragOrigin extends OnEvent, CSSObject {\n    /**\n     * Offset width of target\n     */\n    width: number;\n    /**\n     * Offset height of target\n     */\n    height: number;\n    /**\n     * The delta of [x, y]\n     */\n    delta: number[];\n    /**\n     * The distance of [x, y]\n     */\n    dist: number[];\n    /**\n     * The target's moved transform-origin poses\n     */\n    origin: number[];\n    /**\n     * The target's moved transform-origin css\n     */\n    transformOrigin: string;\n    /**\n     * A transform obtained by the simultaneous occurrence of other events in the current event\n     */\n    afterTransform: string;\n    /**\n     * `dragOrigin` causes a `drag` event.\n     */\n    drag: OnDrag;\n\n}\n/**\n * @typedef\n * @memberof Moveable.OriginDraggable\n * @extends Moveable.OnEndEvent\n */\nexport interface OnDragOriginEnd extends OnEndEvent {\n}\n\n/**\n * @typedef\n * @memberof Moveable.Roundable\n * @extends Moveable.OnEvent\n */\nexport interface OnRoundStart extends OnEvent { }\n\n/**\n * @typedef\n * @memberof Moveable.Roundable\n * @extends Moveable.OnEvent\n * @extends Moveable.CSSObject\n * @property - Offset width of target\n * @property - Offset height of target\n * @property - The delta of [x, y]\n * @property - The distance of [x, y]\n * @property - The target's moved border-radius's horizontal poses\n * @property - The target's moved border-radius's vertical poses\n * @property - The target's moved border-radius\n */\nexport interface OnRound extends OnEvent, CSSObject {\n    width: number;\n    height: number;\n    delta: number[];\n    dist: number[];\n    horizontals: number[];\n    verticals: number[];\n    borderRadius: string;\n\n}\n\n/**\n * @typedef\n * @memberof Moveable.Roundable\n * @extends Moveable.OnEndEvent\n */\nexport interface OnRoundEnd extends OnEndEvent {\n}\n\n\n/**\n * @typedef\n * @memberof Moveable.Roundable\n * @extends Moveable.OnRoundStart\n */\nexport interface OnRoundGroupStart extends OnRoundStart {\n    /**\n     * moveable's targets\n     */\n    targets: Array<HTMLElement | SVGElement>;\n    /**\n     * moveable's child events\n     */\n    events: OnRoundStart[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Roundable\n * @extends Moveable.OnRound\n */\nexport interface OnRoundGroup extends OnRound {\n    /**\n     * moveable's targets\n     */\n    targets: Array<HTMLElement | SVGElement>;\n    /**\n     * moveable's child events\n     */\n    events: OnRound[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Roundable\n * @extends Moveable.OnRoundEnd\n */\nexport interface OnRoundGroupEnd extends OnRoundEnd {\n    /**\n     * moveable's targets\n     */\n    targets: Array<HTMLElement | SVGElement>;\n    /**\n     * moveable's child events\n     */\n    events: OnRoundEnd[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Scalable\n * @extends Moveable.OnEvent\n * @extends Moveable.OnTransformStartEvent\n */\nexport interface OnScaleStart extends OnEvent, OnTransformStartEvent {\n    /**\n     * The direction of scale.\n     */\n    direction: number[];\n    /**\n     * scale causes a `dragStart` event.\n     */\n    dragStart: OnDragStart | false;\n    /**\n     * You can set the start scale value.\n     */\n    set: (scale: number[]) => void;\n    /**\n     * Set a fixed direction to scale.\n     * @default Opposite direction\n     */\n    setFixedDirection: (startDirecition: number[]) => void;\n    /**\n     * Set the ratio of width and height.\n     * @default offsetWidth / offsetHeight\n     */\n    setRatio: (ratio: number) => void;\n    /**\n     * You can set the min scale width, height value.\n     * scale size = scale value * offset size\n     * @default [-Infinity, -Infinity]\n     */\n    setMinScaleSize: (min: number[]) => void;\n    /**\n     * You can set the max scale width, height value.\n     * scale size = scale value * offset size\n     * @default [Infinity, Infinity]\n     */\n    setMaxScaleSize: (max: number[]) => void;\n}\n\n/**\n * @typedef\n * @memberof Moveable.Scalable\n * @extends Moveable.OnEvent\n */\nexport interface OnBeforeScale extends OnEvent {\n    /**\n     * Set a fixed direction to scale.\n     * If fixedDirection is set, the scale values can be changed and can be reconfirmed as a return value.\n     */\n    setFixedDirection: (startDirecition: number[]) => number[];\n    /**\n     * fixedDirection set by rotateStart.\n     */\n    startFixedDirection: number[];\n    /**\n     * Set target's scale to scaling.\n     */\n    setScale: (scale: number[]) => void;\n    /**\n     * a target's scale before snap and throttle and format\n     */\n    scale: number[];\n}\n\n\n/**\n * @typedef\n * @memberof Moveable.Scalable\n * @extends Moveable.OnEvent\n * @extends Moveable.OnTransformEvent\n * @property - The direction of scale.\n * @property - a target's offsetWidth\n * @property - a target's offsetHeight\n * @property - a target's scale\n * @property - The distance of scale\n * @property - The delta of scale\n * @property - Whether or not it is being pinched.\n */\nexport interface OnScale extends OnEvent, OnTransformEvent {\n    direction: number[];\n    offsetWidth: number;\n    offsetHeight: number;\n\n    scale: number[];\n    dist: number[];\n    delta: number[];\n\n    isPinch: boolean;\n}\n/**\n * @typedef\n * @memberof Moveable.Scalable\n * @extends Moveable.OnEndEvent\n */\nexport interface OnScaleEnd extends OnEndEvent {\n}\n\n/**\n * @typedef\n * @memberof Moveable.Resizable\n * @extends Moveable.OnEvent\n * @property - The direction of resize.\n * @property - resize causes a `dragStart` event.\n * @property - You can set the css width, height value.\n * @property - You can set the css min width, min height value. (default: min-width)\n * @property - You can set the css max width, max height value. (default: max-width)\n * @property - You can set the css origin (default: % %)\n * @property - Set a fixed direction to resize. (default: Opposite direction)\n * @property - Set the ratio of width and height. (default: offsetWidth / offsetHeight)\n */\nexport interface OnResizeStart extends OnEvent {\n    /**\n     * The direction of resize.\n     */\n    direction: number[];\n    /**\n     * First set (boundingWidth / boundingHeight) value\n     */\n    startRatio: number;\n    /**\n     * resize causes a `dragStart` event.\n     */\n    dragStart: OnDragStart | false;\n    /**\n     * You can set the css width, height value.\n     */\n    set: (size: number[]) => any;\n    /**\n     * You can set the css min offset width, min offset height value.\n     * @default [minOffsetWidth, minOffsetHeight])\n     */\n    setMin: (minSize: Array<string | number>) => any;\n    /**\n     * You can set the css max offset width, max offset height value.\n     * @default [maxOffsetWidth, maxOffsetHeight])\n     */\n    setMax: (maxSize: Array<string | number>) => any;\n    /**\n     * You can set the css origin\n     * @default transformOrigin\n     */\n    setOrigin: (origin: Array<string | number>) => any;\n    /**\n     * Set a fixed direction to resize.\n     * @default Opposite direction\n     */\n    setFixedDirection: (startDirecition: number[]) => any;\n    /**\n     * Set a fixed direction to resize.\n     * @default Opposite position\n     * @private\n     */\n    setFixedPosition: (startPosition: number[]) => any;\n    /**\n     * Set the ratio of width and height.\n     * @default offsetWidth / offsetHeight\n     */\n    setRatio: (ratio: number) => any;\n}\n\n/**\n * @typedef\n * @memberof Moveable.Resizable\n * @extends Moveable.OnEvent\n */\nexport interface OnBeforeResize extends OnEvent {\n    /**\n     * Set a fixed direction to resize.\n     * If fixedDirection is set, the boundingWidth and boundingHeight values can be changed and can be reconfirmed as a return value.\n     */\n    setFixedDirection: (startDirecition: number[]) => number[];\n    /**\n     * Set a fixed position to resize.\n     * If fixedPosition is set, the boundingWidth and boundingHeight values can be changed and can be reconfirmed as a return value.\n     * @private\n     */\n    setFixedPosition: (startPosition: number[]) => number[];\n    /**\n     * fixedDirection set by resizeStart.\n     */\n    startFixedDirection: number[];\n    /**\n     * fixedPosition set by resizeStart.\n     * @private\n     */\n    startFixedPosition: number[];\n    /**\n     * Set the bounding size to resizing.\n     */\n    setSize: (size: number[]) => void;\n    /**\n     * a target's bounding width before snap and throttle and format\n     */\n    boundingWidth: number;\n    /**\n     * a target's bounding height before snap and throttle and format\n     */\n    boundingHeight: number;\n}\n/**\n * @typedef\n * @memberof Moveable\n */\nexport interface CSSObject {\n    /**\n     * You can get the style you can get from the event.\n     */\n    style: Record<string, string>;\n    /**\n     * You can get it as a cssText that you can get from that event.\n     */\n    cssText: string;\n}\n/**\n * @typedef\n * @memberof Moveable.Resizable\n * @extends Moveable.OnEvent\n * @extends Moveable.OnTransformEvent\n */\nexport interface OnResize extends OnEvent, OnTransformEvent {\n    /**\n     * The direction of resize.\n     */\n    direction: number[];\n    /**\n     * a target's cssWidth\n     */\n    width: number;\n    /**\n     * a target's cssHeight\n     */\n    height: number;\n    /**\n     * a target's offset width as an integer with bounding width\n     */\n    offsetWidth: number;\n    /**\n     * a target's offset height as an integer with bounding height\n     */\n    offsetHeight: number;\n    /**\n     * a target's bounding width\n     */\n    boundingWidth: number;\n    /**\n     * a target's bounding height\n     */\n    boundingHeight: number;\n    /**\n     * The distance of [boundingWidth, boundingHeight]\n     */\n    dist: number[];\n    /**\n     * The delta of [boundingWidth, boundingHeight]\n     */\n    delta: number[];\n    /**\n     * First set (boundingWidth / boundingHeight) value\n     */\n    startRatio: number;\n    /**\n     * Whether or not it is being pinched.\n     */\n    isPinch: boolean;\n}\n/**\n * @typedef\n * @memberof Moveable.Resizable\n * @extends Moveable.OnEndEvent\n */\nexport interface OnResizeEnd extends OnEndEvent {\n}\n/**\n * @typedef\n * @memberof Moveable.Rotatable\n * @extends Moveable.OnEvent\n * @extends Moveable.OnTransformStartEvent\n */\nexport interface OnRotateStart extends OnEvent, OnTransformStartEvent {\n    /**\n     * You can set the start rotate value.\n     */\n    set: (rotate: number) => void;\n    /**\n     * Set a fixed direction to rotate.\n     * @default target's transformOrigin\n     */\n    setFixedDirection: (fixedDirection: number[]) => void;\n    /**\n     * Set a fixed position to rotate.\n     * @default target's transformOrigin\n     */\n    setFixedPosition: (fixedPosition: number[]) => void;\n    /**\n     * rotate causes a `dragStart` event.\n     */\n    dragStart: OnDragStart | false;\n    /**\n     * rotate causes a `resizeStart` event.\n     */\n    resizeStart: OnResizeStart | false;\n}\n/**\n * @typedef\n * @description Parameters for the `beforeRotate` event\n * @memberof Moveable.Rotatable\n * @extends Moveable.OnEvent\n */\nexport interface OnBeforeRotate extends OnEvent {\n    /**\n     * The rotation degree before transform is applied before snap and throttle and format\n     */\n    beforeRotation: number;\n    /**\n     * The rotation degree before snap and throttle and format\n     */\n    rotation: number;\n    /**\n     * The client rotation degree before snap and throttle and format\n     */\n    absoluteRotation: number;\n    /**\n     * You can set the value of `rotation`.\n     */\n    setRotation(nextRotation: number): void;\n}\n\n\n/**\n * @typedef\n * @description Parameters for the `rotate` event\n * @memberof Moveable.Rotatable\n * @extends Moveable.OnEvent\n * @extends Moveable.OnTransformEvent\n */\nexport interface OnRotate extends OnEvent, OnTransformEvent {\n    /**\n     * The distance of rotation degree before transform is applied\n     */\n    beforeDist: number;\n    /**\n     * The delta of rotation degree before transform is applied\n     */\n    beforeDelta: number;\n    /**\n     * The now rotation degree before transform is applied\n     * @deprecated\n     */\n    beforeRotate: number;\n    /**\n     * The now rotation degree before transform is applied\n     */\n    beforeRotation: number;\n    /**\n     * The distance of rotation degree\n     */\n    dist: number;\n    /**\n     * The delta of rotation degree\n     */\n    delta: number;\n    /**\n     * The now rotation degree\n     * @deprecated\n     */\n    rotate: number;\n    /**\n     * The now rotation degree\n     */\n    rotation: number;\n    /**\n     * The distance of client rotation degree\n     */\n    absoluteDist: number;\n    /**\n     * The delta of client rotation degree\n     */\n    absoluteDelta: number;\n    /**\n     * The now client rotation degree\n     * @deprecated\n     */\n    absoluteRotate: number;\n    /**\n     * The now client rotation degree\n     */\n    absoluteRotation: number;\n    /**\n     * Whether or not it is being pinched.\n     */\n    isPinch: boolean;\n    /**\n     * rotate causes a `resize` event.\n     */\n    resize?: OnResize;\n}\n/**\n * @typedef\n * @memberof Moveable.Rotatable\n * @extends Moveable.OnEndEvent\n */\nexport interface OnRotateEnd extends OnEndEvent { }\n\n/**\n * @typedef\n * @memberof Moveable.Warpable\n * @extends Moveable.OnEvent\n * @extends Moveable.OnTransformStartEvent\n * @property - You can set the start matrix value.\n */\nexport interface OnWarpStart extends OnEvent, OnTransformStartEvent {\n    set: (matrix: number[]) => any;\n}\n/**\n * @typedef\n * @memberof Moveable.Warpable\n * @extends Moveable.OnEvent\n * @extends Moveable.CSSObject\n */\nexport interface OnWarp extends OnEvent, CSSObject {\n    /**\n     * The delta of warp matrix\n     */\n    delta: number[];\n    /**\n     * The dist of warp matrix\n     */\n    dist: number[];\n    /**\n     * The calculated warp matrix\n     */\n    matrix: number[];\n    /**\n     * a target's transform\n     */\n    transform: string;\n    /**\n     * Multiply function that can multiply previous matrix by warp matrix\n     */\n    multiply: (matrix1: number[], matrix2: number[], n?: number) => number[];\n}\n/**\n * @typedef\n * @memberof Moveable.Warpable\n * @extends Moveable.OnEndEvent\n */\nexport interface OnWarpEnd extends OnEndEvent { }\n\n/**\n * @typedef\n * @memberof Moveable.Draggable\n * @extends Moveable.OnDragStart\n * @property - targets to drag\n * @property - Each `dragStart` event on the targets\n */\nexport interface OnDragGroupStart extends OnDragStart {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnDragStart[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Draggable\n * @extends Moveable.OnDrag\n * @property - The dragging targets\n * @property - Each `drag` event on the targets\n */\nexport interface OnDragGroup extends OnDrag {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnDrag[];\n}\n/**\n * @typedef\n * @memberof Moveable.Draggable\n * @extends Moveable.OnDragEnd\n * @property - The drag finished targets\n * @property - Each `dragEnd` event on the targets\n */\nexport interface OnDragGroupEnd extends OnDragEnd {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnDragEnd[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Rotatable\n * @extends Moveable.OnRotateStart\n * @property - targets to rotate\n * @property - Each `rotateStart` event on the targets\n */\nexport interface OnRotateGroupStart extends OnRotateStart {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnRotateStart[];\n}\n\n/**\n * @typedef\n * @description Parameters for the `beforeRotateGroup` event\n * @memberof Moveable.Rotatable\n * @extends Moveable.OnBeforeRotate\n */\nexport interface OnBeforeRotateGroup extends OnBeforeRotate {\n    /**\n     * The rotating targets\n     */\n    targets: Array<HTMLElement | SVGElement>;\n}\n/**\n * @typedef\n * @description Parameters for the `rotateGroup` event\n * @memberof Moveable.Rotatable\n * @extends Moveable.OnRotate\n */\nexport interface OnRotateGroup extends OnRotate {\n    /**\n     * The rotating targets\n     */\n    targets: Array<HTMLElement | SVGElement>;\n    /**\n     * Each `rotate` event on the targets\n     */\n    events: OnRotate[];\n    /**\n     * You can set the group's rotation.\n     * @deprecated\n     */\n    set: (rotation: number) => any;\n    /**\n     * You can set the group's rotation.\n     */\n    setGroupRotation: (rotation: number) => any;\n}\n\n/**\n * @typedef\n * @memberof Moveable.Rotatable\n * @extends Moveable.OnRotateEnd\n * @property - The rotate finished targets\n * @property - Each `rotateEnd` event on the targets\n */\nexport interface OnRotateGroupEnd extends OnRotateEnd {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnRotateEnd[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Resizable\n * @extends Moveable.OnResizeStart\n * @property - targets to resize\n * @property - Each `resizeStart` event on the targets\n */\nexport interface OnResizeGroupStart extends OnResizeStart {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnResizeStart[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Resizable\n * @extends Moveable.OnBeforeResize\n */\nexport interface OnBeforeResizeGroup extends OnBeforeResize {\n    /**\n     * The resizing targets\n     */\n    targets: Array<HTMLElement | SVGElement>;\n}\n\n/**\n * @typedef\n * @memberof Moveable.Resizable\n * @extends Moveable.OnResize\n * @property - The resizing targets\n * @property - Each `resize`event on the targets\n */\nexport interface OnResizeGroup extends OnResize {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnResize[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Resizable\n * @extends Moveable.OnResizeEnd\n * @property - The resize finished targets\n * @property - Each `resizeEnd` event on the targets\n */\nexport interface OnResizeGroupEnd extends OnResizeEnd {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnResizeEnd[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Scalable\n * @extends Moveable.OnScaleStart\n * @property - targets to scale\n * @property - Each `scaleStart` & `dragStart` event on the targets\n */\nexport interface OnScaleGroupStart extends OnScaleStart {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnScaleStart[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Scalable\n * @extends Moveable.OnBeforeScale\n * @property - The scaling targets\n */\nexport interface OnBeforeScaleGroup extends OnBeforeScale {\n    targets: Array<HTMLElement | SVGElement>;\n}\n\n/**\n * @typedef\n * @memberof Moveable.Scalable\n * @extends Moveable.OnScale\n * @property - The scaling targets\n * @property - Each `scale` & `drag` event on the targets\n */\nexport interface OnScaleGroup extends OnScale {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnScale[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Scalable\n * @extends Moveable.OnScaleEnd\n * @property - The scale finished targets\n * @property - Each `scaleEnd` event on the targets\n */\nexport interface OnScaleGroupEnd extends OnScaleEnd {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnScaleEnd[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Pinchable\n * @extends Moveable.OnPinchStart\n * @property - targets to pinch\n */\nexport interface OnPinchGroupStart extends OnPinchStart {\n    targets: Array<HTMLElement | SVGElement>;\n}\n\n/**\n * @typedef\n * @memberof Moveable.Pinchable\n * @extends Moveable.OnPinch\n * @property - targets to pinch\n */\nexport interface OnPinchGroup extends OnPinch {\n    targets: Array<HTMLElement | SVGElement>;\n}\n\n/**\n * @typedef\n * @memberof Moveable.Pinchable\n * @extends Moveable.OnPinchEnd\n * @property - The pinch finished targets\n */\nexport interface OnPinchGroupEnd extends OnPinchEnd {\n    targets: Array<HTMLElement | SVGElement>;\n}\n\n/**\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnEvent\n */\nexport interface OnClick extends OnEvent {\n    /**\n     * Clicked element.\n     */\n    inputTarget: Element;\n    /**\n     * clicked moveable target\n     */\n    moveableTarget: HTMLElement | SVGElement | null;\n    /**\n     * Whether the clicked target is moveable target.\n     */\n    isTarget: boolean;\n    /**\n     * Whether the clicked target is a child of moveable target.\n     */\n    containsTarget: boolean;\n    /**\n     * Whether it is double-click\n     */\n    isDouble: boolean;\n}\n\n/**\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnClick\n */\nexport interface OnClickGroup extends OnClick {\n    /**\n     * targets set to group.\n     */\n    targets: Element[];\n    /**\n     * The corresponding index among the targets set as a group.\n     */\n    targetIndex: number;\n}\n\n/**\n * `beforeRenderStart` event occurs before the first start of all events.\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnEvent\n * @property - Whether or not it is being pinched.\n * @property - Set your original transform.\n */\nexport interface OnBeforeRenderStart extends OnEvent {\n    isPinch: boolean;\n    setTransform(transform: string | string[]): any;\n}\n\n/**\n * `beforeRender` event occurs before the dragging of all events.\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnEvent\n * @property - Whether or not it is being pinched.\n */\nexport interface OnBeforeRender extends OnEvent {\n    isPinch: boolean;\n}\n\n/**\n * `beforeRenderEnd` event occurs before the end of all events.\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnEvent\n * @property - Whether or not it is being dragged.\n * @property - Whether or not it is being pinched.\n */\nexport interface OnBeforeRenderEnd extends OnEvent {\n    isPinch: boolean;\n    isDrag: boolean;\n}\n\n/**\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnBeforeRenderStart\n * @property - targets set to group.\n * @property - children's `beforeRenderStart` events\n */\nexport interface OnBeforeRenderGroupStart extends OnBeforeRenderStart {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnBeforeRenderStart[];\n}\n\n/**\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnBeforeRender\n * @property - targets set to group.\n * @property - children's `beforeRender` events\n */\nexport interface OnBeforeRenderGroup extends OnBeforeRender {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnBeforeRender[];\n}\n\n/**\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnBeforeRenderEnd\n * @property - targets set to group.\n */\nexport interface OnBeforeRenderGroupEnd extends OnBeforeRenderEnd {\n    targets: Array<HTMLElement | SVGElement>;\n}\n\n/**\n * `renderStart` event occurs at the first start of all events.\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnEvent\n * @property - Whether or not it is being pinched.\n */\nexport interface OnRenderStart extends OnEvent {\n    isPinch: boolean;\n}\n\n/**\n * `render` event occurs before the target is drawn on the screen.\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnEvent\n * @extends Moveable.CSSObject\n */\nexport interface OnRender extends OnEvent, CSSObject {\n    /**\n     * a target's next transform string value.\n     */\n    transform: string;\n    /**\n     * Whether or not it is being pinched.\n     */\n    isPinch: boolean;\n    /**\n     * Return transform as a transform object.\n     * `rotate` is a number and everything else is an array of numbers.\n     */\n    transformObject: Record<string, any>;\n}\n\n/**\n * `renderEnd` event occurs at the end of all events.\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnEvent\n * @extends Moveable.CSSObject\n */\nexport interface OnRenderEnd extends OnEvent, CSSObject {\n    /**\n     * a target's next transform string value.\n     */\n    transform: string;\n    /**\n     * Whether or not it is being dragged.\n     */\n    isPinch: boolean;\n    /**\n     * Whether or not it is being pinched.\n     */\n    isDrag: boolean;\n    /**\n     * Return transform as a transform object.\n     * `rotate` is a number and everything else is an array of numbers.\n     */\n    transformObject: Record<string, any>;\n}\n\nexport type EventInterface<T extends IObject<any> = {}> = {\n    [key in keyof T]?: (e: T[key]) => any;\n};\n\n/**\n * @typedef\n * @memberof Moveable.Scrollable\n * @extends Moveable.OnEvent\n * @property - The container corresponding to scrolling area (scrollContainer >= rootContainer >= container)\n * @property - The direction of scrolling [left, top]\n */\nexport interface OnScroll extends OnEvent {\n    scrollContainer: HTMLElement;\n    direction: number[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Scrollable\n * @extends Moveable.OnScroll\n * @property - targets set to group.\n */\nexport interface OnScrollGroup extends OnScroll {\n    targets: Array<HTMLElement | SVGElement>;\n}\n\n/**\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnRenderStart\n * @property - targets set to group.\n */\nexport interface OnRenderGroupStart extends OnRenderStart {\n    targets: Array<HTMLElement | SVGElement>;\n}\n\n/**\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnRender\n * @property - targets set to group.\n * @property - Each `render` event on the targets\n */\nexport interface OnRenderGroup extends OnRender {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnRender[];\n}\n\n/**\n * @typedef\n * @memberof Moveable\n * @extends Moveable.OnRenderEnd\n * @property - targets set to group.\n * @property - Each `renderEnd` event on the targets\n */\nexport interface OnRenderGroupEnd extends OnRenderEnd {\n    targets: Array<HTMLElement | SVGElement>;\n    events: OnRenderEnd[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Draggable\n */\nexport interface DraggableOptions {\n    /**\n     * Whether or not target can be dragged.\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * throttle of x, y when drag.\n     * @default 0\n     */\n    throttleDrag?: number;\n    /**\n     * throttle of angle(degree) of x,y when drag.\n     * @default 0\n     */\n    throttleDragRotate?: number;\n    /**\n     * Hides the guidelines that appear when using the `throttleDragRotate` prop.\n     * @default false\n     */\n    hideThrottleDragRotateLine?: boolean;\n    /**\n     * start angle(degree) of x,y for throttleDragRotate when drag.\n     * @default 0\n     */\n    startDragRotate?: number;\n    /**\n     * Whether to move by dragging the edge line\n     * @default false\n     */\n    edgeDraggable?: boolean | Array<LineDirection>;\n}\nexport interface DraggableEvents {\n    onDragStart: OnDragStart;\n    onDrag: OnDrag;\n    onDragEnd: OnDragEnd;\n\n    onDragGroupStart: OnDragGroupStart;\n    onDragGroup: OnDragGroup;\n    onDragGroupEnd: OnDragGroupEnd;\n}\n\nexport interface DraggableProps extends DraggableOptions, EventInterface<DraggableEvents> {\n}\n\nexport interface DraggableState {\n    dragInfo: {\n        startRect: RectInfo;\n        dist: number[];\n    } | null;\n}\n\n/**\n * @typedef\n * @memberof Moveable\n */\nexport interface PaddingOptions {\n    /**\n     * Add padding around the target to increase the drag area.\n     * @default null\n     */\n    padding?: PaddingBox | number;\n}\n/**\n * @typedef\n * @memberof Moveable\n */\nexport interface OriginOptions {\n    /**\n     * Whether or not the origin control box will be visible or not.\n     * @default true\n     */\n    origin?: boolean;\n    /**\n     * Sets the transform origin based on the svg target. If not set, it is set as the transform origin based on the owner of svg.\n     * @since 0.47.0\n     * @default \"\"\n     */\n    svgOrigin?: string;\n}\n/**\n * @typedef\n * @memberof Moveable.OriginDraggable\n */\nexport interface OriginDraggableOptions {\n    /**\n     * Whether to drag origin.\n     * @default false\n     */\n    originDraggable?: boolean;\n    /**\n     * % Can be used instead of the absolute px.\n     * @default true\n     */\n    originRelative?: boolean;\n}\nexport interface OriginDraggableEvents {\n    onDragOriginStart: OnDragOriginStart;\n    onDragOrigin: OnDragOrigin;\n    onDragOriginEnd: OnDragOriginEnd;\n}\nexport interface OriginDraggableProps extends OriginDraggableOptions, EventInterface<OriginDraggableEvents> {\n}\n\n/**\n * @typedef\n * @memberof Moveable.Roundable\n */\nexport interface RoundableOptions {\n    /**\n     * Whether to show and drag border-radius.\n     * @default false\n     */\n    roundable?: boolean;\n    /**\n     * % Can be used instead of the absolute px\n     * @default false\n     */\n    roundRelative?: boolean;\n    /**\n     * Minimum number of round controls. It moves in proportion by control. [horizontal, vertical]\n     * @default [0, 0]\n     */\n    minRoundControls?: number[];\n    /**\n     * Maximum number of round controls. It moves in proportion by control. [horizontal, vertical]\n     * @default [4, 4]\n     */\n    maxRoundControls?: number[];\n    /**\n     * Whether you can add/delete round controls by double-clicking a line or control.\n     * @default true\n     */\n    roundClickable?: boolean | \"line\" | \"control\";\n    /**\n     * Whether to show a round control that does not actually exist as a shadow\n     * @default false\n     */\n    isDisplayShadowRoundControls?: boolean | \"horizontal\";\n    /**\n     * The padding value of the position of the round control\n     * @default 0\n     */\n    roundPadding?: number;\n}\n\nexport interface RoundableEvents {\n    onRoundStart: OnRoundStart;\n    onRound: OnRound;\n    onRoundEnd: OnRoundEnd;\n    onRoundGroupStart: OnRoundGroupStart;\n    onRoundGroup: OnRoundGroup;\n    onRoundGroupEnd: OnRoundGroupEnd;\n}\nexport interface RoundableProps extends RoundableOptions, EventInterface<RoundableEvents> {\n}\n\nexport interface RoundableState {\n    borderRadiusState?: string;\n}\n/**\n * @typedef\n * @memberof Moveable.Resizable\n * @extends Moveable.RenderDirections\n */\nexport interface ResizableOptions extends RenderDirections {\n    /**\n     * Whether or not target can be resized.\n     * @default false\n     */\n    resizable?: boolean | ResizableOptions;\n    /**\n     * throttle of width, height when resize.\n     * @default 1\n     */\n    throttleResize?: number;\n    /**\n     * When resize or scale, keeps a ratio of the width, height.\n     * @default false\n     */\n    keepRatio?: boolean;\n    /**\n     * The size can be changed by format and throttle, but the ratio is maintained at the end. Forced true when using groups.\n     * @default false\n     */\n    keepRatioFinally?: boolean;\n    /**\n     * Function to convert size for resize.\n     * @default oneself\n     */\n    resizeFormat?: (size: number[]) => number[];\n    /**\n     * Whether to scale and resize through edge lines.\n     * You can use \"n\", \"w\", \"s\", \"e\" in LineDirection array.\n     * @default false\n     */\n    edge?: boolean | Array<LineDirection>;\n    /**\n     * Whether to recalculate when the size to be calculated is different from the actual size\n     * @default true\n     */\n    checkResizableError?: boolean;\n}\n/**\n * @typedef\n * @memberof Moveable\n * @extends Moveable.AbleRequestParam\n * @description the Resizable's request parameter\n */\nexport interface AbleRequesters {\n    draggable: DraggableRequestParam;\n    resizable: ResizableRequestParam;\n    scalable: ScalableRequestParam;\n    rotatable: RotatableRequestParam;\n    [key: string]: AbleRequestParam;\n}\n\n/**\n * @typedef\n * @memberof Moveable.Draggable\n * @extends Moveable.AbleRequestParam\n * @description the Draggable's request parameter\n */\nexport interface DraggableRequestParam extends AbleRequestParam {\n    /**\n     * x position\n     */\n    x?: number;\n    /**\n     * y position\n     */\n    y?: number;\n    /**\n     * X number to move\n     */\n    deltaX?: number;\n    /**\n     * Y number to move\n     */\n    deltaY?: number;\n    /**\n     * whether to use with `snappable`\n     */\n    useSnap?: boolean;\n}\n\n/**\n * @typedef\n * @memberof Moveable.Resizable\n * @extends Moveable.AbleRequestParam\n * @description the Resizable's request parameter\n */\nexport interface ResizableRequestParam extends AbleRequestParam {\n    /**\n     * Direction to resize\n     * @default [1, 1]\n     */\n    direction?: number[];\n    /**\n     * Whether to force keepRatio to resize\n     */\n    keepRatio?: boolean;\n    /**\n     * delta number of width\n     */\n    deltaWidth?: number;\n    /**\n     * delta number of height\n     */\n    deltaHeight?: number;\n    /**\n     * offset number of width\n     */\n    offsetWidth?: number;\n    /**\n     * offset number of height\n     */\n    offsetHeight?: number;\n    /**\n     *\n     */\n    horizontal?: boolean;\n    /**\n     * whether to use with `snappable`\n     */\n    useSnap?: boolean;\n}\n\nexport interface ResizableEvents {\n    onResizeStart: OnResizeStart;\n    onBeforeResize: OnBeforeResize;\n    onResize: OnResize;\n    onResizeEnd: OnResizeEnd;\n\n    onResizeGroupStart: OnResizeGroupStart;\n    onBeforeResizeGroup: OnBeforeResizeGroup;\n    onResizeGroup: OnResizeGroup;\n    onResizeGroupEnd: OnResizeGroupEnd;\n}\n\nexport interface ResizableProps extends ResizableOptions, EventInterface<ResizableEvents> {\n}\n\n\n/**\n * @typedef\n * @memberof Moveable.Scalable\n * @extends Moveable.RenderDirections\n */\nexport interface ScalableOptions extends RenderDirections {\n    /**\n     * Whether or not target can be scaled.\n     * @default false\n     */\n    scalable?: boolean | ScalableOptions;\n    /**\n     * throttle of scaleX, scaleY when scale.\n     * @default 0\n     */\n    throttleScale?: number;\n    /**\n     * When resize or scale, keeps a ratio of the width, height.\n     * @default false\n     */\n    keepRatio?: boolean;\n    /**\n     * Whether to scale and resize through edge lines.\n     * You can use \"n\", \"w\", \"s\", \"e\" in LineDirection array.\n     * @default false\n     */\n    edge?: boolean | Array<LineDirection>;\n}\n\n\n/**\n * @typedef\n * @memberof Moveable.Scalable\n * @extends Moveable.AbleRequestParam\n * @description the Scalable's request parameter\n */\nexport interface ScalableRequestParam extends AbleRequestParam {\n    /**\n     * Direction to scale\n     * @default [1, 1]\n     */\n    direction?: number[];\n    /**\n     * Whether to force keepRatio to resize\n     */\n    keepRatio?: boolean;\n    /**\n     * delta number of width\n     */\n    deltaWidth?: number;\n    /**\n     * delta number of height\n     */\n    deltaHeight?: number;\n    /**\n     * whether to use with `snappable`\n     */\n    useSnap?: boolean;\n}\n\n\n\n\n/**\n * @typedef\n * @memberof Moveable.Rotatable\n * @extends Moveable.AbleRequestParam\n * @description the Rotatable's request parameter\n */\nexport interface RotatableRequestParam extends AbleRequestParam {\n    /**\n     * delta number of rotation\n     */\n    deltaRotate?: number;\n    /**\n     * absolute number of moveable's rotation\n     */\n    rotate?: number;\n}\n\n\nexport interface ScalableEvents {\n    onScaleStart: OnScaleStart;\n    onBeforeScale: OnBeforeScale;\n    onScale: OnScale;\n    onScaleEnd: OnScaleEnd;\n\n    onScaleGroupStart: OnScaleGroupStart;\n    onBeforeScaleGroup: OnBeforeScaleGroup;\n    onScaleGroup: OnScaleGroup;\n    onScaleGroupEnd: OnScaleGroupEnd;\n}\nexport interface ScalableProps extends ScalableOptions, EventInterface<ScalableEvents> {\n}\n\n/**\n * @typedef\n * @memberof Moveable.Snappable\n */\nexport interface GapGuideline extends SnapGuideline {\n    renderPos: number[];\n    inner?: boolean;\n}\n/**\n * @typedef\n * @memberof Moveable\n */\nexport interface RenderDirections {\n    /**\n     * Set directions to show the control box.\n     * @default false if rotatable, [\"n\", \"nw\", \"ne\", \"s\", \"se\", \"sw\", \"e\", \"w\"] otherwise\n     */\n    renderDirections?: boolean | string[];\n    /**\n     * Whether to scale and resize through edge lines.\n     * You can use \"n\", \"w\", \"s\", \"e\" in LineDirection array.\n     * @default false\n     */\n    edge?: boolean | Array<LineDirection>;\n    /**\n     * You can expand the area around the control.\n     * Either `rotateAroundControls` or `displayAroundControls` can be used.\n     * You can set the area through the `controlPadding` value.\n     * @since 0.44.0\n     * @story options--options-control-padding\n     * @default false\n     */\n    displayAroundControls?: boolean;\n}\n\nexport type RotationPosition\n    = \"top\" | \"bottom\"\n    | \"left\" | \"right\"\n    | \"top-right\" | \"top-left\"\n    | \"bottom-right\" | \"bottom-left\"\n    | \"left-top\" | \"left-bottom\"\n    | \"right-top\" | \"right-bottom\"\n    | \"none\";\n\n/**\n * @typedef\n * @memberof Moveable.Rotatable\n * @extends Moveable.RenderDirections\n */\nexport interface RotatableOptions extends RenderDirections {\n    /**\n     * Whether or not target can be rotated.\n     * @default false\n     */\n    rotatable?: boolean | RotatableOptions;\n    /**\n     * You can specify the position of the rotation.\n     * @default \"top\"\n     */\n    rotationPosition?: RotationPosition | RotationPosition[];\n    /**\n     * You can rotate around direction controls.\n     * Either `rotateAroundControls` or `displayAroundControls` can be used.\n     * @default 0\n     */\n    rotateAroundControls?: boolean;\n    /**\n     * Sets the control that will cause resize along with rotate. (Only Single Target, Only resizable, Beta)\n     * @default null\n     */\n    resolveAblesWithRotatable?: Record<string, LineDirection[]> | null | undefined;\n    /**\n     * throttle of angle(degree) when rotate.\n     * @default 0\n     */\n    throttleRotate?: number;\n\n    /**\n     * Set additional rotationTargets.\n     * @default null\n     */\n    rotationTarget?: MoveableRefType | ArrayFormat<MoveableRefType> | false;\n}\nexport interface RotatableEvents {\n    onRotateStart: OnRotateStart;\n    onBeforeRotate: OnBeforeRotate;\n    onRotate: OnRotate;\n    onRotateEnd: OnRotateEnd;\n\n    onRotateGroupStart: OnRotateGroupStart;\n    onBeforeRotateGroup: OnBeforeRotateGroup;\n    onRotateGroup: OnRotateGroup;\n    onRotateGroupEnd: OnRotateGroupEnd;\n}\nexport interface RotatableProps extends RotatableOptions, EventInterface<RotatableEvents> {\n}\n/**\n * @typedef\n * @memberof Moveable.Warpable\n * @extends Moveable.RenderDirections\n */\nexport interface WarpableOptions extends RenderDirections {\n    /**\n     * Whether or not target can be warped.\n     * @default false\n     */\n    warpable?: boolean;\n}\n\nexport interface WarpableEvents {\n    onWarpStart: OnWarpStart;\n    onWarp: OnWarp;\n    onWarpEnd: OnWarpEnd;\n}\nexport interface WarpableProps extends WarpableOptions, EventInterface<WarpableEvents> {\n}\n\n/**\n * @typedef\n * @memberof Moveable.Pinchable\n */\nexport interface PinchableOptions {\n    /**\n     * Whether or not target can be pinched with draggable, resizable, scalable, rotatable.\n     * @default false\n     */\n    pinchable?: boolean | Array<\"rotatable\" | \"resizable\" | \"scalable\">;\n}\nexport interface PinchableEvents {\n    onPinchStart: OnPinchStart;\n    onPinch: OnPinch;\n    onPinchEnd: OnPinchEnd;\n\n    onPinchGroupStart: OnPinchGroupStart;\n    onPinchGroup: OnPinchGroup;\n    onPinchGroupEnd: OnPinchGroupEnd;\n}\nexport interface PinchableProps\n    extends PinchableOptions, ResizableProps, ScalableProps,\n    RotatableProps, EventInterface<PinchableEvents> {\n}\n\n/**\n * @typedef\n * @memberof Moveable.Group\n */\nexport interface GroupableOptions {\n    /**\n     * Sets the initial rotation of the group.\n     * @default 0\n     */\n    defaultGroupRotate?: number;\n    /**\n     * Use the defaultGroupRotate even if the children's rotations match.\n     * @default false\n     */\n    useDefaultGroupRotate?: boolean;\n    /**\n     * Sets the initial transform origin of the group.\n     * @default  \"50% 50%\"\n     */\n    defaultGroupOrigin?: string;\n    /**\n     * @default\n     */\n    targetGroups?: MoveableTargetGroupsType;\n    /**\n     * @private\n     */\n    groupable?: boolean;\n    /**\n     * Whether to hide the line in child moveable for group corresponding to the rect of the target.\n     * @default false\n     */\n    hideChildMoveableDefaultLines?: boolean;\n    /**\n     * Props that work when group\n     * @example\n     * ```js\n     * {\n     *     roundable: true,\n     *     groupableProps: {\n     *         roundable: false,\n     *     },\n     * }\n     * ```\n     */\n    groupableProps?: Record<string, any>;\n}\n\n/**\n * @typedef\n * @memberof Moveable\n */\nexport type MoveableTargetGroupsType = Array<HTMLElement | SVGElement | MoveableTargetGroupsType>;\n\n\n/**\n * @typedef\n * @memberof Moveable.IndividualGroup\n */\nexport interface IndividualGroupableOptions {\n    /**\n     * Create targets individually, not as a group.\n     * @story individual-group--individual-group-draggable-scalable-rotatable\n     */\n    individualGroupable?: boolean;\n    /**\n     * When using individualGroupable you can pass props to child moveable.\n     * @story individual-group--individual-group-groupable-props\n     * @since 0.44.0\n     */\n    individualGroupableProps?: (\n        element: HTMLElement | SVGElement | null | undefined,\n        index: number,\n    ) => Record<string, any> | undefined | null | void;\n}\n\nexport interface IndividualGroupableProps extends IndividualGroupableOptions {\n}\n\nexport interface GroupableProps extends GroupableOptions {\n    targets?: Array<HTMLElement | SVGElement>;\n    updateGroup?: boolean;\n}\n\n/**\n * @typedef\n * @memberof Moveable.Snappable\n */\nexport interface SnappableOptions {\n    /**\n     * Whether or not target can be snapped to the guideline.\n     * @default false\n     */\n    snappable?: boolean | string[];\n    /**\n     * A snap container that is the basis for snap, bounds, and innerBounds.\n     * @default null\n     */\n    snapContainer?: MoveableRefType<HTMLElement | SVGElement>;\n    /**\n     * You can specify the directions to snap to the target.\n     * @default true (true is all directions)\n     */\n    snapDirections?: boolean | SnapDirections;\n    /**\n     * You can specify the snap directions of elements.\n     * @default true (true is all directions)\n     */\n    elementSnapDirections?: boolean | SnapDirections;\n    /**\n     * When you drag, make the gap snap in the element guidelines.\n     * @default true\n     */\n    snapGap?: boolean;\n    /**\n    /**\n     * Distance value that can snap to guidelines.\n     * Use `snapHorizontalThreshold` and `snapVerticalThreshold`\n     * @default 0\n     * @depreacted\n     */\n    snapThreshold?: number;\n    /**\n     * Distance horizontal between horizontal value that can snap to guidelines.\n     * @default 5\n     */\n    snapHorizontalThreshold?: number;\n    /**\n     * Distance Horizontal value that can snap to guidelines.\n     * @default 5\n     */\n    snapVerticalThreshold?: number;\n    /**\n     * Distance value that render snapped guidelines.\n     * @default 1\n     */\n    snapRenderThreshold?: number;\n    /**\n     * snap distance digits.\n     * @default 0\n     */\n    snapDigit?: number;\n    /**\n     * Whether to show guideline of snap by grid\n     * @default false\n     */\n    isDisplayGridGuidelines?: boolean;\n    /**\n     * Snap works if `abs(current rotation - snapRotationDegrees) < snapRotationThreshold`.\n     * @default 5\n     */\n    snapRotationThreshold?: number;\n    /**\n     * degree angles to snap to rotation\n     * @default []\n     */\n    snapRotationDegrees?: number[];\n    /**\n     * If width size is greater than 0, you can vertical snap to the grid.\n     * @default 0 (0 is not used)\n     */\n    snapGridWidth?: number;\n    /**\n     * If height size is greater than 0, you can horizontal snap to the grid.\n     * @default 0 (0 is not used)\n     */\n    snapGridHeight?: number;\n    /**\n     * In the case of a group, if `snapGridWidth` and `snapGridHeight` are used, all children can be snapped.\n     * Custom fixed directions are not yet allowed. Also, it cannot be applied if rotated.\n     * @default false\n     */\n    snapGridAll?: boolean;\n    /**\n     * Whether to show snap distance.\n     * @default true\n     */\n    isDisplaySnapDigit?: boolean;\n    /**\n     * Whether to show element inner snap distance\n     * @default false\n     */\n    isDisplayInnerSnapDigit?: boolean;\n    /**\n     * Add guidelines in the horizontal direction.\n     * @default []\n     */\n    horizontalGuidelines?: Array<PosGuideline | number | string>;\n    /**\n     * Add guidelines in the vertical direction.\n     * @default []\n     */\n    verticalGuidelines?: Array<PosGuideline | number | string>;\n    /**\n     * Add guidelines for the element.\n     * @default []\n     */\n    elementGuidelines?: Array<ElementGuidelineValueOption | MoveableRefType<Element>>;\n    /**\n     * Maximum distance to which element guidelines can be snapped.\n     * @default Infinity\n     */\n    maxSnapElementGuidelineDistance?: number;\n    /**\n     * Maximum distance to which element gap guidelines can be snapped.\n     * @default Infinity\n     */\n    maxSnapElementGapDistance?: number;\n    /**\n     * You can set up boundaries.\n     * @default null\n     */\n    bounds?: BoundType | null;\n    /**\n     * You can set up inner boundaries.\n     * @default null\n     */\n    innerBounds?: InnerBoundType | null;\n    /**\n     * You can set the text format of the distance shown in the guidelines.\n     * @default oneself\n     */\n    snapDistFormat?: (distance: number, type: \"vertical\" | \"horizontal\") => number | string;\n}\n\n/**\n * @typedef\n * @memberof Moveable.Snappable\n */\nexport interface SnapDirections {\n    /**\n     * Whether to snap the top of the element\n     * @default true\n     */\n    left?: boolean;\n    /**\n     * Whether to snap the left of the element\n     * @default true\n     */\n    top?: boolean;\n    /**\n     * Whether to snap the right of the element\n     * @default true\n     */\n    right?: boolean;\n    /**\n     * Whether to snap the bottom of the element\n     * @default true\n     */\n    bottom?: boolean;\n    /**\n     * Whether to snap the center((left + right) / 2) of the element\n     * @default false\n     */\n    center?: boolean;\n    /**\n     * Whether to snap the middle((top + bottom) / 2) of the element\n     * @default false\n     */\n    middle?: boolean;\n}\n/**\n * @typedef\n * @memberof Moveable.Snappable\n * @extends Moveable.Snappable.SnapDirections\n */\nexport interface ElementGuidelineValue extends SnapDirections {\n    /**\n     * guideline element\n     */\n    element: Element;\n    /**\n     * class names to add to guideline\n     * @default \"\"\n     * @example\n     *\n     * ```css\n     * .moveable-gap.red {\n     *   background: red!important;\n     * }\n     * ```\n     * ```css\n     * .moveable-bold.red {\n     *   background: red!important;\n     * }\n     * ```\n     * ```css\n     * .moveable-dashed.red {\n     *   border-top-color: red!important;\n     * }\n     * ```\n     */\n    className?: string;\n    /**\n     * Whether to update the element size at every render\n     * @default false\n     */\n    refresh?: boolean;\n}\n\n\n\n/**\n * @typedef\n * @memberof Moveable.Snappable\n * @extends Moveable.Snappable.SnapDirections\n */\nexport interface ElementGuidelineValueOption extends SnapDirections {\n    /**\n     * guideline element\n     */\n    element: MoveableRefType<Element>;\n    /**\n     * class names to add to guideline\n     * @default \"\"\n     */\n    className?: string;\n    /**\n     * Whether to update the element size at every render\n     * @default false\n     */\n    refresh?: boolean;\n}\n/**\n * @typedef\n * @memberof Moveable.Snappable\n */\nexport interface PosGuideline {\n    /**\n     * guideline pos\n     */\n    pos: number | string;\n    /**\n     * class names to add to guideline\n     * @default \"\"\n     */\n    className?: string;\n}\n/**\n * @typedef\n * @memberof Moveable.Snappable\n */\nexport interface NumericPosGuideline extends PosGuideline {\n    pos: number;\n}\n/**\n * @typedef\n * @memberof Moveable.Snappable\n * @extends Moveable.Snappable.SnapDirections\n */\nexport interface ElementGuidelineValue extends SnapDirections {\n    /**\n     * guideline element\n     */\n    element: Element;\n    /**\n     * class names to add to guideline\n     * @default \"\"\n     */\n    className?: string;\n    /**\n     * Whether to update the element size at every render\n     * @default false\n     */\n    refresh?: boolean;\n}\nexport interface SnappableEvents {\n    onSnap: OnSnap;\n    onBound: OnBound;\n}\nexport interface SnappableProps extends SnappableOptions, EventInterface<SnappableEvents> {\n}\n\n/**\n * @typedef\n * @memberof Moveable.Snappable\n */\nexport interface OnSnap {\n    /**\n     * snapped verticalGuidelines, horizontalGuidelines,\n     */\n    guidelines: SnapGuideline[];\n    /**\n     * snapped elements (group by element)\n     */\n    elements: SnapGuideline[];\n    /**\n     * gaps is snapped guidelines that became gap snap between elements.\n     */\n    gaps: SnapGuideline[];\n}\n\n/**\n * @typedef\n * @memberof Moveable.Snappable\n */\nexport interface OnBound {\n    bounds: {\n        left: boolean;\n        top: boolean;\n        right: boolean;\n        bottom: boolean;\n    };\n    innerBounds: {\n        left: boolean;\n        top: boolean;\n        right: boolean;\n        bottom: boolean;\n    };\n}\n/**\n * @typedef\n * @memberof Moveable.Snappable\n */\nexport interface InnerBoundType {\n    left: number;\n    top: number;\n    width: number;\n    height: number;\n}\n/**\n * @typedef\n * @memberof Moveable.Snappable\n */\nexport interface BoundType {\n    /**\n     * If position is css, right and bottom are calculated as css right and css bottom of container.\n     * @default \"client\"\n     */\n    position?: \"client\" | \"css\";\n    left?: number;\n    top?: number;\n    right?: number;\n    bottom?: number;\n}\n\nexport interface SnapDirectionPoses {\n    left?: number;\n    top?: number;\n    right?: number;\n    bottom?: number;\n    center?: number;\n    middle?: number;\n}\n\nexport interface SnapElementRect extends ElementGuidelineValue {\n    rect: SnapDirectionPoses;\n}\nexport interface SnappableState {\n    staticGuidelines: SnapGuideline[];\n    elementRects: SnapElementRect[];\n    guidelines: SnapGuideline[];\n    snapContainer: MoveableRefType<HTMLElement | SVGElement>;\n    snapOffset: { left: number, top: number, bottom: number, right: number }\n    snapRenderInfo?: SnapRenderInfo | null;\n    snapThresholdInfo?: { multiples: number[]; offset: number[]; } | null;\n    enableSnap: boolean;\n}\nexport interface SnapRenderInfo {\n    render?: boolean;\n    direction?: number[];\n    snap?: boolean;\n    center?: boolean;\n    request?: boolean;\n    externalPoses?: number[][];\n    externalBounds?: BoundType | false | null;\n}\n\n/**\n * @typedef\n * @options\n * @memberof Moveable.Scrollable\n */\nexport interface ScrollableOptions {\n    /**\n     * Whether or not target can be scrolled to the scroll container\n     * @default false\n     */\n    scrollable?: boolean;\n    /**\n     * The container to which scroll is applied\n     * @deprecated\n     * @default container\n     */\n    scrollContainer?: MoveableRefType<HTMLElement>;\n    /**\n     * Expand the range of the scroll check area.\n     * @deprecated\n     * @default 0\n     */\n    scrollThreshold?: number;\n    /**\n     * Time interval that occurs when scrolling occurs when dragging is maintained\n     * If set to 0, it does not occur.\n     * @deprecated\n     * @default 0\n     */\n    scrollThrottleTime?: number;\n    /**\n     * Sets a function to get the scroll position.\n     * @deprecated\n     * @default scrollContainer's scrollTop, scrollLeft\n     */\n    getScrollPosition?: (e: { scrollContainer: HTMLElement, direction: number[] }) => number[];\n    /**\n     * Option to scroll with dragging\n     * @since 0.43.0\n     * @story support-scroll--scrolling-scrollable\n     * @example\n     * const scrollOptions = {\n     *     container: () => viewer.getContainer(),\n     *     threshold: 20,\n     *     getScrollPosition: () => {\n     *         return [\n     *             viewer.getScrollLeft({ absolute: true }),\n     *             viewer.getScrollTop({ absolute: true }),\n     *         ];\n     *     },\n     * };\n     */\n    scrollOptions?: Partial<DragScrollOptions> | null;\n}\nexport interface ScrollableEvents {\n    onScroll: OnScroll;\n    onScrollGroup: OnScrollGroup;\n}\nexport interface ScrollableProps extends ScrollableOptions, EventInterface<ScrollableEvents> {\n}\n\n/**\n * @typedef\n * @memberof Moveable\n */\nexport interface DragAreaOptions {\n    /**\n     * Instead of firing an event on the target, we add it to the moveable control element. You can use click and clickGroup events.\n     * @default if group, true, else fals\n     */\n    dragArea?: boolean;\n    /**\n     * Set `pointerEvents: none;` css to pass events in dragArea.\n     * @default false\n     */\n    passDragArea?: boolean;\n}\nexport interface DragAreaProps extends DragAreaOptions {\n}\n/**\n * @typedef\n * @memberof Moveable.Clickable\n */\nexport interface ClickableEvents {\n    onClick: OnClick;\n    onClickGroup: OnClickGroup;\n}\n\nexport interface ArrayFormat<T = any> {\n    length: number;\n    [key: number]: T;\n}\n/**\n * @typedef\n * @memberof Moveable.Clickable\n */\nexport interface ClickableOptions {\n    /**\n     * Whether to trigger the moveable's click event.\n     * @default true\n     */\n    clickable?: boolean;\n}\n/**\n * @memberof Moveable.Clickable\n * @extends Moveable.Clickable.ClickableEvents\n * @extends Moveable.Clickable.ClickableOptions\n * @typedef\n */\nexport interface ClickableProps extends EventInterface<ClickableEvents>, ClickableOptions {\n}\nexport interface BeforeRenderableEvents {\n    onBeforeRenderStart: OnBeforeRenderStart;\n    onBeforeRender: OnBeforeRender;\n    onBeforeRenderEnd: OnBeforeRenderEnd;\n    onBeforeRenderGroupStart: OnBeforeRenderGroupStart;\n    onBeforeRenderGroup: OnBeforeRenderGroup;\n    onBeforeRenderGroupEnd: OnBeforeRenderGroupEnd;\n}\nexport interface BeforeRenderableProps extends EventInterface<BeforeRenderableEvents> {\n}\nexport interface RenderableEvents {\n    onRenderStart: OnRenderStart;\n    onRender: OnRender;\n    onRenderEnd: OnRenderEnd;\n    onRenderGroupStart: OnRenderGroupStart;\n    onRenderGroup: OnRenderGroup;\n    onRenderGroupEnd: OnRenderGroupEnd;\n}\nexport interface RenderableProps extends EventInterface<RenderableEvents> {\n}\n\n/**\n * @typedef\n * @memberof Moveable.Clippable\n */\nexport interface ClippableOptions {\n    /**\n     * Whether to clip the target.\n     * @default false\n     */\n    clippable?: boolean | ClippableOptions;\n    /**\n     * Whether to keep the ratio of size if your clipPath is 'inset', 'rect', 'ellipse' type\n     * @default false\n     */\n    keepRatio?: boolean;\n    /**\n     * You can force the custom clipPath. (defaultClipPath < style < customClipPath < dragging clipPath)\n     */\n    customClipPath?: string;\n    /**\n     * If clippath is not set, the default value can be set. (defaultClipPath < style < customClipPath < dragging clipPath)\n     */\n    defaultClipPath?: string;\n    /**\n     * % Can be used instead of the absolute px (`rect` not possible)\n     * @default false\n     */\n    clipRelative?: boolean;\n    /**\n     * When dragging the target, the clip also moves.\n     * @default true\n     */\n    dragWithClip?: boolean;\n    /**\n     * You can drag the clip by setting clipArea.\n     * @default false\n     */\n    clipArea?: boolean;\n    /**\n     * Whether the clip is bound to the target.\n     * @default false\n     */\n    clipTargetBounds?: boolean;\n    /**\n     * Add clip guidelines in the vertical direction.\n     * @default []\n     */\n    clipVerticalGuidelines?: Array<string | number>;\n    /**\n     * Add clip guidelines in the horizontal direction.\n     * @default []\n     */\n    clipHorizontalGuidelines?: Array<string | number>;\n    /**\n     * Distance value that can snap to clip guidelines.\n     * @default 5\n     */\n    clipSnapThreshold?: number;\n}\nexport interface ClippableEvents {\n    onClipStart: OnClipStart;\n    onClip: OnClip;\n    onClipEnd: OnClipEnd;\n}\nexport interface ClippableProps extends ClippableOptions, EventInterface<ClippableEvents> {\n}\nexport interface ClippableState {\n    clipPathState?: string;\n    snapBoundInfos?: { vertical: Required<SnapBoundInfo>, horizontal: Required<SnapBoundInfo> } | null;\n}\n\n/**\n * @typedef\n * @memberof Moveable.Clippable\n * @extends Moveable.OnEvent\n * @property - The clip type.\n * @property - The control positions\n * @property - CSS style of changed clip\n */\nexport interface OnClipStart extends OnEvent {\n    clipType: \"polygon\" | \"circle\" | \"ellipse\" | \"inset\" | \"rect\";\n    poses: number[][];\n    clipStyle: string;\n}\n/**\n * @typedef\n * @memberof Moveable.Clippable\n * @extends Moveable.OnEvent\n * @extends Moveable.CSSObject\n */\nexport interface OnClip extends OnEvent, CSSObject {\n    /**\n     * The clip type.\n     */\n    clipType: \"polygon\" | \"circle\" | \"ellipse\" | \"inset\" | \"rect\";\n    /**\n     * The clip event type.\n     */\n    clipEventType: \"added\" | \"changed\" | \"removed\";\n    /**\n     * The control positions\n     */\n    poses: number[][];\n    /**\n     * x position of the distance the control has moved\n     */\n    distX: number;\n    /**\n     * y position of the distance the control has moved\n     */\n    distY: number;\n    /**\n     * CSS style of changed clip\n     */\n    clipStyle: string;\n    /**\n     * Splited CSS styles of changed clip\n     */\n    clipStyles: string[];\n\n}\n/**\n * @typedef\n * @memberof Moveable.Clippable\n * @extends Moveable.OnEndEvent\n */\nexport interface OnClipEnd extends OnEndEvent { }\n\nexport interface OnCustomDrag extends GestoTypes.Position {\n    type: string;\n    inputEvent: any;\n    isDrag: boolean;\n    isFirstDrag: boolean;\n    datas: IObject<any>;\n    originalDatas: IObject<any>;\n    parentEvent: boolean;\n    parentGesto: CustomGesto;\n}\n\n/**\n * @typedef\n * @memberof Moveable\n */\nexport type PersistRectData = Omit<Partial<RectInfo>, \"children\"> & {\n    children?: Array<Partial<RectInfo>>;\n};\n\n\n/**\n * @typedef\n * @memberof Moveable\n */\nexport interface RectInfo {\n    /**\n     * The coordinates of the vertex 1\n     */\n    pos1: number[];\n    /**\n     * The coordinates of the vertex 2\n     */\n    pos2: number[];\n    /**\n     * The coordinates of the vertex 3\n     */\n    pos3: number[];\n    /**\n     * The coordinates of the vertex 4\n     */\n    pos4: number[];\n    /**\n     * left position of the target relative to the container\n     */\n    left: number;\n    /**\n     * top position of the target relative to the container\n     */\n    top: number;\n    /**\n     * The width of moveable element\n     */\n    width: number;\n    /**\n     * The height of moveable element\n     */\n    height: number;\n    /**\n     * The offset width of the target\n     */\n    offsetWidth: number;\n    /**\n     * The offset height of the target\n     */\n    offsetHeight: number;\n    /**\n     * The absolute transform origin\n     */\n    origin: number[];\n    /**\n     * The absolute transform origin before transformation\n     */\n    beforeOrigin: number[];\n    /**\n     * The target transform origin\n     */\n    transformOrigin: number[];\n    /**\n     * you can get the absolute rotation value\n     */\n    rotation: number;\n    /**\n     * If you use a group, you can get child moveables' rect info\n     */\n    children?: RectInfo[];\n}\n\n/**\n * @typedef\n * @memberof Moveable\n */\nexport interface GroupRect {\n    pos1: number[];\n    pos2: number[];\n    pos3: number[];\n    pos4: number[];\n    minX: number;\n    minY: number;\n    maxX: number;\n    maxY: number;\n    width: number;\n    height: number;\n    rotation: number;\n}\n\n/**\n * @typedef\n * @memberof Moveable\n * @property - top position\n * @property - left position\n * @property - target's width\n * @property - target's height\n */\nexport interface HitRect {\n    top: number;\n    left: number;\n    width?: number;\n    height?: number;\n}\n\n/**\n * @typedef\n * @memberof Moveable\n * @extends Moveable.MoveableInterface\n */\nexport interface MoveableManagerInterface<T = {}, U = {}> extends MoveableInterface {\n    moveables?: MoveableManagerInterface[];\n    props: MoveableManagerProps<T>;\n    state: MoveableManagerState<U>;\n    renderState: Record<string, any>;\n    rotation: number;\n    scale: number[];\n    controlGesto: Gesto;\n    targetGesto: Gesto;\n    enabledAbles: Able[];\n    controlAbles: Able[];\n    targetAbles: Able[];\n    areaElement: HTMLElement;\n    controlBox: HTMLElement,\n    isUnmounted: boolean;\n    useCSS(tag: string, css: string): any;\n    getContainer(): HTMLElement | SVGElement;\n    getRotation(): number;\n    getState(): MoveableManagerState<U>;\n    triggerEvent(name: string, params: IObject<any>, isManager?: boolean): any;\n}\n\n/**\n * @typedef\n * @memberof Moveable\n * @extends Moveable.MoveableManagerInterface\n */\nexport interface MoveableGroupInterface<T = {}, U = {}> extends MoveableManagerInterface<T, U> {\n    props: MoveableManagerProps<T> & { targets: Array<HTMLElement | SVGElement> };\n    moveables: MoveableManagerInterface[];\n    transformOrigin: string;\n    renderGroupRects: GroupRect[];\n    getRequestChildStyles(): string[];\n}\n\n/**\n * @typedef\n * @memberof Moveable\n */\nexport interface MoveableInterface {\n    getManager(): MoveableManagerInterface<any, any>;\n    getRect(): RectInfo;\n    getAble<T extends Able>(ableName: string): T | undefined;\n    isMoveableElement(target: Element): boolean;\n    /**\n     * If the location or size of the target is changed, call the `.updateRect()` method.\n     * Use the `useResizeObserver` and `useMutationObserver` props to update automatically.\n     */\n    updateRect(type?: \"Start\" | \"\" | \"End\", isTarget?: boolean, isSetState?: boolean): void;\n    /**\n     * @deprecated\n     * Use `.updateRect()` method\n     */\n    updateTarget(): void;\n    /**\n     * Request able through a method rather than an event.\n     * At the moment of execution, requestStart is executed,\n     * and then request and requestEnd can be executed through Requester.\n     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Draggable.html#request Draggable Requester}\n     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Resizable.html#request Resizable Requester}\n     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Scalable.html#request Scalable Requester}\n     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Rotatable.html#request Rotatable Requester}\n     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.OriginDraggable.html#request OriginDraggable Requester}\n     * @param - ableName\n     * @param - request to be able params.\n     * @param - If isInstant is true, request and requestEnd are executed immediately.\n     * @return - Able Requester. If there is no request in able, nothing will work.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * // Instantly Request (requestStart - request - requestEnd)\n     * moveable.request(\"draggable\", { deltaX: 10, deltaY: 10 }, true);\n     *\n     * // Start move\n     * const requester = moveable.request(\"draggable\");\n     * requester.request({ deltaX: 10, deltaY: 10 });\n     * requester.request({ deltaX: 10, deltaY: 10 });\n     * requester.request({ deltaX: 10, deltaY: 10 });\n     * requester.requestEnd();\n     */\n    request<\n        RequestParam extends AbleRequesters[Name],\n        Name extends string = string,\n    >(ableName: Name, params?: RequestParam, isInstant?: boolean): Requester<RequestParam>;\n    /**\n     * moveable is the top level that manages targets\n     * `Single`: MoveableManager instance\n     * `Group`: MoveableGroup instance\n     * `IndividualGroup`: MoveableIndividaulGroup instance\n     * Returns leaf target MoveableManagers.\n     */\n    getMoveables(): MoveableManagerInterface[];\n    /**\n     * Returns the element of the control box.\n     */\n    getControlBoxElement(): HTMLElement;\n    /**\n     * Target element to be dragged in moveable\n     */\n    getDragElement(): HTMLElement | SVGElement | null | undefined;\n    destroy(): void;\n    dragStart(e: MouseEvent | TouchEvent, target?: EventTarget | null): void;\n    isInside(clientX: number, clientY: number): boolean;\n    isDragging(ableName?: string): boolean;\n    hitTest(el: Element | HitRect): number;\n    setState(state: any, callback?: () => any): any;\n    waitToChangeTarget(): Promise<void>;\n    forceUpdate(callback?: () => any): any;\n    updateSelectors(): void;\n    getTargets(): Array<HTMLElement | SVGElement>;\n    stopDrag(type?: \"target\" | \"control\"): void;\n}\n\nexport interface ControlPose {\n    virtual?: boolean;\n    vertical: number;\n    horizontal: number;\n    pos: number[];\n    sub?: boolean;\n    raw?: number;\n    direction?: \"n\" | \"e\" | \"s\" | \"w\" | \"nw\" | \"ne\" | \"sw\" | \"se\" | \"nesw\";\n}\n\n\nexport type AnyProps<T extends IObject<any>> = Required<{ [key in keyof T]: any }>;\nexport type UnionToIntersection<U> =\n    (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;\n\n// export type MoveableEventsProps = Parameters<Required<MoveableProps>[keyof typeof MOVEABLE_EVENTS_PROPS_MAP]>[0];\nexport type MoveableEvents = {\n    [key in typeof MOVEABLE_EVENTS[number]]\n    : Parameters<Required<MoveableProps>[`on${Capitalize<key>}`]>[0];\n};\n\nexport type Writable<T> = {\n    -readonly [key in keyof T]: T[key];\n};\n\nexport type MoveableProperties = {\n    -readonly [key in typeof MOVEABLE_PROPS[number]]?: MoveableProps[key];\n};\n\nexport interface SnappableRenderType {\n    type: \"snap\" | \"bounds\";\n    pos: number;\n}\n\nexport type ExcludeParams<T extends IObject<any>>\n    = ExcludeKeys<T, keyof OnEvent>;\nexport type ExcludeEndParams<T extends IObject<any>>\n    = ExcludeKeys<ExcludeParams<T>, \"lastEvent\" | \"isDrag\" | \"isDouble\">;\nexport type DefaultProps<Name extends string, AbleObject extends Partial<Able<any, any>>>\n    = AbleObject extends { props: {} } ? AbleObject[\"props\"] : { readonly [key in Name]: BooleanConstructor; };\n"
  },
  {
    "path": "packages/react-moveable/src/utils/calculateElementPosition.ts",
    "content": "import { MoveablePosition } from \"../types\";\nimport { calculatePoses, calculatePosition, sign } from \"../utils\";\n\nexport function calculateElementPosition(\n    matrix: number[],\n    origin: number[],\n    width: number,\n    height: number,\n): MoveablePosition {\n    const is3d = matrix.length === 16;\n    const n = is3d ? 4 : 3;\n    const poses = calculatePoses(matrix, width, height, n);\n    let [\n        [x1, y1],\n        [x2, y2],\n        [x3, y3],\n        [x4, y4],\n    ] = poses;\n    let [originX, originY] = calculatePosition(matrix, origin, n);\n\n    const left = Math.min(x1, x2, x3, x4);\n    const top = Math.min(y1, y2, y3, y4);\n    const right = Math.max(x1, x2, x3, x4);\n    const bottom = Math.max(y1, y2, y3, y4);\n\n    x1 = (x1 - left) || 0;\n    x2 = (x2 - left) || 0;\n    x3 = (x3 - left) || 0;\n    x4 = (x4 - left) || 0;\n\n    y1 = (y1 - top) || 0;\n    y2 = (y2 - top) || 0;\n    y3 = (y3 - top) || 0;\n    y4 = (y4 - top) || 0;\n\n    originX = (originX - left) || 0;\n    originY = (originY - top) || 0;\n\n\n    const sx = matrix[0];\n    const sy = matrix[n + 1];\n    const direction = sign(sx * sy);\n\n    return {\n        left,\n        top,\n        right,\n        bottom,\n        origin: [originX, originY],\n        pos1: [x1, y1],\n        pos2: [x2, y2],\n        pos3: [x3, y3],\n        pos4: [x4, y4],\n        direction,\n    };\n}\n"
  },
  {
    "path": "packages/react-moveable/src/utils/calculateMatrixStack.ts",
    "content": "import { createIdentityMatrix, convertDimension, multiply, createOriginMatrix, ignoreDimension } from \"@scena/matrix\";\nimport { getCachedMatrixContainerInfo } from \"../store/Store\";\nimport { convert3DMatrixes, getOffsetInfo, getSVGOffset, makeMatrixCSS } from \"../utils\";\nimport { getMatrixStackInfo } from \"./getMatrixStackInfo\";\nimport { getDocumentBody } from \"@daybrush/utils\";\nimport { MatrixInfo } from \"../types\";\n\nexport interface MoveableElementMatrixInfo {\n    hasZoom: boolean;\n    hasFixed: boolean;\n    originalRootMatrix: number[];\n    rootMatrix: number[];\n    beforeMatrix: number[];\n    offsetMatrix: number[];\n    allMatrix: number[];\n    targetMatrix: number[];\n    transformOrigin: number[];\n    targetOrigin: number[];\n    is3d: boolean;\n    targetTransform: string;\n    inlineTransform: string;\n    offsetContainer: HTMLElement | null;\n    offsetRootContainer: HTMLElement | null;\n    matrixes: MatrixInfo[];\n}\n\nexport function calculateMatrixStack(\n    target: SVGElement | HTMLElement,\n    container?: SVGElement | HTMLElement | null,\n    rootContainer: SVGElement | HTMLElement | null | undefined = container,\n    isAbsolute3d?: boolean,\n    // prevMatrix?: number[],\n    // prevRootMatrix?: number[],\n    // prevN?: number,\n): MoveableElementMatrixInfo {\n    const {\n        matrixes,\n        is3d,\n        targetMatrix: prevTargetMatrix,\n        transformOrigin,\n        targetOrigin,\n        offsetContainer,\n        hasFixed,\n        zoom: containerZoom,\n    } = getMatrixStackInfo(target, container); // prevMatrix\n\n    const {\n        matrixes: rootMatrixes,\n        is3d: isRoot3d,\n        offsetContainer: offsetRootContainer,\n        zoom: rootZoom,\n    } = getCachedMatrixContainerInfo(offsetContainer, rootContainer); // prevRootMatrix\n\n    // if (rootContainer === document.body) {\n    //     console.log(offsetContainer, rootContainer, rootMatrixes);\n    // }\n    const isNext3d = isAbsolute3d || isRoot3d || is3d;\n    const n = isNext3d ? 4 : 3;\n    const isSVGGraphicElement = target.tagName.toLowerCase() !== \"svg\" && \"ownerSVGElement\" in target;\n    let targetMatrix = prevTargetMatrix;\n    // let allMatrix = prevMatrix ? convertDimension(prevMatrix, prevN!, n) : createIdentityMatrix(n);\n    // let rootMatrix = prevRootMatrix ? convertDimension(prevRootMatrix, prevN!, n) : createIdentityMatrix(n);\n    // let beforeMatrix = prevMatrix ? convertDimension(prevMatrix, prevN!, n) : createIdentityMatrix(n);\n    let allMatrix = createIdentityMatrix(n);\n    let rootMatrix = createIdentityMatrix(n);\n    let beforeMatrix = createIdentityMatrix(n);\n    let offsetMatrix = createIdentityMatrix(n);\n    const length = matrixes.length;\n    const nextRootMatrixes = rootMatrixes.map(info => {\n        return {\n            ...info,\n            matrix: info.matrix ? [...info.matrix] : undefined,\n        };\n    }).reverse();\n    matrixes.reverse();\n\n    if (!is3d && isNext3d) {\n        targetMatrix = convertDimension(targetMatrix, 3, 4);\n\n        convert3DMatrixes(matrixes);\n    }\n    if (!isRoot3d && isNext3d) {\n        convert3DMatrixes(nextRootMatrixes);\n    }\n\n\n    // rootMatrix = (...) -> container -> offset -> absolute -> offset -> absolute(targetMatrix)\n    // rootMatrixBeforeOffset = lastOffsetMatrix -> (...) -> container\n    // beforeMatrix = (... -> container -> offset -> absolute) -> offset -> absolute(targetMatrix)\n    // offsetMatrix = (... -> container -> offset -> absolute -> offset) -> absolute(targetMatrix)\n\n    nextRootMatrixes.forEach(info => {\n        rootMatrix = multiply(rootMatrix, info.matrix!, n);\n    });\n    const originalRootContainer = rootContainer || getDocumentBody(target);\n    const endContainer = nextRootMatrixes[0]?.target\n        || getOffsetInfo(originalRootContainer, originalRootContainer, true).offsetParent;\n    const rootMatrixBeforeOffset = nextRootMatrixes.slice(1).reduce((matrix, info) => {\n        return multiply(matrix, info.matrix!, n);\n    }, createIdentityMatrix(n));\n    matrixes.forEach((info, i) => {\n        if (length - 2 === i) {\n            // length - 3\n            beforeMatrix = allMatrix.slice();\n        }\n        if (length - 1 === i) {\n            // length - 2\n            offsetMatrix = allMatrix.slice();\n        }\n\n        // calculate for SVGElement\n        if (!info.matrix) {\n            const nextInfo = matrixes[i + 1];\n            const offset = getSVGOffset(\n                info,\n                nextInfo,\n                endContainer,\n                n,\n                multiply(rootMatrixBeforeOffset, allMatrix, n),\n            );\n            info.matrix = createOriginMatrix(offset, n);\n        }\n        allMatrix = multiply(allMatrix, info.matrix!, n);\n    });\n    const isMatrix3d = !isSVGGraphicElement && is3d;\n\n    if (!targetMatrix) {\n        targetMatrix = createIdentityMatrix(isMatrix3d ? 4 : 3);\n    }\n    const targetTransform = makeMatrixCSS(\n        isSVGGraphicElement && targetMatrix.length === 16\n            ? convertDimension(targetMatrix, 4, 3) : targetMatrix,\n        isMatrix3d,\n    );\n\n    const originalRootMatrix = rootMatrix;\n    rootMatrix = ignoreDimension(rootMatrix, n, n);\n\n    return {\n        hasZoom: containerZoom !== 1 || rootZoom !== 1,\n        hasFixed,\n        matrixes,\n        rootMatrix,\n        originalRootMatrix,\n        beforeMatrix,\n        offsetMatrix,\n        allMatrix,\n        targetMatrix,\n        targetTransform,\n        inlineTransform: target.style.transform,\n        transformOrigin,\n        targetOrigin,\n        is3d: isNext3d,\n        offsetContainer,\n        offsetRootContainer,\n    };\n}\n"
  },
  {
    "path": "packages/react-moveable/src/utils/getElementInfo.ts",
    "content": "import { createIdentityMatrix } from \"@scena/matrix\";\nimport { ElementSizes, MoveablePosition } from \"../types\";\nimport { getSize, getRotationRad } from \"../utils\";\nimport { calculateMatrixStack, MoveableElementMatrixInfo } from \"./calculateMatrixStack\";\nimport { calculateElementPosition } from \"./calculateElementPosition\";\n\nexport interface MoveableElementInfo extends MoveableElementMatrixInfo, MoveablePosition, ElementSizes {\n    width: number;\n    height: number;\n    rotation: number;\n}\n\nexport function calculateElementInfo(\n    target?: SVGElement | HTMLElement | null,\n    container?: SVGElement | HTMLElement | null,\n    rootContainer: HTMLElement | SVGElement | null | undefined = container,\n    isAbsolute3d?: boolean,\n): MoveableElementInfo {\n    let width = 0;\n    let height = 0;\n    let rotation = 0;\n    let allResult: {} = {};\n\n    const sizes = getSize(target);\n\n    if (target) {\n        width = sizes.offsetWidth;\n        height = sizes.offsetHeight;\n    }\n\n    if (target) {\n        const result = calculateMatrixStack(\n            target,\n            container,\n            rootContainer,\n            isAbsolute3d,\n            // prevMatrix, prevRootMatrix, prevN,\n        );\n\n        const position = calculateElementPosition(\n            result.allMatrix,\n            result.transformOrigin,\n            width, height,\n        );\n        allResult = {\n            ...result,\n            ...position,\n        };\n        const rotationPosition = calculateElementPosition(\n            result.allMatrix, [50, 50], 100, 100,\n        );\n        rotation = getRotationRad([rotationPosition.pos1, rotationPosition.pos2], rotationPosition.direction);\n    }\n    const n = isAbsolute3d ? 4 : 3;\n\n    return {\n        hasZoom: false,\n        width,\n        height,\n        rotation,\n        ...sizes,\n        originalRootMatrix: createIdentityMatrix(n),\n        rootMatrix: createIdentityMatrix(n),\n        beforeMatrix: createIdentityMatrix(n),\n        offsetMatrix: createIdentityMatrix(n),\n        allMatrix: createIdentityMatrix(n),\n        targetMatrix: createIdentityMatrix(n),\n        targetTransform: \"\",\n        inlineTransform: \"\",\n        transformOrigin: [0, 0],\n        targetOrigin: [0, 0],\n        is3d: !!isAbsolute3d,\n        left: 0,\n        top: 0,\n        right: 0,\n        bottom: 0,\n        origin: [0, 0],\n        pos1: [0, 0],\n        pos2: [0, 0],\n        pos3: [0, 0],\n        pos4: [0, 0],\n        direction: 1,\n        hasFixed: false,\n        offsetContainer: null,\n        offsetRootContainer: null,\n        matrixes: [],\n        ...allResult,\n    };\n}\n\n\nexport function getElementInfo(\n    target: SVGElement | HTMLElement,\n    container?: SVGElement | HTMLElement | null,\n    rootContainer: SVGElement | HTMLElement | null | undefined = container,\n) {\n    return calculateElementInfo(target, container, rootContainer, true);\n}\n"
  },
  {
    "path": "packages/react-moveable/src/utils/getFixedDirection.ts",
    "content": "import { calculatePosition } from \"../utils\";\nimport { getDirectionByPos, getPosByDirection } from \"../gesto/GestoUtils\";\n\n\nexport function getFixedDirectionInfo(\n    startPositions: number[][],\n    fixedDirection: number[],\n) {\n    const fixedPosition = getPosByDirection(startPositions, fixedDirection);\n    const fixedOffset = [0, 0];\n\n    return {\n        fixedPosition,\n        fixedDirection,\n        fixedOffset,\n    };\n}\n\nexport function getOffsetFixedDirectionInfo(\n    state: {\n        allMatrix: number[];\n        is3d: boolean;\n        width: number;\n        height: number;\n    },\n    fixedDirection: number[],\n) {\n    // for start\n    const {\n        allMatrix,\n        is3d,\n        width,\n        height,\n    } = state;\n    const n = is3d ? 4 : 3;\n    const nextFixedOffset = [\n        width / 2 * (1 + fixedDirection[0]),\n        height / 2 * (1 + fixedDirection[1]),\n    ];\n    const fixedPosition = calculatePosition(allMatrix, nextFixedOffset, n);\n    const fixedOffset = [0, 0];\n\n    return {\n        fixedPosition,\n        fixedDirection,\n        fixedOffset,\n    };\n}\n\n\nexport function getOffsetFixedPositionInfo(\n    state: {\n        allMatrix: number[];\n        is3d: boolean;\n        width: number;\n        height: number;\n    },\n    offsetFixedPosition: number[],\n) {\n    // for start\n    const {\n        allMatrix,\n        is3d,\n        width,\n        height,\n    } = state;\n    const n = is3d ? 4 : 3;\n    const fixedDirection = getDirectionByPos(offsetFixedPosition, width, height);\n    const nextFixedPosition = calculatePosition(allMatrix, offsetFixedPosition, n);\n    const fixedOffset = [\n        width ? 0 : offsetFixedPosition[0],\n        height ? 0 : offsetFixedPosition[1],\n    ];\n\n    return {\n        fixedPosition: nextFixedPosition,\n        fixedDirection,\n        fixedOffset,\n    };\n}\n"
  },
  {
    "path": "packages/react-moveable/src/utils/getMatrixStackInfo.ts",
    "content": "import {\n    convertCSStoMatrix, convertDimension,\n    createIdentityMatrix, createOriginMatrix, createScaleMatrix,\n} from \"@scena/matrix\";\nimport { getCachedStyle } from \"../store/Store\";\nimport { IS_WEBKIT, IS_SAFARI_ABOVE15, IS_FIREFOX, IS_CHROMIUM109 } from \"../consts\";\nimport { MatrixInfo } from \"../types\";\nimport {\n    getOffsetInfo, getElementTransform,\n    getTransformMatrix, getPositionFixedInfo,\n    convert3DMatrixes, getOffsetPosInfo,\n    getSVGMatrix, getBodyOffset, getAbsoluteMatrix,\n} from \"../utils\";\nimport { getDocumentBody, getDocumentElement } from \"@daybrush/utils\";\nimport { parseMat } from \"css-to-mat\";\n\n\nexport function getShadowRoot(parentElement: HTMLElement | SVGElement) {\n    if (parentElement && parentElement.getRootNode) {\n        const rootNode = parentElement.getRootNode();\n\n        if (rootNode.nodeType === 11) {\n            return rootNode;\n        }\n    }\n    return;\n}\n\n\nfunction getIndividualTransforms(getStyle: (property: string) => any) {\n    const scale = getStyle(\"scale\") as string;\n    const rotate = getStyle(\"rotate\") as string;\n    const translate = getStyle(\"translate\") as string;\n    const individualTransforms: string[] = [];\n\n    if (translate && translate !== \"0px\" && translate !== \"none\") {\n        individualTransforms.push(`translate(${translate.split(/\\s+/).join(\",\")})`);\n    }\n    if (rotate && rotate !== \"1\" && rotate !== \"none\") {\n        individualTransforms.push(`rotate(${rotate})`);\n    }\n    if (scale && scale !== \"1\" && scale !== \"none\") {\n        individualTransforms.push(`scale(${scale.split(/\\s+/).join(\",\")})`);\n    }\n    return individualTransforms;\n}\n\nexport interface MatrixStackInfo {\n    zoom: number;\n    offsetContainer: HTMLElement;\n    matrixes: MatrixInfo[];\n    targetMatrix: number[];\n    transformOrigin: number[];\n    targetOrigin: number[];\n    is3d: boolean;\n    hasFixed: boolean;\n}\nexport function getMatrixStackInfo(\n    target: SVGElement | HTMLElement,\n    container?: SVGElement | HTMLElement | null,\n    checkContainer?: boolean,\n): MatrixStackInfo {\n    let el: SVGElement | HTMLElement | null = target;\n    const matrixes: MatrixInfo[] = [];\n    const documentElement = getDocumentElement(target) || getDocumentBody(target);\n    let requestEnd = !checkContainer && target === container || target === documentElement;\n    let isEnd = requestEnd;\n    let is3d = false;\n    let n = 3;\n    let transformOrigin!: number[];\n    let targetTransformOrigin!: number[];\n    let targetMatrix!: number[];\n\n    let hasFixed = false;\n    let offsetContainer = getOffsetInfo(container, container, true).offsetParent;\n    let zoom = 1;\n\n    while (el && !isEnd) {\n        isEnd = requestEnd;\n        const getStyle = getCachedStyle(el);\n        const position = getStyle(\"position\");\n        const transform = getElementTransform(el);\n        const isFixed = position === \"fixed\";\n        const individualTransforms = getIndividualTransforms(getStyle);\n        let matrix: number[] = convertCSStoMatrix(getTransformMatrix(transform));\n        let offsetParent: HTMLElement;\n        let isOffsetEnd = false;\n        let isStatic = false;\n        let parentClientLeft = 0;\n        let parentClientTop = 0;\n        let fixedClientLeft = 0;\n        let fixedClientTop = 0;\n        let fixedInfo: {\n            hasTransform: boolean;\n            fixedContainer: HTMLElement | null;\n        } = {\n            hasTransform: false,\n            fixedContainer: null,\n        };\n\n        if (isFixed) {\n            hasFixed = true;\n            fixedInfo = getPositionFixedInfo(el);\n            offsetContainer = fixedInfo.fixedContainer!;\n        }\n\n        // convert 3 to 4\n        const length = matrix.length;\n\n        if (!is3d && (length === 16 || individualTransforms.length)) {\n            is3d = true;\n            n = 4;\n\n            convert3DMatrixes(matrixes);\n            if (targetMatrix) {\n                targetMatrix = convertDimension(targetMatrix, 3, 4);\n            }\n        }\n        if (is3d && length === 9) {\n            matrix = convertDimension(matrix, 3, 4);\n        }\n        const {\n            tagName,\n            hasOffset,\n            isSVG,\n            origin,\n            targetOrigin,\n            offset: offsetPos,\n        } = getOffsetPosInfo(el, target);\n        let [\n            offsetLeft,\n            offsetTop,\n        ] = offsetPos;\n\n        // no target with svg\n        if (tagName === \"svg\" && !(el as SVGSVGElement).ownerSVGElement && targetMatrix) {\n            // scale matrix for svg's SVGElements.\n            matrixes.push({\n                type: \"target\",\n                target: el,\n                matrix: getSVGMatrix(el as SVGSVGElement, n),\n            });\n            matrixes.push({\n                type: \"offset\",\n                target: el,\n                matrix: createIdentityMatrix(n),\n            });\n        }\n\n\n        const targetZoom = parseFloat(getStyle(\"zoom\")) || 1;\n\n        if (isFixed) {\n            offsetParent = fixedInfo.fixedContainer!;\n            isOffsetEnd = true;\n        } else {\n            const offsetInfo = getOffsetInfo(el, container, false, true, getStyle);\n            const offsetZoom = offsetInfo.offsetZoom;\n\n            offsetParent = offsetInfo.offsetParent;\n            isOffsetEnd = offsetInfo.isEnd;\n            isStatic = offsetInfo.isStatic;\n            zoom *= offsetZoom;\n\n            if ((offsetInfo.isCustomElement || offsetZoom !== 1) && isStatic) {\n                offsetLeft -= offsetParent.offsetLeft;\n                offsetTop -= offsetParent.offsetTop;\n            } else if (IS_FIREFOX || IS_CHROMIUM109) {\n                const parentSlotElement = offsetInfo.parentSlotElement;\n\n                if (parentSlotElement) {\n                    let customOffsetParent: HTMLElement | null = offsetParent;\n                    let customOffsetLeft = 0;\n                    let customOffsetTop = 0;\n\n                    while (customOffsetParent) {\n                        if (!getShadowRoot(customOffsetParent)) {\n                            break;\n                        }\n                        customOffsetLeft += customOffsetParent.offsetLeft;\n                        customOffsetTop += customOffsetParent.offsetTop;\n                        customOffsetParent = customOffsetParent.offsetParent as HTMLElement;\n                    }\n                    offsetLeft -= customOffsetLeft;\n                    offsetTop -= customOffsetTop;\n                }\n            }\n        }\n\n        if (\n            IS_WEBKIT && !IS_SAFARI_ABOVE15\n            && hasOffset && !isSVG && isStatic\n            && (position === \"relative\" || position === \"static\")\n        ) {\n            offsetLeft -= offsetParent.offsetLeft;\n            offsetTop -= offsetParent.offsetTop;\n            requestEnd = requestEnd || isOffsetEnd;\n        }\n\n\n        if (isFixed) {\n            if (hasOffset && fixedInfo.hasTransform) {\n                // border\n                fixedClientLeft = offsetParent.clientLeft;\n                fixedClientTop = offsetParent.clientTop;\n            }\n        } else {\n            if (hasOffset && offsetContainer !== offsetParent) {\n                // border\n                parentClientLeft = offsetParent.clientLeft;\n                parentClientTop = offsetParent.clientTop;\n            }\n            if (hasOffset && offsetParent === documentElement) {\n                const margin = getBodyOffset(el, false);\n\n                offsetLeft += margin[0];\n                offsetTop += margin[1];\n            }\n        }\n\n        matrixes.push({\n            type: \"target\",\n            target: el,\n            matrix: getAbsoluteMatrix(matrix, n, origin),\n        });\n\n        if (individualTransforms.length) {\n            matrixes.push({\n                type: \"offset\",\n                target: el,\n                matrix: createIdentityMatrix(n),\n            });\n\n            matrixes.push({\n                type: \"target\",\n                target: el,\n                matrix: getAbsoluteMatrix(parseMat(individualTransforms), n, origin),\n            });\n        }\n        if (hasOffset) {\n            const isElementTarget = el === target;\n            const scrollLeft = isElementTarget ? 0 : el.scrollLeft;\n            const scrollTop = isElementTarget ? 0 : el.scrollTop;\n\n            matrixes.push({\n                type: \"offset\",\n                target: el,\n                matrix: createOriginMatrix([\n                    offsetLeft - scrollLeft + parentClientLeft - fixedClientLeft,\n                    offsetTop - scrollTop + parentClientTop - fixedClientTop,\n                ], n),\n            });\n        } else {\n            // svg\n            matrixes.push({\n                type: \"offset\",\n                target: el,\n                origin,\n            });\n        }\n        // transform으로 계산되지 않는 zoom을 위한 (0, 0) 을 기준 matrix 추가.\n        if (targetZoom !== 1) {\n            matrixes.push({\n                type: \"zoom\",\n                target: el,\n                matrix: getAbsoluteMatrix(createScaleMatrix([targetZoom, targetZoom], n), n, [0, 0]),\n            });\n        }\n        if (!targetMatrix) {\n            targetMatrix = matrix;\n        }\n        if (!transformOrigin) {\n            transformOrigin = origin;\n        }\n        if (!targetTransformOrigin) {\n            targetTransformOrigin = targetOrigin;\n        }\n\n        if (isEnd || isFixed) {\n            break;\n        } else {\n            el = offsetParent;\n            requestEnd = isOffsetEnd;\n        }\n        if (!checkContainer || el === documentElement) {\n            isEnd = requestEnd;\n        }\n    }\n    if (!targetMatrix) {\n        targetMatrix = createIdentityMatrix(n);\n    }\n    if (!transformOrigin) {\n        transformOrigin = [0, 0];\n    }\n    if (!targetTransformOrigin) {\n        targetTransformOrigin = [0, 0];\n    }\n\n    return {\n        zoom,\n        offsetContainer,\n        matrixes,\n        targetMatrix,\n        transformOrigin,\n        targetOrigin: targetTransformOrigin,\n        is3d,\n        hasFixed,\n    };\n}\n"
  },
  {
    "path": "packages/react-moveable/src/utils/getMoveableTargetInfo.ts",
    "content": "import { plus, getOrigin, multiply, minus } from \"@scena/matrix\";\nimport { getCachedClientRect, getCachedStyle } from \"../store/Store\";\nimport { MoveableClientRect, Writable } from \"../types\";\nimport {\n    calculateInversePosition,\n    getClientRect, getClientRectByPosition, getOffsetInfo, resetClientRect,\n    getTransformOriginArray,\n} from \"../utils\";\nimport { calculateElementInfo, MoveableElementInfo } from \"./getElementInfo\";\nimport { calculateElementPosition } from \"./calculateElementPosition\";\n\n\nexport interface MoveableTargetInfo extends MoveableElementInfo {\n    targetClientRect: MoveableClientRect;\n    containerClientRect: MoveableClientRect;\n    moveableClientRect: MoveableClientRect;\n    rootContainerClientRect: MoveableClientRect;\n    beforeDirection: 1 | -1;\n    beforeOrigin: number[];\n    offsetDelta: number[],\n    originalBeforeOrigin: number[];\n    target: HTMLElement | SVGElement | null | undefined;\n    style: Partial<Writable<CSSStyleDeclaration>>;\n}\n\nexport function getMoveableTargetInfo(\n    moveableElement?: HTMLElement | null,\n    target?: HTMLElement | SVGElement | null,\n    container?: HTMLElement | SVGElement | null,\n    parentContainer?: HTMLElement | SVGElement | null,\n    rootContainer?: HTMLElement | SVGElement | null,\n    requestStyles: Array<keyof CSSStyleDeclaration> = [],\n): MoveableTargetInfo {\n    let beforeDirection: 1 | -1 = 1;\n    let beforeOrigin = [0, 0];\n    let targetClientRect = resetClientRect();\n    let moveableClientRect = resetClientRect();\n    let containerClientRect = resetClientRect();\n    let rootContainerClientRect = resetClientRect();\n    let offsetDelta = [0, 0];\n    const style: Partial<Writable<CSSStyleDeclaration>> = {};\n\n    const result = calculateElementInfo(\n        target, container!, rootContainer!,\n        true,\n    );\n    if (target) {\n        const getStyle = getCachedStyle(target);\n\n        requestStyles.forEach(name => {\n            (style as any)[name] = getStyle(name as any);\n        });\n        const n = result.is3d ? 4 : 3;\n        const beforePosition = calculateElementPosition(\n            result.offsetMatrix,\n            plus(result.transformOrigin, getOrigin(result.targetMatrix, n)),\n            result.width, result.height,\n        );\n        beforeDirection = beforePosition.direction;\n        beforeOrigin = plus(\n            beforePosition.origin,\n            [beforePosition.left - result.left, beforePosition.top - result.top],\n        );\n\n        rootContainerClientRect = getClientRect(result.offsetRootContainer!);\n\n\n        const offsetContainer = getOffsetInfo(parentContainer, parentContainer, true).offsetParent\n            || result.offsetRootContainer!;\n\n        if (result.hasZoom) {\n            const absoluteTargetPosition = calculateElementPosition(\n                multiply(result.originalRootMatrix, result.allMatrix),\n                result.transformOrigin,\n                result.width, result.height,\n            );\n            const absoluteContainerPosition = calculateElementPosition(\n                result.originalRootMatrix,\n                getTransformOriginArray(getCachedStyle(offsetContainer)(\"transformOrigin\")).map(pos => parseFloat(pos)),\n                offsetContainer.offsetWidth, offsetContainer.offsetHeight,\n            );\n            targetClientRect = getClientRectByPosition(absoluteTargetPosition, rootContainerClientRect);\n            containerClientRect = getClientRectByPosition(\n                absoluteContainerPosition,\n                rootContainerClientRect,\n                offsetContainer,\n                true,\n            );\n\n            if (moveableElement) {\n                const left = absoluteTargetPosition.left;\n                const top = absoluteTargetPosition.top;\n                moveableClientRect = getClientRectByPosition({\n                    left,\n                    top,\n                    bottom: top,\n                    right: top,\n                }, rootContainerClientRect);\n            }\n        } else {\n            targetClientRect = getClientRect(target);\n            containerClientRect = getCachedClientRect(offsetContainer);\n\n            if (moveableElement) {\n                moveableClientRect = getClientRect(moveableElement);\n            }\n            const {\n                left: containerClientRectLeft,\n                top: containerClientRectTop,\n                clientLeft: containterClientLeft,\n                clientTop: containerClientTop,\n            } = containerClientRect;\n            const clientDelta = [\n                targetClientRect.left - containerClientRectLeft,\n                targetClientRect.top - containerClientRectTop,\n            ];\n\n            offsetDelta = minus(\n                calculateInversePosition(result.rootMatrix, clientDelta, 4),\n                [containterClientLeft! + result.left, containerClientTop! + result.top],\n            );\n        }\n    }\n\n    return {\n        targetClientRect,\n        containerClientRect,\n        moveableClientRect,\n        rootContainerClientRect,\n        beforeDirection,\n        beforeOrigin,\n        originalBeforeOrigin: beforeOrigin,\n        target,\n        style,\n        offsetDelta,\n        ...result,\n    };\n}\n"
  },
  {
    "path": "packages/react-moveable/src/utils/persist.ts",
    "content": "import { minus } from \"@scena/matrix\";\nimport { getMinMaxs } from \"overlap-area\";\nimport { MoveableManagerState, PersistRectData } from \"../types\";\n\n\nexport function getPersistState(rect: PersistRectData): Partial<MoveableManagerState> | null {\n    let {\n        pos1,\n        pos2,\n        pos3,\n        pos4,\n    } = rect;\n    if (!pos1 || !pos2 || !pos3 || !pos4) {\n        return null;\n    }\n    const minPos = getMinMaxs([pos1!, pos2!, pos3!, pos4!]);\n    const posDelta = [minPos.minX, minPos.minY];\n    const origin = minus(rect.origin!, posDelta);\n\n    pos1 = minus(pos1, posDelta);\n    pos2 = minus(pos2, posDelta);\n    pos3 = minus(pos3, posDelta);\n    pos4 = minus(pos4, posDelta);\n    return {\n        ...rect,\n        left: rect.left,\n        top: rect.top,\n        posDelta,\n        pos1,\n        pos2,\n        pos3,\n        pos4,\n        origin,\n        beforeOrigin: origin,\n        // originalBeforeOrigin: origin,\n        isPersisted: true,\n    };\n}\n"
  },
  {
    "path": "packages/react-moveable/src/utils.tsx",
    "content": "import { PREFIX, IS_WEBKIT605, TINY_NUM } from \"./consts\";\nimport { prefixNames } from \"framework-utils\";\nimport {\n    isUndefined, isObject, splitUnit,\n    IObject, hasClass, isArray, isString, getRad,\n    isFunction, convertUnitSize, between, getKeys, decamelize, isNumber,\n    getDocumentBody,\n    getDocumentElement,\n    getWindow,\n    isNode,\n    isWindow,\n    counter,\n} from \"@daybrush/utils\";\nimport {\n    multiply, invert,\n    convertDimension, createIdentityMatrix,\n    createOriginMatrix, convertPositionMatrix, calculate,\n    multiplies,\n    minus,\n    createScaleMatrix,\n    plus,\n    convertMatrixtoCSS,\n    rotate,\n} from \"@scena/matrix\";\nimport {\n    MoveableManagerState, Able, MoveableClientRect,\n    MoveableProps, ArrayFormat, MoveableRefType,\n    MatrixInfo, ExcludeEndParams, ExcludeParams,\n    ElementSizes, TransformObject,\n    MoveableRefTargetsResultType, MoveableRefTargetType, MoveableManagerInterface, CSSObject, PaddingBox,\n} from \"./types\";\nimport { parse, toMat, calculateMatrixDist, parseMat } from \"css-to-mat\";\nimport { getBeforeRenderableDatas, getDragDist } from \"./gesto/GestoUtils\";\nimport { getGestoData } from \"./gesto/GestoData\";\nimport { GetStyle, getCachedStyle } from \"./store/Store\";\nimport { normalized } from \"./ables/Snappable\";\n\nexport function round(num: number) {\n    return Math.round(num);\n}\nexport function multiply2(pos1: number[], pos2: number[]) {\n    return [\n        pos1[0] * pos2[0],\n        pos1[1] * pos2[1],\n    ];\n}\nexport function prefix(...classNames: string[]) {\n    return prefixNames(PREFIX, ...classNames);\n}\n\nexport function defaultSync(fn: () => void) {\n    fn();\n}\n\nexport function createIdentityMatrix3() {\n    return createIdentityMatrix(3);\n}\n\nexport function getTransformMatrix(transform: string | number[]) {\n    if (!transform || transform === \"none\") {\n        return [1, 0, 0, 1, 0, 0];\n\n    }\n    if (isObject(transform)) {\n        return transform;\n    }\n    return parseMat(transform);\n}\nexport function getAbsoluteMatrix(matrix: number[], n: number, origin: number[]) {\n    return multiplies(\n        n,\n        createOriginMatrix(origin, n),\n        matrix,\n        createOriginMatrix(origin.map(a => -a), n),\n    );\n}\nexport function measureSVGSize(el: SVGElement, unit: string, isHorizontal: boolean) {\n    if (unit === \"%\") {\n        const viewBox = getSVGViewBox(el.ownerSVGElement!);\n\n        return viewBox[isHorizontal ? \"width\" : \"height\"] / 100;\n    }\n    return 1;\n}\nexport function getBeforeTransformOrigin(el: SVGElement) {\n    const relativeOrigin = getTransformOrigin(getComputedStyle(el, \":before\"));\n\n    return relativeOrigin.map((o, i) => {\n        const { value, unit } = splitUnit(o);\n\n        return value * measureSVGSize(el, unit, i === 0);\n    });\n}\nexport function getTransformOriginArray(transformOrigin: string) {\n    return transformOrigin ? transformOrigin.split(\" \") : [\"0\", \"0\"];\n}\nexport function getTransformOrigin(style: CSSStyleDeclaration) {\n    return getTransformOriginArray(style.transformOrigin);\n}\nexport function getElementTransform(\n    target: HTMLElement | SVGElement,\n): string {\n    const getStyle = getCachedStyle(target);\n    const computedTransform = getStyle(\"transform\");\n\n    if (computedTransform && computedTransform !== \"none\") {\n        return computedTransform;\n    }\n    if (\"transform\" in target) {\n        const list = (target as any).transform as SVGAnimatedTransformList;\n        const baseVal = list.baseVal;\n\n        if (!baseVal) {\n            return \"\";\n        }\n        const length = baseVal.length;\n\n        if (!length) {\n            return \"\";\n        }\n\n        const matrixes: string[] = [];\n\n        for (let i = 0; i < length; ++i) {\n            const matrix = baseVal[i].matrix;\n\n            matrixes.push(`matrix(${([\"a\", \"b\", \"c\", \"d\", \"e\", \"f\"] as const).map(chr => matrix[chr]).join(\", \")})`);\n        }\n        return matrixes.join(\" \");\n\n    }\n    return \"\";\n}\n\nexport function getOffsetInfo(\n    el: SVGElement | HTMLElement | null | undefined,\n    lastParent: SVGElement | HTMLElement | null | undefined,\n    isParent?: boolean,\n    checkZoom?: boolean,\n    getTargetStyle?: GetStyle,\n) {\n\n    const documentElement = getDocumentElement(el!) || getDocumentBody(el!);\n    let hasSlot = false;\n    let target: HTMLElement | SVGElement | null | undefined;\n    let parentSlotElement: HTMLElement | null | undefined;\n\n    if (!el || isParent) {\n        target = el;\n    } else {\n        const assignedSlotParentElement = el?.assignedSlot?.parentElement;\n        const parentElement = el.parentElement;\n\n        if (assignedSlotParentElement) {\n            hasSlot = true;\n            parentSlotElement = parentElement;\n            target = assignedSlotParentElement;\n        } else {\n            target = parentElement;\n        }\n    }\n\n    let isCustomElement = false;\n    let isEnd = el === lastParent || target === lastParent;\n    let position = \"relative\";\n    let offsetZoom = 1;\n\n\n    const targetZoom = parseFloat(getTargetStyle?.(\"zoom\")) || 1;\n    const targetPosition = getTargetStyle?.(\"position\");\n\n\n\n    while (target && target !== documentElement) {\n        if (lastParent === target) {\n            isEnd = true;\n        }\n        const getStyle = getCachedStyle(target);\n        const tagName = target.tagName.toLowerCase();\n        const transform = getElementTransform(target as SVGElement);\n        const willChange = getStyle(\"willChange\");\n        const zoom = parseFloat(getStyle(\"zoom\")) || 1;\n\n        position = getStyle(\"position\");\n        if (checkZoom && zoom !== 1) {\n            offsetZoom = zoom;\n            break;\n        }\n        if (\n            // offsetParent is the parentElement if the target's zoom is not 1 and not absolute.\n            !isParent && checkZoom && targetZoom !== 1 && targetPosition && targetPosition !== \"absolute\"\n            || tagName === \"svg\"\n            || tagName === \"foreignobject\"\n            || position !== \"static\"\n            || (transform && transform !== \"none\")\n            || willChange === \"transform\"\n        ) {\n            break;\n        }\n        const slotParentNode = el?.assignedSlot?.parentNode;\n        const targetParentNode = target.parentNode;\n\n        if (slotParentNode) {\n            hasSlot = true;\n            parentSlotElement = targetParentNode as HTMLElement;\n        }\n        const parentNode = targetParentNode;\n\n        if (parentNode && parentNode.nodeType === 11) {\n            // Shadow Root\n            target = (parentNode as ShadowRoot).host as HTMLElement;\n            isCustomElement = true;\n            position = getCachedStyle(target)(\"position\");\n            break;\n        }\n        target = parentNode as HTMLElement | SVGElement;\n        position = \"relative\";\n    }\n    return {\n        offsetZoom,\n        hasSlot,\n        parentSlotElement,\n        isCustomElement,\n        isStatic: position === \"static\",\n        isEnd: isEnd || !target || target === documentElement,\n        offsetParent: target as HTMLElement || documentElement,\n    };\n}\n\nexport function getOffsetPosInfo(\n    el: HTMLElement | SVGElement,\n    target: HTMLElement | SVGElement,\n) {\n    const tagName = el.tagName.toLowerCase();\n    let offsetLeft = (el as HTMLElement).offsetLeft;\n    let offsetTop = (el as HTMLElement).offsetTop;\n    const getStyle = getCachedStyle(el);\n    // svg\n    const isSVG = isUndefined(offsetLeft);\n    let hasOffset = !isSVG;\n    let origin: number[];\n    let targetOrigin: number[];\n    // inner svg element\n    if (!hasOffset && (tagName !== \"svg\" || (el as SVGElement).ownerSVGElement)) {\n        origin = IS_WEBKIT605\n            ? getBeforeTransformOrigin(el as SVGElement)\n            : getTransformOriginArray(getStyle(\"transformOrigin\")).map(pos => parseFloat(pos));\n\n        targetOrigin = origin.slice();\n        hasOffset = true;\n\n        if (tagName === \"svg\") {\n            offsetLeft = 0;\n            offsetTop = 0;\n        } else {\n            [\n                offsetLeft, offsetTop, origin[0], origin[1],\n            ] = getSVGGraphicsOffset(\n                el as SVGGraphicsElement,\n                origin,\n                el === target && target.tagName.toLowerCase() === \"g\",\n            );\n        }\n    } else {\n        origin = getTransformOriginArray(getStyle(\"transformOrigin\")).map(pos => parseFloat(pos));\n\n        targetOrigin = origin.slice();\n        // console.log(getStyle(\"transformOrigin\"), targetOrigin);\n    }\n    return {\n        tagName,\n        isSVG,\n        hasOffset,\n        offset: [offsetLeft || 0, offsetTop || 0],\n        origin,\n        targetOrigin,\n    };\n}\nexport function getBodyOffset(\n    el: HTMLElement | SVGElement,\n    isSVG: boolean,\n) {\n    const getStyle = getCachedStyle(el);\n    const getBodyStyle = getCachedStyle(getDocumentBody(el));\n    const bodyPosition = getBodyStyle(\"position\");\n    if (!isSVG && (!bodyPosition || bodyPosition === \"static\")) {\n        return [0, 0];\n    }\n\n    let marginLeft = parseInt(getBodyStyle(\"marginLeft\"), 10);\n    let marginTop = parseInt(getBodyStyle(\"marginTop\"), 10);\n\n    if (getStyle(\"position\") === \"absolute\") {\n        if (getStyle(\"top\") !== \"auto\" || getStyle(\"bottom\") !== \"auto\") {\n            marginTop = 0;\n        }\n        if (getStyle(\"left\") !== \"auto\" || getStyle(\"right\") !== \"auto\") {\n            marginLeft = 0;\n        }\n    }\n\n    return [marginLeft, marginTop];\n}\nexport function convert3DMatrixes(matrixes: MatrixInfo[]) {\n    matrixes.forEach(info => {\n        const matrix = info.matrix;\n\n        if (matrix) {\n            info.matrix = convertDimension(matrix, 3, 4);\n        }\n    });\n}\n\nexport function getPositionFixedInfo(el: HTMLElement | SVGElement) {\n    let fixedContainer = el.parentElement;\n    let hasTransform = false;\n    const body = getDocumentBody(el);\n\n    while (fixedContainer) {\n        const transform = getComputedStyle(fixedContainer).transform;\n\n\n        if (transform && transform !== \"none\") {\n            hasTransform = true;\n            break;\n        }\n        if (fixedContainer === body) {\n            break;\n        }\n        fixedContainer = fixedContainer.parentElement;\n    }\n\n    return {\n        fixedContainer: fixedContainer || body,\n        hasTransform,\n    };\n}\n\nexport function makeMatrixCSS(matrix: number[], is3d: boolean = matrix.length > 9) {\n    return `${is3d ? \"matrix3d\" : \"matrix\"}(${convertMatrixtoCSS(matrix, !is3d).join(\",\")})`;\n}\nexport function getSVGViewBox(el: SVGSVGElement) {\n    const clientWidth = el.clientWidth;\n    const clientHeight = el.clientHeight;\n\n    if (!el) {\n        return { x: 0, y: 0, width: 0, height: 0, clientWidth, clientHeight };\n    }\n    const viewBox = el.viewBox;\n    const baseVal = (viewBox && viewBox.baseVal) || { x: 0, y: 0, width: 0, height: 0 };\n\n    return {\n        x: baseVal.x,\n        y: baseVal.y,\n        width: baseVal.width || clientWidth,\n        height: baseVal.height || clientHeight,\n        clientWidth,\n        clientHeight,\n    };\n}\nexport function getSVGMatrix(\n    el: SVGSVGElement,\n    n: number,\n) {\n    const {\n        width: viewBoxWidth,\n        height: viewBoxHeight,\n        clientWidth,\n        clientHeight,\n    } = getSVGViewBox(el);\n    const scaleX = clientWidth / viewBoxWidth;\n    const scaleY = clientHeight / viewBoxHeight;\n\n    const preserveAspectRatio = el.preserveAspectRatio.baseVal;\n    // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio\n    const align = preserveAspectRatio.align;\n    // 1 : meet 2: slice\n    const meetOrSlice = preserveAspectRatio.meetOrSlice;\n    const svgOrigin = [0, 0];\n    const scale = [scaleX, scaleY];\n    const translate = [0, 0];\n\n    if (align !== 1) {\n        const xAlign = (align - 2) % 3;\n        const yAlign = Math.floor((align - 2) / 3);\n\n        svgOrigin[0] = viewBoxWidth * xAlign / 2;\n        svgOrigin[1] = viewBoxHeight * yAlign / 2;\n\n        const scaleDimension = meetOrSlice === 2 ? Math.max(scaleY, scaleX) : Math.min(scaleX, scaleY);\n\n        scale[0] = scaleDimension;\n        scale[1] = scaleDimension;\n\n        translate[0] = (clientWidth - viewBoxWidth) / 2 * xAlign;\n        translate[1] = (clientHeight - viewBoxHeight) / 2 * yAlign;\n    }\n    const scaleMatrix = createScaleMatrix(scale, n);\n    [\n        scaleMatrix[n * (n - 1)],\n        scaleMatrix[n * (n - 1) + 1],\n    ] = translate;\n\n    return getAbsoluteMatrix(\n        scaleMatrix,\n        n,\n        svgOrigin,\n    );\n}\nexport function getSVGGraphicsOffset(\n    el: SVGGraphicsElement,\n    origin: number[],\n    isGTarget?: boolean,\n) {\n    const tagName = el.tagName.toLowerCase();\n\n    if (!el.getBBox || !isGTarget && tagName === \"g\") {\n        return [0, 0, 0, 0];\n    }\n    const getStyle = getCachedStyle(el);\n    const isFillBox = getStyle(\"transform-box\") === \"fill-box\";\n\n    const bbox = el.getBBox();\n    const viewBox = getSVGViewBox(el.ownerSVGElement!);\n    let x = bbox.x;\n    let y = bbox.y;\n\n    // x, y가 0으로 나타나는 버그\n    if (tagName === \"foreignobject\" && (!x && !y)) {\n        x = parseFloat(el.getAttribute(\"x\")!) || 0;\n        y = parseFloat(el.getAttribute(\"y\")!) || 0;\n    }\n    const left = x - viewBox.x;\n    const top = y - viewBox.y;\n    const originX = isFillBox ? origin[0] : origin[0] - left;\n    const originY = isFillBox ? origin[1] : origin[1] - top;\n\n    // if (isFillBox) {\n    //     const bbox = (el as SVGGraphicsElement).getBBox();\n    //     const x = parseFloat(getStyle(\"x\")) || bbox.x;\n    //     const y = parseFloat(getStyle(\"y\")) || bbox.y;\n\n    //     const xScale = bbox.x / x;\n    //     const yScale = bbox.y / y;\n\n    //     console.log(x, y);\n\n    //     originX *= xScale;\n    //     originY *= yScale;\n    // }\n\n    return [left, top, originX, originY];\n}\nexport function calculatePosition(matrix: number[], pos: number[], n: number) {\n    return calculate(matrix, convertPositionMatrix(pos, n), n);\n}\nexport function calculatePoses(matrix: number[], width: number, height: number, n: number) {\n    return [[0, 0], [width, 0], [0, height], [width, height]].map(pos => calculatePosition(matrix, pos, n));\n}\nexport function getRect(poses: number[][]) {\n    const posesX = poses.map(pos => pos[0]);\n    const posesY = poses.map(pos => pos[1]);\n    const left = Math.min(...posesX);\n    const top = Math.min(...posesY);\n    const right = Math.max(...posesX);\n    const bottom = Math.max(...posesY);\n    const rectWidth = right - left;\n    const rectHeight = bottom - top;\n\n    return {\n        left, top,\n        right, bottom,\n        width: rectWidth,\n        height: rectHeight,\n    };\n}\nexport function calculateRect(matrix: number[], width: number, height: number, n: number) {\n    const poses = calculatePoses(matrix, width, height, n);\n\n    return getRect(poses);\n}\nexport function getSVGOffset(\n    offsetInfo: MatrixInfo,\n    targetInfo: MatrixInfo,\n    container: HTMLElement | SVGElement,\n    n: number,\n    beforeMatrix: number[],\n) {\n    const target = offsetInfo.target;\n    const origin = offsetInfo.origin!;\n    const targetMatrix = targetInfo.matrix!;\n    const {\n        offsetWidth: width,\n        offsetHeight: height,\n    } = getSize(target);\n    const containerClientRect = container.getBoundingClientRect();\n    let margin = [0, 0];\n\n    if (container === getDocumentBody(container)) {\n        margin = getBodyOffset(target, true);\n    }\n\n    const rect = target.getBoundingClientRect();\n    const rectLeft\n        = rect.left - containerClientRect.left + container.scrollLeft\n        - (container.clientLeft || 0) + margin[0];\n    const rectTop\n        = rect.top - containerClientRect.top + container.scrollTop\n        - (container.clientTop || 0) + margin[1];\n    const rectWidth = rect.width;\n    const rectHeight = rect.height;\n\n    const mat = multiplies(\n        n,\n        beforeMatrix,\n        targetMatrix,\n    );\n    const {\n        left: prevLeft,\n        top: prevTop,\n        width: prevWidth,\n        height: prevHeight,\n    } = calculateRect(mat, width, height, n);\n    const posOrigin = calculatePosition(mat, origin, n);\n    const prevOrigin = minus(posOrigin, [prevLeft, prevTop]);\n    const rectOrigin = [\n        rectLeft + prevOrigin[0] * rectWidth / prevWidth,\n        rectTop + prevOrigin[1] * rectHeight / prevHeight,\n    ];\n    const offset = [0, 0];\n    let count = 0;\n\n    while (++count < 10) {\n        const inverseBeforeMatrix = invert(beforeMatrix, n);\n        [offset[0], offset[1]] = minus(\n            calculatePosition(inverseBeforeMatrix, rectOrigin, n),\n            calculatePosition(inverseBeforeMatrix, posOrigin, n),\n        );\n        const mat2 = multiplies(\n            n,\n            beforeMatrix,\n            createOriginMatrix(offset, n),\n            targetMatrix,\n        );\n        const {\n            left: nextLeft,\n            top: nextTop,\n        } = calculateRect(mat2, width, height, n);\n        const distLeft = nextLeft - rectLeft;\n        const distTop = nextTop - rectTop;\n\n        if (abs(distLeft) < 2 && abs(distTop) < 2) {\n            break;\n        }\n        rectOrigin[0] -= distLeft;\n        rectOrigin[1] -= distTop;\n    }\n    return offset.map(p => Math.round(p));\n}\n\nexport function calculateMoveableClientPositions(\n    rootMatrix: number[],\n    poses: number[][],\n    rootClientRect: MoveableClientRect,\n) {\n    const is3d = rootMatrix.length === 16;\n    const n = is3d ? 4 : 3;\n    const rootPoses = poses.map(pos => calculatePosition(rootMatrix, pos, n));\n    const { left, top } = rootClientRect;\n\n    return rootPoses.map(pos => {\n        return [pos[0] + left, pos[1] + top];\n    });\n\n}\n\nexport function getDistSize(vec: number[]) {\n    return Math.sqrt(vec[0] * vec[0] + vec[1] * vec[1]);\n}\nexport function getDiagonalSize(pos1: number[], pos2: number[]) {\n    return getDistSize([\n        pos2[0] - pos1[0],\n        pos2[1] - pos1[1],\n    ]);\n}\nexport function getLineStyle(pos1: number[], pos2: number[], zoom = 1, rad: number = getRad(pos1, pos2)) {\n    const width = getDiagonalSize(pos1, pos2);\n\n    return {\n        transform: `translateY(-50%) translate(${pos1[0]}px, ${pos1[1]}px) rotate(${rad}rad) scaleY(${zoom})`,\n        width: `${width}px`,\n    };\n}\nexport function getControlTransform(rotation: number, zoom: number, ...poses: number[][]) {\n    const length = poses.length;\n\n    const x = poses.reduce((prev, pos) => prev + pos[0], 0) / length;\n    const y = poses.reduce((prev, pos) => prev + pos[1], 0) / length;\n    return {\n        transform: `translateZ(0px) translate(${x}px, ${y}px) rotate(${rotation}rad) scale(${zoom})`,\n    };\n}\n\nexport function getProps<Props>(props: Props, ableName: keyof Props): Props {\n    const self = props[ableName];\n\n    if (isObject(self)) {\n        return {\n            ...props,\n            ...self,\n        };\n    }\n    return props;\n}\n\nexport function getSize(\n    target?: SVGElement | HTMLElement | null,\n): ElementSizes {\n    const hasOffset = target && !isUndefined((target as any).offsetWidth);\n\n    let offsetWidth = 0;\n    let offsetHeight = 0;\n    let clientWidth = 0;\n    let clientHeight = 0;\n    let cssWidth = 0;\n    let cssHeight = 0;\n    let contentWidth = 0;\n    let contentHeight = 0;\n\n    let minWidth = 0;\n    let minHeight = 0;\n    let minOffsetWidth = 0;\n    let minOffsetHeight = 0;\n\n    let maxWidth = Infinity;\n    let maxHeight = Infinity;\n    let maxOffsetWidth = Infinity;\n    let maxOffsetHeight = Infinity;\n    let inlineCSSWidth = 0;\n    let inlineCSSHeight = 0;\n    let svg = false;\n\n    if (target) {\n        if (!hasOffset && (target as SVGElement).ownerSVGElement) {\n            // check svg elements\n            const bbox = (target as SVGGraphicsElement).getBBox();\n\n            svg = true;\n            offsetWidth = bbox.width;\n            offsetHeight = bbox.height;\n            cssWidth = offsetWidth;\n            cssHeight = offsetHeight;\n            contentWidth = offsetWidth;\n            contentHeight = offsetHeight;\n            clientWidth = offsetWidth;\n            clientHeight = offsetHeight;\n        } else {\n            // check html elements\n            const getStyle = getCachedStyle(target);\n            const targetStyle = target.style;\n            const boxSizing = getStyle(\"boxSizing\") === \"border-box\";\n            const borderLeft = parseFloat(getStyle(\"borderLeftWidth\")) || 0;\n            const borderRight = parseFloat(getStyle(\"borderRightWidth\")) || 0;\n            const borderTop = parseFloat(getStyle(\"borderTopWidth\")) || 0;\n            const borderBottom = parseFloat(getStyle(\"borderBottomWidth\")) || 0;\n            const paddingLeft = parseFloat(getStyle(\"paddingLeft\")) || 0;\n            const paddingRight = parseFloat(getStyle(\"paddingRight\")) || 0;\n            const paddingTop = parseFloat(getStyle(\"paddingTop\")) || 0;\n            const paddingBottom = parseFloat(getStyle(\"paddingBottom\")) || 0;\n\n            const horizontalPadding = paddingLeft + paddingRight;\n            const verticalPadding = paddingTop + paddingBottom;\n            const horizontalBorder = borderLeft + borderRight;\n            const verticalBorder = borderTop + borderBottom;\n            const horizontalOffset = horizontalPadding + horizontalBorder;\n            const verticalOffset = verticalPadding + verticalBorder;\n            const position = getStyle(\"position\");\n\n            let containerWidth = 0;\n            let containerHeight = 0;\n\n            // SVGSVGElement, HTMLElement\n            if (\"clientLeft\" in target) {\n                let parentElement: HTMLElement | null = null;\n\n                if (position === \"absolute\") {\n                    const offsetInfo = getOffsetInfo(target, getDocumentBody(target));\n                    parentElement = offsetInfo.offsetParent;\n\n                } else {\n                    parentElement = target.parentElement;\n                }\n                if (parentElement) {\n                    const getParentStyle = getCachedStyle(parentElement);\n\n                    containerWidth = parseFloat(getParentStyle(\"width\"));\n                    containerHeight = parseFloat(getParentStyle(\"height\"));\n                }\n            }\n            minWidth = Math.max(\n                horizontalPadding,\n                convertUnitSize(getStyle(\"minWidth\"), containerWidth) || 0,\n            );\n            minHeight = Math.max(\n                verticalPadding,\n                convertUnitSize(getStyle(\"minHeight\"), containerHeight) || 0,\n            );\n            maxWidth = convertUnitSize(getStyle(\"maxWidth\"), containerWidth);\n            maxHeight = convertUnitSize(getStyle(\"maxHeight\"), containerHeight);\n\n            if (isNaN(maxWidth)) {\n                maxWidth = Infinity;\n            }\n            if (isNaN(maxHeight)) {\n                maxHeight = Infinity;\n            }\n            inlineCSSWidth = convertUnitSize(targetStyle.width, 0) || 0;\n            inlineCSSHeight = convertUnitSize(targetStyle.height, 0) || 0;\n            cssWidth = parseFloat(getStyle(\"width\")) || 0;\n            cssHeight = parseFloat(getStyle(\"height\")) || 0;\n\n\n            contentWidth = abs(cssWidth - inlineCSSWidth) < 1\n                ? between(minWidth, inlineCSSWidth || cssWidth, maxWidth)\n                : cssWidth;\n            contentHeight = abs(cssHeight - inlineCSSHeight) < 1\n                ? between(minHeight, inlineCSSHeight || cssHeight, maxHeight)\n                : cssHeight;\n\n            offsetWidth = contentWidth;\n            offsetHeight = contentHeight;\n            clientWidth = contentWidth;\n            clientHeight = contentHeight;\n\n            if (boxSizing) {\n                maxOffsetWidth = maxWidth;\n                maxOffsetHeight = maxHeight;\n                minOffsetWidth = minWidth;\n                minOffsetHeight = minHeight;\n                contentWidth = offsetWidth - horizontalOffset;\n                contentHeight = offsetHeight - verticalOffset;\n            } else {\n                maxOffsetWidth = maxWidth + horizontalOffset;\n                maxOffsetHeight = maxHeight + verticalOffset;\n                minOffsetWidth = minWidth + horizontalOffset;\n                minOffsetHeight = minHeight + verticalOffset;\n                offsetWidth = contentWidth + horizontalOffset;\n                offsetHeight = contentHeight + verticalOffset;\n            }\n            clientWidth = contentWidth + horizontalPadding;\n            clientHeight = contentHeight + verticalPadding;\n        }\n    }\n\n    return {\n        svg,\n        offsetWidth,\n        offsetHeight,\n        clientWidth,\n        clientHeight,\n        contentWidth,\n        contentHeight,\n        inlineCSSWidth,\n        inlineCSSHeight,\n        cssWidth,\n        cssHeight,\n        minWidth,\n        minHeight,\n        maxWidth,\n        maxHeight,\n        minOffsetWidth,\n        minOffsetHeight,\n        maxOffsetWidth,\n        maxOffsetHeight,\n    };\n}\nexport function getRotationRad(\n    poses: number[][],\n    direction: number,\n) {\n    return getRad(direction > 0 ? poses[0] : poses[1], direction > 0 ? poses[1] : poses[0]);\n}\n\nexport function resetClientRect(): MoveableClientRect {\n    return {\n        left: 0, top: 0,\n        width: 0, height: 0,\n        right: 0,\n        bottom: 0,\n        clientLeft: 0, clientTop: 0,\n        clientWidth: 0, clientHeight: 0,\n        scrollWidth: 0, scrollHeight: 0,\n    };\n}\n\nexport function getExtendsRect(\n    el: HTMLElement | SVGElement,\n    rect: MoveableClientRect,\n): MoveableClientRect {\n    const isRoot = el === getDocumentBody(el) || el === getDocumentElement(el);\n\n\n    const extendsRect = {\n        clientLeft: el.clientLeft,\n        clientTop: el.clientTop,\n        clientWidth: el.clientWidth,\n        clientHeight: el.clientHeight,\n        scrollWidth: el.scrollWidth,\n        scrollHeight: el.scrollHeight,\n        overflow: false,\n    };\n\n    if (isRoot) {\n        extendsRect.clientHeight = Math.max(rect.height, extendsRect.clientHeight);\n        extendsRect.scrollHeight = Math.max(rect.height, extendsRect.scrollHeight);\n    }\n\n    extendsRect.overflow = getCachedStyle(el)(\"overflow\") !== \"visible\";\n\n    return {\n        ...rect,\n        ...extendsRect,\n    };\n}\n\nexport function getClientRectByPosition(\n    position: { left: number, right: number, top: number, bottom: number },\n    base: MoveableClientRect,\n    el?: HTMLElement | SVGElement, isExtends?: boolean,\n) {\n    const {\n        left,\n        right,\n        top,\n        bottom,\n    } = position;\n    const baseTop = base.top;\n    const baseLeft = base.left;\n\n    const rect: MoveableClientRect = {\n        left: baseLeft + left,\n        top: baseTop + top,\n        right: baseLeft + right,\n        bottom: baseTop + bottom,\n        width: right - left,\n        height: bottom - top,\n    };\n\n\n    if (el && isExtends) {\n        return getExtendsRect(el, rect);\n    }\n    return rect;\n}\nexport function getClientRect(el: HTMLElement | SVGElement, isExtends?: boolean): MoveableClientRect {\n    let left = 0;\n    let top = 0;\n    let width = 0;\n    let height = 0;\n    // let isRoot = false;\n\n    if (el) {\n        const clientRect = el.getBoundingClientRect();\n\n        left = clientRect.left;\n        top = clientRect.top;\n        width = clientRect.width;\n        height = clientRect.height;\n    }\n\n    const rect: MoveableClientRect = {\n        left,\n        top,\n        width,\n        height,\n        right: left + width,\n        bottom: top + height,\n    };\n\n    if (el && isExtends) {\n        return getExtendsRect(el, rect);\n    }\n    return rect;\n}\n\n\nexport function getTotalOrigin(moveable: MoveableManagerInterface<any>) {\n    const {\n        groupable,\n        svgOrigin,\n    } = moveable.props;\n    const {\n        offsetWidth,\n        offsetHeight,\n        svg,\n        transformOrigin,\n    } = moveable.getState();\n\n    if (!groupable && svg && svgOrigin) {\n        return convertTransformOriginArray(svgOrigin, offsetWidth, offsetHeight);\n    }\n\n    return transformOrigin;\n}\n\n\nexport function getTotalDirection(\n    parentDirection: number[],\n    isPinch: boolean,\n    inputEvent: any,\n    datas: any,\n) {\n    let direction: number[] | undefined;\n\n    if (parentDirection) {\n        direction = parentDirection;\n    } else if (isPinch) {\n        direction = [0, 0];\n    } else {\n        const target = inputEvent.target;\n\n        direction = getDirection(target, datas);\n    }\n    return direction;\n}\nexport function getDirection(target: SVGElement | HTMLElement, datas: any) {\n    if (!target) {\n        return;\n    }\n    const deg = target.getAttribute(\"data-rotation\") || \"\";\n    const direciton = target.getAttribute(\"data-direction\")!;\n\n    datas.deg = deg;\n\n    if (!direciton) {\n        return;\n    }\n    const dir = [0, 0];\n\n    (direciton.indexOf(\"w\") > -1) && (dir[0] = -1);\n    (direciton.indexOf(\"e\") > -1) && (dir[0] = 1);\n    (direciton.indexOf(\"n\") > -1) && (dir[1] = -1);\n    (direciton.indexOf(\"s\") > -1) && (dir[1] = 1);\n\n    return dir;\n}\nexport function getAbsolutePoses(poses: number[][], dist: number[]) {\n    return [\n        plus(dist, poses[0]),\n        plus(dist, poses[1]),\n        plus(dist, poses[2]),\n        plus(dist, poses[3]),\n    ];\n}\nexport function getAbsolutePosesByState({\n    left,\n    top,\n    pos1,\n    pos2,\n    pos3,\n    pos4,\n}: {\n    left: number,\n    top: number,\n    pos1: number[],\n    pos2: number[],\n    pos3: number[],\n    pos4: number[],\n}) {\n    return getAbsolutePoses([pos1, pos2, pos3, pos4], [left, top]);\n}\n\nexport function roundSign(num: number) {\n    return Math.round(num % 1 === -0.5 ? num - 1 : num);\n}\n\nexport function unsetAbles(self: MoveableManagerInterface, isControl: boolean) {\n    self[isControl ? \"controlAbles\" : \"targetAbles\"].forEach(able => {\n        able.unset && able.unset(self);\n    });\n}\nexport function unsetGesto(self: MoveableManagerInterface, isControl: boolean) {\n    const gestoName = isControl ? \"controlGesto\" : \"targetGesto\";\n    const gesto = self[gestoName];\n\n    if (gesto?.isIdle() === false) {\n        unsetAbles(self, isControl);\n    }\n    gesto?.unset();\n    self[gestoName] = null as any;\n}\n\nexport function fillCSSObject(style: Record<string, any>, resolvedEvent?: any): CSSObject {\n    if (resolvedEvent) {\n        const originalDatas = getBeforeRenderableDatas(resolvedEvent);\n\n        originalDatas.nextStyle = {\n            ...originalDatas.nextStyle,\n            ...style,\n        };\n    }\n    return {\n        style,\n        cssText: getKeys(style).map(name => `${decamelize(name, \"-\")}: ${style[name]};`).join(\"\"),\n    };\n}\n\nexport function fillAfterTransform(\n    prevEvent: { style: Record<string, string>, transform: string },\n    nextEvent: { style: Record<string, string>, transform: string, afterTransform?: string },\n    resolvedEvent?: any\n): TransformObject {\n    const afterTransform = nextEvent.afterTransform || nextEvent.transform;\n\n    return {\n        ...fillCSSObject({\n            ...prevEvent.style,\n            ...nextEvent.style,\n            transform: afterTransform,\n        }, resolvedEvent),\n        afterTransform,\n        transform: prevEvent.transform,\n    };\n}\n\nexport function fillParams<T extends IObject<any>>(\n    moveable: any,\n    e: any,\n    params: ExcludeParams<T>,\n    isBeforeEvent?: boolean,\n): T {\n    const datas = e.datas;\n\n    if (!datas.datas) {\n        datas.datas = {};\n    }\n    const nextParams = {\n        ...params,\n        target: moveable.state.target,\n        clientX: e.clientX,\n        clientY: e.clientY,\n        inputEvent: e.inputEvent,\n        currentTarget: moveable,\n        moveable,\n        datas: datas.datas,\n        isRequest: e.isRequest,\n        isRequestChild: e.isRequestChild,\n        isFirstDrag: !!e.isFirstDrag,\n        isTrusted: e.isTrusted !== false,\n        stopAble() {\n            datas.isEventStart = false;\n        },\n        stopDrag() {\n            e.stop?.();\n        },\n    } as any;\n\n    if (!datas.isStartEvent) {\n        datas.isStartEvent = true;\n    } else if (!isBeforeEvent) {\n        datas.lastEvent = nextParams;\n    }\n    return nextParams;\n}\nexport function fillEndParams<T extends IObject<any>>(\n    moveable: any,\n    e: any,\n    params: ExcludeEndParams<T> & { isDrag?: boolean },\n): T {\n    const datas = e.datas;\n    const isDrag = \"isDrag\" in params ? params.isDrag : e.isDrag;\n\n    if (!datas.datas) {\n        datas.datas = {};\n    }\n\n    return {\n        isDrag,\n        ...params,\n        moveable,\n        target: moveable.state.target,\n        clientX: e.clientX,\n        clientY: e.clientY,\n        inputEvent: e.inputEvent,\n        currentTarget: moveable,\n        lastEvent: datas.lastEvent,\n        isDouble: e.isDouble,\n        datas: datas.datas,\n        isFirstDrag: !!e.isFirstDrag,\n    } as any;\n}\nexport function catchEvent<EventName extends keyof Props, Props extends IObject<any> = MoveableProps>(\n    moveable: any,\n    name: EventName,\n    callback: (e: Props[EventName] extends ((e: infer P) => any) | undefined ? P : IObject<any>) => void,\n): any {\n    moveable._emitter.on(name, callback);\n}\n\nexport function triggerEvent<EventName extends keyof Props, Props extends IObject<any> = MoveableProps>(\n    moveable: any,\n    name: EventName,\n    params: Props[EventName] extends ((e: infer P) => any) | undefined ? P : IObject<any>,\n    isManager?: boolean,\n    isRequest?: boolean,\n): any {\n    return moveable.triggerEvent(\n        name,\n        params,\n        isManager,\n        isRequest,\n    );\n}\n\nexport function getComputedStyle(el: Element, pseudoElt?: string | null) {\n    return getWindow(el).getComputedStyle(el, pseudoElt);\n}\n\nexport function filterAbles(\n    ables: Able[], methods: Array<keyof Able>,\n    triggerAblesSimultaneously?: boolean,\n) {\n    const enabledAbles: IObject<boolean> = {};\n    const ableGroups: IObject<boolean> = {};\n\n    return ables.filter(able => {\n        const name = able.name;\n\n        if (enabledAbles[name] || !methods.some(method => able[method])) {\n            return false;\n        }\n        if (!triggerAblesSimultaneously && able.ableGroup) {\n            if (ableGroups[able.ableGroup]) {\n                return false;\n            }\n            ableGroups[able.ableGroup] = true;\n        }\n        enabledAbles[name] = true;\n        return true;\n    });\n}\n\nexport function equals(a1: any, a2: any) {\n    return a1 === a2 || (a1 == null && a2 == null);\n}\n\nexport function selectValue<T = any>(...values: any[]): T {\n    const length = values.length - 1;\n    for (let i = 0; i < length; ++i) {\n        const value = values[i];\n\n        if (!isUndefined(value)) {\n            return value;\n        }\n    }\n\n    return values[length];\n}\n\nexport function groupBy<T>(arr: T[], func: (el: T, index: number, arr: T[]) => any) {\n    const groups: T[][] = [];\n    const groupKeys: any[] = [];\n\n    arr.forEach((el, index) => {\n        const groupKey = func(el, index, arr);\n        const keyIndex = groupKeys.indexOf(groupKey);\n        const group = groups[keyIndex] || [];\n\n        if (keyIndex === -1) {\n            groupKeys.push(groupKey);\n            groups.push(group);\n        }\n        group.push(el);\n    });\n    return groups;\n}\nexport function groupByMap<T>(arr: T[], func: (el: T, index: number, arr: T[]) => string | number) {\n    const groups: T[][] = [];\n    const groupKeys: IObject<T[]> = {};\n\n    arr.forEach((el, index) => {\n        const groupKey = func(el, index, arr);\n        let group = groupKeys[groupKey];\n\n        if (!group) {\n            group = [];\n            groupKeys[groupKey] = group;\n            groups.push(group);\n        }\n        group.push(el);\n    });\n    return groups;\n}\nexport function flat<T>(arr: T[][]): T[] {\n    return arr.reduce((prev, cur) => {\n        return prev.concat(cur);\n    }, []);\n}\n\nexport function equalSign(a: number, b: number) {\n    return (a >= 0 && b >= 0) || (a < 0 && b < 0);\n}\n\nexport function maxOffset(...args: number[]) {\n    args.sort((a, b) => abs(b) - abs(a));\n\n    return args[0];\n}\nexport function minOffset(...args: number[]) {\n    args.sort((a, b) => abs(a) - abs(b));\n\n    return args[0];\n}\n\nexport function calculateInversePosition(matrix: number[], pos: number[], n: number) {\n    return calculate(\n        invert(matrix, n),\n        convertPositionMatrix(pos, n),\n        n,\n    );\n}\nexport function convertDragDist(state: MoveableManagerState, e: any) {\n    const {\n        is3d,\n        rootMatrix,\n    } = state;\n    const n = is3d ? 4 : 3;\n    [\n        e.distX, e.distY,\n    ] = calculateInversePosition(rootMatrix, [e.distX, e.distY], n);\n\n    return e;\n}\n\nexport function calculatePadding(\n    matrix: number[],\n    pos: number[],\n    added: number[],\n    n: number,\n) {\n    if (!added[0] && !added[1]) {\n        return pos;\n    }\n\n    const xAdded = calculatePosition(matrix, [normalized(added[0] || 1), 0], n);\n    const yAdded = calculatePosition(matrix, [0, normalized(added[1] || 1)], n);\n    const nextAdded = calculatePosition(matrix, [\n        added[0] / getDistSize(xAdded),\n        added[1] / getDistSize(yAdded),\n    ], n);\n\n    return plus(pos, nextAdded);\n}\n\nexport function convertCSSSize(value: number, size: number, isRelative?: boolean) {\n    return isRelative ? `${value / size * 100}%` : `${value}px`;\n}\n\nexport function getTinyDist(v: number) {\n    return abs(v) <= TINY_NUM ? 0 : v;\n}\n\nexport function viewDraggingPrefix(ableName: string) {\n    return prefix(`${ableName}-view-dragging`);\n}\nexport function getDirectionViewClassName(ableName: string) {\n    return (moveable: MoveableManagerInterface) => {\n        if (!moveable.isDragging(ableName)) {\n            return \"\";\n        }\n        const data = getGestoData(moveable, ableName);\n        const deg = data.deg;\n        if (!deg) {\n            return \"\";\n        }\n        return prefix(`view-control-rotation${deg}`);\n    };\n}\nexport function getDirectionCondition(ableName: string, checkAbles: string[] = [ableName]) {\n    return (moveable: any, e: any) => {\n        if (e.isRequest) {\n            if (checkAbles.some(name => e.requestAble === name)) {\n                return e.parentDirection!;\n            } else {\n                return false;\n            }\n        }\n        const target = e.inputEvent.target;\n\n        return hasClass(target, prefix(\"direction\")) && (!ableName || hasClass(target, prefix(ableName)));\n    };\n}\n\nexport function convertTransformInfo(transforms: string[], state: MoveableManagerState, index: number) {\n    const matrixInfos = parse(transforms, {\n        \"x%\": v => v / 100 * state.offsetWidth,\n        \"y%\": v => v / 100 * state.offsetHeight,\n    });\n\n    const beforeFunctionTexts = transforms.slice(0, index < 0 ? undefined : index);\n    const beforeFunctionTexts2 = transforms.slice(0, index < 0 ? undefined : index + 1);\n    const targetFunctionText = transforms[index] || \"\";\n    const afterFunctionTexts = index < 0 ? [] : transforms.slice(index);\n    const afterFunctionTexts2 = index < 0 ? [] : transforms.slice(index + 1);\n\n    const beforeFunctions = matrixInfos.slice(0, index < 0 ? undefined : index);\n    const beforeFunctions2 = matrixInfos.slice(0, index < 0 ? undefined : index + 1);\n    const targetFunction = matrixInfos[index] ?? parse([\"\"])[0];\n    const afterFunctions = index < 0 ? [] : matrixInfos.slice(index);\n    const afterFunctions2 = index < 0 ? [] : matrixInfos.slice(index + 1);\n    const targetFunctions = targetFunction ? [targetFunction] : [];\n\n\n    const beforeFunctionMatrix = toMat(beforeFunctions);\n    const beforeFunctionMatrix2 = toMat(beforeFunctions2);\n    const afterFunctionMatrix = toMat(afterFunctions);\n    const afterFunctionMatrix2 = toMat(afterFunctions2);\n    const allFunctionMatrix = multiply(\n        beforeFunctionMatrix,\n        afterFunctionMatrix,\n        4,\n    );\n    return {\n        transforms,\n        beforeFunctionMatrix,\n        beforeFunctionMatrix2,\n        targetFunctionMatrix: toMat(targetFunctions),\n        afterFunctionMatrix,\n        afterFunctionMatrix2,\n        allFunctionMatrix,\n        beforeFunctions,\n        beforeFunctions2,\n        targetFunction: targetFunctions[0],\n        afterFunctions,\n        afterFunctions2,\n        beforeFunctionTexts,\n        beforeFunctionTexts2,\n        targetFunctionText,\n        afterFunctionTexts,\n        afterFunctionTexts2,\n    };\n}\n\nexport function isArrayFormat<T = any>(arr: any): arr is ArrayFormat<T> {\n    if (!arr || !isObject(arr)) {\n        return false;\n    }\n    if (isNode(arr)) {\n        return false;\n    }\n    return isArray(arr) || \"length\" in arr;\n}\n\nexport function getRefTarget<T extends Element = HTMLElement | SVGElement>(\n    target: MoveableRefType<T> | Window, isSelector: true): T | null;\nexport function getRefTarget<T extends Element = HTMLElement | SVGElement>(\n    target: MoveableRefType<T> | Window, isSelector?: boolean): T | string | null;\nexport function getRefTarget<T extends Element = HTMLElement | SVGElement>(\n    target: MoveableRefType<T> | Window,\n    isSelector?: boolean,\n): any {\n    if (!target) {\n        return null;\n    }\n    if (isNode(target)) {\n        return target;\n    }\n    if (isString(target)) {\n        if (isSelector) {\n            return document.querySelector(target);\n        }\n        return target;\n    }\n    if (isFunction(target)) {\n        return target();\n    }\n    if (isWindow(target)) {\n        return target;\n    }\n    if (\"current\" in target) {\n        return target.current;\n    }\n    return target;\n}\n\nexport function getRefTargets(\n    targets: MoveableRefTargetType,\n    isSelector: true): Array<HTMLElement | SVGElement | null>;\nexport function getRefTargets(\n    targets: MoveableRefTargetType,\n    isSelector?: boolean): MoveableRefTargetsResultType;\nexport function getRefTargets(targets: MoveableRefTargetType, isSelector?: boolean): any[] {\n    if (!targets) {\n        return [];\n    }\n    const userTargets = isArrayFormat(targets) ? [].slice.call(targets) : [targets];\n\n    return userTargets.reduce((prev, target) => {\n        if (isString(target) && isSelector) {\n            return [...prev, ...[].slice.call(document.querySelectorAll<HTMLElement>(target))];\n        }\n        if (isArray(target)) {\n            prev.push(getRefTargets(target, isSelector));\n        } else {\n            prev.push(getRefTarget(target, isSelector));\n        }\n        return prev;\n    }, [] as MoveableRefTargetsResultType);\n}\n\nexport function minmax(...values: number[]) {\n    return [Math.min(...values), Math.max(...values)];\n}\n\n\nexport function getAbsoluteRotation(pos1: number[], pos2: number[], direction: number) {\n    let deg = getRad(pos1, pos2) / Math.PI * 180;\n\n    deg = direction >= 0 ? deg : 180 - deg;\n    deg = deg >= 0 ? deg : 360 + deg;\n\n    return deg;\n}\n\n\nexport function getDragDistByState(state: MoveableManagerState, dist: number[]) {\n    const {\n        rootMatrix,\n        is3d,\n    } = state;\n    const n = is3d ? 4 : 3;\n\n    let inverseMatrix = invert(rootMatrix, n);\n\n    if (!is3d) {\n        inverseMatrix = convertDimension(inverseMatrix, 3, 4);\n    }\n    inverseMatrix[12] = 0;\n    inverseMatrix[13] = 0;\n    inverseMatrix[14] = 0;\n\n    return calculateMatrixDist(inverseMatrix, dist);\n}\n\nexport function getSizeDistByDist(\n    startSize: number[],\n    dist: number[],\n    ratio: number,\n    direction: number[],\n    keepRatio?: boolean,\n) {\n    const [startOffsetWidth, startOffsetHeight] = startSize;\n    let distWidth = 0;\n    let distHeight = 0;\n\n    if (keepRatio && startOffsetWidth && startOffsetHeight) {\n        const rad = getRad([0, 0], dist);\n        const standardRad = getRad([0, 0], direction);\n        const size = getDistSize(dist);\n        const signSize = Math.cos(rad - standardRad) * size;\n\n        if (!direction[0]) {\n            // top, bottom\n            distHeight = signSize;\n            distWidth = distHeight * ratio;\n        } else if (!direction[1]) {\n            // left, right\n            distWidth = signSize;\n            distHeight = distWidth / ratio;\n        } else {\n            // two-way\n            const startWidthSize = direction[0] * startOffsetWidth;\n            const startHeightSize = direction[1] * startOffsetHeight;\n\n            let secondRad = Math.atan2(startWidthSize + dist[0], startHeightSize + dist[1]);\n            let firstRad = Math.atan2(startWidthSize, startHeightSize);\n\n            if (secondRad < 0) {\n                secondRad += Math.PI * 2;\n            }\n            if (firstRad < 0) {\n                firstRad += Math.PI * 2;\n            }\n            let rad = 0;\n\n            if (abs(secondRad - firstRad) < Math.PI / 2 || abs(secondRad - firstRad) > Math.PI / 2 * 3) {\n                rad = secondRad - firstRad;\n            } else {\n                firstRad += Math.PI;\n                rad = secondRad - firstRad;\n            }\n            if (rad > Math.PI * 2) {\n                rad -= Math.PI * 2;\n            } else if (rad > Math.PI) {\n                rad = 2 * Math.PI - rad;\n            } else if (rad < -Math.PI) {\n                rad = -2 * Math.PI - rad;\n            }\n            //       180\n            // -1, -1,  // 1, -1\n            // 270            90\n            // -1, 1    // 1, 1\n            //       0\n            const distSize = getDistSize([startWidthSize + dist[0], startHeightSize + dist[1]]) * Math.cos(rad);\n\n            distWidth = distSize * Math.sin(firstRad) - startWidthSize;\n            distHeight = distSize * Math.cos(firstRad) - startHeightSize;\n\n            if (direction[0] < 0) {\n                distWidth *= -1;\n            }\n            if (direction[1] < 0) {\n                distHeight *= -1;\n            }\n        }\n    } else {\n        distWidth = direction[0] * dist[0];\n        distHeight = direction[1] * dist[1];\n    }\n\n    return [distWidth, distHeight];\n}\nexport function getOffsetSizeDist(\n    sizeDirection: number[],\n    keepRatio: boolean,\n    datas: any,\n    e: any,\n) {\n    const {\n        ratio,\n        startOffsetWidth,\n        startOffsetHeight,\n    } = datas;\n    let distWidth = 0;\n    let distHeight = 0;\n    const {\n        distX,\n        distY,\n        pinchScale,\n        parentDistance,\n        parentDist,\n        parentScale,\n    } = e;\n    const startFixedDirection = datas.fixedDirection;\n    const directionsDists = [0, 1].map(index => {\n        return abs(sizeDirection[index] - startFixedDirection[index]);\n    });\n    const directionRatios = [0, 1].map(index => {\n        let dist = directionsDists[index];\n\n        if (dist !== 0) {\n            dist = 2 / dist;\n        }\n        return dist;\n    });\n    if (parentDist) {\n        distWidth = parentDist[0];\n        distHeight = parentDist[1];\n\n        if (keepRatio) {\n            if (!distWidth) {\n                distWidth = distHeight * ratio;\n            } else if (!distHeight) {\n                distHeight = distWidth / ratio;\n            }\n        }\n    } else if (isNumber(pinchScale)) {\n        distWidth = (pinchScale - 1) * startOffsetWidth;\n        distHeight = (pinchScale - 1) * startOffsetHeight;\n    } else if (parentScale) {\n        distWidth = (parentScale[0] - 1) * startOffsetWidth;\n        distHeight = (parentScale[1] - 1) * startOffsetHeight;\n    } else if (parentDistance) {\n        const scaleX = startOffsetWidth * directionsDists[0];\n        const scaleY = startOffsetHeight * directionsDists[1];\n        const ratioDistance = getDistSize([scaleX, scaleY]);\n\n        distWidth = parentDistance / ratioDistance * scaleX * directionRatios[0];\n        distHeight = parentDistance / ratioDistance * scaleY * directionRatios[1];\n    } else {\n        let dist = getDragDist({ datas, distX, distY });\n\n        dist = directionRatios.map((ratio, i) => {\n            return dist[i] * ratio;\n        });\n\n        [distWidth, distHeight] = getSizeDistByDist(\n            [startOffsetWidth, startOffsetHeight],\n            dist,\n            ratio,\n            sizeDirection,\n            keepRatio,\n        );\n    }\n    return {\n        // direction,\n        // sizeDirection,\n        distWidth,\n        distHeight,\n    };\n}\n\nexport function convertTransformUnit(\n    origin: string,\n    xy?: boolean,\n): { x?: string; y?: string; value?: string; } {\n    if (xy) {\n        if (origin === \"left\") {\n            return { x: \"0%\", y: \"50%\" };\n        } else if (origin === \"top\") {\n            return { x: \"50%\", y: \"50%\" };\n        } else if (origin === \"center\") {\n            return { x: \"50%\", y: \"50%\" };\n        } else if (origin === \"right\") {\n            return { x: \"100%\", y: \"50%\" };\n        } else if (origin === \"bottom\") {\n            return { x: \"50%\", y: \"100%\" };\n        }\n        const [left, right] = origin.split(\" \");\n        const leftOrigin = convertTransformUnit(left || \"\");\n        const rightOrigin = convertTransformUnit(right || \"\");\n        const originObject = {\n            ...leftOrigin,\n            ...rightOrigin,\n        };\n\n        const nextOriginObject = {\n            x: \"50%\",\n            y: \"50%\",\n        };\n        if (originObject.x) {\n            nextOriginObject.x = originObject.x;\n        }\n        if (originObject.y) {\n            nextOriginObject.y = originObject.y;\n        }\n        if (originObject.value) {\n            if (originObject.x && !originObject.y) {\n                nextOriginObject.y = originObject.value;\n            }\n            if (!originObject.x && originObject.y) {\n                nextOriginObject.x = originObject.value;\n            }\n        }\n        return nextOriginObject;\n    }\n    if (origin === \"left\") {\n        return { x: \"0%\" };\n    }\n    if (origin === \"right\") {\n        return { x: \"100%\" };\n    }\n    if (origin === \"top\") {\n        return { y: \"0%\" };\n    }\n    if (origin === \"bottom\") {\n        return { y: \"100%\" };\n    }\n    if (!origin) {\n        return {};\n    }\n    if (origin === \"center\") {\n        return { value: \"50%\" };\n    }\n    return { value: origin };\n}\nexport function convertTransformOriginArray(transformOrigin: string, width: number, height: number) {\n    const { x, y } = convertTransformUnit(transformOrigin, true);\n\n    return [\n        convertUnitSize(x!, width) || 0,\n        convertUnitSize(y!, height) || 0,\n    ];\n}\n\nexport function rotatePosesInfo(poses: number[][], origin: number[], rad: number) {\n    const prevPoses = poses.map((pos) => minus(pos, origin));\n    const nextPoses = prevPoses.map((pos) => rotate(pos, rad));\n\n    return {\n        prev: prevPoses,\n        next: nextPoses,\n        result: nextPoses.map(pos => plus(pos, origin)),\n    };\n}\n\n\n\nexport function isDeepArrayEquals(arr1: any[], arr2: any[]): boolean {\n    return arr1.length === arr2.length && arr1.every((value1, i) => {\n        const value2 = arr2[i];\n        const isArray1 = isArray(value1);\n        const isArray2 = isArray(value2);\n        if (isArray1 && isArray2) {\n            return isDeepArrayEquals(value1, value2);\n        } else if (!isArray1 && !isArray2) {\n            return value1 === value2;\n        }\n        return false;\n    });\n}\n\n\nexport function watchValue<T>(\n    moveable: any,\n    property: string,\n    nextValue: T,\n    valueKey: (value: T) => string | number,\n    defaultValue?: T,\n): T {\n    const store = (moveable as any)._store;\n    let prevValue = store[property];\n\n    if (!(property in store)) {\n        if (defaultValue != null) {\n            store[property] = defaultValue;\n            prevValue = defaultValue;\n        } else {\n            store[property] = nextValue;\n            return nextValue;\n        }\n    }\n    if (prevValue === nextValue || valueKey(prevValue) === valueKey(nextValue)) {\n        return prevValue;\n    }\n\n    store[property] = nextValue;\n    return nextValue;\n}\n\n\nexport function sign(value: number) {\n    return value >= 0 ? 1 : -1;\n}\n\n\nexport function abs(value: number) {\n    return Math.abs(value);\n}\n\n\nexport function countEach<T>(count: number, callback: (index: number) => T): T[] {\n    return counter(count).map(index => callback(index));\n}\n\n\nexport function getPaddingBox(padding: PaddingBox | number) {\n    if (isNumber(padding)) {\n        return {\n            top: padding,\n            left: padding,\n            right: padding,\n            bottom: padding,\n        };\n    }\n\n    return {\n        left: padding.left || 0,\n        top: padding.top || 0,\n        right: padding.right || 0,\n        bottom: padding.bottom || 0,\n    };\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/1-Basic/0-Basic.stories.tsx",
    "content": "import {\n    DEFAULT_RESIZABLE_CONTROLS,\n    DEFAULT_ROTATABLE_CONTROLS,\n    DEFAULT_DRAGGABLE_CONTROLS,\n    DEFAULT_SCALABLE_CONTROLS,\n    DEFAULT_WARPABLE_CONTROLS,\n    DEFAULT_CLIPPABLE_CONTROLS,\n} from \"../controls/default\";\nimport { expect } from \"@storybook/jest\";\n\nimport { add } from \"../utils/story\";\nimport { pan, pinch, rotate, wait } from \"../utils/testing\";\nimport { throttle } from \"@daybrush/utils\";\nimport { parseMat } from \"css-to-mat\";\n\n\nexport default {\n    title: \"Basic\",\n};\n\nexport const BasicDraggable = add(\"Draggable\", {\n    app: require(\"./ReactDraggableApp\").default,\n    path: require.resolve(\"./ReactDraggableApp\"),\n    argsTypes: {\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const controlBox = canvasElement.querySelector<HTMLElement>(\".moveable-control-box\")!;\n\n        expect(controlBox.style.transform).toBe(\"translate3d(100px, 150px, 0px)\");\n        await pan({\n            target,\n            start: [0, 0],\n            end: [100, 0],\n            duration: 100,\n            interval: 10,\n        });\n        expect(target.style.transform).toBe(\"translate(100px, 0px)\");\n        expect(controlBox.style.transform).toBe(\"translate3d(200px, 150px, 0px)\");\n    },\n});\n\nexport const BasicResizable = add(\"Resizable\", {\n    app: require(\"./ReactResizableApp\").default,\n    path: require.resolve(\"./ReactResizableApp\"),\n    argsTypes: {\n        ...DEFAULT_RESIZABLE_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const resizeControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-direction=\"se\"]`)!;\n\n        await pan({\n            target: resizeControl,\n            start: [0, 0],\n            end: [100, 100],\n            duration: 100,\n            interval: 10,\n        });\n        expect(target.style.transform).toBe(\"translate(0px, 0px)\");\n        expect(target.style.width).toBe(\"200px\");\n        expect(target.style.height).toBe(\"200px\");\n    },\n});\n\n\nexport const BasicScalable = add(\"Scalable\", {\n    app: require(\"./ReactScalableApp\").default,\n    path: require.resolve(\"./ReactScalableApp\"),\n    argsTypes: {\n        ...DEFAULT_SCALABLE_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const resizeControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-direction=\"se\"]`)!;\n\n        await pan({\n            target: resizeControl,\n            start: [0, 0],\n            end: [50, 100],\n            duration: 100,\n            interval: 10,\n        });\n        expect(target.style.transform).toBe(\"translate(25px, 50px) scale(1.5, 2)\");\n    },\n});\nexport const BasicScalableKeepRatioTest = add(\"Scalable keepRatio Test\", {\n    app: require(\"./ReactScalableApp\").default,\n    argsTypes: {\n        ...DEFAULT_SCALABLE_CONTROLS,\n    },\n    args: {\n        keepRatio: true,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const resizeControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-direction=\"nw\"]`)!;\n\n        await pan({\n            target: resizeControl,\n            start: [0, 0],\n            end: [300, 300],\n            duration: 100,\n            interval: 10,\n        });\n        expect(target.style.transform).toBe(\"translate(150px, 150px) scale(-2, -2)\");\n    },\n});\n\nexport const BaiscRotatable = add(\"Rotatable\", {\n    app: require(\"./ReactRotatableApp\").default,\n    path: require.resolve(\"./ReactRotatableApp\"),\n    argsTypes: {\n        ...DEFAULT_ROTATABLE_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const rotationControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box .moveable-rotation-control`)!;\n\n        await rotate({\n            target: rotationControl,\n            start: 0,\n            end: 90,\n            duration: 100,\n            interval: 10,\n            baseTarget: target,\n        });\n        expect(target.style.transform).toBe(\"translate(0px, 0px) rotate(90deg)\");\n    },\n});\n\n\nexport const BasicWarpable = add(\"Warpable\", {\n    app: require(\"./ReactWarpableApp\").default,\n    path: require.resolve(\"./ReactWarpableApp\"),\n    argsTypes: {\n        ...DEFAULT_WARPABLE_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const seControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-direction=\"se\"]`)!;\n\n        await pan({\n            target: seControl,\n            start: [0, 0],\n            end: [10, 10],\n            duration: 100,\n            interval: 10,\n        });\n        const mat = parseMat(target.style.transform);\n\n        [\n            1.04545, 0.0454545, 0, -0.000909091,\n            0.0454545, 1.04545, 0, -0.000909091,\n            0, 0, 1, 0,\n            0, 0, 0, 1,\n        ].forEach((v, i) => {\n            expect(mat[i]).toBeCloseTo(v, 4);\n        });\n    },\n});\n\n\nexport const BasicClippable = add(\"Clippable\", {\n    app: require(\"./ReactClippableApp\").default,\n    path: require.resolve(\"./ReactClippableApp\"),\n    argsTypes: {\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_CLIPPABLE_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const seControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-clip-index=\"4\"]`)!;\n\n        await pan({\n            target: seControl,\n            start: [0, 0],\n            end: [-40, -40],\n            duration: 100,\n            interval: 10,\n        });\n        expect(target.style.clipPath).toBe(`inset(0px 40px 40px 0px)`);\n    },\n});\n\nexport const BasicRoundable = add(\"Roundable\", {\n    app: require(\"./ReactRoundableApp\").default,\n    path: require.resolve(\"./ReactRoundableApp\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const targets = canvasElement.querySelectorAll<HTMLElement>(\".target\")!;\n        const moveables = canvasElement.querySelectorAll<HTMLElement>(\".moveable-control-box\")!;\n\n        // first\n        const radius0Control = moveables[0].querySelector<HTMLElement>(`[data-radius-index=\"0\"]`)!;\n\n        await pan({\n            target: radius0Control,\n            start: [0, 0],\n            end: [10, 0],\n            duration: 100,\n            interval: 10,\n        });\n        expect(targets[0].style.borderRadius).toBe(`35px`);\n\n\n        // second\n        const radius1Control = moveables[1].querySelector<HTMLElement>(`[data-radius-index=\"1\"]`)!;\n\n        await pan({\n            target: radius1Control,\n            start: [0, 0],\n            end: [-10, 0],\n            duration: 100,\n            interval: 10,\n        });\n        expect(targets[1].style.borderRadius).toBe(`25px 33px`);\n    },\n});\n\nexport const BasicOriginDraggable = add(\"OriginDraggable\", {\n    app: require(\"./ReactOriginDraggableApp\").default,\n    path: require.resolve(\"./ReactOriginDraggableApp\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const rotationControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box .moveable-rotation-control`)!;\n\n        await rotate({\n            target: rotationControl,\n            start: 0,\n            end: 60,\n            duration: 100,\n            interval: 10,\n            baseTarget: target,\n        });\n\n        const clientRect1 = target.getBoundingClientRect();\n        const originControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box .moveable-origin`)!;\n\n        await pan({\n            target: originControl,\n            start: [0, 0],\n            end: [30, 30],\n            duration: 100,\n            interval: 10,\n        });\n\n        const clientRect2 = target.getBoundingClientRect();\n        expect(throttle(clientRect1.left, 0.1)).toBe(throttle(clientRect2.left, 0.1));\n        expect(throttle(clientRect1.top, 0.1)).toBe(throttle(clientRect2.top, 0.1));\n    },\n});\n\n\n\nexport const BasicPinchable = add(\"Pinchable\", {\n    app: require(\"./ReactPinchableApp\").default,\n    path: require.resolve(\"./ReactPinchableApp\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        // const controlBox = canvasElement.querySelector<HTMLElement>(\".moveable-control-box\")!;\n\n        await pinch({\n            target,\n            start: [0, 0],\n            end: [100, 0],\n            startOffset: [100, 0],\n            endOffset: [-200, 0],\n            duration: 100,\n            interval: 10,\n        });\n\n        expect(target.style.transform).toBe(`translate(100px, 0px) rotate(-180deg) scale(2, 2)`);\n    },\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/1-Basic/ReactClippableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    draggable={props.draggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    zoom={props.zoom}\n                    // origin={props.origin}\n                    // padding={props.padding}\n                    clippable={props.clippable}\n                    clipRelative={props.clipRelative}\n                    clipArea={props.clipArea}\n                    dragArea={props.dragArea}\n                    dragWithClip={props.dragWithClip}\n                    defaultClipPath={props.defaultClipPath}\n                    clipTargetBounds={props.clipTargetBounds}\n                    // clipVerticalGuidelines={props.clipVerticalGuidelines}\n                    // clipHorizontalGuidelines={props.clipHorizontalGuidelines}\n                    snapThreshold={5}\n                    keepRatio={props.keepRatio}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onClip={e => {\n                        e.target.style.clipPath = e.clipStyle;\n                    }} />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/1-Basic/ReactDraggableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/1-Basic/ReactOriginDraggableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    originDraggable={true}\n                    draggable={true}\n                    rotatable={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onDragOrigin={e => {\n                        e.target.style.transformOrigin = e.transformOrigin;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/1-Basic/ReactPinchableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <p>Pinch the target with two fingers on a touch-capable device.</p>\n                <p>Drag, Scale and Rotate are possible.</p>\n                <div className=\"target\">Target</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    scalable={true}\n                    rotatable={true}\n                    pinchable={true}\n                    pinchOutside={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/1-Basic/ReactResizableApp.tsx",
    "content": "\nimport * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    maxWidth: props.maxWidth,\n                    maxHeight: props.maxHeight,\n                    minWidth: props.minWidth,\n                    minHeight: props.minHeight,\n                }}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    resizable={props.resizable}\n                    keepRatio={props.keepRatio}\n                    throttleResize={props.throttleResize}\n                    renderDirections={props.renderDirections}\n                    onResize={e => {\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/1-Basic/ReactRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    transform: \"translate(0px, 0px) rotate(0deg)\",\n                }}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    rotatable={props.rotatable}\n                    throttleRotate={props.throttleRotate}\n                    rotationPosition={props.rotationPosition}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/1-Basic/ReactRoundableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target target1\"\n                    style={{\n                        left: \"10px\",\n                        top: \"10px\",\n                        borderRadius: \"25px\",\n                    }}\n                >Target1</div>\n                <div className=\"target target2\"\n                    style={{\n                        left: \"140px\",\n                        top: \"10px\",\n                        borderRadius: \"25px 23px\",\n                    }}\n                >Target2</div>\n                <div className=\"target target3\"\n                    style={{\n                        left: \"10px\",\n                        top: \"140px\",\n                        borderRadius: \"25px 23px / 20px\",\n                    }}\n                >Target3</div>\n                <div className=\"target target4\"\n                    style={{\n                        left: \"140px\",\n                        top: \"140px\",\n                        borderRadius: \"25px 25.5px 24.5px 24.9115px / 25.5px 25.5px 24.5px 24.5px\",\n                    }}\n                >Target4</div>\n                <Moveable\n                    target={\".target1\"}\n                    draggable={true}\n                    roundable={true}\n                    resizable={true}\n                    isDisplayShadowRoundControls={\"horizontal\"}\n                    roundClickable={\"control\"}\n                    roundPadding={15}\n                    onRound={e => {\n                        console.log(\"ROUND\", e.borderRadius);\n                    }}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                    onRenderEnd={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n                <Moveable\n                    target={\".target2\"}\n                    roundable={true}\n                    roundClickable={true}\n                    onRound={e => {\n                        console.log(\"ROUND\", e.borderRadius);\n                        e.target.style.borderRadius = e.borderRadius;\n                    }}\n                />\n                <Moveable\n                    target={\".target3\"}\n                    roundable={true}\n                    onRound={e => {\n                        console.log(\"ROUND\", e.borderRadius);\n                        e.target.style.borderRadius = e.borderRadius;\n                    }}\n                />\n                <Moveable\n                    target={\".target4\"}\n                    roundable={true}\n                    onRound={e => {\n                        console.log(\"ROUND\", e.borderRadius);\n                        e.target.style.borderRadius = e.borderRadius;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/1-Basic/ReactScalableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    scalable={true}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    renderDirections={props.renderDirections}\n                    onScale={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/1-Basic/ReactWarpableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    warpable={props.warpable}\n                    renderDirections={props.renderDirections}\n                    onWarp={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/2-Combination/0-UseCSS.stories.tsx",
    "content": "import {\n    DEFAULT_DRAGGABLE_CONTROLS, DEFAULT_ORIGIN_DRAGGABLE_CONTROLS, DEFAULT_RESIZABLE_CONTROLS,\n    DEFAULT_ROTATABLE_CONTROLS,\n    DEFAULT_SCALABLE_CONTROLS,\n} from \"../controls/default\";\nimport { add } from \"../utils/story\";\n\nexport default {\n    title: \"Able Combination\",\n};\n\nexport const CombinationDraggableResizableRotatble = add(\"Draggable & Resizable & Rotatable\", {\n    app: require(\"./ReactDraggableResizableRotatableApp\").default,\n    path: require.resolve(\"./ReactDraggableResizableRotatableApp\"),\n    argsTypes: {\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_RESIZABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n    },\n});\nexport const CombinationDraggableScalableRotatable = add(\"Draggable & Scalable & Rotatable\", {\n    app: require(\"./ReactDraggableScalableRotatableApp\").default,\n    path: require.resolve(\"./ReactDraggableScalableRotatableApp\"),\n    argsTypes: {\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_SCALABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n    },\n});\nexport const CombinationDraggableOriginRotatable = add(\"Draggable & OriginDraggable & Rotatable\", {\n    app: require(\"./ReactDraggableOriginDraggableRotatableApp\").default,\n    path: require.resolve(\"./ReactDraggableOriginDraggableRotatableApp\"),\n    argsTypes: {\n        ...DEFAULT_ORIGIN_DRAGGABLE_CONTROLS,\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n    },\n});\n\nexport const CombinationAllInOne = add(\"All In One\", {\n    app: require(\"./ReactAllInOneApp\").default,\n    path: require.resolve(\"./ReactAllInOneApp\"),\n    argsTypes: {\n        ...DEFAULT_ORIGIN_DRAGGABLE_CONTROLS,\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_SCALABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n    },\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/2-Combination/ReactAllInOneApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    scalable={true}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    renderDirections={props.renderDirections}\n                    rotatable={props.rotatable}\n                    throttleRotate={props.throttleRotate}\n                    rotationPosition={props.rotationPosition}\n                    originDraggable={props.originDraggable}\n                    originRelative={props.originRelative}\n                    onDragOrigin={e => {\n                        e.target.style.transformOrigin = e.transformOrigin;\n                    }}\n                    onRender={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/2-Combination/ReactDraggableOriginDraggableRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    originDraggable={props.originDraggable}\n                    originRelative={props.originRelative}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    scalable={props.scalable}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    renderDirections={props.renderDirections}\n                    rotatable={props.rotatable}\n                    throttleRotate={props.throttleRotate}\n                    rotationPosition={props.rotationPosition}\n                    onDragOrigin={e => {\n                        e.target.style.transformOrigin = e.transformOrigin;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onScale={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/2-Combination/ReactDraggableResizableRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    maxWidth: props.maxWidth,\n                    maxHeight: props.maxHeight,\n                    minWidth: props.minWidth,\n                    minHeight: props.minHeight,\n                }}>Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={targetRef}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    resizable={props.resizable}\n                    keepRatio={props.keepRatio}\n                    throttleResize={props.throttleResize}\n                    renderDirections={props.renderDirections}\n                    rotatable={props.rotatable}\n                    throttleRotate={props.throttleRotate}\n                    rotationPosition={props.rotationPosition}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onResize={e => {\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/2-Combination/ReactDraggableScalableRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    scalable={props.scalable}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    renderDirections={props.renderDirections}\n                    rotatable={props.rotatable}\n                    throttleRotate={props.throttleRotate}\n                    rotationPosition={props.rotationPosition}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onScale={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/3-Group/0-Group.stories.tsx",
    "content": "import {\n    DEFAULT_RESIZABLE_CONTROLS,\n    DEFAULT_ROTATABLE_CONTROLS,\n    DEFAULT_DRAGGABLE_CONTROLS,\n    DEFAULT_SCALABLE_CONTROLS,\n} from \"../controls/default\";\nimport {\n    DEFAULT_GROUPPABLE_GROUP_CONTROLS,\n    DEFAULT_RESIZABLE_GROUP_CONTROLS,\n    DEFAULT_SCALABLE_GROUP_CONTROLS,\n} from \"../controls/group\";\nimport { add } from \"../utils/story\";\nimport { expect } from \"@storybook/jest\";\nimport { userEvent } from \"@storybook/testing-library\";\nimport { pan, rotate, wait } from \"../utils/testing\";\nimport { throttle } from \"@daybrush/utils\";\nimport { parse } from \"css-to-mat\";\n\nexport default {\n    title: \"Group\",\n};\n\nexport const GroupDraggableResizableRotatable = add(\"Draggable & Resizable & Rotatable\", {\n    app: require(\"./ReactDraggableResizableRotatableApp\").default,\n    path: require.resolve(\"./ReactDraggableResizableRotatableApp\"),\n    argsTypes: {\n        ...DEFAULT_GROUPPABLE_GROUP_CONTROLS,\n        ...DEFAULT_RESIZABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_RESIZABLE_GROUP_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const areaElement = canvasElement.querySelector<HTMLElement>(`.moveable-control-box .moveable-area`)!;\n        const targets = canvasElement.querySelectorAll<HTMLElement>(\".target\")!;\n\n\n        await pan({\n            target: areaElement,\n            start: [0, 0],\n            end: [10, 10],\n            duration: 100,\n            interval: 10,\n        });\n\n\n        const resizeControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-direction=\"e\"]`)!;\n\n        await pan({\n            target: resizeControl,\n            start: [0, 0],\n            end: [140, 100],\n            duration: 100,\n            interval: 10,\n        });\n\n        expect(areaElement.style.width).toBe(\"420px\");\n        expect(areaElement.style.height).toBe(\"345px\");\n        targets.forEach(target => {\n            expect(target.style.width).toBe(\"150px\");\n        });\n\n        await rotate({\n            target: canvasElement.querySelector<HTMLElement>(`.moveable-rotation-control`)!,\n            start: 0,\n            end: 90,\n            duration: 100,\n            interval: 10,\n            baseTarget: canvasElement.querySelector<HTMLElement>(`.moveable-origin`)!,\n        });\n\n\n        expect(targets[0].style.transform).toBe(`translate(242.5px, -85px) rotate(90deg)`);\n        expect(targets[1].style.transform).toBe(`translate(32.5px, 165px) rotate(90deg)`);\n        expect(targets[2].style.transform).toBe(`translate(-12.5px, -125px) rotate(90deg)`);\n\n\n        expect(areaElement.style.width).toBe(\"420px\");\n        expect(areaElement.style.height).toBe(\"345px\");\n    },\n});\nexport const GroupDraggableScalableRotatable = add(\"Draggable & Scalable & Rotatable\", {\n    app: require(\"./ReactDraggableScalableRotatableApp\").default,\n    path: require.resolve(\"./ReactDraggableScalableRotatableApp\"),\n    argsTypes: {\n        ...DEFAULT_GROUPPABLE_GROUP_CONTROLS,\n        ...DEFAULT_SCALABLE_CONTROLS,\n        ...DEFAULT_SCALABLE_GROUP_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const targets = canvasElement.querySelectorAll<HTMLElement>(\".target\")!;\n        const resizeControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-direction=\"e\"]`)!;\n\n        await pan({\n            target: resizeControl,\n            start: [0, 0],\n            end: [140, 100],\n            duration: 100,\n            interval: 10,\n        });\n\n        targets.forEach((target, i) => {\n            const transform = target.style.transform;\n            const functionValue = parse(transform)[1].functionValue;\n\n            expect(throttle(functionValue[0], 0.1)).toBe(1.5);\n\n            if (i === 2) {\n                expect(throttle(functionValue[1], 0.1)).toBe(-1.5);\n            } else {\n                expect(throttle(functionValue[1], 0.1)).toBe(1.5);\n            }\n        });\n\n    },\n});\n\n\nexport const GroupAllInOne = add(\"All in One\", {\n    app: require(\"./ReactAllInOneApp\").default,\n    path: require.resolve(\"./ReactAllInOneApp\"),\n    argsTypes: {\n        ...DEFAULT_GROUPPABLE_GROUP_CONTROLS,\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_SCALABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n    },\n});\nexport const GroupMultipleGroup = add(\"Multiple Group\", {\n    app: require(\"./ReactMultipleGroupApp\").default,\n    path: require.resolve(\"./ReactMultipleGroupApp\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const areaElement = canvasElement.querySelector<HTMLElement>(`.moveable-control-box .moveable-area`)!;\n\n        await rotate({\n            target: canvasElement.querySelector<HTMLElement>(`.moveable-rotation-control`)!,\n            start: 0,\n            end: 90,\n            duration: 100,\n            interval: 10,\n            baseTarget: canvasElement.querySelector<HTMLElement>(`.moveable-origin`)!,\n        });\n\n        const { left, top, width, height } = areaElement.getBoundingClientRect();\n        expect(throttle(parseFloat(areaElement.style.width), 0.1)).toBe(298.3);\n        expect(throttle(parseFloat(areaElement.style.height), 0.1)).toBe(266.6);\n\n        expect(throttle(left, 0.1)).toBe(133.4);\n        expect(throttle(top, 0.1)).toBe(151.7);\n        expect(throttle(width, 0.1)).toBe(266.9);\n        expect(throttle(height, 0.1)).toBe(298.5);\n\n        // click\n        await wait();\n        userEvent.click(canvasElement.querySelector(\"button\")!);\n\n        expect(throttle(parseFloat(areaElement.style.width), 0.1)).toBe(266.5);\n        expect(throttle(parseFloat(areaElement.style.height), 0.1)).toBe(298.3);\n        expect(areaElement.style.transform).toBe(\"translate(0px, 0px) rotate(0deg) scale(1, 1)\");\n    },\n});\n\nexport const GroupRoundableGroup = add(\"Roundable Group\", {\n    app: require(\"./ReactRoundableGroupApp\").default,\n    path: require.resolve(\"./ReactRoundableGroupApp\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const targets = canvasElement.querySelectorAll<HTMLElement>(\".target\")!;\n\n        // round control\n        const radius0Control = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-radius-index=\"0\"]`)!;\n\n        await pan({\n            target: radius0Control,\n            start: [0, 0],\n            end: [20, 0],\n            duration: 100,\n            interval: 10,\n        });\n        targets.forEach(target => {\n            expect(target.style.borderRadius).toBe(\"30px\");\n        });\n    },\n});\n\n\nexport const GroupFixedResizeGroup = add(\"Fixed Position Resize Group\", {\n    app: require(\"./ReactFixedResizeGroupApp\").default,\n    path: require.resolve(\"./ReactFixedResizeGroupApp\"),\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/3-Group/ReactAllInOneApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target target1\" style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target1</div>\n                <div className=\"target target2\" style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target2</div>\n                <div className=\"target target3\" style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    hideChildMoveableDefaultLines={props.hideChildMoveableDefaultLines}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    scalable={true}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    renderDirections={props.renderDirections}\n                    rotatable={props.rotatable}\n                    throttleRotate={props.throttleRotate}\n                    rotationPosition={props.rotationPosition}\n                    onRenderGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.transform = ev.transform;\n                        });\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/3-Group/ReactDraggableResizableRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return <div className=\"container\">\n        <button onClick={() => {\n            moveableRef.current!.updateRect();\n        }}>Resize</button>\n        <div className=\"target target1\">Target1</div>\n        <div className=\"target target2\" style={{\n            minWidth: \"50px\",\n            minHeight: \"50px\",\n        }}>Target2</div>\n        <div className=\"target target3\">Target3</div>\n        <Moveable\n            ref={moveableRef}\n            target={\".target\"}\n            hideChildMoveableDefaultLines={props.hideChildMoveableDefaultLines}\n            draggable={props.draggable}\n            throttleDrag={props.throttleDrag}\n            edgeDraggable={props.edgeDraggable}\n            startDragRotate={props.startDragRotate}\n            throttleDragRotate={props.throttleDragRotate}\n            resizable={props.resizable}\n            keepRatio={props.keepRatio}\n            throttleResize={props.throttleResize}\n            renderDirections={props.renderDirections}\n            rotatable={props.rotatable}\n            throttleRotate={props.throttleRotate}\n            rotationPosition={props.rotationPosition}\n            onDragGroup={({ events }) => {\n                events.forEach(ev => {\n                    ev.target.style.transform = ev.transform;\n                });\n            }}\n            onResizeGroupStart={({ setMin, setMax }) => {\n                setMin([props.minWidth, props.minHeight]);\n                setMax([props.maxWidth, props.maxHeight]);\n            }}\n            onResizeGroup={({ events }) => {\n                events.forEach(ev => {\n                    ev.target.style.width = `${ev.width}px`;\n                    ev.target.style.height = `${ev.height}px`;\n                    ev.target.style.transform = ev.drag.transform;\n                });\n            }}\n            onRotateGroup={({ events }) => {\n                events.forEach(ev => {\n                    ev.target.style.transform = ev.drag.transform;\n                });\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/3-Group/ReactDraggableScalableRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return <div className=\"container\">\n        <div className=\"target target1\">Target1</div>\n        <div className=\"target target2\">Target2</div>\n        <div className=\"target target3\" style={{\n            transform: \"scale(1, -1)\",\n        }}>Target3</div>\n        <Moveable\n            target={\".target\"}\n            hideChildMoveableDefaultLines={props.hideChildMoveableDefaultLines}\n            draggable={props.draggable}\n            throttleDrag={props.throttleDrag}\n            edgeDraggable={props.edgeDraggable}\n            startDragRotate={props.startDragRotate}\n            throttleDragRotate={props.throttleDragRotate}\n            scalable={props.scalable}\n            keepRatio={props.keepRatio}\n            throttleScale={props.throttleScale}\n            renderDirections={props.renderDirections}\n            rotatable={props.rotatable}\n            throttleRotate={props.throttleRotate}\n            rotationPosition={props.rotationPosition}\n            onDragGroup={({ events }) => {\n                events.forEach(ev => {\n                    ev.target.style.transform = ev.transform;\n                });\n            }}\n            onScaleGroup={({ events }) => {\n                events.forEach(ev => {\n                    ev.target.style.transform = ev.drag.transform;\n                });\n            }}\n            onRotateGroup={({ events }) => {\n                events.forEach(ev => {\n                    ev.target.style.transform = ev.drag.transform;\n                });\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/3-Group/ReactFixedResizeGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target target1\" style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target1</div>\n                <div className=\"target target2\" style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target2</div>\n                <div className=\"target target3\" style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    resizable={true}\n                    keepRatio={false}\n                    onDragGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.cssText += ev.cssText;\n                        });\n                    }}\n                    onResizeGroup={(e) => {\n                        if (e.direction[0] === -1) {\n                            // left edge\n                            e.events.forEach((ev) => {\n                                ev.target.style.width = `${ev.width - ev.dist[0] + e.dist[0]}px`;\n                                ev.target.style.cssText += `margin-left: ${-e.dist[0]}px`; // the first resize moves the element , not desireable\n                            });\n                        } else if (e.direction[0] === 1) {\n                            //right edge\n                            e.events.forEach((ev) => {\n                                ev.target.style.width = `${ev.width - ev.dist[0] + e.dist[0]}px`;\n                            });\n                        }\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/3-Group/ReactMultipleGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    const moveableRef = React.useRef<Moveable>(null);\n    return (<div className=\"container\">\n        <button onClick={() => {\n            moveableRef.current!.updateRect();\n        }}>Resize</button>\n        <div className=\"target target1\"  style={{\n            transform: \"rotate(30deg)\",\n        }}>Target1</div>\n        <div className=\"target target2\">Target2</div>\n        <div className=\"target target3\" style={{\n            transform: \"rotate(30deg)\",\n        }}>Target3</div>\n        <Moveable\n            ref={moveableRef}\n            target={[[\".target1, .target2\"], \".target3\"]}\n            draggable={true}\n            rotatable={true}\n            scalable={true}\n            onRenderGroup={e => {\n                e.events.forEach(ev => {\n                    ev.target.style.transform = ev.transform;\n                });\n            }}\n        />\n    </div>);\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/3-Group/ReactRoundableGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target target1\" style={{\n                    borderRadius: \"10px\",\n                }}>Target1</div>\n                <div className=\"target target2\">Target2</div>\n                <div className=\"target target3\">Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    roundable={true}\n                    resizable={true}\n                    rotatable={true}\n                    isDisplayShadowRoundControls={\"horizontal\"}\n                    roundClickable={\"control\"}\n                    roundPadding={15}\n                    onRenderGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.cssText += ev.cssText;\n                        });\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/3-IndiviualGroup/0-Default.stories.tsx",
    "content": "import {\n    DEFAULT_ROTATABLE_CONTROLS,\n    DEFAULT_DRAGGABLE_CONTROLS,\n    DEFAULT_SCALABLE_CONTROLS,\n} from \"../controls/default\";\nimport { add } from \"../utils/story\";\n\n\nexport default {\n    title: \"Individual Group\",\n};\n\nexport const IndividualGroupDraggableScalableRotatable = add(\"Draggable & Scalable & Rotatable\", {\n    app: require(\"./ReactDraggableScalableRotatableApp\").default,\n    path: require.resolve(\"./ReactDraggableScalableRotatableApp\"),\n    argsTypes: {\n        ...DEFAULT_SCALABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n    },\n});\n\nexport const IndividualGroupGroupableProps = add(\"Use Individual Groupable Props\", {\n    app: require(\"./ReactIndividualGroupablePropsApp\").default,\n    path: require.resolve(\"./ReactIndividualGroupablePropsApp\"),\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/3-IndiviualGroup/ReactDraggableScalableRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target target1\">Target1</div>\n                <div className=\"target target2\">Target2</div>\n                <div className=\"target target3\">Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    individualGroupable={true}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    scalable={props.scalable}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    renderDirections={props.renderDirections}\n                    rotatable={props.rotatable}\n                    throttleRotate={props.throttleRotate}\n                    rotationPosition={props.rotationPosition}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onScale={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/3-IndiviualGroup/ReactIndividualGroupablePropsApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target target1\">Target1</div>\n                <div className=\"target target2\">Target2</div>\n                <div className=\"target target3\">Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    individualGroupable={true}\n                    draggable={true}\n                    resizable={true}\n                    rotatable={true}\n                    individualGroupableProps={element => {\n                        if (element!.classList.contains(\"target2\")) {\n                            return {\n                                resizable: false,\n                            };\n                        }\n                    }}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/0-Default.stories.tsx",
    "content": "import { expect } from \"@storybook/jest\";\n\nimport { makeArgType, makeOptionLink } from \"../utils\";\nimport { add } from \"../utils/story\";\nimport \"../templates/default.css\";\nimport { pan, wait } from \"../utils/testing\";\n\nexport default {\n    title: \"Options\",\n};\n\nexport const OptionsResizeObserver = add(\"useResizeObserver\", {\n    app: require(\"./ReactUseResizeObserverApp\").default,\n    path: require.resolve(\"./ReactUseResizeObserverApp\"),\n});\n\nexport const OptionsResizeObserverGroup = add(\"useResizeObserver (Group)\", {\n    app: require(\"./ReactUseResizeObserverGroupApp\").default,\n    path: require.resolve(\"./ReactUseResizeObserverGroupApp\"),\n});\n\nexport const OptionsResizeObserverIndividualGroup = add(\"useResizeObserver (Individual Group)\", {\n    app: require(\"./ReactUseResizeObserverIndividualGroupApp\").default,\n    path: require.resolve(\"./ReactUseResizeObserverIndividualGroupApp\"),\n});\n\nexport const OptionsMutationObserver = add(\"useMutationObserver\", {\n    app: require(\"./ReactUseMutationObserverApp\").default,\n    path: require.resolve(\"./ReactUseMutationObserverApp\"),\n});\n\n\nexport const OptionsPadding = add(\"padding\", {\n    app: require(\"./ReactPaddingApp\").default,\n    path: require.resolve(\"./ReactPaddingApp\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        // se direction control\n        const seControl = canvasElement.querySelector<HTMLElement>(`.moveable-se`)!;\n\n        await pan({\n            target: seControl,\n            start: [0, 0],\n            end: [100, 50],\n            duration: 100,\n            interval: 10,\n        });\n        // width 100 + padding (10 + 20) 130 => 230\n        // height 100 + padding (30 + 40) 170 => 220\n\n\n        const paddingAreas = canvasElement.querySelectorAll<HTMLElement>(`.moveable-padding`);\n        const widthLine = canvasElement.querySelector<HTMLElement>(`[data-line-key=\"render-line-0\"]`)!;\n        const heightLine = canvasElement.querySelector<HTMLElement>(`[data-line-key=\"render-line-1\"]`)!;\n\n        expect(Math.round(parseFloat(widthLine.style.width))).toBe(231);\n        expect(Math.round(parseFloat(heightLine.style.width))).toBe(221);\n\n        // left\n        expect(Math.round(paddingAreas[0].getBoundingClientRect().width)).toBe(10);\n        // top\n        expect(Math.round(paddingAreas[1].getBoundingClientRect().height)).toBe(30);\n        // right\n        expect(Math.round(paddingAreas[2].getBoundingClientRect().width)).toBe(20);\n        // bottom\n        expect(Math.round(paddingAreas[3].getBoundingClientRect().height)).toBe(40);\n        // expect(canvasElement.querySelector(`[data-line-key=\"render-line-0\"]`)\n    },\n});\n\nexport const OptionsLinePadding = add(\"linePadding\", {\n    app: require(\"./ReactLinePaddingApp\").default,\n    path: require.resolve(\"./ReactLinePaddingApp\"),\n    argsTypes: {\n        linePadding: makeArgType({\n            type: \"number\",\n            description: makeOptionLink(\"Moveable\", \"DefaultOptions\", \"linePadding\"),\n            defaultValue: 0,\n            value: 10,\n        }),\n    },\n});\n\nexport const OptionsControlPadding = add(\"controlPadding\", {\n    app: require(\"./ReactControlPaddingApp\").default,\n    path: require.resolve(\"./ReactControlPaddingApp\"),\n    argsTypes: {\n        controlPadding: makeArgType({\n            type: \"number\",\n            description: makeOptionLink(\"Moveable\", \"DefaultOptions\", \"controlPadding\"),\n            defaultValue: 0,\n            value: 20,\n        }),\n    },\n});\n\n\nexport const OptionsCheckInput = add(\"checkInput\", {\n    app: require(\"./ReactCheckInputApp\").default,\n    path: require.resolve(\"./ReactCheckInputApp\"),\n});\n\n\nexport const OptionsDragFocusedInput = add(\"dragFocusedInput\", {\n    app: require(\"./ReactDragFocusedInputApp\").default,\n    path: require.resolve(\"./ReactDragFocusedInputApp\"),\n});\n\n\nexport const OptionsViewContainer = add(\"viewContainer (Cursor is applied in viewer during dragging)\", {\n    app: require(\"./ReactViewContainerApp\").default,\n    path: require.resolve(\"./ReactViewContainerApp\"),\n});\n\n\n\nexport const OptionsPersistData = add(\"persistData (First render with persisted data)\", {\n    app: require(\"./ReactPersistDataApp\").default,\n    path: require.resolve(\"./ReactPersistDataApp\"),\n});\n\nexport const OptionsPersistDataGroup = add(\"persistData (First render with persisted data, group)\", {\n    app: require(\"./ReactGroupPersistDataApp\").default,\n    path: require.resolve(\"./ReactGroupPersistDataApp\"),\n});\n\n\nexport const OptionsPersistDataIndividualGroup = add(`persistData (First render with persisted data, individual group)`, {\n    app: require(\"./ReactIndividualGroupPersistDataApp\").default,\n    path: require.resolve(\"./ReactIndividualGroupPersistDataApp\"),\n});\n\nexport const OptionsRootContainer = add(\"rootContainer (css transformed container)\", {\n    app: require(\"./ReactTransformedApp\").default,\n    path: require.resolve(\"./ReactTransformedApp\"),\n});\n\nexport const OptionsRootContainerZoom = add(\"rootContainer (css zoomed container)\", {\n    app: require(\"./ReactRootContainerApp\").default,\n    path: require.resolve(\"./ReactRootContainerApp\"),\n});\n\nexport const OptionsZoom = add(\"zoom (line, control)\", {\n    app: require(\"./ReactZoomApp\").default,\n    path: require.resolve(\"./ReactZoomApp\"),\n});\n\n\nexport const OptionsAccuratePosition = add(\"useAccuratePosition (Render in a more accurate position)\", {\n    app: require(\"./ReactUseAccuratePositionApp\").default,\n    path: require.resolve(\"./ReactUseAccuratePositionApp\"),\n});\n\n\n\nexport const OptionsDragTarget = add(\"other dragTarget\", {\n    app: require(\"./ReactDragTargetApp\").default,\n    path: require.resolve(\"./ReactDragTargetApp\"),\n});\n\n\n\nexport const OptionsDragTargetSelf = add(\"dragTargetSelf with other dragTarget\", {\n    app: require(\"./ReactDragTargetSelfApp\").default,\n    path: require.resolve(\"./ReactDragTargetSelfApp\"),\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactCheckInputApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <p>checkInput (false)</p>\n        <input type=\"input\" className=\"target1\" />\n        <p>checkInput (true)</p>\n        <input type=\"input\" className=\"target2\" />\n        <Moveable\n            target={\".target1\"}\n            draggable={true}\n            onDrag={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n        <Moveable\n            target={\".target2\"}\n            draggable={true}\n            checkInput={true}\n            onDrag={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactControlPaddingApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return <div className=\"container\">\n        <div className=\"target\"></div>\n        <Moveable\n            target={\".target\"}\n            className=\"control-padding\"\n            draggable={true}\n            resizable={true}\n            rotatable={true}\n            displayAroundControls={true}\n            controlPadding={props.controlPadding}\n            onRender={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactDragFocusedInputApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    const targetRef1 = React.useRef<HTMLInputElement>(null);\n    const targetRef2 = React.useRef<HTMLDivElement>(null);\n\n    return <div className=\"container\">\n        <p>Input         <button onClick={() => {\n            targetRef1.current!.focus();\n        }}>Focus Input</button></p>\n        <input type=\"input\" className=\"target1\" ref={targetRef1}></input>\n        <p>Content Editable <button onClick={() => {\n            targetRef2.current!.focus();\n        }}>Focus contenteEditable</button></p>\n        <div className=\"target2\" contentEditable=\"true\" ref={targetRef2} style={{\n            width: \"100px\",\n            height: \"100px\",\n        }}></div>\n        <Moveable\n            target={\".target1\"}\n            draggable={true}\n            dragFocusedInput={true}\n            onDrag={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n        <Moveable\n\n            target={\".target2\"}\n            draggable={true}\n            dragFocusedInput={true}\n            onDrag={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactDragTargetApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <div className=\"drag-area\" style={{\n            width: \"100px\",\n            height: \"100px\",\n        }}>Drag</div>\n        <div className=\"target\"></div>\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            scalable={true}\n            rotatable={true}\n            dragTarget={\".drag-area\"}\n            onRender={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactDragTargetSelfApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <div className=\"drag-area\" style={{\n            width: \"100px\",\n            height: \"100px\",\n        }}>Drag</div>\n        <div className=\"target\"></div>\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            scalable={true}\n            rotatable={true}\n            dragTarget={\".drag-area\"}\n            dragTargetSelf={true}\n            onRender={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactGroupPersistDataApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <p className=\"description\">\n                * You can persist by `moveable.getRect()` method.\n            </p>\n            <div className=\"target target1\" style={{\n                transform: \"translate(57.4837px, 16.3011px) rotate(10.5213deg)\",\n            }}>No Target1</div>\n            <div className=\"target target2\" style={{\n                transform: \"translate(22.3858px, 104.945px) rotate(30.5213deg)\",\n            }}>No Target2</div>\n            <div className=\"target target3\" style={{\n                transform: \"translate(-16.8514px, 28.7599px) rotate(30.5213deg)\",\n            }}>No Target3</div>\n            <Moveable\n                draggable={true}\n                resizable={true}\n                rotatable={true}\n                origin={true}\n                persistData={{\n                    \"width\": 391.66543415599995,\n                    \"height\": 383.962796948,\n                    \"left\": 62.228131762906024,\n                    \"top\": 90.31465753146728,\n                    \"pos1\": [\n                        219.08575903890602,\n                        90.31465753146728,\n                    ],\n                    \"pos2\": [\n                        453.89356591890595,\n                        287.34203529146725,\n                    ],\n                    \"pos3\": [\n                        62.228131762906024,\n                        277.25007671946724,\n                    ],\n                    \"pos4\": [\n                        297.035938642906,\n                        474.2774544794673,\n                    ],\n                    \"offsetWidth\": 306.52,\n                    \"offsetHeight\": 244.027,\n                    \"beforeOrigin\": [\n                        258.060280934906,\n                        282.2936213634673,\n                    ],\n                    \"origin\": [\n                        258.060280934906,\n                        282.2936213634673,\n                    ],\n                    \"transformOrigin\": [\n                        153.258,\n                        122.012,\n                    ],\n                    \"rotation\": 40.00003345093183,\n                    \"children\": [\n                        {\n                            \"width\": 116.5788,\n                            \"height\": 116.5788,\n                            \"left\": 169.1943,\n                            \"top\": 128.01170000000002,\n                            \"pos1\": [\n                                187.4544,\n                                128.01170000000002,\n                            ],\n                            \"pos2\": [\n                                285.7731,\n                                146.2718,\n                            ],\n                            \"pos3\": [\n                                169.1943,\n                                226.33040000000003,\n                            ],\n                            \"pos4\": [\n                                267.51300000000003,\n                                244.59050000000002,\n                            ],\n                            \"offsetWidth\": 100,\n                            \"offsetHeight\": 100,\n                            \"beforeOrigin\": [\n                                227.4837,\n                                186.30110000000002,\n                            ],\n                            \"origin\": [\n                                227.4837,\n                                186.30110000000002,\n                            ],\n                            \"transformOrigin\": [\n                                50,\n                                50,\n                            ],\n                            \"rotation\": 10.52129854976897,\n                        },\n                        {\n                            \"width\": 136.92990000000003,\n                            \"height\": 136.92989999999998,\n                            \"left\": 303.92085,\n                            \"top\": 226.48005,\n                            \"pos1\": [\n                                354.70675,\n                                226.48005,\n                            ],\n                            \"pos2\": [\n                                440.85075,\n                                277.26595,\n                            ],\n                            \"pos3\": [\n                                303.92085,\n                                312.62405,\n                            ],\n                            \"pos4\": [\n                                390.06485,\n                                363.40995,\n                            ],\n                            \"offsetWidth\": 100,\n                            \"offsetHeight\": 100,\n                            \"beforeOrigin\": [\n                                372.3858,\n                                294.945,\n                            ],\n                            \"origin\": [\n                                372.3858,\n                                294.945,\n                            ],\n                            \"transformOrigin\": [\n                                50,\n                                50,\n                            ],\n                            \"rotation\": 30.521329871109174,\n                        },\n                        {\n                            \"width\": 136.92990000000003,\n                            \"height\": 136.92989999999998,\n                            \"left\": 144.68365,\n                            \"top\": 260.29495,\n                            \"pos1\": [\n                                195.46955,\n                                260.29495,\n                            ],\n                            \"pos2\": [\n                                281.61355000000003,\n                                311.08084999999994,\n                            ],\n                            \"pos3\": [\n                                144.68365,\n                                346.43895,\n                            ],\n                            \"pos4\": [\n                                230.82765,\n                                397.22484999999995,\n                            ],\n                            \"offsetWidth\": 100,\n                            \"offsetHeight\": 100,\n                            \"origin\": [\n                                213.1486,\n                                328.75989999999996,\n                            ],\n                            \"transformOrigin\": [\n                                50,\n                                50,\n                            ],\n                            \"rotation\": 30.521329871109167,\n                        },\n                    ],\n                }}\n                onRenderGroup={e => {\n                    e.events.forEach(ev => {\n                        ev.target.style.cssText += ev.cssText;\n                    });\n                }}\n                onRenderGroupEnd={e => {\n                    console.log(JSON.stringify(e.moveable.getRect(), undefined, 4));\n                }}\n                onChangeTargets={e => {\n                    console.log(\"??\", JSON.stringify(e.moveable.getRect(), undefined, 4));\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactIndividualGroupPersistDataApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <p className=\"description\">\n                * You can persist by `moveable.getRect()` method.\n            </p>\n            <div className=\"target target1\" style={{\n                transform: \"translate(57.4837px, 16.3011px) rotate(30.5213deg)\",\n            }}>No Target1</div>\n            <div className=\"target target2\" style={{\n                transform: \"translate(22.3858px, 104.945px) rotate(30.5213deg)\",\n            }}>No Target2</div>\n            <div className=\"target target3\" style={{\n                transform: \"translate(-16.8514px, 28.7599px) rotate(30.5213deg)\",\n            }}>No Target3</div>\n            <Moveable\n                // target={\".target\"}\n                draggable={true}\n                resizable={true}\n                rotatable={true}\n                origin={true}\n                individualGroupable={true}\n                persistData={{\n                    left: 92.99700062437337,\n                    top: 117.83604282479718,\n                    pos1: [\n                        209.80457062437335,\n                        117.83604282479718,\n                    ],\n                    pos2: [\n                        451.00777062437334,\n                        260.03656282479716,\n                    ],\n                    pos3: [\n                        92.99700062437337,\n                        315.96724282479715,\n                    ],\n                    pos4: [\n                        334.20020062437334,\n                        458.1677628247972,\n                    ],\n                    offsetWidth: 280,\n                    offsetHeight: 230,\n                    origin: [\n                        272.00238562437335,\n                        288.0019028247972,\n                    ],\n                    children: [\n                        {\n                            left: 159.01875,\n                            top: 117.83615,\n                            pos1: [\n                                209.80455,\n                                117.83615,\n                            ],\n                            pos2: [\n                                295.94865,\n                                168.62195,\n                            ],\n                            pos3: [\n                                159.01875,\n                                203.98025,\n                            ],\n                            pos4: [\n                                245.16285,\n                                254.76605,\n                            ],\n                            offsetWidth: 100,\n                            offsetHeight: 100,\n                            origin: [\n                                227.4837,\n                                186.30110000000002,\n                            ],\n                        },\n                        {\n                            left: 303.92085000000003,\n                            top: 226.48005,\n                            pos1: [\n                                354.70665,\n                                226.48005,\n                            ],\n                            pos2: [\n                                440.85075,\n                                277.26585,\n                            ],\n                            pos3: [\n                                303.92085000000003,\n                                312.62415,\n                            ],\n                            pos4: [\n                                390.06495,\n                                363.40995,\n                            ],\n                            offsetWidth: 100,\n                            offsetHeight: 100,\n                            origin: [\n                                372.3858,\n                                294.945,\n                            ],\n                        },\n                        {\n                            left: 144.68365,\n                            top: 260.29495,\n                            pos1: [\n                                195.46945,\n                                260.29495,\n                            ],\n                            pos2: [\n                                281.61355,\n                                311.08074999999997,\n                            ],\n                            pos3: [\n                                144.68365,\n                                346.43904999999995,\n                            ],\n                            pos4: [\n                                230.82774999999998,\n                                397.22484999999995,\n                            ],\n                            offsetWidth: 100,\n                            offsetHeight: 100,\n                            origin: [\n                                213.1486,\n                                328.75989999999996,\n                            ],\n                        },\n                    ],\n                }}\n                onRenderGroup={e => {\n                    e.events.forEach(ev => {\n                        ev.target.style.cssText += ev.cssText;\n                    });\n                }}\n                onRenderGroupEnd={e => {\n                    console.log(JSON.stringify(e.moveable.getRect(), undefined, 4));\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactLinePaddingApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return <div className=\"container\">\n        <div className=\"target\"></div>\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            resizable={true}\n            linePadding={props.linePadding}\n            edge={true}\n            onRender={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactPaddingApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <div className=\"target\"></div>\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            scalable={true}\n            rotatable={true}\n            padding={{\n                left: 10,\n                right: 20,\n                top: 30,\n                bottom: 40,\n            }}\n            onRender={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactPersistDataApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <p className=\"description\">\n                * You can persist by `moveable.getRect()` method.\n            </p>\n            <div className=\"target\" style={{\n                transform: \"translate(100px, 100px) rotate(45deg)\",\n            }}>\n                No Target\n            </div>\n            <Moveable\n                // target={\".target\"}\n                draggable={true}\n                resizable={true}\n                rotatable={true}\n                origin={true}\n                persistData={{\n                    left: 179.2893,\n                    top: 229.2893,\n                    offsetHeight: 100,\n                    offsetWidth: 100,\n                    origin: [250, 300],\n                    pos1: [250, 229.2893],\n                    pos2: [320.7107, 300],\n                    pos3: [179.2893, 300],\n                    pos4: [250, 370.7107],\n                    transformOrigin: [\n                        50,\n                        50,\n                    ],\n                }}\n                onRender={e => {\n                    e.target.style.cssText += e.cssText;\n\n                    console.log(e.moveable.getRect());\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactRootContainerApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"margin no-relative\">\n            <div style={{\n                position: \"absolute\",\n                left: \"84px\",\n                top: \"159px\",\n                zIndex: 1,\n            }}>92 x 167 (34, 84)</div>\n            <div className=\"root\" style={{\n                // position: \"relative\",\n                padding: \"10px\",\n            }}>\n                <div style={{\n                    zoom: 0.5,\n                    position: \"relative\",\n                }}>\n                    <div style={{\n                        position: \"relative\",\n                        marginTop: \"100px\",\n                        width: \"500px\",\n                        height: \"500px\",\n                    }}>\n                        <div className=\"target\" style={{\n                            transform: \"translate(0px, 0px)\",\n                        }}>Target</div>\n                        <Moveable\n                            target={\".target\"}\n                            draggable={true}\n                            rotatable={true}\n                            resizable={true}\n                            rootContainer={document.body}\n                            onRender={e => {\n                                e.target.style.cssText += e.cssText;\n                            }}\n                            onRenderEnd={e => {\n                                console.log(\"RCR\", e.moveable.state.rootContainerClientRect);\n                                console.log(\"ORM\", e.moveable.state.originalRootMatrix);\n                                console.log(\"MCR\", e.moveable.state.moveableClientRect);\n                            }}\n                        ></Moveable>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactTransformedApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\" style={{\n            transformOrigin: \"0 0\",\n            transform: `scale(0.5)`,\n        }}>\n            <div className=\"container\">\n                <div style={{\n                    position: \"relative\",\n                    transform: \"translate3d(0px, 0px, 100px)\",\n                }}>\n                    <div className=\"target\" style={{\n                        transform: \"translate(0px, 0px)\",\n                    }}>Target</div>\n                    <Moveable\n                        target={\".target\"}\n                        draggable={true}\n                        rotatable={true}\n                        rootContainer={document.body}\n                        onRender={e => {\n                            e.target.style.cssText += e.cssText;\n                        }}\n                    ></Moveable>\n                </div>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactUseAccuratePositionApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <p className=\"description\">\n                    * There is a subpixel issue because offsetLeft and offsetTop are used. <br />\n                    * You can accurately represent the position of a movable control box. <br />\n                    * However, since gBCR is used, css zoom should not be used <br />\n                    * and `transform: rotate` should not be used for container, rootContainer.\n\n                </p>\n                <div style={{\n                    transformOrigin: \"0 0\",\n                    transform: \"scale(2, 2)\",\n                }}>\n                    <div className=\"target target1\" style={{\n                        position: \"relative\",\n                        left: \"10.5px\",\n                        top: \"10.5px\",\n                        width: \"100px\",\n                        height: \"40px\",\n                        lineHeight: \"40px\",\n                        fontSize: \"10px\",\n                    }}>\n                        Not Accurate\n                    </div>\n                </div>\n                <Moveable\n                    target={\".target1\"}\n                    draggable={true}\n                    origin={false}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n                <div style={{\n                    transformOrigin: \"0 0\",\n                    transform: \"scale(2, 2)\",\n                }}>\n                    <div className=\"target target2\" style={{\n                        position: \"absolute\",\n                        left: \"10.5px\",\n                        top: \"50.5px\",\n                        width: \"100px\",\n                        height: \"40px\",\n                        lineHeight: \"40px\",\n                        fontSize: \"10px\",\n                    }}>\n                        Accurate\n                    </div>\n                </div>\n                <Moveable\n                    target={\".target2\"}\n                    draggable={true}\n                    origin={false}\n                    useAccuratePosition={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactUseMutationObserverApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <button onClick={() => {\n                    const left = 50 + Math.floor(50 * Math.random());\n                    const top = 50 + Math.floor(50 * Math.random());\n\n                    document.querySelector<HTMLElement>(\".target\")!.style.cssText\n                        += `left: ${left}px;top: ${top}px`;\n                }}>Random Position</button>\n                <p>Changes in css position due to className or attribute selector are not detected.</p>\n                <p>Use with `useResizeObserver`.</p>\n                <div className=\"target\">Target1</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    rotatable={true}\n                    resizable={true}\n                    useResizeObserver={true}\n                    useMutationObserver={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onResize={e => {\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactUseResizeObserverApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <button onClick={() => {\n                    const width = 50 + Math.floor(50 * Math.random());\n                    const height = 50 + Math.floor(50 * Math.random());\n\n                    document.querySelector<HTMLElement>(\".target\")!.style.cssText\n                        += `width: ${width}px;height: ${height}px`;\n                }}>Random Resize</button>\n                <div className=\"target\">Target1</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    rotatable={true}\n                    resizable={true}\n                    useResizeObserver={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onResize={e => {\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactUseResizeObserverGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <button onClick={() => {\n                    const width = 50 + Math.floor(50 * Math.random());\n                    const height = 50 + Math.floor(50 * Math.random());\n\n                    document.querySelectorAll<HTMLElement>(\".target\")[Math.floor(Math.random() * 3)].style.cssText\n                        += `width: ${width}px;height: ${height}px`;\n                }}>Random Resize</button>\n                <div className=\"target target1\">Target1</div>\n                <div className=\"target target2\">Target2</div>\n                <div className=\"target target3\">Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    rotatable={true}\n                    resizable={true}\n                    useResizeObserver={true}\n                    onDragGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.transform = ev.transform;\n                        });\n                    }}\n                    onResizeGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.width = `${ev.width}px`;\n                            ev.target.style.height = `${ev.height}px`;\n                            ev.target.style.transform = ev.drag.transform;\n                        });\n                    }}\n                    onRotateGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.transform = ev.drag.transform;\n                        });\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactUseResizeObserverIndividualGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <button onClick={() => {\n                    const width = 50 + Math.floor(50 * Math.random());\n                    const height = 50 + Math.floor(50 * Math.random());\n\n                    document.querySelectorAll<HTMLElement>(\".target\")[Math.floor(Math.random() * 3)].style.cssText\n                        += `width: ${width}px;height: ${height}px`;\n                }}>Random Resize</button>\n                <div className=\"target target1\">Target1</div>\n                <div className=\"target target2\">Target2</div>\n                <div className=\"target target3\">Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    individualGroupable={true}\n                    draggable={true}\n                    rotatable={true}\n                    resizable={true}\n                    useResizeObserver={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onResize={e => {\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactViewContainerApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <p className=\"description\">\n                * When you drag, the class name `${`{ableName}`}-view-dragging` is added to the viewContainer.\n            </p>\n            <div className=\"target\">Target</div>\n            <Moveable\n                target={\".target\"}\n                draggable={true}\n                resizable={true}\n                rotatable={true}\n                viewContainer={document.body}\n                onRender={e => {\n                    e.target.style.cssText += e.cssText;\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-Options/ReactZoomApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <div className=\"target\" style={{\n            width: \"300px\",\n            height: \"300px\",\n        }}></div>\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            rotatable={true}\n            zoom={5}\n            onRender={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-SVG/0-SVG.stories.tsx",
    "content": "import { add } from \"../utils/story\";\nimport \"../common.css\";\nimport \"../templates/default.css\";\nimport { expect } from \"@storybook/jest\";\nimport { wait } from \"../utils/testing\";\n\nexport default {\n    title: \"SVG\",\n};\n\nexport const SVGPathElement = add(\"SVGPathElement\", {\n    app: require(\"./ReactPathApp\").default,\n    text: require(\"!!raw-loader!./ReactPathApp\").default,\n});\nexport const SVGSVGElement = add(\"SVGSVGElement\", {\n    app: require(\"./ReactSVGSVGApp\").default,\n    text: require(\"!!raw-loader!./ReactSVGSVGApp\").default,\n});\n\nexport const SVGCircle = add(\"Circle\", {\n    app: require(\"./ReactSVGCircleApp\").default,\n    text: require(\"!!raw-loader!./ReactSVGCircleApp\").default,\n});\n\nexport const SVGLine = add(\"Line\", {\n    app: require(\"./ReactSVGLineApp\").default,\n    text: require(\"!!raw-loader!./ReactSVGLineApp\").default,\n});\n\nexport const SVGG = add(\"SVGElement with G tag\", {\n    app: require(\"./ReactSVGGApp\").default,\n    text: require(\"!!raw-loader!./ReactSVGGApp\").default,\n});\n\nexport const SVGTargetG = add(\"SVGElement with target G tag\", {\n    app: require(\"./ReactSVGTargetGApp\").default,\n    text: require(\"!!raw-loader!./ReactSVGTargetGApp\").default,\n});\n\n\nexport const SVGGroup = add(\"SVG Group\", {\n    app: require(\"./ReactSVGGroupApp\").default,\n    text: require(\"!!raw-loader!./ReactSVGGroupApp\").default,\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const area = canvasElement.querySelector<HTMLElement>(\".moveable-area\")!;\n\n        expect(area.style.width).toBe(\"191px\");\n        expect(area.style.height).toBe(\"57px\");\n        expect(area.style.transform).toBe(\"translate(0px, 0px) rotate(0deg) scale(1, 1)\");\n    },\n});\n\n\nexport const SVGOrigin = add(\"SVGPathElement with center origin\", {\n    app: require(\"./ReactOriginApp\").default,\n    text: require(\"!!raw-loader!./ReactOriginApp\").default,\n});\n\n\nexport const SVGFillboxOrigin = add(\"SVGPathElement with center origin and transform fill-box\", {\n    app: require(\"./ReactOriginFillboxApp\").default,\n    text: require(\"!!raw-loader!./ReactOriginFillboxApp\").default,\n});\n\n\n\n\nexport const SVGForeignObject = add(\"SVGForeignObject\", {\n    app: require(\"./ReactSVGForeignObjectApp\").default,\n    text: require(\"!!raw-loader!./ReactSVGForeignObjectApp\").default,\n});\n\n\nexport const SVGForeignObjectInner = add(\"SVGForeignObject div\", {\n    app: require(\"./ReactSVGForeignObjectInnerApp\").default,\n    text: require(\"!!raw-loader!./ReactSVGForeignObjectInnerApp\").default,\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/4-SVG/ReactOriginApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                transformOrigin: \"0 0\",\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <svg viewBox=\"0 0 200 200\" style={{\n                    border: \"1px solid black\",\n                    width: \"200px\",\n                    height: \"200px\",\n                }}>\n                    <path d=\"M 0 0 L 200 0 L 200 200 z\" style={{\n                        fill: \"white\",\n                        stroke: \"red\",\n                        strokeWidth: 2,\n                    }} />\n                </svg>\n                <Moveable\n                    target={\"path\"}\n                    draggable={true}\n                    rotatable={true}\n                    scalable={true}\n                    svgOrigin=\"50% 50%\"\n                    // onRotateStart={e => {\n                    //     e.setFixedDirection([0, 0]);\n                    // }}\n                    // onScaleStart={e => {\n                    //     e.setFixedDirection([0, 0]);\n                    // }}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-SVG/ReactOriginFillboxApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\">\n            <div\n                className=\"container\"\n                style={{\n                    transformOrigin: \"0 0\",\n                    transform: `scale(${props.containerScale})`,\n                }}\n            >\n                <svg\n                    viewBox=\"0 0 500 500\"\n                    style={{\n                        border: \"1px solid black\",\n                        width: \"500px\",\n                        height: \"500px\",\n                    }}\n                >\n                    <rect\n                        id=\"rect-1\"\n                        x=\"100\"\n                        y=\"100\"\n                        width=\"50\"\n                        height=\"50\"\n                        style={{\n                            fill: \"red\",\n                            transformBox: \"fill-box\",\n                            transform: \"\",\n                            strokeWidth: \"0\",\n                            transformOrigin: \"50% 50%\",\n                        }}\n                        // {...{ \"transform-origin\": \"50% 50%\" }}\n                    />\n                </svg>\n                <Moveable\n                    target={\"#rect-1\"}\n                    draggable={true}\n                    rotatable={true}\n                    scalable={true}\n                    svgOrigin=\"50% 50%\"\n                    onRender={(e) => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n                <Moveable\n                    target={\"#rect-2\"}\n                    draggable={true}\n                    rotatable={true}\n                    scalable={true}\n                    svgOrigin=\"50% 50%\"\n                    onRender={(e) => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-SVG/ReactPathApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<SVGPathElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                transformOrigin: \"0 0\",\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <svg viewBox=\"0 0 400 400\" style={{\n                    position: \"relative\",\n                    left: \"200px\",\n                    top: \"200px\",\n                    border: \"1px solid black\",\n                    width: \"200px\",\n                    height: \"200px\",\n                }}>\n                    <path d=\"M 0 0 L 200 0 L 200 200 z\" ref={targetRef} style={{\n                        fill: \"white\",\n                        stroke: \"red\",\n                        strokeWidth: 2,\n                    }} />\n                </svg>\n                <Moveable\n                    target={targetRef}\n                    draggable={true}\n                    rotatable={true}\n                    scalable={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-SVG/ReactSVGCircleApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<SVGCircleElement>(null);\n\n    return (\n        <div className=\"root\" style={{\n            paddingLeft: \"100px\",\n            paddingTop: \"100px\",\n        }}>\n            <div className=\"container\" style={{\n                transformOrigin: \"0 0\",\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <svg viewBox=\"0 0 200 200\" style={{\n                    border: \"1px solid black\",\n                    width: \"200px\",\n                    height: \"200px\",\n                }}>\n                    <circle cx=\"50\" cy=\"100\" r=\"50\"  ref={targetRef}/>\n                </svg>\n                <Moveable\n                    target={targetRef}\n                    draggable={true}\n                    rotatable={true}\n                    scalable={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                ></Moveable>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-SVG/ReactSVGForeignObjectApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <svg viewBox=\"0 0 86 54\">\n                    <foreignObject x=\"10\" y=\"10\" width=\"20\" height=\"20\">\n                        <div>Hi</div>\n                    </foreignObject>\n                </svg>\n                <Moveable\n                    target={\"foreignObject\"}\n                    draggable={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-SVG/ReactSVGForeignObjectInnerApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <svg viewBox=\"0 0 86 54\">\n                    <foreignObject x=\"10\" y=\"10\" width=\"20\" height=\"20\">\n                        <div>Hi</div>\n                    </foreignObject>\n                </svg>\n                <Moveable\n                    target={\"foreignObject div\"}\n                    draggable={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-SVG/ReactSVGGApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<SVGPathElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                transformOrigin: \"0 0\",\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <svg viewBox=\"0 0 200 200\" style={{\n                    position: \"relative\",\n                    border: \"1px solid black\",\n                    width: \"200px\",\n                    height: \"200px\",\n                    top: \"100px\",\n                    left: \"100px\",\n                }}>\n                    <g\n                        transform=\"translate(10, 10) rotate(0)\"\n                        x=\"50\"\n                        y=\"50\"\n                        style={{\n                            // transform: \"translate(10px, 10px) rotate(20deg)\",\n                        }}\n                    >\n                        <path d=\"M 50 50 L 250 50 L 250 250 z\" ref={targetRef} style={{\n                            transform: \"translate(30px, 30px) rotate(20deg)\",\n                            fill: \"white\",\n                            stroke: \"red\",\n                            strokeWidth: 2,\n                            // transform: \"translate(10px, 10px) rotate(20deg)\",\n                        }} />\n                    </g>\n                </svg>\n                <Moveable\n                    target={targetRef}\n                    draggable={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-SVG/ReactSVGGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (<div className=\"container\">\n        <svg width=\"50\" height=\"50\" style={{\n            transform: \"translate(13px, 37px)\",\n        }}>\n            <circle cx=\"25\" cy=\"25\" r=\"25\" fill=\"blue\"></circle>\n        </svg>\n        <svg width=\"50\" height=\"50\" style={{\n            transform: \"translate(104px, 30px)\",\n        }}>\n            <rect width=\"50\" height=\"50\" rx=\"3\" fill=\"red\" />\n        </svg>\n        <Moveable\n            target={\"svg\"}\n            draggable={true}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n        />\n    </div>);\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-SVG/ReactSVGLineApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<SVGLineElement>(null);\n\n    return (\n        <div className=\"root\" style={{\n            paddingLeft: \"100px\",\n            paddingTop: \"100px\",\n        }}>\n            <div className=\"container\" style={{\n                transformOrigin: \"0 0\",\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <svg viewBox=\"0 0 200 200\" style={{\n                    border: \"1px solid black\",\n                    width: \"200px\",\n                    height: \"200px\",\n                }}>\n                    <line x1=\"0\" y1=\"80\" x2=\"100\" y2=\"80\" strokeWidth=\"4\" stroke=\"black\"  ref={targetRef} />\n                </svg>\n                <Moveable\n                    target={targetRef}\n                    draggable={true}\n                    rotatable={true}\n                    scalable={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                ></Moveable>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-SVG/ReactSVGSVGApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<SVGSVGElement>(null);\n\n    return (\n        <div className=\"root\" style={{\n            paddingLeft: \"100px\",\n            paddingTop: \"100px\",\n        }}>\n            <div className=\"container\" style={{\n                transformOrigin: \"0 0\",\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <svg viewBox=\"0 0 200 200\" ref={targetRef} style={{\n                    position: \"relative\",\n                    left: \"200px\",\n                    top: \"200px\",\n                    border: \"1px solid black\",\n                    width: \"200px\",\n                    height: \"200px\",\n                }}>\n                    <path d=\"M 0 0 L 200 0 L 200 200 z\" style={{\n                        fill: \"white\",\n                        stroke: \"red\",\n                        strokeWidth: 2,\n                    }} />\n                </svg>\n                <Moveable\n                    target={targetRef}\n                    draggable={true}\n                    rotatable={true}\n                    scalable={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                ></Moveable>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/4-SVG/ReactSVGTargetGApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                transformOrigin: \"0 0\",\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <svg viewBox=\"0 0 200 200\" style={{\n                    position: \"relative\",\n                    border: \"1px solid black\",\n                    width: \"200px\",\n                    height: \"200px\",\n                    top: \"100px\",\n                    left: \"100px\",\n                }}>\n                    <g className=\"g\">\n                        <path d=\"M 0 0 L 200 0 L 200 200 z\" style={{\n                            fill: \"white\",\n                            stroke: \"red\",\n                            strokeWidth: 2,\n                            transform: \"translate(50px, 50px)\",\n                        }} />\n                    </g>\n                </svg>\n                <Moveable\n                    target={\".g\"}\n                    draggable={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5-Snap&Bound/0-Snap&Bound.stories.tsx",
    "content": "import { expect } from \"@storybook/jest\";\nimport {\n    DEFAULT_BOUNDS_CONTROLS,\n    DEFAULT_DRAGGABLE_CONTROLS,\n    DEFAULT_INNER_BOUNDS_CONTROLS,\n    DEFAULT_RESIZABLE_CONTROLS,\n    DEFAULT_ROTATABLE_CONTROLS,\n    DEFAULT_SCALABLE_CONTROLS,\n    DEFAULT_SNAPPABLE_CONTROLS,\n    DEFAULT_SNAPPABLE_ELEMENTS_CONTROLS,\n    DEFAULT_SNAPPABLE_GUIDELINES_CONTROLS,\n    DEFAULT_SNAP_CONTAINER_CONTROLS,\n    DEFAULT_SNAP_GRID_CONTROLS,\n} from \"../controls/default\";\nimport { makeArgType, makeLink } from \"../utils\";\nimport { add } from \"../utils/story\";\nimport { pan, rotate, wait } from \"../utils/testing\";\n\n\nexport default {\n    title: \"Snap & Bound\",\n};\n\nexport const SnapGuidelines = add(\"Snap Guidelines\", {\n    app: require(\"./ReactSnapGuidelinesApp\").default,\n    path: require.resolve(\"./ReactSnapGuidelinesApp\"),\n    argsTypes: {\n        ...DEFAULT_SNAPPABLE_CONTROLS,\n        ...DEFAULT_SNAPPABLE_GUIDELINES_CONTROLS,\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_SCALABLE_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n\n        // from: left 100, top 150\n        // to: left 52, top 2\n        // result: left 49, top -1\n        await pan({\n            target,\n            start: [0, 0],\n            end: [-48, -148],\n            duration: 20,\n            interval: 10,\n        });\n        expect(target.style.transform).toBe(\"translate(-51px, -151px)\");\n    },\n});\n\nexport const SnapElements = add(\"Snap Elements\", {\n    app: require(\"./ReactSnapElementsApp\").default,\n    path: require.resolve(\"./ReactSnapElementsApp\"),\n    argsTypes: {\n        ...DEFAULT_SNAPPABLE_CONTROLS,\n        ...DEFAULT_SNAPPABLE_ELEMENTS_CONTROLS,\n    },\n});\n\n\nexport const SnapGrid = add(\"Snap Grid\", {\n    app: require(\"./ReactSnapGridApp\").default,\n    path: require.resolve(\"./ReactSnapGridApp\"),\n    argsTypes: {\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_SCALABLE_CONTROLS,\n        ...DEFAULT_SNAP_GRID_CONTROLS,\n    },\n});\n\n\nexport const SnapGridGroup = add(\"Snap Grid Group (snapGridAll)\", {\n    app: require(\"./ReactSnapGridGroupApp\").default,\n    path: require.resolve(\"./ReactSnapGridGroupApp\"),\n    argsTypes: {\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_RESIZABLE_CONTROLS,\n    },\n});\n\nexport const SnapBoundDragScale = add(\"Bound Drag & Scale\", {\n    app: require(\"./ReactBoundScalableApp\").default,\n    path: require.resolve(\"./ReactBoundScalableApp\"),\n    argsTypes: {\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_SCALABLE_CONTROLS,\n        ...DEFAULT_BOUNDS_CONTROLS,\n    },\n});\n\nexport const SnapBoundDragResize = add(\"Bound Drag & Resize\", {\n    app: require(\"./ReactBoundResizableApp\").default,\n    path: require.resolve(\"./ReactBoundResizableApp\"),\n    argsTypes: {\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_RESIZABLE_CONTROLS,\n        ...DEFAULT_BOUNDS_CONTROLS,\n    },\n});\n\n\nexport const SnapDragRotate = add(\"Bound Drag & Rotate\", {\n    app: require(\"./ReactBoundRotatableApp\").default,\n    path: require.resolve(\"./ReactBoundRotatableApp\"),\n    argsTypes: {\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n        ...DEFAULT_BOUNDS_CONTROLS,\n    },\n});\n\nexport const SnapDragRotateGroup = add(\"Bound Drag & Rotate Group\", {\n    app: require(\"./ReactBoundRotatableGroupApp\").default,\n    path: require.resolve(\"./ReactBoundRotatableGroupApp\"),\n});\n\nexport const SnapSnapContainer = add(\"Use snapContainer option\", {\n    app: require(\"./ReactSnapContainerApp\").default,\n    path: require.resolve(\"./ReactSnapContainerApp\"),\n    argsTypes: {\n        ...DEFAULT_SNAPPABLE_CONTROLS,\n        ...DEFAULT_SNAP_CONTAINER_CONTROLS,\n        ...DEFAULT_SNAPPABLE_GUIDELINES_CONTROLS,\n        ...DEFAULT_BOUNDS_CONTROLS,\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n    },\n});\n\nexport const SnapInnerBoundResize = add(\"inner bound with resize\", {\n    app: require(\"./ReactInnerBoundResizableApp\").default,\n    path: require.resolve(\"./ReactInnerBoundResizableApp\"),\n    argsTypes: {\n        ...DEFAULT_INNER_BOUNDS_CONTROLS,\n    },\n});\n\nexport const SnapMaxiumDistance = add(\"Set maximum distance for guidelines\", {\n    app: require(\"./ReactMaxSnapElementApp\").default,\n    path: require.resolve(\"./ReactMaxSnapElementApp\"),\n    argsTypes: {\n        maxSnapElementGuidelineDistance: makeArgType({\n            type: \"number\",\n            description: makeLink(\"Snappable\", \"maxSnapElementGuidelineDistance\"),\n            defaultValue: 100,\n        }),\n        maxSnapElementGapDistance: makeArgType({\n            type: \"number\",\n            description: makeLink(\"Snappable\", \"maxSnapElementGapDistance\"),\n            defaultValue: 80,\n        }),\n    },\n});\n\n\nexport const SnapElementsGroup = add(\"Snap Elements (group)\", {\n    app: require(\"./ReactSnapElementsGroupApp\").default,\n    path: require.resolve(\"./ReactSnapElementsGroupApp\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n        const moveable = canvasElement.querySelector<HTMLElement>(\".moveable-control-box\")!;\n        const target = canvasElement.querySelector<HTMLElement>(\".moveable-area\")!;\n\n        await pan({\n            target,\n            start: [0, 0],\n            end: [-118, -118],\n            duration: 20,\n            interval: 10,\n        });\n        expect(moveable.style.transform).toBe(\"translate3d(-1px, -1px, 0px)\");\n    },\n});\n\n\nexport const SnapRotations = add(\"Snap Rotations\", {\n    app: require(\"./ReactSnapRotationsApp\").default,\n    path: require.resolve(\"./ReactSnapRotationsApp\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const rotationControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box .moveable-rotation-control`)!;\n\n        await rotate({\n            target: rotationControl,\n            start: 0,\n            end: 87,\n            duration: 100,\n            interval: 10,\n            baseTarget: target,\n        });\n        expect(target.style.transform).toBe(\"translate(0px, 0px) rotate(90deg)\");\n    },\n});\n\n\n// export * from \"./9-maxSnapElement.stories\";\n"
  },
  {
    "path": "packages/react-moveable/stories/5-Snap&Bound/ReactBoundResizableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target\" ref={targetRef}>Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={targetRef}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    resizable={props.resizable}\n                    keepRatio={props.keepRatio}\n                    snappable={props.snappable}\n                    bounds={props.bounds}\n                    edge={props.edge}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onResize={e => {\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onBound={e => {\n                        console.log(e);\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5-Snap&Bound/ReactBoundRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target\" style={{\n                    width: \"280px\",\n                    height: \"230px\",\n                }}>Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={\".target\"}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    rotatable={props.rotatable}\n                    snappable={props.snappable}\n                    bounds={props.bounds}\n                    edge={props.edge}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.afterTransform;\n                    }}\n                    onBound={e => {\n                        console.log(e);\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5-Snap&Bound/ReactBoundRotatableGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target target1\">Target1</div>\n                <div className=\"target target2\">Target2</div>\n                <div className=\"target target3\">Target3</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={[\".target1\", \".target2\"]}\n                    draggable={true}\n                    rotatable={true}\n                    snappable={true}\n                    // bounds={{ left: 0, top: 0, right: 0, bottom: 0, position: \"css\" }}\n                    verticalGuidelines={[0]}\n                    onDragGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.cssText += ev.cssText;\n                        });\n                    }}\n                    onRotateGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.cssText += ev.cssText;\n                        });\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5-Snap&Bound/ReactBoundScalableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target\" ref={targetRef} style={{\n                    width: \"200px\",\n                    height: \"150px\",\n                    transform: \"scale(1.5, 1)\",\n                }}>Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={targetRef}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    scalable={props.scalable}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    snappable={props.snappable}\n                    bounds={props.bounds}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onScale={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onBound={e => {\n                        console.log(e);\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5-Snap&Bound/ReactInnerBoundResizableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target\">Target</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    resizable={true}\n                    edge={props.edge}\n                    keepRatio={props.keepRatio}\n                    snappable={true}\n                    innerBounds={props.innerBounds}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onResize={e => {\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onBound={e => {\n                        console.log(e);\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5-Snap&Bound/ReactMaxSnapElementApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                left: \"100px\",\n                top: \"100px\",\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target element1\" style={{\n                    width: \"100px\",\n                    height: \"100px\",\n                    left: \"-150px\",\n                    top: \"150px\",\n                }}>Element1</div>\n                <div className=\"target element2\" style={{\n                    width: \"100px\",\n                    height: \"100px\",\n                    left: \"0px\",\n                    top: \"120px\",\n                }}>Element2</div>\n                <div className=\"target element3\" style={{\n                    width: \"100px\",\n                    height: \"100px\",\n                    left: \"400px\",\n                    top: \"120px\",\n                }}>Element3</div>\n                    <div className=\"target element4\" style={{\n                    width: \"100px\",\n                    height: \"100px\",\n                    left: \"550px\",\n                    top: \"150px\",\n                }}>Element4</div>\n               \n                <div className=\"target\" ref={targetRef} style={{\n                    width: \"150px\",\n                    height: \"150px\",\n                }}>Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={targetRef}\n                    draggable={true}\n                    snappable={true}\n                    elementGuidelines={[\".element1\", \".element2\", \".element3\", \".element4\"]}\n                    snapDirections={{\n                        \"top\": true,\n                        \"left\": true,\n                        \"bottom\": true,\n                        \"right\": true,\n                        \n                        \"center\": true,\n                        \"middle\": true,\n                    }}\n                    elementSnapDirections={{\n                        \"top\": true,\n                        \"left\": true,\n                        \"bottom\": true,\n                        \"right\": true,\n                        \n                        \"center\": true,\n                        \"middle\": true,\n                    }}\n                    maxSnapElementGuidelineDistance={props.maxSnapElementGuidelineDistance}\n                    maxSnapElementGapDistance={props.maxSnapElementGapDistance}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onScale={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5-Snap&Bound/ReactSnapContainerApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\" style={{\n            position: \"relative\",\n            border: \"1px solid black\",\n        }}>\n            <div className=\"container\" style={{\n                position: \"relative\",\n                top: \"50px\",\n                left: \"50px\",\n                border: \"1px solid red\",\n                width: \"500px\",\n                height: \"500px\",\n            }}>\n                <div className=\"snapContainer\"\n                    style={{\n                        position: \"relative\",\n                        top: \"50px\",\n                        left: \"50px\",\n                        border: \"1px solid #ccc\",\n                        width: \"400px\",\n                        height: \"400px\",\n                        transform: \"scale(0.7, 0.7)\",\n                    }}\n                >\n                    <div className=\"target\" ref={targetRef} style={{\n                        width: \"200px\",\n                        height: \"150px\",\n                        transform: \"translate(0px, 0px) scale(1.5, 1)\",\n                    }}>Target</div>\n                </div>\n                <Moveable\n                    ref={moveableRef}\n                    target={targetRef}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    scalable={props.scalable}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    snappable={props.snappable}\n                    snapDirections={props.snapDirections}\n                    elementSnapDirections={props.elementSnapDirections}\n                    snapThreshold={props.snapThreshold}\n                    verticalGuidelines={props.verticalGuidelines}\n                    horizontalGuidelines={props.horizontalGuidelines}\n                    snapContainer={props.snapContainer}\n                    bounds={props.bounds}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onScale={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onBound={e => {\n                        console.log(e);\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5-Snap&Bound/ReactSnapElementsApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                left: \"200px\",\n                top: \"100px\",\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target element1\" style={{\n                    width: \"100px\",\n                    height: \"100px\",\n                    left: \"0px\",\n                    top: \"120px\",\n                }}>Element1</div>\n                <div className=\"target element2\" style={{\n                    width: \"100px\",\n                    height: \"100px\",\n                    left: \"400px\",\n                    top: \"120px\",\n                }}>Element2</div>\n                <div className=\"target element3\" style={{\n                    width: \"300px\",\n                    height: \"100px\",\n                    top: \"400px\",\n                    left: \"50px\",\n                }}>Element3</div>\n                <div className=\"target\" ref={targetRef} style={{\n                    width: \"150px\",\n                    height: \"150px\",\n                }}>Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={targetRef}\n                    draggable={true}\n                    scalable={true}\n                    rotatable={true}\n                    snappable={props.snappable}\n                    isDisplaySnapDigit={props.isDisplaySnapDigit}\n                    isDisplayInnerSnapDigit={props.isDisplayInnerSnapDigit}\n                    snapGap={props.snapGap}\n                    snapDirections={props.snapDirections}\n                    elementSnapDirections={props.elementSnapDirections}\n                    snapThreshold={props.snapThreshold}\n                    maxSnapElementGuidelineDistance={props.maxSnapElementGuidelineDistance}\n                    elementGuidelines={[\".element1\", \".element2\", \".element3\"]}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                    onSnap={e => {\n                        console.log(e.guidelines, e.elements);\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5-Snap&Bound/ReactSnapElementsGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                left: \"200px\",\n                top: \"100px\",\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target target1\">Target 1</div>\n                <div className=\"target target2\">Target 2</div>\n                <div className=\"target target3\">Target 3</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    rotatable={true}\n                    snappable={true}\n                    verticalGuidelines={[0, 100]}\n                    elementGuidelines={[\".container\"]}\n                    onRenderGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.cssText += ev.cssText;\n                        });\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5-Snap&Bound/ReactSnapGridApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target\" ref={targetRef} style={{\n                    width: \"200px\",\n                    height: \"150px\",\n                }}>Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={targetRef}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    scalable={props.scalable}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    snappable={props.snappable}\n\n                    snapGridWidth={props.snapGridWidth}\n                    snapGridHeight={props.snapGridHeight}\n                    isDisplayGridGuidelines={props.isDisplayGridGuidelines}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onScale={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5-Snap&Bound/ReactSnapGridGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target target1\" style={{\n                    top: \"100px\",\n                    left: \"100px\",\n                }}>Target1</div>\n                <div className=\"target target2\" style={{\n                    top: \"150px\",\n                    left: \"150px\",\n                }}>Target2</div>\n                <div className=\"target target3\" style={{\n                    top: \"200px\",\n                    left: \"200px\",\n                }}>Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n\n                    resizable={props.resizable}\n                    keepRatio={props.keepRatio}\n                    edge={props.edge}\n\n                    snappable={true}\n                    snapGridWidth={50}\n                    snapGridHeight={50}\n                    snapThreshold={50}\n                    snapGridAll={true}\n                    isDisplayGridGuidelines={true}\n                    onRenderGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.cssText += ev.cssText;\n                        });\n\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5-Snap&Bound/ReactSnapGuidelinesApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target\" ref={targetRef} style={{\n                    width: \"200px\",\n                    height: \"150px\",\n                }}>Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={targetRef}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    scalable={props.scalable}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    snappable={props.snappable}\n                    snapDirections={props.snapDirections}\n                    snapThreshold={props.snapThreshold}\n                    verticalGuidelines={props.verticalGuidelines}\n                    horizontalGuidelines={props.horizontalGuidelines}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onScale={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5-Snap&Bound/ReactSnapRotationsApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target\" style={{\n                    width: \"200px\",\n                    height: \"150px\",\n                }}>Target</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    snappable={true}\n                    rotatable={true}\n                    scalable={true}\n                    snapRotataionThreshold={5}\n                    snapRotationDegrees={[0, 90, 180, 270]}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/0-Moveable/Deafult.stories.tsx",
    "content": "import { add } from \"../../utils/story\";\n\nexport default {\n    title: \"Advanced Moveable Settings\",\n};\n\nexport const AdancedMoveablePositionFixed = add(\"Target with position: fixed;\", {\n    app: require(\"./ReactPositionFixedApp\").default,\n    path: require.resolve(\"./ReactPositionFixedApp\"),\n});\n\nexport const AdancedMoveableSelectForm = add(\"Select Form\", {\n    app: require(\"./ReactSelectFormApp\").default,\n    path: require.resolve(\"./ReactSelectFormApp\"),\n});\n\nexport const AdancedMoveableNoRelative = add(\"Static Body\", {\n    app: require(\"./ReactNoRelativeApp\").default,\n    path: require.resolve(\"./ReactNoRelativeApp\"),\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/0-Moveable/ReactNoRelativeApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n\n    return (\n        <div className=\"no-relative\" style={{\n            // position: \"relative\",\n            height: \"400px\",\n        }}>\n            <div className=\"target\" style={{\n                marginLeft: \"100px\",\n                // left: \"100px\",\n                // transform: \"translate(100px, 0px)\",\n            }}>Target</div>\n            <svg className=\"target2\" data-target=\"svg\" style={{\n                top: \"45.7%\",\n                left: \"63%\",\n                width: \"17%\",\n                height: \"40%\",\n                transform: \"rotate(0deg)\",\n                border: \"1px solid black\",\n            }}>\n                <path data-target=\"path1\" d=\"M 74 53.64101615137753 L 14.000000000000027 88.28203230275507 L 14 19 L 74 53.64101615137753 Z\" fill=\"#f55\" stroke-linejoin=\"round\" stroke-width=\"8\" opacity=\"1\" stroke=\"#5f5\" origin=\"50% 50%\" />\n                <path data-target=\"path2\" d=\"M 84 68.64101615137753 L 24.00000000000003 103.28203230275507 L 24 34 L 84 68.64101615137753 Z\" fill=\"#55f\" stroke-linejoin=\"round\" stroke-width=\"8\" opacity=\"1\" stroke=\"#333\" origin=\"50% 50%\" />\n                <g style={{ transform: \"translate(40px, 10px)\" }}>\n                    <path data-target=\"pathline\" d=\"M3,19.333C3,17.258,9.159,1.416,21,5.667\n                            c13,4.667,13.167,38.724,39.667,7.39\" fill=\"transparent\" stroke=\"#ff5\" />\n                    <ellipse data-target=\"ellipse\" cx=\"40\" cy=\"80\" rx=\"40\" ry=\"10\" style={{ fill: \"yellow\", stroke: \"purple\", strokeWidth: 2 }} />\n                </g>\n            </svg>\n            <Moveable\n                target={\".target\"}\n                draggable={true}\n                rotatable={true}\n                // rootContainer={document.documentElement}\n                onRender={e => {\n                    e.target.style.cssText += e.cssText;\n                }}\n            ></Moveable>\n            <Moveable\n                target={\".target2\"}\n                draggable={true}\n                rotatable={true}\n                // rootContainer={document.documentElement}\n                onRender={e => {\n                    e.target.style.cssText += e.cssText;\n                }}\n            ></Moveable>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/0-Moveable/ReactPositionFixedApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                height: \"400px\",\n                border: \"10px solid black\",\n                transform: \"translate(40px, 40px)\",\n            }}>\n                <div className=\"target\" style={{\n                    position: \"fixed\",\n                    width: \"200px\",\n                    height: \"100px\",\n                    top: \"50px\",\n                    left: \"50px\",\n                }}>Fixed Target</div>\n                <Moveable\n                    target={\".target\"}\n                    // rootContainer={document.body}\n                    resizable={true}\n                    draggable={true}\n                    rotatable={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onResize={e => {\n                        e.target.style.cssText += `width: ${e.width}px; height: ${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/0-Moveable/ReactSelectFormApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    const [target, setTarget] = React.useState<HTMLSelectElement>();\n\n    React.useEffect(() => {\n        setTarget(document.querySelector<HTMLSelectElement>(\"select\")!);\n    }, []);\n\n    return (\n        <div className=\"root\">\n            <select style={{\n                position: \"relative\",\n                width: \"200px\",\n                height: \"100px\",\n            }}>\n                <option value=\"1\">Option1</option>\n                <option value=\"2\">Option2</option>\n                <option value=\"3\">Option3</option>\n            </select>\n            <Moveable\n                target={target}\n                draggable={true}\n                onRender={e => {\n                    e.target.style.transform = e.transform;\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/1-Draggable/Deafult.stories.tsx",
    "content": "import { add } from \"../../utils/story\";\n\n\nexport default {\n    title: \"advanced Draggable\",\n};\n\nexport const AdvancedDraggableEdgeDraggable = add(\"edgeDraggable with edge\", {\n    app: require(\"./ReactEdgeDraggableWithEdgeApp\").default,\n    path: require.resolve(\"./ReactEdgeDraggableWithEdgeApp\"),\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/1-Draggable/ReactEdgeDraggableWithEdgeApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"target\">Target</div>\n            <Moveable\n                target={\".target\"}\n                draggable={true}\n                resizable={true}\n                edgeDraggable={true}\n                edge={[\"w\", \"e\"]}\n                onDrag={e => {\n                    e.target.style.transform = e.transform;\n                }}\n                onResize={e => {\n                    e.target.style.width = `${e.width}px`;\n                    e.target.style.height = `${e.height}px`;\n                    e.target.style.transform = e.drag.transform;\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/2-Resizable/Deafult.stories.tsx",
    "content": "import { add } from \"../../utils/story\";\n\n\nexport default {\n    title: \"Advacned Resizable\",\n};\n\nexport const AdvancedResizableFixedDirection = add(\"Resizable & Scalable with fixed direction\", {\n    app: require(\"./ReactFixedDirectionApp\").default,\n    path: require.resolve(\"./ReactFixedDirectionApp\"),\n});\n\nexport const AdvancedResizableFlex = add(\"Resizable with display: flex\", {\n    app: require(\"./ReactFlexApp\").default,\n    path: require.resolve(\"./ReactFlexApp\"),\n});\n\nexport const AdvancedResizableGroupMinSize = add(\"Limit Sizes with Group\", {\n    app: require(\"./ReactGroupMinSizeApp\").default,\n    path: require.resolve(\"./ReactGroupMinSizeApp\"),\n});\n\nexport const AdvancedResizableEdgeControl = add(\"Using Edges and Controls with Draggable, Resizable, and Scalable\", {\n    app: require(\"./ReactWithEdgeControlApp\").default,\n    path: require.resolve(\"./ReactWithEdgeControlApp\"),\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/2-Resizable/ReactFixedDirectionApp.tsx",
    "content": "import * as React from \"react\";\nimport keycon from \"keycon\";\nimport Moveable from \"@/react-moveable\";\nimport { throttle } from \"@daybrush/utils\";\n\n\nkeycon.setGlobal();\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                height: \"400px\",\n                border: \"1px solid black\",\n            }}>\n                <div className=\"target resizable\" style={{\n                    position: \"absolute\",\n                    width: \"200px\",\n                    height: \"100px\",\n                    top: \"50px\",\n                }}>Resizable Target</div>\n                <div className=\"target scalable\" style={{\n                    position: \"absolute\",\n                    width: \"200px\",\n                    height: \"100px\",\n                    top: \"150px\",\n                    left: \"350px\",\n                }}>Scalable Target</div>\n                <Moveable\n                    target={\".target.resizable\"}\n                    resizable={true}\n                    // keepRatio={true}\n                    draggable={true}\n                    rotatable={true}\n                    snappable={true}\n                    bounds={{left: 0, top: 0, bottom: 0, right: 0, position: \"css\" }}\n                    onResizeStart={e => {\n                        e.setFixedDirection([0, 0]);\n                    }}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onBeforeResize={e => {\n                        if (keycon.global.shiftKey) {\n                            e.setFixedDirection([-1, -1]);\n                        } else {\n                            e.setFixedDirection([0, 0]);\n                        }\n                    }}\n                    onResize={e => {\n                        e.target.style.cssText += `width: ${e.width}px; height: ${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onBeforeRotate={e => {\n                        e.setRotation(throttle(e.rotation, 45));\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n                <Moveable\n                    target={\".target.scalable\"}\n                    scalable={true}\n                    keepRatio={true}\n                    draggable={true}\n                    snappable={true}\n                    bounds={{left: 0, top: 0, bottom: 0, right: 0, position: \"css\" }}\n                    onScaleStart={e => {\n                        e.setFixedDirection([0, 0]);\n                    }}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onBeforeScale={e => {\n                        if (keycon.global.shiftKey) {\n                            e.setFixedDirection([-1, -1]);\n                        } else {\n                            e.setFixedDirection([0, 0]);\n                        }\n                    }}\n                    onScale={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/2-Resizable/ReactFlexApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const [translate, setTranslate]  = React.useState([0, 0]);\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                display: \"flex\",\n            }}>\n                <div className=\"target\" ref={targetRef} style={{\n                    position: \"relative\",\n                    width: \"200px\",\n                    height: \"100px\",\n                    // maxWidth: props.maxWidth,\n                    // maxHeight: props.maxHeight,\n                    // minWidth: props.minWidth,\n                    // minHeight: props.minHeight,\n                }}>Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={targetRef}\n                    resizable={true}\n                    keepRatio={true}\n                    throttleResize={1}\n                    onResize={e => {\n                        // const beforeTranslate = e.drag.beforeTranslate;\n\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onResizeEnd={e => {\n                        const lastEvent = e.lastEvent;\n\n                        if (lastEvent) {\n                            console.log(lastEvent.drag.transform);\n                        }\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/2-Resizable/ReactGroupMinSizeApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <div className=\"target target1\">Target1</div>\n        <div className=\"target target2\">Target2</div>\n        <div className=\"target target3\">Target3</div>\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            resizable={true}\n            onResizeGroupStart={({ events }) => {\n                events[0].setMin([50, 50]);\n                events[1].setMin([60, 50]);\n                events[2].setMin([50, 60]);\n            }}\n            onResizeGroup={({ events }) => {\n                events.forEach(ev => {\n                    ev.target.style.width = `${ev.width}px`;\n                    ev.target.style.height = `${ev.height}px`;\n                    ev.target.style.transform = ev.drag.transform;\n                });\n            }}\n            onDragGroup={({ events }) => {\n                events.forEach(ev => {\n                    ev.target.style.transform = ev.transform;\n                });\n            }}\n            onDragGroupEnd={({ events }) => {\n                console.log(events);\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/2-Resizable/ReactWithEdgeControlApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <div className=\"target\">Target1</div>\n        <Moveable\n            target={\".target\"}\n            keepRatio={true}\n            triggerAblesSimultaneously={true}\n            resizable={{\n                edge: [\"e\", \"w\"],\n                renderDirections: [\"e\", \"w\"],\n            }}\n            scalable={{\n                edge: [],\n                renderDirections: [\"nw\", \"ne\", \"se\", \"sw\"],\n            }}\n            draggable={true}\n            edgeDraggable={[\"n\", \"s\"]}\n            onDrag={e => {\n                e.target.style.cssText += `transform: ${e.transform}`;\n            }}\n            onResize={e => {\n                e.target.style.cssText += `width: ${e.boundingWidth}px;`\n                    + `height: ${e.boundingHeight}px;`\n                    + `transform: ${e.drag.transform}`;\n            }}\n            onScale={e => {\n                e.target.style.cssText += `transform: ${e.drag.transform}`;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/3-Scalable/Deafult.stories.tsx",
    "content": "import { add } from \"../../utils/story\";\n\n\nexport default {\n    title: \"Advacned Scalable\",\n};\n\nexport const AdvancedScalableMinMax = add(\"Scalable with min, max size\", {\n    app: require(\"./ReactScalableMinMaxApp\").default,\n    path: require.resolve(\"./ReactScalableMinMaxApp\"),\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/3-Scalable/ReactScalableMinMaxApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <div className=\"target\">Target</div>\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            scalable={true}\n            onScaleStart={e => {\n                e.setMinScaleSize([100, 100]);\n                e.setMaxScaleSize([500, 500]);\n            }}\n            onRender={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/4-Rotatable/Deafult.stories.tsx",
    "content": "import { rotate, wait } from \"@/stories/utils/testing\";\nimport { add } from \"../../utils/story\";\nimport { expect } from \"@storybook/jest\";\n\n\nexport default {\n    title: \"Advanced Rotatable\",\n};\n\nexport const AdvancedRotatableCustomOrigin = add(\"rotate with custom origin\", {\n    app: require(\"./ReactCustomOriginApp\").default,\n    path: require.resolve(\"./ReactCustomOriginApp\"),\n});\n\nexport const AdvancedRotatableRotateWithControls = add(\"rotate with direction controls\", {\n    app: require(\"./ReactRotateWithControlsApp\").default,\n    path: require.resolve(\"./ReactRotateWithControlsApp\"),\n});\n\nexport const AdvancedRotatableRotateWithResize = add(\"rotate with resize\", {\n    app: require(\"./ReactRotateWithResizeApp\").default,\n    path: require.resolve(\"./ReactRotateWithResizeApp\"),\n});\n\nexport const AdvancedSetRotation = add(\"customize the rotation value \", {\n    app: require(\"./ReactSetRotationApp\").default,\n    path: require.resolve(\"./ReactSetRotationApp\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target.rotatable\")!;\n        const rotationControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box .moveable-rotation-control`)!;\n\n        await rotate({\n            target: rotationControl,\n            start: 0,\n            end: 70,\n            duration: 100,\n            interval: 10,\n            baseTarget: target,\n        });\n        expect(target.style.transform).toBe(\"translate(0px, 0px) rotate(90deg)\");\n    },\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/4-Rotatable/ReactCustomOriginApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"target\">Target</div>\n            <Moveable\n                target={\".target\"}\n                rotatable={true}\n                onRotateStart={e => {\n                    e.setFixedDirection([-0.5, -0.5]);\n                }}\n                onRotate={e => {\n                    e.target.style.transform = e.drag.transform;\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/4-Rotatable/ReactRotateWithControlsApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable, { DIRECTIONS } from \"@/react-moveable\";\nimport { useKeycon } from \"react-keycon\";\n\nexport default function App() {\n    const { isKeydown } = useKeycon({\n        keys: [\"meta\"],\n    });\n\n    return (\n        <div className=\"root\">\n            <div className=\"target\">Target</div>\n            <Moveable\n                target={\".target\"}\n                rotatable={{\n                    renderDirections: isKeydown ? DIRECTIONS : false,\n                }}\n                resizable={{\n                    renderDirections: isKeydown ? false : true,\n                }}\n                rotateAroundControls={true}\n                onResize={e => {\n                    e.target.style.cssText += e.cssText;\n                }}\n                onRotateStart={e => {\n                    e.setFixedDirection([-0.5, -0.5]);\n                }}\n                onRotate={e => {\n                    e.target.style.cssText += e.cssText;\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/4-Rotatable/ReactRotateWithResizeApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable, { DIRECTIONS} from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"target\" style={{\n                transformOrigin: \"top center\",\n            }}>Target</div>\n            <Moveable\n                target={\".target\"}\n                draggable={true}\n                rotatable={{\n                    renderDirections: DIRECTIONS,\n                }}\n                resolveAblesWithRotatable={{\n                    resizable: [\"nw\", \"ne\", \"sw\", \"se\"],\n                }}\n                resizable={{\n                    renderDirections: false,\n                }}\n                rotateAroundControls={true}\n                onRender={e => {\n                    e.target.style.cssText += e.cssText;\n\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/4-Rotatable/ReactSetRotationApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\nimport { throttle } from \"@daybrush/utils\";\n\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                height: \"400px\",\n                border: \"1px solid black\",\n            }}>\n                <div className=\"target target1 group\">Target1</div>\n                <div className=\"target target2 group\">Target2</div>\n                <div className=\"target target3 group\">Target3</div>\n                <div className=\"target rotatable\" style={{\n                    position: \"absolute\",\n                    width: \"200px\",\n                    height: \"100px\",\n                    top: \"50px\",\n                }}>Single Target</div>\n                <Moveable\n                    target={\".target.rotatable\"}\n                    resizable={true}\n                    draggable={true}\n                    rotatable={true}\n                    onBeforeRotate={e => {\n                        e.setRotation(throttle(e.rotation, 45));\n                    }}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n\n                    }}\n                />\n                <Moveable\n                    target={\".target.group\"}\n                    draggable={true}\n                    rotatable={true}\n                    onBeforeRotateGroup={e => {\n                        e.setRotation(throttle(e.rotation, 45));\n                    }}\n                    onRenderGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.cssText += ev.cssText;\n                        });\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/5-Snappable/Deafult.stories.tsx",
    "content": "import { add } from \"../../utils/story\";\n\n\nexport default {\n    title: \"Advanced Snappable\",\n};\n\nexport const AdvancedSnappableCustomGuidelines = add(\"Guidelines with custom styles\", {\n    app: require(\"./ReactCustomGuidelinesApp\").default,\n    path: require.resolve(\"./ReactCustomGuidelinesApp\"),\n});\n\nexport const AdvancedSnappableCustomElementGuidelines = add(\"Element Guidelines with custom styles\", {\n    app: require(\"./ReactCustomElementGuidelinesApp\").default,\n    path: require.resolve(\"./ReactCustomElementGuidelinesApp\"),\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/5-Snappable/ReactCustomElementGuidelinesApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target element1\" style={{\n                    width: \"100px\",\n                    height: \"100px\",\n                    left: \"0px\",\n                    top: \"120px\",\n                }}>Element1</div>\n                <div className=\"target element2\" style={{\n                    width: \"100px\",\n                    height: \"100px\",\n                    left: \"400px\",\n                    top: \"120px\",\n                }}>Element2</div>\n                <div className=\"target element3\" style={{\n                    width: \"300px\",\n                    height: \"100px\",\n                    top: \"400px\",\n                    left: \"50px\",\n                }}>Element3</div>\n                <div className=\"target center\" style={{\n                    width: \"200px\",\n                    height: \"150px\",\n                }}>Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={\".center\"}\n                    draggable={true}\n                    snappable={true}\n                    snapDirections={{\n                        top: true,\n                        left: true,\n                        bottom: true,\n                        right: true,\n                        center: true,\n                        middle: true,\n                    }}\n                    elementSnapDirections={{\n                        top: true,\n                        left: true,\n                        bottom: true,\n                        right: true,\n                        center: true,\n                        middle: true,\n                    }}\n                    maxSnapElementGuidelineDistance={70}\n                    elementGuidelines={[{\n                        element: \".element1\",\n                        className: \"red\",\n                    }, {\n                        element: \".element2\",\n                        className: \"green\",\n                    }, {\n                        element: \".element3\",\n                    }]}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/5-Snappable/ReactCustomGuidelinesApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target\" style={{\n                    width: \"200px\",\n                    height: \"150px\",\n                }}>Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={\".target\"}\n                    draggable={true}\n                    snappable={true}\n                    verticalGuidelines={[\n                        0,\n                        100,\n                        {\n                            pos: 200,\n                            className: \"red\",\n                        },\n                    ]}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/9-Clippable/Deafult.stories.tsx",
    "content": "import { add } from \"../../utils/story\";\n\n\nexport default {\n    title: \"Adavanced Clippable\",\n};\n\nexport const AdvancedClippable = add(\"Clippable with Drag, Resize, Rotate\", {\n    app: require(\"./ReactClippableApp\").default,\n    path: require.resolve(\"./ReactClippableApp\"),\n});\n\n\nexport const AdvancedClippableClippedArea = add(\"Drag, Resize, Rotate with Clipped Area (Testing)\", {\n    app: require(\"./ReactClippedAreaApp\").default,\n    path: require.resolve(\"./ReactClippedAreaApp\"),\n});\n\n\nexport const AdvancedClippableClipSnap = add(\"Clip & Snap\", {\n    app: require(\"./ReactClipSnapApp\").default,\n    path: require.resolve(\"./ReactClipSnapApp\"),\n});\n\nexport const AdvancedClippableResizableKeepRatio = add(\"keepRatio for both clippable and resizeable\", {\n    app: require(\"./ReactClippableResizableKeepRatioApp\").default,\n    path: require.resolve(\"./ReactClippableResizableKeepRatioApp\"),\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/9-Clippable/ReactClipSnapApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    top: \"50px\",\n                    left: \"50px\",\n                    width: \"200px\",\n                    height: \"200px\",\n                }}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    draggable={true}\n                    resizable={true}\n                    clippable={true}\n                    dragWithClip={false}\n                    clipTargetBounds={true}\n                    snappable={true}\n\n                    horizontalGuidelines={[0, 100, 200, 300]}\n                    // verticalGuidelines={[0, 100, 200, 300]}\n                    snapThreshold={5}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onResize={e => {\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onClip={e => {\n                        e.target.style.clipPath = e.clipStyle;\n                    }} />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/9-Clippable/ReactClippableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    top: \"50px\",\n                    left: \"50px\",\n                    width: \"200px\",\n                    height: \"200px\",\n                }}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    draggable={true}\n                    resizable={true}\n                    rotatable={true}\n                    clippable={true}\n                    dragWithClip={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/9-Clippable/ReactClippableResizableKeepRatioApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" style={{\n                    position: \"relative\",\n                    top: \"50px\",\n                    left: \"50px\",\n                    width: \"200px\",\n                    height: \"200px\",\n                }}>Target</div>\n                <Moveable\n                    target=\".target\"\n                    draggable={true}\n                    resizable={{\n                        keepRatio: true,\n                    }}\n                    clippable={{\n                        keepRatio: false,\n                    }}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onResize={e => {\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onClip={e => {\n                        e.target.style.clipPath = e.clipStyle;\n                    }} />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/5A-Advanced/9-Clippable/ReactClippedAreaApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    top: \"50px\",\n                    left: \"50px\",\n                    width: \"200px\",\n                    height: \"200px\",\n                }}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    draggable={true}\n                    resizable={true}\n                    rotatable={true}\n                    clippable={true}\n                    dragWithClip={true}\n                    padding={{ left: 10, right: 10, bottom: 10, top: 10 }}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/6-CustomAble/0-CustomAble.stories.tsx",
    "content": "import { add } from \"../utils/story\";\n\nexport default {\n    title: \"Make Custom Able\",\n};\n\nexport const CustomAbleDimensionViewable = add(\"DimensionViewable\", {\n    app: require(\"./ReactDimensionViewableApp\").default,\n    path: require.resolve(\"./ReactDimensionViewableApp\"),\n});\n\nexport const CustomAbleEditable = add(\"Editable\", {\n    app: require(\"./ReactEditableApp\").default,\n    path: require.resolve(\"./ReactEditableApp\"),\n});\n\nexport const CustomAbleRotatble = add(\"Custom Rotatable\", {\n    app: require(\"./ReactCustomRotatableApp\").default,\n    path: require.resolve(\"./ReactCustomRotatableApp\"),\n});\n\nexport const CustomAbleMouseEnterLeave = add(\"Mouse Enter & Leave\", {\n    app: require(\"./ReactMouseEnterLeaveApp\").default,\n    path: require.resolve(\"./ReactMouseEnterLeaveApp\"),\n});\n\n\nexport const CustomAbleDragTarget = add(\"DragTarget\", {\n    app: require(\"./ReactDragTargetAbleApp\").default,\n    path: require.resolve(\"./ReactDragTargetAbleApp\"),\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/6-CustomAble/ReactCustomRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable, { makeAble, MoveableManagerInterface, Renderer } from \"@/react-moveable\";\n\nconst CustomRotation = makeAble(\"customRotation\", {\n    render(moveable: MoveableManagerInterface<any, any>, React: Renderer): any {\n        const rect = moveable.getRect();\n        const { pos1, pos2 } = moveable.state;\n\n        // Add key (required)\n        // Add class prefix moveable-(required)\n        //  translateY(-20px)\n        return <div key={\"custom-rotation\"} className={\"moveable-custom-rotation\"} style={{\n            position: \"absolute\",\n            transform: `translate(-50%, -100%)`\n                + ` translate(${(pos1[0] + pos2[0]) / 2}px, ${(pos1[1] + pos2[1]) / 2}px)`\n                + ` rotate(${rect.rotation}deg) translateY(-20px)`,\n            width: \"20px\",\n            height: \"20px\",\n            background: \"#f55\",\n            cursor: \"move\",\n            transformOrigin: \"50% 100%\",\n        }}>\n        </div>;\n    },\n});\n\nexport default function App() {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    return <div className=\"container\">\n        <p>Custom Rotatation with rotationTarget</p>\n        <div className=\"target\" ref={targetRef}>Target</div>\n        <Moveable\n            target={targetRef}\n            ables={[CustomRotation]}\n            props={{\n                customRotation: true,\n            }}\n            draggable={true}\n            rotatable={true}\n            resizable={true}\n            rotationTarget={\".moveable-custom-rotation\"}\n            rotationPosition={\"none\"}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n            onResize={e => {\n                e.target.style.width = `${e.width}px`;\n                e.target.style.height = `${e.height}px`;\n                e.target.style.transform = e.drag.transform;\n            }}\n            onRotate={e => {\n                e.target.style.transform = e.drag.transform;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/6-CustomAble/ReactDimensionViewableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable, { MoveableManagerInterface, Renderer } from \"@/react-moveable\";\n\nconst DimensionViewable = {\n    name: \"dimensionViewable\",\n    props: [],\n    events: [],\n    render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {\n        const rect = moveable.getRect();\n\n        // Add key (required)\n        // Add class prefix moveable-(required)\n        return <div key={\"dimension-viewer\"} className={\"moveable-dimension\"} style={{\n            position: \"absolute\",\n            left: `${rect.width / 2}px`,\n            top: `${rect.height + 20}px`,\n            background: \"#4af\",\n            borderRadius: \"2px\",\n            padding: \"2px 4px\",\n            color: \"white\",\n            fontSize: \"13px\",\n            whiteSpace: \"nowrap\",\n            fontWeight: \"bold\",\n            willChange: \"transform\",\n            transform: `translate(-50%, 0px)`,\n        }}>\n            {Math.round(rect.offsetWidth)} x {Math.round(rect.offsetHeight)}\n        </div>;\n    },\n} as const;\n\nexport default function App() {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    return <div className=\"container\">\n        <div className=\"target\" ref={targetRef}>Target</div>\n        <Moveable\n            target={targetRef}\n            ables={[DimensionViewable]}\n            draggable={true}\n            resizable={true}\n            rotatable={true}\n            props={{\n                dimensionViewable: true,\n            }}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n            onResize={e => {\n                e.target.style.width = `${e.width}px`;\n                e.target.style.height = `${e.height}px`;\n                e.target.style.transform = e.drag.transform;\n            }}\n            onRotate={e => {\n                e.target.style.transform = e.drag.transform;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/6-CustomAble/ReactDragTargetAbleApp.tsx",
    "content": "import React from \"react\";\n// import \"./App.css\";\nimport Moveable, { MoveableManagerInterface, Renderer } from \"@/react-moveable\";\n\nconst DimensionViewable = {\n    name: \"dimensionViewable\",\n    props: [],\n    events: [],\n    render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {\n        const rect = moveable.getRect();\n\n        // Add key (required)\n        // Add class prefix moveable-(required)\n        return (\n            <div\n                key={\"dimension-viewer\"}\n                className={\"moveable-dimension\"}\n                style={{\n                    position: \"absolute\",\n                    left: `${rect.width / 2}px`,\n                    top: `${rect.height + 20}px`,\n                    background: \"#4af\",\n                    borderRadius: \"2px\",\n                    padding: \"2px 4px\",\n                    color: \"white\",\n                    fontSize: \"13px\",\n                    whiteSpace: \"nowrap\",\n                    fontWeight: \"bold\",\n                    willChange: \"transform\",\n                    transform: `translate(-50%, 0px)`,\n                }}\n            >\n                Target\n            </div>\n        );\n    },\n} as const;\n\nfunction App() {\n    const [dragTarget, setDragTarget] = React.useState<HTMLElement>();\n\n    React.useEffect(() => {\n        setDragTarget(document.querySelector<HTMLElement>(\".moveable-dimension\")!);\n    }, []);\n    return (\n        <div className=\"container\">\n            <div className=\"target target1\"></div>\n            <div className=\"target target2\"></div>\n            <Moveable\n                ables={[DimensionViewable]}\n                dragTarget={dragTarget}\n                resizable={true}\n                props={{\n                    dimensionViewable: true,\n                }}\n                target={[\".target1\"]}\n                draggable={true}\n                onDrag={(e) => {\n                    e.target.style.transform = e.transform;\n                }}\n                onResize={(e) => {\n                    e.target.style.width = `${e.width}px`;\n                    e.target.style.height = `${e.height}px`;\n                    e.target.style.transform = e.drag.transform;\n                }}\n                onRotate={(e) => {\n                    e.target.style.transform = e.drag.transform;\n                }}\n                elementGuidelines={[\".target1\", \".target2\"]}\n                snappable={true}\n            />\n        </div>\n    );\n}\n\nexport default App;\n"
  },
  {
    "path": "packages/react-moveable/stories/6-CustomAble/ReactEditableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable, { MoveableManagerInterface, Renderer } from \"@/react-moveable\";\n\nconst Editable = {\n    name: \"editable\",\n    props: [],\n    events: [],\n    render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {\n        const rect = moveable.getRect();\n        const { pos2 } = moveable.state;\n\n        // Add key (required)\n        // Add class prefix moveable-(required)\n        const EditableViewer = moveable.useCSS(\"div\", `\n        {\n            position: absolute;\n            left: 0px;\n            top: 0px;\n            will-change: transform;\n            transform-origin: 0px 0px;\n        }\n        .custom-button {\n            width: 24px;\n            height: 24px;\n            margin-bottom: 4px;\n            background: #4af;\n            border-radius: 4px;\n            appearance: none;\n            border: 0;\n            color: white;\n            font-weight: bold;\n        }\n            `);\n        return <EditableViewer key={\"editable-viewer\"} className={\"moveable-editable\"} style={{\n            transform: `translate(${pos2[0]}px, ${pos2[1]}px) rotate(${rect.rotation}deg) translate(10px)`,\n        }}>\n            <button className=\"custom-button\" onClick={() => {\n                alert(\"+\");\n            }}>+</button>\n            <button className=\"custom-button\" onClick={() => {\n                alert(\"-\");\n            }}>-</button>\n        </EditableViewer>;\n    },\n} as const;\n\nexport default function App() {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    return <div className=\"container\">\n        <div className=\"target\" ref={targetRef}>Target</div>\n        <Moveable\n            target={targetRef}\n            ables={[Editable]}\n            props={{\n                editable: true,\n            }}\n            draggable={true}\n            resizable={true}\n            rotatable={true}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n            onResize={e => {\n                e.target.style.width = `${e.width}px`;\n                e.target.style.height = `${e.height}px`;\n                e.target.style.transform = e.drag.transform;\n            }}\n            onRotate={e => {\n                e.target.style.transform = e.drag.transform;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/6-CustomAble/ReactMouseEnterLeaveApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable, { makeAble, MoveableManagerInterface } from \"@/react-moveable\";\n\nconst MouseEnterLeaveAble = makeAble(\"enterLeave\", {\n    mouseEnter(moveable: MoveableManagerInterface) {\n        if (moveable.moveables) {\n            // group\n            moveable.moveables.forEach(child => {\n                child.state.target!.style.backgroundColor = \"#e55\";\n            });\n        } else {\n            // single\n            moveable.state.target!.style.backgroundColor = \"#e55\";\n        }\n    },\n    mouseLeave(moveable: MoveableManagerInterface) {\n        if (moveable.moveables) {\n            // group\n            moveable.moveables.forEach(child => {\n                child.state.target!.style.backgroundColor = \"\";\n            });\n        } else {\n            // single\n            moveable.state.target!.style.backgroundColor = \"\";\n        }\n    },\n});\n\nexport default function App() {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    return <div className=\"container\">\n        <div className=\"target target1\">Target1</div>\n        <div className=\"target target2\">Target2</div>\n        <div className=\"target target3\" ref={targetRef}>Target3</div>\n        <Moveable\n            target={targetRef}\n            ables={[MouseEnterLeaveAble]}\n            origin={false}\n            props={{\n                enterLeave: true,\n            }}\n            draggable={true}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n        />\n        <Moveable\n            target={[\".target1\", \".target2\"]}\n            ables={[MouseEnterLeaveAble]}\n            origin={false}\n            props={{\n                enterLeave: true,\n            }}\n            draggable={true}\n            onDragGroup={e => {\n                e.events.forEach(ev => {\n                    ev.target.style.transform = ev.transform;\n                });\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/7-Request/0-Request.stories.tsx",
    "content": "import { DEFAULT_DRAGGABLE_CONTROLS, DEFAULT_RESIZABLE_CONTROLS } from \"../controls/default\";\nimport { makeArgType } from \"../utils\";\nimport { add } from \"../utils/story\";\n\n\n\nexport default {\n    title: \"Request ables through a method\",\n};\n\nexport const RequestDraggable = add(\"Draggable\", {\n    app: require(\"./ReactDraggableApp\").default,\n    path: require.resolve(\"./ReactDraggableApp\"),\n    argsTypes: {\n        containerScale: makeArgType({\n            type: \"number\",\n            description: `<a href=\"#\" target=\"_blank\">Container's scale</a>`,\n            defaultValue: 1,\n        }),\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n    },\n});\n\nexport const RequestResizable = add(\"Resizable\", {\n    app: require(\"./ReactResizableApp\").default,\n    path: require.resolve(\"./ReactResizableApp\"),\n    argsTypes: {\n        ...DEFAULT_RESIZABLE_CONTROLS,\n    },\n});\n\nexport const RequestResizableDelta = add(\"Resizable Delta\", {\n    app: require(\"./ReactResizableDeltaApp\").default,\n    path: require.resolve(\"./ReactResizableDeltaApp\"),\n    argsTypes: {\n        ...DEFAULT_RESIZABLE_CONTROLS,\n    },\n});\n\nexport const RequestResizableGroup = add(\"Resizable Group\", {\n    app: require(\"./ReactResizableGroupApp\").default,\n    path: require.resolve(\"./ReactResizableGroupApp\"),\n    argsTypes: {\n        ...DEFAULT_RESIZABLE_CONTROLS,\n    },\n});\n\n\n\nexport const RequestDraggableSnappable = add(\"Draggable With Snappable\", {\n    app: require(\"./ReactDraggableSnappableApp\").default,\n    path: require.resolve(\"./ReactDraggableSnappableApp\"),\n});\n\nexport const RequestResizableSnappable = add(\"Resizable With Snappable\", {\n    app: require(\"./ReactResizableSnappableApp\").default,\n    path: require.resolve(\"./ReactResizableSnappableApp\"),\n});\n\n\n\nexport const RequestDraggableAlign = add(\"Align\", {\n    app: require(\"./ReactAlignApp\").default,\n    path: require.resolve(\"./ReactAlignApp\"),\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/7-Request/ReactAlignApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable, { DraggableRequestParam } from \"@/react-moveable\";\nimport Selecto from \"react-selecto\";\n\nexport default function App() {\n    const moveableRef = React.useRef<Moveable>(null);\n    const [targets, setTargets] = React.useState<Array<HTMLElement | SVGElement>>([]);\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <button onClick={() => {\n                    const rect = moveableRef.current!.getRect();\n                    const moveables = moveableRef.current!.getMoveables();\n\n                    if (moveables.length <= 1) {\n                        return;\n                    }\n                    moveables.forEach(child => {\n                        child.request<DraggableRequestParam>(\"draggable\", {\n                            y: rect.top,\n                        }, true);\n                    });\n\n                    moveableRef.current?.updateRect();\n                }}>Align Top</button>&nbsp;\n                <button onClick={() => {\n                    const rect = moveableRef.current!.getRect();\n                    const moveables = moveableRef.current!.getMoveables();\n\n                    if (moveables.length <= 1) {\n                        return;\n                    }\n                    moveables.forEach(child => {\n                        child.request<DraggableRequestParam>(\"draggable\", {\n                            y: rect.top + rect.height,\n                        }, true);\n                    });\n\n                    moveableRef.current?.updateRect();\n                }}>Align Bottom</button>&nbsp;\n                <button onClick={() => {\n                    const rect = moveableRef.current!.getRect();\n                    const moveables = moveableRef.current!.getMoveables();\n\n                    if (moveables.length <= 1) {\n                        return;\n                    }\n                    moveables.forEach(child => {\n                        child.request<DraggableRequestParam>(\"draggable\", {\n                            x: rect.left,\n                        }, true);\n                    });\n\n                    moveableRef.current?.updateRect();\n                }}>Align Left</button>&nbsp;\n                <button onClick={() => {\n                    const rect = moveableRef.current!.getRect();\n                    const moveables = moveableRef.current!.getMoveables();\n\n                    if (moveables.length <= 1) {\n                        return;\n                    }\n                    moveables.forEach(child => {\n                        child.request<DraggableRequestParam>(\"draggable\", {\n                            y: rect.left + rect.width,\n                        }, true);\n                    });\n\n                    moveableRef.current?.updateRect();\n                }}>Align Right</button>&nbsp;\n                <button onClick={() => {\n                    const rect = moveableRef.current!.getRect();\n                    const moveables = moveableRef.current!.getMoveables();\n\n                    if (moveables.length <= 1) {\n                        return;\n                    }\n                    moveables.forEach((child, i) => {\n                        child.request<DraggableRequestParam>(\"draggable\", {\n                            y: rect.top + rect.height / 2 - rect.children![i].height / 2,\n                        }, true);\n                    });\n\n                    moveableRef.current?.updateRect();\n                }}>Align Vertical Center</button>&nbsp;\n                <button onClick={() => {\n                    const rect = moveableRef.current!.getRect();\n                    const moveables = moveableRef.current!.getMoveables();\n\n                    if (moveables.length <= 1) {\n                        return;\n                    }\n                    moveables.forEach((child, i) => {\n                        child.request<DraggableRequestParam>(\"draggable\", {\n                            x: rect.left + rect.width / 2 - rect.children![i].width / 2,\n                        }, true);\n                    });\n\n                    moveableRef.current?.updateRect();\n                }}>Align Horizontal Center</button>&nbsp;\n                <button onClick={() => {\n                    const groupRect = moveableRef.current!.getRect();\n                    const moveables = moveableRef.current!.getMoveables();\n                    let top = groupRect.top;\n\n                    if (moveables.length <= 1) {\n                        return;\n                    }\n                    const gap = (groupRect.height - groupRect.children!.reduce((prev, cur) => {\n                        return prev + cur.height;\n                    }, 0)) / (moveables.length - 1);\n\n                    moveables.sort((a, b) => {\n                        return a.state.top - b.state.top;\n                    });\n                    moveables.forEach(child => {\n                        const rect = child.getRect();\n\n                        child.request<DraggableRequestParam>(\"draggable\", {\n                            y: top,\n                        }, true);\n\n                        top += rect.height + gap;\n                    });\n\n\n                    moveableRef.current?.updateRect();\n                }}>Arrange Vertical Spacing</button>&nbsp;\n                <button onClick={() => {\n                    const groupRect = moveableRef.current!.getRect();\n                    const moveables = moveableRef.current!.getMoveables();\n                    let left = groupRect.left;\n\n                    if (moveables.length <= 1) {\n                        return;\n                    }\n                    const gap = (groupRect.width - groupRect.children!.reduce((prev, cur) => {\n                        return prev + cur.width;\n                    }, 0)) / (moveables.length - 1);\n\n                    moveables.sort((a, b) => {\n                        return a.state.left - b.state.left;\n                    });\n                    moveables.forEach(child => {\n                        const rect = child.getRect();\n\n                        child.request<DraggableRequestParam>(\"draggable\", {\n                            x: left,\n                        }, true);\n\n                        left += rect.width + gap;\n                    });\n\n                    moveableRef.current?.updateRect();\n                }}>Arrange Horizontal Spacing</button>&nbsp;\n                <div className=\"target target1\" style={{\n                    left: \"50px\",\n                    top: \"150px\",\n                }}>Target1</div>\n                <div className=\"target target2\" style={{\n                    left: \"250px\",\n                    top: \"250px\",\n                }}>Target2</div>\n                <div className=\"target target3\" style={{\n                    left: \"400px\",\n                    top: \"300px\",\n                }}>Target3</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={targets}\n                    draggable={true}\n                    resizable={true}\n                    snappable={true}\n                    snapGridWidth={50}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                    onRenderGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.cssText += ev.cssText;\n                        });\n                    }}\n                />\n                <Selecto\n                    dragContainer={window}\n                    selectableTargets={[\".target\"]}\n                    hitRate={0}\n                    selectByClick={true}\n                    selectFromInside={true}\n                    toggleContinueSelect={[\"shift\"]}\n                    ratio={0}\n                    onDragStart={e => {\n                        const moveable = moveableRef.current!;\n                        const target = e.inputEvent.target;\n                        if (\n                            target.tagName === \"BUTTON\"\n                            || moveable.isMoveableElement(target)\n                            || targets.some(t => t === target || t.contains(target))\n                        ) {\n                            e.stop();\n                        }\n                    }}\n                    onSelectEnd={e => {\n                        const moveable = moveableRef.current!;\n\n                        if (e.isDragStart) {\n                            e.inputEvent.preventDefault();\n\n                            moveable.waitToChangeTarget().then(() => {\n                                moveable.dragStart(e.inputEvent);\n                            });\n                        }\n                        setTargets(e.selected);\n                    }}\n                ></Selecto>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/7-Request/ReactDraggableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const xInputRef = React.useRef<HTMLInputElement>(null);\n    const yInputRef = React.useRef<HTMLInputElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n    const [requestCallbacks] = React.useState(() => {\n        function request() {\n            moveableRef.current!.request(\"draggable\", {\n                x: parseInt(xInputRef.current!.value),\n                y: parseInt(yInputRef.current!.value),\n            }, true);\n        }\n        return {\n            onInput(e: any) {\n                const ev = (e.nativeEvent || e) as InputEvent;\n\n                if (typeof ev.data === \"undefined\") {\n                    request();\n                }\n            },\n            onKeyUp(e: any) {\n                e.stopPropagation();\n\n                // enter\n                if (e.keyCode === 13) {\n                    request();\n                }\n            },\n        };\n    });\n\n    return (\n        <div className=\"root\">\n            <div>\n                X: <input ref={xInputRef} type=\"number\" defaultValue=\"100\" {...requestCallbacks}></input>&nbsp;\n                Y: <input ref={yInputRef} type=\"number\" defaultValue=\"150\" {...requestCallbacks}></input>\n            </div>\n\n            <div className=\"container\" style={{\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <div className=\"target\">Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={\".target\"}\n                    draggable={true}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onDragEnd={e => {\n                        requestAnimationFrame(() => {\n                            const rect = e.moveable.getRect();\n\n                            xInputRef.current!.value = `${rect.left}`;\n                            yInputRef.current!.value = `${rect.top}`;\n                        });\n                    }}\n                />\n            </div>\n        </div>\n    );\n};\n"
  },
  {
    "path": "packages/react-moveable/stories/7-Request/ReactDraggableSnappableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable, { DraggableRequestParam } from \"@/react-moveable\";\n\nexport default function App() {\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <button onClick={() => {\n                moveableRef.current!.request<DraggableRequestParam>(\"draggable\", {\n                    deltaX: -49,\n                    deltaY: 0,\n                    useSnap: true,\n                }, true);\n            }}>Left</button>\n            <button onClick={() => {\n                moveableRef.current!.request<DraggableRequestParam>(\"draggable\", {\n                    deltaX: 49,\n                    deltaY: 0,\n                    useSnap: true,\n                }, true);\n            }}>Right</button>\n            <div className=\"container\">\n                <div className=\"target\">Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={\".target\"}\n                    draggable={true}\n                    snappable={true}\n                    snapGridWidth={50}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/7-Request/ReactResizableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const widthInputRef = React.useRef<HTMLInputElement>(null);\n    const heightInputRef = React.useRef<HTMLInputElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n    const onInput = (e: any) => {\n        const ev = (e.nativeEvent || e) as InputEvent;\n\n        if (typeof ev.data === \"undefined\") {\n            moveableRef.current!.request(\"resizable\", {\n                offsetWidth: parseFloat(widthInputRef.current!.value),\n                offsetHeight: parseFloat(heightInputRef.current!.value),\n            }, true);\n        }\n    };\n    const onKeyUp = (e: any) => {\n        e.stopPropagation();\n\n        // enter\n        if (e.keyCode === 13) {\n            moveableRef.current!.request(\"resizable\", {\n                offsetWidth: parseFloat(widthInputRef.current!.value),\n                offsetHeight: parseFloat(heightInputRef.current!.value),\n            }, true);\n        }\n    };\n\n    return <div className=\"root\">\n        <div>\n            width: <input ref={widthInputRef}\n                type=\"number\" defaultValue=\"280\"\n                onInput={onInput} onKeyUp={onKeyUp} data-horizontal=\"true\"/>&nbsp;\n            height: <input ref={heightInputRef}\n                type=\"number\" defaultValue=\"230\"\n                onInput={onInput} onKeyUp={onKeyUp} data-horizontal=\"false\"/>\n        </div>\n        <div className=\"container\">\n            <div className=\"target\">Target1</div>\n            <Moveable\n                ref={moveableRef}\n                target={\".target\"}\n                resizable={props.resizable}\n                keepRatio={props.keepRatio}\n                throttleResize={props.throttleResize}\n                renderDirections={props.renderDirections}\n                onResize={(e) => {\n                    e.target.style.width = `${e.width}px`;\n                    e.target.style.height = `${e.height}px`;\n                    e.target.style.transform = e.drag.transform;\n                }}\n                onResizeEnd={(e) => {\n                    requestAnimationFrame(() => {\n                        const rect = e.moveable.getRect();\n\n                        widthInputRef.current!.value = `${rect.offsetWidth}`;\n                        heightInputRef.current!.value = `${rect.offsetHeight}`;\n                    });\n                }}\n            />\n        </div>\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/7-Request/ReactResizableDeltaApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable, { ResizableRequestParam } from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return <div className=\"root\">\n        <button onClick={() => {\n            moveableRef.current!.request<ResizableRequestParam>(\"resizable\", {\n                deltaHeight: 12,\n            }, true);\n        }}>request</button>\n        <div className=\"input\"></div>\n        <div className=\"container\">\n            <div className=\"target\" style={{\n                width: \"381.609px\",\n                height: \"119.416px\",\n                color: \"black\",\n                marginTop: \"20px\",\n                marginLeft: \"20px\",\n                border: \"none\",\n            }}>Target1</div>\n            <Moveable\n                ref={moveableRef}\n                target={\".target\"}\n                resizable={true}\n                onResize={(e) => {\n                    e.target.style.width = `${e.width}px`;\n                    e.target.style.height = `${e.height}px`;\n                    const input = document.querySelector(\".input\")!;\n\n                    input.innerHTML = JSON.stringify({ dist: e.dist, width: e.width, height: e.height });\n                }}\n            />\n        </div>\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/7-Request/ReactResizableGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const widthInputRef = React.useRef<HTMLInputElement>(null);\n    const heightInputRef = React.useRef<HTMLInputElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n    const onInput = (e: any) => {\n        const ev = (e.nativeEvent || e) as InputEvent;\n        const horizontal = JSON.parse((ev.target as HTMLElement).getAttribute(\"data-horizontal\")!);\n\n        if (typeof ev.data === \"undefined\") {\n            moveableRef.current!.request(\"resizable\", {\n                offsetWidth: parseFloat(widthInputRef.current!.value),\n                offsetHeight: parseFloat(heightInputRef.current!.value),\n                horizontal,\n            }, true);\n        }\n    };\n    const onKeyUp = (e: any) => {\n        const ev = (e.nativeEvent || e) as InputEvent;\n        const horizontal = JSON.parse((ev.target as HTMLElement).getAttribute(\"data-horizontal\")!);\n        e.stopPropagation();\n\n        // enter\n        if (e.keyCode === 13) {\n            moveableRef.current!.request(\"resizable\", {\n                offsetWidth: parseFloat(widthInputRef.current!.value),\n                offsetHeight: parseFloat(heightInputRef.current!.value),\n                horizontal,\n            }, true);\n        }\n    };\n\n    return <div className=\"root\">\n        <div>\n            width: <input ref={widthInputRef}\n                type=\"number\" defaultValue=\"280\"\n                onInput={onInput} onKeyUp={onKeyUp} data-horizontal=\"true\"/>&nbsp;\n            height: <input ref={heightInputRef}\n                type=\"number\" defaultValue=\"230\"\n                onInput={onInput} onKeyUp={onKeyUp} data-horizontal=\"false\"/>\n        </div>\n        <div className=\"container\">\n            <div className=\"target target1\">Target1</div>\n            <div className=\"target target2\">Target2</div>\n            <div className=\"target target3\">Target3</div>\n            <Moveable\n                ref={moveableRef}\n                target={\".target\"}\n                draggable={true}\n                resizable={props.resizable}\n                keepRatio={props.keepRatio}\n                throttleResize={props.throttleResize}\n                renderDirections={props.renderDirections}\n                onResizeGroupStart={({ setMin, setMax }) => {\n                    setMin([props.minWidth, props.minHeight]);\n                    setMax([props.maxWidth, props.maxHeight]);\n                }}\n                onResizeGroup={({ events }) => {\n                    events.forEach(ev => {\n                        ev.target.style.width = `${ev.boundingWidth}px`;\n                        ev.target.style.height = `${ev.boundingHeight}px`;\n                        ev.target.style.transform\n                            = `translate(${ev.drag.beforeTranslate[0]}px, ${ev.drag.beforeTranslate[1]}px)`;\n                    });\n                }}\n                onResizeGroupEnd={(e) => {\n                    requestAnimationFrame(() => {\n                        const rect = e.moveable.getRect();\n\n                        widthInputRef.current!.value = `${rect.offsetWidth}`;\n                        heightInputRef.current!.value = `${rect.offsetHeight}`;\n                    });\n                }}\n                onDragGroup={({ events }) => {\n                    events.forEach(ev => {\n                        ev.target.style.transform = ev.transform;\n                    });\n                }}\n            />\n        </div>\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/7-Request/ReactResizableSnappableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable, { ResizableRequestParam } from \"@/react-moveable\";\n\nexport default function App() {\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <button onClick={() => {\n                moveableRef.current!.request<ResizableRequestParam>(\"resizable\", {\n                    direction: [1, 0],\n                    deltaWidth: -49,\n                    useSnap: true,\n                }, true);\n            }}>Left</button>\n            <button onClick={() => {\n                moveableRef.current!.request<ResizableRequestParam>(\"resizable\", {\n                    direction: [1, 0],\n                    deltaWidth: 49,\n                    useSnap: true,\n                }, true);\n            }}>Right</button>\n            <div className=\"container\">\n                <div className=\"target\">Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={\".target\"}\n                    draggable={true}\n                    resizable={true}\n                    snappable={true}\n                    snapGridWidth={50}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/8-TreeShaking/0-TreeShaking.stories.tsx",
    "content": "import { add } from \"../utils/story\";\n\n\n\nexport default {\n    title: \"Support Tree Shaking\",\n};\n\n\nexport const TreeShaking = add(\"Use only Draggable, Resizable, Rotatable\", {\n    app: require(\"./TreeShakingApp\").default,\n    path: require.resolve(\"./TreeShakingApp\"),\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/8-TreeShaking/TreeShakingApp.tsx",
    "content": "import * as React from \"react\";\nimport {\n    DraggableProps, makeMoveable, ResizableProps,\n    RotatableProps, Rotatable, Draggable, Resizable,\n} from \"@/react-moveable\";\n\n\nconst Moveable = makeMoveable<DraggableProps & ResizableProps & RotatableProps>([\n    Draggable,\n    Resizable,\n    Rotatable,\n]);\n\nexport default function App() {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    return <div className=\"container\">\n        <p>Use only Draggable, Resizable, Rotatable (30% size reduction)</p>\n        <div className=\"target\" ref={targetRef}>Target</div>\n        <Moveable\n            target={targetRef}\n            draggable={true}\n            resizable={true}\n            rotatable={true}\n            onRender={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/9-Scrolling/0-Scrollable.stories.tsx",
    "content": "import { DEFAULT_SCROLLABLE_CONTROLS } from \"../controls/default\";\nimport { add } from \"../utils/story\";\n\nexport default {\n    title: \"Support Scroll\",\n};\n\nexport const ScrollingScrollable = add(\"Use Scrollable\", {\n    app: require(\"./ReactScrollableApp\").default,\n    path: require.resolve(\"./ReactScrollableApp\"),\n    argsTypes: {\n        ...DEFAULT_SCROLLABLE_CONTROLS,\n    },\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/9-Scrolling/ReactScrollableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (<div className=\"container\">\n        <div className=\"scrollArea\">\n            <div className=\"target\">Target</div>\n            <Moveable\n                scrollable={true}\n                scrollOptions={{\n                    container: \".scrollArea\",\n                    threshold: props.threshold,\n                    checkScrollEvent: props.checkScrollEvent,\n                    throttleTime: props.throttleTime,\n                }}\n                target={\".target\"}\n                draggable={true}\n                resizable={true}\n                rotatable={true}\n                onRender={e => {\n                    e.target.style.cssText += e.cssText;\n                }}\n                onScroll={({ scrollContainer, direction }) => {\n                    scrollContainer.scrollBy(direction[0] * 10, direction[1] * 10);\n                }}\n            ></Moveable>\n        </div>\n    </div>);\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/Deafult.stories.tsx",
    "content": "import { splitBracket, splitComma } from \"@daybrush/utils\";\nimport { add } from \"../utils/story\";\nimport { findMoveable, pan, wait } from \"../utils/testing\";\nimport { expect } from \"@storybook/jest\";\n\nexport default {\n    title: \"Variable Situations\",\n};\n\nexport const TestsNoTarget = add(\"No Target\", {\n    app: require(\"./ReactNoTargetApp\").default,\n    path: require.resolve(\"./ReactNoTargetApp\"),\n});\nexport const TestsClickATag = add(\"Click a tag\", {\n    app: require(\"./ReactATagApp\").default,\n    path: require.resolve(\"./ReactATagApp\"),\n});\n\nexport const TestsInput = add(\"Any native input element\", {\n    app: require(\"./ReactInputApp\").default,\n    path: require.resolve(\"./ReactInputApp\"),\n});\nexport const TestsSafari = add(\"Test Control Box in Safari\", {\n    app: require(\"./ReactSafariApp\").default,\n    path: require.resolve(\"./ReactSafariApp\"),\n});\nexport const TestsCustomElement = add(\"Test Custom Element Offset\", {\n    app: require(\"./ReactCustomElementApp\").default,\n    path: require.resolve(\"./ReactCustomElementApp\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n        const moveableElement = findMoveable(canvasElement);\n\n        expect(moveableElement.style.transform).toBe(\"translate3d(60px, 192px, 0px)\");\n    },\n});\nexport const TestsCustomElementBounds = add(\"Test Custom Element with Bounds\", {\n    app: require(\"./ReactCustomElementBoundsApp\").default,\n    path: require.resolve(\"./ReactCustomElementBoundsApp\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n        const customElement = canvasElement.querySelector(\"custom-element\")!;\n        const innerMoveable = customElement!.shadowRoot!.querySelector<HTMLElement>(\".moveable-control-box\")!;\n\n        expect(innerMoveable.style.transform).toBe(\"translate3d(50px, 50px, 0px)\");\n    },\n});\nexport const TestsAccuracy = add(\"Check drag accuracy when using bounds\", {\n    app: require(\"./ReactAccuracyApp\").default,\n    path: require.resolve(\"./ReactAccuracyApp\"),\n});\n\nexport const TestsLargeZoom = add(\"Check element guidelines accuracy when zoom is large\", {\n    app: require(\"./ReactLargeZoomElementGuidelinesApp\").default,\n    path: require.resolve(\"./ReactLargeZoomElementGuidelinesApp\"),\n});\n\nexport const TestsFlex = add(\"Test flex element\", {\n    app: require(\"./ReactFlexApp\").default,\n    path: require.resolve(\"./ReactFlexApp\"),\n});\n\nexport const TestsWillChange = add(\"Test Container with will change\", {\n    app: require(\"./ReactWillChangeApp\").default,\n    path: require.resolve(\"./ReactWillChangeApp\"),\n});\n\nexport const TestsStopDrag = add(\"Stop drag if target is select, input, textarea\", {\n    app: require(\"./ReactStopDragApp\").default,\n    path: require.resolve(\"./ReactStopDragApp\"),\n});\n\nexport const TestsClick = add(\"Stop Click event's Propagation for dragStart\", {\n    app: require(\"./ReactClickApp\").default,\n    path: require.resolve(\"./ReactClickApp\"),\n});\n\nexport const TestsNestedTarget = add(\"Nested Moveable's target\", {\n    app: require(\"./ReactNestedTargetApp\").default,\n    path: require.resolve(\"./ReactNestedTargetApp\"),\n});\n\nexport const TestsZoomedCursor = add(\"Zoomed Cursor\", {\n    app: require(\"./ReactZoomedCursorApp\").default,\n    path: require.resolve(\"./ReactZoomedCursorApp\"),\n});\n\nexport const TestsHandleLargeNumber = add(\"Test performance for large number instances\", {\n    app: require(\"./ReactHandleLargeNumberApp\").default,\n    path: require.resolve(\"./ReactHandleLargeNumberApp\"),\n});\n\nexport const TestsOverflow = add(\"Test overflow: auto target\", {\n    app: require(\"./ReactOverflowApp\").default,\n    path: require.resolve(\"./ReactOverflowApp\"),\n});\n\nexport const TestsDragtarget = add(\"Test Drag Target\", {\n    app: require(\"./ReactDragTargetApp\").default,\n    path: require.resolve(\"./ReactDragTargetApp\"),\n});\n\nexport const TestsDragStart = add(\"Test Drag Start Group Manually\", {\n    app: require(\"./ReactDragStartGroupApp\").default,\n    path: require.resolve(\"./ReactDragStartGroupApp\"),\n});\n\nexport const TestsChangingSnapContainer = add(\"Test Changing Snap Container\", {\n    app: require(\"./ReactChangingSnapContainerApp\").default,\n    path: require.resolve(\"./ReactChangingSnapContainerApp\"),\n});\n\nexport const TestsFixedSnap = add(\"Test Snap with position: fixed\", {\n    app: require(\"./ReactFixedSnapApp\").default,\n    path: require.resolve(\"./ReactFixedSnapApp\"),\n});\n\n\nexport const TestsZoomedTarget = add(\"Test css zoomed target\", {\n    app: require(\"./ReactZoomedTargetApp\").default,\n    path: require.resolve(\"./ReactZoomedTargetApp\"),\n});\n\n\nexport const TestsTRSTarget = add(\"Test css translate & rotate & scale target\", {\n    app: require(\"./ReactTRSTargetApp\").default,\n    path: require.resolve(\"./ReactTRSTargetApp\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const controlBox = canvasElement.querySelector<HTMLElement>(\".moveable-control-box\")!;\n\n\n        // x1 => x2\n        const line1 = controlBox.querySelector<HTMLElement>(`[data-line-key=\"render-line-0\"]`)!;\n        // y1 => y2\n        const line2 = controlBox.querySelector<HTMLElement>(`[data-line-key=\"render-line-1\"]`)!;\n\n        // 100x 200\n        expect(line1.style.width).toBe(\"101px\");\n        expect(line2.style.width).toBe(\"201px\");\n        expect(splitComma(splitBracket(controlBox.style.transform).value!).map(v => {\n            return parseInt(v, 10);\n        })).toEqual([243, 248, 0]);\n\n        await pan({\n            target,\n            start: [0, 0],\n            end: [100, 0],\n            duration: 100,\n            interval: 10,\n        });\n        expect(splitComma(splitBracket(target.style.transform).value!).map(v => {\n            return parseInt(v, 10);\n        })).toEqual([186, -25]);\n        expect(splitComma(splitBracket(controlBox.style.transform).value!).map(v => {\n            return parseInt(v, 10);\n        })).toEqual([343, 248, 0]);\n    },\n});\n\nexport const TestsZoomedSnap = add(\"Test snap for scaled target\", {\n    app: require(\"./ReactZoomedSnapApp\").default,\n    path: require.resolve(\"./ReactZoomedSnapApp\"),\n});\n\nexport const TestsRequestBounds = add(\"Test request with bounds\", {\n    app: require(\"./ReactRequestBoundsApp\").default,\n    path: require.resolve(\"./ReactRequestBoundsApp\"),\n});\n\nexport const TestsRotateClippable = add(\"Test rotate & clippable\", {\n    app: require(\"./ReactRotateClippableApp\").default,\n    path: require.resolve(\"./ReactRotateClippableApp\"),\n});\n\n\nexport const TestsAccurateElementGuidelines = add(\"Test Accurate Element Guidelines\", {\n    app: require(\"./ReactAccurateElementGuidelineApp\").default,\n    path: require.resolve(\"./ReactAccurateElementGuidelineApp\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n        const target = canvasElement.querySelector<HTMLElement>(\".target2\")!;\n        // const controlBox = canvasElement.querySelector<HTMLElement>(\".moveable-control-box\")!;\n\n        await pan({\n            target,\n            start: [0, 0],\n            end: [-1, -1],\n            duration: 10,\n            interval: 10,\n        });\n        expect(target.style.transform).toBe(\"translate(0px, 0px)\");\n        // expect(controlBox.style.transform).toBe(\"translate3d(200px, 200px, 0px)\");\n    },\n});\n\nexport const TestsAccurateElementGuidelines2 = add(\"Test Accurate Element Guidelines 0.2\", {\n    app: require(\"./ReactAccurateElementGuideline2App\").default,\n    path: require.resolve(\"./ReactAccurateElementGuideline2App\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n        const target = canvasElement.querySelector<HTMLElement>(\".target2\")!;\n\n        await pan({\n            target,\n            start: [0, 0],\n            end: [-1, -1],\n            duration: 10,\n            interval: 10,\n        });\n        expect(target.style.transform).toBe(\"translate(0px, 0px)\");\n    },\n});\n\nexport const TestDragAPI = add(\"Test Drag API\", {\n    app: require(\"./ReactDragAPIApp\").default,\n    path: require.resolve(\"./ReactDragAPIApp\"),\n});\n\n\nexport const TestChangeTargetsOnClick = add(\"Test Change Target on Click Group\", {\n    app: require(\"./ReactChangeTargetsOnClickApp\").default,\n    path: require.resolve(\"./ReactChangeTargetsOnClickApp\"),\n});\n\n\n\nexport const TestScalableKeepRatio = add(\"Even if the size is 0, the ratio is maintained.\", {\n    app: require(\"./ReactScalableKeepRatioApp\").default,\n    path: require.resolve(\"./ReactScalableKeepRatioApp\"),\n});\n\n\n\nexport const TestIframe = add(\"Test Iframe\", {\n    app: require(\"./ReactIframeApp\").default,\n    path: require.resolve(\"./ReactIframeApp\"),\n});\n\n\nexport const TestGroupPadding = add(\"Test Show Group's Padding\", {\n    app: require(\"./ReactGroupPaddingApp\").default,\n    path: require.resolve(\"./ReactGroupPaddingApp\"),\n});\n\n\nexport const TestTranslate50 = add(\"Test translate(-50%, -50%)\", {\n    app: require(\"./ReactTranslate50App\").default,\n    path: require.resolve(\"./ReactTranslate50App\"),\n    play: async ({ canvasElement }) => {\n        await wait();\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const controlBox = canvasElement.querySelector<HTMLElement>(\".moveable-control-box\")!;\n\n        expect(controlBox.style.transform).toBe(\"translate3d(50px, 100px, 0px)\");\n        await pan({\n            target,\n            start: [0, 0],\n            end: [100, 0],\n            duration: 100,\n            interval: 10,\n        });\n        expect(target.style.transform).toBe(\"translate(50px, -50px)\");\n        expect(controlBox.style.transform).toBe(\"translate3d(150px, 100px, 0px)\");\n    },\n});\n\n\nexport const TestNestedSVG = add(\"Test Nested SVG\", {\n    app: require(\"./ReactNestedSVGApp\").default,\n    path: require.resolve(\"./ReactNestedSVGApp\"),\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactATagApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <div className=\"target\"><a href=\"https://daybrush.com\">Target1</a></div>\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            preventClickDefault={true}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactAccuracyApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    const spanRef = React.useRef<HTMLSpanElement>(null);\n\n    return <div className=\"container\">\n        <span ref={spanRef}>Position</span>\n        <div className=\"preview\" style={{\n            position: \"relative\",\n            width: \"800px\",\n            height: \"800px\",\n            transform: \"scale(0.67123)\",\n            transformOrigin: \"top left\",\n            background: \"#eee\",\n        }}>\n            <div className=\"target\" style={{\n                top: \"0px\",\n                left: \"0px\",\n                transform: \"translate(150px, 100px)\",\n            }}>Target</div>\n        </div>\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            snappable={true}\n            snapContainer=\".preview\"\n            bounds={{\n                left: 0,\n                top: 0,\n            }}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n\n                spanRef.current!.innerHTML = `${e.translate[0]} x ${e.translate[1]}`;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactAccurateElementGuideline2App.tsx",
    "content": "import React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\n\nexport default function App() {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div\n            className=\"root\"\n            style={{\n                display: \"flex\",\n                justifyContent: \"center\",\n                alignItems: \"center\",\n                width: \"700.2px\",\n                height: \"700.2px\",\n            }}\n        >\n            <div\n                ref={containerRef}\n                className=\"container2\"\n                style={{\n                    width: \"299px\",\n                    height: \"299px\",\n                    outline: \"10px solid #ccc\",\n                }}\n            >\n                <div\n                    className=\"target2\"\n                    ref={targetRef}\n                    style={{\n                        width: \"100px\",\n                        height: \"100px\",\n                    }}\n                >\n                    Target\n                </div>\n                <Moveable\n                    ref={moveableRef}\n                    target={targetRef}\n                    draggable={true}\n                    edgeDraggable={false}\n                    startDragRotate={0}\n                    throttleDragRotate={0}\n                    keepRatio={false}\n                    throttleScale={0}\n                    snappable={true}\n                    snapDirections={{\n                        top: true,\n                        left: true,\n                        bottom: true,\n                        right: true,\n                        center: true,\n                        middle: true,\n                    }}\n                    elementSnapDirections={{\n                        middle: true,\n                        center: true,\n                        top: true,\n                        left: true,\n                        bottom: true,\n                        right: true,\n                    }}\n                    snapThreshold={5}\n                    elementGuidelines={[containerRef]}\n                    onDrag={(e) => {\n                        e.target.style.transform = e.transform;\n                        targetRef.current!.innerText = e.transform;\n                    }}\n                    onScale={(e) => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactAccurateElementGuidelineApp.tsx",
    "content": "import React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\n\nexport default function App() {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div\n            className=\"root\"\n            style={{\n                display: \"flex\",\n                justifyContent: \"center\",\n                alignItems: \"center\",\n                width: \"700px\",\n                height: \"700px\",\n            }}\n        >\n            <div\n                ref={containerRef}\n                className=\"container2\"\n                style={{\n                    // position: \"relative\",\n                    width: \"499px\",\n                    height: \"499px\",\n                    outline: \"1px solid #ccc\",\n                }}\n            >\n                <div\n                    className=\"target2\"\n                    ref={targetRef}\n                    style={{\n                        width: \"200px\",\n                        height: \"200px\",\n                    }}\n                >\n                    Target\n                </div>\n                <Moveable\n                    ref={moveableRef}\n                    target={targetRef}\n                    draggable={true}\n                    scalable={true}\n                    edgeDraggable={false}\n                    startDragRotate={0}\n                    throttleDragRotate={0}\n                    keepRatio={false}\n                    throttleScale={0}\n                    snappable={true}\n                    // snapDirections={{\n                    //     top: true,\n                    //     left: true,\n                    //     // bottom: true,\n                    //     // right: true,\n                    //     // center: true,\n                    //     // middle: true,\n                    // }}\n                    // elementSnapDirections={{\n                    //     // middle: true,\n                    //     // center: true,\n                    //     top: true,\n                    //     left: true,\n                    //     // bottom: true,\n                    //     // right: true,\n                    // }}\n                    // snapThreshold={10}\n                    elementGuidelines={[containerRef]}\n                    horizontalGuidelines={[150]}\n                    verticalGuidelines={[220]}\n                    onDrag={(e) => {\n                        e.target.style.cssText += e.cssText;\n                        targetRef.current!.innerText = e.transform;\n                    }}\n                    onScale={(e) => {\n                        e.target.style.cssText += e.cssText;\n                        targetRef.current!.innerText = e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactChangeTargetsOnClickApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\n\nexport default function App() {\n    const [targets, setTargets] = React.useState<Array<string>>([\n        \".cube1\",\n        \".cube2\",\n    ]);\n    const moveableRef = React.useRef<Moveable>(null);\n    const cubes = [];\n\n    for (let i = 0; i < 30; ++i) {\n        cubes.push(i);\n    }\n\n    return <div className=\"root\">\n        <div className=\"container\">\n            <Moveable\n                ref={moveableRef}\n                draggable={true}\n                target={targets}\n                onDragGroupStart={() => {\n                    requestAnimationFrame(() => {\n                        if (targets.length === 2) {\n                            setTargets([\".cube1\", \".cube2\", \".cube3\"]);\n                        } else if (targets.length === 3) {\n                            setTargets([\".cube1\", \".cube2\", \".cube3\", \".cube4\"]);\n                        }\n                    });\n                }}\n                onDrag={e => {\n                    e.target.style.cssText += e.cssText;\n                }}\n                onDragGroup={e => {\n                    e.events.forEach(ev => {\n                        ev.target.style.cssText += ev.cssText;\n                    });\n                }}\n            ></Moveable>\n\n            <div className=\"elements selecto-area\">\n                {cubes.map(i => <div className={`cube cube${i}`} key={i}></div>)}\n            </div>\n            <div className=\"empty elements\"></div>\n        </div>\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactChangingSnapContainerApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\nimport \"./snap.css\";\nexport default function App(props: Record<string, any>) {\n    const [snapContainer, setSnapContainer] = React.useState<HTMLElement | string>(\".snapGrid\");\n    const onMoustEnter = React.useCallback((e: MouseEvent) => {\n        setSnapContainer(e.currentTarget as HTMLElement);\n    }, []);\n    return (\n        <div className=\"root\" style={{\n            position: \"relative\",\n            border: \"1px solid black\",\n        }}>\n            <Moveable\n                target={\".target\"}\n                draggable={true}\n                snappable={true}\n                horizontalGuidelines={[0, 100, 200, 300]}\n                verticalGuidelines={[0, 100, 200, 300]}\n                snapContainer={snapContainer}\n                onDragStart={() => {\n                    document.querySelectorAll<HTMLElement>(\".snapGrid\").forEach(grid => {\n                        grid.addEventListener(\"mouseenter\", onMoustEnter);\n                    });\n                }}\n                onDrag={e => {\n                    e.target.style.transform = e.transform;\n                    e.target.style.pointerEvents = \"none\";\n                }}\n                onDragEnd={e => {\n                    e.target.style.pointerEvents = \"\";\n                    document.querySelectorAll<HTMLElement>(\".snapGrid\").forEach(grid => {\n                        grid.removeEventListener(\"mouseenter\", onMoustEnter);\n                    });\n                }}\n            />\n            <div className=\"container\">\n                <div className=\"snapGrid\">\n                    <div className=\"target\" style={{\n                        width: \"200px\",\n                        height: \"150px\",\n                        transform: \"translate(0px, 0px) scale(1.5, 1)\",\n                    }}>Target</div>\n                </div>\n                <div className=\"snapGrid\"></div>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactClickApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                height: \"100px\",\n            }} onClick={() => {\n                console.log(\"Click\");\n            }} onMouseDown={() => {\n                console.log(\"MouseDown\");\n            }}>\n                <div className=\"target\" ref={targetRef}>Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={targetRef}\n                    resizable={true}\n                    preventClickDefault={true}\n                    draggable={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactCustomElementApp.tsx",
    "content": "/* eslint-disable @typescript-eslint/no-namespace */\nimport * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nconst CustomElement = `\nclass CustomElement extends HTMLElement {\n    styleText = ${\"`\"}\n.card {\nwidth: 100%;\nheight: 100%;\n}\n\n.card-header {\nwidth:100%;\nheight: 80px;\nbackground-color: #3794FF;\n}\n\n.card-content {\n    width: 100%;\n    height: calc(100% - 80px);\n    background-color: #EDF0F3;\n    position: relative;\n}\n\n.card-inner {\n    position: relative;\n    top: 50px;\n    left: 50px;\n}\n${\"`\"};\n\n    constructor() {\n        super();\n        this.shadow = this.attachShadow({ mode: 'open' });\n        const style = document.createElement('style');\n        const div = document.createElement('div');\n        div.classList.add('card');\n        div.innerHTML = ${\"`\"}\n<div class=\"card-header\"></div>\n<div class=\"card-content\">\n    <div class=\"card-inner\">\n        <slot name=\"custom-element\"></slot>\n    </div>\n</div>\n${\"`\"};\n        style.textContent = this.styleText;\n        this.shadow.appendChild(style);\n        this.shadow.appendChild(div);\n    }\n}\nif (!customElements.get(\"custom-element\")) {\n    customElements.define('custom-element', CustomElement);\n}\n`;\n\nif (typeof window !== \"undefined\") {\n    eval(CustomElement);\n}\n\n\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        \"custom-element\": HTMLElement;\n    }\n    namespace JSX {\n        interface IntrinsicElements {\n            // HTML\n            \"custom-element\": React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLElement>, HTMLElement>;\n        }\n    }\n}\n\nexport default function App() {\n    const [agent, setAgent] = React.useState(\"\");\n\n    React.useEffect(() => {\n        setAgent(navigator.userAgent);\n    }, []);\n    return <div className=\"container\" style={{\n        border: \"1px solid black\",\n    }}>\n        <p style={{\n            display: \"block\",\n            height: \"20px\",\n        }}>{agent}</p>\n        <custom-element style={{\n            display: \"block\",\n            padding: \"10px\",\n        }}>\n            <div id=\"draggable\" slot=\"custom-element\" style={{\n                position: \"relative\",\n                width: \"150px\",\n                height: \"150px\",\n                backgroundColor: \"#e79627\",\n            }}></div>\n        </custom-element>\n        <Moveable\n            target={\"#draggable\"}\n            draggable={true}\n            snappable={true}\n            bounds={{ left: 0, top: 0 }}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n        />\n    </div>;\n}\n\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactCustomElementBoundsApp.tsx",
    "content": "/* eslint-disable @typescript-eslint/no-namespace */\nimport * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\nimport { createPortal } from \"react-dom\";\n\nconst CustomElement = `\nclass CustomElement extends HTMLElement {\n    styleText = ${\"`\"}\n.card {\nwidth: 100%;\nheight: 100%;\n}\n\n.card-header {\nwidth:100%;\nheight: 80px;\nbackground-color: #3794FF;\n}\n\n.card-content {\nwidth: 100%;\nheight: calc(100% - 80px);\nbackground-color: #EDF0F3;\nposition: relative;\n}\n${\"`\"};\n\n    constructor() {\n        super();\n        this.shadow = this.attachShadow({ mode: 'open' });\n        const style = document.createElement('style');\n        const div = document.createElement('div');\n        div.classList.add('card');\n        div.innerHTML = ${\"`\"}\n<div class=\"card-header\"></div>\n<div class=\"card-content\">\n  <slot name=\"custom-element\"></slot>\n</div>\n${\"`\"};\n        style.textContent = this.styleText;\n        this.shadow.appendChild(style);\n        this.shadow.appendChild(div);\n    }\n}\nif (!customElements.get(\"custom-element\")) {\n    customElements.define('custom-element', CustomElement);\n}\n`;\n\nif (typeof window !== \"undefined\") {\n    eval(CustomElement);\n}\n\n\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        \"custom-element\": HTMLElement;\n    }\n    namespace JSX {\n        interface IntrinsicElements {\n            // HTML\n            \"custom-element\": React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLElement>, HTMLElement>;\n        }\n    }\n}\n\nexport default function App() {\n    const [customElement, setCustomElement] = React.useState<HTMLElement>();\n\n    React.useEffect(() => {\n        setCustomElement(document.querySelector(\"custom-element\")!);\n    }, []);\n\n    return <div className=\"container\" style={{\n        border: \"1px solid black\",\n    }}>\n        <custom-element style={{\n            display: \"block\",\n            padding: \"10px\",\n        }}>\n            <div id=\"draggable\" slot=\"custom-element\" style={{\n                width: \"150px\",\n                height: \"150px\",\n                backgroundColor: \"#e79627\",\n            }}></div>\n        </custom-element>\n        {customElement && createPortal(<Moveable\n            target={\"#draggable\"}\n            draggable={true}\n            snappable={true}\n            bounds={{ left: 0, top: 0 }}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n        />, customElement.shadowRoot!.querySelector('.card-content')!)}\n    </div>;\n}\n\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactDragAPIApp.tsx",
    "content": "import React, { useRef, useState } from \"react\";\nimport Moveable from \"@/react-moveable\";\n\n\nexport default function App() {\n    const moveableRef = useRef<Moveable>(null);\n    const [target, setTarget] = useState<HTMLElement | null>(null);\n\n    return (\n        <div className=\"container\">\n            <div style={{\n                width: \"500px\",\n                height: \"500px\",\n                border: \"1px solid black\",\n            }}></div>\n            <img\n                id=\"drag1\"\n                src=\"https://www.w3schools.com/html/img_w3slogo.gif\"\n                draggable=\"true\"\n                onDragStart={e => {\n                    const nativeEvent = e.nativeEvent;\n\n                    if (!target) {\n                        moveableRef.current!.waitToChangeTarget().then(() => {\n                            moveableRef.current!.dragStart(nativeEvent);\n                        });\n                        setTarget(document.querySelector<HTMLElement>(\"#drag1\"));\n                    }\n                }}\n            />\n            <Moveable\n                ref={moveableRef}\n                target={target}\n                dragContainer={\".container\"}\n                draggable={true}\n                preventDefault={false}\n                onDrag={e => {\n                    e.target.style.cssText += e.cssText;\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactDragStartGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport { useState } from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    const [groupInstances, setGroupInstances] = useState<any[]>([]);\n    const t1 = React.useRef<any>(null);\n    const t2 = React.useRef<any>(null);\n    const groupMoveable = React.useRef<any>(null);\n\n    function initGroupElements() {\n        const arr: any[] = [];\n        arr.push(document.getElementsByClassName(\"target1\")[0]);\n        arr.push(document.getElementsByClassName(\"target2\")[0]);\n        setGroupInstances(arr);\n    }\n\n    function handleDragStart(e: any) {\n        initGroupElements();\n        groupMoveable.current!.dragStart(e.inputEvent);\n    }\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className={`target target1`}>Target 1</div>\n                <div className={`target target2`}>Target 2</div>\n                <Moveable\n                    ref={t1}\n                    target={`.target1` as string}\n                    draggable={true}\n                    edgeDraggable={true}\n                    origin={false}\n                    onDragStart={handleDragStart}\n                />\n                <Moveable\n                    ref={t2}\n                    target={`.target2` as string}\n                    draggable={true}\n                    origin={false}\n                    edgeDraggable={true}\n                    onDragStart={handleDragStart}\n                />\n                <Moveable\n                    ref={groupMoveable}\n                    target={groupInstances}\n                    hideDefaultLines={false}\n                    draggable={true}\n                    onDragGroup={(e) => {\n                        e.events.forEach(\n                            (ev) => (ev.target.style.transform = ev.transform)\n                        );\n                        t1.current.updateRect();\n                        t2.current.updateRect();\n                    }}\n                    onDragGroupEnd={() => {\n                        setGroupInstances([]);\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactDragTargetApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable, { MoveableManagerInterface, Renderer } from \"@/react-moveable\";\n\nconst DimensionViewable = {\n    name: \"dimensionViewable\",\n    props: [],\n    events: [],\n    render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {\n        const rect = moveable.getRect();\n\n        // Add key (required)\n        // Add class prefix moveable-(required)\n        return <div key={\"dimension-viewer\"} className={\"moveable-dimension\"} style={{\n            position: \"absolute\",\n            left: `${rect.width / 2}px`,\n            top: `${rect.height + 20}px`,\n            background: \"#4af\",\n            borderRadius: \"2px\",\n            padding: \"2px 4px\",\n            color: \"white\",\n            fontSize: \"13px\",\n            whiteSpace: \"nowrap\",\n            fontWeight: \"bold\",\n            willChange: \"transform\",\n            transform: `translate(-50%, 0px)`,\n        }}>\n            Target\n        </div>;\n    },\n} as const;\n\nexport default function App() {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    const [dragTarget, setDragTarget] = React.useState<HTMLElement>();\n\n    React.useEffect(() => {\n        setDragTarget(document.querySelector<HTMLElement>(\".moveable-dimension\")!);\n    }, []);\n    return <div className=\"container\">\n        <div className=\"target\" ref={targetRef}></div>\n        <Moveable\n            target={targetRef}\n            ables={[DimensionViewable]}\n            draggable={true}\n            resizable={true}\n            rotatable={true}\n            dragTarget={dragTarget}\n            props={{\n                dimensionViewable: true,\n            }}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n            onResize={e => {\n                e.target.style.width = `${e.width}px`;\n                e.target.style.height = `${e.height}px`;\n                e.target.style.transform = e.drag.transform;\n            }}\n            onRotate={e => {\n                e.target.style.transform = e.drag.transform;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactFixedSnapApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\" style={{\n            paddingBottom: \"400px\",\n        }}>\n            <div className=\"container\" style={{\n                height: \"900px\",\n            }}>\n                <div className=\"target element1\" style={{\n                    width: \"100px\",\n                    height: \"100px\",\n                    left: \"0px\",\n                    top: \"120px\",\n                }}>Element1</div>\n                <div className=\"target element2\" style={{\n                    width: \"100px\",\n                    height: \"100px\",\n                    left: \"400px\",\n                    top: \"120px\",\n                }}>Element2</div>\n                <div className=\"target element3\" style={{\n                    width: \"300px\",\n                    height: \"100px\",\n                    top: \"400px\",\n                    left: \"50px\",\n                }}>Element3</div>\n                <div className=\"target target1\" style={{\n                    position: \"fixed\",\n                    width: \"150px\",\n                    height: \"150px\",\n                }}>Target</div>\n                <Moveable\n                    target=\".target1\"\n                    draggable={true}\n                    scalable={true}\n                    rotatable={true}\n                    snappable={true}\n                    verticalGuidelines={[0, 100, 200]}\n                    horizontalGuidelines={[0, 100, 200]}\n                    elementGuidelines={[{\n                        element: \".element1\",\n                        refresh: true,\n                    }, \".element2\", \".element3\"]}\n                    onRender={e => {\n                        // console.log(e.moveable.state.guidelines);\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactFlexApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <div className=\"target\" style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"center\",\n            gap: \"21px\",\n            position: \"relative\",\n            width: \"446px\",\n            height: \"124px\",\n            zIndex: 1,\n        }}></div>\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            preventClickDefault={true}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactGroupDragAreaApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    const [targets, setTargets] = React.useState<any>(\".target\");\n\n    React.useEffect(() => {\n        setTimeout(() => {\n            setTargets(document.querySelectorAll(\".target, .moveable-area\"));\n            // setTargets(\".target, .moveable-area\");\n        }, 100);\n    }, []);\n    return <div className=\"container\">\n        <div className=\"target target1\">Target1</div>\n        <div className=\"target target2\">Target2</div>\n        <div className=\"target target3\">Target3</div>\n        <Moveable\n            target={targets}\n            draggable={true}\n            onDragGroup={({ events }) => {\n                events.forEach(ev => {\n                    ev.target.style.transform = ev.transform;\n                });\n            }}\n            onDragGroupEnd={({ events }) => {\n                console.log(events);\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactGroupPaddingApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target target1\" style={{\n                    borderRadius: \"10px\",\n                }}>Target1</div>\n                <div className=\"target target2\">Target2</div>\n                <div className=\"target target3\">Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    resizable={true}\n                    rotatable={true}\n                    padding={{ left: 10, top: 10, right: 10, bottom: 10 }}\n                    onRenderGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.cssText += ev.cssText;\n                        });\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactHandleLargeNumberApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    const arr: number[] = [];\n\n    for (let i = 0; i < 300; ++i) {\n        arr.push(i);\n    }\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                {arr.map((i) => {\n                    return <>\n                        <div className={`target target${i}`}>Target</div>\n                        <Moveable\n                            target={`.target${i}` as string}\n                            draggable={true}\n                            onRender={e => {\n                                e.target.style.cssText += e.cssText;\n                            }}\n                        />\n                    </>;\n                })}\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactIframeApp.tsx",
    "content": "import * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Moveable from \"@/react-moveable\";\n\nfunction Iframe(props: Record<string, any>) {\n    const [ref, setRef] = React.useState<HTMLIFrameElement | null>();\n    const container = ref?.contentWindow?.document?.body;\n\n    return (\n        <iframe ref={setRef}>\n            {container && createPortal(props.children, container)}\n        </iframe>\n    );\n}\n\nexport default function App() {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <Iframe>\n                    <div className=\"target\" ref={targetRef}>Target</div>\n                    <Moveable\n                        target={targetRef}\n                        draggable={true}\n                        onRender={e => {\n                            e.target.style.cssText += e.cssText;\n                        }}\n                    />\n                </Iframe>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactInputApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <input type=\"text\" className=\"target\" />\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactLargeZoomElementGuidelinesApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n\n    return <div className=\"container\" style={{\n    }}>\n        <div className=\"preview\" style={{\n            position: \"relative\",\n            width: \"800px\",\n            height: \"800px\",\n            transform: \"scale(3.67123)\",\n            transformOrigin: \"20% 20%\",\n            background: \"#eee\",\n        }}>\n            <div className=\"target target1\" style={{\n                top: \"0px\",\n                left: \"0px\",\n                width: \"142.1232px\",\n                transform: \"translate(150px, 100px)\",\n            }}>Target1</div>\n            <div className=\"target target2\" style={{\n                top: \"0px\",\n                left: \"100px\",\n                width: \"142.1232px\",\n                transform: \"translate(150px, 100px)\",\n            }}>Target2</div>\n        </div>\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            snappable={true}\n            snapDirections={{\n                \"top\": true,\n                \"left\": true,\n                \"bottom\": true,\n                \"right\": true,\n                \"center\": true,\n                \"middle\": true,\n            }}\n            elementSnapDirections={{\n                \"top\": true, \"left\": true,\n                \"bottom\": true, \"right\": true,\n                \"center\": true, \"middle\": true,\n            }}\n            individualGroupable={true}\n            snapGap={true}\n            elementGuidelines={[\".target1\"]}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactNestedSVGApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <svg viewBox=\"0 0 200 200\" style={{\n            border: \"1px solid black\",\n            width: \"200px\",\n            height: \"200px\",\n        }}>\n            <svg viewBox=\"0 0 200 200\" style={{\n                border: \"1px solid black\",\n                width: \"200px\",\n                height: \"200px\",\n            }}>\n                <path d=\"M 0 0 L 200 0 L 200 200 z\"\n                    className=\"svg\"\n                    style={{\n                        fill: \"white\",\n                        stroke: \"red\",\n                        strokeWidth: 2,\n                    }} />\n            </svg>\n        </svg>\n        <Moveable\n            target={\".svg\"}\n            draggable={true}\n            preventClickDefault={true}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactNestedTargetApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target target1\">\n                    Target\n                    <div className=\"target target2\">\n                        Target\n\n                    </div>\n                </div>\n                <Moveable\n                    target=\".target1\"\n                    draggable={true}\n                    stopPropagation={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n                <Moveable\n                    target=\".target2\"\n                    draggable={true}\n                    stopPropagation={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactNoTargetApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <div className=\"target\">Target1</div>\n        <Moveable\n            target={\".aaa\"}\n            draggable={true}\n            preventClickDefault={true}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactOverflowApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                height: \"100px\",\n            }}>\n                <div className=\"target\" style={{\n                    overflow: \"auto\",\n                }} onScroll={() => {\n                    moveableRef.current?.updateRect();\n                }}>\n                    <div className=\"scroll\" style={{\n                        width: \"100%\",\n                        height: \"1000px\",\n                    }}></div>\n                </div>\n                <Moveable\n                    ref={moveableRef}\n                    target={\".target\"}\n                    resizable={true}\n                    preventClickDefault={true}\n                    draggable={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactRequestBoundsApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"container\">\n            <button onClick={() => {\n                moveableRef.current!.request(\"draggable\", {\n                    isInstant: true,\n                    deltaX: 0,\n                    deltaY: 0,\n                });\n            }}>Request</button>\n            <div className=\"target\">Target</div>\n\n            <Moveable\n                ref={moveableRef}\n                target={\".target\"}\n                draggable={true}\n                rotatable={true}\n                resizable={true}\n                snappable={true}\n                bounds={{\n                    left: 200,\n                    top: 0,\n                }}\n                onRender={e => {\n                    e.target.style.cssText += e.cssText;\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactRotateClippableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    return (\n        <div className=\"container\">\n            <div className=\"nested first\">\n                No Transform\n                <div className=\"nested scale\">\n                    scale(1.5, 1.5)\n                    <div className=\"nested rotate\">\n                        rotate(30deg)\n                        <div className=\"target\" ref={targetRef}>Target</div>\n                    </div>\n                </div>\n            </div>\n            <Moveable\n                target={targetRef}\n                draggable={true}\n                throttleDrag={0}\n                startDragRotate={0}\n                throttleDragRotate={0}\n                zoom={1}\n                origin={true}\n                padding={{ left: 0, top: 0, right: 0, bottom: 0 }}\n                clippable={true}\n                clipRelative={false}\n                clipArea={false}\n                dragWithClip={false}\n                defaultClipPath={\"inset\"}\n                clipTargetBounds={true}\n                clipVerticalGuidelines={[0, 100, 200]}\n                clipHorizontalGuidelines={[0, 100, 200]}\n                snapThreshold={5}\n                onClip={(e) => {\n                    if (e.clipType === \"rect\") {\n                        e.target.style.clip = e.clipStyle;\n                    } else {\n                        e.target.style.clipPath = e.clipStyle;\n                    }\n                }}\n                // onDrag={e => {\n                //     e.target.style.transform = e.transform;\n                // }}\n                onRender={(e) => {\n                    // console.log('render');\n                    e.target.style.transform = e.transform;\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactSafariApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\nimport \"./safari.css\";\n\nexport default function App() {\n    return <div className=\"safari-app\">\n        <div className=\"safari-canvas\">\n            <div className=\"safari-pages\">\n                <div className=\"safari-target\" />\n                <Moveable\n                    target={\".safari-target\"}\n                    draggable={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactScalableKeepRatioApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <div className=\"target\" style={{\n            transform: \"scale(1, 0)\",\n        }}>Target1</div>\n        <Moveable\n            target={\".target\"}\n            scalable={true}\n            keepRatio={true}\n            onScaleStart={e => {\n                e.setRatio(1);\n            }}\n            onScale={e => {\n                // console.log(e.scale);\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactStopDragApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <p>No Stop</p>\n        <input type=\"input\" className=\"target1\"/>\n        <p>Stop Drag</p>\n        <input type=\"input\" className=\"target2\"/>\n        <p>Stop Drag</p>\n        <select className=\"target3\">\n            <option>a</option>\n            <option>b</option>\n            <option>c</option>\n        </select>\n        <Moveable\n            target={\".target1\"}\n            draggable={true}\n            onDrag={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n        <Moveable\n            target={\".target2\"}\n            draggable={true}\n            onDragStart={e => {\n                if ([\"input\", \"select\"].indexOf(e.target.tagName.toLowerCase()) > -1) {\n                    e.stopDrag();\n                }\n            }}\n            onDrag={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n        <Moveable\n            target={\".target3\"}\n            draggable={true}\n            onDragStart={e => {\n                if ([\"input\", \"select\"].indexOf(e.target.tagName.toLowerCase()) > -1) {\n                    e.stopDrag();\n                }\n            }}\n            onDrag={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactTRSTargetApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\" style={{\n            paddingTop: \"100px\",\n        }}>\n            <div>\n                <div style={{\n                    position: \"relative\",\n                    transform: \"translate3d(0px, 0px, 100px)\",\n                }}>\n                    <div className=\"target\" style={{\n                        translate: \"100px 10px\",\n                        rotate: \"30deg\",\n                        scale: \"1 2\",\n                        transform: \"translate(100px, 0px)\",\n                    }}>Target</div>\n                </div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    rotatable={true}\n                    resizable={true}\n                    rootContainer={document.body}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                ></Moveable>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactTranslate50App.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" style={{\n                    transform: \"translate(-50%, -50%)\",\n                }}>Target</div>\n                <Moveable\n                    target={\".target\"}\n                    resizable={true}\n                    preventClickDefault={true}\n                    draggable={true}\n                    onDrag={e => {\n                        console.log(e.dist);\n                    }}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactWillChangeApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"no-container\">\n        <div className=\"will-change-container\">\n            {/* <div className=\"will-change-inner\"> */}\n                <div className=\"will-change-target\">Target1</div>\n            {/* </div> */}\n        </div>\n        <Moveable\n            target={\".will-change-target\"}\n            draggable={true}\n            preventClickDefault={true}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactZoomedCursorApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                width: \"500px\",\n                transform: \"translate(100px, 100px) scale(2)\",\n            }}>\n                <div className=\"target\">Target</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    scalable={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactZoomedSnapApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\nimport { useEffect, useState } from \"react\";\n\nexport default function App() {\n    const [elementGuidelines, setElementGuideliens] = useState<HTMLElement[]>([]);\n\n    useEffect(() => {\n        setElementGuideliens([].slice.call(document.querySelectorAll(\".moveable\")));\n    }, []);\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                width: \"1000px\",\n                height: \"1600px\",\n                transform: \"scale(0.47845)\",\n                transformOrigin: \"top left\",\n                background: \"#faa\",\n            }}>\n                <div className=\"target box-1\" style={{\n                    top: 0,\n                    left: 0,\n                }}>Target</div>\n                <div className=\"target moveable box-2\" style={{\n                    \"width\": \"600px\",\n                    \"height\": \"50px\",\n                    \"top\": \"1400px\",\n                    \"left\": \"150px\",\n                }}>\n                    <p>Moveable 2</p>\n                </div>\n                <div className=\"target moveable box-3\" style={{\n                    \"width\": \"250px\",\n                    \"height\": \"50px\",\n                    \"top\": \"1300px\",\n                    \"left\": \"350px\",\n                }}>\n                    <p>Moveable 3</p>\n                </div>\n                <div className=\"target moveable box-4\" style={{\n                    \"width\": \"250px\",\n                    \"height\": \"50px\",\n                    \"top\": \"1200px\",\n                    \"left\": \"200px\",\n                }}>\n                    <p>Moveable 4</p>\n                </div>\n                <div className=\"target moveable box-5\" style={{\n                    \"width\": \"250px\",\n                    \"height\": \"50px\",\n                    \"top\": \"1200px\",\n                    \"left\": \"500px\",\n                }}>\n                    <p>Moveable 5</p>\n                </div>\n            </div>\n            <Moveable\n                target={\".box-1\"}\n                draggable={true}\n                resizable={true}\n                snappable={true}\n                zoom={1}\n                elementGuidelines={elementGuidelines}\n                bounds={{\n                    top: 0,\n                    left: 0,\n                    right: 500,\n                    bottom: 800,\n                }}\n                onRender={e => {\n                    e.target.style.cssText += e.cssText;\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/ReactZoomedTargetApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\" style={{\n            paddingTop: \"100px\",\n        }}>\n            <div>\n                <div style={{\n                    position: \"relative\",\n                    transform: \"translate3d(0px, 0px, 100px)\",\n                }}>\n                    <div style={{\n                        position: \"relative\",\n                        zoom: 0.5,\n                    }}>\n                        <div className=\"target\" style={{\n                            transform: \"translate(0px, 0px)\",\n                        }}>Target</div>\n                    </div>\n                    <Moveable\n                        target={\".target\"}\n                        draggable={true}\n                        rotatable={true}\n                        resizable={true}\n                        rootContainer={document.body}\n                        onRender={e => {\n                            e.target.style.cssText += e.cssText;\n                        }}\n                    ></Moveable>\n                </div>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/safari.css",
    "content": ".safari-canvas {\n    margin-top: 125px;\n    overflow: inherit;\n    height: 1000px;\n    margin-left: 120px;\n    padding: 4rem 10rem;\n    position: relative;\n    background: #eee;\n}\n\n.safari-pages {\n    transform: scale(1.45);\n    transform-origin: center top 0px;\n    height: 1726.35px;\n}\n\n.safari-target {\n    border: 1px solid red;\n    min-height: 50px;\n    max-width: 100px;\n    width: 100px;\n  }\n"
  },
  {
    "path": "packages/react-moveable/stories/99-Tests/snap.css",
    "content": ".snapGrid {\n    background: green;\n    margin-top: 20px;\n    min-height: 300px;\n    width: 100%;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/9A-Components/0-Components.stories.tsx",
    "content": "import { add } from \"../utils/story\";\n\n\nexport default {\n    title: \"Combination with Other Components\",\n};\n\nexport const ComponentsSelecto = add(\"Use Selecto\", {\n    app: require(\"./ReactSelectoApp\").default,\n    path: require.resolve(\"./ReactSelectoApp\"),\n});\n\nexport const ComponentsSelectoWithMultipleGroup = add(\"Use Selecto with Multiple Group\", {\n    app: require(\"./ReactSelectoMultipleGroupApp\").default,\n    path: require.resolve(\"./ReactSelectoMultipleGroupApp\"),\n});\n\nexport const ComponentsSelectoWithGroupUngroup = add(\"Use Selecto with Group & Ungroup\", {\n    app: require(\"./ReactSelectoMultipleGroupUngroupApp\").default,\n    path: require.resolve(\"./ReactSelectoMultipleGroupUngroupApp\"),\n});\n\n\nexport const ComponentsSelectoWithNestedGroup = add(\"Use Selecto with Nested Group\", {\n    app: require(\"./ReactSelectoNestedGroupApp\").default,\n    path: require.resolve(\"./ReactSelectoNestedGroupApp\"),\n});\n\n\n\n\n\nexport const ComponentsInfiniteViewer = add(\"Use Infinite Viewer\", {\n    app: require(\"./ReactInfiniteViewerApp\").default,\n    path: require.resolve(\"./ReactInfiniteViewerApp\"),\n});\n"
  },
  {
    "path": "packages/react-moveable/stories/9A-Components/ReactInfiniteViewerApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\nimport InfiniteViewer from \"react-infinite-viewer\";\n\nexport default function App() {\n    const viewerRef = React.useRef<InfiniteViewer>(null);\n\n    React.useEffect(() => {\n        setTimeout(() => {\n            viewerRef.current!.scrollCenter();\n        }, 100);\n    }, []);\n\n    const scrollOptions = {\n        container: () => viewerRef.current!.getContainer(),\n        threshold: 20,\n        getScrollPosition: () => {\n            return [\n                viewerRef.current!.getScrollLeft({ absolute: true }),\n                viewerRef.current!.getScrollTop({ absolute: true }),\n            ];\n        },\n    };\n\n    return (<div className=\"container\">\n        <button className=\"button\" onClick={() => {\n            viewerRef.current!.scrollCenter();\n        }} style={{\n            position: \"absolute\",\n            top: \"10px\",\n            right: \"10px\",\n            zIndex: 1,\n        }}>Scroll Center</button>\n        <InfiniteViewer className=\"infinite-viewer\" ref={viewerRef}>\n            <div className=\"viewport\" style={{\n                width: \"400px\",\n                height: \"400px\",\n                border: \"1px solid #ccc\",\n            }}>\n                <div className=\"target\">Target</div>\n                <Moveable\n                    scrollable={true}\n                    scrollOptions={scrollOptions}\n                    target={\".target\"}\n                    draggable={true}\n                    resizable={true}\n                    rotatable={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                    onScroll={({ direction }) => {\n                        viewerRef.current!.scrollBy(direction[0] * 10, direction[1] * 10);\n                    }}\n                ></Moveable>\n            </div>\n        </InfiniteViewer>\n    </div>);\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/9A-Components/ReactSelectoApp.tsx",
    "content": "import * as React from \"react\";\nimport Selecto from \"react-selecto\";\nimport Moveable from \"@/react-moveable\";\n\n\nexport default function App() {\n    const [targets, setTargets] = React.useState<Array<SVGElement | HTMLElement>>([]);\n    const moveableRef = React.useRef<Moveable>(null);\n    const selectoRef = React.useRef<Selecto>(null);\n    const cubes = [];\n\n    for (let i = 0; i < 30; ++i) {\n        cubes.push(i);\n    }\n\n    return <div className=\"root\">\n        <div className=\"container\">\n            <Moveable\n                ref={moveableRef}\n                draggable={true}\n                target={targets}\n                onClickGroup={e => {\n                    selectoRef.current!.clickTarget(e.inputEvent, e.inputTarget);\n                }}\n                onDrag={e => {\n                    e.target.style.transform = e.transform;\n                }}\n                onDragGroup={e => {\n                    e.events.forEach(ev => {\n                        ev.target.style.transform = ev.transform;\n                    });\n                }}\n            ></Moveable>\n            <Selecto\n                ref={selectoRef}\n                dragContainer={window}\n                selectableTargets={[\".selecto-area .cube\"]}\n                hitRate={0}\n                selectByClick={true}\n                selectFromInside={false}\n                toggleContinueSelect={[\"shift\"]}\n                ratio={0}\n                onDragStart={e => {\n                    const moveable = moveableRef.current!;\n                    const target = e.inputEvent.target;\n                    if (\n                        moveable.isMoveableElement(target)\n                        || targets.some(t => t === target || t.contains(target))\n                    ) {\n                        e.stop();\n                    }\n                }}\n                onSelectEnd={e => {\n                    const moveable = moveableRef.current!;\n                    if (e.isDragStart) {\n                        e.inputEvent.preventDefault();\n\n                        moveable.waitToChangeTarget().then(() => {\n                            moveable.dragStart(e.inputEvent);\n                        });\n                    }\n                    setTargets(e.selected);\n                }}\n            ></Selecto>\n\n            <div className=\"elements selecto-area\">\n                {cubes.map(i => <div className=\"cube\" key={i}></div>)}\n            </div>\n            <div className=\"empty elements\"></div>\n        </div>\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/9A-Components/ReactSelectoMultipleGroupApp.tsx",
    "content": "import { deepFlat } from \"@daybrush/utils\";\nimport * as React from \"react\";\nimport { useKeycon } from \"react-keycon\";\nimport Selecto from \"react-selecto\";\nimport Moveable, { MoveableTargetGroupsType } from \"@/react-moveable\";\nimport { GroupManager, TargetList } from \"@moveable/helper\";\n\nexport default function App() {\n    const { isKeydown: isCommand } = useKeycon({ keys: \"meta\" });\n    const { isKeydown: isShift } = useKeycon({ keys: \"shift\" });\n    const groupManagerRef = React.useRef<GroupManager>();\n    const [targets, setTargets] = React.useState<MoveableTargetGroupsType>([]);\n    const moveableRef = React.useRef<Moveable>(null);\n    const selectoRef = React.useRef<Selecto>(null);\n    const cubes = [];\n\n    for (let i = 0; i < 30; ++i) {\n        cubes.push(i);\n    }\n    const setSelectedTargets = React.useCallback((nextTargetes: MoveableTargetGroupsType) => {\n        selectoRef.current!.setSelectedTargets(deepFlat(nextTargetes));\n        setTargets(nextTargetes);\n    }, []);\n    React.useEffect(() => {\n        // [[0, 1], 2], 3, 4, [5, 6], 7, 8, 9\n        const elements = selectoRef.current!.getSelectableElements();\n\n        groupManagerRef.current = new GroupManager([\n            [[elements[0], elements[1]], elements[2]],\n            [elements[5], elements[6], elements[7]],\n        ], elements);\n    }, []);\n\n    return <div className=\"root\">\n        <div className=\"container\">\n            <Moveable\n                ref={moveableRef}\n                draggable={true}\n                rotatable={true}\n                scalable={true}\n                target={targets}\n                onClickGroup={e => {\n                    if (!e.moveableTarget) {\n                        setSelectedTargets([]);\n                        return;\n                    }\n                    if (e.isDouble) {\n                        const childs = groupManagerRef!.current!.selectSubChilds(targets, e.moveableTarget);\n\n                        setSelectedTargets(childs.targets());\n                        return;\n                    }\n                    if (e.isTrusted) {\n                        selectoRef.current!.clickTarget(e.inputEvent, e.moveableTarget);\n                    }\n                }}\n                onDrag={e => {\n                    e.target.style.transform = e.transform;\n                }}\n                onRenderGroup={e => {\n                    e.events.forEach(ev => {\n                        ev.target.style.cssText += ev.cssText;\n                    });\n                }}\n            ></Moveable>\n            <Selecto\n                ref={selectoRef}\n                dragContainer={window}\n                selectableTargets={[\".selecto-area .cube\"]}\n                hitRate={0}\n                selectByClick={true}\n                selectFromInside={false}\n                toggleContinueSelect={[\"shift\"]}\n                ratio={0}\n                onDragStart={e => {\n                    const moveable = moveableRef.current!;\n                    const target = e.inputEvent.target;\n                    // Must have use deep flat\n                    const flatted = targets.flat(3) as Array<HTMLElement | SVGElement>;\n                    if (\n                        moveable.isMoveableElement(target)\n                        || flatted.some(t => t === target || t.contains(target))\n                    ) {\n                        e.stop();\n                    }\n                }}\n                onSelectEnd={e => {\n                    const {\n                        isDragStartEnd,\n                        isClick,\n                        added,\n                        removed,\n                        inputEvent,\n                    } = e;\n                    const moveable = moveableRef.current!;\n\n                    if (isDragStartEnd) {\n                        inputEvent.preventDefault();\n\n                        moveable.waitToChangeTarget().then(() => {\n                            moveable.dragStart(inputEvent);\n                        });\n                    }\n                    const groupManager = groupManagerRef.current!;\n                    let nextChilds: TargetList;\n\n                    if (isDragStartEnd || isClick) {\n                        if (isCommand) {\n                            nextChilds = groupManager.selectSingleChilds(targets, added, removed);\n                        } else {\n                            nextChilds = groupManager.selectCompletedChilds(targets, added, removed, isShift);\n                        }\n                    } else {\n                        nextChilds = groupManager.selectSameDepthChilds(targets, added, removed);\n                    }\n                    e.currentTarget.setSelectedTargets(nextChilds.flatten());\n                    setSelectedTargets(nextChilds.targets());\n                }}\n            ></Selecto>\n            <p>[[0, 1], 2] is group</p>\n            <p>[5, 6, 7] is group</p>\n\n            <div className=\"elements selecto-area\">\n                {cubes.map(i => <div className=\"cube\" key={i}>{i}</div>)}\n            </div>\n            <div className=\"empty elements\"></div>\n        </div>\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/9A-Components/ReactSelectoMultipleGroupUngroupApp.tsx",
    "content": "import { deepFlat } from \"@daybrush/utils\";\nimport * as React from \"react\";\nimport Selecto from \"react-selecto\";\nimport Moveable, { MoveableTargetGroupsType } from \"@/react-moveable\";\nimport { GroupManager, TargetList } from \"@moveable/helper\";\n\nexport default function App() {\n    const groupManager = React.useMemo<GroupManager>(() => new GroupManager([]), []);\n    const [targets, setTargets] = React.useState<MoveableTargetGroupsType>([]);\n    const moveableRef = React.useRef<Moveable>(null);\n    const selectoRef = React.useRef<Selecto>(null);\n    const cubes = [];\n\n    for (let i = 0; i < 30; ++i) {\n        cubes.push(i);\n    }\n    const setSelectedTargets = React.useCallback((nextTargetes: MoveableTargetGroupsType) => {\n        selectoRef.current!.setSelectedTargets(deepFlat(nextTargetes));\n        setTargets(nextTargetes);\n    }, []);\n\n    React.useEffect(() => {\n        // [[0, 1], 2], 3, 4, [5, 6], 7, 8, 9\n        const elements = selectoRef.current!.getSelectableElements();\n\n        groupManager.set([], elements);\n    }, []);\n\n    return <div className=\"root\">\n        <div className=\"container\">\n            <button onClick={() => {\n                const nextGroup = groupManager.group(targets, true);\n\n                if (nextGroup) {\n                    setTargets(nextGroup);\n                }\n            }}>Group</button>\n            &nbsp;\n            <button onClick={() => {\n                const nextGroup = groupManager.ungroup(targets);\n\n                if (nextGroup) {\n                    setTargets(nextGroup);\n                }\n            }}>Ungroup</button>\n            <Moveable\n                ref={moveableRef}\n                draggable={true}\n                rotatable={true}\n                scalable={true}\n                target={targets}\n                onDrag={e => {\n                    e.target.style.transform = e.transform;\n                }}\n                onRenderGroup={e => {\n                    e.events.forEach(ev => {\n                        ev.target.style.cssText += ev.cssText;\n                    });\n                }}\n                onClickGroup={e => {\n                    if (!e.moveableTarget) {\n                        setSelectedTargets([]);\n                        return;\n                    }\n                    if (e.isDouble) {\n                        const childs = groupManager.selectSubChilds(targets, e.moveableTarget);\n\n                        setSelectedTargets(childs.targets());\n                        return;\n                    }\n                    if (e.isTrusted) {\n                        selectoRef.current!.clickTarget(e.inputEvent, e.moveableTarget);\n                    }\n                }}\n            ></Moveable>\n            <Selecto\n                ref={selectoRef}\n                dragContainer={window}\n                selectableTargets={[\".selecto-area .cube\"]}\n                hitRate={0}\n                selectByClick={true}\n                selectFromInside={false}\n                toggleContinueSelect={[\"shift\"]}\n                ratio={0}\n                onDragStart={e => {\n                    const moveable = moveableRef.current!;\n                    const target = e.inputEvent.target;\n                    const flatted = deepFlat(targets);\n\n                    if (\n                        target.tagName === \"BUTTON\"\n                        || moveable.isMoveableElement(target)\n                        || flatted.some(t => t === target || t.contains(target))\n                    ) {\n                        e.stop();\n                    }\n                    e.data.startTargets = targets;\n                }}\n                onSelect={e => {\n                    const {\n                        startAdded,\n                        startRemoved,\n                        isDragStartEnd,\n                    } = e;\n\n                    if (isDragStartEnd) {\n                        return;\n                    }\n                    const nextChilds = groupManager.selectSameDepthChilds(\n                        e.data.startTargets,\n                        startAdded,\n                        startRemoved,\n                    );\n\n                    setSelectedTargets(nextChilds.targets());\n                }}\n                onSelectEnd={e => {\n                    const {\n                        isDragStartEnd,\n                        isClick,\n                        added,\n                        removed,\n                        inputEvent,\n                    } = e;\n                    const moveable = moveableRef.current!;\n\n                    if (isDragStartEnd) {\n                        inputEvent.preventDefault();\n\n                        moveable.waitToChangeTarget().then(() => {\n                            moveable.dragStart(inputEvent);\n                        });\n                    }\n                    let nextChilds: TargetList;\n\n                    if (isDragStartEnd || isClick) {\n                        nextChilds = groupManager.selectCompletedChilds(e.data.startTargets, added, removed);\n                    } else {\n                        nextChilds = groupManager.selectSameDepthChilds(e.data.startTargets, added, removed);\n                    }\n                    e.currentTarget.setSelectedTargets(nextChilds.flatten());\n                    setSelectedTargets(nextChilds.targets());\n                }}\n            ></Selecto>\n            <div className=\"elements selecto-area\">\n                {cubes.map(i => <div className=\"cube\" key={i}>{i}</div>)}\n            </div>\n            <div className=\"empty elements\"></div>\n        </div>\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/9A-Components/ReactSelectoNestedGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Selecto from \"react-selecto\";\nimport Moveable from \"@/react-moveable\";\nimport { diff } from \"@egjs/children-differ\";\n\n\nexport default function App() {\n    const [targets, setTargets] = React.useState<Array<SVGElement | HTMLElement>>([]);\n    const moveableRef = React.useRef<Moveable>(null);\n    const selectoRef = React.useRef<Selecto>(null);\n    const cubes: number[] = [];\n\n    for (let i = 0; i < 30; ++i) {\n        cubes.push(i);\n    }\n\n    return <div className=\"root\">\n        <div className=\"container\">\n            <Moveable\n                ref={moveableRef}\n                draggable={true}\n                target={targets}\n                onClickGroup={e => {\n                    selectoRef.current!.clickTarget(e.inputEvent, e.inputTarget);\n                }}\n                onDrag={e => {\n                    e.target.style.transform = e.transform;\n                }}\n                onDragGroup={e => {\n                    e.events.forEach(ev => {\n                        ev.target.style.transform = ev.transform;\n                    });\n                }}\n                onClick={e => {\n                    if (e.isDouble) {\n                        const inputTarget = e.inputTarget as HTMLElement;\n                        const selectableElements = selectoRef.current!.getSelectableElements();\n\n                        if (selectableElements.includes(inputTarget)) {\n                            selectoRef.current!.setSelectedTargets([inputTarget]);\n                            setTargets([inputTarget]);\n                        }\n                    }\n                }}\n            ></Moveable>\n            <Selecto\n                ref={selectoRef}\n                dragContainer={window}\n                selectableTargets={[\".selecto-area .cube\"]}\n                hitRate={0}\n                selectByClick={true}\n                selectFromInside={false}\n                toggleContinueSelect={[\"shift\"]}\n                ratio={0}\n                onDragStart={e => {\n                    const moveable = moveableRef.current!;\n                    const target = e.inputEvent.target;\n                    if (\n                        moveable.isMoveableElement(target)\n                        || targets.some(t => t === target || t.contains(target))\n                    ) {\n                        e.stop();\n                    }\n                }}\n                onSelectEnd={e => {\n                    const moveable = moveableRef.current!;\n                    let selected = e.selected;\n\n                    // excludes child elements.\n                    selected = selected.filter(target => {\n                        return selected.every(target2 => {\n                            return target === target2 || !target2.contains(target);\n                        });\n                    });\n\n                    const result = diff(e.startSelected, selected);\n\n                    e.currentTarget.setSelectedTargets(selected);\n\n\n                    if (!result.added.length && !result.removed.length) {\n                        return;\n                    }\n                    if (e.isDragStartEnd) {\n                        e.inputEvent.preventDefault();\n\n                        moveable.waitToChangeTarget().then(() => {\n                            moveable.dragStart(e.inputEvent);\n                        });\n                    }\n                    setTargets(selected);\n                }}\n            ></Selecto>\n            <div className=\"elements selecto-area\">\n                {cubes.map(i => {\n                    if (i === 2) {\n                        return <div className=\"cube\" key={i} style={{\n                            width: \"100px\",\n                            height: \"50px\",\n                        }}>\n                            {i}\n                            <div className=\"cube\" key={i}>{i}</div>\n                        </div>;\n                    }\n                    return <div className=\"cube\" key={i}>{i}</div>;\n                })}\n            </div>\n            <div className=\"empty elements\"></div>\n        </div>\n    </div>;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/common.css",
    "content": ".dark {\n    color: white;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/controls/default.ts",
    "content": "import { makeArgType, makeLink, makeOptionLink } from \"../utils\";\n\nexport const SCALE_CONTROLS = {\n    \"containerScale\": makeArgType({\n        type: \"number\",\n        description: \"container's scale\",\n        defaultValue: 1,\n    }),\n};\n\nexport const DEFAULT_CONTROLS = {\n    padding: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Moveable\", \"padding\"),\n        defaultValue: { left: 0, top: 0, right: 0, bottom: 0 },\n    }),\n    hideDefaultLines: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Moveable\", \"hideDefaultLines\"),\n        defaultValue: false,\n    }),\n};\n\n\nexport const DEFAULT_SCROLLABLE_CONTROLS = {\n    threshold: makeArgType({\n        type: \"number\",\n        description: makeOptionLink(\"Scrollable\", \"ScrollableOptions\", \"threshold\"),\n        defaultValue: 30,\n    }),\n    throttleTime: makeArgType({\n        type: \"number\",\n        description: makeOptionLink(\"Scrollable\", \"ScrollableOptions\", \"throttleTime\"),\n        defaultValue: 0,\n    }),\n    checkScrollEvent: makeArgType({\n        type: \"boolean\",\n        description: makeOptionLink(\"Scrollable\", \"ScrollableOptions\", \"checkScrollEvent\"),\n        defaultValue: false,\n    }),\n};\n\nexport const DEFAULT_DRAGGABLE_CONTROLS = {\n    draggable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Draggable\", \"draggable\"),\n        defaultValue: true,\n    }),\n    throttleDrag: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Draggable\", \"throttleDrag\"),\n        defaultValue: 1,\n    }),\n    edgeDraggable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Draggable\", \"edgeDraggable\"),\n        defaultValue: false,\n    }),\n    throttleDragRotate: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Draggable\", \"throttleDragRotate\"),\n        defaultValue: 0,\n    }),\n    startDragRotate: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Draggable\", \"startDragRotate\"),\n        defaultValue: 0,\n    }),\n};\n\nexport const DEFAULT_RESIZABLE_CONTROLS = {\n    resizable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Resizable\", \"resizable\"),\n        defaultValue: true,\n    }),\n    edge: makeArgType({\n        type: \"array\",\n        description: makeLink(\"Resizable\", \"edge\"),\n        defaultValue: [],\n    }),\n    maxWidth: makeArgType({\n        type: \"text\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: \"auto\",\n    }),\n    maxHeight: makeArgType({\n        type: \"text\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: \"auto\",\n    }),\n    minWidth: makeArgType({\n        type: \"text\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: \"auto\",\n    }),\n    minHeight: makeArgType({\n        type: \"text\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: \"auto\",\n    }),\n    keepRatio: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Resizable\", \"keepRatio\"),\n        defaultValue: false,\n    }),\n    throttleResize: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Resizable\", \"throttleResize\"),\n        defaultValue: 1,\n    }),\n    renderDirections: makeArgType({\n        type: \"array\",\n        description: makeLink(\"Resizable\", \"renderDirections\"),\n        defaultValue: [\"nw\", \"n\", \"ne\", \"w\", \"e\", \"sw\", \"s\", \"se\"],\n    }),\n};\n\nexport const DEFAULT_SCALABLE_CONTROLS = {\n    scalable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Scalable\", \"scalable\"),\n        defaultValue: true,\n    }),\n    keepRatio: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Scalable\", \"keepRatio\"),\n        defaultValue: false,\n    }),\n    throttleScale: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Scalable\", \"throttleScale\"),\n        defaultValue: 0,\n    }),\n    renderDirections: makeArgType({\n        type: \"array\",\n        description: makeLink(\"Scalable\", \"renderDirections\"),\n        defaultValue: [\"nw\", \"n\", \"ne\", \"w\", \"e\", \"sw\", \"s\", \"se\"],\n    }),\n};\n\nexport const DEFAULT_ROTATABLE_CONTROLS = {\n    rotatable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Rotatable\", \"rotatable\"),\n        defaultValue: true,\n    }),\n    throttleRotate: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Rotatable\", \"throttleRotate\"),\n        defaultValue: 0,\n    }),\n    rotationPosition: makeArgType({\n        type: \"inline-radio\",\n        description: makeLink(\"Rotatable\", \"rotationPosition\"),\n        defaultValue: \"top\",\n        control: {\n            options: [\n                \"top\",\n                \"left\",\n                \"right\",\n                \"bottom\",\n                \"top-left\",\n                \"top-right\",\n                \"bottom-left\",\n                \"bottom-right\",\n                \"left-top\",\n                \"right-top\",\n                \"left-bottom\",\n                \"right-bottom\",\n                \"none\",\n                [\"top\", \"left\"],\n                [\"top\", \"bottom\"],\n            ],\n        },\n    }),\n};\nexport const DEFAULT_WARPABLE_CONTROLS = {\n    warpable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Warpable\", \"warpable\"),\n        defaultValue: true,\n    }),\n    renderDirections: makeArgType({\n        type: \"array\",\n        description: makeLink(\"Warpable\", \"renderDirections\"),\n        defaultValue: [\"nw\", \"n\", \"ne\", \"w\", \"e\", \"sw\", \"s\", \"se\"],\n    }),\n};\n\nexport const DEFAULT_SNAPPABLE_CONTROLS = {\n    snappable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"snappable\"),\n        defaultValue: true,\n    }),\n    snapDirections: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Snappable\", \"snapDirections\"),\n        defaultValue: { top: true, left: true, bottom: true, right: true },\n    }),\n    snapHorizontalThreshold: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Snappable\", \"snapHorizontalThreshold\"),\n        defaultValue: 5,\n    }),\n    snapVerticalThreshold: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Snappable\", \"snapVerticalThreshold\"),\n        defaultValue: 5,\n    }),\n};\nexport const DEFAULT_SNAPPABLE_GUIDELINES_CONTROLS = {\n    verticalGuidelines: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Snappable\", \"verticalGuidelines\"),\n        defaultValue: [50, 150, 250, 450, 550],\n    }),\n    horizontalGuidelines: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Snappable\", \"horizontalGuidelines\"),\n        defaultValue: [0, 100, 200, 400, 500],\n    }),\n};\nexport const DEFAULT_SNAPPABLE_ELEMENTS_CONTROLS = {\n    snapDirections: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Snappable\", \"snapDirections\"),\n        defaultValue: { top: true, left: true, bottom: true, right: true, center: true, middle: true },\n    }),\n    elementSnapDirections: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Snappable\", \"elementSnapDirections\"),\n        defaultValue: { top: true, left: true, bottom: true, right: true, center: true, middle: true },\n    }),\n    snapGap: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"snapGap\"),\n        defaultValue: true,\n    }),\n    isDisplaySnapDigit: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"isDisplaySnapDigit\"),\n        defaultValue: true,\n    }),\n    isDisplayInnerSnapDigit: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"isDisplayInnerSnapDigit\"),\n        defaultValue: false,\n    }),\n    snapDigit: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Snappable\", \"snapDigit\"),\n        defaultValue: 0,\n    }),\n    maxSnapElementGuidelineDistance: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Snappable\", \"maxSnapElementGuidelineDistance\"),\n        defaultValue: Infinity,\n    }),\n};\nexport const DEFAULT_SNAP_GRID_CONTROLS = {\n    snappable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"snappable\"),\n        defaultValue: true,\n    }),\n    isDisplayGridGuidelines: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"isDisplayGridGuidelines\"),\n        defaultValue: false,\n    }),\n    snapGridWidth: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Snappable\", \"snapGridWidth\"),\n        defaultValue: 10,\n    }),\n    snapGridHeight: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Snappable\", \"snapGridHeight\"),\n        defaultValue: 10,\n    }),\n};\n\nexport const DEFAULT_SNAP_CONTAINER_CONTROLS = {\n    snapContainer: makeArgType({\n        type: \"text\",\n        description: makeLink(\"Snappable\", \"snapContainer\"),\n        defaultValue: \".snapContainer\",\n    }),\n};\nexport const DEFAULT_BOUNDS_CONTROLS = {\n    snappable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"snappable\"),\n        defaultValue: true,\n    }),\n    bounds: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Snappable\", \"bounds\"),\n        defaultValue: { left: 0, top: 0, right: 0, bottom: 0, position: \"css\" },\n    }),\n};\nexport const DEFAULT_INNER_BOUNDS_CONTROLS = {\n    snappable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"snappable\"),\n        defaultValue: true,\n    }),\n    innerBounds: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Snappable\", \"innerBounds\"),\n        defaultValue: { left: 0, top: 0, width: 100, height: 100 },\n    }),\n};\n\n\n\nexport const DEFAULT_ORIGIN_DRAGGABLE_CONTROLS = {\n    originDraggable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"OriginDraggable\", \"originDraggable\"),\n        defaultValue: true,\n    }),\n    originRelative: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"OriginDraggable\", \"originRelative\"),\n        defaultValue: true,\n    }),\n};\n\n\nexport const DEFAULT_CLIPPABLE_CONTROLS = {\n    clippable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Clippable\", \"clippable\"),\n        defaultValue: true,\n    }),\n    clipRelative: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Clippable\", \"clipRelative\"),\n        defaultValue: false,\n    }),\n    clipArea: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Clippable\", \"clipArea\"),\n        defaultValue: false,\n    }),\n    dragWithClip: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Clippable\", \"dragWithClip\"),\n        defaultValue: 0,\n    }),\n    defaultClipPath: makeArgType({\n        type: \"inline-radio\",\n        description: makeLink(\"Clippable\", \"defaultClipPath\"),\n        defaultValue: \"inset\",\n        control: {\n            options: [\n                \"circle\",\n                \"inset\",\n                \"ellipse\",\n                \"rect\",\n                \"polygon\",\n            ],\n        },\n    }),\n    clipTargetBounds: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Clippable\", \"clipTargetBounds\"),\n        defaultValue: false,\n    }),\n    keepRatio: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Clippable\", \"keepRatio\"),\n        defaultValue: false,\n    }),\n};\n"
  },
  {
    "path": "packages/react-moveable/stories/controls/group.ts",
    "content": "import { makeArgType, makeLink } from \"../utils\";\n\nexport const DEFAULT_GROUPPABLE_GROUP_CONTROLS = {\n    hideChildMoveableDefaultLines: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Grouppable\", \"hideChildMoveableDefaultLines\"),\n        defaultValue: false,\n    }),\n};\nexport const DEFAULT_RESIZABLE_GROUP_CONTROLS = {\n    maxWidth: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: 0,\n    }),\n    maxHeight: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: 0,\n    }),\n    minWidth: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: 0,\n    }),\n    minHeight: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: 0,\n    }),\n    keepRatio: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Resizable\", \"keepRatio\"),\n        defaultValue: true,\n    }),\n};\n\nexport const DEFAULT_SCALABLE_GROUP_CONTROLS = {\n    keepRatio: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Scalable\", \"keepRatio\"),\n        defaultValue: true,\n    }),\n};\n"
  },
  {
    "path": "packages/react-moveable/stories/templates/default.css",
    "content": "html,\nbody {\n    position: relative;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n}\n\nhtml:has(.no-relative),\nbody:has(.no-relative) {\n    margin: 8px;\n    padding: 8px;\n    position: static;\n    /* border: 8px solid red; */\n}\n\nhtml:has(.no-relative) {\n    position: relative;\n}\n\nhtml:has(.margin),\nbody:has(.margin) {\n    /* margin-top: 50px; */\n}\n\n.margin .root {\n    position: static;\n}\n\n.description {\n    padding: 10px;\n}\n\n.root {\n    position: relative;\n}\n\n.container {\n    position: relative;\n    margin-top: 50px;\n}\n\n.will-change-container {\n    padding-left: 100px;\n    padding-top: 100px;\n    will-change: transform;\n}\n\n.will-change-target {\n    position: relative;\n    width: 100px;\n    height: 100px;\n    line-height: 100px;\n    text-align: center;\n    background: #ee8;\n    color: #333;\n    font-weight: bold;\n    border: 1px solid #333;\n    box-sizing: border-box;\n}\n\n.target {\n    position: absolute;\n    width: 100px;\n    height: 100px;\n    top: 150px;\n    left: 100px;\n    line-height: 100px;\n    text-align: center;\n    background: #ee8;\n    color: #333;\n    font-weight: bold;\n    border: 1px solid #333;\n    box-sizing: border-box;\n}\n\n.target1 {\n    left: 120px;\n    top: 120px;\n}\n\n.target2 {\n    left: 300px;\n    top: 140px;\n}\n\n.target3 {\n    left: 180px;\n    top: 250px;\n}\n\n.nested {\n    position: absolute;\n    border: 4px solid #ccc;\n    width: 100px;\n    height: 100px;\n    top: 50px;\n    left: 70px;\n    color: #333;\n    /* box-sizing: border-box; */\n}\n\n.nested.first {\n    top: 150px;\n}\n\n.nested.rotate {\n    transform-origin: 0 0;\n    transform: rotate(-30deg);\n}\n\n.nested.scale {\n    transform: scale(1.5, 1.5);\n}\n\n.nested .target {\n    top: 50px;\n    left: 50px\n}\n\n\n/* pos guidelines */\n.moveable-normal.red {\n    background: red !important;\n}\n\n/* gap guidelines */\n.moveable-gap.red {\n    background: red !important;\n}\n\n/* When snapped to an element in elementGuidelines */\n.moveable-bold.red {\n    background: red !important;\n}\n\n/* A dashed line between target and element */\n.moveable-dashed.red {\n    border-top-color: red !important;\n    border-left-color: red !important;\n}\n\n/* pos guidelines */\n.moveable-normal.green {\n    background: green !important;\n}\n\n/* gap guidelines */\n.moveable-gap.green {\n    background: green !important;\n}\n\n/* When snapped to an element in elementGuidelines */\n.moveable-bold.green {\n    background: green !important;\n}\n\n/* A dashed line between target and element */\n.moveable-dashed.green {\n    border-top-color: green !important;\n    border-left-color: green !important;\n}\n\n.scrollArea {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: calc(100vh - 100px);\n    overflow: auto;\n}\n\n.scrollArea:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 300%;\n    width: 100%;\n    background: linear-gradient(#333,\n            #fff);\n}\n\n.infinite-viewer {\n    height: 500px;\n}\n\n.control-padding .moveable-around-control {\n    background: #f55 !important;\n}\n\n\n.cube {\n    display: inline-block;\n    border-radius: 5px;\n    width: 40px;\n    height: 40px;\n    margin: 4px;\n    background: #eee;\n    --color: #4af;\n    color: #333;\n    line-height: 40px;\n    text-align: center;\n}\n\n.cube .cube {\n    background: #ddd;\n    margin-left: 20px;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/templates/default.ts",
    "content": "import DEFAULT_CSS_TEMPLATE from \"!!raw-loader!./default.css\";\n\nexport { DEFAULT_CSS_TEMPLATE };\n"
  },
  {
    "path": "packages/react-moveable/stories/tests/GestoHelper.ts",
    "content": "export function mousedown(target: HTMLElement, [clientX, clientY]: number[]) {\n    const event = new MouseEvent(\"mousedown\", {\n        clientX,\n        clientY,\n    });\n    target.dispatchEvent(event);\n}\n\nexport function getMouseInit(startRect: { left: number, top: number }, offset: number[]) {\n    return {\n        buttons: 1,\n        screenX: startRect.left + offset[0],\n        screenY: startRect.top + offset[1],\n        clientX: startRect.left + offset[0],\n        clientY: startRect.top + offset[1],\n        offsetX: offset[0],\n        offsetY: offset[1],\n        bubbles: true,\n        cancelable: true,\n    };\n}\nexport function dispatchDrag(\n    target: HTMLElement,\n    offset: number[],\n    [distX, distY]: number[],\n    options: { duration: number, interval: number } = { duration: 50, interval: 5 },\n) {\n    const startRect = target.getBoundingClientRect();\n    const mousedown = new MouseEvent(\"mousedown\", getMouseInit(startRect, offset));\n    target.dispatchEvent(mousedown);\n\n    const count = Math.floor(options.duration / options.interval);\n    for (let i = 1; i <= count; ++i) {\n        dispatchMouseMove(target, getMouseInit(startRect, [\n            offset[0] + distX / count * i,\n            offset[1] + distY / count * i,\n        ]), options.interval * i);\n    }\n    return new Promise<void>(resolve => {\n        setTimeout(() => {\n            const mosueup = new MouseEvent(\"mouseup\", getMouseInit(startRect, [offset[0] + distX, offset[1] + distY]));\n\n            target.dispatchEvent(mosueup);\n            resolve();\n        }, options.duration);\n    });\n}\n\nexport async function dispatchMouseMove(target: HTMLElement, moustInit: any, time: number) {\n    setTimeout(() => {\n        const mousemove = new MouseEvent(\"mousemove\", moustInit);\n\n        target.dispatchEvent(mousemove);\n    }, time);\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/utils/story.tsx",
    "content": "/* eslint-disable no-empty */\n/* eslint-disable @typescript-eslint/no-var-requires */\n/* eslint-disable max-len */\nimport * as React from \"react\";\nimport { ReactFramework, StoryContext } from \"@storybook/react\";\nimport { ClientApi } from \"@storybook/client-api\";\n\nimport { convertReactTemplate, convertPath, makeArgs, convertTemplate } from \"../utils\";\nimport { DEFAULT_CSS_TEMPLATE } from \"../templates/default\";\nimport { getEntries, isFunction } from \"@daybrush/utils\";\n\n// production 모드거나, 실패시 true\ndeclare const SKIP_TEST: boolean;\n// test 여부\ndeclare const EXEC_TEST: boolean;\n\nexport interface StoryParameter {\n    app: any;\n    text?: string;\n    path?: string;\n    argsTypes?: Record<string, any>;\n    args?: Record<string, any>;\n    texts?: Record<string, any>;\n    play?: (context: StoryContext<ReactFramework>) => Promise<void> | void;\n}\n\nfunction makeProxyObject(\n    defaultValue: Record<string, any> = {},\n    setter?: (obj: Record<string, any>, prop: string, value: any) => any,\n): Record<string, any> {\n    const proxy = new Proxy({} as Record<string, any>, {\n        set(obj, prop, value) {\n            if (!setter?.(obj, prop as string, value)) {\n                obj[prop as string] = value;\n            }\n            return true;\n        },\n    });\n\n    getEntries(defaultValue).forEach(([key, value]) => {\n        proxy[key] = value;\n    });\n    return proxy;\n}\n\nexport function add(storyTitle: string, parameter: StoryParameter) {\n    const {\n        text,\n        argsTypes,\n        args,\n        path,\n        play,\n        app,\n    } = parameter;\n    const previews: any[] = [\n        {\n            tab: \"CSS\",\n            template: DEFAULT_CSS_TEMPLATE,\n            copy: true,\n            language: \"css\",\n        },\n    ];\n\n    // test라면 play가 없는 스토리는 전부 빈공백으로 표시\n    if (EXEC_TEST && !play) {\n        return function Empty() {\n            return null;\n        };\n    }\n\n    // test가 아니라면 code preview 표시\n    if (!EXEC_TEST && path) {\n        const filePath = path.replace(\"./stories/\", \"\");\n        const directory = filePath.replace(/\\/([^/]+)$/g, \"/\");\n        const fileName = filePath.replace(/\\S+\\/(\\S+)\\.\\S+$/g, \"$1\");\n        const reactCode = require(`!!raw-loader!@/stories/${filePath}`).default;\n\n        previews.unshift({\n            tab: \"React\",\n            template: convertReactTemplate(convertPath(reactCode)),\n            copy: true,\n            // codesandbox: DEFAULT_REACT_CODESANDBOX([\"react-moveable\"]),\n            language: \"tsx\",\n        });\n        // HTML\n        try {\n            const htmlCode = require(`!!raw-loader!@/stories/${directory}script/${fileName}/App.html`).default;\n\n            previews.push({\n                tab: \"Script\",\n                description: \"HTML\",\n                template: htmlCode,\n                copy: true,\n                language: \"html\",\n            });\n        } catch (e) {\n        }\n        // Script\n        try {\n            const scriptCode = require(`!!raw-loader!@/stories/${directory}script/${fileName}/App.js`).default;\n\n            previews.push({\n                tab: \"Script\",\n                description: \"JavaScript\",\n                template: convertTemplate(scriptCode, /\"\\$preview_([^\"]+)\"/g),\n                copy: true,\n                language: \"tsx\",\n            });\n        } catch (e) {\n        }\n        // Vue3\n        try {\n            const vueCode = require(`!!raw-loader!@/stories/${directory}vue3/${fileName}/App.vue`).default;\n\n            previews.push({\n                tab: \"Vue3\",\n                template: convertTemplate(vueCode, /\"\\$preview_([^\"]+)\"/g),\n                copy: true,\n                language: \"html\",\n            });\n        } catch (e) {\n        }\n        // Vue2\n        try {\n            const vueCode = require(`!!raw-loader!@/stories/${directory}vue2/${fileName}/App.vue`).default;\n\n            previews.push({\n                tab: \"Vue2\",\n                template: convertTemplate(vueCode, /\"\\$preview_([^\"]+)\"/g),\n                copy: true,\n                language: \"html\",\n            });\n        } catch (e) { }\n        // Svelte\n        try {\n            const svelteCode = require(`!!raw-loader!@/stories/${directory}svelte/${fileName}/App.svelte`).default;\n\n            previews.push({\n                tab: \"Svelte\",\n                template: convertTemplate(svelteCode, /\"\\$preview_([^\"]+)\"/g),\n                copy: true,\n                language: \"html\",\n            });\n        } catch (e) { }\n        // Angular html\n        try {\n            const angularCode = require(`!!raw-loader!@/stories/${directory}angular/${fileName}/App.component.html`).default;\n\n            previews.push({\n                tab: \"Angular\",\n                template: angularCode,\n                description: \"App.comoponent.html\",\n                copy: true,\n                language: \"tsx\",\n            });\n        } catch (e) { }\n        // Angular\n        try {\n            const angularCode = require(`!!raw-loader!@/stories/${directory}angular/${fileName}/App.ts`).default;\n\n            previews.push({\n                tab: \"Angular\",\n                template: convertTemplate(angularCode, /\"\\$preview_([^\"]+)\"/g),\n                description: \"App.comoponent.ts\",\n                copy: true,\n                language: \"tsx\",\n            });\n        } catch (e) { }\n        // Lit\n        try {\n            const litCode = require(`!!raw-loader!@/stories/${directory}lit/${fileName}/App.ts`).default;\n\n            previews.push({\n                tab: \"Lit\",\n                template: convertTemplate(litCode, /\"\\$preview_([^\"]+)\"/g),\n                copy: true,\n                language: \"tsx\",\n            });\n        } catch (e) { }\n    } else if (text) {\n        previews.unshift({\n            tab: \"React\",\n            template: convertReactTemplate(convertPath(text)),\n            // codesandbox: DEFAULT_REACT_CODESANDBOX([\"react-moveable\"]),\n            copy: true,\n            language: \"tsx\",\n        });\n    }\n\n    const func = function (this: any, props: any) {\n        const Component = app;\n\n        return <Component {...props} />;\n    };\n\n    func.storyName = storyTitle;\n    func.argTypes = argsTypes || {};\n    func.args = {\n        ...makeArgs(argsTypes || {}),\n        args,\n    };\n    func.parameters = {\n        preview: previews,\n    };\n\n    // dev에서만 표시\n    if (play) {\n        const clientApi = (window as any).__STORYBOOK_CLIENT_API__ as ClientApi<any>;\n        const facade = clientApi.facade;\n        const csfExports = facade.csfExports;\n        const allStories = facade.stories;\n\n        if (!SKIP_TEST) {\n            // dev mode or test mode\n            func.play = play;\n\n            type StoryFunction = ((...args: any[]) => any) & {\n                storyName: string;\n                play: any;\n                args: any;\n                argTypes: any;\n                parameters: any;\n                isSkip?: boolean;\n            };\n\n            if (!(\"__PROXY__\" in csfExports)) {\n                facade.csfExports = makeProxyObject({\n                    __PROXY__: () => { },\n                    ...csfExports,\n                }, (obj, prop, value) => {\n                    obj[prop] = makeProxyObject(value, (child, childProp, childValue: StoryFunction) => {\n                        if (!isFunction(childValue) || !childValue.play || childValue.isSkip) {\n                            return;\n                        }\n                        if (childValue.storyName.match(/Test$/g)) {\n                            return;\n                        }\n\n                        const copied = childValue.bind({}) as StoryFunction;\n\n                        copied.storyName = `${childValue.storyName} (original)`;\n                        copied.argTypes = childValue.argTypes;\n                        copied.args = childValue.args;\n                        copied.parameters = childValue.parameters;\n                        // copied.play = childValue.play;\n                        copied.isSkip = true;\n\n                        child[`${childProp}Original`] = copied;\n\n                        // childValue.play = null;\n                        childValue.isSkip = true;\n                        childValue.storyName = `${childValue.storyName} (test)`;\n                    });\n\n                    return true;\n                });\n                facade.stories = makeProxyObject(allStories, (obj, prop, value) => {\n                    if (value.name?.includes(\" (test)\")) {\n                        const id = `${prop}-original`;\n                        obj[`${prop}-original`] = {\n                            ...value,\n                            id,\n                            name: value.name.replace(\" (original)\", \" (test)\"),\n                        };\n                    }\n                });\n            }\n        } else if (!EXEC_TEST) {\n            // production mode\n            if (!(\"__PROXY__\" in csfExports)) {\n                facade.csfExports = makeProxyObject({\n                    __PROXY__: () => { },\n                    ...csfExports,\n                });\n                facade.stories = makeProxyObject(allStories, (obj, prop, value) => {\n                    if (value.name?.match(/Test$/g)) {\n                        return true;\n                    }\n                });\n            }\n        }\n    }\n\n    return func;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/utils/testing.tsx",
    "content": "import { average, getDist } from \"@daybrush/utils\";\n\nexport function wait(time = 100) {\n    return new Promise(resolve => {\n        setTimeout(resolve, time);\n    });\n}\n\nexport function mouseEventMock(\n    startRect: { left: number; top: number; },\n    offsetRect: number[]\n) {\n    return {\n        buttons: 1,\n        screenX: startRect.left + offsetRect[0],\n        screenY: startRect.top + offsetRect[1],\n        clientX: startRect.left + offsetRect[0],\n        clientY: startRect.top + offsetRect[1],\n        offsetX: offsetRect[0],\n        offsetY: offsetRect[1],\n        bubbles: true,\n        cancelable: true,\n    };\n}\n\nexport function rotate(options: {\n    duration?: number,\n    interval?: number,\n    target: HTMLElement,\n    start: number,\n    end: number,\n    baseTarget: HTMLElement,\n}) {\n    const {\n        target,\n        baseTarget,\n        start: startDeg,\n        end: endDeg = startDeg,\n    } = options;\n    const {\n        left,\n        top,\n        width,\n        height,\n    } = target.getBoundingClientRect();\n    const {\n        width: baseWidth,\n        height: baseHeight,\n        left: baseLeft,\n        top: baseTop,\n    } = baseTarget.getBoundingClientRect();\n\n    const origin = [\n        baseLeft + baseWidth / 2,\n        baseTop + baseHeight / 2,\n    ];\n\n    const dist = getDist([\n        left + width / 2,\n        top + height / 2,\n    ], origin);\n\n    return userAction({\n        ...options,\n        calc: (index, count) => {\n            const progress = index ? index / count : 0;\n            const nextDeg = (startDeg + (endDeg - startDeg) * progress) / 180 * Math.PI;\n\n            return [\n                [\n                    origin[0] + Math.sin(nextDeg) * dist - left,\n                    origin[1] - Math.cos(nextDeg) * dist - top,\n                ],\n            ];\n        },\n    });\n}\n\nexport function pinch(options: {\n    duration?: number,\n    interval?: number,\n    target: HTMLElement,\n    start?: number[],\n    end?: number[],\n    startOffset?: number[],\n    endOffset: number[],\n}) {\n    const {\n        start = [0, 0],\n        end = start,\n        startOffset = [0, 0],\n        endOffset,\n    } = options;\n    return userAction({\n        isTouch: true,\n        ...options,\n        calc: (index, count) => {\n            if (index === 0) {\n                return [\n                    [start[0] + startOffset[0], start[1] + startOffset[1]],\n                    [start[0] - startOffset[0], start[1] - startOffset[1]],\n                ];\n            } else if (index === count) {\n                return [\n                    [end[0] + endOffset[0], end[1] + endOffset[1]],\n                    [end[0] - endOffset[0], end[1] - endOffset[1]],\n                ];\n            }\n\n            const center = [\n                start[0] + (end[0] - start[0]) / count * index,\n                start[1] + (end[1] - start[1]) / count * index,\n            ];\n            const centerOffset = [\n                startOffset[0] + (endOffset[0] - startOffset[0]) / count * index,\n                startOffset[1] + (endOffset[1] - startOffset[1]) / count * index,\n            ];\n            return [\n                [\n                    center[0] + centerOffset[0],\n                    center[1] + centerOffset[1],\n                ],\n                [\n                    center[0] - centerOffset[0],\n                    center[1] - centerOffset[1],\n                ],\n            ];\n        },\n    });\n}\nexport function pan(options: {\n    duration?: number,\n    interval?: number,\n    target: HTMLElement,\n    start: number[],\n    end?: number[],\n    isTouch?: boolean;\n}) {\n    const {\n        start,\n        end = start,\n    } = options;\n    return userAction({\n        ...options,\n        calc: (index, count) => {\n            if (index === 0) {\n                return [start];\n            } else if (index === count) {\n                return [end];\n            }\n\n            return [[\n                start[0] + (end[0] - start[0]) / count * index,\n                start[1] + (end[1] - start[1]) / count * index,\n            ]];\n        },\n    });\n}\n\nexport function mouseEventMocks(startRect: DOMRect, poses: number[][]) {\n    return poses.map(pos => mouseEventMock(startRect, pos));\n}\nexport function getCenterEventMock(startRect: DOMRect, clients: Array<{ offsetX: number; offsetY: number; }>) {\n    const centerPos = [\n        average(clients.map(client => client.offsetX)),\n        average(clients.map(client => client.offsetY)),\n    ];\n    return mouseEventMock(startRect, centerPos);\n}\n\nfunction getMockEvent(eventType: string, startRect: DOMRect, poses: number[][]) {\n    const isTouch = eventType.includes(\"touch\");\n    const moveClients = mouseEventMocks(startRect, poses);\n    const moveClient = getCenterEventMock(startRect, moveClients);\n\n    const event = new MouseEvent(eventType, moveClient);\n    if (isTouch) {\n        (event as any).touches = moveClients;\n    }\n    return event;\n}\nexport function userAction(options: {\n    duration?: number,\n    interval?: number,\n    target: HTMLElement,\n    calc: (index: number, count: number) => number[][],\n    isTouch?: boolean\n}) {\n    const {\n        duration = 0,\n        interval = duration,\n        target,\n        calc,\n        isTouch,\n    } = options;\n    const startRect = target.getBoundingClientRect();\n    const count = duration ? Math.floor(duration / interval) : 0;\n    const startEvent = getMockEvent(isTouch ? \"touchstart\" : \"mousedown\", startRect, calc(0, count));\n\n    if (isTouch) {\n        (startEvent as any).changedTouches = (startEvent as any).touches;\n    }\n\n    // start\n    target.dispatchEvent(startEvent);\n\n    // pan\n    for (let i = 1; i <= count; ++i) {\n        setTimeout(() => {\n            const moveEvent = getMockEvent(isTouch ? \"touchmove\" : \"mousemove\", startRect, calc(i, count));\n\n            target.dispatchEvent(moveEvent);\n        }, interval * i);\n    }\n\n    // end\n    return new Promise<void>(resolve => {\n        setTimeout(() => {\n            const endEvent = getMockEvent(isTouch ? \"touchend\" : \"mouseup\", startRect, calc(count, count));\n\n            target.dispatchEvent(endEvent);\n            resolve();\n        }, options.duration);\n    });\n}\n\nexport function findMoveable(canasElement: HTMLElement) {\n    return canasElement.querySelector<HTMLElement>(\".moveable-control-box\")!;\n}\n"
  },
  {
    "path": "packages/react-moveable/stories/utils.ts",
    "content": "export function makeLink(ableName: string, property: string, ) {\n    return `<a href=\"https://daybrush.com/moveable/release/latest/doc/Moveable.${ableName}.html#${property}\" target=\"_blank\">See API</a>`;\n}\nexport function makeOptionLink(ableName: string, option: string, property: string) {\n    return `<a href=\"https://daybrush.com/moveable/release/latest/doc/Moveable.${ableName}.html#.${option}-${property}\" target=\"_blank\">See API</a>`;\n}\n\nexport function makeArgType(param: {\n    type: \"array\" | \"text\" | \"radio\" | \"object\" | \"number\" | \"boolean\" | \"inline-radio\";\n    description?: string;\n    defaultValue: any;\n    value?: any;\n    category?: string;\n    control?: Record<string, any>;\n    table?: Record<string, any>;\n}) {\n    return {\n        control: param.type,\n        ...(param.control || {}),\n        table: {\n            defaultValue: { summary: param.defaultValue },\n            category: param.category,\n            ...(param.table || {}),\n        },\n        description: param.description,\n        value: \"value\" in param ? param.value : param.defaultValue,\n    };\n}\nexport function makeArgs(argTypes: any) {\n    return Object.keys(argTypes).reduce((prev, cur) => {\n        prev[cur] = argTypes[cur].value;\n\n        return prev;\n    }, {} as Record<string, any>);\n}\n\nexport function convertPath(text: string, findName: string = \"react-moveable\", moduleName = findName) {\n    let nextText = text.replace(new RegExp(`\"[a-zA-Z0-9./_-]*${findName}[a-zA-Z0-9./_-]*\"`, \"g\"), `\"${moduleName}\"`);\n    nextText = nextText.replace(new RegExp(`'[a-zA-Z0-9./_-]*${findName}[a-zA-Z0-9./_-]*'`, \"g\"), `'${moduleName}'`);\n\n    return nextText;\n}\n\nexport function convertVanillaTemplate(text: string) {\n    let previewText = text.replace(/\\n^export[^\\n]*$/mg, \"\");\n\n    previewText = previewText.replace(/\\s*return grid;\\n\\}$/mg, \"\");\n    previewText = previewText.replace(/^[ ]{2}/mg, \"\");\n\n    return convertTemplate(previewText);\n}\nexport function convertVueTemplate(text: string) {\n    let previewText = text.replace(\"props:\", \"data:\");\n\n    previewText = previewText.replace(/\\[(\\s*\"([^\"]+)\",\\s*)+\\]/g, (...args) => {\n        return args[0].replace(\"[\", \"{\").replace(\"]\", \"}\").replace(/\"([^\"]+)\"/g, (_, name) => {\n            return `${name}: ${name}`;\n        });\n    });\n    return convertTemplate(previewText, /([a-zA-Z_0-9]+):\\s([a-zA-Z_0-9]+),/g, true);\n}\n\nexport function convertSvelteTemplate(text: string) {\n    const previewText = text.replace(/export let ([a-zA-Z_0-9]+);/g, \"const $1 = $1;\");\n\n    return convertTemplate(previewText, /([a-zA-Z_0-9]+) = ([a-zA-Z_0-9]+);/g, true);\n}\n\nexport function convertAngularTemplate(text: string) {\n    const previewText = text.replace(/@Input\\(\\) ([a-zA-Z_0-9]+): any;/g, \"$1 = $1;\");\n\n    return convertTemplate(previewText, /([a-zA-Z_0-9]+) = ([a-zA-Z_0-9]+);/g, true);\n}\nexport function convertReactTemplate(text: string) {\n    const previewText = text.replace(/@\\//g, \"\");\n\n    return convertTemplate(previewText);\n}\n\nexport function convertTemplate(text: string, regex = /props\\.([a-zA-Z0-9_]+)/g, includePrefix = false) {\n    const previewText = text.replace(/App\\([^)]*\\)/g, \"App()\");\n    let result: RegExpExecArray | null;\n    let index = 0;\n\n    const strings: string[] = [];\n    const values: string[] = [];\n\n    // eslint-disable-next-line no-cond-assign\n    while (result = regex.exec(previewText)) {\n        const nextIndex = result.index + (includePrefix ? result[0].lastIndexOf(result[2]) : 0);\n\n        strings.push(previewText.slice(index, nextIndex));\n        values.push(result[1]);\n        index = nextIndex + (includePrefix ? result[2].length : result[0].length);\n    }\n\n    strings.push(previewText.slice(index));\n    return [strings, values];\n}\n"
  },
  {
    "path": "packages/react-moveable/tests/types.ts",
    "content": "import {\n    DraggableEvents, ResizableEvents,\n    ScalableEvents, RotatableEvents, DraggableOptions,\n    ResizableOptions, ScalableOptions, RotatableOptions, WarpableOptions,\n    WarpableEvents, GroupableOptions, SnappableEvents, SnappableOptions,\n    RenderableEvents, ClickableEvents, RoundableEvents, RoundableOptions,\n    ClippableOptions, ClippableEvents, OriginDraggableEvents,\n    DefaultOptions,\n    DragAreaOptions, PinchableOptions, PinchableEvents, ScrollableEvents,\n    ScrollableOptions,\n\n    OriginOptions,\n    PaddingOptions, OriginDraggableOptions,\n    MoveableOptions, BeforeRenderableEvents, ClickableOptions, MoveableEvents, MoveableDefaultEvents,\n} from \"../src\";\n\nimport Draggable from \"../src/ables/Draggable\";\nimport Resizable from \"../src/ables/Resizable\";\nimport Scalable from \"../src/ables/Scalable\";\nimport Rotatable from \"../src/ables/Rotatable\";\nimport Warpable from \"../src/ables/Warpable\";\nimport Groupable from \"../src/ables/Groupable\";\nimport Snappable from \"../src/ables/Snappable\";\nimport Default from \"../src/ables/Default\";\nimport DragArea from \"../src/ables/DragArea\";\nimport Roundable from \"../src/ables/Roundable\";\nimport Clippable from \"../src/ables/Clippable\";\nimport OriginDraggable from \"../src/ables/OriginDraggable\";\nimport Pinchable from \"../src/ables/Pinchable\";\nimport Scrollable from \"../src/ables/Scrollable\";\nimport Origin from \"../src/ables/Origin\";\nimport Padding from \"../src/ables/Padding\";\nimport Renderable from \"../src/ables/Renderable\";\nimport BeforeRenderable from \"../src/ables/BeforeRenderable\";\nimport Clickable from \"../src/ables/Clickable\";\n\ntype MatchTypes<\n    T extends { [key in keyof Required<E>]: any },\n    E extends  { [key in keyof Required<T>]: any },\n> = any;\n// type Writable<T> = { -readonly [key in keyof T]: any };\n\ntype PropsTester<Able extends { props: readonly string[] }, Props extends Record<string, any> = MoveableOptions> = {\n    -readonly [key in Able[\"props\"][number]]: Props[key];\n};\ntype EventsTester<Able extends { events: readonly string[] }, Events extends Record<string, any> = MoveableEvents> = {\n    -readonly [key in Able[\"events\"][number] as `on${Capitalize<key>}`]: Events[key];\n};\n\ninterface EmptyOptions { }\n\nexport type TestProps = [\n    MatchTypes<PropsTester<typeof Default>, Required<DefaultOptions>>,\n    MatchTypes<PropsTester<typeof DragArea>, Required<DragAreaOptions>>,\n    MatchTypes<PropsTester<typeof Padding>, Required<PaddingOptions>>,\n    MatchTypes<PropsTester<typeof Draggable>, Required<DraggableOptions>>,\n    MatchTypes<PropsTester<typeof OriginDraggable>, Required<OriginDraggableOptions>>,\n    MatchTypes<PropsTester<typeof Pinchable>, Required<PinchableOptions>>,\n    MatchTypes<PropsTester<typeof Origin>, Required<OriginOptions>>,\n    MatchTypes<PropsTester<typeof Clickable>, Required<ClickableOptions>>,\n    MatchTypes<PropsTester<typeof Renderable>, Required<EmptyOptions>>,\n    MatchTypes<PropsTester<typeof BeforeRenderable>, Required<EmptyOptions>>,\n    MatchTypes<PropsTester<typeof Scrollable>, Required<ScrollableOptions>>,\n    MatchTypes<PropsTester<typeof Scalable>, Required<ScalableOptions>>,\n    MatchTypes<PropsTester<typeof Resizable>, Required<ResizableOptions>>,\n    MatchTypes<PropsTester<typeof Origin>, Required<OriginOptions>>,\n    MatchTypes<PropsTester<typeof Rotatable>, Required<RotatableOptions>>,\n    MatchTypes<PropsTester<typeof Warpable>, Required<WarpableOptions>>,\n    MatchTypes<PropsTester<typeof Groupable>, Required<GroupableOptions>>,\n    MatchTypes<PropsTester<typeof Clippable>, Required<ClippableOptions>>,\n    MatchTypes<PropsTester<typeof Snappable>, Required<SnappableOptions>>,\n    MatchTypes<PropsTester<typeof Roundable>, Required<RoundableOptions>>,\n];\n\nexport type TestProps2 = [\n    MatchTypes<EventsTester<typeof Default>, Required<MoveableDefaultEvents>>,\n    MatchTypes<EventsTester<typeof DragArea>, Required<ClickableEvents>>,\n    MatchTypes<EventsTester<typeof Padding>, Required<EmptyOptions>>,\n    MatchTypes<EventsTester<typeof Draggable>, Required<DraggableEvents>>,\n    MatchTypes<EventsTester<typeof OriginDraggable>, Required<OriginDraggableEvents>>,\n    MatchTypes<EventsTester<typeof Pinchable>, Required<PinchableEvents>>,\n    MatchTypes<EventsTester<typeof Origin>, Required<EmptyOptions>>,\n    MatchTypes<EventsTester<typeof Clickable>, Required<ClickableEvents>>,\n    MatchTypes<EventsTester<typeof Renderable>, Required<RenderableEvents>>,\n    MatchTypes<EventsTester<typeof BeforeRenderable>, Required<BeforeRenderableEvents>>,\n    MatchTypes<EventsTester<typeof Scrollable>, Required<ScrollableEvents>>,\n    MatchTypes<EventsTester<typeof Scalable>, Required<ScalableEvents>>,\n    MatchTypes<EventsTester<typeof Resizable>, Required<ResizableEvents>>,\n    MatchTypes<EventsTester<typeof Origin>, Required<EmptyOptions>>,\n    MatchTypes<EventsTester<typeof Rotatable>, Required<RotatableEvents>>,\n    MatchTypes<EventsTester<typeof Warpable>, Required<WarpableEvents>>,\n    MatchTypes<EventsTester<typeof Groupable>, Required<EmptyOptions>>,\n    MatchTypes<EventsTester<typeof Clippable>, Required<ClippableEvents>>,\n    MatchTypes<EventsTester<typeof Snappable>, Required<SnappableEvents>>,\n    MatchTypes<EventsTester<typeof Roundable>, Required<RoundableEvents>>,\n];\n"
  },
  {
    "path": "packages/react-moveable/tsconfig.build.json",
    "content": "{\n    \"extends\": \"./tsconfig\",\n    \"compilerOptions\": {\n      \"jsx\": \"react\"\n    },\n  }\n"
  },
  {
    "path": "packages/react-moveable/tsconfig.declaration.json",
    "content": "{\n    \"extends\": \"./tsconfig\",\n    \"compilerOptions\": {\n        \"allowJs\": false,\n        \"noEmit\": false,\n        \"isolatedModules\": false,\n        \"removeComments\": false,\n        \"declaration\": true,\n        \"emitDeclarationOnly\": true,\n        \"declarationDir\": \"declaration\"\n    },\n    \"include\": [\n        \"./src/**/*\"\n    ]\n}\n"
  },
  {
    "path": "packages/react-moveable/tsconfig.json",
    "content": "{\n    \"compilerOptions\": {\n        \"outDir\": \"./outjs/\",\n        \"esModuleInterop\": false,\n        \"sourceMap\": true,\n        \"module\": \"esnext\",\n        \"target\": \"es5\",\n        \"experimentalDecorators\": true,\n        \"skipLibCheck\": true,\n        \"moduleResolution\": \"node\",\n        \"jsx\": \"preserve\",\n        \"lib\": [\n            \"es2019\",\n            \"es2015\",\n            \"dom\"\n        ],\n        \"allowJs\": true,\n        \"downlevelIteration\": true,\n        \"allowSyntheticDefaultImports\": true,\n        \"strict\": true,\n        \"strictNullChecks\": true,\n        \"forceConsistentCasingInFileNames\": true,\n        \"resolveJsonModule\": true,\n        \"isolatedModules\": true,\n        \"noEmit\": true,\n        \"baseUrl\": \".\",\n        \"paths\": {\n            \"@/stories/*\": [\n                \"./stories/*\"\n            ],\n            \"@/react-moveable\": [\n                \"./src/\"\n            ],\n            \"@moveable/helper\": [\n                \"../helper/src/\"\n            ]\n        }\n    },\n    \"include\": [\n        \"./src/**/*.ts\",\n        \"./src/**/*.tsx\",\n        \"./test/**/*.ts\",\n        \"./test/**/*.tsx\",\n        \"./global.d.ts\",\n        \"./stories/**/*.ts\",\n        \"./stories/**/*.tsx\"\n    ],\n    \"exclude\": [\n        \"./stories/**/angular/**/*.ts\",\n        \"./stories/**/lit/**/*.ts\"\n    ]\n}\n"
  },
  {
    "path": "packages/react-moveable/tsconfig.test.json",
    "content": "{\n    \"extends\": \"./tsconfig\",\n    \"compilerOptions\": {\n      \"jsx\": \"react\",\n      \"noEmit\": true\n    },\n    \"include\": [\n      \"./tests/**/*.ts\",\n      \"./tests/**/*.tsx\"\n    ]\n  }\n"
  },
  {
    "path": "packages/react-moveable/types/index.js",
    "content": ""
  },
  {
    "path": "packages/react-moveable/types/package.json",
    "content": "{\n    \"name\": \"react-moveable/types\",\n    \"private\": true,\n    \"main\": \"./index.js\",\n    \"module\": \"./index.js\",\n    \"typings\": \"../declaration/externalTypes.d.ts\",\n    \"types\": \"../declaration/externalTypes.d.ts\",\n    \"sideEffects\": false\n  }\n"
  },
  {
    "path": "packages/snappable/.eslintrc",
    "content": "{\n    \"root\": true,\n    \"parser\": \"@typescript-eslint/parser\",\n    \"plugins\": [\n        \"@typescript-eslint\",\n        \"import\"\n    ],\n    \"extends\": [\n        \"eslint:recommended\",\n        \"plugin:@typescript-eslint/eslint-recommended\",\n        \"plugin:@typescript-eslint/recommended\",\n        \"plugin:react/recommended\"\n    ],\n    \"rules\": {\n        \"import/no-webpack-loader-syntax\": \"off\",\n        \"no-unused-vars\": \"off\",\n        \"no-console\": \"error\",\n        \"no-shadow\": \"error\",\n        \"@typescript-eslint/no-var-requires\": \"off\",\n        \"@typescript-eslint/no-unused-vars\": [\"error\"],\n        \"@typescript-eslint/explicit-module-boundary-types\": \"off\",\n        \"@typescript-eslint/no-explicit-any\": \"off\",\n        \"@typescript-eslint/no-non-null-assertion\": \"off\",\n        \"@typescript-eslint/no-empty-interface\": \"off\",\n        \"@typescript-eslint/ban-types\": \"off\",\n        \"indent\": [\"error\", 4],\n        \"@typescript-eslint/indent\": \"off\",\n        \"@typescript-eslint/adjacent-overload-signatures\": \"off\",\n        \"max-len\": [\"error\", { \"code\": 120, \"comments\": 400, \"ignoreTemplateLiterals\": true }],\n        \"@typescript-eslint/naming-convention\": [\n            \"error\",\n            { \"selector\": \"default\", \"modifiers\": [\"protected\"], \"format\": [\"camelCase\"], \"leadingUnderscore\": \"require\" },\n            { \"selector\": \"default\", \"modifiers\": [\"private\"], \"format\": [\"camelCase\"], \"leadingUnderscore\": \"require\" }\n        ],\n        \"no-empty-interface\": \"off\",\n        \"comma-dangle\": [\n            \"error\",\n            \"always-multiline\"\n        ],\n        \"semi\": [\n            \"error\",\n            \"always\"\n        ]\n    }\n}\n"
  },
  {
    "path": "packages/snappable/jest.config.js",
    "content": "module.exports = {\n    \"roots\": [\n        \"<rootDir>\",\n    ],\n    \"transform\": {\n        \"^.+\\\\.tsx?$\": \"ts-jest\",\n    },\n    \"testMatch\": [\"<rootDir>/test/**/*.spec.ts\"],\n    // \"testRegex\": \"spec\\\\.ts$\",\n    \"moduleFileExtensions\": [\n        \"ts\",\n        \"tsx\",\n        \"js\",\n        \"jsx\",\n        \"json\",\n        \"node\",\n    ],\n};\n"
  },
  {
    "path": "packages/snappable/manual/index.html",
    "content": "<style>\n    canvas {\n        width: 1000px;\n        height: 1000px;\n    }\n</style>\n<canvas width=\"1000\" height=\"1000\"></canvas>\n<script src=\"../../../../overlap-area/dist/overlap-area.js\"></script>\n<script>\n    const canvas = document.querySelector(\"canvas\");\n    const ctx = canvas.getContext(\"2d\");\n\n    // Start a new path\n\n    const points1 = [\n        [150, 100],\n        [200, 50],\n        [250, 60],\n        [300, 100],\n        [250, 160],\n        [150, 150],\n        // [200, 120],\n    ];\n    const points2 = [\n        [100, 100],\n        [350, 100],\n        [350, 120],\n        [100, 120],\n        // [250, 100],\n        // [300, 50],\n        // [350, 60],\n        // [400, 100],\n        // [350, 160],\n        // [250, 150],\n        // [300, 120],\n    ];\n    function fillRect(points, color) {\n        ctx.beginPath();\n        points.forEach((point, i) => {\n            if (i === 0) {\n                ctx.moveTo(point[0], point[1]);\n            } else {\n                ctx.lineTo(point[0], point[1]);\n            }\n        });\n        ctx.fillStyle = color;\n        ctx.fill();\n        ctx.stroke();\n    }\n\n    fillRect(points1, \"#ffaaaaaa\");\n    fillRect(points2, \"#aaffaaaa\");\n\n    // console.log(OverlapArea.isInside([100, 100], [[0, 0], [200, 0], [200, 200], [0, 200]]))\n    // console.log(OverlapArea.isInside(points2[0], points1))\n\n    const points3 = OverlapArea.getOverlapPoints(points1, points2);\n    OverlapArea.getUnoverlapAreas(points2, points1);\n    console.log(points3);\n    fillRect(points3, \"#aaaaffaa\");\n</script>\n"
  },
  {
    "path": "packages/snappable/package.json",
    "content": "{\n    \"name\": \"snappable\",\n    \"version\": \"0.0.1\",\n    \"description\": \"snappable\",\n    \"private\": true,\n    \"scripts\": {\n        \"start\": \"rollup -c -w\",\n        \"build\": \"rm -rf ./dist ./declaration && rollup -c && npm run declaration\",\n        \"declaration\": \"rm -rf declaration && tsc -p tsconfig.declaration.json\",\n        \"lint\": \"eslint ./src/ --ext .ts\",\n        \"test\": \"jest --watchAll\",\n        \"coverage\": \"npm run test:node && jest --coverage && print-coveralls --sort=desc\"\n    },\n    \"keywords\": [\n        \"moveable\",\n        \"resizable\",\n        \"scalable\",\n        \"draggable\",\n        \"rotatable\",\n        \"warpable\",\n        \"pinchable\",\n        \"groupable\",\n        \"snappable\",\n        \"scrollable\",\n        \"movable\",\n        \"throttle\",\n        \"scroll\",\n        \"ratio\",\n        \"dom\",\n        \"resize\",\n        \"scale\",\n        \"drag\",\n        \"move\",\n        \"rotate\",\n        \"react\",\n        \"warp\",\n        \"snap\",\n        \"pinch\",\n        \"react\"\n    ],\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/daybrush/moveable/blob/master/packages/snappable\"\n    },\n    \"author\": \"Daybrush\",\n    \"license\": \"MIT\",\n    \"bugs\": {\n        \"url\": \"https://github.com/daybrush/moveable/issues\"\n    },\n    \"homepage\": \"https://daybrush.com/moveable\",\n    \"devDependencies\": {\n        \"@types/jest\": \"^24.0.13\",\n        \"@typescript-eslint/eslint-plugin\": \"^3.9.1\",\n        \"@typescript-eslint/parser\": \"^3.9.1\",\n        \"eslint\": \"^7.32.0\",\n        \"eslint-plugin-import\": \"^2.22.1\",\n        \"eslint-plugin-react\": \"^7.22.0\",\n        \"jest\": \"^24.8.0\",\n        \"print-coveralls\": \"^1.2.2\",\n        \"ts-jest\": \"^24.0.2\",\n        \"typescript\": \"^4.8 <4.9\"\n    },\n    \"dependencies\": {\n        \"@daybrush/utils\": \"^1.13.0\",\n        \"overlap-area\": \"^1.1.0\"\n    }\n}\n"
  },
  {
    "path": "packages/snappable/rollup.config.js",
    "content": "const builder = require(\"@daybrush/builder\");\n\nconst defaultOptions = {\n    tsconfig: \"tsconfig.build.json\",\n    typescript2: true,\n};\n\nmodule.exports = builder([{\n    ...defaultOptions,\n    input: \"src/index.ts\",\n    output: \"./dist/snappable.esm.js\",\n    format: \"es\",\n    exports: \"named\",\n},\n{\n    ...defaultOptions,\n    input: \"src/index.umd.ts\",\n    output: \"./dist/snappable.esm.js\",\n    format: \"es\",\n    exports: \"default\",\n    name: \"Snappable\",\n},\n{\n    ...defaultOptions,\n    input: \"src/index.umd.ts\",\n    output: \"./dist/snappable.cjs.js\",\n    format: \"cjs\",\n    exports: \"default\",\n},\n]);\n"
  },
  {
    "path": "packages/snappable/src/BoundLine.ts",
    "content": "import { SnappableLine } from \"./types\";\nimport { solveConstantsOffset, solveLineConstants } from \"./utils\";\n\n\nexport class BoundLine {\n    private _constants!: [number, number, number];\n    constructor(public type: \"up\" | \"down\", public line: SnappableLine) {}\n    public get a() {\n        return this[0];\n    }\n    public get b() {\n        return this[1];\n    }\n    public get c() {\n        return this[2];\n    }\n    public get slope() {\n        return -this.a / this.b;\n    }\n    public get 0() {\n        return this.constants[0];\n    }\n    public get 1() {\n        return this.constants[1];\n    }\n    public get 2() {\n        return this.constants[2];\n    }\n    public get constants() {\n        if (!this._constants) {\n            this._constants = solveLineConstants(this.line);\n        }\n        return this._constants;\n    }\n    public getOffset(pos: number[]) {\n        return solveConstantsOffset(this.constants, pos);\n    }\n}\n"
  },
  {
    "path": "packages/snappable/src/Snappable.ts",
    "content": "import { BoundLine } from \"./BoundLine\";\nimport { SnappableBoundLine, SnappableLine } from \"./types\";\nimport { groupBy, solveConstantsOffset, solveLineConstants } from \"./utils\";\n\nexport class Snappable {\n    private _snaps: SnappableLine[] = [];\n    private _bounds: BoundLine[] = [];\n    private _innerBounds: SnappableLine[] = [];\n    constructor() {\n\n    }\n    public move(lines: SnappableLine[], dist: number[]) {\n\n    }\n    public addBoundLine(lines: SnappableBoundLine[]) {\n        lines.forEach(line => {\n            this._bounds.push(line);\n        })\n    }\n    public checkBounds(lines: SnappableLine[]) {\n        const bounds = this._bounds;\n\n\n        groupBy(bounds, boundLine => boundLine.slope).forEach(boundLines => {\n            boundLines.forEach(boundLine => {\n                const type = boundLine.type;\n                const isIncrease = type === \"up\"\n\n                lines.forEach(line => {\n                    [line.point1, line.point2].forEach(point => {\n                        const offset = boundLine.getOffset(point);\n                    });\n                });\n            });\n        });\n    }\n}\n"
  },
  {
    "path": "packages/snappable/src/types.ts",
    "content": "export interface SnappableOptions {\n\n}\n\nexport interface SnappableLine {\n    point1: number[];\n    point2: number[];\n}\n\nexport interface SnappableBoundLine extends SnappableLine {\n    /**\n     * \"up\" if above or to the left of the line's slope,\n     * \"down\" if below or to the right of the line\n     */\n    type: \"up\" | \"down\";\n}\n"
  },
  {
    "path": "packages/snappable/src/utils.ts",
    "content": "import { throttle } from \"@daybrush/utils\";\nimport { TINY_NUM } from \"@daybrush/utils\";\nimport { SnappableLine } from \"./types\";\n\n\nexport function groupBy<T>(arr: T[], func: (el: T, index: number, arr: T[]) => any) {\n    const groups: T[][] = [];\n    const groupKeys: any[] = [];\n\n    arr.forEach((el, index) => {\n        const groupKey = func(el, index, arr);\n        const keyIndex = groupKeys.indexOf(groupKey);\n        const group = groups[keyIndex] || [];\n\n        if (keyIndex === -1) {\n            groupKeys.push(groupKey);\n            groups.push(group);\n        }\n        group.push(el);\n    });\n    return groups;\n}\n\nexport function solveLineConstants(line: SnappableLine): [number, number, number] {\n    const { point1, point2 } = line;\n    let dx = point2[0] - point1[0];\n    let dy = point2[1] - point1[1];\n\n    if (Math.abs(dx) < TINY_NUM) {\n        dx = 0;\n    }\n    if (Math.abs(dy) < TINY_NUM) {\n        dy = 0;\n    }\n\n    // b > 0\n    // ax + by + c = 0\n    let a = 0;\n    let b = 0;\n    let c = 0;\n\n    if (!dx && !dy) {\n\n    }\n    if (!dx) {\n        if (dy) {\n            // -x + 1 = 0\n            a = -1;\n            c = point1[0];\n        }\n    } else if (!dy) {\n        // y - 1 = 0\n        b = 1;\n        c = -point1[1];\n    } else {\n        // y = -a(x - x1) + y1\n        // ax + y + a * x1 - y1 = 0\n        a = -dy / dx;\n        b = 1;\n        c = a * point1[0] - point1[1];\n    }\n\n    return [a, b, c].map(v => throttle(v, TINY_NUM)) as [number, number, number];\n}\nexport function solveLineDistance(\n    line: SnappableLine,\n    pos: number[],\n) {\n    return solveConstantsDistance(\n        solveLineConstants(line),\n        pos,\n    );\n}\n\nexport function solveConstantsDistance(\n    [a, b, c]: [number, number, number],\n    pos: number[],\n) {\n    return (a * pos[0] + b * pos[1] + c) / (a * a + b * b);\n}\nexport function solveConstantsOffset(\n    [a, b, c]: [number, number, number],\n    [x, y]: number[],\n) {\n    let offsetX = 0;\n    let offsetY = 0;\n\n    // ax + by + c\n\n    if (!a) {\n        // y = -c / b (by + c = 0)\n        offsetY = y + c / b;\n    } else if (!b) {\n        // x = -c / a (ax + c = 0)\n        offsetX = x + c / a;\n    } else {\n        // y = -a/bx - c / b\n        offsetY = y + a / b * x + c / b;\n        // x = -b/ay - c / a\n        offsetX = x + b / a * y + c / a;\n    }\n\n    return [offsetX, offsetY];\n}\n"
  },
  {
    "path": "packages/snappable/test/bounds.spec.ts",
    "content": "import { Snappable } from \"src/Snappable\";\nimport { } from \"overlap-area\";\ndescribe(\"aa\", () => {\n    it(\"aa\", () => {\n        const points1 = [\n            [0, 0],\n        ]\n        getOverlapPoints\n    });\n});\n"
  },
  {
    "path": "packages/snappable/tsconfig.build.json",
    "content": "{\n    \"extends\": \"./tsconfig\",\n    \"compilerOptions\": {\n      \"jsx\": \"react\"\n    },\n  }\n"
  },
  {
    "path": "packages/snappable/tsconfig.declaration.json",
    "content": "{\n    \"extends\": \"./tsconfig\",\n    \"compilerOptions\": {\n        \"allowJs\": false,\n        \"noEmit\": false,\n        \"isolatedModules\": false,\n        \"removeComments\": false,\n        \"declaration\": true,\n        \"emitDeclarationOnly\": true,\n        \"declarationDir\": \"declaration\"\n    },\n    \"include\": [\n        \"./src/**/*\"\n    ]\n}\n"
  },
  {
    "path": "packages/snappable/tsconfig.json",
    "content": "{\n    \"compilerOptions\": {\n        \"outDir\": \"./outjs/\",\n        \"esModuleInterop\": false,\n        \"sourceMap\": true,\n        \"module\": \"esnext\",\n        \"target\": \"es5\",\n        \"experimentalDecorators\": true,\n        \"skipLibCheck\": true,\n        \"moduleResolution\": \"node\",\n        \"jsx\": \"preserve\",\n        \"lib\": [\n            \"es2019\",\n            \"es2015\",\n            \"dom\"\n        ],\n        \"allowJs\": true,\n        \"allowSyntheticDefaultImports\": true,\n        \"strict\": true,\n        \"strictNullChecks\": true,\n        \"forceConsistentCasingInFileNames\": true,\n        \"resolveJsonModule\": true,\n        \"isolatedModules\": false,\n        \"noEmit\": true,\n        \"baseUrl\": \".\",\n    },\n    \"include\": [\n        \"./src/**/*.ts\",\n        \"./src/**/*.tsx\",\n        \"./test/**/*.ts\",\n        \"./test/**/*.tsx\"\n    ]\n}\n"
  },
  {
    "path": "packages/snappable/tsconfig.test.json",
    "content": "{\n    \"extends\": \"./tsconfig\",\n    \"compilerOptions\": {\n      \"module\": \"commonjs\",\n      \"noImplicitAny\": false,\n      \"jsx\": \"react\",\n      \"types\": [\n        \"karma-chai\",\n        \"mocha\"\n      ],\n      \"strict\": false,\n      \"strictNullChecks\": false,\n      \"forceConsistentCasingInFileNames\": false,\n      \"resolveJsonModule\": false,\n      \"isolatedModules\": false,\n      \"noEmit\": false,\n      \"allowUnreachableCode\": true,\n      \"allowUnusedLabels\": true\n    },\n    \"include\": [\n      \"./src/**/*.ts\",\n      \"./test/**/*.ts\",\n      \"./test/**/*.tsx\"\n    ]\n  }\n"
  },
  {
    "path": "packages/svelte-moveable/.gitignore",
    "content": ".DS_Store\nnode_modules\n/build\n/dist\n/.svelte-kit\n/package\n.env\n.env.*\n!.env.example\nvite.config.js.timestamp-*\nvite.config.ts.timestamp-*\n"
  },
  {
    "path": "packages/svelte-moveable/.npmrc",
    "content": "engine-strict=true\nresolution-mode=highest\n"
  },
  {
    "path": "packages/svelte-moveable/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [0.45.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.44.0...svelte-moveable@0.45.0) (2023-12-03)\n\n\n### :mega: Other\n\n* publish packages ([f9a0eed](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/f9a0eed9db93c1fa3522138e9c7604287f0ce21f))\n\n\n\n## [0.44.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.43.3...svelte-moveable@0.44.0) (2023-10-28)\n\n\n### :bug: Bug Fix\n\n* support svelte 4.x #981 ([90e3f7f](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/90e3f7ff41cc7cffd44c792c2e6a7bffcfc19785))\n\n\n### :mega: Other\n\n* publish packages ([1a65454](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/1a654540f1390648d7e4db910d0673acff190007))\n\n\n\n## [0.43.3](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.43.1...svelte-moveable@0.43.3) (2023-09-19)\n\n\n### :bug: Bug Fix\n\n* add svelte 4 as a compatible dependency (#1005) ([266872c](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/266872c641dce8d2a2c06e50ac972e116099285a))\n\n\n### :mega: Other\n\n* publish packages ([ecf15ab](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/ecf15ab399bb4d9f6752cb84b0d6b06d15e5c426))\n* update svelte-moveable version ([377f618](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/377f6186c9478c294a05cf830d7a0930eec0436a))\n\n\n\n## [0.43.1](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.43.0...svelte-moveable@0.43.1) (2023-07-11)\n\n\n### :mega: Other\n\n* publish packages ([27bda8e](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/27bda8ea3d9751847fc073519a832b3464242d3c))\n\n\n\n## [0.43.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.42.2...svelte-moveable@0.43.0) (2023-07-09)\n\n\n### :mega: Other\n\n* publish packages ([25cae7f](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/25cae7f46aa28dcb948a8690fd6062b7e15d72ff))\n\n\n\n## [0.42.2](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.42.1...svelte-moveable@0.42.2) (2023-07-04)\n\n\n### :mega: Other\n\n* publish packages ([9467cf4](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/9467cf45fd2871573df8886eb134c67a8b0f916d))\n\n\n\n## [0.42.1](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.41.1...svelte-moveable@0.42.1) (2023-07-02)\n\n\n### :mega: Other\n\n* publish packages ([5697e80](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/5697e8050f486a83ea409b856d1f670759ba6910))\n* publish packages ([5e76998](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/5e76998ba0a90efcbb0c2e4fe8030ca47a1842d4))\n\n\n\n## [0.41.1](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.41.0...svelte-moveable@0.41.1) (2023-06-28)\n\n\n### :house: Code Refactoring\n\n* change rollup to vite ([213f346](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/213f346257289eaec6f3f6f618e8fba33859c384))\n\n\n### :mega: Other\n\n* publish packages ([510d7cd](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/510d7cdf76eef4a17cc75d95634ebcb6d9688f8e))\n\n\n\n## [0.41.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.40.0...svelte-moveable@0.41.0) (2023-06-25)\n\n\n### :mega: Other\n\n* publish packages ([f893cca](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/f893ccaa176d31ef9ddb241d2cd4a1fb098cdae0))\n\n\n\n## [0.40.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.39.9...svelte-moveable@0.40.0) (2023-06-04)\n\n\n### :rocket: New Features\n\n* support svelte type ([2022d49](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/2022d49ae2ebf5daaf21edb4043a557ff3f6eac5))\n\n\n### :mega: Other\n\n* update packages ([8d65572](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/8d65572384ae0fdff288fe78fbeb5d249b070eb7))\n* update packages ([9e137aa](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/9e137aa7455fdf85766ca1ff77dd3d8ea2a4c1c9))\n\n\n\n## [0.39.9](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.39.8...svelte-moveable@0.39.9) (2023-05-16)\n\n\n### :mega: Other\n\n* publish packages ([5bd22bb](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/5bd22bb009e10a4f8032f35c2ae3b490f4d94e5b))\n\n\n\n## [0.39.8](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.39.7...svelte-moveable@0.39.8) (2023-05-15)\n\n\n### :mega: Other\n\n* publish packages ([91aa8bc](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/91aa8bc1bdefc65cde8c032f1c7ba13ca54ad2fa))\n\n\n\n## [0.39.7](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.39.6...svelte-moveable@0.39.7) (2023-05-09)\n\n\n### :mega: Other\n\n* publish packages ([40dd902](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/40dd9022c41244ab009d621861ddc2ac63768748))\n\n\n\n## [0.39.6](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.39.0...svelte-moveable@0.39.6) (2023-05-08)\n\n\n### :rocket: New Features\n\n* update croact version #902 ([e328e21](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/e328e2170438fe27f60f307ae976183fbfb5e96e))\n\n\n### :bug: Bug Fix\n\n* fix files filed #910 #909 #907 ([a4995ab](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/a4995ab1acb3a34974e1d5a20d17fb2ee17ddc0c))\n\n\n### :mega: Other\n\n* publish packages ([d0f0532](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/d0f0532bfb42fe98ee95748839a639fddbe4b9d6))\n* publish packages ([e1e86a9](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/e1e86a95ebff9d18ad7a5ebede3bd5bd66465b5d))\n* publish packages ([60a747e](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/60a747ee3c373f83fb759a8482e2365e77dcb5e8))\n\n\n\n## [0.39.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.38.1...svelte-moveable@0.39.0) (2023-05-01)\n\n\n### :mega: Other\n\n* publish packages ([24934e3](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/24934e317de2e5ff622bd9ab0dec8d75a7c05c48))\n\n\n\n## [0.38.1](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.38.0...svelte-moveable@0.38.1) (2023-04-16)\n\n\n### :mega: Other\n\n* publish packages ([a623eda](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/a623eda2702067397159742dd0c6ed16b99bbe22))\n\n\n\n## [0.38.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.37.0...svelte-moveable@0.38.0) (2023-04-13)\n\n\n### :bug: Bug Fix\n\n* fix svelte main field #886 ([e5a5f25](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/e5a5f254e3d053f7f26d46cffeac970b98636b01))\n\n\n### :mega: Other\n\n* publish packages ([1177427](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/11774277bafd9c60e9cef3c9a6fa38a3e1c4077d))\n\n\n\n## [0.37.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.36.4...svelte-moveable@0.37.0) (2023-03-26)\n\n\n### :mega: Other\n\n* publish packages ([7580d27](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/7580d272fe857aadfbdbc9df264e0a413dd56588))\n\n\n\n## [0.36.4](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.36.3...svelte-moveable@0.36.4) (2023-03-21)\n\n\n### :memo: Documentation\n\n* fix README ([7426492](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/7426492de210ab6f38d411d96e6d843d7423f555))\n\n\n### :mega: Other\n\n* publish packages ([ae54ef4](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/ae54ef4c660ae789867e4286990f234cc808a379))\n\n\n\n## [0.36.3](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.36.2...svelte-moveable@0.36.3) (2023-03-14)\n\n\n### :memo: Documentation\n\n* fix story url ([8977306](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/897730620480d8e830c4b53401a28d03b42b9a5f))\n\n\n### :mega: Other\n\n* update packages ([5b03d09](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/5b03d09a0cd298d47597fc8c8c9c6fdd4cd5a267))\n\n\n\n## [0.36.2](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.36.0...svelte-moveable@0.36.2) (2023-03-10)\n\n\n### :mega: Other\n\n* publish packages ([5589402](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/55894029a463f96a1f42827330b092be3fb63bf2))\n* update packages #856 #847 ([a78c8e3](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/a78c8e3c7ff8c3eb347a7617ddc76c807b57633e))\n\n\n\n## [0.36.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.35.1...svelte-moveable@0.36.0) (2023-03-08)\n\n\n### :mega: Other\n\n* publish packages ([645e290](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/645e290a53b477b468042e05447e2f8f8aea6ed0))\n\n\n\n## [0.35.1](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.34.1...svelte-moveable@0.35.1) (2023-01-29)\n\n\n### :mega: Other\n\n* publish packages ([24c9567](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/24c9567e2ec00392d2d445298031c39de0331eae))\n* publish packages ([0e0a03d](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/0e0a03dd6c234ded050db8206e585c5fa2da1848))\n\n\n\n## [0.34.1](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.34.0...svelte-moveable@0.34.1) (2022-12-16)\n\n\n### :mega: Other\n\n* publish packages ([d088ad9](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/d088ad9ed64889f4fd6143b89410f5d5e372105f))\n\n\n\n## [0.34.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.33.1...svelte-moveable@0.34.0) (2022-12-10)\n\n\n### :mega: Other\n\n* publish packages ([ab42598](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/ab42598cb7a6175450125c5e55093cf891a33692))\n\n\n\n## [0.33.1](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.33.0...svelte-moveable@0.33.1) (2022-12-05)\n\n\n### :bug: Bug Fix\n\n* move react-moveable path ([ec8e162](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/ec8e1620e05f1d5a1a45ecccec7481c2ea8a4f57))\n\n\n### :mega: Other\n\n* publish packages ([9ee9bc9](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/9ee9bc9c76f6c4b317548470b5b4894c6a462be1))\n\n\n\n## [0.33.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.32.1...svelte-moveable@0.33.0) (2022-12-03)\n\n\n### :mega: Other\n\n* publish packages ([4739df4](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/4739df488cdf3c32cb4ca4e024063c5c44fbaf0c))\n\n\n\n## [0.32.1](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.32.0...svelte-moveable@0.32.1) (2022-11-28)\n\n\n### :mega: Other\n\n* publish packages ([746c40b](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/746c40b2a2f31f2f371f9110018c89e64c08a525))\n\n\n\n## [0.32.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.31.0...svelte-moveable@0.32.0) (2022-11-27)\n\n\n### :memo: Documentation\n\n* fix README ([3a153c8](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/3a153c849b7279ec5fd603167117c88f25a7149c))\n\n\n### :mega: Other\n\n* publish packages ([3d5ac5a](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/3d5ac5ad855d98a2f555174cc46ec09c148d6a20))\n* publish packages ([92eb72d](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/92eb72df6110eb40a66b4726740240acb43e9745))\n\n\n\n## [0.31.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.30.1...svelte-moveable@0.31.0) (2022-11-13)\n\n\n### :mega: Other\n\n* publish packages ([0780d7a](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/0780d7a204e5f1fa13070d4fa3ca657dfe3ee4af))\n\n\n\n## [0.30.1](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.30.0...svelte-moveable@0.30.1) (2022-11-06)\n\n\n### :mega: Other\n\n* publish packages ([64e846b](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/64e846bb0e606756bc0b87c92b2b1052b458b9f7))\n\n\n\n## [0.30.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.29.0...svelte-moveable@0.30.0) (2022-11-04)\n\n\n### :mega: Other\n\n* publish packages ([b6896b3](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/b6896b340dd1f78777bd63c48e8545895df9aa5e))\n* update packages ([1ba698e](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/1ba698e996efe9c7c487823fe513ef43592cd6e9))\n\n\n\n## [0.29.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.28.4...svelte-moveable@0.29.0) (2022-10-17)\n\n\n### :mega: Other\n\n* publish packages ([75db134](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/75db1345ab1119dd9a5270c7c11de455888c2627))\n* publish packages ([47f5335](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/47f53351792bf5264c6d66745088e0571cedc3aa))\n* update packages ([61730d5](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/61730d5c143d4027c55a714c764efe77bbebe5bf))\n\n\n\n## [0.28.4](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.28.1...svelte-moveable@0.28.4) (2022-10-10)\n\n\n### :mega: Other\n\n* publish packages ([9e3ee2f](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/9e3ee2ff44dea473e7aa73e4d501c2d23062f40d))\n* publish packages ([16b2516](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/16b251618307faad8f8f3fc5433b27ed1466311c))\n\n\n\n## [0.28.1](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.28.0...svelte-moveable@0.28.1) (2022-09-19)\n\n\n### :mega: Other\n\n* publish packages ([2954e37](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/2954e37b9a4e2100a8a55c0d49d279e7f994fd94))\n\n\n\n## [0.28.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.27.4...svelte-moveable@0.28.0) (2022-09-15)\n\n\n### :bug: Bug Fix\n\n* fix moveable container #732 ([d2fec43](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/d2fec43aeed2e935a9315003f2876b7b99a46ac4))\n\n\n### :mega: Other\n\n* update packages ([e5774a9](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/e5774a9becd500d154e8d354017dcbd80505ba13))\n\n\n\n## [0.27.4](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.27.3...svelte-moveable@0.27.4) (2022-08-24)\n\n\n### :mega: Other\n\n* publish packages ([d57ebb1](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/d57ebb130006c47e3a687d2b417fe3fe7f30149a))\n\n\n\n## [0.27.3](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.27.1...svelte-moveable@0.27.3) (2022-08-23)\n\n\n### :mega: Other\n\n* publish packages ([3597bc5](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/3597bc5fd58cdec56fd4ff8916380a6f3709f7f5))\n\n\n\n## [0.27.1](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.27.0...svelte-moveable@0.27.1) (2022-08-12)\n\n\n### :mega: Other\n\n* publish packages ([6be7e81](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/6be7e8122b8edd2e323a039cdbb73381de74e14f))\n\n\n\n## [0.27.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.26.3...svelte-moveable@0.27.0) (2022-08-06)\n\n\n### :mega: Other\n\n* publish packages ([80005ba](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/80005bada5651afd0c5487a193ab321b22ab1b55))\n\n\n\n## [0.26.3](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.26.2...svelte-moveable@0.26.3) (2022-08-03)\n\n\n### :mega: Other\n\n* publish packages ([5468ff7](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/5468ff763bfa3f30e637ce8f504af09152b22c5c))\n\n\n\n## [0.26.2](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.25.0...svelte-moveable@0.26.2) (2022-08-01)\n\n\n### :mega: Other\n\n* publish packages ([0076577](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/00765776ba92b5ca691c1aefd1c20687952373d9))\n* publish packages ([ffa0c18](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/ffa0c18bb6970d6f8d88a49db23b11620e704618))\n* publish packages ([958ebac](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/958ebace6032eafb17f1ce366394b440671b45b3))\n\n\n\n## [0.25.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.24.0...svelte-moveable@0.25.0) (2022-07-25)\n\n\n### :mega: Other\n\n* publish packages ([63e03d1](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/63e03d1d5f69e56c7df6d357c58d7acd06932e80))\n\n\n\n## [0.24.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.23.2...svelte-moveable@0.24.0) (2022-07-21)\n\n\n### :mega: Other\n\n* publish packages ([da24696](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/da24696977c24b6ea54a433192d15bb7ecbc62e9))\n\n\n\n## [0.23.2](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.23.0...svelte-moveable@0.23.2) (2022-07-17)\n\n\n### :bug: Bug Fix\n\n* fix files field in package.json #700 ([48ce548](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/48ce548438dd0a7da9f544730b2fc3ab65073775))\n\n\n### :mega: Other\n\n* publish packages ([5d89af5](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/5d89af521d1a288d4d9ca7923e0e9654e8f97d53))\n\n\n\n## [0.23.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.22.0...svelte-moveable@0.23.0) (2022-07-17)\n\n\n### :bug: Bug Fix\n\n* change dependencies #680 ([7c01017](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/7c010170642f68b2ec52cf0ea8e2b569fcd2b634))\n* fix floating point for min limit size ([766561c](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/766561c0e785098720c5a0ae6d9da1e2d9d7b879))\n\n\n### :mega: Other\n\n* publish packages ([2a4940f](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/2a4940f74997fae24c7d77c553a6bc6be1301d40))\n\n\n\n## [0.22.0](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.21.9...svelte-moveable@0.22.0) (2022-06-09)\n\n\n### :mega: Other\n\n* publish packages ([b432247](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/b4322470bcd3bb05fc67d2c89eedd737f8b4b67a))\n\n\n\n## [0.21.9](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.21.8...svelte-moveable@0.21.9) (2022-06-07)\n\n\n### :house: Code Refactoring\n\n* use yarn workspace ([73da295](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/73da295064845a3791782c1777a9c555272a0af0))\n\n\n### :mega: Other\n\n* publish packages ([3530f05](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/3530f0526081b0c010e6c964265b466713f0212e))\n* update demo configuration ([917123c](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/917123cdea2830e8e8f4a8d7b2a99654f16682ef))\n\n\n\n## [0.21.8](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.21.6...svelte-moveable@0.21.8) (2022-05-01)\n\n\n### :mega: Other\n\n* update packages versions ([169c484](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/169c48417bb4bc07c59e227c545e379dbf43d15b))\n\n\n\n## [0.21.6](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.21.5...svelte-moveable@0.21.6) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([585094f](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/585094f76ec6e1556159ac357d6ac83ebab953ae))\n\n\n\n## [0.21.5](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.21.4...svelte-moveable@0.21.5) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([5cd2398](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/5cd2398dbb4dbbda24032641fe5bf111780b75fc))\n\n\n\n## [0.21.4](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/compare/svelte-moveable@0.21.3...svelte-moveable@0.21.4) (2022-04-26)\n\n\n### :mega: Other\n\n* update packages versions ([a62ee58](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/a62ee58b9bc32f06edc95d55ea28b60c20881ac4))\n* upgrade storybook and typescript ([eff23fd](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/commit/eff23fd7340964ed0e3e6f5930e56558c4d91d18))\n"
  },
  {
    "path": "packages/svelte-moveable/README.md",
    "content": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/logo.png\"/></p>\n<h2 align=\"middle\">Svelte Moveable</h2>\n<p align=\"middle\">\n<a href=\"https://www.npmjs.com/package/svelte-moveable\" target=\"_blank\"><img src=\"https://img.shields.io/npm/v/svelte-moveable.svg?style=flat-square&color=007acc&label=version\" alt=\"npm version\" /></a>\n<img src=\"https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square\"/>\n<a href=\"https://github.com/daybrush/moveable/blob/master/LICENSE\" target=\"_blank\"><img src=\"https://img.shields.io/github/license/daybrush/moveable.svg?style=flat-square&label=license&color=08CE5D\"/></a>\n</p>\n<p align=\"middle\">A Svelte Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.</p>\n<p align=\"middle\">\n    <a href=\"https://daybrush.com/moveable\" target=\"_blank\"><strong>Demo</strong></a> /\n    <a href=\"https://daybrush.com/moveable/storybook/\" target=\"_blank\"><strong>Storybook</strong></a> /\n    <a href=\"https://daybrush.com/moveable/release/latest/doc/\" target=\"_blank\"><strong>API</strong></a> /\n    <a href=\"https://github.com/daybrush/scena\" target=\"_blank\"><strong>Main Project</strong></a>\n</p>\n\n\n\n<table width=\"100%\" align=\"center\">\n<tr>\n<th colspan=\"4\">Moveable</th>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-draggable\"><strong>Draggable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-resizable\"><strong>Resizable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-scalable\"><strong>Scalable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-rotatable\"><strong>Rotatable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/draggable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/resizable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/scalable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/rotatable.gif\"/>\n</td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-warpable\"><strong>Warpable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html\"><strong>Pinchable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/group--group-draggable-resizable-rotatable\"><strong>Groupable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/snap-bound--snap-guidelines\"><strong>Snappable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/warpable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/pinchable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/groupable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/snappable.gif\"/></td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-clippable\"><strong>Clippable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-roundable\"><strong>Roundable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-origin-draggable\"><strong>OriginDraggable</strong></a></td>\n<td align=\"center\"><a href=\"https://github.com/daybrush/selecto\"><strong>Selecto</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/clippable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/roundable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/origindraggable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/selecto.gif\"/></td>\n</tr>\n</table>\n\n\n## 🔥 Features\n* **Draggable** refers to the ability to drag and move targets.\n* **Resizable** indicates whether the target's width and height can be increased or decreased.\n* **Scalable** indicates whether the target's x and y can be scale of transform.\n* **Rotatable** indicates whether the target can be rotated.\n* **Warpable** indicates whether the target can be warped(distorted, bented).\n* **Pinchable** indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.\n* **Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.\n* **Snappable** indicates whether to snap to the guideline.\n* **OriginDraggable*** indicates Whether to drag origin.\n* **Clippable** indicates Whether to clip the target.\n* **Roundable** indicates Whether to show and drag or double click border-radius.\n* Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)\n* Support Major Browsers\n* Support 3d Transform\n\n\n## ⚙️ Installation\n```sh\n$ npm i svelte-moveable\n```\n\n## 📄 Documents\n\n* [**Moveable Handbook**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md)\n* [**How to use Group**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-group)\n* [**How to use custom CSS**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-custom-css)\n* [**How to make custom able**](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/src/ables/README.md)\n* [API Documentation](https://daybrush.com/moveable/release/latest/doc/)\n\n## 🚀 How to use\n> If you don't want to use detail, use camelcase props instead of `on:event`\n>\n> ```\n> on:dragStart={({ detail: e}) => {}}\n> onDragStart={e => {}}\n> ```\n\n```html\n<script>\n    import Moveable from \"svelte-moveable\";\n    let target;\n</script>\n```\n```jsx\n<div class=\"target\" bind:this={target}>Target</div>\n<Moveable\n  target={target}\n  origin={true}\n  edge={false}\n\n  draggable={true}\n  throttleDrag={0}\n  on:dragStart={({ detail }) => onDragStart(detail)}\n  on:drag={({ detail }) => onDrag(detail)}\n  on:dragEnd={({ detail }) => onDragEnd(detail)}\n\n  keepRatio={false}\n  renderDirections={[\"nw\", \"ne\", \"sw\", \"se\", \"n\", \"w\", \"s\", \"e\"]}\n\n  resizable={false}\n  throttleResize={0}\n  on:resizeStart={({ detail }) => onResizeStart(detail)}\n  on:resize={({ detail }) => onResize(detail)}\n  on:resizeEnd={({ detail }) => onResizeEnd(detail)}\n\n  scalable={false}\n  throttleScale={0}\n  on:scaleStart={({ detail }) => onScaleStart(detail)}\n  on:scale={({ detail }) => onScale(detail)}\n  on:scaleEnd={({ detail }) => onScaleEnd(detail)}\n\n\n  rotatable={false}\n  throttleRotate={0}\n  on:rotateStart={({ detail }) => onRotateStart(detail)}\n  on:rotate={({ detail }) => onRotate(detail)}\n  on:rotateEnd={({ detail }) => onRotateEnd(detail)}\n\n  warpable={false}\n  on:warpStart={({ detail }) => onWarpStart(detail)}\n  on:warp={({ detail }) => onWarp(detail)}\n  on:warpEnd={({ detail }) => onWarpEnd(detail)}\n\n  pinchable=\"false\"\n  on:pinchStart={({ detail }) => onPinchStart(detail)}\n  on:pinch={({ detail }) => onPinch(detail)}\n  on:pinchEnd={({ detail }) => onPinchEnd(detail)}\n/>\n\n```\n\n\n## ⚙️ Developments\n### `npm run dev`\n\nRuns the app in the development mode.<br/>\nOpen [http://localhost:5000](http://localhost:5000) to view it in the browser.\n\nThe page will reload if you make edits.<br/>\nYou will also see any lint errors in the console.\n\n\n\n## ⭐️ Show Your Support\nPlease give a ⭐️ if this project helped you!\n\n\n## 👏 Contributing\n\nIf you have any questions or requests or want to contribute to `moveable` or other packages, please write the [issue](https://github.com/daybrush/moveable/issues) or give me a Pull Request freely.\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](https://github.com/daybrush/moveable/blob/master/CONTRIBUTING.md)].\n\n<a href=\"https://github.com/daybrush/moveable/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=daybrush/moveable\" />\n</a>\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/moveable/issues) on GitHub.\n\n## Sponsors\n<p align=\"center\">\n\t<a href=\"https://daybrush.com/sponsors/sponsors.svg\">\n\t\t<img src=\"https://daybrush.com/sponsors/sponsors.svg\"/>\n\t</a>\n</p>\n\n\n## 📝 License\n\nThis project is [MIT](https://github.com/daybrush/moveable/blob/master/LICENSE) licensed.\n\n```\nMIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n"
  },
  {
    "path": "packages/svelte-moveable/package.json",
    "content": "{\n    \"name\": \"svelte-moveable\",\n    \"version\": \"0.45.0\",\n    \"description\": \"A Svelte Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.\",\n    \"svelte\": \"./dist/index.js\",\n    \"types\": \"./dist/index.d.ts\",\n    \"type\": \"module\",\n    \"sideEffects\": false,\n    \"keywords\": [\n        \"moveable\",\n        \"resizable\",\n        \"scalable\",\n        \"draggable\",\n        \"rotatable\",\n        \"warpable\",\n        \"pinchable\",\n        \"groupable\",\n        \"snappable\",\n        \"movable\",\n        \"throttle\",\n        \"ratio\",\n        \"dom\",\n        \"resize\",\n        \"scale\",\n        \"drag\",\n        \"move\",\n        \"rotate\",\n        \"svelte\",\n        \"warp\",\n        \"snap\",\n        \"pinch\"\n    ],\n    \"files\": [\n        \"./*\",\n        \"src/*\",\n        \"dist/*\",\n        \"declaration/*\"\n    ],\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable\"\n    },\n    \"author\": \"Daybrush\",\n    \"license\": \"MIT\",\n    \"bugs\": {\n        \"url\": \"https://github.com/daybrush/moveable/issues\"\n    },\n    \"homepage\": \"https://daybrush.com/moveable\",\n    \"scripts\": {\n        \"dev\": \"vite dev\",\n        \"build\": \"vite build && npm run package\",\n        \"preview\": \"vite preview\",\n        \"package\": \"svelte-kit sync && svelte-package && publint\",\n        \"prepublishOnly\": \"npm run package\",\n        \"check\": \"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json\",\n        \"check:watch\": \"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch\"\n    },\n    \"exports\": {\n        \".\": {\n            \"types\": \"./dist/index.d.ts\",\n            \"svelte\": \"./dist/index.js\"\n        }\n    },\n    \"peerDependencies\": {\n        \"svelte\": \"^3.54.0 || ^4.0.0\"\n    },\n    \"devDependencies\": {\n        \"@sveltejs/adapter-auto\": \"^2.0.0\",\n        \"@sveltejs/kit\": \"^1.5.0\",\n        \"@sveltejs/package\": \"^2.0.0\",\n        \"publint\": \"^0.1.9\",\n        \"svelte\": \"^3.54.0 || ^4.0.0\",\n        \"svelte-check\": \"^3.0.1\",\n        \"tslib\": \"^2.4.1\",\n        \"typescript\": \"^4.8 <4.9\",\n        \"vite\": \"^4.3.0\"\n    },\n    \"dependencies\": {\n        \"framework-utils\": \"^1.1.0\",\n        \"moveable\": \"~0.53.0\"\n    }\n}\n"
  },
  {
    "path": "packages/svelte-moveable/src/app.d.ts",
    "content": "// See https://kit.svelte.dev/docs/types#app\n// for information about these interfaces\ndeclare global {\n\tnamespace App {\n\t\t// interface Error {}\n\t\t// interface Locals {}\n\t\t// interface PageData {}\n\t\t// interface Platform {}\n\t}\n}\n\nexport {};\n"
  },
  {
    "path": "packages/svelte-moveable/src/app.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"%sveltekit.assets%/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\t\t%sveltekit.head%\n\t</head>\n\t<body data-sveltekit-preload-data=\"hover\">\n\t\t<div>%sveltekit.body%</div>\n\t</body>\n</html>\n"
  },
  {
    "path": "packages/svelte-moveable/src/lib/Moveable.svelte",
    "content": "<script>\n  import VanillaMoveable, {\n    PROPERTIES,\n    EVENTS,\n  } from \"moveable\";\n  import { camelize, isUndefined } from \"@daybrush/utils\";\n  import {\n    onMount,\n    onDestroy,\n    createEventDispatcher,\n    beforeUpdate,\n    tick\n  } from \"svelte\";\n\n  const dispatch = createEventDispatcher();\n  let options = {};\n\n  let moveableElement;\n  let moveable;\n\n  beforeUpdate(() => {\n    const props = $$props;\n\n    options = {};\n    PROPERTIES.forEach(name => {\n      if (name in props) {\n        options[name] = props[name];\n      }\n    });\n\n    if (moveable) {\n      tick().then(() => {\n        moveable.setState({\n          ...options,\n        });\n      });\n    }\n  });\n  onMount(() => {\n    moveable = new VanillaMoveable(moveableElement, {\n      ...options,\n      warpSelf: true,\n    });\n\n    EVENTS.forEach(name => {\n      const onName = camelize(`on ${name}`);\n      moveable.on(name, e => {\n        $$props[onName] && $$props[onName](e);\n        dispatch(name, e);\n      });\n    });\n  });\n  onDestroy(() => {\n    moveable && moveable.destroy();\n  });\n\n  export function getInstance() {\n    return moveable;\n  }\n</script>\n<div bind:this={moveableElement}></div>\n"
  },
  {
    "path": "packages/svelte-moveable/src/lib/index.d.ts",
    "content": "/// <reference types=\"svelte\" />\nimport { SvelteComponentTyped } from \"svelte\";\nimport { MoveableInterface, MoveableOptions, MoveableEvents } from \"moveable\";\n\nexport type SvelteMoveableEvents = {\n    [key in keyof MoveableEvents]: CustomEvent<MoveableEvents[key]>;\n}\nexport default class MoveableComponent<T = {}> extends SvelteComponentTyped<\n    MoveableOptions & T,\n    SvelteMoveableEvents\n> { }\n\nexport default interface MoveableComponent extends MoveableInterface {\n}\nexport * from \"moveable\";\n"
  },
  {
    "path": "packages/svelte-moveable/src/lib/index.js",
    "content": "import Moveable from \"./Moveable.svelte\";\nimport { METHODS } from \"moveable\";\n\nexport default /*#__PURE__*/ (() => {\n    const prototype = Moveable.prototype;\n\n    if (!prototype) {\n        return Moveable;\n    }\n    METHODS.forEach(name => {\n        prototype[name] = function (...args) {\n            const self = this.getInstance();\n            const result = self[name](...args);\n\n            if (result === self) {\n                return this;\n            } else {\n                return result;\n            }\n        };\n    });\n    return Moveable;\n})();\n\nexport * from \"moveable\";\n"
  },
  {
    "path": "packages/svelte-moveable/src/lib/index.umd.js",
    "content": "import Moveable from \"./index.js\";\nimport * as modules from \"moveable\";\n\nfor (const name in modules) {\n    Moveable[name] = modules[name];\n}\n\nexport default Moveable;\n"
  },
  {
    "path": "packages/svelte-moveable/src/routes/+page.svelte",
    "content": "<script lang=\"ts\">\n  import { onMount } from \"svelte\";\n  import Moveable from \"$lib/index.js\";\n\n  let svg!: SVGSVGElement;\n\n  onMount(() => {\n    console.log(svg);\n  });\n</script>\n\n<div>\n  <div class=\"target\">Target</div>\n  <Moveable target=\".target\" />\n</div>\n"
  },
  {
    "path": "packages/svelte-moveable/svelte.config.js",
    "content": "import adapter from '@sveltejs/adapter-auto';\nimport { vitePreprocess } from '@sveltejs/kit/vite';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\t// Consult https://kit.svelte.dev/docs/integrations#preprocessors\n\t// for more information about preprocessors\n\tpreprocess: vitePreprocess(),\n\n\tkit: {\n\t\t// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.\n\t\t// If your environment is not supported or you settled on a specific environment, switch out the adapter.\n\t\t// See https://kit.svelte.dev/docs/adapters for more information about adapters.\n\t\tadapter: adapter()\n\t}\n};\n\nexport default config;\n"
  },
  {
    "path": "packages/svelte-moveable/tsconfig.json",
    "content": "{\n\t\"extends\": \"./.svelte-kit/tsconfig.json\",\n\t\"compilerOptions\": {\n\t\t\"allowJs\": true,\n\t\t\"checkJs\": true,\n\t\t\"esModuleInterop\": true,\n\t\t\"forceConsistentCasingInFileNames\": true,\n\t\t\"resolveJsonModule\": true,\n\t\t\"skipLibCheck\": true,\n\t\t\"sourceMap\": true,\n\t\t\"strict\": true,\n\t\t\"target\": \"ESNext\",\n\t\t\"moduleResolution\": \"NodeNext\"\n\t}\n}\n"
  },
  {
    "path": "packages/svelte-moveable/vite.config.ts",
    "content": "import { sveltekit } from '@sveltejs/kit/vite';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n\tplugins: [sveltekit()]\n});\n"
  },
  {
    "path": "packages/vue-moveable/.browserslistrc",
    "content": "> 1%\nlast 2 versions\n"
  },
  {
    "path": "packages/vue-moveable/.gitignore",
    "content": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n"
  },
  {
    "path": "packages/vue-moveable/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [2.0.0-beta.87](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.86...vue-moveable@2.0.0-beta.87) (2023-12-03)\n\n\n### :mega: Other\n\n* publish packages ([f9a0eed](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/f9a0eed9db93c1fa3522138e9c7604287f0ce21f))\n\n\n\n## [2.0.0-beta.86](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.85...vue-moveable@2.0.0-beta.86) (2023-10-28)\n\n\n### :bug: Bug Fix\n\n* fix vue-moveable exports #1028 ([809073d](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/809073d279d8ae33b430fff2f34097403510c7ca))\n\n\n### :mega: Other\n\n* publish packages ([1a65454](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/1a654540f1390648d7e4db910d0673acff190007))\n\n\n\n## [2.0.0-beta.85](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.83...vue-moveable@2.0.0-beta.85) (2023-09-19)\n\n\n### :bug: Bug Fix\n\n* fix vue-moveable rollup verseion #1013 ([5d81006](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/5d81006a003b4c39811263144b110eb9d960a965))\n\n\n### :mega: Other\n\n* publish packages ([ecf15ab](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/ecf15ab399bb4d9f6752cb84b0d6b06d15e5c426))\n\n\n\n## [2.0.0-beta.83](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.82...vue-moveable@2.0.0-beta.83) (2023-07-11)\n\n\n### :mega: Other\n\n* publish packages ([27bda8e](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/27bda8ea3d9751847fc073519a832b3464242d3c))\n\n\n\n## [2.0.0-beta.82](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.81...vue-moveable@2.0.0-beta.82) (2023-07-09)\n\n\n### :mega: Other\n\n* publish packages ([25cae7f](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/25cae7f46aa28dcb948a8690fd6062b7e15d72ff))\n\n\n\n## [2.0.0-beta.81](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.80...vue-moveable@2.0.0-beta.81) (2023-07-04)\n\n\n### :mega: Other\n\n* publish packages ([9467cf4](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/9467cf45fd2871573df8886eb134c67a8b0f916d))\n\n\n\n## [2.0.0-beta.80](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.78...vue-moveable@2.0.0-beta.80) (2023-07-02)\n\n\n### :mega: Other\n\n* publish packages ([5697e80](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/5697e8050f486a83ea409b856d1f670759ba6910))\n* publish packages ([5e76998](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/5e76998ba0a90efcbb0c2e4fe8030ca47a1842d4))\n\n\n\n## [2.0.0-beta.78](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.77...vue-moveable@2.0.0-beta.78) (2023-06-28)\n\n\n### :house: Code Refactoring\n\n* change rollup to vite ([213f346](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/213f346257289eaec6f3f6f618e8fba33859c384))\n\n\n### :mega: Other\n\n* fix update modules ([bb608dc](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/bb608dc0d1d9eb13e538d1026c05809d89757b1d))\n* publish packages ([510d7cd](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/510d7cdf76eef4a17cc75d95634ebcb6d9688f8e))\n\n\n\n## [2.0.0-beta.77](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.76...vue-moveable@2.0.0-beta.77) (2023-06-25)\n\n\n### :mega: Other\n\n* publish packages ([f893cca](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/f893ccaa176d31ef9ddb241d2cd4a1fb098cdae0))\n\n\n\n## [2.0.0-beta.76](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.75...vue-moveable@2.0.0-beta.76) (2023-06-04)\n\n\n### :bug: Bug Fix\n\n* fix vue prerelease ([ad7ea7c](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/ad7ea7ce85c79f6283b668228eb68358a05c4f3e))\n\n\n### :mega: Other\n\n* update packages ([8d65572](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/8d65572384ae0fdff288fe78fbeb5d249b070eb7))\n\n\n\n## [2.0.0-beta.75](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.74...vue-moveable@2.0.0-beta.75) (2023-05-16)\n\n\n### :mega: Other\n\n* publish packages ([5bd22bb](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/5bd22bb009e10a4f8032f35c2ae3b490f4d94e5b))\n\n\n\n## [2.0.0-beta.74](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.73...vue-moveable@2.0.0-beta.74) (2023-05-15)\n\n\n### :mega: Other\n\n* publish packages ([91aa8bc](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/91aa8bc1bdefc65cde8c032f1c7ba13ca54ad2fa))\n\n\n\n## [2.0.0-beta.73](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.72...vue-moveable@2.0.0-beta.73) (2023-05-09)\n\n\n### :mega: Other\n\n* publish packages ([40dd902](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/40dd9022c41244ab009d621861ddc2ac63768748))\n\n\n\n## [2.0.0-beta.72](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.66...vue-moveable@2.0.0-beta.72) (2023-05-08)\n\n\n### :rocket: New Features\n\n* update croact version #902 ([e328e21](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/e328e2170438fe27f60f307ae976183fbfb5e96e))\n\n\n### :bug: Bug Fix\n\n* fix files filed #910 #909 #907 ([a4995ab](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/a4995ab1acb3a34974e1d5a20d17fb2ee17ddc0c))\n\n\n### :mega: Other\n\n* publish packages ([d0f0532](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/d0f0532bfb42fe98ee95748839a639fddbe4b9d6))\n* publish packages ([e1e86a9](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/e1e86a95ebff9d18ad7a5ebede3bd5bd66465b5d))\n* publish packages ([60a747e](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/60a747ee3c373f83fb759a8482e2365e77dcb5e8))\n\n\n\n## [2.0.0-beta.66](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.65...vue-moveable@2.0.0-beta.66) (2023-05-01)\n\n\n### :mega: Other\n\n* publish packages ([24934e3](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/24934e317de2e5ff622bd9ab0dec8d75a7c05c48))\n\n\n\n## [2.0.0-beta.65](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.64...vue-moveable@2.0.0-beta.65) (2023-04-16)\n\n\n### :mega: Other\n\n* publish packages ([a623eda](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/a623eda2702067397159742dd0c6ed16b99bbe22))\n\n\n\n## [2.0.0-beta.64](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.63...vue-moveable@2.0.0-beta.64) (2023-04-13)\n\n\n### :bug: Bug Fix\n\n* fix warpSelf ([8c86a3f](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/8c86a3f95e5d0b8832b1d9b65bf72f598eb8d0cb))\n\n\n### :mega: Other\n\n* publish packages ([1177427](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/11774277bafd9c60e9cef3c9a6fa38a3e1c4077d))\n\n\n\n## [2.0.0-beta.63](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.62...vue-moveable@2.0.0-beta.63) (2023-03-26)\n\n\n### :mega: Other\n\n* publish packages ([7580d27](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/7580d272fe857aadfbdbc9df264e0a413dd56588))\n\n\n\n## [2.0.0-beta.62](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.61...vue-moveable@2.0.0-beta.62) (2023-03-21)\n\n\n### :memo: Documentation\n\n* fix README ([7426492](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/7426492de210ab6f38d411d96e6d843d7423f555))\n\n\n### :mega: Other\n\n* publish packages ([ae54ef4](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/ae54ef4c660ae789867e4286990f234cc808a379))\n\n\n\n## [2.0.0-beta.61](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.60...vue-moveable@2.0.0-beta.61) (2023-03-14)\n\n\n### :memo: Documentation\n\n* fix story url ([8977306](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/897730620480d8e830c4b53401a28d03b42b9a5f))\n\n\n### :mega: Other\n\n* update packages ([5b03d09](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/5b03d09a0cd298d47597fc8c8c9c6fdd4cd5a267))\n\n\n\n## [2.0.0-beta.60](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.58...vue-moveable@2.0.0-beta.60) (2023-03-10)\n\n\n### :mega: Other\n\n* publish packages ([5589402](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/55894029a463f96a1f42827330b092be3fb63bf2))\n* update packages #856 #847 ([a78c8e3](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/a78c8e3c7ff8c3eb347a7617ddc76c807b57633e))\n\n\n\n## [2.0.0-beta.58](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.57...vue-moveable@2.0.0-beta.58) (2023-03-08)\n\n\n### :mega: Other\n\n* publish packages ([645e290](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/645e290a53b477b468042e05447e2f8f8aea6ed0))\n\n\n\n## [2.0.0-beta.57](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.55...vue-moveable@2.0.0-beta.57) (2023-01-29)\n\n\n### :mega: Other\n\n* publish packages ([24c9567](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/24c9567e2ec00392d2d445298031c39de0331eae))\n* publish packages ([0e0a03d](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/0e0a03dd6c234ded050db8206e585c5fa2da1848))\n\n\n\n## [2.0.0-beta.55](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.54...vue-moveable@2.0.0-beta.55) (2022-12-16)\n\n\n### :mega: Other\n\n* publish packages ([d088ad9](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/d088ad9ed64889f4fd6143b89410f5d5e372105f))\n\n\n\n## [2.0.0-beta.54](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.53...vue-moveable@2.0.0-beta.54) (2022-12-10)\n\n\n### :mega: Other\n\n* publish packages ([ab42598](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/ab42598cb7a6175450125c5e55093cf891a33692))\n\n\n\n## [2.0.0-beta.53](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.52...vue-moveable@2.0.0-beta.53) (2022-12-05)\n\n\n### :mega: Other\n\n* publish packages ([9ee9bc9](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/9ee9bc9c76f6c4b317548470b5b4894c6a462be1))\n\n\n\n## [2.0.0-beta.52](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.51...vue-moveable@2.0.0-beta.52) (2022-12-03)\n\n\n### :mega: Other\n\n* publish packages ([4739df4](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/4739df488cdf3c32cb4ca4e024063c5c44fbaf0c))\n\n\n\n## [2.0.0-beta.51](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.50...vue-moveable@2.0.0-beta.51) (2022-11-28)\n\n\n### :mega: Other\n\n* publish packages ([746c40b](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/746c40b2a2f31f2f371f9110018c89e64c08a525))\n\n\n\n## [2.0.0-beta.50](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.48...vue-moveable@2.0.0-beta.50) (2022-11-27)\n\n\n### :memo: Documentation\n\n* fix README ([3a153c8](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/3a153c849b7279ec5fd603167117c88f25a7149c))\n\n\n### :mega: Other\n\n* publish packages ([3d5ac5a](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/3d5ac5ad855d98a2f555174cc46ec09c148d6a20))\n* publish packages ([92eb72d](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/92eb72df6110eb40a66b4726740240acb43e9745))\n\n\n\n## [2.0.0-beta.48](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.47...vue-moveable@2.0.0-beta.48) (2022-11-13)\n\n\n### :mega: Other\n\n* publish packages ([0780d7a](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/0780d7a204e5f1fa13070d4fa3ca657dfe3ee4af))\n\n\n\n## [2.0.0-beta.47](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.46...vue-moveable@2.0.0-beta.47) (2022-11-06)\n\n\n### :mega: Other\n\n* publish packages ([64e846b](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/64e846bb0e606756bc0b87c92b2b1052b458b9f7))\n\n\n\n## [2.0.0-beta.46](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.44...vue-moveable@2.0.0-beta.46) (2022-11-04)\n\n\n### :mega: Other\n\n* publish packages ([b6896b3](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/b6896b340dd1f78777bd63c48e8545895df9aa5e))\n* update packages ([1ba698e](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/1ba698e996efe9c7c487823fe513ef43592cd6e9))\n\n\n\n## [2.0.0-beta.44](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.41...vue-moveable@2.0.0-beta.44) (2022-10-17)\n\n\n### :mega: Other\n\n* publish packages ([75db134](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/75db1345ab1119dd9a5270c7c11de455888c2627))\n* publish packages ([47f5335](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/47f53351792bf5264c6d66745088e0571cedc3aa))\n* update packages ([61730d5](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/61730d5c143d4027c55a714c764efe77bbebe5bf))\n\n\n\n## [2.0.0-beta.41](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.38...vue-moveable@2.0.0-beta.41) (2022-10-10)\n\n\n### :mega: Other\n\n* publish packages ([9e3ee2f](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/9e3ee2ff44dea473e7aa73e4d501c2d23062f40d))\n* publish packages ([16b2516](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/16b251618307faad8f8f3fc5433b27ed1466311c))\n\n\n\n## [2.0.0-beta.38](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.37...vue-moveable@2.0.0-beta.38) (2022-09-19)\n\n\n### :mega: Other\n\n* publish packages ([2954e37](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/2954e37b9a4e2100a8a55c0d49d279e7f994fd94))\n\n\n\n## [2.0.0-beta.37](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.36...vue-moveable@2.0.0-beta.37) (2022-09-15)\n\n\n### :mega: Other\n\n* update packages ([e5774a9](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/e5774a9becd500d154e8d354017dcbd80505ba13))\n\n\n\n## [2.0.0-beta.36](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.35...vue-moveable@2.0.0-beta.36) (2022-08-24)\n\n\n### :mega: Other\n\n* publish packages ([d57ebb1](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/d57ebb130006c47e3a687d2b417fe3fe7f30149a))\n\n\n\n## [2.0.0-beta.35](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.33...vue-moveable@2.0.0-beta.35) (2022-08-23)\n\n\n### :mega: Other\n\n* publish packages ([3597bc5](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/3597bc5fd58cdec56fd4ff8916380a6f3709f7f5))\n\n\n\n## [2.0.0-beta.33](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.32...vue-moveable@2.0.0-beta.33) (2022-08-12)\n\n\n### :mega: Other\n\n* publish packages ([6be7e81](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/6be7e8122b8edd2e323a039cdbb73381de74e14f))\n\n\n\n## [2.0.0-beta.32](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.31...vue-moveable@2.0.0-beta.32) (2022-08-06)\n\n\n### :mega: Other\n\n* publish packages ([80005ba](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/80005bada5651afd0c5487a193ab321b22ab1b55))\n\n\n\n## [2.0.0-beta.31](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.30...vue-moveable@2.0.0-beta.31) (2022-08-03)\n\n\n### :mega: Other\n\n* publish packages ([5468ff7](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/5468ff763bfa3f30e637ce8f504af09152b22c5c))\n\n\n\n## [2.0.0-beta.30](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.27...vue-moveable@2.0.0-beta.30) (2022-08-01)\n\n\n### :mega: Other\n\n* publish packages ([0076577](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/00765776ba92b5ca691c1aefd1c20687952373d9))\n* publish packages ([ffa0c18](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/ffa0c18bb6970d6f8d88a49db23b11620e704618))\n* publish packages ([958ebac](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/958ebace6032eafb17f1ce366394b440671b45b3))\n\n\n\n## [2.0.0-beta.27](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.26...vue-moveable@2.0.0-beta.27) (2022-07-25)\n\n\n### :bug: Bug Fix\n\n* remove wrong react types #703 ([25dced4](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/25dced4f1531cc46d77601f71674031aa58fdf0b))\n\n\n### :mega: Other\n\n* publish packages ([63e03d1](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/63e03d1d5f69e56c7df6d357c58d7acd06932e80))\n\n\n\n## [2.0.0-beta.26](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.24...vue-moveable@2.0.0-beta.26) (2022-07-21)\n\n\n### :bug: Bug Fix\n\n* fix files field in package.json #700 ([5130109](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/51301099b5a9a9764500c09ce61e4bf65c7c60ef))\n\n\n### :mega: Other\n\n* publish packages ([da24696](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/da24696977c24b6ea54a433192d15bb7ecbc62e9))\n\n\n\n## [2.0.0-beta.24](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.22...vue-moveable@2.0.0-beta.24) (2022-07-17)\n\n\n### :bug: Bug Fix\n\n* fix files field in package.json #700 ([48ce548](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/48ce548438dd0a7da9f544730b2fc3ab65073775))\n\n\n### :mega: Other\n\n* publish packages ([5d89af5](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/5d89af521d1a288d4d9ca7923e0e9654e8f97d53))\n\n\n\n## [2.0.0-beta.22](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.21...vue-moveable@2.0.0-beta.22) (2022-07-17)\n\n\n### :mega: Other\n\n* publish packages ([2a4940f](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/2a4940f74997fae24c7d77c553a6bc6be1301d40))\n\n\n\n## [2.0.0-beta.21](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.20...vue-moveable@2.0.0-beta.21) (2022-06-09)\n\n\n### :mega: Other\n\n* publish packages ([b432247](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/b4322470bcd3bb05fc67d2c89eedd737f8b4b67a))\n\n\n\n## [2.0.0-beta.20](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.15...vue-moveable@2.0.0-beta.20) (2022-06-07)\n\n\n### :rocket: New Features\n\n* add clippable keepRatio ([37da849](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/37da849e81454ea17be4510a81beeef852cfda9f))\n\n\n### :bug: Bug Fix\n\n* fix commonjs import bug #650 ([15403ce](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/15403cee70d3f4bf0b9e1311d3bc3086742d7090))\n* fix commonjs issue #650 ([89a5fb6](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/89a5fb6b4b2c04360db4d341d27668079016a579))\n* fix vue methods' return value ([cc0cb79](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/cc0cb7981e90c3973763c4fdde2c9cb03168a300))\n\n\n### :house: Code Refactoring\n\n* use yarn workspace ([73da295](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/73da295064845a3791782c1777a9c555272a0af0))\n\n\n### :mega: Other\n\n* publish packages ([3530f05](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/3530f0526081b0c010e6c964265b466713f0212e))\n* update demo configuration ([917123c](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/917123cdea2830e8e8f4a8d7b2a99654f16682ef))\n\n\n\n## [2.0.0-beta.15](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.13...vue-moveable@2.0.0-beta.15) (2022-05-01)\n\n\n### :mega: Other\n\n* update packages versions ([169c484](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/169c48417bb4bc07c59e227c545e379dbf43d15b))\n\n\n\n## [2.0.0-beta.13](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.12...vue-moveable@2.0.0-beta.13) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([585094f](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/585094f76ec6e1556159ac357d6ac83ebab953ae))\n\n\n\n## [2.0.0-beta.12](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.11...vue-moveable@2.0.0-beta.12) (2022-04-27)\n\n\n### :mega: Other\n\n* fix lerna-helper field ([faff016](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/faff016bbaf2da46b4e5633a0a883c2da99b106b))\n* update packages versions ([5cd2398](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/5cd2398dbb4dbbda24032641fe5bf111780b75fc))\n\n\n\n## [2.0.0-beta.11](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/compare/vue-moveable@2.0.0-beta.10...vue-moveable@2.0.0-beta.11) (2022-04-26)\n\n\n### :mega: Other\n\n* fix lerna scripts ([8041d2b](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/8041d2b20f542681bf5abd4792c95531e53b741d))\n* update packages versions ([a62ee58](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/a62ee58b9bc32f06edc95d55ea28b60c20881ac4))\n* upgrade storybook and typescript ([eff23fd](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/commit/eff23fd7340964ed0e3e6f5930e56558c4d91d18))\n"
  },
  {
    "path": "packages/vue-moveable/README.md",
    "content": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/logo.png\"/></p>\n<h2 align=\"middle\">Vue Moveable</h2>\n<p align=\"middle\">\n<a href=\"https://www.npmjs.com/package/vue-moveable\" target=\"_blank\"><img src=\"https://img.shields.io/npm/v/vue-moveable.svg?style=flat-square&color=007acc&label=version\" alt=\"npm version\" /></a>\n<img src=\"https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square\"/>\n<a href=\"https://github.com/daybrush/moveable/blob/master/LICENSE\" target=\"_blank\"><img src=\"https://img.shields.io/github/license/daybrush/moveable.svg?style=flat-square&label=license&color=08CE5D\"/></a>\n</p>\n<p align=\"middle\">A Vue Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.</p>\n<p align=\"middle\">\n    <a href=\"https://daybrush.com/moveable\" target=\"_blank\"><strong>Demo</strong></a> /\n    <a href=\"https://github.com/daybrush/moveable/tree/master/packages/vue3-moveable\" target=\"_blank\"><strong>Vue 3</strong></a> /\n    <a href=\"https://daybrush.com/moveable/storybook/\" target=\"_blank\"><strong>Storybook</strong></a> /\n    <a href=\"https://daybrush.com/moveable/release/latest/doc/\" target=\"_blank\"><strong>API</strong></a> /\n    <a href=\"https://github.com/daybrush/scena\" target=\"_blank\"><strong>Main Project</strong></a>\n</p>\n\n\n\n<table width=\"100%\" align=\"center\">\n<tr>\n<th colspan=\"4\">Moveable</th>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-draggable\"><strong>Draggable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-resizable\"><strong>Resizable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-scalable\"><strong>Scalable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-rotatable\"><strong>Rotatable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/draggable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/resizable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/scalable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/rotatable.gif\"/>\n</td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-warpable\"><strong>Warpable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html\"><strong>Pinchable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/group--group-draggable-resizable-rotatable\"><strong>Groupable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/snap-bound--snap-guidelines\"><strong>Snappable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/warpable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/pinchable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/groupable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/snappable.gif\"/></td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-clippable\"><strong>Clippable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-roundable\"><strong>Roundable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-origin-draggable\"><strong>OriginDraggable</strong></a></td>\n<td align=\"center\"><a href=\"https://github.com/daybrush/selecto\"><strong>Selecto</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/clippable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/roundable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/origindraggable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/selecto.gif\"/></td>\n</tr>\n</table>\n\n\n## 🔥 Features\n* **Draggable** refers to the ability to drag and move targets.\n* **Resizable** indicates whether the target's width and height can be increased or decreased.\n* **Scalable** indicates whether the target's x and y can be scale of transform.\n* **Rotatable** indicates whether the target can be rotated.\n* **Warpable** indicates whether the target can be warped(distorted, bented).\n* **Pinchable** indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.\n* **Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.\n* **Snappable** indicates whether to snap to the guideline.\n* **OriginDraggable*** indicates Whether to drag origin.\n* **Clippable** indicates Whether to clip the target.\n* **Roundable** indicates Whether to show and drag or double click border-radius.\n* Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)\n* Support Major Browsers\n* Support 3d Transform\n\n\n## ⚙️ Installation\n\n```sh\n$ npm i vue-moveable@beta\n```\n\n* Vue 3\n```sh\n$ npm i vue3-moveable\n```\n\n\n## 🚀 How to use\nIf you want to check the methods and events, please refer to the [**API documentation**](https://daybrush.com/moveable/release/latest/doc/).\n```vue\n<template>\n<div class=\"container\">\n    <div class=\"target\">Vue Moveable</div>\n    <Moveable\n        className=\"moveable\"\n        v-bind:target=\"['.target']\"\n        v-bind:draggable=\"true\"\n        v-bind:scalable=\"true\"\n        v-bind:rotatable=\"true\"\n        @drag=\"onDrag\"\n        @scale=\"onScale\"\n        @rotate=\"onRotate\"\n    />\n</div>\n</template>\n<script>\nimport Moveable from 'vue-moveable';\n\nexport default {\n  name: 'app',\n  components: {\n    Moveable,\n  },\n  methods: {\n    onDrag({ target, transform }) {\n      target.style.transform = transform;\n    },\n    onScale({ target, drag }) {\n      target.style.transform = drag.transform;\n    },\n    onRotate({ target, drag }) {\n      target.style.transform = drag.transform;\n    },\n  }\n}\n</script>\n```\n\n\n## ⚙️ Developments\n### `npm run serve`\n\nRuns the app in the development mode.<br/>\nOpen [http://localhost:8080](http://localhost:8080) to view it in the browser.\n\nThe page will reload if you make edits.<br/>\nYou will also see any lint errors in the console.\n\n\n\n## ⭐️ Show Your Support\nPlease give a ⭐️ if this project helped you!\n\n\n## 👏 Contributing\n\nIf you have any questions or requests or want to contribute to `moveable` or other packages, please write the [issue](https://github.com/daybrush/moveable/issues) or give me a Pull Request freely.\n\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](https://github.com/daybrush/moveable/blob/master/CONTRIBUTING.md)].\n\n<a href=\"https://github.com/daybrush/moveable/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=daybrush/moveable\" />\n</a>\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/moveable/issues) on GitHub.\n\n## Sponsors\n<p align=\"center\">\n\t<a href=\"https://daybrush.com/sponsors/sponsors.svg\">\n\t\t<img src=\"https://daybrush.com/sponsors/sponsors.svg\"/>\n\t</a>\n</p>\n\n\n\n## 📝 License\n\nThis project is [MIT](https://github.com/daybrush/moveable/blob/master/LICENSE) licensed.\n\n```\nMIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n"
  },
  {
    "path": "packages/vue-moveable/demo/App.vue",
    "content": "<template>\n  <div class=\"root\">\n    <div class=\"container\">\n      <div class=\"target\" ref=\"target\">Target</div>\n      <button @click=\"toggleDraggable\">Toggle {{draggable}}</button>\n      <moveable\n        v-bind:target=\"['.target']\"\n        v-bind:draggable=\"draggable\"\n        v-bind:throttleDrag=\"1\"\n        v-bind:edgeDraggable=\"false\"\n        v-bind:startDragRotate=\"0\"\n        v-bind:throttleDragRotate=\"0\"\n        @drag=\"onDrag\"\n      />\n    </div>\n  </div>\n</template>\n<script>\nimport Moveable from \"../src/Moveable.vue\";\n\nexport default {\n    components: {\n        Moveable,\n    },\n    data(){\n        return {\n            draggable: true,\n        };\n    },\n    mounted() {\n        console.log(this);\n    },\n    methods: {\n        onDrag(e) {\n            e.target.style.transform = e.transform;\n        },\n        toggleDraggable() {\n            this.draggable = !this.draggable;\n        }\n    }\n}\n</script>\n<style>\nhtml,\nbody {\n  position: relative;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n}\n.description {\n  padding: 10px;\n}\n.root {\n  position: relative;\n}\n.container {\n  position: relative;\n  margin-top: 50px;\n}\n.target {\n  position: absolute;\n  width: 100px;\n  height: 100px;\n  top: 150px;\n  left: 100px;\n  line-height: 100px;\n  text-align: center;\n  background: #ee8;\n  color: #333;\n  font-weight: bold;\n  border: 1px solid #333;\n  box-sizing: border-box;\n}\n\n.target1 {\n  left: 120px;\n  top: 120px;\n}\n\n.target2 {\n  left: 300px;\n  top: 140px;\n}\n\n.target3 {\n  left: 180px;\n  top: 250px;\n}\n</style>\n"
  },
  {
    "path": "packages/vue-moveable/demo/index.ts",
    "content": "import Vue from 'vue';\nimport App from './App.vue';\n\n\nnew Vue({\n  render: (h: any) => h(App),\n}).$mount('#app');\n"
  },
  {
    "path": "packages/vue-moveable/demo/shims-vue.d.ts",
    "content": "declare module \"*.vue\" {\n    import Vue from \"vue\";\n    export default Vue;\n}\n"
  },
  {
    "path": "packages/vue-moveable/package.json",
    "content": "{\n    \"name\": \"vue-moveable\",\n    \"version\": \"2.0.0-beta.87\",\n    \"description\": \"A Vue Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.\",\n    \"types\": \"declaration/index.d.ts\",\n    \"main\": \"dist/moveable.cjs.js\",\n    \"module\": \"dist/moveable.esm.js\",\n    \"sideEffects\": false,\n    \"lernaHelperReleaseType\": \"prerelease\",\n    \"scripts\": {\n        \"serve\": \"vue-cli-service serve demo\",\n        \"build\": \"rm -rf dist && rollup -c && npm run declaration\",\n        \"declaration\": \"rm -rf declaration && tsc -p tsconfig.declaration.json && cp ./src/Moveable.vue.d.ts ./declaration\",\n        \"lint\": \"vue-cli-service lint --no-fix\"\n    },\n    \"keywords\": [\n        \"moveable\",\n        \"resizable\",\n        \"scalable\",\n        \"draggable\",\n        \"rotatable\",\n        \"warpable\",\n        \"pinchable\",\n        \"groupable\",\n        \"snappable\",\n        \"scrollable\",\n        \"movable\",\n        \"throttle\",\n        \"scroll\",\n        \"ratio\",\n        \"dom\",\n        \"resize\",\n        \"scale\",\n        \"drag\",\n        \"move\",\n        \"rotate\",\n        \"vue\",\n        \"warp\",\n        \"snap\",\n        \"pinch\"\n    ],\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/daybrush/moveable/blob/master/packages/vue-moveable\"\n    },\n    \"files\": [\n        \"./*\",\n        \"src/*\",\n        \"dist/*\",\n        \"declaration/*\"\n    ],\n    \"author\": \"Daybrush\",\n    \"license\": \"MIT\",\n    \"bugs\": {\n        \"url\": \"https://github.com/daybrush/moveable/issues\"\n    },\n    \"homepage\": \"https://daybrush.com/moveable\",\n    \"dependencies\": {\n        \"framework-utils\": \"^1.1.0\",\n        \"moveable\": \"~0.53.0\"\n    },\n    \"devDependencies\": {\n        \"@daybrush/builder\": \"0.1.2\",\n        \"@vue/cli-plugin-typescript\": \"^3.12.0\",\n        \"@vue/cli-service\": \"^3.12.0\",\n        \"rollup-plugin-vue\": \"^5.1.9\",\n        \"tslib\": \"^2.3.1\",\n        \"typescript\": \"^4.8 <4.9\",\n        \"vue\": \"^2.6.11\",\n        \"vue-template-compiler\": \"^2.6.11\"\n    },\n    \"nohoist\": [\n        \"**/@daybrush/builder\",\n        \"**/@daybrush/builder/**\"\n    ]\n}\n"
  },
  {
    "path": "packages/vue-moveable/postcss.config.js",
    "content": "module.exports = {\n  plugins: {\n    autoprefixer: {}\n  }\n}\n"
  },
  {
    "path": "packages/vue-moveable/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n    <link rel=\"icon\" href=\"<%= BASE_URL %>favicon.ico\">\n    <title>vue-moveable</title>\n  </head>\n  <body>\n    <noscript>\n      <strong>We're sorry but vue-moveable doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>\n    </noscript>\n    <div id=\"app\"></div>\n    <!-- built files will be auto injected -->\n  </body>\n</html>\n"
  },
  {
    "path": "packages/vue-moveable/rollup.config.js",
    "content": "const buildHelper = require(\"@daybrush/builder\");\nconst vuePlugin = require(\"rollup-plugin-vue\");\n\nconst defaultOptions = {\n    sourcemap: true,\n    input: \"./src/index.ts\",\n    exports: \"named\",\n    external: true,\n    plugins: [\n        vuePlugin(),\n    ],\n    outputOptions: {\n        interop: \"auto\",\n    },\n};\nmodule.exports = buildHelper([\n    {\n        ...defaultOptions,\n        format: \"es\",\n        output: \"./dist/moveable.esm.js\",\n    },\n    {\n        ...defaultOptions,\n        format: \"cjs\",\n        input: \"./src/index.umd.ts\",\n        exports: \"default\",\n        output: \"./dist/moveable.cjs.js\",\n    },\n]);\n"
  },
  {
    "path": "packages/vue-moveable/src/Moveable.vue",
    "content": "<template>\n  <div ref=\"moveableElement\"></div>\n</template>\n<script lang=\"ts\">\nimport VanillaMoveable, {\n  MoveableOptions,\n  EVENTS,\n  PROPERTIES,\n  METHODS,\n} from \"moveable\";\nimport { isUndefined } from \"@daybrush/utils\";\n\nconst methods: Record<string, any> = {};\n\nMETHODS.forEach((name) => {\n  methods[name] = function (this: any, ...args: any[]) {\n    return this.$_moveable[name](...args);\n  };\n});\nconst watch: Record<string, any> = {};\n\nPROPERTIES.forEach((name) => {\n  watch[name] = function (this: any, value: any) {\n    this.$_moveable[name] = value;\n  };\n});\nexport default {\n  name: \"moveable\",\n  methods,\n  props: PROPERTIES,\n  watch,\n  mounted(this: any) {\n    const options: Partial<MoveableOptions> = {};\n    const props = this.$props;\n    PROPERTIES.forEach((name) => {\n      const value = props[name];\n\n      if (!isUndefined(value)) {\n        (options as any)[name] = props[name];\n      }\n    });\n    const refs = this.$refs;\n    const moveableElement = refs.moveableElement;\n\n    const moveable = new VanillaMoveable(moveableElement, {\n      ...options,\n      warpSelf: true,\n    });\n\n    EVENTS.forEach((name) => {\n      moveable.on(name as any, (e: any) => {\n        this.$emit(name, { ...e });\n      });\n    });\n    this.$_moveable = moveable;\n  },\n  beforeDestroy(this: any) {\n    this.$_moveable.destroy();\n  },\n};\n</script>\n"
  },
  {
    "path": "packages/vue-moveable/src/Moveable.vue.d.ts",
    "content": "import { MethodInterface } from \"framework-utils\";\nimport VanillaMoveable, { MoveableProperties, MoveableInterface } from \"moveable\";\n\ninterface VueMoveableInterface\n    extends MoveableProperties, MoveableInterface {\n    $el: HTMLElement;\n    $_moveable: VanillaMoveable;\n    $props: MoveableProperties;\n}\n\ndeclare const VueMoveable: VueMoveableInterface;\ntype VueMoveable = VueMoveableInterface;\n\nexport default VueMoveable;\n"
  },
  {
    "path": "packages/vue-moveable/src/global.d.ts",
    "content": "declare module \"*.vue\" {\n    import Vue from \"vue\";\n    export default Vue;\n}\n"
  },
  {
    "path": "packages/vue-moveable/src/index.ts",
    "content": "// import VueMoveable from './VueMoveable';\nimport Moveable from './Moveable.vue';\n\nexport default Moveable;\nexport { Moveable as VueMoveable };\nexport * from \"moveable\";\n\n"
  },
  {
    "path": "packages/vue-moveable/src/index.umd.ts",
    "content": "import Moveable, * as modules from './index';\n\nfor (const name in modules) {\n    (Moveable as any)[name] = (modules as any)[name];\n}\n\nexport default Moveable;\n"
  },
  {
    "path": "packages/vue-moveable/tsconfig.declaration.json",
    "content": "{\n  \"extends\": \"./tsconfig\",\n  \"compilerOptions\": {\n    \"removeComments\": true,\n    \"declaration\": true,\n    \"emitDeclarationOnly\": true,\n    \"declarationDir\": \"declaration\"\n  },\n  \"include\": [\n    \"src/**/*.ts\",\n    \"src/**/*.tsx\",\n    \"src/**/*.vue\"\n  ]\n}\n"
  },
  {
    "path": "packages/vue-moveable/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"module\": \"esnext\",\n    \"strict\": true,\n    \"jsx\": \"preserve\",\n    \"importHelpers\": true,\n    \"moduleResolution\": \"node\",\n    \"experimentalDecorators\": true,\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"sourceMap\": true,\n    \"baseUrl\": \".\",\n    \"types\": [\n      \"webpack-env\"\n    ],\n    \"paths\": {\n      \"@/*\": [\n        \"src/*\"\n      ]\n    },\n    \"lib\": [\n      \"esnext\",\n      \"dom\",\n      \"dom.iterable\",\n      \"scripthost\"\n    ]\n  },\n  \"include\": [\n    \"src/**/*.ts\",\n    \"src/**/*.tsx\",\n    \"src/**/*.vue\",\n    \"tests/**/*.ts\",\n    \"tests/**/*.tsx\"\n  ],\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n"
  },
  {
    "path": "packages/vue3-moveable/.browserslistrc",
    "content": "> 1%\nlast 2 versions\n"
  },
  {
    "path": "packages/vue3-moveable/.gitignore",
    "content": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n"
  },
  {
    "path": "packages/vue3-moveable/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [0.28.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.27.0...vue3-moveable@0.28.0) (2023-12-03)\n\n\n### :mega: Other\n\n* publish packages ([f9a0eed](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/f9a0eed9db93c1fa3522138e9c7604287f0ce21f))\n\n\n\n## [0.27.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.26.2...vue3-moveable@0.27.0) (2023-10-28)\n\n\n### :mega: Other\n\n* publish packages ([1a65454](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/1a654540f1390648d7e4db910d0673acff190007))\n\n\n\n## [0.26.2](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.26.1...vue3-moveable@0.26.2) (2023-09-19)\n\n\n### :mega: Other\n\n* publish packages ([ecf15ab](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/ecf15ab399bb4d9f6752cb84b0d6b06d15e5c426))\n\n\n\n## [0.26.1](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.26.0...vue3-moveable@0.26.1) (2023-07-11)\n\n\n### :mega: Other\n\n* publish packages ([27bda8e](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/27bda8ea3d9751847fc073519a832b3464242d3c))\n\n\n\n## [0.26.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.25.2...vue3-moveable@0.26.0) (2023-07-09)\n\n\n### :mega: Other\n\n* publish packages ([25cae7f](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/25cae7f46aa28dcb948a8690fd6062b7e15d72ff))\n\n\n\n## [0.25.2](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.25.1...vue3-moveable@0.25.2) (2023-07-04)\n\n\n### :mega: Other\n\n* publish packages ([9467cf4](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/9467cf45fd2871573df8886eb134c67a8b0f916d))\n\n\n\n## [0.25.1](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.24.1...vue3-moveable@0.25.1) (2023-07-02)\n\n\n### :mega: Other\n\n* publish packages ([5697e80](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/5697e8050f486a83ea409b856d1f670759ba6910))\n* publish packages ([5e76998](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/5e76998ba0a90efcbb0c2e4fe8030ca47a1842d4))\n\n\n\n## [0.24.1](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.24.0...vue3-moveable@0.24.1) (2023-06-28)\n\n\n### :house: Code Refactoring\n\n* change rollup to vite ([213f346](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/213f346257289eaec6f3f6f618e8fba33859c384))\n\n\n### :mega: Other\n\n* fix update modules ([bb608dc](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/bb608dc0d1d9eb13e538d1026c05809d89757b1d))\n* publish packages ([510d7cd](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/510d7cdf76eef4a17cc75d95634ebcb6d9688f8e))\n\n\n\n## [0.24.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.23.0...vue3-moveable@0.24.0) (2023-06-25)\n\n\n### :mega: Other\n\n* publish packages ([f893cca](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/f893ccaa176d31ef9ddb241d2cd4a1fb098cdae0))\n\n\n\n## [0.23.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.22.9...vue3-moveable@0.23.0) (2023-06-04)\n\n\n### :mega: Other\n\n* update packages ([8d65572](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/8d65572384ae0fdff288fe78fbeb5d249b070eb7))\n\n\n\n## [0.22.9](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.22.8...vue3-moveable@0.22.9) (2023-05-16)\n\n\n### :mega: Other\n\n* publish packages ([5bd22bb](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/5bd22bb009e10a4f8032f35c2ae3b490f4d94e5b))\n\n\n\n## [0.22.8](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.22.7...vue3-moveable@0.22.8) (2023-05-15)\n\n\n### :mega: Other\n\n* publish packages ([91aa8bc](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/91aa8bc1bdefc65cde8c032f1c7ba13ca54ad2fa))\n\n\n\n## [0.22.7](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.22.6...vue3-moveable@0.22.7) (2023-05-09)\n\n\n### :mega: Other\n\n* publish packages ([40dd902](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/40dd9022c41244ab009d621861ddc2ac63768748))\n\n\n\n## [0.22.6](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.22.0...vue3-moveable@0.22.6) (2023-05-08)\n\n\n### :rocket: New Features\n\n* update croact version #902 ([e328e21](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/e328e2170438fe27f60f307ae976183fbfb5e96e))\n\n\n### :bug: Bug Fix\n\n* fix files filed #910 #909 #907 ([a4995ab](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/a4995ab1acb3a34974e1d5a20d17fb2ee17ddc0c))\n\n\n### :mega: Other\n\n* publish packages ([d0f0532](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/d0f0532bfb42fe98ee95748839a639fddbe4b9d6))\n* publish packages ([e1e86a9](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/e1e86a95ebff9d18ad7a5ebede3bd5bd66465b5d))\n* publish packages ([60a747e](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/60a747ee3c373f83fb759a8482e2365e77dcb5e8))\n\n\n\n## [0.22.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.21.1...vue3-moveable@0.22.0) (2023-05-01)\n\n\n### :mega: Other\n\n* publish packages ([24934e3](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/24934e317de2e5ff622bd9ab0dec8d75a7c05c48))\n\n\n\n## [0.21.1](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.21.0...vue3-moveable@0.21.1) (2023-04-16)\n\n\n### :mega: Other\n\n* publish packages ([a623eda](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/a623eda2702067397159742dd0c6ed16b99bbe22))\n\n\n\n## [0.21.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.20.0...vue3-moveable@0.21.0) (2023-04-13)\n\n\n### :bug: Bug Fix\n\n* fix vue3 type ([d980b35](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/d980b3579572d150b27736e81ca7ba2580ee0a8a))\n\n\n### :mega: Other\n\n* publish packages ([1177427](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/11774277bafd9c60e9cef3c9a6fa38a3e1c4077d))\n\n\n\n## [0.20.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.19.4...vue3-moveable@0.20.0) (2023-03-26)\n\n\n### :mega: Other\n\n* publish packages ([7580d27](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/7580d272fe857aadfbdbc9df264e0a413dd56588))\n\n\n\n## [0.19.4](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.19.3...vue3-moveable@0.19.4) (2023-03-21)\n\n\n### :memo: Documentation\n\n* fix README ([7426492](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/7426492de210ab6f38d411d96e6d843d7423f555))\n\n\n### :mega: Other\n\n* publish packages ([ae54ef4](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/ae54ef4c660ae789867e4286990f234cc808a379))\n\n\n\n## [0.19.3](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.19.2...vue3-moveable@0.19.3) (2023-03-14)\n\n\n### :memo: Documentation\n\n* fix story url ([8977306](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/897730620480d8e830c4b53401a28d03b42b9a5f))\n\n\n### :mega: Other\n\n* update packages ([5b03d09](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/5b03d09a0cd298d47597fc8c8c9c6fdd4cd5a267))\n\n\n\n## [0.19.2](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.19.0...vue3-moveable@0.19.2) (2023-03-10)\n\n\n### :mega: Other\n\n* publish packages ([5589402](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/55894029a463f96a1f42827330b092be3fb63bf2))\n* update packages #856 #847 ([a78c8e3](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/a78c8e3c7ff8c3eb347a7617ddc76c807b57633e))\n\n\n\n## [0.19.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.18.1...vue3-moveable@0.19.0) (2023-03-08)\n\n\n### :mega: Other\n\n* publish packages ([645e290](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/645e290a53b477b468042e05447e2f8f8aea6ed0))\n\n\n\n## [0.18.1](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.17.1...vue3-moveable@0.18.1) (2023-01-29)\n\n\n### :mega: Other\n\n* publish packages ([24c9567](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/24c9567e2ec00392d2d445298031c39de0331eae))\n* publish packages ([0e0a03d](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/0e0a03dd6c234ded050db8206e585c5fa2da1848))\n\n\n\n## [0.17.1](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.17.0...vue3-moveable@0.17.1) (2022-12-16)\n\n\n### :mega: Other\n\n* publish packages ([d088ad9](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/d088ad9ed64889f4fd6143b89410f5d5e372105f))\n\n\n\n## [0.17.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.16.1...vue3-moveable@0.17.0) (2022-12-10)\n\n\n### :mega: Other\n\n* publish packages ([ab42598](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/ab42598cb7a6175450125c5e55093cf891a33692))\n\n\n\n## [0.16.1](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.16.0...vue3-moveable@0.16.1) (2022-12-05)\n\n\n### :mega: Other\n\n* publish packages ([9ee9bc9](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/9ee9bc9c76f6c4b317548470b5b4894c6a462be1))\n\n\n\n## [0.16.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.15.1...vue3-moveable@0.16.0) (2022-12-03)\n\n\n### :mega: Other\n\n* publish packages ([4739df4](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/4739df488cdf3c32cb4ca4e024063c5c44fbaf0c))\n\n\n\n## [0.15.1](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.15.0...vue3-moveable@0.15.1) (2022-11-28)\n\n\n### :mega: Other\n\n* publish packages ([746c40b](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/746c40b2a2f31f2f371f9110018c89e64c08a525))\n\n\n\n## [0.15.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.14.0...vue3-moveable@0.15.0) (2022-11-27)\n\n\n### :memo: Documentation\n\n* fix README ([3a153c8](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/3a153c849b7279ec5fd603167117c88f25a7149c))\n\n\n### :mega: Other\n\n* publish packages ([3d5ac5a](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/3d5ac5ad855d98a2f555174cc46ec09c148d6a20))\n* publish packages ([92eb72d](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/92eb72df6110eb40a66b4726740240acb43e9745))\n\n\n\n## [0.14.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.13.1...vue3-moveable@0.14.0) (2022-11-13)\n\n\n### :mega: Other\n\n* publish packages ([0780d7a](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/0780d7a204e5f1fa13070d4fa3ca657dfe3ee4af))\n\n\n\n## [0.13.1](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.13.0...vue3-moveable@0.13.1) (2022-11-06)\n\n\n### :mega: Other\n\n* publish packages ([64e846b](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/64e846bb0e606756bc0b87c92b2b1052b458b9f7))\n\n\n\n## [0.13.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.12.0...vue3-moveable@0.13.0) (2022-11-04)\n\n\n### :mega: Other\n\n* publish packages ([b6896b3](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/b6896b340dd1f78777bd63c48e8545895df9aa5e))\n* update packages ([1ba698e](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/1ba698e996efe9c7c487823fe513ef43592cd6e9))\n\n\n\n## [0.12.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.11.4...vue3-moveable@0.12.0) (2022-10-17)\n\n\n### :bug: Bug Fix\n\n* fix vue3 type #766 ([294e6f5](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/294e6f530f508dc603544cfc3ced219b450cbe5c))\n\n\n### :mega: Other\n\n* publish packages ([75db134](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/75db1345ab1119dd9a5270c7c11de455888c2627))\n* publish packages ([47f5335](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/47f53351792bf5264c6d66745088e0571cedc3aa))\n* update packages ([61730d5](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/61730d5c143d4027c55a714c764efe77bbebe5bf))\n\n\n\n## [0.11.4](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.11.1...vue3-moveable@0.11.4) (2022-10-10)\n\n\n### :mega: Other\n\n* publish packages ([9e3ee2f](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/9e3ee2ff44dea473e7aa73e4d501c2d23062f40d))\n* publish packages ([16b2516](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/16b251618307faad8f8f3fc5433b27ed1466311c))\n\n\n\n## [0.11.1](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.11.0...vue3-moveable@0.11.1) (2022-09-19)\n\n\n### :mega: Other\n\n* publish packages ([2954e37](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/2954e37b9a4e2100a8a55c0d49d279e7f994fd94))\n\n\n\n## [0.11.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.10.4...vue3-moveable@0.11.0) (2022-09-15)\n\n\n### :mega: Other\n\n* update packages ([e5774a9](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/e5774a9becd500d154e8d354017dcbd80505ba13))\n\n\n\n## [0.10.4](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.10.3...vue3-moveable@0.10.4) (2022-08-24)\n\n\n### :mega: Other\n\n* publish packages ([d57ebb1](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/d57ebb130006c47e3a687d2b417fe3fe7f30149a))\n\n\n\n## [0.10.3](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.10.1...vue3-moveable@0.10.3) (2022-08-23)\n\n\n### :mega: Other\n\n* publish packages ([3597bc5](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/3597bc5fd58cdec56fd4ff8916380a6f3709f7f5))\n\n\n\n## [0.10.1](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.10.0...vue3-moveable@0.10.1) (2022-08-12)\n\n\n### :mega: Other\n\n* publish packages ([6be7e81](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/6be7e8122b8edd2e323a039cdbb73381de74e14f))\n\n\n\n## [0.10.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.9.3...vue3-moveable@0.10.0) (2022-08-06)\n\n\n### :mega: Other\n\n* publish packages ([80005ba](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/80005bada5651afd0c5487a193ab321b22ab1b55))\n\n\n\n## [0.9.3](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.9.2...vue3-moveable@0.9.3) (2022-08-03)\n\n\n### :mega: Other\n\n* publish packages ([5468ff7](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/5468ff763bfa3f30e637ce8f504af09152b22c5c))\n\n\n\n## [0.9.2](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.8.0...vue3-moveable@0.9.2) (2022-08-01)\n\n\n### :mega: Other\n\n* publish packages ([0076577](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/00765776ba92b5ca691c1aefd1c20687952373d9))\n* publish packages ([ffa0c18](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/ffa0c18bb6970d6f8d88a49db23b11620e704618))\n* publish packages ([958ebac](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/958ebace6032eafb17f1ce366394b440671b45b3))\n\n\n\n## [0.8.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.7.0...vue3-moveable@0.8.0) (2022-07-25)\n\n\n### :bug: Bug Fix\n\n* remove wrong react types #703 ([25dced4](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/25dced4f1531cc46d77601f71674031aa58fdf0b))\n\n\n### :memo: Documentation\n\n* Update Vue3-moveable code example (#704) ([21c7629](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/21c76295808454d158a36fb74028b3dbe7b3466f))\n\n\n### :mega: Other\n\n* publish packages ([63e03d1](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/63e03d1d5f69e56c7df6d357c58d7acd06932e80))\n\n\n\n## [0.7.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.6.2...vue3-moveable@0.7.0) (2022-07-21)\n\n\n### :bug: Bug Fix\n\n* fix files field in package.json #700 ([5130109](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/51301099b5a9a9764500c09ce61e4bf65c7c60ef))\n\n\n### :mega: Other\n\n* publish packages ([da24696](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/da24696977c24b6ea54a433192d15bb7ecbc62e9))\n* update `react-compat-moveable` ([712ae6f](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/712ae6fb49dec3f4e40a3cd664f63625d7cd5669))\n\n\n\n## [0.6.2](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.6.0...vue3-moveable@0.6.2) (2022-07-17)\n\n\n### :bug: Bug Fix\n\n* fix files field in package.json #700 ([48ce548](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/48ce548438dd0a7da9f544730b2fc3ab65073775))\n\n\n### :mega: Other\n\n* publish packages ([5d89af5](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/5d89af521d1a288d4d9ca7923e0e9654e8f97d53))\n\n\n\n## [0.6.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.5.0...vue3-moveable@0.6.0) (2022-07-17)\n\n\n### :mega: Other\n\n* publish packages ([2a4940f](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/2a4940f74997fae24c7d77c553a6bc6be1301d40))\n\n\n\n## [0.5.0](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.4.9...vue3-moveable@0.5.0) (2022-06-09)\n\n\n### :mega: Other\n\n* publish packages ([b432247](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/b4322470bcd3bb05fc67d2c89eedd737f8b4b67a))\n\n\n\n## [0.4.9](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.4.8...vue3-moveable@0.4.9) (2022-06-07)\n\n\n### :bug: Bug Fix\n\n* fix commonjs import bug #650 ([15403ce](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/15403cee70d3f4bf0b9e1311d3bc3086742d7090))\n* fix vue methods' return value ([cc0cb79](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/cc0cb7981e90c3973763c4fdde2c9cb03168a300))\n\n\n### :house: Code Refactoring\n\n* use yarn workspace ([73da295](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/73da295064845a3791782c1777a9c555272a0af0))\n\n\n### :mega: Other\n\n* publish packages ([3530f05](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/3530f0526081b0c010e6c964265b466713f0212e))\n* update demo configuration ([917123c](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/917123cdea2830e8e8f4a8d7b2a99654f16682ef))\n\n\n\n## [0.4.8](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.4.6...vue3-moveable@0.4.8) (2022-05-01)\n\n\n### :mega: Other\n\n* update packages versions ([169c484](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/169c48417bb4bc07c59e227c545e379dbf43d15b))\n\n\n\n## [0.4.6](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.4.5...vue3-moveable@0.4.6) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([585094f](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/585094f76ec6e1556159ac357d6ac83ebab953ae))\n\n\n\n## [0.4.5](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.4.4...vue3-moveable@0.4.5) (2022-04-27)\n\n\n### :mega: Other\n\n* update packages versions ([5cd2398](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/5cd2398dbb4dbbda24032641fe5bf111780b75fc))\n\n\n\n## [0.4.4](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/compare/vue3-moveable@0.4.3...vue3-moveable@0.4.4) (2022-04-26)\n\n\n### :mega: Other\n\n* update packages versions ([a62ee58](https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/commit/a62ee58b9bc32f06edc95d55ea28b60c20881ac4))\n"
  },
  {
    "path": "packages/vue3-moveable/README.md",
    "content": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/logo.png\"/></p>\n<h2 align=\"middle\">Vue 3 Moveable</h2>\n<p align=\"middle\">\n<a href=\"https://www.npmjs.com/package/vue3-moveable\" target=\"_blank\"><img src=\"https://img.shields.io/npm/v/vue3-moveable.svg?style=flat-square&color=007acc&label=version\" alt=\"npm version\" /></a>\n<img src=\"https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square\"/>\n<a href=\"https://github.com/daybrush/moveable/blob/master/LICENSE\" target=\"_blank\"><img src=\"https://img.shields.io/github/license/daybrush/moveable.svg?style=flat-square&label=license&color=08CE5D\"/></a>\n</p>\n<p align=\"middle\">A Vue 3 Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.</p>\n<p align=\"middle\">\n    <a href=\"https://daybrush.com/moveable\" target=\"_blank\"><strong>Demo</strong></a> /\n    <a href=\"https://github.com/daybrush/moveable/tree/master/packages/vue-moveable\" target=\"_blank\"><strong>Vue 2</strong></a> /\n    <a href=\"https://daybrush.com/moveable/storybook/\" target=\"_blank\"><strong>Storybook</strong></a> /\n    <a href=\"https://daybrush.com/moveable/release/latest/doc/\" target=\"_blank\"><strong>API</strong></a> /\n    <a href=\"https://github.com/daybrush/scena\" target=\"_blank\"><strong>Main Project</strong></a>\n</p>\n\n\n\n<table width=\"100%\" align=\"center\">\n<tr>\n<th colspan=\"4\">Moveable</th>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-draggable\"><strong>Draggable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-resizable\"><strong>Resizable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-scalable\"><strong>Scalable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-rotatable\"><strong>Rotatable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/draggable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/resizable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/scalable.gif\"/>\n</td>\n<td align=\"center\">\n<img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/rotatable.gif\"/>\n</td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-warpable\"><strong>Warpable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html\"><strong>Pinchable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/group--group-draggable-resizable-rotatable\"><strong>Groupable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/snap-bound--snap-guidelines\"><strong>Snappable</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/warpable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/pinchable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/groupable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/snappable.gif\"/></td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-clippable\"><strong>Clippable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-roundable\"><strong>Roundable</strong></a></td>\n<td align=\"center\"><a href=\"https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-origin-draggable\"><strong>OriginDraggable</strong></a></td>\n<td align=\"center\"><a href=\"https://github.com/daybrush/selecto\"><strong>Selecto</strong></a></td>\n</tr>\n<tr>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/clippable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/roundable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/origindraggable.gif\"/></td>\n<td align=\"center\"><img src=\"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/selecto.gif\"/></td>\n</tr>\n</table>\n\n\n## 🔥 Features\n* **Draggable** refers to the ability to drag and move targets.\n* **Resizable** indicates whether the target's width and height can be increased or decreased.\n* **Scalable** indicates whether the target's x and y can be scale of transform.\n* **Rotatable** indicates whether the target can be rotated.\n* **Warpable** indicates whether the target can be warped(distorted, bented).\n* **Pinchable** indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.\n* **Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.\n* **Snappable** indicates whether to snap to the guideline.\n* **OriginDraggable*** indicates Whether to drag origin.\n* **Clippable** indicates Whether to clip the target.\n* **Roundable** indicates Whether to show and drag or double click border-radius.\n* Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)\n* Support Major Browsers\n* Support 3d Transform\n\n\n## ⚙️ Installation\n\n* Vue 3\n```sh\n$ npm i vue3-moveable\n```\n\n* Vue 2\n```sh\n$ npm i vue-moveable@beta\n```\n\n## 🚀 How to use\nIf you want to check the methods and events, please refer to the [**API documentation**](https://daybrush.com/moveable/release/latest/doc/).\n\n```vue\n<template>\n<div class=\"container\">\n    <div class=\"target\" ref=\"target\">Vue Moveable</div>\n    <Moveable\n        className=\"moveable\"\n        v-bind:target=\"['.target']\"\n        v-bind:draggable=\"true\"\n        v-bind:scalable=\"true\"\n        v-bind:rotatable=\"true\"\n        @drag=\"onDrag\"\n        @scale=\"onScale\"\n        @rotate=\"onRotate\"\n    />\n</div>\n</template>\n<script>\nimport Moveable from \"vue3-moveable\";\n\nexport default {\n  name: \"app\",\n  components: {\n    Moveable,\n  },\n  methods: {\n    onDrag({ transform }) {\n        this.$refs.target.style.transform = transform;\n    },\n    onScale({ drag }) {\n        this.$refs.target.style.transform = drag.transform;\n    },\n    onRotate({ drag }) {\n        this.$refs.target.style.transform = drag.transform;\n    },\n  }\n}\n</script>\n```\n\n\n## ⚙️ Developments\n### `npm run serve`\n\nRuns the app in the development mode.<br/>\nOpen [http://localhost:8080](http://localhost:8080) to view it in the browser.\n\nThe page will reload if you make edits.<br/>\nYou will also see any lint errors in the console.\n\n\n\n## ⭐️ Show Your Support\nPlease give a ⭐️ if this project helped you!\n\n\n## 👏 Contributing\n\nIf you have any questions or requests or want to contribute to `moveable` or other packages, please write the [issue](https://github.com/daybrush/moveable/issues) or give me a Pull Request freely.\n\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](https://github.com/daybrush/moveable/blob/master/CONTRIBUTING.md)].\n\n<a href=\"https://github.com/daybrush/moveable/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=daybrush/moveable\" />\n</a>\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/moveable/issues) on GitHub.\n\n## Sponsors\n<p align=\"center\">\n\t<a href=\"https://daybrush.com/sponsors/sponsors.svg\">\n\t\t<img src=\"https://daybrush.com/sponsors/sponsors.svg\"/>\n\t</a>\n</p>\n\n\n\n\n## 📝 License\n\nThis project is [MIT](https://github.com/daybrush/moveable/blob/master/LICENSE) licensed.\n\n```\nMIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n"
  },
  {
    "path": "packages/vue3-moveable/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite + Vue + TS</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script type=\"module\" src=\"/src/main.ts\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "packages/vue3-moveable/package.json",
    "content": "{\n    \"name\": \"vue3-moveable\",\n    \"version\": \"0.28.0\",\n    \"description\": \"A Vue 3 Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.\",\n    \"types\": \"dist/index.d.ts\",\n    \"main\": \"dist/moveable.cjs.js\",\n    \"module\": \"dist/moveable.js\",\n    \"sideEffects\": false,\n    \"type\": \"module\",\n    \"scripts\": {\n        \"dev\": \"vite\",\n        \"build\": \"vite build && vue-tsc\",\n        \"preview\": \"vite preview\"\n    },\n    \"keywords\": [\n        \"moveable\",\n        \"resizable\",\n        \"scalable\",\n        \"draggable\",\n        \"rotatable\",\n        \"warpable\",\n        \"pinchable\",\n        \"groupable\",\n        \"snappable\",\n        \"scrollable\",\n        \"movable\",\n        \"throttle\",\n        \"scroll\",\n        \"ratio\",\n        \"dom\",\n        \"resize\",\n        \"scale\",\n        \"drag\",\n        \"move\",\n        \"rotate\",\n        \"vue\",\n        \"warp\",\n        \"snap\",\n        \"pinch\"\n    ],\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable\"\n    },\n    \"author\": \"Daybrush\",\n    \"license\": \"MIT\",\n    \"bugs\": {\n        \"url\": \"https://github.com/daybrush/moveable/issues\"\n    },\n    \"homepage\": \"https://daybrush.com/moveable\",\n    \"dependencies\": {\n        \"framework-utils\": \"^1.1.0\",\n        \"moveable\": \"~0.53.0\"\n    },\n    \"files\": [\n        \"./*\",\n        \"src/*\",\n        \"dist/*\",\n        \"declaration/*\"\n    ],\n    \"devDependencies\": {\n        \"@vitejs/plugin-vue\": \"^4.2.3\",\n        \"tslib\": \"^2.3.1\",\n        \"typescript\": \"^4.8 <4.9\",\n        \"vite\": \"^4.3.0\",\n        \"vite-plugin-dts\": \"^3.0.0-beta.3\",\n        \"vue\": \"^3.3.4\",\n        \"vue-tsc\": \"^1.8.1\"\n    }\n}\n"
  },
  {
    "path": "packages/vue3-moveable/src/App.vue",
    "content": "<script setup lang=\"ts\">\nimport Moveable, { OnRender } from \"./components/index.ts\";\n\nconst onRender = (e: OnRender) => {\n    e.target.style.cssText += e.cssText;\n};\n</script>\n\n<template>\n    <div>\n        <div class=\"target\"></div>\n        <Moveable target=\".target\" :draggable=\"true\" @render=\"onRender\"></Moveable>\n    </div>\n</template>\n\n<style scoped>\n.target {\n    position: relative;\n    width: 100px;\n    height: 100px;\n    background: #f55;\n}\n\n.logo {\n    height: 6em;\n    padding: 1.5em;\n    will-change: filter;\n    transition: filter 300ms;\n}\n\n.logo:hover {\n    filter: drop-shadow(0 0 2em #646cffaa);\n}\n\n.logo.vue:hover {\n    filter: drop-shadow(0 0 2em #42b883aa);\n}</style>\n"
  },
  {
    "path": "packages/vue3-moveable/src/components/Moveable.vue",
    "content": "<template>\n    <div ref=\"moveableElement\"></div>\n</template>\n<script lang=\"ts\">\nimport VanillaMoveable, {\n    MoveableOptions,\n    EVENTS,\n    PROPERTIES,\n    METHODS,\n    MoveableProperties,\n    MoveableInterface,\n    MoveableEvents,\n} from \"moveable\";\nimport { defineComponent } from \"vue\";\nimport { isUndefined } from \"@daybrush/utils\";\n\nconst methods: Record<string, any> = {};\n\nMETHODS.forEach((name) => {\n    methods[name] = function (this: any, ...args: any[]) {\n        return this.$_moveable[name](...args);\n    };\n});\nconst watch: Record<string, any> = {};\n\nPROPERTIES.forEach((name) => {\n    watch[name] = function (this: any, value: any) {\n        this.$_moveable[name] = value;\n    };\n});\n\nconst VueMoveable = defineComponent<\n    Partial<MoveableProperties>,\n    {},\n    {},\n    {},\n    { [key in keyof MoveableInterface]: MoveableInterface[key] },\n    {},\n    {},\n    { [key in keyof MoveableEvents]: (e: MoveableEvents[key]) => void }\n>({\n    name: \"moveable\",\n    methods,\n    props: PROPERTIES,\n    watch,\n    mounted(this: any) {\n        const options: Partial<MoveableOptions> = {};\n        const props = this.$props;\n        PROPERTIES.forEach((name) => {\n            const value = props[name];\n\n            if (!isUndefined(value)) {\n                (options as any)[name] = props[name];\n            }\n        });\n        const refs = this.$refs;\n        const moveableElement = refs.moveableElement;\n\n        const moveable = new VanillaMoveable(moveableElement, {\n            ...options,\n            warpSelf: true,\n        });\n\n        EVENTS.forEach((name) => {\n            moveable.on(name as any, (e: any) => {\n                this.$emit(name, { ...e });\n            });\n        });\n        this.$_moveable = moveable;\n    },\n    beforeUnmount(this: any) {\n        this.$_moveable.destroy();\n    },\n} as any);\n\ninterface VueMoveable extends Partial<MoveableProperties>, MoveableInterface {\n}\n\nexport default VueMoveable;\n</script>\n"
  },
  {
    "path": "packages/vue3-moveable/src/components/index.ts",
    "content": "import Moveable from './Moveable.vue';\n\n\nexport { Moveable as VueMoveable };\nexport * from 'moveable';\nexport default Moveable;\n"
  },
  {
    "path": "packages/vue3-moveable/src/components/index.umd.ts",
    "content": "import Moveable, * as modules from './index';\n\nfor (const name in modules) {\n    (Moveable as any)[name] = (modules as any)[name];\n}\n\nexport default Moveable;\n"
  },
  {
    "path": "packages/vue3-moveable/src/main.ts",
    "content": "import { createApp } from 'vue'\nimport './style.css'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n"
  },
  {
    "path": "packages/vue3-moveable/src/style.css",
    "content": ":root {\n  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n  line-height: 1.5;\n  font-weight: 400;\n\n  color-scheme: light dark;\n  color: rgba(255, 255, 255, 0.87);\n  background-color: #242424;\n\n  font-synthesis: none;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-text-size-adjust: 100%;\n}\n\na {\n  font-weight: 500;\n  color: #646cff;\n  text-decoration: inherit;\n}\na:hover {\n  color: #535bf2;\n}\n\nbody {\n  margin: 0;\n  display: flex;\n  place-items: center;\n  min-width: 320px;\n  min-height: 100vh;\n}\n\nh1 {\n  font-size: 3.2em;\n  line-height: 1.1;\n}\n\nbutton {\n  border-radius: 8px;\n  border: 1px solid transparent;\n  padding: 0.6em 1.2em;\n  font-size: 1em;\n  font-weight: 500;\n  font-family: inherit;\n  background-color: #1a1a1a;\n  cursor: pointer;\n  transition: border-color 0.25s;\n}\nbutton:hover {\n  border-color: #646cff;\n}\nbutton:focus,\nbutton:focus-visible {\n  outline: 4px auto -webkit-focus-ring-color;\n}\n\n.card {\n  padding: 2em;\n}\n\n#app {\n  max-width: 1280px;\n  margin: 0 auto;\n  padding: 2rem;\n  text-align: center;\n}\n\n@media (prefers-color-scheme: light) {\n  :root {\n    color: #213547;\n    background-color: #ffffff;\n  }\n  a:hover {\n    color: #747bff;\n  }\n  button {\n    background-color: #f9f9f9;\n  }\n}\n"
  },
  {
    "path": "packages/vue3-moveable/src/vite-env.d.ts",
    "content": "/// <reference types=\"vite/client\" />\n"
  },
  {
    "path": "packages/vue3-moveable/tsconfig.json",
    "content": "{\n    \"compilerOptions\": {\n        \"target\": \"ES2020\",\n        \"useDefineForClassFields\": true,\n        \"module\": \"ESNext\",\n        \"lib\": [\n            \"ES2020\",\n            \"DOM\",\n            \"DOM.Iterable\"\n        ],\n        \"skipLibCheck\": true,\n        /* Bundler mode */\n        \"moduleResolution\": \"node\",\n        \"resolveJsonModule\": true,\n        \"isolatedModules\": true,\n        \"jsx\": \"preserve\",\n        \"noEmit\": true,\n        \"declaration\": true,\n        \"outDir\": \"dist\",\n        \"declarationDir\": \"dist\",\n        \"baseUrl\": \".\",\n        /* Linting */\n        \"strict\": true,\n        \"noUnusedLocals\": true,\n        \"noUnusedParameters\": true,\n        \"noFallthroughCasesInSwitch\": true\n    },\n    \"include\": [\n        \"src/components/**/*.ts\",\n        \"src/components/**/*.d.ts\",\n        \"src/components/**/*.tsx\",\n        \"src/components/**/*.vue\"\n    ],\n    \"references\": [\n        {\n            \"path\": \"./tsconfig.node.json\"\n        }\n    ]\n}\n"
  },
  {
    "path": "packages/vue3-moveable/tsconfig.node.json",
    "content": "{\n  \"compilerOptions\": {\n    \"composite\": true,\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Node\",\n    \"allowSyntheticDefaultImports\": true\n  },\n  \"include\": [\"vite.config.ts\"]\n}\n"
  },
  {
    "path": "packages/vue3-moveable/vite.config.ts",
    "content": "import { resolve } from \"path\";\nimport { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\nimport dts from \"vite-plugin-dts\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n    build: {\n        lib: {\n            // Could also be a dictionary or array of multiple entry points\n            entry: resolve(__dirname, 'src/components/index.ts'),\n            name: 'Moveable',\n            formats: [\"cjs\", \"es\"],\n            // the proper extensions will be added\n            fileName: 'moveable',\n        },\n        rollupOptions: {\n            external: [\"vue\", \"moveable\", \"@daybrush/utils\", \"framework-utils\"],\n            output: {\n                // Provide global variables to use in the UMD build\n                // Add external deps here\n                globals: {\n                    vue: \"Vue\",\n                },\n            },\n        },\n        minify: false,\n    },\n    plugins: [\n        vue(),\n        dts()\n    ],\n})\n"
  },
  {
    "path": "static/scripts/custom.js",
    "content": "(function () {\n    window.dataLayer = window.dataLayer || [];\n    function gtag() { dataLayer.push(arguments); }\n    gtag('js', new Date());\n\n    gtag('config', 'G-TRBNXHQ0ZF');\n    var script = document.createElement(\"script\");\n\n    script.src = \"https://www.googletagmanager.com/gtag/js?id=G-TRBNXHQ0Z\";\n\n    document.body.appendChild(script);\n})();\n"
  },
  {
    "path": "storybook/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nstories/**/vue3/\nstories/**/vue2/\nstories/**/svelte/\nstories/**/script/\nstories/**/lit/\nstories/**/angular/\nstories/**/script-*.stories.tsx\nstories/**/vue3-*.stories.tsx\nstories/**/svelte-*.stories.tsx\nstories/**/angular-*.stories.tsx\n.nyc_output\ntest-static\n__snapshots__\n*.stories.mdx\n"
  },
  {
    "path": "storybook/.storybook/frameworkStories.js",
    "content": "const glob = require(\"glob\");\nconst path = require(\"path\");\nconst fs = require(\"fs\");\nconst ts = require(\"typescript\");\n\n\nfunction visitLoop(node, visitCallback) {\n    function visit(subNode) {\n        const result = visitCallback(subNode);\n\n        if (result === false) {\n            return;\n        }\n        ts.forEachChild(subNode, visit);\n    }\n    visit(node);\n}\n\nexports.makeStories = function makeStories() {\n    const groupList = glob.sync(\"./stories/**/react-*.stories.tsx\");\n\n    groupList.forEach(storiesPath => {\n        const absPath = path.resolve(__dirname, \"../\", storiesPath);\n        const fileName = path.basename(absPath);\n        const code = fs.readFileSync(absPath, \"utf-8\");\n        const sourceFile = ts.createSourceFile(\n            \"test.tsx\",\n            code,\n            ts.ScriptTarget.Latest,\n            false,\n            ts.ScriptKind.TSX,\n        );\n        let defaultTitle = \"\";\n        const stories = sourceFile.statements.map(st => {\n            if (ts.isExportAssignment(st)) {\n                visitLoop(st.expression, node => {\n                    if (ts.isPropertyAssignment(node) && node.name.escapedText === \"title\") {\n                        const { pos, end } = node.initializer;\n\n                        defaultTitle = code.slice(pos, end).replace(/\\s*\"([^\"]+)\"\\s*/g, \"$1\");\n                        return false;\n                    }\n                });\n            }\n            if (!ts.isVariableStatement(st) || !st.modifiers?.some(modifier => modifier.kind === ts.SyntaxKind.ExportKeyword)) {\n                return;\n            }\n            const declaration = st.declarationList.declarations[0];\n            const storyName = declaration.name.escapedText;\n            let appName = \"\";\n            visitLoop(declaration.initializer, node => {\n                if (ts.isPropertyAssignment(node) && node.name.escapedText === \"appName\") {\n                    const { pos, end } = node.initializer;\n\n                    appName = code.slice(pos, end).replace(/\\s*\"([^\"]+)\"\\s*/g, \"$1\");\n                    return false;\n                }\n            });\n            return {\n                appName,\n                storyName,\n            };\n        }).filter(Boolean);\n\n        const frameworkFileMap = {\n            \"angular\": \"InlineApp.ts\",\n            \"script\": \"App.js\",\n            \"vue3\": \"App.vue\",\n            \"svelte\": \"App.svelte\",\n        };\n\n        [\"angular\", \"script\", \"vue3\", \"svelte\"].forEach(frameworkName => {\n            const frameworkFileName = fileName.replace(\"react\", frameworkName);\n            const frameworkPath = path.resolve(path.resolve(__dirname, \"../\", storiesPath, \"../\", frameworkFileName));\n            fs.writeFileSync(frameworkPath, `\nimport { convertFrameworkStory } from \"../utils/story\";\nimport * as All from \"./${fileName}\";\n\nexport default {\n    title: \"${frameworkName}/${defaultTitle}\",\n};\n\n${stories.map(storyInfo => {\n                return `export const ${storyInfo.storyName} = convertFrameworkStory(\n    \"${frameworkName}\",\n    All.${storyInfo.storyName},\n    require(\"./${frameworkName}/${storyInfo.appName}/${frameworkFileMap[frameworkName]}\").default,\n);`;\n            }).join(\"\\n\")}\n`, \"utf-8\");\n        });\n    });\n\n}\n"
  },
  {
    "path": "storybook/.storybook/main.js",
    "content": "import { mergeConfig } from \"vite\";\n\nconst glob = require(\"glob\");\nconst path = require(\"path\");\nconst fs = require(\"fs\");\nconst { makeStories } = require(\"./frameworkStories\");\n\n\n/** @type { import('@storybook/react-vite').StorybookConfig } */\nconst config = {\n    stories: [\"../src/**/*.mdx\", \"../stories/**/*.stories.@(js|jsx|ts|tsx)\"],\n    staticDirs: [\n        \"../public\"\n    ],\n    addons: [\n      \"@storybook/addon-links\",\n      \"@storybook/addon-essentials\",\n      \"@storybook/addon-interactions\",\n    ],\n    viteFinal: (config, options) => {\n        const list = glob.sync(\"./stories/**/{react,script,vue2,vue3,svelte,angular,lit}/**/*.*\");\n        const codeObject = {};\n\n        list.forEach(filePath => {\n            const paths = filePath.split(\"/\");\n            const length = paths.length;\n\n            const frameworkIndex = paths.findIndex(text => [\"react\", \"script\", \"vue2\", \"vue3\", \"svelte\", \"angular\", \"lit\"].includes(text));\n\n            const framework = paths[frameworkIndex];\n            const fileName = framework === \"react\" ? paths[frameworkIndex + 1] : paths[length - 1];\n            const appName = framework === \"react\" ? paths[frameworkIndex + 1].split(\".\")[0] :  paths[length - 2];\n            const relativePath = paths.slice(2, frameworkIndex).join(\"/\");\n\n            codeObject[`${relativePath}-${framework}-${appName}-${fileName}`] = {\n                code: fs.readFileSync(path.resolve(__dirname,\"../\", filePath), \"utf-8\"),\n                appName,\n                fileName,\n                framework,\n                relativePath,\n            };\n        });\n\n\n        makeStories();\n\n\n        return mergeConfig(config, {\n            define: {\n                STORY_CODES: codeObject,\n            },\n        });\n    },\n    framework: {\n      name: \"@storybook/react-vite\",\n      options: {},\n    },\n    docs: {\n      autodocs: \"tag\",\n    },\n};\nexport default config;\n\n\n\n// require(\"./readme\");\n\n// const { DefinePlugin } = require(\"webpack\");\n// const path = require(\"path\");\n// const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\n\n// module.exports = {\n//     features: {\n//         interactionsDebugger: true,\n//         previewMdx2: true, // 👈 MDX 2 enabled here\n//     },\n//     typescript: {\n//         reactDocgen: \"react-docgen-typescript\",\n//         reactDocgenTypescriptOptions: {\n//             shouldExtractLiteralValuesFromEnum: true,\n//             propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),\n//         },\n//     },\n//     webpackFinal: (config) => {\n//         const definePlugin = new DefinePlugin({\n//             SKIP_TEST: process.env.SKIP_TEST,\n//             EXEC_TEST: process.env.EXEC_TEST,\n//         });\n//         config.module.rules.push({\n//             test: /\\.(ts|tsx)$/,\n//             loader: 'ts-loader',\n//             options: {\n//                 // disable type checker - we will use it in fork plugin\n//                 transpileOnly: true\n//             },\n//         });\n//         config.plugins.push(definePlugin);\n//         config.plugins.push(new ForkTsCheckerWebpackPlugin());\n//         config.resolve.alias[\"@/stories\"] = path.resolve(__dirname, \"../stories\");\n//         config.resolve.alias[\"moveable-helper\"] = path.resolve(__dirname, \"../stories/moveable-helper\");\n//         config.resolve.alias[\"@/react-moveable\"] = path.resolve(__dirname, \"../src\");\n//         config.resolve.alias[\"@/helper\"] = path.resolve(__dirname, \"../../helper/src\");\n\n//         return config;\n//     },\n//     stories: [\n//         \"../stories/**/*.stories.mdx\",\n//         \"../stories/**/*.stories.@(js|jsx|ts|tsx)\"\n//     ],\n//     addons: [\n//         \"@storybook/addon-google-analytics\",\n//         {\n//             name: '@storybook/addon-docs',\n//             options: { configureJSX: true },\n//         },\n//         \"storybook-addon-preview/register\",\n//         \"@storybook/addon-controls/register\",\n//         \"@storybook/addon-viewport/register\",\n//         \"storybook-dark-mode/register\",\n//         \"@storybook/addon-links\",\n//         \"@storybook/addon-essentials\",\n//         \"@storybook/addon-interactions\",\n//         // {\n//         //     name: \"@storybook/addon-coverage\",\n//         //     options: {\n//         //         exclude: [\n//         //             \"**/stories/**\",\n//         //             \"stories/**\",\n//         //             \"*{App}.tsx\",\n//         //         ],\n//         //     },\n//         // },\n//     ],\n//     \"framework\": \"@storybook/react\",\n// };\n"
  },
  {
    "path": "storybook/.storybook/manager.js",
    "content": "import { addons } from \"@storybook/addons\";\n\naddons.setConfig({\n    // showRoots: false,\n    panelPosition: \"right\",\n});\n\n\nwindow.STORYBOOK_GA_ID = \"G-TRBNXHQ0ZF\"\nwindow.STORYBOOK_REACT_GA_OPTIONS = {}\n"
  },
  {
    "path": "storybook/.storybook/preview-head.html",
    "content": "<style>\n    #docs-root a:has(img)+a:has(img),\n    #docs-root a:has(img)+img,\n    #docs-root img+a:has(img) {\n        margin-left: 5px;\n    }\n\n    #docs-root table {\n        border-collapse: collapse;\n        border: 1px solid #ddd;\n    }\n\n    #docs-root tr+tr td {\n        border-top: 1px solid #ddd;\n    }\n\n    #docs-root td+td {\n        border-left: 1px solid #ddd;\n    }\n\n    #docs-root th,\n    #docs-root td {\n        padding: 7px 0px;\n    }\n</style>\n"
  },
  {
    "path": "storybook/.storybook/preview.jsx",
    "content": "/** @type { import('@storybook/react').Preview } */\nconst preview = {\n    parameters: {\n        actions: { argTypesRegex: \"^on[A-Z].*\" },\n        controls: {\n            matchers: {\n                color: /(background|color)$/i,\n                date: /Date$/,\n            },\n        },\n    },\n};\n\nexport default preview;\n\n\n// import * as React from \"react\";\n// import { themes } from \"@storybook/theming\";\n// import {\n//     INITIAL_VIEWPORTS,\n//     // or MINIMAL_VIEWPORTS,\n// } from \"@storybook/addon-viewport\";\n\n// import {\n//     Title,\n//     Primary,\n//     PRIMARY_STORY,\n//     ArgsTable,\n//     DocsContainer,\n//     DocsContext,\n// } from \"@storybook/addon-docs\";\n\n// // or global addParameters\n// export const parameters = {\n//     options: {\n//         storySort: (a, b) => {\n\n//             return a[1].kind === b[1].kind\n//                 ? 0\n//                 : a[2].fileName.localeCompare(b[2].fileName, undefined, { numeric: true });\n//         },\n//     },\n//     docs: {\n//         container: DocsContainer,\n//         page: () => {\n//             const context = React.useContext(DocsContext);\n\n//             return <>\n//                 <Title />\n//                 <h2 className={\"sbdocs-subtitle\"}>{context.name}</h2>\n//                 <Primary />\n//                 <ArgsTable story={PRIMARY_STORY} />\n//             </>;\n//         },\n//     },\n//     controls: {\n//         passArgsFirst: true,\n//         expanded: true,\n//         hideNoControlsWarning: true,\n//     },\n//     viewport: {\n//         viewports: {\n//             ...INITIAL_VIEWPORTS,\n//         },\n//     },\n//     darkMode: {\n//         stylePreview: true,\n//         // Override the default light theme\n//         light: { ...themes.normal },\n//         // Override the default dark theme\n//         dark: { ...themes.dark  },\n//     },\n// };\n"
  },
  {
    "path": "storybook/.storybook/readme.js",
    "content": "const path = require(\"path\");\nconst fs = require(\"fs\");\n\nconst readmeText = fs.readFileSync(path.resolve(__dirname, \"../../../README.md\"), {\n    encoding: \"utf-8\",\n  });\n\n  fs.mkdirSync(path.resolve(__dirname, \"../stories/0-Introduction\"), {\n    recursive: true,\n  });\nfs.writeFileSync(path.resolve(__dirname, \"../stories/0-Introduction/readme.stories.mdx\"), `\nimport { Meta } from \"@storybook/addon-docs\";\n\n<Meta title=\"Introduction\" />\n\n${readmeText}`, {\n  encoding: \"utf-8\",\n});\n"
  },
  {
    "path": "storybook/.storybook/test-runner.js",
    "content": "const customSnapshotsDir = `${process.cwd()}/__snapshots__`;\n\nmodule.exports = {\n    async postRender(page, context) {\n        if (!process.env.SKIP_TEST) {\n            return;\n        }\n        // If you want to take screenshot of multiple browsers, use\n        // page.context().browser().browserType().name() to get the browser name to prefix the file name\n        await page.screenshot({ path: `${customSnapshotsDir}/${context.id}.png` });\n    },\n};\n"
  },
  {
    "path": "storybook/croffle.config.cjs",
    "content": "const {\n    ReactCroissant,\n    VueWaffle,\n    DefaultModulePrefixSirup,\n    ModuleSirupFactory,\n    TemplateSirupFactory,\n    SvelteWaffle,\n    ScriptWaffle,\n    ScriptComponentSirupFactory,\n    createInlineNewExpression,\n    factory,\n    AngularWaffle,\n    LitWaffle,\n    transform,\n    copyJsxAttribute,\n    copyJsxElement,\n} = require(\"croffle\");\nconst {\n    cleanPaths,\n} = require(\"@croffle/bakery\");\nconst {\n    decamelize,\n} = require(\"@daybrush/utils\");\nconst ts = require(\"typescript\");\n\ncleanPaths(\"stories/**/+([0-9A-Za-z])-*/{script,vue2,vue3,svelte,angular,lit}/\");\n\n\nconst scriptMoveableScriptComponentSirup = ScriptComponentSirupFactory({\n    path: [\"moveable\", \"default\"],\n    isContainerInstance: true,\n});\n\nconst scriptSelectoComponentSirup = ScriptComponentSirupFactory({\n    path: [\"selecto\", \"default\"],\n    instance(node) {\n        const args = node.arguments;\n        const elementNode = args[0];\n        const optionsNode = args[1];\n\n        return createInlineNewExpression(\n            node.expression,\n            [factory.createObjectLiteralExpression([\n                factory.createPropertyAssignment(\"container\", elementNode),\n                ...optionsNode.properties,\n            ])],\n        );\n    },\n});\n\nconst ngxModuleSirup = ModuleSirupFactory(\n    {\n        module: /ngx-/g,\n        name: \"default\",\n    },\n    {\n        module: module => module,\n        name: (_, binding) => `Ngx${binding}Component`,\n    },\n);\n\nconst ngxTemplateSirup = TemplateSirupFactory(\n    /^Ngx(.+)Component$/g,\n    text => decamelize(text.replace(/^Ngx/g, \"ngx\").replace(/Component$/g, \"\"), \"-\"),\n);\n\n\nfunction vueKeyconSirup(sirup) {\n    sirup.requestId({\n        path: [/vue[3]?-keycon/g, \"useKeycon\"],\n        named: [\"isKeydown\"],\n    }, node => {\n        // use ref\n        return sirup.utils.createInlinePropertyAccess(node, \"value\");\n    });\n}\nfunction svelteKeyconSirup(sirup){\n    sirup.requestId({\n        path: [/svelte-keycon/g, \"useKeycon\"],\n        named: [\"isKeydown\"],\n    }, node => {\n        // use writable\n        return sirup.ts.factory.createIdentifier(`$${node.name.escapedText}`);\n    });\n}\n\n\nconst litTemplateAttributeSirup = sirup => {\n    sirup.requestTemplate({\n        module: /lit-moveable|lit-selecto/g,\n        name: \"default\",\n    }, info => {\n        const nextOpeningElement = transform(info.openingElement, node => {\n            if (!ts.isJsxAttribute(node)) {\n                return;\n            }\n            const attrName = node.name.escapedText;\n\n            if (attrName.match(/^on[A-Z]/g)) {\n                return copyJsxAttribute(node, {\n                    name: factory.createIdentifier(attrName.replace(\"on\", \"onLit\")),\n                });\n            } else if (attrName === \"draggable\") {\n                return copyJsxAttribute(node, {\n                    name: factory.createIdentifier(\"litDraggable\"),\n                });\n            }\n        });\n\n        const node = info.node;\n        if (ts.isJsxElement(node)) {\n            return copyJsxElement(node, {\n                openingElement: nextOpeningElement,\n            });\n        } else {\n            return nextOpeningElement;\n        }\n    });\n};\n\nconst litTemplateSirup = TemplateSirupFactory(\n    { module: /lit-/g, name: \"default\" },\n    tagName => `lit-${decamelize(tagName).toLowerCase()}`,\n);\n\n\n/**\n * @param {import(\"croffle\").Sirup} sirup\n */\nfunction PreviewPropsSirup(sirup) {\n    sirup.requestProps((node, { data }) => {\n        if (!data.props) {\n            data.props = [];\n        }\n        node.members.forEach(member => {\n            const propName = member.name.escapedText;\n\n            data.props.push(propName);\n        });\n\n        return sirup.utils.copyInterfaceDeclaration(node, { members: [] });\n    });\n\n    sirup.requestLifeCycle(\"created\", (node, { data }) => {\n        if (!data.props || !data.props.length) {\n            return;\n        }\n\n        const statements = data.props.map(name => {\n            return sirup.utils.createInlineCroffleAssignment(\n                name,\n                \"Any\",\n                sirup.factory.createStringLiteral(`$preview_${name}`),\n            );\n        });\n        const body = node.body;\n\n        return sirup.utils.copyFunctionDeclaration(\n            node,\n            {\n                body: sirup.factory.updateBlock(body, [\n                    ...statements,\n                    ...body.statements,\n                ]),\n            },\n        );\n    });\n}\n\n/**\n * @type {import(\"@croffle/bakery\").CroffleConfig[]}\n */\nconst config = [\n    {\n        targets: \"stories/**/+([0-9A-Za-z])-*/react/React*App.tsx\",\n        // targets: \"stories/1-Basic/**/React*App.tsx\",\n        croissant: () => {\n            const croissant = new ReactCroissant();\n\n            // croissant.addSirup(PreviewPropsSirup);\n            croissant.addSirup(sirup => {\n                sirup.convertImport(\"@/react-moveable\", \"react-moveable\");\n                sirup.convertImport(\"@/helper\", \"@moveable/helper\");\n            });\n            croissant.addSirup(DefaultModulePrefixSirup);\n            return croissant;\n        },\n        defrosted: (defrosted, croissant) => {\n            const app = defrosted.app;\n            const results = croissant.findUsedSpecifiers(app, \"react-dom\", \"createPortal\");\n\n            return !results.length;\n        },\n        waffle: [\n            // Vanilla\n            (defrosted) => {\n                const hasKeycon = !!defrosted.allRequires[\"react-keycon\"];\n\n                if (hasKeycon) {\n                    return;\n                }\n                const waffle = new ScriptWaffle({\n                    useExport: true,\n                });\n\n                waffle.addSirup(\n                    scriptMoveableScriptComponentSirup,\n                    scriptSelectoComponentSirup,\n                );\n\n                return {\n                    dist: `../{type}/{name}/App{ext}`,\n                    waffle,\n                };\n            },\n            // Vue 3\n            (defrosted) => {\n                const hasKeycon = !!defrosted.allRequires[\"react-keycon\"];\n                const waffle = new VueWaffle();\n\n\n                if (hasKeycon) {\n                    waffle.addSirup(\n                        sirup => {\n                            sirup.convertImport(\"vue3-keycon\", \"vue-keycon\");\n                        },\n                        vueKeyconSirup,\n                    );\n                }\n                return {\n                    dist: `../{type}/{name}/App{ext}`,\n                    waffle,\n                };\n            },\n            // Vue 2\n            (defrosted) => {\n                const hasKeycon = !!defrosted.allRequires[\"react-keycon\"];\n                const waffle = new VueWaffle({\n                    useVue2: true,\n                    useOptionsAPI: !hasKeycon,\n                });\n\n                if (hasKeycon) {\n                    waffle.addSirup(\n                        sirup => {\n                            sirup.convertImport(\"vue-keycon\", \"vue2-keycon\");\n                        },\n                        vueKeyconSirup,\n                    );\n                }\n                return {\n                    dist: `../{type}/{name}/App{ext}`,\n                    waffle,\n                };\n            },\n            // Svelte\n            (defrosted) => {\n                const hasKeycon = !!defrosted.allRequires[\"react-keycon\"];\n                const waffle = new SvelteWaffle();\n\n                if (hasKeycon) {\n                    waffle.addSirup(svelteKeyconSirup);\n                }\n                return {\n                    dist: `../{type}/{name}/App{ext}`,\n                    waffle,\n                };\n            },\n            // Angular\n            (defrosted) => {\n                const hasKeycon = !!defrosted.allRequires[\"react-keycon\"];\n\n                if (hasKeycon) {\n                    return;\n                }\n                const waffle = new AngularWaffle({\n                    useTemplateUrl: true,\n                });\n\n                waffle.addSirup(\n                    ngxModuleSirup,\n                    ngxTemplateSirup,\n                );\n\n                return {\n                    dist: `../{type}/{name}/App{ext}`,\n                    waffle,\n                };\n            },\n            // Inline Angular\n            (defrosted) => {\n                const hasKeycon = !!defrosted.allRequires[\"react-keycon\"];\n\n                if (hasKeycon) {\n                    return;\n                }\n                const waffle = new AngularWaffle({\n                    useTemplateUrl: false,\n                    standalone: true,\n                });\n\n                waffle.addSirup(\n                    ngxModuleSirup,\n                    ngxTemplateSirup,\n                );\n\n                return {\n                    dist: `../{type}/{name}/InlineApp{ext}`,\n                    waffle,\n                };\n            },\n            // Lit\n            (defrosted) => {\n                const hasKeycon = !!defrosted.allRequires[\"react-keycon\"];\n\n                if (hasKeycon) {\n                    return;\n                }\n                const waffle = new LitWaffle();\n\n                waffle.addSirup(\n                    litTemplateAttributeSirup,\n                    litTemplateSirup,\n                );\n\n                return {\n                    dist: `../{type}/{name}/App{ext}`,\n                    waffle,\n                };\n            },\n        ],\n    },\n];\n\n\nmodule.exports = config;\n"
  },
  {
    "path": "storybook/package.json",
    "content": "{\n    \"name\": \"storybook\",\n    \"version\": \"0.1.0\",\n    \"description\": \"Starter template to get up and running quickly with React and Storybook\",\n    \"author\": \"Chromatic <https://chromatic.com/>\",\n    \"type\": \"module\",\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/daybrush/moveable/tree/master/packages/storybook\"\n    },\n    \"license\": \"MIT\",\n    \"private\": true,\n    \"scripts\": {\n        \"dev\": \"vite\",\n        \"build\": \"vite build\",\n        \"bake\": \"bake -c croffle.config.cjs\",\n        \"preview\": \"vite preview\",\n        \"storybook\": \"rm -rf node_modules/.cache && storybook dev -p 6006\",\n        \"build-storybook\": \"SKIP_TEST=true storybook build -o ../../demo/storybook\",\n        \"test:build\": \"EXEC_TEST=true storybook build -o ./test-static\",\n        \"test:ci\": \"concurrently -k -s first -n \\\"SB,TEST\\\" -c \\\"magenta,blue\\\" \\\"yarn test:build --quiet && npx http-server ./test-static --port 6006 --silent\\\" \\\"wait-on tcp:6006 && yarn test\\\"\",\n        \"test:fail\": \"SKIP_TEST=true test-storybook\",\n        \"test:fail-build\": \"SKIP_TEST=true build-storybook -o ./test-static\",\n        \"test:fail-ci\": \"concurrently -k -s first -n \\\"SB,TEST\\\" -c \\\"magenta,blue\\\" \\\"yarn test:fail-build --quiet && npx http-server ./test-static --port 6006 --silent\\\" \\\"wait-on tcp:6006 && yarn test:fail\\\"\"\n    },\n    \"devDependencies\": {\n        \"@angular/common\": \"~15.2.2\",\n        \"@angular/compiler\": \"~15.2.2\",\n        \"@angular/core\": \"~15.2.2\",\n        \"@angular/platform-browser\": \"~15.2.2\",\n        \"@angular/platform-browser-dynamic\": \"~15.2.2\",\n        \"@babel/plugin-proposal-decorators\": \"^7.22.5\",\n        \"@croffle/bakery\": \"^0.0.25\",\n        \"@daybrush/utils\": \"^1.13.0\",\n        \"@nitedani/vite-plugin-angular\": \"^15.0.6\",\n        \"@storybook/addon-essentials\": \"^7.0.6\",\n        \"@storybook/addon-interactions\": \"^7.0.6\",\n        \"@storybook/addon-links\": \"^7.0.6\",\n        \"@storybook/blocks\": \"^7.0.6\",\n        \"@storybook/jest\": \"^0.1.0\",\n        \"@storybook/react\": \"^7.0.6\",\n        \"@storybook/react-vite\": \"^7.0.6\",\n        \"@storybook/testing-library\": \"^0.0.14-next.2\",\n        \"@sveltejs/vite-plugin-svelte\": \"^2.4.2\",\n        \"@types/react\": \"^18.0.28\",\n        \"@types/react-dom\": \"^18.0.11\",\n        \"@vitejs/plugin-react\": \"^3.1.0\",\n        \"@vitejs/plugin-vue\": \"^4.2.3\",\n        \"croffle\": \"^0.0.21\",\n        \"lit\": \"^2.7.5\",\n        \"msw\": \"^1.2.1\",\n        \"msw-storybook-addon\": \"^1.8.0\",\n        \"prop-types\": \"^15.8.1\",\n        \"react\": \"^18.2.0\",\n        \"react-dom\": \"^18.2.0\",\n        \"rxjs\": \"^7.8.0\",\n        \"storybook\": \"^7.0.6\",\n        \"svelte\": \"^3.53.1\",\n        \"typescript\": \"^4.8 <4.9\",\n        \"vite\": \"^4.3.0\",\n        \"vite-plugin-commonjs\": \"^0.8.0\",\n        \"vue\": \"^3.2.45\",\n        \"zone.js\": \"^0.13.0\"\n    },\n    \"resolutions\": {\n        \"typescript\": \"^4.8 <4.9\"\n    }\n}\n"
  },
  {
    "path": "storybook/stories/1-Basic/react/ReactClippableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    draggable={props.draggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    zoom={props.zoom}\n                    // origin={props.origin}\n                    // padding={props.padding}\n                    clippable={props.clippable}\n                    clipRelative={props.clipRelative}\n                    clipArea={props.clipArea}\n                    dragArea={props.dragArea}\n                    dragWithClip={props.dragWithClip}\n                    defaultClipPath={props.defaultClipPath}\n                    clipTargetBounds={props.clipTargetBounds}\n                    // clipVerticalGuidelines={props.clipVerticalGuidelines}\n                    // clipHorizontalGuidelines={props.clipHorizontalGuidelines}\n                    snapThreshold={5}\n                    keepRatio={props.keepRatio}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onClip={e => {\n                        e.target.style.clipPath = e.clipStyle;\n                    }} />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/1-Basic/react/ReactDraggableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/1-Basic/react/ReactOriginDraggableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    originDraggable={true}\n                    draggable={true}\n                    rotatable={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onDragOrigin={e => {\n                        e.target.style.transformOrigin = e.transformOrigin;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/1-Basic/react/ReactPinchableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <p>Pinch the target with two fingers on a touch-capable device.</p>\n                <p>Drag, Scale and Rotate are possible.</p>\n                <div className=\"target\">Target</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    scalable={true}\n                    rotatable={true}\n                    pinchable={true}\n                    pinchOutside={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/1-Basic/react/ReactResizableApp.tsx",
    "content": "\nimport * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    maxWidth: props.maxWidth,\n                    maxHeight: props.maxHeight,\n                    minWidth: props.minWidth,\n                    minHeight: props.minHeight,\n                }}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    resizable={props.resizable}\n                    keepRatio={props.keepRatio}\n                    throttleResize={props.throttleResize}\n                    renderDirections={props.renderDirections}\n                    onResize={e => {\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/1-Basic/react/ReactRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    transform: \"translate(0px, 0px) rotate(0deg)\",\n                }}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    rotatable={props.rotatable}\n                    throttleRotate={props.throttleRotate}\n                    rotationPosition={props.rotationPosition}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/1-Basic/react/ReactRoundableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target target1\"\n                    style={{\n                        left: \"10px\",\n                        top: \"10px\",\n                        borderRadius: \"25px\",\n                    }}\n                >Target1</div>\n                <div className=\"target target2\"\n                    style={{\n                        left: \"140px\",\n                        top: \"10px\",\n                        borderRadius: \"25px 23px\",\n                    }}\n                >Target2</div>\n                <div className=\"target target3\"\n                    style={{\n                        left: \"10px\",\n                        top: \"140px\",\n                        borderRadius: \"25px 23px / 20px\",\n                    }}\n                >Target3</div>\n                <div className=\"target target4\"\n                    style={{\n                        left: \"140px\",\n                        top: \"140px\",\n                        borderRadius: \"25px 25.5px 24.5px 24.9115px / 25.5px 25.5px 24.5px 24.5px\",\n                    }}\n                >Target4</div>\n                <Moveable\n                    target={\".target1\"}\n                    draggable={true}\n                    roundable={true}\n                    resizable={true}\n                    isDisplayShadowRoundControls={\"horizontal\"}\n                    roundClickable={\"control\"}\n                    roundPadding={15}\n                    onRound={e => {\n                        console.log(\"ROUND\", e.borderRadius);\n                    }}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                    onRenderEnd={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n                <Moveable\n                    target={\".target2\"}\n                    roundable={true}\n                    roundClickable={true}\n                    onRound={e => {\n                        console.log(\"ROUND\", e.borderRadius);\n                        e.target.style.borderRadius = e.borderRadius;\n                    }}\n                />\n                <Moveable\n                    target={\".target3\"}\n                    roundable={true}\n                    onRound={e => {\n                        console.log(\"ROUND\", e.borderRadius);\n                        e.target.style.borderRadius = e.borderRadius;\n                    }}\n                />\n                <Moveable\n                    target={\".target4\"}\n                    roundable={true}\n                    onRound={e => {\n                        console.log(\"ROUND\", e.borderRadius);\n                        e.target.style.borderRadius = e.borderRadius;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/1-Basic/react/ReactScalableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    scalable={props.scalable}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    renderDirections={props.renderDirections}\n                    onScale={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/1-Basic/react/ReactWarpableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    warpable={props.warpable}\n                    renderDirections={props.renderDirections}\n                    onWarp={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/1-Basic/react-Basic.stories.tsx",
    "content": "import {\n    DEFAULT_RESIZABLE_CONTROLS,\n    DEFAULT_DRAGGABLE_CONTROLS,\n    DEFAULT_SCALABLE_CONTROLS,\n    DEFAULT_CLIPPABLE_CONTROLS,\n    DEFAULT_ROTATABLE_CONTROLS,\n    DEFAULT_WARPABLE_CONTROLS,\n} from \"../controls/default\";\nimport { expect } from \"@storybook/jest\";\nimport { throttle } from \"@daybrush/utils\";\n\nimport { makeGroup } from \"../utils/story\";\nimport { pan, pinch, rotate, wait } from \"../utils/testing\";\nimport \"../templates/default.css\";\n\n\n\nexport default {\n    title: \"Basic\",\n};\n\nconst { add } = makeGroup(\"1-Basic\");\n\nexport const BasicDraggable = add(\"Draggable\", {\n    appName: \"ReactDraggableApp\",\n    app: require(\"./react/ReactDraggableApp\").default,\n    argsTypes: {\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const controlBox = canvasElement.querySelector<HTMLElement>(\".moveable-control-box\")!;\n\n        expect(controlBox.style.transform).toBe(\"translate3d(100px, 150px, 0px)\");\n        await pan({\n            target,\n            start: [0, 0],\n            end: [100, 0],\n            duration: 100,\n            interval: 10,\n        });\n        expect(target.style.transform).toBe(\"translate(100px, 0px)\");\n        expect(controlBox.style.transform).toBe(\"translate3d(200px, 150px, 0px)\");\n    },\n});\n\nexport const BasicResizable = add(\"Resizable\", {\n    appName: \"ReactResizableApp\",\n    app: require(\"./react/ReactResizableApp\").default,\n    argsTypes: {\n        ...DEFAULT_RESIZABLE_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const resizeControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-direction=\"se\"]`)!;\n\n        await pan({\n            target: resizeControl,\n            start: [0, 0],\n            end: [100, 100],\n            duration: 100,\n            interval: 10,\n        });\n        expect(target.style.transform).toBe(\"translate(0px, 0px)\");\n        expect(target.style.width).toBe(\"200px\");\n        expect(target.style.height).toBe(\"200px\");\n    },\n});\n\n\nexport const BasicScalable = add(\"Scalable\", {\n    appName: \"ReactScalableApp\",\n    app: require(\"./react/ReactScalableApp\").default,\n    argsTypes: {\n        ...DEFAULT_SCALABLE_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const resizeControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-direction=\"se\"]`)!;\n\n        await pan({\n            target: resizeControl,\n            start: [0, 0],\n            end: [50, 100],\n            duration: 100,\n            interval: 10,\n        });\n        expect(target.style.transform).toBe(\"translate(25px, 50px) scale(1.5, 2)\");\n    },\n});\n\nexport const BasicScalableKeepRatioTest = add(\"Scalable keepRatio Test\", {\n    appName: \"ReactScalableApp\",\n    app: require(\"./react/ReactScalableApp\").default,\n    argsTypes: {\n        ...DEFAULT_SCALABLE_CONTROLS,\n    },\n    args: {\n        keepRatio: true,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const resizeControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-direction=\"nw\"]`)!;\n\n        await pan({\n            target: resizeControl,\n            start: [0, 0],\n            end: [300, 300],\n            duration: 100,\n            interval: 10,\n        });\n        expect(target.style.transform).toBe(\"translate(150px, 150px) scale(-2, -2)\");\n    },\n});\n\nexport const BaiscRotatable = add(\"Rotatable\", {\n    appName: \"ReactRotatableApp\",\n    app: require(\"./react/ReactRotatableApp\").default,\n    argsTypes: {\n        ...DEFAULT_ROTATABLE_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const rotationControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box .moveable-rotation-control`)!;\n\n        await rotate({\n            target: rotationControl,\n            start: 0,\n            end: 90,\n            duration: 100,\n            interval: 10,\n            baseTarget: target,\n        });\n        expect(target.style.transform).toBe(\"translate(0px, 0px) rotate(90deg)\");\n    },\n});\n\n\nexport const BasicWarpable = add(\"Warpable\", {\n    appName: \"ReactWarpableApp\",\n    app: require(\"./react/ReactWarpableApp\").default,\n    argsTypes: {\n        ...DEFAULT_WARPABLE_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const seControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-direction=\"se\"]`)!;\n\n        await pan({\n            target: seControl,\n            start: [0, 0],\n            end: [10, 10],\n            duration: 100,\n            interval: 10,\n        });\n        expect(target.style.transform).toBe(`matrix3d(1.04545, 0.0454545, 0, -0.000909091, 0.0454545, 1.04545, 0, -0.000909091, 0, 0, 1, 0, 0, 0, 0, 1)`);\n    },\n});\n\n\nexport const BasicClippable = add(\"Clippable\", {\n    appName: \"ReactClippableApp\",\n    app: require(\"./react/ReactClippableApp\").default,\n    argsTypes: {\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_CLIPPABLE_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const seControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-clip-index=\"4\"]`)!;\n\n        await pan({\n            target: seControl,\n            start: [0, 0],\n            end: [-40, -40],\n            duration: 100,\n            interval: 10,\n        });\n        expect(target.style.clipPath).toBe(`inset(0px 40px 40px 0px)`);\n    },\n});\n\nexport const BasicRoundable = add(\"Roundable\", {\n    appName: \"ReactRoundableApp\",\n    app: require(\"./react/ReactRoundableApp\").default,\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const targets = canvasElement.querySelectorAll<HTMLElement>(\".target\")!;\n        const moveables = canvasElement.querySelectorAll<HTMLElement>(\".moveable-control-box\")!;\n\n        // first\n        const radius0Control = moveables[0].querySelector<HTMLElement>(`[data-radius-index=\"0\"]`)!;\n\n        await pan({\n            target: radius0Control,\n            start: [0, 0],\n            end: [10, 0],\n            duration: 100,\n            interval: 10,\n        });\n        expect(targets[0].style.borderRadius).toBe(`35px`);\n\n\n        // second\n        const radius1Control = moveables[1].querySelector<HTMLElement>(`[data-radius-index=\"1\"]`)!;\n\n        await pan({\n            target: radius1Control,\n            start: [0, 0],\n            end: [-10, 0],\n            duration: 100,\n            interval: 10,\n        });\n        expect(targets[1].style.borderRadius).toBe(`25px 33px`);\n    },\n});\n\nexport const BasicOriginDraggable = add(\"OriginDraggable\", {\n    appName: \"ReactOriginDraggableApp\",\n    app: require(\"./react/ReactOriginDraggableApp\").default,\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        const rotationControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box .moveable-rotation-control`)!;\n\n        await rotate({\n            target: rotationControl,\n            start: 0,\n            end: 60,\n            duration: 100,\n            interval: 10,\n            baseTarget: target,\n        });\n\n        const clientRect1 = target.getBoundingClientRect();\n        const originControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box .moveable-origin`)!;\n\n        await pan({\n            target: originControl,\n            start: [0, 0],\n            end: [30, 30],\n            duration: 100,\n            interval: 10,\n        });\n\n        const clientRect2 = target.getBoundingClientRect();\n        expect(throttle(clientRect1.left, 0.1)).toBe(throttle(clientRect2.left, 0.1));\n        expect(throttle(clientRect1.top, 0.1)).toBe(throttle(clientRect2.top, 0.1));\n    },\n});\n\n\n\nexport const BasicPinchable = add(\"Pinchable\", {\n    appName: \"ReactPinchableApp\",\n    app: require(\"./react/ReactPinchableApp\").default,\n    play: async ({ canvasElement }) => {\n        await wait();\n        const target = canvasElement.querySelector<HTMLElement>(\".target\")!;\n        // const controlBox = canvasElement.querySelector<HTMLElement>(\".moveable-control-box\")!;\n\n        await pinch({\n            target,\n            start: [0, 0],\n            end: [100, 0],\n            startOffset: [100, 0],\n            endOffset: [-200, 0],\n            duration: 100,\n            interval: 10,\n        });\n\n        expect(target.style.transform).toBe(`translate(100px, 0px) rotate(-180deg) scale(2, 2)`);\n    },\n});\n"
  },
  {
    "path": "storybook/stories/2-Combination/react/ReactAllInOneApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    scalable={true}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    renderDirections={props.renderDirections}\n                    rotatable={props.rotatable}\n                    throttleRotate={props.throttleRotate}\n                    rotationPosition={props.rotationPosition}\n                    originDraggable={props.originDraggable}\n                    originRelative={props.originRelative}\n                    onDragOrigin={e => {\n                        e.target.style.transformOrigin = e.transformOrigin;\n                    }}\n                    onRender={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/2-Combination/react/ReactDraggableOriginDraggableRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    originDraggable={props.originDraggable}\n                    originRelative={props.originRelative}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    scalable={props.scalable}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    renderDirections={props.renderDirections}\n                    rotatable={props.rotatable}\n                    throttleRotate={props.throttleRotate}\n                    rotationPosition={props.rotationPosition}\n                    onDragOrigin={e => {\n                        e.target.style.transformOrigin = e.transformOrigin;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onScale={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/2-Combination/react/ReactDraggableResizableRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    maxWidth: props.maxWidth,\n                    maxHeight: props.maxHeight,\n                    minWidth: props.minWidth,\n                    minHeight: props.minHeight,\n                }}>Target</div>\n                <Moveable\n                    ref={moveableRef}\n                    target={targetRef}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    resizable={props.resizable}\n                    keepRatio={props.keepRatio}\n                    throttleResize={props.throttleResize}\n                    renderDirections={props.renderDirections}\n                    rotatable={props.rotatable}\n                    throttleRotate={props.throttleRotate}\n                    rotationPosition={props.rotationPosition}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onResize={e => {\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/2-Combination/react/ReactDraggableScalableRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target\" ref={targetRef} style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target</div>\n                <Moveable\n                    target={targetRef}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    scalable={props.scalable}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    renderDirections={props.renderDirections}\n                    rotatable={props.rotatable}\n                    throttleRotate={props.throttleRotate}\n                    rotationPosition={props.rotationPosition}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onScale={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/2-Combination/react-UseCSS.stories.tsx",
    "content": "import {\n    DEFAULT_DRAGGABLE_CONTROLS, DEFAULT_ORIGIN_DRAGGABLE_CONTROLS, DEFAULT_RESIZABLE_CONTROLS,\n    DEFAULT_ROTATABLE_CONTROLS,\n    DEFAULT_SCALABLE_CONTROLS,\n} from \"../controls/default\";\nimport { makeGroup } from \"../utils/story\";\n\nexport default {\n    title: \"Able Combination\",\n};\n\nconst { add } = makeGroup(\"2-Combination\");\n\nexport const CombinationDraggableResizableRotatble = add(\"Draggable & Resizable & Rotatable\", {\n    appName: \"ReactDraggableResizableRotatableApp\",\n    app: require(\"./react/ReactDraggableResizableRotatableApp\").default,\n    argsTypes: {\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_RESIZABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n    },\n});\nexport const CombinationDraggableScalableRotatable = add(\"Draggable & Scalable & Rotatable\", {\n    appName: \"ReactDraggableScalableRotatableApp\",\n    app: require(\"./react/ReactDraggableScalableRotatableApp\").default,\n    argsTypes: {\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_SCALABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n    },\n});\nexport const CombinationDraggableOriginRotatable = add(\"Draggable & OriginDraggable & Rotatable\", {\n    appName: \"ReactDraggableOriginDraggableRotatableApp\",\n    app: require(\"./react/ReactDraggableOriginDraggableRotatableApp\").default,\n    argsTypes: {\n        ...DEFAULT_ORIGIN_DRAGGABLE_CONTROLS,\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n    },\n});\n\nexport const CombinationAllInOne = add(\"All In One\", {\n    appName: \"ReactAllInOneApp\",\n    app: require(\"./react/ReactAllInOneApp\").default,\n    argsTypes: {\n        ...DEFAULT_ORIGIN_DRAGGABLE_CONTROLS,\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_SCALABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n    },\n});\n"
  },
  {
    "path": "storybook/stories/3-Group/react/ReactAllInOneApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target target1\" style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target1</div>\n                <div className=\"target target2\" style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target2</div>\n                <div className=\"target target3\" style={{\n                    transform: \"translate(0px, 0px) rotate(0deg) scale(1, 1)\",\n                }}>Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    hideChildMoveableDefaultLines={props.hideChildMoveableDefaultLines}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    scalable={true}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    renderDirections={props.renderDirections}\n                    rotatable={props.rotatable}\n                    throttleRotate={props.throttleRotate}\n                    rotationPosition={props.rotationPosition}\n                    onRenderGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.transform = ev.transform;\n                        });\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/3-Group/react/ReactDraggableResizableRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const moveableRef = React.useRef<Moveable>(null);\n\n    return <div className=\"container\">\n        <button onClick={() => {\n            moveableRef.current!.updateRect();\n        }}>Resize</button>\n        <div className=\"target target1\">Target1</div>\n        <div className=\"target target2\" style={{\n            minWidth: \"50px\",\n            minHeight: \"50px\",\n        }}>Target2</div>\n        <div className=\"target target3\">Target3</div>\n        <Moveable\n            ref={moveableRef}\n            target={\".target\"}\n            hideChildMoveableDefaultLines={props.hideChildMoveableDefaultLines}\n            draggable={props.draggable}\n            throttleDrag={props.throttleDrag}\n            edgeDraggable={props.edgeDraggable}\n            startDragRotate={props.startDragRotate}\n            throttleDragRotate={props.throttleDragRotate}\n            resizable={props.resizable}\n            keepRatio={props.keepRatio}\n            throttleResize={props.throttleResize}\n            renderDirections={props.renderDirections}\n            rotatable={props.rotatable}\n            throttleRotate={props.throttleRotate}\n            rotationPosition={props.rotationPosition}\n            onDragGroup={({ events }) => {\n                events.forEach(ev => {\n                    ev.target.style.transform = ev.transform;\n                });\n            }}\n            onResizeGroupStart={({ setMin, setMax }) => {\n                setMin([props.minWidth, props.minHeight]);\n                setMax([props.maxWidth, props.maxHeight]);\n            }}\n            onResizeGroup={({ events }) => {\n                events.forEach(ev => {\n                    ev.target.style.width = `${ev.width}px`;\n                    ev.target.style.height = `${ev.height}px`;\n                    ev.target.style.transform = ev.drag.transform;\n                });\n            }}\n            onRotateGroup={({ events }) => {\n                events.forEach(ev => {\n                    ev.target.style.transform = ev.drag.transform;\n                });\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "storybook/stories/3-Group/react/ReactDraggableScalableRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return <div className=\"container\">\n        <div className=\"target target1\">Target1</div>\n        <div className=\"target target2\">Target2</div>\n        <div className=\"target target3\">Target3</div>\n        <Moveable\n            target={\".target\"}\n            hideChildMoveableDefaultLines={props.hideChildMoveableDefaultLines}\n            draggable={props.draggable}\n            throttleDrag={props.throttleDrag}\n            edgeDraggable={props.edgeDraggable}\n            startDragRotate={props.startDragRotate}\n            throttleDragRotate={props.throttleDragRotate}\n            scalable={props.scalable}\n            keepRatio={props.keepRatio}\n            throttleScale={props.throttleScale}\n            renderDirections={props.renderDirections}\n            rotatable={props.rotatable}\n            throttleRotate={props.throttleRotate}\n            rotationPosition={props.rotationPosition}\n            onDragGroup={({ events }) => {\n                events.forEach(ev => {\n                    ev.target.style.transform = ev.transform;\n                });\n            }}\n            onScaleGroup={({ scale, dist, events }) => {\n                events.forEach(ev => {\n                    ev.target.style.transform = ev.drag.transform;\n                });\n            }}\n            onRotateGroup={({ events }) => {\n                events.forEach(ev => {\n                    ev.target.style.transform = ev.drag.transform;\n                });\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "storybook/stories/3-Group/react/ReactMultipleGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    const moveableRef = React.useRef<Moveable>(null);\n    return (<div className=\"container\">\n        <button onClick={() => {\n            moveableRef.current!.updateRect();\n        }}>Resize</button>\n        <div className=\"target target1\"  style={{\n            transform: \"rotate(30deg)\",\n        }}>Target1</div>\n        <div className=\"target target2\">Target2</div>\n        <div className=\"target target3\" style={{\n            transform: \"rotate(30deg)\",\n        }}>Target3</div>\n        <Moveable\n            ref={moveableRef}\n            target={[[\".target1, .target2\"], \".target3\"]}\n            draggable={true}\n            rotatable={true}\n            scalable={true}\n            onRenderGroup={e => {\n                e.events.forEach(ev => {\n                    ev.target.style.transform = ev.transform;\n                });\n            }}\n        />\n    </div>);\n}\n"
  },
  {
    "path": "storybook/stories/3-Group/react/ReactRoundableGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target target1\" style={{\n                    borderRadius: \"10px\",\n                }}>Target1</div>\n                <div className=\"target target2\">Target2</div>\n                <div className=\"target target3\">Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    roundable={true}\n                    resizable={true}\n                    rotatable={true}\n                    isDisplayShadowRoundControls={\"horizontal\"}\n                    roundClickable={\"control\"}\n                    roundPadding={15}\n                    onRenderGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.cssText += ev.cssText;\n                        });\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/3-Group/react-Group.stories.tsx",
    "content": "import {\n    DEFAULT_RESIZABLE_CONTROLS,\n    DEFAULT_ROTATABLE_CONTROLS,\n    DEFAULT_DRAGGABLE_CONTROLS,\n    DEFAULT_SCALABLE_CONTROLS,\n} from \"../controls/default\";\nimport {\n    DEFAULT_GROUPPABLE_GROUP_CONTROLS,\n    DEFAULT_RESIZABLE_GROUP_CONTROLS,\n    DEFAULT_SCALABLE_GROUP_CONTROLS,\n} from \"../controls/group\";\nimport { makeGroup } from \"../utils/story\";\nimport { expect } from \"@storybook/jest\";\nimport { userEvent } from \"@storybook/testing-library\";\nimport { pan, rotate, wait } from \"../utils/testing\";\nimport { throttle } from \"@daybrush/utils\";\n\nexport default {\n    title: \"Group\",\n};\n\nconst { add } = makeGroup(\"3-Group\");\n\nexport const GroupDraggableResizableRotatable = add(\"Draggable & Resizable & Rotatable\", {\n    appName: \"ReactDraggableResizableRotatableApp\",\n    app: require(\"./react/ReactDraggableResizableRotatableApp\").default,\n    argsTypes: {\n        ...DEFAULT_GROUPPABLE_GROUP_CONTROLS,\n        ...DEFAULT_RESIZABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_RESIZABLE_GROUP_CONTROLS,\n    },\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const areaElement = canvasElement.querySelector<HTMLElement>(`.moveable-control-box .moveable-area`)!;\n        const targets = canvasElement.querySelectorAll<HTMLElement>(\".target\")!;\n\n\n        await pan({\n            target: areaElement,\n            start: [0, 0],\n            end: [10, 10],\n            duration: 100,\n            interval: 10,\n        });\n\n\n        const resizeControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-direction=\"e\"]`)!;\n\n        await pan({\n            target: resizeControl,\n            start: [0, 0],\n            end: [140, 100],\n            duration: 100,\n            interval: 10,\n        });\n\n        expect(areaElement.style.width).toBe(\"420px\");\n        expect(areaElement.style.height).toBe(\"345px\");\n        targets.forEach(target => {\n            expect(target.style.width).toBe(\"150px\");\n        });\n\n        await rotate({\n            target: canvasElement.querySelector<HTMLElement>(`.moveable-rotation-control`)!,\n            start: 0,\n            end: 90,\n            duration: 100,\n            interval: 10,\n            baseTarget: canvasElement.querySelector<HTMLElement>(`.moveable-origin`)!,\n        });\n\n\n        expect(targets[0].style.transform).toBe(`translate(242.5px, -85px) rotate(90deg)`);\n        expect(targets[1].style.transform).toBe(`translate(32.5px, 165px) rotate(90deg)`);\n        expect(targets[2].style.transform).toBe(`translate(-12.5px, -125px) rotate(90deg)`);\n\n\n        expect(areaElement.style.width).toBe(\"420px\");\n        expect(areaElement.style.height).toBe(\"345px\");\n    },\n});\nexport const GroupDraggableScalableRotatable = add(\"Draggable & Scalable & Rotatable\", {\n    appName: \"ReactDraggableScalableRotatableApp\",\n    app: require(\"./react/ReactDraggableScalableRotatableApp\").default,\n    argsTypes: {\n        ...DEFAULT_GROUPPABLE_GROUP_CONTROLS,\n        ...DEFAULT_SCALABLE_CONTROLS,\n        ...DEFAULT_SCALABLE_GROUP_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n    },\n});\n\n\nexport const GroupAllInOne = add(\"All in One\", {\n    appName: \"ReactAllInOneApp\",\n    app: require(\"./react/ReactAllInOneApp\").default,\n    argsTypes: {\n        ...DEFAULT_GROUPPABLE_GROUP_CONTROLS,\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n        ...DEFAULT_SCALABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n    },\n});\nexport const GroupMultipleGroup = add(\"Multiple Group\", {\n    appName: \"ReactMultipleGroupApp\",\n    app: require(\"./react/ReactMultipleGroupApp\").default,\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const areaElement = canvasElement.querySelector<HTMLElement>(`.moveable-control-box .moveable-area`)!;\n\n        await rotate({\n            target: canvasElement.querySelector<HTMLElement>(`.moveable-rotation-control`)!,\n            start: 0,\n            end: 90,\n            duration: 100,\n            interval: 10,\n            baseTarget: canvasElement.querySelector<HTMLElement>(`.moveable-origin`)!,\n        });\n\n        const { left, top, width, height } = areaElement.getBoundingClientRect();\n        expect(throttle(parseFloat(areaElement.style.width), 0.1)).toBe(298.3);\n        expect(throttle(parseFloat(areaElement.style.height), 0.1)).toBe(266.6);\n\n        expect(throttle(left, 0.1)).toBe(133.4);\n        expect(throttle(top, 0.1)).toBe(151.7);\n        expect(throttle(width, 0.1)).toBe(266.9);\n        expect(throttle(height, 0.1)).toBe(298.5);\n\n        // click\n        await wait();\n        userEvent.click(canvasElement.querySelector(\"button\")!);\n\n        expect(throttle(parseFloat(areaElement.style.width), 0.1)).toBe(266.5);\n        expect(throttle(parseFloat(areaElement.style.height), 0.1)).toBe(298.3);\n        expect(areaElement.style.transform).toBe(\"translate(0px, 0px) rotate(0deg) scale(1, 1)\");\n    },\n});\n\nexport const GroupRoundableGroup = add(\"Roundable Group\", {\n    appName: \"ReactRoundableGroupApp\",\n    app: require(\"./react/ReactRoundableGroupApp\").default,\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const targets = canvasElement.querySelectorAll<HTMLElement>(\".target\")!;\n\n        // round control\n        const radius0Control = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-radius-index=\"0\"]`)!;\n\n        await pan({\n            target: radius0Control,\n            start: [0, 0],\n            end: [20, 0],\n            duration: 100,\n            interval: 10,\n        });\n        targets.forEach(target => {\n            expect(target.style.borderRadius).toBe(\"30px\");\n        });\n    },\n});\n"
  },
  {
    "path": "storybook/stories/3-IndiviualGroup/react/ReactDraggableScalableRotatableApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target target1\">Target1</div>\n                <div className=\"target target2\">Target2</div>\n                <div className=\"target target3\">Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    individualGroupable={true}\n                    draggable={props.draggable}\n                    throttleDrag={props.throttleDrag}\n                    edgeDraggable={props.edgeDraggable}\n                    startDragRotate={props.startDragRotate}\n                    throttleDragRotate={props.throttleDragRotate}\n                    scalable={props.scalable}\n                    keepRatio={props.keepRatio}\n                    throttleScale={props.throttleScale}\n                    renderDirections={props.renderDirections}\n                    rotatable={props.rotatable}\n                    throttleRotate={props.throttleRotate}\n                    rotationPosition={props.rotationPosition}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onScale={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/3-IndiviualGroup/react/ReactIndividualGroupablePropsApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <div className=\"target target1\">Target1</div>\n                <div className=\"target target2\">Target2</div>\n                <div className=\"target target3\">Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    individualGroupable={true}\n                    draggable={true}\n                    resizable={true}\n                    rotatable={true}\n                    individualGroupableProps={element => {\n                        if (element!.classList.contains(\"target2\")) {\n                            return {\n                                resizable: false,\n                            };\n                        }\n                    }}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/3-IndiviualGroup/react-Default.stories.tsx",
    "content": "import {\n    DEFAULT_ROTATABLE_CONTROLS,\n    DEFAULT_DRAGGABLE_CONTROLS,\n    DEFAULT_SCALABLE_CONTROLS,\n} from \"../controls/default\";\nimport { makeGroup } from \"../utils/story\";\n\n\nexport default {\n    title: \"Individual Group\",\n};\n\n\nconst { add } = makeGroup(\"3-IndividualGroup\");\n\n\nexport const IndividualGroupDraggableScalableRotatable = add(\"Draggable & Scalable & Rotatable\", {\n    appName: \"ReactDraggableScalableRotatableApp\",\n    app: require(\"./react/ReactDraggableScalableRotatableApp\").default,\n    argsTypes: {\n        ...DEFAULT_SCALABLE_CONTROLS,\n        ...DEFAULT_ROTATABLE_CONTROLS,\n        ...DEFAULT_DRAGGABLE_CONTROLS,\n    },\n});\n\nexport const IndividualGroupGroupableProps = add(\"Use Individual Groupable Props\", {\n    appName: \"ReactIndividualGroupablePropsApp\",\n    app: require(\"./react/ReactIndividualGroupablePropsApp\").default,\n});\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactCheckInputApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <p>checkInput (false)</p>\n        <input type=\"input\" className=\"target1\"/>\n        <p>checkInput (true)</p>\n        <input type=\"input\" className=\"target2\"/>\n        <Moveable\n            target={\".target1\"}\n            draggable={true}\n            onDrag={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n        <Moveable\n            target={\".target2\"}\n            draggable={true}\n            checkInput={true}\n            onDrag={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactControlPaddingApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return <div className=\"container\">\n        <div className=\"target\"></div>\n        <Moveable\n            target={\".target\"}\n            className=\"control-padding\"\n            draggable={true}\n            resizable={true}\n            rotatable={true}\n            displayAroundControls={true}\n            controlPadding={props.controlPadding}\n            onRender={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactDragFocusedInputApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    const targetRef1 = React.useRef<HTMLInputElement>(null);\n    const targetRef2 = React.useRef<HTMLDivElement>(null);\n\n    return <div className=\"container\">\n        <p>Input         <button onClick={() => {\n            targetRef1.current!.focus();\n        }}>Focus Input</button></p>\n        <input type=\"input\" className=\"target1\" ref={targetRef1}></input>\n        <p>Content Editable <button onClick={() => {\n            targetRef2.current!.focus();\n        }}>Focus contenteEditable</button></p>\n        <div className=\"target2\" contentEditable=\"true\" ref={targetRef2} style={{\n            width: \"100px\",\n            height: \"100px\",\n        }}></div>\n        <Moveable\n            target={\".target1\"}\n            draggable={true}\n            dragFocusedInput={true}\n            onDrag={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n        <Moveable\n\n            target={\".target2\"}\n            draggable={true}\n            dragFocusedInput={true}\n            onDrag={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactDragTargetApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <div className=\"drag-area\" style={{\n            width: \"100px\",\n            height: \"100px\",\n        }}>Drag</div>\n        <div className=\"target\"></div>\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            scalable={true}\n            rotatable={true}\n            dragTarget={\".drag-area\"}\n            onRender={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactGroupPersistDataApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <p className=\"description\">\n                * You can persist by `moveable.getRect()` method.\n            </p>\n            <div className=\"target target1\" style={{\n                transform: \"translate(57.4837px, 16.3011px) rotate(10.5213deg)\",\n            }}>No Target1</div>\n            <div className=\"target target2\" style={{\n                transform: \"translate(22.3858px, 104.945px) rotate(30.5213deg)\",\n            }}>No Target2</div>\n            <div className=\"target target3\" style={{\n                transform: \"translate(-16.8514px, 28.7599px) rotate(30.5213deg)\",\n            }}>No Target3</div>\n            <Moveable\n                draggable={true}\n                resizable={true}\n                rotatable={true}\n                origin={true}\n                persistData={{\n                    \"width\": 391.66543415599995,\n                    \"height\": 383.962796948,\n                    \"left\": 62.228131762906024,\n                    \"top\": 90.31465753146728,\n                    \"pos1\": [\n                        219.08575903890602,\n                        90.31465753146728,\n                    ],\n                    \"pos2\": [\n                        453.89356591890595,\n                        287.34203529146725,\n                    ],\n                    \"pos3\": [\n                        62.228131762906024,\n                        277.25007671946724,\n                    ],\n                    \"pos4\": [\n                        297.035938642906,\n                        474.2774544794673,\n                    ],\n                    \"offsetWidth\": 306.52,\n                    \"offsetHeight\": 244.027,\n                    \"beforeOrigin\": [\n                        258.060280934906,\n                        282.2936213634673,\n                    ],\n                    \"origin\": [\n                        258.060280934906,\n                        282.2936213634673,\n                    ],\n                    \"transformOrigin\": [\n                        153.258,\n                        122.012,\n                    ],\n                    \"rotation\": 40.00003345093183,\n                    \"children\": [\n                        {\n                            \"width\": 116.5788,\n                            \"height\": 116.5788,\n                            \"left\": 169.1943,\n                            \"top\": 128.01170000000002,\n                            \"pos1\": [\n                                187.4544,\n                                128.01170000000002,\n                            ],\n                            \"pos2\": [\n                                285.7731,\n                                146.2718,\n                            ],\n                            \"pos3\": [\n                                169.1943,\n                                226.33040000000003,\n                            ],\n                            \"pos4\": [\n                                267.51300000000003,\n                                244.59050000000002,\n                            ],\n                            \"offsetWidth\": 100,\n                            \"offsetHeight\": 100,\n                            \"beforeOrigin\": [\n                                227.4837,\n                                186.30110000000002,\n                            ],\n                            \"origin\": [\n                                227.4837,\n                                186.30110000000002,\n                            ],\n                            \"transformOrigin\": [\n                                50,\n                                50,\n                            ],\n                            \"rotation\": 10.52129854976897,\n                        },\n                        {\n                            \"width\": 136.92990000000003,\n                            \"height\": 136.92989999999998,\n                            \"left\": 303.92085,\n                            \"top\": 226.48005,\n                            \"pos1\": [\n                                354.70675,\n                                226.48005,\n                            ],\n                            \"pos2\": [\n                                440.85075,\n                                277.26595,\n                            ],\n                            \"pos3\": [\n                                303.92085,\n                                312.62405,\n                            ],\n                            \"pos4\": [\n                                390.06485,\n                                363.40995,\n                            ],\n                            \"offsetWidth\": 100,\n                            \"offsetHeight\": 100,\n                            \"beforeOrigin\": [\n                                372.3858,\n                                294.945,\n                            ],\n                            \"origin\": [\n                                372.3858,\n                                294.945,\n                            ],\n                            \"transformOrigin\": [\n                                50,\n                                50,\n                            ],\n                            \"rotation\": 30.521329871109174,\n                        },\n                        {\n                            \"width\": 136.92990000000003,\n                            \"height\": 136.92989999999998,\n                            \"left\": 144.68365,\n                            \"top\": 260.29495,\n                            \"pos1\": [\n                                195.46955,\n                                260.29495,\n                            ],\n                            \"pos2\": [\n                                281.61355000000003,\n                                311.08084999999994,\n                            ],\n                            \"pos3\": [\n                                144.68365,\n                                346.43895,\n                            ],\n                            \"pos4\": [\n                                230.82765,\n                                397.22484999999995,\n                            ],\n                            \"offsetWidth\": 100,\n                            \"offsetHeight\": 100,\n                            \"origin\": [\n                                213.1486,\n                                328.75989999999996,\n                            ],\n                            \"transformOrigin\": [\n                                50,\n                                50,\n                            ],\n                            \"rotation\": 30.521329871109167,\n                        },\n                    ],\n                }}\n                onRenderGroup={e => {\n                    e.events.forEach(ev => {\n                        ev.target.style.cssText += ev.cssText;\n                    });\n                }}\n                onRenderGroupEnd={e => {\n                    console.log(JSON.stringify(e.moveable.getRect(), undefined, 4));\n                }}\n                onChangeTargets={e => {\n                    console.log(\"??\", JSON.stringify(e.moveable.getRect(), undefined, 4));\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactIndividualGroupPersistDataApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <p className=\"description\">\n                * You can persist by `moveable.getRect()` method.\n            </p>\n            <div className=\"target target1\" style={{\n                transform: \"translate(57.4837px, 16.3011px) rotate(30.5213deg)\",\n            }}>No Target1</div>\n            <div className=\"target target2\" style={{\n                transform: \"translate(22.3858px, 104.945px) rotate(30.5213deg)\",\n            }}>No Target2</div>\n            <div className=\"target target3\" style={{\n                transform: \"translate(-16.8514px, 28.7599px) rotate(30.5213deg)\",\n            }}>No Target3</div>\n            <Moveable\n                // target={\".target\"}\n                draggable={true}\n                resizable={true}\n                rotatable={true}\n                origin={true}\n                individualGroupable={true}\n                persistData={{\n                    left: 92.99700062437337,\n                    top: 117.83604282479718,\n                    pos1: [\n                        209.80457062437335,\n                        117.83604282479718,\n                    ],\n                    pos2: [\n                        451.00777062437334,\n                        260.03656282479716,\n                    ],\n                    pos3: [\n                        92.99700062437337,\n                        315.96724282479715,\n                    ],\n                    pos4: [\n                        334.20020062437334,\n                        458.1677628247972,\n                    ],\n                    offsetWidth: 280,\n                    offsetHeight: 230,\n                    origin: [\n                        272.00238562437335,\n                        288.0019028247972,\n                    ],\n                    children: [\n                        {\n                            left: 159.01875,\n                            top: 117.83615,\n                            pos1: [\n                                209.80455,\n                                117.83615,\n                            ],\n                            pos2: [\n                                295.94865,\n                                168.62195,\n                            ],\n                            pos3: [\n                                159.01875,\n                                203.98025,\n                            ],\n                            pos4: [\n                                245.16285,\n                                254.76605,\n                            ],\n                            offsetWidth: 100,\n                            offsetHeight: 100,\n                            origin: [\n                                227.4837,\n                                186.30110000000002,\n                            ],\n                        },\n                        {\n                            left: 303.92085000000003,\n                            top: 226.48005,\n                            pos1: [\n                                354.70665,\n                                226.48005,\n                            ],\n                            pos2: [\n                                440.85075,\n                                277.26585,\n                            ],\n                            pos3: [\n                                303.92085000000003,\n                                312.62415,\n                            ],\n                            pos4: [\n                                390.06495,\n                                363.40995,\n                            ],\n                            offsetWidth: 100,\n                            offsetHeight: 100,\n                            origin: [\n                                372.3858,\n                                294.945,\n                            ],\n                        },\n                        {\n                            left: 144.68365,\n                            top: 260.29495,\n                            pos1: [\n                                195.46945,\n                                260.29495,\n                            ],\n                            pos2: [\n                                281.61355,\n                                311.08074999999997,\n                            ],\n                            pos3: [\n                                144.68365,\n                                346.43904999999995,\n                            ],\n                            pos4: [\n                                230.82774999999998,\n                                397.22484999999995,\n                            ],\n                            offsetWidth: 100,\n                            offsetHeight: 100,\n                            origin: [\n                                213.1486,\n                                328.75989999999996,\n                            ],\n                        },\n                    ],\n                }}\n                onRenderGroup={e => {\n                    e.events.forEach(ev => {\n                        ev.target.style.cssText += ev.cssText;\n                    });\n                }}\n                onRenderGroupEnd={e => {\n                    console.log(JSON.stringify(e.moveable.getRect(), undefined, 4));\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactLinePaddingApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return <div className=\"container\">\n        <div className=\"target\"></div>\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            resizable={true}\n            linePadding={props.linePadding}\n            edge={true}\n            onRender={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactPaddingApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return <div className=\"container\">\n        <div className=\"target\"></div>\n        <Moveable\n            target={\".target\"}\n            draggable={true}\n            scalable={true}\n            rotatable={true}\n            padding={{\n                left: 10,\n                right: 20,\n                top: 30,\n                bottom: 40,\n            }}\n            onRender={e => {\n                e.target.style.cssText += e.cssText;\n            }}\n        />\n    </div>;\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactPersistDataApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <p className=\"description\">\n                * You can persist by `moveable.getRect()` method.\n            </p>\n            <div className=\"target\" style={{\n                transform: \"translate(100px, 100px) rotate(45deg)\",\n            }}>\n                No Target\n            </div>\n            <Moveable\n                // target={\".target\"}\n                draggable={true}\n                resizable={true}\n                rotatable={true}\n                origin={true}\n                persistData={{\n                    left: 179.2893,\n                    top: 229.2893,\n                    offsetHeight: 100,\n                    offsetWidth: 100,\n                    origin: [250, 300],\n                    pos1: [250, 229.2893],\n                    pos2: [320.7107, 300],\n                    pos3: [179.2893, 300],\n                    pos4: [250, 370.7107],\n                    transformOrigin: [\n                        50,\n                        50,\n                    ],\n                }}\n                onRender={e => {\n                    e.target.style.cssText += e.cssText;\n\n                    console.log(e.moveable.getRect());\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactTransformedApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\" style={{\n            transformOrigin: \"0 0\",\n            transform: `scale(0.5)`,\n        }}>\n            <div className=\"container\">\n                <div style={{\n                    position: \"relative\",\n                    transform: \"translate3d(0px, 0px, 100px)\",\n                }}>\n                    <div className=\"target\" style={{\n                        transform: \"translate(0px, 0px)\",\n                    }}>Target</div>\n                    <Moveable\n                        target={\".target\"}\n                        draggable={true}\n                        rotatable={true}\n                        rootContainer={document.body}\n                        onRender={e => {\n                            e.target.style.cssText += e.cssText;\n                        }}\n                    ></Moveable>\n                </div>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactUseAccuratePositionApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <p className=\"description\">\n                    * There is a subpixel issue because offsetLeft and offsetTop are used. <br />\n                    * You can accurately represent the position of a movable control box. <br />\n                    * However, since gBCR is used, css zoom should not be used <br />\n                    * and `transform: rotate` should not be used for container, rootContainer.\n\n                </p>\n                <div style={{\n                    transformOrigin: \"0 0\",\n                    transform: \"scale(2, 2)\",\n                }}>\n                    <div className=\"target target1\" style={{\n                        position: \"relative\",\n                        left: \"10.5px\",\n                        top: \"10.5px\",\n                        width: \"100px\",\n                        height: \"40px\",\n                        lineHeight: \"40px\",\n                        fontSize: \"10px\",\n                    }}>\n                        Not Accurate\n                    </div>\n                </div>\n                <Moveable\n                    target={\".target1\"}\n                    draggable={true}\n                    origin={false}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n                <div style={{\n                    transformOrigin: \"0 0\",\n                    transform: \"scale(2, 2)\",\n                }}>\n                    <div className=\"target target2\" style={{\n                        position: \"absolute\",\n                        left: \"10.5px\",\n                        top: \"50.5px\",\n                        width: \"100px\",\n                        height: \"40px\",\n                        lineHeight: \"40px\",\n                        fontSize: \"10px\",\n                    }}>\n                        Accurate\n                    </div>\n                </div>\n                <Moveable\n                    target={\".target2\"}\n                    draggable={true}\n                    origin={false}\n                    useAccuratePosition={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactUseMutationObserverApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <button onClick={() => {\n                    const left = 50 + Math.floor(50 * Math.random());\n                    const top = 50 + Math.floor(50 * Math.random());\n\n                    document.querySelector<HTMLElement>(\".target\")!.style.cssText\n                        += `left: ${left}px;top: ${top}px`;\n                }}>Random Position</button>\n                <p>Changes in css position due to className or attribute selector are not detected.</p>\n                <p>Use with `useResizeObserver`.</p>\n                <div className=\"target\">Target1</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    rotatable={true}\n                    resizable={true}\n                    useResizeObserver={true}\n                    useMutationObserver={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onResize={e => {\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactUseResizeObserverApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <button onClick={() => {\n                    const width = 50 + Math.floor(50 * Math.random());\n                    const height = 50 + Math.floor(50 * Math.random());\n\n                    document.querySelector<HTMLElement>(\".target\")!.style.cssText\n                        += `width: ${width}px;height: ${height}px`;\n                }}>Random Resize</button>\n                <div className=\"target\">Target1</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    rotatable={true}\n                    resizable={true}\n                    useResizeObserver={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onResize={e => {\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactUseResizeObserverGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <button onClick={() => {\n                    const width = 50 + Math.floor(50 * Math.random());\n                    const height = 50 + Math.floor(50 * Math.random());\n\n                    document.querySelectorAll<HTMLElement>(\".target\")[Math.floor(Math.random() * 3)].style.cssText\n                        += `width: ${width}px;height: ${height}px`;\n                }}>Random Resize</button>\n                <div className=\"target target1\">Target1</div>\n                <div className=\"target target2\">Target2</div>\n                <div className=\"target target3\">Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    draggable={true}\n                    rotatable={true}\n                    resizable={true}\n                    useResizeObserver={true}\n                    onDragGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.transform = ev.transform;\n                        });\n                    }}\n                    onResizeGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.width = `${ev.width}px`;\n                            ev.target.style.height = `${ev.height}px`;\n                            ev.target.style.transform = ev.drag.transform;\n                        });\n                    }}\n                    onRotateGroup={e => {\n                        e.events.forEach(ev => {\n                            ev.target.style.transform = ev.drag.transform;\n                        });\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactUseResizeObserverIndividualGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <div className=\"container\">\n                <button onClick={() => {\n                    const width = 50 + Math.floor(50 * Math.random());\n                    const height = 50 + Math.floor(50 * Math.random());\n\n                    document.querySelectorAll<HTMLElement>(\".target\")[Math.floor(Math.random() * 3)].style.cssText\n                        += `width: ${width}px;height: ${height}px`;\n                }}>Random Resize</button>\n                <div className=\"target target1\">Target1</div>\n                <div className=\"target target2\">Target2</div>\n                <div className=\"target target3\">Target3</div>\n                <Moveable\n                    target={\".target\"}\n                    individualGroupable={true}\n                    draggable={true}\n                    rotatable={true}\n                    resizable={true}\n                    useResizeObserver={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                    onResize={e => {\n                        e.target.style.width = `${e.width}px`;\n                        e.target.style.height = `${e.height}px`;\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                    onRotate={e => {\n                        e.target.style.transform = e.drag.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactViewContainerApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (\n        <div className=\"root\">\n            <p className=\"description\">\n                * When you drag, the class name `${`{ableName}`}-view-dragging` is added to the viewContainer.\n            </p>\n            <div className=\"target\">Target</div>\n            <Moveable\n                target={\".target\"}\n                draggable={true}\n                resizable={true}\n                rotatable={true}\n                viewContainer={document.body}\n                onRender={e => {\n                    e.target.style.cssText += e.cssText;\n                }}\n            />\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react/ReactZoomApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"margin no-relative\">\n            <div style={{\n                position: \"absolute\",\n                left: \"84px\",\n                top: \"159px\",\n                zIndex: 1,\n            }}>92 x 167 (34, 84)</div>\n            <div className=\"root\" style={{\n                // position: \"relative\",\n                padding: \"10px\",\n            }}>\n                <div style={{\n                    zoom: 0.5,\n                    position: \"relative\",\n                }}>\n                    <div style={{\n                        position: \"relative\",\n                        marginTop: \"100px\",\n                        width: \"500px\",\n                        height: \"500px\",\n                    }}>\n                        <div className=\"target\" style={{\n                            transform: \"translate(0px, 0px)\",\n                        }}>Target</div>\n                        <Moveable\n                            target={\".target\"}\n                            draggable={true}\n                            rotatable={true}\n                            resizable={true}\n                            rootContainer={document.body}\n                            onRender={e => {\n                                e.target.style.cssText += e.cssText;\n                            }}\n                            onRenderEnd={e => {\n                                console.log(\"RCR\", e.moveable.state.rootContainerClientRect);\n                                console.log(\"ORM\", e.moveable.state.originalRootMatrix);\n                                console.log(\"MCR\", e.moveable.state.moveableClientRect);\n                            }}\n                        ></Moveable>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-Options/react-Default.stories.tsx",
    "content": "import { expect } from \"@storybook/jest\";\n\nimport { makeArgType, makeOptionLink } from \"../utils\";\nimport { makeGroup } from \"../utils/story\";\nimport \"../templates/default.css\";\nimport { pan, wait } from \"../utils/testing\";\n\nexport default {\n    title: \"Options\",\n};\n\nconst { add } = makeGroup(\"4-Options\");\n\n\nexport const OptionsResizeObserver = add(\"useResizeObserver\", {\n    appName: \"ReactUseResizeObserverApp\",\n    app: require(\"./react/ReactUseResizeObserverApp\").default,\n});\n\nexport const OptionsResizeObserverGroup = add(\"useResizeObserver (Group)\", {\n    appName: \"ReactUseResizeObserverGroupApp\",\n    app: require(\"./react/ReactUseResizeObserverGroupApp\").default,\n});\n\nexport const OptionsResizeObserverIndividualGroup = add(\"useResizeObserver (Individual Group)\", {\n    app: require(\"./react/ReactUseResizeObserverIndividualGroupApp\").default,\n    appName: \"ReactUseResizeObserverIndividualGroupApp\",\n});\n\nexport const OptionsMutationObserver = add(\"useMutationObserver\", {\n    app: require(\"./react/ReactUseMutationObserverApp\").default,\n    appName: \"ReactUseMutationObserverApp\",\n});\n\n\nexport const OptionsPadding = add(\"padding\", {\n    app: require(\"./react/ReactPaddingApp\").default,\n    appName: \"ReactPaddingApp\",\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        // se direction control\n        const seControl = canvasElement.querySelector<HTMLElement>(`.moveable-se`)!;\n\n        await pan({\n            target: seControl,\n            start: [0, 0],\n            end: [100, 50],\n            duration: 100,\n            interval: 10,\n        });\n        // width 100 + padding (10 + 20) 130 => 230\n        // height 100 + padding (30 + 40) 170 => 220\n\n\n        const paddingAreas = canvasElement.querySelectorAll<HTMLElement>(`.moveable-padding`);\n        const widthLine = canvasElement.querySelector<HTMLElement>(`[data-line-key=\"render-line-0\"]`)!;\n        const heightLine = canvasElement.querySelector<HTMLElement>(`[data-line-key=\"render-line-1\"]`)!;\n\n        expect(Math.round(parseFloat(widthLine.style.width))).toBe(230);\n        expect(Math.round(parseFloat(heightLine.style.width))).toBe(220);\n\n        // left\n        expect(Math.round(paddingAreas[0].getBoundingClientRect().width)).toBe(10);\n        // top\n        expect(Math.round(paddingAreas[1].getBoundingClientRect().height)).toBe(30);\n        // right\n        expect(Math.round(paddingAreas[2].getBoundingClientRect().width)).toBe(20);\n        // bottom\n        expect(Math.round(paddingAreas[3].getBoundingClientRect().height)).toBe(40);\n        // expect(canvasElement.querySelector(`[data-line-key=\"render-line-0\"]`)\n    },\n});\n\nexport const OptionsLinePadding = add(\"linePadding\", {\n    app: require(\"./react/ReactLinePaddingApp\").default,\n    appName: \"ReactLinePaddingApp\",\n    argsTypes: {\n        linePadding: makeArgType({\n            type: \"number\",\n            description: makeOptionLink(\"Moveable\", \"DefaultOptions\", \"linePadding\"),\n            defaultValue: 0,\n            value: 10,\n        }),\n    },\n});\n\nexport const OptionsControlPadding = add(\"controlPadding\", {\n    app: require(\"./react/ReactControlPaddingApp\").default,\n    appName: \"ReactControlPaddingApp\",\n    argsTypes: {\n        controlPadding: makeArgType({\n            type: \"number\",\n            description: makeOptionLink(\"Moveable\", \"DefaultOptions\", \"controlPadding\"),\n            defaultValue: 0,\n            value: 20,\n        }),\n    },\n});\n\n\nexport const OptionsCheckInput = add(\"checkInput\", {\n    app: require(\"./react/ReactCheckInputApp\").default,\n    appName: \"ReactCheckInputApp\",\n});\n\n\nexport const OptionsDragFocusedInput = add(\"dragFocusedInput\", {\n    app: require(\"./react/ReactDragFocusedInputApp\").default,\n    appName: \"ReactDragFocusedInputApp\",\n});\n\n\nexport const OptionsViewContainer = add(\"viewContainer (Cursor is applied in viewer during dragging)\", {\n    app: require(\"./react/ReactViewContainerApp\").default,\n    appName: \"ReactViewContainerApp\",\n});\n\n\n\nexport const OptionsPersistData = add(\"persistData (First render with persisted data)\", {\n    app: require(\"./react/ReactPersistDataApp\").default,\n    appName: \"ReactPersistDataApp\",\n});\n\nexport const OptionsPersistDataGroup = add(\"persistData (First render with persisted data, group)\", {\n    app: require(\"./react/ReactGroupPersistDataApp\").default,\n    appName: \"ReactGroupPersistDataApp\",\n});\n\n\nexport const OptionsPersistDataIndividualGroup = add(`persistData (First render with persisted data, individual group)`, {\n    app: require(\"./react/ReactIndividualGroupPersistDataApp\").default,\n    appName: \"ReactIndividualGroupPersistDataApp\",\n});\n\nexport const OptionsRootContainer = add(\"rootContainer (css transformed container)\", {\n    app: require(\"./react/ReactTransformedApp\").default,\n    appName: \"ReactTransformedApp\",\n});\n\nexport const OptionsRootContainerZoom = add(\"rootContainer (css zoomed container)\", {\n    app: require(\"./react/ReactZoomApp\").default,\n    appName: \"ReactZoomApp\",\n});\nexport const OptionsAccuratePosition = add(\"useAccuratePosition (Render in a more accurate position)\", {\n    app: require(\"./react/ReactUseAccuratePositionApp\").default,\n    appName: \"ReactUseAccuratePositionApp\",\n});\n\n\n\nexport const OptionsDragTarget = add(\"other dragTarget\", {\n    app: require(\"./react/ReactDragTargetApp\").default,\n    appName: \"ReactDragTargetApp\",\n});\n"
  },
  {
    "path": "storybook/stories/4-SVG/react/ReactOriginApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                transformOrigin: \"0 0\",\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <svg viewBox=\"0 0 200 200\" style={{\n                    border: \"1px solid black\",\n                    width: \"200px\",\n                    height: \"200px\",\n                }}>\n                    <path d=\"M 0 0 L 200 0 L 200 200 z\" style={{\n                        fill: \"white\",\n                        stroke: \"red\",\n                        strokeWidth: 2,\n                    }} />\n                </svg>\n                <Moveable\n                    target={\"path\"}\n                    draggable={true}\n                    rotatable={true}\n                    scalable={true}\n                    svgOrigin=\"50% 50%\"\n                    // onRotateStart={e => {\n                    //     e.setFixedDirection([0, 0]);\n                    // }}\n                    // onScaleStart={e => {\n                    //     e.setFixedDirection([0, 0]);\n                    // }}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-SVG/react/ReactOriginFillboxApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\">\n            <div\n                className=\"container\"\n                style={{\n                    transformOrigin: \"0 0\",\n                    transform: `scale(${props.containerScale})`,\n                }}\n            >\n                <svg\n                    viewBox=\"0 0 500 500\"\n                    style={{\n                        border: \"1px solid black\",\n                        width: \"500px\",\n                        height: \"500px\",\n                    }}\n                >\n                    <rect\n                        id=\"rect-1\"\n                        x=\"100\"\n                        y=\"100\"\n                        width=\"50\"\n                        height=\"50\"\n                        style={{\n                            fill: \"red\",\n                            transformBox: \"fill-box\",\n                        }}\n                        transform=\"rotate(45)\"\n                        {...{ \"transform-origin\": \"50% 50%\" }}\n                    />\n                </svg>\n                <Moveable\n                    target={\"#rect-1\"}\n                    draggable={true}\n                    rotatable={true}\n                    scalable={true}\n                    svgOrigin=\"50% 50%\"\n                    onRender={(e) => {\n                        console.log(e);\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n                <Moveable\n                    target={\"#rect-2\"}\n                    draggable={true}\n                    rotatable={true}\n                    scalable={true}\n                    svgOrigin=\"50% 50%\"\n                    onRender={(e) => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-SVG/react/ReactPathApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<SVGPathElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                transformOrigin: \"0 0\",\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <svg viewBox=\"0 0 200 200\" style={{\n                    border: \"1px solid black\",\n                    width: \"200px\",\n                    height: \"200px\",\n                }}>\n                    <path d=\"M 0 0 L 200 0 L 200 200 z\" ref={targetRef} style={{\n                        fill: \"white\",\n                        stroke: \"red\",\n                        strokeWidth: 2,\n                    }} />\n                </svg>\n                <Moveable\n                    target={targetRef}\n                    draggable={true}\n                    rotatable={true}\n                    scalable={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-SVG/react/ReactSVGCircleApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<SVGCircleElement>(null);\n\n    return (\n        <div className=\"root\" style={{\n            paddingLeft: \"100px\",\n            paddingTop: \"100px\",\n        }}>\n            <div className=\"container\" style={{\n                transformOrigin: \"0 0\",\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <svg viewBox=\"0 0 200 200\" style={{\n                    border: \"1px solid black\",\n                    width: \"200px\",\n                    height: \"200px\",\n                }}>\n                    <circle cx=\"50\" cy=\"100\" r=\"50\"  ref={targetRef}/>\n                </svg>\n                <Moveable\n                    target={targetRef}\n                    draggable={true}\n                    rotatable={true}\n                    scalable={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                ></Moveable>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-SVG/react/ReactSVGGApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<SVGPathElement>(null);\n\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                transformOrigin: \"0 0\",\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <svg viewBox=\"0 0 200 200\" style={{\n                    position: \"relative\",\n                    border: \"1px solid black\",\n                    width: \"200px\",\n                    height: \"200px\",\n                    top: \"100px\",\n                    left: \"100px\",\n                }}>\n                    <g\n                        transform=\"translate(10, 10) rotate(0)\"\n                        x=\"50\"\n                        y=\"50\"\n                        style={{\n                            // transform: \"translate(10px, 10px) rotate(20deg)\",\n                        }}\n                    >\n                        <path d=\"M 50 50 L 250 50 L 250 250 z\" ref={targetRef} style={{\n                            transform: \"translate(30px, 30px) rotate(20deg)\",\n                            fill: \"white\",\n                            stroke: \"red\",\n                            strokeWidth: 2,\n                            // transform: \"translate(10px, 10px) rotate(20deg)\",\n                        }} />\n                    </g>\n                </svg>\n                <Moveable\n                    target={targetRef}\n                    draggable={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-SVG/react/ReactSVGGroupApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App() {\n    return (<div className=\"container\">\n        <svg width=\"50\" height=\"50\" style={{\n            transform: \"translate(13px, 37px)\",\n        }}>\n            <circle cx=\"25\" cy=\"25\" r=\"25\" fill=\"blue\"></circle>\n        </svg>\n        <svg width=\"50\" height=\"50\" style={{\n            transform: \"translate(104px, 30px)\",\n        }}>\n            <rect width=\"50\" height=\"50\" rx=\"3\" fill=\"red\" />\n        </svg>\n        <Moveable\n            target={\"svg\"}\n            draggable={true}\n            onDrag={e => {\n                e.target.style.transform = e.transform;\n            }}\n        />\n    </div>);\n}\n"
  },
  {
    "path": "storybook/stories/4-SVG/react/ReactSVGLineApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<SVGLineElement>(null);\n\n    return (\n        <div className=\"root\" style={{\n            paddingLeft: \"100px\",\n            paddingTop: \"100px\",\n        }}>\n            <div className=\"container\" style={{\n                transformOrigin: \"0 0\",\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <svg viewBox=\"0 0 200 200\" style={{\n                    border: \"1px solid black\",\n                    width: \"200px\",\n                    height: \"200px\",\n                }}>\n                    <line x1=\"0\" y1=\"80\" x2=\"100\" y2=\"80\" strokeWidth=\"4\" stroke=\"black\"  ref={targetRef} />\n                </svg>\n                <Moveable\n                    target={targetRef}\n                    draggable={true}\n                    rotatable={true}\n                    scalable={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                ></Moveable>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-SVG/react/ReactSVGSVGApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    const targetRef = React.useRef<SVGSVGElement>(null);\n\n    return (\n        <div className=\"root\" style={{\n            paddingLeft: \"100px\",\n            paddingTop: \"100px\",\n        }}>\n            <div className=\"container\" style={{\n                transformOrigin: \"0 0\",\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <svg viewBox=\"0 0 200 200\" ref={targetRef} style={{\n                    border: \"1px solid black\",\n                    width: \"200px\",\n                    height: \"200px\",\n                }}>\n                    <path d=\"M 0 0 L 200 0 L 200 200 z\" style={{\n                        fill: \"white\",\n                        stroke: \"red\",\n                        strokeWidth: 2,\n                    }} />\n                </svg>\n                <Moveable\n                    target={targetRef}\n                    draggable={true}\n                    rotatable={true}\n                    scalable={true}\n                    onRender={e => {\n                        e.target.style.cssText += e.cssText;\n                    }}\n                ></Moveable>\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-SVG/react/ReactSVGTargetGApp.tsx",
    "content": "import * as React from \"react\";\nimport Moveable from \"@/react-moveable\";\n\nexport default function App(props: Record<string, any>) {\n    return (\n        <div className=\"root\">\n            <div className=\"container\" style={{\n                transformOrigin: \"0 0\",\n                transform: `scale(${props.containerScale})`,\n            }}>\n                <svg viewBox=\"0 0 200 200\" style={{\n                    position: \"relative\",\n                    border: \"1px solid black\",\n                    width: \"200px\",\n                    height: \"200px\",\n                    top: \"100px\",\n                    left: \"100px\",\n                }}>\n                    <g className=\"g\">\n                        <path d=\"M 0 0 L 200 0 L 200 200 z\" style={{\n                            fill: \"white\",\n                            stroke: \"red\",\n                            strokeWidth: 2,\n                            transform: \"translate(50px, 50px)\",\n                        }} />\n                    </g>\n                </svg>\n                <Moveable\n                    target={\".g\"}\n                    draggable={true}\n                    onDrag={e => {\n                        e.target.style.transform = e.transform;\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"
  },
  {
    "path": "storybook/stories/4-SVG/react-SVG.stories.tsx",
    "content": "import { add } from \"../utils/story\";\nimport \"../common.css\";\nimport \"../templates/default.css\";\nimport { expect } from \"@storybook/jest\";\nimport { wait } from \"../utils/testing\";\n\nexport default {\n    title: \"SVG\",\n};\n\nexport const SVGPathElement = add(\"SVGPathElement\", {\n    appName: \"ReactPathApp\",\n    app: require(\"./react/ReactPathApp\").default,\n});\nexport const SVGSVGElement = add(\"SVGSVGElement\", {\n    appName: \"ReactSVGSVGApp\",\n    app: require(\"./react/ReactSVGSVGApp\").default,\n});\n\nexport const SVGCircle = add(\"Circle\", {\n    appName: \"ReactSVGCircleApp\",\n    app: require(\"./react/ReactSVGCircleApp\").default,\n});\n\nexport const SVGLine = add(\"Line\", {\n    appName: \"ReactSVGLineApp\",\n    app: require(\"./react/ReactSVGLineApp\").default,\n});\n\nexport const SVGG = add(\"SVGElement with G tag\", {\n    appName: \"ReactSVGGApp\",\n    app: require(\"./react/ReactSVGGApp\").default,\n});\n\nexport const SVGTargetG = add(\"SVGElement with target G tag\", {\n    appName: \"ReactSVGTargetGApp\",\n    app: require(\"./react/ReactSVGTargetGApp\").default,\n});\n\nexport const SVGGroup = add(\"SVG Group\", {\n    appName: \"ReactSVGGroupApp\",\n    app: require(\"./react/ReactSVGGroupApp\").default,\n    play: async ({ canvasElement }) => {\n        await wait();\n\n        const area = canvasElement.querySelector<HTMLElement>(\".moveable-area\")!;\n\n        expect(area.style.width).toBe(\"191px\");\n        expect(area.style.height).toBe(\"57px\");\n        expect(area.style.transform).toBe(\"translate(0px, 0px) rotate(0deg) scale(1, 1)\");\n    },\n});\n\nexport const SVGOrigin = add(\"SVGPathElement with center origin\", {\n    appName: \"ReactOriginApp\",\n    app: require(\"./react/ReactOriginApp\").default,\n});\n\nexport const SVGFillboxOrigin = add(\"SVGPathElement with center origin and transform fill-box\", {\n    appName: \"ReactOriginFillboxApp\",\n    app: require(\"./react/ReactOriginFillBoxApp\").default,\n});\n"
  },
  {
    "path": "storybook/stories/common.css",
    "content": ".dark {\n    color: white;\n}\n"
  },
  {
    "path": "storybook/stories/controls/default.ts",
    "content": "import { makeArgType, makeLink, makeOptionLink } from \"../utils\";\n\nexport const SCALE_CONTROLS = {\n    \"containerScale\": makeArgType({\n        type: \"number\",\n        description: \"container's scale\",\n        defaultValue: 1,\n    }),\n};\n\nexport const DEFAULT_CONTROLS = {\n    padding: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Moveable\", \"padding\"),\n        defaultValue: { left: 0, top: 0, right: 0, bottom: 0 },\n    }),\n    hideDefaultLines: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Moveable\", \"hideDefaultLines\"),\n        defaultValue: false,\n    }),\n};\n\n\nexport const DEFAULT_SCROLLABLE_CONTROLS = {\n    threshold: makeArgType({\n        type: \"number\",\n        description: makeOptionLink(\"Scrollable\", \"ScrollableOptions\", \"threshold\"),\n        defaultValue: 30,\n    }),\n    throttleTime: makeArgType({\n        type: \"number\",\n        description: makeOptionLink(\"Scrollable\", \"ScrollableOptions\", \"throttleTime\"),\n        defaultValue: 0,\n    }),\n    checkScrollEvent: makeArgType({\n        type: \"boolean\",\n        description: makeOptionLink(\"Scrollable\", \"ScrollableOptions\", \"checkScrollEvent\"),\n        defaultValue: false,\n    }),\n};\n\nexport const DEFAULT_DRAGGABLE_CONTROLS = {\n    draggable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Draggable\", \"draggable\"),\n        defaultValue: true,\n    }),\n    throttleDrag: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Draggable\", \"throttleDrag\"),\n        defaultValue: 1,\n    }),\n    edgeDraggable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Draggable\", \"edgeDraggable\"),\n        defaultValue: false,\n    }),\n    throttleDragRotate: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Draggable\", \"throttleDragRotate\"),\n        defaultValue: 0,\n    }),\n    startDragRotate: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Draggable\", \"startDragRotate\"),\n        defaultValue: 0,\n    }),\n};\n\nexport const DEFAULT_RESIZABLE_CONTROLS = {\n    resizable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Resizable\", \"resizable\"),\n        defaultValue: true,\n    }),\n    edge: makeArgType({\n        type: \"array\",\n        description: makeLink(\"Resizable\", \"edge\"),\n        defaultValue: [],\n    }),\n    maxWidth: makeArgType({\n        type: \"text\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: \"auto\",\n    }),\n    maxHeight: makeArgType({\n        type: \"text\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: \"auto\",\n    }),\n    minWidth: makeArgType({\n        type: \"text\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: \"auto\",\n    }),\n    minHeight: makeArgType({\n        type: \"text\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: \"auto\",\n    }),\n    keepRatio: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Resizable\", \"keepRatio\"),\n        defaultValue: false,\n    }),\n    throttleResize: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Resizable\", \"throttleResize\"),\n        defaultValue: 1,\n    }),\n    renderDirections: makeArgType({\n        type: \"array\",\n        description: makeLink(\"Resizable\", \"renderDirections\"),\n        defaultValue: [\"nw\", \"n\", \"ne\", \"w\", \"e\", \"sw\", \"s\", \"se\"],\n    }),\n};\n\nexport const DEFAULT_SCALABLE_CONTROLS = {\n    scalable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Scalable\", \"scalable\"),\n        defaultValue: true,\n    }),\n    keepRatio: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Scalable\", \"keepRatio\"),\n        defaultValue: false,\n    }),\n    throttleScale: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Scalable\", \"throttleScale\"),\n        defaultValue: 0,\n    }),\n    renderDirections: makeArgType({\n        type: \"array\",\n        description: makeLink(\"Scalable\", \"renderDirections\"),\n        defaultValue: [\"nw\", \"n\", \"ne\", \"w\", \"e\", \"sw\", \"s\", \"se\"],\n    }),\n};\n\nexport const DEFAULT_ROTATABLE_CONTROLS = {\n    rotatable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Rotatable\", \"rotatable\"),\n        defaultValue: true,\n    }),\n    throttleRotate: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Rotatable\", \"throttleRotate\"),\n        defaultValue: 0,\n    }),\n    rotationPosition: makeArgType({\n        type: \"inline-radio\",\n        description: makeLink(\"Rotatable\", \"rotationPosition\"),\n        defaultValue: \"top\",\n        control: {\n            options: [\n                \"top\",\n                \"left\",\n                \"right\",\n                \"bottom\",\n                \"top-left\",\n                \"top-right\",\n                \"bottom-left\",\n                \"bottom-right\",\n                \"left-top\",\n                \"right-top\",\n                \"left-bottom\",\n                \"right-bottom\",\n                \"none\",\n                [\"top\", \"left\"],\n                [\"top\", \"bottom\"],\n            ],\n        },\n    }),\n};\nexport const DEFAULT_WARPABLE_CONTROLS = {\n    warpable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Warpable\", \"warpable\"),\n        defaultValue: true,\n    }),\n    renderDirections: makeArgType({\n        type: \"array\",\n        description: makeLink(\"Warpable\", \"renderDirections\"),\n        defaultValue: [\"nw\", \"n\", \"ne\", \"w\", \"e\", \"sw\", \"s\", \"se\"],\n    }),\n};\n\nexport const DEFAULT_SNAPPABLE_CONTROLS = {\n    snappable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"snappable\"),\n        defaultValue: true,\n    }),\n    snapDirections: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Snappable\", \"snapDirections\"),\n        defaultValue: { top: true, left: true, bottom: true, right: true },\n    }),\n    snapHorizontalThreshold: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Snappable\", \"snapHorizontalThreshold\"),\n        defaultValue: 5,\n    }),\n    snapVerticalThreshold: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Snappable\", \"snapVerticalThreshold\"),\n        defaultValue: 5,\n    }),\n};\nexport const DEFAULT_SNAPPABLE_GUIDELINES_CONTROLS = {\n    verticalGuidelines: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Snappable\", \"verticalGuidelines\"),\n        defaultValue: [50, 150, 250, 450, 550],\n    }),\n    horizontalGuidelines: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Snappable\", \"horizontalGuidelines\"),\n        defaultValue: [0, 100, 200, 400, 500],\n    }),\n};\nexport const DEFAULT_SNAPPABLE_ELEMENTS_CONTROLS = {\n    snapDirections: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Snappable\", \"snapDirections\"),\n        defaultValue: { top: true, left: true, bottom: true, right: true, center: true, middle: true },\n    }),\n    elementSnapDirections: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Snappable\", \"elementSnapDirections\"),\n        defaultValue: { top: true, left: true, bottom: true, right: true, center: true, middle: true },\n    }),\n    snapGap: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"snapGap\"),\n        defaultValue: true,\n    }),\n    isDisplaySnapDigit: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"isDisplaySnapDigit\"),\n        defaultValue: true,\n    }),\n    isDisplayInnerSnapDigit: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"isDisplayInnerSnapDigit\"),\n        defaultValue: false,\n    }),\n    snapDigit: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Snappable\", \"snapDigit\"),\n        defaultValue: 0,\n    }),\n    maxSnapElementGuidelineDistance: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Snappable\", \"maxSnapElementGuidelineDistance\"),\n        defaultValue: Infinity,\n    }),\n};\nexport const DEFAULT_SNAP_GRID_CONTROLS = {\n    snappable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"snappable\"),\n        defaultValue: true,\n    }),\n    isDisplayGridGuidelines: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"isDisplayGridGuidelines\"),\n        defaultValue: false,\n    }),\n    snapGridWidth: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Snappable\", \"snapGridWidth\"),\n        defaultValue: 10,\n    }),\n    snapGridHeight: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Snappable\", \"snapGridHeight\"),\n        defaultValue: 10,\n    }),\n};\n\nexport const DEFAULT_SNAP_CONTAINER_CONTROLS = {\n    snapContainer: makeArgType({\n        type: \"text\",\n        description: makeLink(\"Snappable\", \"snapContainer\"),\n        defaultValue: \".snapContainer\",\n    }),\n};\nexport const DEFAULT_BOUNDS_CONTROLS = {\n    snappable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"snappable\"),\n        defaultValue: true,\n    }),\n    bounds: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Snappable\", \"bounds\"),\n        defaultValue: { left: 0, top: 0, right: 0, bottom: 0, position: \"css\" },\n    }),\n};\nexport const DEFAULT_INNER_BOUNDS_CONTROLS = {\n    snappable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Snappable\", \"snappable\"),\n        defaultValue: true,\n    }),\n    innerBounds: makeArgType({\n        type: \"object\",\n        description: makeLink(\"Snappable\", \"innerBounds\"),\n        defaultValue: { left: 0, top: 0, width: 100, height: 100 },\n    }),\n};\n\n\n\nexport const DEFAULT_ORIGIN_DRAGGABLE_CONTROLS = {\n    originDraggable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"OriginDraggable\", \"originDraggable\"),\n        defaultValue: true,\n    }),\n    originRelative: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"OriginDraggable\", \"originRelative\"),\n        defaultValue: true,\n    }),\n};\n\n\nexport const DEFAULT_CLIPPABLE_CONTROLS = {\n    clippable: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Clippable\", \"clippable\"),\n        defaultValue: true,\n    }),\n    clipRelative: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Clippable\", \"clipRelative\"),\n        defaultValue: false,\n    }),\n    clipArea: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Clippable\", \"clipArea\"),\n        defaultValue: false,\n    }),\n    dragWithClip: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Clippable\", \"dragWithClip\"),\n        defaultValue: 0,\n    }),\n    defaultClipPath: makeArgType({\n        type: \"inline-radio\",\n        description: makeLink(\"Clippable\", \"defaultClipPath\"),\n        defaultValue: \"inset\",\n        control: {\n            options: [\n                \"circle\",\n                \"inset\",\n                \"ellipse\",\n                \"rect\",\n                \"polygon\",\n            ],\n        },\n    }),\n    clipTargetBounds: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Clippable\", \"clipTargetBounds\"),\n        defaultValue: false,\n    }),\n    keepRatio: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Clippable\", \"keepRatio\"),\n        defaultValue: false,\n    }),\n};\n"
  },
  {
    "path": "storybook/stories/controls/group.ts",
    "content": "import { makeArgType, makeLink } from \"../utils\";\n\nexport const DEFAULT_GROUPPABLE_GROUP_CONTROLS = {\n    hideChildMoveableDefaultLines: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Grouppable\", \"hideChildMoveableDefaultLines\"),\n        defaultValue: false,\n    }),\n};\nexport const DEFAULT_RESIZABLE_GROUP_CONTROLS = {\n    maxWidth: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: 0,\n    }),\n    maxHeight: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: 0,\n    }),\n    minWidth: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: 0,\n    }),\n    minHeight: makeArgType({\n        type: \"number\",\n        description: makeLink(\"Resizable\", \"OnResizeStart\"),\n        defaultValue: 0,\n    }),\n    keepRatio: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Resizable\", \"keepRatio\"),\n        defaultValue: true,\n    }),\n};\n\nexport const DEFAULT_SCALABLE_GROUP_CONTROLS = {\n    keepRatio: makeArgType({\n        type: \"boolean\",\n        description: makeLink(\"Scalable\", \"keepRatio\"),\n        defaultValue: true,\n    }),\n};\n"
  },
  {
    "path": "storybook/stories/templates/default.css",
    "content": "html,\nbody {\n    position: relative;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n}\n\nhtml:has(.no-relative),\nbody:has(.no-relative) {\n    margin: 8px;\n    padding: 8px;\n    position: static;\n    /* border: 8px solid red; */\n}\n\nhtml:has(.no-relative) {\n    position: relative;\n}\n\nhtml:has(.margin),\nbody:has(.margin) {\n    /* margin-top: 50px; */\n}\n\n.margin .root {\n    position: static;\n}\n\n.description {\n    padding: 10px;\n}\n\n.root {\n    position: relative;\n}\n\n.container {\n    position: relative;\n    margin-top: 50px;\n}\n\n.will-change-container {\n    padding-left: 100px;\n    padding-top: 100px;\n    will-change: transform;\n}\n\n.will-change-target {\n    position: relative;\n    width: 100px;\n    height: 100px;\n    line-height: 100px;\n    text-align: center;\n    background: #ee8;\n    color: #333;\n    font-weight: bold;\n    border: 1px solid #333;\n    box-sizing: border-box;\n}\n\n.target {\n    position: absolute;\n    width: 100px;\n    height: 100px;\n    top: 150px;\n    left: 100px;\n    line-height: 100px;\n    text-align: center;\n    background: #ee8;\n    color: #333;\n    font-weight: bold;\n    border: 1px solid #333;\n    box-sizing: border-box;\n}\n\n.target1 {\n    left: 120px;\n    top: 120px;\n}\n\n.target2 {\n    left: 300px;\n    top: 140px;\n}\n\n.target3 {\n    left: 180px;\n    top: 250px;\n}\n\n.nested {\n    position: absolute;\n    border: 4px solid #ccc;\n    width: 100px;\n    height: 100px;\n    top: 50px;\n    left: 70px;\n    color: #333;\n    /* box-sizing: border-box; */\n}\n\n.nested.first {\n    top: 150px;\n}\n\n.nested.rotate {\n    transform-origin: 0 0;\n    transform: rotate(-30deg);\n}\n\n.nested.scale {\n    transform: scale(1.5, 1.5);\n}\n\n.nested .target {\n    top: 50px;\n    left: 50px\n}\n\n\n/* pos guidelines */\n.moveable-normal.red {\n    background: red !important;\n}\n\n/* gap guidelines */\n.moveable-gap.red {\n    background: red !important;\n}\n\n/* When snapped to an element in elementGuidelines */\n.moveable-bold.red {\n    background: red !important;\n}\n\n/* A dashed line between target and element */\n.moveable-dashed.red {\n    border-top-color: red !important;\n    border-left-color: red !important;\n}\n\n/* pos guidelines */\n.moveable-normal.green {\n    background: green !important;\n}\n\n/* gap guidelines */\n.moveable-gap.green {\n    background: green !important;\n}\n\n/* When snapped to an element in elementGuidelines */\n.moveable-bold.green {\n    background: green !important;\n}\n\n/* A dashed line between target and element */\n.moveable-dashed.green {\n    border-top-color: green !important;\n    border-left-color: green !important;\n}\n\n.scrollArea {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: calc(100vh - 100px);\n    overflow: auto;\n}\n\n.scrollArea:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 300%;\n    width: 100%;\n    background: linear-gradient(#333,\n            #fff);\n}\n\n.infinite-viewer {\n    height: 500px;\n}\n\n.control-padding .moveable-around-control {\n    background: #f55 !important;\n}\n\n\n.cube {\n    display: inline-block;\n    border-radius: 5px;\n    width: 40px;\n    height: 40px;\n    margin: 4px;\n    background: #eee;\n    --color: #4af;\n    color: #333;\n    line-height: 40px;\n    text-align: center;\n}\n\n.cube .cube {\n    background: #ddd;\n    margin-left: 20px;\n}\n"
  },
  {
    "path": "storybook/stories/templates/default.ts",
    "content": "import DEFAULT_CSS_TEMPLATE from \"./default.css?raw\";\n\nexport { DEFAULT_CSS_TEMPLATE };\n"
  },
  {
    "path": "storybook/stories/tests/GestoHelper.ts",
    "content": "export function mousedown(target: HTMLElement, [clientX, clientY]: number[]) {\n    const event = new MouseEvent(\"mousedown\", {\n        clientX,\n        clientY,\n    });\n    target.dispatchEvent(event);\n}\n\nexport function getMouseInit(startRect: { left: number, top: number }, offset: number[]) {\n    return {\n        buttons: 1,\n        screenX: startRect.left + offset[0],\n        screenY: startRect.top + offset[1],\n        clientX: startRect.left + offset[0],\n        clientY: startRect.top + offset[1],\n        offsetX: offset[0],\n        offsetY: offset[1],\n        bubbles: true,\n        cancelable: true,\n    };\n}\nexport function dispatchDrag(\n    target: HTMLElement,\n    offset: number[],\n    [distX, distY]: number[],\n    options: { duration: number, interval: number } = { duration: 50, interval: 5 },\n) {\n    const startRect = target.getBoundingClientRect();\n    const mousedown = new MouseEvent(\"mousedown\", getMouseInit(startRect, offset));\n    target.dispatchEvent(mousedown);\n\n    const count = Math.floor(options.duration / options.interval);\n    for (let i = 1; i <= count; ++i) {\n        dispatchMouseMove(target, getMouseInit(startRect, [\n            offset[0] + distX / count * i,\n            offset[1] + distY / count * i,\n        ]), options.interval * i);\n    }\n    return new Promise<void>(resolve => {\n        setTimeout(() => {\n            const mosueup = new MouseEvent(\"mouseup\", getMouseInit(startRect, [offset[0] + distX, offset[1] + distY]));\n\n            target.dispatchEvent(mosueup);\n            resolve();\n        }, options.duration);\n    });\n}\n\nexport async function dispatchMouseMove(target: HTMLElement, moustInit: any, time: number) {\n    setTimeout(() => {\n        const mousemove = new MouseEvent(\"mousemove\", moustInit);\n\n        target.dispatchEvent(mousemove);\n    }, time);\n}\n"
  },
  {
    "path": "storybook/stories/utils/story.tsx",
    "content": "/* eslint-disable no-empty */\n/* eslint-disable @typescript-eslint/no-var-requires */\n/* eslint-disable max-len */\nimport * as React from \"react\";\nimport { StoryContext } from \"@storybook/react\";\nimport { ClientApi } from \"@storybook/client-api\";\n\nimport { convertReactTemplate, convertPath, makeArgs, convertTemplate } from \"../utils\";\nimport { DEFAULT_CSS_TEMPLATE } from \"../templates/default\";\nimport { getEntries, isFunction } from \"@daybrush/utils\";\nimport { angularWrapper, scriptWrapper, svelteWrapper, vueWrapper } from \"./wrapper\";\n\n// // production 모드거나, 실패시 true\n// declare const SKIP_TEST: boolean;\n// // test 여부\ndeclare const STORY_CODES: Record<string, {\n    code: string;\n    appName: string;\n    fileName: string;\n    framework: string;\n    relativePath: string;\n}>;\n\nconst EXEC_TEST = false;\nconst SKIP_TEST = false;\n\nexport interface StoryParameter {\n    app: any;\n    appName?: string;\n    relativePath?: string;\n    argsTypes?: Record<string, any>;\n    args?: Record<string, any>;\n    play?: (context: StoryContext) => Promise<void> | void;\n}\nexport type StroyFunc = {\n    (this: any, props: any): React.JSX.Element;\n    storyName?: string;\n    argTypes?: Record<string, any>;\n    play?: (context: StoryContext) => Promise<void> | void;\n    args?: Record<string, any>;\n    parameters?: Record<string, any>;\n    isSkip?: boolean;\n    appName?: string;\n    relativePath?: string;\n};\n\nfunction makeProxyObject(\n    defaultValue: Record<string, any> = {},\n    setter?: (obj: Record<string, any>, prop: string, value: any) => any,\n): Record<string, any> {\n    const proxy = new Proxy({} as Record<string, any>, {\n        set(obj, prop, value) {\n            if (!setter?.(obj, prop as string, value)) {\n                obj[prop as string] = value;\n            }\n            return true;\n        },\n    });\n\n    getEntries(defaultValue).forEach(([key, value]) => {\n        proxy[key] = value;\n    });\n    return proxy;\n}\n\nexport function makeGroup(\n    relativePath: string,\n) {\n    return {\n        add(storyTitle: string, parameter: StoryParameter) {\n            return add(storyTitle, {\n                relativePath,\n                ...parameter,\n            })\n        },\n    };\n}\n\nexport function add(storyTitle: string, parameter: StoryParameter): StroyFunc {\n    const {\n        relativePath,\n        argsTypes,\n        args,\n        play,\n        app,\n        appName,\n    } = parameter;\n    const previews: any[] = [\n        {\n            tab: \"CSS\",\n            template: DEFAULT_CSS_TEMPLATE,\n            copy: true,\n            language: \"css\",\n        },\n    ];\n\n    // test라면 play가 없는 스토리는 전부 빈공백으로 표시\n    if (EXEC_TEST && !play) {\n        return function Empty() {\n            return null;\n        } as any;\n    }\n\n    // test가 아니라면 code preview 표시\n    if (!EXEC_TEST) {\n        try {\n            const codeInfo = STORY_CODES[`${relativePath}-react-${appName}-${appName}.tsx`];\n\n            previews.unshift({\n                tab: \"React\",\n                template: convertReactTemplate(convertPath(codeInfo.code)),\n                copy: true,\n                // codesandbox: DEFAULT_REACT_CODESANDBOX([\"react-moveable\"]),\n                language: \"tsx\",\n            });\n        } catch (e) {\n            console.log(e);\n        }\n        try {\n            const codeInfo = STORY_CODES[`${relativePath}-script-${appName}-App.html`];\n            const htmlCode = codeInfo.code;\n\n            previews.push({\n                tab: \"Script\",\n                description: \"HTML\",\n                template: htmlCode,\n                copy: true,\n                language: \"html\",\n            });\n        } catch (e) {\n        }\n        // Script\n        try {\n            const codeInfo = STORY_CODES[`${relativePath}-script-${appName}-App.js`];\n            const scriptCode = codeInfo.code;\n\n            previews.push({\n                tab: \"Script\",\n                description: \"JavaScript\",\n                template: convertTemplate(scriptCode, /\"\\$preview_([^\"]+)\"/g),\n                copy: true,\n                language: \"tsx\",\n            });\n        } catch (e) {\n        }\n        // Vue3\n        try {\n            const codeInfo = STORY_CODES[`${relativePath}-vue3-${appName}-App.vue`];\n            const vueCode = codeInfo.code;\n\n            previews.push({\n                tab: \"Vue3\",\n                template: convertTemplate(vueCode, /\"\\$preview_([^\"]+)\"/g),\n                copy: true,\n                language: \"html\",\n            });\n        } catch (e) {\n        }\n        // Vue2\n        try {\n            const codeInfo = STORY_CODES[`${relativePath}-vue2-${appName}-App.vue`];\n            const vueCode = codeInfo.code;\n\n            previews.push({\n                tab: \"Vue2\",\n                template: convertTemplate(vueCode, /\"\\$preview_([^\"]+)\"/g),\n                copy: true,\n                language: \"html\",\n            });\n        } catch (e) { }\n        // Svelte\n        try {\n            const codeInfo = STORY_CODES[`${relativePath}-svelte-${appName}-App.svelte`];\n            const svelteCode = codeInfo.code;\n\n            previews.push({\n                tab: \"Svelte\",\n                template: convertTemplate(svelteCode, /\"\\$preview_([^\"]+)\"/g),\n                copy: true,\n                language: \"html\",\n            });\n        } catch (e) { }\n        // Angular html\n        try {\n            const codeInfo = STORY_CODES[`${relativePath}-angular-${appName}-App.component.html`];\n            const angularCode = codeInfo.code;\n\n            previews.push({\n                tab: \"Angular\",\n                template: angularCode,\n                description: \"App.comoponent.html\",\n                copy: true,\n                language: \"tsx\",\n            });\n        } catch (e) { }\n        // Angular\n        try {\n            const codeInfo = STORY_CODES[`${relativePath}-angular-${appName}-App.ts`];\n            const angularCode = codeInfo.code;\n\n            previews.push({\n                tab: \"Angular\",\n                template: convertTemplate(angularCode, /\"\\$preview_([^\"]+)\"/g),\n                description: \"App.comoponent.ts\",\n                copy: true,\n                language: \"tsx\",\n            });\n        } catch (e) { }\n        // Lit\n        try {\n            const codeInfo = STORY_CODES[`${relativePath}-lit-${appName}-App.ts`];\n            const litCode = codeInfo.code;\n\n\n            previews.push({\n                tab: \"Lit\",\n                template: convertTemplate(litCode, /\"\\$preview_([^\"]+)\"/g),\n                copy: true,\n                language: \"tsx\",\n            });\n        } catch (e) { }\n    }\n    const func: StroyFunc = function (this: any, props: any) {\n        const Component = app;\n\n        return <Component {...props} />;\n    };\n\n    func.relativePath = relativePath;\n    func.appName = appName;\n    func.storyName = storyTitle;\n    func.argTypes = argsTypes || {};\n    func.args = {\n        ...makeArgs(argsTypes || {}),\n    };\n    func.parameters = {\n        preview: previews,\n    };\n\n    // dev에서만 표시\n    if (play) {\n        const clientApi = (window as any).__STORYBOOK_CLIENT_API__ as ClientApi<any>;\n        const facade = clientApi.facade;\n        const csfExports = facade.csfExports;\n        const allStories = facade.stories;\n\n        if (!SKIP_TEST) {\n            // dev mode or test mode\n            (func as any).play = play;\n\n            type StoryFunction = ((...args: any[]) => any) & {\n                storyName: string;\n                play: any;\n                args: any;\n                argTypes: any;\n                parameters: any;\n                isSkip?: boolean;\n            };\n\n            if (!(\"__PROXY__\" in csfExports)) {\n                facade.csfExports = makeProxyObject({\n                    __PROXY__: () => { },\n                    ...csfExports,\n                }, (obj, prop, value) => {\n                    obj[prop] = makeProxyObject(value, (child, childProp, childValue: StoryFunction) => {\n                        if (!isFunction(childValue) || !childValue.play || childValue.isSkip) {\n                            return;\n                        }\n                        if (childValue.storyName.match(/Test$/g)) {\n                            return;\n                        }\n\n                        const copied = childValue.bind({}) as StoryFunction;\n\n                        copied.storyName = `${childValue.storyName} (original)`;\n                        copied.argTypes = childValue.argTypes;\n                        copied.args = childValue.args;\n                        copied.parameters = childValue.parameters;\n                        // copied.play = childValue.play;\n                        copied.isSkip = true;\n\n                        child[`${childProp}Original`] = copied;\n\n                        // childValue.play = null;\n                        childValue.isSkip = true;\n                        childValue.storyName = `${childValue.storyName} (test)`;\n                    });\n\n                    return true;\n                });\n                facade.stories = makeProxyObject(allStories, (obj, prop, value) => {\n                    if (value.name?.includes(\" (test)\")) {\n                        const id = `${prop}-original`;\n                        obj[`${prop}-original`] = {\n                            ...value,\n                            id,\n                            name: value.name.replace(\" (original)\", \" (test)\"),\n                        };\n                    }\n                });\n            }\n        } else if (!EXEC_TEST) {\n            // production mode\n            if (!(\"__PROXY__\" in csfExports)) {\n                facade.csfExports = makeProxyObject({\n                    __PROXY__: () => { },\n                    ...csfExports,\n                });\n                facade.stories = makeProxyObject(allStories, (obj, prop, value) => {\n                    if (value.name?.match(/Test$/g)) {\n                        return true;\n                    }\n                });\n            }\n        }\n    }\n\n    return func;\n}\n\nexport const convertFrameworkStory = (framework: string, app: StroyFunc, frameworkApp: (...args: any[]) => any): StroyFunc => {\n    if (!app.appName) {\n        return function () {} as any;\n    }\n\n    let nextFunc!: StroyFunc;\n\n    if (framework === \"vue3\") {\n        nextFunc = vueWrapper(frameworkApp);\n    } else if (framework === \"svelte\") {\n        nextFunc = svelteWrapper(frameworkApp);\n    } else if (framework === \"angular\") {\n        nextFunc = angularWrapper(frameworkApp);\n    } else if (framework === \"script\") {\n        const relativePath = app.relativePath;\n        const appName = app.appName;\n        const codeInfo = STORY_CODES[`${relativePath}-script-${appName}-App.html`];\n\n        nextFunc = scriptWrapper(frameworkApp, codeInfo?.code);\n    } else {\n        return function() {} as any;\n    }\n    nextFunc.appName = app.appName;\n    nextFunc.relativePath = app.relativePath;\n    nextFunc.argTypes = app.argTypes;\n    nextFunc.args = app.args;\n    nextFunc.parameters = app.parameters;\n    nextFunc.play = app.play;\n\n    return nextFunc;\n}\n"
  },
  {
    "path": "storybook/stories/utils/testing.tsx",
    "content": "import { average, getDist } from \"@daybrush/utils\";\n\nexport function wait(time = 100) {\n    return new Promise(resolve => {\n        setTimeout(resolve, time);\n    });\n}\n\nexport function mouseEventMock(\n    startRect: { left: number; top: number; },\n    offsetRect: number[]\n) {\n    return {\n        buttons: 1,\n        screenX: startRect.left + offsetRect[0],\n        screenY: startRect.top + offsetRect[1],\n        clientX: startRect.left + offsetRect[0],\n        clientY: startRect.top + offsetRect[1],\n        offsetX: offsetRect[0],\n        offsetY: offsetRect[1],\n        bubbles: true,\n        cancelable: true,\n    };\n}\n\nexport function rotate(options: {\n    duration?: number,\n    interval?: number,\n    target: HTMLElement,\n    start: number,\n    end: number,\n    baseTarget: HTMLElement,\n}) {\n    const {\n        target,\n        baseTarget,\n        start: startDeg,\n        end: endDeg = startDeg,\n    } = options;\n    const {\n        left,\n        top,\n        width,\n        height,\n    } = target.getBoundingClientRect();\n    const {\n        width: baseWidth,\n        height: baseHeight,\n        left: baseLeft,\n        top: baseTop,\n    } = baseTarget.getBoundingClientRect();\n\n    const origin = [\n        baseLeft + baseWidth / 2,\n        baseTop + baseHeight / 2,\n    ];\n\n    const dist = getDist([\n        left + width / 2,\n        top + height / 2,\n    ], origin);\n\n    return userAction({\n        ...options,\n        calc: (index, count) => {\n            const progress = index ? index / count : 0;\n            const nextDeg = (startDeg + (endDeg - startDeg) * progress) / 180 * Math.PI;\n\n            return [\n                [\n                    origin[0] + Math.sin(nextDeg) * dist - left,\n                    origin[1] - Math.cos(nextDeg) * dist - top,\n                ],\n            ];\n        },\n    });\n}\n\nexport function pinch(options: {\n    duration?: number,\n    interval?: number,\n    target: HTMLElement,\n    start?: number[],\n    end?: number[],\n    startOffset?: number[],\n    endOffset: number[],\n}) {\n    const {\n        start = [0, 0],\n        end = start,\n        startOffset = [0, 0],\n        endOffset,\n    } = options;\n    return userAction({\n        isTouch: true,\n        ...options,\n        calc: (index, count) => {\n            if (index === 0) {\n                return [\n                    [start[0] + startOffset[0], start[1] + startOffset[1]],\n                    [start[0] - startOffset[0], start[1] - startOffset[1]],\n                ];\n            } else if (index === count) {\n                return [\n                    [end[0] + endOffset[0], end[1] + endOffset[1]],\n                    [end[0] - endOffset[0], end[1] - endOffset[1]],\n                ];\n            }\n\n            const center = [\n                start[0] + (end[0] - start[0]) / count * index,\n                start[1] + (end[1] - start[1]) / count * index,\n            ];\n            const centerOffset = [\n                startOffset[0] + (endOffset[0] - startOffset[0]) / count * index,\n                startOffset[1] + (endOffset[1] - startOffset[1]) / count * index,\n            ];\n            return [\n                [\n                    center[0] + centerOffset[0],\n                    center[1] + centerOffset[1],\n                ],\n                [\n                    center[0] - centerOffset[0],\n                    center[1] - centerOffset[1],\n                ],\n            ];\n        },\n    });\n}\nexport function pan(options: {\n    duration?: number,\n    interval?: number,\n    target: HTMLElement,\n    start: number[],\n    end?: number[],\n    isTouch?: boolean;\n}) {\n    const {\n        start,\n        end = start,\n    } = options;\n    return userAction({\n        ...options,\n        calc: (index, count) => {\n            if (index === 0) {\n                return [start];\n            } else if (index === count) {\n                return [end];\n            }\n\n            return [[\n                start[0] + (end[0] - start[0]) / count * index,\n                start[1] + (end[1] - start[1]) / count * index,\n            ]];\n        },\n    });\n}\n\nexport function mouseEventMocks(startRect: DOMRect, poses: number[][]) {\n    return poses.map(pos => mouseEventMock(startRect, pos));\n}\nexport function getCenterEventMock(startRect: DOMRect, clients: Array<{ offsetX: number; offsetY: number; }>) {\n    const centerPos = [\n        average(clients.map(client => client.offsetX)),\n        average(clients.map(client => client.offsetY)),\n    ];\n    return mouseEventMock(startRect, centerPos);\n}\n\nfunction getMockEvent(eventType: string, startRect: DOMRect, poses: number[][]) {\n    const isTouch = eventType.includes(\"touch\");\n    const moveClients = mouseEventMocks(startRect, poses);\n    const moveClient = getCenterEventMock(startRect, moveClients);\n\n    const event = new MouseEvent(eventType, moveClient);\n    if (isTouch) {\n        (event as any).touches = moveClients;\n    }\n    return event;\n}\nexport function userAction(options: {\n    duration?: number,\n    interval?: number,\n    target: HTMLElement,\n    calc: (index: number, count: number) => number[][],\n    isTouch?: boolean\n}) {\n    const {\n        duration = 0,\n        interval = duration,\n        target,\n        calc,\n        isTouch,\n    } = options;\n    const startRect = target.getBoundingClientRect();\n    const count = duration ? Math.floor(duration / interval) : 0;\n    const startEvent = getMockEvent(isTouch ? \"touchstart\" : \"mousedown\", startRect, calc(0, count));\n\n    if (isTouch) {\n        (startEvent as any).changedTouches = (startEvent as any).touches;\n    }\n\n    // start\n    target.dispatchEvent(startEvent);\n\n    // pan\n    for (let i = 1; i <= count; ++i) {\n        setTimeout(() => {\n            const moveEvent = getMockEvent(isTouch ? \"touchmove\" : \"mousemove\", startRect, calc(i, count));\n\n            target.dispatchEvent(moveEvent);\n        }, interval * i);\n    }\n\n    // end\n    return new Promise<void>(resolve => {\n        setTimeout(() => {\n            const endEvent = getMockEvent(isTouch ? \"touchend\" : \"mouseup\", startRect, calc(count, count));\n\n            target.dispatchEvent(endEvent);\n            resolve();\n        }, options.duration);\n    });\n}\n\nexport function findMoveable(canasElement: HTMLElement) {\n    return canasElement.querySelector<HTMLElement>(\".moveable-control-box\")!;\n}\n"
  },
  {
    "path": "storybook/stories/utils/wrapper.tsx",
    "content": "import React, { useEffect } from \"react\";\nimport { createApp } from \"@vue/runtime-dom\";\nimport 'zone.js';\nimport \"@angular/compiler\";\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { HttpClientModule } from '@angular/common/http';\nimport { Component, importProvidersFrom } from '@angular/core';\nimport { SvelteComponentTyped } from \"svelte\";\n\nexport function vueWrapper(vueComponent: any) {\n    return (props: Record<string, any>) => {\n        useEffect(() => {\n            createApp(vueComponent, props).mount(\".vue-root\");\n        }, []);\n        return <div className=\"vue-root\"></div>;\n    };\n}\n\nexport function svelteWrapper(svelteComponent: any) {\n    return (props: Record<string, any>) => {\n        useEffect(() => {\n            const component: SvelteComponentTyped = new svelteComponent({\n                target: document.querySelector(\".svelte-root\"),\n                props,\n            });\n            // component.$set(props);\n            // Object.entries(on).forEach(([event, handler]) =>\n            //   component.$on(event, handler)\n            // );\n\n            return () => {\n                component.$destroy();\n            };\n        }, []);\n        return <div className=\"svelte-root\"></div>;\n    }\n}\n\nexport function angularWrapper(angularComponent: any) {\n    return (props: Record<string, any>) => {\n        useEffect(() => {\n            const declaredInputs = angularComponent.ɵcmp.declaredInputs;\n            const keys = Object.keys(props).filter(propName => declaredInputs[propName]);\n            @Component({\n                selector: \"app-root\",\n                standalone: true,\n                template: `<ngx-app ${keys.map(propName => `[${propName}]=\"${propName}\"`).join(\" \")}></ngx-app>`,\n                imports: [angularComponent],\n            })\n            class NgxRootComponent {\n                constructor() {\n                    for (const name in props) {\n                        (this as any)[name] = props[name];\n                    }\n                }\n            }\n\n            const ref = bootstrapApplication(NgxRootComponent, {\n                providers: [importProvidersFrom(HttpClientModule)],\n            });\n\n            return () => {\n                ref.then(r => r.destroy());\n            }\n        }, []);\n\n        return <div className=\"angular-root\">\n            <app-root />\n        </div>;\n    };\n}\n\nexport const scriptWrapper = (scriptComponent: any, html: string) => {\n\n    return (props: Record<string, any>) => {\n        useEffect(() => {\n            return scriptComponent(props);\n        }, []);\n        return <div className=\"script-root\" dangerouslySetInnerHTML={{ __html: html }}>\n        </div>;\n    }\n};\n"
  },
  {
    "path": "storybook/stories/utils.ts",
    "content": "export function makeLink(ableName: string, property: string, ) {\n    return `<a href=\"https://daybrush.com/moveable/release/latest/doc/Moveable.${ableName}.html#${property}\" target=\"_blank\">See API</a>`;\n}\nexport function makeOptionLink(ableName: string, option: string, property: string) {\n    return `<a href=\"https://daybrush.com/moveable/release/latest/doc/Moveable.${ableName}.html#.${option}-${property}\" target=\"_blank\">See API</a>`;\n}\n\nexport function makeArgType(param: {\n    type: \"array\" | \"text\" | \"radio\" | \"object\" | \"number\" | \"boolean\" | \"inline-radio\";\n    description?: string;\n    defaultValue: any;\n    value?: any;\n    category?: string;\n    control?: Record<string, any>;\n    table?: Record<string, any>;\n}) {\n    return {\n        control: param.type,\n        ...(param.control || {}),\n        table: {\n            defaultValue: { summary: param.defaultValue },\n            category: param.category,\n            ...(param.table || {}),\n        },\n        description: param.description,\n        value: \"value\" in param ? param.value : param.defaultValue,\n    };\n}\nexport function makeArgs(argTypes: any) {\n    return Object.keys(argTypes).reduce((prev, cur) => {\n        prev[cur] = argTypes[cur].value;\n\n        return prev;\n    }, {} as Record<string, any>);\n}\n\nexport function convertPath(text: string, findName: string = \"react-moveable\", moduleName = findName) {\n    let nextText = text.replace(new RegExp(`\"[a-zA-Z0-9./_-]*${findName}[a-zA-Z0-9./_-]*\"`, \"g\"), `\"${moduleName}\"`);\n    nextText = nextText.replace(new RegExp(`'[a-zA-Z0-9./_-]*${findName}[a-zA-Z0-9./_-]*'`, \"g\"), `'${moduleName}'`);\n\n    return nextText;\n}\n\nexport function convertVanillaTemplate(text: string) {\n    let previewText = text.replace(/\\n^export[^\\n]*$/mg, \"\");\n\n    previewText = previewText.replace(/\\s*return grid;\\n\\}$/mg, \"\");\n    previewText = previewText.replace(/^[ ]{2}/mg, \"\");\n\n    return convertTemplate(previewText);\n}\nexport function convertVueTemplate(text: string) {\n    let previewText = text.replace(\"props:\", \"data:\");\n\n    previewText = previewText.replace(/\\[(\\s*\"([^\"]+)\",\\s*)+\\]/g, (...args) => {\n        return args[0].replace(\"[\", \"{\").replace(\"]\", \"}\").replace(/\"([^\"]+)\"/g, (_, name) => {\n            return `${name}: ${name}`;\n        });\n    });\n    return convertTemplate(previewText, /([a-zA-Z_0-9]+):\\s([a-zA-Z_0-9]+),/g, true);\n}\n\nexport function convertSvelteTemplate(text: string) {\n    const previewText = text.replace(/export let ([a-zA-Z_0-9]+);/g, \"const $1 = $1;\");\n\n    return convertTemplate(previewText, /([a-zA-Z_0-9]+) = ([a-zA-Z_0-9]+);/g, true);\n}\n\nexport function convertAngularTemplate(text: string) {\n    const previewText = text.replace(/@Input\\(\\) ([a-zA-Z_0-9]+): any;/g, \"$1 = $1;\");\n\n    return convertTemplate(previewText, /([a-zA-Z_0-9]+) = ([a-zA-Z_0-9]+);/g, true);\n}\nexport function convertReactTemplate(text: string) {\n    const previewText = text.replace(/@\\//g, \"\");\n\n    return convertTemplate(previewText);\n}\n\nexport function convertTemplate(text: string, regex = /props\\.([a-zA-Z0-9_]+)/g, includePrefix = false) {\n    const previewText = text.replace(/App\\([^)]*\\)/g, \"App()\");\n    let result: RegExpExecArray | null;\n    let index = 0;\n\n    const strings: string[] = [];\n    const values: string[] = [];\n\n    // eslint-disable-next-line no-cond-assign\n    while (result = regex.exec(previewText)) {\n        const nextIndex = result.index + (includePrefix ? result[0].lastIndexOf(result[2]) : 0);\n\n        strings.push(previewText.slice(index, nextIndex));\n        values.push(result[1]);\n        index = nextIndex + (includePrefix ? result[2].length : result[0].length);\n    }\n\n    strings.push(previewText.slice(index));\n    return [strings, values];\n}\n"
  },
  {
    "path": "storybook/tsconfig.json",
    "content": "{\n    \"compilerOptions\": {\n        \"outDir\": \"./outjs/\",\n        \"esModuleInterop\": false,\n        \"sourceMap\": true,\n        \"module\": \"esnext\",\n        \"target\": \"es5\",\n        \"experimentalDecorators\": true,\n        \"skipLibCheck\": true,\n        \"moduleResolution\": \"node\",\n        \"jsx\": \"react\",\n        \"lib\": [\n            \"es2019\",\n            \"es2015\",\n            \"dom\"\n        ],\n        \"allowJs\": true,\n        \"downlevelIteration\": true,\n        \"allowSyntheticDefaultImports\": true,\n        \"strict\": true,\n        \"strictNullChecks\": true,\n        \"forceConsistentCasingInFileNames\": true,\n        \"resolveJsonModule\": true,\n        \"isolatedModules\": true,\n        \"noEmit\": true,\n        \"baseUrl\": \".\",\n        \"paths\": {\n            \"@/stories/*\": [\n                \"./stories/*\"\n            ],\n            \"moveable\": [\n                \"../packages/moveable/src/\"\n            ],\n            \"croact-moveable\": [\n                \"../packages/croact-moveable/src/\"\n            ],\n            \"@/react-moveable\": [\n                \"../packages/react-moveable/src/\"\n            ],\n            \"react-moveable\": [\n                \"../packages/react-moveable/src/\"\n            ],\n            \"vue3-moveable\": [\n                \"../packages/vue3-moveable/src/\"\n            ],\n            \"svelte-moveable\": [\n                \"../packages/svelte-moveable/src/\"\n            ],\n            \"ngx-moveable\": [\n                \"../packages/ngx-moveable/projects/ngx-moveable/public-api.ts\"\n            ],\n            \"@moveable/helper\": [\n                \"../packages/helper/src/\"\n            ]\n        }\n    },\n    \"include\": [\n        \"./src/**/*.ts\",\n        \"./src/**/*.tsx\",\n        \"./test/**/*.ts\",\n        \"./test/**/*.tsx\",\n        \"./global.d.ts\",\n        \"./stories/**/*.ts\",\n        \"./stories/**/*.tsx\"\n    ],\n    \"exclude\": [\n        \"./stories/**/angular/**/*.ts\",\n        \"./stories/**/lit/**/*.ts\"\n    ]\n}\n"
  },
  {
    "path": "storybook/vite.config.js",
    "content": "import path from \"path\";\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react';\nimport vue from '@vitejs/plugin-vue';\nimport { svelte } from '@sveltejs/vite-plugin-svelte';\nimport { angular } from '@nitedani/vite-plugin-angular/plugin';\nimport commonjs from 'vite-plugin-commonjs'\nimport Decorators from \"@babel/plugin-proposal-decorators\";\n\n\n// config.resolve.alias[\"@/stories\"] = path.resolve(__dirname, \"../stories\");\n// config.resolve.alias[\"@/react-moveable\"] = path.resolve(__dirname, \"../src\");\n// config.resolve.alias[\"@/helper\"] = path.resolve(__dirname, \"../../helper/src\");\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n    plugins: [\n        commonjs(),\n        react({\n            include: [\n                path.resolve(__dirname, \"../packages/react-moveable/src\")\n            ],\n        }),\n        vue(),\n        svelte(),\n        // angular(),\n    ],\n    resolve: {\n        alias: [\n            {\n                find: \"@/stories\",\n                replacement: path.resolve(__dirname, \"./stories\")\n            },\n            {\n                find: \"@/react-moveable\",\n                replacement: path.resolve(__dirname, \"../packages/react-moveable/src\")\n            },\n            {\n                find: \"croact-moveable\",\n                replacement: path.resolve(__dirname, \"../packages/croact-moveable/dist/moveable.esm.js\")\n            },\n            {\n                find: \"moveable\",\n                replacement: path.resolve(__dirname, \"../packages/moveable/dist/moveable.esm.js\")\n            },\n            {\n                find: \"vue3-moveable\",\n                replacement: path.resolve(__dirname, \"../packages/vue3-moveable/src/components\")\n            },\n            {\n                find: \"svelte-moveable\",\n                replacement: path.resolve(__dirname, \"../packages/svelte-moveable/src/lib\")\n            },\n            {\n                find: \"ngx-moveable\",\n                replacement: path.resolve(__dirname, \"../packages/ngx-moveable/projects/ngx-moveable/src/public-api.ts\")\n            },\n            {\n                find: \"lit-moveable\",\n                replacement: path.resolve(__dirname, \"../packages/lit-moveable/src\")\n            },\n            {\n                find: \"@moveable/helper\",\n                replacement: path.resolve(__dirname, \"../packages/helper/src\")\n            },\n            {\n                find: \"react-moveable\",\n                replacement: path.resolve(__dirname, \"../packages/react-moveable/src\")\n            },\n\n        ],\n    },\n})\n"
  },
  {
    "path": "test/index.html",
    "content": "<style>\nhtml, body {\n    position: relative;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n}\n.description {\n    padding: 10px;\n}\n.root {\n    position: relative;\n}\n.container {\n    position: relative;\n    margin-top: 50px;\n}\n.target {\n    position: absolute;\n    width: 100px;\n    height: 100px;\n    top: 150px;\n    left: 100px;\n    line-height: 100px;\n    text-align: center;\n    background: #ee8;\n    color: #333;\n    font-weight: bold;\n    border: 1px solid #333;\n    box-sizing: border-box;\n}\n.test {\n    position: relative;\n    width: 100px;\n    height: 100px;\n}\n\n</style>\n<div class=\"test test1\" >Test</div>\n<div class=\"test test2 \" >Test</div>\n<!-- <script src=\"https://daybrush.com/moveable/release/latest/dist/moveable.js\"></script> -->\n<script src=\"../dist/moveable.js\"></script>\n<script>\n    const DimensionViewable = {\n        name: 'dimensionViewable',\n        props: [],\n        events: [],\n        render: (moveable, render) => {\n            const rect = moveable.getRect();\n\n            const style = {\n                position: 'absolute',\n                top: `${rect.height + 20}px`,\n                left: `${rect.width / 2}px`,\n                background: 'blue',\n                borderRadius: '5px',\n                padding: '3px 9px',\n                color: 'white',\n                fontSize: '13px',\n                whiteSpace: 'nowrap',\n                fontWeight: '500',\n                willChange: 'transform',\n                transform: 'translate(-50%, 0px)',\n            };\n\n            const props = {\n                style,\n                key: 'dimension-viewer',\n                class: 'moveable-dimension',\n            };\n\n            const text = `${rect.offsetWidth} x ${rect.offsetHeight}`;\n\n            console.log(rect);\n            return render.createElement('div', props, [text]);\n        },\n    };\n    const moveable = new Moveable(document.body, {\n        draggable: true,\n        target: document.querySelector(\".test1\"),\n        snappable: true,\n        // verticalGuidelines: [200],\n        bounds: { bottom: 200, right: 200 },\n        snapThreshold: 5,\n        padding: { top: 10 },\n        ables: [DimensionViewable],\n        props: {\n            dimensionViewable: true,\n        },\n    }).on(\"dragStart\", e => {\n        // if (e.inputEvent && e.inputEvent.target.className === \"test\") e.stop();\n    }).on(\"drag\", e => {\n        e.target.style.transform = e.transform;\n    });\n\n    // window.addEventListener(\"keyup\", e => {\n    //     moveable.updateRect();\n    //     moveable.request(\"draggable\", { deltaX: 0, deltaY: 0 }, true);\n    // })\n</script>\n"
  },
  {
    "path": "test/jsdoc.js",
    "content": "const path = require(\"path\");\nconst jsdocPath = require.resolve(\"@daybrush/jsdoc/jsdoc.js\").replace(\"/jsdoc.js\", \"\");\nconst pwd = process.cwd();\nconst fs = require(\"fs\");\nrequire = require(\"requizzle\")({\n    requirePaths: {\n        before: [path.join(jsdocPath, \"lib\")],\n        after: [path.join(jsdocPath, \"node_modules\")]\n    },\n    infect: true\n});\nenv = require(\"@daybrush/jsdoc/lib/jsdoc/env\");\nenv.dirname = jsdocPath;\nenv.pwd = pwd;\nenv.args = process.argv.slice(2);\n\nconst cli = require(\"@daybrush/jsdoc/cli\");\n\ncli.setVersionInfo();\ncli.loadConfig();\ncli.scanFiles();\ncli.createParser();\ncli.parseFiles();\ncli.resolveTutorials();\n\nenv.opts.template = __dirname;\n\nfunction exportJSON(result) {\n    const json = JSON.stringify(result, undefined, 4);\n    return `\nexport default ${json};\n`;\n}\nfunction exportESM(result) {\n    return Object.keys(result).map(longname => {\n        const value = result[longname];\n        const json = JSON.stringify(value, undefined, 4);\n\n        const variableName = longname\n            // typedef, member\n            .replace(/\\./g, \"_\")\n            // function, method\n            .replace(/#/g, \"_\")\n            // event\n            .replace(/:/g, \"__\");\n        return `\nexport const ${variableName} = ${json};\n`;\n    }).join(\"\");\n}\ncli.generateDocs().then(result => {\n    fs.writeFileSync(path.resolve(pwd, \"result.js\"), exportESM(result), { encoding: \"utf-8\" });\n});\n\n\n"
  },
  {
    "path": "test/portal.html",
    "content": "<style>\nhtml, body {\n    position: relative;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n}\n.description {\n    padding: 10px;\n}\n.root {\n    position: relative;\n}\n.container {\n    position: relative;\n    margin-top: 50px;\n}\n.target {\n    position: absolute;\n    width: 100px;\n    height: 100px;\n    top: 150px;\n    left: 100px;\n    line-height: 100px;\n    text-align: center;\n    background: #ee8;\n    color: #333;\n    font-weight: bold;\n    border: 1px solid #333;\n    box-sizing: border-box;\n}\n.test {\n    position: relative;\n    width: 100px;\n    height: 100px;\n}\n\n</style>\n<div class=\"root\">\n    <div class=\"container\" style=\"transform-origin: 0 0; transform: scale(0.5)\">\n        <div style=\"position: relative;transform: translate3d(0px, 0px, 100px)\">\n            <div class=\"target\">Target</div>\n        </div>\n        <div class=\"moveable\"></div>\n    </div>\n</div>\n<script src=\"../dist/moveable.js\"></script>\n<script>\n    const moveable = new Moveable(document.querySelector(\".moveable\"), {\n        draggable: true,\n        target: document.querySelector(\".target\"),\n        portalContainer: document.querySelector(\".moveable\"),\n    }).on(\"dragStart\", e => {\n        // if (e.inputEvent && e.inputEvent.target.class === \"test\") e.stop();\n    }).on(\"drag\", e => {\n        console.log(e.transform);\n        e.target.style.transform = e.transform;\n    });\n</script>\n"
  },
  {
    "path": "test/publish.d.ts",
    "content": "export interface TypeDefInterface {\n    kind: \"typedef\";\n    name: string;\n    longname: string;\n    properties: { [key: string]: PropertyInterface };\n}\nexport interface PropertyInterface {\n    name: string;\n    types: string[];\n    description: string;\n    optional: boolean;\n}\n\nexport interface FunctionInterface {\n    kind: \"function\",\n    name: string;\n    longname: string;\n    description: string;\n    params: ParamInterface[];\n    returns: ReturnInterface[];\n}\n\nexport interface ParamInterface {\n    name: string;\n    description: string;\n    types: string[];\n}\nexport interface ReturnInterface {\n    description: string;\n    types: string[];\n}\n\nexport interface MemberInterface {\n    kind: \"member\";\n    name: string;\n    longname: string;\n    scope: string;\n    description: string;\n    types: string[];\n}\n\nexport interface EventInterface {\n    kind: \"event\";\n    name: string;\n    longname: string;\n    description: string;\n    params: ParamInterface[];\n}\n\nexport interface NamespaceInterface {\n    kind: \"namespace\";\n    name: string;\n    longname: string;\n    description: string;\n}\n"
  },
  {
    "path": "test/publish.js",
    "content": "var helper = require(\"@daybrush/jsdoc/lib/jsdoc/util/templateHelper\");\n\nvar htmlsafe = helper.htmlsafe;\nvar linkto = helper.linkto;\n\n\nfunction buildItemTypeStrings(item) {\n    var types = [];\n\n    if (item && item.type && item.type.names) {\n        item.type.names.forEach(function(name) {\n            types.push( linkto(name, htmlsafe(name)) );\n        });\n    }\n\n    return types;\n}\n\nexports.publish = function(taffyData, opts, tutorials) {\n    const data = helper.prune(taffyData);\n    const result = {};\n    const isSplitProperties = true;\n\n    data().each(function(doclet) {\n        const {\n            name,\n            longname,\n            kind,\n            description,\n        } = doclet;\n\n        if (kind === \"typedef\") {\n            const properties = {};\n            doclet.properties.forEach(item => {\n                const type = buildItemTypeStrings(item);\n\n                properties[item.name] = {\n                    name: item.name,\n                    type,\n                    description: item.description,\n                    optional: item.optional,\n                };\n\n                if (isSplitProperties) {\n                    result[`${longname}.${item.name}`] = properties[item.name];\n                }\n            });\n\n            result[longname] = {\n                name,\n                longname,\n                kind,\n                properties,\n            };\n        } else if (kind === \"function\") {\n            result[longname] = {\n                name,\n                longname,\n                description,\n                kind,\n                params: doclet.params.map(item => {\n                    const types = buildItemTypeStrings(item);\n\n                    return {\n                        name: item.name,\n                        type: types,\n                        description: item.description,\n                    }\n                }),\n                returns: doclet.returns.map(item => {\n                    const types = buildItemTypeStrings(item);\n\n                    return {\n                        type: types,\n                        description: item.description,\n                    }\n                }),\n            };\n        } else if (kind === \"member\") {\n            result[longname] = {\n                name,\n                longname,\n                kind,\n                description,\n                scope: doclet.scope,\n                types: buildItemTypeStrings(doclet),\n            };\n        } else if (kind === \"event\") {\n            result[longname] = {\n                name,\n                longname,\n                kind,\n                description,\n                params: doclet.params.map(item => {\n                    return {\n                        name: item.name || \"\",\n                        type: buildItemTypeStrings(item),\n                        description: item.description,\n                    };\n                }),\n            }\n        } else if (kind === \"namespace\") {\n            result[longname] = {\n                kind,\n                name,\n                longname,\n                description,\n            }\n        } else {\n            console.log(kind);\n        }\n    });\n\n    return result;\n}\n"
  }
]