drawui-react 0.2.2 → 0.3.1

package/dist/styles.css

@@ -82,7 +82,7 @@
 }
 .drawui-toolbar {
   position: fixed;
-  top: 20px;
+  top: 5px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
@@ -98,6 +98,7 @@
   z-index: 100;
 }
 .drawui-toolbar-button {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -137,7 +138,7 @@
 }
 .drawui-toolbar-container {
   position: fixed;
-  top: 20px;
+  top: 5px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 100;
@@ -147,7 +148,7 @@
 }
 .drawui-toolbar-shape-grid {
   position: absolute;
-  top: calc(100% + 8px);
+  top: calc(100% + 14px);
   left: 50%;
   transform: translateX(-50%);
   display: grid;
@@ -162,6 +163,87 @@
   border: 1px solid var(--dw-panel-border);
   background: var(--dw-panel-bg-deep);
   animation: dropdownFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 500;
+}
+.drawui-shape-menu {
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  max-height: min(72vh, 560px);
+  padding: 8px;
+}
+.drawui-shape-menu-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-gutter: stable;
+  padding-right: 6px;
+}
+.drawui-shape-menu-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+.drawui-shape-menu-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.drawui-shape-menu-scroll::-webkit-scrollbar-thumb {
+  background: var(--dw-dash);
+  border-radius: 3px;
+}
+.drawui-shape-menu-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--dw-text-muted);
+}
+.drawui-shape-tip {
+  position: absolute;
+  z-index: 2000;
+  transform: translateX(-50%);
+  width: max-content;
+  max-width: 240px;
+  padding: 5px 9px;
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
+  color: var(--dw-tooltip-text);
+  background: var(--dw-tooltip-bg);
+  border-radius: 8px;
+  box-shadow: var(--dw-shadow-tooltip);
+  pointer-events: none;
+}
+.drawui-shape-tip::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  margin-left: -4px;
+  border: 4px solid transparent;
+}
+.drawui-shape-tip.is-below::after {
+  top: -8px;
+  border-bottom-color: var(--dw-tooltip-bg);
+}
+.drawui-shape-tip.is-above {
+  transform: translate(-50%, -100%);
+}
+.drawui-shape-tip.is-above::after {
+  bottom: -8px;
+  border-top-color: var(--dw-tooltip-bg);
+}
+.drawui-shape-group + .drawui-shape-group {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--dw-dash);
+}
+.drawui-shape-group-title {
+  margin: 0 0 4px 2px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--dw-text-muted);
+  user-select: none;
+}
+.drawui-shape-group-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 36px);
+  gap: 2px;
 }
 @keyframes dropdownFadeIn {
   from {
@@ -210,9 +292,41 @@
   white-space: nowrap;
   justify-content: flex-start;
 }
+.drawui-toolbar-color-chip {
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 1.5px solid #fff;
+  box-shadow: 0 0 0 1px var(--dw-swatch-border);
+  pointer-events: none;
+}
+.drawui-toolbar-highlighter-grid {
+  grid-template-columns: repeat(3, 26px);
+  gap: 8px;
+  padding: 10px;
+}
+.drawui-highlighter-swatch {
+  box-sizing: border-box;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.drawui-highlighter-swatch:hover {
+  transform: scale(1.1);
+}
+.drawui-highlighter-swatch.active {
+  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--dw-primary);
+}
 .drawui-zoom-control {
   position: fixed;
-  top: 20px;
+  top: 5px;
   right: 20px;
   display: flex;
   flex-direction: column;
@@ -255,9 +369,8 @@
 }
 .drawui-status-bar {
   position: fixed;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
+  right: 20px;
+  bottom: calc(20px + var(--dw-status-bar-lift, 0px));
   display: flex;
   align-items: center;
   gap: 16px;
@@ -312,6 +425,43 @@
     transform: translateY(0);
   }
 }
+[data-drawui-tip] {
+  position: relative;
+}
+[data-drawui-tip]::after {
+  content: attr(data-drawui-tip);
+  position: absolute;
+  left: 50%;
+  top: calc(100% + 8px);
+  transform: translateX(-50%);
+  width: max-content;
+  max-width: 240px;
+  padding: 5px 9px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.4;
+  text-align: center;
+  word-break: break-word;
+  color: var(--dw-tooltip-text);
+  background: var(--dw-tooltip-bg);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: 8px;
+  box-shadow: var(--dw-shadow-tooltip);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 2000;
+}
+[data-drawui-tip]:hover::after,
+[data-drawui-tip]:focus-visible::after {
+  opacity: 1;
+  transition-delay: 0.35s;
+}
+[data-drawui-tip][data-drawui-tip-pos='top']::after {
+  top: auto;
+  bottom: calc(100% + 8px);
+}
 .drawui-toast {
   position: absolute;
   top: 20px;
@@ -349,80 +499,220 @@
     transform: translateX(-50%) translateY(0) scale(1);
   }
 }
-.drawui-style-panel {
+.drawui-style-floating {
   position: fixed;
-  bottom: 60px;
-  left: 50%;
-  transform: translateX(-50%);
+  inset: 0;
+  z-index: 100;
+  pointer-events: none;
+}
+.drawui-style-toolbar {
+  position: absolute;
   display: flex;
-  align-items: stretch;
-  gap: 0;
-  padding: 10px 16px;
+  align-items: center;
+  gap: 2px;
+  padding: 5px;
   background: var(--dw-panel-bg);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-radius: 12px;
-  box-shadow: var(--dw-shadow-xl);
+  box-shadow: var(--dw-shadow-lg);
   border: 1px solid var(--dw-panel-border);
-  z-index: 100;
-  animation: drawui-style-panel-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-@keyframes drawui-style-panel-in {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(8px) scale(0.97);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0) scale(1);
-  }
+  pointer-events: auto;
+  /* 只做淡入、不做位移/缩放，避免出现"抖动一下"的观感 */
+  animation: drawui-style-toolbar-in 0.12s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.drawui-style-col {
+.drawui-style-tool-btn {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 0 12px;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  color: var(--dw-text-ink);
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.12s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.drawui-style-col:first-child {
-  padding-left: 0;
+.drawui-style-tool-btn:hover {
+  background: var(--dw-hover-bg);
 }
-.drawui-style-col:last-child {
-  padding-right: 0;
+.drawui-style-tool-btn.active {
+  background: var(--dw-primary-weak);
 }
-.drawui-style-divider {
-  width: 1px;
-  align-self: stretch;
-  background-image: repeating-linear-gradient(to bottom, var(--dw-dash) 0, var(--dw-dash) 4px, transparent 4px, transparent 8px);
+.drawui-st-swatch {
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  border: 1.5px solid var(--dw-swatch-border);
+}
+.drawui-st-none {
+  background: #fff linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%) 0 0 / 6px 6px;
+}
+.drawui-st-frame {
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border-width: 3px;
+  border-style: solid;
+}
+/* 无色边框：白底 + 格纹，避免图标看起来是"空的" */
+.drawui-st-frame-none {
+  border-color: var(--dw-border-strong);
+  background: #fff linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%) 0 0 / 6px 6px;
 }
-.drawui-style-group {
+.drawui-st-line {
+  width: 18px;
+  height: 4px;
+  border-radius: 2px;
+}
+.drawui-st-line-none {
+  background: var(--dw-border-strong);
+}
+.drawui-st-text {
+  font-size: 16px;
+  font-weight: 700;
+}
+.drawui-st-hl {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  border: 1.5px solid var(--dw-swatch-border);
+  font-size: 11px;
+  font-weight: 700;
+  color: #1f2937;
+}
+.drawui-style-popover {
+  position: absolute;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 8px;
+  min-width: 228px;
+  padding: 10px 12px;
+  background: var(--dw-panel-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 12px;
+  box-shadow: var(--dw-shadow-xl);
+  border: 1px solid var(--dw-panel-border);
+  background: var(--dw-panel-bg-deep);
+  pointer-events: auto;
+  animation: drawui-style-pop-in 0.12s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.drawui-style-group-label {
+.drawui-style-popover-title {
   font-size: 11px;
   font-weight: 500;
   color: var(--dw-text-muted);
   line-height: 1;
 }
+.drawui-muted-hint {
+  max-width: 180px;
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--dw-text-muted);
+}
+.drawui-arrow-menu {
+  display: block;
+  width: max-content;
+  padding: 10px 12px;
+}
+.drawui-arrow-menu .drawui-style-popover-title {
+  margin-bottom: 6px;
+}
+.drawui-arrow-menu .drawui-connection-row + .drawui-style-popover-title {
+  margin-top: 10px;
+}
+@keyframes drawui-style-toolbar-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes drawui-style-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 .drawui-color-row {
-  display: flex;
-  align-items: center;
-  gap: 3px;
+  display: grid;
+  grid-template-columns: repeat(9, 20px);
+  gap: 6px;
 }
 .drawui-color-swatch {
-  width: 18px;
-  height: 18px;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   border: 1.5px solid var(--dw-swatch-border);
   cursor: pointer;
   padding: 0;
-  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+  /* 当前选中色：内白环 + 主色外环 */
 }
 .drawui-color-swatch:hover {
-  transform: scale(1.18);
+  transform: scale(1.14);
   border-color: var(--dw-swatch-border-hover);
 }
+.drawui-color-swatch.active {
+  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--dw-primary);
+}
+/* 自定义色：右下角小三角标记，区分内置色 */
+.drawui-color-custom {
+  position: relative;
+}
+.drawui-color-custom::before {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 0 7px 7px;
+  border-color: transparent transparent var(--dw-primary) transparent;
+  border-bottom-right-radius: 50%;
+}
+/* 添加颜色：内嵌原生取色器 */
+.drawui-color-add {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dw-panel-bg-solid);
+  border-style: dashed;
+  color: var(--dw-text-muted);
+  font-size: 15px;
+  line-height: 1;
+}
+.drawui-color-add:hover {
+  color: var(--dw-primary);
+  border-color: var(--dw-primary);
+  transform: scale(1.06);
+}
+.drawui-color-add-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  opacity: 0;
+  cursor: pointer;
+}
 .drawui-color-swatch-transparent {
   position: relative;
   background: #fff linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%) 0 0 / 6px 6px;
@@ -437,6 +727,72 @@
   background: var(--dw-danger);
   transform: rotate(-45deg);
 }
+.drawui-opacity-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 2px;
+}
+.drawui-opacity-label {
+  font-size: 11px;
+  color: var(--dw-text-muted);
+  white-space: nowrap;
+}
+.drawui-opacity-value {
+  font-size: 11px;
+  color: var(--dw-text-muted);
+  min-width: 34px;
+  text-align: right;
+}
+.drawui-opacity-slider {
+  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  /* 关键：把 input 本身撑高到 16px，否则命中区域只有 4px 高 → 滑块基本拖不动 */
+  height: 16px;
+  margin: 0;
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+}
+.drawui-opacity-slider::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--dw-border-strong);
+}
+.drawui-opacity-slider::-moz-range-track {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--dw-border-strong);
+}
+.drawui-opacity-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  /* (轨道高 4 - 滑块高 14) / 2，使滑块在轨道上垂直居中 */
+  margin-top: -5px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 2px solid var(--dw-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.drawui-opacity-slider::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 2px solid var(--dw-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.drawui-opacity-slider:hover::-webkit-slider-thumb {
+  transform: scale(1.1);
+}
+.drawui-opacity-slider:hover::-moz-range-thumb {
+  transform: scale(1.1);
+}
 .drawui-connection-row {
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawui-react",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "type": "module",
   "description": "React wrapper for drawui-core canvas drawing (PNG / SVG / PDF export, UML, mind map)",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "access": "public"
   },
   "dependencies": {
-    "drawui-core": "0.2.2"
+    "drawui-core": "0.3.1"
   },
   "peerDependencies": {
     "react": "^18.3.1"