Skip to content

Commit 274a631

Browse files
committed
颜色选择器完整实现
1 parent 5fb638c commit 274a631

File tree

5 files changed

+175
-6
lines changed

5 files changed

+175
-6
lines changed

src/editor/data.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ watch(fnType, (newFnType) => {
173173
}
174174
.plot-data.hidden {
175175
opacity: 0.6;
176-
filter: contrast(0.6) saturate(0.8);
176+
filter: saturate(0.8);
177177
}
178178
.datumFolder {
179179
border-bottom: var(--s-color-outline-variant) 1px solid;

src/editor/inputs/inputs.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
padding: 0 15px;
3535
.fields {
3636
display: grid;
37-
grid-template-columns: max-content minmax(auto, 15em);
37+
grid-template-columns: max-content minmax(auto, 20em);
3838
justify-content: space-between;
3939
align-items: center;
4040
gap: var(--input-inner-gap);

src/editor/inputs/linear.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<div class="input-inner-optional">
1010
<div class="fields">
1111
<span class="label">
12-
颜色 <HelpIcon> 鼠标经过时标出的点及其坐标 </HelpIcon>
12+
颜色 <HelpIcon> 支持颜色名称 / RGB(A) / HEX </HelpIcon>
1313
</span>
1414
<ColorPicker v-model="self.color" />
1515
<span class="label">采样数</span>
Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
export function nameToHex(name: string) {
2+
const hex = colorNames[name.toLowerCase() as keyof typeof colorNames];
3+
if (hex) return hex;
4+
return undefined;
5+
}
6+
7+
const colorNames = {
8+
aliceblue: "#f0f8ff",
9+
antiquewhite: "#faebd7",
10+
aqua: "#00ffff",
11+
aquamarine: "#7fffd4",
12+
azure: "#f0ffff",
13+
beige: "#f5f5dc",
14+
bisque: "#ffe4c4",
15+
black: "#000000",
16+
blanchedalmond: "#ffebcd",
17+
blue: "#0000ff",
18+
blueviolet: "#8a2be2",
19+
brown: "#a52a2a",
20+
burlywood: "#deb887",
21+
cadetblue: "#5f9ea0",
22+
chartreuse: "#7fff00",
23+
chocolate: "#d2691e",
24+
coral: "#ff7f50",
25+
cornflowerblue: "#6495ed",
26+
cornsilk: "#fff8dc",
27+
crimson: "#dc143c",
28+
cyan: "#00ffff",
29+
darkblue: "#00008b",
30+
darkcyan: "#008b8b",
31+
darkgoldenrod: "#b8860b",
32+
darkgray: "#a9a9a9",
33+
darkgreen: "#006400",
34+
darkkhaki: "#bdb76b",
35+
darkmagenta: "#8b008b",
36+
darkolivegreen: "#556b2f",
37+
darkorange: "#ff8c00",
38+
darkorchid: "#9932cc",
39+
darkred: "#8b0000",
40+
darksalmon: "#e9967a",
41+
darkseagreen: "#8fbc8f",
42+
darkslateblue: "#483d8b",
43+
darkslategray: "#2f4f4f",
44+
darkturquoise: "#00ced1",
45+
darkviolet: "#9400d3",
46+
deeppink: "#ff1493",
47+
deepskyblue: "#00bfff",
48+
dimgray: "#696969",
49+
dodgerblue: "#1e90ff",
50+
firebrick: "#b22222",
51+
floralwhite: "#fffaf0",
52+
forestgreen: "#228b22",
53+
fuchsia: "#ff00ff",
54+
gainsboro: "#dcdcdc",
55+
ghostwhite: "#f8f8ff",
56+
gold: "#ffd700",
57+
goldenrod: "#daa520",
58+
gray: "#808080",
59+
green: "#008000",
60+
greenyellow: "#adff2f",
61+
honeydew: "#f0fff0",
62+
hotpink: "#ff69b4",
63+
indianred: "#cd5c5c",
64+
indigo: "#4b0082",
65+
ivory: "#fffff0",
66+
khaki: "#f0e68c",
67+
lavender: "#e6e6fa",
68+
lavenderblush: "#fff0f5",
69+
lawngreen: "#7cfc00",
70+
lemonchiffon: "#fffacd",
71+
lightblue: "#add8e6",
72+
lightcoral: "#f08080",
73+
lightcyan: "#e0ffff",
74+
lightgoldenrodyellow: "#fafad2",
75+
lightgray: "#d3d3d3",
76+
lightgreen: "#90ee90",
77+
lightpink: "#ffb6c1",
78+
lightsalmon: "#ffa07a",
79+
lightseagreen: "#20b2aa",
80+
lightskyblue: "#87cefa",
81+
lightslategray: "#778899",
82+
lightsteelblue: "#b0c4de",
83+
lightyellow: "#ffffe0",
84+
lime: "#00ff00",
85+
limegreen: "#32cd32",
86+
linen: "#faf0e6",
87+
magenta: "#ff00ff",
88+
maroon: "#800000",
89+
mediumaquamarine: "#66cdaa",
90+
mediumblue: "#0000cd",
91+
mediumorchid: "#ba55d3",
92+
mediumpurple: "#9370db",
93+
mediumseagreen: "#3cb371",
94+
mediumslateblue: "#7b68ee",
95+
mediumspringgreen: "#00fa9a",
96+
mediumturquoise: "#48d1cc",
97+
mediumvioletred: "#c71585",
98+
midnightblue: "#191970",
99+
mintcream: "#f5fffa",
100+
mistyrose: "#ffe4e1",
101+
moccasin: "#ffe4b5",
102+
navajowhite: "#ffdead",
103+
navy: "#000080",
104+
oldlace: "#fdf5e6",
105+
olive: "#808000",
106+
olivedrab: "#6b8e23",
107+
orange: "#ffa500",
108+
orangered: "#ff4500",
109+
orchid: "#da70d6",
110+
palegoldenrod: "#eee8aa",
111+
palegreen: "#98fb98",
112+
paleturquoise: "#afeeee",
113+
palevioletred: "#db7093",
114+
papayawhip: "#ffefd5",
115+
peachpuff: "#ffdab9",
116+
peru: "#cd853f",
117+
pink: "#ffc0cb",
118+
plum: "#dda0dd",
119+
powderblue: "#b0e0e6",
120+
purple: "#800080",
121+
red: "#ff0000",
122+
rosybrown: "#bc8f8f",
123+
royalblue: "#4169e1",
124+
saddlebrown: "#8b4513",
125+
salmon: "#fa8072",
126+
sandybrown: "#f4a460",
127+
seagreen: "#2e8b57",
128+
seashell: "#fff5ee",
129+
sienna: "#a0522d",
130+
silver: "#c0c0c0",
131+
skyblue: "#87ceeb",
132+
slateblue: "#6a5acd",
133+
slategray: "#708090",
134+
snow: "#fffafa",
135+
springgreen: "#00ff7f",
136+
steelblue: "#4682b4",
137+
tan: "#d2b48c",
138+
teal: "#008080",
139+
thistle: "#d8bfd8",
140+
tomato: "#ff6347",
141+
turquoise: "#40e0d0",
142+
violet: "#ee82ee",
143+
wheat: "#f5deb3",
144+
white: "#ffffff",
145+
whitesmoke: "#f5f5f5",
146+
yellow: "#ffff00",
147+
yellowgreen: "#9acd32",
148+
} as const;

src/editor/inputs/subblocks/colorPicker.vue

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,27 @@
11
<template>
2-
<s-text-field class="input monospace" label="颜色" v-model="color">
3-
<s-popup slot="end" align="right">
2+
<s-text-field class="input monospace" label="颜色" v-model.trim="color">
3+
<s-popup slot="end" align="right" ref="popup" @show="pickerKey = Symbol()">
44
<s-icon-button
55
slot="trigger"
66
class="colorpicker-button"
77
:style="{ color }"
88
>
99
<SIconPalette />
1010
</s-icon-button>
11-
<ColorPicker :color="color" sucker-hide @changeColor="changeColor" />
11+
<ColorPicker
12+
:color="processedColor"
13+
sucker-hide
14+
@changeColor="changeColor"
15+
:key="pickerKey"
16+
/>
1217
</s-popup>
1318
</s-text-field>
1419
</template>
1520

1621
<script lang="ts" setup>
22+
import { nameToHex } from "./coloUtils";
1723
import SIconPalette from "@/ui/icons/palette.vue";
24+
import { computed, ref } from "vue";
1825
import { ColorPicker } from "vue-color-kit";
1926
2027
const color = defineModel<string>({ required: true });
@@ -25,7 +32,19 @@ interface ColorPickerArgs {
2532
hsv: { h: number; s: number; v: number };
2633
}
2734
35+
const processedColor = computed(() => {
36+
const colorstr = color.value.trim() || "#4682B4";
37+
if (colorstr.startsWith("#") || colorstr.startsWith("rgb")) return colorstr;
38+
return nameToHex(colorstr) ?? colorstr;
39+
});
40+
2841
function changeColor(newColor: ColorPickerArgs) {
42+
if (color.value.startsWith("rgb")) {
43+
const { r, g, b, a } = newColor.rgba;
44+
if (a < 1) color.value = `rgba(${r}, ${g}, ${b}, ${a})`;
45+
else color.value = `rgb(${r}, ${g}, ${b})`;
46+
return;
47+
}
2948
let { hex } = newColor;
3049
if (newColor.rgba.a < 1) {
3150
hex =
@@ -37,6 +56,8 @@ function changeColor(newColor: ColorPickerArgs) {
3756
}
3857
color.value = hex;
3958
}
59+
60+
const pickerKey = ref(Symbol());
4061
</script>
4162

4263
<style lang="scss">

0 commit comments

Comments
 (0)