@davedev42/react-naver-maps
Version:
React Navermaps API integration for modern development.
1 lines • 3.63 kB
Source Map (JSON)
{"version":3,"sources":["../src/overlays/rectangle.tsx"],"sourcesContent":["import { useEffect, useState, forwardRef, useImperativeHandle } from 'react';\n\nimport { HandleEvents } from '../helpers/event';\nimport { Overlay } from '../overlay';\nimport type { UIEventHandlers } from '../types/event';\nimport { useNavermaps } from '../use-navermaps';\nimport { omitUndefined } from '../utils/omit-undefined';\n\nconst optionKeys = [\n 'strokeWeight',\n 'strokeOpacity',\n 'strokeColor',\n 'strokeStyle',\n 'strokeLineCap',\n 'strokeLineJoin',\n 'fillColor',\n 'fillOpacity',\n] as const;\nconst kvoKeys = [\n 'bounds',\n 'clickable',\n 'visible',\n 'zIndex',\n] as const;\nconst kvoEvents = kvoKeys.map(key => `${key}_changed`);\nconst uiEvents = [\n 'click',\n 'dblclick',\n 'mousedown',\n 'mouseout',\n 'mouseover',\n 'mouseup',\n] as const;\nconst events = [...uiEvents, ...kvoEvents];\n\ntype RectangleOptions = {\n /**\n * @type naver.maps.Bounds | naver.maps.BoundsLiteral\n */\n bounds: naver.maps.Bounds | naver.maps.BoundsLiteral;\n strokeWeight?: number;\n strokeOpacity?: number;\n strokeColor?: string;\n strokeStyle?: naver.maps.StrokeStyleType;\n strokeLineCap?: naver.maps.StrokeLineCapType;\n strokeLineJoin?: naver.maps.StrokeLineJoinType;\n fillColor?: string;\n fillOpacity?: number;\n clickable?: boolean;\n visible?: boolean;\n zIndex?: number;\n};\n\nexport type Props = RectangleOptions & {\n onBoundsChanged?: (value: naver.maps.Bounds) => void;\n onClickableChanged?: (value: boolean) => void;\n onVisibleChanged?: (value: boolean) => void;\n onZIndexChanged?: (value: number) => void;\n} & UIEventHandlers<typeof uiEvents>;\n\nexport const Rectangle = forwardRef<naver.maps.Rectangle, Props>(function Rectangle(props, ref) {\n const { bounds } = props;\n const options = {\n bounds,\n ...Object.fromEntries([...optionKeys, ...kvoKeys].filter(key => key !== 'bounds').map(key => [key, props[key]])),\n } as naver.maps.RectangleOptions;\n const navermaps = useNavermaps();\n const [rectangle] = useState(() => new navermaps.Rectangle(options));\n\n useImperativeHandle<naver.maps.Rectangle | undefined, naver.maps.Rectangle | undefined>(ref, () => rectangle);\n\n useEffect(() => {\n const cleanOptions = omitUndefined(options);\n if (Object.keys(cleanOptions).length > 0) {\n rectangle.setOptions(cleanOptions as naver.maps.RectangleOptions);\n }\n }, kvoKeys.map(key => options[key]));\n\n return (\n <Overlay element={rectangle}>\n <HandleEvents events={events} listeners={props as any} />\n </Overlay>\n );\n});\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,WAAW,UAAU,YAAY,2BAA2B;AAgF/D;AAxEN,IAAM,aAAa;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACA,IAAM,UAAU;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACA,IAAM,YAAY,QAAQ,IAAI,SAAO,GAAG,GAAG,UAAU;AACrD,IAAM,WAAW;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACA,IAAM,SAAS,CAAC,GAAG,UAAU,GAAG,SAAS;AA2BlC,IAAM,YAAY,WAAwC,SAASA,WAAU,OAAO,KAAK;AAC9F,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,UAAU;AAAA,IACd;AAAA,IACA,GAAG,OAAO,YAAY,CAAC,GAAG,YAAY,GAAG,OAAO,EAAE,OAAO,SAAO,QAAQ,QAAQ,EAAE,IAAI,SAAO,CAAC,KAAK,MAAM,GAAG,CAAC,CAAC,CAAC;AAAA,EACjH;AACA,QAAM,YAAY,aAAa;AAC/B,QAAM,CAAC,SAAS,IAAI,SAAS,MAAM,IAAI,UAAU,UAAU,OAAO,CAAC;AAEnE,sBAAwF,KAAK,MAAM,SAAS;AAE5G,YAAU,MAAM;AACd,UAAM,eAAe,cAAc,OAAO;AAC1C,QAAI,OAAO,KAAK,YAAY,EAAE,SAAS,GAAG;AACxC,gBAAU,WAAW,YAA2C;AAAA,IAClE;AAAA,EACF,GAAG,QAAQ,IAAI,SAAO,QAAQ,GAAG,CAAC,CAAC;AAEnC,SACE,oBAAC,WAAQ,SAAS,WAChB,8BAAC,gBAAa,QAAgB,WAAW,OAAc,GACzD;AAEJ,CAAC;","names":["Rectangle"]}