-
- );
-}
-
-type SeedreamLayerBox = [number, number, number, number];
-
-type SeedreamLayerInteraction = {
- id: string;
- mode: "move" | "resize";
- pointerId: number;
- startX: number;
- startY: number;
- startBox: SeedreamLayerBox;
-};
-
-const fullSeedreamLayerBox: SeedreamLayerBox = [0, 0, 1000, 1000];
-
-function initialSeedreamLayerTransforms(layers: SeedreamLayerOutput[], baseSize: [number, number]) {
- return Object.fromEntries(layers.map((layer, index) => [layer.asset.id, initialSeedreamLayerBox(layer, baseSize, index)])) as Record
-
-
-
-
-
-
-
-
-
- {!hiddenIds.has(base.asset.id) ? })
: null}
- {displayLayers.map((layer, stackIndex) => {
- const box = transforms[layer.asset.id];
- if (!box || hiddenIds.has(layer.asset.id)) return null;
- return (
-
- );
- })}
-
- {selectedTransform ? (
-
- {selectedLayer?.name}
- X {Math.round(selectedTransform[0] / 10)}%
- Y {Math.round(selectedTransform[1] / 10)}%
- 宽 {Math.round((selectedTransform[2] - selectedTransform[0]) / 10)}%
- 高 {Math.round((selectedTransform[3] - selectedTransform[1]) / 10)}%
-
- ) : 底图固定在画布底部
}
-
- 合成导出采用当前显隐、位置、尺寸和层级
-
- {downloadError ?
-
-
-
- {downloadError}
: null}
-
- setSelectedId(output.asset.id)}
- onKeyDown={(event) => {
- if (event.key === "Enter" || event.key === " ") {
- event.preventDefault();
- setSelectedId(output.asset.id);
- }
- }}
- >
-
- })
-
- {isBase ? "底图" : output.name}
- {output.description || (isBase ? "固定画布" : `原始层级 ${output.zIndex}`)}
-
- {isBase ? 固定 : (
-
-
-
-
- )}
- event.stopPropagation()}>
-
- );
- })}
-
- 图层上方图层优先显示
- {listOutputs.map((output) => {
- const isBase = output === base;
- const visible = !hiddenIds.has(output.asset.id);
- const orderIndex = layerOrder.indexOf(output.asset.id);
- return (
-
+
+
+ {saveState === "loading" || saveState === "saving" ?
+
+
+
+
+ {editDialog ? (
+
+
+
+
+
+
+
+
+
+
+
+
+ setSelectedId(baseSelectionID)}
+ >
+ {draft.baseVisible ? })
: null}
+ {displayLayers.map((layer, stackIndex) => {
+ const asset = assetCache.get(layer.assetId);
+ if (!asset || !layer.visible) return null;
+ return (
+
+ );
+ })}
+
+ {selectedLayer ? (
+
+ {selectedLayer.name}
+ X {Math.round(selectedLayer.box[0] / 10)}%
+ Y {Math.round(selectedLayer.box[1] / 10)}%
+ 宽 {Math.round((selectedLayer.box[2] - selectedLayer.box[0]) / 10)}%
+ 高 {Math.round((selectedLayer.box[3] - selectedLayer.box[1]) / 10)}%
+
+
+ ) : 底图固定在画布底部
}
+
+ 合成导出采用当前显隐、位置、尺寸、旋转和层级
+
+ {saveError ?
+
+
+
+ {saveError}
: null}
+ {actionError ? {actionError}
: null}
+ {actionNotice ? {actionNotice}
: null}
+
+
+
+
+ {libraryOpen ? (
+ 图层上方图层优先显示
+
+
+
+ ) : null}
+
+
+
+
+
+
+ void handleLayerUpload(event)} />
+
+ {libraryAssets.map((asset) => (
+
+ ))}
+ {!libraryAssets.length ?
+ 暂无匹配图片，可直接上传新图片。
: null}
+
+ {listLayers.map((layer) => {
+ const asset = assetCache.get(layer.assetId);
+ const orderIndex = draft.layers.findIndex((item) => item.id === layer.id);
+ return (
+ setSelectedId(layer.id)}
+ onKeyDown={(event) => {
+ if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault();
+ setSelectedId(layer.id);
+ }
+ }}
+ >
+
+ {asset ? })
:
+ );
+ })}
+ setSelectedId(baseSelectionID)}>
+
+
+ 底图固定画布
+ 固定
+ event.stopPropagation()}>
+
+
+
+
+
+
+ Seedream 5.0 Pro
+
+
+ 编辑图层：{draft.layers.find((layer) => layer.id === editDialog.layerId)?.name}
+
+
+ {editDialog.result ? })
: selectedAsset ? })
:
+