x4js 1.6.5 → 2.0.2

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 (292) hide show
  1. package/README.md +3 -14
  2. package/lib/README.txt +3 -14
  3. package/lib/esm/x4.css +1 -0
  4. package/lib/esm/x4.js +1 -0
  5. package/lib/src/assets/house-light.svg +1 -0
  6. package/lib/src/assets/radio.svg +4 -0
  7. package/lib/src/components/base.scss +26 -0
  8. package/lib/src/components/boxes/boxes.module.scss +37 -0
  9. package/lib/src/components/boxes/boxes.ts +125 -0
  10. package/lib/src/components/btngroup/btngroup.module.scss +29 -0
  11. package/lib/src/components/btngroup/btngroup.ts +106 -0
  12. package/lib/src/components/button/button.module.scss +154 -0
  13. package/lib/src/components/button/button.ts +117 -0
  14. package/lib/src/components/calendar/calendar-check-sharp-light.svg +1 -0
  15. package/lib/src/components/calendar/calendar.module.scss +163 -0
  16. package/lib/src/{calendar.ts → components/calendar/calendar.ts} +81 -83
  17. package/lib/src/components/calendar/chevron-left-sharp-light.svg +1 -0
  18. package/lib/src/components/calendar/chevron-right-sharp-light.svg +1 -0
  19. package/lib/src/components/checkbox/check.svg +4 -0
  20. package/lib/src/components/checkbox/checkbox.module.scss +142 -0
  21. package/lib/src/components/checkbox/checkbox.ts +125 -0
  22. package/lib/src/components/colorinput/colorinput.module.scss +65 -0
  23. package/lib/src/components/colorinput/colorinput.ts +88 -0
  24. package/lib/src/components/colorinput/crosshairs-simple-sharp-light.svg +1 -0
  25. package/lib/src/components/colorpicker/colorpicker.module.scss +133 -0
  26. package/lib/src/components/colorpicker/colorpicker.ts +477 -0
  27. package/lib/src/components/combobox/combobox.module.scss +121 -0
  28. package/lib/src/components/combobox/combobox.ts +190 -0
  29. package/lib/src/components/combobox/updown.svg +4 -0
  30. package/lib/src/components/dialog/dialog.module.scss +71 -0
  31. package/lib/src/components/dialog/dialog.ts +91 -0
  32. package/lib/src/components/dialog/xmark-sharp-light.svg +1 -0
  33. package/lib/src/components/form/form.module.scss +34 -0
  34. package/lib/src/components/form/form.ts +36 -0
  35. package/lib/src/components/header/header.module.scss +40 -0
  36. package/lib/src/components/header/header.ts +124 -0
  37. package/lib/src/components/icon/icon.module.scss +30 -0
  38. package/lib/src/components/icon/icon.ts +134 -0
  39. package/lib/src/components/image/image.module.scss +21 -0
  40. package/lib/src/components/image/image.ts +67 -0
  41. package/lib/src/components/input/input.module.scss +69 -0
  42. package/lib/src/components/input/input.ts +274 -0
  43. package/lib/src/components/label/label.module.scss +52 -0
  44. package/lib/src/components/label/label.ts +55 -0
  45. package/lib/src/components/listbox/listbox.module.scss +103 -0
  46. package/lib/src/components/listbox/listbox.ts +427 -0
  47. package/lib/src/components/menu/caret-right-solid.svg +1 -0
  48. package/lib/src/components/menu/menu.module.scss +108 -0
  49. package/lib/src/components/menu/menu.ts +168 -0
  50. package/lib/src/components/messages/circle-exclamation.svg +1 -0
  51. package/lib/src/components/messages/messages.module.scss +47 -0
  52. package/lib/src/components/messages/messages.ts +64 -0
  53. package/lib/src/components/normalize.scss +386 -0
  54. package/lib/src/components/notification/circle-check-solid.svg +1 -0
  55. package/lib/src/components/notification/circle-exclamation-solid.svg +1 -0
  56. package/lib/src/components/notification/circle-notch-light.svg +1 -0
  57. package/lib/src/components/notification/notification.module.scss +82 -0
  58. package/lib/src/components/notification/notification.ts +108 -0
  59. package/lib/src/components/notification/xmark-sharp-light.svg +1 -0
  60. package/lib/src/components/panel/panel.module.scss +48 -0
  61. package/lib/src/components/panel/panel.ts +57 -0
  62. package/lib/src/components/popup/popup.module.scss +43 -0
  63. package/lib/src/components/popup/popup.ts +395 -0
  64. package/lib/src/components/progress/progress.module.scss +57 -0
  65. package/lib/src/components/progress/progress.ts +43 -0
  66. package/lib/src/components/rating/rating.module.scss +23 -0
  67. package/lib/src/components/rating/rating.ts +125 -0
  68. package/lib/src/components/rating/star-sharp-light.svg +1 -0
  69. package/lib/src/components/rating/star-sharp-solid.svg +1 -0
  70. package/lib/src/components/shared.scss +76 -0
  71. package/lib/src/components/sizers/sizer.module.scss +90 -0
  72. package/lib/src/components/sizers/sizer.ts +120 -0
  73. package/lib/src/components/slider/slider.module.scss +71 -0
  74. package/lib/src/components/slider/slider.ts +143 -0
  75. package/lib/src/components/switch/switch.module.scss +127 -0
  76. package/lib/src/components/switch/switch.ts +56 -0
  77. package/lib/src/components/tabs/tabs.module.scss +46 -0
  78. package/lib/src/components/tabs/tabs.ts +157 -0
  79. package/lib/src/components/textarea/textarea.module.scss +59 -0
  80. package/lib/src/components/textarea/textarea.ts +54 -0
  81. package/lib/src/components/textedit/textedit.module.scss +114 -0
  82. package/lib/src/components/textedit/textedit.ts +82 -0
  83. package/lib/src/components/themes.scss +77 -0
  84. package/lib/src/components/tooltips/circle-info-sharp-light.svg +1 -0
  85. package/lib/src/components/tooltips/tooltips.scss +51 -0
  86. package/lib/src/components/tooltips/tooltips.ts +103 -0
  87. package/lib/src/components/treeview/chevron-down-light.svg +1 -0
  88. package/lib/src/components/treeview/treeview.module.scss +116 -0
  89. package/lib/src/components/treeview/treeview.ts +403 -0
  90. package/lib/src/components/viewport/viewport.module.scss +25 -0
  91. package/lib/src/components/viewport/viewport.ts +38 -0
  92. package/lib/src/core/component.ts +979 -0
  93. package/lib/src/core/core_colors.ts +250 -0
  94. package/lib/src/{dom_events.ts → core/core_dom.ts} +195 -39
  95. package/lib/src/{drag_manager.ts → core/core_dragdrop.ts} +29 -44
  96. package/lib/src/core/core_element.ts +98 -0
  97. package/lib/src/core/core_events.ts +149 -0
  98. package/lib/src/{i18n.ts → core/core_i18n.ts} +43 -42
  99. package/lib/src/{router.ts → core/core_router.ts} +27 -40
  100. package/lib/src/core/core_styles.ts +215 -0
  101. package/lib/src/core/core_svg.ts +550 -0
  102. package/lib/src/core/core_tools.ts +673 -0
  103. package/lib/src/demo/assets/house-light.svg +1 -0
  104. package/lib/src/demo/assets/radio.svg +4 -0
  105. package/lib/src/demo/index.html +12 -0
  106. package/lib/src/demo/main.scss +21 -0
  107. package/lib/src/demo/main.tsx +323 -0
  108. package/lib/src/main.scss +21 -0
  109. package/lib/src/main.tsx +323 -0
  110. package/lib/src/x4.scss +19 -0
  111. package/lib/src/x4.ts +60 -0
  112. package/lib/types/x4.d.ts +26548 -0
  113. package/package.json +68 -59
  114. package/scripts/build.mjs +351 -0
  115. package/scripts/prepack.mjs +43 -0
  116. package/src/components/base.scss +26 -0
  117. package/src/components/boxes/boxes.module.scss +37 -0
  118. package/src/components/boxes/boxes.ts +125 -0
  119. package/src/components/btngroup/btngroup.module.scss +29 -0
  120. package/src/components/btngroup/btngroup.ts +106 -0
  121. package/src/components/button/button.module.scss +154 -0
  122. package/src/components/button/button.ts +117 -0
  123. package/src/components/calendar/calendar-check-sharp-light.svg +1 -0
  124. package/src/components/calendar/calendar.module.scss +163 -0
  125. package/src/components/calendar/calendar.ts +326 -0
  126. package/src/components/calendar/chevron-left-sharp-light.svg +1 -0
  127. package/src/components/calendar/chevron-right-sharp-light.svg +1 -0
  128. package/src/components/checkbox/check.svg +4 -0
  129. package/src/components/checkbox/checkbox.module.scss +142 -0
  130. package/src/components/checkbox/checkbox.ts +125 -0
  131. package/src/components/colorinput/colorinput.module.scss +65 -0
  132. package/src/components/colorinput/colorinput.ts +88 -0
  133. package/src/components/colorinput/crosshairs-simple-sharp-light.svg +1 -0
  134. package/src/components/colorpicker/colorpicker.module.scss +133 -0
  135. package/src/components/colorpicker/colorpicker.ts +477 -0
  136. package/src/components/combobox/combobox.module.scss +121 -0
  137. package/src/components/combobox/combobox.ts +190 -0
  138. package/src/components/combobox/updown.svg +4 -0
  139. package/src/components/dialog/dialog.module.scss +71 -0
  140. package/src/components/dialog/dialog.ts +91 -0
  141. package/src/components/dialog/xmark-sharp-light.svg +1 -0
  142. package/src/components/form/form.module.scss +34 -0
  143. package/src/components/form/form.ts +36 -0
  144. package/src/components/header/header.module.scss +40 -0
  145. package/src/components/header/header.ts +124 -0
  146. package/src/components/icon/icon.module.scss +30 -0
  147. package/src/components/icon/icon.ts +134 -0
  148. package/src/components/image/image.module.scss +21 -0
  149. package/src/components/image/image.ts +67 -0
  150. package/src/components/input/input.module.scss +69 -0
  151. package/src/components/input/input.ts +274 -0
  152. package/src/components/label/label.module.scss +52 -0
  153. package/src/components/label/label.ts +55 -0
  154. package/src/components/listbox/listbox.module.scss +103 -0
  155. package/src/components/listbox/listbox.ts +427 -0
  156. package/src/components/menu/caret-right-solid.svg +1 -0
  157. package/src/components/menu/menu.module.scss +108 -0
  158. package/src/components/menu/menu.ts +168 -0
  159. package/src/components/messages/circle-exclamation.svg +1 -0
  160. package/src/components/messages/messages.module.scss +47 -0
  161. package/src/components/messages/messages.ts +64 -0
  162. package/src/components/normalize.scss +386 -0
  163. package/src/components/notification/circle-check-solid.svg +1 -0
  164. package/src/components/notification/circle-exclamation-solid.svg +1 -0
  165. package/src/components/notification/circle-notch-light.svg +1 -0
  166. package/src/components/notification/notification.module.scss +82 -0
  167. package/src/components/notification/notification.ts +108 -0
  168. package/src/components/notification/xmark-sharp-light.svg +1 -0
  169. package/src/components/panel/panel.module.scss +48 -0
  170. package/src/components/panel/panel.ts +57 -0
  171. package/src/components/popup/popup.module.scss +43 -0
  172. package/src/components/popup/popup.ts +395 -0
  173. package/src/components/progress/progress.module.scss +57 -0
  174. package/src/components/progress/progress.ts +43 -0
  175. package/src/components/rating/rating.module.scss +23 -0
  176. package/src/components/rating/rating.ts +125 -0
  177. package/src/components/rating/star-sharp-light.svg +1 -0
  178. package/src/components/rating/star-sharp-solid.svg +1 -0
  179. package/src/components/shared.scss +76 -0
  180. package/src/components/sizers/sizer.module.scss +90 -0
  181. package/src/components/sizers/sizer.ts +120 -0
  182. package/src/components/slider/slider.module.scss +71 -0
  183. package/src/components/slider/slider.ts +143 -0
  184. package/src/components/switch/switch.module.scss +127 -0
  185. package/src/components/switch/switch.ts +56 -0
  186. package/src/components/tabs/tabs.module.scss +46 -0
  187. package/src/components/tabs/tabs.ts +157 -0
  188. package/src/components/textarea/textarea.module.scss +59 -0
  189. package/src/components/textarea/textarea.ts +54 -0
  190. package/src/components/textedit/textedit.module.scss +114 -0
  191. package/src/components/textedit/textedit.ts +82 -0
  192. package/src/components/themes.scss +77 -0
  193. package/src/components/tooltips/circle-info-sharp-light.svg +1 -0
  194. package/src/components/tooltips/tooltips.scss +51 -0
  195. package/src/components/tooltips/tooltips.ts +103 -0
  196. package/src/components/treeview/chevron-down-light.svg +1 -0
  197. package/src/components/treeview/treeview.module.scss +116 -0
  198. package/src/components/treeview/treeview.ts +403 -0
  199. package/src/components/viewport/viewport.module.scss +25 -0
  200. package/src/components/viewport/viewport.ts +38 -0
  201. package/src/core/component.ts +979 -0
  202. package/src/core/core_colors.ts +250 -0
  203. package/src/core/core_dom.ts +471 -0
  204. package/src/core/core_dragdrop.ts +201 -0
  205. package/src/core/core_element.ts +98 -0
  206. package/src/core/core_events.ts +149 -0
  207. package/src/core/core_i18n.ts +377 -0
  208. package/src/core/core_router.ts +221 -0
  209. package/src/core/core_styles.ts +215 -0
  210. package/src/core/core_svg.ts +550 -0
  211. package/src/core/core_tools.ts +673 -0
  212. package/src/demo/assets/house-light.svg +1 -0
  213. package/src/demo/assets/radio.svg +4 -0
  214. package/src/demo/index.html +12 -0
  215. package/src/demo/main.scss +21 -0
  216. package/src/demo/main.tsx +323 -0
  217. package/src/x4.scss +19 -0
  218. package/src/x4.ts +60 -0
  219. package/tsconfig.json +14 -0
  220. package/types/scss.d.ts +4 -0
  221. package/types/svg.d.ts +4 -0
  222. package/types/x4react.d.ts +9 -0
  223. package/lib/changelog.txt +0 -23
  224. package/lib/cjs/x4js.js +0 -39
  225. package/lib/cjs/x4js.js.map +0 -7
  226. package/lib/esm/x4js.mjs +0 -15972
  227. package/lib/esm/x4js.mjs.map +0 -7
  228. package/lib/licence.md +0 -21
  229. package/lib/src/MIT-license.md +0 -14
  230. package/lib/src/action.ts +0 -88
  231. package/lib/src/alpha.jpg +0 -0
  232. package/lib/src/app_sockets.ts +0 -81
  233. package/lib/src/application.ts +0 -262
  234. package/lib/src/autocomplete.ts +0 -232
  235. package/lib/src/base64.ts +0 -166
  236. package/lib/src/base_component.ts +0 -152
  237. package/lib/src/button.ts +0 -355
  238. package/lib/src/canvas.ts +0 -510
  239. package/lib/src/cardview.ts +0 -228
  240. package/lib/src/checkbox.ts +0 -188
  241. package/lib/src/color.ts +0 -752
  242. package/lib/src/colorpicker.ts +0 -1649
  243. package/lib/src/combobox.ts +0 -512
  244. package/lib/src/component.ts +0 -2367
  245. package/lib/src/copyright.txt +0 -27
  246. package/lib/src/datastore.ts +0 -1302
  247. package/lib/src/dialog.ts +0 -656
  248. package/lib/src/drawtext.ts +0 -355
  249. package/lib/src/fileupload.ts +0 -213
  250. package/lib/src/form.ts +0 -413
  251. package/lib/src/formatters.ts +0 -105
  252. package/lib/src/gridview.ts +0 -1185
  253. package/lib/src/icon.ts +0 -362
  254. package/lib/src/image.ts +0 -225
  255. package/lib/src/index.ts +0 -89
  256. package/lib/src/input.ts +0 -297
  257. package/lib/src/label.ts +0 -153
  258. package/lib/src/layout.ts +0 -442
  259. package/lib/src/link.ts +0 -86
  260. package/lib/src/listview.ts +0 -765
  261. package/lib/src/md5.ts +0 -438
  262. package/lib/src/menu.ts +0 -425
  263. package/lib/src/messagebox.ts +0 -224
  264. package/lib/src/panel.ts +0 -86
  265. package/lib/src/popup.ts +0 -494
  266. package/lib/src/property_editor.ts +0 -337
  267. package/lib/src/radiobtn.ts +0 -197
  268. package/lib/src/rating.ts +0 -135
  269. package/lib/src/request.ts +0 -300
  270. package/lib/src/settings.ts +0 -77
  271. package/lib/src/sidebarview.ts +0 -108
  272. package/lib/src/spreadsheet.ts +0 -1449
  273. package/lib/src/styles.ts +0 -343
  274. package/lib/src/svgcomponent.ts +0 -592
  275. package/lib/src/tabbar.ts +0 -151
  276. package/lib/src/tabview.ts +0 -110
  277. package/lib/src/textarea.ts +0 -235
  278. package/lib/src/textedit.ts +0 -533
  279. package/lib/src/toaster.ts +0 -80
  280. package/lib/src/tools.ts +0 -1473
  281. package/lib/src/tooltips.ts +0 -191
  282. package/lib/src/treeview.ts +0 -716
  283. package/lib/src/version.ts +0 -30
  284. package/lib/src/x4.less +0 -2242
  285. package/lib/src/x4dom.ts +0 -57
  286. package/lib/src/x4events.ts +0 -585
  287. package/lib/src/x4js.ts +0 -89
  288. package/lib/src/x4react.ts +0 -90
  289. package/lib/styles/x4.css +0 -1785
  290. package/lib/styles/x4.less +0 -2242
  291. package/lib/types/x4js.d.ts +0 -6728
  292. package/license.md +0 -21
package/lib/src/color.ts DELETED
@@ -1,752 +0,0 @@
1
- /**
2
- * ___ ___ __
3
- * \ \/ / / _
4
- * \ / /_| |_
5
- * / \____ _|
6
- * /__/\__\ |_|
7
- *
8
- * @file color.ts
9
- * @author Etienne Cochard
10
- *
11
- * Copyright (c) 2019-2023 R-libre ingenierie
12
- *
13
- * Permission is hereby granted, free of charge, to any person obtaining a copy
14
- * of this software and associated documentation files (the "Software"), to deal
15
- * in the Software without restriction, including without limitation the rights
16
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
17
- * of the Software, and to permit persons to whom the Software is furnished to do so,
18
- * subject to the following conditions:
19
- * The above copyright notice and this permission notice shall be included in all copies
20
- * or substantial portions of the Software.
21
- *
22
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
23
- * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
24
- * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
25
- * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
26
- * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
27
- * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
28
- **/
29
-
30
- import { Stylesheet } from './styles'
31
-
32
-
33
- const colorValues: any = {
34
- 'lightsalmon': 0xFFFFA07A,
35
- 'lightseagreen': 0xFF20B2AA,
36
- 'lightskyblue': 0xFF87CEFA,
37
- 'lightslategray': 0xFF778899,
38
- 'lightsteelblue': 0xFFB0C4DE,
39
- 'lightyellow': 0xFFFFFFE0,
40
- 'lime': 0xFF00FF00,
41
- 'limegreen': 0xFF32CD32,
42
- 'linen': 0xFFFAF0E6,
43
- 'magenta': 0xFFFF00FF,
44
- 'maroon': 0xFF800000,
45
- 'mediumaquamarine': 0xFF66CDAA,
46
- 'mediumblue': 0xFF0000CD,
47
- 'mediumorchid': 0xFFBA55D3,
48
- 'mediumpurple': 0xFF9370DB,
49
- 'mediumseagreen': 0xFF3CB371,
50
- 'mediumslateblue': 0xFF7B68EE,
51
- 'mediumspringgreen': 0xFF00FA9A,
52
- 'mediumturquoise': 0xFF48D1CC,
53
- 'mediumvioletred': 0xFFC71585,
54
- 'midnightblue': 0xFF191970,
55
- 'mintcream': 0xFFF5FFFA,
56
- 'mistyrose': 0xFFFFE4E1,
57
- 'moccasin': 0xFFFFE4B5,
58
- 'navajowhite': 0xFFFFDEAD,
59
- 'navy': 0xFF000080,
60
- 'oldlace': 0xFFFDF5E6,
61
- 'olive': 0xFF808000,
62
- 'olivedrab': 0xFF6B8E23,
63
- 'orange': 0xFFFFA500,
64
- 'orangered': 0xFFFF4500,
65
- 'orchid': 0xFFDA70D6,
66
- 'palegoldenrod': 0xFFEEE8AA,
67
- 'palegreen': 0xFF98FB98,
68
- 'paleturquoise': 0xFFAFEEEE,
69
- 'palevioletred': 0xFFDB7093,
70
- 'papayawhip': 0xFFFFEFD5,
71
- 'peachpuff': 0xFFFFDAB9,
72
- 'peru': 0xFFCD853F,
73
- 'pink': 0xFFFFC0CB,
74
- 'plum': 0xFFDDA0DD,
75
- 'powderblue': 0xFFB0E0E6,
76
- 'purple': 0xFF800080,
77
- 'red': 0xFFFF0000,
78
- 'rosybrown': 0xFFBC8F8F,
79
- 'royalblue': 0xFF4169E1,
80
- 'saddlebrown': 0xFF8B4513,
81
- 'salmon': 0xFFFA8072,
82
- 'sandybrown': 0xFFFAA460,
83
- 'seagreen': 0xFF2E8B57,
84
- 'seashell': 0xFFFFF5EE,
85
- 'sienna': 0xFFA0522D,
86
- 'silver': 0xFFC0C0C0,
87
- 'skyblue': 0xFF87CEEB,
88
- 'slateblue': 0xFF6A5ACD,
89
- 'slategray': 0xFF708090,
90
- 'snow': 0xFFFFFAFA,
91
- 'springgreen': 0xFF00FF7F,
92
- 'steelblue': 0xFF4682B4,
93
- 'tan': 0xFFD2B48C,
94
- 'teal': 0xFF008080,
95
- 'thistle': 0xFFD8BFD8,
96
- 'tomato': 0xFFFF6347,
97
- 'turquoise': 0xFF40E0D0,
98
- 'violet': 0xFFEE82EE,
99
- 'wheat': 0xFFF5DEB3,
100
- 'white': 0xFFFFFFFF,
101
- 'whitesmoke': 0xFFF5F5F5,
102
- 'yellow': 0xFFFFFF00,
103
- 'yellowgreen': 0xFF9ACD32,
104
- 'aliceblue': 0xFFF0F8FF,
105
- 'antiquewhite': 0xFFFAEBD7,
106
- 'aqua': 0xFF00FFFF,
107
- 'aquamarine': 0xFF7FFFD4,
108
- 'azure': 0xFFF0FFFF,
109
- 'beige': 0xFFF5F5DC,
110
- 'bisque': 0xFFFFE4C4,
111
- 'black': 0xFF000000,
112
- 'blanchedalmond': 0xFFFFEBCD,
113
- 'blue': 0xFF0000FF,
114
- 'blueviolet': 0xFF8A2BE2,
115
- 'brown': 0xFFA52A2A,
116
- 'burlywood': 0xFFDEB887,
117
- 'cadetblue': 0xFF5F9EA0,
118
- 'chartreuse': 0xFF7FFF00,
119
- 'chocolate': 0xFFD2691E,
120
- 'coral': 0xFFFF7F50,
121
- 'cornflowerblue': 0xFF6495ED,
122
- 'cornsilk': 0xFFFFF8DC,
123
- 'crimson': 0xFFDC143C,
124
- 'cyan': 0xFF00FFFF,
125
- 'darkblue': 0xFF00008B,
126
- 'darkcyan': 0xFF008B8B,
127
- 'darkgoldenrod': 0xFFB8860B,
128
- 'darkgray': 0xFFA9A9A9,
129
- 'darkgreen': 0xFF006400,
130
- 'darkkhaki': 0xFFBDB76B,
131
- 'darkmagenta': 0xFF8B008B,
132
- 'darkolivegreen': 0xFF556B2F,
133
- 'darkorange': 0xFFFF8C00,
134
- 'darkorchid': 0xFF9932CC,
135
- 'darkred': 0xFF8B0000,
136
- 'darksalmon': 0xFFE9967A,
137
- 'darkseagreen': 0xFF8FBC8F,
138
- 'darkslateblue': 0xFF483D8B,
139
- 'darkslategray': 0xFF2F4F4F,
140
- 'darkturquoise': 0xFF00CED1,
141
- 'darkviolet': 0xFF9400D3,
142
- 'deeppink': 0xFFFF1493,
143
- 'deepskyblue': 0xFF00BFFF,
144
- 'dimgray': 0xFF696969,
145
- 'dodgerblue': 0xFF1E90FF,
146
- 'firebrick': 0xFFB22222,
147
- 'floralwhite': 0xFFFFFAF0,
148
- 'forestgreen': 0xFF228B22,
149
- 'fuchsia': 0xFFFF00FF,
150
- 'gainsboro': 0xFFDCDCDC,
151
- 'ghostwhite': 0xFFF8F8FF,
152
- 'gold': 0xFFFFD700,
153
- 'goldenrod': 0xFFDAA520,
154
- 'gray': 0xFF808080,
155
- 'green': 0xFF008000,
156
- 'greenyellow': 0xFFADFF2F,
157
- 'honeydew': 0xFFF0FFF0,
158
- 'hotpink': 0xFFFF69B4,
159
- 'indianred': 0xFFCD5C5C,
160
- 'indigo': 0xFF4B0082,
161
- 'ivory': 0xFFFFFFF0,
162
- 'khaki': 0xFFF0E68C,
163
- 'lavender': 0xFFE6E6FA,
164
- 'lavenderblush': 0xFFFFF0F5,
165
- 'lawngreen': 0xFF7CFC00,
166
- 'lemonchiffon': 0xFFFFFACD,
167
- 'lightblue': 0xFFADD8E6,
168
- 'lightcoral': 0xFFF08080,
169
- 'lightcyan': 0xFFE0FFFF,
170
- 'lightgoldenrodyellow': 0xFFFAFAD2,
171
- 'lightgreen': 0xFF90EE90,
172
- 'lightgrey': 0xFFD3D3D3,
173
- 'lightpink': 0xFFFFB6C1,
174
- 'none': 0,
175
- 'transparent': 0,
176
- }
177
-
178
-
179
-
180
- export class Color
181
- {
182
- private m_value:number;
183
- private static custom: Record<string,Color> = {};
184
-
185
- /**
186
- * @example
187
- * ```ts
188
- * let c = new Color( 255, 255, 255, 0.2 );
189
- * let d = new Color( "fff" );
190
- * let e = new Color( "css:selection-color" );
191
- * let f = new Color( "rgba(255,0,255,0.6)" );
192
- * ```
193
- */
194
-
195
- constructor( );
196
- constructor( value: number | string );
197
- constructor( value: number | string, alpha: number );
198
- constructor( r: number, g: number, b: number );
199
- constructor( r: number, g: number, b: number, a: number );
200
- constructor( r?: any, g?: any, b?: any, a?: any ) {
201
-
202
- let argc = arguments.length;
203
- let self = this;
204
-
205
- function _init( ) {
206
-
207
- if( !argc ) {
208
- return 0xff000000;
209
- }
210
-
211
- if( argc==1 ) {
212
-
213
- if( Number.isSafeInteger(r) ) {
214
- return 0xff000000|(r&0xffffff);
215
- }
216
-
217
- return self._getCustomColor( r )
218
- }
219
- else if( argc==2 ) {
220
-
221
- let base,
222
- alpha = (((g*255)|0)&0xff)<<24;
223
-
224
- if( Number.isSafeInteger(r) ) {
225
- base = r;
226
- }
227
- else {
228
- base = self._getCustomColor( r );
229
- }
230
-
231
- return (base&0xffffff) | alpha;
232
- }
233
- else if( argc==4 && a!==undefined && a<=1.0 ) {
234
-
235
- if( a<=0 ) {
236
- return 0;
237
- }
238
-
239
- a = a*255;
240
- a |= 0; // convert to int
241
-
242
- return ((a&0xff)<<24) | ((r&0xff)<<16) | ((g&0xff)<<8) | (b&0xff);
243
- }
244
-
245
- return 0xff000000 | ((r&0xff)<<16) | ((g&0xff)<<8) | (b&0xff);
246
- }
247
-
248
- this.m_value = _init( );
249
- }
250
-
251
- /**
252
- *
253
- */
254
-
255
- private _shade( percent: number ) {
256
- let t = percent < 0 ? 0 : 255,
257
- p = percent < 0 ? -percent : percent;
258
-
259
- let v = this._split( );
260
-
261
- return new Color(
262
- Math.round( (t-v.r) * p ) + v.r,
263
- Math.round( (t-v.g) * p ) + v.g,
264
- Math.round( (t-v.b) * p ) + v.b,
265
- v.a / 255
266
- );
267
- }
268
-
269
- /**
270
- * return a color darken by percent
271
- * @param percent
272
- */
273
-
274
- darken( percent: number ) {
275
-
276
- if( percent<0 ) percent = 0;
277
- if( percent>100 ) percent = 100;
278
-
279
- return this._shade( -percent/100 );
280
- }
281
-
282
- /**
283
- * return a color lighten by percent
284
- * @param percent
285
- */
286
- lighten( percent: number ) {
287
-
288
- if( percent<0 ) percent = 0;
289
- if( percent>100 ) percent = 100;
290
-
291
- return this._shade( percent/100 );
292
- }
293
-
294
- /**
295
- * mix 2 colors
296
- * @param {rgb} c1 - color 1
297
- * @param {rgb} c2 - color 2
298
- * @param {float} percent - 0.0 to 1.0
299
- * @example
300
- * ```js
301
- * let clr = Color.mix( color1, color2, 0.5 );
302
- * ```
303
- */
304
-
305
- static mix( c1: Color, c2: Color, p: number ) {
306
-
307
- let e1 = c1._split( ),
308
- e2 = c2._split( );
309
-
310
- let A = e1.a===e2.a ? e1.a : Math.round( e2.a*p + e1.a*(1-p) ),
311
- R = e1.r===e2.r ? e1.r : Math.round( e2.r*p + e1.r*(1-p) ),
312
- G = e1.g===e2.g ? e1.g : Math.round( e2.g*p + e1.g*(1-p) ),
313
- B = e1.b===e2.b ? e1.b : Math.round( e2.b*p + e1.b*(1-p) );
314
-
315
- return new Color( R, G, B, A/255 );
316
- }
317
-
318
- /**
319
- * split the color into it's base element r,g,b & a (!a 1-255)
320
- */
321
- private _split( ) {
322
- let f = this.m_value;
323
-
324
- return {
325
- a: (f >> 24) & 0xff,
326
- r: (f >> 16) & 0xff,
327
- g: (f >> 8) & 0xff,
328
- b: (f & 0xff)
329
- };
330
- }
331
-
332
- /**
333
- * change the alpha value
334
- */
335
-
336
- fadeout( percent: number ) {
337
- let el = this._split();
338
- el.a = el.a / 255;
339
-
340
- el.a = el.a - el.a * percent / 100.0;
341
- if( el.a>1.0 ) {
342
- el.a = 1.0;
343
- }
344
- else if( el.a<=0.0 ) {
345
- return Color.NONE;
346
- }
347
-
348
- return new Color( el.r, el.g, el.b, el.a );
349
- }
350
-
351
- /**
352
- *
353
- */
354
-
355
- public static fromHSV( h: number, s: number, v: number, a = 1 ) {
356
-
357
- let i = Math.min(5, Math.floor(h * 6)),
358
- f = h * 6 - i,
359
- p = v * (1 - s),
360
- q = v * (1 - f * s),
361
- t = v * (1 - (1 - f) * s);
362
-
363
- let R, G, B;
364
-
365
- switch (i) {
366
- case 0:
367
- R = v;
368
- G = t;
369
- B = p;
370
- break;
371
- case 1:
372
- R = q;
373
- G = v;
374
- B = p;
375
- break;
376
- case 2:
377
- R = p;
378
- G = v;
379
- B = t;
380
- break;
381
- case 3:
382
- R = p;
383
- G = q;
384
- B = v;
385
- break;
386
- case 4:
387
- R = t;
388
- G = p;
389
- B = v;
390
- break;
391
- case 5:
392
- R = v;
393
- G = p;
394
- B = q;
395
- break;
396
- }
397
-
398
- return new Color( R*255, G*255, B*255, a );
399
- }
400
-
401
- /**
402
- *
403
- */
404
-
405
- public static toHSV( c: Color ) {
406
- let el = c._split();
407
-
408
- el.r /= 255.0;
409
- el.g /= 255.0;
410
- el.b /= 255.0;
411
- el.a /= 255.0;
412
-
413
- let max = Math.max(el.r, el.g, el.b),
414
- min = Math.min(el.r, el.g, el.b),
415
- delta = max - min,
416
- saturation = (max === 0) ? 0 : (delta / max),
417
- value = max;
418
-
419
- let hue;
420
-
421
- if (delta === 0) {
422
- hue = 0;
423
- }
424
- else {
425
- switch (max) {
426
- case el.r:
427
- hue = (el.g - el.b) / delta / 6 + (el.g < el.b ? 1 : 0);
428
- break;
429
-
430
- case el.g:
431
- hue = (el.b - el.r) / delta / 6 + 1 / 3;
432
- break;
433
-
434
- case el.b:
435
- hue = (el.r - el.g) / delta / 6 + 2 / 3;
436
- break;
437
- }
438
- }
439
-
440
- return { h: hue, s: saturation, v: value, a: el.a };
441
- }
442
-
443
- /**
444
- *
445
- */
446
-
447
- public static fromHLS( h: number, l: number, s: number ) {
448
-
449
- let r, g, b;
450
- if( s == 0 ){
451
- r = g = b = l; // achromatic
452
- }
453
- else{
454
- function hue2rgb(p: number, q: number, t: number){
455
- if(t < 0) t += 1.0;
456
- if(t > 1) t -= 1.0;
457
- if(t < 1/6) return p + (q - p) * 6 * t;
458
- if(t < 1/2) return q;
459
- if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
460
- return p;
461
- }
462
-
463
- let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
464
- let p = 2 * l - q;
465
-
466
- r = hue2rgb(p, q, h + 1/3);
467
- g = hue2rgb(p, q, h);
468
- b = hue2rgb(p, q, h - 1/3);
469
- }
470
-
471
- r = ((r*255) | 0) & 0xff;
472
- g = ((g*255) | 0) & 0xff;
473
- b = ((b*255) | 0) & 0xff;
474
-
475
- return new Color( r, g, b );
476
- }
477
-
478
- /**
479
- *
480
- */
481
-
482
- public static toHLS( color: Color ) {
483
-
484
- let f = color.m_value,
485
- r = ((f >> 16) & 0xff) / 255,
486
- g = ((f >> 8) & 0xff) / 255,
487
- b = (f & 0xff) / 255;
488
-
489
- let minval = r,
490
- maxval = r;
491
-
492
- if (g < minval) {
493
- minval = g;
494
- }
495
-
496
- if (b < minval) {
497
- minval = b;
498
- }
499
-
500
- if (g > maxval) {
501
- maxval = g;
502
- }
503
-
504
- if (b > maxval) {
505
- maxval = b;
506
- }
507
-
508
- let rnorm = 0,
509
- gnorm = 0,
510
- bnorm = 0;
511
-
512
- let mdiff = maxval - minval;
513
- let msum = maxval + minval;
514
- let light = 0.5 * msum;
515
- let satur, hue;
516
-
517
- if (maxval != minval) {
518
- rnorm = (maxval - r)/mdiff;
519
- gnorm = (maxval - g)/mdiff;
520
- bnorm = (maxval - b)/mdiff;
521
- }
522
- else {
523
- return { h: 0, l: light, s: 0 };
524
- }
525
-
526
- if( light < 0.5 ) {
527
- satur = mdiff/msum;
528
- }
529
- else {
530
- satur = mdiff/(2.0 - msum);
531
- }
532
-
533
- if (r == maxval) {
534
- hue = 60.0 * (6.0 + bnorm - gnorm);
535
- }
536
- else if (g == maxval) {
537
- hue = 60.0 * (2.0 + rnorm - bnorm);
538
- }
539
- else {
540
- hue = 60.0 * (4.0 + gnorm - rnorm);
541
- }
542
-
543
- if (hue > 360) {
544
- hue = hue - 360;
545
- }
546
-
547
- return { h: hue/360.0, l: light, s: satur };
548
- }
549
-
550
- /**
551
- * get the red value of the color
552
- */
553
-
554
- red( ) {
555
- return (this.m_value >> 16) & 0xff;
556
- }
557
-
558
- /**
559
- * get the green value of the color
560
- */
561
-
562
- green( ) {
563
- return (this.m_value >> 8) & 0xff;
564
- }
565
-
566
- /**
567
- * get the blue value of the color
568
- */
569
-
570
- blue( ) {
571
- return this.m_value & 0xff;
572
- }
573
-
574
- /**
575
- * get the alpha value of the color
576
- */
577
-
578
- alpha( ) {
579
- return ( (this.m_value >> 24) & 0xff ) / 255;
580
- }
581
-
582
- /**
583
- *
584
- */
585
-
586
- value( ) {
587
- return this.m_value;
588
- }
589
-
590
- /**
591
- * convert the color into string value
592
- */
593
-
594
- toString( ) {
595
-
596
- let color = this.m_value;
597
- if( color===0 ) {
598
- return 'transparent';
599
- }
600
-
601
- let el = this._split( );
602
-
603
- if( el.a===0xff ) {
604
- return `rgb(${el.r},${el.g},${el.b})`;
605
- }
606
- else {
607
- el.a /= 255;
608
- let alpha = el.a.toFixed( 3 );
609
- return `rgba(${el.r},${el.g},${el.b},${alpha})`;
610
- }
611
- }
612
-
613
- toHex( with_alpha = true ) {
614
- let color = this.m_value;
615
- if( color===0 ) {
616
- return 'transparent';
617
- }
618
-
619
- let el = this._split( );
620
-
621
- if( el.a===0xff || !with_alpha ) {
622
- return `#${_hx(el.r)}${_hx(el.g)}${_hx(el.b)}`;
623
- }
624
- else {
625
- return `#${_hx(el.r)}${_hx(el.g)}${_hx(el.b)}${_hx(el.a)}`;
626
- }
627
- }
628
-
629
- public static addCustomColor( name: string, value: Color ) {
630
- Color.custom[name] = value;
631
- }
632
-
633
- public static addCssColor( name: string ) {
634
- let c = Stylesheet.getVar( name );
635
- Color.custom['css:'+name] = Color.parse( c.trim() );
636
- }
637
-
638
- public static parse( str: string ) : Color {
639
- let m;
640
-
641
- if( str[0]=='#' ) {
642
- const re1 = /#(?<r>[a-fA-F0-9]{2})(?<g>[a-fA-F0-9]{2})(?<b>[a-fA-F0-9]{2})(?<a>[a-fA-F0-9]{2})?/;
643
- if( (m=re1.exec(str))!==null ) {
644
- let g = m.groups;
645
- return new Color( parseInt(g.r,16), parseInt(g.g,16), parseInt(g.b,16), g.a!==undefined ? parseInt(g.a,16)/255.0 : 1.0 );
646
- }
647
-
648
- const re4 = /#(?<r>[a-fA-F0-9])(?<g>[a-fA-F0-9])(?<b>[a-fA-F0-9])/;
649
- if( (m=re4.exec(str))!==null ) {
650
- let gr = m.groups;
651
- const r = parseInt(gr.r,16);
652
- const g = parseInt(gr.g,16);
653
- const b = parseInt(gr.b,16);
654
-
655
- return new Color( r<<4|r, g<<4|g, b<<4|b, 1.0 );
656
- }
657
- }
658
-
659
- if( str[0]=='r' ) {
660
- const re2 = /rgb\(\s*(?<r>\d+)\s*\,\s*(?<g>\d+)\s*\,\s*(?<b>\d+)\s*\)/;
661
- if( (m=re2.exec(str))!==null ) {
662
- let g = m.groups;
663
- return new Color( parseInt(g.r,10), parseInt(g.g,10), parseInt(g.b,10), 1.0 );
664
- }
665
-
666
- const re3 = /rgba\(\s*(?<r>\d+)\s*\,\s*(?<g>\d+)\s*\,\s*(?<b>\d+)\s*\,\s*(?<a>[0-9.]+)\s*\)/;
667
- if( (m=re3.exec(str))!==null ) {
668
- let g = m.groups;
669
- return new Color( parseInt(g.r,10), parseInt(g.g,10), parseInt(g.b,10), parseFloat(g.a) );
670
- }
671
- }
672
-
673
-
674
- console.log( "invalid color value: "+str );
675
- return new Color(0);
676
- }
677
-
678
- private _getCustomColor( name: string ) : number {
679
-
680
- if( name===null ) {
681
- return 0;
682
- }
683
-
684
- let std = colorValues[name];
685
- if( std!==undefined ) {
686
- return std;
687
- }
688
-
689
- if( Color.custom[name]!==undefined ) {
690
- return Color.custom[name].m_value;
691
- }
692
-
693
- if( name.substr(0,4)=='css:' ) {
694
- Color.addCssColor( name.substr(4) );
695
- return Color.custom[name].m_value;
696
- }
697
-
698
- return Color.parse( name ).m_value;
699
- }
700
-
701
-
702
- public static contrastColor( color: Color ) : Color {
703
- let el = color._split( );
704
-
705
- // Calculate the perceptive luminance (aka luma) - human eye favors green color...
706
- let luma = ((0.299 * el.r ) + (0.587 * el.g ) + (0.114 * el.b)) / 255;
707
-
708
- // Return black for bright colors, white for dark colors
709
- return luma > 0.5 ? Color.BLACK : Color.WHITE;
710
- }
711
-
712
- /**
713
- *
714
- */
715
-
716
- public static WHITE = new Color(255,255,255);
717
-
718
- /**
719
- *
720
- */
721
-
722
- public static BLACK = new Color(0,0,0);
723
-
724
- /**
725
- *
726
- */
727
-
728
- public static NONE = new Color(0,0,0,0);
729
-
730
- static valueFromColorName( name: string ): Color {
731
-
732
- let v = colorValues[name];
733
-
734
- if( v ) {
735
- return new Color( v );
736
- }
737
- else {
738
- return null;
739
- }
740
-
741
- }
742
-
743
- static fromCssVar( varName: string ) {
744
- return new Color( varName ).toString();
745
- }
746
- }
747
-
748
-
749
- function _hx( n: number ) {
750
- return ('00'+n.toString(16)).substr(-2).toUpperCase();
751
- }
752
-