smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: implement custom Range component for opacity control (#9009)

Browse source 
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
Saikat Das 2025-01-30 03:16:40 +05:30 • committed by GitHub
parent d29c3db7f6
commit bd1590fc74
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 136 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

26
packages/excalidraw/actions/actionProperties.tsx
View file

@ -121,6 +121,7 @@ import {
import { LinearElementEditor } from "../element/linearElementEditor";
import type { LocalPoint } from "../../math";
import { pointFrom } from "../../math";
import { Range } from "../components/Range";
const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
@ -630,25 +631,12 @@ export const actionChangeOpacity = register({
};
},
PanelComponent: ({ elements, appState, updateData }) => (
<label className="control-label">
{t("labels.opacity")}
<input
type="range"
min="0"
max="100"
step="10"
onChange={(event) => updateData(+event.target.value)}
value={
getFormValue(
elements,
appState,
(element) => element.opacity,
true,
appState.currentItemOpacity,
) ?? undefined
}
/>
</label>
<Range
updateData={updateData}
elements={elements}
appState={appState}
testId="opacity"
/>
),
});