\n TopComponent(\n 'Responsive Dimensions Example',\n \n In this example, the responsive and{' '}\n parentWidth \n properties are available in the Storybook Controls tab.\n You can adjust them to see the live results in the image\n mapper.\n parentWidth ,\n you'll notice that the mapper becomes responsive. Try copying the code and see\n the results, kudos!\n \n Note: Full descriptions and explanations of all properties are available in the\n GitHub repository.\n \n
,\n )\n }\n />\n );\n },\n parameters: {\n reactCode: responsiveDimensionsCode,\n },\n args: {\n parentWidth: 640,\n },\n argTypes: {\n parentWidth: {\n control: 'number',\n },\n },\n};\n\nexport const AllDimensions: Story = {\n render: (args) => {\n const { width, height, imgWidth, natural, responsive, parentWidth } = args;\n\n return (\n \n TopComponent(\n 'All Dimensions Example',\n \n In this example, the width ,{' '}\n height ,imgWidth ,{' '}\n natural ,responsive , and{' '}\n parentWidth fields are available in the Storybook{' '}\n Controls tab. You can modify them to see the{' '}\n live results in the image mapper.\n \n Note: Full descriptions and explanations of all properties are available in the\n GitHub repository.\n \n
,\n )\n }\n />\n );\n },\n parameters: {\n reactCode: allDimensionsCode,\n },\n args: {\n width: 640,\n height: 480,\n imgWidth: 0,\n natural: false,\n responsive: false,\n parentWidth: 640,\n },\n argTypes: {\n width: {\n control: 'number',\n },\n height: {\n control: 'number',\n },\n imgWidth: {\n control: 'number',\n },\n natural: {\n control: 'boolean',\n },\n responsive: {\n control: 'boolean',\n },\n parentWidth: {\n control: 'number',\n },\n },\n};\n\nexport default meta;\n"
},
{
"path": "apps/examples/src/stories/Simple.stories.tsx",
"content": "import simpleCode from '@/code/simple';\nimport Mapper from '@/components/Mapper';\nimport TopComponent from '@/components/TopComponent';\n\nimport type { Meta, StoryObj } from '@storybook/react-vite';\n\nconst meta = {\n title: 'Examples/Simple',\n component: Mapper,\n tags: ['autodocs'],\n} as Meta;\n\ntype Story = StoryObj;\n\nexport const Simple: Story = {\n render: () => (\n \n TopComponent(\n 'Simple Example',\n Basic example showcasing the default setup and essential required properties.
,\n )\n }\n />\n ),\n parameters: {\n reactCode: simpleCode,\n },\n};\n\nexport default meta;\n"
},
{
"path": "apps/examples/src/styles/stories.css",
"content": ":root {\n --tag: #1b1f230d;\n --block: #efefef;\n --block-border: #cecece;\n --tag-block: #f6f8fa;\n}\n\nbody {\n font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;\n}\n\np {\n margin: 0;\n}\n\n.tag {\n padding: 0.2em 0.4em;\n margin: 0;\n font-size: 85%;\n background-color: var(--tag);\n border-radius: 6px;\n}\n\n.block {\n background: var(--block);\n border-left: var(--block-border) solid 10px;\n border-radius: 3px;\n padding: 12px 16px;\n}\n\n.tag-block {\n padding: 16px;\n line-height: 1.75;\n background-color: var(--tag-block);\n border-radius: 6px;\n}\n\n.big-font {\n font-size: 1.35rem;\n margin-top: 1rem;\n}\n\n.top_container {\n margin-bottom: 2rem;\n}\n\n.top_container .top_content {\n line-height: 1.5;\n}\n"
},
{
"path": "apps/examples/src/templates/clearButtonTemplate.ts",
"content": "import CONSTANTS from '@/constants';\n\nconst { url, name, areasUrl } = CONSTANTS;\n\nconst clearButtonTemplate = `import React, { Fragment } from 'react';\nimport ImageMapper from 'react-img-mapper';\n\nconst Mapper = () => {\n const url = '${url}';\n const name = '${name}';\n \n // Get JSON from below URL as an example and put it into the useState hook\n // URL: ${areasUrl}\n const initialAreas = [];\n const [areas, setAreas] = useState(initialAreas);\n \n return (\n \n setAreas(newAreas)}\n isMulti\n />\n setAreas(initialAreas)}>Clear \n \n )\n}\n\nexport default Mapper;`;\n\nexport default clearButtonTemplate;\n"
},
{
"path": "apps/examples/src/templates/variablesTemplate.ts",
"content": "import CONSTANTS from '@/constants';\n\nconst { url, name, areasUrl } = CONSTANTS;\n\nconst variablesTemplate = `const url = '${url}';\n const name = '${name}';\n // Get JSON from below URL as an example and put it here\n const areas = '${areasUrl}';`;\n\nexport default variablesTemplate;\n"
},
{
"path": "apps/examples/src/templates/zoomTemplate.ts",
"content": "import variablesTemplate from '@/templates/variablesTemplate';\n\nconst zoomTemplate = `import React, { Fragment, useState } from 'react';\nimport ImageMapper from 'react-img-mapper';\n\nconst Mapper = props => {\n const minWidth = 400;\n const [zoom, setZoom] = useState(640);\n\n ${variablesTemplate}\n\n const handleZoom = type => {\n setZoom(prev => {\n if (prev <= minWidth && type === 'out') return prev;\n return type === 'in' ? prev + props.parentWidth : prev - props.parentWidth;\n });\n };\n \n return (\n \n handleZoom('in')}>Zoom In \n handleZoom('out')}>Zoom Out \n \n )\n}\n\nexport default Mapper;`;\n\nexport default zoomTemplate;\n"
},
{
"path": "apps/examples/src/types/globals.d.ts",
"content": "import 'react-img-mapper';\n\ndeclare module 'react-img-mapper' {\n interface OverrideMapArea {\n title: string;\n }\n}\n"
},
{
"path": "apps/examples/src/types/index.ts",
"content": "import type { FC, ReactNode } from 'react';\n\nexport interface Children {\n children: ReactNode;\n}\n\nexport type Component = FC;\n\nexport type Layout = Component;\n"
},
{
"path": "apps/examples/tsconfig.json",
"content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"composite\": true,\n \"skipLibCheck\": true,\n \"jsx\": \"react-jsx\",\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n }\n },\n \"include\": [\n \"**/*.ts\",\n \"**/*.tsx\",\n \"**/*.mjs\",\n \"**/*.mts\",\n \"**/*.d.ts\",\n \".storybook/**/*.ts\",\n \".storybook/**/*.tsx\"\n ],\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
},
{
"path": "apps/examples/vercel.json",
"content": "{\n \"$schema\": \"https://openapi.vercel.sh/vercel.json\",\n \"buildCommand\": \"pnpm build\",\n \"cleanUrls\": true,\n \"devCommand\": \"pnpm dev\",\n \"framework\": \"storybook\",\n \"installCommand\": \"pnpm install\",\n \"outputDirectory\": \"storybook-static\"\n}\n"
},
{
"path": "docs/.vitepress/config.mts",
"content": "import fs from 'node:fs';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\n\nimport { defineConfig } from 'vitepress';\nimport { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons';\n\nimport type { Plugin } from 'vitepress';\n\nconst projectRoot = fileURLToPath(new URL('../..', import.meta.url));\nconst { version } = JSON.parse(fs.readFileSync(path.join(projectRoot, 'package.json'), 'utf8'));\n\nconst githubUrl = 'https://github.com/img-mapper/img-mapper';\nconst npmUrl = 'https://www.npmjs.com/package/react-img-mapper';\nconst siteUrl = 'https://img-mapper.nishargshah.dev';\nconst exampleUrl = 'https://img-mapper-examples.nishargshah.dev';\n\nconst title = 'Img Mapper';\nconst description =\n 'A React/Vue Component for Creating Interactive and Highlighted Zones on Images';\n\nexport default defineConfig({\n title,\n description,\n cleanUrls: true,\n lastUpdated: true,\n rewrites: {},\n markdown: {\n config(md) {\n md.use(groupIconMdPlugin);\n },\n },\n vite: {\n plugins: [groupIconVitePlugin() as Plugin],\n },\n sitemap: {\n hostname: siteUrl,\n },\n themeConfig: {\n logo: '/logo.png',\n nav: [\n {\n text: 'Guide',\n link: '/',\n },\n {\n text: 'Examples',\n link: exampleUrl,\n },\n {\n text: `v${version}`,\n items: [\n {\n text: 'Release Notes',\n link: `${githubUrl}/releases`,\n },\n {\n text: 'Changelog',\n link: `${githubUrl}/blob/master/CHANGELOG.md`,\n },\n {\n text: 'Contributing',\n link: '/contribute/guide',\n },\n ],\n },\n ],\n sidebar: [\n {\n text: 'Introduction',\n items: [\n {\n text: 'Getting Started',\n link: '/guide/getting-started',\n },\n {\n text: 'Examples',\n link: '/guide/examples',\n },\n ],\n },\n {\n text: 'React',\n collapsed: false,\n items: [\n {\n text: 'Installation',\n link: '/react/installation',\n },\n {\n text: 'Properties',\n link: '/react/properties',\n },\n ],\n },\n {\n text: 'Vue',\n collapsed: false,\n items: [\n {\n text: 'Installation',\n link: '/vue/installation',\n },\n {\n text: 'Properties',\n link: '/vue/properties',\n },\n ],\n },\n {\n text: 'Contribute',\n items: [\n {\n text: 'Contributing',\n link: '/contribute/guide',\n },\n ],\n },\n ],\n socialLinks: [\n {\n icon: 'github',\n link: githubUrl,\n },\n {\n icon: 'npm',\n link: npmUrl,\n },\n ],\n footer: {\n message: 'Released under the MIT License.',\n copyright: 'Copyright Β© 2025-PRESENT \",\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"vitepress build\",\n \"dev\": \"vitepress dev\",\n \"preview\": \"vitepress preview\",\n \"typecheck\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n \"@vercel/analytics\": \"catalog:\"\n },\n \"devDependencies\": {\n \"typescript\": \"catalog:\",\n \"vitepress\": \"^1.6.4\",\n \"vitepress-plugin-group-icons\": \"^1.6.4\"\n }\n}\n"
},
{
"path": "docs/react/installation.md",
"content": "# Installation {#installation}\n\nInstall **react-img-mapper** using your preferred package manager:\n\n::: code-group\n\n```sh [npm]\n$ npm install react-img-mapper\n```\n\n```sh [yarn]\n$ yarn add react-img-mapper\n```\n\n```sh [pnpm]\n$ pnpm install react-img-mapper\n```\n\n:::\n\n## Usage Example\n\nIntegrate `react-img-mapper` into your React app:\n\n```javascript\nimport React from 'react';\nimport ImageMapper from 'react-img-mapper';\n\nconst Mapper = () => {\n const url = 'https://img-mapper-examples.nishargshah.dev/assets/example.jpg';\n const name = 'my-map';\n // Get JSON from below URL as an example and put it here\n const areas = 'https://img-mapper-examples.nishargshah.dev/assets/areas.json';\n\n return ` | `null` |\n| `imgProps` | object | Props for the `
` element | `null` |\n| `canvasProps` | object | Props for the `
` element | `null` |\n| `mapProps` | object | Props for the `` element | `null` |\n| `areaProps` | object \\| array | Props for `**rect**: `top-left-X, top-left-Y, bottom-right-X, bottom-right-Y` **circle**: `center-X, center-Y, radius` **poly**: List of points defining the polygon as `point-X, point-Y, ...` \n \n\n\n```\n"
},
{
"path": "docs/vue/properties.md",
"content": "# Properties {#properties}\n\n::: warning\n\n`vue-img-mapper` is currently in beta. Features and APIs are still evolving and improvements are coming soon.\n\n:::\n\nTogether, below sections let you fully control the component, customize its behavior and appearance, handle user interactions, configure individual areas, and access internal function references via Vue refs.\n\n## Component Properties {#component-properties}\n\nConfigure the main behavior, appearance, and responsiveness of the component.\n\n| Prop | Type | Description | Default |\n| ---------------- | -------------------------- | ---------------------------------------------------------- | -------------------------- |\n| `src` | string | Image URL to display | **required** |\n| `name` | string | Unique map name associated with the image | **required** |\n| `areas` | array | Array of area objects (see **Area Properties**) | **required** |\n| `areaKeyName` | string | Key used to uniquely identify areas | `id` |\n| `isMulti` | bool | Allows multiple areas to be selected | `true` |\n| `toggle` | bool | Enables toggling selection on click | `false` |\n| `active` | bool | Enables area listeners and highlighting | `true` |\n| `disabled` | bool | Disables highlighting and interactions | `false` |\n| `fillColor` | string | Highlight fill color | `rgba(255, 255, 255, 0.5)` |\n| `strokeColor` | string | Highlight border color | `rgba(0, 0, 0, 0.5)` |\n| `lineWidth` | number | Border thickness of highlighted zones | `1` |\n| `imgWidth` | number | Original width of the image | `0` |\n| `width` | number \\| (func => number) | Image width (can be use as a function for dynamic sizing) | `0` |\n| `height` | number \\| (func => number) | Image height (can be use as a function for dynamic sizing) | `0` |\n| `natural` | bool | Use the image's original dimensions | `false` |\n| `responsive` | bool | Enable responsive scaling (requires `parentWidth`) | `false` |\n| `parentWidth` | number | Max width of parent container | `0` |\n| `containerProps` | object | Props for the wrapping `` | `null` |\n| `imgProps` | object | Props for the `
` element | `null` |\n| `canvasProps` | object | Props for the `
` element | `null` |\n| `mapProps` | object | Props for the `` element | `null` |\n| `areaProps` | object \\| array | Props for `**rect**: `top-left-X, top-left-Y, bottom-right-X, bottom-right-Y` **circle**: `center-X, center-Y, radius` **poly**: List of points defining the polygon as `point-X, point-Y, ...` \",\n \"scripts\": {\n \"build\": \"pnpm -r build\",\n \"build:react\": \"pnpm --filter react-img-mapper build\",\n \"clean:all\": \"pnpm clean:node_modules && pnpm clean:generated-folders\",\n \"clean:dist\": \"pnpx rimraf dist && pnpm -r exec pnpx rimraf dist\",\n \"clean:generated-folders\": \"pnpm clean:dist\",\n \"clean:node_modules\": \"pnpx rimraf node_modules && pnpm -r exec pnpx rimraf node_modules\",\n \"clean:workspace\": \"pnpm clean:node_modules && pnpx rimraf pnpm-lock.yaml\",\n \"dev:docs\": \"pnpm --filter img-mapper-docs dev\",\n \"dev:examples\": \"pnpm --filter examples dev\",\n \"format:check\": \"prettier . --check\",\n \"format:fix\": \"prettier . --write\",\n \"fresh:init\": \"pnpm clean:workspace && pnpm clean:generated-folders && pnpm install\",\n \"lint\": \"eslint .\",\n \"lint:fix\": \"pnpm --silent lint --fix\",\n \"pkg:prepare\": \"pnpm changeset && pnpm changeset version\",\n \"pkg:publish\": \"pnpm build:react && pnpm changeset publish\",\n \"play:react\": \"pnpm --filter react-img-mapper play\",\n \"play:vue\": \"pnpm --filter vue-img-mapper play\",\n \"prepare\": \"husky || true\",\n \"script:lint\": \"bash -e ./scripts/lint.sh\",\n \"typecheck\": \"pnpm -r typecheck\"\n },\n \"devDependencies\": {\n \"@changesets/cli\": \"^2.29.7\",\n \"@eslint/compat\": \"^1.4.0\",\n \"@eslint/js\": \"^9.38.0\",\n \"@stylistic/eslint-plugin\": \"^3.1.0\",\n \"@types/node\": \"^24.9.1\",\n \"eslint\": \"^9.38.0\",\n \"eslint-config-airbnb-extended\": \"^2.3.2\",\n \"eslint-config-prettier\": \"^10.1.8\",\n \"eslint-import-resolver-typescript\": \"^4.4.4\",\n \"eslint-plugin-import-x\": \"^4.16.1\",\n \"eslint-plugin-jsx-a11y\": \"^6.10.2\",\n \"eslint-plugin-prettier\": \"^5.5.4\",\n \"eslint-plugin-promise\": \"^7.2.1\",\n \"eslint-plugin-react\": \"^7.37.5\",\n \"eslint-plugin-react-hooks\": \"^7.0.0\",\n \"eslint-plugin-unicorn\": \"^61.0.2\",\n \"eslint-plugin-unused-imports\": \"^4.3.0\",\n \"husky\": \"^9.1.7\",\n \"lint-staged\": \"^16.2.6\",\n \"prettier\": \"^3.6.2\",\n \"prettier-plugin-packagejson\": \"^2.5.19\",\n \"typescript\": \"catalog:\",\n \"typescript-eslint\": \"^8.46.2\"\n },\n \"packageManager\": \"pnpm@10.19.0\",\n \"engines\": {\n \"node\": \">=16.0.0\",\n \"npm\": \"please-use-pnpm\",\n \"pnpm\": \">=10.18.0\",\n \"yarn\": \"please-use-pnpm\"\n }\n}\n"
},
{
"path": "packages/react-img-mapper/.npmignore",
"content": "# Ignore everything\n/*\n\n# Not ignored folders\n!dist\n\n# Inside dist\n*.tsbuildinfo\n"
},
{
"path": "packages/react-img-mapper/README.md",
"content": "# `react-img-mapper`\n\n[](https://www.npmjs.com/package/react-img-mapper)\n[](https://www.npmjs.com/package/react-img-mapper)\n[](https://www.npmjs.com/package/react-img-mapper)\n\nA React Component for Creating Interactive and Highlighted Zones on Images\n\n> Check out the package docs here: https://img-mapper.nishargshah.dev/react/installation\n"
},
{
"path": "packages/react-img-mapper/package.json",
"content": "{\n \"name\": \"react-img-mapper\",\n \"version\": \"2.0.3\",\n \"description\": \"A React Component for Creating Interactive and Highlighted Zones on Images\",\n \"keywords\": [\n \"react-img-mapper\",\n \"react-image-mapper\",\n \"img-mapper\",\n \"image-mapper\",\n \"img mapper\",\n \"image mapper\",\n \"react img mapper\",\n \"react image mapper\",\n \"react img mapper docs\",\n \"react image mapper docs\"\n ],\n \"homepage\": \"https://img-mapper.nishargshah.dev\",\n \"bugs\": {\n \"url\": \"https://github.com/img-mapper/img-mapper/issues\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/img-mapper/img-mapper.git\",\n \"directory\": \"packages/react-img-mapper\"\n },\n \"license\": \"MIT\",\n \"author\": \"Nisharg Shah \",\n \"type\": \"module\",\n \"exports\": {\n \".\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\"\n },\n \"./package.json\": \"./package.json\"\n },\n \"main\": \"./dist/index.cjs\",\n \"module\": \"./dist/index.js\",\n \"types\": \"./dist/index.d.cts\",\n \"scripts\": {\n \"build\": \"tsdown\",\n \"dev\": \"tsdown --watch\",\n \"play\": \"vite --port 3000\",\n \"typecheck\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n \"react-fast-compare\": \"^3.2.2\"\n },\n \"devDependencies\": {\n \"@types/react\": \"catalog:\",\n \"@types/react-dom\": \"catalog:\",\n \"@vitejs/plugin-react\": \"^5.0.4\",\n \"react\": \"catalog:\",\n \"tsdown\": \"catalog:\",\n \"typescript\": \"catalog:\",\n \"vite\": \"catalog:\"\n },\n \"peerDependencies\": {\n \"react\": \"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react-dom\": \"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\"\n },\n \"engines\": {\n \"node\": \">=16.0.0\"\n }\n}\n"
},
{
"path": "packages/react-img-mapper/playground/index.html",
"content": "\n\n \n Playground \n \n \n
\n \n \n\n"
},
{
"path": "packages/react-img-mapper/playground/src/ReactPlayground.tsx",
"content": "import React, { useEffect, useRef, useState } from 'react';\n\nimport ImageMapper from '@/ImageMapper';\nimport { useAreas } from '@playground/hooks/useAreas';\n\nimport type { FC } from 'react';\n\nimport type { MapArea, RefProperties } from '@/@types';\n\nconst name = 'my-map';\nconst url = 'https://img-mapper-examples.nishargshah.dev/assets/example.jpg';\n\nconst ReactPlayground: FC = () => {\n const { areas: initialAreas } = useAreas();\n\n const [areas, setAreas] = useState(initialAreas);\n const [parentWidth, setParentWidth] = useState(640);\n const [responsive, setResponsive] = useState(false);\n const ref = useRef(null);\n\n useEffect(() => {\n if (ref.current) {\n console.log(ref.current.getRefs());\n }\n }, []);\n\n const handleClick = () => {\n const area = areas.map((cur: MapArea, i: number) => {\n if (i % 4 === 0) {\n const temp = { ...cur };\n temp.preFillColor = 'red';\n return temp;\n }\n\n return cur;\n });\n setAreas(area);\n };\n\n useEffect(() => {\n if (areas.length === 0) setAreas(initialAreas);\n }, [initialAreas, areas.length]);\n\n if (areas.length === 0) return null;\n\n return (\n \n console.log('onLoad =>>>>>>>>>>>>', arg)}\n parentWidth={responsive ? parentWidth : 0}\n responsive={responsive}\n src={url}\n onChange={(selectedArea, allAreas) => {\n console.log(selectedArea, allAreas);\n setAreas(allAreas);\n }}\n />\n setParentWidth(e.target.valueAsNumber)}\n step={40}\n type=\"range\"\n value={parentWidth}\n />\n \n Highlight\n \n setAreas(initialAreas)} type=\"button\">\n Clear\n \n setResponsive((prev) => !prev)} type=\"button\">\n {responsive ? 'Enabled: Responsive' : 'Enable: Responsive'}\n \n console.log(ref.current?.getRefs())} type=\"button\">\n Get Ref\n \n \n );\n};\n\nexport default ReactPlayground;\n"
},
{
"path": "packages/react-img-mapper/playground/src/hooks/useAreas.ts",
"content": "import { useEffect, useState } from 'react';\n\nimport type { MapArea } from 'react-img-mapper';\n\ninterface AreasHookOutput {\n areas: MapArea[];\n}\n\ntype AreasHook = () => AreasHookOutput;\n\nconst areasUrl = 'https://img-mapper-examples.nishargshah.dev/assets/areas.json';\n\nexport const useAreas: AreasHook = () => {\n const [areas, setAreas] = useState([]);\n\n useEffect(() => {\n (async () => {\n const res = await fetch(areasUrl);\n const json = await res.json();\n\n setAreas(json);\n })();\n }, []);\n\n return { areas };\n};\n"
},
{
"path": "packages/react-img-mapper/playground/src/main.tsx",
"content": "import { createRoot } from 'react-dom/client';\n\nimport ReactPlayground from '@playground/ReactPlayground';\n\ncreateRoot(document.querySelector('#root') as Element).render(, 'responsive' | 'parentWidth' | 'imgWidth'>;\n\nexport type ScaleCoords = (\n coords: MapArea['coords'],\n scaleCoordsParams: ScaleCoordsParams,\n) => number[];\n\nexport type ComputeCenter = (\n shape: MapArea['shape'],\n scaleCoordsParams: ReturnType,\n) => Area['center'];\n\ntype GetExtendedAreaParams = Pick<\n Required,\n 'fillColor' | 'lineWidth' | 'strokeColor'\n>;\n\nexport type GetExtendedArea = (\n area: MapArea,\n scaleCoordsParams: ScaleCoordsParams,\n params: GetExtendedAreaParams,\n) => Area;\n"
},
{
"path": "packages/react-img-mapper/src/@types/constants.d.ts",
"content": "import type { ImageMapperProps } from '@/@types';\n\ntype RequiredProps = 'src' | 'name' | 'areas';\n\nexport type ImageMapperDefaultProps = Omit;\n"
},
{
"path": "packages/react-img-mapper/src/@types/dimensions.d.ts",
"content": "import type { RefObject } from 'react';\n\nimport type { Dimension, ImageMapperProps, Refs, WidthHeight } from '@/@types';\n\ntype ImgRef = RefObject;\n\nexport type GetDimension = (dimension: Dimension, img: ImgRef) => number;\n\nexport interface GetPropDimensionParams {\n width: Dimension;\n height: Dimension;\n img: ImgRef;\n}\n\nexport type GetPropDimension = (params: GetPropDimensionParams) => WidthHeight;\n\ntype GetDimensionValuesParams = GetPropDimensionParams &\n Pick, 'responsive' | 'parentWidth' | 'natural'>;\n\nexport type GetDimensionValues = (\n type: 'width' | 'height',\n params: GetDimensionValuesParams,\n) => number;\n\ntype GetDimensionsParams = Omit;\n\nexport type GetDimensions = (params: GetDimensionsParams) => WidthHeight;\n\nexport interface PrevStateRef {\n parentWidth: number;\n width: number;\n height: number;\n}\n"
},
{
"path": "packages/react-img-mapper/src/@types/draw.d.ts",
"content": "import type { RefObject } from 'react';\n\nimport type { Area } from '@/@types';\n\nexport type CTX = RefObject;\n\ntype DrawArea = 'scaledCoords' | 'fillColor' | 'lineWidth' | 'strokeColor';\n\nexport type DrawChosenShape = (area: Pick, ctx: CTX) => boolean;\n\nexport type DrawShape = (area: Pick, ctx: CTX) => boolean;\n\nexport type GetShape = (shape: Area['shape']) => DrawChosenShape | false;\n"
},
{
"path": "packages/react-img-mapper/src/@types/events.d.ts",
"content": "import type { AreaEvent, ImageEvent, ImageMapperProps, MapArea } from '@/@types';\n\nexport interface EventListenerParam {\n area: MapArea;\n index: number;\n}\n\nexport type EventListenerProps = Pick & {\n cb?: (area: MapArea) => void;\n};\n\nexport type EventListener = (\n params: EventListenerParam,\n props: EventListenerProps,\n) => (event: E) => void;\n\nexport type ImageEventListener = (\n props: EventListenerProps,\n) => (event: ImageEvent) => void;\n"
},
{
"path": "packages/react-img-mapper/src/@types/index.d.ts",
"content": "import type { HTMLProps, MouseEvent, Ref, TouchEvent as ReactTouchEvent } from 'react';\n\nimport type { ConditionalKeys, NoUndefinedField } from '@/@types/lib';\n\nexport interface Refs {\n containerRef: HTMLDivElement | null;\n imgRef: HTMLImageElement | null;\n canvasRef: HTMLCanvasElement | null;\n}\n\nexport interface RefProperties {\n getRefs: () => Refs;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface OverrideMapArea {}\n\nexport interface MapArea extends OverrideMapArea {\n id: string;\n shape: string;\n coords: number[];\n active?: boolean;\n disabled?: boolean;\n href?: string;\n fillColor?: string;\n strokeColor?: string;\n lineWidth?: number;\n preFillColor?: string;\n}\n\ntype RequiredMapArea = 'active' | 'fillColor' | 'lineWidth' | 'strokeColor';\ntype RequiredArea = Omit &\n Pick, R>;\n\nexport interface Area extends RequiredArea {\n scaledCoords: number[];\n center: [number, number];\n}\n\nexport interface WidthHeight {\n width: number;\n height: number;\n}\n\nexport type Dimension = number | ((event: HTMLImageElement) => number);\n\nexport type ContainerProps = Omit, 'ref' | 'id'> | null;\nexport type ImgProps = Omit<\n HTMLProps,\n 'ref' | 'src' | 'useMap' | 'onClick' | 'onMouseMove'\n> | null;\nexport type CanvasProps = Omit, 'ref'> | null;\nexport type MapProps = Omit, 'name'> | null;\nexport type AreaProps = Omit<\n HTMLProps,\n | 'key'\n | 'coords'\n | 'onMouseEnter'\n | 'onMouseLeave'\n | 'onMouseMove'\n | 'onMouseDown'\n | 'onMouseUp'\n | 'onTouchStart'\n | 'onTouchEnd'\n | 'onClick'\n> | null;\n\nexport type TouchEvent = ReactTouchEvent;\nexport type AreaEvent = MouseEvent;\nexport type ImageEvent = MouseEvent;\n\nexport type ChangeEventHandler = ((selectedArea: MapArea, areas: MapArea[]) => void) | null;\nexport type ImageEventHandler = ((event: ImageEvent) => void) | null;\nexport type EventHandler = ((area: MapArea, index: number, e: T) => void) | null;\nexport type LoadEventHandler = ((event: HTMLImageElement, dimensions: WidthHeight) => void) | null;\n\nexport interface ImageMapperProps {\n src: string;\n name: string;\n areas: MapArea[];\n areaKeyName?: ConditionalKeys;\n isMulti?: boolean;\n toggle?: boolean;\n active?: boolean;\n disabled?: boolean;\n fillColor?: string;\n strokeColor?: string;\n lineWidth?: number;\n imgWidth?: number;\n width?: Dimension;\n height?: Dimension;\n natural?: boolean;\n responsive?: boolean;\n parentWidth?: number;\n containerProps?: ContainerProps;\n imgProps?: ImgProps;\n canvasProps?: CanvasProps;\n mapProps?: MapProps;\n areaProps?: AreaProps | AreaProps[];\n\n onChange?: ChangeEventHandler;\n onImageClick?: ImageEventHandler;\n onImageMouseMove?: ImageEventHandler;\n onClick?: EventHandler;\n onMouseDown?: EventHandler;\n onMouseUp?: EventHandler;\n onTouchStart?: EventHandler;\n onTouchEnd?: EventHandler;\n onMouseMove?: EventHandler;\n onMouseEnter?: EventHandler;\n onMouseLeave?: EventHandler;\n onLoad?: LoadEventHandler;\n}\n\nexport interface ImageMapperPropsWithRef extends ImageMapperProps {\n ref?: Ref;\n}\n"
},
{
"path": "packages/react-img-mapper/src/@types/lib.d.ts",
"content": "export type NoUndefinedField = { [P in keyof T]-?: NoUndefinedField> };\n\nexport type ConditionalKeys = NonNullable<\n {\n [Key in keyof Base]: Base[Key] extends Condition ? Key : never;\n }[keyof Base]\n>;\n"
},
{
"path": "packages/react-img-mapper/src/@types/styles.d.ts",
"content": "import type { CSSProperties } from 'react';\n\nexport interface StylesProps {\n container: CSSProperties;\n canvas: CSSProperties;\n img: (responsive: boolean) => CSSProperties;\n map: (onClick: boolean) => CSSProperties | undefined;\n}\n"
},
{
"path": "packages/react-img-mapper/src/ImageMapper.tsx",
"content": "import React, {\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport isEqual from 'react-fast-compare';\n\nimport { getExtendedArea } from '@/helpers/area';\nimport { generateProps, rerenderPropsList } from '@/helpers/constants';\nimport { getDimension, getDimensions, getPropDimension } from '@/helpers/dimensions';\nimport drawShape from '@/helpers/draw';\nimport {\n click,\n imageClick,\n imageMouseMove,\n mouseDown,\n mouseEnter,\n mouseLeave,\n mouseMove,\n mouseUp,\n touchEnd,\n touchStart,\n} from '@/helpers/events';\nimport styles from '@/helpers/styles';\n\nimport type { FC, ReactNode } from 'react';\n\nimport type { ImageMapperPropsWithRef, MapArea, Refs } from '@/@types';\nimport type { PrevStateRef } from '@/@types/dimensions';\nimport type { CTX } from '@/@types/draw';\n\nconst ImageMapper: FC = ({ ref, ...props }) => {\n const generatedProps = generateProps(props);\n const {\n src,\n name,\n areas,\n areaKeyName,\n isMulti,\n toggle,\n active,\n disabled,\n fillColor,\n strokeColor,\n lineWidth,\n imgWidth,\n width,\n height,\n natural,\n responsive,\n parentWidth,\n containerProps,\n imgProps,\n canvasProps,\n mapProps,\n areaProps,\n\n onChange,\n onImageClick,\n onImageMouseMove,\n onClick,\n onMouseDown,\n onMouseUp,\n onTouchStart,\n onTouchEnd,\n onMouseMove,\n onMouseEnter,\n onMouseLeave,\n onLoad,\n } = generatedProps;\n\n const [isRendered, setIsRendered] = useState(false);\n const areasRef = useRef(areas);\n const containerRef = useRef(null);\n const img = useRef(null);\n const canvas = useRef(null);\n const ctx = useRef['current']>(null);\n const interval = useRef(0);\n const prevState = useRef({\n parentWidth,\n ...getPropDimension({ width, height, img }),\n });\n\n const dimensionParams = useMemo(\n () => ({ width, height, responsive, parentWidth, natural }),\n [width, height, responsive, parentWidth, natural],\n );\n\n const scaleCoordsParams = useMemo(\n () => ({ width, height, responsive, parentWidth, imgWidth }),\n [width, height, responsive, parentWidth, imgWidth],\n );\n\n const areaParams = useMemo(\n () => ({ fillColor, lineWidth, strokeColor }),\n [fillColor, lineWidth, strokeColor],\n );\n\n const init = useCallback(() => {\n if (img.current?.complete && canvas.current && containerRef.current) {\n ctx.current = canvas.current.getContext('2d');\n\n setIsRendered(true);\n }\n }, []);\n\n useEffect(() => {\n if (isRendered) {\n clearInterval(interval.current);\n } else {\n // eslint-disable-next-line unicorn/prefer-global-this\n interval.current = window.setInterval(init, 500);\n }\n }, [init, isRendered]);\n\n const renderPrefilledAreas = useCallback(() => {\n // eslint-disable-next-line unicorn/no-array-for-each\n areas.forEach((area) => {\n const extendedArea = getExtendedArea(area, { img, ...scaleCoordsParams }, areaParams);\n\n if (!extendedArea.preFillColor) return false;\n\n return drawShape({ ...extendedArea, fillColor: extendedArea.preFillColor }, ctx);\n });\n }, [areaParams, areas, scaleCoordsParams]);\n\n const clearCanvas = useCallback(() => {\n if (!(ctx.current && canvas.current)) return;\n\n ctx.current.clearRect(0, 0, canvas.current.width, canvas.current.height);\n }, []);\n\n const resetCanvasAndPrefillArea = useCallback(() => {\n clearCanvas();\n renderPrefilledAreas();\n }, [clearCanvas, renderPrefilledAreas]);\n\n const highlightArea = (area: MapArea): boolean => {\n const extendedArea = getExtendedArea(area, { img, ...scaleCoordsParams }, areaParams);\n\n if (!extendedArea.active) return false;\n\n return drawShape(extendedArea, ctx);\n };\n\n const onHighlightArea = (area: MapArea): void => {\n const chosenAreasRef = areasRef.current;\n\n const chosenArea = isMulti\n ? area\n : chosenAreasRef.find((c) => c[areaKeyName] === area[areaKeyName]);\n\n if (!chosenArea) return;\n\n const extendedArea = getExtendedArea(chosenArea, { img, ...scaleCoordsParams }, areaParams);\n if (!(active && extendedArea.active)) return;\n\n const chosenAreas = isMulti ? areas : chosenAreasRef;\n const newArea = { ...chosenArea };\n\n const isCurrentAreaSelected = (() => {\n if (toggle) {\n if (isMulti && newArea.preFillColor) return true;\n return !isMulti && !!area.preFillColor;\n }\n\n return false;\n })();\n\n if (isCurrentAreaSelected) {\n const isPreFillColorFromJSON = chosenAreas.find((c) => c[areaKeyName] === area[areaKeyName]);\n if (isPreFillColorFromJSON?.preFillColor) delete newArea.preFillColor;\n } else {\n newArea.preFillColor = extendedArea.fillColor;\n }\n\n const updatedAreas = chosenAreas.map((cur) =>\n cur[areaKeyName] === area[areaKeyName] ? newArea : cur,\n );\n\n if (onChange) onChange(newArea, updatedAreas);\n };\n\n const initCanvas = useCallback(\n (isFirstTime = true, triggerOnLoad = false) => {\n const { width: imageWidth, height: imageHeight } = getDimensions({ img, ...dimensionParams });\n\n if (!(img.current && canvas.current && containerRef.current && ctx.current)) return;\n\n containerRef.current.style.width = `${imageWidth}px`;\n containerRef.current.style.height = `${imageHeight}px`;\n\n if (isFirstTime) {\n initCanvas(false, true);\n } else {\n img.current.width = imageWidth;\n img.current.height = imageHeight;\n\n canvas.current.width = imageWidth;\n canvas.current.height = imageHeight;\n\n renderPrefilledAreas();\n }\n\n if (onLoad && triggerOnLoad) {\n onLoad(img.current, { width: imageWidth, height: imageHeight });\n }\n },\n [dimensionParams, onLoad, renderPrefilledAreas],\n );\n\n const getRefs = useCallback(\n () => ({ containerRef: containerRef.current, imgRef: img.current, canvasRef: canvas.current }),\n [],\n );\n\n useEffect(() => {\n if (isRendered) initCanvas();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isRendered]);\n\n useEffect(() => {\n resetCanvasAndPrefillArea();\n }, [areas, resetCanvasAndPrefillArea]);\n\n useEffect(() => {\n if (responsive && parentWidth && prevState.current.parentWidth !== parentWidth) {\n initCanvas();\n prevState.current.parentWidth = parentWidth;\n }\n\n if (width && prevState.current.width !== width) {\n initCanvas();\n prevState.current.width = getDimension(width, img);\n }\n\n if (height && prevState.current.height !== height) {\n initCanvas();\n prevState.current.height = getDimension(height, img);\n }\n }, [height, initCanvas, parentWidth, responsive, width]);\n\n useImperativeHandle(ref, () => ({ getRefs }), [getRefs]);\n\n const handleMouseEnter = (area: MapArea): void => {\n if (active) highlightArea(area);\n };\n\n const handleMouseLeave = (): void => {\n if (active) resetCanvasAndPrefillArea();\n };\n\n const handleClick = (area: MapArea): void => {\n onHighlightArea(area);\n };\n\n const renderAreas = (): ReactNode =>\n areas.map((area, index) => {\n const { areaKeyName: areaKeyNameProp } = props;\n\n const { scaledCoords } = getExtendedArea(area, { img, ...scaleCoordsParams }, areaParams);\n\n if (area.disabled) return null;\n\n const { preFillColor, shape, href } = area;\n const currentAreaProps = (() => {\n if (Array.isArray(areaProps)) {\n if (areaKeyNameProp) {\n return areaProps.find((cur) => cur && cur[areaKeyNameProp] === area[areaKeyNameProp]);\n }\n\n return areaProps[index];\n }\n\n return areaProps;\n })();\n\n return (\n \n \n {isRendered && !disabled ? renderAreas() : null}\n \n (props: T): Required =>\n Object.entries(imageMapperDefaultProps).reduce(\n (acc, val) => {\n const [key, value] = val as unknown as [keyof T, typeof val];\n\n // @ts-expect-error acc key error\n acc[key] = props[key] ?? value;\n return acc;\n },\n { src: props.src, name: props.name, areas: props.areas },\n ) as Required;\n"
},
{
"path": "packages/react-img-mapper/src/helpers/dimensions.ts",
"content": "import type {\n GetDimension,\n GetDimensions,\n GetDimensionValues,\n GetPropDimension,\n} from '@/@types/dimensions';\n\nexport const getDimension: GetDimension = (dimension, img) => {\n if (!img.current) return 0;\n\n return typeof dimension === 'function' ? dimension(img.current) : dimension;\n};\n\nexport const getPropDimension: GetPropDimension = ({ width, height, img }) => ({\n width: getDimension(width, img),\n height: getDimension(height, img),\n});\n\nconst getDimensionValues: GetDimensionValues = (\n type,\n { width, height, img, responsive, parentWidth, natural },\n) => {\n const { width: imageWidth, height: imageHeight } = getPropDimension({ width, height, img });\n\n if (img.current) {\n const { naturalWidth, naturalHeight, clientWidth, clientHeight } = img.current;\n\n if (type === 'width') {\n if (responsive) return parentWidth;\n if (natural) return naturalWidth;\n if (imageWidth) return imageWidth;\n return clientWidth;\n }\n\n if (type === 'height') {\n if (responsive) return clientHeight;\n if (natural) return naturalHeight;\n if (imageHeight) return imageHeight;\n return clientHeight;\n }\n }\n\n return 0;\n};\n\nexport const getDimensions: GetDimensions = (props) => ({\n width: getDimensionValues('width', props),\n height: getDimensionValues('height', props),\n});\n"
},
{
"path": "packages/react-img-mapper/src/helpers/draw.ts",
"content": "import type { DrawChosenShape, DrawShape, GetShape } from '@/@types/draw';\n\nconst drawRect: DrawChosenShape = (area, ctx) => {\n const { scaledCoords, fillColor, lineWidth, strokeColor } = area;\n const [left, top, right, bottom] = scaledCoords;\n\n ctx.current.fillStyle = fillColor;\n ctx.current.lineWidth = lineWidth;\n ctx.current.strokeStyle = strokeColor;\n ctx.current.strokeRect(left, top, right - left, bottom - top);\n ctx.current.fillRect(left, top, right - left, bottom - top);\n return true;\n};\n\nconst drawCircle: DrawChosenShape = (area, ctx) => {\n const { scaledCoords, fillColor, lineWidth, strokeColor } = area;\n const [left, top, right] = scaledCoords;\n\n ctx.current.fillStyle = fillColor;\n ctx.current.beginPath();\n ctx.current.lineWidth = lineWidth;\n ctx.current.strokeStyle = strokeColor;\n ctx.current.arc(left, top, right, 0, 2 * Math.PI);\n ctx.current.closePath();\n ctx.current.stroke();\n ctx.current.fill();\n return true;\n};\n\nconst drawPoly: DrawChosenShape = (area, ctx) => {\n const { scaledCoords, fillColor, lineWidth, strokeColor } = area;\n const groupCoords = scaledCoords.reduce<[number, number][]>((acc, val, index, array) => {\n if (index % 2) return acc;\n return [...acc, array.slice(index, index + 2)] as [number, number][];\n }, []);\n\n // const first = groupCoords.unshift();\n ctx.current.fillStyle = fillColor;\n ctx.current.beginPath();\n ctx.current.lineWidth = lineWidth;\n ctx.current.strokeStyle = strokeColor;\n\n // ctx.current.moveTo(first[0], first[1]);\n for (const [first, second] of groupCoords) ctx.current.lineTo(first, second);\n ctx.current.closePath();\n ctx.current.stroke();\n ctx.current.fill();\n return true;\n};\n\nconst getShape: GetShape = (shape) => {\n if (shape === 'rect') return drawRect;\n if (shape === 'circle') return drawCircle;\n if (shape === 'poly') return drawPoly;\n return false;\n};\n\nconst drawShape: DrawShape = (area, ctx) => {\n const { shape, ...restArea } = area;\n const shapeFn = getShape(shape);\n\n if (shapeFn && ctx.current instanceof CanvasRenderingContext2D) {\n const currentCtx = { current: ctx.current };\n return shapeFn(restArea, currentCtx);\n }\n\n return false;\n};\n\nexport default drawShape;\n"
},
{
"path": "packages/react-img-mapper/src/helpers/events.ts",
"content": "import type { TouchEvent } from '@/@types';\nimport type { EventListener, ImageEventListener } from '@/@types/events';\n\nexport const imageMouseMove: ImageEventListener<'onImageMouseMove'> = (props) => (event) => {\n const { onImageMouseMove } = props;\n\n if (onImageMouseMove) onImageMouseMove(event);\n};\n\nexport const imageClick: ImageEventListener<'onImageClick'> = (props) => (event) => {\n const { onImageClick } = props;\n\n if (onImageClick) {\n event.preventDefault();\n onImageClick(event);\n }\n};\n\nexport const mouseEnter: EventListener<'onMouseEnter'> =\n ({ area, index }, props) =>\n (event) => {\n const { onMouseEnter, cb } = props;\n\n if (cb) cb(area);\n\n if (onMouseEnter) onMouseEnter(area, index, event);\n };\n\nexport const mouseLeave: EventListener<'onMouseLeave'> =\n ({ area, index }, props) =>\n (event) => {\n const { onMouseLeave, cb } = props;\n\n if (cb) cb(area);\n\n if (onMouseLeave) onMouseLeave(area, index, event);\n };\n\nexport const click: EventListener<'onClick'> =\n ({ area, index }, props) =>\n (event) => {\n const { onClick, cb } = props;\n\n if (cb) cb(area);\n\n if (onClick) {\n event.preventDefault();\n onClick(area, index, event);\n }\n };\n\nexport const mouseMove: EventListener<'onMouseMove'> =\n ({ area, index }, props) =>\n (event) => {\n const { onMouseMove } = props;\n\n if (onMouseMove) onMouseMove(area, index, event);\n };\n\nexport const mouseDown: EventListener<'onMouseDown'> =\n ({ area, index }, props) =>\n (event) => {\n const { onMouseDown } = props;\n\n if (onMouseDown) onMouseDown(area, index, event);\n };\n\nexport const mouseUp: EventListener<'onMouseUp'> =\n ({ area, index }, props) =>\n (event) => {\n const { onMouseUp } = props;\n\n if (onMouseUp) onMouseUp(area, index, event);\n };\n\nexport const touchStart: EventListener<'onTouchStart', TouchEvent> =\n ({ area, index }, props) =>\n (event) => {\n const { onTouchStart } = props;\n\n if (onTouchStart) onTouchStart(area, index, event);\n };\n\nexport const touchEnd: EventListener<'onTouchEnd', TouchEvent> =\n ({ area, index }, props) =>\n (event) => {\n const { onTouchEnd } = props;\n\n if (onTouchEnd) onTouchEnd(area, index, event);\n };\n"
},
{
"path": "packages/react-img-mapper/src/helpers/styles.ts",
"content": "import type { CSSProperties } from 'react';\n\nimport type { StylesProps } from '@/@types/styles';\n\nconst absPos: CSSProperties = {\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nconst imgNonResponsive: CSSProperties = {\n ...absPos,\n zIndex: 1,\n userSelect: 'none',\n};\n\nconst imgResponsive: CSSProperties = {\n ...imgNonResponsive,\n width: '100%',\n height: 'auto',\n};\n\nconst styles: StylesProps = {\n container: {\n position: 'relative',\n },\n canvas: {\n ...absPos,\n pointerEvents: 'none',\n zIndex: 2,\n },\n img: (responsive) => (responsive ? imgResponsive : imgNonResponsive),\n map: (onClick) => (onClick ? { cursor: 'pointer' } : undefined),\n};\n\nexport default styles;\n"
},
{
"path": "packages/react-img-mapper/src/index.ts",
"content": "export type * from '@/@types';\n\n// eslint-disable-next-line no-restricted-exports\nexport { default } from '@/ImageMapper';\n"
},
{
"path": "packages/react-img-mapper/tsconfig.json",
"content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"composite\": true,\n \"jsx\": \"react-jsx\",\n \"skipLibCheck\": true,\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"],\n \"@playground/*\": [\"./playground/src/*\"]\n }\n },\n \"include\": [\"**/*.ts\", \"**/*.tsx\", \"**/*.mjs\", \"**/*.mts\", \"**/*.d.ts\"],\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
},
{
"path": "packages/react-img-mapper/tsdown.config.mts",
"content": "// eslint-disable-next-line import-x/no-extraneous-dependencies\nimport { defineConfig } from 'tsdown';\n\nexport default defineConfig((options) => {\n const { watch } = options;\n\n return {\n dts: true,\n format: ['cjs', 'esm'],\n outDir: 'dist',\n platform: 'browser',\n treeshake: !watch,\n minify: !watch,\n exports: !watch,\n };\n});\n"
},
{
"path": "packages/react-img-mapper/vite.config.ts",
"content": "import { fileURLToPath } from 'node:url';\n\nimport react from '@vitejs/plugin-react';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n root: './playground',\n plugins: [react()],\n resolve: {\n alias: {\n '@': fileURLToPath(new URL('src', import.meta.url)),\n '@playground': fileURLToPath(new URL('playground/src', import.meta.url)),\n },\n },\n});\n"
},
{
"path": "packages/vue-img-mapper/.npmignore",
"content": "# Ignore everything\n/*\n\n# Not ignored folders\n!dist\n\n# Inside dist\n*.tsbuildinfo\n"
},
{
"path": "packages/vue-img-mapper/README.md",
"content": "# `vue-img-mapper`\n\n[](https://www.npmjs.com/package/vue-img-mapper)\n[](https://www.npmjs.com/package/vue-img-mapper)\n[](https://www.npmjs.com/package/vue-img-mapper)\n\nA Vue Component for Creating Interactive and Highlighted Zones on Images\n\n> Check out the package docs here: https://img-mapper.nishargshah.dev/vue/installation\n"
},
{
"path": "packages/vue-img-mapper/package.json",
"content": "{\n \"name\": \"vue-img-mapper\",\n \"version\": \"2.0.3\",\n \"description\": \"A Vue Component for Creating Interactive and Highlighted Zones on Images\",\n \"keywords\": [\n \"vue-img-mapper\",\n \"vue-image-mapper\",\n \"img-mapper\",\n \"image-mapper\",\n \"img mapper\",\n \"image mapper\",\n \"vue img mapper\",\n \"vue image mapper\",\n \"vue img mapper docs\",\n \"vue image mapper docs\"\n ],\n \"homepage\": \"https://img-mapper.nishargshah.dev\",\n \"bugs\": {\n \"url\": \"https://github.com/img-mapper/img-mapper/issues\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/img-mapper/img-mapper.git\",\n \"directory\": \"packages/vue-img-mapper\"\n },\n \"license\": \"MIT\",\n \"author\": \"Nisharg Shah \",\n \"type\": \"module\",\n \"exports\": {\n \".\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\"\n },\n \"./package.json\": \"./package.json\"\n },\n \"main\": \"./dist/index.cjs\",\n \"module\": \"./dist/index.js\",\n \"types\": \"./dist/index.d.cts\",\n \"scripts\": {\n \"build\": \"tsdown\",\n \"dev\": \"tsdown --watch\",\n \"play\": \"vite --port 3001\",\n \"typecheck\": \"vue-tsc --noEmit\"\n },\n \"devDependencies\": {\n \"@vitejs/plugin-vue\": \"^6.0.1\",\n \"tsdown\": \"catalog:\",\n \"typescript\": \"catalog:\",\n \"vite\": \"catalog:\",\n \"vue\": \"^3.5.22\",\n \"vue-tsc\": \"^3.1.1\"\n },\n \"peerDependencies\": {\n \"vue\": \"^2.0.0 || ^3.0.0\"\n },\n \"engines\": {\n \"node\": \">=16.0.0\"\n }\n}\n"
},
{
"path": "packages/vue-img-mapper/playground/index.html",
"content": "\n\n \n Playground \n \n \n
\n \n \n\n"
},
{
"path": "packages/vue-img-mapper/playground/src/App.vue",
"content": "\n\n\n Hello
\n \n"
},
{
"path": "packages/vue-img-mapper/playground/src/index.ts",
"content": "import { createApp } from 'vue';\n\nimport App from '@playground/App.vue';\n\ncreateApp(App).mount('#app');\n"
},
{
"path": "packages/vue-img-mapper/src/ImageMapper.vue",
"content": "\n\n\n Hello World {{ counter }}
\n {{ type }}
\n Click \n Hello \n \n"
},
{
"path": "packages/vue-img-mapper/src/helpers/area.ts",
"content": "// eslint-disable-next-line import-x/prefer-default-export\nexport const hello = (): void => {\n console.log('hello');\n};\n"
},
{
"path": "packages/vue-img-mapper/src/index.ts",
"content": "// eslint-disable-next-line no-restricted-exports\nexport { default } from '@/ImageMapper.vue';\n"
},
{
"path": "packages/vue-img-mapper/tsconfig.json",
"content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"composite\": true,\n \"skipLibCheck\": true,\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"],\n \"@playground/*\": [\"./playground/src/*\"]\n }\n },\n \"include\": [\"**/*.ts\", \"**/*.mjs\", \"**/*.mts\", \"**/*.vue\"],\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
},
{
"path": "packages/vue-img-mapper/tsdown.config.mts",
"content": "// eslint-disable-next-line import-x/no-extraneous-dependencies\nimport { defineConfig } from 'tsdown';\n\nexport default defineConfig((options) => {\n const { watch } = options;\n\n return {\n fromVite: true,\n dts: {\n vue: true,\n },\n format: ['cjs', 'esm'],\n outDir: 'dist',\n platform: 'browser',\n treeshake: !watch,\n minify: !watch,\n exports: !watch,\n };\n});\n"
},
{
"path": "packages/vue-img-mapper/vite.config.ts",
"content": "import { fileURLToPath } from 'node:url';\n\nimport vue from '@vitejs/plugin-vue';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n root: './playground',\n plugins: [vue()],\n resolve: {\n alias: {\n '@': fileURLToPath(new URL('src', import.meta.url)),\n '@playground': fileURLToPath(new URL('playground/src', import.meta.url)),\n },\n },\n});\n"
},
{
"path": "pnpm-workspace.yaml",
"content": "packages:\n - docs\n - apps/*\n - packages/*\n\ncatalog:\n '@types/react': ^19.2.2\n '@types/react-dom': ^19.2.2\n '@vercel/analytics': ^1.5.0\n react: ^19.2.0\n react-dom: ^19.2.0\n tsdown: ^0.15.9\n typescript: ^5.9.3\n vite: ^7.1.11\n\nonlyBuiltDependencies:\n - '@swc/core'\n - esbuild\n - unrs-resolver\n"
},
{
"path": "prettier.config.mjs",
"content": "/**\n * @see https://prettier.io/docs/configuration\n * @type {import(\"prettier\").Config}\n */\nexport default {\n printWidth: 100,\n singleQuote: true,\n plugins: ['prettier-plugin-packagejson'],\n};\n"
},
{
"path": "scripts/lint.sh",
"content": "#!/bin/bash\n\nmode=\"fix\"\n\nfilters=()\n\nfor arg in \"$@\"; do\n case $arg in\n --for=*)\n mode=\"${arg#--for=}\"\n ;;\n --filter=*)\n filterArg=\"${arg#--filter=}\"\n IFS=',' read -ra userFilters <<<\"$filterArg\"\n for monorepo in \"${userFilters[@]}\"; do\n filters+=(--filter \"$monorepo\")\n done\n ;;\n esac\ndone\n\necho \"Started (mode: $mode)\"\n\nif [[ \"$mode\" == \"ci\" ]]; then\n pnpm \"${filters[@]}\" --silent format:check --log-level silent >/dev/null 2>&1\n echo \"Prettier Verified\"\n\n pnpm \"${filters[@]}\" --silent lint >/dev/null 2>&1\n echo \"ESLint Verified\"\n\n pnpm \"${filters[@]}\" --silent typecheck >/dev/null 2>&1\n echo \"TypeScript Verified\"\n\nelif [[ \"$mode\" == \"check\" ]]; then\n pnpm \"${filters[@]}\" --silent format:check --log-level silent\n echo \"Prettier Checked\"\n\n pnpm \"${filters[@]}\" --silent lint\n echo \"ESLint Checked\"\n\n pnpm \"${filters[@]}\" --silent typecheck\n echo \"TypeScript Checked\"\n\nelse\n pnpm \"${filters[@]}\" --silent format:fix --log-level silent\n echo \"Prettier Completed\"\n\n pnpm \"${filters[@]}\" --silent lint:fix\n echo \"ESLint Completed\"\n\n pnpm \"${filters[@]}\" --silent typecheck\n echo \"TypeScript Completed\"\nfi\n\necho \"Done\"\n"
},
{
"path": "tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"esnext\",\n \"module\": \"preserve\",\n \"moduleResolution\": \"bundler\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"strict\": true,\n \"noImplicitReturns\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"esModuleInterop\": true,\n \"resolveJsonModule\": true,\n \"useUnknownInCatchVariables\": true,\n \"isolatedModules\": true,\n \"declaration\": true\n },\n \"files\": [],\n \"references\": [\n {\n \"path\": \"apps/examples\"\n },\n {\n \"path\": \"docs\"\n },\n {\n \"path\": \"packages/react-img-mapper\"\n },\n {\n \"path\": \"packages/vue-img-mapper\"\n }\n ]\n}\n"
}
] ![](\"https://img-mapper.nishargshah.dev/logo.png\"){kind=logo}
\n![\"npm](\"https://img.shields.io/npm/v/react-img-mapper?style=flat&labelColor=ffffff&color=00acc1\")
![\"npm](\"https://img.shields.io/npm/dm/react-img-mapper?style=flat&labelColor=ffffff&color=00acc1\")
![\"npm](\"https://img.shields.io/npm/last-update/react-img-mapper?style=flat&labelColor=ffffff&color=00acc1\")