@quantlife/qlchart 0.0.1

package/src/styles/context-menu.css

@@ -0,0 +1,60 @@
+/* ── Chart Context Menu ── */
+.qlchart-context-menu {
+  position: fixed;
+  z-index: 200;
+  background: var(--qlchart-toolbar-bg);
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-md);
+  padding: var(--qlchart-space-sm) 0;
+  min-width: 160px;
+  box-shadow: var(--qlchart-shadow-lg);
+  animation: qlchart-panel-in var(--qlchart-transition-fast);
+}
+
+.qlchart-context-menu-label {
+  padding: var(--qlchart-space-sm) var(--qlchart-space-lg);
+  font-size: var(--qlchart-text-xs);
+  color: var(--qlchart-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.qlchart-context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--qlchart-space-md);
+  width: 100%;
+  padding: 6px var(--qlchart-space-lg);
+  border: none;
+  background: none;
+  color: var(--qlchart-text);
+  font-size: var(--qlchart-text-base);
+  cursor: pointer;
+  text-align: left;
+  transition: background var(--qlchart-transition), color var(--qlchart-transition);
+}
+
+.qlchart-context-menu-item:hover {
+  background: var(--qlchart-hover);
+}
+
+.qlchart-context-menu-item.active {
+  color: var(--qlchart-accent);
+}
+
+.qlchart-context-menu-item .shortcut {
+  margin-left: auto;
+  font-size: var(--qlchart-text-xs);
+  color: var(--qlchart-text-secondary);
+}
+
+.qlchart-context-menu-item:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.qlchart-context-menu-divider {
+  height: 1px;
+  margin: var(--qlchart-space-sm) 0;
+  background: var(--qlchart-border);
+}

package/src/styles/drawing.css

@@ -0,0 +1,524 @@
+/* ── Vertical Drawing Toolbar ── */
+.qlchart-drawing-toolbar-vertical {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  width: 40px;
+  background: var(--qlchart-toolbar-bg);
+  border-right: 1px solid var(--qlchart-border);
+  border-radius: 0 var(--qlchart-radius-md) var(--qlchart-radius-md) 0;
+  padding: var(--qlchart-space-sm) 0;
+  gap: var(--qlchart-space-xs);
+  box-shadow: var(--qlchart-shadow-sm);
+}
+
+.qlchart-dvt-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  margin: 0 var(--qlchart-space-xs);
+  border: none;
+  border-radius: var(--qlchart-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  font-size: var(--qlchart-text-lg);
+  transition: background var(--qlchart-transition), color var(--qlchart-transition);
+}
+
+.qlchart-dvt-btn:hover {
+  background: var(--qlchart-hover);
+}
+
+.qlchart-dvt-btn.active,
+.qlchart-dvt-btn.expanded,
+.qlchart-dvt-btn.has-active {
+  background: var(--qlchart-active);
+}
+
+.qlchart-dvt-btn.active {
+  outline: 1px solid var(--qlchart-accent);
+}
+
+/* disabled 状态 */
+.qlchart-dvt-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.qlchart-dvt-separator {
+  height: 1px;
+  margin: var(--qlchart-space-sm) 6px;
+  background: var(--qlchart-border);
+}
+
+/* ── Sub Panel（弹出子工具面板） ── */
+.qlchart-dvt-category {
+  position: relative;
+}
+
+.qlchart-dvt-subpanel {
+  position: absolute;
+  top: 0;
+  left: 40px;  /* 竖排工具栏右侧 */
+  z-index: 101;
+  display: flex;
+  flex-direction: column;
+  background: var(--qlchart-toolbar-bg);
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-md);
+  padding: var(--qlchart-space-sm);
+  min-width: 120px;
+  box-shadow: var(--qlchart-shadow-md);
+  animation: qlchart-panel-in var(--qlchart-transition);
+}
+
+@keyframes qlchart-panel-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+.qlchart-dvt-sub-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px var(--qlchart-space-md);
+  border: none;
+  border-radius: var(--qlchart-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--qlchart-toolbar-text);
+  transition: background var(--qlchart-transition), color var(--qlchart-transition);
+  white-space: nowrap;
+}
+
+.qlchart-dvt-sub-btn:hover {
+  background: var(--qlchart-hover);
+}
+
+.qlchart-dvt-sub-btn.active {
+  background: var(--qlchart-active);
+  color: var(--qlchart-accent);
+  font-weight: 600;
+}
+
+.qlchart-dvt-sub-label {
+  font-size: var(--qlchart-text-base);
+}
+
+/* ── Drawing Property Panel ── */
+/* ★ V2: 废弃旧的 absolute 定位，改为 Portal + 遮罩层标准 Modal */
+/* .qlchart-drawing-property-panel { ... } — 已废弃 */
+
+/* ★ V2 新增：标准弹出式 Modal 容器 */
+.qlchart-drawing-property-modal {
+  position: relative;
+  z-index: 1;
+  width: 280px;
+  max-width: 90vw;
+  max-height: 80vh;
+  background: var(--qlchart-toolbar-bg);
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-lg);
+  box-shadow: var(--qlchart-shadow-lg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: qlchart-modal-slide-in var(--qlchart-transition);
+}
+
+@keyframes qlchart-modal-slide-in {
+  from { opacity: 0; transform: scale(0.95) translateY(-10px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+/* body 区域 */
+.qlchart-drawing-pp-body {
+  padding: var(--qlchart-space-lg);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.qlchart-drawing-pp-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--qlchart-space-md);
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--qlchart-border);
+  font-size: var(--qlchart-text-md);
+  font-weight: 600;
+  color: var(--qlchart-toolbar-text);
+}
+
+.qlchart-drawing-pp-close {
+  background: none;
+  border: none;
+  color: var(--qlchart-text-secondary);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0;
+  transition: color var(--qlchart-transition);
+}
+
+.qlchart-drawing-pp-close:hover {
+  color: var(--qlchart-text);
+}
+
+.qlchart-drawing-pp-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.qlchart-drawing-pp-row label {
+  font-size: var(--qlchart-text-sm);
+  color: var(--qlchart-text-secondary);
+  min-width: 60px;
+}
+
+/* 颜色选择器美化 */
+.qlchart-drawing-pp-row input[type="color"] {
+  width: 32px;
+  height: 28px;
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-sm);
+  cursor: pointer;
+  padding: 2px;
+  background: var(--qlchart-bg);
+}
+
+/* 滑块美化 */
+.qlchart-drawing-pp-row input[type="range"] {
+  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  background: var(--qlchart-border);
+  border-radius: var(--qlchart-radius-sm);
+  outline: none;
+}
+
+.qlchart-drawing-pp-row input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--qlchart-accent);
+  cursor: pointer;
+  border: 2px solid var(--qlchart-toolbar-bg);
+}
+
+.qlchart-drawing-pp-row input[type="range"]::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--qlchart-accent);
+  cursor: pointer;
+  border: 2px solid var(--qlchart-toolbar-bg);
+}
+
+.qlchart-drawing-pp-value {
+  font-size: var(--qlchart-text-sm);
+  color: var(--qlchart-text);
+  min-width: 24px;
+  text-align: right;
+}
+
+.qlchart-drawing-pp-actions {
+  margin-top: var(--qlchart-space-md);
+  padding-top: 6px;
+  border-top: 1px solid var(--qlchart-border);
+}
+
+.qlchart-drawing-pp-delete {
+  width: 100%;
+  padding: 6px;
+  border: none;
+  border-radius: var(--qlchart-radius-sm);
+  background: rgba(255, 68, 68, 0.15);
+  color: #ff4444;
+  cursor: pointer;
+  font-size: var(--qlchart-text-base);
+  transition: background var(--qlchart-transition);
+}
+
+.qlchart-drawing-pp-delete:hover {
+  background: rgba(255, 68, 68, 0.25);
+}
+
+/* PropertyPanel 动态渲染控件样式 */
+.qlchart-drawing-pp-select {
+  width: 100%;
+  padding: var(--qlchart-space-sm) 6px;
+  background: var(--qlchart-bg);
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-sm);
+  color: var(--qlchart-text);
+  font-size: var(--qlchart-text-base);
+}
+
+.qlchart-drawing-pp-text {
+  width: 100%;
+  padding: var(--qlchart-space-sm) 6px;
+  background: var(--qlchart-bg);
+  border: 1px solid var(--qlchart-border);
+  border-radius: var(--qlchart-radius-sm);
+  color: var(--qlchart-text);
+  font-size: var(--qlchart-text-base);
+}
+
+/* 功能1：拖拽把手 */
+.qlchart-dvt-drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--qlchart-space-sm);
+  cursor: grab;
+  color: var(--qlchart-text-secondary);
+  font-size: var(--qlchart-text-lg);
+  user-select: none;
+  border-radius: 3px;
+  transition: background var(--qlchart-transition), color var(--qlchart-transition);
+}
+
+.qlchart-dvt-drag-handle:hover {
+  background: var(--qlchart-hover);
+  color: var(--qlchart-text);
+}
+
+.qlchart-dvt-drag-handle:active {
+  cursor: grabbing;
+}
+
+/* 拖拽中 */
+.qlchart-drawing-toolbar-vertical.dragging,
+.qlchart-drawing-toolbar-horizontal.dragging {
+  opacity: 0.9;
+  box-shadow: var(--qlchart-shadow-lg);
+  transition: none;
+}
+
+/* 横向工具栏 */
+.qlchart-drawing-toolbar-horizontal {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--qlchart-space-xs);
+  padding: var(--qlchart-space-sm) 6px;
+  height: 40px;
+  width: auto;
+  max-width: calc(100% - 20px);
+
+  background: var(--qlchart-toolbar-bg);
+  border: 1px solid var(--qlchart-border);
+  border-right: none;
+  border-bottom: 1px solid var(--qlchart-border);
+  border-radius: 0 0 var(--qlchart-radius-md) var(--qlchart-radius-md);
+  box-shadow: var(--qlchart-shadow-sm);
+}
+
+.qlchart-drawing-toolbar-horizontal .qlchart-dvt-category {
+  position: relative;
+}
+
+.qlchart-drawing-toolbar-horizontal .qlchart-dvt-subpanel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  flex-direction: column;
+}
+
+.qlchart-drawing-toolbar-horizontal .qlchart-dvt-separator {
+  width: 1px;
+  height: 24px;
+  margin: 0 var(--qlchart-space-xs);
+}
+
+/* 横竖转换按钮 */
+.qlchart-dvt-orientation-toggle {
+  margin-top: auto;
+}
+
+.qlchart-drawing-toolbar-horizontal .qlchart-dvt-orientation-toggle {
+  margin-top: 0;
+  margin-left: auto;
+}
+
+/* Bug3：保存/取消按钮 */
+.qlchart-drawing-pp-edit-actions {
+  display: flex;
+  gap: var(--qlchart-space-sm);
+  margin-bottom: 6px;
+}
+
+.qlchart-drawing-pp-save {
+  flex: 1;
+  padding: 5px;
+  border: none;
+  border-radius: var(--qlchart-radius-sm);
+  background: rgba(38, 166, 154, 0.2);
+  color: #26a69a;
+  cursor: pointer;
+  font-size: var(--qlchart-text-base);
+  transition: background var(--qlchart-transition);
+}
+
+.qlchart-drawing-pp-save:hover {
+  background: rgba(38, 166, 154, 0.3);
+}
+
+.qlchart-drawing-pp-cancel {
+  flex: 1;
+  padding: 5px;
+  border: none;
+  border-radius: var(--qlchart-radius-sm);
+  background: rgba(255, 68, 68, 0.15);
+  color: #ff4444;
+  cursor: pointer;
+  font-size: var(--qlchart-text-base);
+  transition: background var(--qlchart-transition);
+}
+
+.qlchart-drawing-pp-cancel:hover {
+  background: rgba(255, 68, 68, 0.25);
+}
+
+/* ★ Req3：斐波那契级别编辑器 */
+.qlchart-fib-levels-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--qlchart-space-sm);
+  max-height: 200px;
+  overflow-y: auto;
+  padding: var(--qlchart-space-sm);
+  background: var(--qlchart-bg);
+  border-radius: var(--qlchart-radius-sm);
+  border: 1px solid var(--qlchart-border);
+}
+
+.qlchart-fib-level-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--qlchart-text-sm);
+}
+
+.qlchart-fib-level-row input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.qlchart-fib-level-input {
+  width: 50px;
+  padding: var(--qlchart-space-xs) var(--qlchart-space-sm);
+  background: var(--qlchart-bg);
+  border: 1px solid var(--qlchart-border);
+  border-radius: 3px;
+  color: var(--qlchart-text);
+  font-size: var(--qlchart-text-sm);
+  text-align: right;
+}
+
+.qlchart-fib-level-label {
+  color: var(--qlchart-text-secondary);
+  min-width: 40px;
+  font-size: var(--qlchart-text-sm);
+}
+
+/* ★ Bug4修复：删除确认 Modal */
+
+/* ★ V2: 副图 pane 指示器 */
+.qlchart-dvt-pane-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--qlchart-space-xs);
+}
+
+.qlchart-dvt-pane-badge {
+  font-size: var(--qlchart-text-xs);
+  color: var(--qlchart-accent);
+  background: var(--qlchart-active);
+  padding: 2px 6px;
+  border-radius: var(--qlchart-radius-sm);
+  font-weight: 600;
+}
+
+.qlchart-confirm-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 2100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.qlchart-confirm-modal {
+  min-width: 320px;
+  background: var(--qlchart-toolbar-bg, #1e222d);
+  border: 1px solid var(--qlchart-border, #2a2e39);
+  border-radius: var(--qlchart-radius-lg, 8px);
+  box-shadow: var(--qlchart-shadow-lg);
+  padding: 24px;
+  text-align: center;
+}
+
+.qlchart-confirm-icon {
+  font-size: 32px;
+  margin-bottom: 12px;
+}
+
+.qlchart-confirm-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--qlchart-text);
+  margin-bottom: 8px;
+}
+
+.qlchart-confirm-desc {
+  font-size: 13px;
+  color: #787b86;
+  margin-bottom: 20px;
+}
+
+.qlchart-confirm-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+.qlchart-confirm-cancel {
+  padding: 8px 20px;
+  background: var(--qlchart-toolbar-active-bg, #2a2e39);
+  border: 1px solid var(--qlchart-border, #2a2e39);
+  border-radius: 4px;
+  color: var(--qlchart-text);
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.qlchart-confirm-ok {
+  padding: 8px 20px;
+  background: #ef5350;
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  cursor: pointer;
+  font-size: 13px;
+}