syntaxbullet/image-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance bottom controls and UI components

Browse Source 
- Updated BottomControlsIsland for improved layout and styling.
- Refactored LayersSheet to enhance usability and visual consistency.
- Modified ToolOverlay for better tool selection experience.
- Improved BrushControls with new ColorPicker and Slider components.
- Enhanced PanControls and TransformControls for better user interaction.
- Updated ZoomControls for consistent button sizes and styles.
- Introduced new styles for bottom controls in styles.ts and index.css.
- Added BottomControlColorPicker, BottomControlSelectMenu, and BottomControlSlider components for better modularity and reusability.
This commit is contained in:
syntaxbullet
2026-07-03 22:28:34 +02:00
parent 4590b47e19
commit e8073e6146
16 changed files with 409 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
renderer/renderer.ts
View File

@@ -53,7 +53,7 @@ export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBacke
context.viewport(0, 0, w, h);
context.disable(context.SCISSOR_TEST);
context.clearColor(0.18, 0.18, 0.2, 1);
context.clearColor(0, 0, 0, 0);
context.clear(context.COLOR_BUFFER_BIT);
context.enable(context.SCISSOR_TEST);

6
renderer/selection.ts
View File

@@ -5,7 +5,8 @@ import { clearScreenRect } from "./clear-rect";
import { documentRectToScreenRect } from "./screen-rect";
import type { RgbaColor, ScreenRect, WebGlRendererContext } from "./types";
const selectionColor: RgbaColor = [0.1, 0.65, 1, 1];
const selectionOuterColor: RgbaColor = [0, 0, 0, 1];
const selectionInnerColor: RgbaColor = [1, 1, 1, 1];
export function renderSelectionOverlay(context: WebGlRendererContext, document: ImageDocument, editor: EditorState) {
const target = selectedTransformTarget(document, editor.selection);
@@ -13,7 +14,8 @@ export function renderSelectionOverlay(context: WebGlRendererContext, document:
if (!bounds) return;
const rect = documentRectToScreenRect(context.canvas, bounds, editor.viewport);
renderScreenRectStroke(context, rect, 3, selectionColor);
renderScreenRectStroke(context, rect, 6, selectionOuterColor);
renderScreenRectStroke(context, rect, 2, selectionInnerColor);
}
function renderScreenRectStroke(context: WebGlRendererContext, rect: ScreenRect, width: number, color: RgbaColor) {

8
renderer/transform-controls.ts
View File

@@ -5,8 +5,8 @@ import { clearScreenRect } from "./clear-rect";
import { documentRectToScreenRect } from "./screen-rect";
import type { RgbaColor, ScreenRect, WebGlRendererContext } from "./types";
const handleColor: RgbaColor = [1, 1, 1, 1];
const handleBorderColor: RgbaColor = [0.1, 0.65, 1, 1];
const handleFillColor: RgbaColor = [0, 0, 0, 0.88];
const handleBorderColor: RgbaColor = [1, 1, 1, 0.95];
export function renderTransformControls(context: WebGlRendererContext, document: ImageDocument, editor: EditorState) {
const target = selectedTransformTarget(document, editor.selection);
@@ -16,12 +16,12 @@ export function renderTransformControls(context: WebGlRendererContext, document:
const rect = documentRectToScreenRect(context.canvas, bounds, editor.viewport);
for (const handle of transformHandleRects(rect)) {
clearScreenRect(context, handle.border, handleBorderColor);
clearScreenRect(context, handle.fill, handleColor);
clearScreenRect(context, handle.fill, handleFillColor);
}
}
function transformHandleRects(rect: ScreenRect) {
const size = 8;
const size = 12;
const border = 2;
const half = size / 2;
const points = [