@dickpy/dsh-imagegen 1.5.7 → 1.5.8

package/src/client/canvas-workspace.module.css

@@ -130,6 +130,39 @@
   opacity: 0.5;
 }
 
+/* Interactive fluid flowmap dot field lives in a <canvas>; aurora is pure CSS.
+ * Both render themselves at full strength (the 0.5 grid dimming stays off). */
+.flowCanvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.grid[data-mode="flow"],
+.grid[data-mode="aurora"] {
+  opacity: 1;
+}
+
+.grid[data-mode="aurora"] {
+  background-image:
+    radial-gradient(560px 380px at 22% 28%, color-mix(in srgb, var(--dsw-alias-brand-primary) 24%, transparent), transparent 72%),
+    radial-gradient(680px 480px at 78% 62%, rgb(167 139 250 / 20%), transparent 72%),
+    radial-gradient(520px 400px at 48% 88%, rgb(34 211 238 / 17%), transparent 74%);
+  background-size: 220% 220%;
+  background-position: 0% 0%;
+  animation: auroraDrift 20s ease-in-out infinite alternate;
+}
+
+@keyframes auroraDrift {
+  from { background-position: 0% 0%; }
+  to { background-position: 100% 100%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .grid[data-mode="aurora"] { animation: none; }
+}
+
 .grid[data-mode="dots"] {
   background-image: radial-gradient(circle, color-mix(in srgb, var(--dsw-alias-label-primary) 30%, transparent) 1.1px, transparent 1.4px);
 }
@@ -180,7 +213,7 @@
 .backgroundMenu button {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   border: none;
   border-radius: 7px;
   background: transparent;
@@ -383,6 +416,9 @@
   color: var(--dsw-alias-label-tertiary);
   font-size: 12px;
   cursor: pointer;
+  /* .nodeBody disables pointer events for node dragging; the upload button
+   * inside must opt back in or its onClick never fires. */
+  pointer-events: auto;
 }
 
 .nodeEmpty:hover {
@@ -432,45 +468,26 @@
   backdrop-filter: blur(10px);
 }
 
+/* macOS-dock magnification: the pointermove handler on .dock feeds a gaussian
+ * falloff into --dock-scale / --dock-lift, so the hovered icon swells and lifts
+ * while neighbours rise and fall like a zipper as the pointer slides across. */
 .dock .iconButton {
   position: relative;
-  overflow: hidden;
   width: 40px;
   height: 40px;
   border-radius: 11px;
-  transition: transform 0.18s cubic-bezier(0.34, 1.9, 0.64, 1), background 0.15s ease, color 0.15s ease, box-shadow 0.18s ease;
-}
-
-/* water-wave sheen sweeping across + gentle lift on hover */
-.dock .iconButton::before {
-  content: '';
-  position: absolute;
-  top: -4px;
-  bottom: -4px;
-  left: -150%;
-  width: 65%;
-  background: linear-gradient(105deg, transparent, color-mix(in srgb, currentColor 26%, transparent), transparent);
-  transform: skewX(-18deg);
-  opacity: 0;
-  pointer-events: none;
+  transform: translateY(var(--dock-lift, 0px)) scale(var(--dock-scale, 1));
+  transform-origin: 50% 100%;
+  transition: transform 0.16s cubic-bezier(0.33, 1, 0.68, 1), background 0.15s ease, color 0.15s ease, box-shadow 0.18s ease;
 }
 
 .dock .iconButton:not(:disabled):hover {
-  transform: translateY(calc(-3px - var(--dock-lift, 0px)));
+  z-index: 2;
   box-shadow: 0 6px 14px color-mix(in srgb, var(--dsw-alias-label-primary) 20%, transparent);
 }
 
-.dock .iconButton:not(:disabled):hover::before {
-  animation: dockShine 0.55s ease forwards;
-}
-
 .dock .iconButton:not(:disabled):active {
-  transform: translateY(-1px) scale(0.96);
-}
-
-@keyframes dockShine {
-  0% { left: -150%; opacity: 1; }
-  100% { left: 170%; opacity: 1; }
+  transform: translateY(var(--dock-lift, 0px)) scale(0.94);
 }
 
 .dock .iconButton[data-active] {
@@ -553,6 +570,70 @@
   max-width: 128px;
 }
 
+/* custom dropdown button + popup (styled replacement for native <select>) */
+.composerSelect {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 8px 0 11px;
+  border-radius: 999px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font-size: 11.5px;
+  min-width: 0;
+  max-width: 138px;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.composerSelect:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.composerSelect[data-open] { border-color: var(--dsw-alias-brand-primary); color: var(--dsw-alias-brand-primary); }
+.composerSelect svg { flex: none; opacity: 0.65; }
+.composerSelect[data-open] svg { opacity: 0.9; }
+
+.composerSelectValue {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.composerSelectMenu {
+  position: fixed;
+  z-index: 95;
+  max-height: 264px;
+  overflow: auto;
+  padding: 5px;
+  border-radius: 11px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  background: color-mix(in srgb, var(--dsw-alias-bg-layer-1) 97%, transparent);
+  box-shadow: 0 14px 38px rgb(15 23 42 / 18%);
+  backdrop-filter: blur(10px);
+}
+
+.composerSelectMenu button {
+  display: block;
+  width: 100%;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font-size: 12.5px;
+  line-height: 1.45;
+  padding: 7px 10px;
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.composerSelectMenu button:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.composerSelectMenu button[data-selected] {
+  color: var(--dsw-alias-brand-primary);
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 12%, transparent);
+}
+
 .composerSend {
   margin-left: auto;
   width: 34px;
@@ -631,6 +712,25 @@
 
 .handle:hover { background: var(--dsw-alias-brand-primary); }
 
+/* The source handle doubles as a quick-add button (hover opens the node
+ * picker, drag connects) so it reads as a Dify-style big ⊕. */
+.handleRight {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  right: -10px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--dsw-alias-brand-primary);
+}
+
+.handleRight::after { content: '+'; }
+
+.handleRight:hover { color: var(--dsw-alias-bg-layer-1); transform: translateY(-50%) scale(1.12); }
+
 .resizeHandle {
   position: absolute;
   right: -5px;
@@ -681,15 +781,13 @@
 
 .connectionPath {
   fill: none;
-  stroke: color-mix(in srgb, var(--dsw-alias-label-primary) 38%, transparent);
-  stroke-width: 2;
-  stroke-opacity: 0.85;
+  stroke-width: 1.8;
+  stroke-opacity: 0.9;
   pointer-events: none;
 }
 
 .connectionActive {
-  stroke: var(--dsw-alias-brand-primary);
-  stroke-width: 3;
+  stroke-width: 2.6;
   stroke-opacity: 1;
   filter: drop-shadow(0 0 6px color-mix(in srgb, var(--dsw-alias-brand-primary) 45%, transparent));
 }
@@ -702,6 +800,32 @@
   pointer-events: none;
 }
 
+/* Flow overlay: a soft light band glides from the path start (source) toward
+ * its end (target), echoing the direction of the gradient and arrowhead. */
+.connectionFlow {
+  fill: none;
+  stroke: var(--dsw-alias-brand-primary);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-dasharray: 30 90;
+  opacity: 0.4;
+  pointer-events: none;
+  animation: connectionFlow 1.6s linear infinite;
+}
+
+.connectionFlowActive {
+  stroke: var(--dsw-alias-brand-primary);
+  opacity: 0.85;
+}
+
+@keyframes connectionFlow {
+  to { stroke-dashoffset: -120; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .connectionFlow { animation: none; opacity: 0.35; }
+}
+
 /* --------------------------------------------------------- empty hint */
 
 .emptyHint {

package/src/client/locales.ts

@@ -44,6 +44,8 @@ export const zh = {
   'canvas.backgroundLines': '网格线',
   'canvas.backgroundDiagonal': '斜线',
   'canvas.backgroundChecker': '棋盘格',
+  'canvas.backgroundFlow': '流体扰动',
+  'canvas.backgroundAurora': '极光',
   'canvas.backgroundBlank': '空白',
   'canvas.backgroundUpload': '上传自定义背景…',
   'canvas.backgroundRemove': '移除自定义背景',
@@ -71,6 +73,7 @@ export const zh = {
   'canvas.taskLost': '生成任务已丢失（服务重启），请重试',
   'canvas.emptyImageNode': '点击上传图片',
   'canvas.connectHint': '拖到其他节点建立连线',
+  'canvas.connectAddHint': '拖到其他节点建立连线；点击直接添加下一节点',
   'canvas.resizeHint': '拖动调整大小（图片锁定比例）',
   'canvas.count': '生成数量',
   'canvas.configNode': '生成配置',
@@ -98,10 +101,10 @@ export const zh = {
   'canvas.tabUpload': '上传',
   'canvas.tabHistory': '历史记录',
   'canvas.tabGallery': '素材库',
-  'canvas.imageMenuUpload': '上传本地图片',
-  'canvas.imageMenuAssets': '从素材库选择',
-  'canvas.imageMenuHistory': '从历史记录选择',
-  'canvas.imageMenuGenerate': 'AI 生成新图',
+  'canvas.imageMenuUpload': '本地图片',
+  'canvas.imageMenuAssets': '素材库',
+  'canvas.imageMenuHistory': '历史记录',
+  'canvas.imageMenuGenerate': 'AI生成',
   'canvas.tabGenerate': 'AI 生成',
   'canvas.dropHint': '图片拖动到此处即可添加',
   'canvas.dropSub': '支持多选，PNG / JPG / WebP / GIF',
@@ -555,6 +558,8 @@ export const en: Record<keyof typeof zh, string> = {
   'canvas.backgroundLines': 'Grid lines',
   'canvas.backgroundDiagonal': 'Diagonal',
   'canvas.backgroundChecker': 'Checkerboard',
+  'canvas.backgroundFlow': 'Fluid flow',
+  'canvas.backgroundAurora': 'Aurora',
   'canvas.backgroundBlank': 'Blank',
   'canvas.backgroundUpload': 'Upload custom background…',
   'canvas.backgroundRemove': 'Remove custom background',
@@ -582,6 +587,7 @@ export const en: Record<keyof typeof zh, string> = {
   'canvas.taskLost': 'Generation task lost (service restarted); please retry',
   'canvas.emptyImageNode': 'Click to upload an image',
   'canvas.connectHint': 'Drag onto another node to connect',
+  'canvas.connectAddHint': 'Drag onto another node to connect, or click to add the next node',
   'canvas.resizeHint': 'Drag to resize (image ratio locked)',
   'canvas.count': 'Image count',
   'canvas.configNode': 'Generation config',
@@ -609,10 +615,10 @@ export const en: Record<keyof typeof zh, string> = {
   'canvas.tabUpload': 'Upload',
   'canvas.tabHistory': 'History',
   'canvas.tabGallery': 'Assets',
-  'canvas.imageMenuUpload': 'Upload local image',
-  'canvas.imageMenuAssets': 'Pick from assets',
-  'canvas.imageMenuHistory': 'Pick from history',
-  'canvas.imageMenuGenerate': 'Generate with AI',
+  'canvas.imageMenuUpload': 'Local image',
+  'canvas.imageMenuAssets': 'Assets',
+  'canvas.imageMenuHistory': 'History',
+  'canvas.imageMenuGenerate': 'AI generate',
   'canvas.tabGenerate': 'AI generate',
   'canvas.dropHint': 'Drop images here to add them',
   'canvas.dropSub': 'Multiple files, PNG / JPG / WebP / GIF',
@@ -1058,6 +1064,8 @@ export const ru: Record<keyof typeof zh, string> = {
   'canvas.backgroundLines': 'Сетка',
   'canvas.backgroundDiagonal': 'Диагональ',
   'canvas.backgroundChecker': 'Шахматка',
+  'canvas.backgroundFlow': 'Жидкостный поток',
+  'canvas.backgroundAurora': 'Аврора',
   'canvas.backgroundBlank': 'Пустой',
   'canvas.backgroundUpload': 'Загрузить свой фон…',
   'canvas.backgroundRemove': 'Убрать свой фон',
@@ -1085,6 +1093,7 @@ export const ru: Record<keyof typeof zh, string> = {
   'canvas.taskLost': 'Задача генерации потеряна (сервис перезапущен); повторите',
   'canvas.emptyImageNode': 'Нажмите, чтобы загрузить изображение',
   'canvas.connectHint': 'Потяните к другому узлу, чтобы соединить',
+  'canvas.connectAddHint': 'Потяните к другому узлу, чтобы соединить; клик добавляет следующий узел',
   'canvas.resizeHint': 'Потяните, чтобы изменить размер (пропорции зафиксированы)',
   'canvas.count': 'Кол-во изображений',
   'canvas.configNode': 'Конфигурация генерации',
@@ -1112,10 +1121,10 @@ export const ru: Record<keyof typeof zh, string> = {
   'canvas.tabUpload': 'Загрузка',
   'canvas.tabHistory': 'История',
   'canvas.tabGallery': 'Материалы',
-  'canvas.imageMenuUpload': 'Загрузить локальное изображение',
-  'canvas.imageMenuAssets': 'Выбрать из материалов',
-  'canvas.imageMenuHistory': 'Выбрать из истории',
-  'canvas.imageMenuGenerate': 'Создать через AI',
+  'canvas.imageMenuUpload': 'Локальное изображение',
+  'canvas.imageMenuAssets': 'Материалы',
+  'canvas.imageMenuHistory': 'История',
+  'canvas.imageMenuGenerate': 'AI-генерация',
   'canvas.tabGenerate': 'AI-генерация',
   'canvas.dropHint': 'Перетащите изображения сюда',
   'canvas.dropSub': 'Несколько файлов, PNG / JPG / WebP / GIF',