ranui
Version:
UI Component library based on `Web Component`
512 lines (511 loc) • 24.4 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import { f as range } from "./plus-BQnIzzvi.js";
import { c as createCustomError, H as HTMLElementSSR, a as createSignal } from "./index-9tJmVuyv.js";
import "./index-B249WTjy.js";
import "./index-C6fbgi_U.js";
import "./selectShadowless.js";
import "./index-BHncYPNL.js";
const hex2hsv = (hex) => {
const { r, g, b } = hex2rgb(hex);
return rgb2hsv(r, g, b);
};
const hex2rgb = (hex) => {
if (hex[0] === "#") hex = hex.substr(1);
if (hex.length === 3) {
return {
r: parseInt(hex[0] + hex[0], 16),
g: parseInt(hex[1] + hex[1], 16),
b: parseInt(hex[2] + hex[2], 16)
};
}
return {
r: parseInt(hex.substr(0, 2), 16),
g: parseInt(hex.substr(2, 2), 16),
b: parseInt(hex.substr(4, 2), 16)
};
};
const rgb2hsv = (r, g, b) => {
let h;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;
if (delta === 0) {
h = 0;
} else if (r === max) {
h = (g - b) / delta % 6;
} else if (g === max) {
h = (b - r) / delta + 2;
} else {
h = (r - g) / delta + 4;
}
h = Math.round(h * 60);
if (h < 0) h += 360;
const s = Math.round((max === 0 ? 0 : delta / max) * 100);
const v = Math.round(max / 255 * 100);
return { h, s, v };
};
const hsv2rgb = (h, s, v) => {
s = s / 100;
v = v / 100;
let rgb = [];
const c = v * s;
const hh = h / 60;
const x = c * (1 - Math.abs(hh % 2 - 1));
const m = v - c;
if (hh >= 0 && hh < 1) {
rgb = [c, x, 0];
} else if (hh >= 1 && hh < 2) {
rgb = [x, c, 0];
} else if (hh >= 2 && hh < 3) {
rgb = [0, c, x];
} else if (h >= 3 && hh < 4) {
rgb = [0, x, c];
} else if (h >= 4 && hh < 5) {
rgb = [x, 0, c];
} else if (h >= 5 && hh <= 6) {
rgb = [c, 0, x];
} else {
rgb = [0, 0, 0];
}
return {
r: Math.round(255 * (rgb[0] + m)),
g: Math.round(255 * (rgb[1] + m)),
b: Math.round(255 * (rgb[2] + m))
};
};
const HEX_COLOR_REGEX = /^#([\da-f]{6}|[\da-f]{3})$/i;
const RGB_REGEX = /^rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)$/;
const RGBA_REGEX = /^rgba\((\d{1,3}),(\d{1,3}),(\d{1,3}),(\d{1,3}(\.\d+)?)\)$/;
const BOT_WIDTH = 8;
const HUE = 360;
class ColorPicker extends HTMLElementSSR() {
constructor() {
super();
__publicField(this, "colorpicker");
__publicField(this, "colorpickerInner");
__publicField(this, "context");
__publicField(this, "popoverBlock");
__publicField(this, "popoverContent");
__publicField(this, "colorPickerInner");
__publicField(this, "colorPickerInnerContent");
__publicField(this, "colorPickerPanel");
__publicField(this, "colorPickerInputContainer");
__publicField(this, "colorPickerPanelDot");
__publicField(this, "colorPickerPanelSliderContainer");
__publicField(this, "colorPickerPanelSliderGroup");
__publicField(this, "colorPickerPanelSliderHue");
__publicField(this, "colorPickerPanelSliderAlpha");
__publicField(this, "colorPickerColorBlockInner");
__publicField(this, "colorPickerColorBlock");
__publicField(this, "colorPickerInnerContentSelect");
__publicField(this, "colorPickerPanelPalette");
__publicField(this, "colorPickerPanelSaturation");
__publicField(this, "colorPickerInputContainerSelect");
__publicField(this, "colorPickerInputContainerInputColor");
__publicField(this, "colorPickerInputContainerInputNumber");
__publicField(this, "colorPickerInputContainerSelectItem");
__publicField(this, "colorPickerPaletteSelect");
__publicField(this, "colorPickerPanelDotInner");
__publicField(this, "createContext", () => {
this.context = {
value: this.createColorValueSignal(),
disabled: this.createColorDisabled(),
hue: this.createColorHue(),
saturation: this.createColorSaturation(),
lightness: this.createColorLightness(),
transparency: this.createColorTransparency()
};
});
/**
* @description: 0 - 360 色相 hue
* @param {*} Signal
* @return {*}
*/
__publicField(this, "createColorHue", () => {
const [getter, setter] = createSignal(0, {
subscriber: [
this.updateColorPickerPanelSaturationBackground,
this.updateColorPickerPanelSliderHueProgressPercent,
this.updateColorPickerPanelSliderAlphaProgressWrap,
this.updateColorPickerPanelSliderAlphaProgressDot,
this.updateColorPickerColorBlockInnerBackground,
this.updateColorPickerPanelSliderHueProgressDot
]
});
return { getter, setter };
});
/**
* @description: 0 - 100 饱和度 x
* @param {*} Signal
* @return {*}
*/
__publicField(this, "createColorSaturation", () => {
const [getter, setter] = createSignal(100, {
subscriber: [
this.updateColorPickerPanelSliderAlphaProgressWrap,
this.updateColorPickerPanelSliderAlphaProgressDot,
this.updateColorPickerColorBlockInnerBackground
]
});
return { getter, setter };
});
/**
* @description: 0 - 100 亮度 y
* @param {*} Signal
* @return {*}
*/
__publicField(this, "createColorLightness", () => {
const [getter, setter] = createSignal(100, {
subscriber: [
this.updateColorPickerPanelSliderAlphaProgressWrap,
this.updateColorPickerPanelSliderAlphaProgressDot,
this.updateColorPickerColorBlockInnerBackground
]
});
return { getter, setter };
});
/**
* @description: 0 - 100 透明度
* @param {*} Signal
* @return {*}
*/
__publicField(this, "createColorTransparency", () => {
const [getter, setter] = createSignal(80, {
subscriber: [
this.updateColorPickerPanelSliderAlphaProgressPercent,
this.updateColorPickerColorBlockInnerBackground,
this.updateColorPickerPanelSliderAlphaProgressDot
]
});
return { getter, setter };
});
__publicField(this, "createColorDisabled", () => {
const [getter, setter] = createSignal(true, { subscriber: [] });
return { getter, setter };
});
__publicField(this, "createColorValueSignal", () => {
const [getter, setter] = createSignal("", {
subscriber: [this.updateColorValue]
});
return { getter, setter };
});
__publicField(this, "generateHue2rgb", () => {
const { hue } = this.context;
const { r, g, b } = hsv2rgb(hue.getter(), 100, 100);
return `rgb(${r}, ${g}, ${b})`;
});
__publicField(this, "generateHsv2Rgb", () => {
const { r, g, b } = this.generateHsv2Rgba();
return `rgb(${r}, ${g}, ${b})`;
});
__publicField(this, "generateHsv2Rgba", () => {
const { hue, saturation, lightness, transparency } = this.context;
const { r, g, b } = hsv2rgb(hue.getter(), saturation.getter(), lightness.getter());
return { r, g, b, a: transparency.getter() / 100 };
});
__publicField(this, "generateHsv2RgbaValue", () => {
const { r, g, b, a } = this.generateHsv2Rgba();
return `rgb(${r}, ${g}, ${b}, ${a})`;
});
__publicField(this, "generateColorPickerProgress", () => {
const { r, g, b } = this.generateHsv2Rgba();
return `linear-gradient(to right, rgba(255, 0, 4, 0), rgba(${r}, ${g}, ${b}, 1))`;
});
__publicField(this, "updateColorValue", (value) => {
var _a, _b;
if (value !== ((_a = this.context) == null ? void 0 : _a.value.getter())) {
const hex = HEX_COLOR_REGEX.exec(value);
const rga = RGB_REGEX.exec(value.replace(/\s+/g, ""));
const rgba = RGBA_REGEX.exec(value.replace(/\s+/g, ""));
if (hex) {
const { h, s, v } = hex2hsv(hex[0]);
this.context.hue.setter(h);
this.context.saturation.setter(s);
this.context.lightness.setter(v);
this.context.transparency.setter(100);
} else if (rgba) {
const { h, s, v } = rgb2hsv(Number(rgba[1]), Number(rgba[2]), Number(rgba[3]));
this.context.hue.setter(h);
this.context.saturation.setter(s);
this.context.lightness.setter(v);
this.context.transparency.setter(Number(rgba[4]));
} else if (rga) {
const { h, s, v } = rgb2hsv(Number(rga[1]), Number(rga[2]), Number(rga[3]));
this.context.hue.setter(h);
this.context.saturation.setter(s);
this.context.lightness.setter(v);
this.context.transparency.setter(100);
} else {
return;
}
this.setAttribute("value", value);
this.colorpickerInner.style.setProperty("background", value);
(_b = this.context) == null ? void 0 : _b.value.setter(value);
}
});
__publicField(this, "updateColorPickerPanelSliderHueProgressPercent", (hue) => {
var _a;
(_a = this.colorPickerPanelSliderHue) == null ? void 0 : _a.setAttribute("percent", `${hue / 360}`);
});
__publicField(this, "updateColorPickerPanelSliderAlphaProgressPercent", (alpha) => {
var _a;
(_a = this.colorPickerPanelSliderAlpha) == null ? void 0 : _a.setAttribute("percent", `${alpha / 100}`);
});
__publicField(this, "updateColorPickerPanelSliderAlphaProgressWrap", () => {
var _a;
(_a = this.colorPickerPanelSliderAlpha) == null ? void 0 : _a.style.setProperty(
"--ran-progress-wrap-background",
this.generateColorPickerProgress()
);
});
__publicField(this, "updateColorPickerPanelSliderAlphaProgressDot", () => {
var _a;
(_a = this.colorPickerPanelSliderAlpha) == null ? void 0 : _a.style.setProperty("--ran-progress-dot-background", this.generateHsv2RgbaValue());
});
__publicField(this, "updateColorPickerPanelSliderHueProgressDot", () => {
var _a;
(_a = this.colorPickerPanelSliderHue) == null ? void 0 : _a.style.setProperty("--ran-progress-dot-background", this.generateHue2rgb());
});
__publicField(this, "updateColorPickerColorBlockInnerBackground", () => {
var _a;
(_a = this.colorPickerColorBlockInner) == null ? void 0 : _a.style.setProperty("background", this.generateHsv2RgbaValue());
});
__publicField(this, "updateColorPickerPanelSaturationBackground", () => {
var _a;
(_a = this.colorPickerPanelSaturation) == null ? void 0 : _a.style.setProperty("background-color", this.generateHue2rgb());
});
__publicField(this, "clickStop", (e) => {
e.stopPropagation();
e.preventDefault();
});
__publicField(this, "changeColorPalettePositionByContext", () => {
window.requestAnimationFrame(() => {
var _a, _b, _c, _d, _e;
this.updateColorValue(this.value);
if (!this.colorPickerPanelPalette) return;
if (!((_a = this.context) == null ? void 0 : _a.lightness.getter) || !((_b = this.context) == null ? void 0 : _b.saturation.getter)) return;
const { width, height } = ((_c = this.colorPickerPanelPalette) == null ? void 0 : _c.getBoundingClientRect()) || {};
const limitY = height - this.context.lightness.getter() / 100 * height;
const limitX = this.context.saturation.getter() / 100 * width;
(_d = this.colorPickerPanelDot) == null ? void 0 : _d.style.setProperty("top", `${limitY - BOT_WIDTH}px`);
(_e = this.colorPickerPanelDot) == null ? void 0 : _e.style.setProperty("left", `${limitX - BOT_WIDTH}px`);
});
});
__publicField(this, "changeColorPalettePosition", (offsetX, offsetY) => {
var _a, _b, _c;
if (!this.colorPickerPanelPalette) return;
if (!((_a = this.context) == null ? void 0 : _a.lightness.getter) || !((_b = this.context) == null ? void 0 : _b.saturation.getter)) return;
const { width, height } = ((_c = this.colorPickerPanelPalette) == null ? void 0 : _c.getBoundingClientRect()) || {};
const limitY = height - range(offsetY, 0, height);
const limitX = range(offsetX, 0, width);
this.context.saturation.setter(limitX / width * 100);
this.context.lightness.setter(limitY / height * 100);
window.requestAnimationFrame(() => {
var _a2, _b2;
(_a2 = this.colorPickerPanelDot) == null ? void 0 : _a2.style.setProperty("top", `${offsetY - BOT_WIDTH}px`);
(_b2 = this.colorPickerPanelDot) == null ? void 0 : _b2.style.setProperty("left", `${offsetX - BOT_WIDTH}px`);
});
});
__publicField(this, "clickColorPalette", (e) => {
const { offsetX, offsetY } = e;
this.changeColorPalettePosition(offsetX, offsetY);
});
__publicField(this, "createColorPickerProgress", () => {
this.colorPickerPanelSliderContainer = document.createElement("div");
this.colorPickerPanelSliderContainer.setAttribute("class", "ran-color-picker-slider-container");
this.colorPickerPanelSliderGroup = document.createElement("div");
this.colorPickerPanelSliderGroup.setAttribute("class", "ran-color-picker-slider-container-group");
this.colorPickerPanelSliderHue = document.createElement("r-progress");
this.updateColorPickerPanelSliderHueProgressDot();
this.colorPickerPanelSliderHue.style.setProperty(
"--ran-progress-wrap-background",
"linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)"
);
this.colorPickerPanelSliderHue.setAttribute("percent", `${this.context.hue.getter() / 360}`);
this.colorPickerPanelSliderHue.addEventListener("change", this.changeColorPickerHue);
this.colorPickerPanelSliderHue.setAttribute("type", "drag");
this.colorPickerPanelSliderHue.setAttribute("class", "ran-color-picker-slider-container-group-hue");
this.colorPickerPanelSliderAlpha = document.createElement("r-progress");
this.updateColorPickerPanelSliderAlphaProgressDot();
this.colorPickerPanelSliderAlpha.setAttribute("percent", `${this.context.transparency.getter() / 100}`);
this.updateColorPickerPanelSliderAlphaProgressWrap();
this.colorPickerPanelSliderAlpha.addEventListener("change", this.changeColorPickerAlpha);
this.colorPickerPanelSliderAlpha.setAttribute("type", "drag");
this.colorPickerPanelSliderAlpha.setAttribute("class", "ran-color-picker-slider-container-group-alpha");
this.colorPickerPanelSliderGroup.appendChild(this.colorPickerPanelSliderHue);
this.colorPickerPanelSliderGroup.appendChild(this.colorPickerPanelSliderAlpha);
this.colorPickerPanelSliderContainer.appendChild(this.colorPickerPanelSliderGroup);
this.colorPickerColorBlock = document.createElement("div");
this.colorPickerColorBlock.setAttribute("class", "ran-color-picker-slider-container-color-block");
this.colorPickerColorBlockInner = document.createElement("div");
this.colorPickerColorBlockInner.setAttribute("class", "ran-color-picker-slider-container-color-block-inner");
this.updateColorPickerColorBlockInnerBackground();
this.colorPickerColorBlock.appendChild(this.colorPickerColorBlockInner);
this.colorPickerPanelSliderContainer.appendChild(this.colorPickerColorBlock);
});
__publicField(this, "changeColorPickerHue", (e) => {
this.context.hue.setter(e.detail.value * HUE);
});
__publicField(this, "changeColorPickerAlpha", (e) => {
this.context.transparency.setter(e.detail.value * 100);
});
__publicField(this, "createColorPickerSelect", () => {
this.colorPickerPanel = document.createElement("div");
this.colorPickerPanel.setAttribute("class", "ran-color-picker-panel");
this.colorPickerInnerContentSelect = document.createElement("div");
this.colorPickerInnerContentSelect.setAttribute("class", "ran-color-picker-select");
this.colorPickerPanel.appendChild(this.colorPickerInnerContentSelect);
this.colorPickerPanelPalette = document.createElement("div");
this.colorPickerPanelPalette.setAttribute("class", "ran-color-picker-palette");
this.colorPickerInnerContentSelect.appendChild(this.colorPickerPanelPalette);
this.colorPickerPanelSaturation = document.createElement("div");
this.colorPickerPanelSaturation.setAttribute("class", "ran-color-picker-saturation");
this.updateColorPickerPanelSaturationBackground();
this.colorPickerPanelDot = document.createElement("div");
this.colorPickerPanelDotInner = document.createElement("div");
this.colorPickerPanelDotInner.setAttribute("class", "ran-color-picker-palette-dot-inner");
this.colorPickerPanelDot.setAttribute("class", "ran-color-picker-palette-dot");
this.colorPickerPanelDot.addEventListener("mousedown", this.mouseDownColorPickerPalette);
document.body.addEventListener("mousemove", this.mouseMoveColorPickerPalette);
this.colorPickerPanelDot.addEventListener("mouseup", this.mouseUpColorPickerPalette);
this.colorPickerPanelDot.appendChild(this.colorPickerPanelDotInner);
this.colorPickerPanelPalette.appendChild(this.colorPickerPanelDot);
this.colorPickerPanelPalette.appendChild(this.colorPickerPanelSaturation);
this.colorPickerPanelPalette.addEventListener("mousedown", this.clickColorPalette);
});
__publicField(this, "createColorPickerInput", () => {
this.colorPickerInputContainer = document.createElement("div");
this.colorPickerInputContainer.setAttribute("class", "ran-color-picker-input-container");
const colorPickerInputContainerId = `${performance.now()}`.replace(".", "");
this.colorPickerInputContainerSelect = document.createElement("div");
this.colorPickerInputContainerSelect.setAttribute("class", "ran-color-picker-input-container-select");
this.colorPickerInputContainerSelect.setAttribute("id", colorPickerInputContainerId);
this.colorPickerInputContainerSelectItem = document.createElement("ra-select");
this.colorPickerInputContainerSelectItem.setAttribute("value", "HEX");
this.colorPickerInputContainerSelectItem.setAttribute("class", "ran-color-picker-input-container-select-item");
this.colorPickerInputContainerSelectItem.setAttribute("type", "text");
this.colorPickerInputContainerSelectItem.setAttribute("getPopupContainerId", colorPickerInputContainerId);
const colorSelectOption = ["HEX", "HSB", "RGB"];
const Fragment = document.createDocumentFragment();
colorSelectOption.forEach((item) => {
const Option = document.createElement("r-option");
Option.setAttribute("value", item);
Option.innerText = item;
Fragment.appendChild(Option);
});
this.colorPickerInputContainerSelectItem.appendChild(Fragment);
this.colorPickerInputContainerSelect.appendChild(this.colorPickerInputContainerSelectItem);
this.colorPickerInputContainer.appendChild(this.colorPickerInputContainerSelect);
this.colorPickerInputContainerInputColor = document.createElement("ra-input");
this.colorPickerInputContainerInputColor.setAttribute("class", "ran-color-picker-input-container-input-color");
this.colorPickerInputContainerInputNumber = document.createElement("ra-input");
this.colorPickerInputContainerInputNumber.setAttribute("class", "ran-color-picker-input-container-input-number");
this.colorPickerInputContainer.appendChild(this.colorPickerInputContainerInputColor);
this.colorPickerInputContainer.appendChild(this.colorPickerInputContainerInputNumber);
});
__publicField(this, "openColorPicker", () => {
if (this.colorPickerInner) return;
this.colorPickerInner = document.createElement("div");
this.colorPickerInner.setAttribute("class", "ran-color-picker-inner");
this.colorPickerInnerContent = document.createElement("div");
this.colorPickerInnerContent.setAttribute("class", "ran-color-picker-inner-content");
this.createColorPickerProgress();
this.createColorPickerSelect();
this.createColorPickerInput();
this.colorPickerPanel && this.colorPickerInnerContent.appendChild(this.colorPickerPanel);
this.colorPickerPanelSliderContainer && this.colorPickerInnerContent.appendChild(this.colorPickerPanelSliderContainer);
this.colorPickerInputContainer && this.colorPickerInnerContent.appendChild(this.colorPickerInputContainer);
this.colorPickerInner.appendChild(this.colorPickerInnerContent);
this.popoverContent.appendChild(this.colorPickerInner);
this.changeColorPalettePositionByContext();
});
__publicField(this, "mouseMoveColorPickerPalette", (e) => {
var _a;
if (!this.colorPickerPanelPalette || !this.colorPickerPaletteSelect) return;
const { pageX, pageY } = e;
const { top = 0, left = 0, width, height } = ((_a = this.colorPickerPanelPalette) == null ? void 0 : _a.getBoundingClientRect()) || {};
const limitY = range(pageY - top - BOT_WIDTH, -BOT_WIDTH, height - BOT_WIDTH);
const limitX = range(pageX - left - BOT_WIDTH, -BOT_WIDTH, width - BOT_WIDTH);
this.context.saturation.setter(limitX / width * 100);
this.context.lightness.setter(limitY / height * 100);
window.requestAnimationFrame(() => {
var _a2, _b;
(_a2 = this.colorPickerPanelDot) == null ? void 0 : _a2.style.setProperty("top", `${limitY}px`);
(_b = this.colorPickerPanelDot) == null ? void 0 : _b.style.setProperty("left", `${limitX}px`);
});
});
__publicField(this, "mouseDownColorPickerPalette", (e) => {
e.stopPropagation();
e.preventDefault();
this.colorPickerPaletteSelect = true;
});
__publicField(this, "mouseUpColorPickerPalette", () => {
this.colorPickerPaletteSelect = false;
});
this.setAttribute("class", "ran-colorpicker");
this.popoverBlock = document.createElement("r-popover");
this.popoverBlock.setAttribute("class", "ran-popover");
this.popoverContent = document.createElement("r-content");
this.popoverContent.setAttribute("class", "ran-content");
this.colorpicker = document.createElement("div");
this.colorpicker.setAttribute("class", "ran-colorpicker-block");
this.colorpickerInner = document.createElement("div");
this.colorpickerInner.setAttribute("class", "ran-colorpicker-inner");
this.popoverBlock.appendChild(this.colorpicker);
this.popoverBlock.appendChild(this.popoverContent);
this.colorpicker.appendChild(this.colorpickerInner);
this.appendChild(this.popoverBlock);
this.colorPickerPaletteSelect = false;
this.createContext();
}
static get observedAttributes() {
return ["disabled", "value"];
}
get value() {
var _a;
return ((_a = this.context) == null ? void 0 : _a.value.getter()) || "";
}
set value(value) {
this.setAttribute("value", value);
this.updateColorValue(value);
}
connectedCallback() {
this.popoverBlock.addEventListener("click", this.openColorPicker);
}
disconnectCallback() {
var _a, _b, _c;
this.popoverBlock.removeEventListener("click", this.openColorPicker);
(_a = this.colorPickerPanelDot) == null ? void 0 : _a.removeEventListener("mousedown", this.mouseDownColorPickerPalette);
document.body.removeEventListener("mousemove", this.mouseMoveColorPickerPalette);
(_b = this.colorPickerPanelDot) == null ? void 0 : _b.removeEventListener("mouseup", this.mouseUpColorPickerPalette);
(_c = this.colorPickerPanelPalette) == null ? void 0 : _c.removeEventListener("mousedown", this.clickColorPalette);
}
attributeChangedCallback(n, o, v) {
if (o !== v) {
if (n === "value") {
this.updateColorValue(v);
}
}
}
}
function Custom() {
if (typeof document !== "undefined" && !customElements.get("r-colorpicker")) {
customElements.define("r-colorpicker", ColorPicker);
return ColorPicker;
} else {
return createCustomError("document is undefined or r-colorpicker is exist");
}
}
const index = Custom();
const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
ColorPicker,
default: index
}, Symbol.toStringTag, { value: "Module" }));
export {
ColorPicker as C,
index as a,
index$1 as i
};