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

feat: add ComfyUI integration for image generation and management

Browse Source 
- Implemented ComfyGenerateRequest type and associated functions for generating images using various architectures and modes.
- Added functions for listing generation options and handling image uploads.
- Created workflows for different generation modes including SDXL, Z-Image, Z-Image Turbo, and Anima.
- Introduced GenerationJobStatus component to display the status of ongoing generation jobs.
- Developed MaskControls for managing mask operations and displaying mask analysis.
- Created palette items for tool selection, layer management, and generation settings.
This commit is contained in:
syntaxbullet
2026-07-10 23:15:02 +02:00
parent 41bbd1e16b
commit 5e4b548ad4
80 changed files with 2114 additions and 1954 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
input/document-geometry.ts
View File

@@ -1,7 +1,5 @@
import type { ImageDocument } from "@core/document";
import type { Rect, Size, Vec2D } from "@core/geometry";
import type { ArtboardId, LayerId } from "@core/id";
import type { Layer } from "@core/layer";
import type { InputArtboardId, InputDocument, InputLayer, InputLayerId } from "./read-model";
export type InputViewportState = {
center: Vec2D;
@@ -11,21 +9,21 @@ export type InputViewportState = {
};
export type InputSelectionState = {
artboardId?: ArtboardId;
layerIds: LayerId[];
artboardId?: InputArtboardId;
layerIds: InputLayerId[];
};
export type InputTransformTarget =
| { type: "artboard"; id: ArtboardId }
| { type: "layer"; id: LayerId };
| { type: "artboard"; id: InputArtboardId }
| { type: "layer"; id: InputLayerId };
export function selectedTransformTarget(_document: ImageDocument, selection: InputSelectionState): InputTransformTarget | undefined {
export function selectedTransformTarget(_document: InputDocument, selection: InputSelectionState): InputTransformTarget | undefined {
if (selection.layerIds.length === 1 && selection.layerIds[0]) return { type: "layer", id: selection.layerIds[0] };
if (selection.artboardId) return { type: "artboard", id: selection.artboardId };
return undefined;
}
export function resolveTransformTargetBounds(document: ImageDocument, target: InputTransformTarget): Rect | undefined {
export function resolveTransformTargetBounds(document: InputDocument, target: InputTransformTarget): Rect | undefined {
switch (target.type) {
case "artboard":
return document.artboards.find((artboard) => artboard.id === target.id)?.bounds;
@@ -52,7 +50,7 @@ export function documentRectToViewportRect(rect: Rect, viewport: InputViewportSt
};
}
function findLayer(document: ImageDocument, layerId: LayerId): Layer | undefined {
function findLayer(document: InputDocument, layerId: InputLayerId): InputLayer | undefined {
for (const artboard of document.artboards) {
const layer = findLayerInTree(artboard.layers, layerId);
if (layer) return layer;
@@ -61,7 +59,7 @@ function findLayer(document: ImageDocument, layerId: LayerId): Layer | undefined
return undefined;
}
function findLayerInTree(layers: readonly Layer[], layerId: LayerId): Layer | undefined {
function findLayerInTree(layers: readonly InputLayer[], layerId: InputLayerId): InputLayer | undefined {
for (const layer of layers) {
if (layer.id === layerId) return layer;
if (layer.type === "group") {
@@ -73,7 +71,7 @@ function findLayerInTree(layers: readonly Layer[], layerId: LayerId): Layer | un
return undefined;
}
function resolveLayerBounds(document: ImageDocument, layer: Layer): Rect | undefined {
function resolveLayerBounds(document: InputDocument, layer: InputLayer): Rect | undefined {
switch (layer.type) {
case "group":
return unionRects(layer.children.flatMap((child) => {

3
input/layers-panel.test.ts
View File

@@ -1,7 +1,6 @@
import { describe, expect, test } from "bun:test";
import { commandIds } from "@commands/ids";
import type { ImageDocument } from "@core/document";
import type { Layer } from "@core/layer";
import type { InputDocument as ImageDocument, InputLayer as Layer } from "./read-model";
import { handleDeleteSelectionKey, resolveLayerDrop } from "./layers-panel";
const document: ImageDocument = {

10
input/layers-panel.ts
View File

@@ -1,8 +1,6 @@
import { commandIds } from "@commands/ids";
import type { Dispatch } from "@commands/dispatcher";
import type { ImageDocument } from "@core/document";
import type { ArtboardId, LayerId } from "@core/id";
import type { Layer } from "@core/layer";
import type { InputArtboardId as ArtboardId, InputDocument, InputLayer as Layer, InputLayerId as LayerId } from "./read-model";
import type { KeybindEvent } from "./keyboard";
export type LayerInfo = {
@@ -33,7 +31,7 @@ export function handleDeleteSelectionKey(options: { event: KeybindEvent; selecti
}
export function resolveLayerDrop(options: {
document: ImageDocument;
document: InputDocument;
sourceLayerId: LayerId;
target: LayerDropTarget;
verticalRatio: number;
@@ -75,7 +73,7 @@ export function resolveLayerDrop(options: {
};
}
export function findLayerInfoInDocument(document: ImageDocument, layerId?: LayerId): LayerInfo | undefined {
export function findLayerInfoInDocument(document: InputDocument, layerId?: LayerId): LayerInfo | undefined {
if (!layerId) return undefined;
for (const artboard of document.artboards) {
const found = findLayerInfo(artboard.layers, layerId, artboard.id);
@@ -84,7 +82,7 @@ export function findLayerInfoInDocument(document: ImageDocument, layerId?: Layer
return undefined;
}
export function findGroup(document: ImageDocument, groupId: LayerId): Extract<Layer, { type: "group" }> | undefined {
export function findGroup(document: InputDocument, groupId: LayerId): Extract<Layer, { type: "group" }> | undefined {
const info = findLayerInfoInDocument(document, groupId);
return info?.layer.type === "group" ? info.layer : undefined;
}

27
input/read-model.ts Normal file
View File

@@ -0,0 +1,27 @@
import type { Rect, Size, Transform } from "@core/geometry";
export type InputLayerId = string;
export type InputArtboardId = string;
type InputBaseLayer = {
id: InputLayerId;
name?: string;
visible: boolean;
locked: boolean;
opacity?: number;
transform: Transform;
layerMask?: { maskLayerId: InputLayerId };
clippingMask?: { maskLayerId: InputLayerId };
};
export type InputLayer =
| (InputBaseLayer & { type: "group"; children: InputLayer[] })
| (InputBaseLayer & { type: "image" | "raster"; assetId: string });
export type InputDocument = {
id?: string;
name?: string;
version?: number;
assets: Array<{ id: string; name?: string; mimeType?: string; source?: string; intrinsicSize: Size }>;
artboards: Array<{ id: InputArtboardId; name?: string; backgroundColor?: string; visible: boolean; locked: boolean; bounds: Rect; layers: InputLayer[] }>;
};

2
input/selection.test.ts
View File

@@ -1,6 +1,6 @@
import { describe, expect, test } from "bun:test";
import { commandIds } from "@commands/ids";
import type { ImageDocument } from "@core/document";
import type { InputDocument as ImageDocument } from "./read-model";
import { handleArtboardSelection } from "./selection";
import type { PointerInputEvent } from "./pointer";

14
input/selection.ts
View File

@@ -1,14 +1,12 @@
import { commandIds } from "@commands/ids";
import type { Dispatch } from "@commands/dispatcher";
import type { ImageDocument } from "@core/document";
import type { Layer } from "@core/layer";
import { getLayerMask } from "@core/layer-mask-utils";
import type { InputDocument, InputLayer } from "./read-model";
import { resolveTransformTargetBounds, viewportPointToDocumentPoint, type InputViewportState } from "./document-geometry";
import type { PointerInputEvent } from "./pointer";
export function handleArtboardSelection(options: {
event: PointerInputEvent;
document: ImageDocument;
document: InputDocument;
viewport: InputViewportState;
dispatch: Dispatch;
}): boolean {
@@ -36,7 +34,7 @@ export function handleArtboardSelection(options: {
return true;
}
function findTopmostLayerAtPoint(document: ImageDocument, point: { x: number; y: number }) {
function findTopmostLayerAtPoint(document: InputDocument, point: { x: number; y: number }) {
const maskLayerIds = collectMaskLayerIds(document.artboards.flatMap((artboard) => artboard.layers));
for (const artboard of [...document.artboards].reverse()) {
if (!artboard.visible || artboard.locked) continue;
@@ -47,7 +45,7 @@ function findTopmostLayerAtPoint(document: ImageDocument, point: { x: number; y:
return undefined;
}
function findTopmostLayerInTreeAtPoint(document: ImageDocument, layers: Layer[], point: { x: number; y: number }, maskLayerIds: ReadonlySet<string>): string | undefined {
function findTopmostLayerInTreeAtPoint(document: InputDocument, layers: InputLayer[], point: { x: number; y: number }, maskLayerIds: ReadonlySet<string>): string | undefined {
for (const layer of layers) {
if (!layer.visible || layer.locked || maskLayerIds.has(layer.id)) continue;
if (layer.type === "group") {
@@ -64,9 +62,9 @@ function findTopmostLayerInTreeAtPoint(document: ImageDocument, layers: Layer[],
return undefined;
}
function collectMaskLayerIds(layers: readonly Layer[], ids = new Set<string>()): Set<string> {
function collectMaskLayerIds(layers: readonly InputLayer[], ids = new Set<string>()): Set<string> {
for (const layer of layers) {
const layerMask = getLayerMask(layer);
const layerMask = layer.layerMask ?? layer.clippingMask;
if (layerMask) ids.add(layerMask.maskLayerId);
if (layer.type === "group") collectMaskLayerIds(layer.children, ids);
}

2
input/transform-controls.test.ts
View File

@@ -1,6 +1,6 @@
import { describe, expect, test } from "bun:test";
import { commandIds } from "@commands/ids";
import type { ImageDocument } from "@core/document";
import type { InputDocument as ImageDocument } from "./read-model";
import type { PointerInputEvent } from "./pointer";
import { createTransformControlsInputController, hitTestArtboardTransformHandle, type TransformControlsEditorState } from "./transform-controls";

6
input/transform-controls.ts
View File

@@ -1,7 +1,7 @@
import { commandIds } from "@commands/ids";
import type { Dispatch } from "@commands/dispatcher";
import type { ImageDocument } from "@core/document";
import type { Rect, Vec2D } from "@core/geometry";
import type { InputDocument } from "./read-model";
import {
documentRectToViewportRect,
resolveTransformTargetBounds,
@@ -39,7 +39,7 @@ export type TransformControlsInputController = {
};
export function createTransformControlsInputController(options: {
getDocument: () => ImageDocument;
getDocument: () => InputDocument;
getEditor: () => TransformControlsEditorState;
dispatch: Dispatch;
}): TransformControlsInputController {
@@ -93,7 +93,7 @@ export function hitTestArtboardTransformHandle(position: Vec2D, bounds: Rect, vi
return undefined;
}
function isTransformTargetLocked(document: ImageDocument, target: InputTransformTarget) {
function isTransformTargetLocked(document: InputDocument, target: InputTransformTarget) {
if (target.type === "artboard") {
const artboard = document.artboards.find((candidate) => candidate.id === target.id);
return !artboard || !artboard.visible || artboard.locked;