Merge remote-tracking branch 'origin/main-demo' into main-dev
This commit is contained in:
1
app/package-lock.json
generated
1
app/package-lock.json
generated
@@ -43,6 +43,7 @@
|
||||
"r3f-perf": "^7.2.3",
|
||||
"react": "^18.3.1",
|
||||
"react-chartjs-2": "^5.3.0",
|
||||
"react-colorful": "^5.6.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^7.4.0",
|
||||
"react-scripts": "5.0.1",
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
"r3f-perf": "^7.2.3",
|
||||
"react": "^18.3.1",
|
||||
"react-chartjs-2": "^5.3.0",
|
||||
"react-colorful": "^5.6.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^7.4.0",
|
||||
"react-scripts": "5.0.1",
|
||||
|
||||
@@ -305,6 +305,7 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
|
||||
|
||||
<div className="design-section appearance">
|
||||
<div className="section-header">Appearance</div>
|
||||
|
||||
<div className="design-datas-wrapper">
|
||||
{currentBlock.positionType === "absolute" && (
|
||||
<>
|
||||
|
||||
@@ -662,7 +662,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
</div>
|
||||
|
||||
{selectDataMapping === "singleMachine" && element.dataBinding?.dataType === "single-machine" && (
|
||||
<div className="fields-wrapper">
|
||||
<div className="fields-wrapper design-section">
|
||||
{singleSourceFields.map((field) => (
|
||||
<DataSourceSelector
|
||||
key={field.id}
|
||||
@@ -711,7 +711,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
)}
|
||||
|
||||
{selectDataMapping === "multipleMachine" && element.dataBinding?.dataType === "multiple-machine" && (
|
||||
<div className="fields-wrapper">
|
||||
<div className="fields-wrapper design-section">
|
||||
{multipleValueFields.map((field) => (
|
||||
<DataSourceSelector
|
||||
key={field.id}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import React from "react";
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import { HexColorPicker } from "react-colorful";
|
||||
import { useOuterClick } from "../../../utils/useOuterClick";
|
||||
|
||||
interface ColorProps {
|
||||
value: string;
|
||||
@@ -11,6 +13,24 @@ interface ColorProps {
|
||||
onUpdate?: (value: string) => void;
|
||||
}
|
||||
|
||||
const hexToRgb = (hex: string) => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result
|
||||
? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16),
|
||||
}
|
||||
: { r: 0, g: 0, b: 0 };
|
||||
};
|
||||
|
||||
const rgbToHex = (r: number, g: number, b: number) => {
|
||||
return (
|
||||
"#" +
|
||||
((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()
|
||||
);
|
||||
};
|
||||
|
||||
export const Color: React.FC<ColorProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
@@ -21,50 +41,180 @@ export const Color: React.FC<ColorProps> = ({
|
||||
onFocus,
|
||||
onUpdate,
|
||||
}) => {
|
||||
const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
onChange(e.target.value);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const popoverRef = useRef<HTMLDivElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [localValue, setLocalValue] = useState(value);
|
||||
|
||||
// Sync local value when prop changes
|
||||
useEffect(() => {
|
||||
setLocalValue(value);
|
||||
}, [value]);
|
||||
|
||||
const handleChange = (newColor: string) => {
|
||||
setLocalValue(newColor);
|
||||
onChange(newColor);
|
||||
};
|
||||
|
||||
const handleColorPickerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
onChange(e.target.value);
|
||||
};
|
||||
const handleRgbChange = (part: "r" | "g" | "b", val: string) => {
|
||||
const rgb = hexToRgb(localValue);
|
||||
let num = parseInt(val, 10);
|
||||
if (isNaN(num)) num = 0;
|
||||
if (num < 0) num = 0;
|
||||
if (num > 255) num = 255;
|
||||
|
||||
const handleSubmit = (e?: React.FormEvent) => {
|
||||
if (e) e.preventDefault();
|
||||
if (onUpdate) {
|
||||
onUpdate(value);
|
||||
}
|
||||
rgb[part] = num;
|
||||
const newHex = rgbToHex(rgb.r, rgb.g, rgb.b);
|
||||
handleChange(newHex);
|
||||
};
|
||||
|
||||
const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
|
||||
handleSubmit();
|
||||
if (onBlur) onBlur(e);
|
||||
if (onUpdate) onUpdate(localValue);
|
||||
};
|
||||
|
||||
useOuterClick(
|
||||
() => setIsOpen(false),
|
||||
["color-picker-popover", "color-trigger"],
|
||||
isOpen
|
||||
);
|
||||
|
||||
const rgb = hexToRgb(localValue);
|
||||
|
||||
return (
|
||||
<div className={`data-picker ${className}`}>
|
||||
<div className={`data-picker ${className}`} style={{ position: "relative" }} ref={containerRef}>
|
||||
{label && <div className="label">{label}</div>}
|
||||
<div className="left">
|
||||
<input
|
||||
type="color"
|
||||
value={value}
|
||||
onChange={handleColorPickerChange}
|
||||
onBlur={handleBlur}
|
||||
disabled={disabled}
|
||||
className="cursor-pointer"
|
||||
<div
|
||||
className="color-trigger cursor-pointer"
|
||||
onClick={() => !disabled && setIsOpen(!isOpen)}
|
||||
style={{
|
||||
backgroundColor: localValue,
|
||||
width: "52px",
|
||||
height: "22px",
|
||||
display: "inline-block",
|
||||
borderRadius: "24px",
|
||||
border: "1px solid var(--border-color, #ccc)",
|
||||
position: "relative",
|
||||
}}
|
||||
/>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<input
|
||||
type="text"
|
||||
className="colorValue"
|
||||
value={value}
|
||||
onChange={handleTextChange}
|
||||
value={localValue}
|
||||
onChange={(e) => handleChange(e.target.value)}
|
||||
onBlur={handleBlur}
|
||||
onFocus={onFocus}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<div
|
||||
ref={popoverRef}
|
||||
className="color-picker-popover"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "100%",
|
||||
left: "0",
|
||||
zIndex: 1000,
|
||||
marginTop: "8px",
|
||||
backgroundColor: "#1a1a1a", // Deep dark background
|
||||
borderRadius: "12px",
|
||||
padding: "12px",
|
||||
boxShadow: "0 10px 30px rgba(0,0,0,0.5)",
|
||||
width: "240px",
|
||||
border: "1px solid #333",
|
||||
}}
|
||||
>
|
||||
<style>{`
|
||||
.react-colorful {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
}
|
||||
.react-colorful__saturation {
|
||||
border-radius: 8px 8px 0 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
.react-colorful__hue {
|
||||
height: 16px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.react-colorful__pointer {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<HexColorPicker color={localValue} onChange={handleChange} />
|
||||
|
||||
<div style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginTop: "12px",
|
||||
gap: "10px"
|
||||
}}>
|
||||
{/* Eyedropper placeholder icon */}
|
||||
<div style={{ color: "#aaa" }}>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M12.8536 0.146447C12.6583 -0.0488155 12.3417 -0.0488155 12.1464 0.146447L10.5 1.7929L14.2071 5.5L15.8536 3.85355C16.0488 3.65829 16.0488 3.34171 15.8536 3.14645L12.8536 0.146447ZM9.79289 2.5L1.5 10.7929V14.5H5.20711L13.5 6.20711L9.79289 2.5Z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: localValue,
|
||||
border: "2px solid #fff",
|
||||
boxShadow: "0 0 0 1px #333",
|
||||
flexShrink: 0
|
||||
}}></div>
|
||||
|
||||
<div style={{ flexGrow: 1, display: "flex", flexDirection: "column", gap: "2px" }}>
|
||||
{/* Small hex input representation usually goes here, but we have separated RGB below */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RGB Inputs */}
|
||||
<div style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr 1fr 1fr",
|
||||
gap: "8px",
|
||||
marginTop: "12px"
|
||||
}}>
|
||||
{["r", "g", "b"].map((key) => (
|
||||
<div key={key} style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
|
||||
<input
|
||||
type="number"
|
||||
value={rgb[key as keyof typeof rgb]}
|
||||
onChange={(e) => handleRgbChange(key as "r" | "g" | "b", e.target.value)}
|
||||
style={{
|
||||
width: "100%",
|
||||
backgroundColor: "#333",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "4px",
|
||||
color: "#eee",
|
||||
textAlign: "center",
|
||||
fontSize: "12px",
|
||||
padding: "4px 0",
|
||||
appearance: "textfield",
|
||||
}}
|
||||
/>
|
||||
<span style={{
|
||||
color: "#888",
|
||||
fontSize: "10px",
|
||||
marginTop: "4px",
|
||||
textTransform: "uppercase"
|
||||
}}>
|
||||
{key}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -246,6 +246,7 @@ input[type="number"] {
|
||||
|
||||
.icon {
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -357,6 +357,7 @@
|
||||
|
||||
.select-type {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
|
||||
.type {
|
||||
flex: 1;
|
||||
@@ -547,7 +548,6 @@
|
||||
|
||||
.type-switch {
|
||||
display: flex;
|
||||
padding: 6px 12px;
|
||||
|
||||
.type {
|
||||
flex: 1;
|
||||
@@ -670,8 +670,8 @@
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
padding: 5px 4px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
@@ -709,18 +709,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.element-editor-panel {
|
||||
right: 20px;
|
||||
top: 50px;
|
||||
// min-width: 300px;
|
||||
max-height: 84vh;
|
||||
overflow: auto;
|
||||
|
||||
max-width: 320px;
|
||||
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
right: 40px;
|
||||
|
||||
.appearance {
|
||||
.design-datas-wrapper {
|
||||
@@ -737,6 +725,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.element-editor-panel {
|
||||
right: 20px;
|
||||
top: 50px;
|
||||
// min-width: 300px;
|
||||
max-height: 84vh;
|
||||
overflow: auto;
|
||||
|
||||
max-width: 320px;
|
||||
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
right: 40px;
|
||||
|
||||
.swap-button {
|
||||
text-align: center;
|
||||
color: #ccacff;
|
||||
|
||||
Reference in New Issue
Block a user