Compare commits

...

13 Commits

Author SHA1 Message Date
psychedelicious
3704573ef8 chore: bump version to v5.14.0 2025-06-06 22:36:32 +10:00
Hiroto N
01fbf2ce4d translationBot(ui): update translation (Japanese)
Currently translated at 76.5% (1467 of 1917 strings)

Co-authored-by: Hiroto N <hironow365@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/ja/
Translation: InvokeAI/Web UI
2025-06-06 20:56:13 +10:00
Riccardo Giovanetti
96e7003449 translationBot(ui): update translation (Italian)
Currently translated at 98.9% (1896 of 1917 strings)

Co-authored-by: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/it/
Translation: InvokeAI/Web UI
2025-06-06 20:56:13 +10:00
RyoKoba
80197b8856 translationBot(ui): update translation (Japanese)
Currently translated at 76.1% (1460 of 1917 strings)

Co-authored-by: RyoKoba <kobayashi_ryo@cyberagent.co.jp>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/ja/
Translation: InvokeAI/Web UI
2025-06-06 20:52:36 +10:00
Hosted Weblate
0187bc671e translationBot(ui): update translation files
Updated by "Cleanup translation files" hook in Weblate.

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/
Translation: InvokeAI/Web UI
2025-06-06 20:52:36 +10:00
psychedelicious
31584daabe feat(ui): display canvas spinner during compositing operations 2025-06-06 20:50:02 +10:00
psychedelicious
a6cb522fed feat(ui): add bboxUpdated callback to transformer, use it to fit layer to stage when creating new canvas from an image
When a layer is initialized, we do not yet know its bbox, so we cannot fit the stage view to the layer. We have to wait for the bbox calculation to finish. Previously, we had no way to wait unti lthat bbox calculation was complete to take an action.

For example, this means we could not fit the layers to the stage immediately after creating a new layer, bc we don't know the dimensions of the layer yet.

This callback lets us do that. When creating a new canvas from an image, we now...
- Register a bbox update callback to fit the layers to stage
- Layer is created
- Canvas initializes the layer's entity adapter module (layer's width and height are set to zero at this point)
- Canvas calculates the bbox
- Bbox is updated (width and height are now correct)
- Callback is ran, fitting layer to stage
2025-06-06 20:50:02 +10:00
psychedelicious
f70be1e415 feat(ui): animate stage fit operations (e.g. fit layers to stage) 2025-06-06 20:50:02 +10:00
psychedelicious
a2901f2b46 feat(ui): add method to stage to fit to union of bbox and layers
This ensures that _both_ bbox and layers are visible
2025-06-06 20:50:02 +10:00
psychedelicious
b61c66c3a9 feat(ui): add spinner indicator to canvas during rasterizing operations and while pending rect calculations 2025-06-06 20:50:02 +10:00
psychedelicious
c77f9ec202 feat(ui): add hook to get all entity adapters in array 2025-06-06 20:50:02 +10:00
psychedelicious
2c5c35647f fix(ui): new canvas from image places image in bbox correctly 2025-06-06 20:50:02 +10:00
dunkeroni
bf0fdbd10e Fix: inpaint model mask using wrong tensor name 2025-06-05 11:31:35 -04:00
13 changed files with 428 additions and 51 deletions

View File

@@ -184,7 +184,7 @@ class CreateGradientMaskInvocation(BaseInvocation):
main_model_config = context.models.get_config(self.unet.unet.key)
assert isinstance(main_model_config, MainConfigBase)
if main_model_config.variant is ModelVariantType.Inpaint:
mask = mask_tensor
mask = dilated_mask_tensor
vae_info: LoadedModel = context.models.load(self.vae.vae)
image = context.images.get_pil(self.image.image_name)
image_tensor = image_resized_to_grid_as_tensor(image.convert("RGB"))

View File

@@ -2452,9 +2452,8 @@
"watchRecentReleaseVideos": "Guarda i video su questa versione",
"watchUiUpdatesOverview": "Guarda le novità dell'interfaccia",
"items": [
"GPU Nvidia 50xx: Invoke utilizza PyTorch 2.7.0, necessario per queste GPU.",
"Relazioni tra modelli: collega i LoRA ai modelli principali e i LoRA verranno visualizzati per primi nell'elenco.",
"Adattatore IP: nuovi metodi Style (Strong) e Style (Precise) per i modelli SDXL e SD1.5."
"Inpainting: livelli di rumore per maschera e limiti di denoise.",
"Canvas: proporzioni più intelligenti per SDXL e scorrimento e zoom migliorati."
]
},
"system": {

View File

@@ -392,7 +392,7 @@
"title": "全選択"
},
"addNode": {
"desc": "ノード追加メニューを開く",
"desc": "ノード追加メニューを開く",
"title": "ノードを追加"
},
"pasteSelectionWithEdges": {
@@ -1156,11 +1156,11 @@
"unknownField": "不明なフィールド",
"unexpectedField_withName": "予期しないフィールド\"{{name}}\"",
"loadingTemplates": "読み込み中 {{name}}",
"validateConnectionsHelp": "無効な接続が行われたり,無効なグラフが呼び出されたりしないようにします.",
"validateConnectionsHelp": "無効な接続が行われたり,無効なグラフが呼び出されたりしないようにします",
"validateConnections": "接続とグラフを確認する",
"saveToGallery": "ギャラリーに保存",
"newWorkflowDesc": "新しいワークフローを作りますか?",
"unknownFieldType": "$t(nodes.unknownField)型:{type}}",
"unknownFieldType": "$t(nodes.unknownField)型: {{type}}",
"unsupportedArrayItemType": "サポートされていない配列項目型です \"{{type}}\"",
"unableToLoadWorkflow": "ワークフローが読み込めません",
"unableToValidateWorkflow": "ワークフローを確認できません",
@@ -1203,13 +1203,13 @@
"downloadBoard": "ボードをダウンロード",
"changeBoard": "ボードを変更",
"loading": "ロード中...",
"topMessage": "このボードには、以下の機能で使用されている画像が含まれています",
"bottomMessage": "このボードおよび画像を削除すると、現在これらを利用している機能はリセットされます。",
"topMessage": "この選択には、の機能で使用される画像が含まれています:",
"bottomMessage": "この画像を削除すると、現在利用している機能はリセットされます。",
"clearSearch": "検索をクリア",
"deleteBoard": "ボードの削除",
"deleteBoardAndImages": "ボードと画像の削除",
"deleteBoardOnly": "ボードのみ削除",
"deletedBoardsCannotbeRestored": "削除されたボードは復元できません。\"ボードのみ削除\"を選択すると画像は未分類に移動されます。",
"deletedBoardsCannotbeRestored": "削除たボードと画像は復元できません。ボードのみ削除を選択すると画像は未分類の状態になります。",
"movingImagesToBoard_other": "{{count}} の画像をボードに移動:",
"hideBoards": "ボードを隠す",
"assetsWithCount_other": "{{count}} のアセット",
@@ -1224,9 +1224,12 @@
"imagesWithCount_other": "{{count}} の画像",
"updateBoardError": "ボード更新エラー",
"selectedForAutoAdd": "自動追加に選択済み",
"deletedPrivateBoardsCannotbeRestored": "削除されたボードは復元できません。\"ボードのみ削除\"を選択すると画像はその作成者のプライベートな未分類に移動されます。",
"deletedPrivateBoardsCannotbeRestored": "削除されたボードと画像は復元できません。ボードのみ削除を選択すると画像は作成者に対して非公開の未分類状態になります。",
"noBoards": "{{boardType}} ボードがありません",
"viewBoards": "ボードを表示"
"viewBoards": "ボードを表示",
"uncategorizedImages": "分類されていない画像",
"deleteAllUncategorizedImages": "分類されていないすべての画像を削除",
"deletedImagesCannotBeRestored": "削除した画像は復元できません."
},
"invocationCache": {
"invocationCache": "呼び出しキャッシュ",
@@ -1292,25 +1295,49 @@
]
},
"paramUpscaleMethod": {
"heading": "アップスケール手法"
"heading": "アップスケール手法",
"paragraphs": [
"高解像度修正のために画像を拡大するために使用される方法。"
]
},
"upscaleModel": {
"heading": "アップスケールモデル"
"heading": "アップスケールモデル",
"paragraphs": [
"アップスケールモデルは、ディテールを追加する前に画像を出力サイズに合わせて拡大縮小します。サポートされているアップスケールモデルであればどれでも使用できますが、写真や線画など、特定の種類の画像に特化したモデルもあります。"
]
},
"paramAspect": {
"heading": "縦横比"
"heading": "縦横比",
"paragraphs": [
"生成される画像のアスペクト比。比率を変更すると、幅と高さもそれに応じて更新されます。",
"「最適化」は、選択したモデルの幅と高さを最適な寸法に設定します。"
]
},
"refinerSteps": {
"heading": "ステップ"
"heading": "ステップ",
"paragraphs": [
"生成プロセスのリファイナー部分で実行されるステップの数。",
"生成ステップと似ています。"
]
},
"paramVAE": {
"heading": "VAE"
"heading": "VAE",
"paragraphs": [
"AI 出力を最終画像に変換するために使用されるモデル。"
]
},
"scale": {
"heading": "スケール"
"heading": "スケール",
"paragraphs": [
"スケールは出力画像のサイズを制御し、入力画像の解像度の倍数に基づいて決定されます。例えば、1024x1024の画像を2倍に拡大すると、2048x2048の出力が生成されます。"
]
},
"refinerScheduler": {
"heading": "スケジューラー"
"heading": "スケジューラー",
"paragraphs": [
"生成プロセスのリファイナー部分で使用されるスケジューラ。",
"生成スケジューラに似ています。"
]
},
"compositingCoherenceMode": {
"heading": "モード",
@@ -1319,10 +1346,16 @@
]
},
"paramModel": {
"heading": "モデル"
"heading": "モデル",
"paragraphs": [
"生成に使用されるモデル。異なるモデルは、異なる美的結果とコンテンツを生成するように特化するようにトレーニングされています。"
]
},
"paramHeight": {
"heading": "高さ"
"heading": "高さ",
"paragraphs": [
"生成される画像の高さ。8の倍数にする必要があります。"
]
},
"paramSteps": {
"heading": "ステップ",
@@ -1345,7 +1378,11 @@
]
},
"paramIterations": {
"heading": "生成回数"
"heading": "生成回数",
"paragraphs": [
"生成する画像の数。",
"動的プロンプトが有効になっている場合、各プロンプトはこの回数生成されます。"
]
},
"controlNet": {
"heading": "ControlNet",
@@ -1354,7 +1391,10 @@
]
},
"paramWidth": {
"heading": "幅"
"heading": "幅",
"paragraphs": [
"生成される画像の幅。8の倍数にする必要があります。"
]
},
"lora": {
"heading": "LoRA",
@@ -1369,7 +1409,11 @@
]
},
"patchmatchDownScaleSize": {
"heading": "Downscale"
"heading": "Downscale",
"paragraphs": [
"埋め込む前にどの程度のダウンスケーリングが行われるか。",
"ダウンスケーリングを大きくするとパフォーマンスは向上しますが、品質は低下します。"
]
},
"controlNetWeight": {
"heading": "重み",
@@ -1511,6 +1555,124 @@
"paragraphs": [
"アウトペインティングまたはインペインティングのプロセス中に埋め込む方法."
]
},
"paramGuidance": {
"paragraphs": [
"プロンプトが生成プロセスにどの程度影響するかを制御します。",
"ガイダンス値が高すぎると過飽和状態になる可能性があり、ガイダンス値が高すぎるか低すぎると生成結果に歪みが生じる可能性があります。ガイダンスはFLUX DEVモデルにのみ適用されます。"
],
"heading": "ガイダンス"
},
"paramDenoisingStrength": {
"paragraphs": [
"生成されたイメージがラスター レイヤーとどの程度異なるかを制御します。",
"強度が低いほど、結合された表示ラスターレイヤーに近くなります。強度が高いほど、グローバルプロンプトに大きく依存します。",
"表示されるコンテンツを持つラスター レイヤーがない場合、この設定は無視されます。"
],
"heading": "ディノイジングストレングス"
},
"refinerStart": {
"heading": "リファイナースタート",
"paragraphs": [
"生成プロセスのどの時点でリファイナーが使用され始めるか。",
"0 はリファイナーが生成プロセス全体で使用されることを意味し、0.8 は、リファイナーが生成プロセスの最後の 20% で使用されることを意味します。"
]
},
"optimizedDenoising": {
"heading": "イメージtoイメージの最適化",
"paragraphs": [
"「イメージtoイメージを最適化」を有効にすると、Fluxモデルを用いた画像間変換およびインペインティング変換において、より段階的なイズ除去強度スケールが適用されます。この設定により、画像に適用される変化量を制御する能力が向上しますが、標準のイズ除去強度スケールを使用したい場合はオフにすることができます。この設定は現在調整中で、ベータ版です。"
]
},
"refinerPositiveAestheticScore": {
"heading": "ポジティブ美的スコア",
"paragraphs": [
"トレーニング データに基づいて、美的スコアの高い画像に類似するように生成を重み付けします。"
]
},
"paramCFGScale": {
"paragraphs": [
"プロンプトが生成プロセスにどの程度影響するかを制御します。",
"CFG スケールの値が高すぎると、飽和しすぎて生成結果が歪む可能性があります。 "
],
"heading": "CFGスケール"
},
"paramVAEPrecision": {
"paragraphs": [
"VAE エンコードおよびデコード時に使用される精度。",
"Fp16/Half 精度は、画像のわずかな変化を犠牲にして、より効率的です。"
],
"heading": "VAE精度"
},
"refinerModel": {
"heading": "リファイナーモデル",
"paragraphs": [
"生成プロセスの精製部分で使用されるモデル。",
"世代モデルに似ています。"
]
},
"refinerCfgScale": {
"heading": "CFGスケール",
"paragraphs": [
"プロンプトが生成プロセスに与える影響を制御する。",
"生成CFG スケールに似ています。"
]
},
"seamlessTilingYAxis": {
"heading": "シームレスタイリングY軸",
"paragraphs": [
"画像を垂直軸に沿ってシームレスに並べます。"
]
},
"scaleBeforeProcessing": {
"heading": "プロセス前のスケール値",
"paragraphs": [
"「自動」は、画像生成プロセスの前に、選択した領域をモデルに最適なサイズに拡大縮小します。",
"「手動」では、画像生成プロセスの前に、選択した領域を拡大縮小する幅と高さを選択できます。"
]
},
"creativity": {
"heading": "クリエイティビティ",
"paragraphs": [
"クリエイティビティは、ディテールを追加する際のモデルに与えられる自由度を制御します。クリエイティビティが低いと元のイメージに近いままになり、クリエイティビティが高いとより多くの変化を加えることができます。プロンプトを使用する場合、クリエイティビティが高いとプロンプトの影響が増します。"
]
},
"paramHrf": {
"heading": "高解像度修正を有効にする",
"paragraphs": [
"モデルに最適な解像度よりも高い解像度で、高品質な画像を生成します。通常、生成された画像内の重複を防ぐために使用されます。"
]
},
"seamlessTilingXAxis": {
"heading": "シームレスタイリングX軸",
"paragraphs": [
"画像を水平軸に沿ってシームレスに並べます。"
]
},
"paramCFGRescaleMultiplier": {
"paragraphs": [
"ゼロ端末 SNR (ztsnr) を使用してトレーニングされたモデルに使用される、CFG ガイダンスのリスケールマルチプライヤー。",
"これらのモデルの場合、推奨値は 0.7 です。"
],
"heading": "CFG リスケールマルチプライヤー"
},
"structure": {
"heading": "ストラクチャ",
"paragraphs": [
"ストラクチャは、出力画像が元のレイアウトにどれだけ忠実に従うかを制御します。低いストラクチャでは大幅な変更が可能ですが、高いストラクチャでは元の構成とレイアウトが厳密に維持されます。"
]
},
"refinerNegativeAestheticScore": {
"paragraphs": [
"トレーニング データに基づいて、美観スコアが低い画像に類似するように生成に重み付けします。"
],
"heading": "ネガティブ美的スコア"
},
"fluxDevLicense": {
"heading": "非商用ライセンス",
"paragraphs": [
"FLUX.1 [dev]モデルは、FLUX [dev]非商用ライセンスに基づいてライセンスされています。Invokeでこのモデルタイプを商用目的で使用する場合は、当社のウェブサイトをご覧ください。"
]
}
},
"accordions": {
@@ -1683,7 +1845,106 @@
"workflows": "ワークフロー",
"ascending": "昇順",
"name": "名前",
"descending": "降順"
"descending": "降順",
"searchPlaceholder": "名前、説明、タグで検索",
"projectWorkflows": "プロジェクトワークフロー",
"searchWorkflows": "ワークフローを検索",
"updated": "アップデート",
"published": "公表",
"builder": {
"label": "ラベル",
"containerPlaceholder": "空のコンテナ",
"showDescription": "説明を表示",
"emptyRootPlaceholderEditMode": "開始するには、フォーム要素またはノード フィールドをここにドラッグします。",
"divider": "仕切り",
"deleteAllElements": "すべてのフォーム要素を削除",
"heading": "見出し",
"nodeField": "ノードフィールド",
"zoomToNode": "ノードにズーム",
"dropdown": "ドロップダウン",
"resetOptions": "オプションをリセット",
"both": "両方",
"builder": "フォームビルダー",
"text": "テキスト",
"row": "行",
"multiLine": "マルチライン",
"resetAllNodeFields": "すべてのノードフィールドをリセット",
"slider": "スライダー",
"layout": "レイアウト",
"addToForm": "フォームに追加",
"headingPlaceholder": "空の見出し",
"nodeFieldTooltip": "ノード フィールドを追加するには、ワークフロー エディターのフィールドにある小さなプラス記号ボタンをクリックするか、フィールド名をフォームにドラッグします。",
"workflowBuilderAlphaWarning": "ワークフロービルダーは現在アルファ版です。安定版リリースまでに互換性に影響する変更が発生する可能性があります。",
"component": "コンポーネント",
"textPlaceholder": "空のテキスト",
"emptyRootPlaceholderViewMode": "このワークフローのフォームの作成を開始するには、[編集] をクリックします。",
"addOption": "オプションを追加",
"singleLine": "単線",
"numberInput": "数値入力",
"column": "列",
"container": "コンテナ",
"containerRowLayout": "コンテナ(行レイアウト)",
"containerColumnLayout": "コンテナ(列レイアウト)",
"maximum": "最大",
"published": "公開済み",
"publishedWorkflowOutputs": "アウトプット",
"minimum": "最小",
"publish": "公開",
"unpublish": "非公開",
"publishedWorkflowInputs": "インプット"
},
"chooseWorkflowFromLibrary": "ライブラリからワークフローを選択",
"unnamedWorkflow": "名前のないワークフロー",
"download": "ダウンロード",
"savingWorkflow": "ワークフローを保存しています...",
"problemSavingWorkflow": "ワークフローの保存に関する問題",
"convertGraph": "グラフを変換",
"downloadWorkflow": "ファイルに保存",
"saveWorkflow": "ワークフローを保存",
"userWorkflows": "ユーザーワークフロー",
"yourWorkflows": "あなたのワークフロー",
"edit": "編集",
"workflowLibrary": "ワークフローライブラリ",
"workflowSaved": "ワークフローが保存されました",
"clearWorkflowSearchFilter": "ワークフロー検索フィルタをクリア",
"workflowCleared": "ワークフローが作成されました",
"autoLayout": "オートレイアウト",
"view": "ビュー",
"saveChanges": "変更を保存",
"noDescription": "説明なし",
"recommended": "あなたへのおすすめ",
"noRecentWorkflows": "最近のワークフローがありません",
"problemLoading": "ワークフローのローディングに関する問題",
"newWorkflowCreated": "新しいワークフローが作成されました",
"noWorkflows": "ワークフローがありません",
"copyShareLink": "共有リンクをコピー",
"copyShareLinkForWorkflow": "ワークフローの共有リンクをコピー",
"workflowThumbnail": "ワークフローサムネイル",
"loadWorkflow": "$t(common.load) ワークフロー",
"shared": "共有",
"openWorkflow": "ワークフローを開く",
"emptyStringPlaceholder": "<空の文字列>",
"browseWorkflows": "ワークフローを閲覧する",
"saveWorkflowAs": "ワークフローとして保存",
"private": "プライベート",
"deselectAll": "すべて選択解除",
"delete": "削除",
"openLibrary": "ライブラリを開く",
"loadMore": "もっと読み込む",
"saveWorkflowToProject": "ワークフローをプロジェクトに保存",
"created": "作成されました",
"workflowEditorMenu": "ワークフローエディターメニュー",
"defaultWorkflows": "デフォルトワークフロー",
"allLoaded": "すべてのワークフローが読み込まれました",
"filterByTags": "タグでフィルター",
"recentlyOpened": "最近開いた",
"opened": "オープン",
"deleteWorkflow": "ワークフローを削除",
"deleteWorkflow2": "このワークフローを削除してもよろしいですか? 元に戻すことはできません。",
"loadFromGraph": "グラフからワークフローをロード",
"workflowName": "ワークフロー名",
"loading": "ワークフローをロードしています",
"uploadWorkflow": "ファイルからロードする"
},
"system": {
"logNamespaces": {

View File

@@ -2440,8 +2440,7 @@
"watchUiUpdatesOverview": "Xem Tổng Quan Về Những Cập Nhật Cho Giao Diện Người Dùng",
"items": [
"Nvidia 50xx GPUs: Invoke sử dụng PyTorch 2.7.0, thứ tối quan trọng cho những GPU trên.",
"Mối Quan Hệ Model: Kết nối LoRA với model chính, và LoRA đó sẽ được hiển thị đầu danh sách.",
"IP Adapter: Thủ thuật Phong Cách (Mạnh Mẽ) và Phong Cách (Chính Xác) mới cho model SDXL và SD1.5."
"Mối Quan Hệ Model: Kết nối LoRA với model chính, và LoRA đó sẽ được hiển thị đầu danh sách."
]
},
"upsell": {

View File

@@ -0,0 +1,28 @@
import { Spinner } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
import { useAllEntityAdapters } from 'features/controlLayers/contexts/EntityAdapterContext';
import { computed } from 'nanostores';
import { memo, useMemo } from 'react';
export const CanvasBusySpinner = memo(() => {
const canvasManager = useCanvasManager();
const allEntityAdapters = useAllEntityAdapters();
const $isPendingRectCalculation = useMemo(
() =>
computed(
allEntityAdapters.map(({ transformer }) => transformer.$isPendingRectCalculation),
(...values) => values.some((v) => v)
),
[allEntityAdapters]
);
const isPendingRectCalculation = useStore($isPendingRectCalculation);
const isRasterizing = useStore(canvasManager.stateApi.$isRasterizing);
const isCompositing = useStore(canvasManager.compositor.$isBusy);
if (isRasterizing || isCompositing || isPendingRectCalculation) {
return <Spinner opacity={0.3} />;
}
return null;
});
CanvasBusySpinner.displayName = 'CanvasBusySpinner';

View File

@@ -12,6 +12,7 @@ import { FocusRegionWrapper } from 'common/components/FocusRegionWrapper';
import { CanvasAlertsPreserveMask } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsPreserveMask';
import { CanvasAlertsSelectedEntityStatus } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus';
import { CanvasAlertsSendingToGallery } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo';
import { CanvasBusySpinner } from 'features/controlLayers/components/CanvasBusySpinner';
import { CanvasContextMenuGlobalMenuItems } from 'features/controlLayers/components/CanvasContextMenu/CanvasContextMenuGlobalMenuItems';
import { CanvasContextMenuSelectedEntityMenuItems } from 'features/controlLayers/components/CanvasContextMenu/CanvasContextMenuSelectedEntityMenuItems';
import { CanvasDropArea } from 'features/controlLayers/components/CanvasDropArea';
@@ -106,6 +107,9 @@ export const CanvasMainPanelContent = memo(() => {
<MenuContent />
</Menu>
</Flex>
<Flex position="absolute" bottom={4} insetInlineEnd={4}>
<CanvasBusySpinner />
</Flex>
</CanvasManagerProviderGate>
</Flex>
)}

View File

@@ -168,3 +168,33 @@ export const useEntityAdapter = (
assert(adapter, 'useEntityAdapter must be used within a EntityAdapterContext');
return adapter;
};
export const useAllEntityAdapters = () => {
const canvasManager = useCanvasManager();
const regionalGuidanceAdapters = useSyncExternalStore(
canvasManager.adapters.regionMasks.subscribe,
canvasManager.adapters.regionMasks.getSnapshot
);
const rasterLayerAdapters = useSyncExternalStore(
canvasManager.adapters.rasterLayers.subscribe,
canvasManager.adapters.rasterLayers.getSnapshot
);
const controlLayerAdapters = useSyncExternalStore(
canvasManager.adapters.controlLayers.subscribe,
canvasManager.adapters.controlLayers.getSnapshot
);
const inpaintMaskAdapters = useSyncExternalStore(
canvasManager.adapters.inpaintMasks.subscribe,
canvasManager.adapters.inpaintMasks.getSnapshot
);
const allEntityAdapters = useMemo(() => {
return [
...Array.from(rasterLayerAdapters.values()),
...Array.from(controlLayerAdapters.values()),
...Array.from(inpaintMaskAdapters.values()),
...Array.from(regionalGuidanceAdapters.values()),
];
}, [controlLayerAdapters, inpaintMaskAdapters, rasterLayerAdapters, regionalGuidanceAdapters]);
return allEntityAdapters;
};

View File

@@ -24,12 +24,13 @@ import {
selectCanvasSlice,
selectEntity,
} from 'features/controlLayers/store/selectors';
import {
type CanvasEntityIdentifier,
type CanvasRenderableEntityState,
isRasterLayerEntityIdentifier,
type Rect,
import type {
CanvasEntityIdentifier,
CanvasRenderableEntityState,
LifecycleCallback,
Rect,
} from 'features/controlLayers/store/types';
import { isRasterLayerEntityIdentifier } from 'features/controlLayers/store/types';
import { toast } from 'features/toast/toast';
import Konva from 'konva';
import { atom } from 'nanostores';
@@ -40,11 +41,6 @@ import stableHash from 'stable-hash';
import { assert } from 'tsafe';
import type { Jsonifiable, JsonObject } from 'type-fest';
// Ideally, we'd type `adapter` as `CanvasEntityAdapterBase`, but the generics make this tricky. `CanvasEntityAdapter`
// is a union of all entity adapters and is functionally identical to `CanvasEntityAdapterBase`. We'll need to do a
// type assertion below in the `onInit` method, which calls these callbacks.
type InitCallback = (adapter: CanvasEntityAdapter) => Promise<boolean>;
export abstract class CanvasEntityAdapterBase<
T extends CanvasRenderableEntityState,
U extends string,
@@ -118,7 +114,7 @@ export abstract class CanvasEntityAdapterBase<
/**
* Callbacks that are executed when the module is initialized.
*/
private static initCallbacks = new Set<InitCallback>();
private static initCallbacks = new Set<LifecycleCallback>();
/**
* Register a callback to be run when an entity adapter is initialized.
@@ -165,7 +161,7 @@ export abstract class CanvasEntityAdapterBase<
* return false;
* });
*/
static registerInitCallback = (callback: InitCallback) => {
static registerInitCallback = (callback: LifecycleCallback) => {
const wrapped = async (adapter: CanvasEntityAdapter) => {
const result = await callback(adapter);
if (result) {

View File

@@ -13,7 +13,7 @@ import {
roundRect,
} from 'features/controlLayers/konva/util';
import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
import type { Coordinate, Rect, RectWithRotation } from 'features/controlLayers/store/types';
import type { Coordinate, LifecycleCallback, Rect, RectWithRotation } from 'features/controlLayers/store/types';
import { toast } from 'features/toast/toast';
import Konva from 'konva';
import type { GroupConfig } from 'konva/lib/Group';
@@ -123,7 +123,7 @@ export class CanvasEntityTransformer extends CanvasModuleBase {
/**
* Whether the transformer is currently calculating the rect of the parent.
*/
$isPendingRectCalculation = atom<boolean>(true);
$isPendingRectCalculation = atom<boolean>(false);
/**
* A set of subscriptions that should be cleaned up when the transformer is destroyed.
@@ -177,6 +177,11 @@ export class CanvasEntityTransformer extends CanvasModuleBase {
*/
transformMutex = new Mutex();
/**
* Callbacks that are executed when the bbox is updated.
*/
private static bboxUpdatedCallbacks = new Set<LifecycleCallback>();
konva: {
transformer: Konva.Transformer;
proxyRect: Konva.Rect;
@@ -908,6 +913,8 @@ export class CanvasEntityTransformer extends CanvasModuleBase {
this.parent.renderer.konva.objectGroup.setAttrs(groupAttrs);
this.parent.bufferRenderer.konva.group.setAttrs(groupAttrs);
}
CanvasEntityTransformer.runBboxUpdatedCallbacks(this.parent);
};
calculateRect = debounce(() => {
@@ -1026,6 +1033,23 @@ export class CanvasEntityTransformer extends CanvasModuleBase {
this.konva.outlineRect.visible(false);
};
static registerBboxUpdatedCallback = (callback: LifecycleCallback) => {
const wrapped = async (adapter: CanvasEntityAdapter) => {
const result = await callback(adapter);
if (result) {
this.bboxUpdatedCallbacks.delete(wrapped);
}
return result;
};
this.bboxUpdatedCallbacks.add(wrapped);
};
private static runBboxUpdatedCallbacks = (adapter: CanvasEntityAdapter) => {
for (const callback of this.bboxUpdatedCallbacks) {
callback(adapter);
}
};
repr = () => {
return {
id: this.id,

View File

@@ -1,7 +1,7 @@
import type { Property } from 'csstype';
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase';
import { getKonvaNodeDebugAttrs, getPrefixedId } from 'features/controlLayers/konva/util';
import { getKonvaNodeDebugAttrs, getPrefixedId, getRectUnion } from 'features/controlLayers/konva/util';
import type { Coordinate, Dimensions, Rect, StageAttrs } from 'features/controlLayers/store/types';
import Konva from 'konva';
import type { KonvaEventObject } from 'konva/lib/Node';
@@ -186,6 +186,18 @@ export class CanvasStageModule extends CanvasModuleBase {
}
};
/**
* Fits the bbox and layers to the stage. The union of the bbox and the visible layers will be centered and scaled
* to fit the stage with some padding.
*/
fitBboxAndLayersToStage = (): void => {
const layersRect = this.manager.compositor.getVisibleRectOfType();
const bboxRect = this.manager.stateApi.getBbox().rect;
const unionRect = getRectUnion(layersRect, bboxRect);
this.log.trace({ bboxRect, layersRect, unionRect }, 'Fitting bbox and layers to stage');
this.fitRect(unionRect);
};
/**
* Fits a rectangle to the stage. The rectangle will be centered and scaled to fit the stage with some padding.
*
@@ -218,14 +230,23 @@ export class CanvasStageModule extends CanvasModuleBase {
this._intendedScale = scale;
this._activeSnapPoint = null;
this.konva.stage.setAttrs({
const tween = new Konva.Tween({
node: this.konva.stage,
duration: 0.15,
x,
y,
scaleX: scale,
scaleY: scale,
easing: Konva.Easings.EaseInOut,
onUpdate: () => {
this.syncStageAttrs();
},
onFinish: () => {
this.syncStageAttrs();
tween.destroy();
},
});
this.syncStageAttrs({ x, y, scale });
tween.play();
};
/**

View File

@@ -1,3 +1,4 @@
import type { CanvasEntityAdapter } from 'features/controlLayers/konva/CanvasEntity/types';
import { fetchModelConfigByIdentifier } from 'features/metadata/util/modelFetchingHelpers';
import { zMainModelBase, zModelIdentifierField } from 'features/nodes/types/common';
import type { ParameterLoRAModel } from 'features/parameters/types/parameterSchemas';
@@ -611,3 +612,7 @@ export const isMaskEntityIdentifier = (
): entityIdentifier is CanvasEntityIdentifier<'inpaint_mask' | 'regional_guidance'> => {
return isInpaintMaskEntityIdentifier(entityIdentifier) || isRegionalGuidanceEntityIdentifier(entityIdentifier);
};
// Ideally, we'd type `adapter` as `CanvasEntityAdapterBase`, but the generics make this tricky. `CanvasEntityAdapter`
// is a union of all entity adapters and is functionally identical to `CanvasEntityAdapterBase`.
export type LifecycleCallback = (adapter: CanvasEntityAdapter) => Promise<boolean>;

View File

@@ -1,6 +1,7 @@
import type { AppDispatch, RootState } from 'app/store/store';
import { deepClone } from 'common/util/deepClone';
import { selectDefaultIPAdapter, selectDefaultRefImageConfig } from 'features/controlLayers/hooks/addLayerHooks';
import { CanvasEntityTransformer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityTransformer';
import { getPrefixedId } from 'features/controlLayers/konva/util';
import { canvasReset } from 'features/controlLayers/store/actions';
import {
@@ -173,15 +174,24 @@ export const newCanvasFromImage = async (arg: {
imageObject = imageDTOToImageObject(imageDTO);
}
const { x, y } = selectBboxRect(state);
const addFitOnLayerInitCallback = (adapterId: string) => {
CanvasEntityTransformer.registerBboxUpdatedCallback((adapter) => {
// Skip the callback if the adapter is not the one we are creating
if (adapter.id !== adapterId) {
return Promise.resolve(false);
}
adapter.manager.stage.fitBboxAndLayersToStage();
return Promise.resolve(true);
});
};
switch (type) {
case 'raster_layer': {
const overrides = {
id: getPrefixedId('raster_layer'),
objects: [imageObject],
position: { x, y },
} satisfies Partial<CanvasRasterLayerState>;
addFitOnLayerInitCallback(overrides.id);
dispatch(canvasReset());
// The `bboxChangedFromCanvas` reducer does no validation! Careful!
dispatch(bboxChangedFromCanvas({ x: 0, y: 0, width, height }));
@@ -192,9 +202,9 @@ export const newCanvasFromImage = async (arg: {
const overrides = {
id: getPrefixedId('control_layer'),
objects: [imageObject],
position: { x, y },
controlAdapter: deepClone(initialControlNet),
} satisfies Partial<CanvasControlLayerState>;
addFitOnLayerInitCallback(overrides.id);
dispatch(canvasReset());
// The `bboxChangedFromCanvas` reducer does no validation! Careful!
dispatch(bboxChangedFromCanvas({ x: 0, y: 0, width, height }));
@@ -205,8 +215,8 @@ export const newCanvasFromImage = async (arg: {
const overrides = {
id: getPrefixedId('inpaint_mask'),
objects: [imageObject],
position: { x, y },
} satisfies Partial<CanvasInpaintMaskState>;
addFitOnLayerInitCallback(overrides.id);
dispatch(canvasReset());
// The `bboxChangedFromCanvas` reducer does no validation! Careful!
dispatch(bboxChangedFromCanvas({ x: 0, y: 0, width, height }));
@@ -217,8 +227,8 @@ export const newCanvasFromImage = async (arg: {
const overrides = {
id: getPrefixedId('regional_guidance'),
objects: [imageObject],
position: { x, y },
} satisfies Partial<CanvasRegionalGuidanceState>;
addFitOnLayerInitCallback(overrides.id);
dispatch(canvasReset());
// The `bboxChangedFromCanvas` reducer does no validation! Careful!
dispatch(bboxChangedFromCanvas({ x: 0, y: 0, width, height }));

View File

@@ -1 +1 @@
__version__ = "5.13.0"
__version__ = "5.14.0"