@pixelium/web-vue 0.0.2-fix → 0.0.3-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (285) hide show
  1. package/README.md +42 -0
  2. package/README.zh.md +6 -3
  3. package/coverage/base.css +224 -0
  4. package/coverage/block-navigation.js +87 -0
  5. package/coverage/coverage-final.json +106 -0
  6. package/coverage/favicon.png +0 -0
  7. package/coverage/index.html +926 -0
  8. package/coverage/prettify.css +1 -0
  9. package/coverage/prettify.js +2 -0
  10. package/coverage/sort-arrow-sprite.png +0 -0
  11. package/coverage/sorter.js +210 -0
  12. package/dist/font.css +1 -1
  13. package/dist/index.d.ts +1593 -248
  14. package/dist/normalize.css +2 -0
  15. package/dist/pixelium-vue-icon-hn.cjs +1 -1
  16. package/dist/pixelium-vue-icon-hn.css +2 -1
  17. package/dist/pixelium-vue-icon-hn.js +8533 -8154
  18. package/dist/pixelium-vue-icon-hn.umd.cjs +1 -1
  19. package/dist/pixelium-vue-icon-pa.cjs +1 -1
  20. package/dist/pixelium-vue-icon-pa.css +2 -1
  21. package/dist/pixelium-vue-icon-pa.js +10625 -10143
  22. package/dist/pixelium-vue-icon-pa.umd.cjs +1 -1
  23. package/dist/pixelium-vue.cjs +2 -2
  24. package/dist/pixelium-vue.css +2 -1
  25. package/dist/pixelium-vue.js +7402 -5854
  26. package/dist/pixelium-vue.umd.cjs +2 -2
  27. package/es/aside/index.js +46 -151
  28. package/es/auto-complete/draw.d.ts +1 -1
  29. package/es/auto-complete/draw.js +26 -51
  30. package/es/auto-complete/index.css +92 -32
  31. package/es/auto-complete/index.d.ts +12 -15
  32. package/es/auto-complete/index.js +338 -400
  33. package/es/auto-complete/type.d.ts +25 -13
  34. package/es/avatar/css.js +2 -0
  35. package/es/avatar/draw.d.ts +2 -0
  36. package/es/avatar/draw.js +11 -0
  37. package/es/avatar/index.css +49 -0
  38. package/es/avatar/index.d.ts +15 -0
  39. package/es/avatar/index.js +110 -0
  40. package/es/avatar/type.d.ts +34 -0
  41. package/es/button/draw.d.ts +4 -4
  42. package/es/button/draw.js +213 -297
  43. package/es/button/index.css +40 -30
  44. package/es/button/index.d.ts +0 -4
  45. package/es/button/index.js +230 -256
  46. package/es/button/type.d.ts +3 -3
  47. package/es/button-group/index.css +0 -3
  48. package/es/button-group/index.d.ts +1 -2
  49. package/es/button-group/index.js +59 -31
  50. package/es/button-group/type.d.ts +21 -4
  51. package/es/checkbox/css.js +2 -0
  52. package/es/checkbox/draw.d.ts +4 -0
  53. package/es/checkbox/draw.js +46 -0
  54. package/es/checkbox/index.css +85 -0
  55. package/es/checkbox/index.d.ts +31 -0
  56. package/es/checkbox/index.js +206 -0
  57. package/es/checkbox/type.d.ts +88 -0
  58. package/es/checkbox-group/css.js +2 -0
  59. package/es/checkbox-group/index.css +20 -0
  60. package/es/checkbox-group/index.d.ts +23 -0
  61. package/es/checkbox-group/index.js +84 -0
  62. package/es/checkbox-group/type.d.ts +78 -0
  63. package/es/col/index.d.ts +2 -2
  64. package/es/col/index.js +43 -58
  65. package/es/container/index.js +18 -31
  66. package/es/divider/index.js +39 -53
  67. package/es/empty/index.css +4 -4
  68. package/es/empty/index.js +16 -71
  69. package/es/entry.js +102 -0
  70. package/es/footer/index.js +31 -40
  71. package/es/form/css.js +1 -0
  72. package/es/form/index.d.ts +27 -0
  73. package/es/form/index.js +125 -0
  74. package/es/form/type.d.ts +238 -0
  75. package/es/form/use-form.d.ts +4 -0
  76. package/es/form/use-form.js +48 -0
  77. package/es/form-item/css.js +2 -0
  78. package/es/form-item/index.css +77 -0
  79. package/es/form-item/index.d.ts +37 -0
  80. package/es/form-item/index.js +318 -0
  81. package/es/form-item/type.d.ts +96 -0
  82. package/es/grid/index.js +56 -75
  83. package/es/grid-item/css.js +0 -1
  84. package/es/grid-item/index.d.ts +1 -1
  85. package/es/grid-item/index.js +85 -121
  86. package/es/header/index.js +31 -40
  87. package/es/icon/index.js +44 -55
  88. package/es/icons/css-hn.js +0 -1
  89. package/es/icons/css-pa.js +0 -1
  90. package/es/icons/icon-hn.js +10337 -15986
  91. package/es/icons/icon-pa.js +12573 -17447
  92. package/es/image/css.js +2 -0
  93. package/es/image/index.css +69 -0
  94. package/es/image/index.d.ts +35 -0
  95. package/es/image/index.js +199 -0
  96. package/es/image/type.d.ts +126 -0
  97. package/es/index.css +1 -515
  98. package/es/index.d.ts +22 -2
  99. package/es/index.js +143 -123
  100. package/es/input/draw.d.ts +1 -1
  101. package/es/input/draw.js +26 -51
  102. package/es/input/index.css +85 -33
  103. package/es/input/index.d.ts +9 -16
  104. package/es/input/index.js +319 -423
  105. package/es/input/type.d.ts +3 -3
  106. package/es/input-group/index.css +0 -1
  107. package/es/input-group/index.d.ts +2 -2
  108. package/es/input-group/index.js +66 -37
  109. package/es/input-group/type.d.ts +16 -4
  110. package/es/input-group-label/draw.d.ts +1 -1
  111. package/es/input-group-label/draw.js +26 -51
  112. package/es/input-group-label/index.css +33 -22
  113. package/es/input-group-label/index.d.ts +1 -4
  114. package/es/input-group-label/index.js +104 -127
  115. package/es/input-group-label/type.d.ts +3 -3
  116. package/es/input-number/draw.d.ts +1 -1
  117. package/es/input-number/draw.js +26 -51
  118. package/es/input-number/index.css +90 -35
  119. package/es/input-number/index.d.ts +9 -16
  120. package/es/input-number/index.js +428 -536
  121. package/es/input-number/type.d.ts +3 -3
  122. package/es/input-tag/draw.d.ts +1 -1
  123. package/es/input-tag/draw.js +26 -48
  124. package/es/input-tag/index.css +100 -33
  125. package/es/input-tag/index.d.ts +7 -13
  126. package/es/input-tag/index.js +442 -467
  127. package/es/input-tag/type.d.ts +24 -13
  128. package/es/link/index.js +75 -106
  129. package/es/main/index.js +11 -15
  130. package/es/mask/index.js +94 -115
  131. package/es/message/index.css +1 -1
  132. package/es/message/index.js +168 -346
  133. package/es/message-box/css.js +1 -1
  134. package/es/message-box/index.js +98 -114
  135. package/es/message-box/message-box-wrapped.js +33 -46
  136. package/es/message-box/message-box.js +79 -111
  137. package/es/option-list/index.css +13 -13
  138. package/es/option-list/index.d.ts +4 -31
  139. package/es/option-list/index.js +99 -167
  140. package/es/option-list/type.d.ts +5 -1
  141. package/es/pixelate/pixel.d.ts +5 -0
  142. package/es/pixelate/pixel.js +70 -0
  143. package/es/pixelate/pixelate.worker.d.ts +1 -0
  144. package/es/popover/index.d.ts +13 -99
  145. package/es/popover/index.js +75 -238
  146. package/es/popover/type.d.ts +7 -2
  147. package/es/popup/css.js +1 -0
  148. package/es/popup/index.d.ts +210 -0
  149. package/es/popup/index.js +203 -0
  150. package/es/popup/type.d.ts +105 -0
  151. package/es/popup-content/draw.d.ts +2 -2
  152. package/es/popup-content/draw.js +98 -143
  153. package/es/popup-content/index.css +11 -11
  154. package/es/popup-content/index.d.ts +1 -0
  155. package/es/popup-content/index.js +253 -1576
  156. package/es/popup-content/type.d.ts +1 -0
  157. package/es/popup-trigger/index.d.ts +8 -2
  158. package/es/popup-trigger/index.js +122 -95
  159. package/es/popup-trigger/type.d.ts +4 -1
  160. package/es/popup-wrapper/css.js +2 -0
  161. package/es/popup-wrapper/index.css +14 -0
  162. package/es/popup-wrapper/index.d.ts +18 -0
  163. package/es/popup-wrapper/index.js +67 -0
  164. package/es/popup-wrapper/type.d.ts +9 -0
  165. package/es/radio/css.js +1 -0
  166. package/es/radio/draw.d.ts +4 -0
  167. package/es/radio/draw.js +47 -0
  168. package/es/radio/index.d.ts +30 -0
  169. package/es/radio/index.js +190 -0
  170. package/es/radio/style.css +73 -0
  171. package/es/radio/type.d.ts +76 -0
  172. package/es/radio-group/css.js +2 -0
  173. package/es/radio-group/index.css +20 -0
  174. package/es/radio-group/index.d.ts +23 -0
  175. package/es/radio-group/index.js +77 -0
  176. package/es/radio-group/type.d.ts +77 -0
  177. package/es/row/index.js +56 -70
  178. package/es/select/draw.d.ts +1 -1
  179. package/es/select/draw.js +26 -51
  180. package/es/select/index.css +118 -36
  181. package/es/select/index.d.ts +14 -16
  182. package/es/select/index.js +625 -675
  183. package/es/select/type.d.ts +60 -25
  184. package/es/share/const/event-bus-key.js +1 -6
  185. package/es/share/const/index.d.ts +4 -0
  186. package/es/share/const/index.js +22 -24
  187. package/es/share/const/provide-key.d.ts +5 -0
  188. package/es/share/const/provide-key.js +6 -5
  189. package/es/share/const/style.d.ts +6 -0
  190. package/es/share/const/style.js +7 -0
  191. package/es/share/hook/use-cancelable-delay.d.ts +1 -0
  192. package/es/share/hook/use-cancelable-delay.js +42 -0
  193. package/es/share/hook/use-click-outside-listener.d.ts +1 -1
  194. package/es/share/hook/use-click-outside-listener.js +28 -41
  195. package/es/share/hook/use-composition.js +17 -15
  196. package/es/share/hook/use-controlled-mode.d.ts +3 -3
  197. package/es/share/hook/use-controlled-mode.js +20 -23
  198. package/es/share/hook/use-dark-mode.js +51 -65
  199. package/es/share/hook/use-index-of-children.d.ts +2 -1
  200. package/es/share/hook/use-index-of-children.js +47 -45
  201. package/es/share/hook/use-lazy-load.d.ts +10 -0
  202. package/es/share/hook/use-lazy-load.js +133 -0
  203. package/es/share/hook/use-props-detect.d.ts +2 -0
  204. package/es/share/hook/use-resize-observer.d.ts +1 -2
  205. package/es/share/hook/use-resize-observer.js +28 -20
  206. package/es/share/hook/use-screen-width.js +27 -36
  207. package/es/share/hook/use-smooth-transition.d.ts +2 -0
  208. package/es/share/hook/use-smooth-transition.js +65 -0
  209. package/es/share/hook/use-textarea-height.js +86 -92
  210. package/es/share/hook/use-theme-mode.js +41 -42
  211. package/es/share/hook/use-transition-end.d.ts +2 -0
  212. package/es/share/hook/use-transition-end.js +12 -0
  213. package/es/share/hook/use-watch-global-css-var.js +12 -16
  214. package/es/share/hook/use-window-resize-listener.d.ts +1 -0
  215. package/es/share/hook/use-window-resize-listener.js +15 -0
  216. package/es/share/hook/use-z-index.js +30 -27
  217. package/es/share/type/index.d.ts +18 -3
  218. package/es/share/util/color.d.ts +5 -3
  219. package/es/share/util/color.js +156 -149
  220. package/es/share/util/common.d.ts +7 -2
  221. package/es/share/util/common.js +127 -65
  222. package/es/share/util/console.d.ts +3 -3
  223. package/es/share/util/console.js +10 -7
  224. package/es/share/util/dom.d.ts +19 -0
  225. package/es/share/util/dom.js +88 -0
  226. package/es/share/util/env.d.ts +1 -0
  227. package/es/share/util/env.js +5 -4
  228. package/es/share/util/event-bus.js +3 -20
  229. package/es/share/util/lru-cache.js +29 -33
  230. package/es/share/util/pixel.d.ts +4 -0
  231. package/es/share/util/plot.d.ts +8 -3
  232. package/es/share/util/plot.js +457 -229
  233. package/es/share/util/reactivity.d.ts +8 -0
  234. package/es/share/util/reactivity.js +23 -0
  235. package/es/share/util/render.js +31 -41
  236. package/es/share/util/theme.d.ts +3 -0
  237. package/es/share/util/theme.js +77 -57
  238. package/es/slider/css.js +2 -0
  239. package/es/slider/draw.d.ts +25 -0
  240. package/es/slider/draw.js +113 -0
  241. package/es/slider/index.css +119 -0
  242. package/es/slider/index.d.ts +66 -0
  243. package/es/slider/index.js +503 -0
  244. package/es/slider/type.d.ts +162 -0
  245. package/es/slider/util.d.ts +37 -0
  246. package/es/slider/util.js +130 -0
  247. package/es/space/index.css +24 -29
  248. package/es/space/index.js +73 -97
  249. package/es/spin/index.css +18 -17
  250. package/es/spin/index.js +72 -102
  251. package/es/spin/type.d.ts +11 -5
  252. package/es/switch/css.js +2 -0
  253. package/es/switch/draw.d.ts +2 -0
  254. package/es/switch/draw.js +18 -0
  255. package/es/switch/index.css +121 -0
  256. package/es/switch/index.d.ts +42 -0
  257. package/es/switch/index.js +259 -0
  258. package/es/switch/type.d.ts +133 -0
  259. package/es/tag/draw.d.ts +2 -2
  260. package/es/tag/draw.js +80 -127
  261. package/es/tag/index.css +38 -22
  262. package/es/tag/index.d.ts +2 -2
  263. package/es/tag/index.js +121 -190
  264. package/es/tag/type.d.ts +3 -3
  265. package/es/text-outline/css.js +2 -0
  266. package/es/text-outline/index.css +4 -0
  267. package/es/text-outline/index.d.ts +17 -0
  268. package/es/text-outline/index.js +33 -0
  269. package/es/text-outline/type.d.ts +23 -0
  270. package/es/textarea/draw.js +9 -11
  271. package/es/textarea/index.css +37 -23
  272. package/es/textarea/index.d.ts +8 -14
  273. package/es/textarea/index.js +274 -262
  274. package/es/tooltip/index.d.ts +100 -4
  275. package/es/tooltip/index.js +70 -226
  276. package/es/tooltip/type.d.ts +7 -2
  277. package/es/vendor.js +504 -0
  278. package/es/virtual-list/css.js +2 -0
  279. package/es/virtual-list/index.css +25 -0
  280. package/es/virtual-list/index.d.ts +11 -0
  281. package/es/virtual-list/index.js +313 -0
  282. package/es/virtual-list/type.d.ts +26 -0
  283. package/package.json +10 -16
  284. package/es/grid-item/index.css +0 -0
  285. /package/es/message-box/{message-box.css → index.css} +0 -0
@@ -1,249 +1,477 @@
1
- import { $, k } from "../../aside/index.js";
2
- import { f as fillArr, c as clamp } from "./common.js";
3
- import { i as inBrowser } from "./env.js";
1
+ import { D as S, P as ke, g as A } from "../../vendor.js";
2
+ import { n as fillArr } from "./common.js";
3
+ import { t as inBrowser } from "./env.js";
4
+ import { a as MEDIUM_BASE_SIZE, i as LARGE_BASE_SIZE, o as SMALL_BASE_SIZE } from "../const/style.js";
5
+ const roundToPixel = (coord, pixelSize) => Math.floor(coord / pixelSize) * pixelSize;
4
6
  function shouldPlot(x, y, startRad, endRad) {
5
- let currentAngle = Math.atan2(y, x);
6
- if (currentAngle < 0) {
7
- currentAngle += Math.PI * 2;
8
- }
9
- return currentAngle >= startRad && currentAngle <= endRad;
7
+ let currentAngle = Math.atan2(y, x);
8
+ if (currentAngle < 0) currentAngle += Math.PI * 2;
9
+ if (!(currentAngle >= startRad && currentAngle <= endRad)) return false;
10
+ return true;
10
11
  }
12
+ var QUADRANT_TEMPLATES = [
13
+ [1, 1],
14
+ [-1, 1],
15
+ [1, -1],
16
+ [-1, -1],
17
+ [1, 1],
18
+ [-1, 1],
19
+ [1, -1],
20
+ [-1, -1]
21
+ ];
11
22
  function plot(ctx, x, y, centerX, centerY, startRad, endRad, pixelSize) {
12
- const quadrants = [
13
- [x, y],
14
- [-x, y],
15
- [x, -y],
16
- [-x, -y],
17
- [y, x],
18
- [-y, x],
19
- [y, -x],
20
- [-y, -x]
21
- ];
22
- for (const [px, py] of quadrants) {
23
- if (shouldPlot(px, py, startRad, endRad)) {
24
- ctx.fillRect(centerX + px, centerY + py, pixelSize, pixelSize);
25
- }
26
- }
23
+ const xRound = x;
24
+ const yRound = y;
25
+ for (let i = 0; i < QUADRANT_TEMPLATES.length; i++) {
26
+ const [sign1, sign2] = QUADRANT_TEMPLATES[i];
27
+ let px, py;
28
+ if (i < 4) {
29
+ px = sign1 * xRound;
30
+ py = sign2 * yRound;
31
+ } else {
32
+ px = sign1 * yRound;
33
+ py = sign2 * xRound;
34
+ }
35
+ if (shouldPlot(px, py, startRad, endRad)) ctx.fillRect(centerX + px, centerY + py, pixelSize, pixelSize);
36
+ }
27
37
  }
28
38
  function drawCircle(ctx, centerX, centerY, radius, startRad = 0, endRad = Math.PI * 2, pixelSize) {
29
- let x = 0;
30
- let y = radius;
31
- let d = 3 - 2 * radius;
32
- while (x <= y + pixelSize) {
33
- plot(ctx, x, y, centerX, centerY, startRad, endRad, pixelSize);
34
- x += pixelSize;
35
- if (d > 0) {
36
- y -= pixelSize;
37
- d += 4 * (x - y) + 10;
38
- } else {
39
- d += 4 * x + 6;
40
- }
41
- }
39
+ let s = pixelSize;
40
+ if (s <= 0 || radius <= 0) return;
41
+ let rate = radius / s;
42
+ let x = 0;
43
+ let y = radius;
44
+ const dy = s;
45
+ const tmp = radius / 2 * Math.SQRT2;
46
+ const end = Math.ceil(tmp);
47
+ const dx = s;
48
+ while (x <= end) {
49
+ plot(ctx, x, y, centerX, centerY, startRad, endRad, s);
50
+ x += dx;
51
+ const yP = radius * radius - x * x;
52
+ const originalY = y;
53
+ if ((y - dy / 2) * (y - dy / 2) > yP) y -= dy;
54
+ if (x >= end && originalY === y) break;
55
+ }
56
+ if (rate > 6 && rate < 7) {
57
+ const fix = Math.round(tmp);
58
+ plot(ctx, fix, fix, centerX, centerY, startRad, endRad, s);
59
+ }
60
+ }
61
+ function drawSmoothCircle(ctx, centerX, centerY, radius, startRad = 0, endRad = Math.PI * 2, pixelSize) {
62
+ let s = pixelSize;
63
+ if (s <= 0 || radius <= 0) return;
64
+ const rate = radius / s;
65
+ let x = 0;
66
+ let y = radius;
67
+ let dy = rate < 4 ? Math.round(s / 2) : rate < 6 ? Math.round(s / 8 * 3) : rate < 8 ? Math.round(s / 8 * 5) : s;
68
+ dy = Math.max(dy, 1);
69
+ const tmp = radius / 2 * Math.SQRT2;
70
+ const end = Math.ceil(tmp);
71
+ const dx = rate < 4 ? s / 4 * 3 : s;
72
+ while (x <= end) {
73
+ plot(ctx, Math.floor(x), Math.floor(y), centerX, centerY, startRad, endRad, s);
74
+ x += dx;
75
+ const yP = radius * radius - x * x;
76
+ const originalY = y;
77
+ while (Math.abs(y * y - yP) >= Math.abs((y - dy) * (y - dy) - yP)) y -= dy;
78
+ if (x >= end && originalY === y) {
79
+ y -= dy;
80
+ break;
81
+ }
82
+ }
42
83
  }
43
84
  function floodFill(ctx, startX, startY, fillColor) {
44
- const w = ctx.canvas.width;
45
- const h = ctx.canvas.height;
46
- if (w <= 0 || h <= 0) {
47
- return;
48
- }
49
- const img = ctx.getImageData(0, 0, w, h);
50
- const data32 = new Uint32Array(img.data.buffer);
51
- const uint32Color = fillColor.a << 24 | fillColor.b << 16 | fillColor.g << 8 | fillColor.r;
52
- const startPos = startY * w + startX;
53
- const targetColor = data32[startPos];
54
- if (targetColor === uint32Color) return;
55
- const stack = [];
56
- const firstSpan = fillLine(startX, startY, 1);
57
- if (firstSpan) stack.push({ ...firstSpan, dy: 1 });
58
- const secondSpan = fillLine(startX, startY - 1, -1);
59
- if (secondSpan) stack.push({ ...secondSpan, dy: -1 });
60
- while (stack.length) {
61
- const { y, left, right, dy } = stack.pop();
62
- const ny = y + dy;
63
- if (ny < 0 || ny >= h) continue;
64
- let x = left;
65
- while (x <= right) {
66
- while (x <= right && data32[ny * w + x] !== targetColor) x++;
67
- if (x > right) break;
68
- const spanLeft = x;
69
- const newSpan = fillLine(spanLeft, ny, dy);
70
- if (newSpan) stack.push(newSpan);
71
- x = newSpan ? newSpan.right + 1 : spanLeft + 1;
72
- }
73
- }
74
- ctx.putImageData(img, 0, 0);
75
- function fillLine(x, y, dy) {
76
- let left = x;
77
- while (left > 0 && data32[y * w + left - 1] === targetColor) left--;
78
- let right = x;
79
- while (right < w - 1 && data32[y * w + right + 1] === targetColor) right++;
80
- for (let i = left; i <= right; i++) data32[y * w + i] = uint32Color;
81
- return { y, left, right, dy };
82
- }
85
+ const w = ctx.canvas.width;
86
+ const h = ctx.canvas.height;
87
+ if (w <= 0 || h <= 0) return;
88
+ const img = ctx.getImageData(0, 0, w, h);
89
+ const data32 = new Uint32Array(img.data.buffer);
90
+ const uint32Color = fillColor.a << 24 | fillColor.b << 16 | fillColor.g << 8 | fillColor.r;
91
+ const targetColor = data32[startY * w + startX];
92
+ if (targetColor === uint32Color) return;
93
+ const stack = [];
94
+ const firstSpan = fillLine(startX, startY, 1);
95
+ if (firstSpan) stack.push({
96
+ ...firstSpan,
97
+ dy: 1
98
+ });
99
+ const secondSpan = fillLine(startX, startY - 1, -1);
100
+ if (secondSpan) stack.push({
101
+ ...secondSpan,
102
+ dy: -1
103
+ });
104
+ while (stack.length) {
105
+ const { y, left, right, dy } = stack.pop();
106
+ const ny = y + dy;
107
+ if (ny < 0 || ny >= h) continue;
108
+ let x = left;
109
+ while (x <= right) {
110
+ while (x <= right && data32[ny * w + x] !== targetColor) x++;
111
+ if (x > right) break;
112
+ const spanLeft = x;
113
+ const newSpan = fillLine(spanLeft, ny, dy);
114
+ if (newSpan) stack.push(newSpan);
115
+ x = newSpan ? newSpan.right + 1 : spanLeft + 1;
116
+ }
117
+ }
118
+ ctx.putImageData(img, 0, 0);
119
+ function fillLine(x, y, dy) {
120
+ let left = x;
121
+ while (left > 0 && data32[y * w + left - 1] === targetColor) left--;
122
+ let right = x;
123
+ while (right < w - 1 && data32[y * w + right + 1] === targetColor) right++;
124
+ for (let i = left; i <= right; i++) data32[y * w + i] = uint32Color;
125
+ return {
126
+ y,
127
+ left,
128
+ right,
129
+ dy
130
+ };
131
+ }
83
132
  }
84
- const transformBorderRadiusSizeValue = (canvas, value, pixelSize) => {
85
- if (k(value)) {
86
- return Math.max(value, pixelSize);
87
- } else {
88
- return Math.max(canvas.height * parseFloat(value) / 100, pixelSize);
89
- }
133
+ const transformBorderRadiusSizeValue = (canvas, value, pixelSize, direction = "horizontal") => {
134
+ if (A(value)) return Math.max(value, pixelSize);
135
+ else return Math.max((direction === "horizontal" ? canvas.height : canvas.width) * parseFloat(value) / 100, pixelSize);
136
+ };
137
+ var getRadiusFromValue = (canvas, value, pixelSize, direction = "horizontal") => {
138
+ if (!value) return fillArr(pixelSize, 4);
139
+ if (!S(value)) return fillArr(transformBorderRadiusSizeValue(canvas, value, pixelSize, direction), 4);
140
+ switch (value.length) {
141
+ case 1: return fillArr(transformBorderRadiusSizeValue(canvas, value[0], pixelSize, direction), 4);
142
+ case 2: {
143
+ const tl = transformBorderRadiusSizeValue(canvas, value[0], pixelSize, direction);
144
+ const tr = transformBorderRadiusSizeValue(canvas, value[1], pixelSize, direction);
145
+ return [
146
+ tl,
147
+ tr,
148
+ tl,
149
+ tr
150
+ ];
151
+ }
152
+ case 3: {
153
+ const tl = transformBorderRadiusSizeValue(canvas, value[0], pixelSize, direction);
154
+ const br = transformBorderRadiusSizeValue(canvas, value[2], pixelSize, direction);
155
+ const rest = transformBorderRadiusSizeValue(canvas, value[1], pixelSize, direction);
156
+ return [
157
+ tl,
158
+ rest,
159
+ br,
160
+ rest
161
+ ];
162
+ }
163
+ default: return value.map((e) => transformBorderRadiusSizeValue(canvas, e, pixelSize, direction));
164
+ }
90
165
  };
91
- const getRadiusFromValue = (canvas, value, pixelSize) => {
92
- if (!value) return fillArr(pixelSize, 4);
93
- if (!$(value)) {
94
- return fillArr(transformBorderRadiusSizeValue(canvas, value, pixelSize), 4);
95
- }
96
- switch (value.length) {
97
- case 1:
98
- return fillArr(transformBorderRadiusSizeValue(canvas, value[0], pixelSize), 4);
99
- case 2: {
100
- const tl = transformBorderRadiusSizeValue(canvas, value[0], pixelSize);
101
- const tr = transformBorderRadiusSizeValue(canvas, value[1], pixelSize);
102
- return [tl, tr, tl, tr];
103
- }
104
- case 3: {
105
- const tl = transformBorderRadiusSizeValue(canvas, value[0], pixelSize);
106
- const br = transformBorderRadiusSizeValue(canvas, value[2], pixelSize);
107
- const rest = transformBorderRadiusSizeValue(canvas, value[1], pixelSize);
108
- return [tl, rest, br, rest];
109
- }
110
- default:
111
- return value.map((e) => transformBorderRadiusSizeValue(canvas, e, pixelSize));
112
- }
166
+ var getInnerRadius = (canvas, value, pixelSize, first, last, direction = "horizontal") => {
167
+ if (!value) return fillArr(pixelSize, 4);
168
+ if (!S(value)) {
169
+ const v = transformBorderRadiusSizeValue(canvas, value, pixelSize, direction);
170
+ if (last) return [
171
+ pixelSize,
172
+ v,
173
+ v,
174
+ pixelSize
175
+ ];
176
+ if (first) return [
177
+ v,
178
+ pixelSize,
179
+ pixelSize,
180
+ v
181
+ ];
182
+ return fillArr(pixelSize, 4);
183
+ }
184
+ switch (value.length) {
185
+ case 1:
186
+ const v = transformBorderRadiusSizeValue(canvas, value[0], pixelSize, direction);
187
+ if (last) return [
188
+ pixelSize,
189
+ v,
190
+ v,
191
+ pixelSize
192
+ ];
193
+ if (first) return [
194
+ v,
195
+ pixelSize,
196
+ pixelSize,
197
+ v
198
+ ];
199
+ return fillArr(pixelSize, 4);
200
+ case 2: {
201
+ const tl = transformBorderRadiusSizeValue(canvas, value[0], pixelSize, direction);
202
+ const tr = transformBorderRadiusSizeValue(canvas, value[1], pixelSize, direction);
203
+ if (last) return [
204
+ pixelSize,
205
+ tr,
206
+ tr,
207
+ pixelSize
208
+ ];
209
+ if (first) return [
210
+ tl,
211
+ pixelSize,
212
+ pixelSize,
213
+ tl
214
+ ];
215
+ return fillArr(pixelSize, 4);
216
+ }
217
+ case 3: {
218
+ const tl = transformBorderRadiusSizeValue(canvas, value[0], pixelSize, direction);
219
+ const br = transformBorderRadiusSizeValue(canvas, value[2], pixelSize, direction);
220
+ const rest = transformBorderRadiusSizeValue(canvas, value[1], pixelSize, direction);
221
+ if (last) return [
222
+ pixelSize,
223
+ rest,
224
+ br,
225
+ pixelSize
226
+ ];
227
+ if (first) return [
228
+ tl,
229
+ pixelSize,
230
+ pixelSize,
231
+ rest
232
+ ];
233
+ return fillArr(pixelSize, 4);
234
+ }
235
+ default:
236
+ if (last) return [
237
+ pixelSize,
238
+ transformBorderRadiusSizeValue(canvas, value[1], pixelSize, direction),
239
+ transformBorderRadiusSizeValue(canvas, value[2], pixelSize, direction),
240
+ pixelSize
241
+ ];
242
+ if (first) return [
243
+ transformBorderRadiusSizeValue(canvas, value[0], pixelSize, direction),
244
+ pixelSize,
245
+ pixelSize,
246
+ transformBorderRadiusSizeValue(canvas, value[3], pixelSize, direction)
247
+ ];
248
+ return fillArr(pixelSize, 4);
249
+ }
113
250
  };
114
- const getInnerRadius = (canvas, value, pixelSize, first, last) => {
115
- if (!value) return fillArr(pixelSize, 4);
116
- if (!$(value)) {
117
- const v = transformBorderRadiusSizeValue(canvas, value, pixelSize);
118
- if (last) return [pixelSize, v, v, pixelSize];
119
- if (first) return [v, pixelSize, pixelSize, v];
120
- return fillArr(pixelSize, 4);
121
- }
122
- switch (value.length) {
123
- case 1:
124
- const v = transformBorderRadiusSizeValue(canvas, value[0], pixelSize);
125
- if (last) return [pixelSize, v, v, pixelSize];
126
- if (first) return [v, pixelSize, pixelSize, v];
127
- return fillArr(pixelSize, 4);
128
- case 2: {
129
- const tl = transformBorderRadiusSizeValue(canvas, value[0], pixelSize);
130
- const tr = transformBorderRadiusSizeValue(canvas, value[1], pixelSize);
131
- if (last) return [pixelSize, tr, tr, pixelSize];
132
- if (first) return [tl, pixelSize, pixelSize, tl];
133
- return fillArr(pixelSize, 4);
134
- }
135
- case 3: {
136
- const tl = transformBorderRadiusSizeValue(canvas, value[0], pixelSize);
137
- const br = transformBorderRadiusSizeValue(canvas, value[2], pixelSize);
138
- const rest = transformBorderRadiusSizeValue(canvas, value[1], pixelSize);
139
- if (last) return [pixelSize, rest, br, pixelSize];
140
- if (first) return [tl, pixelSize, pixelSize, rest];
141
- return fillArr(pixelSize, 4);
142
- }
143
- default:
144
- if (last)
145
- return [
146
- pixelSize,
147
- transformBorderRadiusSizeValue(canvas, value[1], pixelSize),
148
- transformBorderRadiusSizeValue(canvas, value[2], pixelSize),
149
- pixelSize
150
- ];
151
- if (first)
152
- return [
153
- transformBorderRadiusSizeValue(canvas, value[0], pixelSize),
154
- pixelSize,
155
- pixelSize,
156
- transformBorderRadiusSizeValue(canvas, value[3], pixelSize)
157
- ];
158
- return fillArr(pixelSize, 4);
159
- }
251
+ var getRadius = (canvas, pixelSize, size, direction = "horizontal") => {
252
+ let originalRadius = transformBorderRadiusSizeValue(canvas, "50%", pixelSize, direction);
253
+ if (A(size)) originalRadius = ke(originalRadius, pixelSize, size / 2);
254
+ let radius = roundToPixel(originalRadius, pixelSize);
255
+ const rate = radius / pixelSize;
256
+ if (rate === 4 && originalRadius < pixelSize * 4.5) return pixelSize * 3;
257
+ if (rate === 6 && originalRadius < pixelSize * 6.25) return pixelSize * 5;
258
+ if (rate === 6 && originalRadius > pixelSize * 6.375) return pixelSize * 7;
259
+ return radius;
160
260
  };
161
- const getBorderRadius = (canvas, pixelSize, borderRadius, shape, size = "medium", inner = false, first = false, last = false) => {
162
- if (!inBrowser()) {
163
- return fillArr(pixelSize, 4);
164
- }
165
- if (!inner) {
166
- if (borderRadius) {
167
- return getRadiusFromValue(canvas, borderRadius, pixelSize);
168
- }
169
- switch (shape) {
170
- case "round":
171
- case "circle":
172
- let radius = transformBorderRadiusSizeValue(canvas, "50%", pixelSize);
173
- radius = Math.max(Math.round(radius / pixelSize) * pixelSize, pixelSize);
174
- return fillArr(radius, 4);
175
- default:
176
- return fillArr(pixelSize, 4);
177
- }
178
- } else {
179
- if (borderRadius) {
180
- return getInnerRadius(canvas, borderRadius, pixelSize, first, last);
181
- }
182
- const globalComputedStyle = getComputedStyle(document.documentElement);
183
- const height = parseInt(globalComputedStyle.getPropertyValue(`--px-${size}-base-size`)) + 2 * pixelSize;
184
- switch (shape) {
185
- case "round":
186
- let radius = transformBorderRadiusSizeValue(canvas, "50%", pixelSize);
187
- radius = clamp(radius, pixelSize, height / 2);
188
- radius = Math.max(Math.round(radius / pixelSize) * pixelSize, pixelSize);
189
- const roundArr = fillArr(radius, 4);
190
- if (last) return roundArr.map((e, i) => i < 1 || i > 2 ? pixelSize : e);
191
- if (first) return roundArr.map((e, i) => i > 0 && i < 3 ? pixelSize : e);
192
- return fillArr(pixelSize, 4);
193
- default:
194
- return fillArr(pixelSize, 4);
195
- }
196
- }
261
+ const getBorderRadius = (canvas, pixelSize, borderRadius, shape, size = "medium", inner = false, first = false, last = false, direction = "horizontal") => {
262
+ if (!inBrowser()) return fillArr(pixelSize, 4);
263
+ if (!inner) {
264
+ if (borderRadius) return getRadiusFromValue(canvas, borderRadius, pixelSize, direction);
265
+ switch (shape) {
266
+ case "round":
267
+ case "circle": return fillArr(getRadius(canvas, pixelSize, void 0, direction), 4);
268
+ default: return fillArr(pixelSize, 4);
269
+ }
270
+ } else {
271
+ if (borderRadius) return getInnerRadius(canvas, borderRadius, pixelSize, first, last, direction);
272
+ const height = size === "small" ? 20 : size === "large" ? 36 : 28 + 2 * pixelSize;
273
+ switch (shape) {
274
+ case "round":
275
+ const roundArr = fillArr(getRadius(canvas, pixelSize, height, direction), 4);
276
+ if (last) return roundArr.map((e, i) => i < 1 || i > 2 ? pixelSize : e);
277
+ if (first) return roundArr.map((e, i) => i > 0 && i < 3 ? pixelSize : e);
278
+ return fillArr(pixelSize, 4);
279
+ default: return fillArr(pixelSize, 4);
280
+ }
281
+ }
197
282
  };
198
283
  function calcWhenLeaveBaseline(pixelSize, borderRadius) {
199
- return Math.ceil(
200
- (-6 + Math.sqrt(36 - 48 * pixelSize + 32 * pixelSize * borderRadius)) / (8 * pixelSize)
201
- ) * pixelSize;
284
+ const step = pixelSize * 4 < borderRadius ? Math.round(pixelSize / 2) : pixelSize * 7 < borderRadius ? Math.round(pixelSize / 4 * 3) : pixelSize;
285
+ return Math.ceil((-6 + Math.sqrt(36 - 48 * step + 32 * step * borderRadius)) / (8 * step)) * step;
202
286
  }
203
287
  const calcPixelSize = () => {
204
- if (!inBrowser()) {
205
- return 4;
206
- }
207
- const globalComputedStyle = getComputedStyle(document.documentElement);
208
- const pixelSize = parseInt(globalComputedStyle.getPropertyValue("--px-bit"));
209
- return pixelSize;
288
+ if (!inBrowser()) return 4;
289
+ const globalComputedStyle = getComputedStyle(document.documentElement);
290
+ return parseInt(globalComputedStyle.getPropertyValue("--px-bit"));
210
291
  };
211
292
  const calcBorderCornerCenter = (borderRadius, width, height, pixelSize, paddingX = 0, paddingY = 0) => {
212
- return [
213
- [borderRadius[0], borderRadius[0]],
214
- [width - paddingX - borderRadius[1] - pixelSize, borderRadius[1]],
215
- [
216
- width - paddingX - borderRadius[2] - pixelSize,
217
- height - paddingY - borderRadius[2] - pixelSize
218
- ],
219
- [borderRadius[3], height - paddingY - borderRadius[3] - pixelSize]
220
- ];
293
+ return [
294
+ [borderRadius[0], borderRadius[0]],
295
+ [width - paddingX - borderRadius[1] - pixelSize, borderRadius[1]],
296
+ [width - paddingX - borderRadius[2] - pixelSize, height - paddingY - borderRadius[2] - pixelSize],
297
+ [borderRadius[3], height - paddingY - borderRadius[3] - pixelSize]
298
+ ];
299
+ };
300
+ const canvasPreprocess = (wrapperRef, canvasRef, paddingX = 0, paddingY = 0) => {
301
+ if (!canvasRef.value || !wrapperRef.value) return;
302
+ const ctx = canvasRef.value.getContext("2d", { willReadFrequently: true });
303
+ if (!ctx) return;
304
+ ctx.imageSmoothingEnabled = false;
305
+ const rect = wrapperRef.value.getBoundingClientRect();
306
+ const width = rect.width - paddingX * 2;
307
+ const height = rect.height - paddingY * 2;
308
+ if (width <= 0 || height <= 0) return;
309
+ canvasRef.value.width = width;
310
+ canvasRef.value.height = height;
311
+ return {
312
+ ctx,
313
+ width: canvasRef.value.width,
314
+ height: canvasRef.value.height,
315
+ rect,
316
+ canvas: canvasRef.value,
317
+ wrapper: wrapperRef.value
318
+ };
221
319
  };
222
- const canvasPreprocess = (wrapperRef, canvasRef) => {
223
- if (!canvasRef.value || !wrapperRef.value) return;
224
- const ctx = canvasRef.value.getContext("2d", { willReadFrequently: true });
225
- if (!ctx) return;
226
- ctx.imageSmoothingEnabled = false;
227
- const rect = wrapperRef.value.getBoundingClientRect();
228
- if (rect.width <= 0 || rect.height <= 0) {
229
- return;
230
- }
231
- canvasRef.value.width = rect.width;
232
- canvasRef.value.height = rect.height;
233
- return {
234
- ctx,
235
- width: canvasRef.value.width,
236
- height: canvasRef.value.height,
237
- rect,
238
- canvas: canvasRef.value
239
- };
320
+ var filterLine = (points) => {
321
+ if (points.length <= 2) return points;
322
+ const result = [points[0]];
323
+ for (let i = 1; i < points.length; i++) {
324
+ const current = points[i];
325
+ while (result.length >= 2) {
326
+ const prevPrev = result[result.length - 2];
327
+ const prev = result[result.length - 1];
328
+ const isHorizontal = prevPrev[1] === prev[1] && prev[1] === current[1];
329
+ const isVertical = prevPrev[0] === prev[0] && prev[0] === current[0];
330
+ if (!isHorizontal && !isVertical) break;
331
+ result.pop();
332
+ }
333
+ result.push(current);
334
+ }
335
+ while (result.length >= 3) {
336
+ const p1 = result[result.length - 3];
337
+ const p2 = result[result.length - 2];
338
+ const p3 = result[result.length - 1];
339
+ const isHorizontal = p1[1] === p2[1] && p2[1] === p3[1];
340
+ const isVertical = p1[0] === p2[0] && p2[0] === p3[0];
341
+ if (!isHorizontal && !isVertical) break;
342
+ result.pop();
343
+ }
344
+ if (result.length > 1 && result[result.length - 1][0] === result[0][0] && result[result.length - 1][1] === result[0][1]) result.pop();
345
+ return result;
240
346
  };
241
- export {
242
- canvasPreprocess as a,
243
- calcBorderCornerCenter as b,
244
- calcPixelSize as c,
245
- drawCircle as d,
246
- calcWhenLeaveBaseline as e,
247
- floodFill as f,
248
- getBorderRadius as g
347
+ var clockOrderSort = (points) => {
348
+ const centroid = points.reduce((acc, [x, y]) => {
349
+ acc[0] += x;
350
+ acc[1] += y;
351
+ return acc;
352
+ }, [0, 0]);
353
+ centroid[0] /= points.length;
354
+ centroid[1] /= points.length;
355
+ return points.sort((a, b) => {
356
+ const angleA = Math.atan2(a[1] - centroid[1], a[0] - centroid[0]);
357
+ return Math.atan2(b[1] - centroid[1], b[0] - centroid[0]) - angleA;
358
+ });
249
359
  };
360
+ function floodFillEdge(ctx, startX, startY, fillColor) {
361
+ const w = ctx.canvas.width;
362
+ const h = ctx.canvas.height;
363
+ if (w <= 0 || h <= 0) return [];
364
+ const img = ctx.getImageData(0, 0, w, h);
365
+ const data32 = new Uint32Array(img.data.buffer);
366
+ const uint32Color = fillColor.a << 24 | fillColor.b << 16 | fillColor.g << 8 | fillColor.r;
367
+ const targetColor = data32[startY * w + startX];
368
+ if (targetColor === uint32Color) return [];
369
+ const filled = new Uint8Array(w * h);
370
+ const stack = [];
371
+ function fillLine(x, y, dy) {
372
+ if (y < 0 || y >= h) return null;
373
+ let left = x;
374
+ while (left > 0 && data32[y * w + (left - 1)] === targetColor && filled[y * w + (left - 1)] === 0) left--;
375
+ let right = x;
376
+ while (right < w - 1 && data32[y * w + (right + 1)] === targetColor && filled[y * w + (right + 1)] === 0) right++;
377
+ for (let i = left; i <= right; i++) {
378
+ const pos = y * w + i;
379
+ if (filled[pos] === 0) {
380
+ filled[pos] = 1;
381
+ data32[pos] = uint32Color;
382
+ }
383
+ }
384
+ return {
385
+ y,
386
+ left,
387
+ right,
388
+ dy
389
+ };
390
+ }
391
+ const firstSpan = fillLine(startX, startY, 1);
392
+ if (firstSpan) stack.push({
393
+ ...firstSpan,
394
+ dy: 1
395
+ });
396
+ const secondSpan = fillLine(startX, startY - 1, -1);
397
+ if (secondSpan) stack.push({
398
+ ...secondSpan,
399
+ dy: -1
400
+ });
401
+ while (stack.length) {
402
+ const { y, left, right, dy } = stack.pop();
403
+ const ny = y + dy;
404
+ if (ny < 0 || ny >= h) continue;
405
+ let x = left;
406
+ while (x <= right) {
407
+ const pos = ny * w + x;
408
+ if (data32[pos] !== targetColor || filled[pos] === 1) {
409
+ x++;
410
+ continue;
411
+ }
412
+ const newSpan = fillLine(x, ny, dy);
413
+ if (newSpan) stack.push(newSpan);
414
+ x = newSpan ? newSpan.right + 1 : x + 1;
415
+ }
416
+ }
417
+ const edgePoints = /* @__PURE__ */ new Set();
418
+ for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) if (filled[y * w + x] === 1) {
419
+ let isEdge = false;
420
+ if (x === 0 || filled[y * w + (x - 1)] === 0) isEdge = true;
421
+ else if (x === w - 1 || filled[y * w + (x + 1)] === 0) isEdge = true;
422
+ else if (y === 0 || filled[(y - 1) * w + x] === 0) isEdge = true;
423
+ else if (y === h - 1 || filled[(y + 1) * w + x] === 0) isEdge = true;
424
+ if (isEdge) edgePoints.add(x * h + y);
425
+ }
426
+ const points = Array.from(edgePoints).map((enc) => {
427
+ return [Math.floor(enc / h), enc % h];
428
+ });
429
+ if (points.length === 0) return [];
430
+ clockOrderSort(points);
431
+ return filterLine(points);
432
+ }
433
+ function outerEdgePoints(ctx) {
434
+ const canvas = ctx.canvas;
435
+ const width = canvas.width;
436
+ const height = canvas.height;
437
+ const data = ctx.getImageData(0, 0, width, height).data;
438
+ const visited = Array.from({ length: height }, () => Array(width).fill(false));
439
+ const queue = [];
440
+ const edgePoints = /* @__PURE__ */ new Set();
441
+ const dirs = [
442
+ [0, 1],
443
+ [0, -1],
444
+ [1, 0],
445
+ [-1, 0]
446
+ ];
447
+ for (let y = 0; y < height; y++) for (const x of [0, width - 1]) if (data[(y * width + x) * 4 + 3] === 0 && !visited[y][x]) {
448
+ visited[y][x] = true;
449
+ queue.push([x, y]);
450
+ }
451
+ for (let x = 0; x < width; x++) for (const y of [0, height - 1]) if (data[(y * width + x) * 4 + 3] === 0 && !visited[y][x]) {
452
+ visited[y][x] = true;
453
+ queue.push([x, y]);
454
+ }
455
+ while (queue.length > 0) {
456
+ const [cx, cy] = queue.shift();
457
+ for (const [dx, dy] of dirs) {
458
+ const nx = cx + dx;
459
+ const ny = cy + dy;
460
+ if (nx < 0 || nx >= width || ny < 0 || ny >= height) continue;
461
+ if (data[(ny * width + nx) * 4 + 3] > 0) {
462
+ const key = nx * height + ny;
463
+ edgePoints.add(key);
464
+ } else if (!visited[ny][nx]) {
465
+ visited[ny][nx] = true;
466
+ queue.push([nx, ny]);
467
+ }
468
+ }
469
+ }
470
+ const points = Array.from(edgePoints).map((key) => {
471
+ return [Math.floor(key / height), key % height];
472
+ });
473
+ if (points.length === 0) return [];
474
+ clockOrderSort(points);
475
+ return filterLine(points);
476
+ }
477
+ export { drawCircle as a, floodFillEdge as c, roundToPixel as d, canvasPreprocess as i, getBorderRadius as l, calcPixelSize as n, drawSmoothCircle as o, calcWhenLeaveBaseline as r, floodFill as s, calcBorderCornerCenter as t, outerEdgePoints as u };