Tribes2/t2-model-skinner
1
0
Fork 0
mirror of https://github.com/exogen/t2-model-skinner.git synced 2026-01-19 19:24:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add opacity slider

Browse source
This commit is contained in:
Brian Beck 2025-10-19 09:41:50 -07:00
parent 8f61cb84ae
commit f63158c4d4
3 changed files with 41 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/CanvasTools.tsx
View file

@ -67,6 +67,8 @@ export default function CanvasTools() {
setBrightness,
contrast,
setContrast,
opacity,
setOpacity,
layerMode,
setLayerMode,
activeCanvasType,
@ -554,6 +556,31 @@ export default function CanvasTools() {
/>
</div>
</div>
<div className="Field">
<label>
Opacity:{" "}
<strong>
{contrast == null
? "MULTIPLE VALUES"
: `${Math.round((opacity ?? 1) * 100)}%`}
</strong>
</label>
<div className="SliderContainer">
<Slider
min={0}
max={100}
startPoint={0}
value={Math.round((opacity ?? 1) * 100)}
onChange={(value: number | number[]) => {
if (Array.isArray(value)) {
value = value[0];
}
setOpacity(value / 100);
}}
/>
</div>
</div>
</div>
</div>
</FloatingFocusManager>

15
src/ToolsProvider.tsx
View file

@ -42,6 +42,7 @@ type ObjectFilters = {
Saturation?: number;
Brightness?: number;
Contrast?: number;
Opacity?: number;
};
export default function ToolsProvider({ children }: { children: ReactNode }) {
@ -171,6 +172,7 @@ export default function ToolsProvider({ children }: { children: ReactNode }) {
const getFilter = (
name: keyof ObjectFilters
): [number | null, (value: number) => void] => {
const defaultValue = name === "Opacity" ? 1 : 0;
let applyObjects = selectedObjects;
if (layerMode === "AllLayers") {
applyObjects = canvas?._objects ?? [];
@ -182,7 +184,7 @@ export default function ToolsProvider({ children }: { children: ReactNode }) {
);
if (applyObjects.length) {
const getValue = (i: number) =>
(filterMap.get(applyObjects[i]) ?? {})[name] ?? 0;
(filterMap.get(applyObjects[i]) ?? {})[name] ?? defaultValue;
const firstValue = getValue(0);
if (
applyObjects
@ -193,7 +195,7 @@ export default function ToolsProvider({ children }: { children: ReactNode }) {
}
return [null, (value: number) => setFilter(name, value)];
} else {
return [0, (value: number) => setFilter(name, value)];
return [defaultValue, (value: number) => setFilter(name, value)];
}
};
@ -201,6 +203,7 @@ export default function ToolsProvider({ children }: { children: ReactNode }) {
const [saturation, setSaturation] = getFilter("Saturation");
const [brightness, setBrightness] = getFilter("Brightness");
const [contrast, setContrast] = getFilter("Contrast");
const [opacity, setOpacity] = getFilter("Opacity");
useEffect(() => {
if (!filterChanges.length) {
@ -245,6 +248,9 @@ export default function ToolsProvider({ children }: { children: ReactNode }) {
})
);
break;
case "Opacity":
selectedObject.opacity = filterValue;
break;
}
}
}
@ -575,6 +581,8 @@ export default function ToolsProvider({ children }: { children: ReactNode }) {
setBrightness,
contrast,
setContrast,
opacity,
setOpacity,
layerMode,
setLayerMode,
selectedObjects,
@ -619,6 +627,8 @@ export default function ToolsProvider({ children }: { children: ReactNode }) {
setBrightness,
contrast,
setContrast,
opacity,
setOpacity,
layerMode,
selectedObjects,
lockSelection,
@ -641,7 +651,6 @@ export default function ToolsProvider({ children }: { children: ReactNode }) {
hasAnimation,
frameCount,
sizeMultiplier,
setSizeMultiplier,
selectedExportMaterials,
]
);

2
src/useTools.ts
View file

@ -19,6 +19,8 @@ interface ToolsContextValue {
setBrightness: (brightness: number) => void;
contrast: number | null;
setContrast: (contrast: number) => void;
opacity: number | null;
setOpacity: (opacity: number) => void;
layerMode: string;
setLayerMode: (layerMode: string) => void;
deleteSelection: () => void;