marker.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. var __rest = (this && this.__rest) || function (s, e) {
  2. var t = {};
  3. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
  4. t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function")
  6. for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  7. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
  8. t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import { Path } from '@antv/g';
  13. const point = (x, y, r) => {
  14. return [
  15. ['M', x - r, y],
  16. ['A', r, r, 0, 1, 0, x + r, y],
  17. ['A', r, r, 0, 1, 0, x - r, y],
  18. ['Z'],
  19. ];
  20. };
  21. point.style = ['fill'];
  22. const hollowPoint = point.bind(undefined);
  23. hollowPoint.style = ['stroke', 'lineWidth'];
  24. const square = (x, y, r) => {
  25. return [
  26. ['M', x - r, y - r],
  27. ['L', x + r, y - r],
  28. ['L', x + r, y + r],
  29. ['L', x - r, y + r],
  30. ['Z'],
  31. ];
  32. };
  33. square.style = ['fill'];
  34. const rect = square.bind(undefined);
  35. rect.style = ['fill'];
  36. const hollowSquare = square.bind(undefined);
  37. hollowSquare.style = ['stroke', 'lineWidth'];
  38. const diamond = (x, y, r) => {
  39. const hr = r * 0.618;
  40. return [
  41. ['M', x - hr, y],
  42. ['L', x, y - r],
  43. ['L', x + hr, y],
  44. ['L', x, y + r],
  45. ['Z'],
  46. ];
  47. };
  48. diamond.style = ['fill'];
  49. const hollowDiamond = diamond.bind(undefined);
  50. hollowDiamond.style = ['stroke', 'lineWidth'];
  51. const triangle = (x, y, r) => {
  52. const diffY = r * Math.sin((1 / 3) * Math.PI);
  53. return [
  54. ['M', x - r, y + diffY],
  55. ['L', x, y - diffY],
  56. ['L', x + r, y + diffY],
  57. ['Z'],
  58. ];
  59. };
  60. triangle.style = ['fill'];
  61. const hollowTriangle = triangle.bind(undefined);
  62. hollowTriangle.style = ['stroke', 'lineWidth'];
  63. const triangleDown = (x, y, r) => {
  64. const diffY = r * Math.sin((1 / 3) * Math.PI);
  65. return [
  66. ['M', x - r, y - diffY],
  67. ['L', x + r, y - diffY],
  68. ['L', x, y + diffY],
  69. ['Z'],
  70. ];
  71. };
  72. triangleDown.style = ['fill'];
  73. const hollowTriangleDown = triangleDown.bind(undefined);
  74. hollowTriangleDown.style = ['stroke', 'lineWidth'];
  75. const hexagon = (x, y, r) => {
  76. const diffX = (r / 2) * Math.sqrt(3);
  77. return [
  78. ['M', x, y - r],
  79. ['L', x + diffX, y - r / 2],
  80. ['L', x + diffX, y + r / 2],
  81. ['L', x, y + r],
  82. ['L', x - diffX, y + r / 2],
  83. ['L', x - diffX, y - r / 2],
  84. ['Z'],
  85. ];
  86. };
  87. hexagon.style = ['fill'];
  88. const hollowHexagon = hexagon.bind(undefined);
  89. hollowHexagon.style = ['stroke', 'lineWidth'];
  90. const bowtie = (x, y, r) => {
  91. const diffY = r - 1.5;
  92. return [
  93. ['M', x - r, y - diffY],
  94. ['L', x + r, y + diffY],
  95. ['L', x + r, y - diffY],
  96. ['L', x - r, y + diffY],
  97. ['Z'],
  98. ];
  99. };
  100. bowtie.style = ['fill'];
  101. const hollowBowtie = bowtie.bind(undefined);
  102. hollowBowtie.style = ['stroke', 'lineWidth'];
  103. const line = (x, y, r) => {
  104. return [
  105. ['M', x, y + r],
  106. ['L', x, y - r],
  107. ];
  108. };
  109. line.style = ['stroke', 'lineWidth'];
  110. const cross = (x, y, r) => {
  111. return [
  112. ['M', x - r, y - r],
  113. ['L', x + r, y + r],
  114. ['M', x + r, y - r],
  115. ['L', x - r, y + r],
  116. ];
  117. };
  118. cross.style = ['stroke', 'lineWidth'];
  119. const tick = (x, y, r) => {
  120. return [
  121. ['M', x - r / 2, y - r],
  122. ['L', x + r / 2, y - r],
  123. ['M', x, y - r],
  124. ['L', x, y + r],
  125. ['M', x - r / 2, y + r],
  126. ['L', x + r / 2, y + r],
  127. ];
  128. };
  129. tick.style = ['stroke', 'lineWidth'];
  130. const plus = (x, y, r) => {
  131. return [
  132. ['M', x - r, y],
  133. ['L', x + r, y],
  134. ['M', x, y - r],
  135. ['L', x, y + r],
  136. ];
  137. };
  138. plus.style = ['stroke', 'lineWidth'];
  139. const hyphen = (x, y, r) => {
  140. return [
  141. ['M', x - r, y],
  142. ['L', x + r, y],
  143. ];
  144. };
  145. hyphen.style = ['stroke', 'lineWidth'];
  146. const dot = (x, y, r) => {
  147. return [
  148. ['M', x - r, y],
  149. ['L', x + r, y],
  150. ];
  151. };
  152. dot.style = ['stroke', 'lineWidth'];
  153. const dash = dot.bind(undefined);
  154. dash.style = ['stroke', 'lineWidth'];
  155. const smooth = (x, y, r) => {
  156. return [
  157. ['M', x - r, y],
  158. ['A', r / 2, r / 2, 0, 1, 1, x, y],
  159. ['A', r / 2, r / 2, 0, 1, 0, x + r, y],
  160. ];
  161. };
  162. smooth.style = ['stroke', 'lineWidth'];
  163. const hv = (x, y, r) => {
  164. return [
  165. ['M', x - r - 1, y - 2.5],
  166. ['L', x, y - 2.5],
  167. ['L', x, y + 2.5],
  168. ['L', x + r + 1, y + 2.5],
  169. ];
  170. };
  171. hv.style = ['stroke', 'lineWidth'];
  172. const vh = (x, y, r) => {
  173. return [
  174. ['M', x - r - 1, y + 2.5],
  175. ['L', x, y + 2.5],
  176. ['L', x, y - 2.5],
  177. ['L', x + r + 1, y - 2.5],
  178. ];
  179. };
  180. vh.style = ['stroke', 'lineWidth'];
  181. const hvh = (x, y, r) => {
  182. return [
  183. ['M', x - (r + 1), y + 2.5],
  184. ['L', x - r / 2, y + 2.5],
  185. ['L', x - r / 2, y - 2.5],
  186. ['L', x + r / 2, y - 2.5],
  187. ['L', x + r / 2, y + 2.5],
  188. ['L', x + r + 1, y + 2.5],
  189. ];
  190. };
  191. hvh.style = ['stroke', 'lineWidth'];
  192. const vhv = (x, y, r) => {
  193. return [
  194. ['M', x - 5, y + 2.5],
  195. ['L', x - 5, y],
  196. ['L', x, y],
  197. ['L', x, y - 3],
  198. ['L', x, y + 3],
  199. ['L', x + 6.5, y + 3],
  200. ];
  201. };
  202. vhv.style = ['stroke', 'lineWidth'];
  203. export const Symbols = new Map([
  204. ['bowtie', bowtie],
  205. ['cross', cross],
  206. ['dash', dash],
  207. ['diamond', diamond],
  208. ['dot', dot],
  209. ['hexagon', hexagon],
  210. ['hollowBowtie', hollowBowtie],
  211. ['hollowDiamond', hollowDiamond],
  212. ['hollowHexagon', hollowHexagon],
  213. ['hollowPoint', hollowPoint],
  214. ['hollowSquare', hollowSquare],
  215. ['hollowTriangle', hollowTriangle],
  216. ['hollowTriangleDown', hollowTriangleDown],
  217. ['hv', hv],
  218. ['hvh', hvh],
  219. ['hyphen', hyphen],
  220. ['line', line],
  221. ['plus', plus],
  222. ['point', point],
  223. ['rect', rect],
  224. ['smooth', smooth],
  225. ['square', square],
  226. ['tick', tick],
  227. ['triangleDown', triangleDown],
  228. ['triangle', triangle],
  229. ['vh', vh],
  230. ['vhv', vhv],
  231. ]);
  232. export function useMarker(type, _a) {
  233. var { d, fill, strokeWidth, path, stroke, lineWidth, color } = _a, style = __rest(_a, ["d", "fill", "strokeWidth", "path", "stroke", "lineWidth", "color"]);
  234. const symbol = Symbols.get(type) || Symbols.get('point');
  235. return (...args) => {
  236. const path = new Path({
  237. style: Object.assign(Object.assign({}, style), { path: symbol(...args), stroke: symbol.style.includes('stroke') ? color || stroke : '', fill: symbol.style.includes('fill') ? color || fill : '', lineWidth: symbol.style.includes('lineWidth')
  238. ? lineWidth || lineWidth || 2
  239. : 0 }),
  240. });
  241. return path;
  242. };
  243. }
  244. export function registerSymbol(type, marker) {
  245. Symbols.set(type, marker);
  246. }
  247. export function unregisterSymbol(type) {
  248. Symbols.delete(type);
  249. }
  250. //# sourceMappingURL=marker.js.map