颜色选择器完整实现

Author: Linho1219

src/editor/data.vue

@@ -173,7 +173,7 @@ watch(fnType, (newFnType) => {
 }
 .plot-data.hidden {
   opacity: 0.6;
-  filter: contrast(0.6) saturate(0.8);
+  filter: saturate(0.8);
 }
 .datumFolder {
   border-bottom: var(--s-color-outline-variant) 1px solid;

src/editor/inputs/inputs.scss

@@ -34,7 +34,7 @@
     padding: 0 15px;
     .fields {
       display: grid;
-      grid-template-columns: max-content minmax(auto, 15em);
+      grid-template-columns: max-content minmax(auto, 20em);
       justify-content: space-between;
       align-items: center;
       gap: var(--input-inner-gap);

src/editor/inputs/linear.vue

@@ -9,7 +9,7 @@
       <div class="input-inner-optional">
         <div class="fields">
           <span class="label">
-            颜色 <HelpIcon> 鼠标经过时标出的点及其坐标 </HelpIcon>
+            颜色 <HelpIcon> 支持颜色名称 / RGB(A) / HEX </HelpIcon>
           </span>
           <ColorPicker v-model="self.color" />
           <span class="label">采样数</span>

src/editor/inputs/subblocks/coloUtils.ts

@@ -0,0 +1,148 @@
+export function nameToHex(name: string) {
+  const hex = colorNames[name.toLowerCase() as keyof typeof colorNames];
+  if (hex) return hex;
+  return undefined;
+}
+
+const colorNames = {
+  aliceblue: "#f0f8ff",
+  antiquewhite: "#faebd7",
+  aqua: "#00ffff",
+  aquamarine: "#7fffd4",
+  azure: "#f0ffff",
+  beige: "#f5f5dc",
+  bisque: "#ffe4c4",
+  black: "#000000",
+  blanchedalmond: "#ffebcd",
+  blue: "#0000ff",
+  blueviolet: "#8a2be2",
+  brown: "#a52a2a",
+  burlywood: "#deb887",
+  cadetblue: "#5f9ea0",
+  chartreuse: "#7fff00",
+  chocolate: "#d2691e",
+  coral: "#ff7f50",
+  cornflowerblue: "#6495ed",
+  cornsilk: "#fff8dc",
+  crimson: "#dc143c",
+  cyan: "#00ffff",
+  darkblue: "#00008b",
+  darkcyan: "#008b8b",
+  darkgoldenrod: "#b8860b",
+  darkgray: "#a9a9a9",
+  darkgreen: "#006400",
+  darkkhaki: "#bdb76b",
+  darkmagenta: "#8b008b",
+  darkolivegreen: "#556b2f",
+  darkorange: "#ff8c00",
+  darkorchid: "#9932cc",
+  darkred: "#8b0000",
+  darksalmon: "#e9967a",
+  darkseagreen: "#8fbc8f",
+  darkslateblue: "#483d8b",
+  darkslategray: "#2f4f4f",
+  darkturquoise: "#00ced1",
+  darkviolet: "#9400d3",
+  deeppink: "#ff1493",
+  deepskyblue: "#00bfff",
+  dimgray: "#696969",
+  dodgerblue: "#1e90ff",
+  firebrick: "#b22222",
+  floralwhite: "#fffaf0",
+  forestgreen: "#228b22",
+  fuchsia: "#ff00ff",
+  gainsboro: "#dcdcdc",
+  ghostwhite: "#f8f8ff",
+  gold: "#ffd700",
+  goldenrod: "#daa520",
+  gray: "#808080",
+  green: "#008000",
+  greenyellow: "#adff2f",
+  honeydew: "#f0fff0",
+  hotpink: "#ff69b4",
+  indianred: "#cd5c5c",
+  indigo: "#4b0082",
+  ivory: "#fffff0",
+  khaki: "#f0e68c",
+  lavender: "#e6e6fa",
+  lavenderblush: "#fff0f5",
+  lawngreen: "#7cfc00",
+  lemonchiffon: "#fffacd",
+  lightblue: "#add8e6",
+  lightcoral: "#f08080",
+  lightcyan: "#e0ffff",
+  lightgoldenrodyellow: "#fafad2",
+  lightgray: "#d3d3d3",
+  lightgreen: "#90ee90",
+  lightpink: "#ffb6c1",
+  lightsalmon: "#ffa07a",
+  lightseagreen: "#20b2aa",
+  lightskyblue: "#87cefa",
+  lightslategray: "#778899",
+  lightsteelblue: "#b0c4de",
+  lightyellow: "#ffffe0",
+  lime: "#00ff00",
+  limegreen: "#32cd32",
+  linen: "#faf0e6",
+  magenta: "#ff00ff",
+  maroon: "#800000",
+  mediumaquamarine: "#66cdaa",
+  mediumblue: "#0000cd",
+  mediumorchid: "#ba55d3",
+  mediumpurple: "#9370db",
+  mediumseagreen: "#3cb371",
+  mediumslateblue: "#7b68ee",
+  mediumspringgreen: "#00fa9a",
+  mediumturquoise: "#48d1cc",
+  mediumvioletred: "#c71585",
+  midnightblue: "#191970",
+  mintcream: "#f5fffa",
+  mistyrose: "#ffe4e1",
+  moccasin: "#ffe4b5",
+  navajowhite: "#ffdead",
+  navy: "#000080",
+  oldlace: "#fdf5e6",
+  olive: "#808000",
+  olivedrab: "#6b8e23",
+  orange: "#ffa500",
+  orangered: "#ff4500",
+  orchid: "#da70d6",
+  palegoldenrod: "#eee8aa",
+  palegreen: "#98fb98",
+  paleturquoise: "#afeeee",
+  palevioletred: "#db7093",
+  papayawhip: "#ffefd5",
+  peachpuff: "#ffdab9",
+  peru: "#cd853f",
+  pink: "#ffc0cb",
+  plum: "#dda0dd",
+  powderblue: "#b0e0e6",
+  purple: "#800080",
+  red: "#ff0000",
+  rosybrown: "#bc8f8f",
+  royalblue: "#4169e1",
+  saddlebrown: "#8b4513",
+  salmon: "#fa8072",
+  sandybrown: "#f4a460",
+  seagreen: "#2e8b57",
+  seashell: "#fff5ee",
+  sienna: "#a0522d",
+  silver: "#c0c0c0",
+  skyblue: "#87ceeb",
+  slateblue: "#6a5acd",
+  slategray: "#708090",
+  snow: "#fffafa",
+  springgreen: "#00ff7f",
+  steelblue: "#4682b4",
+  tan: "#d2b48c",
+  teal: "#008080",
+  thistle: "#d8bfd8",
+  tomato: "#ff6347",
+  turquoise: "#40e0d0",
+  violet: "#ee82ee",
+  wheat: "#f5deb3",
+  white: "#ffffff",
+  whitesmoke: "#f5f5f5",
+  yellow: "#ffff00",
+  yellowgreen: "#9acd32",
+} as const;

src/editor/inputs/subblocks/colorPicker.vue

@@ -1,20 +1,27 @@
 <template>
-  <s-text-field class="input monospace" label="颜色" v-model="color">
-    <s-popup slot="end" align="right">
+  <s-text-field class="input monospace" label="颜色" v-model.trim="color">
+    <s-popup slot="end" align="right" ref="popup" @show="pickerKey = Symbol()">
       <s-icon-button
         slot="trigger"
         class="colorpicker-button"
         :style="{ color }"
       >
         <SIconPalette />
       </s-icon-button>
-      <ColorPicker :color="color" sucker-hide @changeColor="changeColor" />
+      <ColorPicker
+        :color="processedColor"
+        sucker-hide
+        @changeColor="changeColor"
+        :key="pickerKey"
+      />
     </s-popup>
   </s-text-field>
 </template>
 
 <script lang="ts" setup>
+import { nameToHex } from "./coloUtils";
 import SIconPalette from "@/ui/icons/palette.vue";
+import { computed, ref } from "vue";
 import { ColorPicker } from "vue-color-kit";
 
 const color = defineModel<string>({ required: true });
@@ -25,7 +32,19 @@ interface ColorPickerArgs {
   hsv: { h: number; s: number; v: number };
 }
 
+const processedColor = computed(() => {
+  const colorstr = color.value.trim() || "#4682B4";
+  if (colorstr.startsWith("#") || colorstr.startsWith("rgb")) return colorstr;
+  return nameToHex(colorstr) ?? colorstr;
+});
+
 function changeColor(newColor: ColorPickerArgs) {
+  if (color.value.startsWith("rgb")) {
+    const { r, g, b, a } = newColor.rgba;
+    if (a < 1) color.value = `rgba(${r}, ${g}, ${b}, ${a})`;
+    else color.value = `rgb(${r}, ${g}, ${b})`;
+    return;
+  }
   let { hex } = newColor;
   if (newColor.rgba.a < 1) {
     hex =
@@ -37,6 +56,8 @@ function changeColor(newColor: ColorPickerArgs) {
   }
   color.value = hex;
 }
+
+const pickerKey = ref(Symbol());
 </script>
 
 <style lang="scss">